@khanacademy/wonder-blocks-form - npm Package Compare versions

Comparing version 0.0.0-PR2442-20250127234558 to 0.0.0-PR2442-20250130225056

CHANGELOG.md

 # @khanacademy/wonder-blocks-form
 
-## 0.0.0-PR2442-20250127234558
+## 0.0.0-PR2442-20250130225056
 
@@ -8,8 +8,20 @@ ### Patch Changes
 -   Updated dependencies [0199324d]
-    -   @khanacademy/wonder-blocks-clickable@0.0.0-PR2442-20250127234558
-    -   @khanacademy/wonder-blocks-core@0.0.0-PR2442-20250127234558
-    -   @khanacademy/wonder-blocks-icon@0.0.0-PR2442-20250127234558
-    -   @khanacademy/wonder-blocks-layout@0.0.0-PR2442-20250127234558
-    -   @khanacademy/wonder-blocks-typography@0.0.0-PR2442-20250127234558
+    -   @khanacademy/wonder-blocks-clickable@0.0.0-PR2442-20250130225056
+    -   @khanacademy/wonder-blocks-core@0.0.0-PR2442-20250130225056
+    -   @khanacademy/wonder-blocks-icon@0.0.0-PR2442-20250130225056
+    -   @khanacademy/wonder-blocks-layout@0.0.0-PR2442-20250130225056
+    -   @khanacademy/wonder-blocks-typography@0.0.0-PR2442-20250130225056
 
+## 7.0.1
+
+### Patch Changes
+
+-   c162abb4: Migrate color instances to use semanticColor internally on TextField and TextArea
+-   8cfaeab0: Migrate Radio and Checkbox to use semanticColor tokens
+-   Updated dependencies [8cfaeab0]
+-   Updated dependencies [c162abb4]
+    -   @khanacademy/wonder-blocks-tokens@4.1.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.7
+    -   @khanacademy/wonder-blocks-layout@3.0.7
+
 ## 7.0.0
@@ -16,0 +28,0 @@

dist/es/index.js

@@ -8,3 +8,3 @@ import _extends from '@babel/runtime/helpers/extends';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { spacing, mix, color, border, font } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, semanticColor, border, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
@@ -26,11 +26,2 @@ import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 }
-const {
-  blue: blue$1,
-  red: red$1,
-  white: white$1,
-  offWhite: offWhite$1,
-  offBlack16: offBlack16$1,
-  offBlack32: offBlack32$1,
-  offBlack50: offBlack50$1
-} = color;
 const size$1 = spacing.medium_16;
@@ -61,3 +52,3 @@ const checkSize = spacing.small_12;
   const checkboxIcon = React.createElement(PhosphorIcon, {
-    color: disabled ? offBlack32$1 : white$1,
+    color: disabled ? semanticColor.icon.disabled : semanticColor.icon.inverse,
     icon: checked ? checkIcon : minusIcon,
@@ -92,2 +83,6 @@ size: "small",
 });
