@khanacademy/wonder-blocks-clickable 6.1.1 → 6.1.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 6.1.3
+
+### Patch Changes
+
+- Updated dependencies [507cf2f]
+    - @khanacademy/wonder-blocks-tokens@5.1.0
+
+## 6.1.2
+
+### Patch Changes
+
+- 5655b9f: Switch to use `focus.outer` semanticColor token
+- 8fc65a9: Migrate Clickable to `semanticColor`
+- 051f0f8: Rework action.disabled tokens to include properties per kind (border, background, foreground).
+- Updated dependencies [ed26d66]
+- Updated dependencies [5655b9f]
+- Updated dependencies [5655b9f]
+- Updated dependencies [8f53293]
+- Updated dependencies [051f0f8]
+- Updated dependencies [e1b78db]
+- Updated dependencies [051f0f8]
+    - @khanacademy/wonder-blocks-core@12.2.0
+    - @khanacademy/wonder-blocks-tokens@5.0.0
+
 ## 6.1.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'aphrodite';
 import { withRouter, Link } from 'react-router-dom';
 import { __RouterContext } from 'react-router';
 import { keys, addStyle } from '@khanacademy/wonder-blocks-core';
-import { color } from '@khanacademy/wonder-blocks-tokens';
+import { border, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 
 const getAppropriateTriggersForRole = role => {
   switch (role) {
@@ -469,20 +469,20 @@ const styles = StyleSheet.create({
   },
   focused: {
     ":focus": {
-      outline: `solid 2px ${color.blue}`
+      outline: `solid ${border.width.thin}px ${semanticColor.focus.outer}`
     }
   },
   focusedLight: {
-    outline: `solid 2px ${color.white}`
+    outline: `solid ${border.width.thin}px ${semanticColor.border.inverse}`
   },
   disabled: {
-    color: color.offBlack32,
+    color: semanticColor.action.secondary.disabled.foreground,
     cursor: "not-allowed",
     ":focus": {
       outline: "none"
     },
     ":focus-visible": {
-      outline: `solid 2px ${color.blue}`
+      outline: `solid ${border.width.thin}px ${semanticColor.focus.outer}`
     }
   }
 });

package/dist/index.js

@@ -497,20 +497,20 @@ const styles = aphrodite.StyleSheet.create({
   },
   focused: {
     ":focus": {
-      outline: `solid 2px ${wonderBlocksTokens.color.blue}`
+      outline: `solid ${wonderBlocksTokens.border.width.thin}px ${wonderBlocksTokens.semanticColor.focus.outer}`
     }
   },
   focusedLight: {
-    outline: `solid 2px ${wonderBlocksTokens.color.white}`
+    outline: `solid ${wonderBlocksTokens.border.width.thin}px ${wonderBlocksTokens.semanticColor.border.inverse}`
   },
   disabled: {
-    color: wonderBlocksTokens.color.offBlack32,
+    color: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground,
     cursor: "not-allowed",
     ":focus": {
       outline: "none"
     },
     ":focus-visible": {
-      outline: `solid 2px ${wonderBlocksTokens.color.blue}`
+      outline: `solid ${wonderBlocksTokens.border.width.thin}px ${wonderBlocksTokens.semanticColor.focus.outer}`
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.1.1",
-    "@khanacademy/wonder-blocks-tokens": "4.2.1"
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-tokens": "5.1.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",