@khanacademy/wonder-blocks-tokens 16.5.0 → 16.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/.turbo/turbo-build$colon$css.log +1 -1
  2. package/CHANGELOG.md +21 -0
  3. package/dist/css/index.css +87 -78
  4. package/dist/css/vars.css +70 -49
  5. package/dist/es/index.js +2 -2
  6. package/dist/index.d.ts +23 -0
  7. package/dist/index.js +2 -2
  8. package/dist/theme/default.d.ts +23 -0
  9. package/dist/theme/semantic/semantic-color-syl-dark.d.ts +23 -0
  10. package/dist/theme/semantic/semantic-color-thunderblocks.d.ts +23 -0
  11. package/dist/theme/semantic/semantic-color.d.ts +23 -0
  12. package/dist/theme/syl-dark.d.ts +23 -0
  13. package/dist/theme/thunderblocks.d.ts +23 -0
  14. package/dist/tokens/theme.d.ts +23 -0
  15. package/package.json +1 -1
package/.turbo/turbo-build$colon$css.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-tokens@16.5.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
2
+ > @khanacademy/wonder-blocks-tokens@16.7.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,26 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 16.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 9773405: Add `core.shadow.chonky.disabled.subtle/default` tokens and use for `chonky.disabled.*` tokens. Update semantic color core tokens in `syl-dark` related to chonky tokens and border neutral tokens
8
+
9
+ ### Patch Changes
10
+
11
+ - 0907f64: Update yellow_01 and green_01 primitives. Update syl-dark background.success/warning.subtle to address color contrast issues with interactive elements in banners
12
+ - 9773405: ActivityIconButton: Add component theme token for the label to accommodate syl-dark
13
+ - 022e775: SYL Dark - Update disabled semantic color core tokens
14
+ - e181c15: syl-dark theme: Update `core.background.neutral.default` to `gray_30`
15
+ - c033245: SYL Dark tokens: Update background.base.subtle/default
16
+ - a2bbc0a: SYL Dark semantic color tokens: Use TB tokens for `input.checked`
17
+
18
+ ## 16.6.0
19
+
20
+ ### Minor Changes
21
+
22
+ - a676ce6: Add `learning.characters.flesh` semantic color tokens (`blue`, `cyan`, `green`, `magenta`, `orange` × `subtle`/`default`/`strong`) for use with learning characters, sourced from the Foundations Figma library.
23
+
3
24
  ## 16.5.0
4
25
 
5
26
  ### Minor Changes
package/dist/css/index.css CHANGED
@@ -26,10 +26,10 @@
26
26
  --wb-c-banner-root-border-width-inlineEnd: var(--wb-border-width-thin);
27
27
  --wb-c-banner-root-border-width-blockStart: var(--wb-border-width-thin);
28
28
  --wb-c-banner-root-border-width-blockEnd: var(--wb-border-width-thin);
29
- --wb-c-banner-root-color-border-info: var(--wb-semanticColor-feedback-info-subtle-border);
30
- --wb-c-banner-root-color-border-success: var(--wb-semanticColor-feedback-success-subtle-border);
31
- --wb-c-banner-root-color-border-warning: var(--wb-semanticColor-feedback-warning-subtle-border);
32
- --wb-c-banner-root-color-border-critical: var(--wb-semanticColor-feedback-critical-subtle-border);
29
+ --wb-c-banner-root-color-border-info: var(--wb-semanticColor-core-transparent);
30
+ --wb-c-banner-root-color-border-success: var(--wb-semanticColor-core-transparent);
31
+ --wb-c-banner-root-color-border-warning: var(--wb-semanticColor-core-transparent);
32
+ --wb-c-banner-root-color-border-critical: var(--wb-semanticColor-core-transparent);
33
33
  --wb-c-banner-root-layout-paddingInlineStart: var(--wb-sizing-size_160);
34
34
  --wb-c-banner-root-layout-gap: var(--wb-sizing-size_120);
35
35
  --wb-c-banner-icon-color-info: var(--wb-semanticColor-feedback-info-subtle-icon);
@@ -49,10 +49,10 @@
49
49
  --wb-c-banner-root-border-width-inlineEnd: var(--wb-border-width-thin);
50
50
  --wb-c-banner-root-border-width-blockStart: var(--wb-border-width-thin);
51
51
  --wb-c-banner-root-border-width-blockEnd: var(--wb-border-width-thin);
52
- --wb-c-banner-root-color-border-info: var(--wb-semanticColor-feedback-info-subtle-border);
53
- --wb-c-banner-root-color-border-success: var(--wb-semanticColor-feedback-success-subtle-border);
54
- --wb-c-banner-root-color-border-warning: var(--wb-semanticColor-feedback-warning-subtle-border);
55
- --wb-c-banner-root-color-border-critical: var(--wb-semanticColor-feedback-critical-subtle-border);
52
+ --wb-c-banner-root-color-border-info: var(--wb-semanticColor-core-transparent);
53
+ --wb-c-banner-root-color-border-success: var(--wb-semanticColor-core-transparent);
54
+ --wb-c-banner-root-color-border-warning: var(--wb-semanticColor-core-transparent);
55
+ --wb-c-banner-root-color-border-critical: var(--wb-semanticColor-core-transparent);
56
56
  --wb-c-banner-root-layout-paddingInlineStart: var(--wb-sizing-size_160);
57
57
  --wb-c-banner-root-layout-gap: var(--wb-sizing-size_120);
58
58
  --wb-c-banner-icon-color-info: var(--wb-semanticColor-feedback-info-subtle-icon);
@@ -277,7 +277,6 @@
277
277
  --wb-c-dropdown-listbox-shadow-default: var(--wb-boxShadow-mid);
278
278
  --wb-c-dropdown-opener-border-width-error: var(--wb-border-width-thin);
279
279
  --wb-c-dropdown-opener-border-radius-rest: var(--wb-border-radius-radius_040);
280
- --wb-c-dropdown-opener-color-icon: var(--wb-semanticColor-core-foreground-neutral-default);
281
280
  --wb-c-dropdown-opener-layout-padding-inline: var(--wb-sizing-size_160);
282
281
  --wb-c-dropdown-opener-layout-padding-inlineStart: var(--wb-sizing-size_160);
283
282
  --wb-c-dropdown-opener-layout-padding-inlineEnd: var(--wb-sizing-size_120);
@@ -294,7 +293,6 @@
294
293
  --wb-c-dropdown-listbox-shadow-default: var(--wb-boxShadow-low);
295
294
  --wb-c-dropdown-opener-border-width-error: var(--wb-border-width-medium);
296
295
  --wb-c-dropdown-opener-border-radius-rest: var(--wb-border-radius-radius_080);
297
- --wb-c-dropdown-opener-color-icon: var(--wb-semanticColor-core-foreground-instructive-default);
298
296
  --wb-c-dropdown-opener-layout-padding-inline: var(--wb-sizing-size_120);
299
297
  --wb-c-dropdown-opener-layout-padding-inlineStart: var(--wb-sizing-size_120);
300
298
  --wb-c-dropdown-opener-layout-padding-inlineEnd: var(--wb-sizing-size_120);
@@ -311,7 +309,6 @@
311
309
  --wb-c-dropdown-listbox-shadow-default: var(--wb-boxShadow-low);
312
310
  --wb-c-dropdown-opener-border-width-error: var(--wb-border-width-medium);
313
311
  --wb-c-dropdown-opener-border-radius-rest: var(--wb-border-radius-radius_080);
314
- --wb-c-dropdown-opener-color-icon: var(--wb-semanticColor-core-foreground-instructive-default);
315
312
  --wb-c-dropdown-opener-layout-padding-inline: var(--wb-sizing-size_120);
316
313
  --wb-c-dropdown-opener-layout-padding-inlineStart: var(--wb-sizing-size_120);
317
314
  --wb-c-dropdown-opener-layout-padding-inlineEnd: var(--wb-sizing-size_120);
@@ -370,7 +367,8 @@
370
367
  --wb-c-icon-button-iconButton-icon-sizing-xsmall: var(--wb-sizing-size_160);
371
368
  --wb-c-icon-button-iconButton-icon-sizing-small: var(--wb-sizing-size_240);
372
369
  --wb-c-icon-button-iconButton-icon-sizing-medium: var(--wb-sizing-size_240);
373
- --wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_240);}
370
+ --wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_240);
371
+ --wb-c-icon-button-activityIconButton-label-color-progressive: var(--wb-semanticColor-core-foreground-instructive-default);}
374
372
 
375
373
  [data-wb-theme='syl-dark'] {--wb-c-icon-button-iconButton-root-border-offset-primary: var(--wb-border-width-medium);
376
374
  --wb-c-icon-button-iconButton-root-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
@@ -394,7 +392,8 @@
394
392
  --wb-c-icon-button-iconButton-icon-sizing-xsmall: var(--wb-sizing-size_120);
395
393
  --wb-c-icon-button-iconButton-icon-sizing-small: var(--wb-sizing-size_120);
396
394
  --wb-c-icon-button-iconButton-icon-sizing-medium: var(--wb-sizing-size_180);
397
- --wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);}
395
+ --wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);
396
+ --wb-c-icon-button-activityIconButton-label-color-progressive: var(--wb-semanticColor-core-foreground-neutral-strong);}
398
397
 
399
398
  [data-wb-theme='thunderblocks'] {--wb-c-icon-button-iconButton-root-border-offset-primary: var(--wb-border-width-medium);
400
399
  --wb-c-icon-button-iconButton-root-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
@@ -418,7 +417,8 @@
418
417
  --wb-c-icon-button-iconButton-icon-sizing-xsmall: var(--wb-sizing-size_120);
419
418
  --wb-c-icon-button-iconButton-icon-sizing-small: var(--wb-sizing-size_120);
420
419
  --wb-c-icon-button-iconButton-icon-sizing-medium: var(--wb-sizing-size_180);
421
- --wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);}:root, [data-wb-theme='default'] {--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithDescription: var(--wb-sizing-size_040);
420
+ --wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);
421
+ --wb-c-icon-button-activityIconButton-label-color-progressive: var(--wb-semanticColor-core-foreground-instructive-default);}:root, [data-wb-theme='default'] {--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithDescription: var(--wb-sizing-size_040);
422
422
  --wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithNoDescription: var(--wb-sizing-size_120);
423
423
  --wb-c-labeled-field-root-layout-spacingBetweenHelperText: var(--wb-sizing-size_120);
424
424
  --wb-c-labeled-field-label-color-error-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
@@ -520,12 +520,8 @@
520
520
  --wb-c-switch-slider-sizing-width: var(--wb-sizing-size_200);
521
521
  --wb-c-switch-slider-position-top: var(--wb-sizing-size_020);
522
522
  --wb-c-switch-slider-position-left: var(--wb-sizing-size_020);
523
- --wb-c-switch-slider-transform-default: translateX(var(--wb-sizing-size_160));
524
- --wb-c-switch-slider-transform-transition: transform 0.15s ease-in-out;
525
523
  --wb-c-switch-icon-position-top: var(--wb-sizing-size_040);
526
- --wb-c-switch-icon-position-left: var(--wb-sizing-size_040);
527
- --wb-c-switch-icon-transform-default: translateX(var(--wb-sizing-size_160));
528
- --wb-c-switch-icon-transform-transition: transform 0.15s ease-in-out;}
524
+ --wb-c-switch-icon-position-left: var(--wb-sizing-size_040);}
529
525
 
530
526
  [data-wb-theme='syl-dark'] {--wb-c-switch-root-border-radius-default: var(--wb-border-radius-radius_240);
531
527
  --wb-c-switch-root-border-radius-hover: var(--wb-border-radius-radius_120);
@@ -536,12 +532,8 @@
536
532
  --wb-c-switch-slider-sizing-width: var(--wb-sizing-size_200);
537
533
  --wb-c-switch-slider-position-top: var(--wb-sizing-size_020);
538
534
  --wb-c-switch-slider-position-left: var(--wb-sizing-size_020);
539
- --wb-c-switch-slider-transform-default: translateX(var(--wb-sizing-size_200));
540
- --wb-c-switch-slider-transform-transition: transform 0.15s ease-in-out;
541
535
  --wb-c-switch-icon-position-top: var(--wb-sizing-size_040);
542
- --wb-c-switch-icon-position-left: var(--wb-sizing-size_040);
543
- --wb-c-switch-icon-transform-default: translateX(var(--wb-sizing-size_200));
544
- --wb-c-switch-icon-transform-transition: transform 0.15s ease-in-out;}
536
+ --wb-c-switch-icon-position-left: var(--wb-sizing-size_040);}
545
537
 
