From 941041f639c01a448f92bd97deabb3655da5766c Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Mon, 18 Mar 2024 08:45:10 -0700
Subject: [PATCH] Button/IconButton/LinkButton: add 'on' lightBackground or
 darkBackground prop (#333)

---
 .changeset/fluffy-files-press.md              |  5 ++
 packages/syntax-core/package.json             |  2 +-
 .../syntax-core/src/Button/Button.stories.tsx | 32 +++++++++
 packages/syntax-core/src/Button/Button.tsx    | 13 +++-
 packages/syntax-core/src/Chip/Chip.module.css |  8 +++
 .../syntax-core/src/Chip/Chip.stories.tsx     | 22 +++++-
 packages/syntax-core/src/Chip/Chip.tsx        | 54 +++++++++++++--
 .../src/IconButton/IconButton.module.css      |  7 --
 .../src/IconButton/IconButton.stories.tsx     | 26 +++++++
 .../syntax-core/src/IconButton/IconButton.tsx | 12 +++-
 .../src/LinkButton/LinkButton.stories.tsx     | 30 +++++++-
 .../syntax-core/src/LinkButton/LinkButton.tsx | 11 ++-
 .../syntax-core/src/colors/backgroundColor.ts | 68 +++++++++++++------
 .../syntax-core/src/colors/foregroundColor.ts | 47 +++++++++----
 14 files changed, 278 insertions(+), 59 deletions(-)
 create mode 100644 .changeset/fluffy-files-press.md

diff --git a/.changeset/fluffy-files-press.md b/.changeset/fluffy-files-press.md
new file mode 100644
index 00000000..6d250bfa
--- /dev/null
+++ b/.changeset/fluffy-files-press.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Button/Chip/IconButton/LinkButton: add 'on' lightBackground or darkBackground prop (Cambio only)
diff --git a/packages/syntax-core/package.json b/packages/syntax-core/package.json
index c9bff360..386b4655 100644
--- a/packages/syntax-core/package.json
+++ b/packages/syntax-core/package.json
@@ -14,7 +14,7 @@
   "scripts": {
     "build": "tsup",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "NODE_OPTIONS=--max_old_space_size=4096 tsup --watch",
+    "dev": "NODE_OPTIONS=--max_old_space_size=8192 tsup --watch",
     "lint": "TIMING=1 eslint \"src/**/*.ts*\" --max-warnings 0",
     "stylelint": "stylelint \"**/*.css\"",
     "stylelint:fix": "npm run stylelint --fix",
diff --git a/packages/syntax-core/src/Button/Button.stories.tsx b/packages/syntax-core/src/Button/Button.stories.tsx
index aa75c506..6b100952 100644
--- a/packages/syntax-core/src/Button/Button.stories.tsx
+++ b/packages/syntax-core/src/Button/Button.stories.tsx
@@ -1,6 +1,7 @@
 import { type StoryObj, type Meta } from "@storybook/react";
 import Button from "./Button";
 import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+import Box from "../Box/Box";
 
 export default {
   title: "Components/Button",
@@ -11,6 +12,20 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/Cambly-Design-System-(Draft)?node-id=994%3A2346",
     },
   },
+  args: {
+    text: "Call to action",
+    color: "primary",
+    on: "lightBackground",
+    size: "md",
+    disabled: false,
+    loading: false,
+    fullWidth: false,
+    "data-testid": "",
+    loadingText: "",
+    accessibilityLabel: "",
+    tooltip: "",
+    type: "button",
+  },
   argTypes: {
     color: {
       options: [
@@ -29,6 +44,10 @@ export default {
       ],
       control: { type: "radio" },
     },
+    on: {
+      options: ["lightBackground", "darkBackground"],
+      control: { type: "radio" },
+    },
     size: {
       options: ["sm", "md", "lg"],
       control: { type: "radio" },
@@ -43,12 +62,25 @@ export default {
       control: "boolean",
     },
     onClick: { action: "clicked" },
+    type: {
+      options: ["button", "submit", "reset"],
+    },
   },
   tags: ["autodocs"],
 } as Meta<typeof Button>;
 
 export const Default: StoryObj<typeof Button> = {
   args: { text: "Call to action" },
+  render: (args) => {
+    return (
+      <Box
+        backgroundColor={args.on === "lightBackground" ? "white" : "black"}
+        padding={2}
+      >
+        <Button {...args} />
+      </Box>
+    );
+  },
 };
 export const Small: StoryObj<typeof Button> = {
   args: { ...Default.args, size: "sm" },
diff --git a/packages/syntax-core/src/Button/Button.tsx b/packages/syntax-core/src/Button/Button.tsx
index da7f3669..b1dfea4b 100644
--- a/packages/syntax-core/src/Button/Button.tsx
+++ b/packages/syntax-core/src/Button/Button.tsx
@@ -107,6 +107,12 @@ type ButtonProps = {
    * Note: endIcon is not supported in the Cambio theme
    */
   endIcon?: React.ComponentType<{ className?: string }>;
+  /**
+   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)
+   *
+   * @defaulValue `lightBackground`
+   */
+  on?: "lightBackground" | "darkBackground";
   /**
    * The callback to be called when the button is clicked
    */
@@ -116,7 +122,7 @@ type ButtonProps = {
    */
   tooltip?: string;
   /**
-   * The type you want to set for the primitive <button/>
+   * The type you want to set for the primitive `<button/>`
    */
   type?: "button" | "submit" | "reset";
 };
@@ -138,6 +144,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       fullWidth = false,
       startIcon: StartIcon,
       endIcon: EndIcon,
+      on = "lightBackground",
       onClick,
       tooltip,
       type = "button",
@@ -150,12 +157,12 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const foregroundColorClass =
       themeName === "classic"
         ? classicForegroundColor(classicColor(color))
-        : cambioForegroundColor(cambioColor(color));
+        : cambioForegroundColor(cambioColor(color), on);
 
     const backgroundColorClass =
       themeName === "classic"
         ? classicBackgroundColor(classicColor(color))
-        : cambioBackgroundColor(cambioColor(color));
+        : cambioBackgroundColor(cambioColor(color), on);
 
     return (
       <button
diff --git a/packages/syntax-core/src/Chip/Chip.module.css b/packages/syntax-core/src/Chip/Chip.module.css
index dd4b2655..1e633405 100644
--- a/packages/syntax-core/src/Chip/Chip.module.css
+++ b/packages/syntax-core/src/Chip/Chip.module.css
@@ -35,10 +35,18 @@
   background-color: var(--color-cambio-gray-370);
 }
 
+.deselectedChipCambioOnDarkBackground {
+  background-color: var(--color-cambio-gray-870);
+}
+
 .selectedChipCambio {
   background-color: var(--color-cambio-gray-800);
 }
 
+.selectedChipCambioOnDarkBackground {
+  background-color: var(--color-cambio-gray-200);
+}
+
 .icon {
   /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */
   height: 24px !important;
diff --git a/packages/syntax-core/src/Chip/Chip.stories.tsx b/packages/syntax-core/src/Chip/Chip.stories.tsx
index 1a7c298e..3866926a 100644
--- a/packages/syntax-core/src/Chip/Chip.stories.tsx
+++ b/packages/syntax-core/src/Chip/Chip.stories.tsx
@@ -13,7 +13,17 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?type=design&node-id=6156%3A25032&mode=design&t=SSblm5y2vyrOKil1-1",
     },
   },
+  args: {
+    selected: false,
+    text: "text on chip",
+    size: "sm",
+    on: "lightBackground",
+  },
   argTypes: {
+    on: {
+      options: ["lightBackground", "darkBackground"],
+      control: { type: "radio" },
+    },
     selected: {
       control: "boolean",
     },
@@ -30,8 +40,16 @@ export const Default: StoryObj<typeof Chip> = {
     text: "text on chip",
     selected: false,
   },
-  /* eslint-disable-next-line react/jsx-props-no-spreading */
-  render: ({ ...args }) => <Chip {...args} />,
+  render: (args) => {
+    return (
+      <Box
+        backgroundColor={args.on === "lightBackground" ? "white" : "black"}
+        padding={2}
+      >
+        <Chip {...args} />
+      </Box>
+    );
+  },
 };
 
 const ChipInteractive = () => {
diff --git a/packages/syntax-core/src/Chip/Chip.tsx b/packages/syntax-core/src/Chip/Chip.tsx
index 4a262011..2efc484d 100644
--- a/packages/syntax-core/src/Chip/Chip.tsx
+++ b/packages/syntax-core/src/Chip/Chip.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useMemo } from "react";
 import classnames from "classnames";
 import Typography from "../Typography/Typography";
 import Box from "../Box/Box";
@@ -6,6 +6,30 @@ import styles from "./Chip.module.css";
 import useIsHydrated from "../useIsHydrated";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
 
+function typographyColor({
+  themeName,
+  selected,
+  on,
+}: {
+  themeName: "cambio" | "classic";
+  selected: boolean;
+  on: "lightBackground" | "darkBackground";
+}): "white" | "gray900" {
+  if (themeName === "cambio" && on === "darkBackground") {
+    if (selected) {
+      return "gray900";
+    } else {
+      return "white";
+    }
+  } else {
+    if (selected) {
+      return "white";
+    } else {
+      return "gray900";
+    }
+  }
+}
+
 type ChipProps = {
   /**
    * If true, the chip will be disabled.
@@ -40,6 +64,12 @@ type ChipProps = {
    * The text to be displayed on the chip
    */
   text: string;
+  /**
+   * Indicate whether the badge renders on a light or dark background. Changes the color of the chip (Cambio only)
+   *
+   * @defaulValue `lightBackground`
+   */
+  on?: "lightBackground" | "darkBackground";
   /**
    * The callback to be called when the chip is clicked
    */
@@ -62,6 +92,7 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
       "data-testid": dataTestId,
       size = "sm",
       text,
+      on = "lightBackground",
       onChange,
       icon: Icon,
       dangerouslyForceFocusStyles,
@@ -73,6 +104,16 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
     const isHydrated = useIsHydrated();
     const disabled = !isHydrated || disabledProp;
 
+    const selectedChipCambioStyle =
+      on === "lightBackground"
+        ? styles.selectedChipCambio
+        : styles.selectedChipCambioOnDarkBackground;
+
+    const deselectedChipCambioStyle =
+      on === "lightBackground"
+        ? styles.deselectedChipCambio
+        : styles.deselectedChipCambioOnDarkBackground;
+
     const chipStyles = classnames(
       styles.chip,
       themeName === "classic" ? styles.chipClassic : styles.chipCambio,
@@ -80,10 +121,10 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
       {
         [themeName === "classic"
           ? styles.selectedChip
-          : styles.selectedChipCambio]: selected,
+          : selectedChipCambioStyle]: selected,
         [themeName === "classic"
           ? styles.deselectedChip
-          : styles.deselectedChipCambio]: !selected,
+          : deselectedChipCambioStyle]: !selected,
         [styles.disabled]: disabled,
         [styles.forceFocus]: dangerouslyForceFocusStyles,
       },
@@ -96,6 +137,11 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
       ["lg"]: 300,
     } as const;
 
+    const color = useMemo(
+      () => typographyColor({ themeName, selected, on }),
+      [themeName, selected, on],
+    );
+
     return (
       <button
         className={chipStyles}
@@ -112,7 +158,7 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
             size={
               themeName === "classic" ? typographySize[transformedSize] : 100
             }
-            color={selected ? "white" : "gray900"}
+            color={color}
           >
             {text}
           </Typography>
diff --git a/packages/syntax-core/src/IconButton/IconButton.module.css b/packages/syntax-core/src/IconButton/IconButton.module.css
index 22ab1f13..ce8b16f6 100644
--- a/packages/syntax-core/src/IconButton/IconButton.module.css
+++ b/packages/syntax-core/src/IconButton/IconButton.module.css
@@ -117,10 +117,3 @@
   /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */
   width: 32px !important;
 }
-
-.xlIconCambio {
-  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */
-  height: 40px !important;
-  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */
-  width: 40px !important;
-}
diff --git a/packages/syntax-core/src/IconButton/IconButton.stories.tsx b/packages/syntax-core/src/IconButton/IconButton.stories.tsx
index 733a0459..51c879b1 100644
--- a/packages/syntax-core/src/IconButton/IconButton.stories.tsx
+++ b/packages/syntax-core/src/IconButton/IconButton.stories.tsx
@@ -2,6 +2,7 @@ import { type StoryObj, type Meta } from "@storybook/react";
 import IconButton from "./IconButton";
 import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
 import Star from "@mui/icons-material/Star";
+import Box from "../Box/Box";
 
 export default {
   title: "Components/IconButton",
@@ -12,6 +13,15 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/Cambly-Design-System?node-id=1007%3A4105",
     },
   },
+  args: {
+    color: "primary",
+    on: "lightBackground",
+    size: "md",
+    disabled: false,
+    "data-testid": "",
+    accessibilityLabel: "",
+    tooltip: "",
+  },
   argTypes: {
     color: {
       options: [
@@ -37,12 +47,28 @@ export default {
     disabled: {
       control: "boolean",
     },
+    on: {
+      options: ["lightBackground", "darkBackground"],
+      control: { type: "radio" },
+    },
+    onClick: { action: "clicked" },
   },
   tags: ["autodocs"],
 } as Meta<typeof IconButton>;
 
 export const Default: StoryObj<typeof IconButton> = {
   args: { accessibilityLabel: "Star", tooltip: "Demo title", icon: Star },
+
+  render: (args) => {
+    return (
+      <Box
+        backgroundColor={args.on === "lightBackground" ? "white" : "black"}
+        padding={2}
+      >
+        <IconButton {...args} />
+      </Box>
+    );
+  },
 };
 export const Small: StoryObj<typeof IconButton> = {
   args: { ...Default.args, size: "sm" },
diff --git a/packages/syntax-core/src/IconButton/IconButton.tsx b/packages/syntax-core/src/IconButton/IconButton.tsx
index b3af5695..5e814809 100644
--- a/packages/syntax-core/src/IconButton/IconButton.tsx
+++ b/packages/syntax-core/src/IconButton/IconButton.tsx
@@ -25,7 +25,6 @@ const cambioIconSize = {
   sm: styles.smIconCambio,
   md: styles.mdIconCambio,
   lg: styles.lgIconCambio,
-  xl: styles.xlIconCambio,
 };
 
 type IconButtonProps = {
@@ -90,6 +89,12 @@ type IconButtonProps = {
    * @defaultValue false
    */
   disabled?: boolean;
+  /**
+   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)
+   *
+   * @defaulValue `lightBackground`
+   */
+  on?: "lightBackground" | "darkBackground";
   /**
    * The callback to be called when the button is clicked
    */
@@ -113,6 +118,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       icon: Icon,
       size = "md",
       tooltip,
+      on = "lightBackground",
       onClick,
     }: IconButtonProps,
     ref,
@@ -123,12 +129,12 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     const foregroundColorClass =
       themeName === "classic"
         ? classicForegroundColor(classicColor(color))
-        : cambioForegroundColor(cambioColor(color));
+        : cambioForegroundColor(cambioColor(color), on);
 
     const backgroundColorClass =
       themeName === "classic"
         ? classicBackgroundColor(classicColor(color))
-        : cambioBackgroundColor(cambioColor(color));
+        : cambioBackgroundColor(cambioColor(color), on);
 
     return (
       <button
diff --git a/packages/syntax-core/src/LinkButton/LinkButton.stories.tsx b/packages/syntax-core/src/LinkButton/LinkButton.stories.tsx
index 7875776a..d204b2c2 100644
--- a/packages/syntax-core/src/LinkButton/LinkButton.stories.tsx
+++ b/packages/syntax-core/src/LinkButton/LinkButton.stories.tsx
@@ -1,6 +1,7 @@
 import { type StoryObj, type Meta } from "@storybook/react";
 import LinkButton from "./LinkButton";
 import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
+import Box from "../Box/Box";
 
 export default {
   title: "Components/LinkButton",
@@ -11,6 +12,16 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/Cambly-Design-System-(Draft)?node-id=994%3A2346",
     },
   },
+  args: {
+    text: "Call to action",
+    href: "https://www.cambly.com",
+    target: "_blank",
+    color: "primary",
+    on: "lightBackground",
+    size: "md",
+    fullWidth: false,
+    "data-testid": "",
+  },
   argTypes: {
     text: {
       control: { type: "text" },
@@ -19,7 +30,7 @@ export default {
       control: { type: "text" },
     },
     target: {
-      options: ["_blank", "_self", "_parent", "_top", ""],
+      options: ["_blank", "_self", "_parent", "_top", undefined],
       control: { type: "radio" },
     },
     rel: {
@@ -52,6 +63,10 @@ export default {
       ],
       control: { type: "radio" },
     },
+    on: {
+      options: ["lightBackground", "darkBackground"],
+      control: { type: "radio" },
+    },
     size: {
       options: ["sm", "md", "lg"],
       control: { type: "radio" },
@@ -67,10 +82,19 @@ export default {
 export const Default: StoryObj<typeof LinkButton> = {
   args: {
     text: "Call to action",
-    href: "https://www.google.com",
+    href: "https://www.cambly.com",
     target: "_blank",
   },
-  render: ({ ...args }) => <LinkButton {...args} />,
+  render: (args) => {
+    return (
+      <Box
+        backgroundColor={args.on === "lightBackground" ? "white" : "black"}
+        padding={2}
+      >
+        <LinkButton {...args} />
+      </Box>
+    );
+  },
 };
 
 export const Small: StoryObj<typeof LinkButton> = {
diff --git a/packages/syntax-core/src/LinkButton/LinkButton.tsx b/packages/syntax-core/src/LinkButton/LinkButton.tsx
index 8eee73af..f6427cb1 100644
--- a/packages/syntax-core/src/LinkButton/LinkButton.tsx
+++ b/packages/syntax-core/src/LinkButton/LinkButton.tsx
@@ -102,6 +102,12 @@ type LinkButtonProps = {
    * Note: endIcon is not supported in the Cambio theme
    */
   endIcon?: React.ComponentType<{ className?: string }>;
+  /**
+   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)
+   *
+   * @defaulValue `lightBackground`
+   */
+  on?: "lightBackground" | "darkBackground";
   /**
    * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).
    */
@@ -124,6 +130,7 @@ const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
       fullWidth = false,
       startIcon: StartIcon,
       endIcon: EndIcon,
+      on = "lightBackground",
       onClick,
     }: LinkButtonProps,
     ref,
@@ -133,12 +140,12 @@ const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
     const foregroundColorClass =
       themeName === "classic"
         ? classicForegroundColor(classicColor(color))
-        : cambioForegroundColor(cambioColor(color));
+        : cambioForegroundColor(cambioColor(color), on);
 
     const backgroundColorClass =
       themeName === "classic"
         ? classicBackgroundColor(classicColor(color))
-        : cambioBackgroundColor(cambioColor(color));
+        : cambioBackgroundColor(cambioColor(color), on);
 
     return (
       <a
diff --git a/packages/syntax-core/src/colors/backgroundColor.ts b/packages/syntax-core/src/colors/backgroundColor.ts
index 5e1cd4b1..14cad2ac 100644
--- a/packages/syntax-core/src/colors/backgroundColor.ts
+++ b/packages/syntax-core/src/colors/backgroundColor.ts
@@ -25,27 +25,53 @@ export function classicBackgroundColor(color: (typeof Color)[number]): string {
 
 export function cambioBackgroundColor(
   color: (typeof CambioColor)[number],
+  on: "lightBackground" | "darkBackground",
 ): string {
-  switch (color) {
-    case "primary":
-      return styles.cambioBlackBackgroundColor;
-    case "secondary":
-      return styles.cambioGray370BackgroundColor;
-    case "tertiary":
-    case "success-tertiary":
-    case "destructive-tertiary":
-      return styles.cambioTransparentFullBackgroundColor;
-    case "success-primary":
-      return styles.cambioSuccess700BackgroundColor;
-    case "success-secondary":
-      return styles.cambioSuccess370BackgroundColor;
-    case "destructive-primary":
-      return styles.cambioDestructive700BackgroundColor;
-    case "destructive-secondary":
-      return styles.cambioDestructive370BackgroundColor;
-    case "branded":
-      return styles.cambioYellow700BackgroundColor;
-    default:
-      return styles.cambioBlackBackgroundColor;
+  if (on === "lightBackground") {
+    switch (color) {
+      case "primary":
+        return styles.cambioBlackBackgroundColor;
+      case "secondary":
+        return styles.cambioGray370BackgroundColor;
+      case "tertiary":
+      case "success-tertiary":
+      case "destructive-tertiary":
+        return styles.cambioTransparentFullBackgroundColor;
+      case "success-primary":
+        return styles.cambioSuccess700BackgroundColor;
+      case "success-secondary":
+        return styles.cambioSuccess370BackgroundColor;
+      case "destructive-primary":
+        return styles.cambioDestructive700BackgroundColor;
+      case "destructive-secondary":
+        return styles.cambioDestructive370BackgroundColor;
+      case "branded":
+        return styles.cambioYellow700BackgroundColor;
+      default:
+        return styles.cambioBlackBackgroundColor;
+    }
+  } else {
+    switch (color) {
+      case "primary":
+        return styles.cambioGray200BackgroundColor;
+      case "secondary":
+        return styles.cambioGray870BackgroundColor;
+      case "tertiary":
+      case "success-tertiary":
+      case "destructive-tertiary":
+        return styles.cambioTransparentFullBackgroundColor;
+      case "success-primary":
+        return styles.cambioSuccess300BackgroundColor;
+      case "success-secondary":
+        return styles.cambioSuccess770BackgroundColor;
+      case "destructive-primary":
+        return styles.cambioDestructive300BackgroundColor;
+      case "destructive-secondary":
+        return styles.cambioDestructive770BackgroundColor;
+      case "branded":
+        return styles.cambioYellow700BackgroundColor;
+      default:
+        return styles.cambioWhiteBackgroundColor;
+    }
   }
 }
diff --git a/packages/syntax-core/src/colors/foregroundColor.ts b/packages/syntax-core/src/colors/foregroundColor.ts
index 2d180f54..ea0e84fe 100644
--- a/packages/syntax-core/src/colors/foregroundColor.ts
+++ b/packages/syntax-core/src/colors/foregroundColor.ts
@@ -20,19 +20,40 @@ export function classicForegroundColor(color: (typeof Color)[number]): string {
 
 export function cambioForegroundColor(
   color: (typeof CambioColor)[number],
+  on: "lightBackground" | "darkBackground",
 ): string {
-  switch (color) {
-    case "primary":
-    case "success-primary":
-    case "destructive-primary":
-      return styles.cambioWhiteColor;
-    case "success-secondary":
-    case "success-tertiary":
-      return styles.cambioSuccess900Color;
-    case "destructive-secondary":
-    case "destructive-tertiary":
-      return styles.cambioDestructive900Color;
-    default:
-      return styles.cambioBlackColor;
+  if (on === "lightBackground") {
+    switch (color) {
+      case "primary":
+      case "success-primary":
+      case "destructive-primary":
+        return styles.cambioWhiteColor;
+      case "success-secondary":
+      case "success-tertiary":
+        return styles.cambioSuccess900Color;
+      case "destructive-secondary":
+      case "destructive-tertiary":
+        return styles.cambioDestructive900Color;
+      default:
+        return styles.cambioBlackColor;
+    }
+  } else {
+    switch (color) {
+      case "primary":
+      case "success-primary":
+      case "destructive-primary":
+        return styles.cambioBlackColor;
+      case "secondary":
+      case "tertiary":
+        return styles.cambioWhiteColor;
+      case "success-secondary":
+      case "success-tertiary":
+        return styles.cambioSuccess100Color;
+      case "destructive-secondary":
+      case "destructive-tertiary":
+        return styles.cambioDestructive100Color;
+      default: // branded
+        return styles.cambioBlackColor;
+    }
   }
 }