@khanacademy/wonder-blocks-tokens 17.0.0 → 17.2.0

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-tokens@17.0.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
+> @khanacademy/wonder-blocks-tokens@17.2.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
 > node -r @swc-node/register ./src/build/generate-css-variables.ts
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens/dist/css

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-tokens
 
+## 17.2.0
+
+### Minor Changes
+
+- 3e7925e: Add `semanticColor.graphics` tokens (characters, gems, streaks, progress, role, neutral, and external brand colors) from the Figma "5 - Graphics" collection. SYL Light values are defined in the default theme (and inherited by thunderblocks), and SYL Dark values are defined in the SYL Dark theme.
+
+## 17.1.0
+
+### Minor Changes
+
+- dfcf49b: Update media-query breakpoint and constant tokens to cover full range of widths
+
 ## 17.0.0
 
 ### Major Changes

package/dist/css/index.css

@@ -660,6 +660,78 @@
 --wb-semanticColor-core-shadow-chonky-neutral-strong: #21242c;
 --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
 --wb-semanticColor-core-shadow-chonky-disabled-default: #b8b9bb;
+--wb-semanticColor-graphics-characters-flesh-blue-background-subtle: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-background-default: #5753FA;
+--wb-semanticColor-graphics-characters-flesh-blue-background-strong: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-subtle: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-border-default: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-strong: #363498;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-subtle: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-default: #28A9FF;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-strong: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-subtle: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-default: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-strong: #20628F;
+--wb-semanticColor-graphics-characters-flesh-green-background-subtle: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-background-default: #579F6C;
+--wb-semanticColor-graphics-characters-flesh-green-background-strong: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-subtle: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-border-default: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-strong: #2C5037;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-subtle: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-default: #E83FA4;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-strong: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-subtle: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-default: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-strong: #84275E;
+--wb-semanticColor-graphics-characters-flesh-orange-background-subtle: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-background-default: #F8551A;
+--wb-semanticColor-graphics-characters-flesh-orange-background-strong: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-subtle: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-border-default: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-strong: #983C1A;
+--wb-semanticColor-graphics-externalBrands-google-red: #EA4335;
+--wb-semanticColor-graphics-externalBrands-google-yellow: #FBBC05;
+--wb-semanticColor-graphics-externalBrands-google-green: #34A853;
+--wb-semanticColor-graphics-externalBrands-google-blue: #4285F4;
+--wb-semanticColor-graphics-externalBrands-facebook-blue: #1877F2;
+--wb-semanticColor-graphics-externalBrands-facebook-white: #FFFFFF;
+--wb-semanticColor-graphics-externalBrands-microsoft-red: #F35325;
+--wb-semanticColor-graphics-externalBrands-microsoft-green: #81BC06;
+--wb-semanticColor-graphics-externalBrands-microsoft-blue: #05A6F0;
+--wb-semanticColor-graphics-externalBrands-microsoft-yellow: #FFBA08;
+--wb-semanticColor-graphics-externalBrands-apple-brand: #000000;
+--wb-semanticColor-graphics-gems-background-subtle: #FFE3F4;
+--wb-semanticColor-graphics-gems-background-default: #FAD4EC;
+--wb-semanticColor-graphics-gems-foreground-subtle: #F9BBE1;
+--wb-semanticColor-graphics-gems-foreground-default: #E83FA4;
+--wb-semanticColor-graphics-gems-foreground-strong: #BB3183;
+--wb-semanticColor-graphics-progress-attempted-background-subtle: #FEF8E7;
+--wb-semanticColor-graphics-progress-attempted-background-default: #FEEAB8;
+--wb-semanticColor-graphics-progress-attempted-foreground-subtle: #FDD673;
+--wb-semanticColor-graphics-progress-attempted-foreground-strong: #966B00;
+--wb-semanticColor-graphics-progress-notStarted-foreground-subtle: #B5B6B9;
+--wb-semanticColor-graphics-progress-notStarted-foreground-strong: #4A4C53;
+--wb-semanticColor-graphics-progress-complete-background-subtle: #F1FBF1;
+--wb-semanticColor-graphics-progress-complete-background-default: #D5F3D5;
+--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
+--wb-semanticColor-graphics-role-all-current-background: #F8F9FB;
+--wb-semanticColor-graphics-role-all-current-foreground: #EBF1FD;
+--wb-semanticColor-graphics-role-administrator-background: #CCE9FE;
+--wb-semanticColor-graphics-role-administrator-foreground: #57BAFD;
+--wb-semanticColor-graphics-role-learner-background: #FEBFB1;
+--wb-semanticColor-graphics-role-learner-foreground: #F8551A;
+--wb-semanticColor-graphics-role-parent-background: #D5F3D5;
+--wb-semanticColor-graphics-role-parent-foreground: #72BB82;
+--wb-semanticColor-graphics-role-teacher-background: #FDD673;
+--wb-semanticColor-graphics-role-teacher-foreground: #FCB706;
+--wb-semanticColor-graphics-streaks-background-subtle: #FEE9E5;
+--wb-semanticColor-graphics-streaks-background-default: #FEDFD8;
+--wb-semanticColor-graphics-streaks-foreground-subtle: #FEBFB1;
+--wb-semanticColor-graphics-streaks-foreground-default: #F8551A;
+--wb-semanticColor-graphics-streaks-foreground-strong: #C8481A;
+--wb-semanticColor-graphics-neutral-background-subtle: #FFFFFF;
+--wb-semanticColor-graphics-neutral-background-default: #F8F9FB;
 --wb-semanticColor-learning-math-foreground-blue: #3D7586;
 --wb-semanticColor-learning-math-foreground-gold: #946700;
 --wb-semanticColor-learning-math-foreground-green: #447A53;