546
538
  [data-wb-theme='thunderblocks'] {--wb-c-switch-root-border-radius-default: var(--wb-border-radius-radius_240);
547
539
  --wb-c-switch-root-border-radius-hover: var(--wb-border-radius-radius_120);
@@ -552,12 +544,8 @@
552
544
  --wb-c-switch-slider-sizing-width: var(--wb-sizing-size_200);
553
545
  --wb-c-switch-slider-position-top: var(--wb-sizing-size_020);
554
546
  --wb-c-switch-slider-position-left: var(--wb-sizing-size_020);
555
- --wb-c-switch-slider-transform-default: translateX(var(--wb-sizing-size_200));
556
- --wb-c-switch-slider-transform-transition: transform 0.15s ease-in-out;
557
547
  --wb-c-switch-icon-position-top: var(--wb-sizing-size_040);
558
- --wb-c-switch-icon-position-left: var(--wb-sizing-size_040);
559
- --wb-c-switch-icon-transform-default: translateX(var(--wb-sizing-size_200));
560
- --wb-c-switch-icon-transform-transition: transform 0.15s ease-in-out;}:root, [data-wb-theme='default'] {--wb-border-radius-radius_0: 0px;
548
+ --wb-c-switch-icon-position-left: var(--wb-sizing-size_040);}:root, [data-wb-theme='default'] {--wb-border-radius-radius_0: 0px;
561
549
  --wb-border-radius-radius_010: 1px;
562
550
  --wb-border-radius-radius_040: 4px;
563
551
  --wb-border-radius-radius_080: 8px;
@@ -685,6 +673,8 @@
685
673
  --wb-semanticColor-core-shadow-chonky-neutral-subtle: #b8b9bb;
686
674
  --wb-semanticColor-core-shadow-chonky-neutral-default: #909296;
687
675
  --wb-semanticColor-core-shadow-chonky-neutral-strong: #21242c;
676
+ --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
677
+ --wb-semanticColor-core-shadow-chonky-disabled-default: #b8b9bb;
688
678
  --wb-semanticColor-learning-math-foreground-blue: #3D7586;
689
679
  --wb-semanticColor-learning-math-foreground-gold: #946700;
690
680
  --wb-semanticColor-learning-math-foreground-green: #447A53;
@@ -733,6 +723,11 @@
733
723
  --wb-semanticColor-learning-shadow-progress-notStarted-default: #717279;
734
724
  --wb-semanticColor-learning-shadow-progress-attempted-default: #FCB706;
735
725
  --wb-semanticColor-learning-shadow-progress-complete-default: #579F6C;
726
+ --wb-semanticColor-learning-characters-flesh-blue-default: #5753FA;
727
+ --wb-semanticColor-learning-characters-flesh-cyan-default: #28A9FF;
728
+ --wb-semanticColor-learning-characters-flesh-green-default: #579F6C;
729
+ --wb-semanticColor-learning-characters-flesh-magenta-default: #E83FA4;
730
+ --wb-semanticColor-learning-characters-flesh-orange-default: #F8551A;
736
731
  --wb-semanticColor-action-primary-progressive-default-border: transparent;
737
732
  --wb-semanticColor-action-primary-progressive-default-background: #1865f2;
738
733
  --wb-semanticColor-action-primary-progressive-default-foreground: #ffffff;
@@ -1096,8 +1091,8 @@
1096
1091
  --wb-semanticColor-core-border-instructive-subtle: #5753FA;
1097
1092
  --wb-semanticColor-core-border-instructive-default: #6C82FF;
1098
1093
  --wb-semanticColor-core-border-instructive-strong: #8DA2FF;
1099
- --wb-semanticColor-core-border-neutral-subtle: #8A8B90;
1100
- --wb-semanticColor-core-border-neutral-default: #A0A1A4;
1094
+ --wb-semanticColor-core-border-neutral-subtle: #4A4C53;
1095
+ --wb-semanticColor-core-border-neutral-default: #8A8B90;
1101
1096
  --wb-semanticColor-core-border-neutral-strong: #CBCBCD;
1102
1097
  --wb-semanticColor-core-border-critical-subtle: #BE2626;
1103
1098
  --wb-semanticColor-core-border-critical-default: #E22D2D;
@@ -1112,27 +1107,27 @@
1112
1107
  --wb-semanticColor-core-border-disabled-default: #4A4C53;
1113
1108
  --wb-semanticColor-core-border-disabled-strong: #717279;
1114
1109
  --wb-semanticColor-core-border-knockout-default: #151521;
1115
- --wb-semanticColor-core-background-base-subtle: #252531;
1116
- --wb-semanticColor-core-background-base-default: #151521;
1110
+ --wb-semanticColor-core-background-base-subtle: #151521;
1111
+ --wb-semanticColor-core-background-base-default: #252531;
1117
1112
  --wb-semanticColor-core-background-base-strong: #FFFFFF;
1118
1113
  --wb-semanticColor-core-background-instructive-subtle: #222149;
1119
1114
  --wb-semanticColor-core-background-instructive-default: #5753FA;
1120
1115
  --wb-semanticColor-core-background-instructive-strong: #8DA2FF;
1121
1116
  --wb-semanticColor-core-background-neutral-subtle: #4A4C53;
1122
- --wb-semanticColor-core-background-neutral-default: #717279;
1117
+ --wb-semanticColor-core-background-neutral-default: #8A8B90;
1123
1118
  --wb-semanticColor-core-background-neutral-strong: #EDEDEE;
1124
1119
  --wb-semanticColor-core-background-critical-subtle: #3B141A;
1125
1120
  --wb-semanticColor-core-background-critical-default: #E22D2D;
1126
1121
  --wb-semanticColor-core-background-critical-strong: #F97F7F;
1127
- --wb-semanticColor-core-background-success-subtle: #24432D;
1122
+ --wb-semanticColor-core-background-success-subtle: #1A2924;
1128
1123
  --wb-semanticColor-core-background-success-default: #579F6C;
1129
1124
  --wb-semanticColor-core-background-success-strong: #97D39E;
1130
- --wb-semanticColor-core-background-warning-subtle: #5F4500;
1125
+ --wb-semanticColor-core-background-warning-subtle: #312405;
1131
1126
  --wb-semanticColor-core-background-warning-default: #FCB706;
1132
1127
  --wb-semanticColor-core-background-warning-strong: #FDD673;
1133
1128
  --wb-semanticColor-core-background-disabled-subtle: transparent;
1134
- --wb-semanticColor-core-background-disabled-default: #252531;
1135
- --wb-semanticColor-core-background-disabled-strong: #717279;
1129
+ --wb-semanticColor-core-background-disabled-default: #4A4C53;
1130
+ --wb-semanticColor-core-background-disabled-strong: #4A4C53;
1136
1131
  --wb-semanticColor-core-background-overlay-default: rgba(21,21,33,0.80);
1137
1132
  --wb-semanticColor-core-foreground-instructive-subtle: #4340D0;
1138
1133
  --wb-semanticColor-core-foreground-instructive-default: #6C82FF;
@@ -1150,8 +1145,8 @@
1150
1145
  --wb-semanticColor-core-foreground-warning-default: #FCB706;
1151
1146
  --wb-semanticColor-core-foreground-warning-strong: #FEF1D0;
1152
1147
  --wb-semanticColor-core-foreground-disabled-subtle: #4A4C53;
1153
- --wb-semanticColor-core-foreground-disabled-default: #4A4C53;
1154
- --wb-semanticColor-core-foreground-disabled-strong: #717279;
1148
+ --wb-semanticColor-core-foreground-disabled-default: #717279;
1149
+ --wb-semanticColor-core-foreground-disabled-strong: #8A8B90;
1155
1150
  --wb-semanticColor-core-foreground-knockout-default: #151521;
1156
1151
  --wb-semanticColor-core-shadow-transparent-low: rgba(21,21,33,0.60);
1157
1152
  --wb-semanticColor-core-shadow-transparent-mid: rgba(21,21,33,0.60);
@@ -1163,6 +1158,8 @@
1163
1158
  --wb-semanticColor-core-shadow-chonky-neutral-subtle: #4A4C53;
1164
1159
  --wb-semanticColor-core-shadow-chonky-neutral-default: #8A8B90;
1165
1160
  --wb-semanticColor-core-shadow-chonky-neutral-strong: #B5B6B9;
1161
+ --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
1162
+ --wb-semanticColor-core-shadow-chonky-disabled-default: #252531;
1166
1163
  --wb-semanticColor-learning-math-foreground-blue: #87CBFC;
1167
1164
  --wb-semanticColor-learning-math-foreground-gold: #FCC539;
1168
1165
  --wb-semanticColor-learning-math-foreground-green: #97D39E;
@@ -1211,6 +1208,11 @@
1211
1208
  --wb-semanticColor-learning-shadow-progress-notStarted-default: #4A4C53;
1212
1209
  --wb-semanticColor-learning-shadow-progress-attempted-default: #D69900;
1213
1210
  --wb-semanticColor-learning-shadow-progress-complete-default: #3C6D4A;
1211
+ --wb-semanticColor-learning-characters-flesh-blue-default: #5753FA;
1212
+ --wb-semanticColor-learning-characters-flesh-cyan-default: #28A9FF;
1213
+ --wb-semanticColor-learning-characters-flesh-green-default: #579F6C;
1214
+ --wb-semanticColor-learning-characters-flesh-magenta-default: #E83FA4;
1215
+ --wb-semanticColor-learning-characters-flesh-orange-default: #F8551A;
1214
1216
  --wb-semanticColor-action-primary-progressive-default-border: #6C82FF;
1215
1217
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
1216
1218
  --wb-semanticColor-action-primary-progressive-default-foreground: #FFFFFF;
@@ -1239,8 +1241,8 @@
1239
1241
  --wb-semanticColor-action-primary-neutral-press-background: #4A4C53;
1240
1242
  --wb-semanticColor-action-primary-neutral-press-foreground: #FFFFFF;
1241
1243
  --wb-semanticColor-action-primary-disabled-border: transparent;
1242
- --wb-semanticColor-action-primary-disabled-background: #717279;
1243
- --wb-semanticColor-action-primary-disabled-foreground: #4A4C53;
1244
+ --wb-semanticColor-action-primary-disabled-background: #4A4C53;
1245
+ --wb-semanticColor-action-primary-disabled-foreground: #717279;
1244
1246
  --wb-semanticColor-action-secondary-progressive-default-border: #5753FA;
1245
1247
  --wb-semanticColor-action-secondary-progressive-default-background: #222149;
1246
1248
  --wb-semanticColor-action-secondary-progressive-default-foreground: #6C82FF;
@@ -1259,7 +1261,7 @@
1259
1261
  --wb-semanticColor-action-secondary-destructive-press-border: #F97F7F;
1260
1262
  --wb-semanticColor-action-secondary-destructive-press-background: #3B141A;
1261
1263
  --wb-semanticColor-action-secondary-destructive-press-foreground: #F97F7F;
1262
- --wb-semanticColor-action-secondary-neutral-default-border: #A0A1A4;
1264
+ --wb-semanticColor-action-secondary-neutral-default-border: #8A8B90;
1263
1265
  --wb-semanticColor-action-secondary-neutral-default-background: transparent;
1264
1266
  --wb-semanticColor-action-secondary-neutral-default-foreground: #CBCBCD;
1265
1267
  --wb-semanticColor-action-secondary-neutral-hover-border: #CBCBCD;
@@ -1269,8 +1271,8 @@
1269
1271
  --wb-semanticColor-action-secondary-neutral-press-background: transparent;
1270
1272
  --wb-semanticColor-action-secondary-neutral-press-foreground: #EDEDEE;
1271
1273
  --wb-semanticColor-action-secondary-disabled-border: #4A4C53;
1272
- --wb-semanticColor-action-secondary-disabled-background: #252531;
1273
- --wb-semanticColor-action-secondary-disabled-foreground: #4A4C53;
1274
+ --wb-semanticColor-action-secondary-disabled-background: #4A4C53;
1275
+ --wb-semanticColor-action-secondary-disabled-foreground: #717279;
1274
1276
  --wb-semanticColor-action-tertiary-progressive-default-border: transparent;
1275
1277
  --wb-semanticColor-action-tertiary-progressive-default-background: transparent;
1276
1278
  --wb-semanticColor-action-tertiary-progressive-default-foreground: #6C82FF;
@@ -1322,8 +1324,8 @@
1322
1324
  --wb-semanticColor-chonky-progressive-border-secondary-press: #5753FA;
1323
1325
  --wb-semanticColor-chonky-progressive-border-secondary-selected: #5753FA;
1324
1326
  --wb-semanticColor-chonky-progressive-border-tertiary-rest: transparent;
1325
- --wb-semanticColor-chonky-progressive-border-tertiary-hover: #8A8B90;
1326
- --wb-semanticColor-chonky-progressive-border-tertiary-press: #8A8B90;
1327
+ --wb-semanticColor-chonky-progressive-border-tertiary-hover: #4A4C53;
1328
+ --wb-semanticColor-chonky-progressive-border-tertiary-press: #4A4C53;
1327
1329
  --wb-semanticColor-chonky-progressive-border-tertiary-selected: #5753FA;
1328
1330
  --wb-semanticColor-chonky-progressive-foreground-primary-rest: #FFFFFF;
1329
1331
  --wb-semanticColor-chonky-progressive-foreground-primary-hover: #FFFFFF;
@@ -1353,10 +1355,10 @@
1353
1355
  --wb-semanticColor-chonky-neutral-background-primary-hover: #717279;
1354
1356
  --wb-semanticColor-chonky-neutral-background-primary-press: #717279;
1355
1357
  --wb-semanticColor-chonky-neutral-background-primary-selected: #717279;
1356
- --wb-semanticColor-chonky-neutral-background-secondary-rest: #151521;
1357
- --wb-semanticColor-chonky-neutral-background-secondary-hover: #151521;
1358
- --wb-semanticColor-chonky-neutral-background-secondary-press: #151521;
1359
- --wb-semanticColor-chonky-neutral-background-secondary-selected: #151521;
1358
+ --wb-semanticColor-chonky-neutral-background-secondary-rest: #252531;
1359
+ --wb-semanticColor-chonky-neutral-background-secondary-hover: #252531;
1360
+ --wb-semanticColor-chonky-neutral-background-secondary-press: #252531;
1361
+ --wb-semanticColor-chonky-neutral-background-secondary-selected: #252531;
1360
1362
  --wb-semanticColor-chonky-neutral-background-tertiary-rest: transparent;
1361
1363
  --wb-semanticColor-chonky-neutral-background-tertiary-hover: transparent;
1362
1364
  --wb-semanticColor-chonky-neutral-background-tertiary-press: transparent;
@@ -1365,13 +1367,13 @@
1365
1367
  --wb-semanticColor-chonky-neutral-border-primary-hover: transparent;
1366
1368
  --wb-semanticColor-chonky-neutral-border-primary-press: transparent;
1367
1369
  --wb-semanticColor-chonky-neutral-border-primary-selected: transparent;
1368
- --wb-semanticColor-chonky-neutral-border-secondary-rest: #8A8B90;
1369
- --wb-semanticColor-chonky-neutral-border-secondary-hover: #8A8B90;
1370
- --wb-semanticColor-chonky-neutral-border-secondary-press: #8A8B90;
1370
+ --wb-semanticColor-chonky-neutral-border-secondary-rest: #4A4C53;
1371
+ --wb-semanticColor-chonky-neutral-border-secondary-hover: #4A4C53;
1372
+ --wb-semanticColor-chonky-neutral-border-secondary-press: #4A4C53;
1371
1373
  --wb-semanticColor-chonky-neutral-border-secondary-selected: #5753FA;
1372
1374
  --wb-semanticColor-chonky-neutral-border-tertiary-rest: transparent;
1373
- --wb-semanticColor-chonky-neutral-border-tertiary-hover: #8A8B90;
1374
- --wb-semanticColor-chonky-neutral-border-tertiary-press: #8A8B90;
1375
+ --wb-semanticColor-chonky-neutral-border-tertiary-hover: #4A4C53;
1376
+ --wb-semanticColor-chonky-neutral-border-tertiary-press: #4A4C53;
1375
1377
  --wb-semanticColor-chonky-neutral-border-tertiary-selected: #5753FA;
1376
1378
  --wb-semanticColor-chonky-neutral-foreground-primary-rest: #FFFFFF;
1377
1379
  --wb-semanticColor-chonky-neutral-foreground-primary-hover: #FFFFFF;
@@ -1397,40 +1399,40 @@
1397
1399
  --wb-semanticColor-chonky-neutral-shadow-tertiary-hover: #4A4C53;
1398
1400
  --wb-semanticColor-chonky-neutral-shadow-tertiary-press: #4A4C53;
1399
1401
  --wb-semanticColor-chonky-neutral-shadow-tertiary-selected: #5753FA;
1400
- --wb-semanticColor-chonky-disabled-background-primary: #717279;
1402
+ --wb-semanticColor-chonky-disabled-background-primary: #4A4C53;
1401
1403
  --wb-semanticColor-chonky-disabled-background-secondary: #4A4C53;
1402
1404
  --wb-semanticColor-chonky-disabled-background-tertiary: transparent;
1403
1405
  --wb-semanticColor-chonky-disabled-border-primary: transparent;
1404
- --wb-semanticColor-chonky-disabled-border-secondary: #8A8B90;
1406
+ --wb-semanticColor-chonky-disabled-border-secondary: #4A4C53;
1405
1407
  --wb-semanticColor-chonky-disabled-border-tertiary: transparent;
1406
- --wb-semanticColor-chonky-disabled-foreground-primary: #151521;
1407
- --wb-semanticColor-chonky-disabled-foreground-secondary: #CBCBCD;
1408
- --wb-semanticColor-chonky-disabled-foreground-tertiary: #CBCBCD;
1409
- --wb-semanticColor-chonky-disabled-shadow-primary: #B5B6B9;
1410
- --wb-semanticColor-chonky-disabled-shadow-secondary: #4A4C53;
1408
+ --wb-semanticColor-chonky-disabled-foreground-primary: #717279;
1409
+ --wb-semanticColor-chonky-disabled-foreground-secondary: #717279;
1410
+ --wb-semanticColor-chonky-disabled-foreground-tertiary: #4A4C53;
1411
+ --wb-semanticColor-chonky-disabled-shadow-primary: #252531;
1412
+ --wb-semanticColor-chonky-disabled-shadow-secondary: #252531;
1411
1413
  --wb-semanticColor-chonky-disabled-shadow-tertiary: transparent;
1412
- --wb-semanticColor-input-default-border: #A0A1A4;
1413
- --wb-semanticColor-input-default-background: #151521;
1414
+ --wb-semanticColor-input-default-border: #8A8B90;
1415
+ --wb-semanticColor-input-default-background: #252531;
1414
1416
  --wb-semanticColor-input-default-foreground: #EDEDEE;
1415
1417
  --wb-semanticColor-input-default-placeholder: #A0A1A4;
1416
1418
  --wb-semanticColor-input-checked-border: #6C82FF;
1417
1419
  --wb-semanticColor-input-checked-background: #5753FA;
1418
- --wb-semanticColor-input-checked-foreground: #151521;
1419
- --wb-semanticColor-input-disabled-border: #4A4C53;
1420
- --wb-semanticColor-input-disabled-background: #151521;
1421
- --wb-semanticColor-input-disabled-foreground: #717279;
1420
+ --wb-semanticColor-input-checked-foreground: #FFFFFF;
1421
+ --wb-semanticColor-input-disabled-border: #717279;
1422
+ --wb-semanticColor-input-disabled-background: #252531;
1423
+ --wb-semanticColor-input-disabled-foreground: #8A8B90;
1422
1424
  --wb-semanticColor-input-disabled-placeholder: #4A4C53;
1423
1425
  --wb-semanticColor-input-error-border: #E22D2D;
1424
- --wb-semanticColor-input-error-background: #151521;
1426
+ --wb-semanticColor-input-error-background: #252531;
1425
1427
  --wb-semanticColor-input-error-foreground: #EDEDEE;
1426
- --wb-semanticColor-input-readOnly-background: #252531;
1427
- --wb-semanticColor-input-readOnly-text: #CBCBCD;
1428
+ --wb-semanticColor-input-readOnly-background: #4A4C53;
1429
+ --wb-semanticColor-input-readOnly-text: #EDEDEE;
1428
1430
  --wb-semanticColor-input-readOnly-icon: #A0A1A4;
1429
1431
  --wb-semanticColor-status-critical-background: #3B141A;
1430
1432
  --wb-semanticColor-status-critical-foreground: #FBB1B1;
1431
- --wb-semanticColor-status-warning-background: #5F4500;
1433
+ --wb-semanticColor-status-warning-background: #312405;
1432
1434
  --wb-semanticColor-status-warning-foreground: #FEF1D0;
1433
- --wb-semanticColor-status-success-background: #24432D;
1435
+ --wb-semanticColor-status-success-background: #1A2924;
1434
1436
  --wb-semanticColor-status-success-foreground: #D5F3D5;
1435
1437
  --wb-semanticColor-status-notice-background: #222149;
1436
1438
  --wb-semanticColor-status-notice-foreground: #DFEAFF;
@@ -1441,7 +1443,7 @@
1441
1443
  --wb-semanticColor-link-rest: #6C82FF;
1442
1444
  --wb-semanticColor-link-hover: #DFEAFF;
1443
1445
  --wb-semanticColor-link-press: #DFEAFF;
1444
- --wb-semanticColor-link-disabled: #4A4C53;
1446
+ --wb-semanticColor-link-disabled: #717279;
1445
1447
  --wb-semanticColor-khanmigo-primary: #5f1e5c;
1446
1448
  --wb-semanticColor-khanmigo-secondary: #f2edf2;
1447
1449
  --wb-semanticColor-mastery-primary: #9059ff;
@@ -1453,7 +1455,7 @@
1453
1455
  --wb-semanticColor-feedback-info-strong-border: #CBCBCD;
1454
1456
  --wb-semanticColor-feedback-info-strong-text: #151521;
1455
1457
  --wb-semanticColor-feedback-info-strong-icon: #4340D0;
1456
- --wb-semanticColor-feedback-success-subtle-background: #24432D;
1458
+ --wb-semanticColor-feedback-success-subtle-background: #1A2924;
1457
1459
  --wb-semanticColor-feedback-success-subtle-border: #579F6C;
1458
1460
  --wb-semanticColor-feedback-success-subtle-icon: #72BB82;
1459
1461
  --wb-semanticColor-feedback-success-subtle-text: #D5F3D5;
@@ -1461,7 +1463,7 @@
1461
1463
  --wb-semanticColor-feedback-success-strong-border: #CBCBCD;
1462
1464
  --wb-semanticColor-feedback-success-strong-text: #151521;
1463
1465
  --wb-semanticColor-feedback-success-strong-icon: #3C6D4A;
1464
- --wb-semanticColor-feedback-warning-subtle-background: #5F4500;
1466
+ --wb-semanticColor-feedback-warning-subtle-background: #312405;
1465
1467
  --wb-semanticColor-feedback-warning-subtle-border: #FCB706;
1466
1468
  --wb-semanticColor-feedback-warning-subtle-icon: #FCB706;
1467
1469
  --wb-semanticColor-feedback-warning-subtle-text: #FEF1D0;
@@ -1478,7 +1480,7 @@
1478
1480
  --wb-semanticColor-feedback-critical-strong-text: #151521;
1479
1481
  --wb-semanticColor-feedback-critical-strong-icon: #E22D2D;
1480
1482
  --wb-semanticColor-feedback-neutral-subtle-background: #4A4C53;
1481
- --wb-semanticColor-feedback-neutral-subtle-border: #8A8B90;
1483
+ --wb-semanticColor-feedback-neutral-subtle-border: #4A4C53;
1482
1484
  --wb-semanticColor-feedback-neutral-subtle-icon: #CBCBCD;
1483
1485
  --wb-semanticColor-feedback-neutral-subtle-text: #EDEDEE;
1484
1486
  --wb-semanticColor-feedback-neutral-strong-background: #FFFFFF;
@@ -1641,6 +1643,8 @@
1641
1643
  --wb-semanticColor-core-shadow-chonky-neutral-subtle: #CBCBCD;
1642
1644
  --wb-semanticColor-core-shadow-chonky-neutral-default: #8A8B90;
1643
1645
  --wb-semanticColor-core-shadow-chonky-neutral-strong: #4A4C53;
1646
+ --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
1647
+ --wb-semanticColor-core-shadow-chonky-disabled-default: #CBCBCD;
1644
1648
  --wb-semanticColor-learning-math-foreground-blue: #20628F;
1645
1649
  --wb-semanticColor-learning-math-foreground-gold: #966B00;
1646
1650
  --wb-semanticColor-learning-math-foreground-green: #3C6D4A;
@@ -1689,6 +1693,11 @@
1689
1693
  --wb-semanticColor-learning-shadow-progress-notStarted-default: #717279;
1690
1694
  --wb-semanticColor-learning-shadow-progress-attempted-default: #FCB706;
1691
1695
  --wb-semanticColor-learning-shadow-progress-complete-default: #579F6C;
1696
+ --wb-semanticColor-learning-characters-flesh-blue-default: #5753FA;
1697
+ --wb-semanticColor-learning-characters-flesh-cyan-default: #28A9FF;
1698
+ --wb-semanticColor-learning-characters-flesh-green-default: #579F6C;
1699
+ --wb-semanticColor-learning-characters-flesh-magenta-default: #E83FA4;
1700
+ --wb-semanticColor-learning-characters-flesh-orange-default: #F8551A;
1692
1701
  --wb-semanticColor-action-primary-progressive-default-border: #6C82FF;
1693
1702
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
1694
1703
  --wb-semanticColor-action-primary-progressive-default-foreground: #FFFFFF;
package/dist/css/vars.css CHANGED
@@ -126,6 +126,8 @@
126
126
  --wb-semanticColor-core-shadow-chonky-neutral-subtle: #b8b9bb;
127
127
  --wb-semanticColor-core-shadow-chonky-neutral-default: #909296;
128
128
  --wb-semanticColor-core-shadow-chonky-neutral-strong: #21242c;
129
+ --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
130
+ --wb-semanticColor-core-shadow-chonky-disabled-default: #b8b9bb;
129
131
  --wb-semanticColor-learning-math-foreground-blue: #3D7586;
130
132
  --wb-semanticColor-learning-math-foreground-gold: #946700;
131
133
  --wb-semanticColor-learning-math-foreground-green: #447A53;
@@ -174,6 +176,11 @@
174
176
  --wb-semanticColor-learning-shadow-progress-notStarted-default: #717279;
175
177
  --wb-semanticColor-learning-shadow-progress-attempted-default: #FCB706;
176
178
  --wb-semanticColor-learning-shadow-progress-complete-default: #579F6C;
179
+ --wb-semanticColor-learning-characters-flesh-blue-default: #5753FA;
180
+ --wb-semanticColor-learning-characters-flesh-cyan-default: #28A9FF;
181
+ --wb-semanticColor-learning-characters-flesh-green-default: #579F6C;
182
+ --wb-semanticColor-learning-characters-flesh-magenta-default: #E83FA4;
183
+ --wb-semanticColor-learning-characters-flesh-orange-default: #F8551A;
177
184
  --wb-semanticColor-action-primary-progressive-default-border: transparent;
178
185
  --wb-semanticColor-action-primary-progressive-default-background: #1865f2;
179
186
  --wb-semanticColor-action-primary-progressive-default-foreground: #ffffff;
@@ -537,8 +544,8 @@
537
544
  --wb-semanticColor-core-border-instructive-subtle: #5753FA;
538
545
  --wb-semanticColor-core-border-instructive-default: #6C82FF;
539
546
  --wb-semanticColor-core-border-instructive-strong: #8DA2FF;
540
- --wb-semanticColor-core-border-neutral-subtle: #8A8B90;
541
- --wb-semanticColor-core-border-neutral-default: #A0A1A4;
547
+ --wb-semanticColor-core-border-neutral-subtle: #4A4C53;
548
+ --wb-semanticColor-core-border-neutral-default: #8A8B90;
542
549
  --wb-semanticColor-core-border-neutral-strong: #CBCBCD;
543
550
  --wb-semanticColor-core-border-critical-subtle: #BE2626;
544
551
  --wb-semanticColor-core-border-critical-default: #E22D2D;
@@ -553,27 +560,27 @@
553
560
  --wb-semanticColor-core-border-disabled-default: #4A4C53;
554
561
  --wb-semanticColor-core-border-disabled-strong: #717279;
555
562
  --wb-semanticColor-core-border-knockout-default: #151521;
556
- --wb-semanticColor-core-background-base-subtle: #252531;
557
- --wb-semanticColor-core-background-base-default: #151521;
563
+ --wb-semanticColor-core-background-base-subtle: #151521;
564
+ --wb-semanticColor-core-background-base-default: #252531;
558
565
  --wb-semanticColor-core-background-base-strong: #FFFFFF;
559
566
  --wb-semanticColor-core-background-instructive-subtle: #222149;
560
567
  --wb-semanticColor-core-background-instructive-default: #5753FA;
561
568
  --wb-semanticColor-core-background-instructive-strong: #8DA2FF;
562
569
  --wb-semanticColor-core-background-neutral-subtle: #4A4C53;
563
- --wb-semanticColor-core-background-neutral-default: #717279;
570
+ --wb-semanticColor-core-background-neutral-default: #8A8B90;
564
571
  --wb-semanticColor-core-background-neutral-strong: #EDEDEE;
565
572
  --wb-semanticColor-core-background-critical-subtle: #3B141A;
566
573
  --wb-semanticColor-core-background-critical-default: #E22D2D;
567
574
  --wb-semanticColor-core-background-critical-strong: #F97F7F;
568
- --wb-semanticColor-core-background-success-subtle: #24432D;
575
+ --wb-semanticColor-core-background-success-subtle: #1A2924;
569
576
  --wb-semanticColor-core-background-success-default: #579F6C;
570
577
  --wb-semanticColor-core-background-success-strong: #97D39E;
571
- --wb-semanticColor-core-background-warning-subtle: #5F4500;
578
+ --wb-semanticColor-core-background-warning-subtle: #312405;
572
579
  --wb-semanticColor-core-background-warning-default: #FCB706;
573
580
  --wb-semanticColor-core-background-warning-strong: #FDD673;
574
581
  --wb-semanticColor-core-background-disabled-subtle: transparent;
575
- --wb-semanticColor-core-background-disabled-default: #252531;
576
- --wb-semanticColor-core-background-disabled-strong: #717279;
582
+ --wb-semanticColor-core-background-disabled-default: #4A4C53;
583
+ --wb-semanticColor-core-background-disabled-strong: #4A4C53;
577
584
  --wb-semanticColor-core-background-overlay-default: rgba(21,21,33,0.80);
578
585
  --wb-semanticColor-core-foreground-instructive-subtle: #4340D0;
579
586
  --wb-semanticColor-core-foreground-instructive-default: #6C82FF;
@@ -591,8 +598,8 @@
591
598
  --wb-semanticColor-core-foreground-warning-default: #FCB706;
592
599
  --wb-semanticColor-core-foreground-warning-strong: #FEF1D0;
593
600
  --wb-semanticColor-core-foreground-disabled-subtle: #4A4C53;
594
- --wb-semanticColor-core-foreground-disabled-default: #4A4C53;
595
- --wb-semanticColor-core-foreground-disabled-strong: #717279;
601
+ --wb-semanticColor-core-foreground-disabled-default: #717279;
602
+ --wb-semanticColor-core-foreground-disabled-strong: #8A8B90;
596
603
  --wb-semanticColor-core-foreground-knockout-default: #151521;
597
604
  --wb-semanticColor-core-shadow-transparent-low: rgba(21,21,33,0.60);
598
605
  --wb-semanticColor-core-shadow-transparent-mid: rgba(21,21,33,0.60);
@@ -604,6 +611,8 @@
604
611
  --wb-semanticColor-core-shadow-chonky-neutral-subtle: #4A4C53;
605
612
  --wb-semanticColor-core-shadow-chonky-neutral-default: #8A8B90;
606
613
  --wb-semanticColor-core-shadow-chonky-neutral-strong: #B5B6B9;
614
+ --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
615
+ --wb-semanticColor-core-shadow-chonky-disabled-default: #252531;
607
616
  --wb-semanticColor-learning-math-foreground-blue: #87CBFC;
608
617
  --wb-semanticColor-learning-math-foreground-gold: #FCC539;
609
618
  --wb-semanticColor-learning-math-foreground-green: #97D39E;
@@ -652,6 +661,11 @@
652
661
  --wb-semanticColor-learning-shadow-progress-notStarted-default: #4A4C53;
653
662
  --wb-semanticColor-learning-shadow-progress-attempted-default: #D69900;
654
663
  --wb-semanticColor-learning-shadow-progress-complete-default: #3C6D4A;
664
+ --wb-semanticColor-learning-characters-flesh-blue-default: #5753FA;
665
+ --wb-semanticColor-learning-characters-flesh-cyan-default: #28A9FF;
666
+ --wb-semanticColor-learning-characters-flesh-green-default: #579F6C;
667
+ --wb-semanticColor-learning-characters-flesh-magenta-default: #E83FA4;
668
+ --wb-semanticColor-learning-characters-flesh-orange-default: #F8551A;
655
669
  --wb-semanticColor-action-primary-progressive-default-border: #6C82FF;
656
670
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
657
671
  --wb-semanticColor-action-primary-progressive-default-foreground: #FFFFFF;
@@ -680,8 +694,8 @@
680
694
  --wb-semanticColor-action-primary-neutral-press-background: #4A4C53;
681
695
  --wb-semanticColor-action-primary-neutral-press-foreground: #FFFFFF;
682
696
  --wb-semanticColor-action-primary-disabled-border: transparent;
683
- --wb-semanticColor-action-primary-disabled-background: #717279;
684
- --wb-semanticColor-action-primary-disabled-foreground: #4A4C53;
697
+ --wb-semanticColor-action-primary-disabled-background: #4A4C53;
698
+ --wb-semanticColor-action-primary-disabled-foreground: #717279;
685
699
  --wb-semanticColor-action-secondary-progressive-default-border: #5753FA;
686
700
  --wb-semanticColor-action-secondary-progressive-default-background: #222149;
687
701
  --wb-semanticColor-action-secondary-progressive-default-foreground: #6C82FF;
@@ -700,7 +714,7 @@
700
714
  --wb-semanticColor-action-secondary-destructive-press-border: #F97F7F;
701
715
  --wb-semanticColor-action-secondary-destructive-press-background: #3B141A;
702
716
  --wb-semanticColor-action-secondary-destructive-press-foreground: #F97F7F;
703
- --wb-semanticColor-action-secondary-neutral-default-border: #A0A1A4;
717
+ --wb-semanticColor-action-secondary-neutral-default-border: #8A8B90;
704
718
  --wb-semanticColor-action-secondary-neutral-default-background: transparent;
705
719
  --wb-semanticColor-action-secondary-neutral-default-foreground: #CBCBCD;
706
720
  --wb-semanticColor-action-secondary-neutral-hover-border: #CBCBCD;
@@ -710,8 +724,8 @@
710
724
  --wb-semanticColor-action-secondary-neutral-press-background: transparent;
711
725
  --wb-semanticColor-action-secondary-neutral-press-foreground: #EDEDEE;
712
726
  --wb-semanticColor-action-secondary-disabled-border: #4A4C53;
713
- --wb-semanticColor-action-secondary-disabled-background: #252531;
714
- --wb-semanticColor-action-secondary-disabled-foreground: #4A4C53;
727
+ --wb-semanticColor-action-secondary-disabled-background: #4A4C53;
728
+ --wb-semanticColor-action-secondary-disabled-foreground: #717279;
715
729
  --wb-semanticColor-action-tertiary-progressive-default-border: transparent;
716
730
  --wb-semanticColor-action-tertiary-progressive-default-background: transparent;
717
731
  --wb-semanticColor-action-tertiary-progressive-default-foreground: #6C82FF;
@@ -763,8 +777,8 @@
763
777
  --wb-semanticColor-chonky-progressive-border-secondary-press: #5753FA;
764
778
  --wb-semanticColor-chonky-progressive-border-secondary-selected: #5753FA;
765
779
  --wb-semanticColor-chonky-progressive-border-tertiary-rest: transparent;
766
- --wb-semanticColor-chonky-progressive-border-tertiary-hover: #8A8B90;
767
- --wb-semanticColor-chonky-progressive-border-tertiary-press: #8A8B90;
780
+ --wb-semanticColor-chonky-progressive-border-tertiary-hover: #4A4C53;
781
+ --wb-semanticColor-chonky-progressive-border-tertiary-press: #4A4C53;
768
782
  --wb-semanticColor-chonky-progressive-border-tertiary-selected: #5753FA;
769
783
  --wb-semanticColor-chonky-progressive-foreground-primary-rest: #FFFFFF;
770
784
  --wb-semanticColor-chonky-progressive-foreground-primary-hover: #FFFFFF;
@@ -794,10 +808,10 @@
794
808
  --wb-semanticColor-chonky-neutral-background-primary-hover: #717279;
795
809
  --wb-semanticColor-chonky-neutral-background-primary-press: #717279;
796
810
  --wb-semanticColor-chonky-neutral-background-primary-selected: #717279;
797
- --wb-semanticColor-chonky-neutral-background-secondary-rest: #151521;
798
- --wb-semanticColor-chonky-neutral-background-secondary-hover: #151521;
799
- --wb-semanticColor-chonky-neutral-background-secondary-press: #151521;
800
- --wb-semanticColor-chonky-neutral-background-secondary-selected: #151521;
811
+ --wb-semanticColor-chonky-neutral-background-secondary-rest: #252531;
812
+ --wb-semanticColor-chonky-neutral-background-secondary-hover: #252531;
813
+ --wb-semanticColor-chonky-neutral-background-secondary-press: #252531;
814
+ --wb-semanticColor-chonky-neutral-background-secondary-selected: #252531;
801
815
  --wb-semanticColor-chonky-neutral-background-tertiary-rest: transparent;
802
816
  --wb-semanticColor-chonky-neutral-background-tertiary-hover: transparent;
803
817
  --wb-semanticColor-chonky-neutral-background-tertiary-press: transparent;
@@ -806,13 +820,13 @@
806
820
  --wb-semanticColor-chonky-neutral-border-primary-hover: transparent;
807
821
  --wb-semanticColor-chonky-neutral-border-primary-press: transparent;
808
822
  --wb-semanticColor-chonky-neutral-border-primary-selected: transparent;
809
- --wb-semanticColor-chonky-neutral-border-secondary-rest: #8A8B90;
810
- --wb-semanticColor-chonky-neutral-border-secondary-hover: #8A8B90;
811
- --wb-semanticColor-chonky-neutral-border-secondary-press: #8A8B90;
823
+ --wb-semanticColor-chonky-neutral-border-secondary-rest: #4A4C53;
824
+ --wb-semanticColor-chonky-neutral-border-secondary-hover: #4A4C53;
825
+ --wb-semanticColor-chonky-neutral-border-secondary-press: #4A4C53;
812
826
  --wb-semanticColor-chonky-neutral-border-secondary-selected: #5753FA;
813
827
  --wb-semanticColor-chonky-neutral-border-tertiary-rest: transparent;
814
- --wb-semanticColor-chonky-neutral-border-tertiary-hover: #8A8B90;
815
- --wb-semanticColor-chonky-neutral-border-tertiary-press: #8A8B90;
828
+ --wb-semanticColor-chonky-neutral-border-tertiary-hover: #4A4C53;
829
+ --wb-semanticColor-chonky-neutral-border-tertiary-press: #4A4C53;
816
830
  --wb-semanticColor-chonky-neutral-border-tertiary-selected: #5753FA;
817
831
  --wb-semanticColor-chonky-neutral-foreground-primary-rest: #FFFFFF;
818
832
  --wb-semanticColor-chonky-neutral-foreground-primary-hover: #FFFFFF;
@@ -838,40 +852,40 @@
838
852
  --wb-semanticColor-chonky-neutral-shadow-tertiary-hover: #4A4C53;
839
853
  --wb-semanticColor-chonky-neutral-shadow-tertiary-press: #4A4C53;
840
854
  --wb-semanticColor-chonky-neutral-shadow-tertiary-selected: #5753FA;
841
- --wb-semanticColor-chonky-disabled-background-primary: #717279;
855
+ --wb-semanticColor-chonky-disabled-background-primary: #4A4C53;
842
856
  --wb-semanticColor-chonky-disabled-background-secondary: #4A4C53;
843
857
  --wb-semanticColor-chonky-disabled-background-tertiary: transparent;
844
858
  --wb-semanticColor-chonky-disabled-border-primary: transparent;
845
- --wb-semanticColor-chonky-disabled-border-secondary: #8A8B90;
859
+ --wb-semanticColor-chonky-disabled-border-secondary: #4A4C53;
846
860
  --wb-semanticColor-chonky-disabled-border-tertiary: transparent;
847
- --wb-semanticColor-chonky-disabled-foreground-primary: #151521;
848
- --wb-semanticColor-chonky-disabled-foreground-secondary: #CBCBCD;
849
- --wb-semanticColor-chonky-disabled-foreground-tertiary: #CBCBCD;
850
- --wb-semanticColor-chonky-disabled-shadow-primary: #B5B6B9;
851
- --wb-semanticColor-chonky-disabled-shadow-secondary: #4A4C53;
861
+ --wb-semanticColor-chonky-disabled-foreground-primary: #717279;
862
+ --wb-semanticColor-chonky-disabled-foreground-secondary: #717279;
863
+ --wb-semanticColor-chonky-disabled-foreground-tertiary: #4A4C53;
864
+ --wb-semanticColor-chonky-disabled-shadow-primary: #252531;
865
+ --wb-semanticColor-chonky-disabled-shadow-secondary: #252531;
852
866
  --wb-semanticColor-chonky-disabled-shadow-tertiary: transparent;
853
- --wb-semanticColor-input-default-border: #A0A1A4;
854
- --wb-semanticColor-input-default-background: #151521;
867
+ --wb-semanticColor-input-default-border: #8A8B90;
868
+ --wb-semanticColor-input-default-background: #252531;
855
869
  --wb-semanticColor-input-default-foreground: #EDEDEE;
856
870
  --wb-semanticColor-input-default-placeholder: #A0A1A4;
857
871
  --wb-semanticColor-input-checked-border: #6C82FF;
858
872
  --wb-semanticColor-input-checked-background: #5753FA;
859
- --wb-semanticColor-input-checked-foreground: #151521;
860
- --wb-semanticColor-input-disabled-border: #4A4C53;
861
- --wb-semanticColor-input-disabled-background: #151521;
862
- --wb-semanticColor-input-disabled-foreground: #717279;
873
+ --wb-semanticColor-input-checked-foreground: #FFFFFF;
874
+ --wb-semanticColor-input-disabled-border: #717279;
875
+ --wb-semanticColor-input-disabled-background: #252531;
876
+ --wb-semanticColor-input-disabled-foreground: #8A8B90;
863
877
  --wb-semanticColor-input-disabled-placeholder: #4A4C53;
864
878
  --wb-semanticColor-input-error-border: #E22D2D;
865
- --wb-semanticColor-input-error-background: #151521;
879
+ --wb-semanticColor-input-error-background: #252531;
866
880
  --wb-semanticColor-input-error-foreground: #EDEDEE;
867
- --wb-semanticColor-input-readOnly-background: #252531;
868
- --wb-semanticColor-input-readOnly-text: #CBCBCD;
881
+ --wb-semanticColor-input-readOnly-background: #4A4C53;
882
+ --wb-semanticColor-input-readOnly-text: #EDEDEE;
869
883
  --wb-semanticColor-input-readOnly-icon: #A0A1A4;
870
884
  --wb-semanticColor-status-critical-background: #3B141A;
871
885
  --wb-semanticColor-status-critical-foreground: #FBB1B1;
872
- --wb-semanticColor-status-warning-background: #5F4500;
886
+ --wb-semanticColor-status-warning-background: #312405;
873
887
  --wb-semanticColor-status-warning-foreground: #FEF1D0;
874
- --wb-semanticColor-status-success-background: #24432D;
888
+ --wb-semanticColor-status-success-background: #1A2924;
875
889
  --wb-semanticColor-status-success-foreground: #D5F3D5;
876
890
  --wb-semanticColor-status-notice-background: #222149;
877
891
  --wb-semanticColor-status-notice-foreground: #DFEAFF;
@@ -882,7 +896,7 @@
882
896
  --wb-semanticColor-link-rest: #6C82FF;
883
897
  --wb-semanticColor-link-hover: #DFEAFF;
884
898
  --wb-semanticColor-link-press: #DFEAFF;
885
- --wb-semanticColor-link-disabled: #4A4C53;
899
+ --wb-semanticColor-link-disabled: #717279;
886
900
  --wb-semanticColor-khanmigo-primary: #5f1e5c;
887
901
  --wb-semanticColor-khanmigo-secondary: #f2edf2;
888
902
  --wb-semanticColor-mastery-primary: #9059ff;
@@ -894,7 +908,7 @@
894
908
  --wb-semanticColor-feedback-info-strong-border: #CBCBCD;
895
909
  --wb-semanticColor-feedback-info-strong-text: #151521;
896
910
  --wb-semanticColor-feedback-info-strong-icon: #4340D0;
897
- --wb-semanticColor-feedback-success-subtle-background: #24432D;
911
+ --wb-semanticColor-feedback-success-subtle-background: #1A2924;
898
912
  --wb-semanticColor-feedback-success-subtle-border: #579F6C;
899
913
  --wb-semanticColor-feedback-success-subtle-icon: #72BB82;
900
914
  --wb-semanticColor-feedback-success-subtle-text: #D5F3D5;
@@ -902,7 +916,7 @@
902
916
  --wb-semanticColor-feedback-success-strong-border: #CBCBCD;
903
917
  --wb-semanticColor-feedback-success-strong-text: #151521;
904
918
  --wb-semanticColor-feedback-success-strong-icon: #3C6D4A;
905
- --wb-semanticColor-feedback-warning-subtle-background: #5F4500;
919
+ --wb-semanticColor-feedback-warning-subtle-background: #312405;
906
920
  --wb-semanticColor-feedback-warning-subtle-border: #FCB706;
907
921
  --wb-semanticColor-feedback-warning-subtle-icon: #FCB706;
908
922
  --wb-semanticColor-feedback-warning-subtle-text: #FEF1D0;
@@ -919,7 +933,7 @@
919
933
  --wb-semanticColor-feedback-critical-strong-text: #151521;
920
934
  --wb-semanticColor-feedback-critical-strong-icon: #E22D2D;
921
935
  --wb-semanticColor-feedback-neutral-subtle-background: #4A4C53;
922
- --wb-semanticColor-feedback-neutral-subtle-border: #8A8B90;
936
+ --wb-semanticColor-feedback-neutral-subtle-border: #4A4C53;
923
937
  --wb-semanticColor-feedback-neutral-subtle-icon: #CBCBCD;
924
938
  --wb-semanticColor-feedback-neutral-subtle-text: #EDEDEE;
925
939
  --wb-semanticColor-feedback-neutral-strong-background: #FFFFFF;
@@ -1082,6 +1096,8 @@
1082
1096
  --wb-semanticColor-core-shadow-chonky-neutral-subtle: #CBCBCD;
1083
1097
  --wb-semanticColor-core-shadow-chonky-neutral-default: #8A8B90;
1084
1098
  --wb-semanticColor-core-shadow-chonky-neutral-strong: #4A4C53;
1099
+ --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
1100
+ --wb-semanticColor-core-shadow-chonky-disabled-default: #CBCBCD;
1085
1101
  --wb-semanticColor-learning-math-foreground-blue: #20628F;
1086
1102
  --wb-semanticColor-learning-math-foreground-gold: #966B00;
1087
1103
  --wb-semanticColor-learning-math-foreground-green: #3C6D4A;
@@ -1130,6 +1146,11 @@
1130
1146
  --wb-semanticColor-learning-shadow-progress-notStarted-default: #717279;
1131
1147
  --wb-semanticColor-learning-shadow-progress-attempted-default: #FCB706;
1132
1148
  --wb-semanticColor-learning-shadow-progress-complete-default: #579F6C;
1149
+ --wb-semanticColor-learning-characters-flesh-blue-default: #5753FA;
1150
+ --wb-semanticColor-learning-characters-flesh-cyan-default: #28A9FF;
1151
+ --wb-semanticColor-learning-characters-flesh-green-default: #579F6C;
1152
+ --wb-semanticColor-learning-characters-flesh-magenta-default: #E83FA4;
1153
+ --wb-semanticColor-learning-characters-flesh-orange-default: #F8551A;
1133
1154
  --wb-semanticColor-action-primary-progressive-default-border: #6C82FF;
1134
1155
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
1135
1156
  --wb-semanticColor-action-primary-progressive-default-foreground: #FFFFFF;
package/dist/es/index.js CHANGED
@@ -18,9 +18,9 @@ const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_0
18
18
 
19
19
  const fontFamily={sans:'Lato, "Noto Sans", sans-serif',serif:'"Noto Serif", serif',mono:"Inconsolata, monospace"};const fontWeight={light:300,regular:400,semi:400,bold:700,black:900};const font$1={family:{sans:fontFamily.sans,serif:fontFamily.serif,mono:fontFamily.mono},size:{xxxLarge:sizing$1.size_360,xxLarge:sizing$1.size_280,xLarge:sizing$1.size_240,large:sizing$1.size_200,medium:sizing$1.size_160,small:sizing$1.size_140,xSmall:sizing$1.size_120},lineHeight:{xxxLarge:sizing$1.size_400,xxLarge:sizing$1.size_320,xLarge:sizing$1.size_280,large:sizing$1.size_240,xMedium:sizing$1.size_220,medium:sizing$1.size_200,small:sizing$1.size_180,xSmall:sizing$1.size_160},weight:{light:fontWeight.light,regular:fontWeight.regular,medium:fontWeight.regular,semi:fontWeight.regular,bold:fontWeight.bold,black:fontWeight.black},body:{size:{xsmall:sizing$1.size_120,small:sizing$1.size_140,medium:sizing$1.size_160},lineHeight:{xsmall:sizing$1.size_160,small:sizing$1.size_180,medium:sizing$1.size_200,large:sizing$1.size_220}},heading:{size:{small:sizing$1.size_120,medium:sizing$1.size_200,large:sizing$1.size_240,xlarge:sizing$1.size_280,xxlarge:sizing$1.size_360},lineHeight:{small:sizing$1.size_160,medium:sizing$1.size_240,large:sizing$1.size_280,xlarge:sizing$1.size_320,xxlarge:sizing$1.size_400}},textDecoration:{underlineOffset:sizing$1.size_020,thickness:sizing$1.size_010}};
20
20
 
21
- const black="#151521";const white="#FFFFFF";const blue30="#5753FA";const blue05="#252368";const color={red_90:"#FEF4F4",red_80:"#FFEBEB",red_70:"#FDDFDF",red_60:"#FBB1B1",red_50:"#F97F7F",red_40:"#ED5656",red_30:"#E22D2D",red_20:"#BE2626",red_10:"#8E1C1C",red_05:"#621414",red_01:"#3B141A",orange_90:"#FEF4F2",orange_80:"#FEE9E5",orange_70:"#FEDFD8",orange_60:"#FEBFB1",orange_50:"#FAA185",orange_40:"#F97B4F",orange_30:"#F8551A",orange_20:"#C8481A",orange_10:"#983C1A",orange_05:"#672912",orange_01:"#3E1F19",yellow_90:"#FEF8E7",yellow_80:"#FEF1D0",yellow_70:"#FEEAB8",yellow_60:"#FEE7AD",yellow_50:"#FDD673",yellow_40:"#FCC539",yellow_30:"#FCB706",yellow_20:"#D69900",yellow_10:"#966B00",yellow_05:"#5F4500",yellow_01:"#3A2D10",green_90:"#F1FBF1",green_80:"#E3F7E3",green_70:"#D5F3D5",green_60:"#BCEBBB",green_50:"#97D39E",green_40:"#72BB82",green_30:"#579F6C",green_20:"#3C6D4A",green_10:"#2C5037",green_05:"#24432D",green_01:"#1C2C27",cyan_90:"#EEF7FE",cyan_80:"#DDF0FE",cyan_70:"#CCE9FE",cyan_60:"#A9DAFD",cyan_50:"#87CBFC",cyan_40:"#57BAFD",cyan_30:"#28A9FF",cyan_20:"#2485C7",cyan_10:"#20628F",cyan_05:"#1D3F58",cyan_01:"#192A3C",blue_90:"#F8F9FB",blue_80:"#EBF1FD",blue_70:"#DFEAFF",blue_60:"#BFCAFF",blue_50:"#8DA2FF",blue_40:"#6C82FF",blue_30:blue30,blue_20:"#4340D0",blue_10:"#363498",blue_05:blue05,blue_01:"#222149",blue_30_alpha20:`${blue30}33`,blue_05_alpha20:`${blue05}33`,magenta_90:"#FCEEF7",magenta_80:"#FFE3F4",magenta_70:"#FAD4EC",magenta_60:"#F9BBE1",magenta_50:"#F8A2D6",magenta_40:"#F670C1",magenta_30:"#E83FA4",magenta_20:"#BB3183",magenta_10:"#84275E",magenta_05:"#521B3C",magenta_01:"#33182E",gray_90:"#F6F6F6",gray_80:"#EDEDEE",gray_70:"#E0E0E1",gray_60:"#CBCBCD",gray_50:"#B5B6B9",gray_40:"#A0A1A4",gray_30:"#8A8B90",gray_20:"#717279",gray_10:"#4A4C53",gray_05:"#252531",gray_01:"#1D1D29",black_100:black,black_90:fade(black,.9),black_80:fade(black,.8),black_70:fade(black,.7),black_60:fade(black,.6),black_50:fade(black,.5),black_40:fade(black,.4),black_30:fade(black,.3),black_20:fade(black,.2),black_10:fade(black,.1),black_01:fade(black,.01),black_00:fade(black,0),white_100:white,white_90:fade(white,.9),white_80:fade(white,.8),white_70:fade(white,.7),white_60:fade(white,.6),white_50:fade(white,.5),white_40:fade(white,.4),white_30:fade(white,.3),white_20:fade(white,.2),white_10:fade(white,.1),white_01:fade(white,.01),white_00:fade(white,0)};
21
+ const black="#151521";const white="#FFFFFF";const blue30="#5753FA";const blue05="#252368";const color={red_90:"#FEF4F4",red_80:"#FFEBEB",red_70:"#FDDFDF",red_60:"#FBB1B1",red_50:"#F97F7F",red_40:"#ED5656",red_30:"#E22D2D",red_20:"#BE2626",red_10:"#8E1C1C",red_05:"#621414",red_01:"#3B141A",orange_90:"#FEF4F2",orange_80:"#FEE9E5",orange_70:"#FEDFD8",orange_60:"#FEBFB1",orange_50:"#FAA185",orange_40:"#F97B4F",orange_30:"#F8551A",orange_20:"#C8481A",orange_10:"#983C1A",orange_05:"#672912",orange_01:"#3E1F19",yellow_90:"#FEF8E7",yellow_80:"#FEF1D0",yellow_70:"#FEEAB8",yellow_60:"#FEE7AD",yellow_50:"#FDD673",yellow_40:"#FCC539",yellow_30:"#FCB706",yellow_20:"#D69900",yellow_10:"#966B00",yellow_05:"#5F4500",yellow_01:"#312405",green_90:"#F1FBF1",green_80:"#E3F7E3",green_70:"#D5F3D5",green_60:"#BCEBBB",green_50:"#97D39E",green_40:"#72BB82",green_30:"#579F6C",green_20:"#3C6D4A",green_10:"#2C5037",green_05:"#24432D",green_01:"#1A2924",cyan_90:"#EEF7FE",cyan_80:"#DDF0FE",cyan_70:"#CCE9FE",cyan_60:"#A9DAFD",cyan_50:"#87CBFC",cyan_40:"#57BAFD",cyan_30:"#28A9FF",cyan_20:"#2485C7",cyan_10:"#20628F",cyan_05:"#1D3F58",cyan_01:"#192A3C",blue_90:"#F8F9FB",blue_80:"#EBF1FD",blue_70:"#DFEAFF",blue_60:"#BFCAFF",blue_50:"#8DA2FF",blue_40:"#6C82FF",blue_30:blue30,blue_20:"#4340D0",blue_10:"#363498",blue_05:blue05,blue_01:"#222149",blue_30_alpha20:`${blue30}33`,blue_05_alpha20:`${blue05}33`,magenta_90:"#FCEEF7",magenta_80:"#FFE3F4",magenta_70:"#FAD4EC",magenta_60:"#F9BBE1",magenta_50:"#F8A2D6",magenta_40:"#F670C1",magenta_30:"#E83FA4",magenta_20:"#BB3183",magenta_10:"#84275E",magenta_05:"#521B3C",magenta_01:"#33182E",gray_90:"#F6F6F6",gray_80:"#EDEDEE",gray_70:"#E0E0E1",gray_60:"#CBCBCD",gray_50:"#B5B6B9",gray_40:"#A0A1A4",gray_30:"#8A8B90",gray_20:"#717279",gray_10:"#4A4C53",gray_05:"#252531",gray_01:"#1D1D29",black_100:black,black_90:fade(black,.9),black_80:fade(black,.8),black_70:fade(black,.7),black_60:fade(black,.6),black_50:fade(black,.5),black_40:fade(black,.4),black_30:fade(black,.3),black_20:fade(black,.2),black_10:fade(black,.1),black_01:fade(black,.01),black_00:fade(black,0),white_100:white,white_90:fade(white,.9),white_80:fade(white,.8),white_70:fade(white,.7),white_60:fade(white,.6),white_50:fade(white,.5),white_40:fade(white,.4),white_30:fade(white,.3),white_20:fade(white,.2),white_10:fade(white,.1),white_01:fade(white,.01),white_00:fade(white,0)};
22
22
 
23
- const transparent="transparent";const transparentShadowColor=color$1.offBlack16;const core={transparent,border:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack50,strong:color$1.fadedOffBlack72},critical:{subtle:color$1.fadedRed24,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack16,strong:color$1.fadedOffBlack32},knockout:{default:color$1.white}},background:{base:{subtle:color$1.offWhite,default:color$1.white,strong:color$1.darkBlue},instructive:{subtle:color$1.fadedBlue8,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack8,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed8,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen8,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold8,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack8,strong:color$1.fadedOffBlack16},overlay:{default:color$1.offBlack50}},foreground:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack64,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack32,strong:color$1.fadedOffBlack50},knockout:{default:color$1.white}},shadow:{transparent:{low:transparentShadowColor,mid:transparentShadowColor,high:transparentShadowColor,color:{subtle:color$1.blue_alpha20,strong:color$1.offBlack16}},chonky:{instructive:{subtle:color$1.fadedBlue,default:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack32,default:color$1.fadedOffBlack50,strong:color$1.offBlack}}}};const sharedFeedbackStrongTokens={background:core.background.neutral.strong,border:core.border.neutral.strong,text:core.foreground.knockout.default};const semanticColor$1={core,learning:{math:{foreground:{blue:"#3D7586",gold:"#946700",green:"#447A53",gray:"#5D5F66",grayH:"#3B3D45",grayI:"#21242C",purple:"#594094",purpleD:"#8351E8",pink:"#B25071",red:"#D92916"}},background:{gems:{subtle:color.magenta_90,default:color.magenta_80,strong:color.magenta_10},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_10},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_10},progress:{notStarted:{default:color.gray_60},attempted:{default:color.yellow_60},complete:{default:color.green_60}}},border:{gems:{subtle:color.magenta_80,default:color.magenta_60,strong:color.magenta_30},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_30},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_30}},foreground:{gems:{subtle:color.magenta_60,default:color.magenta_30,strong:color.magenta_10},streaks:{subtle:color.orange_60,default:color.orange_30,strong:color.orange_10},due:{subtle:color.cyan_60,default:color.cyan_20,strong:color.cyan_10},progress:{notStarted:{subtle:color.gray_50,strong:color.gray_10},attempted:{subtle:color.yellow_50,strong:color.yellow_10},complete:{strong:color.green_50}}},shadow:{progress:{notStarted:{default:color.gray_20},attempted:{default:color.yellow_30},complete:{default:color.green_30}}}},action:{primary:{progressive:{default:{border:core.transparent,background:core.background.instructive.default,foreground:core.foreground.knockout.default},hover:{border:core.border.instructive.default,background:core.background.instructive.default,foreground:core.foreground.knockout.default},press:{border:core.border.instructive.strong,background:core.background.instructive.strong,foreground:core.foreground.knockout.default}},destructive:{default:{border:core.transparent,background:core.background.critical.default,foreground:core.foreground.knockout.default},hover:{border:core.border.critical.default,background:core.background.critical.default,foreground:core.foreground.knockout.default},press:{border:core.border.critical.strong,background:core.background.critical.strong,foreground:core.foreground.knockout.default}},neutral:{default:{border:core.transparent,background:core.background.neutral.default,foreground:core.foreground.knockout.default},hover:{border:core.border.neutral.default,background:core.background.neutral.default,foreground:core.foreground.knockout.default},press:{border:core.border.neutral.strong,background:core.background.neutral.strong,foreground:core.foreground.knockout.default}},disabled:{border:core.border.disabled.strong,background:core.border.disabled.strong,foreground:core.foreground.knockout.default}},secondary:{progressive:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.instructive.default},hover:{border:core.border.instructive.default,background:core.transparent,foreground:core.foreground.instructive.default},press:{border:core.border.instructive.strong,background:core.background.instructive.subtle,foreground:core.foreground.instructive.strong}},destructive:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.critical.default},hover:{border:core.border.critical.default,background:core.transparent,foreground:core.foreground.critical.default},press:{border:core.border.critical.strong,background:core.background.critical.subtle,foreground:core.foreground.critical.strong}},neutral:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},hover:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},press:{border:core.border.neutral.strong,background:core.background.neutral.subtle,foreground:core.foreground.neutral.strong}},disabled:{border:core.border.disabled.strong,background:core.background.disabled.subtle,foreground:core.foreground.disabled.default}},tertiary:{progressive:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.instructive.default},hover:{border:core.border.instructive.default,background:core.transparent,foreground:core.foreground.instructive.default},press:{border:core.border.instructive.strong,background:core.transparent,foreground:core.foreground.instructive.strong}},destructive:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.critical.default},hover:{border:core.border.critical.default,background:core.transparent,foreground:core.foreground.critical.default},press:{border:core.border.critical.strong,background:core.transparent,foreground:core.foreground.critical.strong}},neutral:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.neutral.default},hover:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},press:{border:core.border.neutral.strong,background:core.transparent,foreground:core.foreground.neutral.strong}},disabled:{border:core.border.disabled.default,background:core.background.disabled.subtle,foreground:core.foreground.disabled.default}}},chonky:{progressive:{background:{primary:{rest:core.background.instructive.default,hover:core.background.instructive.default,press:core.background.instructive.default,selected:core.background.instructive.default},secondary:{rest:core.background.instructive.subtle,hover:core.background.instructive.subtle,press:core.background.instructive.subtle,selected:core.background.instructive.subtle},tertiary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent}},border:{primary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent},secondary:{rest:core.border.instructive.subtle,hover:core.border.instructive.subtle,press:core.border.instructive.subtle,selected:core.border.instructive.subtle},tertiary:{rest:core.transparent,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.border.instructive.subtle}},foreground:{primary:{rest:core.foreground.knockout.default,hover:core.foreground.knockout.default,press:core.foreground.knockout.default,selected:core.foreground.knockout.default},secondary:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,selected:core.foreground.instructive.strong},tertiary:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,selected:core.foreground.instructive.strong}},shadow:{primary:{rest:core.shadow.chonky.instructive.default,hover:core.shadow.chonky.instructive.default,press:core.shadow.chonky.instructive.default,selected:core.shadow.chonky.instructive.default},secondary:{rest:core.shadow.chonky.instructive.subtle,hover:core.shadow.chonky.instructive.subtle,press:core.shadow.chonky.instructive.subtle,selected:core.shadow.chonky.instructive.subtle},tertiary:{rest:core.transparent,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.subtle,selected:core.shadow.chonky.instructive.subtle}}},neutral:{background:{primary:{rest:core.background.neutral.default,hover:core.background.neutral.default,press:core.background.neutral.default,selected:core.background.neutral.default},secondary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.background.neutral.subtle},tertiary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent}},border:{primary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent},secondary:{rest:core.border.neutral.subtle,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.border.neutral.subtle},tertiary:{rest:core.transparent,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.transparent}},foreground:{primary:{rest:core.foreground.knockout.default,hover:core.foreground.knockout.default,press:core.foreground.knockout.default,selected:core.foreground.knockout.default},secondary:{rest:core.foreground.neutral.subtle,hover:core.foreground.neutral.subtle,press:core.foreground.neutral.subtle,selected:core.foreground.neutral.subtle},tertiary:{rest:core.foreground.neutral.default,hover:core.foreground.neutral.default,press:core.foreground.neutral.default,selected:core.foreground.neutral.default}},shadow:{primary:{rest:core.shadow.chonky.neutral.strong,hover:core.shadow.chonky.neutral.strong,press:core.transparent,selected:core.shadow.chonky.neutral.strong},secondary:{rest:core.shadow.chonky.neutral.subtle,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.strong,selected:core.shadow.chonky.neutral.subtle},tertiary:{rest:core.transparent,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.subtle,selected:core.shadow.chonky.instructive.subtle}}},disabled:{background:{primary:core.background.disabled.default,secondary:core.background.disabled.default,tertiary:core.background.disabled.subtle},border:{primary:core.border.disabled.default,secondary:core.border.disabled.default,tertiary:core.border.disabled.subtle},foreground:{primary:core.foreground.disabled.default,secondary:core.foreground.disabled.default,tertiary:core.foreground.disabled.default},shadow:{primary:core.shadow.chonky.neutral.subtle,secondary:core.shadow.chonky.neutral.subtle,tertiary:core.transparent}}},input:{default:{border:core.border.neutral.default,background:core.background.base.default,foreground:core.foreground.neutral.strong,placeholder:core.foreground.neutral.default},checked:{border:core.border.instructive.default,background:core.background.instructive.default,foreground:core.foreground.knockout.default},disabled:{border:core.border.disabled.default,background:color$1.offWhite,foreground:core.foreground.neutral.default,placeholder:core.foreground.neutral.default},error:{border:core.border.critical.default,background:core.background.critical.subtle,foreground:core.foreground.neutral.strong},readOnly:{background:core.background.base.default,text:core.foreground.neutral.strong,icon:core.transparent}},status:{critical:{background:core.background.critical.subtle,foreground:core.foreground.critical.default},warning:{background:core.background.warning.subtle,foreground:core.foreground.warning.default},success:{background:core.background.success.subtle,foreground:core.foreground.success.default},notice:{background:core.background.instructive.subtle,foreground:core.foreground.instructive.default},neutral:{background:core.background.neutral.subtle,foreground:core.foreground.neutral.strong}},focus:{outer:color$1.blue,inner:color$1.white},link:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,disabled:core.foreground.disabled.default},khanmigo:{primary:color$1.eggplant,secondary:color$1.fadedEggplant8},mastery:{primary:color$1.purple},feedback:{info:{subtle:{background:core.background.instructive.subtle,border:core.border.instructive.subtle,icon:core.foreground.instructive.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.instructive.default}},success:{subtle:{background:core.background.success.subtle,border:core.border.success.subtle,icon:core.foreground.success.strong,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.success.default}},warning:{subtle:{background:core.background.warning.subtle,border:core.border.warning.default,icon:core.foreground.warning.strong,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.warning.default}},critical:{subtle:{background:core.background.critical.subtle,border:core.border.critical.subtle,icon:core.foreground.critical.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.critical.default}},neutral:{subtle:{background:core.background.neutral.subtle,border:core.border.neutral.subtle,icon:core.foreground.neutral.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.neutral.subtle}}}};
23
+ const transparent="transparent";const transparentShadowColor=color$1.offBlack16;const core={transparent,border:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack50,strong:color$1.fadedOffBlack72},critical:{subtle:color$1.fadedRed24,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack16,strong:color$1.fadedOffBlack32},knockout:{default:color$1.white}},background:{base:{subtle:color$1.offWhite,default:color$1.white,strong:color$1.darkBlue},instructive:{subtle:color$1.fadedBlue8,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack8,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed8,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen8,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold8,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack8,strong:color$1.fadedOffBlack16},overlay:{default:color$1.offBlack50}},foreground:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack64,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack32,strong:color$1.fadedOffBlack50},knockout:{default:color$1.white}},shadow:{transparent:{low:transparentShadowColor,mid:transparentShadowColor,high:transparentShadowColor,color:{subtle:color$1.blue_alpha20,strong:color$1.offBlack16}},chonky:{instructive:{subtle:color$1.fadedBlue,default:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack32,default:color$1.fadedOffBlack50,strong:color$1.offBlack},disabled:{subtle:transparent,default:color$1.fadedOffBlack32}}}};const sharedFeedbackStrongTokens={background:core.background.neutral.strong,border:core.border.neutral.strong,text:core.foreground.knockout.default};const semanticColor$1={core,learning:{math:{foreground:{blue:"#3D7586",gold:"#946700",green:"#447A53",gray:"#5D5F66",grayH:"#3B3D45",grayI:"#21242C",purple:"#594094",purpleD:"#8351E8",pink:"#B25071",red:"#D92916"}},background:{gems:{subtle:color.magenta_90,default:color.magenta_80,strong:color.magenta_10},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_10},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_10},progress:{notStarted:{default:color.gray_60},attempted:{default:color.yellow_60},complete:{default:color.green_60}}},border:{gems:{subtle:color.magenta_80,default:color.magenta_60,strong:color.magenta_30},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_30},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_30}},foreground:{gems:{subtle:color.magenta_60,default:color.magenta_30,strong:color.magenta_10},streaks:{subtle:color.orange_60,default:color.orange_30,strong:color.orange_10},due:{subtle:color.cyan_60,default:color.cyan_20,strong:color.cyan_10},progress:{notStarted:{subtle:color.gray_50,strong:color.gray_10},attempted:{subtle:color.yellow_50,strong:color.yellow_10},complete:{strong:color.green_50}}},shadow:{progress:{notStarted:{default:color.gray_20},attempted:{default:color.yellow_30},complete:{default:color.green_30}}},characters:{flesh:{blue:{default:color.blue_30},cyan:{default:color.cyan_30},green:{default:color.green_30},magenta:{default:color.magenta_30},orange:{default:color.orange_30}}}},action:{primary:{progressive:{default:{border:core.transparent,background:core.background.instructive.default,foreground:core.foreground.knockout.default},hover:{border:core.border.instructive.default,background:core.background.instructive.default,foreground:core.foreground.knockout.default},press:{border:core.border.instructive.strong,background:core.background.instructive.strong,foreground:core.foreground.knockout.default}},destructive:{default:{border:core.transparent,background:core.background.critical.default,foreground:core.foreground.knockout.default},hover:{border:core.border.critical.default,background:core.background.critical.default,foreground:core.foreground.knockout.default},press:{border:core.border.critical.strong,background:core.background.critical.strong,foreground:core.foreground.knockout.default}},neutral:{default:{border:core.transparent,background:core.background.neutral.default,foreground:core.foreground.knockout.default},hover:{border:core.border.neutral.default,background:core.background.neutral.default,foreground:core.foreground.knockout.default},press:{border:core.border.neutral.strong,background:core.background.neutral.strong,foreground:core.foreground.knockout.default}},disabled:{border:core.border.disabled.strong,background:core.border.disabled.strong,foreground:core.foreground.knockout.default}},secondary:{progressive:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.instructive.default},hover:{border:core.border.instructive.default,background:core.transparent,foreground:core.foreground.instructive.default},press:{border:core.border.instructive.strong,background:core.background.instructive.subtle,foreground:core.foreground.instructive.strong}},destructive:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.critical.default},hover:{border:core.border.critical.default,background:core.transparent,foreground:core.foreground.critical.default},press:{border:core.border.critical.strong,background:core.background.critical.subtle,foreground:core.foreground.critical.strong}},neutral:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},hover:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},press:{border:core.border.neutral.strong,background:core.background.neutral.subtle,foreground:core.foreground.neutral.strong}},disabled:{border:core.border.disabled.strong,background:core.background.disabled.subtle,foreground:core.foreground.disabled.default}},tertiary:{progressive:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.instructive.default},hover:{border:core.border.instructive.default,background:core.transparent,foreground:core.foreground.instructive.default},press:{border:core.border.instructive.strong,background:core.transparent,foreground:core.foreground.instructive.strong}},destructive:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.critical.default},hover:{border:core.border.critical.default,background:core.transparent,foreground:core.foreground.critical.default},press:{border:core.border.critical.strong,background:core.transparent,foreground:core.foreground.critical.strong}},neutral:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.neutral.default},hover:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},press:{border:core.border.neutral.strong,background:core.transparent,foreground:core.foreground.neutral.strong}},disabled:{border:core.border.disabled.default,background:core.background.disabled.subtle,foreground:core.foreground.disabled.default}}},chonky:{progressive:{background:{primary:{rest:core.background.instructive.default,hover:core.background.instructive.default,press:core.background.instructive.default,selected:core.background.instructive.default},secondary:{rest:core.background.instructive.subtle,hover:core.background.instructive.subtle,press:core.background.instructive.subtle,selected:core.background.instructive.subtle},tertiary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent}},border:{primary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent},secondary:{rest:core.border.instructive.subtle,hover:core.border.instructive.subtle,press:core.border.instructive.subtle,selected:core.border.instructive.subtle},tertiary:{rest:core.transparent,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.border.instructive.subtle}},foreground:{primary:{rest:core.foreground.knockout.default,hover:core.foreground.knockout.default,press:core.foreground.knockout.default,selected:core.foreground.knockout.default},secondary:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,selected:core.foreground.instructive.strong},tertiary:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,selected:core.foreground.instructive.strong}},shadow:{primary:{rest:core.shadow.chonky.instructive.default,hover:core.shadow.chonky.instructive.default,press:core.shadow.chonky.instructive.default,selected:core.shadow.chonky.instructive.default},secondary:{rest:core.shadow.chonky.instructive.subtle,hover:core.shadow.chonky.instructive.subtle,press:core.shadow.chonky.instructive.subtle,selected:core.shadow.chonky.instructive.subtle},tertiary:{rest:core.transparent,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.subtle,selected:core.shadow.chonky.instructive.subtle}}},neutral:{background:{primary:{rest:core.background.neutral.default,hover:core.background.neutral.default,press:core.background.neutral.default,selected:core.background.neutral.default},secondary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.background.neutral.subtle},tertiary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent}},border:{primary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent},secondary:{rest:core.border.neutral.subtle,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.border.neutral.subtle},tertiary:{rest:core.transparent,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.transparent}},foreground:{primary:{rest:core.foreground.knockout.default,hover:core.foreground.knockout.default,press:core.foreground.knockout.default,selected:core.foreground.knockout.default},secondary:{rest:core.foreground.neutral.subtle,hover:core.foreground.neutral.subtle,press:core.foreground.neutral.subtle,selected:core.foreground.neutral.subtle},tertiary:{rest:core.foreground.neutral.default,hover:core.foreground.neutral.default,press:core.foreground.neutral.default,selected:core.foreground.neutral.default}},shadow:{primary:{rest:core.shadow.chonky.neutral.strong,hover:core.shadow.chonky.neutral.strong,press:core.transparent,selected:core.shadow.chonky.neutral.strong},secondary:{rest:core.shadow.chonky.neutral.subtle,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.strong,selected:core.shadow.chonky.neutral.subtle},tertiary:{rest:core.transparent,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.subtle,selected:core.shadow.chonky.instructive.subtle}}},disabled:{background:{primary:core.background.disabled.default,secondary:core.background.disabled.default,tertiary:core.background.disabled.subtle},border:{primary:core.border.disabled.default,secondary:core.border.disabled.default,tertiary:core.border.disabled.subtle},foreground:{primary:core.foreground.disabled.default,secondary:core.foreground.disabled.default,tertiary:core.foreground.disabled.default},shadow:{primary:core.shadow.chonky.disabled.default,secondary:core.shadow.chonky.disabled.default,tertiary:core.shadow.chonky.disabled.subtle}}},input:{default:{border:core.border.neutral.default,background:core.background.base.default,foreground:core.foreground.neutral.strong,placeholder:core.foreground.neutral.default},checked:{border:core.border.instructive.default,background:core.background.instructive.default,foreground:core.foreground.knockout.default},disabled:{border:core.border.disabled.default,background:color$1.offWhite,foreground:core.foreground.neutral.default,placeholder:core.foreground.neutral.default},error:{border:core.border.critical.default,background:core.background.critical.subtle,foreground:core.foreground.neutral.strong},readOnly:{background:core.background.base.default,text:core.foreground.neutral.strong,icon:core.transparent}},status:{critical:{background:core.background.critical.subtle,foreground:core.foreground.critical.default},warning:{background:core.background.warning.subtle,foreground:core.foreground.warning.default},success:{background:core.background.success.subtle,foreground:core.foreground.success.default},notice:{background:core.background.instructive.subtle,foreground:core.foreground.instructive.default},neutral:{background:core.background.neutral.subtle,foreground:core.foreground.neutral.strong}},focus:{outer:color$1.blue,inner:color$1.white},link:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,disabled:core.foreground.disabled.default},khanmigo:{primary:color$1.eggplant,secondary:color$1.fadedEggplant8},mastery:{primary:color$1.purple},feedback:{info:{subtle:{background:core.background.instructive.subtle,border:core.border.instructive.subtle,icon:core.foreground.instructive.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.instructive.default}},success:{subtle:{background:core.background.success.subtle,border:core.border.success.subtle,icon:core.foreground.success.strong,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.success.default}},warning:{subtle:{background:core.background.warning.subtle,border:core.border.warning.default,icon:core.foreground.warning.strong,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.warning.default}},critical:{subtle:{background:core.background.critical.subtle,border:core.border.critical.subtle,icon:core.foreground.critical.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.critical.default}},neutral:{subtle:{background:core.background.neutral.subtle,border:core.border.neutral.subtle,icon:core.foreground.neutral.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.neutral.subtle}}}};
24
24
 
