@khanacademy/wonder-blocks-accordion 3.0.5 → 3.0.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 3.0.7
+
+### Patch Changes
+
+-   Updated dependencies [0199324d]
+    -   @khanacademy/wonder-blocks-clickable@6.0.0
+    -   @khanacademy/wonder-blocks-core@12.0.0
+    -   @khanacademy/wonder-blocks-icon@5.0.6
+    -   @khanacademy/wonder-blocks-typography@3.0.6
+
+## 3.0.6
+
+### Patch Changes
+
+-   7057fa7c: Replace `color` with `semanticColor` tokens
+
 ## 3.0.5
 
 ### Patch Changes

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
-import * as tokens from '@khanacademy/wonder-blocks-tokens';
+import { semanticColor, spacing } from '@khanacademy/wonder-blocks-tokens';
 import { HeadingSmall, Body } from '@khanacademy/wonder-blocks-typography';
 import caretDown from '@phosphor-icons/core/bold/caret-down-bold.svg';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
@@ -199,13 +199,13 @@ const AccordionSectionHeader = React.forwardRef(function AccordionSectionHeader(
     style: [caretPosition === "end" ? styles$1.headerStringCaretEnd : styles$1.headerStringCaretStart]
   }, header) : header), collapsible && React.createElement(PhosphorIcon, {
     icon: caretDown,
-    color: tokens.color.offBlack64,
+    color: semanticColor.icon.primary,
     size: "small",
     style: [animated && styles$1.iconWithAnimation, caretPosition === "start" ? styles$1.iconStart : styles$1.iconEnd, expanded && styles$1.iconExpanded],
     testId: testId ? `${testId}-caret-icon` : undefined
   }))));
 });
