Remove pink and lightBlue colors (#2294)

## Summary: Follow up to #2291. This PR removes the pink and lightBlue colors from the tokens package, as requested by the design team. Issue: https://khanacademy.atlassian.net/browse/WB-1732 ## Test plan: Verify that the snapshots switch to different colors. Author: jandrade Reviewers: beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ dependabot Pull Request URL: #2294
Khan · Aug 21, 2024 · f17dc1e · f17dc1e
1 parent 991eb43
commit f17dc1e
Show file tree

Hide file tree

Showing 24 changed files with 59 additions and 55 deletions.
diff --git a/.changeset/breezy-moons-dress.md b/.changeset/breezy-moons-dress.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": major
+---
+
+Remove pink and lightBlue from brand colors
diff --git a/.changeset/hungry-planes-push.md b/.changeset/hungry-planes-push.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-link": patch
+---
+
+Change Link to define color.pink internally
diff --git a/__docs__/wonder-blocks-accordion/accordion.stories.tsx b/__docs__/wonder-blocks-accordion/accordion.stories.tsx
@@ -422,7 +422,7 @@ WithAnimation.parameters = {
 
 /**
  * An Accordion with custom styles. The custom styles in this example
- * include a pink border and extra padding.
+ * include a purple border and extra padding.
  * Note that the Accordion's border is different than the AccordionSection
  * border styles. Passing custom styles here will not affect the sections'
  * styles. If you want to change the corner kind of a single section,
@@ -433,7 +433,7 @@ WithAnimation.parameters = {
 export const WithStyle: StoryComponentType = {
     render: () => {
         const customStyles = {
-            border: `2px solid ${tokens.color.pink}`,
+            border: `2px solid ${tokens.color.purple}`,
             padding: tokens.spacing.xLarge_32,
         };
 

diff --git a/__docs__/wonder-blocks-banner/banner.stories.tsx b/__docs__/wonder-blocks-banner/banner.stories.tsx
@@ -128,7 +128,7 @@ export const Kinds: StoryComponentType = {
  * added around the floating banner so that it will not touch its outline.
  */
 export const Layouts: StoryComponentType = () => {
-    const borderStyle = {border: `2px solid ${color.pink}`} as const;
+    const borderStyle = {border: `2px solid ${color.fadedPurple24}`} as const;
     const floatingContainerStyle = {padding: spacing.xSmall_8} as const;
 
     return (

diff --git a/__docs__/wonder-blocks-cell/compact-cell.stories.tsx b/__docs__/wonder-blocks-cell/compact-cell.stories.tsx
@@ -407,7 +407,7 @@ export const CompactCellsAsListItems: StoryComponentType = {
                         />
                     }
                     onClick={() => {}}
-                    style={{background: color.pink}}
+                    style={{background: color.fadedPurple24}}
                     horizontalRule="full-width"
                 />
             </View>

diff --git a/__docs__/wonder-blocks-cell/detail-cell.stories.tsx b/__docs__/wonder-blocks-cell/detail-cell.stories.tsx
@@ -329,7 +329,7 @@ export const DetailCellsAsListItems: StoryComponentType = {
                         />
                     }
                     onClick={() => {}}
-                    style={{background: color.pink}}
+                    style={{background: color.fadedPurple24}}
                     horizontalRule="full-width"
                 />
             </View>
@@ -351,7 +351,7 @@ const styles = StyleSheet.create({
         width: 376,
     },
     navigation: {
-        border: `1px dashed ${color.lightBlue}`,
+        border: `1px dashed ${color.purple}`,
         marginTop: spacing.large_24,
         padding: spacing.large_24,
     },

diff --git a/__docs__/wonder-blocks-clickable/accessibility.stories.tsx b/__docs__/wonder-blocks-clickable/accessibility.stories.tsx
@@ -11,7 +11,7 @@ import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 const styles = StyleSheet.create({
     resting: {
-        boxShadow: `inset 0px 0px 1px 1px ${color.lightBlue}`,
+        boxShadow: `inset 0px 0px 1px 1px ${color.purple}`,
         padding: spacing.xSmall_8,
     },
     hovered: {
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
         color: color.darkBlue,
     },
     focused: {
-        outline: `solid 4px ${color.lightBlue}`,
+        outline: `solid 4px ${color.purple}`,
     },
     panel: {
         padding: spacing.medium_16,

diff --git a/__docs__/wonder-blocks-clickable/clickable-behavior.stories.tsx b/__docs__/wonder-blocks-clickable/clickable-behavior.stories.tsx
@@ -176,6 +176,6 @@ const styles = StyleSheet.create({
         backgroundColor: color.darkBlue,
     },
     focused: {
-        outline: `solid 4px ${color.lightBlue}`,
+        outline: `solid 4px ${color.purple}`,
     },
 });
diff --git a/__docs__/wonder-blocks-clickable/clickable.stories.tsx b/__docs__/wonder-blocks-clickable/clickable.stories.tsx
@@ -318,7 +318,7 @@ const styles = StyleSheet.create({
         color: color.blue,
     },
     focused: {
-        outline: `solid 4px ${color.lightBlue}`,
+        outline: `solid 4px ${color.purple}`,
     },
     centerText: {
         gap: spacing.medium_16,
@@ -337,7 +337,7 @@ const styles = StyleSheet.create({
         marginRight: spacing.large_24,
     },
     navigation: {
-        border: `1px dashed ${color.lightBlue}`,
+        border: `1px dashed ${color.purple}`,
         marginTop: spacing.large_24,
         padding: spacing.large_24,
     },

diff --git a/__docs__/wonder-blocks-core/view.stories.tsx b/__docs__/wonder-blocks-core/view.stories.tsx
@@ -52,7 +52,7 @@ export const InlineStyles: StoryComponentType = () => (
             style={[
                 styles.container,
                 {
-                    background: color.lightBlue,
+                    background: color.fadedPurple24,
                     border: `1px solid ${color.blue}`,
                     padding: spacing.xxxSmall_4,
                 },
@@ -141,7 +141,7 @@ const styles = StyleSheet.create({
     },
 
     view: {
-        border: `1px dashed ${color.lightBlue}`,
+        border: `1px dashed ${color.purple}`,
         gap: spacing.medium_16,
         padding: spacing.medium_16,
     },

diff --git a/__docs__/wonder-blocks-dropdown/action-menu.stories.tsx b/__docs__/wonder-blocks-dropdown/action-menu.stories.tsx
@@ -144,18 +144,18 @@ const styles = StyleSheet.create({
      * Custom opener styles
      */
     customOpener: {
-        borderLeft: `5px solid ${color.blue}`,
+        borderLeft: `${spacing.xxxSmall_4}px solid ${color.purple}`,
         borderRadius: spacing.xxxSmall_4,
-        background: color.lightBlue,
-        color: color.white,
+        background: color.fadedPurple24,
+        color: color.offBlack,
         padding: spacing.medium_16,
     },
     focused: {
-        color: color.offWhite,
+        outlineColor: color.purple,
+        outlineOffset: spacing.xxxxSmall_2,
     },
     hovered: {
         textDecoration: "underline",
-        color: color.offWhite,
         cursor: "pointer",
     },
     pressed: {

diff --git a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
@@ -104,18 +104,18 @@ const styles = StyleSheet.create({
      * Custom opener styles
      */
     customOpener: {
-        borderLeft: `5px solid ${color.blue}`,
+        borderLeft: `${spacing.xxxSmall_4}px solid ${color.purple}`,
         borderRadius: spacing.xxxSmall_4,
-        background: color.lightBlue,
-        color: color.white,
+        background: color.fadedPurple24,
+        color: color.offBlack,
         padding: spacing.medium_16,
     },
     focused: {
-        color: color.offWhite,
+        outlineColor: color.purple,
+        outlineOffset: spacing.xxxxSmall_2,
     },
     hovered: {
         textDecoration: "underline",
-        color: color.offWhite,
         cursor: "pointer",
     },
     pressed: {

diff --git a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
@@ -6,7 +6,7 @@ import {action} from "@storybook/addon-actions";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import Button from "@khanacademy/wonder-blocks-button";
-import {fade, color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
@@ -113,18 +113,18 @@ const styles = StyleSheet.create({
      * Custom opener styles
      */
     customOpener: {
-        borderLeft: `5px solid ${color.blue}`,
+        borderLeft: `${spacing.xxxSmall_4}px solid ${color.purple}`,
         borderRadius: spacing.xxxSmall_4,
-        background: color.lightBlue,
-        color: color.white,
+        background: color.fadedPurple24,
+        color: color.offBlack,
         padding: spacing.medium_16,
     },
     focused: {
-        backgroundColor: fade(color.lightBlue, 0.8),
+        outlineColor: color.purple,
+        outlineOffset: spacing.xxxxSmall_2,
     },
     hovered: {
         textDecoration: "underline",
-        color: color.offWhite,
         cursor: "pointer",
     },
     pressed: {

diff --git a/__docs__/wonder-blocks-layout/media-layout.stories.tsx b/__docs__/wonder-blocks-layout/media-layout.stories.tsx
@@ -61,7 +61,7 @@ export const Default: StoryComponentType = {
             }),
             small: StyleSheet.create({
                 test: {
-                    backgroundColor: color.lightBlue,
+                    backgroundColor: color.purple,
                     color: color.white,
                 },
             }),
@@ -92,7 +92,7 @@ export const ScreenSizeStyles: StoryComponentType = () => {
         }),
         small: StyleSheet.create({
             test: {
-                backgroundColor: color.lightBlue,
+                backgroundColor: color.purple,
                 color: color.white,
             },
         }),
@@ -149,7 +149,7 @@ export const AllStyles: StoryComponentType = () => {
 
         small: StyleSheet.create({
             test: {
-                backgroundColor: color.lightBlue,
+                backgroundColor: color.purple,
             },
         }),
     } as const;
@@ -193,7 +193,7 @@ export const CustomSpec: StoryComponentType = () => {
 
         small: StyleSheet.create({
             example: {
-                backgroundColor: color.lightBlue,
+                backgroundColor: color.purple,
                 padding: spacing.small_12,
             },
         }),

diff --git a/__docs__/wonder-blocks-link/link.stories.tsx b/__docs__/wonder-blocks-link/link.stories.tsx
@@ -833,7 +833,7 @@ WithTypography.play = async ({canvasElement}) => {
 };
 
 export const WithStyle: StoryComponentType = () => (
-    <Link href="#" style={styles.pinkLink}>
+    <Link href="#" style={styles.customLink}>
         This link has a style.
     </Link>
 );
@@ -842,7 +842,7 @@ WithStyle.parameters = {
     docs: {
         storyDescription: `Link can take a \`style\` prop. Here, the
             Link has been given a style in which the \`color\` field has
-            been set to \`Colors.pink\`.`,
+            been set to \`color.red\`.`,
     },
 };
 
@@ -971,12 +971,12 @@ const styles = StyleSheet.create({
         marginRight: spacing.large_24,
     },
     navigation: {
-        border: `1px dashed ${color.lightBlue}`,
+        border: `1px dashed ${color.purple}`,
         marginTop: spacing.large_24,
         padding: spacing.large_24,
     },
-    pinkLink: {
-        color: color.pink,
+    customLink: {
+        color: color.red,
     },
     row: {
         flexDirection: "row",

diff --git a/__docs__/wonder-blocks-popover/popover.stories.tsx b/__docs__/wonder-blocks-popover/popover.stories.tsx
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
         justifyContent: "space-between",
     },
     playground: {
-        border: `1px dashed ${color.lightBlue}`,
+        border: `1px dashed ${color.purple}`,
         marginTop: spacing.large_24,
         padding: spacing.large_24,
         flexDirection: "row",

diff --git a/__docs__/wonder-blocks-theming/adding-a-theme.mdx b/__docs__/wonder-blocks-theming/adding-a-theme.mdx
@@ -75,7 +75,7 @@ import themeDefault from "./default";
 export default mergeTheme(themeDefault, {
     color: {
         bg: {
-            primary: tokens.color.lightBlue,
+            primary: tokens.color.purple,
             action: tokens.color.darkBlue,
         },
         text: {

diff --git a/__docs__/wonder-blocks-theming/merge-theme.mdx b/__docs__/wonder-blocks-theming/merge-theme.mdx
@@ -45,7 +45,7 @@ const buttonDefaultTheme = {
 const buttonCustomTheme = mergeTheme(buttonDefaultTheme, {
     color: {
         bg: {
-            primary: tokens.color.pink,
+            primary: tokens.color.purple,
         },
     },
     border: {
@@ -64,7 +64,7 @@ And this is the resulting theme object:
 {
     color: {
         bg: {
-            primary: tokens.color.pink, // 👈 overridden
+            primary: tokens.color.gold, // 👈 overridden
         },
         text: {
             light: tokens.color.white, // from the default theme

diff --git a/__docs__/wonder-blocks-theming/theme-examples.tsx b/__docs__/wonder-blocks-theming/theme-examples.tsx
@@ -33,7 +33,7 @@ const defaultTheme = {
 const customTheme = mergeTheme(defaultTheme, {
     color: {
         bg: {
-            primary: tokens.color.pink,
+            primary: tokens.color.purple,
         },
     },
     border: {

diff --git a/__docs__/wonder-blocks-theming/with-scoped-theme.mdx b/__docs__/wonder-blocks-theming/with-scoped-theme.mdx
@@ -34,7 +34,7 @@ import * as tokens from "@khanacademy/wonder-blocks-tokens";
 const defaultTheme = {
   color: {
     bg: {
-      primary: tokens.color.pink,
+      primary: tokens.color.purple,
     },
     text: {
       light: tokens.color.white,

diff --git a/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx b/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx
@@ -471,7 +471,7 @@ const styles = StyleSheet.create({
         height: "200vh",
     },
     block: {
-        border: `solid 1px ${color.lightBlue}`,
+        border: `solid 1px ${color.purple}`,
         width: spacing.xLarge_32,
         height: spacing.xLarge_32,
         alignItems: "center",

diff --git a/packages/wonder-blocks-link/src/components/link-core.tsx b/packages/wonder-blocks-link/src/components/link-core.tsx
@@ -191,7 +191,10 @@ const _generateStyles = (
         throw new Error("Only primary link is visitable");
     }
 
-    const {blue, pink, purple, white, offBlack, offBlack32, offBlack64} = color;
+    const {blue, purple, white, offBlack, offBlack32, offBlack64} = color;
+
+    // NOTE: This color is only used here.
+    const pink = "#fa50ae";
 
     // Standard purple
     const linkPurple = mix(fade(offBlack, 0.08), purple);

diff --git a/packages/wonder-blocks-tokens/src/tokens/color.ts b/packages/wonder-blocks-tokens/src/tokens/color.ts
@@ -26,8 +26,6 @@ type ColorType = {
     // Brand
     darkBlue: string;
     teal: string;
-    lightBlue: string;
-    pink: string;
 };
 
 const baseColors: ColorType = {
@@ -55,8 +53,6 @@ const baseColors: ColorType = {
     // Brand
     darkBlue: "#0b2149",
     teal: "#14bf96",
-    lightBlue: "#37c5fd",
-    pink: "#fa50ae",
 };
 
 const fadedColorWithWhite = (color: string, alpha: number) =>

diff --git a/static/sb-styles/vars.css b/static/sb-styles/vars.css
@@ -38,11 +38,6 @@
     --color-text-32: rgba(33, 36, 44, 0.32); /* offBlack 32% */
     --color-text-16: rgba(33, 36, 44, 0.16); /* offBlack 16% */
     --color-text-8: rgba(33, 36, 44, 0.08); /* offBlack 8% */
-    /* Brand */
-    --color-brand-primary: #0b2149; /* darkBlue */
-    --color-brand-secondary: #37c5fd; /* lightBlue */
-    --color-brand-tertiary: #14bf96; /* teal */
-    --color-brand-quaternary: #fa50ae; /* pink */
 
     /**
      * Spacing