@helloimjolopez-pathway/pathway-tokens 5.4.0 → 7.0.0

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 (16) hide show
  1. package/README.md +80 -19
  2. package/components/scrollbar/scrollbar.jsx +184 -0
  3. package/components/sidenav/sidenav.jsx +866 -0
  4. package/dist/breakpoints.css +11 -0
  5. package/dist/layout-contextual.css +36 -0
  6. package/dist/layout-responsive.css +32 -0
  7. package/dist/layout.css +48 -0
  8. package/dist/motion.css +23 -0
  9. package/dist/primitives.css +358 -0
  10. package/dist/themes/light.css +175 -0
  11. package/dist/themes/midnight.css +175 -0
  12. package/dist/tokens.js +8943 -69506
  13. package/dist/tokens.json +3099 -10657
  14. package/dist/type.css +49 -0
  15. package/package.json +51 -8
  16. package/dist/tokens.css +0 -2648
package/dist/themes/light.css ADDED
@@ -0,0 +1,175 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root, [data-theme="light"] {
6
+ --semantic-color-fill-surface-canvas: var(--primitive-color-cool-neutral-10);
7
+ --semantic-color-fill-surface-sheet: var(--primitive-color-cool-neutral-0);
8
+ --semantic-color-fill-surface-elevated: var(--primitive-color-warm-neutral-0);
9
+ --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-36);
10
+ --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-400);
11
+ --semantic-color-fill-action-primary-strong-hover: var(--primitive-color-brand-450);
12
+ --semantic-color-fill-action-primary-strong-pressed: var(--primitive-color-brand-500);
13
+ --semantic-color-fill-action-primary-subtle-rest: var(--primitive-color-brand-10);
14
+ --semantic-color-fill-action-primary-subtle-hover: var(--primitive-color-brand-25);
15
+ --semantic-color-fill-action-primary-subtle-pressed: var(--primitive-color-brand-50);
16
+ --semantic-color-fill-action-secondary-rest: var(--primitive-color-warm-neutral-25);
17
+ --semantic-color-fill-action-secondary-hover: var(--primitive-color-warm-neutral-50);
18
+ --semantic-color-fill-action-secondary-pressed: var(--primitive-color-warm-neutral-75);
19
+ --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-24);
20
+ --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-24);
21
+ --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-500-8);
22
+ --semantic-color-fill-action-status-info-rest: var(--primitive-color-amethyst-25);
23
+ --semantic-color-fill-action-status-info-hover: var(--primitive-color-amethyst-50);
24
+ --semantic-color-fill-action-status-info-pressed: var(--primitive-color-amethyst-75);
25
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-500);
26
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-600);
27
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-700);
28
+ --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-25);
29
+ --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-50);
30
+ --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-75);
31
+ --semantic-color-fill-action-status-attention-rest: var(--primitive-color-saffron-25);
32
+ --semantic-color-fill-action-status-attention-hover: var(--primitive-color-saffron-75);
33
+ --semantic-color-fill-action-status-attention-pressed: var(--primitive-color-saffron-100);
34
+ --semantic-color-fill-action-status-severe-rest: var(--primitive-color-orange-50);
35
+ --semantic-color-fill-action-status-severe-hover: var(--primitive-color-orange-75);
36
+ --semantic-color-fill-action-status-severe-pressed: var(--primitive-color-orange-100);
37
+ --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-350);
38
+ --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-400);
39
+ --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-450);
40
+ --semantic-color-fill-action-status-negative-subtle-rest: var(--primitive-color-red-25);
41
+ --semantic-color-fill-action-status-negative-subtle-hover: var(--primitive-color-red-50);
42
+ --semantic-color-fill-action-status-negative-subtle-pressed: var(--primitive-color-red-75);
43
+ --semantic-color-fill-static-neutral-mono: var(--primitive-color-warm-neutral-0);
44
+ --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-25);
45
+ --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-50);
46
+ --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-75);
47
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-150);
48
+ --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-10);
49
+ --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-25);
50
+ --semantic-color-fill-static-brand-base: var(--primitive-color-brand-50);
51
+ --semantic-color-fill-static-brand-bold: var(--primitive-color-brand-400);
52
+ --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-600);
53
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-700);
54
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-25);
55
+ --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-200);
56
+ --semantic-color-fill-static-positive-subtle: var(--primitive-color-green-25);
57
+ --semantic-color-fill-static-positive-strong: var(--primitive-color-green-150);
58
+ --semantic-color-fill-static-attention-subtle: var(--primitive-color-saffron-25);
59
+ --semantic-color-fill-static-attention-strong: var(--primitive-color-saffron-150);
60
+ --semantic-color-fill-static-severe-subtle: var(--primitive-color-orange-50);
61
+ --semantic-color-fill-static-severe-strong: var(--primitive-color-orange-250);
62
+ --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-50);
63
+ --semantic-color-fill-static-negative-strong: var(--primitive-color-red-500);
64
+ --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-25);
65
+ --semantic-color-fill-static-accent-jade-strong: var(--primitive-color-jade-300);
66
+ --semantic-color-fill-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-50);
67
+ --semantic-color-fill-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-350);
68
+ --semantic-color-fill-static-accent-mauve-subtle: var(--primitive-color-mauve-25);
69
+ --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-200);
70
+ --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-50);
71
+ --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-350);
72
+ --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-800-36);
73
+ --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-500);
74
+ --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-600);
75
+ --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-800);
76
+ --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-550);
77
+ --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-600);
78
+ --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-800);
79
+ --semantic-color-foreground-action-secondary-subtle-rest: var(--primitive-color-cool-neutral-400);
80
+ --semantic-color-foreground-action-secondary-subtle-hover: var(--primitive-color-cool-neutral-450);
81
+ --semantic-color-foreground-action-secondary-subtle-pressed: var(--primitive-color-cool-neutral-500);
82
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-700);
83
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-800);
84
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-900);
85
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-700);
86
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-800);
87
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-900);
88
+ --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-700);
89
+ --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-800);
90
+ --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-900);
91
+ --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-700);
92
+ --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-800);
93
+ --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-900);
94
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-700);
95
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-800);
96
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-900);
97
+ --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
98
+ --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-400);
99
+ --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-500);
100
+ --semantic-color-foreground-static-neutral-base: var(--primitive-color-cool-neutral-600);
101
+ --semantic-color-foreground-static-neutral-bold: var(--primitive-color-cool-neutral-700);
102
+ --semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-900);
103
+ --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-550);
104
+ --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-brand-50);
105
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-600);
106
+ --semantic-color-foreground-static-info-on-strong: var(--primitive-color-amethyst-900);
107
+ --semantic-color-foreground-static-attention-on-subtle: var(--primitive-color-saffron-600);
108
+ --semantic-color-foreground-static-attention-on-strong: var(--primitive-color-saffron-700);
109
+ --semantic-color-foreground-static-severe-on-subtle: var(--primitive-color-orange-700);
110
+ --semantic-color-foreground-static-severe-on-strong: var(--primitive-color-cool-neutral-900);
111
+ --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-700);
112
+ --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-red-0);
113
+ --semantic-color-foreground-static-positive-on-subtle: var(--primitive-color-green-700);
114
+ --semantic-color-foreground-static-positive-on-strong: var(--primitive-color-green-800);
115
+ --semantic-color-foreground-static-accent-jade-on-subtle: var(--primitive-color-jade-600);
116
+ --semantic-color-foreground-static-accent-jade-on-strong: var(--primitive-color-cool-neutral-900);
117
+ --semantic-color-foreground-static-accent-seabreeze-on-subtle: var(--primitive-color-seabreeze-700);
118
+ --semantic-color-foreground-static-accent-seabreeze-on-strong: var(--primitive-color-cool-neutral-900);
119
+ --semantic-color-foreground-static-accent-mauve-on-subtle: var(--primitive-color-mauve-500);
120
+ --semantic-color-foreground-static-accent-mauve-on-strong: var(--primitive-color-cool-neutral-900);
121
+ --semantic-color-foreground-static-accent-lagoon-on-subtle: var(--primitive-color-lagoon-800);
122
+ --semantic-color-foreground-static-accent-lagoon-on-strong: var(--primitive-color-cool-neutral-900);
123
+ --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-500-24);
124
+ --semantic-color-stroke-action-primary-rest: var(--primitive-color-brand-250);
125
+ --semantic-color-stroke-action-primary-hover: var(--primitive-color-brand-300);
126
+ --semantic-color-stroke-action-primary-pressed: var(--primitive-color-brand-350);
127
+ --semantic-color-stroke-action-secondary-rest: var(--primitive-color-warm-neutral-250);
128
+ --semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-350);
129
+ --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-450);
130
+ --semantic-color-stroke-action-field-rest: var(--primitive-color-cool-neutral-300);
131
+ --semantic-color-stroke-action-field-hover: var(--primitive-color-cool-neutral-350);
132
+ --semantic-color-stroke-action-field-pressed: var(--primitive-color-cool-neutral-400);
133
+ --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-250);
134
+ --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-300);
135
+ --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-350);
136
+ --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-500);
137
+ --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-600);
138
+ --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-700);
139
+ --semantic-color-stroke-action-status-attention-rest: var(--primitive-color-saffron-150);
140
+ --semantic-color-stroke-action-status-attention-hover: var(--primitive-color-saffron-200);
141
+ --semantic-color-stroke-action-status-attention-pressed: var(--primitive-color-saffron-300);
142
+ --semantic-color-stroke-action-status-severe-rest: var(--primitive-color-orange-250);
143
+ --semantic-color-stroke-action-status-severe-hover: var(--primitive-color-orange-300);
144
+ --semantic-color-stroke-action-status-severe-pressed: var(--primitive-color-orange-400);
145
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-75);
146
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-100);
147
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-200);
148
+ --semantic-color-stroke-focusring-base: var(--primitive-color-brand-200);
149
+ --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-50);
150
+ --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-100);
151
+ --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-200);
152
+ --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-350);
153
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-200);
154
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-500);
155
+ --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-100);
156
+ --semantic-color-stroke-static-positive-strong: var(--primitive-color-green-500);
157
+ --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-100);
158
+ --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-200);
159
+ --semantic-color-stroke-static-severe-subtle: var(--primitive-color-orange-150);
160
+ --semantic-color-stroke-static-severe-strong: var(--primitive-color-orange-400);
161
+ --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-250);
162
+ --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-500);
163
+ --semantic-color-stroke-static-accent-jade-subtle: var(--primitive-color-jade-150);
164
+ --semantic-color-stroke-static-accent-jade-strong: var(--primitive-color-jade-350);
165
+ --semantic-color-stroke-static-accent-mauve-subtle: var(--primitive-color-mauve-150);
166
+ --semantic-color-stroke-static-accent-mauve-strong: var(--primitive-color-mauve-350);
167
+ --semantic-color-stroke-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-50);
168
+ --semantic-color-stroke-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-600);
169
+ --semantic-color-stroke-static-accent-lagoon-subtle: var(--primitive-color-lagoon-50);
170
+ --semantic-color-stroke-static-accent-lagoon-strong: var(--primitive-color-lagoon-600);
171
+ --semantic-color-scrim-faint: var(--primitive-color-cool-neutral-800-16);
172
+ --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
173
+ --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
174
+ --semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
175
+ }
package/dist/themes/midnight.css ADDED
@@ -0,0 +1,175 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-theme="midnight"], [data-theme="dark"] {
6
+ --semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
7
+ --semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
8
+ --semantic-color-fill-surface-elevated: var(--primitive-color-brand-700);
9
+ --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-8);
10
+ --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-250);
11
+ --semantic-color-fill-action-primary-strong-hover: var(--primitive-color-brand-200);
12
+ --semantic-color-fill-action-primary-strong-pressed: var(--primitive-color-brand-150);
13
+ --semantic-color-fill-action-primary-subtle-rest: var(--primitive-color-brand-600);
14
+ --semantic-color-fill-action-primary-subtle-hover: var(--primitive-color-brand-75-8);
15
+ --semantic-color-fill-action-primary-subtle-pressed: var(--primitive-color-brand-600-50);
16
+ --semantic-color-fill-action-secondary-rest: var(--primitive-color-warm-neutral-600);
17
+ --semantic-color-fill-action-secondary-hover: var(--primitive-color-warm-neutral-550);
18
+ --semantic-color-fill-action-secondary-pressed: var(--primitive-color-warm-neutral-500);
19
+ --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-8);
20
+ --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-16);
21
+ --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-100-16);
22
+ --semantic-color-fill-action-status-info-rest: var(--primitive-color-amethyst-700);
23
+ --semantic-color-fill-action-status-info-hover: var(--primitive-color-amethyst-600);
24
+ --semantic-color-fill-action-status-info-pressed: var(--primitive-color-amethyst-500);
25
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-350);
26
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
27
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-200);
28
+ --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-800);
29
+ --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-700);
30
+ --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-600);
31
+ --semantic-color-fill-action-status-attention-rest: var(--primitive-color-saffron-700);
32
+ --semantic-color-fill-action-status-attention-hover: var(--primitive-color-saffron-500);
33
+ --semantic-color-fill-action-status-attention-pressed: var(--primitive-color-saffron-400);
34
+ --semantic-color-fill-action-status-severe-rest: var(--primitive-color-orange-800);
35
+ --semantic-color-fill-action-status-severe-hover: var(--primitive-color-orange-700);
36
+ --semantic-color-fill-action-status-severe-pressed: var(--primitive-color-orange-600);
37
+ --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-200);
38
+ --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-150);
39
+ --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-100);
40
+ --semantic-color-fill-action-status-negative-subtle-rest: var(--primitive-color-red-800);
41
+ --semantic-color-fill-action-status-negative-subtle-hover: var(--primitive-color-red-700);
42
+ --semantic-color-fill-action-status-negative-subtle-pressed: var(--primitive-color-red-600);
43
+ --semantic-color-fill-static-neutral-mono: var(--primitive-color-warm-neutral-900);
44
+ --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-800);
45
+ --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-700);
46
+ --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-600);
47
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-500);
48
+ --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-25);
49
+ --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
50
+ --semantic-color-fill-static-brand-base: var(--primitive-color-brand-100);
51
+ --semantic-color-fill-static-brand-bold: var(--primitive-color-brand-400);
52
+ --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-700);
53
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-800);
54
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-600);
55
+ --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-200);
56
+ --semantic-color-fill-static-positive-subtle: var(--primitive-color-green-700);
57
+ --semantic-color-fill-static-positive-strong: var(--primitive-color-green-300);
58
+ --semantic-color-fill-static-attention-subtle: var(--primitive-color-saffron-600);
59
+ --semantic-color-fill-static-attention-strong: var(--primitive-color-saffron-200);
60
+ --semantic-color-fill-static-severe-subtle: var(--primitive-color-orange-600);
61
+ --semantic-color-fill-static-severe-strong: var(--primitive-color-orange-200);
62
+ --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-700);
63
+ --semantic-color-fill-static-negative-strong: var(--primitive-color-red-500);
64
+ --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-600);
65
+ --semantic-color-fill-static-accent-jade-strong: var(--primitive-color-jade-200);
66
+ --semantic-color-fill-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-700);
67
+ --semantic-color-fill-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-200);
68
+ --semantic-color-fill-static-accent-mauve-subtle: var(--primitive-color-mauve-800);
69
+ --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-150);
70
+ --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-800);
71
+ --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-250);
72
+ --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
73
+ --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
74
+ --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
75
+ --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-0);
76
+ --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-175);
77
+ --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-150);
78
+ --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-125);
79
+ --semantic-color-foreground-action-secondary-subtle-rest: var(--primitive-color-cool-neutral-100);
80
+ --semantic-color-foreground-action-secondary-subtle-hover: var(--primitive-color-cool-neutral-75);
81
+ --semantic-color-foreground-action-secondary-subtle-pressed: var(--primitive-color-cool-neutral-50);
82
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-100);
83
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-75);
84
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-50);
85
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-300);
86
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-200);
87
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-150);
88
+ --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-300);
89
+ --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-200);
90
+ --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-150);
91
+ --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-250);
92
+ --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-200);
93
+ --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-150);
94
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
95
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
96
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
97
+ --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
98
+ --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-250);
99
+ --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-175);
100
+ --semantic-color-foreground-static-neutral-base: var(--primitive-color-cool-neutral-75);
101
+ --semantic-color-foreground-static-neutral-bold: var(--primitive-color-cool-neutral-0);
102
+ --semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-25);
103
+ --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-600);
104
+ --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-brand-100);
105
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-50);
106
+ --semantic-color-foreground-static-info-on-strong: var(--primitive-color-amethyst-900);
107
+ --semantic-color-foreground-static-attention-on-subtle: var(--primitive-color-saffron-100);
108
+ --semantic-color-foreground-static-attention-on-strong: var(--primitive-color-saffron-700);
109
+ --semantic-color-foreground-static-severe-on-subtle: var(--primitive-color-orange-0);
110
+ --semantic-color-foreground-static-severe-on-strong: var(--primitive-color-cool-neutral-700);
111
+ --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-75);
112
+ --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-red-0);
113
+ --semantic-color-foreground-static-positive-on-subtle: var(--primitive-color-green-50);
114
+ --semantic-color-foreground-static-positive-on-strong: var(--primitive-color-cool-neutral-800);
115
+ --semantic-color-foreground-static-accent-jade-on-subtle: var(--primitive-color-jade-25);
116
+ --semantic-color-foreground-static-accent-jade-on-strong: var(--primitive-color-jade-800);
117
+ --semantic-color-foreground-static-accent-seabreeze-on-subtle: var(--primitive-color-seabreeze-50);
118
+ --semantic-color-foreground-static-accent-seabreeze-on-strong: var(--primitive-color-seabreeze-900);
119
+ --semantic-color-foreground-static-accent-mauve-on-subtle: var(--primitive-color-mauve-100);
120
+ --semantic-color-foreground-static-accent-mauve-on-strong: var(--primitive-color-cool-neutral-700);
121
+ --semantic-color-foreground-static-accent-lagoon-on-subtle: var(--primitive-color-lagoon-75);
122
+ --semantic-color-foreground-static-accent-lagoon-on-strong: var(--primitive-color-cool-neutral-700);
123
+ --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-100-16);
124
+ --semantic-color-stroke-action-primary-rest: var(--primitive-color-brand-100);
125
+ --semantic-color-stroke-action-primary-hover: var(--primitive-color-brand-75);
126
+ --semantic-color-stroke-action-primary-pressed: var(--primitive-color-brand-50);
127
+ --semantic-color-stroke-action-secondary-rest: var(--primitive-color-warm-neutral-500);
128
+ --semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-450);
129
+ --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-400);
130
+ --semantic-color-stroke-action-field-rest: var(--primitive-color-cool-neutral-300);
131
+ --semantic-color-stroke-action-field-hover: var(--primitive-color-cool-neutral-250);
132
+ --semantic-color-stroke-action-field-pressed: var(--primitive-color-cool-neutral-200);
133
+ --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-250);
134
+ --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-200);
135
+ --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-150);
136
+ --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-400);
137
+ --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-350);
138
+ --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-300);
139
+ --semantic-color-stroke-action-status-attention-rest: var(--primitive-color-saffron-350);
140
+ --semantic-color-stroke-action-status-attention-hover: var(--primitive-color-saffron-300);
141
+ --semantic-color-stroke-action-status-attention-pressed: var(--primitive-color-saffron-200);
142
+ --semantic-color-stroke-action-status-severe-rest: var(--primitive-color-orange-350);
143
+ --semantic-color-stroke-action-status-severe-hover: var(--primitive-color-orange-300);
144
+ --semantic-color-stroke-action-status-severe-pressed: var(--primitive-color-orange-250);
145
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-700);
146
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-600);
147
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-500);
148
+ --semantic-color-stroke-focusring-base: var(--primitive-color-cool-neutral-0-24);
149
+ --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-800);
150
+ --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-700);
151
+ --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-450);
152
+ --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-200);
153
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-700);
154
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-350);
155
+ --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-800);
156
+ --semantic-color-stroke-static-positive-strong: var(--primitive-color-green-500);
157
+ --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-700);
158
+ --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-350);
159
+ --semantic-color-stroke-static-severe-subtle: var(--primitive-color-orange-700);
160
+ --semantic-color-stroke-static-severe-strong: var(--primitive-color-orange-350);
161
+ --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-500);
162
+ --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-200);
163
+ --semantic-color-stroke-static-accent-jade-subtle: var(--primitive-color-jade-800);
164
+ --semantic-color-stroke-static-accent-jade-strong: var(--primitive-color-jade-400);
165
+ --semantic-color-stroke-static-accent-mauve-subtle: var(--primitive-color-mauve-800);
166
+ --semantic-color-stroke-static-accent-mauve-strong: var(--primitive-color-mauve-150);
167
+ --semantic-color-stroke-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-800);
168
+ --semantic-color-stroke-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-250);
169
+ --semantic-color-stroke-static-accent-lagoon-subtle: var(--primitive-color-lagoon-800);
170
+ --semantic-color-stroke-static-accent-lagoon-strong: var(--primitive-color-lagoon-250);
171
+ --semantic-color-scrim-faint: var(--primitive-color-cool-neutral-800-16);
172
+ --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
173
+ --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
174
+ --semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
175
+ }