From ca3853ece4a917e900e55a346a6489151e4b5472 Mon Sep 17 00:00:00 2001
From: Rasmus Andersson <rasmus@notion.se>
Date: Wed, 31 Mar 2021 14:52:41 -0700
Subject: web: lab: improves viz for draw-sample-background

---
 docs/lab/index.html |  2 ++
 docs/lab/lab.css    | 11 ++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

(limited to 'docs')

diff --git a/docs/lab/index.html b/docs/lab/index.html
index f98b9d531..c964e57bb 100644
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@@ -696,6 +696,7 @@ function main() {
     const r = measureDiv.getBoundingClientRect()
     measurePending = false
     lineHeightInput.placeholder = r.height
+    document.documentElement.style.setProperty("--line-height", r.height + "px")
   }
 
   window.addEventListener('load', measure)
@@ -799,6 +800,7 @@ function main() {
   sizeVar = vars.bind('size', (e, v, isInitial) => {
     boxes.style.display = (v > 20) ? 'none' : null
     setCSSProp('font-size', v + 'px')
+    document.documentElement.style.setProperty("--font-size", v + "px")
     setGlyphlistClass('hideNames', v < 36)
     if (varSizeRange && !varSizeSettingValueImpl) {
       varSizeSettingValueImpl = true
diff --git a/docs/lab/lab.css b/docs/lab/lab.css
index bf1ff3a0b..2c22a0346 100644
--- a/docs/lab/lab.css
+++ b/docs/lab/lab.css
@@ -79,6 +79,9 @@
   --surface2-shadow-intensity-hover: 0.75;
   --surface2-shadow-intensity-active: 1.5;
 
+  --highlight-bg: #ddd;
+  --guide-color: rgba(255,0,255,0.15);
+
   --icon-minimize: url(../res/icons/minimize-black.svg);
   --icon-popup: url(../res/icons/popup-black.svg);
   --icon-reset: url(../res/icons/reset-black.svg);
@@ -110,6 +113,9 @@
   --surface2-shadow-intensity-hover: 4;
   --surface2-shadow-intensity-active: 10;
 
+  --highlight-bg: #333;
+  --guide-color: rgba(255,100,255,0.15);
+
   --icon-minimize: url(../res/icons/minimize.svg);
   --icon-popup: url(../res/icons/popup.svg);
   --icon-reset: url(../res/icons/reset.svg);
@@ -665,7 +671,10 @@ body.italic samples {
     color: var(--fgColor);
   }
   :root.draw-sample-background sample {
-    background: var(--surface2-color-bg-active);
+    background: var(--highlight-bg);
+    --guide-width: calc(calc(var(--line-height) - var(--font-size)) / 2);
+    box-shadow: inset 0 var(--guide-width) 0 0 var(--guide-color),
+                inset 0 calc(var(--guide-width) * -1) 0 0 var(--guide-color);
   }
   /*body.secondarySampleDisabled sample { flex-basis: auto; }*/
     sample p {
-- 
cgit v1.2.3