@@ -1160,6 +1232,78 @@
 --wb-semanticColor-core-shadow-chonky-neutral-strong: #B5B6B9;
 --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
 --wb-semanticColor-core-shadow-chonky-disabled-default: #252531;
+--wb-semanticColor-graphics-characters-flesh-blue-background-subtle: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-background-default: #5753FA;
+--wb-semanticColor-graphics-characters-flesh-blue-background-strong: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-border-subtle: #363498;
+--wb-semanticColor-graphics-characters-flesh-blue-border-default: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-strong: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-subtle: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-default: #28A9FF;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-strong: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-subtle: #20628F;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-default: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-strong: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-green-background-subtle: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-background-default: #579F6C;
+--wb-semanticColor-graphics-characters-flesh-green-background-strong: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-border-subtle: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-default: #579F6C;
+--wb-semanticColor-graphics-characters-flesh-green-border-strong: #97D39E;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-subtle: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-default: #E83FA4;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-strong: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-subtle: #84275E;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-default: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-strong: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-orange-background-subtle: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-background-default: #F8551A;
+--wb-semanticColor-graphics-characters-flesh-orange-background-strong: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-border-subtle: #983C1A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-default: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-strong: #F97B4F;
+--wb-semanticColor-graphics-externalBrands-google-red: #EA4335;
+--wb-semanticColor-graphics-externalBrands-google-yellow: #FBBC05;
+--wb-semanticColor-graphics-externalBrands-google-green: #34A853;
+--wb-semanticColor-graphics-externalBrands-google-blue: #4285F4;
+--wb-semanticColor-graphics-externalBrands-facebook-blue: #1877F2;
+--wb-semanticColor-graphics-externalBrands-facebook-white: #FFFFFF;
+--wb-semanticColor-graphics-externalBrands-microsoft-red: #F35325;
+--wb-semanticColor-graphics-externalBrands-microsoft-green: #81BC06;
+--wb-semanticColor-graphics-externalBrands-microsoft-blue: #05A6F0;
+--wb-semanticColor-graphics-externalBrands-microsoft-yellow: #FFBA08;
+--wb-semanticColor-graphics-externalBrands-apple-brand: #FFFFFF;
+--wb-semanticColor-graphics-gems-background-subtle: #33182E;
+--wb-semanticColor-graphics-gems-background-default: #521B3C;
+--wb-semanticColor-graphics-gems-foreground-subtle: #BB3183;
+--wb-semanticColor-graphics-gems-foreground-default: #E83FA4;
+--wb-semanticColor-graphics-gems-foreground-strong: #FCEEF7;
+--wb-semanticColor-graphics-progress-attempted-background-subtle: #312405;
+--wb-semanticColor-graphics-progress-attempted-background-default: #5F4500;
+--wb-semanticColor-graphics-progress-attempted-foreground-subtle: #D69900;
+--wb-semanticColor-graphics-progress-attempted-foreground-strong: #5F4500;
+--wb-semanticColor-graphics-progress-notStarted-foreground-subtle: #B5B6B9;
+--wb-semanticColor-graphics-progress-notStarted-foreground-strong: #4A4C53;
+--wb-semanticColor-graphics-progress-complete-background-subtle: #1A2924;
+--wb-semanticColor-graphics-progress-complete-background-default: #24432D;
+--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
+--wb-semanticColor-graphics-role-all-current-background: #151521;
+--wb-semanticColor-graphics-role-all-current-foreground: #222149;
+--wb-semanticColor-graphics-role-administrator-background: #1D3F58;
+--wb-semanticColor-graphics-role-administrator-foreground: #20628F;
+--wb-semanticColor-graphics-role-learner-background: #672912;
+--wb-semanticColor-graphics-role-learner-foreground: #983C1A;
+--wb-semanticColor-graphics-role-parent-background: #24432D;
+--wb-semanticColor-graphics-role-parent-foreground: #2C5037;
+--wb-semanticColor-graphics-role-teacher-background: #5F4500;
+--wb-semanticColor-graphics-role-teacher-foreground: #966B00;
+--wb-semanticColor-graphics-streaks-background-subtle: #3E1F19;
+--wb-semanticColor-graphics-streaks-background-default: #672912;
+--wb-semanticColor-graphics-streaks-foreground-subtle: #C8481A;
+--wb-semanticColor-graphics-streaks-foreground-default: #F8551A;
+--wb-semanticColor-graphics-streaks-foreground-strong: #FEF4F2;
+--wb-semanticColor-graphics-neutral-background-subtle: #252531;
+--wb-semanticColor-graphics-neutral-background-default: #151521;
 --wb-semanticColor-learning-math-foreground-blue: #87CBFC;
 --wb-semanticColor-learning-math-foreground-gold: #FCC539;
 --wb-semanticColor-learning-math-foreground-green: #97D39E;
