@bcc-code/design-tokens 1.0.12 → 1.0.13

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 (4) hide show
  1. package/dist/bcc-primevue-preset.js +178 -266
  2. package/dist/tailwind.css +48 -38
  3. package/dist/variables.css +625 -591
  4. package/package.json +5 -6
package/dist/variables.css CHANGED
@@ -1,18 +1,27 @@
1
1
  /* Design Tokens – Combined CSS */
2
2
  /* Primitives */
3
3
  :root {
4
- --color-neutral-0: #ffffff;
5
- --color-neutral-100: #f7f8f9;
6
- --color-neutral-200: #f1f2f4;
7
- --color-neutral-300: #dcdfe4;
8
- --color-neutral-400: #b3b9c4;
9
- --color-neutral-500: #8590a2;
10
- --color-neutral-600: #758195;
11
- --color-neutral-700: #626f86;
12
- --color-neutral-800: #4b5668;
13
- --color-neutral-900: #374152;
14
- --color-neutral-1000: #282f3c;
15
- --color-neutral-1100: #1e242d;
4
+ /* COLOR */
5
+ --color-bcc-100: #e6f2f1;
6
+ --color-bcc-200: #d0e3e1;
7
+ --color-bcc-300: #accbc8;
8
+ --color-bcc-400: #73b2ac;
9
+ --color-bcc-500: #2e9087;
10
+ --color-bcc-600: #187b73;
11
+ --color-bcc-700: #0e6962;
12
+ --color-bcc-800: #004e48;
13
+ --color-bcc-900: #003d39;
14
+ --color-bcc-1000: #002320;
15
+ --color-blue-100: #f1f7fd;
16
+ --color-blue-200: #dfedfa;
17
+ --color-blue-300: #c6e0f7;
18
+ --color-blue-400: #a0cdf0;
19
+ --color-blue-500: #72b1e8;
20
+ --color-blue-600: #5294e0;
21
+ --color-blue-700: #3c79d4;
22
+ --color-blue-800: #3365c2;
23
+ --color-blue-900: #2f529e;
24
+ --color-blue-1000: #25385f;
16
25
  --color-dark-neutral-0: #161a1d;
17
26
  --color-dark-neutral-100: #1d2125;
18
27
  --color-dark-neutral-200: #22272b;
@@ -25,36 +34,11 @@
25
34
  --color-dark-neutral-900: #b6c2cf;
26
35
  --color-dark-neutral-1000: #c7d1db;
27
36
  --color-dark-neutral-1100: #dee4ea;
28
- --color-bcc-100: #e6f2f1;
29
- --color-bcc-200: #d0e3e1;
30
- --color-bcc-300: #accbc8;
31
- --color-bcc-400: #73b2ac;
32
- --color-bcc-500: #2e9087;
33
- --color-bcc-600: #187b73;
34
- --color-bcc-700: #0e6962;
35
- --color-bcc-800: #004e48;
36
- --color-bcc-900: #003d39;
37
- --color-bcc-1000: #002320;
38
- --color-rust-100: #fcf6f4;
39
- --color-rust-200: #f9ece7;
40
- --color-rust-300: #f6dcd2;
41
- --color-rust-400: #e9b29e;
42
- --color-rust-500: #e29f87;
43
- --color-rust-600: #d37f60;
44
- --color-rust-700: #be6544;
45
- --color-rust-800: #9f5236;
46
- --color-rust-900: #844630;
47
- --color-rust-1000: #4c271a;
48
- --color-red-100: #fcf4f4;
49
- --color-red-200: #fae7e6;
50
- --color-red-300: #f6d3d2;
51
- --color-red-400: #efb4b2;
52
- --color-red-500: #e38986;
53
- --color-red-600: #d5625e;
54
- --color-red-700: #c04642;
55
- --color-red-800: #ad3c38;
56
- --color-red-900: #86312e;
57
- --color-red-1000: #461716;
37
+ --color-dark-neutral-alpha-100-a: rgba(188, 214, 240, 0.04);
38
+ --color-dark-neutral-alpha-200-a: rgba(161, 189, 217, 0.08);
39
+ --color-dark-neutral-alpha-300-a: rgba(166, 197, 226, 0.16);
40
+ --color-dark-neutral-alpha-400-a: rgba(166, 197, 226, 0.28);
41
+ --color-dark-neutral-alpha-500-a: rgba(166, 197, 226, 0.5);
58
42
  --color-green-100: #f2fbf6;
59
43
  --color-green-200: #e2f6ea;
60
44
  --color-green-300: #c6ecd6;
@@ -65,46 +49,6 @@
65
49
  --color-green-800: #296c47;
66
50
  --color-green-900: #25563b;
67
51
  --color-green-1000: #133925;
68
- --color-teal-100: #f1f9fa;
69
- --color-teal-200: #dceff1;
70
- --color-teal-300: #bde0e4;
71
- --color-teal-400: #8fc9d1;
72
- --color-teal-500: #5cabb7;
73
- --color-teal-600: #3e8e9c;
74
- --color-teal-700: #377483;
75
- --color-teal-800: #32606c;
76
- --color-teal-900: #2f505b;
77
- --color-teal-1000: #1d353f;
78
- --color-sand-100: #f7f3ee;
79
- --color-sand-200: #ede5da;
80
- --color-sand-300: #dccfba;
81
- --color-sand-400: #c5b191;
82
- --color-sand-500: #ae966d;
83
- --color-sand-600: #937b4f;
84
- --color-sand-700: #74613c;
85
- --color-sand-800: #5a4d31;
86
- --color-sand-900: #49402b;
87
- --color-sand-1000: #3c3420;
88
- --color-blue-100: #f1f7fd;
89
- --color-blue-200: #dfedfa;
90
- --color-blue-300: #c6e0f7;
91
- --color-blue-400: #a0cdf0;
92
- --color-blue-500: #72b1e8;
93
- --color-blue-600: #5294e0;
94
- --color-blue-700: #3c79d4;
95
- --color-blue-800: #3365c2;
96
- --color-blue-900: #2f529e;
97
- --color-blue-1000: #25385f;
98
- --color-purple-100: #f1f1fc;
99
- --color-purple-200: #e5e7fa;
100
- --color-purple-300: #d0d1f5;
101
- --color-purple-400: #b3b3ee;
102
- --color-purple-500: #9b95e4;
103
- --color-purple-600: #8678d9;
104
- --color-purple-700: #7860cb;
105
- --color-purple-800: #6750b2;
106
- --color-purple-900: #554390;
107
- --color-purple-1000: #352c54;
108
52
  --color-magenta-100: #faf5f9;
109
53
  --color-magenta-200: #f7ecf5;
110
54
  --color-magenta-300: #f0daec;
@@ -115,17 +59,97 @@
115
59
  --color-magenta-800: #93437a;
116
60
  --color-magenta-900: #7a3a65;
117
61
  --color-magenta-1000: #592648;
62
+ --color-neutral-0: #ffffff;
63
+ --color-neutral-100: #f7f8f9;
64
+ --color-neutral-200: #f1f2f4;
65
+ --color-neutral-300: #dcdfe4;
66
+ --color-neutral-400: #b3b9c4;
67
+ --color-neutral-500: #8590a2;
68
+ --color-neutral-600: #758195;
69
+ --color-neutral-700: #626f86;
70
+ --color-neutral-800: #4b5668;
71
+ --color-neutral-900: #374152;
72
+ --color-neutral-1000: #282f3c;
73
+ --color-neutral-1100: #1e242d;
118
74
  --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
119
- --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
120
75
  --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
121
76
  --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
122
77
  --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.31);
123
- --color-dark-neutral-alpha-100-a: rgba(188, 214, 240, 0.04);
124
- --color-dark-neutral-alpha-200-a: rgba(161, 189, 217, 0.08);
125
- --color-dark-neutral-alpha-300-a: rgba(166, 197, 226, 0.16);
126
- --color-dark-neutral-alpha-400-a: rgba(166, 197, 226, 0.28);
127
- --color-dark-neutral-alpha-500-a: rgba(166, 197, 226, 0.5);
128
- --opacity-opacity: #ffffff;
78
+ --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
79
+ --color-purple-100: #f1f1fc;
80
+ --color-purple-200: #e5e7fa;
81
+ --color-purple-300: #d0d1f5;
82
+ --color-purple-400: #b3b3ee;
83
+ --color-purple-500: #9b95e4;
84
+ --color-purple-600: #8678d9;
85
+ --color-purple-700: #7860cb;
86
+ --color-purple-800: #6750b2;
87
+ --color-purple-900: #554390;
88
+ --color-purple-1000: #352c54;
89
+ --color-red-100: #fcf4f4;
90
+ --color-red-200: #fae7e6;
91
+ --color-red-300: #f6d3d2;
92
+ --color-red-400: #efb4b2;
93
+ --color-red-500: #e38986;
94
+ --color-red-600: #d5625e;
95
+ --color-red-700: #c04642;
96
+ --color-red-800: #ad3c38;
97
+ --color-red-900: #86312e;
98
+ --color-red-1000: #461716;
99
+ --color-rust-100: #fcf6f4;
100
+ --color-rust-200: #f9ece7;
101
+ --color-rust-300: #f6dcd2;
102
+ --color-rust-400: #e9b29e;
103
+ --color-rust-500: #e29f87;
104
+ --color-rust-600: #d37f60;
105
+ --color-rust-700: #be6544;
106
+ --color-rust-800: #9f5236;
107
+ --color-rust-900: #844630;
108
+ --color-rust-1000: #4c271a;
109
+ --color-sand-100: #f7f3ee;
110
+ --color-sand-200: #ede5da;
111
+ --color-sand-300: #dccfba;
112
+ --color-sand-400: #c5b191;
113
+ --color-sand-500: #ae966d;
114
+ --color-sand-600: #937b4f;
115
+ --color-sand-700: #74613c;
116
+ --color-sand-800: #5a4d31;
117
+ --color-sand-900: #49402b;
118
+ --color-sand-1000: #3c3420;
119
+ --color-teal-100: #f1f9fa;
120
+ --color-teal-200: #dceff1;
121
+ --color-teal-300: #bde0e4;
122
+ --color-teal-400: #8fc9d1;
123
+ --color-teal-500: #5cabb7;
124
+ --color-teal-600: #3e8e9c;
125
+ --color-teal-700: #377483;
126
+ --color-teal-800: #32606c;
127
+ --color-teal-900: #2f505b;
128
+ --color-teal-1000: #1d353f;
129
+
130
+ /* TEXT */
131
+ --text-decoration-none: none;
132
+ --text-decoration-underline: underline;
133
+ --text-decoration-line-through: line-through;
134
+ --text-transform-uppercase: uppercase;
135
+ --text-transform-lowercase: lowercase;
136
+ --text-transform-capitalize: capitalize;
137
+ --text-transform-none: none;
138
+ --text-indent-0: var(--dimension-space-0);
139
+
140
+ /* BORDER */
141
+ --border-radius-2xl: 3rem;
142
+ --border-radius-full: 999px;
143
+ --border-radius-lg: 1rem;
144
+ --border-radius-md: 0.5rem;
145
+ --border-radius-none: 0;
146
+ --border-radius-sm: 0.25rem;
147
+ --border-radius-xl: 2rem;
148
+ --border-radius-xs: 0.125rem;
149
+ --border-width-md: 2px;
150
+ --border-width-sm: 1px;
151
+
152
+ /* DIMENSION */
129
153
  --dimension-space-0: 0 rem;
