docs(changeset): Use semanticColor instead of color

Khan · Jan 8, 2025 · b05461e · b05461e
1 parent 5fde470
commit b05461e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/.changeset/modern-onions-talk.md b/.changeset/modern-onions-talk.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-clickable": patch
+---
+
+Use semanticColor instead of color
diff --git a/packages/wonder-blocks-clickable/src/components/clickable.tsx b/packages/wonder-blocks-clickable/src/components/clickable.tsx
@@ -5,7 +5,7 @@ import {__RouterContext} from "react-router";
 
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {color, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 
 import getClickableBehavior from "../util/get-clickable-behavior";
 import type {ClickableRole, ClickableState} from "./clickable-behavior";
@@ -410,20 +410,22 @@ const styles = StyleSheet.create({
     },
     focused: {
         ":focus": {
-            outline: `solid 2px ${color.blue}`,
+            // TODO(juan): do we need to define a "focused" border color token?
+            outline: `solid 2px ${semanticColor.action.primary.default}`,
         },
     },
     focusedLight: {
-        outline: `solid 2px ${color.white}`,
+        outline: `solid 2px ${semanticColor.border.inverse}`,
     },
     disabled: {
-        color: color.offBlack32,
+        color: semanticColor.text.disabled,
         cursor: "not-allowed",
         ":focus": {
             outline: "none",
         },
         ":focus-visible": {
-            outline: `solid 2px ${color.blue}`,
+            // TODO(juan): do we need to define a "disabled" border color token?
+            outline: `solid 2px ${semanticColor.action.disabled.default}`,
         },
     },
 });