+const disabledState$1 = {
+  border: semanticColor.border.primary,
+  background: semanticColor.action.disabled.secondary
+};
 const sharedStyles$1 = StyleSheet.create({
@@ -108,10 +103,10 @@ inputReset: {
     borderStyle: "solid",
-    borderWidth: 1,
-    borderRadius: 3
+    borderWidth: border.width.hairline,
+    borderRadius: border.radius.small_3
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite$1,
-    borderColor: offBlack16$1,
-    borderWidth: 1
+    backgroundColor: disabledState$1.background,
+    borderColor: disabledState$1.border,
+    borderWidth: border.width.hairline
   },
@@ -124,18 +119,2 @@ checkboxIcon: {
 });
-const fadedBlue$1 = mix(color.fadedBlue16, white$1);
-const activeBlue = color.activeBlue;
-const fadedRed$1 = mix(color.fadedRed8, white$1);
-const activeRed = color.activeRed;
-const colors$1 = {
-  default: {
-    faded: fadedBlue$1,
-    base: blue$1,
-    active: activeBlue
-  },
-  error: {
-    faded: fadedRed$1,
-    base: red$1,
-    active: activeRed
-  }
-};
 const styles$6 = {};
@@ -147,18 +126,34 @@ const _generateStyles$1 = (checked, error) => {
   }
-  const palette = error ? colors$1.error : colors$1.default;
+  const isCheckedOrIndeterminate = checked || checked == null;
+  const actionType = error ? "destructive" : "progressive";
+  const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
+  const colorAction = semanticColor.action[styleType][actionType];
+  const states = {
+    default: {
+      border: colorAction.default.border,
+      background: colorAction.default.background
+    },
+    error: {
+      border: semanticColor.status.critical.foreground,
+      background: semanticColor.status.critical.background
+    }
+  };
   let newStyles = {};
-  if (checked || checked == null) {
+  if (isCheckedOrIndeterminate) {
     newStyles = {
       default: {
-        backgroundColor: palette.base,
-        borderWidth: 0,
+        backgroundColor: states.default.background,
+        borderColor: states.default.border,
         ":focus-visible": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":hover": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":active": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
-          background: palette.active
+          outline: `${border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: 1,
+          background: colorAction.press.background
         }
@@ -168,20 +163,21 @@ }
   } else {
+    const currentState = error ? states.error : states.default;
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed$1 : white$1,
-        borderColor: error ? red$1 : offBlack50$1,
+        backgroundColor: currentState.background,
+        borderColor: currentState.border,
         ":focus-visible": {
-          backgroundColor: error ? fadedRed$1 : white$1,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":hover": {
-          backgroundColor: error ? fadedRed$1 : white$1,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":active": {
-          backgroundColor: palette.faded,
-          borderColor: error ? activeRed : blue$1,
-          borderWidth: 2
+          backgroundColor: colorAction.press.background,
+          outline: `${border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: -1
         }
@@ -196,11 +192,2 @@ }
 const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
-const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
-} = color;
 const StyledInput$1 = addStyle("input");
@@ -237,2 +224,6 @@ const RadioCore = React.forwardRef(function RadioCore(props, ref) {
 });
+const disabledState = {
+  border: semanticColor.border.primary,
+  background: semanticColor.action.disabled.secondary
+};
 const size = 16;
@@ -246,3 +237,3 @@ const disabledChecked = {
   borderRadius: "50%",
-  backgroundColor: offBlack32
+  backgroundColor: semanticColor.action.disabled.default
 };
@@ -264,3 +255,3 @@ const sharedStyles = StyleSheet.create({
     borderStyle: "solid",
-    borderWidth: 1,
+    borderWidth: border.width.hairline,
     borderRadius: "50%"
@@ -270,21 +261,7 @@ },
     cursor: "auto",
-    backgroundColor: offWhite,
-    borderColor: offBlack16,
-    borderWidth: 1
+    backgroundColor: disabledState.background,
+    borderColor: disabledState.border,
+    borderWidth: border.width.hairline
   }
 });
-const fadedBlue = mix(color.fadedBlue16, white);
-const fadedRed = mix(color.fadedRed8, white);
-const colors = {
-  default: {
-    faded: fadedBlue,
-    base: blue,
-    active: color.activeBlue
-  },
-  error: {
-    faded: fadedRed,
-    base: red,
-    active: color.activeRed
-  }
-};
 const styles$5 = {};
@@ -296,3 +273,18 @@ const _generateStyles = (checked, error) => {
   }
-  const palette = error ? colors.error : colors.default;
+  const actionType = error ? "destructive" : "progressive";
+  const colorAction = semanticColor.action.outlined[actionType];
+  const states = {
+    unchecked: {
+      border: semanticColor.border.strong,
+      background: colorAction.default.background
+    },
+    checked: {
+      border: colorAction.default.foreground,
+      background: colorAction.default.background
+    },
+    error: {
+      border: semanticColor.status.critical.foreground,
+      background: semanticColor.status.critical.background
+    }
+  };
   let newStyles = {};
@@ -302,14 +294,17 @@ if (checked) {
       default: {
-        backgroundColor: white,
-        borderColor: palette.base,
+        backgroundColor: states.checked.background,
+        borderColor: states.checked.border,
         borderWidth: size / 4,
         ":focus-visible": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":hover": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":active": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
-          borderColor: palette.active
+          outline: `${border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: 1,
+          borderColor: colorAction.press.border
         }
@@ -319,20 +314,21 @@ }
   } else {
+    const currentState = error ? states.error : states.unchecked;
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed : white,
-        borderColor: error ? red : offBlack50,
+        backgroundColor: currentState.background,
+        borderColor: currentState.border,
         ":focus-visible": {
-          backgroundColor: error ? fadedRed : white,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":hover": {
-          backgroundColor: error ? fadedRed : white,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":active": {
-          backgroundColor: palette.faded,
-          borderColor: error ? color.activeRed : blue,
-          borderWidth: 2
+          backgroundColor: colorAction.press.background,
+          outline: `${border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: -1
         }
@@ -421,3 +417,3 @@ }
   disabledLabel: {
-    color: color.offBlack32
+    color: semanticColor.text.disabled
   },
@@ -427,3 +423,3 @@ description: {
     marginTop: spacing.xxxSmall_4,
-    color: color.offBlack64
+    color: semanticColor.text.secondary
   }
@@ -499,7 +495,7 @@ });
     marginTop: spacing.xxxSmall_4,