25
25
  const border$1={radius:{radius_0:remToPx(sizing$1.size_0),radius_010:remToPx(sizing$1.size_010),radius_040:remToPx(sizing$1.size_040),radius_080:remToPx(sizing$1.size_080),radius_120:remToPx(sizing$1.size_120),radius_240:remToPx(sizing$1.size_240),radius_full:"50%"},width:{none:remToPx(sizing$1.size_0),thin:remToPx(sizing$1.size_010),medium:remToPx(sizing$1.size_020),thick:remToPx(sizing$1.size_040)}};
26
26
 
package/dist/index.d.ts CHANGED
@@ -156,6 +156,10 @@ declare const border: {
156
156
  default: string;
157
157
  strong: string;
158
158
  };
159
+ disabled: {
160
+ subtle: string;
161
+ default: string;
162
+ };
159
163
  };
160
164
  };
161
165
  };
@@ -262,6 +266,25 @@ declare const border: {
262
266
  };
263
267
  };
264
268
  };
269
+ characters: {
270
+ flesh: {
271
+ blue: {
272
+ default: string;
273
+ };
274
+ cyan: {
275
+ default: string;
276
+ };
277
+ green: {
278
+ default: string;
279
+ };
280
+ magenta: {
281
+ default: string;
282
+ };
283
+ orange: {
284
+ default: string;
285
+ };
286
+ };
287
+ };
265
288
  };
