From b05461e32c058918bdd4712eefe8ef32ffc30798 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Wed, 8 Jan 2025 11:46:50 -0500
Subject: [PATCH] docs(changeset): Use semanticColor instead of color

---
 .changeset/modern-onions-talk.md                     |  5 +++++
 .../src/components/clickable.tsx                     | 12 +++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/modern-onions-talk.md

diff --git a/.changeset/modern-onions-talk.md b/.changeset/modern-onions-talk.md
new file mode 100644
index 0000000000..63bda0899f
--- /dev/null
+++ 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
index a61a88731e..5326a3a97b 100644
--- 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}`,
         },
     },
 });