@khanacademy/wonder-blocks-toolbar 5.1.0 → 5.1.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @khanacademy/wonder-blocks-toolbar
 
+## 5.1.2
+
+### Patch Changes
+
+- fff5da0: Migrate to semanticColor tokens
+- 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
+    - @khanacademy/wonder-blocks-typography@3.1.2
+
+## 5.1.1
+
+### Patch Changes
+
+- ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
+- Updated dependencies [ee8d95a]
+    - @khanacademy/wonder-blocks-core@12.1.1
+    - @khanacademy/wonder-blocks-tokens@4.2.1
+    - @khanacademy/wonder-blocks-typography@3.1.1
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { View } from '@khanacademy/wonder-blocks-core';
-import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
+import { semanticColor, spacing, color } from '@khanacademy/wonder-blocks-tokens';
 import { LabelSmall, LabelLarge, HeadingSmall } from '@khanacademy/wonder-blocks-typography';
 
 function Toolbar({
@@ -33,13 +33,13 @@ function Toolbar({
 }
 const sharedStyles = StyleSheet.create({
   container: {
-    border: `1px solid ${color.offBlack16}`,
+    background: semanticColor.surface.primary,
+    border: `1px solid ${semanticColor.border.primary}`,
     flex: 1,
     display: "grid",
     alignItems: "center",
     minHeight: 66,
-    paddingLeft: spacing.medium_16,
-    paddingRight: spacing.medium_16,
+    paddingInline: spacing.medium_16,
     width: "100%"
   },
   containerWithTextTitle: {
@@ -55,9 +55,9 @@ const sharedStyles = StyleSheet.create({
     minHeight: 50
   },
   dark: {
-    backgroundColor: color.darkBlue,
+    background: semanticColor.surface.inverse,
     boxShadow: `0 1px 0 0 ${color.white64}`,
-    color: "white"
+    color: semanticColor.text.inverse
   },
   leftColumn: {
     alignItems: "center",
@@ -71,7 +71,7 @@ const sharedStyles = StyleSheet.create({
     flexGrow: 1
   },
   subtitle: {
-    color: color.offBlack64
+    color: semanticColor.text.secondary
   },
   titles: {
     padding: spacing.small_12,

package/dist/index.js

@@ -6,7 +6,8 @@ var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -19,11 +20,11 @@ function _interopNamespaceDefault(e) {
             }
         });
     }
-    n.default = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function Toolbar({
   color = "light",
@@ -54,13 +55,13 @@ function Toolbar({
 }
 const sharedStyles = aphrodite.StyleSheet.create({
   container: {
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    background: wonderBlocksTokens.semanticColor.surface.primary,
+    border: `1px solid ${wonderBlocksTokens.semanticColor.border.primary}`,
     flex: 1,
     display: "grid",
     alignItems: "center",
     minHeight: 66,
-    paddingLeft: wonderBlocksTokens.spacing.medium_16,
-    paddingRight: wonderBlocksTokens.spacing.medium_16,
+    paddingInline: wonderBlocksTokens.spacing.medium_16,
     width: "100%"
   },
   containerWithTextTitle: {
@@ -76,9 +77,9 @@ const sharedStyles = aphrodite.StyleSheet.create({
     minHeight: 50
   },
   dark: {
-    backgroundColor: wonderBlocksTokens.color.darkBlue,
+    background: wonderBlocksTokens.semanticColor.surface.inverse,
     boxShadow: `0 1px 0 0 ${wonderBlocksTokens.color.white64}`,
-    color: "white"
+    color: wonderBlocksTokens.semanticColor.text.inverse
   },
   leftColumn: {
     alignItems: "center",
@@ -92,7 +93,7 @@ const sharedStyles = aphrodite.StyleSheet.create({
     flexGrow: 1
   },
   subtitle: {
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   },
   titles: {
     padding: wonderBlocksTokens.spacing.small_12,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-toolbar",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,16 +13,16 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.1.0",
-    "@khanacademy/wonder-blocks-tokens": "4.2.0",
-    "@khanacademy/wonder-blocks-typography": "3.1.0"
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-tokens": "5.0.0",
+    "@khanacademy/wonder-blocks-typography": "3.1.2"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.0"
+    "@khanacademy/wb-dev-build-settings": "2.1.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"