@khanacademy/wonder-blocks-cell - npm Package Compare versions

Comparing version 0.0.0-PR2447-20250129214011 to 0.0.0-PR2448-20250130000008

CHANGELOG.md

 # @khanacademy/wonder-blocks-cell
 
-## 0.0.0-PR2447-20250129214011
+## 0.0.0-PR2448-20250130000008
 
 ### Patch Changes
 
+-   06189868: Use semantic color tokens in CellCore
+-   962fe64e: 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 [8cfaeab0]
+-   Updated dependencies [e3bc9b85]
 -   Updated dependencies [c162abb4]
-    -   @khanacademy/wonder-blocks-tokens@0.0.0-PR2447-20250129214011
-    -   @khanacademy/wonder-blocks-clickable@0.0.0-PR2447-20250129214011
-    -   @khanacademy/wonder-blocks-layout@0.0.0-PR2447-20250129214011
+    -   @khanacademy/wonder-blocks-tokens@0.0.0-PR2448-20250130000008
+    -   @khanacademy/wonder-blocks-clickable@0.0.0-PR2448-20250130000008
+    -   @khanacademy/wonder-blocks-layout@0.0.0-PR2448-20250130000008
 
@@ -13,0 +32,0 @@ ## 4.0.6

dist/es/index.js

@@ -9,3 +9,3 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 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';
 