-    color: color.offBlack64
+    color: semanticColor.text.secondary
   },
   error: {
     marginTop: spacing.xxxSmall_4,
-    color: color.red
+    color: semanticColor.status.critical.foreground
   },
@@ -749,2 +745,19 @@ defaultLineGap: {
 };
+const states$1 = {
+  default: {
+    border: semanticColor.border.strong,
+    background: semanticColor.surface.primary,
+    foreground: semanticColor.text.primary
+  },
+  disabled: {
+    border: semanticColor.border.primary,
+    background: semanticColor.action.disabled.secondary,
+    foreground: semanticColor.text.secondary
+  },
+  error: {
+    border: semanticColor.status.critical.foreground,
+    background: semanticColor.status.critical.background,
+    foreground: semanticColor.text.primary
+  }
+};
 const styles$2 = StyleSheet.create({
@@ -760,7 +773,7 @@ input: {
   default: {
-    background: color.white,
-    border: `1px solid ${color.offBlack50}`,
-    color: color.offBlack,
+    background: states$1.default.background,
+    border: `${border.width.hairline}px solid ${states$1.default.border}`,
+    color: states$1.default.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: semanticColor.text.secondary
     }
@@ -770,30 +783,30 @@ },
     ":focus-visible": {
-      borderColor: color.blue,
-      outline: `1px solid ${color.blue}`,
-      outlineOffset: "-2px"
+      borderColor: semanticColor.border.focus,
+      outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
+      outlineOffset: -2
     }
   },
   error: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.red}`,
-    color: color.offBlack,
+    background: states$1.error.background,
+    border: `${border.width.hairline}px solid ${states$1.error.border}`,
+    color: states$1.error.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: color.red,
-      borderColor: color.red
+      outlineColor: states$1.error.border,
+      borderColor: states$1.error.border
     }
   },
   disabled: {
-    background: color.offWhite,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack64,
+    background: states$1.disabled.background,
+    border: `${border.width.hairline}px solid ${states$1.disabled.border}`,
+    color: states$1.disabled.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: states$1.disabled.foreground
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `2px solid ${color.offBlack32}`,
-      outlineOffset: "-3px"
+      outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+      outlineOffset: -3
     }
@@ -875,12 +888,12 @@ }
   label: {
-    color: color.offBlack
+    color: semanticColor.text.primary
   },
   description: {
-    color: color.offBlack64
+    color: semanticColor.text.secondary
   },
   error: {
-    color: color.red
+    color: semanticColor.status.critical.foreground
   },
   required: {
-    color: color.red
+    color: semanticColor.status.critical.foreground
   }
@@ -1095,2 +1108,19 @@ });
 const VERTICAL_SPACING_PX = 10;
+const states = {
+  default: {
+    border: semanticColor.border.strong,
+    background: semanticColor.surface.primary,
+    foreground: semanticColor.text.primary
+  },
+  disabled: {
+    border: semanticColor.border.primary,
+    background: semanticColor.action.disabled.secondary,
+    foreground: semanticColor.text.secondary
+  },
+  error: {
+    border: semanticColor.status.critical.foreground,
+    background: semanticColor.status.critical.background,
+    foreground: semanticColor.text.primary
+  }
+};
 const styles = StyleSheet.create({
@@ -1104,7 +1134,7 @@ textarea: {
   default: {
-    background: color.white,
-    border: `1px solid ${color.offBlack50}`,
-    color: color.offBlack,
+    background: states.default.background,
+    border: `${border.width.hairline}px solid ${states.default.border}`,
+    color: states.default.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: semanticColor.text.secondary
     }
@@ -1114,30 +1144,30 @@ },
     ":focus-visible": {
-      borderColor: color.blue,
-      outline: `1px solid ${color.blue}`,
-      outlineOffset: "-2px"
+      borderColor: semanticColor.border.focus,
+      outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
+      outlineOffset: -2
     }
   },
   disabled: {
-    background: color.offWhite,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack64,
+    background: states.disabled.background,
+    border: `${border.width.hairline}px solid ${states.disabled.border}`,
+    color: states.disabled.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: states.disabled.foreground
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `2px solid ${color.offBlack32}`,
-      outlineOffset: "-3px"
+      outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+      outlineOffset: -3
     }
   },
   error: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.red}`,
