@canonical/design-tokens 0.0.1 → 0.0.2

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.
Files changed (17) hide show
  1. package/dist/modifiers.anticipation.css +23 -0
  2. package/dist/modifiers.criticality.css +33 -0
  3. package/dist/modifiers.emphasis.css +16 -0
  4. package/dist/modifiers.importance.css +2 -0
  5. package/dist/modifiers.surfaces.css +54 -0
  6. package/dist/modifiers.theme.css +381 -0
  7. package/dist/modifiers.typography.css +583 -0
  8. package/dist/sets.primitive.css +207 -0
  9. package/dist/sets.semantic.css +2 -0
  10. package/dist/states.css +35 -0
  11. package/dist/tokens.json +23380 -0
  12. package/package.json +8 -3
  13. package/tokens/dist/modifiers.css +75 -0
  14. package/tokens/dist/tokens.css +1027 -0
  15. package/assets.ruleset.json +0 -19
  16. package/terrazzo.config.ts +0 -13
  17. package/tsconfig.json +0 -4
package/dist/modifiers.anticipation.css ADDED
@@ -0,0 +1,23 @@
1
+ /* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
2
+ @layer ds.modifiers {
3
+ .constructive {
4
+ --modifier-color-border: var(--color-border-constructive);
5
+ --modifier-color-foreground-ghost: var(--color-foreground-ghost-constructive);
6
+ --modifier-color-foreground-primary: var(--color-foreground-primary-constructive);
7
+ --modifier-color-icon: var(--color-icon-constructive);
8
+ --modifier-color-text: var(--color-text-constructive);
9
+ }
10
+ .destructive {
11
+ --modifier-color-border: var(--color-border-destructive);
12
+ --modifier-color-foreground-ghost: var(--color-foreground-ghost-destructive);
13
+ --modifier-color-foreground-primary: var(--color-foreground-primary-destructive);
14
+ --modifier-color-icon: var(--color-icon-destructive);
15
+ --modifier-color-text: var(--color-text-destructive);
16
+ }
17
+ .caution {
18
+ --modifier-color-border: var(--color-border-warning);
19
+ --modifier-color-foreground-secondary: var(--color-foreground-secondary-warning);
20
+ --modifier-color-icon: var(--color-icon-warning);
21
+ --modifier-color-text: var(--color-text-warning);
22
+ }
23
+ }
package/dist/modifiers.criticality.css ADDED
@@ -0,0 +1,33 @@
1
+ /* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
2
+ @layer ds.modifiers {
3
+ .success {
4
+ --modifier-color-border: var(--color-border-success);
5
+ --modifier-color-focusRing: var(--color-focusRing-success);
6
+ --modifier-color-foreground-input: var(--color-foreground-input-success);
7
+ --modifier-color-foreground-secondary: var(--color-foreground-secondary-success);
8
+ --modifier-color-icon: var(--color-icon-success);
9
+ --modifier-color-text: var(--color-text-success);
10
+ }
11
+ .error {
12
+ --modifier-color-border: var(--color-border-error);
13
+ --modifier-color-focusRing: var(--color-focusRing-error);
14
+ --modifier-color-foreground-input: var(--color-foreground-input-error);
15
+ --modifier-color-foreground-secondary: var(--color-foreground-secondary-error);
16
+ --modifier-color-icon: var(--color-icon-error);
17
+ --modifier-color-text: var(--color-text-error);
18
+ }
19
+ .warning {
20
+ --modifier-color-border: var(--color-border-warning);
21
+ --modifier-color-focusRing: var(--color-focusRing-warning);
22
+ --modifier-color-foreground-input: var(--color-foreground-input-warning);
23
+ --modifier-color-foreground-secondary: var(--color-foreground-secondary-warning);
24
+ --modifier-color-icon: var(--color-icon-warning);
25
+ --modifier-color-text: var(--color-text-warning);
26
+ }
27
+ .information {
28
+ --modifier-color-border: var(--color-border-information);
29
+ --modifier-color-foreground-secondary: var(--color-foreground-secondary-information);
30
+ --modifier-color-icon: var(--color-icon-information);
31
+ --modifier-color-text: var(--color-text-information);
32
+ }
33
+ }
package/dist/modifiers.emphasis.css ADDED
@@ -0,0 +1,16 @@
1
+ /* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
2
+ @layer ds.modifiers {
3
+ .muted {
4
+ --modifier-color-border: var(--color-border-muted);
5
+ --modifier-color-icon: var(--color-icon-muted);
6
+ --modifier-color-text: var(--color-text-muted);
7
+ }
8
+ .branded {
9
+ --modifier-color-border: var(--color-border-branded);
10
+ --modifier-color-foreground-ghost: var(--color-foreground-ghost-branded);
11
+ --modifier-color-foreground-primary: var(--color-foreground-primary-branded);
12
+ --modifier-color-foreground-secondary: var(--color-foreground-secondary-branded);
13
+ --modifier-color-icon: var(--color-icon-branded);
14
+ --modifier-color-text: var(--color-text-branded);
15
+ }
16
+ }
package/dist/modifiers.importance.css ADDED
@@ -0,0 +1,2 @@
1
+ /* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
2
+
package/dist/modifiers.surfaces.css ADDED
@@ -0,0 +1,54 @@
1
+ /* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
2
+ @layer ds.surfaces {
3
+ .surface {
4
+ --surface-color-background: var(--color-background);
5
+ --surface-color-foreground-checkbox-checkmark: var(--color-foreground-checkbox-checkmark);
6
+ --surface-color-foreground-checkbox-unselected: var(--color-foreground-checkbox-unselected);
7
+ --surface-color-foreground-ghost: var(--color-foreground-ghost);
8
+ --surface-color-foreground-ghost-branded: var(--color-foreground-ghost-branded);
9
+ --surface-color-foreground-ghost-constructive: var(--color-foreground-ghost-constructive);
10
+ --surface-color-foreground-ghost-destructive: var(--color-foreground-ghost-destructive);
11
+ --surface-color-foreground-input: var(--color-foreground-input);
12
+ --surface-color-foreground-input-error: var(--color-foreground-input-error);
13
+ --surface-color-foreground-input-success: var(--color-foreground-input-success);
14
+ --surface-color-foreground-input-warning: var(--color-foreground-input-warning);
15
+ --surface-color-foreground-navigation-primary: var(--color-foreground-navigation-primary);
16
+ --surface-color-foreground-radio-checkmark: var(--color-foreground-radio-checkmark);
17
+ --surface-color-foreground-radio-unselected: var(--color-foreground-radio-unselected);
18
+ --surface-color-foreground-switch-knob: var(--color-foreground-switch-knob);
19
+ }
20
+ .surface .surface {
21
+ --surface-color-background: var(--color-background-layer2);
22
+ --surface-color-foreground-checkbox-checkmark: var(--color-foreground-checkbox-checkmark-layer2);
23
+ --surface-color-foreground-checkbox-unselected: var(--color-foreground-checkbox-unselected-layer2);
24
+ --surface-color-foreground-ghost: var(--color-foreground-ghost-layer2);
25
+ --surface-color-foreground-ghost-branded: var(--color-foreground-ghost-branded-layer2);
26
+ --surface-color-foreground-ghost-constructive: var(--color-foreground-ghost-constructive-layer2);
27
+ --surface-color-foreground-ghost-destructive: var(--color-foreground-ghost-destructive-layer2);
28
+ --surface-color-foreground-input: var(--color-foreground-input-layer2);
29
+ --surface-color-foreground-input-error: var(--color-foreground-input-error-layer2);
30
+ --surface-color-foreground-input-success: var(--color-foreground-input-success-layer2);
31
+ --surface-color-foreground-input-warning: var(--color-foreground-input-warning-layer2);
32
+ --surface-color-foreground-navigation-primary: var(--color-foreground-navigation-primary-layer2);
33
+ --surface-color-foreground-radio-checkmark: var(--color-foreground-radio-checkmark-layer2);
34
+ --surface-color-foreground-radio-unselected: var(--color-foreground-radio-unselected-layer2);
35
+ --surface-color-foreground-switch-knob: var(--color-foreground-switch-knob-layer2);
36
+ }
37
+ .surface .surface .surface {
38
+ --surface-color-background: var(--color-background-layer3);
39
+ --surface-color-foreground-checkbox-checkmark: var(--color-foreground-checkbox-checkmark-layer3);
40
+ --surface-color-foreground-checkbox-unselected: var(--color-foreground-checkbox-unselected-layer3);
41
+ --surface-color-foreground-ghost: var(--color-foreground-ghost-layer3);
42
+ --surface-color-foreground-ghost-branded: var(--color-foreground-ghost-branded-layer3);
43
+ --surface-color-foreground-ghost-constructive: var(--color-foreground-ghost-constructive-layer3);
44
+ --surface-color-foreground-ghost-destructive: var(--color-foreground-ghost-destructive-layer3);
45
+ --surface-color-foreground-input: var(--color-foreground-input-layer3);
46
+ --surface-color-foreground-input-error: var(--color-foreground-input-error-layer3);
47
+ --surface-color-foreground-input-success: var(--color-foreground-input-success-layer3);
48
+ --surface-color-foreground-input-warning: var(--color-foreground-input-warning-layer3);
49
+ --surface-color-foreground-navigation-primary: var(--color-foreground-navigation-primary-layer3);
50
+ --surface-color-foreground-radio-checkmark: var(--color-foreground-radio-checkmark-layer3);
51
+ --surface-color-foreground-radio-unselected: var(--color-foreground-radio-unselected-layer3);
52
+ --surface-color-foreground-switch-knob: var(--color-foreground-switch-knob-layer3);
53
+ }
54
+ }
package/dist/modifiers.theme.css ADDED
@@ -0,0 +1,381 @@
1
+ /* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
2
+ @layer ds.modifiers {
3
+ :root {
4
+ color-scheme: light dark;
5
+ --color-backdrop: oklch(0% 0 0 / 0.15);
6
+ --color-background: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
7
+ --color-background-container: light-dark(var(--color-palette-gray-40), var(--color-palette-gray-930));
8
+ --color-background-layer2: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
9
+ --color-background-layer3: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
10
+ --color-background-logo: var(--color-brand-primary);
11
+ --color-border: var(--color-palette-gray-520);
12
+ --color-border-branded: var(--color-palette-orange-520);
13
+ --color-border-branded-disabled: light-dark(oklch(83% 0.1 37.97), oklch(32% 0.1 37.97));
14
+ --color-border-category: var(--color-palette-gray-520);
15
+ --color-border-category-disabled: light-dark(oklch(83% 0 0), oklch(32% 0 0));
16
+ --color-border-constructive: var(--color-palette-green-520);
17
+ --color-border-constructive-disabled: light-dark(oklch(83% 0.1 144.01), oklch(32% 0.1 144.01));
18
+ --color-border-destructive: var(--color-palette-red-520);
19
+ --color-border-destructive-disabled: light-dark(oklch(83% 0.1 23.83), oklch(32% 0.1 23.83));
20
+ --color-border-disabled: light-dark(oklch(83% 0 0), oklch(32% 0 0));
21
+ --color-border-error: var(--color-palette-red-520);
22
+ --color-border-error-disabled: light-dark(oklch(83% 0.1 23.83), oklch(32% 0.1 23.83));
23
+ --color-border-highlighted: light-dark(var(--color-palette-black), var(--color-palette-white));
24
+ --color-border-highlighted-disabled: light-dark(oklch(69% 0 0), oklch(45% 0 0));
25
+ --color-border-information: var(--color-palette-blue-520);
26
+ --color-border-information-disabled: light-dark(oklch(83% 0.1 256), oklch(32% 0.1 256.04));
27
+ --color-border-muted: light-dark(var(--color-palette-gray-100), var(--color-palette-gray-820));
28
+ --color-border-muted-disabled: light-dark(oklch(96% 0 0), oklch(23% 0 0));
29
+ --color-border-success: var(--color-palette-green-520);
30
+ --color-border-success-disabled: light-dark(oklch(83% 0.1 144.01), oklch(32% 0.1 144.01));
31
+ --color-border-warning: var(--color-palette-yellow-520);
32
+ --color-border-warning-disabled: light-dark(oklch(83% 0.1 66.86), oklch(32% 0.1 66.86));
33
+ --color-brand-primary: var(--color-palette-orange-398);
34
+ --color-focusRing: var(--color-palette-blue-520);
35
+ --color-focusRing-error: var(--color-border-error);
36
+ --color-focusRing-success: var(--color-border-success);
37
+ --color-focusRing-warning: var(--color-border-warning);
38
+ --color-foreground-checkbox-checkmark: var(--color-foreground-ghost);
39
+ --color-foreground-checkbox-checkmark-disabled: var(--color-foreground-ghost-disabled);
40
+ --color-foreground-checkbox-checkmark-layer2: var(--color-foreground-ghost-layer2);
41
+ --color-foreground-checkbox-checkmark-layer2-disabled: var(--color-foreground-ghost-layer2-disabled);
42
+ --color-foreground-checkbox-checkmark-layer3: var(--color-foreground-ghost-layer3);
43
+ --color-foreground-checkbox-checkmark-layer3-disabled: var(--color-foreground-ghost-layer3-disabled);
44
+ --color-foreground-checkbox-selected: var(--color-palette-blue-520);
45
+ --color-foreground-checkbox-selected-disabled: light-dark(oklch(83% 0.1 256), oklch(32% 0.1 256.04));
46
+ --color-foreground-checkbox-unselected: var(--color-foreground-ghost);
47
+ --color-foreground-checkbox-unselected-active: var(--color-foreground-ghost-active);
48
+ --color-foreground-checkbox-unselected-disabled: var(--color-foreground-ghost-disabled);
49
+ --color-foreground-checkbox-unselected-hover: var(--color-foreground-ghost-hover);
50
+ --color-foreground-checkbox-unselected-layer2: var(--color-foreground-ghost-layer2);
51
+ --color-foreground-checkbox-unselected-layer2-active: var(--color-foreground-ghost-layer2-active);
52
+ --color-foreground-checkbox-unselected-layer2-disabled: var(--color-foreground-ghost-layer2-disabled);
53
+ --color-foreground-checkbox-unselected-layer2-hover: var(--color-foreground-ghost-layer2-hover);
54
+ --color-foreground-checkbox-unselected-layer3: var(--color-foreground-ghost-layer3);
55
+ --color-foreground-checkbox-unselected-layer3-active: var(--color-foreground-ghost-layer3-active);
56
+ --color-foreground-checkbox-unselected-layer3-disabled: var(--color-foreground-ghost-layer3-disabled);
57
+ --color-foreground-checkbox-unselected-layer3-hover: var(--color-foreground-ghost-layer3-hover);
58
+ --color-foreground-ghost: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
59
+ --color-foreground-ghost-active: light-dark(oklch(94% 0 0), oklch(24% 0 0));
60
+ --color-foreground-ghost-branded: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
61
+ --color-foreground-ghost-branded-active: light-dark(oklch(94% 0.0395 37.53), oklch(24% 0.0436 38.46));
62
+ --color-foreground-ghost-branded-disabled: light-dark(var(--color-palette-white), oklch(12% 0 0));
63
+ --color-foreground-ghost-branded-hover: light-dark(oklch(96% 0.0395 37.53), oklch(20% 0.0436 38.46));
64
+ --color-foreground-ghost-branded-layer2: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
65
+ --color-foreground-ghost-branded-layer2-active: light-dark(oklch(92% 0.0395 37.53), oklch(27% 0.0436 38.46));
66
+ --color-foreground-ghost-branded-layer2-disabled: light-dark(oklch(98% 0 0), oklch(19% 0 0));
67
+ --color-foreground-ghost-branded-layer2-hover: light-dark(oklch(94% 0.0395 37.53), oklch(24% 0.0436 38.46));
68
+ --color-foreground-ghost-branded-layer3: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
69
+ --color-foreground-ghost-branded-layer3-active: light-dark(oklch(94% 0.0395 37.53), oklch(24% 0.0436 38.46));
70
+ --color-foreground-ghost-branded-layer3-disabled: light-dark(var(--color-palette-white), oklch(12% 0 0));
71
+ --color-foreground-ghost-branded-layer3-hover: light-dark(oklch(96% 0.0395 37.53), oklch(20% 0.0436 38.46));
72
+ --color-foreground-ghost-constructive: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
73
+ --color-foreground-ghost-constructive-active: light-dark(oklch(94% 0.0804 143.81), oklch(24% 0.0373 144.23));
74
+ --color-foreground-ghost-constructive-disabled: light-dark(var(--color-palette-white), oklch(12% 0 0));
75
+ --color-foreground-ghost-constructive-hover: light-dark(oklch(96% 0.0804 143.8), oklch(20% 0.0373 144.23));
76
+ --color-foreground-ghost-constructive-layer2: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
77
+ --color-foreground-ghost-constructive-layer2-active: light-dark(oklch(92% 0.0804 143.81), oklch(27% 0.0373 144.23));
78
+ --color-foreground-ghost-constructive-layer2-disabled: light-dark(oklch(98% 0 0), oklch(19% 0 0));
79
+ --color-foreground-ghost-constructive-layer2-hover: light-dark(oklch(94% 0.0804 143.81), oklch(24% 0.0373 144.23));
80
+ --color-foreground-ghost-constructive-layer3: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
81
+ --color-foreground-ghost-constructive-layer3-active: light-dark(oklch(94% 0.0804 143.81), oklch(24% 0.0373 144.23));
82
+ --color-foreground-ghost-constructive-layer3-disabled: light-dark(var(--color-palette-white), oklch(12% 0 0));
83
+ --color-foreground-ghost-constructive-layer3-hover: light-dark(oklch(96% 0.0804 143.8), oklch(20% 0.0373 144.23));
84
+ --color-foreground-ghost-destructive: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
85
+ --color-foreground-ghost-destructive-active: light-dark(oklch(94% 0.0384 23.87), oklch(24% 0.0493 23.67));
86
+ --color-foreground-ghost-destructive-disabled: light-dark(var(--color-palette-white), oklch(12% 0 0));
87
+ --color-foreground-ghost-destructive-hover: light-dark(oklch(96% 0.0384 23.87), oklch(20% 0.0493 23.67));
88
+ --color-foreground-ghost-destructive-layer2: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
89
+ --color-foreground-ghost-destructive-layer2-active: light-dark(oklch(92% 0.0384 23.87), oklch(27% 0.0493 23.67));
90
+ --color-foreground-ghost-destructive-layer2-disabled: light-dark(oklch(98% 0 0), oklch(19% 0 0));
91
+ --color-foreground-ghost-destructive-layer2-hover: light-dark(oklch(94% 0.0384 23.87), oklch(24% 0.0493 23.67));
92
+ --color-foreground-ghost-destructive-layer3: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
93
+ --color-foreground-ghost-destructive-layer3-active: light-dark(oklch(94% 0.0384 23.87), oklch(24% 0.0493 23.67));
94
+ --color-foreground-ghost-destructive-layer3-disabled: light-dark(var(--color-palette-white), oklch(12% 0 0));
95
+ --color-foreground-ghost-destructive-layer3-hover: light-dark(oklch(96% 0.0384 23.87), oklch(20% 0.0493 23.67));
96
+ --color-foreground-ghost-disabled: light-dark(var(--color-palette-white), oklch(12% 0 0));
97
+ --color-foreground-ghost-hover: light-dark(oklch(96% 0 0), oklch(20% 0 0));
98
+ --color-foreground-ghost-layer2: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
99
+ --color-foreground-ghost-layer2-active: light-dark(oklch(92% 0 0), oklch(27% 0 0));
100
+ --color-foreground-ghost-layer2-disabled: light-dark(oklch(98% 0 0), oklch(19% 0 0));
101
+ --color-foreground-ghost-layer2-hover: light-dark(oklch(94% 0 0), oklch(24% 0 0));
102
+ --color-foreground-ghost-layer3: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
103
+ --color-foreground-ghost-layer3-active: light-dark(oklch(94% 0 0), oklch(24% 0 0));
104
+ --color-foreground-ghost-layer3-disabled: light-dark(var(--color-palette-white), oklch(12% 0 0));
105
+ --color-foreground-ghost-layer3-hover: light-dark(oklch(96% 0 0), oklch(20% 0 0));
106
+ --color-foreground-input: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
107
+ --color-foreground-input-active: light-dark(oklch(98% 0 0), oklch(19% 0 0));
108
+ --color-foreground-input-disabled: light-dark(oklch(99% 0 0), oklch(15% 0 0));
109
+ --color-foreground-input-error: light-dark(var(--color-palette-red-20), var(--color-palette-red-960));
110
+ --color-foreground-input-error-active: light-dark(oklch(98% 0.0055 31.05), oklch(19% 0.0364 23.99));
111
+ --color-foreground-input-error-disabled: light-dark(oklch(99% 0.1 31.05), oklch(15% 0.1 23.99));
112
+ --color-foreground-input-error-hover: light-dark(oklch(94% 0.0055 31.05), oklch(24% 0.0364 23.99));
113
+ --color-foreground-input-error-layer2: light-dark(var(--color-palette-red-40), var(--color-palette-red-930));
114
+ --color-foreground-input-error-layer2-active: light-dark(oklch(100% 0.0131 23.19), oklch(12% 0.0493 23.67));
115
+ --color-foreground-input-error-layer2-disabled: light-dark(oklch(99% 0.1 23.19), oklch(17% 0.1 23.67));
116
+ --color-foreground-input-error-layer2-hover: light-dark(oklch(96% 0.0131 23.19), oklch(20% 0.0493 23.67));
117
+ --color-foreground-input-error-layer3: light-dark(var(--color-palette-red-20), var(--color-palette-red-960));
118
+ --color-foreground-input-error-layer3-active: light-dark(oklch(98% 0.0055 31.05), oklch(19% 0.0364 23.99));
119
+ --color-foreground-input-error-layer3-disabled: light-dark(oklch(99% 0.1 31.05), oklch(15% 0.1 23.99));
120
+ --color-foreground-input-error-layer3-hover: light-dark(oklch(94% 0.0055 31.05), oklch(24% 0.0364 23.99));
121
+ --color-foreground-input-hover: light-dark(oklch(94% 0 0), oklch(24% 0 0));
122
+ --color-foreground-input-layer2: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
123
+ --color-foreground-input-layer2-active: light-dark(var(--color-palette-white), oklch(12% 0 0));
124
+ --color-foreground-input-layer2-disabled: light-dark(oklch(99% 0 0), oklch(17% 0 0));
125
+ --color-foreground-input-layer2-hover: light-dark(oklch(96% 0 0), oklch(20% 0 0));
126
+ --color-foreground-input-layer3: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
127
+ --color-foreground-input-layer3-active: light-dark(oklch(98% 0 0), oklch(19% 0 0));
128
+ --color-foreground-input-layer3-disabled: light-dark(oklch(99% 0 0), oklch(15% 0 0));
129
+ --color-foreground-input-layer3-hover: light-dark(oklch(94% 0 0), oklch(24% 0 0));
130
+ --color-foreground-input-success: light-dark(var(--color-palette-green-20), var(--color-palette-green-960));
131
+ --color-foreground-input-success-active: light-dark(oklch(98% 0.0101 145.5), oklch(19% 0.0295 144.3));
132
+ --color-foreground-input-success-disabled: light-dark(oklch(99% 0.1 145.5), oklch(15% 0.1 144.3));
133
+ --color-foreground-input-success-hover: light-dark(oklch(94% 0.0101 145.5), oklch(24% 0.0295 144.3));
134
+ --color-foreground-input-success-layer2: light-dark(var(--color-palette-green-40), var(--color-palette-green-930));
135
+ --color-foreground-input-success-layer2-active: light-dark(oklch(100% 0.0247 143.5), oklch(12% 0.0373 144.23));
136
+ --color-foreground-input-success-layer2-disabled: light-dark(oklch(99% 0.1 143.5), oklch(17% 0.1 144.2));
137
+ --color-foreground-input-success-layer2-hover: light-dark(oklch(96% 0.0247 143.5), oklch(20% 0.0373 144.23));
138
+ --color-foreground-input-success-layer3: light-dark(var(--color-palette-green-20), var(--color-palette-green-960));
139
+ --color-foreground-input-success-layer3-active: light-dark(oklch(98% 0.0101 145.5), oklch(19% 0.0295 144.3));
140
+ --color-foreground-input-success-layer3-disabled: light-dark(oklch(99% 0.1 145.5), oklch(15% 0.1 144.3));
141
+ --color-foreground-input-success-layer3-hover: light-dark(oklch(94% 0.0101 145.5), oklch(24% 0.0295 144.3));
142
+ --color-foreground-input-warning: light-dark(var(--color-palette-yellow-20), var(--color-palette-yellow-960));
143
+ --color-foreground-input-warning-active: light-dark(oklch(98% 0.0076 61.45), oklch(19% 0.0277 66.26));
144
+ --color-foreground-input-warning-disabled: light-dark(oklch(99% 0.1 61.45), oklch(15% 0.1 66.26));
145
+ --color-foreground-input-warning-hover: light-dark(oklch(94% 0.0076 61.45), oklch(24% 0.0277 66.26));
146
+ --color-foreground-input-warning-layer2: light-dark(var(--color-palette-yellow-40), var(--color-palette-yellow-930));
147
+ --color-foreground-input-warning-layer2-active: light-dark(oklch(100% 0.0162 64.67), oklch(12% 0.0359 66.12));
148
+ --color-foreground-input-warning-layer2-disabled: light-dark(oklch(99% 0.1 64.67), oklch(17% 0.1 66.12));
149
+ --color-foreground-input-warning-layer2-hover: light-dark(oklch(96% 0.0162 64.67), oklch(20% 0.0359 66.12));
150
+ --color-foreground-input-warning-layer3: light-dark(var(--color-palette-yellow-20), var(--color-palette-yellow-960));
151
+ --color-foreground-input-warning-layer3-active: light-dark(oklch(98% 0.0076 61.45), oklch(19% 0.0277 66.26));
152
+ --color-foreground-input-warning-layer3-disabled: light-dark(oklch(99% 0.1 61.45), oklch(15% 0.1 66.26));
153
+ --color-foreground-input-warning-layer3-hover: light-dark(oklch(94% 0.0076 61.45), oklch(24% 0.0277 66.26));
154
+ --color-foreground-navigation-primary: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
155
+ --color-foreground-navigation-primary-active: light-dark(oklch(92% 0 0), oklch(27% 0 0));
156
+ --color-foreground-navigation-primary-disabled: light-dark(oklch(99% 0 0), oklch(15% 0 0));
157
+ --color-foreground-navigation-primary-hover: light-dark(oklch(94% 0 0), oklch(24% 0 0));
158
+ --color-foreground-navigation-primary-layer2: light-dark(var(--color-palette-white), var(--color-palette-gray-990));
159
+ --color-foreground-navigation-primary-layer2-active: light-dark(oklch(94% 0 0), oklch(24% 0 0));
160
+ --color-foreground-navigation-primary-layer2-disabled: light-dark(oklch(99% 0 0), oklch(17% 0 0));
161
+ --color-foreground-navigation-primary-layer2-hover: light-dark(oklch(96% 0 0), oklch(20% 0 0));
162
+ --color-foreground-navigation-primary-layer3: light-dark(var(--color-palette-gray-20), var(--color-palette-gray-960));
163
+ --color-foreground-navigation-primary-layer3-active: light-dark(oklch(92% 0 0), oklch(27% 0 0));
164
+ --color-foreground-navigation-primary-layer3-disabled: light-dark(oklch(99% 0 0), oklch(15% 0 0));
165
+ --color-foreground-navigation-primary-layer3-hover: light-dark(oklch(94% 0 0), oklch(24% 0 0));
166
+ --color-foreground-navigation-secondary: light-dark(var(--color-palette-gray-40), var(--color-palette-gray-930));
167
+ --color-foreground-navigation-secondary-active: light-dark(oklch(90% 0 0), oklch(30% 0 0));
168
+ --color-foreground-navigation-secondary-disabled: light-dark(oklch(99% 0 0), oklch(17% 0 0));
169
+ --color-foreground-navigation-secondary-hover: light-dark(oklch(92% 0 0), oklch(27% 0 0));
170
+ --color-foreground-primary: light-dark(var(--color-palette-black), var(--color-palette-white));
171
+ --color-foreground-primary-active: light-dark(oklch(22% 0 0), oklch(94% 0 0));
172
+ --color-foreground-primary-branded: var(--color-palette-orange-520);
173
+ --color-foreground-primary-branded-active: light-dark(oklch(51% 0.1746 37.97), oklch(60% 0.1746 37.97));
174
+ --color-foreground-primary-branded-disabled: light-dark(oklch(83% 0.1 37.97), oklch(32% 0.1 37.97));
175
+ --color-foreground-primary-branded-hover: light-dark(oklch(52% 0.1746 37.97), oklch(58% 0.1746 37.97));
176
+ --color-foreground-primary-constructive: var(--color-palette-green-520);
177
+ --color-foreground-primary-constructive-active: light-dark(oklch(51% 0.1575 144.01), oklch(60% 0.1575 144.01));
178
+ --color-foreground-primary-constructive-disabled: light-dark(oklch(83% 0.1 144.01), oklch(32% 0.1 144.01));
179
+ --color-foreground-primary-constructive-hover: light-dark(oklch(52% 0.1575 144.01), oklch(58% 0.1575 144.01));
180
+ --color-foreground-primary-destructive: var(--color-palette-red-520);
181
+ --color-foreground-primary-destructive-active: light-dark(oklch(51% 0.2107 23.83), oklch(60% 0.2107 23.83));
182
+ --color-foreground-primary-destructive-disabled: light-dark(oklch(83% 0.1 23.83), oklch(32% 0.1 23.83));
183
+ --color-foreground-primary-destructive-hover: light-dark(oklch(52% 0.2107 23.83), oklch(58% 0.2107 23.83));
184
+ --color-foreground-primary-disabled: light-dark(oklch(69% 0 0), oklch(45% 0 0));
185
+ --color-foreground-primary-hover: light-dark(oklch(19% 0 0), oklch(96% 0 0));
186
+ --color-foreground-radio-checkmark: var(--color-foreground-checkbox-checkmark);
187
+ --color-foreground-radio-checkmark-disabled: var(--color-foreground-checkbox-checkmark-disabled);
188
+ --color-foreground-radio-checkmark-layer2: var(--color-foreground-checkbox-checkmark-layer2);
189
+ --color-foreground-radio-checkmark-layer2-disabled: var(--color-foreground-checkbox-checkmark-layer2-disabled);
190
+ --color-foreground-radio-checkmark-layer3: var(--color-foreground-checkbox-checkmark-layer3);
191
+ --color-foreground-radio-checkmark-layer3-disabled: var(--color-foreground-checkbox-checkmark-layer3-disabled);
192
+ --color-foreground-radio-selected: var(--color-foreground-checkbox-selected);
193
+ --color-foreground-radio-selected-disabled: var(--color-foreground-checkbox-selected-disabled);
194
+ --color-foreground-radio-unselected: var(--color-foreground-checkbox-unselected);
195
+ --color-foreground-radio-unselected-active: var(--color-foreground-checkbox-unselected-active);
196
+ --color-foreground-radio-unselected-disabled: var(--color-foreground-checkbox-unselected-disabled);
197
+ --color-foreground-radio-unselected-hover: var(--color-foreground-checkbox-unselected-hover);
198
+ --color-foreground-radio-unselected-layer2: var(--color-foreground-checkbox-unselected-layer2);
199
+ --color-foreground-radio-unselected-layer2-active: var(--color-foreground-checkbox-unselected-layer2-active);
200
+ --color-foreground-radio-unselected-layer2-disabled: var(--color-foreground-checkbox-unselected-layer2-disabled);
201
+ --color-foreground-radio-unselected-layer2-hover: var(--color-foreground-checkbox-unselected-layer2-hover);
202
+ --color-foreground-radio-unselected-layer3: var(--color-foreground-checkbox-unselected-layer3);
203
+ --color-foreground-radio-unselected-layer3-active: var(--color-foreground-checkbox-unselected-layer3-active);
204
+ --color-foreground-radio-unselected-layer3-disabled: var(--color-foreground-checkbox-unselected-layer3-disabled);
205
+ --color-foreground-radio-unselected-layer3-hover: var(--color-foreground-checkbox-unselected-layer3-hover);
206
+ --color-foreground-secondary: light-dark(var(--color-palette-gray-100), var(--color-palette-gray-820));
207
+ --color-foreground-secondary-active: light-dark(oklch(84% 0 0), oklch(38% 0 0));
208
+ --color-foreground-secondary-branded: light-dark(var(--color-palette-orange-100), var(--color-palette-orange-820));
209
+ --color-foreground-secondary-branded-active: light-dark(oklch(84% 0.0395 37.53), oklch(38% 0.0846 37.83));
210
+ --color-foreground-secondary-branded-disabled: light-dark(oklch(96% 0.1 37.53), oklch(23% 0.1 37.83));
211
+ --color-foreground-secondary-branded-hover: light-dark(oklch(86% 0.0395 37.53), oklch(36% 0.0846 37.83));
212
+ --color-foreground-secondary-category: light-dark(var(--color-palette-gray-100), var(--color-palette-gray-820));
213
+ --color-foreground-secondary-category-active: light-dark(oklch(84% 0 0), oklch(38% 0 0));
214
+ --color-foreground-secondary-category-disabled: light-dark(oklch(96% 0 0), oklch(23% 0 0));
215
+ --color-foreground-secondary-category-hover: light-dark(oklch(86% 0 0), oklch(36% 0 0));
216
+ --color-foreground-secondary-disabled: light-dark(oklch(96% 0 0), oklch(23% 0 0));
217
+ --color-foreground-secondary-error: light-dark(var(--color-palette-red-100), var(--color-palette-red-820));
218
+ --color-foreground-secondary-error-active: light-dark(oklch(84% 0.0384 23.87), oklch(38% 0.0953 24.66));
219
+ --color-foreground-secondary-error-disabled: light-dark(oklch(96% 0.1 23.87), oklch(23% 0.1 24.66));
220
+ --color-foreground-secondary-error-hover: light-dark(oklch(86% 0.0384 23.87), oklch(36% 0.0953 24.66));
221
+ --color-foreground-secondary-hover: light-dark(oklch(86% 0 0), oklch(36% 0 0));
222
+ --color-foreground-secondary-information: light-dark(var(--color-palette-blue-100), var(--color-palette-blue-820));
223
+ --color-foreground-secondary-information-active: light-dark(oklch(84% 0.0366 255.96), oklch(38% 0.0875 255.77));
224
+ --color-foreground-secondary-information-disabled: light-dark(oklch(96% 0.1 256), oklch(23% 0.1 255.8));
225
+ --color-foreground-secondary-information-hover: light-dark(oklch(86% 0.0366 255.96), oklch(36% 0.0875 255.77));
226
+ --color-foreground-secondary-success: light-dark(var(--color-palette-green-100), var(--color-palette-green-820));
227
+ --color-foreground-secondary-success-active: light-dark(oklch(84% 0.0804 143.81), oklch(38% 0.0672 144.49));
228
+ --color-foreground-secondary-success-disabled: light-dark(oklch(96% 0.1 143.8), oklch(23% 0.1 144.5));
229
+ --color-foreground-secondary-success-hover: light-dark(oklch(86% 0.0804 143.81), oklch(36% 0.0672 144.49));
230
+ --color-foreground-secondary-warning: light-dark(var(--color-palette-yellow-100), var(--color-palette-yellow-820));
231
+ --color-foreground-secondary-warning-active: light-dark(oklch(84% 0.0486 67.14), oklch(38% 0.0623 67.4));
232
+ --color-foreground-secondary-warning-disabled: light-dark(oklch(96% 0.1 67.14), oklch(23% 0.1 67.4));
233
+ --color-foreground-secondary-warning-hover: light-dark(oklch(86% 0.0486 67.14), oklch(36% 0.0623 67.4));
234
+ --color-foreground-slider-progress: var(--color-palette-blue-520);
235
+ --color-foreground-slider-progress-disabled: light-dark(oklch(83% 0.1 256), oklch(32% 0.1 256.04));
236
+ --color-foreground-slider-track: light-dark(var(--color-palette-gray-100), var(--color-palette-gray-820));
237
+ --color-foreground-slider-track-disabled: light-dark(oklch(96% 0 0), oklch(23% 0 0));
238
+ --color-foreground-slider-track-endstop: var(--color-palette-gray-520);
239
+ --color-foreground-slider-track-endstop-disabled: light-dark(oklch(83% 0 0), oklch(32% 0 0));
240
+ --color-foreground-switch-knob: var(--color-foreground-checkbox-checkmark);
241
+ --color-foreground-switch-knob-disabled: var(--color-foreground-checkbox-checkmark-disabled);
242
+ --color-foreground-switch-knob-layer2: var(--color-foreground-checkbox-checkmark-layer2);
243
+ --color-foreground-switch-knob-layer2-disabled: var(--color-foreground-checkbox-checkmark-layer2-disabled);
244
+ --color-foreground-switch-knob-layer3: var(--color-foreground-checkbox-checkmark-layer3);
245
+ --color-foreground-switch-knob-layer3-disabled: var(--color-foreground-checkbox-checkmark-layer3-disabled);
246
+ --color-foreground-switch-selected: var(--color-foreground-checkbox-selected);
247
+ --color-foreground-switch-selected-disabled: var(--color-foreground-checkbox-selected-disabled);
248
+ --color-foreground-switch-unselected: var(--color-palette-gray-520);
249
+ --color-foreground-switch-unselected-disabled: light-dark(oklch(83% 0 0), oklch(32% 0 0));
250
+ --color-icon: var(--color-text);
251
+ --color-icon-branded: var(--color-text-branded);
252
+ --color-icon-branded-disabled: var(--color-text-branded-disabled);
253
+ --color-icon-constructive: var(--color-text-constructive);
254
+ --color-icon-constructive-disabled: var(--color-text-constructive-disabled);
255
+ --color-icon-destructive: var(--color-text-destructive);
256
+ --color-icon-destructive-disabled: var(--color-text-destructive-disabled);
257
+ --color-icon-disabled: var(--color-text-disabled);
258
+ --color-icon-error: var(--color-text-error);
259
+ --color-icon-error-disabled: var(--color-text-error-disabled);
260
+ --color-icon-information: var(--color-text-information);
261
+ --color-icon-information-disabled: var(--color-text-information-disabled);
262
+ --color-icon-link: var(--color-text-link);
263
+ --color-icon-link-disabled: var(--color-text-link-disabled);
264
+ --color-icon-link-visited: var(--color-text-link-visited);
265
+ --color-icon-link-visited-disabled: var(--color-text-link-visited-disabled);
266
+ --color-icon-logo: var(--color-palette-white);
267
+ --color-icon-muted: var(--color-text-muted);
268
+ --color-icon-muted-disabled: var(--color-text-muted-disabled);
269
+ --color-icon-onForegroundPrimary: var(--color-text-on-foreground-primary);
270
+ --color-icon-onForegroundPrimary-disabled: var(--color-text-on-foreground-primary-disabled);
271
+ --color-icon-onForegroundSecondary: var(--color-text-on-foreground-secondary);
272
+ --color-icon-onForegroundSecondary-disabled: var(--color-text-on-foreground-secondary-disabled);
273
+ --color-icon-onForegroundSecondary-error: var(--color-text-on-foreground-secondary-error);
274
+ --color-icon-onForegroundSecondary-error-disabled: var(--color-text-on-foreground-secondary-error-disabled);
275
+ --color-icon-onForegroundSecondary-information: var(--color-text-on-foreground-secondary-information);
276
+ --color-icon-onForegroundSecondary-information-disabled: var(--color-text-on-foreground-secondary-information-disabled);
277
+ --color-icon-onForegroundSecondary-success: var(--color-text-on-foreground-secondary-success);
278
+ --color-icon-onForegroundSecondary-success-disabled: var(--color-text-on-foreground-secondary-success-disabled);
279
+ --color-icon-onForegroundSecondary-warning: var(--color-text-on-foreground-secondary-warning);
280
+ --color-icon-onForegroundSecondary-warning-disabled: var(--color-text-on-foreground-secondary-warning-disabled);
281
+ --color-icon-success: var(--color-text-success);
282
+ --color-icon-success-disabled: var(--color-text-success-disabled);
283
+ --color-icon-warning: var(--color-text-warning);
284
+ --color-icon-warning-disabled: var(--color-text-warning-disabled);
285
+ --color-text: light-dark(var(--color-palette-black), var(--color-palette-white));
286
+ --color-text-branded: light-dark(var(--color-palette-orange-590), var(--color-palette-orange-398));
287
+ --color-text-branded-disabled: light-dark(oklch(69% 0.1 37.79), oklch(45% 0.1 37.76));
288
+ --color-text-constructive: light-dark(var(--color-palette-green-590), var(--color-palette-green-398));
289
+ --color-text-constructive-disabled: light-dark(oklch(69% 0.1 143.96), oklch(45% 0.1 144.01));
290
+ --color-text-destructive: light-dark(var(--color-palette-red-590), var(--color-palette-red-398));
291
+ --color-text-destructive-disabled: light-dark(oklch(69% 0.1 23.79), oklch(45% 0.1 24.11));
292
+ --color-text-disabled: light-dark(oklch(69% 0 0), oklch(45% 0 0));
293
+ --color-text-error: light-dark(var(--color-palette-red-590), var(--color-palette-red-398));
294
+ --color-text-error-disabled: light-dark(oklch(69% 0.1 23.79), oklch(45% 0.1 24.11));
295
+ --color-text-information: light-dark(var(--color-palette-blue-590), var(--color-palette-blue-398));
296
+ --color-text-information-disabled: light-dark(oklch(69% 0.1 256.12), oklch(45% 0.1 256.08));
297
+ --color-text-link: light-dark(var(--color-palette-blue-590), var(--color-palette-blue-398));
298
+ --color-text-link-disabled: light-dark(oklch(80% 0.1 256.12), oklch(36% 0.1 256.08));
299
+ --color-text-link-visited: light-dark(var(--color-palette-purple-590), var(--color-palette-purple-398));
300
+ --color-text-link-visited-disabled: light-dark(oklch(80% 0.1 290.01), oklch(36% 0.1 290.2));
301
+ --color-text-muted: light-dark(var(--color-palette-gray-590), var(--color-palette-gray-398));
302
+ --color-text-muted-disabled: light-dark(oklch(80% 0 0), oklch(36% 0 0));
303
+ --color-text-onForegroundPrimary: light-dark(var(--color-palette-white), var(--color-palette-black));
304
+ --color-text-onForegroundPrimary-disabled: light-dark(var(--color-palette-white), oklch(10% 0 0));
305
+ --color-text-onForegroundSecondary: light-dark(var(--color-palette-gray-700), var(--color-palette-gray-180));
306
+ --color-text-onForegroundSecondary-category: light-dark(var(--color-palette-gray-700), var(--color-palette-gray-180));
307
+ --color-text-onForegroundSecondary-category-disabled: light-dark(oklch(77% 0 0), oklch(41% 0 0));
308
+ --color-text-onForegroundSecondary-disabled: light-dark(oklch(77% 0 0), oklch(41% 0 0));
309
+ --color-text-onForegroundSecondary-error: light-dark(var(--color-palette-red-700), var(--color-palette-red-180));
310
+ --color-text-onForegroundSecondary-error-disabled: light-dark(oklch(77% 0.1 23.93), oklch(41% 0.1 23.7));
311
+ --color-text-onForegroundSecondary-information: light-dark(var(--color-palette-blue-700), var(--color-palette-blue-180));
312
+ --color-text-onForegroundSecondary-information-disabled: light-dark(oklch(77% 0.1 255.95), oklch(41% 0.1 255.56));
313
+ --color-text-onForegroundSecondary-success: light-dark(var(--color-palette-green-700), var(--color-palette-green-180));
314
+ --color-text-onForegroundSecondary-success-disabled: light-dark(oklch(77% 0.1 143.94), oklch(41% 0.1 143.84));
315
+ --color-text-onForegroundSecondary-warning: light-dark(var(--color-palette-yellow-700), var(--color-palette-yellow-180));
316
+ --color-text-onForegroundSecondary-warning-disabled: light-dark(oklch(77% 0.1 67.69), oklch(41% 0.1 66.99));
317
+ --color-text-success: light-dark(var(--color-palette-green-590), var(--color-palette-green-398));
318
+ --color-text-success-disabled: light-dark(oklch(69% 0.1 143.96), oklch(45% 0.1 144.01));
319
+ --color-text-warning: light-dark(var(--color-palette-yellow-590), var(--color-palette-yellow-398));
320
+ --color-text-warning-disabled: light-dark(oklch(69% 0.1 67.44), oklch(45% 0.1 67.1));
321
+ --delta-hover-color-foreground-primary: 0.19;
322
+ --delta-active-color-foreground-primary: 0.22;
323
+ --delta-hover-color-foreground-secondary: -0.0375;
324
+ --delta-active-color-foreground-secondary: -0.0575;
325
+ --delta-hover-color-foreground-ghost: -0.04;
326
+ --delta-active-color-foreground-ghost: -0.06;
327
+ --delta-hover-color-foreground-input: -0.0391;
328
+ --delta-active-color-foreground-input: 0.0009;
329
+ --delta-hover-color-foreground-navigation-primary: -0.0391;
330
+ --delta-active-color-foreground-navigation-primary: -0.0591;
331
+ --delta-hover-color-foreground-navigation-secondary: -0.0381;
332
+ --delta-active-color-foreground-navigation-secondary: -0.0581;
333
+ --delta-hover-color-foreground-checkbox-unselected: -0.04;
334
+ --delta-active-color-foreground-checkbox-unselected: -0.06;
335
+ --delta-hover-color-foreground-radio-unselected: -0.04;
336
+ --delta-active-color-foreground-radio-unselected: -0.06;
337
+ }
338
+ .light {
339
+ color-scheme: light;
340
+ }
341
+ .dark {
342
+ color-scheme: dark;
343
+ --delta-hover-color-foreground-primary: -0.04;
344
+ --delta-active-color-foreground-primary: -0.06;
345
+ --delta-hover-color-foreground-secondary: 0.0271;
346
+ --delta-active-color-foreground-secondary: 0.0471;
347
+ --delta-hover-color-foreground-ghost: 0.0779;
348
+ --delta-active-color-foreground-ghost: 0.1179;
349
+ --delta-hover-color-foreground-input: 0.0533;
350
+ --delta-active-color-foreground-input: 0.0033;
351
+ --delta-hover-color-foreground-navigation-primary: 0.0533;
352
+ --delta-active-color-foreground-navigation-primary: 0.0833;
353
+ --delta-hover-color-foreground-navigation-secondary: 0.0392;
354
+ --delta-active-color-foreground-navigation-secondary: 0.0692;
355
+ --delta-hover-color-foreground-checkbox-unselected: 0.0779;
356
+ --delta-active-color-foreground-checkbox-unselected: 0.1179;
357
+ --delta-hover-color-foreground-radio-unselected: 0.0779;
358
+ --delta-active-color-foreground-radio-unselected: 0.1179;
359
+ }
360
+ @media (prefers-color-scheme: dark) {
361
+ :root {
362
+ color-scheme: dark;
363
+ --delta-hover-color-foreground-primary: -0.04;
364
+ --delta-active-color-foreground-primary: -0.06;
365
+ --delta-hover-color-foreground-secondary: 0.0271;
366
+ --delta-active-color-foreground-secondary: 0.0471;
367
+ --delta-hover-color-foreground-ghost: 0.0779;
368
+ --delta-active-color-foreground-ghost: 0.1179;
369
+ --delta-hover-color-foreground-input: 0.0533;
370
+ --delta-active-color-foreground-input: 0.0033;
371
+ --delta-hover-color-foreground-navigation-primary: 0.0533;
372
+ --delta-active-color-foreground-navigation-primary: 0.0833;
373
+ --delta-hover-color-foreground-navigation-secondary: 0.0392;
374
+ --delta-active-color-foreground-navigation-secondary: 0.0692;
375
+ --delta-hover-color-foreground-checkbox-unselected: 0.0779;
376
+ --delta-active-color-foreground-checkbox-unselected: 0.1179;
377
+ --delta-hover-color-foreground-radio-unselected: 0.0779;
378
+ --delta-active-color-foreground-radio-unselected: 0.1179;
379
+ }
380
+ }
381
+ }