@@ -100,3 +100,4 @@ const CellMeasurements = {
   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, {
@@ -150,6 +151,18 @@ leftAccessory: leftAccessory,
 };
+const cellTokens = {
+  hover: {
+    background: color.fadedBlue8
+  },
+  press: {
+    background: color.fadedBlue8
+  },
+  selected: {
+    background: color.fadedBlue8,
+    foreground: color.activeBlue
+  }
+};
 const styles$1 = StyleSheet.create({
   wrapper: {
-    background: color.white,
-    color: color.offBlack,
+    background: semanticColor.surface.primary,
+    color: semanticColor.text.primary,
     display: "flex",
@@ -165,2 +178,5 @@ minHeight: CellMeasurements.cellMinHeight,
     flex: 1,
+    borderRadius: "inherit",
+    overflow: "hidden",
+    height: "100%",
     ":focus-visible": {
@@ -170,2 +186,14 @@ 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: semanticColor.surface.emphasis
+    }
+  },
   content: {
@@ -182,3 +210,3 @@ alignSelf: "center",
   accessoryRight: {
-    color: color.offBlack64
+    color: semanticColor.icon.primary
   },
@@ -203,24 +231,34 @@ clickable: {
       height: `calc(100% - ${spacing.xxxSmall_4}px)`,
-      border: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
+      border: `${spacing.xxxxSmall_2}px solid ${semanticColor.border.focus}`,
       borderRadius: spacing.xxxSmall_4
     },
+    [":focus-visible[aria-disabled=true]:after"]: {
+      borderColor: semanticColor.action.disabled.default
+    },
     [":hover[aria-disabled=false]"]: {
-      background: color.offBlack8
+      background: cellTokens.hover.background
     },
     [":active[aria-disabled=false]"]: {
-      background: color.offBlack16
+      background: cellTokens.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.selected.background,
+    color: cellTokens.selected.foreground,
+    cursor: "default"
   },
   disabled: {
-    color: color.offBlack32,
+    color: semanticColor.text.disabled,
     ":focus-visible": {
@@ -231,7 +269,6 @@ outline: "none"
   accessoryActive: {
-    color: color.blue
+    color: semanticColor.icon.action
   },
   accessoryDisabled: {
-    color: color.offBlack,
-    opacity: 0.32
+    color: semanticColor.icon.disabled
   }
@@ -287,3 +324,3 @@ });
   subtitle: {
-    color: color.offBlack64
+    color: semanticColor.text.secondary
   },
@@ -290,0 +327,0 @@ innerWrapper: {

dist/index.js

@@ -128,3 +128,4 @@ 'use strict';
   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, {
@@ -178,6 +179,18 @@ leftAccessory: leftAccessory,
 };
+const cellTokens = {
+  hover: {
+    background: wonderBlocksTokens.color.fadedBlue8
+  },
+  press: {
+    background: wonderBlocksTokens.color.fadedBlue8
+  },
+  selected: {
+    background: wonderBlocksTokens.color.fadedBlue8,
+    foreground: wonderBlocksTokens.color.activeBlue
+  }
+};
 const styles$1 = aphrodite.StyleSheet.create({
   wrapper: {
-    background: wonderBlocksTokens.color.white,
-    color: wonderBlocksTokens.color.offBlack,
+    background: wonderBlocksTokens.semanticColor.surface.primary,
+    color: wonderBlocksTokens.semanticColor.text.primary,
     display: "flex",
@@ -193,2 +206,5 @@ minHeight: CellMeasurements.cellMinHeight,
     flex: 1,
+    borderRadius: "inherit",
+    overflow: "hidden",
+    height: "100%",
     ":focus-visible": {
@@ -198,2 +214,14 @@ 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: wonderBlocksTokens.semanticColor.surface.emphasis
+    }
+  },
   content: {
@@ -210,3 +238,3 @@ alignSelf: "center",
   accessoryRight: {
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.icon.primary
   },
@@ -231,24 +259,34 @@ clickable: {
       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 ${wonderBlocksTokens.semanticColor.border.focus}`,
       borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
     },
+    [":focus-visible[aria-disabled=true]:after"]: {
+      borderColor: wonderBlocksTokens.semanticColor.action.disabled.default
+    },
     [":hover[aria-disabled=false]"]: {
-      background: wonderBlocksTokens.color.offBlack8
+      background: cellTokens.hover.background
     },
     [":active[aria-disabled=false]"]: {
-      background: wonderBlocksTokens.color.offBlack16
+      background: cellTokens.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.selected.background,
+    color: cellTokens.selected.foreground,
+    cursor: "default"
   },
   disabled: {
-    color: wonderBlocksTokens.color.offBlack32,
+    color: wonderBlocksTokens.semanticColor.text.disabled,
     ":focus-visible": {
@@ -259,7 +297,6 @@ outline: "none"
   accessoryActive: {
-    color: wonderBlocksTokens.color.blue
+    color: wonderBlocksTokens.semanticColor.icon.action
   },
   accessoryDisabled: {
-    color: wonderBlocksTokens.color.offBlack,
-    opacity: 0.32
+    color: wonderBlocksTokens.semanticColor.icon.disabled
   }
@@ -315,3 +352,3 @@ });
   subtitle: {
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   },
@@ -318,0 +355,0 @@ innerWrapper: {

package.json

 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "0.0.0-PR2447-20250129214011",
+  "version": "0.0.0-PR2448-20250130000008",
   "design": "v1",
@@ -18,6 +18,6 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2447-20250129214011",
+    "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2448-20250130000008",
     "@khanacademy/wonder-blocks-core": "^11.1.0",
-    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2447-20250129214011",
-    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2447-20250129214011",
+    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2448-20250130000008",
+    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2448-20250130000008",
     "@khanacademy/wonder-blocks-typography": "^3.0.5"
@@ -24,0 +24,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

55165

increased by6.04%

Lines of code

933

increased by8.61%

Dependency changes

• + Added@khanacademy/wonder-blocks-clickable@0.0.0-PR2448-20250130000008(transitive)

• + Added@khanacademy/wonder-blocks-layout@0.0.0-PR2448-20250130000008(transitive)

• + Added@khanacademy/wonder-blocks-tokens@0.0.0-PR2448-20250130000008(transitive)

• - Removed@khanacademy/wonder-blocks-clickable@0.0.0-PR2447-20250129214011(transitive)

• - Removed@khanacademy/wonder-blocks-layout@0.0.0-PR2447-20250129214011(transitive)

• - Removed@khanacademy/wonder-blocks-tokens@0.0.0-PR2447-20250129214011(transitive)

• Updated@khanacademy/wonder-blocks-clickable@0.0.0-PR2448-20250130000008

• Updated@khanacademy/wonder-blocks-layout@0.0.0-PR2448-20250130000008

• Updated@khanacademy/wonder-blocks-tokens@0.0.0-PR2448-20250130000008