266
289
  action: {
267
290
  primary: {
package/dist/index.js CHANGED
@@ -22,9 +22,9 @@ const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_0
22
22
 
23
23
  const fontFamily={sans:'Lato, "Noto Sans", sans-serif',serif:'"Noto Serif", serif',mono:"Inconsolata, monospace"};const fontWeight={light:300,regular:400,semi:400,bold:700,black:900};const font$1={family:{sans:fontFamily.sans,serif:fontFamily.serif,mono:fontFamily.mono},size:{xxxLarge:sizing$1.size_360,xxLarge:sizing$1.size_280,xLarge:sizing$1.size_240,large:sizing$1.size_200,medium:sizing$1.size_160,small:sizing$1.size_140,xSmall:sizing$1.size_120},lineHeight:{xxxLarge:sizing$1.size_400,xxLarge:sizing$1.size_320,xLarge:sizing$1.size_280,large:sizing$1.size_240,xMedium:sizing$1.size_220,medium:sizing$1.size_200,small:sizing$1.size_180,xSmall:sizing$1.size_160},weight:{light:fontWeight.light,regular:fontWeight.regular,medium:fontWeight.regular,semi:fontWeight.regular,bold:fontWeight.bold,black:fontWeight.black},body:{size:{xsmall:sizing$1.size_120,small:sizing$1.size_140,medium:sizing$1.size_160},lineHeight:{xsmall:sizing$1.size_160,small:sizing$1.size_180,medium:sizing$1.size_200,large:sizing$1.size_220}},heading:{size:{small:sizing$1.size_120,medium:sizing$1.size_200,large:sizing$1.size_240,xlarge:sizing$1.size_280,xxlarge:sizing$1.size_360},lineHeight:{small:sizing$1.size_160,medium:sizing$1.size_240,large:sizing$1.size_280,xlarge:sizing$1.size_320,xxlarge:sizing$1.size_400}},textDecoration:{underlineOffset:sizing$1.size_020,thickness:sizing$1.size_010}};
24
24
 
25
- const black="#151521";const white="#FFFFFF";const blue30="#5753FA";const blue05="#252368";const color={red_90:"#FEF4F4",red_80:"#FFEBEB",red_70:"#FDDFDF",red_60:"#FBB1B1",red_50:"#F97F7F",red_40:"#ED5656",red_30:"#E22D2D",red_20:"#BE2626",red_10:"#8E1C1C",red_05:"#621414",red_01:"#3B141A",orange_90:"#FEF4F2",orange_80:"#FEE9E5",orange_70:"#FEDFD8",orange_60:"#FEBFB1",orange_50:"#FAA185",orange_40:"#F97B4F",orange_30:"#F8551A",orange_20:"#C8481A",orange_10:"#983C1A",orange_05:"#672912",orange_01:"#3E1F19",yellow_90:"#FEF8E7",yellow_80:"#FEF1D0",yellow_70:"#FEEAB8",yellow_60:"#FEE7AD",yellow_50:"#FDD673",yellow_40:"#FCC539",yellow_30:"#FCB706",yellow_20:"#D69900",yellow_10:"#966B00",yellow_05:"#5F4500",yellow_01:"#3A2D10",green_90:"#F1FBF1",green_80:"#E3F7E3",green_70:"#D5F3D5",green_60:"#BCEBBB",green_50:"#97D39E",green_40:"#72BB82",green_30:"#579F6C",green_20:"#3C6D4A",green_10:"#2C5037",green_05:"#24432D",green_01:"#1C2C27",cyan_90:"#EEF7FE",cyan_80:"#DDF0FE",cyan_70:"#CCE9FE",cyan_60:"#A9DAFD",cyan_50:"#87CBFC",cyan_40:"#57BAFD",cyan_30:"#28A9FF",cyan_20:"#2485C7",cyan_10:"#20628F",cyan_05:"#1D3F58",cyan_01:"#192A3C",blue_90:"#F8F9FB",blue_80:"#EBF1FD",blue_70:"#DFEAFF",blue_60:"#BFCAFF",blue_50:"#8DA2FF",blue_40:"#6C82FF",blue_30:blue30,blue_20:"#4340D0",blue_10:"#363498",blue_05:blue05,blue_01:"#222149",blue_30_alpha20:`${blue30}33`,blue_05_alpha20:`${blue05}33`,magenta_90:"#FCEEF7",magenta_80:"#FFE3F4",magenta_70:"#FAD4EC",magenta_60:"#F9BBE1",magenta_50:"#F8A2D6",magenta_40:"#F670C1",magenta_30:"#E83FA4",magenta_20:"#BB3183",magenta_10:"#84275E",magenta_05:"#521B3C",magenta_01:"#33182E",gray_90:"#F6F6F6",gray_80:"#EDEDEE",gray_70:"#E0E0E1",gray_60:"#CBCBCD",gray_50:"#B5B6B9",gray_40:"#A0A1A4",gray_30:"#8A8B90",gray_20:"#717279",gray_10:"#4A4C53",gray_05:"#252531",gray_01:"#1D1D29",black_100:black,black_90:fade(black,.9),black_80:fade(black,.8),black_70:fade(black,.7),black_60:fade(black,.6),black_50:fade(black,.5),black_40:fade(black,.4),black_30:fade(black,.3),black_20:fade(black,.2),black_10:fade(black,.1),black_01:fade(black,.01),black_00:fade(black,0),white_100:white,white_90:fade(white,.9),white_80:fade(white,.8),white_70:fade(white,.7),white_60:fade(white,.6),white_50:fade(white,.5),white_40:fade(white,.4),white_30:fade(white,.3),white_20:fade(white,.2),white_10:fade(white,.1),white_01:fade(white,.01),white_00:fade(white,0)};
25
+ const black="#151521";const white="#FFFFFF";const blue30="#5753FA";const blue05="#252368";const color={red_90:"#FEF4F4",red_80:"#FFEBEB",red_70:"#FDDFDF",red_60:"#FBB1B1",red_50:"#F97F7F",red_40:"#ED5656",red_30:"#E22D2D",red_20:"#BE2626",red_10:"#8E1C1C",red_05:"#621414",red_01:"#3B141A",orange_90:"#FEF4F2",orange_80:"#FEE9E5",orange_70:"#FEDFD8",orange_60:"#FEBFB1",orange_50:"#FAA185",orange_40:"#F97B4F",orange_30:"#F8551A",orange_20:"#C8481A",orange_10:"#983C1A",orange_05:"#672912",orange_01:"#3E1F19",yellow_90:"#FEF8E7",yellow_80:"#FEF1D0",yellow_70:"#FEEAB8",yellow_60:"#FEE7AD",yellow_50:"#FDD673",yellow_40:"#FCC539",yellow_30:"#FCB706",yellow_20:"#D69900",yellow_10:"#966B00",yellow_05:"#5F4500",yellow_01:"#312405",green_90:"#F1FBF1",green_80:"#E3F7E3",green_70:"#D5F3D5",green_60:"#BCEBBB",green_50:"#97D39E",green_40:"#72BB82",green_30:"#579F6C",green_20:"#3C6D4A",green_10:"#2C5037",green_05:"#24432D",green_01:"#1A2924",cyan_90:"#EEF7FE",cyan_80:"#DDF0FE",cyan_70:"#CCE9FE",cyan_60:"#A9DAFD",cyan_50:"#87CBFC",cyan_40:"#57BAFD",cyan_30:"#28A9FF",cyan_20:"#2485C7",cyan_10:"#20628F",cyan_05:"#1D3F58",cyan_01:"#192A3C",blue_90:"#F8F9FB",blue_80:"#EBF1FD",blue_70:"#DFEAFF",blue_60:"#BFCAFF",blue_50:"#8DA2FF",blue_40:"#6C82FF",blue_30:blue30,blue_20:"#4340D0",blue_10:"#363498",blue_05:blue05,blue_01:"#222149",blue_30_alpha20:`${blue30}33`,blue_05_alpha20:`${blue05}33`,magenta_90:"#FCEEF7",magenta_80:"#FFE3F4",magenta_70:"#FAD4EC",magenta_60:"#F9BBE1",magenta_50:"#F8A2D6",magenta_40:"#F670C1",magenta_30:"#E83FA4",magenta_20:"#BB3183",magenta_10:"#84275E",magenta_05:"#521B3C",magenta_01:"#33182E",gray_90:"#F6F6F6",gray_80:"#EDEDEE",gray_70:"#E0E0E1",gray_60:"#CBCBCD",gray_50:"#B5B6B9",gray_40:"#A0A1A4",gray_30:"#8A8B90",gray_20:"#717279",gray_10:"#4A4C53",gray_05:"#252531",gray_01:"#1D1D29",black_100:black,black_90:fade(black,.9),black_80:fade(black,.8),black_70:fade(black,.7),black_60:fade(black,.6),black_50:fade(black,.5),black_40:fade(black,.4),black_30:fade(black,.3),black_20:fade(black,.2),black_10:fade(black,.1),black_01:fade(black,.01),black_00:fade(black,0),white_100:white,white_90:fade(white,.9),white_80:fade(white,.8),white_70:fade(white,.7),white_60:fade(white,.6),white_50:fade(white,.5),white_40:fade(white,.4),white_30:fade(white,.3),white_20:fade(white,.2),white_10:fade(white,.1),white_01:fade(white,.01),white_00:fade(white,0)};
26
26
 
27
- const transparent="transparent";const transparentShadowColor=color$1.offBlack16;const core={transparent,border:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack50,strong:color$1.fadedOffBlack72},critical:{subtle:color$1.fadedRed24,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack16,strong:color$1.fadedOffBlack32},knockout:{default:color$1.white}},background:{base:{subtle:color$1.offWhite,default:color$1.white,strong:color$1.darkBlue},instructive:{subtle:color$1.fadedBlue8,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack8,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed8,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen8,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold8,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack8,strong:color$1.fadedOffBlack16},overlay:{default:color$1.offBlack50}},foreground:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack64,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack32,strong:color$1.fadedOffBlack50},knockout:{default:color$1.white}},shadow:{transparent:{low:transparentShadowColor,mid:transparentShadowColor,high:transparentShadowColor,color:{subtle:color$1.blue_alpha20,strong:color$1.offBlack16}},chonky:{instructive:{subtle:color$1.fadedBlue,default:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack32,default:color$1.fadedOffBlack50,strong:color$1.offBlack}}}};const sharedFeedbackStrongTokens={background:core.background.neutral.strong,border:core.border.neutral.strong,text:core.foreground.knockout.default};const semanticColor$1={core,learning:{math:{foreground:{blue:"#3D7586",gold:"#946700",green:"#447A53",gray:"#5D5F66",grayH:"#3B3D45",grayI:"#21242C",purple:"#594094",purpleD:"#8351E8",pink:"#B25071",red:"#D92916"}},background:{gems:{subtle:color.magenta_90,default:color.magenta_80,strong:color.magenta_10},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_10},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_10},progress:{notStarted:{default:color.gray_60},attempted:{default:color.yellow_60},complete:{default:color.green_60}}},border:{gems:{subtle:color.magenta_80,default:color.magenta_60,strong:color.magenta_30},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_30},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_30}},foreground:{gems:{subtle:color.magenta_60,default:color.magenta_30,strong:color.magenta_10},streaks:{subtle:color.orange_60,default:color.orange_30,strong:color.orange_10},due:{subtle:color.cyan_60,default:color.cyan_20,strong:color.cyan_10},progress:{notStarted:{subtle:color.gray_50,strong:color.gray_10},attempted:{subtle:color.yellow_50,strong:color.yellow_10},complete:{strong:color.green_50}}},shadow:{progress:{notStarted:{default:color.gray_20},attempted:{default:color.yellow_30},complete:{default:color.green_30}}}},action:{primary:{progressive:{default:{border:core.transparent,background:core.background.instructive.default,foreground:core.foreground.knockout.default},hover:{border:core.border.instructive.default,background:core.background.instructive.default,foreground:core.foreground.knockout.default},press:{border:core.border.instructive.strong,background:core.background.instructive.strong,foreground:core.foreground.knockout.default}},destructive:{default:{border:core.transparent,background:core.background.critical.default,foreground:core.foreground.knockout.default},hover:{border:core.border.critical.default,background:core.background.critical.default,foreground:core.foreground.knockout.default},press:{border:core.border.critical.strong,background:core.background.critical.strong,foreground:core.foreground.knockout.default}},neutral:{default:{border:core.transparent,background:core.background.neutral.default,foreground:core.foreground.knockout.default},hover:{border:core.border.neutral.default,background:core.background.neutral.default,foreground:core.foreground.knockout.default},press:{border:core.border.neutral.strong,background:core.background.neutral.strong,foreground:core.foreground.knockout.default}},disabled:{border:core.border.disabled.strong,background:core.border.disabled.strong,foreground:core.foreground.knockout.default}},secondary:{progressive:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.instructive.default},hover:{border:core.border.instructive.default,background:core.transparent,foreground:core.foreground.instructive.default},press:{border:core.border.instructive.strong,background:core.background.instructive.subtle,foreground:core.foreground.instructive.strong}},destructive:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.critical.default},hover:{border:core.border.critical.default,background:core.transparent,foreground:core.foreground.critical.default},press:{border:core.border.critical.strong,background:core.background.critical.subtle,foreground:core.foreground.critical.strong}},neutral:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},hover:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},press:{border:core.border.neutral.strong,background:core.background.neutral.subtle,foreground:core.foreground.neutral.strong}},disabled:{border:core.border.disabled.strong,background:core.background.disabled.subtle,foreground:core.foreground.disabled.default}},tertiary:{progressive:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.instructive.default},hover:{border:core.border.instructive.default,background:core.transparent,foreground:core.foreground.instructive.default},press:{border:core.border.instructive.strong,background:core.transparent,foreground:core.foreground.instructive.strong}},destructive:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.critical.default},hover:{border:core.border.critical.default,background:core.transparent,foreground:core.foreground.critical.default},press:{border:core.border.critical.strong,background:core.transparent,foreground:core.foreground.critical.strong}},neutral:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.neutral.default},hover:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},press:{border:core.border.neutral.strong,background:core.transparent,foreground:core.foreground.neutral.strong}},disabled:{border:core.border.disabled.default,background:core.background.disabled.subtle,foreground:core.foreground.disabled.default}}},chonky:{progressive:{background:{primary:{rest:core.background.instructive.default,hover:core.background.instructive.default,press:core.background.instructive.default,selected:core.background.instructive.default},secondary:{rest:core.background.instructive.subtle,hover:core.background.instructive.subtle,press:core.background.instructive.subtle,selected:core.background.instructive.subtle},tertiary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent}},border:{primary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent},secondary:{rest:core.border.instructive.subtle,hover:core.border.instructive.subtle,press:core.border.instructive.subtle,selected:core.border.instructive.subtle},tertiary:{rest:core.transparent,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.border.instructive.subtle}},foreground:{primary:{rest:core.foreground.knockout.default,hover:core.foreground.knockout.default,press:core.foreground.knockout.default,selected:core.foreground.knockout.default},secondary:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,selected:core.foreground.instructive.strong},tertiary:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,selected:core.foreground.instructive.strong}},shadow:{primary:{rest:core.shadow.chonky.instructive.default,hover:core.shadow.chonky.instructive.default,press:core.shadow.chonky.instructive.default,selected:core.shadow.chonky.instructive.default},secondary:{rest:core.shadow.chonky.instructive.subtle,hover:core.shadow.chonky.instructive.subtle,press:core.shadow.chonky.instructive.subtle,selected:core.shadow.chonky.instructive.subtle},tertiary:{rest:core.transparent,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.subtle,selected:core.shadow.chonky.instructive.subtle}}},neutral:{background:{primary:{rest:core.background.neutral.default,hover:core.background.neutral.default,press:core.background.neutral.default,selected:core.background.neutral.default},secondary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.background.neutral.subtle},tertiary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent}},border:{primary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent},secondary:{rest:core.border.neutral.subtle,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.border.neutral.subtle},tertiary:{rest:core.transparent,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.transparent}},foreground:{primary:{rest:core.foreground.knockout.default,hover:core.foreground.knockout.default,press:core.foreground.knockout.default,selected:core.foreground.knockout.default},secondary:{rest:core.foreground.neutral.subtle,hover:core.foreground.neutral.subtle,press:core.foreground.neutral.subtle,selected:core.foreground.neutral.subtle},tertiary:{rest:core.foreground.neutral.default,hover:core.foreground.neutral.default,press:core.foreground.neutral.default,selected:core.foreground.neutral.default}},shadow:{primary:{rest:core.shadow.chonky.neutral.strong,hover:core.shadow.chonky.neutral.strong,press:core.transparent,selected:core.shadow.chonky.neutral.strong},secondary:{rest:core.shadow.chonky.neutral.subtle,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.strong,selected:core.shadow.chonky.neutral.subtle},tertiary:{rest:core.transparent,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.subtle,selected:core.shadow.chonky.instructive.subtle}}},disabled:{background:{primary:core.background.disabled.default,secondary:core.background.disabled.default,tertiary:core.background.disabled.subtle},border:{primary:core.border.disabled.default,secondary:core.border.disabled.default,tertiary:core.border.disabled.subtle},foreground:{primary:core.foreground.disabled.default,secondary:core.foreground.disabled.default,tertiary:core.foreground.disabled.default},shadow:{primary:core.shadow.chonky.neutral.subtle,secondary:core.shadow.chonky.neutral.subtle,tertiary:core.transparent}}},input:{default:{border:core.border.neutral.default,background:core.background.base.default,foreground:core.foreground.neutral.strong,placeholder:core.foreground.neutral.default},checked:{border:core.border.instructive.default,background:core.background.instructive.default,foreground:core.foreground.knockout.default},disabled:{border:core.border.disabled.default,background:color$1.offWhite,foreground:core.foreground.neutral.default,placeholder:core.foreground.neutral.default},error:{border:core.border.critical.default,background:core.background.critical.subtle,foreground:core.foreground.neutral.strong},readOnly:{background:core.background.base.default,text:core.foreground.neutral.strong,icon:core.transparent}},status:{critical:{background:core.background.critical.subtle,foreground:core.foreground.critical.default},warning:{background:core.background.warning.subtle,foreground:core.foreground.warning.default},success:{background:core.background.success.subtle,foreground:core.foreground.success.default},notice:{background:core.background.instructive.subtle,foreground:core.foreground.instructive.default},neutral:{background:core.background.neutral.subtle,foreground:core.foreground.neutral.strong}},focus:{outer:color$1.blue,inner:color$1.white},link:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,disabled:core.foreground.disabled.default},khanmigo:{primary:color$1.eggplant,secondary:color$1.fadedEggplant8},mastery:{primary:color$1.purple},feedback:{info:{subtle:{background:core.background.instructive.subtle,border:core.border.instructive.subtle,icon:core.foreground.instructive.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.instructive.default}},success:{subtle:{background:core.background.success.subtle,border:core.border.success.subtle,icon:core.foreground.success.strong,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.success.default}},warning:{subtle:{background:core.background.warning.subtle,border:core.border.warning.default,icon:core.foreground.warning.strong,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.warning.default}},critical:{subtle:{background:core.background.critical.subtle,border:core.border.critical.subtle,icon:core.foreground.critical.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.critical.default}},neutral:{subtle:{background:core.background.neutral.subtle,border:core.border.neutral.subtle,icon:core.foreground.neutral.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.neutral.subtle}}}};
27
+ const transparent="transparent";const transparentShadowColor=color$1.offBlack16;const core={transparent,border:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack50,strong:color$1.fadedOffBlack72},critical:{subtle:color$1.fadedRed24,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack16,strong:color$1.fadedOffBlack32},knockout:{default:color$1.white}},background:{base:{subtle:color$1.offWhite,default:color$1.white,strong:color$1.darkBlue},instructive:{subtle:color$1.fadedBlue8,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack8,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed8,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen8,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold8,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack8,strong:color$1.fadedOffBlack16},overlay:{default:color$1.offBlack50}},foreground:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack64,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack32,strong:color$1.fadedOffBlack50},knockout:{default:color$1.white}},shadow:{transparent:{low:transparentShadowColor,mid:transparentShadowColor,high:transparentShadowColor,color:{subtle:color$1.blue_alpha20,strong:color$1.offBlack16}},chonky:{instructive:{subtle:color$1.fadedBlue,default:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack32,default:color$1.fadedOffBlack50,strong:color$1.offBlack},disabled:{subtle:transparent,default:color$1.fadedOffBlack32}}}};const sharedFeedbackStrongTokens={background:core.background.neutral.strong,border:core.border.neutral.strong,text:core.foreground.knockout.default};const semanticColor$1={core,learning:{math:{foreground:{blue:"#3D7586",gold:"#946700",green:"#447A53",gray:"#5D5F66",grayH:"#3B3D45",grayI:"#21242C",purple:"#594094",purpleD:"#8351E8",pink:"#B25071",red:"#D92916"}},background:{gems:{subtle:color.magenta_90,default:color.magenta_80,strong:color.magenta_10},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_10},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_10},progress:{notStarted:{default:color.gray_60},attempted:{default:color.yellow_60},complete:{default:color.green_60}}},border:{gems:{subtle:color.magenta_80,default:color.magenta_60,strong:color.magenta_30},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_30},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_30}},foreground:{gems:{subtle:color.magenta_60,default:color.magenta_30,strong:color.magenta_10},streaks:{subtle:color.orange_60,default:color.orange_30,strong:color.orange_10},due:{subtle:color.cyan_60,default:color.cyan_20,strong:color.cyan_10},progress:{notStarted:{subtle:color.gray_50,strong:color.gray_10},attempted:{subtle:color.yellow_50,strong:color.yellow_10},complete:{strong:color.green_50}}},shadow:{progress:{notStarted:{default:color.gray_20},attempted:{default:color.yellow_30},complete:{default:color.green_30}}},characters:{flesh:{blue:{default:color.blue_30},cyan:{default:color.cyan_30},green:{default:color.green_30},magenta:{default:color.magenta_30},orange:{default:color.orange_30}}}},action:{primary:{progressive:{default:{border:core.transparent,background:core.background.instructive.default,foreground:core.foreground.knockout.default},hover:{border:core.border.instructive.default,background:core.background.instructive.default,foreground:core.foreground.knockout.default},press:{border:core.border.instructive.strong,background:core.background.instructive.strong,foreground:core.foreground.knockout.default}},destructive:{default:{border:core.transparent,background:core.background.critical.default,foreground:core.foreground.knockout.default},hover:{border:core.border.critical.default,background:core.background.critical.default,foreground:core.foreground.knockout.default},press:{border:core.border.critical.strong,background:core.background.critical.strong,foreground:core.foreground.knockout.default}},neutral:{default:{border:core.transparent,background:core.background.neutral.default,foreground:core.foreground.knockout.default},hover:{border:core.border.neutral.default,background:core.background.neutral.default,foreground:core.foreground.knockout.default},press:{border:core.border.neutral.strong,background:core.background.neutral.strong,foreground:core.foreground.knockout.default}},disabled:{border:core.border.disabled.strong,background:core.border.disabled.strong,foreground:core.foreground.knockout.default}},secondary:{progressive:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.instructive.default},hover:{border:core.border.instructive.default,background:core.transparent,foreground:core.foreground.instructive.default},press:{border:core.border.instructive.strong,background:core.background.instructive.subtle,foreground:core.foreground.instructive.strong}},destructive:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.critical.default},hover:{border:core.border.critical.default,background:core.transparent,foreground:core.foreground.critical.default},press:{border:core.border.critical.strong,background:core.background.critical.subtle,foreground:core.foreground.critical.strong}},neutral:{default:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},hover:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},press:{border:core.border.neutral.strong,background:core.background.neutral.subtle,foreground:core.foreground.neutral.strong}},disabled:{border:core.border.disabled.strong,background:core.background.disabled.subtle,foreground:core.foreground.disabled.default}},tertiary:{progressive:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.instructive.default},hover:{border:core.border.instructive.default,background:core.transparent,foreground:core.foreground.instructive.default},press:{border:core.border.instructive.strong,background:core.transparent,foreground:core.foreground.instructive.strong}},destructive:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.critical.default},hover:{border:core.border.critical.default,background:core.transparent,foreground:core.foreground.critical.default},press:{border:core.border.critical.strong,background:core.transparent,foreground:core.foreground.critical.strong}},neutral:{default:{border:core.transparent,background:core.transparent,foreground:core.foreground.neutral.default},hover:{border:core.border.neutral.default,background:core.transparent,foreground:core.foreground.neutral.default},press:{border:core.border.neutral.strong,background:core.transparent,foreground:core.foreground.neutral.strong}},disabled:{border:core.border.disabled.default,background:core.background.disabled.subtle,foreground:core.foreground.disabled.default}}},chonky:{progressive:{background:{primary:{rest:core.background.instructive.default,hover:core.background.instructive.default,press:core.background.instructive.default,selected:core.background.instructive.default},secondary:{rest:core.background.instructive.subtle,hover:core.background.instructive.subtle,press:core.background.instructive.subtle,selected:core.background.instructive.subtle},tertiary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent}},border:{primary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent},secondary:{rest:core.border.instructive.subtle,hover:core.border.instructive.subtle,press:core.border.instructive.subtle,selected:core.border.instructive.subtle},tertiary:{rest:core.transparent,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.border.instructive.subtle}},foreground:{primary:{rest:core.foreground.knockout.default,hover:core.foreground.knockout.default,press:core.foreground.knockout.default,selected:core.foreground.knockout.default},secondary:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,selected:core.foreground.instructive.strong},tertiary:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,selected:core.foreground.instructive.strong}},shadow:{primary:{rest:core.shadow.chonky.instructive.default,hover:core.shadow.chonky.instructive.default,press:core.shadow.chonky.instructive.default,selected:core.shadow.chonky.instructive.default},secondary:{rest:core.shadow.chonky.instructive.subtle,hover:core.shadow.chonky.instructive.subtle,press:core.shadow.chonky.instructive.subtle,selected:core.shadow.chonky.instructive.subtle},tertiary:{rest:core.transparent,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.subtle,selected:core.shadow.chonky.instructive.subtle}}},neutral:{background:{primary:{rest:core.background.neutral.default,hover:core.background.neutral.default,press:core.background.neutral.default,selected:core.background.neutral.default},secondary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.background.neutral.subtle},tertiary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent}},border:{primary:{rest:core.transparent,hover:core.transparent,press:core.transparent,selected:core.transparent},secondary:{rest:core.border.neutral.subtle,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.border.neutral.subtle},tertiary:{rest:core.transparent,hover:core.border.neutral.subtle,press:core.border.neutral.subtle,selected:core.transparent}},foreground:{primary:{rest:core.foreground.knockout.default,hover:core.foreground.knockout.default,press:core.foreground.knockout.default,selected:core.foreground.knockout.default},secondary:{rest:core.foreground.neutral.subtle,hover:core.foreground.neutral.subtle,press:core.foreground.neutral.subtle,selected:core.foreground.neutral.subtle},tertiary:{rest:core.foreground.neutral.default,hover:core.foreground.neutral.default,press:core.foreground.neutral.default,selected:core.foreground.neutral.default}},shadow:{primary:{rest:core.shadow.chonky.neutral.strong,hover:core.shadow.chonky.neutral.strong,press:core.transparent,selected:core.shadow.chonky.neutral.strong},secondary:{rest:core.shadow.chonky.neutral.subtle,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.strong,selected:core.shadow.chonky.neutral.subtle},tertiary:{rest:core.transparent,hover:core.shadow.chonky.neutral.subtle,press:core.shadow.chonky.neutral.subtle,selected:core.shadow.chonky.instructive.subtle}}},disabled:{background:{primary:core.background.disabled.default,secondary:core.background.disabled.default,tertiary:core.background.disabled.subtle},border:{primary:core.border.disabled.default,secondary:core.border.disabled.default,tertiary:core.border.disabled.subtle},foreground:{primary:core.foreground.disabled.default,secondary:core.foreground.disabled.default,tertiary:core.foreground.disabled.default},shadow:{primary:core.shadow.chonky.disabled.default,secondary:core.shadow.chonky.disabled.default,tertiary:core.shadow.chonky.disabled.subtle}}},input:{default:{border:core.border.neutral.default,background:core.background.base.default,foreground:core.foreground.neutral.strong,placeholder:core.foreground.neutral.default},checked:{border:core.border.instructive.default,background:core.background.instructive.default,foreground:core.foreground.knockout.default},disabled:{border:core.border.disabled.default,background:color$1.offWhite,foreground:core.foreground.neutral.default,placeholder:core.foreground.neutral.default},error:{border:core.border.critical.default,background:core.background.critical.subtle,foreground:core.foreground.neutral.strong},readOnly:{background:core.background.base.default,text:core.foreground.neutral.strong,icon:core.transparent}},status:{critical:{background:core.background.critical.subtle,foreground:core.foreground.critical.default},warning:{background:core.background.warning.subtle,foreground:core.foreground.warning.default},success:{background:core.background.success.subtle,foreground:core.foreground.success.default},notice:{background:core.background.instructive.subtle,foreground:core.foreground.instructive.default},neutral:{background:core.background.neutral.subtle,foreground:core.foreground.neutral.strong}},focus:{outer:color$1.blue,inner:color$1.white},link:{rest:core.foreground.instructive.default,hover:core.foreground.instructive.default,press:core.foreground.instructive.strong,disabled:core.foreground.disabled.default},khanmigo:{primary:color$1.eggplant,secondary:color$1.fadedEggplant8},mastery:{primary:color$1.purple},feedback:{info:{subtle:{background:core.background.instructive.subtle,border:core.border.instructive.subtle,icon:core.foreground.instructive.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.instructive.default}},success:{subtle:{background:core.background.success.subtle,border:core.border.success.subtle,icon:core.foreground.success.strong,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.success.default}},warning:{subtle:{background:core.background.warning.subtle,border:core.border.warning.default,icon:core.foreground.warning.strong,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.warning.default}},critical:{subtle:{background:core.background.critical.subtle,border:core.border.critical.subtle,icon:core.foreground.critical.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.critical.default}},neutral:{subtle:{background:core.background.neutral.subtle,border:core.border.neutral.subtle,icon:core.foreground.neutral.default,text:core.foreground.neutral.strong},strong:{...sharedFeedbackStrongTokens,icon:core.foreground.neutral.subtle}}}};
28
28
 