130
154
  --dimension-space-25: 0.125rem;
131
155
  --dimension-space-50: 0.25rem;
@@ -140,618 +164,628 @@
140
164
  --dimension-space-600: 3rem;
141
165
  --dimension-space-800: 4rem;
142
166
  --dimension-space-1000: 80px;
143
- --border-width-sm: 1px;
144
- --border-width-md: 2px;
145
- --border-radius-none: 0;
146
- --border-radius-xs: 0.125rem;
147
- --border-radius-sm: 0.25rem;
148
- --border-radius-md: 0.5rem;
149
- --border-radius-lg: 1rem;
150
- --border-radius-xl: 2rem;
151
- --border-radius-2xl: 3rem;
152
- --border-radius-full: 999px;
153
- --icon-size-xs: 1rem;
154
- --icon-size-sm: 1.25rem;
155
- --icon-size-md: 1.5rem;
156
- --icon-size-lg: 2rem;
157
- --icon-size-xl: 3rem;
158
- --text-decoration-none: none;
159
- --text-decoration-underline: underline;
160
- --text-decoration-line-through: line-through;
161
- --text-transform-uppercase: uppercase;
162
- --text-transform-lowercase: lowercase;
163
- --text-transform-capitalize: capitalize;
164
- --text-transform-none: none;
165
- --font-size-text-xs: 0.75rem;
166
- --font-size-text-sm: 0.875rem;
167
- --font-size-text-md: 1rem;
168
- --font-size-text-lg: 1.25rem;
169
- --font-size-text-xl: 1.5rem;
167
+
168
+ /* FONT */
169
+ --font-families-archivo: Archivo;
170
170
  --font-size-text-2xl: 2rem;
171
171
  --font-size-text-3xl: 2.25rem;
172
172
  --font-size-text-4xl: 3rem;
173
- --font-weight-regular-400: var(--font-weights-archivo-regular);
174
- --font-weight-medium-500: var(--font-weights-archivo-medium);
173
+ --font-size-text-lg: 1.25rem;
174
+ --font-size-text-md: 1rem;
175
+ --font-size-text-sm: 0.875rem;
176
+ --font-size-text-xl: 1.5rem;
177
+ --font-size-text-xs: 0.75rem;
175
178
  --font-weight-bold-700: var(--font-weights-archivo-bold);
176
- --line-height-text-4xl-leading-none: 3rem;
177
- --line-height-text-4xl-leading-tight: 3.25rem;
178
- --line-height-text-3xl-leading-none: 2.25rem;
179
- --line-height-text-3xl-leading-tight: 2.5rem;
179
+ --font-weight-medium-500: var(--font-weights-archivo-medium);
180
+ --font-weight-regular-400: var(--font-weights-archivo-regular);
181
+ --font-weights-archivo-black: 900;
182
+ --font-weights-archivo-bold: 700;
183
+ --font-weights-archivo-extrabold: 800;
184
+ --font-weights-archivo-extralight: 200;
185
+ --font-weights-archivo-light: 300;
186
+ --font-weights-archivo-medium: 500;
187
+ --font-weights-archivo-regular: 400;
188
+ --font-weights-archivo-semibold: 600;
189
+ --font-weights-archivo-thin: 100;
190
+
191
+ /* ICON */
192
+ --icon-size-lg: 2rem;
193
+ --icon-size-md: 1.5rem;
194
+ --icon-size-sm: 1.25rem;
195
+ --icon-size-xl: 3rem;
196
+ --icon-size-xs: 1rem;
197
+
198
+ /* LINE */
180
199
  --line-height-text-2xl-leading-none: 2rem;
181
200
  --line-height-text-2xl-leading-tight: 2.25rem;
182
- --line-height-text-xl-leading-none: 1.5rem;
183
- --line-height-text-xl-leading-tight: 1.75;
201
+ --line-height-text-3xl-leading-none: 2.25rem;
202
+ --line-height-text-3xl-leading-tight: 2.5rem;
203
+ --line-height-text-4xl-leading-none: 3rem;
204
+ --line-height-text-4xl-leading-tight: 3.25rem;
184
205
  --line-height-text-lg-leading-none: 1.25rem;
185
206
  --line-height-text-lg-leading-tight: 1.5rem;
186
207
  --line-height-text-md-leading-none: 1rem;
187
- --line-height-text-md-leading-tight: 1.25;
188
208
  --line-height-text-md-leading-normal: 1.5rem;
209
+ --line-height-text-md-leading-tight: 1.25;
189
210
  --line-height-text-sm-leading-none: 0.875rem;
190
211
  --line-height-text-sm-leading-normal: 1.25rem;
212
+ --line-height-text-xl-leading-none: 1.5rem;
213
+ --line-height-text-xl-leading-tight: 1.75;
191
214
  --line-height-text-xs-leading-none: 0.75rem;
192
215
  --line-height-text-xs-leading-normal: 1.25rem;
216
+
217
+ /* OPACITY */
218
+ --opacity-opacity: #ffffff;
219
+
220
+ /* SPACE */
193
221
  --space-between-0: var(--dimension-space-0);
194
- --tracking-tighter: -0.04em;
195
- --tracking-tight: -0.02em;
222
+
223
+ /* TRACKING */
196
224
  --tracking-normal: 0em;
225
+ --tracking-tight: -0.02em;
226
+ --tracking-tighter: -0.04em;
197
227
  --tracking-wide: 0.04em;
198
- --text-indent-0: var(--dimension-space-0);
199
- --font-families-archivo: Archivo;
200
- --font-weights-archivo-thin: 100;
201
- --font-weights-archivo-extralight: 200;
202
- --font-weights-archivo-light: 300;
203
- --font-weights-archivo-regular: 400;
204
- --font-weights-archivo-medium: 500;
205
- --font-weights-archivo-semibold: 600;
206
- --font-weights-archivo-bold: 700;
207
- --font-weights-archivo-extrabold: 800;
208
- --font-weights-archivo-black: 900;
228
+
209
229
  }
210
230
 
211
231
  /* Light Theme (Semantic) */