-    color: color.offBlack,
+    background: states.error.background,
+    border: `${border.width.hairline}px solid ${states.error.border}`,
+    color: states.error.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: color.red,
-      borderColor: color.red
+      outlineColor: states.error.border,
+      borderColor: states.error.border
     }
@@ -1144,0 +1174,0 @@ }

dist/index.js

@@ -54,11 +54,2 @@ 'use strict';
 }
-const {
-  blue: blue$1,
-  red: red$1,
-  white: white$1,
-  offWhite: offWhite$1,
-  offBlack16: offBlack16$1,
-  offBlack32: offBlack32$1,
-  offBlack50: offBlack50$1
-} = wonderBlocksTokens.color;
 const size$1 = wonderBlocksTokens.spacing.medium_16;
@@ -89,3 +80,3 @@ const checkSize = wonderBlocksTokens.spacing.small_12;
   const checkboxIcon = React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    color: disabled ? offBlack32$1 : white$1,
+    color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.inverse,
     icon: checked ? checkIcon__default["default"] : minusIcon__default["default"],
@@ -120,2 +111,6 @@ size: "small",
 });
+const disabledState$1 = {
+  border: wonderBlocksTokens.semanticColor.border.primary,
+  background: wonderBlocksTokens.semanticColor.action.disabled.secondary
+};
 const sharedStyles$1 = aphrodite.StyleSheet.create({
@@ -136,10 +131,10 @@ inputReset: {
     borderStyle: "solid",
-    borderWidth: 1,
-    borderRadius: 3
+    borderWidth: wonderBlocksTokens.border.width.hairline,
+    borderRadius: wonderBlocksTokens.border.radius.small_3
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite$1,
-    borderColor: offBlack16$1,
-    borderWidth: 1
+    backgroundColor: disabledState$1.background,
+    borderColor: disabledState$1.border,
+    borderWidth: wonderBlocksTokens.border.width.hairline
   },
@@ -152,18 +147,2 @@ checkboxIcon: {
 });
-const fadedBlue$1 = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedBlue16, white$1);
-const activeBlue = wonderBlocksTokens.color.activeBlue;
-const fadedRed$1 = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedRed8, white$1);
-const activeRed = wonderBlocksTokens.color.activeRed;
-const colors$1 = {
-  default: {
-    faded: fadedBlue$1,
-    base: blue$1,
-    active: activeBlue
-  },
-  error: {
-    faded: fadedRed$1,
-    base: red$1,
-    active: activeRed
-  }
-};
 const styles$6 = {};
@@ -175,18 +154,34 @@ const _generateStyles$1 = (checked, error) => {
   }
