@khanacademy/wonder-blocks-tokens 17.2.0 → 18.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +20 -0
- package/dist/css/index.css +15 -12
- package/dist/css/vars.css +15 -12
- package/dist/es/index.js +2 -2
- package/dist/index.d.ts +8 -1
- package/dist/index.js +2 -2
- package/dist/theme/default.d.ts +8 -1
- package/dist/theme/primitive/font.d.ts +0 -1
- package/dist/theme/semantic/internal/primitive-font-syl-dark.d.ts +0 -1
- package/dist/theme/semantic/internal/primitive-font-thunderblocks.d.ts +0 -1
- package/dist/theme/semantic/semantic-color-syl-dark.d.ts +8 -0
- package/dist/theme/semantic/semantic-color-thunderblocks.d.ts +8 -0
- package/dist/theme/semantic/semantic-color.d.ts +8 -0
- package/dist/theme/syl-dark.d.ts +8 -1
- package/dist/theme/thunderblocks.d.ts +8 -1
- package/dist/tokens/theme.d.ts +8 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-tokens@
|
|
2
|
+
> @khanacademy/wonder-blocks-tokens@18.0.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,25 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-tokens
|
|
2
2
|
|
|
3
|
+
## 18.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 04522d4: Remove the `font.body.lineHeight.large` token. This token was originally added to provide backwards compatibility with the default theme while building the ThunderBlocks theme. Now that typography uses the new `Heading` and `BodyText` components (which reference the correct tokens), this token is no longer needed.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 5b4fed3: Update graphics role background tokens (administrator, parent, teacher) to use the `60` palette value for consistency across roles
|
|
12
|
+
|
|
13
|
+
## 17.3.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- 357a19c: Add `semanticColor.learning.embeddedContent.background.default` and `semanticColor.learning.embeddedContent.foreground.default` tokens. These use the Thunderblocks `black_100` and `gray_90` primitives respectively and remain consistent across all themes.
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- 6e4158c: Update the SYL Dark `action.secondary.neutral` background tokens (default, hover, and press states) to use `core.background.base.default`
|
|
22
|
+
|
|
3
23
|
## 17.2.0
|
|
4
24
|
|
|
5
25
|
### Minor Changes
|
package/dist/css/index.css
CHANGED
|
@@ -574,7 +574,6 @@
|
|
|
574
574
|
--wb-font-body-lineHeight-xsmall: 1.6rem;
|
|
575
575
|
--wb-font-body-lineHeight-small: 1.8rem;
|
|
576
576
|
--wb-font-body-lineHeight-medium: 2rem;
|
|
577
|
-
--wb-font-body-lineHeight-large: 2.2rem;
|
|
578
577
|
--wb-font-heading-size-small: 1.2rem;
|
|
579
578
|
--wb-font-heading-size-medium: 2rem;
|
|
580
579
|
--wb-font-heading-size-large: 2.4rem;
|
|
@@ -717,13 +716,13 @@
|
|
|
717
716
|
--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
|
|
718
717
|
--wb-semanticColor-graphics-role-all-current-background: #F8F9FB;
|
|
719
718
|
--wb-semanticColor-graphics-role-all-current-foreground: #EBF1FD;
|
|
720
|
-
--wb-semanticColor-graphics-role-administrator-background: #
|
|
719
|
+
--wb-semanticColor-graphics-role-administrator-background: #A9DAFD;
|
|
721
720
|
--wb-semanticColor-graphics-role-administrator-foreground: #57BAFD;
|
|
722
721
|
--wb-semanticColor-graphics-role-learner-background: #FEBFB1;
|
|
723
722
|
--wb-semanticColor-graphics-role-learner-foreground: #F8551A;
|
|
724
|
-
--wb-semanticColor-graphics-role-parent-background: #
|
|
723
|
+
--wb-semanticColor-graphics-role-parent-background: #BCEBBB;
|
|
725
724
|
--wb-semanticColor-graphics-role-parent-foreground: #72BB82;
|
|
726
|
-
--wb-semanticColor-graphics-role-teacher-background: #
|
|
725
|
+
--wb-semanticColor-graphics-role-teacher-background: #FEE7AD;
|
|
727
726
|
--wb-semanticColor-graphics-role-teacher-foreground: #FCB706;
|
|
728
727
|
--wb-semanticColor-graphics-streaks-background-subtle: #FEE9E5;
|
|
729
728
|
--wb-semanticColor-graphics-streaks-background-default: #FEDFD8;
|
|
@@ -742,6 +741,8 @@
|
|
|
742
741
|
--wb-semanticColor-learning-math-foreground-purpleD: #8351E8;
|
|
743
742
|
--wb-semanticColor-learning-math-foreground-pink: #B25071;
|
|
744
743
|
--wb-semanticColor-learning-math-foreground-red: #D92916;
|
|
744
|
+
--wb-semanticColor-learning-embeddedContent-background-default: #151521;
|
|
745
|
+
--wb-semanticColor-learning-embeddedContent-foreground-default: #F6F6F6;
|
|
745
746
|
--wb-semanticColor-learning-background-gems-subtle: #FCEEF7;
|
|
746
747
|
--wb-semanticColor-learning-background-gems-default: #FFE3F4;
|
|
747
748
|
--wb-semanticColor-learning-background-gems-strong: #84275E;
|
|
@@ -1146,7 +1147,6 @@
|
|
|
1146
1147
|
--wb-font-body-lineHeight-xsmall: var(--wb-sizing-size_160);
|
|
1147
1148
|
--wb-font-body-lineHeight-small: var(--wb-sizing-size_180);
|
|
1148
1149
|
--wb-font-body-lineHeight-medium: var(--wb-sizing-size_240);
|
|
1149
|
-
--wb-font-body-lineHeight-large: 2.2rem;
|
|
1150
1150
|
--wb-font-heading-size-small: var(--wb-sizing-size_160);
|
|
1151
1151
|
--wb-font-heading-size-medium: var(--wb-sizing-size_180);
|
|
1152
1152
|
--wb-font-heading-size-large: var(--wb-sizing-size_200);
|
|
@@ -1314,6 +1314,8 @@
|
|
|
1314
1314
|
--wb-semanticColor-learning-math-foreground-purpleD: #8DA2FF;
|
|
1315
1315
|
--wb-semanticColor-learning-math-foreground-pink: #F8A2D6;
|
|
1316
1316
|
--wb-semanticColor-learning-math-foreground-red: #FBB1B1;
|
|
1317
|
+
--wb-semanticColor-learning-embeddedContent-background-default: #151521;
|
|
1318
|
+
--wb-semanticColor-learning-embeddedContent-foreground-default: #F6F6F6;
|
|
1317
1319
|
--wb-semanticColor-learning-background-gems-subtle: #84275E;
|
|
1318
1320
|
--wb-semanticColor-learning-background-gems-default: #33182E;
|
|
1319
1321
|
--wb-semanticColor-learning-background-gems-strong: #BB3183;
|
|
@@ -1436,13 +1438,13 @@
|
|
|
1436
1438
|
--wb-semanticColor-action-secondary-destructive-press-background: #3B141A;
|
|
1437
1439
|
--wb-semanticColor-action-secondary-destructive-press-foreground: #F97F7F;
|
|
1438
1440
|
--wb-semanticColor-action-secondary-neutral-default-border: #8A8B90;
|
|
1439
|
-
--wb-semanticColor-action-secondary-neutral-default-background:
|
|
1441
|
+
--wb-semanticColor-action-secondary-neutral-default-background: #252531;
|
|
1440
1442
|
--wb-semanticColor-action-secondary-neutral-default-foreground: #CBCBCD;
|
|
1441
1443
|
--wb-semanticColor-action-secondary-neutral-hover-border: #CBCBCD;
|
|
1442
|
-
--wb-semanticColor-action-secondary-neutral-hover-background:
|
|
1444
|
+
--wb-semanticColor-action-secondary-neutral-hover-background: #252531;
|
|
1443
1445
|
--wb-semanticColor-action-secondary-neutral-hover-foreground: #EDEDEE;
|
|
1444
1446
|
--wb-semanticColor-action-secondary-neutral-press-border: #CBCBCD;
|
|
1445
|
-
--wb-semanticColor-action-secondary-neutral-press-background:
|
|
1447
|
+
--wb-semanticColor-action-secondary-neutral-press-background: #252531;
|
|
1446
1448
|
--wb-semanticColor-action-secondary-neutral-press-foreground: #EDEDEE;
|
|
1447
1449
|
--wb-semanticColor-action-secondary-disabled-border: #4A4C53;
|
|
1448
1450
|
--wb-semanticColor-action-secondary-disabled-background: #4A4C53;
|
|
@@ -1718,7 +1720,6 @@
|
|
|
1718
1720
|
--wb-font-body-lineHeight-xsmall: var(--wb-sizing-size_160);
|
|
1719
1721
|
--wb-font-body-lineHeight-small: var(--wb-sizing-size_180);
|
|
1720
1722
|
--wb-font-body-lineHeight-medium: var(--wb-sizing-size_240);
|
|
1721
|
-
--wb-font-body-lineHeight-large: 2.2rem;
|
|
1722
1723
|
--wb-font-heading-size-small: var(--wb-sizing-size_160);
|
|
1723
1724
|
--wb-font-heading-size-medium: var(--wb-sizing-size_180);
|
|
1724
1725
|
--wb-font-heading-size-large: var(--wb-sizing-size_200);
|
|
@@ -1861,13 +1862,13 @@
|
|
|
1861
1862
|
--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
|
|
1862
1863
|
--wb-semanticColor-graphics-role-all-current-background: #F8F9FB;
|
|
1863
1864
|
--wb-semanticColor-graphics-role-all-current-foreground: #EBF1FD;
|
|
1864
|
-
--wb-semanticColor-graphics-role-administrator-background: #
|
|
1865
|
+
--wb-semanticColor-graphics-role-administrator-background: #A9DAFD;
|
|
1865
1866
|
--wb-semanticColor-graphics-role-administrator-foreground: #57BAFD;
|
|
1866
1867
|
--wb-semanticColor-graphics-role-learner-background: #FEBFB1;
|
|
1867
1868
|
--wb-semanticColor-graphics-role-learner-foreground: #F8551A;
|
|
1868
|
-
--wb-semanticColor-graphics-role-parent-background: #
|
|
1869
|
+
--wb-semanticColor-graphics-role-parent-background: #BCEBBB;
|
|
1869
1870
|
--wb-semanticColor-graphics-role-parent-foreground: #72BB82;
|
|
1870
|
-
--wb-semanticColor-graphics-role-teacher-background: #
|
|
1871
|
+
--wb-semanticColor-graphics-role-teacher-background: #FEE7AD;
|
|
1871
1872
|
--wb-semanticColor-graphics-role-teacher-foreground: #FCB706;
|
|
1872
1873
|
--wb-semanticColor-graphics-streaks-background-subtle: #FEE9E5;
|
|
1873
1874
|
--wb-semanticColor-graphics-streaks-background-default: #FEDFD8;
|
|
@@ -1886,6 +1887,8 @@
|
|
|
1886
1887
|
--wb-semanticColor-learning-math-foreground-purpleD: #363498;
|
|
1887
1888
|
--wb-semanticColor-learning-math-foreground-pink: #84275E;
|
|
1888
1889
|
--wb-semanticColor-learning-math-foreground-red: #BE2626;
|
|
1890
|
+
--wb-semanticColor-learning-embeddedContent-background-default: #151521;
|
|
1891
|
+
--wb-semanticColor-learning-embeddedContent-foreground-default: #F6F6F6;
|
|
1889
1892
|
--wb-semanticColor-learning-background-gems-subtle: #FCEEF7;
|
|
1890
1893
|
--wb-semanticColor-learning-background-gems-default: #FFE3F4;
|
|
1891
1894
|
--wb-semanticColor-learning-background-gems-strong: #84275E;
|
package/dist/css/vars.css
CHANGED
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
--wb-font-body-lineHeight-xsmall: 1.6rem;
|
|
28
28
|
--wb-font-body-lineHeight-small: 1.8rem;
|
|
29
29
|
--wb-font-body-lineHeight-medium: 2rem;
|
|
30
|
-
--wb-font-body-lineHeight-large: 2.2rem;
|
|
31
30
|
--wb-font-heading-size-small: 1.2rem;
|
|
32
31
|
--wb-font-heading-size-medium: 2rem;
|
|
33
32
|
--wb-font-heading-size-large: 2.4rem;
|
|
@@ -170,13 +169,13 @@
|
|
|
170
169
|
--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
|
|
171
170
|
--wb-semanticColor-graphics-role-all-current-background: #F8F9FB;
|
|
172
171
|
--wb-semanticColor-graphics-role-all-current-foreground: #EBF1FD;
|
|
173
|
-
--wb-semanticColor-graphics-role-administrator-background: #
|
|
172
|
+
--wb-semanticColor-graphics-role-administrator-background: #A9DAFD;
|
|
174
173
|
--wb-semanticColor-graphics-role-administrator-foreground: #57BAFD;
|
|
175
174
|
--wb-semanticColor-graphics-role-learner-background: #FEBFB1;
|
|
176
175
|
--wb-semanticColor-graphics-role-learner-foreground: #F8551A;
|
|
177
|
-
--wb-semanticColor-graphics-role-parent-background: #
|
|
176
|
+
--wb-semanticColor-graphics-role-parent-background: #BCEBBB;
|
|
178
177
|
--wb-semanticColor-graphics-role-parent-foreground: #72BB82;
|
|
179
|
-
--wb-semanticColor-graphics-role-teacher-background: #
|
|
178
|
+
--wb-semanticColor-graphics-role-teacher-background: #FEE7AD;
|
|
180
179
|
--wb-semanticColor-graphics-role-teacher-foreground: #FCB706;
|
|
181
180
|
--wb-semanticColor-graphics-streaks-background-subtle: #FEE9E5;
|
|
182
181
|
--wb-semanticColor-graphics-streaks-background-default: #FEDFD8;
|
|
@@ -195,6 +194,8 @@
|
|
|
195
194
|
--wb-semanticColor-learning-math-foreground-purpleD: #8351E8;
|
|
196
195
|
--wb-semanticColor-learning-math-foreground-pink: #B25071;
|
|
197
196
|
--wb-semanticColor-learning-math-foreground-red: #D92916;
|
|
197
|
+
--wb-semanticColor-learning-embeddedContent-background-default: #151521;
|
|
198
|
+
--wb-semanticColor-learning-embeddedContent-foreground-default: #F6F6F6;
|
|
198
199
|
--wb-semanticColor-learning-background-gems-subtle: #FCEEF7;
|
|
199
200
|
--wb-semanticColor-learning-background-gems-default: #FFE3F4;
|
|
200
201
|
--wb-semanticColor-learning-background-gems-strong: #84275E;
|
|
@@ -599,7 +600,6 @@
|
|
|
599
600
|
--wb-font-body-lineHeight-xsmall: var(--wb-sizing-size_160);
|
|
600
601
|
--wb-font-body-lineHeight-small: var(--wb-sizing-size_180);
|
|
601
602
|
--wb-font-body-lineHeight-medium: var(--wb-sizing-size_240);
|
|
602
|
-
--wb-font-body-lineHeight-large: 2.2rem;
|
|
603
603
|
--wb-font-heading-size-small: var(--wb-sizing-size_160);
|
|
604
604
|
--wb-font-heading-size-medium: var(--wb-sizing-size_180);
|
|
605
605
|
--wb-font-heading-size-large: var(--wb-sizing-size_200);
|
|
@@ -767,6 +767,8 @@
|
|
|
767
767
|
--wb-semanticColor-learning-math-foreground-purpleD: #8DA2FF;
|
|
768
768
|
--wb-semanticColor-learning-math-foreground-pink: #F8A2D6;
|
|
769
769
|
--wb-semanticColor-learning-math-foreground-red: #FBB1B1;
|
|
770
|
+
--wb-semanticColor-learning-embeddedContent-background-default: #151521;
|
|
771
|
+
--wb-semanticColor-learning-embeddedContent-foreground-default: #F6F6F6;
|
|
770
772
|
--wb-semanticColor-learning-background-gems-subtle: #84275E;
|
|
771
773
|
--wb-semanticColor-learning-background-gems-default: #33182E;
|
|
772
774
|
--wb-semanticColor-learning-background-gems-strong: #BB3183;
|
|
@@ -889,13 +891,13 @@
|
|
|
889
891
|
--wb-semanticColor-action-secondary-destructive-press-background: #3B141A;
|
|
890
892
|
--wb-semanticColor-action-secondary-destructive-press-foreground: #F97F7F;
|
|
891
893
|
--wb-semanticColor-action-secondary-neutral-default-border: #8A8B90;
|
|
892
|
-
--wb-semanticColor-action-secondary-neutral-default-background:
|
|
894
|
+
--wb-semanticColor-action-secondary-neutral-default-background: #252531;
|
|
893
895
|
--wb-semanticColor-action-secondary-neutral-default-foreground: #CBCBCD;
|
|
894
896
|
--wb-semanticColor-action-secondary-neutral-hover-border: #CBCBCD;
|
|
895
|
-
--wb-semanticColor-action-secondary-neutral-hover-background:
|
|
897
|
+
--wb-semanticColor-action-secondary-neutral-hover-background: #252531;
|
|
896
898
|
--wb-semanticColor-action-secondary-neutral-hover-foreground: #EDEDEE;
|
|
897
899
|
--wb-semanticColor-action-secondary-neutral-press-border: #CBCBCD;
|
|
898
|
-
--wb-semanticColor-action-secondary-neutral-press-background:
|
|
900
|
+
--wb-semanticColor-action-secondary-neutral-press-background: #252531;
|
|
899
901
|
--wb-semanticColor-action-secondary-neutral-press-foreground: #EDEDEE;
|
|
900
902
|
--wb-semanticColor-action-secondary-disabled-border: #4A4C53;
|
|
901
903
|
--wb-semanticColor-action-secondary-disabled-background: #4A4C53;
|
|
@@ -1171,7 +1173,6 @@
|
|
|
1171
1173
|
--wb-font-body-lineHeight-xsmall: var(--wb-sizing-size_160);
|
|
1172
1174
|
--wb-font-body-lineHeight-small: var(--wb-sizing-size_180);
|
|
1173
1175
|
--wb-font-body-lineHeight-medium: var(--wb-sizing-size_240);
|
|
1174
|
-
--wb-font-body-lineHeight-large: 2.2rem;
|
|
1175
1176
|
--wb-font-heading-size-small: var(--wb-sizing-size_160);
|
|
1176
1177
|
--wb-font-heading-size-medium: var(--wb-sizing-size_180);
|
|
1177
1178
|
--wb-font-heading-size-large: var(--wb-sizing-size_200);
|
|
@@ -1314,13 +1315,13 @@
|
|
|
1314
1315
|
--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
|
|
1315
1316
|
--wb-semanticColor-graphics-role-all-current-background: #F8F9FB;
|
|
1316
1317
|
--wb-semanticColor-graphics-role-all-current-foreground: #EBF1FD;
|
|
1317
|
-
--wb-semanticColor-graphics-role-administrator-background: #
|
|
1318
|
+
--wb-semanticColor-graphics-role-administrator-background: #A9DAFD;
|
|
1318
1319
|
--wb-semanticColor-graphics-role-administrator-foreground: #57BAFD;
|
|
1319
1320
|
--wb-semanticColor-graphics-role-learner-background: #FEBFB1;
|
|
1320
1321
|
--wb-semanticColor-graphics-role-learner-foreground: #F8551A;
|
|
1321
|
-
--wb-semanticColor-graphics-role-parent-background: #
|
|
1322
|
+
--wb-semanticColor-graphics-role-parent-background: #BCEBBB;
|
|
1322
1323
|
--wb-semanticColor-graphics-role-parent-foreground: #72BB82;
|
|
1323
|
-
--wb-semanticColor-graphics-role-teacher-background: #
|
|
1324
|
+
--wb-semanticColor-graphics-role-teacher-background: #FEE7AD;
|
|
1324
1325
|
--wb-semanticColor-graphics-role-teacher-foreground: #FCB706;
|
|
1325
1326
|
--wb-semanticColor-graphics-streaks-background-subtle: #FEE9E5;
|
|
1326
1327
|
--wb-semanticColor-graphics-streaks-background-default: #FEDFD8;
|
|
@@ -1339,6 +1340,8 @@
|
|
|
1339
1340
|
--wb-semanticColor-learning-math-foreground-purpleD: #363498;
|
|
1340
1341
|
--wb-semanticColor-learning-math-foreground-pink: #84275E;
|
|
1341
1342
|
--wb-semanticColor-learning-math-foreground-red: #BE2626;
|
|
1343
|
+
--wb-semanticColor-learning-embeddedContent-background-default: #151521;
|
|
1344
|
+
--wb-semanticColor-learning-embeddedContent-foreground-default: #F6F6F6;
|
|
1342
1345
|
--wb-semanticColor-learning-background-gems-subtle: #FCEEF7;
|
|
1343
1346
|
--wb-semanticColor-learning-background-gems-default: #FFE3F4;
|
|
1344
1347
|
--wb-semanticColor-learning-background-gems-strong: #84275E;
|
package/dist/es/index.js
CHANGED
|
@@ -16,11 +16,11 @@ const CSS_VAR_PREFIX="--wb-";
|
|
|
16
16
|
|
|
17
17
|
const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_040:pxToRem(4),size_060:pxToRem(6),size_080:pxToRem(8),size_100:pxToRem(10),size_120:pxToRem(12),size_140:pxToRem(14),size_160:pxToRem(16),size_180:pxToRem(18),size_200:pxToRem(20),size_220:pxToRem(22),size_240:pxToRem(24),size_260:pxToRem(26),size_280:pxToRem(28),size_320:pxToRem(32),size_360:pxToRem(36),size_400:pxToRem(40),size_440:pxToRem(44),size_480:pxToRem(48),size_560:pxToRem(56),size_640:pxToRem(64),size_720:pxToRem(72),size_800:pxToRem(80),size_880:pxToRem(88),size_960:pxToRem(96)};
|
|
18
18
|
|
|
19
|
-
const fontFamily={sans:'"Lato", "Noto Sans", "Helvetica", "Corbel", 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},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
|
|
19
|
+
const fontFamily={sans:'"Lato", "Noto Sans", "Helvetica", "Corbel", 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},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}},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
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)};const graphicsPalette={red_90:color.red_90,red_80:color.red_80,red_70:color.red_70,red_60:color.red_60,red_50:color.red_50,red_40:color.red_40,red_30:color.red_30,red_20:color.red_20,red_10:color.red_10,red_05:color.red_05,red_01:color.red_01,orange_90:color.orange_90,orange_80:color.orange_80,orange_70:color.orange_70,orange_60:color.orange_60,orange_50:color.orange_50,orange_40:color.orange_40,orange_30:color.orange_30,orange_20:color.orange_20,orange_10:color.orange_10,orange_05:color.orange_05,orange_01:color.orange_01,yellow_90:color.yellow_90,yellow_80:color.yellow_80,yellow_70:color.yellow_70,yellow_60:color.yellow_60,yellow_50:color.yellow_50,yellow_40:color.yellow_40,yellow_30:color.yellow_30,yellow_20:color.yellow_20,yellow_10:color.yellow_10,yellow_05:color.yellow_05,yellow_01:color.yellow_01,green_90:color.green_90,green_80:color.green_80,green_70:color.green_70,green_60:color.green_60,green_50:color.green_50,green_40:color.green_40,green_30:color.green_30,green_20:color.green_20,green_10:color.green_10,green_05:color.green_05,green_01:color.green_01,cyan_90:color.cyan_90,cyan_80:color.cyan_80,cyan_70:color.cyan_70,cyan_60:color.cyan_60,cyan_50:color.cyan_50,cyan_40:color.cyan_40,cyan_30:color.cyan_30,cyan_20:color.cyan_20,cyan_10:color.cyan_10,cyan_05:color.cyan_05,cyan_01:color.cyan_01,blue_90:color.blue_90,blue_80:color.blue_80,blue_70:color.blue_70,blue_60:color.blue_60,blue_50:color.blue_50,blue_40:color.blue_40,blue_30:color.blue_30,blue_20:color.blue_20,blue_10:color.blue_10,blue_05:color.blue_05,blue_01:color.blue_01,magenta_90:color.magenta_90,magenta_80:color.magenta_80,magenta_70:color.magenta_70,magenta_60:color.magenta_60,magenta_50:color.magenta_50,magenta_40:color.magenta_40,magenta_30:color.magenta_30,magenta_20:color.magenta_20,magenta_10:color.magenta_10,magenta_05:color.magenta_05,magenta_01:color.magenta_01,gray_90:color.gray_90,gray_80:color.gray_80,gray_70:color.gray_70,gray_60:color.gray_60,gray_50:color.gray_50,gray_40:color.gray_40,gray_30:color.gray_30,gray_20:color.gray_20,gray_10:color.gray_10,gray_05:color.gray_05,gray_01:color.gray_01,black_100:color.black_100,white_100:color.white_100};
|
|
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},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 graphics={characters:{flesh:{blue:{background:{subtle:graphicsPalette.blue_40,default:graphicsPalette.blue_30,strong:graphicsPalette.blue_20},border:{subtle:graphicsPalette.blue_40,default:graphicsPalette.blue_20,strong:graphicsPalette.blue_10}},cyan:{background:{subtle:graphicsPalette.cyan_40,default:graphicsPalette.cyan_30,strong:graphicsPalette.cyan_20},border:{subtle:graphicsPalette.cyan_40,default:graphicsPalette.cyan_20,strong:graphicsPalette.cyan_10}},green:{background:{subtle:graphicsPalette.green_40,default:graphicsPalette.green_30,strong:graphicsPalette.green_20},border:{subtle:graphicsPalette.green_40,default:graphicsPalette.green_20,strong:graphicsPalette.green_10}},magenta:{background:{subtle:graphicsPalette.magenta_40,default:graphicsPalette.magenta_30,strong:graphicsPalette.magenta_20},border:{subtle:graphicsPalette.magenta_40,default:graphicsPalette.magenta_20,strong:graphicsPalette.magenta_10}},orange:{background:{subtle:graphicsPalette.orange_40,default:graphicsPalette.orange_30,strong:graphicsPalette.orange_20},border:{subtle:graphicsPalette.orange_40,default:graphicsPalette.orange_20,strong:graphicsPalette.orange_10}}}},externalBrands:{google:{red:"#EA4335",yellow:"#FBBC05",green:"#34A853",blue:"#4285F4"},facebook:{blue:"#1877F2",white:"#FFFFFF"},microsoft:{red:"#F35325",green:"#81BC06",blue:"#05A6F0",yellow:"#FFBA08"},apple:{brand:"#000000"}},gems:{background:{subtle:graphicsPalette.magenta_80,default:graphicsPalette.magenta_70},foreground:{subtle:graphicsPalette.magenta_60,default:graphicsPalette.magenta_30,strong:graphicsPalette.magenta_20}},progress:{attempted:{background:{subtle:graphicsPalette.yellow_90,default:graphicsPalette.yellow_70},foreground:{subtle:graphicsPalette.yellow_50,strong:graphicsPalette.yellow_10}},notStarted:{foreground:{subtle:graphicsPalette.gray_50,strong:graphicsPalette.gray_10}},complete:{background:{subtle:graphicsPalette.green_90,default:graphicsPalette.green_70},foreground:{strong:graphicsPalette.green_10}}},role:{all:{current:{background:graphicsPalette.blue_90,foreground:graphicsPalette.blue_80}},administrator:{background:graphicsPalette.cyan_70,foreground:graphicsPalette.cyan_40},learner:{background:graphicsPalette.orange_60,foreground:graphicsPalette.orange_30},parent:{background:graphicsPalette.green_70,foreground:graphicsPalette.green_40},teacher:{background:graphicsPalette.yellow_50,foreground:graphicsPalette.yellow_30}},streaks:{background:{subtle:graphicsPalette.orange_80,default:graphicsPalette.orange_70},foreground:{subtle:graphicsPalette.orange_60,default:graphicsPalette.orange_30,strong:graphicsPalette.orange_20}},neutral:{background:{subtle:graphicsPalette.white_100,default:graphicsPalette.blue_90}}};const semanticColor$1={core,graphics,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}},characters:{flesh:{blue:{subtle:color.blue_40,default:color.blue_30,strong:color.blue_20},cyan:{subtle:color.cyan_40,default:color.cyan_30,strong:color.cyan_20},green:{subtle:color.green_40,default:color.green_30,strong:color.green_20},magenta:{subtle:color.magenta_40,default:color.magenta_30,strong:color.magenta_20},orange:{subtle:color.orange_40,default:color.orange_30,strong:color.orange_20}}}},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},characters:{flesh:{blue:{subtle:color.blue_40,default:color.blue_20,strong:color.blue_10},cyan:{subtle:color.cyan_40,default:color.cyan_20,strong:color.cyan_10},green:{subtle:color.green_40,default:color.green_20,strong:color.green_10},magenta:{subtle:color.magenta_40,default:color.magenta_20,strong:color.magenta_10},orange:{subtle:color.orange_40,default:color.orange_20,strong:color.orange_10}}}},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}}}};
|
|
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 graphics={characters:{flesh:{blue:{background:{subtle:graphicsPalette.blue_40,default:graphicsPalette.blue_30,strong:graphicsPalette.blue_20},border:{subtle:graphicsPalette.blue_40,default:graphicsPalette.blue_20,strong:graphicsPalette.blue_10}},cyan:{background:{subtle:graphicsPalette.cyan_40,default:graphicsPalette.cyan_30,strong:graphicsPalette.cyan_20},border:{subtle:graphicsPalette.cyan_40,default:graphicsPalette.cyan_20,strong:graphicsPalette.cyan_10}},green:{background:{subtle:graphicsPalette.green_40,default:graphicsPalette.green_30,strong:graphicsPalette.green_20},border:{subtle:graphicsPalette.green_40,default:graphicsPalette.green_20,strong:graphicsPalette.green_10}},magenta:{background:{subtle:graphicsPalette.magenta_40,default:graphicsPalette.magenta_30,strong:graphicsPalette.magenta_20},border:{subtle:graphicsPalette.magenta_40,default:graphicsPalette.magenta_20,strong:graphicsPalette.magenta_10}},orange:{background:{subtle:graphicsPalette.orange_40,default:graphicsPalette.orange_30,strong:graphicsPalette.orange_20},border:{subtle:graphicsPalette.orange_40,default:graphicsPalette.orange_20,strong:graphicsPalette.orange_10}}}},externalBrands:{google:{red:"#EA4335",yellow:"#FBBC05",green:"#34A853",blue:"#4285F4"},facebook:{blue:"#1877F2",white:"#FFFFFF"},microsoft:{red:"#F35325",green:"#81BC06",blue:"#05A6F0",yellow:"#FFBA08"},apple:{brand:"#000000"}},gems:{background:{subtle:graphicsPalette.magenta_80,default:graphicsPalette.magenta_70},foreground:{subtle:graphicsPalette.magenta_60,default:graphicsPalette.magenta_30,strong:graphicsPalette.magenta_20}},progress:{attempted:{background:{subtle:graphicsPalette.yellow_90,default:graphicsPalette.yellow_70},foreground:{subtle:graphicsPalette.yellow_50,strong:graphicsPalette.yellow_10}},notStarted:{foreground:{subtle:graphicsPalette.gray_50,strong:graphicsPalette.gray_10}},complete:{background:{subtle:graphicsPalette.green_90,default:graphicsPalette.green_70},foreground:{strong:graphicsPalette.green_10}}},role:{all:{current:{background:graphicsPalette.blue_90,foreground:graphicsPalette.blue_80}},administrator:{background:graphicsPalette.cyan_60,foreground:graphicsPalette.cyan_40},learner:{background:graphicsPalette.orange_60,foreground:graphicsPalette.orange_30},parent:{background:graphicsPalette.green_60,foreground:graphicsPalette.green_40},teacher:{background:graphicsPalette.yellow_60,foreground:graphicsPalette.yellow_30}},streaks:{background:{subtle:graphicsPalette.orange_80,default:graphicsPalette.orange_70},foreground:{subtle:graphicsPalette.orange_60,default:graphicsPalette.orange_30,strong:graphicsPalette.orange_20}},neutral:{background:{subtle:graphicsPalette.white_100,default:graphicsPalette.blue_90}}};const semanticColor$1={core,graphics,learning:{math:{foreground:{blue:"#3D7586",gold:"#946700",green:"#447A53",gray:"#5D5F66",grayH:"#3B3D45",grayI:"#21242C",purple:"#594094",purpleD:"#8351E8",pink:"#B25071",red:"#D92916"}},embeddedContent:{background:{default:color.black_100},foreground:{default:color.gray_90}},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}},characters:{flesh:{blue:{subtle:color.blue_40,default:color.blue_30,strong:color.blue_20},cyan:{subtle:color.cyan_40,default:color.cyan_30,strong:color.cyan_20},green:{subtle:color.green_40,default:color.green_30,strong:color.green_20},magenta:{subtle:color.magenta_40,default:color.magenta_30,strong:color.magenta_20},orange:{subtle:color.orange_40,default:color.orange_30,strong:color.orange_20}}}},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},characters:{flesh:{blue:{subtle:color.blue_40,default:color.blue_20,strong:color.blue_10},cyan:{subtle:color.cyan_40,default:color.cyan_20,strong:color.cyan_10},green:{subtle:color.green_40,default:color.green_20,strong:color.green_10},magenta:{subtle:color.magenta_40,default:color.magenta_20,strong:color.magenta_10},orange:{subtle:color.orange_40,default:color.orange_20,strong:color.orange_10}}}},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
|
@@ -344,6 +344,14 @@ declare const border: {
|
|
|
344
344
|
red: string;
|
|
345
345
|
};
|
|
346
346
|
};
|
|
347
|
+
embeddedContent: {
|
|
348
|
+
background: {
|
|
349
|
+
default: string;
|
|
350
|
+
};
|
|
351
|
+
foreground: {
|
|
352
|
+
default: string;
|
|
353
|
+
};
|
|
354
|
+
};
|
|
347
355
|
background: {
|
|
348
356
|
gems: {
|
|
349
357
|
subtle: string;
|
|
@@ -1066,7 +1074,6 @@ declare const border: {
|
|
|
1066
1074
|
xsmall: string;
|
|
1067
1075
|
small: string;
|
|
1068
1076
|
medium: string;
|
|
1069
|
-
large: string;
|
|
1070
1077
|
};
|
|
1071
1078
|
};
|
|
1072
1079
|
heading: {
|
package/dist/index.js
CHANGED
|
@@ -20,11 +20,11 @@ const CSS_VAR_PREFIX="--wb-";
|
|
|
20
20
|
|
|
21
21
|
const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_040:pxToRem(4),size_060:pxToRem(6),size_080:pxToRem(8),size_100:pxToRem(10),size_120:pxToRem(12),size_140:pxToRem(14),size_160:pxToRem(16),size_180:pxToRem(18),size_200:pxToRem(20),size_220:pxToRem(22),size_240:pxToRem(24),size_260:pxToRem(26),size_280:pxToRem(28),size_320:pxToRem(32),size_360:pxToRem(36),size_400:pxToRem(40),size_440:pxToRem(44),size_480:pxToRem(48),size_560:pxToRem(56),size_640:pxToRem(64),size_720:pxToRem(72),size_800:pxToRem(80),size_880:pxToRem(88),size_960:pxToRem(96)};
|
|
22
22
|
|
|
23
|
-
const fontFamily={sans:'"Lato", "Noto Sans", "Helvetica", "Corbel", 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},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
|
|
23
|
+
const fontFamily={sans:'"Lato", "Noto Sans", "Helvetica", "Corbel", 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},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}},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
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)};const graphicsPalette={red_90:color.red_90,red_80:color.red_80,red_70:color.red_70,red_60:color.red_60,red_50:color.red_50,red_40:color.red_40,red_30:color.red_30,red_20:color.red_20,red_10:color.red_10,red_05:color.red_05,red_01:color.red_01,orange_90:color.orange_90,orange_80:color.orange_80,orange_70:color.orange_70,orange_60:color.orange_60,orange_50:color.orange_50,orange_40:color.orange_40,orange_30:color.orange_30,orange_20:color.orange_20,orange_10:color.orange_10,orange_05:color.orange_05,orange_01:color.orange_01,yellow_90:color.yellow_90,yellow_80:color.yellow_80,yellow_70:color.yellow_70,yellow_60:color.yellow_60,yellow_50:color.yellow_50,yellow_40:color.yellow_40,yellow_30:color.yellow_30,yellow_20:color.yellow_20,yellow_10:color.yellow_10,yellow_05:color.yellow_05,yellow_01:color.yellow_01,green_90:color.green_90,green_80:color.green_80,green_70:color.green_70,green_60:color.green_60,green_50:color.green_50,green_40:color.green_40,green_30:color.green_30,green_20:color.green_20,green_10:color.green_10,green_05:color.green_05,green_01:color.green_01,cyan_90:color.cyan_90,cyan_80:color.cyan_80,cyan_70:color.cyan_70,cyan_60:color.cyan_60,cyan_50:color.cyan_50,cyan_40:color.cyan_40,cyan_30:color.cyan_30,cyan_20:color.cyan_20,cyan_10:color.cyan_10,cyan_05:color.cyan_05,cyan_01:color.cyan_01,blue_90:color.blue_90,blue_80:color.blue_80,blue_70:color.blue_70,blue_60:color.blue_60,blue_50:color.blue_50,blue_40:color.blue_40,blue_30:color.blue_30,blue_20:color.blue_20,blue_10:color.blue_10,blue_05:color.blue_05,blue_01:color.blue_01,magenta_90:color.magenta_90,magenta_80:color.magenta_80,magenta_70:color.magenta_70,magenta_60:color.magenta_60,magenta_50:color.magenta_50,magenta_40:color.magenta_40,magenta_30:color.magenta_30,magenta_20:color.magenta_20,magenta_10:color.magenta_10,magenta_05:color.magenta_05,magenta_01:color.magenta_01,gray_90:color.gray_90,gray_80:color.gray_80,gray_70:color.gray_70,gray_60:color.gray_60,gray_50:color.gray_50,gray_40:color.gray_40,gray_30:color.gray_30,gray_20:color.gray_20,gray_10:color.gray_10,gray_05:color.gray_05,gray_01:color.gray_01,black_100:color.black_100,white_100:color.white_100};
|
|
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},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 graphics={characters:{flesh:{blue:{background:{subtle:graphicsPalette.blue_40,default:graphicsPalette.blue_30,strong:graphicsPalette.blue_20},border:{subtle:graphicsPalette.blue_40,default:graphicsPalette.blue_20,strong:graphicsPalette.blue_10}},cyan:{background:{subtle:graphicsPalette.cyan_40,default:graphicsPalette.cyan_30,strong:graphicsPalette.cyan_20},border:{subtle:graphicsPalette.cyan_40,default:graphicsPalette.cyan_20,strong:graphicsPalette.cyan_10}},green:{background:{subtle:graphicsPalette.green_40,default:graphicsPalette.green_30,strong:graphicsPalette.green_20},border:{subtle:graphicsPalette.green_40,default:graphicsPalette.green_20,strong:graphicsPalette.green_10}},magenta:{background:{subtle:graphicsPalette.magenta_40,default:graphicsPalette.magenta_30,strong:graphicsPalette.magenta_20},border:{subtle:graphicsPalette.magenta_40,default:graphicsPalette.magenta_20,strong:graphicsPalette.magenta_10}},orange:{background:{subtle:graphicsPalette.orange_40,default:graphicsPalette.orange_30,strong:graphicsPalette.orange_20},border:{subtle:graphicsPalette.orange_40,default:graphicsPalette.orange_20,strong:graphicsPalette.orange_10}}}},externalBrands:{google:{red:"#EA4335",yellow:"#FBBC05",green:"#34A853",blue:"#4285F4"},facebook:{blue:"#1877F2",white:"#FFFFFF"},microsoft:{red:"#F35325",green:"#81BC06",blue:"#05A6F0",yellow:"#FFBA08"},apple:{brand:"#000000"}},gems:{background:{subtle:graphicsPalette.magenta_80,default:graphicsPalette.magenta_70},foreground:{subtle:graphicsPalette.magenta_60,default:graphicsPalette.magenta_30,strong:graphicsPalette.magenta_20}},progress:{attempted:{background:{subtle:graphicsPalette.yellow_90,default:graphicsPalette.yellow_70},foreground:{subtle:graphicsPalette.yellow_50,strong:graphicsPalette.yellow_10}},notStarted:{foreground:{subtle:graphicsPalette.gray_50,strong:graphicsPalette.gray_10}},complete:{background:{subtle:graphicsPalette.green_90,default:graphicsPalette.green_70},foreground:{strong:graphicsPalette.green_10}}},role:{all:{current:{background:graphicsPalette.blue_90,foreground:graphicsPalette.blue_80}},administrator:{background:graphicsPalette.cyan_70,foreground:graphicsPalette.cyan_40},learner:{background:graphicsPalette.orange_60,foreground:graphicsPalette.orange_30},parent:{background:graphicsPalette.green_70,foreground:graphicsPalette.green_40},teacher:{background:graphicsPalette.yellow_50,foreground:graphicsPalette.yellow_30}},streaks:{background:{subtle:graphicsPalette.orange_80,default:graphicsPalette.orange_70},foreground:{subtle:graphicsPalette.orange_60,default:graphicsPalette.orange_30,strong:graphicsPalette.orange_20}},neutral:{background:{subtle:graphicsPalette.white_100,default:graphicsPalette.blue_90}}};const semanticColor$1={core,graphics,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}},characters:{flesh:{blue:{subtle:color.blue_40,default:color.blue_30,strong:color.blue_20},cyan:{subtle:color.cyan_40,default:color.cyan_30,strong:color.cyan_20},green:{subtle:color.green_40,default:color.green_30,strong:color.green_20},magenta:{subtle:color.magenta_40,default:color.magenta_30,strong:color.magenta_20},orange:{subtle:color.orange_40,default:color.orange_30,strong:color.orange_20}}}},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},characters:{flesh:{blue:{subtle:color.blue_40,default:color.blue_20,strong:color.blue_10},cyan:{subtle:color.cyan_40,default:color.cyan_20,strong:color.cyan_10},green:{subtle:color.green_40,default:color.green_20,strong:color.green_10},magenta:{subtle:color.magenta_40,default:color.magenta_20,strong:color.magenta_10},orange:{subtle:color.orange_40,default:color.orange_20,strong:color.orange_10}}}},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}}}};
|
|
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 graphics={characters:{flesh:{blue:{background:{subtle:graphicsPalette.blue_40,default:graphicsPalette.blue_30,strong:graphicsPalette.blue_20},border:{subtle:graphicsPalette.blue_40,default:graphicsPalette.blue_20,strong:graphicsPalette.blue_10}},cyan:{background:{subtle:graphicsPalette.cyan_40,default:graphicsPalette.cyan_30,strong:graphicsPalette.cyan_20},border:{subtle:graphicsPalette.cyan_40,default:graphicsPalette.cyan_20,strong:graphicsPalette.cyan_10}},green:{background:{subtle:graphicsPalette.green_40,default:graphicsPalette.green_30,strong:graphicsPalette.green_20},border:{subtle:graphicsPalette.green_40,default:graphicsPalette.green_20,strong:graphicsPalette.green_10}},magenta:{background:{subtle:graphicsPalette.magenta_40,default:graphicsPalette.magenta_30,strong:graphicsPalette.magenta_20},border:{subtle:graphicsPalette.magenta_40,default:graphicsPalette.magenta_20,strong:graphicsPalette.magenta_10}},orange:{background:{subtle:graphicsPalette.orange_40,default:graphicsPalette.orange_30,strong:graphicsPalette.orange_20},border:{subtle:graphicsPalette.orange_40,default:graphicsPalette.orange_20,strong:graphicsPalette.orange_10}}}},externalBrands:{google:{red:"#EA4335",yellow:"#FBBC05",green:"#34A853",blue:"#4285F4"},facebook:{blue:"#1877F2",white:"#FFFFFF"},microsoft:{red:"#F35325",green:"#81BC06",blue:"#05A6F0",yellow:"#FFBA08"},apple:{brand:"#000000"}},gems:{background:{subtle:graphicsPalette.magenta_80,default:graphicsPalette.magenta_70},foreground:{subtle:graphicsPalette.magenta_60,default:graphicsPalette.magenta_30,strong:graphicsPalette.magenta_20}},progress:{attempted:{background:{subtle:graphicsPalette.yellow_90,default:graphicsPalette.yellow_70},foreground:{subtle:graphicsPalette.yellow_50,strong:graphicsPalette.yellow_10}},notStarted:{foreground:{subtle:graphicsPalette.gray_50,strong:graphicsPalette.gray_10}},complete:{background:{subtle:graphicsPalette.green_90,default:graphicsPalette.green_70},foreground:{strong:graphicsPalette.green_10}}},role:{all:{current:{background:graphicsPalette.blue_90,foreground:graphicsPalette.blue_80}},administrator:{background:graphicsPalette.cyan_60,foreground:graphicsPalette.cyan_40},learner:{background:graphicsPalette.orange_60,foreground:graphicsPalette.orange_30},parent:{background:graphicsPalette.green_60,foreground:graphicsPalette.green_40},teacher:{background:graphicsPalette.yellow_60,foreground:graphicsPalette.yellow_30}},streaks:{background:{subtle:graphicsPalette.orange_80,default:graphicsPalette.orange_70},foreground:{subtle:graphicsPalette.orange_60,default:graphicsPalette.orange_30,strong:graphicsPalette.orange_20}},neutral:{background:{subtle:graphicsPalette.white_100,default:graphicsPalette.blue_90}}};const semanticColor$1={core,graphics,learning:{math:{foreground:{blue:"#3D7586",gold:"#946700",green:"#447A53",gray:"#5D5F66",grayH:"#3B3D45",grayI:"#21242C",purple:"#594094",purpleD:"#8351E8",pink:"#B25071",red:"#D92916"}},embeddedContent:{background:{default:color.black_100},foreground:{default:color.gray_90}},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}},characters:{flesh:{blue:{subtle:color.blue_40,default:color.blue_30,strong:color.blue_20},cyan:{subtle:color.cyan_40,default:color.cyan_30,strong:color.cyan_20},green:{subtle:color.green_40,default:color.green_30,strong:color.green_20},magenta:{subtle:color.magenta_40,default:color.magenta_30,strong:color.magenta_20},orange:{subtle:color.orange_40,default:color.orange_30,strong:color.orange_20}}}},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},characters:{flesh:{blue:{subtle:color.blue_40,default:color.blue_20,strong:color.blue_10},cyan:{subtle:color.cyan_40,default:color.cyan_20,strong:color.cyan_10},green:{subtle:color.green_40,default:color.green_20,strong:color.green_10},magenta:{subtle:color.magenta_40,default:color.magenta_20,strong:color.magenta_10},orange:{subtle:color.orange_40,default:color.orange_20,strong:color.orange_10}}}},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
|
@@ -54,7 +54,6 @@ declare const _default: {
|
|
|
54
54
|
xsmall: string;
|
|
55
55
|
small: string;
|
|
56
56
|
medium: string;
|
|
57
|
-
large: string;
|
|
58
57
|
};
|
|
59
58
|
};
|
|
60
59
|
heading: {
|
|
@@ -399,6 +398,14 @@ declare const _default: {
|
|
|
399
398
|
red: string;
|
|
400
399
|
};
|
|
401
400
|
};
|
|
401
|
+
embeddedContent: {
|
|
402
|
+
background: {
|
|
403
|
+
default: string;
|
|
404
|
+
};
|
|
405
|
+
foreground: {
|
|
406
|
+
default: string;
|
|
407
|
+
};
|
|
408
|
+
};
|
|
402
409
|
background: {
|
|
403
410
|
gems: {
|
|
404
411
|
subtle: string;
|
|
@@ -319,6 +319,14 @@ export declare const semanticColor: {
|
|
|
319
319
|
red: string;
|
|
320
320
|
};
|
|
321
321
|
};
|
|
322
|
+
embeddedContent: {
|
|
323
|
+
background: {
|
|
324
|
+
default: string;
|
|
325
|
+
};
|
|
326
|
+
foreground: {
|
|
327
|
+
default: string;
|
|
328
|
+
};
|
|
329
|
+
};
|
|
322
330
|
background: {
|
|
323
331
|
gems: {
|
|
324
332
|
subtle: string;
|
|
@@ -319,6 +319,14 @@ export declare const semanticColor: {
|
|
|
319
319
|
red: string;
|
|
320
320
|
};
|
|
321
321
|
};
|
|
322
|
+
embeddedContent: {
|
|
323
|
+
background: {
|
|
324
|
+
default: string;
|
|
325
|
+
};
|
|
326
|
+
foreground: {
|
|
327
|
+
default: string;
|
|
328
|
+
};
|
|
329
|
+
};
|
|
322
330
|
background: {
|
|
323
331
|
gems: {
|
|
324
332
|
subtle: string;
|
|
@@ -347,6 +347,14 @@ export declare const semanticColor: {
|
|
|
347
347
|
red: string;
|
|
348
348
|
};
|
|
349
349
|
};
|
|
350
|
+
embeddedContent: {
|
|
351
|
+
background: {
|
|
352
|
+
default: string;
|
|
353
|
+
};
|
|
354
|
+
foreground: {
|
|
355
|
+
default: string;
|
|
356
|
+
};
|
|
357
|
+
};
|
|
350
358
|
background: {
|
|
351
359
|
gems: {
|
|
352
360
|
subtle: string;
|
package/dist/theme/syl-dark.d.ts
CHANGED
|
@@ -45,7 +45,6 @@ declare const _default: {
|
|
|
45
45
|
xsmall: string;
|
|
46
46
|
small: string;
|
|
47
47
|
medium: string;
|
|
48
|
-
large: string;
|
|
49
48
|
};
|
|
50
49
|
};
|
|
51
50
|
heading: {
|
|
@@ -390,6 +389,14 @@ declare const _default: {
|
|
|
390
389
|
red: string;
|
|
391
390
|
};
|
|
392
391
|
};
|
|
392
|
+
embeddedContent: {
|
|
393
|
+
background: {
|
|
394
|
+
default: string;
|
|
395
|
+
};
|
|
396
|
+
foreground: {
|
|
397
|
+
default: string;
|
|
398
|
+
};
|
|
399
|
+
};
|
|
393
400
|
background: {
|
|
394
401
|
gems: {
|
|
395
402
|
subtle: string;
|
|
@@ -45,7 +45,6 @@ declare const _default: {
|
|
|
45
45
|
xsmall: string;
|
|
46
46
|
small: string;
|
|
47
47
|
medium: string;
|
|
48
|
-
large: string;
|
|
49
48
|
};
|
|
50
49
|
};
|
|
51
50
|
heading: {
|
|
@@ -390,6 +389,14 @@ declare const _default: {
|
|
|
390
389
|
red: string;
|
|
391
390
|
};
|
|
392
391
|
};
|
|
392
|
+
embeddedContent: {
|
|
393
|
+
background: {
|
|
394
|
+
default: string;
|
|
395
|
+
};
|
|
396
|
+
foreground: {
|
|
397
|
+
default: string;
|
|
398
|
+
};
|
|
399
|
+
};
|
|
393
400
|
background: {
|
|
394
401
|
gems: {
|
|
395
402
|
subtle: string;
|
package/dist/tokens/theme.d.ts
CHANGED
|
@@ -45,7 +45,6 @@ declare const _default: {
|
|
|
45
45
|
xsmall: string;
|
|
46
46
|
small: string;
|
|
47
47
|
medium: string;
|
|
48
|
-
large: string;
|
|
49
48
|
};
|
|
50
49
|
};
|
|
51
50
|
heading: {
|
|
@@ -390,6 +389,14 @@ declare const _default: {
|
|
|
390
389
|
red: string;
|
|
391
390
|
};
|
|
392
391
|
};
|
|
392
|
+
embeddedContent: {
|
|
393
|
+
background: {
|
|
394
|
+
default: string;
|
|
395
|
+
};
|
|
396
|
+
foreground: {
|
|
397
|
+
default: string;
|
|
398
|
+
};
|
|
399
|
+
};
|
|
393
400
|
background: {
|
|
394
401
|
gems: {
|
|
395
402
|
subtle: string;
|