-const INNER_BORDER_RADIUS = tokens.spacing.small_12 - 1;
+const INNER_BORDER_RADIUS = spacing.small_12 - 1;
 const ANIMATION_LENGTH = "300ms";
 const styles$1 = StyleSheet.create({
   heading: {
@@ -222,19 +222,13 @@ const styles$1 = StyleSheet.create({
     position: "relative",
     zIndex: 1,
     ":active": {
-      outline: `2px solid ${tokens.color.activeBlue}`
+      outline: `2px solid ${semanticColor.action.outlined.progressive.press.border}`
     },
     ":hover": {
-      outline: `2px solid ${tokens.color.blue}`
-    },
-    ":focus": {
-      boxShadow: `0 0 0 2px ${tokens.color.blue}`
-    },
-    ":focus:not(:focus-visible)": {
-      boxShadow: "none"
+      outline: `2px solid ${semanticColor.border.focus}`
     },
     ":focus-visible": {
-      outline: `2px solid ${tokens.color.blue}`
+      outline: `2px solid ${semanticColor.border.focus}`
     }
   },
   headerWrapperWithAnimation: {
@@ -256,16 +250,16 @@ const styles$1 = StyleSheet.create({
     textAlign: "start"
   },
   headerString: {
-    paddingTop: tokens.spacing.medium_16,
-    paddingBottom: tokens.spacing.medium_16
+    paddingTop: spacing.medium_16,
+    paddingBottom: spacing.medium_16
   },
   headerStringCaretEnd: {
-    paddingInlineEnd: tokens.spacing.small_12,
-    paddingInlineStart: tokens.spacing.medium_16
+    paddingInlineEnd: spacing.small_12,
+    paddingInlineStart: spacing.medium_16
   },
   headerStringCaretStart: {
-    paddingInlineEnd: tokens.spacing.medium_16,
-    paddingInlineStart: tokens.spacing.small_12
+    paddingInlineEnd: spacing.medium_16,
+    paddingInlineStart: spacing.small_12
   },
   iconWithAnimation: {
     transition: `transform ${ANIMATION_LENGTH}`
@@ -274,22 +268,16 @@ const styles$1 = StyleSheet.create({
     transform: "rotate(180deg)"
   },
   iconStart: {
-    marginInlineStart: tokens.spacing.medium_16
+    marginInlineStart: spacing.medium_16
   },
   iconEnd: {
-    marginInlineEnd: tokens.spacing.medium_16
+    marginInlineEnd: spacing.medium_16
   },
   disabled: {
     pointerEvents: "none",
     color: "inherit",
-    ":focus": {
-      boxShadow: `0 0 0 2px ${tokens.color.offBlack32}`
-    },
-    ":focus:not(:focus-visible)": {
-      boxShadow: "none"
-    },
     ":focus-visible": {
-      outline: `2px solid ${tokens.color.offBlack32}`
+      outline: `2px solid ${semanticColor.action.disabled.default}`
     }
   }
 });
@@ -374,7 +362,7 @@ const styles = StyleSheet.create({
     display: "grid",
     position: "static",
     boxSizing: "border-box",
-    backgroundColor: tokens.color.white
+    backgroundColor: semanticColor.surface.primary
   },
   wrapperWithAnimation: {
     transition: "grid-template-rows 300ms"
@@ -395,7 +383,7 @@ const styles = StyleSheet.create({
     visibility: "visible"
   },
   stringContent: {
-    padding: tokens.spacing.medium_16
+    padding: spacing.medium_16
   }
 });
 const cornerStyles = {};
@@ -408,50 +396,51 @@ const _generateStyles = (cornerKind, isFirstSection, isLastSection) => {
   let contentWrapperStyle = Object.freeze({});
   let firstSectionStyle = Object.freeze({});
   let lastSectionStyle = Object.freeze({});
+  const borderStyle = `1px solid ${semanticColor.border.primary}`;
   if (cornerKind === "square") {
     wrapperStyle = {
-      border: `1px solid ${tokens.color.offBlack16}`,
+      border: borderStyle,
       borderBottom: "none",
       borderRadius: 0
     };
     if (isLastSection) {
       lastSectionStyle = {
-        borderBottom: `1px solid ${tokens.color.offBlack16}`
+        borderBottom: borderStyle
       };
     }
   }
   if (cornerKind === "rounded") {
     wrapperStyle = {
-      border: `1px solid ${tokens.color.offBlack16}`,
+      border: borderStyle,
       borderBottom: "none"
     };
     if (isFirstSection) {
       firstSectionStyle = {
-        borderStartStartRadius: tokens.spacing.small_12,
-        borderStartEndRadius: tokens.spacing.small_12
+        borderStartStartRadius: spacing.small_12,
+        borderStartEndRadius: spacing.small_12
       };
     }
     if (isLastSection) {
       lastSectionStyle = {
-        borderBottom: `1px solid ${tokens.color.offBlack16}`,
-        borderEndStartRadius: tokens.spacing.small_12,
-        borderEndEndRadius: tokens.spacing.small_12
+        borderBottom: borderStyle,
+        borderEndStartRadius: spacing.small_12,
+        borderEndEndRadius: spacing.small_12
       };
       contentWrapperStyle = {
-        borderEndEndRadius: tokens.spacing.small_12,
-        borderEndStartRadius: tokens.spacing.small_12
+        borderEndEndRadius: spacing.small_12,
+        borderEndStartRadius: spacing.small_12
       };
     }
   }
   if (cornerKind === "rounded-per-section") {
     wrapperStyle = {
-      border: `1px solid ${tokens.color.offBlack16}`,
-      borderRadius: tokens.spacing.small_12,
-      marginBottom: tokens.spacing.medium_16
+      border: borderStyle,
+      borderRadius: spacing.small_12,
+      marginBottom: spacing.medium_16
     };
     contentWrapperStyle = {
-      borderEndEndRadius: tokens.spacing.small_12,
-      borderEndStartRadius: tokens.spacing.small_12
+      borderEndEndRadius: spacing.small_12,
+      borderEndStartRadius: spacing.small_12
     };
   }
   const newStyles = {

package/dist/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var aphrodite = require('aphrodite');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var tokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var caretDown = require('@phosphor-icons/core/bold/caret-down-bold.svg');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
@@ -32,7 +32,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
 var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 
@@ -227,13 +226,13 @@ const AccordionSectionHeader = React__namespace.forwardRef(function AccordionSec
     style: [caretPosition === "end" ? styles$1.headerStringCaretEnd : styles$1.headerStringCaretStart]
   }, header) : header), collapsible && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretDown__default["default"],
-    color: tokens__namespace.color.offBlack64,
+    color: wonderBlocksTokens.semanticColor.icon.primary,
     size: "small",
     style: [animated && styles$1.iconWithAnimation, caretPosition === "start" ? styles$1.iconStart : styles$1.iconEnd, expanded && styles$1.iconExpanded],
     testId: testId ? `${testId}-caret-icon` : undefined
   }))));
 });