-  const palette = error ? colors$1.error : colors$1.default;
+  const isCheckedOrIndeterminate = checked || checked == null;
+  const actionType = error ? "destructive" : "progressive";
+  const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
+  const colorAction = wonderBlocksTokens.semanticColor.action[styleType][actionType];
+  const states = {
+    default: {
+      border: colorAction.default.border,
+      background: colorAction.default.background
+    },
+    error: {
+      border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+      background: wonderBlocksTokens.semanticColor.status.critical.background
+    }
+  };
   let newStyles = {};
-  if (checked || checked == null) {
+  if (isCheckedOrIndeterminate) {
     newStyles = {
       default: {
-        backgroundColor: palette.base,
-        borderWidth: 0,
+        backgroundColor: states.default.background,
+        borderColor: states.default.border,
         ":focus-visible": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":hover": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":active": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
-          background: palette.active
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: 1,
+          background: colorAction.press.background
         }
@@ -196,20 +191,21 @@ }
   } else {
+    const currentState = error ? states.error : states.default;
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed$1 : white$1,
-        borderColor: error ? red$1 : offBlack50$1,
+        backgroundColor: currentState.background,
+        borderColor: currentState.border,
         ":focus-visible": {
-          backgroundColor: error ? fadedRed$1 : white$1,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":hover": {
-          backgroundColor: error ? fadedRed$1 : white$1,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":active": {
-          backgroundColor: palette.faded,
-          borderColor: error ? activeRed : blue$1,
-          borderWidth: 2
+          backgroundColor: colorAction.press.background,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: -1
         }
@@ -224,11 +220,2 @@ }
 const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
-const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
-} = wonderBlocksTokens.color;
 const StyledInput$1 = wonderBlocksCore.addStyle("input");
@@ -265,2 +252,6 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
 });
+const disabledState = {
+  border: wonderBlocksTokens.semanticColor.border.primary,
+  background: wonderBlocksTokens.semanticColor.action.disabled.secondary
+};
 const size = 16;
@@ -274,3 +265,3 @@ const disabledChecked = {
   borderRadius: "50%",
-  backgroundColor: offBlack32
+  backgroundColor: wonderBlocksTokens.semanticColor.action.disabled.default
 };
@@ -292,3 +283,3 @@ const sharedStyles = aphrodite.StyleSheet.create({
     borderStyle: "solid",
-    borderWidth: 1,
+    borderWidth: wonderBlocksTokens.border.width.hairline,
     borderRadius: "50%"
@@ -298,21 +289,7 @@ },
     cursor: "auto",
-    backgroundColor: offWhite,
-    borderColor: offBlack16,
-    borderWidth: 1
+    backgroundColor: disabledState.background,
+    borderColor: disabledState.border,
+    borderWidth: wonderBlocksTokens.border.width.hairline
   }
 });
-const fadedBlue = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedBlue16, white);
-const fadedRed = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedRed8, white);
-const colors = {
-  default: {
-    faded: fadedBlue,
-    base: blue,
-    active: wonderBlocksTokens.color.activeBlue
-  },
-  error: {
-    faded: fadedRed,
-    base: red,
-    active: wonderBlocksTokens.color.activeRed
-  }
-};
 const styles$5 = {};
@@ -324,3 +301,18 @@ const _generateStyles = (checked, error) => {
   }
-  const palette = error ? colors.error : colors.default;
+  const actionType = error ? "destructive" : "progressive";
+  const colorAction = wonderBlocksTokens.semanticColor.action.outlined[actionType];
+  const states = {
+    unchecked: {
+      border: wonderBlocksTokens.semanticColor.border.strong,
+      background: colorAction.default.background
+    },
+    checked: {
+      border: colorAction.default.foreground,
+      background: colorAction.default.background
+    },
+    error: {
+      border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+      background: wonderBlocksTokens.semanticColor.status.critical.background
+    }
+  };
   let newStyles = {};