@@ -1660,6 +1804,78 @@
 --wb-semanticColor-core-shadow-chonky-neutral-strong: #4A4C53;
 --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
 --wb-semanticColor-core-shadow-chonky-disabled-default: #CBCBCD;
+--wb-semanticColor-graphics-characters-flesh-blue-background-subtle: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-background-default: #5753FA;
+--wb-semanticColor-graphics-characters-flesh-blue-background-strong: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-subtle: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-border-default: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-strong: #363498;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-subtle: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-default: #28A9FF;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-strong: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-subtle: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-default: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-strong: #20628F;
+--wb-semanticColor-graphics-characters-flesh-green-background-subtle: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-background-default: #579F6C;
+--wb-semanticColor-graphics-characters-flesh-green-background-strong: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-subtle: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-border-default: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-strong: #2C5037;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-subtle: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-default: #E83FA4;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-strong: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-subtle: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-default: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-strong: #84275E;
+--wb-semanticColor-graphics-characters-flesh-orange-background-subtle: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-background-default: #F8551A;
+--wb-semanticColor-graphics-characters-flesh-orange-background-strong: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-subtle: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-border-default: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-strong: #983C1A;
+--wb-semanticColor-graphics-externalBrands-google-red: #EA4335;
+--wb-semanticColor-graphics-externalBrands-google-yellow: #FBBC05;
+--wb-semanticColor-graphics-externalBrands-google-green: #34A853;
+--wb-semanticColor-graphics-externalBrands-google-blue: #4285F4;
+--wb-semanticColor-graphics-externalBrands-facebook-blue: #1877F2;
+--wb-semanticColor-graphics-externalBrands-facebook-white: #FFFFFF;
+--wb-semanticColor-graphics-externalBrands-microsoft-red: #F35325;
+--wb-semanticColor-graphics-externalBrands-microsoft-green: #81BC06;
+--wb-semanticColor-graphics-externalBrands-microsoft-blue: #05A6F0;
+--wb-semanticColor-graphics-externalBrands-microsoft-yellow: #FFBA08;
+--wb-semanticColor-graphics-externalBrands-apple-brand: #000000;
+--wb-semanticColor-graphics-gems-background-subtle: #FFE3F4;
+--wb-semanticColor-graphics-gems-background-default: #FAD4EC;
+--wb-semanticColor-graphics-gems-foreground-subtle: #F9BBE1;
+--wb-semanticColor-graphics-gems-foreground-default: #E83FA4;
+--wb-semanticColor-graphics-gems-foreground-strong: #BB3183;
+--wb-semanticColor-graphics-progress-attempted-background-subtle: #FEF8E7;
+--wb-semanticColor-graphics-progress-attempted-background-default: #FEEAB8;
+--wb-semanticColor-graphics-progress-attempted-foreground-subtle: #FDD673;
+--wb-semanticColor-graphics-progress-attempted-foreground-strong: #966B00;
+--wb-semanticColor-graphics-progress-notStarted-foreground-subtle: #B5B6B9;
+--wb-semanticColor-graphics-progress-notStarted-foreground-strong: #4A4C53;
+--wb-semanticColor-graphics-progress-complete-background-subtle: #F1FBF1;
+--wb-semanticColor-graphics-progress-complete-background-default: #D5F3D5;
+--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
+--wb-semanticColor-graphics-role-all-current-background: #F8F9FB;
+--wb-semanticColor-graphics-role-all-current-foreground: #EBF1FD;
+--wb-semanticColor-graphics-role-administrator-background: #CCE9FE;
+--wb-semanticColor-graphics-role-administrator-foreground: #57BAFD;
+--wb-semanticColor-graphics-role-learner-background: #FEBFB1;
+--wb-semanticColor-graphics-role-learner-foreground: #F8551A;
+--wb-semanticColor-graphics-role-parent-background: #D5F3D5;
+--wb-semanticColor-graphics-role-parent-foreground: #72BB82;
+--wb-semanticColor-graphics-role-teacher-background: #FDD673;
+--wb-semanticColor-graphics-role-teacher-foreground: #FCB706;
+--wb-semanticColor-graphics-streaks-background-subtle: #FEE9E5;
+--wb-semanticColor-graphics-streaks-background-default: #FEDFD8;
+--wb-semanticColor-graphics-streaks-foreground-subtle: #FEBFB1;
+--wb-semanticColor-graphics-streaks-foreground-default: #F8551A;
+--wb-semanticColor-graphics-streaks-foreground-strong: #C8481A;
+--wb-semanticColor-graphics-neutral-background-subtle: #FFFFFF;
+--wb-semanticColor-graphics-neutral-background-default: #F8F9FB;
 --wb-semanticColor-learning-math-foreground-blue: #20628F;
 --wb-semanticColor-learning-math-foreground-gold: #966B00;
 --wb-semanticColor-learning-math-foreground-green: #3C6D4A;

