Skip to content

Commit 0ae87ac

Browse files
author
Adam Argyle
authored
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
1 parent 667971b commit 0ae87ac

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+16924
-14430
lines changed

‎app/components/_variables.css‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
@import "open-props/shadows.shadow.min.css";
2+
@import "open-props/borders.shadow.min.css";
3+
@import "open-props/gray.shadow.min.css";
4+
@import "open-props/gray-hsl.shadow.min.css";
5+
16
:host {
2-
--theme-bg: hsl(0 0% 100%);
7+
--theme-bg: white;
38
--theme-bd: hsl(0 0% 100% / var(--theme-bd-opacity));
49
--theme-bd-2: hsl(0 0% 100% / var(--theme-bd-2-opacity));
510
--theme-bd-opacity: 1;
@@ -8,10 +13,15 @@
813
--theme-blue: hsl(188 90% 45%);
914
--theme-purple: hsl(267 100% 58%);
1015

11-
--theme-text_color: hsl(0 0% 10%);
12-
--theme-icon_color: hsl(0 0% 20%);
13-
--theme-icon_hover-bg: hsl(0 0% 95%);
14-
--theme-icon_active-bg: hsl(0 0% 90%);
16+
--neon-pink: color(display-p3 1 0 1);
17+
--neon-purple: color(display-p3 .5 0 1);
18+
--neon-lime: color(display-p3 0.25 1 0);
19+
--neon-cyan: color(display-p3 0 1 1);
20+
21+
--theme-text_color: var(--gray-11);
22+
--theme-icon_color: var(--gray-9);
23+
--theme-icon_hover-bg: white;
24+
--theme-icon_active-bg: white;
1525

1626
--layer-top: 2147483647;
1727
--layer-1: 2147483646;
@@ -27,14 +37,14 @@
2737
}
2838

2939
@media (prefers-color-scheme: dark) {
30-
--theme-bg: hsl(0 0% 10%);
31-
--theme-bd: hsl(0 0% 10% / var(--theme-bd-opacity));
32-
--theme-bd-2: hsl(0 0% 10% / var(--theme-bd-2-opacity));
40+
--theme-bg: var(--gray-10);
41+
--theme-bd: hsl(var(--gray-10-hsl) / var(--theme-bd-opacity));
42+
--theme-bd-2: hsl(var(--gray-10-hsl) / var(--theme-bd-2-opacity));
3343
--theme-color: hsl(330deg 65% 75%);
34-
--theme-text_color: hsl(0 0% 90%);
35-
--theme-icon_color: hsl(0 0% 80%);
36-
--theme-icon_hover-bg: hsl(0 0% 15%);
37-
--theme-icon_active-bg: hsl(0 0% 20%);
44+
--theme-text_color: var(--gray-0);
45+
--theme-icon_color: var(--gray-2);
46+
--theme-icon_hover-bg: var(--gray-8);
47+
--theme-icon_active-bg: var(--gray-8);
3848
}
3949

4050
@supports (backdrop-filter: blur(5px)) {

‎app/components/metatip/ally.element.js‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
import $ from 'blingblingjs'
22
import { Metatip } from './metatip.element.js'
3-
import { TinyColor } from '@ctrl/tinycolor'
3+
import { preferredNotation } from '../../features/color.js'
44
import { draggable } from '../../features/'
55
import { getStyle, getComputedBackgroundColor } from '../../utilities'
6-
import { getContrastingColor } from '../../utilities'
7-
import { functionalNotate } from '../../features/color.js'
8-
9-
const modemap = {
10-
'hex': 'toHexString',
11-
'hsl': 'toHslString',
12-
'rgb': 'toRgbString',
13-
}
6+
import { contrast_color } from '../../utilities'
147

158
export class Ally extends Metatip {
169
constructor() {
@@ -44,43 +37,45 @@ export class Ally extends Metatip {
4437
}
4538

4639
render({el, ally_attributes, contrast_results}) {
47-
const colormode = modemap[$('vis-bug').attr('color-mode')]
40+
const colormode = $('vis-bug').attr('color-mode')
4841

4942
const foreground = el instanceof SVGElement
5043
? (getStyle(el, 'fill') || getStyle(el, 'stroke'))
5144
: getStyle(el, 'color')
5245
const background = getComputedBackgroundColor(el)
5346

54-
const contrastingForegroundColor = getContrastingColor(foreground)
55-
const contrastingBackgroundColor = getContrastingColor(background)
47+
const contrastingForegroundColor = contrast_color(foreground)
48+
const contrastingBackgroundColor = contrast_color(background)
5649

5750
this.style.setProperty('--copy-message-left-color', contrastingForegroundColor)
5851
this.style.setProperty('--copy-message-right-color', contrastingBackgroundColor)
5952

6053
return `
61-
<figure>
54+
<figure visbug-ally>
6255
<header>
6356
<h5>&#60;${el.nodeName.toLowerCase()}&#62;${el.id && '#' + el.id}</h5>
6457
</header>
65-
<div color-swatches>
66-
<span color-swatch style="background-color:${foreground};" tabindex="0">
67-
<small style="color:${contrastingForegroundColor};">
68-
Foreground
69-
</small>
70-
<span style="color:${contrastingForegroundColor};">
71-
${functionalNotate(new TinyColor(foreground)[colormode]())}
58+
<section>
59+
<div color-swatches>
60+
<span color-swatch style="background-color:${foreground};" tabindex="0">
61+
<small style="color:${contrastingForegroundColor};">
62+
Foreground
63+
</small>
64+
<span style="color:${contrastingForegroundColor};">
65+
${preferredNotation(foreground, colormode)}
66+
</span>
7267
</span>
73-
</span>
74-
<span color-swatch style="background-color:${background};" tabindex="0">
75-
<small style="color:${contrastingBackgroundColor};">
76-
Background
77-
</small>
78-
<span style="color:${contrastingBackgroundColor};">
79-
${functionalNotate(new TinyColor(background)[colormode]())}
68+
<span color-swatch style="background-color:${background};" tabindex="0">
69+
<small style="color:${contrastingBackgroundColor};">
70+
Background
71+
</small>
72+
<span style="color:${contrastingBackgroundColor};">
73+
${preferredNotation(background, colormode)}
74+
</span>
8075
</span>
81-
</span>
82-
</div>
83-
${contrast_results}
76+
</div>
77+
${contrast_results}
78+
</section>
8479
${ally_attributes.length > 0
8580
? `<code accessibility>
8681
<div>

0 commit comments

Comments
 (0)