29
29
  const border$1={radius:{radius_0:remToPx(sizing$1.size_0),radius_010:remToPx(sizing$1.size_010),radius_040:remToPx(sizing$1.size_040),radius_080:remToPx(sizing$1.size_080),radius_120:remToPx(sizing$1.size_120),radius_240:remToPx(sizing$1.size_240),radius_full:"50%"},width:{none:remToPx(sizing$1.size_0),thin:remToPx(sizing$1.size_010),medium:remToPx(sizing$1.size_020),thick:remToPx(sizing$1.size_040)}};
30
30
 
package/dist/theme/default.d.ts CHANGED
@@ -230,6 +230,10 @@ declare const _default: {
230
230
  default: string;
231
231
  strong: string;
232
232
  };
233
+ disabled: {
234
+ subtle: string;
235
+ default: string;
236
+ };
233
237
  };
234
238
  };
235
239
  };
@@ -336,6 +340,25 @@ declare const _default: {
336
340
  };
337
341
  };
338
342
  };
343
+ characters: {
344
+ flesh: {
345
+ blue: {
346
+ default: string;
347
+ };
348
+ cyan: {
349
+ default: string;
350
+ };
351
+ green: {
352
+ default: string;
353
+ };
354
+ magenta: {
355
+ default: string;
356
+ };
357
+ orange: {
358
+ default: string;
359
+ };
360
+ };
361
+ };
339
362
  };
