[hack25-darkmode] Migrate color to semantiColor in __docs__ folder

.changeset/tidy-lamps-beg.md

@@ -0,0 +1,2 @@
+---
+---

__docs__/components/color.tsx

@@ -248,7 +248,7 @@ const styles = StyleSheet.create({
         borderRadius: border.radius.radius_040,
     },
     pattern: {
-        backgroundImage: `radial-gradient(${color.blue} 0.5px, ${color.offWhite} 0.5px)`,
+        backgroundImage: `radial-gradient(${semanticColor.core.background.instructive.default} 0.5px, ${semanticColor.core.background.base.subtle} 0.5px)`,
         backgroundSize: `${spacing.small_12}px ${spacing.small_12}px`,
         boxShadow: `0 0 1px 0 ${semanticColor.core.border.neutral.subtle}`,
     },
@@ -276,7 +276,7 @@ const styles = StyleSheet.create({
         color: semanticColor.core.foreground.neutral.strong,
         display: "inline-flex",
         backgroundColor: semanticColor.core.background.base.subtle,
-        border: `1px solid ${color.offBlack16}`,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         padding: spacing.xxxxSmall_2,
         borderRadius: border.radius.radius_040,
     },

__docs__/components/gallery/component-tile.tsx

@@ -5,7 +5,7 @@ import externalLinkIcon from "@phosphor-icons/core/bold/arrow-square-out-bold.sv
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {CommonTileProps} from "./types";
@@ -114,18 +114,18 @@ const styles = StyleSheet.create({
         height: "auto",
     },
     clickable: {
-        backgroundColor: color.offWhite,
-        border: `1px solid ${color.offBlack16}`,
+        backgroundColor: semanticColor.core.background.base.subtle,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderStartStartRadius: spacing.small_12,
         borderStartEndRadius: spacing.small_12,
 
         ":hover": {
-            border: `1px solid ${color.blue}`,
-            outline: `1px solid ${color.blue}`,
+            border: `1px solid ${semanticColor.core.border.instructive.default}`,
+            outline: `1px solid ${semanticColor.core.border.instructive.default}`,
         },
 
         ":focus": {
-            border: `1px solid ${color.blue}`,
+            border: `1px solid ${semanticColor.core.border.instructive.default}`,
             outline: `1px solid ${semanticColor.focus.outer}`,
         },
     },
@@ -146,7 +146,7 @@ const styles = StyleSheet.create({
         flexDirection: "column",
         justifyContent: "center",
         padding: spacing.large_24,
-        border: `1px solid ${color.offBlack16}`,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderTop: "none",
         borderEndStartRadius: spacing.small_12,
         borderEndEndRadius: spacing.small_12,

__docs__/components/gallery/tiles/compact-cell-tile.tsx

@@ -4,7 +4,7 @@ import {StyleSheet} from "aphrodite";
 import {CompactCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {IconMappings} from "../../../wonder-blocks-icon/phosphor-icon.argtypes";
 
 import ComponentTile from "../component-tile";
@@ -37,7 +37,7 @@ export default function CompactCellTile(props: CommonTileProps) {
 
 const localStyles = StyleSheet.create({
     cellExample: {
-        backgroundColor: color.offWhite,
+        backgroundColor: semanticColor.core.background.base.subtle,
         padding: spacing.large_24,
     },
 });

__docs__/components/gallery/tiles/detail-cell-tile.tsx

@@ -4,7 +4,7 @@ import {StyleSheet} from "aphrodite";
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {IconMappings} from "../../../wonder-blocks-icon/phosphor-icon.argtypes";
 
 import ComponentTile from "../component-tile";
@@ -46,7 +46,7 @@ export default function DetailCellTile(props: CommonTileProps) {
 
 const localStyles = StyleSheet.create({
     cellExample: {
-        backgroundColor: color.offWhite,
+        backgroundColor: semanticColor.core.background.base.subtle,
         padding: spacing.large_24,
     },
 });

__docs__/components/token-table.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {addStyle} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {maybeGetCssVariableInfo} from "./tokens-util";
 
 const StyledTable = addStyle("table");
@@ -89,11 +89,11 @@ const styles = StyleSheet.create({
         width: "100%",
     },
     header: {
-        backgroundColor: color.offWhite,
+        backgroundColor: semanticColor.core.background.base.subtle,
     },
     row: {
-        borderTop: `1px solid ${color.offBlack8}`,
-        backgroundColor: color.white,
+        borderTop: `1px solid ${semanticColor.core.border.neutral.subtle}`,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     cell: {
         padding: spacing.xSmall_8,

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

@@ -9,7 +9,11 @@ import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {border, color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingSmall, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
 import ComponentInfo from "../components/component-info";
@@ -311,7 +315,7 @@ export const ReactElementInChildren: StoryComponentType = {
                     horizontalRule="none"
                     styles={{
                         root: {
-                            borderTop: `1px solid ${color.offBlack16}`,
+                            borderTop: `1px solid ${semanticColor.core.border.neutral.subtle}`,
                         },
                     }}
                 />
@@ -542,9 +546,9 @@ export const WithStyle: StoryComponentType = {
         const [expanded, setExpanded] = React.useState(true);
 
         const customStyles = {
-            backgroundColor: color.offBlack8,
+            backgroundColor: semanticColor.core.background.neutral.subtle,
             margin: spacing.large_24,
-            outline: `2px solid ${color.offBlack32}`,
+            outline: `2px solid ${semanticColor.core.border.neutral.subtle}`,
         };
 
         return (
@@ -569,7 +573,7 @@ export const WithHeaderStyle: StoryComponentType = {
         const [expanded, setExpanded] = React.useState(false);
 
         const headerStyle = {
-            backgroundColor: color.offBlack8,
+            backgroundColor: semanticColor.core.background.neutral.subtle,
         };
 
         return (

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

@@ -9,7 +9,7 @@ import {
 import Button from "@khanacademy/wonder-blocks-button";
 import {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 {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {
     MultiSelect,
@@ -431,7 +431,7 @@ WithAnimation.parameters = {
 export const WithStyle: StoryComponentType = {
     render: () => {
         const customStyles = {
-            border: `2px solid ${color.purple}`,
+            border: `2px solid ${semanticColor.mastery.primary}`,
             padding: spacing.xLarge_32,
         };
 
@@ -608,11 +608,11 @@ LongSections.parameters = {
 export const BackgroundColorExample: StoryComponentType = {
     render: () => {
         const accordionSectionStyle = {
-            backgroundColor: color.fadedBlue,
+            backgroundColor: semanticColor.core.background.instructive.subtle,
             // 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: color.offBlack16,
+            borderColor: semanticColor.core.border.neutral.subtle,
         };
 
         const sections = [

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

@@ -17,7 +17,11 @@ import clock from "@phosphor-icons/core/regular/clock.svg";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, sizing, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    semanticColor,
+    sizing,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {BodyText} from "@khanacademy/wonder-blocks-typography";
 
 import Button from "@khanacademy/wonder-blocks-button";
@@ -91,7 +95,7 @@ export const styles: StyleDeclaration = StyleSheet.create({
         minWidth: 140,
     },
     example: {
-        background: color.offWhite,
+        background: semanticColor.core.background.base.subtle,
         padding: spacing.medium_16,
     },
     label: {
@@ -883,7 +887,8 @@ export const PressDurationTracking: StoryComponentType = {
                 <View
                     style={{
                         padding: spacing.medium_16,
-                        backgroundColor: color.offWhite,
+                        backgroundColor:
+                            semanticColor.core.background.base.subtle,
                         borderRadius: 4,
                         maxWidth: 400,
                     }}

__docs__/wonder-blocks-core/add-style.stories.tsx

@@ -1,22 +1,26 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {spacing, color, border} from "@khanacademy/wonder-blocks-tokens";
+import {
+    spacing,
+    semanticColor,
+    border,
+} from "@khanacademy/wonder-blocks-tokens";
 import {addStyle, View} from "@khanacademy/wonder-blocks-core";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 
 const styles = StyleSheet.create({
     input: {
         // default style for all instances of StyledInput
-        background: color.white,
-        border: `1px solid ${color.offBlack16}`,
+        background: semanticColor.core.background.base.default,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderRadius: border.radius.radius_040,
         fontSize: spacing.medium_16,
         padding: spacing.xSmall_8,
     },
     error: {
-        background: color.fadedRed16,
-        borderColor: color.red,
+        background: semanticColor.core.background.critical.subtle,
+        borderColor: semanticColor.core.border.critical.default,
     },
 });
 

__docs__/wonder-blocks-core/view.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     HeadingMedium,
     LabelMedium,
@@ -52,8 +52,9 @@ export const InlineStyles: StoryComponentType = () => (
             style={[
                 styles.container,
                 {
-                    background: color.fadedPurple24,
-                    border: `1px solid ${color.blue}`,
+                    background:
+                        semanticColor.core.background.instructive.subtle,
+                    border: `1px solid ${semanticColor.core.border.instructive.default}`,
                     padding: spacing.xxxSmall_4,
                 },
             ]}
@@ -135,19 +136,19 @@ DefiningLayout.parameters = {
 
 const styles = StyleSheet.create({
     container: {
-        background: color.offBlack8,
+        background: semanticColor.core.background.neutral.subtle,
         gap: spacing.medium_16,
         padding: spacing.xLarge_32,
     },
 
     view: {
-        border: `1px dashed ${color.purple}`,
+        border: `1px dashed ${semanticColor.mastery.primary}`,
         gap: spacing.medium_16,
         padding: spacing.medium_16,
     },
 
     item: {
-        background: color.offBlack32,
+        background: semanticColor.core.background.disabled.strong,
         padding: spacing.medium_16,
     },
 });

__docs__/wonder-blocks-icon/accessibility.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
 import {IconMappings} from "./phosphor-icon.argtypes";
@@ -38,7 +38,7 @@ export const IconContrast = {
             <PhosphorIcon
                 icon={IconMappings.checkCircle}
                 style={{
-                    color: color.blue,
+                    color: semanticColor.core.foreground.instructive.subtle,
                     marginInlineStart: spacing.xSmall_8,
                 }}
             />

__docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts

@@ -53,7 +53,7 @@ import cookie from "@phosphor-icons/core/regular/cookie.svg";
 import cookieBold from "@phosphor-icons/core/bold/cookie-bold.svg";
 import iceCream from "@phosphor-icons/core/regular/ice-cream.svg";
 
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 
 /**
  * Some pre-defined icon examples to use in our stories.
@@ -129,8 +129,8 @@ export default {
         },
     },
     color: {
-        options: Object.keys(color),
-        mapping: color,
+        options: Object.keys(semanticColor),
+        mapping: semanticColor,
         control: {
             type: "select",
         },

__docs__/wonder-blocks-icon/phosphor-icon.stories.tsx

@@ -16,7 +16,11 @@ import {
     LabelMedium,
 } from "@khanacademy/wonder-blocks-typography";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {border, color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 
 import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-icon/package.json";
@@ -263,7 +267,7 @@ export const WithColor: StoryComponentType = {
     args: {
         size: "small",
         icon: IconMappings.infoBold,
-        color: color.red,
+        color: semanticColor.core.foreground.critical.subtle,
     },
 };
 
@@ -340,7 +344,7 @@ const styles = StyleSheet.create({
         width: 200,
     },
     row: {
-        backgroundColor: color.offWhite,
+        backgroundColor: semanticColor.core.background.base.subtle,
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
@@ -354,7 +358,7 @@ const styles = StyleSheet.create({
     },
 
     tableCell: {
-        border: `${border.width.thin} solid ${color.offBlack}`,
+        border: `${border.width.thin} solid ${semanticColor.core.border.neutral.strong}`,
         padding: spacing.medium_16,
     },
     inline: {