Update colors & sizes

Cambly · Mar 1, 2024 · 3b4c21f · 3b4c21f
1 parent 085f3f1
commit 3b4c21f
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 131 deletions.
diff --git a/packages/syntax-core/src/Button/Button.module.css b/packages/syntax-core/src/Button/Button.module.css
@@ -73,18 +73,21 @@
 }
 
 .smCambio {
+  min-width: 52px;
   height: 32px;
   padding: 0 16px;
   border-radius: 100px;
 }
 
 .mdCambio {
+  min-width: 78px;
   height: 48px;
   padding: 0 24px;
   border-radius: 100px;
 }
 
 .lgCambio {
+  min-width: 104px;
   height: 64px;
   padding: 0 32px;
   border-radius: 100px;

diff --git a/packages/syntax-core/src/Button/Button.stories.tsx b/packages/syntax-core/src/Button/Button.stories.tsx
@@ -17,20 +17,20 @@ export default {
         "primary",
         "secondary",
         "tertiary",
-        "quaternary",
         "destructive-primary",
         "destructive-secondary",
         "destructive-tertiary",
         "success",
         "success-primary",
         "success-secondary",
+        "success-tertiary",
         "branded",
         "inverse",
       ],
       control: { type: "radio" },
     },
     size: {
-      options: ["sm", "md", "lg", "xl"],
+      options: ["sm", "md", "lg"],
       control: { type: "radio" },
     },
     disabled: {

diff --git a/packages/syntax-core/src/Button/Button.tsx b/packages/syntax-core/src/Button/Button.tsx
@@ -36,30 +36,28 @@ type ButtonProps = {
    * The color of the button
    *
    * Classic only:
-   * * `success-primary`
-   * * `success-secondary`
    * * `inverse`
+   * * `success`
    *
    * Cambio only:
-   * * `quaternary`
-   * * `destructive-tertiary`
    * * `success-primary`
    * * `success-secondary`
+   * * `success-tertiary`
    *
    * @defaultValue "primary"
    */
   color?:
     | "primary"
     | "secondary"
     | "tertiary"
-    | "quaternary"
     | "destructive-primary"
     | "destructive-secondary"
     | "destructive-tertiary"
     | "branded"
     | "success"
     | "success-primary"
     | "success-secondary"
+    | "success-tertiary"
     | "inverse";
   /**
    * The size of the button
@@ -181,14 +179,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
               themeName === "classic" && color === "secondary",
             [styles.secondaryDestructiveBorder]:
               themeName === "classic" && color === "destructive-secondary",
-            [styles.cambioSecondaryBorder]:
-              themeName === "cambio" && color === "secondary",
-            [styles.cambioSecondaryDestructiveBorder]:
-              themeName === "cambio" &&
-              (color === "destructive-secondary" ||
-                color === "destructive-tertiary"),
-            [styles.cambioSecondarySuccessBorder]:
-              themeName === "cambio" && color === "success-secondary",
           },
         )}
       >

diff --git a/packages/syntax-core/src/Button/constants/color.ts b/packages/syntax-core/src/Button/constants/color.ts
@@ -3,14 +3,14 @@ export function classicColor(
     | "primary"
     | "secondary"
     | "tertiary"
-    | "quaternary"
     | "destructive-primary"
     | "destructive-secondary"
     | "destructive-tertiary"
     | "branded"
     | "success"
     | "success-primary"
     | "success-secondary"
+    | "success-tertiary"
     | "inverse",
 ):
   | "primary"
@@ -21,11 +21,13 @@ export function classicColor(
   | "branded"
   | "success"
   | "inverse" {
-  if (color === "quaternary") {
-    return "inverse";
-  } else if (color === "destructive-tertiary") {
+  if (color === "destructive-tertiary") {
     return "destructive-secondary";
-  } else if (color === "success-primary" || color === "success-secondary") {
+  } else if (
+    color === "success-primary" ||
+    color === "success-secondary" ||
+    color === "success-tertiary"
+  ) {
     return "success";
   }
   return color;
@@ -36,31 +38,32 @@ export function cambioColor(
     | "primary"
     | "secondary"
     | "tertiary"
-    | "quaternary"
     | "destructive-primary"
     | "destructive-secondary"
     | "destructive-tertiary"
     | "branded"
     | "success"
     | "success-primary"
     | "success-secondary"
+    | "success-tertiary"
     | "inverse",
 ):
   | "primary"
   | "secondary"
   | "tertiary"
-  | "quaternary"
   | "destructive-primary"
   | "destructive-secondary"
+  | "destructive-tertiary"
   | "branded"
   | "success-primary"
-  | "success-secondary" {
+  | "success-secondary"
+  | "success-tertiary" {
   if (color === "success") {
     return "success-primary";
-  } else if (color === "destructive-tertiary") {
-    return "destructive-secondary";
-  } else if (color === "inverse") {
-    return "quaternary";
+  }
+  // TODO - validate with AJ
+  else if (color === "inverse") {
+    return "secondary";
   }
   return color;
 }
diff --git a/packages/syntax-core/src/IconButton/IconButton.stories.tsx b/packages/syntax-core/src/IconButton/IconButton.stories.tsx
@@ -18,20 +18,20 @@ export default {
         "primary",
         "secondary",
         "tertiary",
-        "quaternary",
         "destructive-primary",
         "destructive-secondary",
         "destructive-tertiary",
         "success",
         "success-primary",
         "success-secondary",
+        "success-tertiary",
         "branded",
         "inverse",
       ],
       control: { type: "radio" },
     },
     size: {
-      options: ["sm", "md", "lg", "xl"],
+      options: ["sm", "md", "lg"],
       control: { type: "radio" },
     },
     disabled: {

diff --git a/packages/syntax-core/src/IconButton/IconButton.tsx b/packages/syntax-core/src/IconButton/IconButton.tsx
@@ -33,13 +33,12 @@ type IconButtonProps = {
    * The color of the button
    *
    * Classic only:
+   * * `destructive-tertiary`
    * * `success-primary`
    * * `success-secondary`
    * * `inverse`
    *
    * Cambio only:
-   * * `quaternary`
-   * * `destructive-tertiary`
    * * `success-primary`
    * * `success-secondary`
    *
@@ -49,7 +48,6 @@ type IconButtonProps = {
     | "primary"
     | "secondary"
     | "tertiary"
-    | "quaternary"
     | "destructive-primary"
     | "destructive-secondary"
     | "destructive-tertiary"
@@ -150,24 +148,10 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
               themeName === "classic" && color === "secondary",
             [buttonStyles.secondaryDestructiveBorder]:
               themeName === "classic" && color === "destructive-secondary",
-            [buttonStyles.cambioSecondaryBorder]:
-              themeName === "cambio" && color === "secondary",
-            [buttonStyles.cambioSecondaryDestructiveBorder]:
-              themeName === "cambio" &&
-              (color === "destructive-secondary" ||
-                color === "destructive-tertiary"),
-            [buttonStyles.cambioSecondarySuccessBorder]:
-              themeName === "cambio" && color === "success-secondary",
             [styles.iconButtonNoBorder]:
               (themeName === "classic" &&
                 !["secondary", "destructive-secondary"].includes(color)) ||
-              (themeName === "cambio" &&
-                ![
-                  "secondary",
-                  "destructive-secondary",
-                  "destructive-tertiary",
-                  "success-secondary",
-                ].includes(color)),
+              themeName === "cambio",
           },
         )}
         ref={ref}

diff --git a/packages/syntax-core/src/LinkButton/LinkButton.stories.tsx b/packages/syntax-core/src/LinkButton/LinkButton.stories.tsx
@@ -40,20 +40,20 @@ export default {
         "primary",
         "secondary",
         "tertiary",
-        "quaternary",
         "destructive-primary",
         "destructive-secondary",
         "destructive-tertiary",
         "success",
         "success-primary",
         "success-secondary",
+        "success-tertiary",
         "branded",
         "inverse",
       ],
       control: { type: "radio" },
     },
     size: {
-      options: ["sm", "md", "lg", "xl"],
+      options: ["sm", "md", "lg"],
       control: { type: "radio" },
     },
     fullWidth: {

diff --git a/packages/syntax-core/src/LinkButton/LinkButton.tsx b/packages/syntax-core/src/LinkButton/LinkButton.tsx
@@ -52,7 +52,6 @@ type LinkButtonProps = {
    * * `inverse`
    *
    * Cambio only:
-   * * `quaternary`
    * * `destructive-tertiary`
    * * `success-primary`
    * * `success-secondary`
@@ -63,7 +62,6 @@ type LinkButtonProps = {
     | "primary"
     | "secondary"
     | "tertiary"
-    | "quaternary"
     | "destructive-primary"
     | "destructive-secondary"
     | "destructive-tertiary"
@@ -166,14 +164,6 @@ const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
               themeName === "classic" && color === "secondary",
             [buttonStyles.secondaryDestructiveBorder]:
               themeName === "classic" && color === "destructive-secondary",
-            [buttonStyles.cambioSecondaryBorder]:
-              themeName === "cambio" && color === "secondary",
-            [buttonStyles.cambioSecondaryDestructiveBorder]:
-              themeName === "cambio" &&
-              (color === "destructive-secondary" ||
-                color === "destructive-tertiary"),
-            [buttonStyles.cambioSecondarySuccessBorder]:
-              themeName === "cambio" && color === "success-secondary",
           },
         )}
         onClick={onClick}

diff --git a/packages/syntax-core/src/colors/backgroundColor.ts b/packages/syntax-core/src/colors/backgroundColor.ts
@@ -30,18 +30,21 @@ export function cambioBackgroundColor(
     case "primary":
       return styles.cambioBlackBackgroundColor;
     case "secondary":
+      return styles.cambioGray370BackgroundColor;
     case "tertiary":
-    case "success-secondary":
-    case "destructive-secondary":
+    case "success-tertiary":
+    case "destructive-tertiary":
       return styles.cambioTransparentFullBackgroundColor;
-    case "quaternary":
-      return styles.cambioTransparentGray54BackgroundColor;
-    case "branded":
-      return styles.cambioYellowBackgroundColor;
     case "success-primary":
-      return styles.cambioSuccessBackgroundColor;
+      return styles.cambioSuccess700BackgroundColor;
+    case "success-secondary":
+      return styles.cambioSuccess370BackgroundColor;
     case "destructive-primary":
-      return styles.cambioDestructiveBackgroundColor;
+      return styles.cambioDestructive700BackgroundColor;
+    case "destructive-secondary":
+      return styles.cambioDestructive370BackgroundColor;
+    case "branded":
+      return styles.cambioYellow700BackgroundColor;
     default:
       return styles.cambioBlackBackgroundColor;
   }