340
363
  action: {
341
364
  primary: {
package/dist/theme/semantic/semantic-color-syl-dark.d.ts CHANGED
@@ -131,6 +131,10 @@ export declare const semanticColor: {
131
131
  default: string;
132
132
  strong: string;
133
133
  };
134
+ disabled: {
135
+ subtle: string;
136
+ default: string;
137
+ };
134
138
  };
135
139
  };
136
140
  };
@@ -237,6 +241,25 @@ export declare const semanticColor: {
237
241
  };
238
242
  };
239
243
  };
244
+ characters: {
245
+ flesh: {
246
+ blue: {
247
+ default: string;
248
+ };
249
+ cyan: {
250
+ default: string;
251
+ };
252
+ green: {
253
+ default: string;
254
+ };
255
+ magenta: {
256
+ default: string;
257
+ };
258
+ orange: {
259
+ default: string;
260
+ };
261
+ };
262
+ };
240
263
  };
241
264
  action: {
242
265
  primary: {
package/dist/theme/semantic/semantic-color-thunderblocks.d.ts CHANGED
@@ -131,6 +131,10 @@ export declare const semanticColor: {
131
131
  default: string;
132
132
  strong: string;
133
133
  };
134
+ disabled: {
135
+ subtle: string;
136
+ default: string;
137
+ };
134
138
  };
135
139
  };
