Button/Badge: various Cambio updates

Cambly · Mar 20, 2024 · e79ff05 · e79ff05
1 parent df07a81
commit e79ff05
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 11 deletions.
diff --git a/.changeset/lucky-queens-draw.md b/.changeset/lucky-queens-draw.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Button/Badge: various Cambio updates
diff --git a/packages/syntax-core/src/Badge/Badge.stories.tsx b/packages/syntax-core/src/Badge/Badge.stories.tsx
@@ -14,6 +14,7 @@ export default {
   argTypes: {
     color: {
       options: [
+        // Classic
         "gray200",
         "gray900",
         "destructive700",
@@ -22,6 +23,17 @@ export default {
         "success700",
         "primary700",
         "purple700",
+        // Cambio
+        "sky",
+        "success300",
+        "destructive300",
+        "orange",
+        "tan",
+        "gray370",
+        "gray870",
+        "lilac",
+        "thistle",
+        "pink",
       ],
       control: { type: "radio" },
     },

diff --git a/packages/syntax-core/src/Badge/Badge.tsx b/packages/syntax-core/src/Badge/Badge.tsx
@@ -3,7 +3,7 @@ import Box from "../Box/Box";
 import styles from "./Badge.module.css";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
 
-const BadgeColor = [
+const badgeColorClassic = [
   "gray200",
   "gray900",
   "destructive700",
@@ -14,13 +14,57 @@ const BadgeColor = [
   "purple700",
 ] as const;
 
+const badgeColorCambio = [
+  "sky",
+  "success300",
+  "destructive300",
+  "orange",
+  "tan",
+  "gray370",
+  "gray870",
+  "lilac",
+  "thistle",
+  "pink",
+] as const;
+
+const badgeColorClassicToCambio = {
+  gray200: "gray370",
+  gray900: "gray870",
+  destructive700: "destructive300",
+  orange700: "orange",
+  yellow700: "tan",
+  success700: "success300",
+  primary700: "sky",
+  purple700: "lilac",
+  sky: "sky",
+  success300: "success300",
+  destructive300: "destructive300",
+  orange: "orange",
+  tan: "tan",
+  gray370: "gray370",
+  gray870: "gray870",
+  lilac: "lilac",
+  thistle: "thistle",
+  pink: "pink",
+} as const;
+
 const textColorForBackgroundColor = (
-  color: (typeof BadgeColor)[number],
+  color: (typeof badgeColorClassic)[number] | (typeof badgeColorCambio)[number],
 ): "gray900" | "white" => {
   switch (color) {
     case "gray200":
     case "yellow700":
       return "gray900";
+    case "gray370":
+    case "destructive300":
+    case "orange":
+    case "tan":
+    case "success300":
+    case "sky":
+    case "thistle":
+    case "pink":
+    case "lilac":
+      return "gray900";
     default:
       return "white";
   }
@@ -45,28 +89,55 @@ const Badge = ({
   /**
    * The color of the badge
    *
+   * Classic colors:
+   * * `gray200` => maps to neutralLight in Cambio
+   * * `gray900` => maps to neutralDark in Cambio
+   * * `destructive700` => maps to destructive in Cambio
+   * * `orange700` => maps to orange in Cambio
+   * * `yellow700` => maps to tan in Cambio
+   * * `success700` => maps to success in Cambio
+   * * `primary700` => maps to sky in Cambio
+   * * `purple700` => maps to lilac in Cambio
+   *
+   * Cambio colors:
+   * * `sky`
+   * * `success300`
+   * * `destructive300`
+   * * `orange`
+   * * `tan`
+   * * `gray370`
+   * * `gray870`
+   * * `lilac`
+   * * `thistle`
+   * * `pink`
+   *
    * @defaultValue "primary700"
    */
-  color?: (typeof BadgeColor)[number];
+  color?:
+    | (typeof badgeColorClassic)[number]
+    | (typeof badgeColorCambio)[number];
 }): JSX.Element => {
   const { themeName } = useTheme();
 
+  const mappedColor =
+    themeName === "cambio" ? badgeColorClassicToCambio[color] : color;
+
   return (
     <Box
       display={themeName === "classic" ? "inlineBlock" : "inlineFlex"}
       paddingX={themeName === "classic" ? 2 : 3}
       paddingY={1}
       rounding={themeName === "classic" ? "full" : "sm"}
-      backgroundColor={color}
+      backgroundColor={mappedColor}
       alignItems="center"
       justifyContent="center"
       height={themeName === "cambio" ? 32 : undefined}
     >
-      <Typography color={textColorForBackgroundColor(color)}>
+      <Typography color={textColorForBackgroundColor(mappedColor)}>
         <Box display="flex" gap={1} alignItems="center" justifyContent="start">
           {Icon && <Icon className={styles.icon} />}
           <Typography
-            color={textColorForBackgroundColor(color)}
+            color={textColorForBackgroundColor(mappedColor)}
             size={100}
             weight={themeName === "classic" ? "bold" : "medium"}
           >

diff --git a/packages/syntax-core/src/Box/Box.stories.tsx b/packages/syntax-core/src/Box/Box.stories.tsx
@@ -288,7 +288,7 @@ export const Margin: StoryObj<typeof Box> = {
             alignItems="center"
             justifyContent="center"
           >
-            <Typography color="gray200" tooltip={`${margin * 4}px`}>
+            <Typography tooltip={`${margin * 4}px`}>
               margin=&quot;{margin}&quot;
             </Typography>
           </Box>

diff --git a/packages/syntax-core/src/Button/Button.module.css b/packages/syntax-core/src/Button/Button.module.css
@@ -47,6 +47,10 @@
   cursor: auto;
 }
 
+.disabledCambioPrimary {
+  opacity: 0.5;
+}
+
 .fullWidth {
   width: 100%;
 }

diff --git a/packages/syntax-core/src/Button/Button.tsx b/packages/syntax-core/src/Button/Button.tsx
@@ -162,6 +162,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ? classicBackgroundColor(classicColor(color))
         : cambioBackgroundColor(cambioColor(color), on);
 
+    const disabledCambioPrimary =
+      themeName === "cambio" && color === "primary" && disabled;
+
     return (
       <button
         data-testid={dataTestId}
@@ -188,7 +191,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
       >
         {!loading && StartIcon && (
-          <StartIcon className={classNames(styles.icon, iconSize[size])} />
+          <StartIcon
+            className={classNames(
+              styles.icon,
+              iconSize[size],
+              disabledCambioPrimary && styles.disabledCambioPrimary,
+            )}
+          />
         )}
         {((loading && loadingText) || (!loading && text)) && (
           <Box paddingX={1}>
@@ -198,8 +207,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
               }
             >
               <span
-                // Temporary - until we have cambio colors on Typogrphay
-                className={foregroundColorClass}
+                className={classNames(
+                  // Temporary - until we have cambio colors on Typography
+                  foregroundColorClass,
+                  disabledCambioPrimary && styles.disabledCambioPrimary,
+                )}
                 style={{ fontWeight: 500 }}
               >
                 {loading ? loadingText : text}
@@ -208,7 +220,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           </Box>
         )}
         {!loading && EndIcon && (
-          <EndIcon className={classNames(styles.icon, iconSize[size])} />
+          <EndIcon
+            className={classNames(
+              styles.icon,
+              iconSize[size],
+              disabledCambioPrimary && styles.disabledCambioPrimary,
+            )}
+          />
         )}
         {loading && (
           <svg

diff --git a/packages/syntax-core/src/colors/allColors.ts b/packages/syntax-core/src/colors/allColors.ts
@@ -47,6 +47,22 @@ const colors = [
   "yellow700",
   "yellow800",
   "yellow900",
+
+  // Cambio specific colors
+  "gray370",
+  "gray870",
+  "cream",
+  "lilac",
+  "navy",
+  "orange",
+  "pink",
+  "purple",
+  "red",
+  "sky",
+  "slate",
+  "tan",
+  "teal",
+  "thistle",
 ] as const;
 
 export default colors;
diff --git a/packages/syntax-core/src/colors/colors.module.css b/packages/syntax-core/src/colors/colors.module.css
@@ -385,6 +385,10 @@
   background-color: var(--color-cambio-gray-300);
 }
 
+.gray370BackgroundColor {
+  background-color: var(--color-cambio-gray-370);
+}
+
 .cambioGray370BackgroundColor {
   background-color: var(--color-cambio-gray-370);
 }
@@ -397,6 +401,10 @@
   background-color: var(--color-cambio-gray-800);
 }
 
+.gray870BackgroundColor {
+  background-color: var(--color-cambio-gray-870);
+}
+
 .cambioGray870BackgroundColor {
   background-color: var(--color-cambio-gray-870);
 }
@@ -453,50 +461,98 @@
   background-color: var(--color-cambio-success-900);
 }
 
+.redBackgroundColor {
+  background-color: var(--color-cambio-red);
+}
+
 .cambioRedBackgroundColor {
   background-color: var(--color-cambio-red);
 }
 
+.orangeBackgroundColor {
+  background-color: var(--color-cambio-orange);
+}
+
 .cambioOrangeBackgroundColor {
   background-color: var(--color-cambio-orange);
 }
 
+.tanBackgroundColor {
+  background-color: var(--color-cambio-tan);
+}
+
 .cambioTanBackgroundColor {
   background-color: var(--color-cambio-tan);
 }
 
+.creamBackgroundColor {
+  background-color: var(--color-cambio-cream);
+}
+
 .cambioCreamBackgroundColor {
   background-color: var(--color-cambio-cream);
 }
 
+.purpleBackgroundColor {
+  background-color: var(--color-cambio-purple);
+}
+
 .cambioPurpleBackgroundColor {
   background-color: var(--color-cambio-purple);
 }
 
+.lilacBackgroundColor {
+  background-color: var(--color-cambio-lilac);
+}
+
 .cambioLilacBackgroundColor {
   background-color: var(--color-cambio-lilac);
 }
 
+.thistleBackgroundColor {
+  background-color: var(--color-cambio-thistle);
+}
+
 .cambioThistleBackgroundColor {
   background-color: var(--color-cambio-thistle);
 }
 
+.pinkBackgroundColor {
+  background-color: var(--color-cambio-pink);
+}
+
 .cambioPinkBackgroundColor {
   background-color: var(--color-cambio-pink);
 }
 
+.navyBackgroundColor {
+  background-color: var(--color-cambio-navy);
+}
+
 .cambioNavyBackgroundColor {
   background-color: var(--color-cambio-navy);
 }
 
+.tealBackgroundColor {
+  background-color: var(--color-cambio-teal);
+}
+
 .cambioTealBackgroundColor {
   background-color: var(--color-cambio-teal);
 }
 
+.slateBackgroundColor {
+  background-color: var(--color-cambio-slate);
+}
+
 .cambioSlateBackgroundColor {
   background-color: var(--color-cambio-slate);
 }
 
+.skyBackgroundColor {
+  background-color: var(--color-cambio-sky);
+}
+
 .cambioSkyBackgroundColor {
   background-color: var(--color-cambio-sky);
 }