@@ -330,14 +322,17 @@ if (checked) {
       default: {
-        backgroundColor: white,
-        borderColor: palette.base,
+        backgroundColor: states.checked.background,
+        borderColor: states.checked.border,
         borderWidth: size / 4,
         ":focus-visible": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":hover": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":active": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
-          borderColor: palette.active
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: 1,
+          borderColor: colorAction.press.border
         }
@@ -347,20 +342,21 @@ }
   } else {
+    const currentState = error ? states.error : states.unchecked;
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed : white,
-        borderColor: error ? red : offBlack50,
+        backgroundColor: currentState.background,
+        borderColor: currentState.border,
         ":focus-visible": {
-          backgroundColor: error ? fadedRed : white,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":hover": {
-          backgroundColor: error ? fadedRed : white,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":active": {
-          backgroundColor: palette.faded,
-          borderColor: error ? wonderBlocksTokens.color.activeRed : blue,
-          borderWidth: 2
+          backgroundColor: colorAction.press.background,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: -1
         }
@@ -449,3 +445,3 @@ }
   disabledLabel: {
-    color: wonderBlocksTokens.color.offBlack32
+    color: wonderBlocksTokens.semanticColor.text.disabled
   },
@@ -455,3 +451,3 @@ description: {
     marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   }
@@ -527,7 +523,7 @@ });
     marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   },
   error: {
     marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    color: wonderBlocksTokens.color.red
+    color: wonderBlocksTokens.semanticColor.status.critical.foreground
   },
@@ -777,2 +773,19 @@ defaultLineGap: {
 };
+const states$1 = {
+  default: {
+    border: wonderBlocksTokens.semanticColor.border.strong,
+    background: wonderBlocksTokens.semanticColor.surface.primary,
+    foreground: wonderBlocksTokens.semanticColor.text.primary
+  },
+  disabled: {
+    border: wonderBlocksTokens.semanticColor.border.primary,
+    background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+    foreground: wonderBlocksTokens.semanticColor.text.secondary
+  },
+  error: {
+    border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+    background: wonderBlocksTokens.semanticColor.status.critical.background,
+    foreground: wonderBlocksTokens.semanticColor.text.primary
+  }
+};
 const styles$2 = aphrodite.StyleSheet.create({
@@ -788,7 +801,7 @@ input: {
   default: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack50}`,
-    color: wonderBlocksTokens.color.offBlack,
+    background: states$1.default.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.default.border}`,
+    color: states$1.default.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: wonderBlocksTokens.semanticColor.text.secondary
     }
@@ -798,30 +811,30 @@ },
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.color.blue,
-      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-2px"
+      borderColor: wonderBlocksTokens.semanticColor.border.focus,
+      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
+      outlineOffset: -2
     }
   },
   error: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.red}`,
-    color: wonderBlocksTokens.color.offBlack,
+    background: states$1.error.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.error.border}`,
+    color: states$1.error.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: wonderBlocksTokens.semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: wonderBlocksTokens.color.red,
-      borderColor: wonderBlocksTokens.color.red
+      outlineColor: states$1.error.border,
+      borderColor: states$1.error.border
     }
   },
   disabled: {
-    background: wonderBlocksTokens.color.offWhite,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack64,
+    background: states$1.disabled.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.disabled.border}`,
+    color: states$1.disabled.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: states$1.disabled.foreground
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
-      outlineOffset: "-3px"
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
+      outlineOffset: -3
     }
@@ -903,12 +916,12 @@ }
   label: {
-    color: wonderBlocksTokens.color.offBlack
+    color: wonderBlocksTokens.semanticColor.text.primary
   },
   description: {
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   },
   error: {
-    color: wonderBlocksTokens.color.red
+    color: wonderBlocksTokens.semanticColor.status.critical.foreground
   },
   required: {
-    color: wonderBlocksTokens.color.red
+    color: wonderBlocksTokens.semanticColor.status.critical.foreground
   }
@@ -1123,2 +1136,19 @@ });
 const VERTICAL_SPACING_PX = 10;
+const states = {
+  default: {
+    border: wonderBlocksTokens.semanticColor.border.strong,
+    background: wonderBlocksTokens.semanticColor.surface.primary,
+    foreground: wonderBlocksTokens.semanticColor.text.primary
+  },
+  disabled: {
+    border: wonderBlocksTokens.semanticColor.border.primary,
+    background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+    foreground: wonderBlocksTokens.semanticColor.text.secondary
+  },
+  error: {
+    border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+    background: wonderBlocksTokens.semanticColor.status.critical.background,
+    foreground: wonderBlocksTokens.semanticColor.text.primary
+  }
+};
 const styles = aphrodite.StyleSheet.create({
@@ -1132,7 +1162,7 @@ textarea: {
   default: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack50}`,