136
140
  };
@@ -237,6 +241,25 @@ export declare const semanticColor: {
237
241
  };
238
242
  };
239
243
  };
244
+ characters: {
245
+ flesh: {
246
+ blue: {
247
+ default: string;
248
+ };
249
+ cyan: {
250
+ default: string;
251
+ };
252
+ green: {
253
+ default: string;
254
+ };
255
+ magenta: {
256
+ default: string;
257
+ };
258
+ orange: {
259
+ default: string;
260
+ };
261
+ };
262
+ };
240
263
  };
241
264
  action: {
242
265
  primary: {
package/dist/theme/semantic/semantic-color.d.ts CHANGED
@@ -139,6 +139,10 @@ export declare const semanticColor: {
139
139
  default: string;
140
140
  strong: string;
141
141
  };
142
+ disabled: {
143
+ subtle: string;
144
+ default: string;
145
+ };
142
146
  };
143
147
  };
144
148
  };
@@ -256,6 +260,25 @@ export declare const semanticColor: {
256
260
  };
257
261
  };
258
262
  };
263
+ characters: {
264
+ flesh: {
265
+ blue: {
266
+ default: string;
267
+ };
268
+ cyan: {
269
+ default: string;
270
+ };
271
+ green: {
272
+ default: string;
273
+ };
274
+ magenta: {
275
+ default: string;
276
+ };
277
+ orange: {
278
+ default: string;
279
+ };
280
+ };
281
+ };
259
282
  };
