Migration to Manifest v3 (#557)

* working initial migration * remove devbug committed on accident * more dev cruft to not commit * more accidental dev submission * visbug is a popover * handles console pacification * metatips in toplayer * handles in toplayer * labels in toplayer * distance in toplayer * distance fixes with box model overlay * hdr toplayer guides * fixes margin and padding measurement labels * fixes dark mode size text not readable * fixes guides fixed to viewport instead of page * fixes label fixed to viewport instead of page * fixes stuff in front of handle dots * manifest v3 hotkey fix * restore gridlines * better toplayer stacking of elements * pacify bundler * gridline fixes * version bump prep * better gradient support * support new color spaces * metatip nits * remove deprecated event * better label layering * follow preference in a11y tip * contrast updates * metatip design update * update deps so colorjs builds * show apca pass fail * align ally info with header since intrinsic size * fixes bounds overlaying tip * fixes long bg values in metatip * fixes inline styles when things are aligned end * trap scroll in metatip elements * fix negative value apca comparisons * fixes icon alignment * ally tip style nudge * add open props * metatips use colorjs * metatip nits * nudges towards removing tinycolor * fix hueshift * color input cleanup * fix move tool bug after using accessibility tool * blur swatch bg for when transparent * fixes light/dark a11y icon colors * fix color * more neon pink * bug fix * better purple * removes any 3rd party scripts * metatip padding nits * removes a console log * better light/dark mode * square labels * better tips in toolbar helpers * 2 shades lighter on dark theme * better icon colors when not found * bump puppeteer * measurement centering nits * fix all tests but one * fixes test with to an updated plugin command
GoogleChromeLabs · Apr 17, 2024 · 0ae87ac · 0ae87ac
1 parent 667971b
commit 0ae87ac
Show file tree

Hide file tree

Showing 46 changed files with 16,924 additions and 14,430 deletions.
diff --git a/app/components/_variables.css b/app/components/_variables.css
@@ -1,5 +1,10 @@
+@import "open-props/shadows.shadow.min.css";
+@import "open-props/borders.shadow.min.css";
+@import "open-props/gray.shadow.min.css";
+@import "open-props/gray-hsl.shadow.min.css";
+
 :host {
-  --theme-bg: hsl(0 0% 100%);
+  --theme-bg: white;
   --theme-bd: hsl(0 0% 100% / var(--theme-bd-opacity));
   --theme-bd-2: hsl(0 0% 100% / var(--theme-bd-2-opacity));
   --theme-bd-opacity: 1;
@@ -8,10 +13,15 @@
   --theme-blue: hsl(188 90% 45%);
   --theme-purple: hsl(267 100% 58%);
 
-  --theme-text_color: hsl(0 0% 10%);
-  --theme-icon_color: hsl(0 0% 20%);
-  --theme-icon_hover-bg: hsl(0 0% 95%);
-  --theme-icon_active-bg: hsl(0 0% 90%);
+  --neon-pink: color(display-p3 1 0 1);
+  --neon-purple: color(display-p3 .5 0 1);
+  --neon-lime:  color(display-p3 0.25 1 0);
+  --neon-cyan:  color(display-p3 0 1 1);
+
+  --theme-text_color: var(--gray-11);
+  --theme-icon_color: var(--gray-9);
+  --theme-icon_hover-bg: white;
+  --theme-icon_active-bg: white;
 
   --layer-top: 2147483647;
   --layer-1: 2147483646;
@@ -27,14 +37,14 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    --theme-bg: hsl(0 0% 10%);
-    --theme-bd: hsl(0 0% 10% / var(--theme-bd-opacity));
-    --theme-bd-2: hsl(0 0% 10% / var(--theme-bd-2-opacity));
+    --theme-bg: var(--gray-10);
+    --theme-bd: hsl(var(--gray-10-hsl) / var(--theme-bd-opacity));
+    --theme-bd-2: hsl(var(--gray-10-hsl) / var(--theme-bd-2-opacity));
     --theme-color: hsl(330deg 65% 75%);
-    --theme-text_color: hsl(0 0% 90%);
-    --theme-icon_color: hsl(0 0% 80%);
-    --theme-icon_hover-bg: hsl(0 0% 15%);
-    --theme-icon_active-bg: hsl(0 0% 20%);
+    --theme-text_color: var(--gray-0);
+    --theme-icon_color: var(--gray-2);
+    --theme-icon_hover-bg: var(--gray-8);
+    --theme-icon_active-bg: var(--gray-8);
   }
 
   @supports (backdrop-filter: blur(5px)) {

diff --git a/app/components/metatip/ally.element.js b/app/components/metatip/ally.element.js
@@ -1,16 +1,9 @@
 import $ from 'blingblingjs'
 import { Metatip } from './metatip.element.js'
-import { TinyColor } from '@ctrl/tinycolor'
+import { preferredNotation } from '../../features/color.js'
 import { draggable } from '../../features/'
 import { getStyle, getComputedBackgroundColor } from '../../utilities'
-import { getContrastingColor } from '../../utilities'
-import { functionalNotate } from '../../features/color.js'
-
-const modemap = {
-  'hex': 'toHexString',
-  'hsl': 'toHslString',
-  'rgb': 'toRgbString',
-}
+import { contrast_color } from '../../utilities'
 
 export class Ally extends Metatip {
   constructor() {
@@ -44,43 +37,45 @@ export class Ally extends Metatip {
   }
 
   render({el, ally_attributes, contrast_results}) {
-    const colormode = modemap[$('vis-bug').attr('color-mode')]
+    const colormode = $('vis-bug').attr('color-mode')
 
     const foreground = el instanceof SVGElement
       ? (getStyle(el, 'fill') || getStyle(el, 'stroke'))
       : getStyle(el, 'color')
     const background = getComputedBackgroundColor(el)
 
-    const contrastingForegroundColor = getContrastingColor(foreground)
-    const contrastingBackgroundColor = getContrastingColor(background)
+    const contrastingForegroundColor = contrast_color(foreground)
+    const contrastingBackgroundColor = contrast_color(background)
 
     this.style.setProperty('--copy-message-left-color', contrastingForegroundColor)
     this.style.setProperty('--copy-message-right-color', contrastingBackgroundColor)
 
     return `
-      <figure>
+      <figure visbug-ally>
         <header>
           <h5>&#60;${el.nodeName.toLowerCase()}&#62;${el.id && '#' + el.id}</h5>
         </header>
-        <div color-swatches>
-          <span color-swatch style="background-color:${foreground};" tabindex="0">
-            <small style="color:${contrastingForegroundColor};">
-              Foreground
-            </small>
-            <span style="color:${contrastingForegroundColor};">
-              ${functionalNotate(new TinyColor(foreground)[colormode]())}
+        <section>
+          <div color-swatches>
+            <span color-swatch style="background-color:${foreground};" tabindex="0">
+              <small style="color:${contrastingForegroundColor};">
+                Foreground
+              </small>
+              <span style="color:${contrastingForegroundColor};">
+                ${preferredNotation(foreground, colormode)}
+              </span>
             </span>
-          </span>
-          <span color-swatch style="background-color:${background};" tabindex="0">
-            <small style="color:${contrastingBackgroundColor};">
-              Background
-            </small>
-            <span style="color:${contrastingBackgroundColor};">
-              ${functionalNotate(new TinyColor(background)[colormode]())}
+            <span color-swatch style="background-color:${background};" tabindex="0">
+              <small style="color:${contrastingBackgroundColor};">
+                Background
+              </small>
+              <span style="color:${contrastingBackgroundColor};">
+                ${preferredNotation(background, colormode)}
+              </span>
             </span>
-          </span>
-        </div>
-        ${contrast_results}
+          </div>
+          ${contrast_results}
+        </section>
         ${ally_attributes.length > 0
           ? `<code accessibility>
                 <div>