package/dist/css/vars.css

@@ -113,6 +113,78 @@
 --wb-semanticColor-core-shadow-chonky-neutral-strong: #21242c;
 --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
 --wb-semanticColor-core-shadow-chonky-disabled-default: #b8b9bb;
+--wb-semanticColor-graphics-characters-flesh-blue-background-subtle: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-background-default: #5753FA;
+--wb-semanticColor-graphics-characters-flesh-blue-background-strong: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-subtle: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-border-default: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-strong: #363498;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-subtle: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-default: #28A9FF;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-strong: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-subtle: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-default: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-strong: #20628F;
+--wb-semanticColor-graphics-characters-flesh-green-background-subtle: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-background-default: #579F6C;
+--wb-semanticColor-graphics-characters-flesh-green-background-strong: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-subtle: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-border-default: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-strong: #2C5037;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-subtle: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-default: #E83FA4;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-strong: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-subtle: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-default: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-strong: #84275E;
+--wb-semanticColor-graphics-characters-flesh-orange-background-subtle: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-background-default: #F8551A;
+--wb-semanticColor-graphics-characters-flesh-orange-background-strong: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-subtle: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-border-default: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-strong: #983C1A;
+--wb-semanticColor-graphics-externalBrands-google-red: #EA4335;
+--wb-semanticColor-graphics-externalBrands-google-yellow: #FBBC05;
+--wb-semanticColor-graphics-externalBrands-google-green: #34A853;
+--wb-semanticColor-graphics-externalBrands-google-blue: #4285F4;
+--wb-semanticColor-graphics-externalBrands-facebook-blue: #1877F2;
+--wb-semanticColor-graphics-externalBrands-facebook-white: #FFFFFF;
+--wb-semanticColor-graphics-externalBrands-microsoft-red: #F35325;
+--wb-semanticColor-graphics-externalBrands-microsoft-green: #81BC06;
+--wb-semanticColor-graphics-externalBrands-microsoft-blue: #05A6F0;
+--wb-semanticColor-graphics-externalBrands-microsoft-yellow: #FFBA08;
+--wb-semanticColor-graphics-externalBrands-apple-brand: #000000;
+--wb-semanticColor-graphics-gems-background-subtle: #FFE3F4;
+--wb-semanticColor-graphics-gems-background-default: #FAD4EC;
+--wb-semanticColor-graphics-gems-foreground-subtle: #F9BBE1;
+--wb-semanticColor-graphics-gems-foreground-default: #E83FA4;
+--wb-semanticColor-graphics-gems-foreground-strong: #BB3183;
+--wb-semanticColor-graphics-progress-attempted-background-subtle: #FEF8E7;
+--wb-semanticColor-graphics-progress-attempted-background-default: #FEEAB8;
+--wb-semanticColor-graphics-progress-attempted-foreground-subtle: #FDD673;
+--wb-semanticColor-graphics-progress-attempted-foreground-strong: #966B00;
+--wb-semanticColor-graphics-progress-notStarted-foreground-subtle: #B5B6B9;
+--wb-semanticColor-graphics-progress-notStarted-foreground-strong: #4A4C53;
+--wb-semanticColor-graphics-progress-complete-background-subtle: #F1FBF1;
+--wb-semanticColor-graphics-progress-complete-background-default: #D5F3D5;
+--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
+--wb-semanticColor-graphics-role-all-current-background: #F8F9FB;
+--wb-semanticColor-graphics-role-all-current-foreground: #EBF1FD;
+--wb-semanticColor-graphics-role-administrator-background: #CCE9FE;
+--wb-semanticColor-graphics-role-administrator-foreground: #57BAFD;
+--wb-semanticColor-graphics-role-learner-background: #FEBFB1;
+--wb-semanticColor-graphics-role-learner-foreground: #F8551A;
+--wb-semanticColor-graphics-role-parent-background: #D5F3D5;
+--wb-semanticColor-graphics-role-parent-foreground: #72BB82;
+--wb-semanticColor-graphics-role-teacher-background: #FDD673;
+--wb-semanticColor-graphics-role-teacher-foreground: #FCB706;
+--wb-semanticColor-graphics-streaks-background-subtle: #FEE9E5;
+--wb-semanticColor-graphics-streaks-background-default: #FEDFD8;
+--wb-semanticColor-graphics-streaks-foreground-subtle: #FEBFB1;
+--wb-semanticColor-graphics-streaks-foreground-default: #F8551A;
+--wb-semanticColor-graphics-streaks-foreground-strong: #C8481A;
+--wb-semanticColor-graphics-neutral-background-subtle: #FFFFFF;
+--wb-semanticColor-graphics-neutral-background-default: #F8F9FB;
 --wb-semanticColor-learning-math-foreground-blue: #3D7586;
 --wb-semanticColor-learning-math-foreground-gold: #946700;
 --wb-semanticColor-learning-math-foreground-green: #447A53;
