@khanacademy/wonder-blocks-cell 4.1.2 → 4.1.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/wonder-blocks-cell
 
+## 4.1.3
+
+### Patch Changes
+
+- 1e98035: Use semantic color tokens in CellCore
+- 507cf2f: DetailCell and CompactCell: update styling to address accessibility issues (color contrast and using color as the only visual indicator). Updated styles include:
+
+    - General:
+        - Changing the grey used for subtitles
+        - Using `icon.primary` for the right accessory
+    - Press state:
+        - Changing the background to `fadedBlue8`
+        - Adding a thin left border when clickable cells are pressed
+    - Hover state:
+        - Changing the background to `fadedBlue8`
+    - Disabled state:
+        - Changing the focus outline to `action.disabled.default`
+    - Selected state (cells with `active=true`):
+        - Adding a thick left border
+        - Changing the text color to `activeBlue`
+        - The styling no longer changes when a selected cell is hovered or pressed on
+
+- Updated dependencies [507cf2f]
+    - @khanacademy/wonder-blocks-tokens@5.1.0
+    - @khanacademy/wonder-blocks-clickable@6.1.3
+    - @khanacademy/wonder-blocks-layout@3.1.3
+
 ## 4.1.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -6,7 +6,7 @@ import { StyleSheet } from 'aphrodite';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { View } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, color, semanticColor, border } from '@khanacademy/wonder-blocks-tokens';
 
 const CellMeasurements = {
   cellMinHeight: spacing.xxLarge_48,
@@ -96,7 +96,8 @@ function CellInner(props) {
   } = props;
   const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
   return React.createElement(View, {
-    style: [styles$1.innerWrapper, innerStyle, style, horizontalRuleStyles]
+    style: [styles$1.innerWrapper, innerStyle, style, horizontalRuleStyles, active && styles$1.activeInnerWrapper],
+    className: "inner-wrapper"
   }, React.createElement(LeftAccessory, {
     leftAccessory: leftAccessory,
     leftAccessoryStyle: leftAccessoryStyle,
@@ -146,10 +147,48 @@ const CellCore = props => {
     role: role
   }, React.createElement(CellInner, props));
 };
+const cellTokens = {
+  root: {
+    default: {
+      background: semanticColor.surface.primary,
+      foreground: semanticColor.text.primary
+    },
+    hover: {
+      background: color.fadedBlue8
+    },
+    press: {
+      background: color.fadedBlue8,
+      border: semanticColor.surface.emphasis
+    },
+    selected: {
+      background: color.fadedBlue8,
+      foreground: color.activeBlue,
+      border: semanticColor.surface.emphasis
+    },
+    focus: {
+      border: semanticColor.focus.outer
+    },
+    disabled: {
+      foreground: semanticColor.text.disabled,
+      border: semanticColor.focus.outer
+    }
+  },
+  accessory: {
+    default: {
+      foreground: semanticColor.icon.primary
+    },
+    selected: {
+      foreground: semanticColor.icon.action
+    },
+    disabled: {
+      foreground: semanticColor.icon.secondary
+    }
+  }
+};
 const styles$1 = StyleSheet.create({
   wrapper: {
-    background: color.white,
-    color: color.offBlack,
+    background: cellTokens.root.default.background,
+    color: cellTokens.root.default.foreground,
     display: "flex",
     minHeight: CellMeasurements.cellMinHeight,
     textAlign: "left",
@@ -160,10 +199,25 @@ const styles$1 = StyleSheet.create({
     padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
     flexDirection: "row",
     flex: 1,
+    borderRadius: "inherit",
+    overflow: "hidden",
+    height: "100%",
     ":focus-visible": {
       padding: `${CellMeasurements.cellPadding.paddingVertical - 2}px ${CellMeasurements.cellPadding.paddingHorizontal - 2}px`
     }
   },
+  activeInnerWrapper: {
+    position: "relative",
+    ":before": {
+      content: "''",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: border.width.thick,
+      backgroundColor: cellTokens.root.selected.border
+    }
+  },
   content: {
     alignSelf: "center",
     flex: 1,
@@ -175,7 +229,7 @@ const styles$1 = StyleSheet.create({
     alignSelf: "center"
   },
   accessoryRight: {
-    color: color.offBlack64
+    color: cellTokens.accessory.default.foreground
   },
   clickable: {
     outline: "none",
@@ -195,37 +249,47 @@ const styles$1 = StyleSheet.create({
       zIndex: 1,
       width: `calc(100% - ${spacing.xxxSmall_4}px)`,
       height: `calc(100% - ${spacing.xxxSmall_4}px)`,
-      border: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
+      border: `${spacing.xxxxSmall_2}px solid ${cellTokens.root.focus.border}`,
       borderRadius: spacing.xxxSmall_4
     },
+    [":focus-visible[aria-disabled=true]:after"]: {
+      borderColor: cellTokens.root.disabled.border
+    },
     [":hover[aria-disabled=false]"]: {
-      background: color.offBlack8
+      background: cellTokens.root.hover.background
     },
     [":active[aria-disabled=false]"]: {
-      background: color.offBlack16
+      background: cellTokens.root.press.background
+    },
+    [":active[aria-disabled=false]:not([aria-current=true]) .inner-wrapper"]: {
+      position: "relative",
+      ":before": {
+        content: "''",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: border.width.thin,
+        backgroundColor: semanticColor.surface.emphasis
+      }
     }
   },
   active: {
-    background: color.fadedBlue8,
-    color: color.blue,
-    [":hover[aria-disabled=false]"]: {
-      background: color.fadedBlue16
-    },
-    [":active[aria-disabled=false]"]: {
-      background: color.fadedBlue24
-    }
+    background: cellTokens.root.selected.background,
+    color: cellTokens.root.selected.foreground,
+    cursor: "default"
   },
   disabled: {
-    color: color.offBlack32,
+    color: cellTokens.root.disabled.foreground,
     ":focus-visible": {
       outline: "none"
     }
   },
   accessoryActive: {
-    color: color.blue
+    color: cellTokens.accessory.selected.foreground
   },
   accessoryDisabled: {
-    color: color.offBlack,
+    color: cellTokens.accessory.disabled.foreground,
     opacity: 0.32
   }
 });
@@ -277,7 +341,7 @@ const DetailCell = function DetailCell(props) {
 };
 const styles = StyleSheet.create({
   subtitle: {
-    color: color.offBlack64
+    color: semanticColor.text.secondary
   },
   innerWrapper: {
     padding: `${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`

package/dist/index.js

@@ -125,7 +125,8 @@ function CellInner(props) {
   } = props;
   const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
   return React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$1.innerWrapper, innerStyle, style, horizontalRuleStyles]
+    style: [styles$1.innerWrapper, innerStyle, style, horizontalRuleStyles, active && styles$1.activeInnerWrapper],
+    className: "inner-wrapper"
   }, React__namespace.createElement(LeftAccessory, {
     leftAccessory: leftAccessory,
     leftAccessoryStyle: leftAccessoryStyle,
@@ -175,10 +176,48 @@ const CellCore = props => {
     role: role
   }, React__namespace.createElement(CellInner, props));
 };
+const cellTokens = {
+  root: {
+    default: {
+      background: wonderBlocksTokens.semanticColor.surface.primary,
+      foreground: wonderBlocksTokens.semanticColor.text.primary
+    },
+    hover: {
+      background: wonderBlocksTokens.color.fadedBlue8
+    },
+    press: {
+      background: wonderBlocksTokens.color.fadedBlue8,
+      border: wonderBlocksTokens.semanticColor.surface.emphasis
+    },
+    selected: {
+      background: wonderBlocksTokens.color.fadedBlue8,
+      foreground: wonderBlocksTokens.color.activeBlue,
+      border: wonderBlocksTokens.semanticColor.surface.emphasis
+    },
+    focus: {
+      border: wonderBlocksTokens.semanticColor.focus.outer
+    },
+    disabled: {
+      foreground: wonderBlocksTokens.semanticColor.text.disabled,
+      border: wonderBlocksTokens.semanticColor.focus.outer
+    }
+  },
+  accessory: {
+    default: {
+      foreground: wonderBlocksTokens.semanticColor.icon.primary
+    },
+    selected: {
+      foreground: wonderBlocksTokens.semanticColor.icon.action
+    },
+    disabled: {
+      foreground: wonderBlocksTokens.semanticColor.icon.secondary
+    }
+  }
+};
 const styles$1 = aphrodite.StyleSheet.create({
   wrapper: {
-    background: wonderBlocksTokens.color.white,
-    color: wonderBlocksTokens.color.offBlack,
+    background: cellTokens.root.default.background,
+    color: cellTokens.root.default.foreground,
     display: "flex",
     minHeight: CellMeasurements.cellMinHeight,
     textAlign: "left",
@@ -189,10 +228,25 @@ const styles$1 = aphrodite.StyleSheet.create({
     padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
     flexDirection: "row",
     flex: 1,
+    borderRadius: "inherit",
+    overflow: "hidden",
+    height: "100%",
     ":focus-visible": {
       padding: `${CellMeasurements.cellPadding.paddingVertical - 2}px ${CellMeasurements.cellPadding.paddingHorizontal - 2}px`
     }
   },
+  activeInnerWrapper: {
+    position: "relative",
+    ":before": {
+      content: "''",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: wonderBlocksTokens.border.width.thick,
+      backgroundColor: cellTokens.root.selected.border
+    }
+  },
   content: {
     alignSelf: "center",
     flex: 1,
@@ -204,7 +258,7 @@ const styles$1 = aphrodite.StyleSheet.create({
     alignSelf: "center"
   },
   accessoryRight: {
-    color: wonderBlocksTokens.color.offBlack64
+    color: cellTokens.accessory.default.foreground
   },
   clickable: {
     outline: "none",
@@ -224,37 +278,47 @@ const styles$1 = aphrodite.StyleSheet.create({
       zIndex: 1,
       width: `calc(100% - ${wonderBlocksTokens.spacing.xxxSmall_4}px)`,
       height: `calc(100% - ${wonderBlocksTokens.spacing.xxxSmall_4}px)`,
-      border: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.color.blue}`,
+      border: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${cellTokens.root.focus.border}`,
       borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
     },
+    [":focus-visible[aria-disabled=true]:after"]: {
+      borderColor: cellTokens.root.disabled.border
+    },
     [":hover[aria-disabled=false]"]: {
-      background: wonderBlocksTokens.color.offBlack8
+      background: cellTokens.root.hover.background
     },
     [":active[aria-disabled=false]"]: {
-      background: wonderBlocksTokens.color.offBlack16
+      background: cellTokens.root.press.background
+    },
+    [":active[aria-disabled=false]:not([aria-current=true]) .inner-wrapper"]: {
+      position: "relative",
+      ":before": {
+        content: "''",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: wonderBlocksTokens.border.width.thin,
+        backgroundColor: wonderBlocksTokens.semanticColor.surface.emphasis
+      }
     }
   },
   active: {
-    background: wonderBlocksTokens.color.fadedBlue8,
-    color: wonderBlocksTokens.color.blue,
-    [":hover[aria-disabled=false]"]: {
-      background: wonderBlocksTokens.color.fadedBlue16
-    },
-    [":active[aria-disabled=false]"]: {
-      background: wonderBlocksTokens.color.fadedBlue24
-    }
+    background: cellTokens.root.selected.background,
+    color: cellTokens.root.selected.foreground,
+    cursor: "default"
   },
   disabled: {
-    color: wonderBlocksTokens.color.offBlack32,
+    color: cellTokens.root.disabled.foreground,
     ":focus-visible": {
       outline: "none"
     }
   },
   accessoryActive: {
-    color: wonderBlocksTokens.color.blue
+    color: cellTokens.accessory.selected.foreground
   },
   accessoryDisabled: {
-    color: wonderBlocksTokens.color.offBlack,
+    color: cellTokens.accessory.disabled.foreground,
     opacity: 0.32
   }
 });
@@ -306,7 +370,7 @@ const DetailCell = function DetailCell(props) {
 };
 const styles = aphrodite.StyleSheet.create({
   subtitle: {
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   },
   innerWrapper: {
     padding: `${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -11,10 +11,10 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-clickable": "6.1.2",
+    "@khanacademy/wonder-blocks-clickable": "6.1.3",
     "@khanacademy/wonder-blocks-core": "12.2.0",
-    "@khanacademy/wonder-blocks-layout": "3.1.2",
-    "@khanacademy/wonder-blocks-tokens": "5.0.0",
+    "@khanacademy/wonder-blocks-layout": "3.1.3",
+    "@khanacademy/wonder-blocks-tokens": "5.1.0",
     "@khanacademy/wonder-blocks-typography": "3.1.2"
   },
   "peerDependencies": {