212
232
  :root {
213
- --color-surface-primary: var(--color-neutral-0);
214
- --color-surface-secondary: var(--color-neutral-200);
215
- --color-surface-overlay-default: var(--color-neutral-alpha-500-a);
216
- --color-surface-inverse-primary: var(--color-dark-neutral-0);
217
- --color-surface-inverse-secondary: var(--color-dark-neutral-200);
218
- --color-divider-light: var(--color-neutral-100);
219
- --color-divider-default: var(--color-neutral-200);
220
- --color-divider-bold: var(--color-neutral-300);
221
- --color-text-primary: var(--color-neutral-1100);
222
- --color-text-secondary: var(--color-neutral-600);
223
- --color-text-tertiary: var(--color-neutral-400);
224
- --color-text-inverse: var(--color-neutral-0);
225
- --color-text-disabled: var(--color-neutral-alpha-400-a);
226
- --color-text-success: var(--color-green-600);
227
- --color-text-alert: var(--color-red-600);
228
- --color-text-info: var(--color-neutral-0);
229
- --color-text-danger: var(--color-neutral-0);
230
- --color-text-brand-default: var(--color-bcc-700);
231
- --color-text-brand-bold: var(--color-bcc-800);
232
- --color-text-accent-rust-default: var(--color-rust-700);
233
- --color-text-accent-rust-bold: var(--color-rust-800);
234
- --color-text-accent-yellow-default: var(--color-red-700);
235
- --color-text-accent-yellow-bold: var(--color-red-800);
236
- --color-text-accent-green-default: var(--color-green-700);
237
- --color-text-accent-green-bold: var(--color-green-800);
238
- --color-text-accent-teal-default: var(--color-teal-700);
239
- --color-text-accent-teal-bold: var(--color-teal-800);
240
- --color-text-accent-sand-default: var(--color-sand-700);
241
- --color-text-accent-sand-bold: var(--color-sand-800);
242
- --color-text-accent-blue-default: var(--color-blue-700);
243
- --color-text-accent-blue-bold: var(--color-blue-800);
244
- --color-text-accent-purple-default: var(--color-purple-700);
245
- --color-text-accent-purple-bold: var(--color-purple-800);
246
- --color-text-accent-magenta-default: var(--color-magenta-700);
247
- --color-text-accent-magenta-bold: var(--color-magenta-800);
248
- --color-icon-primary: var(--color-neutral-1100);
249
- --color-icon-secondary: var(--color-neutral-700);
250
- --color-icon-tertiary: var(--color-neutral-400);
251
- --color-icon-inverse: var(--color-neutral-0);
252
- --color-icon-disabled: var(--color-neutral-alpha-400-a);
253
- --color-icon-success: var(--color-green-600);
254
- --color-icon-alert: var(--color-red-600);
255
- --color-icon-info: #ffffff;
256
- --color-icon-danger: #ffffff;
257
- --color-icon-accent-blue: var(--color-blue-700);
258
- --color-icon-accent-red: var(--color-red-700);
259
- --color-icon-accent-green: var(--color-green-700);
260
- --color-icon-accent-rust: var(--color-rust-700);
261
- --color-icon-accent-teal: var(--color-teal-700);
262
- --color-icon-accent-purple: var(--color-purple-700);
263
- --color-icon-accent-magenta: var(--color-magenta-700);
264
- --color-icon-accent-sand: var(--color-sand-700);
265
- --color-icon-brand: var(--color-bcc-700);
266
- --color-link-default: var(--color-blue-600);
267
- --color-link-hover: var(--color-blue-700);
268
- --color-link-visited: var(--color-blue-900);
269
- --color-background-disabled-default: #ffffff;
270
- --color-background-brand-default: var(--color-bcc-600);
271
- --color-background-brand-hover: var(--color-bcc-700);
272
- --color-background-brand-pressed: var(--color-bcc-800);
273
- --color-background-brand-lighter-default: var(--color-bcc-200);
274
- --color-background-brand-lighter-hover: var(--color-bcc-300);
275
- --color-background-brand-lighter-pressed: var(--color-bcc-400);
276
- --color-background-brand-light-default: var(--color-bcc-400);
277
- --color-background-brand-light-hover: var(--color-bcc-500);
278
- --color-background-brand-light-pressed: var(--color-bcc-600);
279
- --color-background-brand-bold-default: var(--color-bcc-800);
280
- --color-background-brand-bold-hover: var(--color-bcc-900);
281
- --color-background-brand-bold-pressed: var(--color-bcc-1000);
233
+ /* COLOR */
234
+ --color-background-accent-blue-bold-default: var(--color-blue-800);
235
+ --color-background-accent-blue-bold-hover: #ffffff;
236
+ --color-background-accent-blue-bold-pressed: #ffffff;
237
+ --color-background-accent-blue-default: var(--color-blue-600);
238
+ --color-background-accent-blue-hover: #ffffff;
239
+ --color-background-accent-blue-light-default: var(--color-blue-400);
240
+ --color-background-accent-blue-light-hover: #ffffff;
241
+ --color-background-accent-blue-light-pressed: #ffffff;
242
+ --color-background-accent-blue-lighter-default: var(--color-blue-200);
243
+ --color-background-accent-blue-lighter-hover: #ffffff;
244
+ --color-background-accent-blue-lighter-pressed: #ffffff;
245
+ --color-background-accent-blue-pressed: #ffffff;
246
+ --color-background-accent-green-bold-default: var(--color-green-800);
247
+ --color-background-accent-green-bold-hover: var(--color-green-700);
248
+ --color-background-accent-green-bold-pressed: var(--color-green-600);
249
+ --color-background-accent-green-default: var(--color-green-500);
250
+ --color-background-accent-green-hover: var(--color-green-600);
251
+ --color-background-accent-green-light-default: var(--color-green-400);
252
+ --color-background-accent-green-light-hover: var(--color-green-500);
253
+ --color-background-accent-green-light-pressed: var(--color-green-600);
254
+ --color-background-accent-green-lighter-default: var(--color-green-200);
255
+ --color-background-accent-green-lighter-hover: var(--color-green-300);
256
+ --color-background-accent-green-lighter-pressed: var(--color-green-400);
257
+ --color-background-accent-green-pressed: var(--color-green-700);
258
+ --color-background-accent-magenta-bold-default: var(--color-magenta-800);
259
+ --color-background-accent-magenta-bold-hover: #ffffff;
260
+ --color-background-accent-magenta-bold-pressed: #ffffff;
261
+ --color-background-accent-magenta-default: var(--color-magenta-600);
262
+ --color-background-accent-magenta-hover: #ffffff;
263
+ --color-background-accent-magenta-light-default: var(--color-magenta-400);
264
+ --color-background-accent-magenta-light-hover: #ffffff;
265
+ --color-background-accent-magenta-light-pressed: #ffffff;
266
+ --color-background-accent-magenta-lighter-default: var(--color-magenta-200);
267
+ --color-background-accent-magenta-lighter-hover: #ffffff;
268
+ --color-background-accent-magenta-lighter-pressed: #ffffff;
269
+ --color-background-accent-magenta-pressed: #ffffff;
270
+ --color-background-accent-purple-bold-default: var(--color-purple-800);
271
+ --color-background-accent-purple-bold-hover: #ffffff;
272
+ --color-background-accent-purple-bold-pressed: #ffffff;
273
+ --color-background-accent-purple-default: var(--color-purple-600);
274
+ --color-background-accent-purple-hover: #ffffff;
275
+ --color-background-accent-purple-light-default: var(--color-purple-400);
276
+ --color-background-accent-purple-light-hover: #ffffff;
277
+ --color-background-accent-purple-light-pressed: #ffffff;
278
+ --color-background-accent-purple-lighter-default: var(--color-purple-200);
279
+ --color-background-accent-purple-lighter-hover: #ffffff;
280
+ --color-background-accent-purple-lighter-pressed: #ffffff;
281
+ --color-background-accent-purple-pressed: #ffffff;
282
+ --color-background-accent-red-bold-default: var(--color-red-800);
283
+ --color-background-accent-red-bold-hover: var(--color-red-700);
284
+ --color-background-accent-red-bold-pressed: var(--color-red-600);
282
285
  --color-background-accent-red-default: var(--color-red-600);
283
286
  --color-background-accent-red-hover: var(--color-red-700);
284
- --color-background-accent-red-pressed: var(--color-red-800);
285
- --color-background-accent-red-lighter-default: var(--color-red-200);
286
- --color-background-accent-red-lighter-hover: var(--color-red-300);
287
- --color-background-accent-red-lighter-pressed: var(--color-red-400);
288
287
  --color-background-accent-red-light-default: var(--color-red-400);
289
288
  --color-background-accent-red-light-hover: var(--color-red-500);
290
289
  --color-background-accent-red-light-pressed: var(--color-red-600);
291
- --color-background-accent-red-bold-default: var(--color-red-800);
292
- --color-background-accent-red-bold-hover: var(--color-red-700);
293
- --color-background-accent-red-bold-pressed: var(--color-red-600);
290
+ --color-background-accent-red-lighter-default: var(--color-red-200);
291
+ --color-background-accent-red-lighter-hover: var(--color-red-300);
292
+ --color-background-accent-red-lighter-pressed: var(--color-red-400);
293
+ --color-background-accent-red-pressed: var(--color-red-800);
294
+ --color-background-accent-rust-bold-default: var(--color-rust-800);
295
+ --color-background-accent-rust-bold-hover: var(--color-rust-700);
296
+ --color-background-accent-rust-bold-pressed: var(--color-rust-600);
294
297
  --color-background-accent-rust-default: var(--color-rust-600);
295
298
  --color-background-accent-rust-hover: var(--color-rust-700);
296
- --color-background-accent-rust-pressed: var(--color-rust-800);
297
- --color-background-accent-rust-lighter-default: var(--color-rust-200);
298
- --color-background-accent-rust-lighter-hover: var(--color-rust-300);
299
- --color-background-accent-rust-lighter-pressed: var(--color-rust-400);
300
299
  --color-background-accent-rust-light-default: var(--color-rust-400);
301
300
  --color-background-accent-rust-light-hover: var(--color-rust-500);
302
301
  --color-background-accent-rust-light-pressed: var(--color-rust-600);
303
- --color-background-accent-rust-bold-default: var(--color-rust-800);
304
- --color-background-accent-rust-bold-hover: var(--color-rust-700);
305
- --color-background-accent-rust-bold-pressed: var(--color-rust-600);
306
- --color-background-accent-green-default: var(--color-green-500);
307
- --color-background-accent-green-hover: var(--color-green-600);
308
- --color-background-accent-green-pressed: var(--color-green-700);
309
- --color-background-accent-green-lighter-default: var(--color-green-200);
310
- --color-background-accent-green-lighter-hover: var(--color-green-300);
311
- --color-background-accent-green-lighter-pressed: var(--color-green-400);
312
- --color-background-accent-green-light-default: var(--color-green-400);
313
- --color-background-accent-green-light-hover: var(--color-green-500);
314
- --color-background-accent-green-light-pressed: var(--color-green-600);
315
- --color-background-accent-green-bold-default: var(--color-green-800);
316
- --color-background-accent-green-bold-hover: var(--color-green-700);
317
- --color-background-accent-green-bold-pressed: var(--color-green-600);
318
- --color-background-accent-teal-default: var(--color-teal-600);
319
- --color-background-accent-teal-hover: var(--color-teal-700);
320
- --color-background-accent-teal-pressed: var(--color-teal-800);
321
- --color-background-accent-teal-lighter-default: var(--color-teal-200);
322
- --color-background-accent-teal-lighter-hover: var(--color-teal-300);
323
- --color-background-accent-teal-lighter-pressed: #ffffff;
324
- --color-background-accent-teal-light-default: var(--color-teal-400);
325
- --color-background-accent-teal-light-hover: #ffffff;
326
- --color-background-accent-teal-light-pressed: #ffffff;
327
- --color-background-accent-teal-bold-default: var(--color-teal-800);
328
- --color-background-accent-teal-bold-hover: #ffffff;
329
- --color-background-accent-teal-bold-pressed: #ffffff;
302
+ --color-background-accent-rust-lighter-default: var(--color-rust-200);
303
+ --color-background-accent-rust-lighter-hover: var(--color-rust-300);
304
+ --color-background-accent-rust-lighter-pressed: var(--color-rust-400);
305
+ --color-background-accent-rust-pressed: var(--color-rust-800);
306
+ --color-background-accent-sand-bold-default: var(--color-sand-800);
307
+ --color-background-accent-sand-bold-hover: #ffffff;
308
+ --color-background-accent-sand-bold-pressed: #ffffff;
330
309
  --color-background-accent-sand-default: var(--color-sand-600);
331
310
  --color-background-accent-sand-hover: #ffffff;
332
- --color-background-accent-sand-pressed: #ffffff;
333
- --color-background-accent-sand-lighter-default: var(--color-sand-200);
334
- --color-background-accent-sand-lighter-hover: var(--color-sand-300);
335
- --color-background-accent-sand-lighter-pressed: #ffffff;
336
311
  --color-background-accent-sand-light-default: var(--color-sand-400);
337
312
  --color-background-accent-sand-light-hover: #ffffff;
338
313
  --color-background-accent-sand-light-pressed: #ffffff;
339
- --color-background-accent-sand-bold-default: var(--color-sand-800);
340
- --color-background-accent-sand-bold-hover: #ffffff;
341
- --color-background-accent-sand-bold-pressed: #ffffff;
342
- --color-background-accent-blue-default: var(--color-blue-600);
343
- --color-background-accent-blue-hover: #ffffff;
344
- --color-background-accent-blue-pressed: #ffffff;
345
- --color-background-accent-blue-lighter-default: var(--color-blue-200);
346
- --color-background-accent-blue-lighter-hover: #ffffff;
347
- --color-background-accent-blue-lighter-pressed: #ffffff;
348
- --color-background-accent-blue-light-default: var(--color-blue-400);
349
- --color-background-accent-blue-light-hover: #ffffff;
350
- --color-background-accent-blue-light-pressed: #ffffff;
351
- --color-background-accent-blue-bold-default: var(--color-blue-800);
352
- --color-background-accent-blue-bold-hover: #ffffff;
353
- --color-background-accent-blue-bold-pressed: #ffffff;
354
- --color-background-accent-purple-default: var(--color-purple-600);
355
- --color-background-accent-purple-hover: #ffffff;
356
- --color-background-accent-purple-pressed: #ffffff;
357
- --color-background-accent-purple-lighter-default: var(--color-purple-200);
358
- --color-background-accent-purple-lighter-hover: #ffffff;
359
- --color-background-accent-purple-lighter-pressed: #ffffff;
360
- --color-background-accent-purple-light-default: var(--color-purple-400);
361
- --color-background-accent-purple-light-hover: #ffffff;
362
- --color-background-accent-purple-light-pressed: #ffffff;
363
- --color-background-accent-purple-bold-default: var(--color-purple-800);
364
- --color-background-accent-purple-bold-hover: #ffffff;
365
- --color-background-accent-purple-bold-pressed: #ffffff;
366
- --color-background-accent-magenta-default: var(--color-magenta-600);
367
- --color-background-accent-magenta-hover: #ffffff;
368
- --color-background-accent-magenta-pressed: #ffffff;
369
- --color-background-accent-magenta-lighter-default: var(--color-magenta-200);
370
- --color-background-accent-magenta-lighter-hover: #ffffff;
371
- --color-background-accent-magenta-lighter-pressed: #ffffff;
372
- --color-background-accent-magenta-light-default: var(--color-magenta-400);
373
- --color-background-accent-magenta-light-hover: #ffffff;
374
- --color-background-accent-magenta-light-pressed: #ffffff;
375
- --color-background-accent-magenta-bold-default: var(--color-magenta-800);
376
- --color-background-accent-magenta-bold-hover: #ffffff;
377
- --color-background-accent-magenta-bold-pressed: #ffffff;
378
- --color-background-accent-yellow-default: #ffffff;
379
- --color-background-accent-yellow-hover: #ffffff;
380
- --color-background-accent-yellow-pressed: #ffffff;
381
- --color-background-accent-yellow-lighter-default: #ffffff;
382
- --color-background-accent-yellow-lighter-hover: #ffffff;
383
- --color-background-accent-yellow-lighter-pressed: #ffffff;
384
- --color-background-accent-yellow-light-default: #ffffff;
385
- --color-background-accent-yellow-light-hover: #ffffff;
386
- --color-background-accent-yellow-light-pressed: #ffffff;
387
- --color-background-accent-yellow-bold-default: #ffffff;
388
- --color-background-accent-yellow-bold-hover: #ffffff;
314
+ --color-background-accent-sand-lighter-default: var(--color-sand-200);
315
+ --color-background-accent-sand-lighter-hover: var(--color-sand-300);
316
+ --color-background-accent-sand-lighter-pressed: #ffffff;
317
+ --color-background-accent-sand-pressed: #ffffff;
318
+ --color-background-accent-teal-bold-default: var(--color-teal-800);
319
+ --color-background-accent-teal-bold-hover: #ffffff;
320
+ --color-background-accent-teal-bold-pressed: #ffffff;
321
+ --color-background-accent-teal-default: var(--color-teal-600);
322
+ --color-background-accent-teal-hover: var(--color-teal-700);
323
+ --color-background-accent-teal-light-default: var(--color-teal-400);
324
+ --color-background-accent-teal-light-hover: #ffffff;
325
+ --color-background-accent-teal-light-pressed: #ffffff;
326
+ --color-background-accent-teal-lighter-default: var(--color-teal-200);
327
+ --color-background-accent-teal-lighter-hover: var(--color-teal-300);
328
+ --color-background-accent-teal-lighter-pressed: #ffffff;
329
+ --color-background-accent-teal-pressed: var(--color-teal-800);
330
+ --color-background-accent-yellow-bold-default: #ffffff;
331
+ --color-background-accent-yellow-bold-hover: #ffffff;
389
332
  --color-background-accent-yellow-bold-pressed: #ffffff;
333
+ --color-background-accent-yellow-default: #ffffff;
334
+ --color-background-accent-yellow-hover: #ffffff;
335
+ --color-background-accent-yellow-light-default: #ffffff;
336
+ --color-background-accent-yellow-light-hover: #ffffff;
337
+ --color-background-accent-yellow-light-pressed: #ffffff;
338
+ --color-background-accent-yellow-lighter-default: #ffffff;
339
+ --color-background-accent-yellow-lighter-hover: #ffffff;
340
+ --color-background-accent-yellow-lighter-pressed: #ffffff;
341
+ --color-background-accent-yellow-pressed: #ffffff;
342
+ --color-background-alert-default: #ffffff;
343
+ --color-background-alert-hover: #ffffff;
344
+ --color-background-alert-pressed: #ffffff;
345
+ --color-background-brand-bold-default: var(--color-bcc-800);
346
+ --color-background-brand-bold-hover: var(--color-bcc-900);
347
+ --color-background-brand-bold-pressed: var(--color-bcc-1000);
348
+ --color-background-brand-default: var(--color-bcc-600);
349
+ --color-background-brand-hover: var(--color-bcc-700);
350
+ --color-background-brand-light-default: var(--color-bcc-400);
351
+ --color-background-brand-light-hover: var(--color-bcc-500);
352
+ --color-background-brand-light-pressed: var(--color-bcc-600);
353
+ --color-background-brand-lighter-default: var(--color-bcc-200);
354
+ --color-background-brand-lighter-hover: var(--color-bcc-300);
355
+ --color-background-brand-lighter-pressed: var(--color-bcc-400);
356
+ --color-background-brand-pressed: var(--color-bcc-800);
357
+ --color-background-danger-default: #ffffff;
358
+ --color-background-danger-hover: #ffffff;
359
+ --color-background-danger-pressed: #ffffff;
360
+ --color-background-disabled-default: #ffffff;
361
+ --color-background-info-default: #ffffff;
362
+ --color-background-info-hover: #ffffff;
363
+ --color-background-info-pressed: #ffffff;
390
364
  --color-background-neutral-default: var(--color-neutral-alpha-300-a);
391
365
  --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
392
- --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
393
- --color-background-neutral-light-pressed: var(--color-neutral-alpha-200-a);
394
366
  --color-background-neutral-light-default: var(--color-dark-neutral-alpha-100-a);
395
367
  --color-background-neutral-light-hover: var(--color-neutral-alpha-200-a);
368
+ --color-background-neutral-light-pressed: var(--color-neutral-alpha-200-a);
369
+ --color-background-neutral-lighter-default: rgba(9, 30, 77, 0);
396
370
  --color-background-neutral-lighter-hover: var(--color-neutral-alpha-100-a);
397
371
  --color-background-neutral-lighter-pressed: var(--color-neutral-alpha-200-a);
398
- --color-background-neutral-lighter-default: rgba(9, 30, 77, 0);
399
- --color-background-info-default: #ffffff;
400
- --color-background-info-hover: #ffffff;
401
- --color-background-info-pressed: #ffffff;
372
+ --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
402
373
  --color-background-success-default: #ffffff;
403
374
  --color-background-success-hover: #ffffff;
404
375
  --color-background-success-pressed: #ffffff;
405
- --color-background-alert-default: #ffffff;
406
- --color-background-alert-hover: #ffffff;
407
- --color-background-alert-pressed: #ffffff;
408
- --color-background-danger-default: #ffffff;
409
- --color-background-danger-hover: #ffffff;
410
- --color-background-danger-pressed: #ffffff;
411
- --color-border-primary: var(--color-neutral-100);
412
- --color-border-secondary: var(--color-neutral-200);
413
- --color-border-tertiary: var(--color-neutral-300);
414
- --color-border-focus: rgba(46, 144, 135, 0.4);
415
- --color-border-selected: var(--color-bcc-600);
416
- --color-border-disabled: var(--color-neutral-100);
376
+ --color-border-accent-blue-default: var(--color-blue-600);
377
+ --color-border-accent-blue-hover: var(--color-blue-700);
378
+ --color-border-accent-blue-pressed: var(--color-blue-800);
379
+ --color-border-accent-green-default: var(--color-green-600);
380
+ --color-border-accent-green-hover: var(--color-green-700);
381
+ --color-border-accent-green-pressed: var(--color-green-800);
382
+ --color-border-accent-magenta-default: var(--color-magenta-600);
383
+ --color-border-accent-magenta-hover: var(--color-magenta-700);
384
+ --color-border-accent-magenta-pressed: var(--color-magenta-800);
385
+ --color-border-accent-purple-default: var(--color-purple-600);
386
+ --color-border-accent-purple-hover: var(--color-purple-700);
387
+ --color-border-accent-purple-pressed: var(--color-purple-800);
417
388
  --color-border-accent-red-default: var(--color-red-600);
418
389
  --color-border-accent-red-hover: var(--color-red-700);
419
390
  --color-border-accent-red-pressed: var(--color-red-800);
420
391
  --color-border-accent-rust-default: var(--color-rust-600);
421
392
  --color-border-accent-rust-hover: var(--color-rust-700);
422
393
  --color-border-accent-rust-pressed: var(--color-rust-800);
423
- --color-border-accent-yellow-default: #ffffff;
424
- --color-border-accent-yellow-hover: #ffffff;
425
- --color-border-accent-yellow-pressed: #ffffff;
426
- --color-border-accent-green-default: var(--color-green-600);
427
- --color-border-accent-green-hover: var(--color-green-700);
428
- --color-border-accent-green-pressed: var(--color-green-800);
429
- --color-border-accent-teal-default: var(--color-teal-600);
430
- --color-border-accent-teal-hover: var(--color-teal-700);
431
- --color-border-accent-teal-pressed: var(--color-teal-800);
432
394
  --color-border-accent-sand-default: var(--color-sand-600);
433
395
  --color-border-accent-sand-hover: var(--color-sand-700);
434
396
  --color-border-accent-sand-pressed: var(--color-sand-800);
435
- --color-border-accent-blue-default: var(--color-blue-600);
436
- --color-border-accent-blue-hover: var(--color-blue-700);
437
- --color-border-accent-blue-pressed: var(--color-blue-800);
438
- --color-border-accent-purple-default: var(--color-purple-600);
439
- --color-border-accent-purple-hover: var(--color-purple-700);
440
- --color-border-accent-purple-pressed: var(--color-purple-800);
441
- --color-border-accent-magenta-default: var(--color-magenta-600);
442
- --color-border-accent-magenta-hover: var(--color-magenta-700);
443
- --color-border-accent-magenta-pressed: var(--color-magenta-800);
444
- --heading-4xl-bold: var(--font-weight-bold-700) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
445
- --heading-4xl-bold-text-decoration: var(--text-decoration-none);
446
- --heading-4xl-medium: var(--font-weight-medium-500) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
447
- --heading-4xl-medium-text-decoration: var(--text-decoration-none);
448
- --heading-3xl-bold: var(--font-weight-bold-700) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
449
- --heading-3xl-bold-text-decoration: var(--text-decoration-none);
450
- --heading-3xl-medium: var(--font-weight-medium-500) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
451
- --heading-3xl-medium-text-decoration: var(--text-decoration-none);
452
- --heading-2xl-bold: var(--font-weight-bold-700) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
453
- --heading-2xl-bold-text-decoration: var(--text-decoration-none);
454
- --heading-2xl-medium: var(--font-weight-medium-500) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
455
- --heading-2xl-medium-text-decoration: var(--text-decoration-none);
456
- --heading-xl-bold: var(--font-weight-bold-700) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
457
- --heading-xl-bold-text-decoration: var(--text-decoration-none);
458
- --heading-xl-medium: var(--font-weight-medium-500) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
459
- --heading-xl-medium-text-decoration: var(--text-decoration-none);
460
- --heading-lg-bold: var(--font-weight-bold-700) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
461
- --heading-lg-bold-text-decoration: var(--text-decoration-none);
462
- --heading-lg-medium: var(--font-weight-medium-500) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
463
- --heading-lg-medium-text-decoration: var(--text-decoration-none);
464
- --body-base-bold: var(--font-weight-bold-700) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
397
+ --color-border-accent-teal-default: var(--color-teal-600);
398
+ --color-border-accent-teal-hover: var(--color-teal-700);
399
+ --color-border-accent-teal-pressed: var(--color-teal-800);
400
+ --color-border-accent-yellow-default: #ffffff;
401
+ --color-border-accent-yellow-hover: #ffffff;
402
+ --color-border-accent-yellow-pressed: #ffffff;
403
+ --color-border-disabled: var(--color-neutral-100);
404
+ --color-border-focus: rgba(46, 144, 135, 0.4);
405
+ --color-border-primary: var(--color-neutral-100);
406
+ --color-border-secondary: var(--color-neutral-200);
407
+ --color-border-selected: var(--color-bcc-600);
408
+ --color-border-tertiary: var(--color-neutral-300);
409
+ --color-divider-bold: var(--color-neutral-300);
410
+ --color-divider-default: var(--color-neutral-200);
411
+ --color-divider-light: var(--color-neutral-100);
412
+ --color-icon-accent-blue: var(--color-blue-700);
413
+ --color-icon-accent-green: var(--color-green-700);
414
+ --color-icon-accent-magenta: var(--color-magenta-700);
415
+ --color-icon-accent-purple: var(--color-purple-700);
416
+ --color-icon-accent-red: var(--color-red-700);
417
+ --color-icon-accent-rust: var(--color-rust-700);
418
+ --color-icon-accent-sand: var(--color-sand-700);
419
+ --color-icon-accent-teal: var(--color-teal-700);
420
+ --color-icon-alert: var(--color-red-600);
421
+ --color-icon-brand: var(--color-bcc-700);
422
+ --color-icon-danger: #ffffff;
423
+ --color-icon-disabled: var(--color-neutral-alpha-400-a);
424
+ --color-icon-info: #ffffff;
425
+ --color-icon-inverse: var(--color-neutral-0);
426
+ --color-icon-primary: var(--color-neutral-1100);
427
+ --color-icon-secondary: var(--color-neutral-700);
428
+ --color-icon-success: var(--color-green-600);
429
+ --color-icon-tertiary: var(--color-neutral-400);
430
+ --color-link-default: var(--color-blue-600);
431
+ --color-link-hover: var(--color-blue-700);
432
+ --color-link-visited: var(--color-blue-900);
433
+ --color-surface-inverse-primary: var(--color-dark-neutral-0);
434
+ --color-surface-inverse-secondary: var(--color-dark-neutral-200);
435
+ --color-surface-overlay-default: var(--color-neutral-alpha-500-a);
436
+ --color-surface-primary: var(--color-neutral-0);
437
+ --color-surface-secondary: var(--color-neutral-200);
438
+ --color-text-accent-blue-bold: var(--color-blue-800);
439
+ --color-text-accent-blue-default: var(--color-blue-700);
440
+ --color-text-accent-green-bold: var(--color-green-800);
441
+ --color-text-accent-green-default: var(--color-green-700);
442
+ --color-text-accent-magenta-bold: var(--color-magenta-800);
443
+ --color-text-accent-magenta-default: var(--color-magenta-700);
444
+ --color-text-accent-purple-bold: var(--color-purple-800);
445
+ --color-text-accent-purple-default: var(--color-purple-700);
446
+ --color-text-accent-rust-bold: var(--color-rust-800);
447
+ --color-text-accent-rust-default: var(--color-rust-700);
448
+ --color-text-accent-sand-bold: var(--color-sand-800);
449
+ --color-text-accent-sand-default: var(--color-sand-700);
450
+ --color-text-accent-teal-bold: var(--color-teal-800);
451
+ --color-text-accent-teal-default: var(--color-teal-700);
452
+ --color-text-accent-yellow-bold: var(--color-red-800);
453
+ --color-text-accent-yellow-default: var(--color-red-700);
454
+ --color-text-alert: var(--color-red-600);
455
+ --color-text-brand-bold: var(--color-bcc-800);
456
+ --color-text-brand-default: var(--color-bcc-700);
457
+ --color-text-danger: var(--color-neutral-0);
458
+ --color-text-disabled: var(--color-neutral-alpha-400-a);
459
+ --color-text-info: var(--color-neutral-0);
460
+ --color-text-inverse: var(--color-neutral-0);
461
+ --color-text-primary: var(--color-neutral-1100);
462
+ --color-text-secondary: var(--color-neutral-600);
463
+ --color-text-success: var(--color-green-600);
464
+ --color-text-tertiary: var(--color-neutral-400);
465
+
466
+ /* BODY */
465
467
  --body-base-bold-text-decoration: var(--text-decoration-none);
466
- --body-base-medium: var(--font-weight-medium-500) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
468
+ --body-base-bold: var(--font-weight-bold-700) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
467
469
  --body-base-medium-text-decoration: var(--text-decoration-none);
468
- --body-base-regular: var(--font-weight-regular-400) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
470
+ --body-base-medium: var(--font-weight-medium-500) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
469
471
  --body-base-regular-text-decoration: var(--text-decoration-none);
470
- --body-sm-bold: var(--font-weight-bold-700) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
472
+ --body-base-regular: var(--font-weight-regular-400) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
471
473
  --body-sm-bold-text-decoration: var(--text-decoration-none);
472
- --body-sm-medium: var(--font-weight-medium-500) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
474
+ --body-sm-bold: var(--font-weight-bold-700) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
473
475
  --body-sm-medium-text-decoration: var(--text-decoration-none);
474
- --body-sm-regular: var(--font-weight-regular-400) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
476
+ --body-sm-medium: var(--font-weight-medium-500) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
475
477
  --body-sm-regular-text-decoration: var(--text-decoration-none);
476
- --body-xs-bold: var(--font-weight-bold-700) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
478
+ --body-sm-regular: var(--font-weight-regular-400) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
477
479
  --body-xs-bold-text-decoration: var(--text-decoration-none);
478
- --body-xs-medium: var(--font-weight-medium-500) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
480
+ --body-xs-bold: var(--font-weight-bold-700) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
479
481
  --body-xs-medium-text-decoration: var(--text-decoration-none);
480
- --body-xs-regular: var(--font-weight-regular-400) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
482
+ --body-xs-medium: var(--font-weight-medium-500) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
481
483
  --body-xs-regular-text-decoration: var(--text-decoration-none);
484
+ --body-xs-regular: var(--font-weight-regular-400) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
485
+
486
+ /* BORDER */
482
487
  --border-base: 1px none #dcdfe4;
483
488
  --border-brand: 2px none #0e6962;
489
+
490
+ /* HEADING */
491
+ --heading-2xl-bold-text-decoration: var(--text-decoration-none);
492
+ --heading-2xl-bold: var(--font-weight-bold-700) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
493
+ --heading-2xl-medium-text-decoration: var(--text-decoration-none);
494
+ --heading-2xl-medium: var(--font-weight-medium-500) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
495
+ --heading-3xl-bold-text-decoration: var(--text-decoration-none);
496
+ --heading-3xl-bold: var(--font-weight-bold-700) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
497
+ --heading-3xl-medium-text-decoration: var(--text-decoration-none);
498
+ --heading-3xl-medium: var(--font-weight-medium-500) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
499
+ --heading-4xl-bold-text-decoration: var(--text-decoration-none);
500
+ --heading-4xl-bold: var(--font-weight-bold-700) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
501
+ --heading-4xl-medium-text-decoration: var(--text-decoration-none);
502
+ --heading-4xl-medium: var(--font-weight-medium-500) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
503
+ --heading-lg-bold-text-decoration: var(--text-decoration-none);
504
+ --heading-lg-bold: var(--font-weight-bold-700) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
505
+ --heading-lg-medium-text-decoration: var(--text-decoration-none);
506
+ --heading-lg-medium: var(--font-weight-medium-500) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
507
+ --heading-xl-bold-text-decoration: var(--text-decoration-none);
508
+ --heading-xl-bold: var(--font-weight-bold-700) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
509
+ --heading-xl-medium-text-decoration: var(--text-decoration-none);
510
+ --heading-xl-medium: var(--font-weight-medium-500) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
511
+
484
512
  }