@@ -613,6 +685,78 @@
 --wb-semanticColor-core-shadow-chonky-neutral-strong: #B5B6B9;
 --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
 --wb-semanticColor-core-shadow-chonky-disabled-default: #252531;
+--wb-semanticColor-graphics-characters-flesh-blue-background-subtle: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-background-default: #5753FA;
+--wb-semanticColor-graphics-characters-flesh-blue-background-strong: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-border-subtle: #363498;
+--wb-semanticColor-graphics-characters-flesh-blue-border-default: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-strong: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-subtle: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-default: #28A9FF;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-strong: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-subtle: #20628F;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-default: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-strong: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-green-background-subtle: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-background-default: #579F6C;
+--wb-semanticColor-graphics-characters-flesh-green-background-strong: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-border-subtle: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-default: #579F6C;
+--wb-semanticColor-graphics-characters-flesh-green-border-strong: #97D39E;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-subtle: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-default: #E83FA4;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-strong: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-subtle: #84275E;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-default: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-strong: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-orange-background-subtle: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-background-default: #F8551A;
+--wb-semanticColor-graphics-characters-flesh-orange-background-strong: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-border-subtle: #983C1A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-default: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-strong: #F97B4F;
+--wb-semanticColor-graphics-externalBrands-google-red: #EA4335;
+--wb-semanticColor-graphics-externalBrands-google-yellow: #FBBC05;
+--wb-semanticColor-graphics-externalBrands-google-green: #34A853;
+--wb-semanticColor-graphics-externalBrands-google-blue: #4285F4;
+--wb-semanticColor-graphics-externalBrands-facebook-blue: #1877F2;
+--wb-semanticColor-graphics-externalBrands-facebook-white: #FFFFFF;
+--wb-semanticColor-graphics-externalBrands-microsoft-red: #F35325;
+--wb-semanticColor-graphics-externalBrands-microsoft-green: #81BC06;
+--wb-semanticColor-graphics-externalBrands-microsoft-blue: #05A6F0;
+--wb-semanticColor-graphics-externalBrands-microsoft-yellow: #FFBA08;
+--wb-semanticColor-graphics-externalBrands-apple-brand: #FFFFFF;
+--wb-semanticColor-graphics-gems-background-subtle: #33182E;
+--wb-semanticColor-graphics-gems-background-default: #521B3C;
+--wb-semanticColor-graphics-gems-foreground-subtle: #BB3183;
+--wb-semanticColor-graphics-gems-foreground-default: #E83FA4;
+--wb-semanticColor-graphics-gems-foreground-strong: #FCEEF7;
+--wb-semanticColor-graphics-progress-attempted-background-subtle: #312405;
+--wb-semanticColor-graphics-progress-attempted-background-default: #5F4500;
+--wb-semanticColor-graphics-progress-attempted-foreground-subtle: #D69900;
+--wb-semanticColor-graphics-progress-attempted-foreground-strong: #5F4500;
+--wb-semanticColor-graphics-progress-notStarted-foreground-subtle: #B5B6B9;
+--wb-semanticColor-graphics-progress-notStarted-foreground-strong: #4A4C53;
+--wb-semanticColor-graphics-progress-complete-background-subtle: #1A2924;
+--wb-semanticColor-graphics-progress-complete-background-default: #24432D;
+--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
+--wb-semanticColor-graphics-role-all-current-background: #151521;
+--wb-semanticColor-graphics-role-all-current-foreground: #222149;
+--wb-semanticColor-graphics-role-administrator-background: #1D3F58;
+--wb-semanticColor-graphics-role-administrator-foreground: #20628F;
+--wb-semanticColor-graphics-role-learner-background: #672912;
+--wb-semanticColor-graphics-role-learner-foreground: #983C1A;
+--wb-semanticColor-graphics-role-parent-background: #24432D;
+--wb-semanticColor-graphics-role-parent-foreground: #2C5037;
+--wb-semanticColor-graphics-role-teacher-background: #5F4500;
+--wb-semanticColor-graphics-role-teacher-foreground: #966B00;
+--wb-semanticColor-graphics-streaks-background-subtle: #3E1F19;
+--wb-semanticColor-graphics-streaks-background-default: #672912;
+--wb-semanticColor-graphics-streaks-foreground-subtle: #C8481A;
+--wb-semanticColor-graphics-streaks-foreground-default: #F8551A;
+--wb-semanticColor-graphics-streaks-foreground-strong: #FEF4F2;
+--wb-semanticColor-graphics-neutral-background-subtle: #252531;
+--wb-semanticColor-graphics-neutral-background-default: #151521;
 --wb-semanticColor-learning-math-foreground-blue: #87CBFC;
 --wb-semanticColor-learning-math-foreground-gold: #FCC539;
 --wb-semanticColor-learning-math-foreground-green: #97D39E;