-const INNER_BORDER_RADIUS = tokens__namespace.spacing.small_12 - 1;
+const INNER_BORDER_RADIUS = wonderBlocksTokens.spacing.small_12 - 1;
 const ANIMATION_LENGTH = "300ms";
 const styles$1 = aphrodite.StyleSheet.create({
   heading: {
@@ -250,19 +249,13 @@ const styles$1 = aphrodite.StyleSheet.create({
     position: "relative",
     zIndex: 1,
     ":active": {
-      outline: `2px solid ${tokens__namespace.color.activeBlue}`
+      outline: `2px solid ${wonderBlocksTokens.semanticColor.action.outlined.progressive.press.border}`
     },
     ":hover": {
-      outline: `2px solid ${tokens__namespace.color.blue}`
-    },
-    ":focus": {
-      boxShadow: `0 0 0 2px ${tokens__namespace.color.blue}`
-    },
-    ":focus:not(:focus-visible)": {
-      boxShadow: "none"
+      outline: `2px solid ${wonderBlocksTokens.semanticColor.border.focus}`
     },
     ":focus-visible": {
-      outline: `2px solid ${tokens__namespace.color.blue}`
+      outline: `2px solid ${wonderBlocksTokens.semanticColor.border.focus}`
     }
   },
   headerWrapperWithAnimation: {
@@ -284,16 +277,16 @@ const styles$1 = aphrodite.StyleSheet.create({
     textAlign: "start"
   },
   headerString: {
-    paddingTop: tokens__namespace.spacing.medium_16,
-    paddingBottom: tokens__namespace.spacing.medium_16
+    paddingTop: wonderBlocksTokens.spacing.medium_16,
+    paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
   headerStringCaretEnd: {
-    paddingInlineEnd: tokens__namespace.spacing.small_12,
-    paddingInlineStart: tokens__namespace.spacing.medium_16
+    paddingInlineEnd: wonderBlocksTokens.spacing.small_12,
+    paddingInlineStart: wonderBlocksTokens.spacing.medium_16
   },
   headerStringCaretStart: {
-    paddingInlineEnd: tokens__namespace.spacing.medium_16,
-    paddingInlineStart: tokens__namespace.spacing.small_12
+    paddingInlineEnd: wonderBlocksTokens.spacing.medium_16,
+    paddingInlineStart: wonderBlocksTokens.spacing.small_12
   },
   iconWithAnimation: {
     transition: `transform ${ANIMATION_LENGTH}`
@@ -302,22 +295,16 @@ const styles$1 = aphrodite.StyleSheet.create({
     transform: "rotate(180deg)"
   },
   iconStart: {
-    marginInlineStart: tokens__namespace.spacing.medium_16
+    marginInlineStart: wonderBlocksTokens.spacing.medium_16
   },
   iconEnd: {
-    marginInlineEnd: tokens__namespace.spacing.medium_16
+    marginInlineEnd: wonderBlocksTokens.spacing.medium_16
   },
   disabled: {
     pointerEvents: "none",
     color: "inherit",
-    ":focus": {
-      boxShadow: `0 0 0 2px ${tokens__namespace.color.offBlack32}`
-    },
-    ":focus:not(:focus-visible)": {
-      boxShadow: "none"
-    },
     ":focus-visible": {
-      outline: `2px solid ${tokens__namespace.color.offBlack32}`
+      outline: `2px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`
     }
   }
 });
@@ -402,7 +389,7 @@ const styles = aphrodite.StyleSheet.create({
     display: "grid",
     position: "static",
     boxSizing: "border-box",
-    backgroundColor: tokens__namespace.color.white
+    backgroundColor: wonderBlocksTokens.semanticColor.surface.primary
   },
   wrapperWithAnimation: {
     transition: "grid-template-rows 300ms"
@@ -423,7 +410,7 @@ const styles = aphrodite.StyleSheet.create({
     visibility: "visible"
   },
   stringContent: {
-    padding: tokens__namespace.spacing.medium_16
+    padding: wonderBlocksTokens.spacing.medium_16
   }
 });
 const cornerStyles = {};
@@ -436,50 +423,51 @@ const _generateStyles = (cornerKind, isFirstSection, isLastSection) => {
   let contentWrapperStyle = Object.freeze({});
   let firstSectionStyle = Object.freeze({});
   let lastSectionStyle = Object.freeze({});
+  const borderStyle = `1px solid ${wonderBlocksTokens.semanticColor.border.primary}`;
   if (cornerKind === "square") {
     wrapperStyle = {
-      border: `1px solid ${tokens__namespace.color.offBlack16}`,
+      border: borderStyle,
       borderBottom: "none",
       borderRadius: 0
     };
     if (isLastSection) {
       lastSectionStyle = {
-        borderBottom: `1px solid ${tokens__namespace.color.offBlack16}`
+        borderBottom: borderStyle
       };
     }
   }
   if (cornerKind === "rounded") {
     wrapperStyle = {
-      border: `1px solid ${tokens__namespace.color.offBlack16}`,
+      border: borderStyle,
       borderBottom: "none"
     };
     if (isFirstSection) {
       firstSectionStyle = {
-        borderStartStartRadius: tokens__namespace.spacing.small_12,
-        borderStartEndRadius: tokens__namespace.spacing.small_12
+        borderStartStartRadius: wonderBlocksTokens.spacing.small_12,
+        borderStartEndRadius: wonderBlocksTokens.spacing.small_12
       };
     }
     if (isLastSection) {
       lastSectionStyle = {
-        borderBottom: `1px solid ${tokens__namespace.color.offBlack16}`,
-        borderEndStartRadius: tokens__namespace.spacing.small_12,
-        borderEndEndRadius: tokens__namespace.spacing.small_12
+        borderBottom: borderStyle,
+        borderEndStartRadius: wonderBlocksTokens.spacing.small_12,
+        borderEndEndRadius: wonderBlocksTokens.spacing.small_12
       };
       contentWrapperStyle = {
-        borderEndEndRadius: tokens__namespace.spacing.small_12,
-        borderEndStartRadius: tokens__namespace.spacing.small_12
+        borderEndEndRadius: wonderBlocksTokens.spacing.small_12,
+        borderEndStartRadius: wonderBlocksTokens.spacing.small_12
       };
     }
   }
   if (cornerKind === "rounded-per-section") {
     wrapperStyle = {
-      border: `1px solid ${tokens__namespace.color.offBlack16}`,
-      borderRadius: tokens__namespace.spacing.small_12,
-      marginBottom: tokens__namespace.spacing.medium_16
+      border: borderStyle,
+      borderRadius: wonderBlocksTokens.spacing.small_12,
+      marginBottom: wonderBlocksTokens.spacing.medium_16
     };
     contentWrapperStyle = {
-      borderEndEndRadius: tokens__namespace.spacing.small_12,
-      borderEndStartRadius: tokens__namespace.spacing.small_12
+      borderEndEndRadius: wonderBlocksTokens.spacing.small_12,
+      borderEndStartRadius: wonderBlocksTokens.spacing.small_12
     };
   }
   const newStyles = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-accordion",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "design": "v1",
   "description": "Accordion components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -17,11 +17,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "^5.0.7",
-    "@khanacademy/wonder-blocks-core": "^11.1.0",
-    "@khanacademy/wonder-blocks-icon": "^5.0.5",
+    "@khanacademy/wonder-blocks-clickable": "^6.0.0",
+    "@khanacademy/wonder-blocks-core": "^12.0.0",
+    "@khanacademy/wonder-blocks-icon": "^5.0.6",
     "@khanacademy/wonder-blocks-tokens": "^4.1.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.5"
+    "@khanacademy/wonder-blocks-typography": "^3.0.6"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",