@opentabs-dev/plugin-tools 0.0.63 → 0.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/validate-icon.d.ts +2 -2
- package/dist/validate-icon.js +5 -5
- package/package.json +1 -1
package/dist/validate-icon.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ declare const MAX_ICON_SIZE: number;
|
|
|
14
14
|
* 153 corresponds to #999999 / HSL lightness 60%.
|
|
15
15
|
*/
|
|
16
16
|
declare const MIN_INACTIVE_GRAY = 153;
|
|
17
|
-
/** Dark card background color (#
|
|
17
|
+
/** Dark card background color (#1c1c1c) relative luminance, precomputed. */
|
|
18
18
|
declare const DARK_BG_LUMINANCE: number;
|
|
19
19
|
/**
|
|
20
20
|
* Minimum contrast ratio required for an icon color to be considered visible
|
|
@@ -48,7 +48,7 @@ declare const validateInactiveIconColors: (content: string) => ValidationResult;
|
|
|
48
48
|
declare const generateInactiveIcon: (svgContent: string) => string;
|
|
49
49
|
/**
|
|
50
50
|
* Generate a dark-mode variant of an SVG icon by selectively adapting colors
|
|
51
|
-
* that would be invisible or hard to see against a dark background (#
|
|
51
|
+
* that would be invisible or hard to see against a dark background (#1c1c1c).
|
|
52
52
|
*
|
|
53
53
|
* Colors with sufficient contrast (>= 3:1 WCAG) against the dark card background
|
|
54
54
|
* are left unchanged — colorful brand icons (Slack, Discord) pass through untouched.
|
package/dist/validate-icon.js
CHANGED
|
@@ -248,8 +248,8 @@ const contrastRatio = (lum1, lum2) => {
|
|
|
248
248
|
const darker = Math.min(lum1, lum2);
|
|
249
249
|
return (lighter + 0.05) / (darker + 0.05);
|
|
250
250
|
};
|
|
251
|
-
/** Dark card background color (#
|
|
252
|
-
const DARK_BG_LUMINANCE = wcagRelativeLuminance(
|
|
251
|
+
/** Dark card background color (#1c1c1c) relative luminance, precomputed. */
|
|
252
|
+
const DARK_BG_LUMINANCE = wcagRelativeLuminance(28, 28, 28);
|
|
253
253
|
/**
|
|
254
254
|
* Minimum contrast ratio required for an icon color to be considered visible
|
|
255
255
|
* against the dark card background. WCAG AA for large text / UI components is 3:1.
|
|
@@ -566,9 +566,9 @@ const generateInactiveIcon = (svgContent) => {
|
|
|
566
566
|
// ---------------------------------------------------------------------------
|
|
567
567
|
/**
|
|
568
568
|
* Adapt a single color value for dark mode by inverting its lightness when the
|
|
569
|
-
* color has insufficient contrast against the dark card background (#
|
|
569
|
+
* color has insufficient contrast against the dark card background (#1c1c1c).
|
|
570
570
|
*
|
|
571
|
-
* Colors with a WCAG contrast ratio >= 3:1 against #
|
|
571
|
+
* Colors with a WCAG contrast ratio >= 3:1 against #1c1c1c are left unchanged
|
|
572
572
|
* (they are already visible on dark backgrounds — e.g. Slack's brand colors,
|
|
573
573
|
* Discord's blurple). Colors below that threshold (e.g. black, dark grays) have
|
|
574
574
|
* their HSL lightness inverted (L → 100% - L) so they become light enough to see.
|
|
@@ -613,7 +613,7 @@ const convertColorForDark = (value) => {
|
|
|
613
613
|
};
|
|
614
614
|
/**
|
|
615
615
|
* Generate a dark-mode variant of an SVG icon by selectively adapting colors
|
|
616
|
-
* that would be invisible or hard to see against a dark background (#
|
|
616
|
+
* that would be invisible or hard to see against a dark background (#1c1c1c).
|
|
617
617
|
*
|
|
618
618
|
* Colors with sufficient contrast (>= 3:1 WCAG) against the dark card background
|
|
619
619
|
* are left unchanged — colorful brand icons (Slack, Discord) pass through untouched.
|