@@ -1113,6 +1257,78 @@
 --wb-semanticColor-core-shadow-chonky-neutral-strong: #4A4C53;
 --wb-semanticColor-core-shadow-chonky-disabled-subtle: transparent;
 --wb-semanticColor-core-shadow-chonky-disabled-default: #CBCBCD;
+--wb-semanticColor-graphics-characters-flesh-blue-background-subtle: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-background-default: #5753FA;
+--wb-semanticColor-graphics-characters-flesh-blue-background-strong: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-subtle: #6C82FF;
+--wb-semanticColor-graphics-characters-flesh-blue-border-default: #4340D0;
+--wb-semanticColor-graphics-characters-flesh-blue-border-strong: #363498;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-subtle: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-default: #28A9FF;
+--wb-semanticColor-graphics-characters-flesh-cyan-background-strong: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-subtle: #57BAFD;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-default: #2485C7;
+--wb-semanticColor-graphics-characters-flesh-cyan-border-strong: #20628F;
+--wb-semanticColor-graphics-characters-flesh-green-background-subtle: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-background-default: #579F6C;
+--wb-semanticColor-graphics-characters-flesh-green-background-strong: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-subtle: #72BB82;
+--wb-semanticColor-graphics-characters-flesh-green-border-default: #3C6D4A;
+--wb-semanticColor-graphics-characters-flesh-green-border-strong: #2C5037;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-subtle: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-default: #E83FA4;
+--wb-semanticColor-graphics-characters-flesh-magenta-background-strong: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-subtle: #F670C1;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-default: #BB3183;
+--wb-semanticColor-graphics-characters-flesh-magenta-border-strong: #84275E;
+--wb-semanticColor-graphics-characters-flesh-orange-background-subtle: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-background-default: #F8551A;
+--wb-semanticColor-graphics-characters-flesh-orange-background-strong: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-subtle: #F97B4F;
+--wb-semanticColor-graphics-characters-flesh-orange-border-default: #C8481A;
+--wb-semanticColor-graphics-characters-flesh-orange-border-strong: #983C1A;
+--wb-semanticColor-graphics-externalBrands-google-red: #EA4335;
+--wb-semanticColor-graphics-externalBrands-google-yellow: #FBBC05;
+--wb-semanticColor-graphics-externalBrands-google-green: #34A853;
+--wb-semanticColor-graphics-externalBrands-google-blue: #4285F4;
+--wb-semanticColor-graphics-externalBrands-facebook-blue: #1877F2;
+--wb-semanticColor-graphics-externalBrands-facebook-white: #FFFFFF;
+--wb-semanticColor-graphics-externalBrands-microsoft-red: #F35325;
+--wb-semanticColor-graphics-externalBrands-microsoft-green: #81BC06;
+--wb-semanticColor-graphics-externalBrands-microsoft-blue: #05A6F0;
+--wb-semanticColor-graphics-externalBrands-microsoft-yellow: #FFBA08;
+--wb-semanticColor-graphics-externalBrands-apple-brand: #000000;
+--wb-semanticColor-graphics-gems-background-subtle: #FFE3F4;
+--wb-semanticColor-graphics-gems-background-default: #FAD4EC;
+--wb-semanticColor-graphics-gems-foreground-subtle: #F9BBE1;
+--wb-semanticColor-graphics-gems-foreground-default: #E83FA4;
+--wb-semanticColor-graphics-gems-foreground-strong: #BB3183;
+--wb-semanticColor-graphics-progress-attempted-background-subtle: #FEF8E7;
+--wb-semanticColor-graphics-progress-attempted-background-default: #FEEAB8;
+--wb-semanticColor-graphics-progress-attempted-foreground-subtle: #FDD673;
+--wb-semanticColor-graphics-progress-attempted-foreground-strong: #966B00;
+--wb-semanticColor-graphics-progress-notStarted-foreground-subtle: #B5B6B9;
+--wb-semanticColor-graphics-progress-notStarted-foreground-strong: #4A4C53;
+--wb-semanticColor-graphics-progress-complete-background-subtle: #F1FBF1;
+--wb-semanticColor-graphics-progress-complete-background-default: #D5F3D5;
+--wb-semanticColor-graphics-progress-complete-foreground-strong: #2C5037;
+--wb-semanticColor-graphics-role-all-current-background: #F8F9FB;
+--wb-semanticColor-graphics-role-all-current-foreground: #EBF1FD;
+--wb-semanticColor-graphics-role-administrator-background: #CCE9FE;
+--wb-semanticColor-graphics-role-administrator-foreground: #57BAFD;
+--wb-semanticColor-graphics-role-learner-background: #FEBFB1;
+--wb-semanticColor-graphics-role-learner-foreground: #F8551A;
+--wb-semanticColor-graphics-role-parent-background: #D5F3D5;
+--wb-semanticColor-graphics-role-parent-foreground: #72BB82;
+--wb-semanticColor-graphics-role-teacher-background: #FDD673;
+--wb-semanticColor-graphics-role-teacher-foreground: #FCB706;
+--wb-semanticColor-graphics-streaks-background-subtle: #FEE9E5;
+--wb-semanticColor-graphics-streaks-background-default: #FEDFD8;
+--wb-semanticColor-graphics-streaks-foreground-subtle: #FEBFB1;
+--wb-semanticColor-graphics-streaks-foreground-default: #F8551A;
+--wb-semanticColor-graphics-streaks-foreground-strong: #C8481A;
+--wb-semanticColor-graphics-neutral-background-subtle: #FFFFFF;
+--wb-semanticColor-graphics-neutral-background-default: #F8F9FB;
 --wb-semanticColor-learning-math-foreground-blue: #20628F;
 --wb-semanticColor-learning-math-foreground-gold: #966B00;
 --wb-semanticColor-learning-math-foreground-green: #3C6D4A;

