@hattisar/design-tokens 0.3.13 → 0.3.14
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/package.json +1 -1
- package/tokens.css +19 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hattisar/design-tokens",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.14",
|
|
4
4
|
"description": "Shared design tokens (colors, type, radius, spacing, motion) and base primitives (reset, buttons, inputs, cards, modals, auth shell) for every Hattisar frontend.",
|
|
5
5
|
"main": "tokens.css",
|
|
6
6
|
"files": [
|
package/tokens.css
CHANGED
|
@@ -123,6 +123,14 @@
|
|
|
123
123
|
nearest shade that passes is #1a73e8 at 4.51:1, visually the same
|
|
124
124
|
blue, if the ratio matters more than the exact hex. */
|
|
125
125
|
--color-cta: #4285f4;
|
|
126
|
+
/* The call-to-action blue as *text* on a surface, which is a
|
|
127
|
+
stricter bar than as a fill. #4285f4 carries white at 3.56:1 — the
|
|
128
|
+
one documented exception in check-contrast.mjs — and reusing it for
|
|
129
|
+
text would spread that exception instead of containing it. Scaled
|
|
130
|
+
13% darker it reaches 4.59:1 on a white card while reading as the
|
|
131
|
+
same blue. Dark mode needs no adjustment: #4285f4 already measures
|
|
132
|
+
4.61:1 on #1f1f23, so it keeps the brand hex exactly. */
|
|
133
|
+
--color-cta-on-surface: #3973d4;
|
|
126
134
|
--color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
|
|
127
135
|
--color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
|
|
128
136
|
--color-cta-text: #ffffff;
|
|
@@ -442,6 +450,9 @@
|
|
|
442
450
|
--color-brand-active: color-mix(in srgb, var(--color-brand) 75%, black);
|
|
443
451
|
--color-brand-text: #09090b;
|
|
444
452
|
--color-cta: #4285f4;
|
|
453
|
+
/* Light mode darkens this for contrast; on a dark surface the brand
|
|
454
|
+
blue already clears AA, so it stands unmodified. */
|
|
455
|
+
--color-cta-on-surface: #4285f4;
|
|
445
456
|
--color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
|
|
446
457
|
--color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
|
|
447
458
|
--color-cta-text: #ffffff;
|
|
@@ -550,6 +561,14 @@
|
|
|
550
561
|
--color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
|
|
551
562
|
--color-brand-text: #ffffff;
|
|
552
563
|
--color-cta: #4285f4;
|
|
564
|
+
/* The call-to-action blue as *text* on a surface, which is a
|
|
565
|
+
stricter bar than as a fill. #4285f4 carries white at 3.56:1 — the
|
|
566
|
+
one documented exception in check-contrast.mjs — and reusing it for
|
|
567
|
+
text would spread that exception instead of containing it. Scaled
|
|
568
|
+
13% darker it reaches 4.59:1 on a white card while reading as the
|
|
569
|
+
same blue. Dark mode needs no adjustment: #4285f4 already measures
|
|
570
|
+
4.61:1 on #1f1f23, so it keeps the brand hex exactly. */
|
|
571
|
+
--color-cta-on-surface: #3973d4;
|
|
553
572
|
--color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
|
|
554
573
|
--color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
|
|
555
574
|
--color-cta-text: #ffffff;
|