@khanacademy/wonder-blocks-tokens 10.3.0 → 10.4.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.
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-tokens@10.3.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
2
+ > @khanacademy/wonder-blocks-tokens@10.4.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
3
3
  > node -r @swc-node/register ./src/build/generate-css-variables.ts
4
4
 
5
5
  CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens/dist/css
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 10.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - b1ee2b4: Adds `chonky` category and `ActivityIconButton` component.
8
+ - 7abcccf: Add `core.background` and `core.foreground` categories.
9
+ - 9bacc1a: Adds new `semanticColor.core` category
10
+ - 1c3c335: Adds `semanticColor.link` tokens category
11
+ - 689f5d3: Adds `core` category to the ThunderBlocks semanticColor theme
12
+
13
+ ### Patch Changes
14
+
15
+ - 9bacc1a: Replaces all existing `semanticColor.border` references to use `semanticColor.core.border`
16
+
3
17
  ## 10.3.0
4
18
 
5
19
  ### Minor Changes
@@ -1,4 +1,34 @@
1
- :root {--wb-c-icon-button-iconButton-root-border-offset-primary: var(--wb-border-width-medium);
1
+ :root {--wb-c-button-root-border-width-primary-default: var(--wb-border-width-none);
2
+ --wb-c-button-root-border-width-primary-hover: var(--wb-border-width-medium);
3
+ --wb-c-button-root-border-width-primary-press: var(--wb-border-width-medium);
4
+ --wb-c-button-root-border-width-secondary-default: var(--wb-border-width-thin);
5
+ --wb-c-button-root-border-width-secondary-hover: var(--wb-border-width-thin);
6
+ --wb-c-button-root-border-width-secondary-press: var(--wb-border-width-thin);
7
+ --wb-c-button-root-border-width-tertiary-default: var(--wb-border-width-none);
8
+ --wb-c-button-root-border-width-tertiary-hover: var(--wb-border-width-medium);
9
+ --wb-c-button-root-border-width-tertiary-press: var(--wb-border-width-medium);
10
+ --wb-c-button-root-border-offset-primary: var(--wb-border-width-medium);
11
+ --wb-c-button-root-border-offset-secondary: 0;
12
+ --wb-c-button-root-border-offset-tertiary: 0;
13
+ --wb-c-button-root-border-radius-small: var(--wb-border-radius-radius_040);
14
+ --wb-c-button-root-border-radius-medium: var(--wb-border-radius-radius_040);
15
+ --wb-c-button-root-border-radius-large: var(--wb-border-radius-radius_040);
16
+ --wb-c-button-root-sizing-height-small: var(--wb-sizing-size_320);
17
+ --wb-c-button-root-sizing-height-medium: var(--wb-sizing-size_400);
18
+ --wb-c-button-root-sizing-height-large: var(--wb-sizing-size_560);
19
+ --wb-c-button-root-sizing-underline-hover: var(--wb-sizing-size_020);
20
+ --wb-c-button-root-sizing-underline-press: var(--wb-sizing-size_010);
21
+ --wb-c-button-root-padding-medium: var(--wb-sizing-size_160);
22
+ --wb-c-button-root-padding-large: var(--wb-sizing-size_320);
23
+ --wb-c-button-root-font-size-large: 1.8rem;
24
+ --wb-c-button-root-font-lineHeight-small: var(--wb-font-lineHeight-xMedium);
25
+ --wb-c-button-root-font-lineHeight-default: var(--wb-font-lineHeight-large);
26
+ --wb-c-button-root-font-lineHeight-large: 2.6rem;
27
+ --wb-c-button-root-font-weight-default: var(--wb-font-weight-bold);
28
+ --wb-c-button-root-font-offset-default: var(--wb-sizing-size_040);
29
+ --wb-c-button-icon-margin-inline-inner: var(--wb-sizing-size_060);
30
+ --wb-c-button-icon-margin-inline-outer: calc(-1 * var(--wb-border-width-medium));
31
+ --wb-c-button-icon-padding: var(--wb-sizing-size_020);}:root {--wb-c-icon-button-iconButton-root-border-offset-primary: var(--wb-border-width-medium);
2
32
  --wb-c-icon-button-iconButton-root-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
3
33
  --wb-c-icon-button-iconButton-root-border-offset-tertiary: calc(-1 * var(--wb-border-width-medium));
4
34
  --wb-c-icon-button-iconButton-root-border-width-primary-default: var(--wb-border-width-none);
@@ -94,6 +124,73 @@
94
124
  --wb-font-heading-lineHeight-large: 2.8rem;
95
125
  --wb-font-heading-lineHeight-xlarge: 3.2rem;
96
126
  --wb-font-heading-lineHeight-xxlarge: 4rem;
127
+ --wb-semanticColor-core-transparent: transparent;
128
+ --wb-semanticColor-core-border-instructive-subtle: #b5cefb;
129
+ --wb-semanticColor-core-border-instructive-default: #1865f2;
130
+ --wb-semanticColor-core-border-instructive-strong: #1b50b3;
131
+ --wb-semanticColor-core-border-neutral-subtle: #dbdcdd;
132
+ --wb-semanticColor-core-border-neutral-default: #909296;
133
+ --wb-semanticColor-core-border-neutral-strong: #5f6167;
134
+ --wb-semanticColor-core-border-critical-subtle: #f6ccc7;
135
+ --wb-semanticColor-core-border-critical-default: #d92916;
136
+ --wb-semanticColor-core-border-critical-strong: #9e271d;
137
+ --wb-semanticColor-core-border-success-subtle: #c2eac5;
138
+ --wb-semanticColor-core-border-success-default: #00a60e;
139
+ --wb-semanticColor-core-border-success-strong: #0b7c18;
140
+ --wb-semanticColor-core-border-warning-subtle: #ffecc2;
141
+ --wb-semanticColor-core-border-warning-default: #ffb100;
142
+ --wb-semanticColor-core-border-warning-strong: #b8840e;
143
+ --wb-semanticColor-core-border-disabled-subtle: transparent;
144
+ --wb-semanticColor-core-border-disabled-default: #dbdcdd;
145
+ --wb-semanticColor-core-border-disabled-strong: #b8b9bb;
146
+ --wb-semanticColor-core-border-inverse-subtle: #dbdcdd;
147
+ --wb-semanticColor-core-border-inverse-default: #ededee;
148
+ --wb-semanticColor-core-border-inverse-strong: #ffffff;
149
+ --wb-semanticColor-core-background-instructive-subtle: #edf3fe;
150
+ --wb-semanticColor-core-background-instructive-default: #1865f2;
151
+ --wb-semanticColor-core-background-instructive-strong: #1b50b3;
152
+ --wb-semanticColor-core-background-neutral-subtle: #ededee;
153
+ --wb-semanticColor-core-background-neutral-default: #5f6167;
154
+ --wb-semanticColor-core-background-neutral-strong: #21242c;
155
+ --wb-semanticColor-core-background-critical-subtle: #fceeec;
156
+ --wb-semanticColor-core-background-critical-default: #d92916;
157
+ --wb-semanticColor-core-background-critical-strong: #9e271d;
158
+ --wb-semanticColor-core-background-success-subtle: #ebf8ec;
159
+ --wb-semanticColor-core-background-success-default: #00a60e;
160
+ --wb-semanticColor-core-background-success-strong: #0b7c18;
161
+ --wb-semanticColor-core-background-warning-subtle: #fff9eb;
162
+ --wb-semanticColor-core-background-warning-default: #ffb100;
163
+ --wb-semanticColor-core-background-warning-strong: #b8840e;
164
+ --wb-semanticColor-core-background-disabled-subtle: transparent;
165
+ --wb-semanticColor-core-background-disabled-default: #ededee;
166
+ --wb-semanticColor-core-background-disabled-strong: #dbdcdd;
167
+ --wb-semanticColor-core-foreground-instructive-subtle: #1865f2;
168
+ --wb-semanticColor-core-foreground-instructive-default: #1b50b3;
169
+ --wb-semanticColor-core-foreground-instructive-strong: #21242c;
170
+ --wb-semanticColor-core-foreground-neutral-subtle: #717378;
171
+ --wb-semanticColor-core-foreground-neutral-default: #5f6167;
172
+ --wb-semanticColor-core-foreground-neutral-strong: #21242c;
173
+ --wb-semanticColor-core-foreground-critical-subtle: #d92916;
174
+ --wb-semanticColor-core-foreground-critical-default: #9e271d;
175
+ --wb-semanticColor-core-foreground-critical-strong: #21242c;
176
+ --wb-semanticColor-core-foreground-success-subtle: #00a60e;
177
+ --wb-semanticColor-core-foreground-success-default: #0b7c18;
178
+ --wb-semanticColor-core-foreground-success-strong: #21242c;
179
+ --wb-semanticColor-core-foreground-warning-subtle: #ffb100;
180
+ --wb-semanticColor-core-foreground-warning-default: #b8840e;
181
+ --wb-semanticColor-core-foreground-warning-strong: #21242c;
182
+ --wb-semanticColor-core-foreground-disabled-subtle: #dbdcdd;
183
+ --wb-semanticColor-core-foreground-disabled-default: #b8b9bb;
184
+ --wb-semanticColor-core-foreground-disabled-strong: #909296;
185
+ --wb-semanticColor-core-foreground-inverse-subtle: #b8b9bb;
186
+ --wb-semanticColor-core-foreground-inverse-default: #f7f8fa;
187
+ --wb-semanticColor-core-foreground-inverse-strong: #ffffff;
188
+ --wb-semanticColor-core-shadow-transparent: transparent;
189
+ --wb-semanticColor-core-shadow-chonky-progressive-subtle: #b5cefb;
190
+ --wb-semanticColor-core-shadow-chonky-progressive-default: #1b50b3;
191
+ --wb-semanticColor-core-shadow-chonky-neutral-subtle: #b8b9bb;
192
+ --wb-semanticColor-core-shadow-chonky-neutral-default: #909296;
193
+ --wb-semanticColor-core-shadow-chonky-neutral-strong: #21242c;
97
194
  --wb-semanticColor-action-primary-progressive-default-border: transparent;
98
195
  --wb-semanticColor-action-primary-progressive-default-background: #1865f2;
99
196
  --wb-semanticColor-action-primary-progressive-default-foreground: #ffffff;
@@ -115,10 +212,10 @@
115
212
  --wb-semanticColor-action-primary-neutral-default-border: transparent;
116
213
  --wb-semanticColor-action-primary-neutral-default-background: #5f6167;
117
214
  --wb-semanticColor-action-primary-neutral-default-foreground: #ffffff;
118
- --wb-semanticColor-action-primary-neutral-hover-border: #5f6167;
215
+ --wb-semanticColor-action-primary-neutral-hover-border: #909296;
119
216
  --wb-semanticColor-action-primary-neutral-hover-background: #5f6167;
120
217
  --wb-semanticColor-action-primary-neutral-hover-foreground: #ffffff;
121
- --wb-semanticColor-action-primary-neutral-press-border: #21242c;
218
+ --wb-semanticColor-action-primary-neutral-press-border: #5f6167;
122
219
  --wb-semanticColor-action-primary-neutral-press-background: #21242c;
123
220
  --wb-semanticColor-action-primary-neutral-press-foreground: #ffffff;
124
221
  --wb-semanticColor-action-primary-disabled-border: #b8b9bb;
@@ -131,7 +228,7 @@
131
228
  --wb-semanticColor-action-secondary-progressive-hover-background: transparent;
132
229
  --wb-semanticColor-action-secondary-progressive-hover-foreground: #1865f2;
133
230
  --wb-semanticColor-action-secondary-progressive-press-border: #1b50b3;
134
- --wb-semanticColor-action-secondary-progressive-press-background: #b5cefb;
231
+ --wb-semanticColor-action-secondary-progressive-press-background: #edf3fe;
135
232
  --wb-semanticColor-action-secondary-progressive-press-foreground: #1b50b3;
136
233
  --wb-semanticColor-action-secondary-destructive-default-border: #909296;
137
234
  --wb-semanticColor-action-secondary-destructive-default-background: transparent;
@@ -140,16 +237,16 @@
140
237
  --wb-semanticColor-action-secondary-destructive-hover-background: transparent;
141
238
  --wb-semanticColor-action-secondary-destructive-hover-foreground: #d92916;
142
239
  --wb-semanticColor-action-secondary-destructive-press-border: #9e271d;
143
- --wb-semanticColor-action-secondary-destructive-press-background: #f3bbb4;
240
+ --wb-semanticColor-action-secondary-destructive-press-background: #fceeec;
144
241
  --wb-semanticColor-action-secondary-destructive-press-foreground: #9e271d;
145
242
  --wb-semanticColor-action-secondary-neutral-default-border: #909296;
146
243
  --wb-semanticColor-action-secondary-neutral-default-background: transparent;
147
244
  --wb-semanticColor-action-secondary-neutral-default-foreground: #5f6167;
148
- --wb-semanticColor-action-secondary-neutral-hover-border: #5f6167;
245
+ --wb-semanticColor-action-secondary-neutral-hover-border: #909296;
149
246
  --wb-semanticColor-action-secondary-neutral-hover-background: transparent;
150
247
  --wb-semanticColor-action-secondary-neutral-hover-foreground: #5f6167;
151
- --wb-semanticColor-action-secondary-neutral-press-border: #21242c;
152
- --wb-semanticColor-action-secondary-neutral-press-background: rgba(33,36,44,0.16);
248
+ --wb-semanticColor-action-secondary-neutral-press-border: #5f6167;
249
+ --wb-semanticColor-action-secondary-neutral-press-background: #ededee;
153
250
  --wb-semanticColor-action-secondary-neutral-press-foreground: #21242c;
154
251
  --wb-semanticColor-action-secondary-disabled-border: #b8b9bb;
155
252
  --wb-semanticColor-action-secondary-disabled-background: transparent;
@@ -175,15 +272,123 @@
175
272
  --wb-semanticColor-action-tertiary-neutral-default-border: transparent;
176
273
  --wb-semanticColor-action-tertiary-neutral-default-background: transparent;
177
274
  --wb-semanticColor-action-tertiary-neutral-default-foreground: #5f6167;
178
- --wb-semanticColor-action-tertiary-neutral-hover-border: #5f6167;
275
+ --wb-semanticColor-action-tertiary-neutral-hover-border: #909296;
179
276
  --wb-semanticColor-action-tertiary-neutral-hover-background: transparent;
180
277
  --wb-semanticColor-action-tertiary-neutral-hover-foreground: #5f6167;
181
- --wb-semanticColor-action-tertiary-neutral-press-border: #21242c;
278
+ --wb-semanticColor-action-tertiary-neutral-press-border: #5f6167;
182
279
  --wb-semanticColor-action-tertiary-neutral-press-background: transparent;
183
280
  --wb-semanticColor-action-tertiary-neutral-press-foreground: #21242c;
184
281
  --wb-semanticColor-action-tertiary-disabled-border: #dbdcdd;
185
282
  --wb-semanticColor-action-tertiary-disabled-background: transparent;
186
283
  --wb-semanticColor-action-tertiary-disabled-foreground: #b8b9bb;
284
+ --wb-semanticColor-chonky-progressive-background-primary-rest: #1865f2;
285
+ --wb-semanticColor-chonky-progressive-background-primary-hover: #1865f2;
286
+ --wb-semanticColor-chonky-progressive-background-primary-press: #1865f2;
287
+ --wb-semanticColor-chonky-progressive-background-primary-selected: #1865f2;
288
+ --wb-semanticColor-chonky-progressive-background-secondary-rest: #edf3fe;
289
+ --wb-semanticColor-chonky-progressive-background-secondary-hover: #edf3fe;
290
+ --wb-semanticColor-chonky-progressive-background-secondary-press: #edf3fe;
291
+ --wb-semanticColor-chonky-progressive-background-secondary-selected: #edf3fe;
292
+ --wb-semanticColor-chonky-progressive-background-tertiary-rest: transparent;
293
+ --wb-semanticColor-chonky-progressive-background-tertiary-hover: transparent;
294
+ --wb-semanticColor-chonky-progressive-background-tertiary-press: transparent;
295
+ --wb-semanticColor-chonky-progressive-background-tertiary-selected: transparent;
296
+ --wb-semanticColor-chonky-progressive-border-primary-rest: transparent;
297
+ --wb-semanticColor-chonky-progressive-border-primary-hover: transparent;
298
+ --wb-semanticColor-chonky-progressive-border-primary-press: transparent;
299
+ --wb-semanticColor-chonky-progressive-border-primary-selected: transparent;
300
+ --wb-semanticColor-chonky-progressive-border-secondary-rest: #b5cefb;
301
+ --wb-semanticColor-chonky-progressive-border-secondary-hover: #b5cefb;
302
+ --wb-semanticColor-chonky-progressive-border-secondary-press: #b5cefb;
303
+ --wb-semanticColor-chonky-progressive-border-secondary-selected: #b5cefb;
304
+ --wb-semanticColor-chonky-progressive-border-tertiary-rest: transparent;
305
+ --wb-semanticColor-chonky-progressive-border-tertiary-hover: #dbdcdd;
306
+ --wb-semanticColor-chonky-progressive-border-tertiary-press: #dbdcdd;
307
+ --wb-semanticColor-chonky-progressive-border-tertiary-selected: #b5cefb;
308
+ --wb-semanticColor-chonky-progressive-foreground-primary-rest: #ffffff;
309
+ --wb-semanticColor-chonky-progressive-foreground-primary-hover: #ffffff;
310
+ --wb-semanticColor-chonky-progressive-foreground-primary-press: #ffffff;
311
+ --wb-semanticColor-chonky-progressive-foreground-primary-selected: #ffffff;
312
+ --wb-semanticColor-chonky-progressive-foreground-secondary-rest: #1b50b3;
313
+ --wb-semanticColor-chonky-progressive-foreground-secondary-hover: #1b50b3;
314
+ --wb-semanticColor-chonky-progressive-foreground-secondary-press: #1b50b3;
315
+ --wb-semanticColor-chonky-progressive-foreground-secondary-selected: #1b50b3;
316
+ --wb-semanticColor-chonky-progressive-foreground-tertiary-rest: #1b50b3;
317
+ --wb-semanticColor-chonky-progressive-foreground-tertiary-hover: #1b50b3;
318
+ --wb-semanticColor-chonky-progressive-foreground-tertiary-press: #1b50b3;
319
+ --wb-semanticColor-chonky-progressive-foreground-tertiary-selected: #1b50b3;
320
+ --wb-semanticColor-chonky-progressive-shadow-primary-rest: #1b50b3;
321
+ --wb-semanticColor-chonky-progressive-shadow-primary-hover: #1b50b3;
322
+ --wb-semanticColor-chonky-progressive-shadow-primary-press: #1b50b3;
323
+ --wb-semanticColor-chonky-progressive-shadow-primary-selected: #1b50b3;
324
+ --wb-semanticColor-chonky-progressive-shadow-secondary-rest: #b5cefb;
325
+ --wb-semanticColor-chonky-progressive-shadow-secondary-hover: #b5cefb;
326
+ --wb-semanticColor-chonky-progressive-shadow-secondary-press: #b5cefb;
327
+ --wb-semanticColor-chonky-progressive-shadow-secondary-selected: #b5cefb;
328
+ --wb-semanticColor-chonky-progressive-shadow-tertiary-rest: transparent;
329
+ --wb-semanticColor-chonky-progressive-shadow-tertiary-hover: #b8b9bb;
330
+ --wb-semanticColor-chonky-progressive-shadow-tertiary-press: #b8b9bb;
331
+ --wb-semanticColor-chonky-progressive-shadow-tertiary-selected: #b5cefb;
332
+ --wb-semanticColor-chonky-neutral-background-primary-rest: #5f6167;
333
+ --wb-semanticColor-chonky-neutral-background-primary-hover: #5f6167;
334
+ --wb-semanticColor-chonky-neutral-background-primary-press: #5f6167;
335
+ --wb-semanticColor-chonky-neutral-background-primary-selected: #5f6167;
336
+ --wb-semanticColor-chonky-neutral-background-secondary-rest: transparent;
337
+ --wb-semanticColor-chonky-neutral-background-secondary-hover: transparent;
338
+ --wb-semanticColor-chonky-neutral-background-secondary-press: transparent;
339
+ --wb-semanticColor-chonky-neutral-background-secondary-selected: #ededee;
340
+ --wb-semanticColor-chonky-neutral-background-tertiary-rest: transparent;
341
+ --wb-semanticColor-chonky-neutral-background-tertiary-hover: transparent;
342
+ --wb-semanticColor-chonky-neutral-background-tertiary-press: transparent;
343
+ --wb-semanticColor-chonky-neutral-background-tertiary-selected: transparent;
344
+ --wb-semanticColor-chonky-neutral-border-primary-rest: transparent;
345
+ --wb-semanticColor-chonky-neutral-border-primary-hover: transparent;
346
+ --wb-semanticColor-chonky-neutral-border-primary-press: transparent;
347
+ --wb-semanticColor-chonky-neutral-border-primary-selected: transparent;
348
+ --wb-semanticColor-chonky-neutral-border-secondary-rest: #dbdcdd;
349
+ --wb-semanticColor-chonky-neutral-border-secondary-hover: #dbdcdd;
350
+ --wb-semanticColor-chonky-neutral-border-secondary-press: #dbdcdd;
351
+ --wb-semanticColor-chonky-neutral-border-secondary-selected: #dbdcdd;
352
+ --wb-semanticColor-chonky-neutral-border-tertiary-rest: transparent;
353
+ --wb-semanticColor-chonky-neutral-border-tertiary-hover: #dbdcdd;
354
+ --wb-semanticColor-chonky-neutral-border-tertiary-press: #dbdcdd;
355
+ --wb-semanticColor-chonky-neutral-border-tertiary-selected: transparent;
356
+ --wb-semanticColor-chonky-neutral-foreground-primary-rest: #ffffff;
357
+ --wb-semanticColor-chonky-neutral-foreground-primary-hover: #ffffff;
358
+ --wb-semanticColor-chonky-neutral-foreground-primary-press: #ffffff;
359
+ --wb-semanticColor-chonky-neutral-foreground-primary-selected: #ffffff;
360
+ --wb-semanticColor-chonky-neutral-foreground-secondary-rest: #717378;
361
+ --wb-semanticColor-chonky-neutral-foreground-secondary-hover: #717378;
362
+ --wb-semanticColor-chonky-neutral-foreground-secondary-press: #717378;
363
+ --wb-semanticColor-chonky-neutral-foreground-secondary-selected: #717378;
364
+ --wb-semanticColor-chonky-neutral-foreground-tertiary-rest: #5f6167;
365
+ --wb-semanticColor-chonky-neutral-foreground-tertiary-hover: #5f6167;
366
+ --wb-semanticColor-chonky-neutral-foreground-tertiary-press: #5f6167;
367
+ --wb-semanticColor-chonky-neutral-foreground-tertiary-selected: #5f6167;
368
+ --wb-semanticColor-chonky-neutral-shadow-primary-rest: #21242c;
369
+ --wb-semanticColor-chonky-neutral-shadow-primary-hover: #21242c;
370
+ --wb-semanticColor-chonky-neutral-shadow-primary-press: transparent;
371
+ --wb-semanticColor-chonky-neutral-shadow-primary-selected: #21242c;
372
+ --wb-semanticColor-chonky-neutral-shadow-secondary-rest: #b8b9bb;
373
+ --wb-semanticColor-chonky-neutral-shadow-secondary-hover: #b8b9bb;
374
+ --wb-semanticColor-chonky-neutral-shadow-secondary-press: #21242c;
375
+ --wb-semanticColor-chonky-neutral-shadow-secondary-selected: #b8b9bb;
376
+ --wb-semanticColor-chonky-neutral-shadow-tertiary-rest: transparent;
377
+ --wb-semanticColor-chonky-neutral-shadow-tertiary-hover: #b8b9bb;
378
+ --wb-semanticColor-chonky-neutral-shadow-tertiary-press: #b8b9bb;
379
+ --wb-semanticColor-chonky-neutral-shadow-tertiary-selected: #b5cefb;
380
+ --wb-semanticColor-chonky-disabled-background-primary: #ededee;
381
+ --wb-semanticColor-chonky-disabled-background-secondary: #ededee;
382
+ --wb-semanticColor-chonky-disabled-background-tertiary: transparent;
383
+ --wb-semanticColor-chonky-disabled-border-primary: #dbdcdd;
384
+ --wb-semanticColor-chonky-disabled-border-secondary: #dbdcdd;
385
+ --wb-semanticColor-chonky-disabled-border-tertiary: transparent;
386
+ --wb-semanticColor-chonky-disabled-foreground-primary: #b8b9bb;
387
+ --wb-semanticColor-chonky-disabled-foreground-secondary: #b8b9bb;
388
+ --wb-semanticColor-chonky-disabled-foreground-tertiary: #b8b9bb;
389
+ --wb-semanticColor-chonky-disabled-shadow-primary: #b8b9bb;
390
+ --wb-semanticColor-chonky-disabled-shadow-secondary: #b8b9bb;
391
+ --wb-semanticColor-chonky-disabled-shadow-tertiary: transparent;
187
392
  --wb-semanticColor-input-default-border: #909296;
188
393
  --wb-semanticColor-input-default-background: #ffffff;
189
394
  --wb-semanticColor-input-default-foreground: #21242c;
@@ -231,6 +436,10 @@
231
436
  --wb-semanticColor-icon-action: #1865f2;
232
437
  --wb-semanticColor-icon-destructive: #d92916;
233
438
  --wb-semanticColor-icon-disabled: #b8b9bb;
439
+ --wb-semanticColor-link-rest: #1865f2;
440
+ --wb-semanticColor-link-hover: #1865f2;
441
+ --wb-semanticColor-link-press: #1b50b3;
442
+ --wb-semanticColor-link-disabled: #b8b9bb;
234
443
  --wb-semanticColor-khanmigo-primary: #5f1e5c;
235
444
  --wb-semanticColor-khanmigo-secondary: #f2edf2;
236
445
  --wb-semanticColor-mastery-primary: #9059ff;
@@ -312,7 +521,74 @@
312
521
  --wb-font-heading-lineHeight-large: var(--wb-sizing-size_280);
313
522
  --wb-font-heading-lineHeight-xlarge: var(--wb-sizing-size_320);
314
523
  --wb-font-heading-lineHeight-xxlarge: var(--wb-sizing-size_400);
315
- --wb-semanticColor-action-primary-progressive-default-border: #5753FA;
524
+ --wb-semanticColor-core-transparent: transparent;
525
+ --wb-semanticColor-core-border-instructive-subtle: #BFCAFF;
526
+ --wb-semanticColor-core-border-instructive-default: #6E78FF;
527
+ --wb-semanticColor-core-border-instructive-strong: #363498;
528
+ --wb-semanticColor-core-border-neutral-subtle: #CBCBCD;
529
+ --wb-semanticColor-core-border-neutral-default: #8A8B90;
530
+ --wb-semanticColor-core-border-neutral-strong: #4A4C53;
531
+ --wb-semanticColor-core-border-critical-subtle: #FBB1B1;
532
+ --wb-semanticColor-core-border-critical-default: #E22D2D;
533
+ --wb-semanticColor-core-border-critical-strong: #8E1C1C;
534
+ --wb-semanticColor-core-border-success-subtle: #BCEBBB;
535
+ --wb-semanticColor-core-border-success-default: #579F6C;
536
+ --wb-semanticColor-core-border-success-strong: #2C5037;
537
+ --wb-semanticColor-core-border-warning-subtle: #FEE7AD;
538
+ --wb-semanticColor-core-border-warning-default: #FCC539;
539
+ --wb-semanticColor-core-border-warning-strong: #9B6F00;
540
+ --wb-semanticColor-core-border-disabled-subtle: transparent;
541
+ --wb-semanticColor-core-border-disabled-default: #E0E0E1;
542
+ --wb-semanticColor-core-border-disabled-strong: #CBCBCD;
543
+ --wb-semanticColor-core-border-inverse-subtle: #CBCBCD;
544
+ --wb-semanticColor-core-border-inverse-default: #F6F6F6;
545
+ --wb-semanticColor-core-border-inverse-strong: #FFFFFF;
546
+ --wb-semanticColor-core-background-instructive-subtle: #EBF1FD;
547
+ --wb-semanticColor-core-background-instructive-default: #5753FA;
548
+ --wb-semanticColor-core-background-instructive-strong: #363498;
549
+ --wb-semanticColor-core-background-neutral-subtle: #FFFFFF;
550
+ --wb-semanticColor-core-background-neutral-default: #75767C;
551
+ --wb-semanticColor-core-background-neutral-strong: #191918;
552
+ --wb-semanticColor-core-background-critical-subtle: #FEF4F4;
553
+ --wb-semanticColor-core-background-critical-default: #BE2626;
554
+ --wb-semanticColor-core-background-critical-strong: #621414;
555
+ --wb-semanticColor-core-background-success-subtle: #F1FBF1;
556
+ --wb-semanticColor-core-background-success-default: #579F6C;
557
+ --wb-semanticColor-core-background-success-strong: #2C5037;
558
+ --wb-semanticColor-core-background-warning-subtle: #FEF8E7;
559
+ --wb-semanticColor-core-background-warning-default: #FEE7AD;
560
+ --wb-semanticColor-core-background-warning-strong: #9B6F00;
561
+ --wb-semanticColor-core-background-disabled-subtle: transparent;
562
+ --wb-semanticColor-core-background-disabled-default: #EDEDEE;
563
+ --wb-semanticColor-core-background-disabled-strong: #E0E0E1;
564
+ --wb-semanticColor-core-foreground-instructive-subtle: #8DA2FF;
565
+ --wb-semanticColor-core-foreground-instructive-default: #5753FA;
566
+ --wb-semanticColor-core-foreground-instructive-strong: #363498;
567
+ --wb-semanticColor-core-foreground-neutral-subtle: #75767C;
568
+ --wb-semanticColor-core-foreground-neutral-default: #4A4C53;
569
+ --wb-semanticColor-core-foreground-neutral-strong: #191918;
570
+ --wb-semanticColor-core-foreground-critical-subtle: #F97F7F;
571
+ --wb-semanticColor-core-foreground-critical-default: #BE2626;
572
+ --wb-semanticColor-core-foreground-critical-strong: #8E1C1C;
573
+ --wb-semanticColor-core-foreground-success-subtle: #97D38E;
574
+ --wb-semanticColor-core-foreground-success-default: #3C6D4A;
575
+ --wb-semanticColor-core-foreground-success-strong: #24432D;
576
+ --wb-semanticColor-core-foreground-warning-subtle: #FDD673;
577
+ --wb-semanticColor-core-foreground-warning-default: #9B6F00;
578
+ --wb-semanticColor-core-foreground-warning-strong: #5F4500;
579
+ --wb-semanticColor-core-foreground-disabled-subtle: #CBCBCD;
580
+ --wb-semanticColor-core-foreground-disabled-default: #B5B6B9;
581
+ --wb-semanticColor-core-foreground-disabled-strong: #A0A1A4;
582
+ --wb-semanticColor-core-foreground-inverse-subtle: #CBCBCD;
583
+ --wb-semanticColor-core-foreground-inverse-default: #F6F6F6;
584
+ --wb-semanticColor-core-foreground-inverse-strong: #FFFFFF;
585
+ --wb-semanticColor-core-shadow-transparent: transparent;
586
+ --wb-semanticColor-core-shadow-chonky-progressive-subtle: #BFCAFF;
587
+ --wb-semanticColor-core-shadow-chonky-progressive-default: #363498;
588
+ --wb-semanticColor-core-shadow-chonky-neutral-subtle: #CBCBCD;
589
+ --wb-semanticColor-core-shadow-chonky-neutral-default: #8A8B90;
590
+ --wb-semanticColor-core-shadow-chonky-neutral-strong: #4A4C53;
591
+ --wb-semanticColor-action-primary-progressive-default-border: #6E78FF;
316
592
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
317
593
  --wb-semanticColor-action-primary-progressive-default-foreground: #FFFFFF;
318
594
  --wb-semanticColor-action-primary-progressive-hover-border: #363498;
@@ -324,41 +600,41 @@
324
600
  --wb-semanticColor-action-primary-destructive-default-border: #E22D2D;
325
601
  --wb-semanticColor-action-primary-destructive-default-background: #BE2626;
326
602
  --wb-semanticColor-action-primary-destructive-default-foreground: #FFFFFF;
327
- --wb-semanticColor-action-primary-destructive-hover-border: #621414;
603
+ --wb-semanticColor-action-primary-destructive-hover-border: #8E1C1C;
328
604
  --wb-semanticColor-action-primary-destructive-hover-background: #621414;
329
605
  --wb-semanticColor-action-primary-destructive-hover-foreground: #FFFFFF;
330
- --wb-semanticColor-action-primary-destructive-press-border: #621414;
606
+ --wb-semanticColor-action-primary-destructive-press-border: #8E1C1C;
331
607
  --wb-semanticColor-action-primary-destructive-press-background: #621414;
332
608
  --wb-semanticColor-action-primary-destructive-press-foreground: #FFFFFF;
333
609
  --wb-semanticColor-action-primary-neutral-default-border: #8A8B90;
334
610
  --wb-semanticColor-action-primary-neutral-default-background: #75767C;
335
611
  --wb-semanticColor-action-primary-neutral-default-foreground: #FFFFFF;
336
- --wb-semanticColor-action-primary-neutral-hover-border: #35373F;
337
- --wb-semanticColor-action-primary-neutral-hover-background: #35373F;
612
+ --wb-semanticColor-action-primary-neutral-hover-border: #4A4C53;
613
+ --wb-semanticColor-action-primary-neutral-hover-background: #191918;
338
614
  --wb-semanticColor-action-primary-neutral-hover-foreground: #FFFFFF;
339
- --wb-semanticColor-action-primary-neutral-press-border: #35373F;
340
- --wb-semanticColor-action-primary-neutral-press-background: #35373F;
615
+ --wb-semanticColor-action-primary-neutral-press-border: #4A4C53;
616
+ --wb-semanticColor-action-primary-neutral-press-background: #191918;
341
617
  --wb-semanticColor-action-primary-neutral-press-foreground: #FFFFFF;
342
- --wb-semanticColor-action-primary-disabled-border: #E0E0E1;
618
+ --wb-semanticColor-action-primary-disabled-border: transparent;
343
619
  --wb-semanticColor-action-primary-disabled-background: #E0E0E1;
344
620
  --wb-semanticColor-action-primary-disabled-foreground: #B5B6B9;
345
621
  --wb-semanticColor-action-secondary-progressive-default-border: #BFCAFF;
346
622
  --wb-semanticColor-action-secondary-progressive-default-background: #EBF1FD;
347
623
  --wb-semanticColor-action-secondary-progressive-default-foreground: #5753FA;
348
624
  --wb-semanticColor-action-secondary-progressive-hover-border: #6E78FF;
349
- --wb-semanticColor-action-secondary-progressive-hover-background: #DFEAFF;
625
+ --wb-semanticColor-action-secondary-progressive-hover-background: #EBF1FD;
350
626
  --wb-semanticColor-action-secondary-progressive-hover-foreground: #5753FA;
351
627
  --wb-semanticColor-action-secondary-progressive-press-border: #6E78FF;
352
- --wb-semanticColor-action-secondary-progressive-press-background: #DFEAFF;
628
+ --wb-semanticColor-action-secondary-progressive-press-background: #EBF1FD;
353
629
  --wb-semanticColor-action-secondary-progressive-press-foreground: #5753FA;
354
630
  --wb-semanticColor-action-secondary-destructive-default-border: #E22D2D;
355
631
  --wb-semanticColor-action-secondary-destructive-default-background: #FEF4F4;
356
632
  --wb-semanticColor-action-secondary-destructive-default-foreground: #BE2626;
357
633
  --wb-semanticColor-action-secondary-destructive-hover-border: #8E1C1C;
358
- --wb-semanticColor-action-secondary-destructive-hover-background: #FDDFDF;
634
+ --wb-semanticColor-action-secondary-destructive-hover-background: #FEF4F4;
359
635
  --wb-semanticColor-action-secondary-destructive-hover-foreground: #8E1C1C;
360
636
  --wb-semanticColor-action-secondary-destructive-press-border: #8E1C1C;
361
- --wb-semanticColor-action-secondary-destructive-press-background: #FDDFDF;
637
+ --wb-semanticColor-action-secondary-destructive-press-background: #FEF4F4;
362
638
  --wb-semanticColor-action-secondary-destructive-press-foreground: #8E1C1C;
363
639
  --wb-semanticColor-action-secondary-neutral-default-border: #CBCBCD;
364
640
  --wb-semanticColor-action-secondary-neutral-default-background: #FFFFFF;
@@ -401,7 +677,115 @@
401
677
  --wb-semanticColor-action-tertiary-neutral-press-foreground: #191918;
402
678
  --wb-semanticColor-action-tertiary-disabled-border: transparent;
403
679
  --wb-semanticColor-action-tertiary-disabled-background: transparent;
404
- --wb-semanticColor-action-tertiary-disabled-foreground: #B5B6B9;
680
+ --wb-semanticColor-action-tertiary-disabled-foreground: #CBCBCD;
681
+ --wb-semanticColor-chonky-progressive-background-primary-rest: #5753FA;
682
+ --wb-semanticColor-chonky-progressive-background-primary-hover: #5753FA;
683
+ --wb-semanticColor-chonky-progressive-background-primary-press: #5753FA;
684
+ --wb-semanticColor-chonky-progressive-background-primary-selected: #5753FA;
685
+ --wb-semanticColor-chonky-progressive-background-secondary-rest: #EBF1FD;
686
+ --wb-semanticColor-chonky-progressive-background-secondary-hover: #EBF1FD;
687
+ --wb-semanticColor-chonky-progressive-background-secondary-press: #EBF1FD;
688
+ --wb-semanticColor-chonky-progressive-background-secondary-selected: #EBF1FD;
689
+ --wb-semanticColor-chonky-progressive-background-tertiary-rest: transparent;
690
+ --wb-semanticColor-chonky-progressive-background-tertiary-hover: transparent;
691
+ --wb-semanticColor-chonky-progressive-background-tertiary-press: transparent;
692
+ --wb-semanticColor-chonky-progressive-background-tertiary-selected: transparent;
693
+ --wb-semanticColor-chonky-progressive-border-primary-rest: transparent;
694
+ --wb-semanticColor-chonky-progressive-border-primary-hover: transparent;
695
+ --wb-semanticColor-chonky-progressive-border-primary-press: transparent;
696
+ --wb-semanticColor-chonky-progressive-border-primary-selected: transparent;
697
+ --wb-semanticColor-chonky-progressive-border-secondary-rest: #BFCAFF;
698
+ --wb-semanticColor-chonky-progressive-border-secondary-hover: #BFCAFF;
699
+ --wb-semanticColor-chonky-progressive-border-secondary-press: #BFCAFF;
700
+ --wb-semanticColor-chonky-progressive-border-secondary-selected: #BFCAFF;
701
+ --wb-semanticColor-chonky-progressive-border-tertiary-rest: transparent;
702
+ --wb-semanticColor-chonky-progressive-border-tertiary-hover: #CBCBCD;
703
+ --wb-semanticColor-chonky-progressive-border-tertiary-press: #CBCBCD;
704
+ --wb-semanticColor-chonky-progressive-border-tertiary-selected: #BFCAFF;
705
+ --wb-semanticColor-chonky-progressive-foreground-primary-rest: #FFFFFF;
706
+ --wb-semanticColor-chonky-progressive-foreground-primary-hover: #FFFFFF;
707
+ --wb-semanticColor-chonky-progressive-foreground-primary-press: #FFFFFF;
708
+ --wb-semanticColor-chonky-progressive-foreground-primary-selected: #FFFFFF;
709
+ --wb-semanticColor-chonky-progressive-foreground-secondary-rest: #5753FA;
710
+ --wb-semanticColor-chonky-progressive-foreground-secondary-hover: #5753FA;
711
+ --wb-semanticColor-chonky-progressive-foreground-secondary-press: #5753FA;
712
+ --wb-semanticColor-chonky-progressive-foreground-secondary-selected: #5753FA;
713
+ --wb-semanticColor-chonky-progressive-foreground-tertiary-rest: #5753FA;
714
+ --wb-semanticColor-chonky-progressive-foreground-tertiary-hover: #5753FA;
715
+ --wb-semanticColor-chonky-progressive-foreground-tertiary-press: #5753FA;
716
+ --wb-semanticColor-chonky-progressive-foreground-tertiary-selected: #5753FA;
717
+ --wb-semanticColor-chonky-progressive-shadow-primary-rest: #363498;
718
+ --wb-semanticColor-chonky-progressive-shadow-primary-hover: #363498;
719
+ --wb-semanticColor-chonky-progressive-shadow-primary-press: #363498;
720
+ --wb-semanticColor-chonky-progressive-shadow-primary-selected: #363498;
721
+ --wb-semanticColor-chonky-progressive-shadow-secondary-rest: #BFCAFF;
722
+ --wb-semanticColor-chonky-progressive-shadow-secondary-hover: #BFCAFF;
723
+ --wb-semanticColor-chonky-progressive-shadow-secondary-press: #BFCAFF;
724
+ --wb-semanticColor-chonky-progressive-shadow-secondary-selected: #BFCAFF;
725
+ --wb-semanticColor-chonky-progressive-shadow-tertiary-rest: transparent;
726
+ --wb-semanticColor-chonky-progressive-shadow-tertiary-hover: #CBCBCD;
727
+ --wb-semanticColor-chonky-progressive-shadow-tertiary-press: #CBCBCD;
728
+ --wb-semanticColor-chonky-progressive-shadow-tertiary-selected: #BFCAFF;
729
+ --wb-semanticColor-chonky-neutral-background-primary-rest: #75767C;
730
+ --wb-semanticColor-chonky-neutral-background-primary-hover: #75767C;
731
+ --wb-semanticColor-chonky-neutral-background-primary-press: #75767C;
732
+ --wb-semanticColor-chonky-neutral-background-primary-selected: #75767C;
733
+ --wb-semanticColor-chonky-neutral-background-secondary-rest: #FFFFFF;
734
+ --wb-semanticColor-chonky-neutral-background-secondary-hover: #FFFFFF;
735
+ --wb-semanticColor-chonky-neutral-background-secondary-press: #FFFFFF;
736
+ --wb-semanticColor-chonky-neutral-background-secondary-selected: #FFFFFF;
737
+ --wb-semanticColor-chonky-neutral-background-tertiary-rest: transparent;
738
+ --wb-semanticColor-chonky-neutral-background-tertiary-hover: transparent;
739
+ --wb-semanticColor-chonky-neutral-background-tertiary-press: transparent;
740
+ --wb-semanticColor-chonky-neutral-background-tertiary-selected: transparent;
741
+ --wb-semanticColor-chonky-neutral-border-primary-rest: transparent;
742
+ --wb-semanticColor-chonky-neutral-border-primary-hover: transparent;
743
+ --wb-semanticColor-chonky-neutral-border-primary-press: transparent;
744
+ --wb-semanticColor-chonky-neutral-border-primary-selected: transparent;
745
+ --wb-semanticColor-chonky-neutral-border-secondary-rest: #CBCBCD;
746
+ --wb-semanticColor-chonky-neutral-border-secondary-hover: #CBCBCD;
747
+ --wb-semanticColor-chonky-neutral-border-secondary-press: #CBCBCD;
748
+ --wb-semanticColor-chonky-neutral-border-secondary-selected: #CBCBCD;
749
+ --wb-semanticColor-chonky-neutral-border-tertiary-rest: transparent;
750
+ --wb-semanticColor-chonky-neutral-border-tertiary-hover: #CBCBCD;
751
+ --wb-semanticColor-chonky-neutral-border-tertiary-press: #CBCBCD;
752
+ --wb-semanticColor-chonky-neutral-border-tertiary-selected: transparent;
753
+ --wb-semanticColor-chonky-neutral-foreground-primary-rest: #FFFFFF;
754
+ --wb-semanticColor-chonky-neutral-foreground-primary-hover: #FFFFFF;
755
+ --wb-semanticColor-chonky-neutral-foreground-primary-press: #FFFFFF;
756
+ --wb-semanticColor-chonky-neutral-foreground-primary-selected: #FFFFFF;
757
+ --wb-semanticColor-chonky-neutral-foreground-secondary-rest: #75767C;
758
+ --wb-semanticColor-chonky-neutral-foreground-secondary-hover: #75767C;
759
+ --wb-semanticColor-chonky-neutral-foreground-secondary-press: #75767C;
760
+ --wb-semanticColor-chonky-neutral-foreground-secondary-selected: #75767C;
761
+ --wb-semanticColor-chonky-neutral-foreground-tertiary-rest: #4A4C53;
762
+ --wb-semanticColor-chonky-neutral-foreground-tertiary-hover: #4A4C53;
763
+ --wb-semanticColor-chonky-neutral-foreground-tertiary-press: #4A4C53;
764
+ --wb-semanticColor-chonky-neutral-foreground-tertiary-selected: #4A4C53;
765
+ --wb-semanticColor-chonky-neutral-shadow-primary-rest: #4A4C53;
766
+ --wb-semanticColor-chonky-neutral-shadow-primary-hover: #4A4C53;
767
+ --wb-semanticColor-chonky-neutral-shadow-primary-press: #4A4C53;
768
+ --wb-semanticColor-chonky-neutral-shadow-primary-selected: #4A4C53;
769
+ --wb-semanticColor-chonky-neutral-shadow-secondary-rest: #CBCBCD;
770
+ --wb-semanticColor-chonky-neutral-shadow-secondary-hover: #CBCBCD;
771
+ --wb-semanticColor-chonky-neutral-shadow-secondary-press: #CBCBCD;
772
+ --wb-semanticColor-chonky-neutral-shadow-secondary-selected: #CBCBCD;
773
+ --wb-semanticColor-chonky-neutral-shadow-tertiary-rest: transparent;
774
+ --wb-semanticColor-chonky-neutral-shadow-tertiary-hover: #CBCBCD;
775
+ --wb-semanticColor-chonky-neutral-shadow-tertiary-press: #CBCBCD;
776
+ --wb-semanticColor-chonky-neutral-shadow-tertiary-selected: #BFCAFF;
777
+ --wb-semanticColor-chonky-disabled-background-primary: #EDEDEE;
778
+ --wb-semanticColor-chonky-disabled-background-secondary: #EDEDEE;
779
+ --wb-semanticColor-chonky-disabled-background-tertiary: transparent;
780
+ --wb-semanticColor-chonky-disabled-border-primary: transparent;
781
+ --wb-semanticColor-chonky-disabled-border-secondary: #CBCBCD;
782
+ --wb-semanticColor-chonky-disabled-border-tertiary: transparent;
783
+ --wb-semanticColor-chonky-disabled-foreground-primary: #B5B6B9;
784
+ --wb-semanticColor-chonky-disabled-foreground-secondary: #B5B6B9;
785
+ --wb-semanticColor-chonky-disabled-foreground-tertiary: #B5B6B9;
786
+ --wb-semanticColor-chonky-disabled-shadow-primary: #CBCBCD;
787
+ --wb-semanticColor-chonky-disabled-shadow-secondary: #CBCBCD;
788
+ --wb-semanticColor-chonky-disabled-shadow-tertiary: transparent;
405
789
  --wb-semanticColor-input-default-border: #909296;
406
790
  --wb-semanticColor-input-default-background: #ffffff;
407
791
  --wb-semanticColor-input-default-foreground: #21242c;
@@ -449,6 +833,10 @@
449
833
  --wb-semanticColor-icon-action: #1865f2;
450
834
  --wb-semanticColor-icon-destructive: #d92916;
451
835
  --wb-semanticColor-icon-disabled: #b8b9bb;
836
+ --wb-semanticColor-link-rest: #5753FA;
837
+ --wb-semanticColor-link-hover: #363498;
838
+ --wb-semanticColor-link-press: #363498;
839
+ --wb-semanticColor-link-disabled: #CBCBCD;
452
840
  --wb-semanticColor-khanmigo-primary: #5f1e5c;
453
841
  --wb-semanticColor-khanmigo-secondary: #f2edf2;
454
842
  --wb-semanticColor-mastery-primary: #9059ff;