485
513
 
486
514
  /* Dark Theme (Semantic) */
487
515
  .dark-mode {
488
- --color-surface-primary: var(--color-dark-neutral-0);
489
- --color-surface-secondary: var(--color-dark-neutral-200);
490
- --color-surface-overlay-default: var(--color-dark-neutral-alpha-500-a);
491
- --color-surface-inverse-primary: var(--color-neutral-0);
492
- --color-surface-inverse-secondary: var(--color-neutral-200);
493
- --color-divider-light: var(--color-dark-neutral-100);
494
- --color-divider-default: var(--color-dark-neutral-200);
495
- --color-divider-bold: var(--color-dark-neutral-300);
496
- --color-text-primary: var(--color-dark-neutral-1100);
497
- --color-text-secondary: var(--color-dark-neutral-1100);
498
- --color-text-tertiary: var(--color-dark-neutral-400);
499
- --color-text-inverse: var(--color-dark-neutral-0);
500
- --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
501
- --color-text-success: var(--color-green-500);
502
- --color-text-alert: var(--color-red-500);
503
- --color-text-info: var(--color-dark-neutral-0);
504
- --color-text-danger: var(--color-dark-neutral-0);
505
- --color-text-brand-default: var(--color-bcc-400);
506
- --color-text-brand-bold: var(--color-bcc-300);
507
- --color-text-accent-rust-default: var(--color-rust-400);
508
- --color-text-accent-rust-bold: var(--color-rust-300);
509
- --color-text-accent-yellow-default: var(--color-red-400);
510
- --color-text-accent-yellow-bold: var(--color-red-300);
511
- --color-text-accent-green-default: var(--color-green-400);
512
- --color-text-accent-green-bold: var(--color-green-300);
513
- --color-text-accent-teal-default: var(--color-teal-400);
514
- --color-text-accent-teal-bold: var(--color-teal-300);
515
- --color-text-accent-sand-default: var(--color-sand-400);
516
- --color-text-accent-sand-bold: var(--color-sand-300);
517
- --color-text-accent-blue-default: var(--color-blue-400);
518
- --color-text-accent-blue-bold: var(--color-blue-300);
519
- --color-text-accent-purple-default: var(--color-purple-400);
520
- --color-text-accent-purple-bold: var(--color-purple-300);
521
- --color-text-accent-magenta-default: var(--color-magenta-400);
522
- --color-text-accent-magenta-bold: var(--color-magenta-300);
523
- --color-icon-primary: var(--color-dark-neutral-1100);
524
- --color-icon-secondary: var(--color-dark-neutral-700);
525
- --color-icon-tertiary: var(--color-dark-neutral-400);
526
- --color-icon-inverse: var(--color-dark-neutral-0);
527
- --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
528
- --color-icon-success: var(--color-green-500);
529
- --color-icon-alert: var(--color-red-500);
530
- --color-icon-info: #ffffff;
531
- --color-icon-danger: #ffffff;
532
- --color-icon-accent-blue: var(--color-blue-400);
533
- --color-icon-accent-red: var(--color-red-400);
534
- --color-icon-accent-green: var(--color-green-400);
535
- --color-icon-accent-rust: var(--color-rust-400);
536
- --color-icon-accent-teal: var(--color-teal-400);
537
- --color-icon-accent-purple: var(--color-purple-400);
538
- --color-icon-accent-magenta: var(--color-magenta-400);
539
- --color-icon-accent-sand: var(--color-sand-400);
540
- --color-icon-brand: var(--color-bcc-400);
541
- --color-link-default: var(--color-blue-500);
542
- --color-link-hover: var(--color-blue-400);
543
- --color-link-visited: var(--color-blue-300);
544
- --color-background-disabled-default: #ffffff;
545
- --color-background-brand-default: var(--color-bcc-500);
546
- --color-background-brand-hover: var(--color-bcc-400);
547
- --color-background-brand-pressed: var(--color-bcc-300);
548
- --color-background-brand-lighter-default: var(--color-bcc-900);
549
- --color-background-brand-lighter-hover: var(--color-bcc-800);
550
- --color-background-brand-lighter-pressed: var(--color-bcc-700);
551
- --color-background-brand-light-default: var(--color-bcc-700);
552
- --color-background-brand-light-hover: var(--color-bcc-600);
553
- --color-background-brand-light-pressed: var(--color-bcc-500);
554
- --color-background-brand-bold-default: var(--color-bcc-300);
555
- --color-background-brand-bold-hover: var(--color-bcc-200);
556
- --color-background-brand-bold-pressed: var(--color-bcc-100);
557
- --color-background-accent-red-default: var(--color-red-500);
558
- --color-background-accent-red-hover: var(--color-red-400);
559
- --color-background-accent-red-pressed: var(--color-red-300);
560
- --color-background-accent-red-lighter-default: var(--color-red-900);
561
- --color-background-accent-red-lighter-hover: var(--color-red-800);
562
- --color-background-accent-red-lighter-pressed: var(--color-red-700);
563
- --color-background-accent-red-light-default: var(--color-red-700);
564
- --color-background-accent-red-light-hover: var(--color-red-600);
565
- --color-background-accent-red-light-pressed: var(--color-red-500);
566
- --color-background-accent-red-bold-default: var(--color-red-300);
567
- --color-background-accent-red-bold-hover: var(--color-red-400);
568
- --color-background-accent-red-bold-pressed: var(--color-red-500);
569
- --color-background-accent-rust-default: var(--color-rust-500);
570
- --color-background-accent-rust-hover: var(--color-rust-400);
571
- --color-background-accent-rust-pressed: var(--color-rust-300);
572
- --color-background-accent-rust-lighter-default: var(--color-rust-900);
573
- --color-background-accent-rust-lighter-hover: var(--color-rust-800);
574
- --color-background-accent-rust-lighter-pressed: var(--color-rust-700);
575
- --color-background-accent-rust-light-default: var(--color-rust-700);
576
- --color-background-accent-rust-light-hover: var(--color-rust-600);
577
- --color-background-accent-rust-light-pressed: var(--color-rust-500);
578
- --color-background-accent-rust-bold-default: var(--color-rust-300);
579
- --color-background-accent-rust-bold-hover: var(--color-rust-400);
580
- --color-background-accent-rust-bold-pressed: var(--color-rust-500);
581
- --color-background-accent-green-default: var(--color-green-600);
582
- --color-background-accent-green-hover: var(--color-green-700);
583
- --color-background-accent-green-pressed: var(--color-green-800);
584
- --color-background-accent-green-lighter-default: var(--color-green-900);
585
- --color-background-accent-green-lighter-hover: var(--color-green-800);
586
- --color-background-accent-green-lighter-pressed: var(--color-green-700);
587
- --color-background-accent-green-light-default: var(--color-green-700);
588
- --color-background-accent-green-light-hover: var(--color-green-600);
589
- --color-background-accent-green-light-pressed: var(--color-green-500);
590
- --color-background-accent-green-bold-default: var(--color-green-300);
591
- --color-background-accent-green-bold-hover: var(--color-green-400);
592
- --color-background-accent-green-bold-pressed: var(--color-green-500);
593
- --color-background-accent-teal-default: var(--color-teal-500);
594
- --color-background-accent-teal-hover: var(--color-teal-400);
595
- --color-background-accent-teal-pressed: var(--color-teal-300);
596
- --color-background-accent-teal-lighter-default: var(--color-teal-900);
597
- --color-background-accent-teal-lighter-hover: #ffffff;
598
- --color-background-accent-teal-lighter-pressed: #ffffff;
599
- --color-background-accent-teal-light-default: var(--color-teal-700);
600
- --color-background-accent-teal-light-hover: #ffffff;
601
- --color-background-accent-teal-light-pressed: #ffffff;
602
- --color-background-accent-teal-bold-default: var(--color-teal-300);
603
- --color-background-accent-teal-bold-hover: #ffffff;
604
- --color-background-accent-teal-bold-pressed: #ffffff;
605
- --color-background-accent-sand-default: var(--color-sand-500);
606
- --color-background-accent-sand-hover: #ffffff;
607
- --color-background-accent-sand-pressed: #ffffff;
608
- --color-background-accent-sand-lighter-default: var(--color-sand-900);
609
- --color-background-accent-sand-lighter-hover: var(--color-sand-800);
610
- --color-background-accent-sand-lighter-pressed: #ffffff;
611
- --color-background-accent-sand-light-default: var(--color-sand-700);
612
- --color-background-accent-sand-light-hover: #ffffff;
613
- --color-background-accent-sand-light-pressed: #ffffff;
614
- --color-background-accent-sand-bold-default: var(--color-sand-300);
615
- --color-background-accent-sand-bold-hover: #ffffff;
616
- --color-background-accent-sand-bold-pressed: #ffffff;
516
+ /* COLOR */
517
+ --color-background-accent-blue-bold-default: var(--color-blue-300);
518
+ --color-background-accent-blue-bold-hover: #ffffff;
519
+ --color-background-accent-blue-bold-pressed: #ffffff;
617
520
  --color-background-accent-blue-default: var(--color-blue-500);
618
521
  --color-background-accent-blue-hover: #ffffff;
619
- --color-background-accent-blue-pressed: #ffffff;
620
- --color-background-accent-blue-lighter-default: var(--color-blue-900);
621
- --color-background-accent-blue-lighter-hover: #ffffff;
622
- --color-background-accent-blue-lighter-pressed: #ffffff;
623
522
  --color-background-accent-blue-light-default: var(--color-blue-700);
624
523
  --color-background-accent-blue-light-hover: #ffffff;
625
524
  --color-background-accent-blue-light-pressed: #ffffff;
626
- --color-background-accent-blue-bold-default: var(--color-blue-300);
627
- --color-background-accent-blue-bold-hover: #ffffff;
628
- --color-background-accent-blue-bold-pressed: #ffffff;
629
- --color-background-accent-purple-default: var(--color-purple-500);
630
- --color-background-accent-purple-hover: #ffffff;
631
- --color-background-accent-purple-pressed: #ffffff;
632
- --color-background-accent-purple-lighter-default: var(--color-purple-900);
633
- --color-background-accent-purple-lighter-hover: #ffffff;
634
- --color-background-accent-purple-lighter-pressed: #ffffff;
635
- --color-background-accent-purple-light-default: var(--color-purple-700);
636
- --color-background-accent-purple-light-hover: #ffffff;
637
- --color-background-accent-purple-light-pressed: #ffffff;
638
- --color-background-accent-purple-bold-default: var(--color-purple-300);
639
- --color-background-accent-purple-bold-hover: #ffffff;
640
- --color-background-accent-purple-bold-pressed: #ffffff;
525
+ --color-background-accent-blue-lighter-default: var(--color-blue-900);
526
+ --color-background-accent-blue-lighter-hover: #ffffff;
527
+ --color-background-accent-blue-lighter-pressed: #ffffff;
528
+ --color-background-accent-blue-pressed: #ffffff;
529
+ --color-background-accent-green-bold-default: var(--color-green-300);
530
+ --color-background-accent-green-bold-hover: var(--color-green-400);
531
+ --color-background-accent-green-bold-pressed: var(--color-green-500);
532
+ --color-background-accent-green-default: var(--color-green-600);
533
+ --color-background-accent-green-hover: var(--color-green-700);
534
+ --color-background-accent-green-light-default: var(--color-green-700);
535
+ --color-background-accent-green-light-hover: var(--color-green-600);
536
+ --color-background-accent-green-light-pressed: var(--color-green-500);
537
+ --color-background-accent-green-lighter-default: var(--color-green-900);
538
+ --color-background-accent-green-lighter-hover: var(--color-green-800);
539
+ --color-background-accent-green-lighter-pressed: var(--color-green-700);
540
+ --color-background-accent-green-pressed: var(--color-green-800);
541
+ --color-background-accent-magenta-bold-default: var(--color-magenta-300);
542
+ --color-background-accent-magenta-bold-hover: #ffffff;
543
+ --color-background-accent-magenta-bold-pressed: #ffffff;
641
544
  --color-background-accent-magenta-default: var(--color-magenta-500);
642
545
  --color-background-accent-magenta-hover: #ffffff;
643
- --color-background-accent-magenta-pressed: #ffffff;
644
- --color-background-accent-magenta-lighter-default: var(--color-magenta-900);
645
- --color-background-accent-magenta-lighter-hover: #ffffff;
646
- --color-background-accent-magenta-lighter-pressed: #ffffff;
647
546
  --color-background-accent-magenta-light-default: var(--color-magenta-700);
648
547
  --color-background-accent-magenta-light-hover: #ffffff;
649
548
  --color-background-accent-magenta-light-pressed: #ffffff;
650
- --color-background-accent-magenta-bold-default: var(--color-magenta-300);
651
- --color-background-accent-magenta-bold-hover: #ffffff;
652
- --color-background-accent-magenta-bold-pressed: #ffffff;
549
+ --color-background-accent-magenta-lighter-default: var(--color-magenta-900);
550
+ --color-background-accent-magenta-lighter-hover: #ffffff;
551
+ --color-background-accent-magenta-lighter-pressed: #ffffff;
552
+ --color-background-accent-magenta-pressed: #ffffff;
553
+ --color-background-accent-purple-bold-default: var(--color-purple-300);
554
+ --color-background-accent-purple-bold-hover: #ffffff;
555
+ --color-background-accent-purple-bold-pressed: #ffffff;
556
+ --color-background-accent-purple-default: var(--color-purple-500);
557
+ --color-background-accent-purple-hover: #ffffff;
558
+ --color-background-accent-purple-light-default: var(--color-purple-700);
559
+ --color-background-accent-purple-light-hover: #ffffff;
560
+ --color-background-accent-purple-light-pressed: #ffffff;
561
+ --color-background-accent-purple-lighter-default: var(--color-purple-900);
562
+ --color-background-accent-purple-lighter-hover: #ffffff;
563
+ --color-background-accent-purple-lighter-pressed: #ffffff;
564
+ --color-background-accent-purple-pressed: #ffffff;
565
+ --color-background-accent-red-bold-default: var(--color-red-300);
566
+ --color-background-accent-red-bold-hover: var(--color-red-400);
567
+ --color-background-accent-red-bold-pressed: var(--color-red-500);
568
+ --color-background-accent-red-default: var(--color-red-500);
569
+ --color-background-accent-red-hover: var(--color-red-400);
570
+ --color-background-accent-red-light-default: var(--color-red-700);
571
+ --color-background-accent-red-light-hover: var(--color-red-600);
572
+ --color-background-accent-red-light-pressed: var(--color-red-500);
573
+ --color-background-accent-red-lighter-default: var(--color-red-900);
574
+ --color-background-accent-red-lighter-hover: var(--color-red-800);
575
+ --color-background-accent-red-lighter-pressed: var(--color-red-700);
576
+ --color-background-accent-red-pressed: var(--color-red-300);
577
+ --color-background-accent-rust-bold-default: var(--color-rust-300);
578
+ --color-background-accent-rust-bold-hover: var(--color-rust-400);
579
+ --color-background-accent-rust-bold-pressed: var(--color-rust-500);
580
+ --color-background-accent-rust-default: var(--color-rust-500);
581
+ --color-background-accent-rust-hover: var(--color-rust-400);
582
+ --color-background-accent-rust-light-default: var(--color-rust-700);
583
+ --color-background-accent-rust-light-hover: var(--color-rust-600);
584
+ --color-background-accent-rust-light-pressed: var(--color-rust-500);
585
+ --color-background-accent-rust-lighter-default: var(--color-rust-900);
586
+ --color-background-accent-rust-lighter-hover: var(--color-rust-800);
587
+ --color-background-accent-rust-lighter-pressed: var(--color-rust-700);
588
+ --color-background-accent-rust-pressed: var(--color-rust-300);
589
+ --color-background-accent-sand-bold-default: var(--color-sand-300);
590
+ --color-background-accent-sand-bold-hover: #ffffff;
591
+ --color-background-accent-sand-bold-pressed: #ffffff;
592
+ --color-background-accent-sand-default: var(--color-sand-500);
593
+ --color-background-accent-sand-hover: #ffffff;
594
+ --color-background-accent-sand-light-default: var(--color-sand-700);
595
+ --color-background-accent-sand-light-hover: #ffffff;
596
+ --color-background-accent-sand-light-pressed: #ffffff;
597
+ --color-background-accent-sand-lighter-default: var(--color-sand-900);
598
+ --color-background-accent-sand-lighter-hover: var(--color-sand-800);
599
+ --color-background-accent-sand-lighter-pressed: #ffffff;
600
+ --color-background-accent-sand-pressed: #ffffff;
601
+ --color-background-accent-teal-bold-default: var(--color-teal-300);
602
+ --color-background-accent-teal-bold-hover: #ffffff;
603
+ --color-background-accent-teal-bold-pressed: #ffffff;
604
+ --color-background-accent-teal-default: var(--color-teal-500);
605
+ --color-background-accent-teal-hover: var(--color-teal-400);
606
+ --color-background-accent-teal-light-default: var(--color-teal-700);
607
+ --color-background-accent-teal-light-hover: #ffffff;
608
+ --color-background-accent-teal-light-pressed: #ffffff;
609
+ --color-background-accent-teal-lighter-default: var(--color-teal-900);
610
+ --color-background-accent-teal-lighter-hover: #ffffff;
611
+ --color-background-accent-teal-lighter-pressed: #ffffff;
612
+ --color-background-accent-teal-pressed: var(--color-teal-300);
613
+ --color-background-accent-yellow-bold-default: #ffffff;
614
+ --color-background-accent-yellow-bold-hover: #ffffff;
615
+ --color-background-accent-yellow-bold-pressed: #ffffff;
653
616
  --color-background-accent-yellow-default: #ffffff;
654
617
  --color-background-accent-yellow-hover: #ffffff;
655
- --color-background-accent-yellow-pressed: #ffffff;
656
- --color-background-accent-yellow-lighter-default: #ffffff;
657
- --color-background-accent-yellow-lighter-hover: #ffffff;
658
- --color-background-accent-yellow-lighter-pressed: #ffffff;
659
618
  --color-background-accent-yellow-light-default: #ffffff;
660
619
  --color-background-accent-yellow-light-hover: #ffffff;
661
620
  --color-background-accent-yellow-light-pressed: #ffffff;
662
- --color-background-accent-yellow-bold-default: #ffffff;
663
- --color-background-accent-yellow-bold-hover: #ffffff;
664
- --color-background-accent-yellow-bold-pressed: #ffffff;
621
+ --color-background-accent-yellow-lighter-default: #ffffff;
622
+ --color-background-accent-yellow-lighter-hover: #ffffff;
623
+ --color-background-accent-yellow-lighter-pressed: #ffffff;
624
+ --color-background-accent-yellow-pressed: #ffffff;
625
+ --color-background-alert-default: #ffffff;
626
+ --color-background-alert-hover: #ffffff;
627
+ --color-background-alert-pressed: #ffffff;
628
+ --color-background-brand-bold-default: var(--color-bcc-300);
629
+ --color-background-brand-bold-hover: var(--color-bcc-200);
630
+ --color-background-brand-bold-pressed: var(--color-bcc-100);
631
+ --color-background-brand-default: var(--color-bcc-500);
632
+ --color-background-brand-hover: var(--color-bcc-400);
633
+ --color-background-brand-light-default: var(--color-bcc-700);
634
+ --color-background-brand-light-hover: var(--color-bcc-600);
635
+ --color-background-brand-light-pressed: var(--color-bcc-500);
636
+ --color-background-brand-lighter-default: var(--color-bcc-900);
637
+ --color-background-brand-lighter-hover: var(--color-bcc-800);
638
+ --color-background-brand-lighter-pressed: var(--color-bcc-700);
639
+ --color-background-brand-pressed: var(--color-bcc-300);
640
+ --color-background-danger-default: #ffffff;
641
+ --color-background-danger-hover: #ffffff;
642
+ --color-background-danger-pressed: #ffffff;
643
+ --color-background-disabled-default: #ffffff;
644
+ --color-background-info-default: #ffffff;
645
+ --color-background-info-hover: #ffffff;
646
+ --color-background-info-pressed: #ffffff;
665
647
  --color-background-neutral-default: var(--color-dark-neutral-alpha-300-a);
666
648
  --color-background-neutral-hover: var(--color-dark-neutral-alpha-400-a);
667
- --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
668
- --color-background-neutral-light-pressed: var(--color-dark-neutral-alpha-300-a);
669
649
  --color-background-neutral-light-default1: var(--color-dark-neutral-alpha-100-a);
670
650
  --color-background-neutral-light-hover: var(--color-dark-neutral-alpha-200-a);
651
+ --color-background-neutral-light-pressed: var(--color-dark-neutral-alpha-300-a);
652
+ --color-background-neutral-lighter-default: rgba(166, 197, 226, 0);
671
653
  --color-background-neutral-lighter-hover: var(--color-dark-neutral-alpha-100-a);
672
654
  --color-background-neutral-lighter-pressed: var(--color-dark-neutral-alpha-200-a);
673
- --color-background-neutral-lighter-default: rgba(166, 197, 226, 0);
674
- --color-background-info-default: #ffffff;
675
- --color-background-info-hover: #ffffff;
676
- --color-background-info-pressed: #ffffff;
655
+ --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
677
656
  --color-background-success-default: #ffffff;
678
657
  --color-background-success-hover: #ffffff;
679
658
  --color-background-success-pressed: #ffffff;
680
- --color-background-alert-default: #ffffff;
681
- --color-background-alert-hover: #ffffff;
682
- --color-background-alert-pressed: #ffffff;
683
- --color-background-danger-default: #ffffff;
684
- --color-background-danger-hover: #ffffff;
685
- --color-background-danger-pressed: #ffffff;
686
- --color-border-primary: var(--color-dark-neutral-200);
687
- --color-border-secondary: var(--color-dark-neutral-300);
688
- --color-border-tertiary: var(--color-dark-neutral-400);
689
- --color-border-focus: rgba(115, 178, 172, 0.4);
690
- --color-border-selected: var(--color-bcc-500);
691
- --color-border-disabled: var(--color-dark-neutral-200);
659
+ --color-border-accent-blue-default: var(--color-blue-500);
660
+ --color-border-accent-blue-hover: var(--color-blue-400);
661
+ --color-border-accent-blue-pressed: var(--color-blue-300);
662
+ --color-border-accent-green-default: var(--color-green-500);
663
+ --color-border-accent-green-hover: var(--color-green-400);
664
+ --color-border-accent-green-pressed: var(--color-green-300);
665
+ --color-border-accent-magenta-default: var(--color-magenta-500);
666
+ --color-border-accent-magenta-hover: var(--color-magenta-400);
667
+ --color-border-accent-magenta-pressed: var(--color-magenta-300);
668
+ --color-border-accent-purple-default: var(--color-purple-500);
669
+ --color-border-accent-purple-hover: var(--color-purple-400);
670
+ --color-border-accent-purple-pressed: var(--color-purple-300);
692
671
  --color-border-accent-red-default: var(--color-red-500);
693
672
  --color-border-accent-red-hover: var(--color-red-400);
694
673
  --color-border-accent-red-pressed: var(--color-red-300);
695
674
  --color-border-accent-rust-default: var(--color-rust-500);
696
675
  --color-border-accent-rust-hover: var(--color-rust-400);
697
676
  --color-border-accent-rust-pressed: var(--color-rust-300);
698
- --color-border-accent-yellow-default: #ffffff;
699
- --color-border-accent-yellow-hover: #ffffff;
700
- --color-border-accent-yellow-pressed: #ffffff;
701
- --color-border-accent-green-default: var(--color-green-500);
702
- --color-border-accent-green-hover: var(--color-green-400);
703
- --color-border-accent-green-pressed: var(--color-green-300);
704
- --color-border-accent-teal-default: var(--color-teal-500);
705
- --color-border-accent-teal-hover: var(--color-teal-400);
706
- --color-border-accent-teal-pressed: var(--color-teal-300);
707
677
  --color-border-accent-sand-default: var(--color-sand-500);
708
678
  --color-border-accent-sand-hover: var(--color-sand-400);
709
679
  --color-border-accent-sand-pressed: var(--color-sand-300);
710
- --color-border-accent-blue-default: var(--color-blue-500);
711
- --color-border-accent-blue-hover: var(--color-blue-400);
712
- --color-border-accent-blue-pressed: var(--color-blue-300);
713
- --color-border-accent-purple-default: var(--color-purple-500);
714
- --color-border-accent-purple-hover: var(--color-purple-400);
715
- --color-border-accent-purple-pressed: var(--color-purple-300);
716
- --color-border-accent-magenta-default: var(--color-magenta-500);
717
- --color-border-accent-magenta-hover: var(--color-magenta-400);
718
- --color-border-accent-magenta-pressed: var(--color-magenta-300);
719
- --heading-4xl-bold: var(--font-weight-bold-700) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
720
- --heading-4xl-bold-text-decoration: var(--text-decoration-none);
721
- --heading-4xl-medium: var(--font-weight-medium-500) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
722
- --heading-4xl-medium-text-decoration: var(--text-decoration-none);
723
- --heading-3xl-bold: var(--font-weight-bold-700) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
724
- --heading-3xl-bold-text-decoration: var(--text-decoration-none);
725
- --heading-3xl-medium: var(--font-weight-medium-500) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
726
- --heading-3xl-medium-text-decoration: var(--text-decoration-none);
727
- --heading-2xl-bold: var(--font-weight-bold-700) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
728
- --heading-2xl-bold-text-decoration: var(--text-decoration-none);
729
- --heading-2xl-medium: var(--font-weight-medium-500) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
730
- --heading-2xl-medium-text-decoration: var(--text-decoration-none);
731
- --heading-xl-bold: var(--font-weight-bold-700) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
732
- --heading-xl-bold-text-decoration: var(--text-decoration-none);
733
- --heading-xl-medium: var(--font-weight-medium-500) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
734
- --heading-xl-medium-text-decoration: var(--text-decoration-none);
735
- --heading-lg-bold: var(--font-weight-bold-700) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
736
- --heading-lg-bold-text-decoration: var(--text-decoration-none);
737
- --heading-lg-medium: var(--font-weight-medium-500) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
738
- --heading-lg-medium-text-decoration: var(--text-decoration-none);
739
- --body-base-bold: var(--font-weight-bold-700) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
680
+ --color-border-accent-teal-default: var(--color-teal-500);
681
+ --color-border-accent-teal-hover: var(--color-teal-400);
682
+ --color-border-accent-teal-pressed: var(--color-teal-300);
683
+ --color-border-accent-yellow-default: #ffffff;
684
+ --color-border-accent-yellow-hover: #ffffff;
685
+ --color-border-accent-yellow-pressed: #ffffff;
686
+ --color-border-disabled: var(--color-dark-neutral-200);
687
+ --color-border-focus: rgba(115, 178, 172, 0.4);
688
+ --color-border-primary: var(--color-dark-neutral-200);
689
+ --color-border-secondary: var(--color-dark-neutral-300);
690
+ --color-border-selected: var(--color-bcc-500);
691
+ --color-border-tertiary: var(--color-dark-neutral-400);
692
+ --color-divider-bold: var(--color-dark-neutral-300);
693
+ --color-divider-default: var(--color-dark-neutral-200);
694
+ --color-divider-light: var(--color-dark-neutral-100);
695
+ --color-icon-accent-blue: var(--color-blue-400);
696
+ --color-icon-accent-green: var(--color-green-400);
697
+ --color-icon-accent-magenta: var(--color-magenta-400);
698
+ --color-icon-accent-purple: var(--color-purple-400);
699
+ --color-icon-accent-red: var(--color-red-400);
700
+ --color-icon-accent-rust: var(--color-rust-400);
701
+ --color-icon-accent-sand: var(--color-sand-400);
702
+ --color-icon-accent-teal: var(--color-teal-400);
703
+ --color-icon-alert: var(--color-red-500);
704
+ --color-icon-brand: var(--color-bcc-400);
705
+ --color-icon-danger: #ffffff;
706
+ --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
707
+ --color-icon-info: #ffffff;
708
+ --color-icon-inverse: var(--color-dark-neutral-0);
709
+ --color-icon-primary: var(--color-dark-neutral-1100);
710
+ --color-icon-secondary: var(--color-dark-neutral-700);
711
+ --color-icon-success: var(--color-green-500);
712
+ --color-icon-tertiary: var(--color-dark-neutral-400);
713
+ --color-link-default: var(--color-blue-500);
714
+ --color-link-hover: var(--color-blue-400);
715
+ --color-link-visited: var(--color-blue-300);
716
+ --color-surface-inverse-primary: var(--color-neutral-0);
717
+ --color-surface-inverse-secondary: var(--color-neutral-200);
718
+ --color-surface-overlay-default: var(--color-dark-neutral-alpha-500-a);
719
+ --color-surface-primary: var(--color-dark-neutral-0);
720
+ --color-surface-secondary: var(--color-dark-neutral-200);
721
+ --color-text-accent-blue-bold: var(--color-blue-300);
722
+ --color-text-accent-blue-default: var(--color-blue-400);
723
+ --color-text-accent-green-bold: var(--color-green-300);
724
+ --color-text-accent-green-default: var(--color-green-400);
725
+ --color-text-accent-magenta-bold: var(--color-magenta-300);
726
+ --color-text-accent-magenta-default: var(--color-magenta-400);
727
+ --color-text-accent-purple-bold: var(--color-purple-300);
728
+ --color-text-accent-purple-default: var(--color-purple-400);
729
+ --color-text-accent-rust-bold: var(--color-rust-300);
730
+ --color-text-accent-rust-default: var(--color-rust-400);
731
+ --color-text-accent-sand-bold: var(--color-sand-300);
732
+ --color-text-accent-sand-default: var(--color-sand-400);
733
+ --color-text-accent-teal-bold: var(--color-teal-300);
734
+ --color-text-accent-teal-default: var(--color-teal-400);
735
+ --color-text-accent-yellow-bold: var(--color-red-300);
736
+ --color-text-accent-yellow-default: var(--color-red-400);
737
+ --color-text-alert: var(--color-red-500);
738
+ --color-text-brand-bold: var(--color-bcc-300);
739
+ --color-text-brand-default: var(--color-bcc-400);
740
+ --color-text-danger: var(--color-dark-neutral-0);
741
+ --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
742
+ --color-text-info: var(--color-dark-neutral-0);
743
+ --color-text-inverse: var(--color-dark-neutral-0);
744
+ --color-text-primary: var(--color-dark-neutral-1100);
745
+ --color-text-secondary: var(--color-dark-neutral-1100);
746
+ --color-text-success: var(--color-green-500);
747
+ --color-text-tertiary: var(--color-dark-neutral-400);
748
+
749
+ /* BODY */
740
750
  --body-base-bold-text-decoration: var(--text-decoration-none);
741
- --body-base-medium: var(--font-weight-medium-500) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
751
+ --body-base-bold: var(--font-weight-bold-700) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
742
752
  --body-base-medium-text-decoration: var(--text-decoration-none);
743
- --body-base-regular: var(--font-weight-regular-400) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
753
+ --body-base-medium: var(--font-weight-medium-500) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
744
754
  --body-base-regular-text-decoration: var(--text-decoration-none);
745
- --body-sm-bold: var(--font-weight-bold-700) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
755
+ --body-base-regular: var(--font-weight-regular-400) var(--font-size-text-md)/var(--line-height-text-md-leading-normal) var(--font-families-archivo);
746
756
  --body-sm-bold-text-decoration: var(--text-decoration-none);
747
- --body-sm-medium: var(--font-weight-medium-500) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
757
+ --body-sm-bold: var(--font-weight-bold-700) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
748
758
  --body-sm-medium-text-decoration: var(--text-decoration-none);
749
- --body-sm-regular: var(--font-weight-regular-400) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
759
+ --body-sm-medium: var(--font-weight-medium-500) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
750
760
  --body-sm-regular-text-decoration: var(--text-decoration-none);
751
- --body-xs-bold: var(--font-weight-bold-700) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
761
+ --body-sm-regular: var(--font-weight-regular-400) var(--font-size-text-sm)/var(--line-height-text-sm-leading-normal) var(--font-families-archivo);
752
762
  --body-xs-bold-text-decoration: var(--text-decoration-none);
753
- --body-xs-medium: var(--font-weight-medium-500) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
763
+ --body-xs-bold: var(--font-weight-bold-700) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
754
764
  --body-xs-medium-text-decoration: var(--text-decoration-none);
755
- --body-xs-regular: var(--font-weight-regular-400) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
765
+ --body-xs-medium: var(--font-weight-medium-500) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
756
766
  --body-xs-regular-text-decoration: var(--text-decoration-none);
767
+ --body-xs-regular: var(--font-weight-regular-400) var(--font-size-text-xs)/var(--line-height-text-xs-leading-normal) var(--font-families-archivo);
768
+
769
+ /* HEADING */
770
+ --heading-2xl-bold-text-decoration: var(--text-decoration-none);
771
+ --heading-2xl-bold: var(--font-weight-bold-700) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
772
+ --heading-2xl-medium-text-decoration: var(--text-decoration-none);
773
+ --heading-2xl-medium: var(--font-weight-medium-500) var(--font-size-text-2xl)/var(--line-height-text-2xl-leading-tight) var(--font-families-archivo);
774
+ --heading-3xl-bold-text-decoration: var(--text-decoration-none);
775
+ --heading-3xl-bold: var(--font-weight-bold-700) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
776
+ --heading-3xl-medium-text-decoration: var(--text-decoration-none);
777
+ --heading-3xl-medium: var(--font-weight-medium-500) var(--font-size-text-3xl)/var(--line-height-text-3xl-leading-tight) var(--font-families-archivo);
778
+ --heading-4xl-bold-text-decoration: var(--text-decoration-none);
779
+ --heading-4xl-bold: var(--font-weight-bold-700) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
780
+ --heading-4xl-medium-text-decoration: var(--text-decoration-none);
781
+ --heading-4xl-medium: var(--font-weight-medium-500) var(--font-size-text-4xl)/var(--line-height-text-4xl-leading-tight) var(--font-families-archivo);
782
+ --heading-lg-bold-text-decoration: var(--text-decoration-none);
783
+ --heading-lg-bold: var(--font-weight-bold-700) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
784
+ --heading-lg-medium-text-decoration: var(--text-decoration-none);
785
+ --heading-lg-medium: var(--font-weight-medium-500) var(--font-size-text-lg)/var(--line-height-text-lg-leading-tight) var(--font-families-archivo);
786
+ --heading-xl-bold-text-decoration: var(--text-decoration-none);
787
+ --heading-xl-bold: var(--font-weight-bold-700) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
788
+ --heading-xl-medium-text-decoration: var(--text-decoration-none);
789
+ --heading-xl-medium: var(--font-weight-medium-500) var(--font-size-text-xl)/var(--line-height-text-xl-leading-tight) var(--font-families-archivo);
790
+
757
791
  }