package/dist/es/index.js

@@ -4,7 +4,7 @@ const offBlack="#21242c";const white$1="#ffffff";const eggplant="#5f1e5c";const
 
 const spacing={xxxxSmall_2:2,xxxSmall_4:4,xxSmall_6:6,xSmall_8:8,small_12:12,medium_16:16,large_24:24,xLarge_32:32,xxLarge_48:48,xxxLarge_64:64};
 
-const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024};const mediaQuery={xs:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xs */`,sm:`@media screen and (min-width: ${width.smMin}px) and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.sm */`,md:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.md */`,lg:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lg */`,xl:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.xl */`,xsOrSmaller:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xsOrSmaller */`,smOrSmaller:`@media screen and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.smOrSmaller */`,mdOrSmaller:`@media screen and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.mdOrSmaller */`,lgOrSmaller:`@media screen and (max-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrSmaller */`,smOrLarger:`@media screen and (min-width: ${width.smMin}px) /* breakpoint.mediaQuery.smOrLarger */`,mdOrLarger:`@media screen and (min-width: ${width.mdMin}px) /* breakpoint.mediaQuery.mdOrLarger */`,lgOrLarger:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrLarger */`};const breakpoint={width,mediaQuery};
+const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024,lgMax:1199,xlMin:1200};const mediaQuery={xs:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xs */`,sm:`@media screen and (min-width: ${width.smMin}px) and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.sm */`,md:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.md */`,lg:`@media screen and (min-width: ${width.lgMin}px) and (max-width: ${width.lgMax}px) /* breakpoint.mediaQuery.lg */`,xl:`@media screen and (min-width: ${width.xlMin}px) /* breakpoint.mediaQuery.xl */`,xsOrSmaller:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xsOrSmaller */`,smOrSmaller:`@media screen and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.smOrSmaller */`,mdOrSmaller:`@media screen and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.mdOrSmaller */`,lgOrSmaller:`@media screen and (max-width: ${width.lgMax}px) /* breakpoint.mediaQuery.lgOrSmaller */`,smOrLarger:`@media screen and (min-width: ${width.smMin}px) /* breakpoint.mediaQuery.smOrLarger */`,mdOrLarger:`@media screen and (min-width: ${width.mdMin}px) /* breakpoint.mediaQuery.mdOrLarger */`,lgOrLarger:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrLarger */`,xlOrLarger:`@media screen and (min-width: ${width.xlMin}px) /* breakpoint.mediaQuery.xlOrLarger */`};const breakpoint={width,mediaQuery};
 
 const BASELINE_VALUE=10;function remToPx(value,baseline=BASELINE_VALUE){const num=parseFloat(value);const result=Math.round(num*baseline);return `${result}px`}function pxToRem(value,baseline=BASELINE_VALUE){return `${value/baseline}rem`}
 
