[WB-1814.4] Refactor Accordion, Banner, BirthdayPicker to use semanti…

…c colors (#2446)

## Summary:

Next step is to refactor the `Accordion`, `Banner`, and `BirthdayPicker`
components to use semantic colors.

### Implementation plan:

1. #2439
2. #2440
3. #2441
4. Accordion, Banner, BirthdayPicker (current PR)
5. IconButton
6. Clickable, Link
7. Modal
8. Popover, Tooltip
9. Pill, Toolbar


Issue: WB-1814

## Test plan:

Verify that the Chromatic snapshots are unchanged.

Author: jandrade

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2446

.changeset/gorgeous-adults-lay.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/wonder-blocks-birthday-picker": patch
+"@khanacademy/wonder-blocks-accordion": patch
+"@khanacademy/wonder-blocks-banner": patch
+---
+
+Replace `color` with `semanticColor` tokens

__docs__/wonder-blocks-accordion/accordion.stories.tsx

@@ -611,6 +611,10 @@ export const BackgroundColorExample: StoryComponentType = {
     render: () => {
         const accordionSectionStyle = {
             backgroundColor: tokens.color.fadedBlue,
+            // NOTE: This border color uses the opacity token to match the
+            // background color. By default, the border color is
+            // `fadedOffBlack16`, which is the HEX value of `offBlack16`.
+            borderColor: tokens.color.offBlack16,
         };
 
         const sections = [

packages/wonder-blocks-accordion/src/components/accordion-section-header.tsx

@@ -6,7 +6,7 @@ import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 import type {AccordionCornerKindType} from "./accordion";
@@ -125,7 +125,7 @@ const AccordionSectionHeader = React.forwardRef(function AccordionSectionHeader(
                         {collapsible && (
                             <PhosphorIcon
                                 icon={caretDown}
-                                color={tokens.color.offBlack64}
+                                color={semanticColor.icon.primary}
                                 size="small"
                                 style={[
                                     animated && styles.iconWithAnimation,
@@ -150,7 +150,7 @@ const AccordionSectionHeader = React.forwardRef(function AccordionSectionHeader(
 // If we set the inner radius to the same value, there ends up being
 // a 1px gap between the border and the outline. To fix this, we
 // subtract 1 from the border radius.
-const INNER_BORDER_RADIUS = tokens.spacing.small_12 - 1;
+const INNER_BORDER_RADIUS = spacing.small_12 - 1;
 const ANIMATION_LENGTH = "300ms";
 
 const styles = StyleSheet.create({
@@ -176,27 +176,15 @@ const styles = StyleSheet.create({
         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}`,
-        },
-
-        // Provide basic, default focus styles on older browsers (e.g.
-        // Safari 14)
-        ":focus": {
-            boxShadow: `0 0 0 2px ${tokens.color.blue}`,
-        },
-
-        // Remove default focus styles for mouse users ONLY if
-        // :focus-visible is supported on this platform.
-        ":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: {
@@ -222,16 +210,16 @@ const styles = 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}`,
@@ -241,29 +229,18 @@ const styles = 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",
 
-        // Provide basic, default focus styles on older browsers (e.g.
-        // Safari 14)
-        ":focus": {
-            boxShadow: `0 0 0 2px ${tokens.color.offBlack32}`,
-        },
-
-        // Remove default focus styles for mouse users ONLY if
-        // :focus-visible is supported on this platform.
-        ":focus:not(:focus-visible)": {
-            boxShadow: "none",
-        },
-
         ":focus-visible": {
-            outline: `2px solid ${tokens.color.offBlack32}`,
+            // TODO(WB-1856): Verify if we can use the global focus color
+            outline: `2px solid ${semanticColor.action.disabled.default}`,
         },
     },
 });

packages/wonder-blocks-accordion/src/components/accordion-section.tsx

@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 import type {StyleDeclaration} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body} from "@khanacademy/wonder-blocks-typography";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -311,7 +311,7 @@ const styles = StyleSheet.create({
         // vertically stacked.
         position: "static",
         boxSizing: "border-box",
-        backgroundColor: tokens.color.white,
+        backgroundColor: semanticColor.surface.primary,
     },
     wrapperWithAnimation: {
         transition: "grid-template-rows 300ms",
@@ -334,7 +334,7 @@ const styles = StyleSheet.create({
         visibility: "visible",
     },
     stringContent: {
-        padding: tokens.spacing.medium_16,
+        padding: spacing.medium_16,
     },
 });
 
@@ -355,38 +355,40 @@ const _generateStyles = (
     let firstSectionStyle: StyleType = Object.freeze({});
     let lastSectionStyle: StyleType = 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 = {
@@ -395,26 +397,26 @@ const _generateStyles = (
                 // overflow out the corners. This issue can't be solved by
                 // putting `overflow: "hidden"` on the overall container
                 // because that cuts off the header's focus outline.
-                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 = {
             // Give the content wrapper the same border radius as the wrapper
             // so that the content doesn't overflow out the corners. We
             // can't put `overflow: "hidden"` on the overall container
             // because it cuts off the header's focus outline.
-            borderEndEndRadius: tokens.spacing.small_12,
-            borderEndStartRadius: tokens.spacing.small_12,
+            borderEndEndRadius: spacing.small_12,
+            borderEndStartRadius: spacing.small_12,
         };
     }
 

packages/wonder-blocks-banner/src/components/banner.tsx

@@ -8,7 +8,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon, PhosphorIconAsset} from "@khanacademy/wonder-blocks-icon";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import Link from "@khanacademy/wonder-blocks-link";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {font, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 import infoIcon from "@phosphor-icons/core/regular/info.svg";
@@ -131,26 +131,26 @@ const getValuesForKind = (kind: BannerKind): BannerValues => {
     switch (kind) {
         case "success":
             return {
-                color: color.green,
+                color: semanticColor.status.success.foreground,
                 icon: successIcon,
                 role: "status",
             };
         case "warning":
             return {
-                color: color.gold,
+                color: semanticColor.status.warning.foreground,
                 icon: warningIcon,
                 role: "alert",
                 ariaLive: "polite",
             };
         case "critical":
             return {
-                color: color.red,
+                color: semanticColor.status.critical.foreground,
                 icon: criticalIcon,
                 role: "alert",
             };
         default:
             return {
-                color: color.blue,
+                color: semanticColor.status.notice.foreground,
                 icon: infoIcon,
                 role: "status",
             };
@@ -313,7 +313,9 @@ const styles = StyleSheet.create({
         // the base color needs to be hard-coded as white for the
         // intended pastel background color to show up correctly
         // on dark backgrounds.
-        backgroundColor: color.white,
+        // TODO(WB-1865): Verify if we can change this to use semanticColor
+        // status tokens.
+        backgroundColor: semanticColor.surface.primary,
     },
     containerInner: {
         flexDirection: "row",
@@ -328,7 +330,7 @@ const styles = StyleSheet.create({
         marginInlineStart: spacing.xxxxSmall_2,
         marginInlineEnd: spacing.xSmall_8,
         alignSelf: "flex-start",
-        color: color.offBlack64,
+        color: semanticColor.icon.primary,
     },
     labelAndButtonsContainer: {
         flex: 1,
@@ -359,7 +361,7 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     link: {
-        fontSize: 14,
+        fontSize: font.size.small,
     },
     dismiss: {
         flexShrink: 1,

packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {StyleType, View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body} from "@khanacademy/wonder-blocks-typography";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
@@ -284,11 +284,17 @@ export default class BirthdayPicker extends React.Component<Props, State> {
                     <PhosphorIcon
                         size="small"
                         icon={infoIcon}
-                        color={color.red}
+                        color={semanticColor.icon.destructive}
                         aria-hidden="true"
                     />
                     <Strut size={spacing.xxxSmall_4} />
-                    <Body style={{color: color.red}}>{error}</Body>
+                    <Body
+                        style={{
+                            color: semanticColor.status.critical.foreground,
+                        }}
+                    >
+                        {error}
+                    </Body>
                 </View>
             </>
         );