-    color: wonderBlocksTokens.color.offBlack,
+    background: states.default.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.default.border}`,
+    color: states.default.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: wonderBlocksTokens.semanticColor.text.secondary
     }
@@ -1142,30 +1172,30 @@ },
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.color.blue,
-      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-2px"
+      borderColor: wonderBlocksTokens.semanticColor.border.focus,
+      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
+      outlineOffset: -2
     }
   },
   disabled: {
-    background: wonderBlocksTokens.color.offWhite,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack64,
+    background: states.disabled.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.disabled.border}`,
+    color: states.disabled.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: states.disabled.foreground
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
-      outlineOffset: "-3px"
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
+      outlineOffset: -3
     }
   },
   error: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.red}`,
-    color: wonderBlocksTokens.color.offBlack,
+    background: states.error.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.error.border}`,
+    color: states.error.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: wonderBlocksTokens.semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: wonderBlocksTokens.color.red,
-      borderColor: wonderBlocksTokens.color.red
+      outlineColor: states.error.border,
+      borderColor: states.error.border
     }
@@ -1172,0 +1202,0 @@ }

package.json

 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "0.0.0-PR2442-20250127234558",
+  "version": "0.0.0-PR2442-20250130225056",
   "design": "v1",
@@ -20,8 +20,8 @@ "description": "Form components for Wonder Blocks.",
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2442-20250127234558",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2442-20250127234558",
-    "@khanacademy/wonder-blocks-icon": "0.0.0-PR2442-20250127234558",
-    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2442-20250127234558",
-    "@khanacademy/wonder-blocks-tokens": "^4.0.0",
-    "@khanacademy/wonder-blocks-typography": "0.0.0-PR2442-20250127234558"
+    "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2442-20250130225056",
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2442-20250130225056",
+    "@khanacademy/wonder-blocks-icon": "0.0.0-PR2442-20250130225056",
+    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2442-20250130225056",
+    "@khanacademy/wonder-blocks-tokens": "^4.1.0",
+    "@khanacademy/wonder-blocks-typography": "0.0.0-PR2442-20250130225056"
   },
@@ -28,0 +28,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

146056

increased by4.99%

Lines of code

3552

increased by1.72%

Dependency changes

• + Added@khanacademy/wonder-blocks-clickable@0.0.0-PR2442-20250130225056(transitive)

• + Added@khanacademy/wonder-blocks-core@0.0.0-PR2442-20250130225056(transitive)

• + Added@khanacademy/wonder-blocks-icon@0.0.0-PR2442-20250130225056(transitive)

• + Added@khanacademy/wonder-blocks-layout@0.0.0-PR2442-20250130225056(transitive)

• + Added@khanacademy/wonder-blocks-typography@0.0.0-PR2442-20250130225056(transitive)

• - Removed@khanacademy/wonder-blocks-clickable@0.0.0-PR2442-20250127234558(transitive)

• - Removed@khanacademy/wonder-blocks-core@0.0.0-PR2442-20250127234558(transitive)

• - Removed@khanacademy/wonder-blocks-icon@0.0.0-PR2442-20250127234558(transitive)

• - Removed@khanacademy/wonder-blocks-layout@0.0.0-PR2442-20250127234558(transitive)

• - Removed@khanacademy/wonder-blocks-typography@0.0.0-PR2442-20250127234558(transitive)

• Updated@khanacademy/wonder-blocks-clickable@0.0.0-PR2442-20250130225056

• Updated@khanacademy/wonder-blocks-core@0.0.0-PR2442-20250130225056

• Updated@khanacademy/wonder-blocks-icon@0.0.0-PR2442-20250130225056

• Updated@khanacademy/wonder-blocks-layout@0.0.0-PR2442-20250130225056

• Updated@khanacademy/wonder-blocks-tokens@^4.1.0

• Updated@khanacademy/wonder-blocks-typography@0.0.0-PR2442-20250130225056