@@ -18,9 +18,9 @@ const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_0
 
 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,large:sizing$1.size_220}},heading:{size:{small:sizing$1.size_120,medium:sizing$1.size_200,large:sizing$1.size_240,xlarge:sizing$1.size_280,xxlarge:sizing$1.size_360},lineHeight:{small:sizing$1.size_160,medium:sizing$1.size_240,large:sizing$1.size_280,xlarge:sizing$1.size_320,xxlarge:sizing$1.size_400}},textDecoration:{underlineOffset:sizing$1.size_020,thickness:sizing$1.size_010}};
 
-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 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};
 
-const transparent="transparent";const transparentShadowColor=color$1.offBlack16;const core={transparent,border:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack50,strong:color$1.fadedOffBlack72},critical:{subtle:color$1.fadedRed24,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack16,strong:color$1.fadedOffBlack32},knockout:{default:color$1.white}},background:{base:{subtle:color$1.offWhite,default:color$1.white,strong:color$1.darkBlue},instructive:{subtle:color$1.fadedBlue8,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack8,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed8,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen8,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold8,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:transparent,default:color$1.fadedOffBlack8,strong:color$1.fadedOffBlack16},overlay:{default:color$1.offBlack50}},foreground:{instructive:{subtle:color$1.fadedBlue,default:color$1.blue,strong:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack64,default:color$1.fadedOffBlack72,strong:color$1.offBlack},critical:{subtle:color$1.fadedRed,default:color$1.red,strong:color$1.activeRed},success:{subtle:color$1.fadedGreen24,default:color$1.green,strong:color$1.activeGreen},warning:{subtle:color$1.fadedGold24,default:color$1.gold,strong:color$1.activeGold},disabled:{subtle:color$1.fadedOffBlack16,default:color$1.fadedOffBlack32,strong:color$1.fadedOffBlack50},knockout:{default:color$1.white}},shadow:{transparent:{low:transparentShadowColor,mid:transparentShadowColor,high:transparentShadowColor,color:{subtle:color$1.blue_alpha20,strong:color$1.offBlack16}},chonky:{instructive:{subtle:color$1.fadedBlue,default:color$1.activeBlue},neutral:{subtle:color$1.fadedOffBlack32,default:color$1.fadedOffBlack50,strong:color$1.offBlack},disabled:{subtle:transparent,default:color$1.fadedOffBlack32}}}};const sharedFeedbackStrongTokens={background:core.background.neutral.strong,border:core.border.neutral.strong,text:core.foreground.knockout.default};const semanticColor$1={core,learning:{math:{foreground:{blue:"#3D7586",gold:"#946700",green:"#447A53",gray:"#5D5F66",grayH:"#3B3D45",grayI:"#21242C",purple:"#594094",purpleD:"#8351E8",pink:"#B25071",red:"#D92916"}},background:{gems:{subtle:color.magenta_90,default:color.magenta_80,strong:color.magenta_10},due:{subtle:color.cyan_80,default:color.cyan_60,strong:color.cyan_10},streaks:{subtle:color.orange_80,default:color.orange_60,strong:color.orange_10},progress:{notStarted:{default:color.gray_60},attempted:{default:color.yellow_60},complete:{default:color.green_60}},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}}}};
+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}}}};
 
 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)}};