260
283
  /**
261
284
  * For buttons, links, and controls to communicate the presence and meaning
package/dist/theme/syl-dark.d.ts CHANGED
@@ -221,6 +221,10 @@ declare const _default: {
221
221
  default: string;
222
222
  strong: string;
223
223
  };
224
+ disabled: {
225
+ subtle: string;
226
+ default: string;
227
+ };
224
228
  };
225
229
  };
226
230
  };
@@ -327,6 +331,25 @@ declare const _default: {
327
331
  };
328
332
  };
329
333
  };
334
+ characters: {
335
+ flesh: {
336
+ blue: {
337
+ default: string;
338
+ };
339
+ cyan: {
340
+ default: string;
341
+ };
342
+ green: {
343
+ default: string;
344
+ };
345
+ magenta: {
346
+ default: string;
347
+ };
348
+ orange: {
349
+ default: string;
350
+ };
351
+ };
352
+ };
330
353
  };
331
354
  action: {
332
355
  primary: {
package/dist/theme/thunderblocks.d.ts CHANGED
@@ -221,6 +221,10 @@ declare const _default: {
221
221
  default: string;
222
222
  strong: string;
223
223
  };
224
+ disabled: {
225
+ subtle: string;
226
+ default: string;
227
+ };
224
228
  };
225
229
  };
226
230
  };
@@ -327,6 +331,25 @@ declare const _default: {
327
331
  };
328
332
  };
329
333
  };
334
+ characters: {
335
+ flesh: {
336
+ blue: {
337
+ default: string;
338
+ };
339
+ cyan: {
340
+ default: string;
341
+ };
342
+ green: {
343
+ default: string;
344
+ };
345
+ magenta: {
346
+ default: string;
347
+ };
348
+ orange: {
349
+ default: string;
350
+ };
351
+ };
352
+ };
330
353
  };
331
354
  action: {
332
355
  primary: {
package/dist/tokens/theme.d.ts CHANGED
@@ -221,6 +221,10 @@ declare const _default: {
221
221
  default: string;
222
222
  strong: string;
223
223
  };
224
+ disabled: {
225
+ subtle: string;
226
+ default: string;
227
+ };
224
228
  };
225
229
  };
226
230
  };
@@ -327,6 +331,25 @@ declare const _default: {
327
331
  };
328
332
  };
329
333
  };
334
+ characters: {
335
+ flesh: {
336
+ blue: {
337
+ default: string;
338
+ };
339
+ cyan: {
340
+ default: string;
341
+ };
342
+ green: {
343
+ default: string;
344
+ };
345
+ magenta: {
346
+ default: string;
347
+ };
348
+ orange: {
349
+ default: string;
350
+ };
351
+ };
352
+ };
330
353
  };
331
354
  action: {
332
355
  primary: {
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Core primitive design tokens for Web Wonder Blocks",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "16.5.0",
6
+ "version": "16.7.0",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },