From 41bd587e74b76616efb0cabbcd101919fb78f848 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Wed, 6 Mar 2024 11:18:28 -0800
Subject: [PATCH 1/6] Cambio: add Avatar & AvatarGroup updates

---
 .changeset/strange-months-thank.md            |  5 +++
 packages/syntax-core/package.json             |  2 +-
 .../syntax-core/src/Avatar/Avatar.module.css  | 27 ++++++++++++
 packages/syntax-core/src/Avatar/Avatar.tsx    | 42 +++++++++++++++++--
 .../src/AvatarGroup/AvatarGroup.tsx           | 20 ++++++++-
 packages/syntax-core/src/Box/Box.tsx          | 20 ++++++++-
 .../src/ThemeProvider/ThemeProvider.tsx       |  8 ++--
 7 files changed, 112 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/strange-months-thank.md

diff --git a/.changeset/strange-months-thank.md b/.changeset/strange-months-thank.md
new file mode 100644
index 00000000..5054d96b
--- /dev/null
+++ b/.changeset/strange-months-thank.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Cambio: add Avatar & AvatarGroup updates
diff --git a/packages/syntax-core/package.json b/packages/syntax-core/package.json
index 0995db52..74e5b4b0 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": "tsup --watch",
+    "dev": "NODE_OPTIONS=--max_old_space_size=4096 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/Avatar/Avatar.module.css b/packages/syntax-core/src/Avatar/Avatar.module.css
index b4410398..0f46ad2b 100644
--- a/packages/syntax-core/src/Avatar/Avatar.module.css
+++ b/packages/syntax-core/src/Avatar/Avatar.module.css
@@ -8,9 +8,16 @@
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 50%;
+}
+
+.avatarImageClassic {
   border: 2px solid #fff;
 }
 
+.avatarImageOutlineCambio {
+  border: 2px solid var(--color-cambio-gray-100);
+}
+
 .sm {
   width: 24px;
   height: 24px;
@@ -30,3 +37,23 @@
   width: 128px;
   height: 129px;
 }
+
+.smCambio {
+  width: 32px;
+  height: 32px;
+}
+
+.mdCambio {
+  width: 48px;
+  height: 48px;
+}
+
+.lgCambio {
+  width: 64px;
+  height: 64px;
+}
+
+.xlCambio {
+  width: 64px;
+  height: 64px;
+}
diff --git a/packages/syntax-core/src/Avatar/Avatar.tsx b/packages/syntax-core/src/Avatar/Avatar.tsx
index 92aff5b3..63fc36af 100644
--- a/packages/syntax-core/src/Avatar/Avatar.tsx
+++ b/packages/syntax-core/src/Avatar/Avatar.tsx
@@ -3,6 +3,7 @@ import classNames from "classnames";
 import styles from "./Avatar.module.css";
 import Box from "../Box/Box";
 import { useAvatarGroup } from "../AvatarGroup/AvatarGroup";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 const sizeToIconStyles = {
   sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
@@ -11,30 +12,51 @@ const sizeToIconStyles = {
   xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 },
 } as const;
 
-const sizeToMargin = {
+const sizeToMarginClassic = {
   sm: -16,
   md: -28,
   lg: -48,
   xl: -88,
 } as const;
 
+const sizeToMarginCambio = {
+  sm: -12,
+  md: -20,
+  lg: -28,
+  xl: -28,
+} as const;
+
 function AvatarInternal({
   accessibilityLabel,
   icon,
+  outline,
   size = "md",
   src,
 }: {
   accessibilityLabel: string;
   icon?: React.ReactElement;
+  outline?: boolean;
   size?: "sm" | "md" | "lg" | "xl";
   src: string;
 }): ReactElement {
+  const { themeName } = useTheme();
+
   return (
-    <div className={classNames(styles.avatar, styles[size])}>
+    <div
+      className={classNames(
+        styles.avatar,
+        themeName === "classic" ? styles[size] : styles[`${size}Cambio`],
+      )}
+    >
       <img
         alt={accessibilityLabel}
         src={src}
-        className={classNames(styles.avatarImage, styles[size])}
+        className={classNames(
+          styles.avatarImage,
+          themeName === "classic" && styles.avatarImageClassic,
+          themeName === "cambio" && outline && styles.avatarImageOutlineCambio,
+          themeName === "classic" ? styles[size] : styles[`${size}Cambio`],
+        )}
       />
       {icon && (
         <Box display="flex" position="relative" justifyContent="end">
@@ -81,11 +103,18 @@ const Avatar = ({
   /**
    * Size of the avatar.
    *
+   * Classic:
    * * `sm`: 24px
    * * `md`: 40px
    * * `lg`: 72px
    * * `xl`: 128px
    *
+   * Cambio:
+   * * `sm`: 32px
+   * * `md`: 48px
+   * * `lg`: 64px
+   * * `xl`: 64px (deprecated, maps to `lg` in Cambio)
+   *
    * @defaultValue `md`
    */
   size?: "sm" | "md" | "lg" | "xl";
@@ -95,6 +124,7 @@ const Avatar = ({
   src: string;
 }): JSX.Element => {
   const avatarGroupContext = useAvatarGroup();
+  const { themeName } = useTheme();
 
   if (avatarGroupContext !== null) {
     return (
@@ -102,7 +132,10 @@ const Avatar = ({
         position="relative"
         dangerouslySetInlineStyle={{
           __style: {
-            marginInlineEnd: sizeToMargin[avatarGroupContext.size],
+            marginInlineEnd:
+              themeName === "cambio"
+                ? sizeToMarginCambio[avatarGroupContext.size]
+                : sizeToMarginClassic[avatarGroupContext.size],
           },
         }}
       >
@@ -116,6 +149,7 @@ const Avatar = ({
           <AvatarInternal
             accessibilityLabel={accessibilityLabel}
             icon={icon}
+            outline={themeName === "cambio"}
             size={avatarGroupContext.size}
             src={src}
           />
diff --git a/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx b/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx
index 59718b88..1f56955e 100644
--- a/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx
+++ b/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx
@@ -5,8 +5,14 @@ import {
   type ReactElement,
 } from "react";
 import Box from "../Box/Box";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
-type Size = "sm" | "md" | "lg" | "xl";
+type Size =
+  | "sm"
+  | "md"
+  | "lg"
+  /* `xl` is deprecated and mapped to `lg` in Cambio */
+  | "xl";
 type Orientation = "standard" | "reverse";
 
 type AvatarGroupContextType = {
@@ -43,11 +49,18 @@ export default function AvatarGroup({
   /**
    * Size of the avatars in the AvatarGroup.
    *
+   * Classic:
    * * `sm`: 24px
    * * `md`: 40px
    * * `lg`: 72px
    * * `xl`: 128px
    *
+   * Cambio:
+   * * `sm`: 32px
+   * * `md`: 48px
+   * * `lg`: 64px
+   * * `xl`: 64px (deprecated, maps to `lg` in Cambio)
+   *
    * @defaultValue `md`
    */
   size?: Size;
@@ -65,8 +78,11 @@ export default function AvatarGroup({
    */
   children: ReactNode;
 }): ReactElement {
+  const { themeName } = useTheme();
+  const parsedSize = themeName === "cambio" && size === "xl" ? "lg" : size;
+
   return (
-    <AvatarGroupContext.Provider value={{ size, orientation }}>
+    <AvatarGroupContext.Provider value={{ size: parsedSize, orientation }}>
       <Box
         display="flex"
         justifyContent={orientation === "standard" ? "start" : "end"}
diff --git a/packages/syntax-core/src/Box/Box.tsx b/packages/syntax-core/src/Box/Box.tsx
index 61aa26e0..214c1b18 100644
--- a/packages/syntax-core/src/Box/Box.tsx
+++ b/packages/syntax-core/src/Box/Box.tsx
@@ -7,6 +7,7 @@ import type allColors from "../colors/allColors";
 import colorStyles from "../colors/colors.module.css";
 import roundingStyles from "../rounding.module.css";
 import { forwardRef } from "react";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 type AlignItems = "baseline" | "center" | "end" | "start" | "stretch";
 type As =
@@ -353,6 +354,7 @@ type BoxProps = {
   /**
    * Border radius of the box.
    *
+   * Classic:
    * * `none`: 0px
    * * `sm`: 8px
    * * `md`: 12px
@@ -360,6 +362,14 @@ type BoxProps = {
    * * `xl`: 24px
    * * `full`: 999px
    *
+   * Cambio:
+   * * `none`: 0px
+   * * `sm`: 8px
+   * * `md`: 8px (maps to `sm`)
+   * * `lg`: 8px (maps to `sm`)
+   * * `xl`: 8px (maps to `sm`)
+   * * `full`: 999px
+   *
    * @defaultValue "none"
    */
   rounding?: "xl" | "lg" | "md" | "sm" | "full" | "none";
@@ -429,6 +439,7 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
   ref,
 ): ReactElement {
   const { as: BoxElement = "div", children, ...boxProps } = props;
+  const { themeName } = useTheme();
 
   const {
     // Classname
@@ -492,6 +503,11 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
     ...maybePassThroughProps
   } = boxProps;
 
+  const parsedRounding =
+    themeName === "cambio" && rounding && ["md", "lg", "xl"].includes(rounding)
+      ? "sm"
+      : rounding;
+
   const parsedProps = {
     className: classNames(
       styles.box,
@@ -575,7 +591,9 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
       smJustifyContent && styles[`justifyContent${smJustifyContent}Small`],
       lgJustifyContent && styles[`justifyContent${lgJustifyContent}Large`],
       position && position !== "static" && styles[position],
-      rounding && rounding !== "none" && roundingStyles[`rounding${rounding}`],
+      parsedRounding &&
+        parsedRounding !== "none" &&
+        roundingStyles[`rounding${parsedRounding}`],
       overflow && styles[`overflow${overflow}`],
       overflowX && styles[`overflowX${overflowX}`],
       overflowY && styles[`overflowY${overflowY}`],
diff --git a/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx b/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
index 601dcf98..1fb8f42e 100644
--- a/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
+++ b/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
@@ -15,10 +15,10 @@ ThemeContext.displayName = "ThemeContext";
 const classicToCambioKeyLookup = {
   "color-base-black": "color-cambio-black",
   "color-base-destructive-100": "color-cambio-destructive-100",
-  "color-base-destructive-200": undefined, // Deprecated - to be deleted
+  "color-base-destructive-200": "color-cambio-destructive-300",
   "color-base-destructive-300": "color-cambio-destructive-300",
   "color-base-destructive-700": "color-cambio-destructive-700",
-  "color-base-destructive-800": undefined, // Deprecated - to be deleted
+  "color-base-destructive-800": "color-cambio-destructive-900",
   "color-base-destructive-900": "color-cambio-destructive-900",
   "color-base-gray-10": "color-cambio-gray-370",
   "color-base-gray-30": "color-cambio-gray-370",
@@ -43,10 +43,10 @@ const classicToCambioKeyLookup = {
   "color-base-primary-800": "color-cambio-gray-800",
   "color-base-primary-900": "color-cambio-gray-900",
   "color-base-success-100": "color-cambio-success-100",
-  "color-base-success-200": undefined, // Deprecated - to be deleted
+  "color-base-success-200": "color-cambio-success-300",
   "color-base-success-300": "color-cambio-success-300",
   "color-base-success-700": "color-cambio-success-700",
-  "color-base-success-800": undefined, // Deprecated - to be deleted
+  "color-base-success-800": "color-cambio-success-900",
   "color-base-success-900": "color-cambio-success-900",
   "color-base-purple-100": undefined, // Deprecated - to be deleted
   "color-base-purple-200": undefined, // Deprecated - to be deleted

From be6108ea427b567a38330f229cb54b99af9e9fe6 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Fri, 8 Mar 2024 07:19:35 -0800
Subject: [PATCH 2/6] TEST

---
 packages/syntax-core/src/Box/Box.tsx          | 34 +++++++++++++------
 .../src/ButtonGroup/ButtonGroup.module.css    | 12 +++++++
 .../src/ButtonGroup/ButtonGroup.tsx           | 28 ++++++++++++---
 packages/syntax-core/src/Card/Card.tsx        | 22 +++++++++---
 packages/syntax-core/src/rounding.module.css  | 13 +++++++
 5 files changed, 89 insertions(+), 20 deletions(-)

diff --git a/packages/syntax-core/src/Box/Box.tsx b/packages/syntax-core/src/Box/Box.tsx
index 214c1b18..7268e46f 100644
--- a/packages/syntax-core/src/Box/Box.tsx
+++ b/packages/syntax-core/src/Box/Box.tsx
@@ -364,10 +364,10 @@ type BoxProps = {
    *
    * Cambio:
    * * `none`: 0px
-   * * `sm`: 8px
-   * * `md`: 8px (maps to `sm`)
-   * * `lg`: 8px (maps to `sm`)
-   * * `xl`: 8px (maps to `sm`)
+   * * `sm`: 4px
+   * * `md`: 8px
+   * * `lg`: 8px (maps to `md`)
+   * * `xl`: 8px (maps to `md`)
    * * `full`: 999px
    *
    * @defaultValue "none"
@@ -427,6 +427,15 @@ type BoxProps = {
   width?: Dimension;
 };
 
+function roundingCambio(
+  rounding: "sm" | "md" | "lg" | "xl" | "full",
+): "sm" | "md" | "full" {
+  if (rounding === "lg" || rounding === "xl") {
+    return "md";
+  }
+  return rounding;
+}
+
 /**
  * [Box](https://cambly-syntax.vercel.app/?path=/docs/components-box--docs) is primitive design component and is used by lots of other components. It keeps details like spacing, borders and colors consistent across all of Syntax.
  *
@@ -503,10 +512,14 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
     ...maybePassThroughProps
   } = boxProps;
 
-  const parsedRounding =
-    themeName === "cambio" && rounding && ["md", "lg", "xl"].includes(rounding)
-      ? "sm"
-      : rounding;
+  const classicRoundingStyle =
+    themeName === "classic" && rounding && rounding !== "none"
+      ? roundingStyles[`rounding${rounding}`]
+      : undefined;
+  const cambioRoundingStyles =
+    themeName === "cambio" && rounding && rounding !== "none"
+      ? roundingStyles[`rounding${roundingCambio(rounding)}`]
+      : undefined;
 
   const parsedProps = {
     className: classNames(
@@ -591,9 +604,8 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
       smJustifyContent && styles[`justifyContent${smJustifyContent}Small`],
       lgJustifyContent && styles[`justifyContent${lgJustifyContent}Large`],
       position && position !== "static" && styles[position],
-      parsedRounding &&
-        parsedRounding !== "none" &&
-        roundingStyles[`rounding${parsedRounding}`],
+      classicRoundingStyle,
+      cambioRoundingStyles,
       overflow && styles[`overflow${overflow}`],
       overflowX && styles[`overflowX${overflowX}`],
       overflowY && styles[`overflowY${overflowY}`],
diff --git a/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css b/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css
index 69040199..641e6536 100644
--- a/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css
+++ b/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css
@@ -21,3 +21,15 @@
 .largeGap {
   gap: 16px;
 }
+
+.smallGapCambio {
+  gap: 4px;
+}
+
+.mediumGapCambio {
+  gap: 8px;
+}
+
+.largeGapCambio {
+  gap: 12px;
+}
diff --git a/packages/syntax-core/src/ButtonGroup/ButtonGroup.tsx b/packages/syntax-core/src/ButtonGroup/ButtonGroup.tsx
index f0792bbb..e8d9ac04 100644
--- a/packages/syntax-core/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/syntax-core/src/ButtonGroup/ButtonGroup.tsx
@@ -2,13 +2,20 @@ import { type ReactElement, type ReactNode } from "react";
 import styles from "./ButtonGroup.module.css";
 import { type Size } from "../constants";
 import classNames from "classnames";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
-const gap = {
+const gapClassic = {
   sm: styles.smallGap,
   md: styles.mediumGap,
   lg: styles.largeGap,
 } as const;
 
+const gapCambio = {
+  sm: styles.smallGapCambio,
+  md: styles.mediumGapCambio,
+  lg: styles.largeGapCambio,
+} as const;
+
 /**
  * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.
  */
@@ -26,10 +33,16 @@ const ButtonGroup = ({
   /**
    * The size of the button group defines the spacing between each button
    *
+   * Classic:
    * * `sm`: 8px
    * * `md`: 12px
    * * `lg`: 16px
    *
+   * Cambio:
+   * * `sm`: 4px
+   * * `md`: 8px
+   * * `lg`: 12px
+   *
    * @defaultValue "md"
    */
   size?: (typeof Size)[number];
@@ -38,10 +51,15 @@ const ButtonGroup = ({
    */
   children?: ReactNode;
 }): ReactElement => {
-  const classnames = classNames(styles.buttonGroup, gap[size], {
-    [styles.horizontal]: orientation === "horizontal",
-    [styles.vertical]: orientation === "vertical",
-  });
+  const { themeName } = useTheme();
+  const classnames = classNames(
+    styles.buttonGroup,
+    themeName === "classic" ? gapClassic[size] : gapCambio[size],
+    {
+      [styles.horizontal]: orientation === "horizontal",
+      [styles.vertical]: orientation === "vertical",
+    },
+  );
 
   return <div className={classnames}>{children}</div>;
 };
diff --git a/packages/syntax-core/src/Card/Card.tsx b/packages/syntax-core/src/Card/Card.tsx
index e0ed1dee..1c153b2c 100644
--- a/packages/syntax-core/src/Card/Card.tsx
+++ b/packages/syntax-core/src/Card/Card.tsx
@@ -1,4 +1,5 @@
 import Box from "../Box/Box";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 import type allColors from "../colors/allColors";
 
 type CardType = {
@@ -15,6 +16,15 @@ type CardType = {
    * The child components to render within Card.
    */
   children: JSX.Element;
+  /**
+   * The size of the card (Cambio only) which specifies the padding and spacing of the card.
+   *
+   * `compact`: 8px padding
+   * `roomy`: 16px padding
+   *
+   * @defaultValue `roomy`
+   */
+  size?: "compact" | "roomy";
 };
 
 /**
@@ -23,14 +33,18 @@ type CardType = {
 export default function Card({
   backgroundColor = "white",
   children,
+  size,
   "data-testid": dataTestId,
 }: CardType): JSX.Element {
+  const { themeName } = useTheme();
+
+  const cambioPadding = size === "compact" ? 2 : 4;
+
   return (
     <Box
-      rounding="lg"
-      padding={5}
-      smPadding={7}
-      lgPadding={7}
+      rounding={themeName === "classic" ? "lg" : "md"}
+      padding={themeName === "classic" ? 5 : cambioPadding}
+      smPadding={themeName === "classic" ? 7 : undefined}
       width="100%"
       backgroundColor={backgroundColor}
       data-testid={dataTestId}
diff --git a/packages/syntax-core/src/rounding.module.css b/packages/syntax-core/src/rounding.module.css
index 6c0a4da2..9a921e6e 100644
--- a/packages/syntax-core/src/rounding.module.css
+++ b/packages/syntax-core/src/rounding.module.css
@@ -18,3 +18,16 @@
 .roundingfull {
   border-radius: 999px;
 }
+
+/* Cambio */
+.roundingsmCambio {
+  border-radius: 4px;
+}
+
+.roundingmdCambio {
+  border-radius: 8px;
+}
+
+.roundingFullCambio {
+  border-radius: 999px;
+}

From a3d671e5fe283c096fdcad83b755654f09ca2835 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Tue, 12 Mar 2024 07:27:51 -0700
Subject: [PATCH 3/6] TextArea etc updates

---
 .../src/Checkbox/Checkbox.module.css          | 12 +++-
 .../syntax-core/src/Checkbox/Checkbox.tsx     | 43 +++++++++---
 .../src/Divider/Divider.module.css            |  5 +-
 packages/syntax-core/src/Divider/Divider.tsx  | 14 +++-
 .../src/RadioButton/RadioButton.tsx           | 42 +++++++++---
 .../src/TextArea/TextArea.module.css          | 12 ++++
 .../src/TextArea/TextArea.stories.tsx         |  4 ++
 .../syntax-core/src/TextArea/TextArea.tsx     | 36 ++++++++--
 .../src/TextField/TextField.module.css        | 66 ++++++++++++++++++-
 .../syntax-core/src/TextField/TextField.tsx   | 36 ++++++++--
 10 files changed, 236 insertions(+), 34 deletions(-)

diff --git a/packages/syntax-core/src/Checkbox/Checkbox.module.css b/packages/syntax-core/src/Checkbox/Checkbox.module.css
index fe71c4e6..c0dfaf3f 100644
--- a/packages/syntax-core/src/Checkbox/Checkbox.module.css
+++ b/packages/syntax-core/src/Checkbox/Checkbox.module.css
@@ -22,6 +22,10 @@
   box-sizing: border-box;
 }
 
+.cambioCheckbox {
+  border-radius: 4px;
+}
+
 .disabled {
   opacity: 0.5;
 }
@@ -61,11 +65,17 @@
 .sm {
   height: 16px;
   width: 16px;
-  border-radius: 6px;
 }
 
 .md {
   height: 24px;
   width: 24px;
+}
+
+.smBorderRadius {
+  border-radius: 6px;
+}
+
+.mdBorderRadius {
   border-radius: 8px;
 }
diff --git a/packages/syntax-core/src/Checkbox/Checkbox.tsx b/packages/syntax-core/src/Checkbox/Checkbox.tsx
index ca376fa0..33d047c7 100644
--- a/packages/syntax-core/src/Checkbox/Checkbox.tsx
+++ b/packages/syntax-core/src/Checkbox/Checkbox.tsx
@@ -5,6 +5,8 @@ import styles from "./Checkbox.module.css";
 import focusStyles from "../Focus.module.css";
 import Typography from "../Typography/Typography";
 import useIsHydrated from "../useIsHydrated";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
+import colorStyles from "../colors/colors.module.css";
 
 const typographySize = {
   sm: 100,
@@ -68,23 +70,44 @@ const Checkbox = ({
    */
   error?: boolean;
 }): ReactElement => {
+  const { themeName } = useTheme();
   const isHydrated = useIsHydrated();
   const disabled = !isHydrated || disabledProp;
   const [isFocused, setIsFocused] = useState(false);
   const { isFocusVisible } = useFocusVisible();
 
-  const checkboxStyling = classNames(styles.checkbox, styles[size]);
-  const uncheckedStyling = classNames(checkboxStyling, styles.uncheckedBox, {
-    [styles.uncheckedBorder]: !error,
-    [styles.uncheckedErrorBorder]: error,
-    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,
-  });
-  const checkedStyling = classNames(checkboxStyling, styles.checkedBox, {
-    [styles.checkedNonError]: !error,
-    [styles.checkedError]: error,
+  const checkboxStyling = classNames(styles.checkbox, styles[size], {
     [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,
   });
 
+  const classicCheckboxStyling = classNames(
+    checkboxStyling,
+    styles[`${size}BorderRadius`],
+  );
+
+  const cambioCheckboxStyling = classNames(
+    checkboxStyling,
+    styles.cambioCheckbox,
+    error
+      ? colorStyles.cambioDestructive370BackgroundColor
+      : colorStyles.cambioGray370BackgroundColor,
+  );
+
+  const uncheckedStyling =
+    themeName === "classic"
+      ? classNames(classicCheckboxStyling, styles.uncheckedBox, {
+          [styles.uncheckedBorder]: !error,
+          [styles.uncheckedErrorBorder]: error,
+        })
+      : cambioCheckboxStyling;
+  const checkedStyling =
+    themeName === "classic"
+      ? classNames(classicCheckboxStyling, styles.checkedBox, {
+          [styles.checkedNonError]: !error,
+          [styles.checkedError]: error,
+        })
+      : cambioCheckboxStyling;
+
   return (
     <label
       className={classNames(
@@ -99,7 +122,7 @@ const Checkbox = ({
         {checked && (
           <svg aria-hidden="true" viewBox="0 0 24 24" width={iconWidth[size]}>
             <path
-              fill="#fff"
+              fill={themeName === "classic" ? "#fff" : "#050500"}
               d="m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
             ></path>
           </svg>
diff --git a/packages/syntax-core/src/Divider/Divider.module.css b/packages/syntax-core/src/Divider/Divider.module.css
index 7c838731..1ea340b9 100644
--- a/packages/syntax-core/src/Divider/Divider.module.css
+++ b/packages/syntax-core/src/Divider/Divider.module.css
@@ -1,8 +1,11 @@
 .divider {
-  background-color: var(--color-base-gray-10);
   border-radius: 50px;
   border: none;
   flex: 0 0 auto;
   height: 1px;
   margin: 0;
 }
+
+.dividerClassic {
+  background-color: var(--color-base-gray-10);
+}
diff --git a/packages/syntax-core/src/Divider/Divider.tsx b/packages/syntax-core/src/Divider/Divider.tsx
index 9fce4813..054cd25b 100644
--- a/packages/syntax-core/src/Divider/Divider.tsx
+++ b/packages/syntax-core/src/Divider/Divider.tsx
@@ -1,10 +1,22 @@
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 import styles from "./Divider.module.css";
+import classNames from "classnames";
+import colorStyles from "../colors/colors.module.css";
 
 /**
  * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.
  */
 export default function Divider(): React.ReactElement {
-  return <hr className={styles.divider} />;
+  const { themeName } = useTheme();
+  return (
+    <hr
+      className={
+        themeName === "classic"
+          ? classNames(styles.divider, styles.dividerClassic)
+          : classNames(styles.divider, colorStyles.cambioGray370BackgroundColor)
+      }
+    />
+  );
 }
 
 Divider.displayName = "Divider";
diff --git a/packages/syntax-core/src/RadioButton/RadioButton.tsx b/packages/syntax-core/src/RadioButton/RadioButton.tsx
index 8df70228..1d9ceec3 100644
--- a/packages/syntax-core/src/RadioButton/RadioButton.tsx
+++ b/packages/syntax-core/src/RadioButton/RadioButton.tsx
@@ -6,6 +6,9 @@ import focusStyles from "../Focus.module.css";
 import Typography from "../Typography/Typography";
 import useFocusVisible from "../useFocusVisible";
 import useIsHydrated from "../useIsHydrated";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
+import colorStyles from "../colors/colors.module.css";
+import Box from "../Box/Box";
 
 /**
  * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text
@@ -77,18 +80,34 @@ const RadioButton = ({
   /** forces focus ring styling */
   dangerouslyForceFocusStyles?: boolean;
 }): ReactElement => {
+  const { themeName } = useTheme();
   const isHydrated = useIsHydrated();
   const disabled = !isHydrated || disabledProp;
   const [isFocused, setIsFocused] = useState(false);
   const { isFocusVisible } = useFocusVisible();
 
-  const sharedStyles = classnames(styles.background, styles[size], {
+  const classicStyles = classnames(styles.background, styles[size], {
     [styles.errorBorderColor]: error,
     [styles.borderColor]: !error,
     [focusStyles.accessibilityOutlineFocus]:
       (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,
+    [styles.mdCheckedBorder]: checked && size === "md",
+    [styles.smCheckedBorder]: checked && size === "sm",
+    [styles.neutralBorder]: !checked && size === "md",
   });
 
+  const cambioStyles = classnames(
+    styles.background,
+    error
+      ? colorStyles.cambioDestructive370BackgroundColor
+      : colorStyles.cambioGray370BackgroundColor,
+    styles[size],
+    {
+      [focusStyles.accessibilityOutlineFocus]:
+        (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,
+    },
+  );
+
   return (
     <label
       className={classnames(
@@ -101,15 +120,20 @@ const RadioButton = ({
         },
       )}
     >
-      {checked ? (
-        <div
-          className={classnames(sharedStyles, {
-            [styles.mdCheckedBorder]: size === "md",
-            [styles.smCheckedBorder]: size === "sm",
-          })}
+      <div className={themeName === "classic" ? classicStyles : cambioStyles} />
+      {themeName === "cambio" && checked && (
+        <Box
+          backgroundColor="gray900"
+          width={size === "md" ? 12 : 8}
+          height={size === "md" ? 12 : 8}
+          position="absolute"
+          rounding="full"
+          dangerouslySetInlineStyle={{
+            __style: {
+              left: size === "md" ? 6 : 4,
+            },
+          }}
         />
-      ) : (
-        <div className={classnames(sharedStyles, styles.neutralBorder)} />
       )}
       <input
         data-testid={dataTestId}
diff --git a/packages/syntax-core/src/TextArea/TextArea.module.css b/packages/syntax-core/src/TextArea/TextArea.module.css
index 8f50f708..a33062c9 100644
--- a/packages/syntax-core/src/TextArea/TextArea.module.css
+++ b/packages/syntax-core/src/TextArea/TextArea.module.css
@@ -7,12 +7,24 @@
   padding-top: 12px;
 }
 
+.smTextareaCambio {
+  padding: 24px 12px 12px;
+}
+
 .md {
   padding-bottom: 12px;
   padding-top: 12px;
 }
 
+.mdTextareaCambio {
+  padding: 24px 12px 12px;
+}
+
 .lg {
   padding-bottom: 16px;
   padding-top: 16px;
 }
+
+.lgTextareaCambio {
+  padding: 28px 12px 12px;
+}
diff --git a/packages/syntax-core/src/TextArea/TextArea.stories.tsx b/packages/syntax-core/src/TextArea/TextArea.stories.tsx
index 53afbecb..f8f228dd 100644
--- a/packages/syntax-core/src/TextArea/TextArea.stories.tsx
+++ b/packages/syntax-core/src/TextArea/TextArea.stories.tsx
@@ -18,6 +18,10 @@ export default {
     placeholder: {
       control: "text",
     },
+    size: {
+      options: ["sm", "md", "lg"],
+      control: { type: "radio" },
+    },
   },
   tags: ["autodocs"],
 } as Meta<typeof TextArea>;
diff --git a/packages/syntax-core/src/TextArea/TextArea.tsx b/packages/syntax-core/src/TextArea/TextArea.tsx
index e641a672..37c47179 100644
--- a/packages/syntax-core/src/TextArea/TextArea.tsx
+++ b/packages/syntax-core/src/TextArea/TextArea.tsx
@@ -5,6 +5,7 @@ import styles from "./TextArea.module.css";
 import textFieldStyles from "../TextField/TextField.module.css";
 import classNames from "classnames";
 import useIsHydrated from "../useIsHydrated";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 type TextAreaProps = {
   /**
@@ -83,6 +84,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     const isHydrated = useIsHydrated();
     const disabled = !isHydrated || disabledProp;
     const reactId = useId();
+    const { themeName } = useTheme();
     const inputId = id ?? reactId;
 
     return (
@@ -96,23 +98,45 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             opacity: disabled ? 0.5 : 1,
           },
         }}
+        position={themeName === "cambio" ? "relative" : undefined}
       >
-        <label className={textFieldStyles.label} htmlFor={inputId}>
-          <Box paddingX={1}>
+        <label
+          className={classNames(
+            themeName === "classic"
+              ? textFieldStyles.label
+              : textFieldStyles.labelCambio,
+            themeName === "cambio"
+              ? textFieldStyles[`${size}LabelCambio`]
+              : undefined,
+          )}
+          htmlFor={inputId}
+        >
+          <Box paddingX={themeName === "classic" ? 1 : 3} width="100%">
             <Typography size={100} color="gray700">
               {label}
             </Typography>
           </Box>
         </label>
-        <Typography size={200}>
+        <Typography
+          size={
+            themeName === "cambio" && ["sm", "md"].includes(size) ? 100 : 200
+          }
+        >
           <textarea
             data-testid={dataTestId}
             ref={forwardedRef}
             className={classNames(
               textFieldStyles.textfield,
-              textFieldStyles[size],
-              styles.textarea,
-              styles[size],
+              themeName === "classic"
+                ? textFieldStyles.textfieldClassic
+                : textFieldStyles.textfieldCambio,
+              themeName === "classic"
+                ? textFieldStyles[size]
+                : textFieldStyles[`${size}TextfieldCambio`],
+              themeName === "classic" ? styles.textarea : undefined,
+              themeName === "classic"
+                ? styles[size]
+                : styles[`${size}TextareaCambio`],
               {
                 [textFieldStyles.inputError]: errorText,
               },
diff --git a/packages/syntax-core/src/TextField/TextField.module.css b/packages/syntax-core/src/TextField/TextField.module.css
index a31626af..56400162 100644
--- a/packages/syntax-core/src/TextField/TextField.module.css
+++ b/packages/syntax-core/src/TextField/TextField.module.css
@@ -1,6 +1,5 @@
 .textfield {
   appearance: none;
-  border: 1px solid var(--color-base-gray-700);
   box-sizing: border-box;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
     Helvetica, Arial, sans-serif;
@@ -8,6 +7,16 @@
   width: 100%;
 }
 
+.textfieldClassic {
+  border: 1px solid var(--color-base-gray-700);
+}
+
+.textfieldCambio {
+  border: 1px solid var(--color-cambio-gray-370);
+  border-radius: 8px;
+  font-size: 16px;
+}
+
 .textfield:focus {
   outline: none;
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
@@ -21,6 +30,25 @@
   cursor: pointer;
 }
 
+.labelCambio {
+  position: absolute;
+  border-radius: 8px;
+  pointer-events: none;
+  width: 100%;
+}
+
+.smLabelCambio {
+  padding: 6px 0 2px;
+}
+
+.mdLabelCambio {
+  padding: 6px 0 2px;
+}
+
+.lgLabelCambio {
+  padding: 12px 0 4px;
+}
+
 .sm {
   border-radius: 12px;
   font-size: 12px;
@@ -28,10 +56,30 @@
   padding-inline-end: 12px;
 }
 
+.smCambio {
+  padding: 24px 12px 12px;
+}
+
+.mdCambio {
+  padding: 24px 12px 12px;
+}
+
+.lgCambio {
+  padding: 28px 12px 12px;
+}
+
+.smTextfieldCambio {
+  font-size: 14px;
+}
+
 .smHeight {
   height: 32px;
 }
 
+.smHeightCambio {
+  height: 48px;
+}
+
 .md {
   border-radius: 12px;
   font-size: 14px;
@@ -43,6 +91,14 @@
   height: 40px;
 }
 
+.mdHeightCambio {
+  height: 48px;
+}
+
+.mdTextfieldCambio {
+  font-size: 14px;
+}
+
 .lg {
   border-radius: 16px;
   font-size: 16px;
@@ -54,6 +110,14 @@
   height: 48px;
 }
 
+.lgHeightCambio {
+  height: 64px;
+}
+
+.lgTextfieldCambio {
+  font-size: 14px;
+}
+
 .inputError {
   color: var(--color-base-destructive-700);
   border-color: var(--color-base-destructive-700);
diff --git a/packages/syntax-core/src/TextField/TextField.tsx b/packages/syntax-core/src/TextField/TextField.tsx
index 18908332..1dfb2d1e 100644
--- a/packages/syntax-core/src/TextField/TextField.tsx
+++ b/packages/syntax-core/src/TextField/TextField.tsx
@@ -8,6 +8,7 @@ import styles from "./TextField.module.css";
 import Box from "../Box/Box";
 import Typography from "../Typography/Typography";
 import useIsHydrated from "../useIsHydrated";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 /**
  * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.
@@ -89,8 +90,15 @@ export default function TextField({
   const isHydrated = useIsHydrated();
   const disabled = !isHydrated || disabledProp;
   const reactId = useId();
+  const { themeName } = useTheme();
   const inputId = id ?? reactId;
 
+  const cambioFontSizeMap = {
+    sm: 100,
+    md: 100,
+    lg: 100,
+  } as const;
+
   return (
     <Box
       display="flex"
@@ -102,11 +110,21 @@ export default function TextField({
           opacity: disabled ? 0.5 : 1,
         },
       }}
+      position={themeName === "cambio" ? "relative" : undefined}
     >
       {label && (
-        <label className={styles.label} htmlFor={inputId}>
-          <Box paddingX={1}>
-            <Typography size={100} color="gray700">
+        <label
+          className={classNames(
+            themeName === "classic" ? styles.label : styles.labelCambio,
+            themeName === "cambio" ? styles[`${size}LabelCambio`] : undefined,
+          )}
+          htmlFor={inputId}
+        >
+          <Box paddingX={themeName === "classic" ? 1 : 3}>
+            <Typography
+              size={themeName === "classic" ? 100 : cambioFontSizeMap[size]}
+              color="gray700"
+            >
               {label}
             </Typography>
           </Box>
@@ -116,8 +134,16 @@ export default function TextField({
         autoComplete={autoComplete}
         className={classNames(
           styles.textfield,
-          styles[size],
-          styles[`${size}Height`],
+          themeName === "classic"
+            ? styles.textfieldClassic
+            : styles.textfieldCambio,
+          themeName === "classic"
+            ? styles[size]
+            : styles[`${size}TextfieldCambio`],
+          themeName === "cambio" ? styles[`${size}Cambio`] : undefined,
+          themeName === "classic"
+            ? styles[`${size}Height`]
+            : styles[`${size}HeightCambio`],
           {
             [styles.inputError]: errorText,
           },

From 15c0656febb4a527dec593b3abf07d7e5441e2ad Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Tue, 12 Mar 2024 15:10:55 -0700
Subject: [PATCH 4/6] Update typography sizes

---
 packages/syntax-core/src/Typography/Typography.module.css | 2 +-
 packages/syntax-core/src/Typography/Typography.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/syntax-core/src/Typography/Typography.module.css b/packages/syntax-core/src/Typography/Typography.module.css
index 4b5ac8ef..a8263e59 100644
--- a/packages/syntax-core/src/Typography/Typography.module.css
+++ b/packages/syntax-core/src/Typography/Typography.module.css
@@ -58,7 +58,7 @@
 
 /* Sizes - Cambio sizes are responsive */
 .size100Cambio {
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .size200Cambio {
diff --git a/packages/syntax-core/src/Typography/Typography.tsx b/packages/syntax-core/src/Typography/Typography.tsx
index 4cc59bb0..227d89da 100644
--- a/packages/syntax-core/src/Typography/Typography.tsx
+++ b/packages/syntax-core/src/Typography/Typography.tsx
@@ -173,7 +173,7 @@ const Typography = forwardRef<
      * * `800`: 64px
      *
      * Cambio Mobile:
-     * * `100`: 14px
+     * * `100`: 13px
      * * `200`: 16px
      * * `300`: 18px
      * * `400`: 20px

From 9863ce7758418ac0f5c7a9946534780d94853361 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Fri, 15 Mar 2024 08:32:34 -0700
Subject: [PATCH 5/6] Add cambio styles for SelectList, TextField & TextArea

---
 .../src/SelectList/SelectList.module.css      | 36 ++++++++--
 .../src/SelectList/SelectList.stories.tsx     | 12 +++-
 .../syntax-core/src/SelectList/SelectList.tsx | 48 +++++++++----
 .../src/TextArea/TextArea.module.css          | 18 ++---
 .../src/TextArea/TextArea.stories.tsx         |  8 +--
 .../syntax-core/src/TextArea/TextArea.tsx     | 70 ++++++++++---------
 .../src/TextField/TextField.module.css        | 49 +++++--------
 .../src/TextField/TextField.stories.tsx       |  4 +-
 .../syntax-core/src/TextField/TextField.tsx   | 30 ++++----
 .../src/Typography/Typography.module.css      |  8 ++-
 .../syntax-core/src/Typography/Typography.tsx |  9 +--
 11 files changed, 163 insertions(+), 129 deletions(-)

diff --git a/packages/syntax-core/src/SelectList/SelectList.module.css b/packages/syntax-core/src/SelectList/SelectList.module.css
index f3989a1b..e647591a 100644
--- a/packages/syntax-core/src/SelectList/SelectList.module.css
+++ b/packages/syntax-core/src/SelectList/SelectList.module.css
@@ -4,13 +4,23 @@
   gap: 8px;
 }
 
+.selectContainerCambio {
+  position: relative;
+}
+
 .opacityOverlay {
   opacity: 0.5;
 }
 
-.outerTextContainer {
-  padding-inline-start: 4px;
-  padding-inline-end: 4px;
+.labelCambio {
+  left: 1px; /* Adjust to 1px border */
+  right: 1px; /* Adjust to 1px border */
+  position: absolute;
+  border-radius: 8px;
+  pointer-events: none;
+  width: 100%;
+  padding-top: 7px;
+  z-index: 1;
 }
 
 .selectWrapper {
@@ -21,7 +31,6 @@
 .selectBox {
   align-items: center;
   appearance: none;
-  border: 1px solid var(--color-base-gray-700);
   cursor: pointer;
   display: flex;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -30,10 +39,22 @@
   justify-content: space-between;
   margin: 0;
   outline: 0;
-  padding: 0 36px 0 12px;
   width: 100%;
 }
 
+.selectBoxClassic {
+  border: 1px solid var(--color-base-gray-700);
+  padding: 0 36px 0 12px;
+}
+
+.selectBoxCambio {
+  border: 1px solid var(--color-cambio-gray-370);
+  border-radius: 8px;
+  font-size: 14px;
+  height: 48px;
+  padding: 12px 36px 0 12px;
+}
+
 .selectMouseFocusStyling {
   border: 1px solid var(--color-base-primary-700);
   box-shadow: 0 0 0 1px var(--color-base-primary-700);
@@ -84,3 +105,8 @@
   border-color: var(--color-base-destructive-700);
   background-color: var(--color-base-destructive-100);
 }
+
+.selectErrorCambio {
+  color: var(--color-cambio-destructive-900);
+  border-color: var(--color-cambio-destructive-700);
+}
diff --git a/packages/syntax-core/src/SelectList/SelectList.stories.tsx b/packages/syntax-core/src/SelectList/SelectList.stories.tsx
index e4103b7c..51488682 100644
--- a/packages/syntax-core/src/SelectList/SelectList.stories.tsx
+++ b/packages/syntax-core/src/SelectList/SelectList.stories.tsx
@@ -59,7 +59,11 @@ export const Error: StoryObj<typeof SelectList> = {
   },
 };
 
-const SelectListInteractive = (): ReactElement => {
+const SelectListInteractive = ({
+  placeholderText = "",
+}: {
+  placeholderText?: string;
+}): ReactElement => {
   const [selectionValue, setSelectionValue] = useState("");
   const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectionValue(e.target.value);
@@ -69,7 +73,7 @@ const SelectListInteractive = (): ReactElement => {
       label="Label"
       helperText="Helper text"
       selectedValue={selectionValue}
-      placeholderText="Placeholder"
+      placeholderText={placeholderText}
       onChange={onChange}
     >
       <Options />
@@ -80,3 +84,7 @@ const SelectListInteractive = (): ReactElement => {
 export const Interactive: StoryObj<typeof SelectList> = {
   render: () => <SelectListInteractive />,
 };
+
+export const InteractiveWithPlaceholder: StoryObj<typeof SelectList> = {
+  render: () => <SelectListInteractive placeholderText="Placeholder" />,
+};
diff --git a/packages/syntax-core/src/SelectList/SelectList.tsx b/packages/syntax-core/src/SelectList/SelectList.tsx
index 3ba5c81c..1195f0c3 100644
--- a/packages/syntax-core/src/SelectList/SelectList.tsx
+++ b/packages/syntax-core/src/SelectList/SelectList.tsx
@@ -4,6 +4,7 @@ import React, {
   useId,
   useState,
 } from "react";
+import Box from "../Box/Box";
 import classNames from "classnames";
 import {
   ColorBaseDestructive700,
@@ -15,6 +16,7 @@ import focusStyles from "../Focus.module.css";
 import SelectOption from "./SelectOption";
 import useFocusVisible from "../useFocusVisible";
 import useIsHydrated from "../useIsHydrated";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 const iconSize = {
   sm: 20,
@@ -98,6 +100,7 @@ export default function SelectList({
   const reactId = useId();
   const isHydrated = useIsHydrated();
   const disabled = !isHydrated || disabledProp;
+  const { themeName } = useTheme();
   const selectId = id ?? reactId;
   const { isFocusVisible } = useFocusVisible();
   const [isFocused, setIsFocused] = useState(false);
@@ -106,13 +109,19 @@ export default function SelectList({
     <div
       className={classNames(styles.selectContainer, {
         [styles.opacityOverlay]: disabled,
+        [styles.selectContainerCambio]: themeName === "cambio",
       })}
     >
       {label && (
-        <label htmlFor={selectId} className={styles.outerTextContainer}>
-          <Typography size={100} color="gray700">
-            {label}
-          </Typography>
+        <label
+          htmlFor={selectId}
+          className={classNames(themeName === "cambio" && styles.labelCambio)}
+        >
+          <Box paddingX={themeName === "classic" ? 1 : 3}>
+            <Typography size={100} color="gray700">
+              {label}
+            </Typography>
+          </Box>
         </label>
       )}
       <div className={styles.selectWrapper}>
@@ -120,14 +129,23 @@ export default function SelectList({
           id={selectId}
           data-testid={dataTestId}
           disabled={disabled}
-          className={classNames(styles.selectBox, styles[size], {
-            [styles.unselected]: !selectedValue && !errorText,
-            [styles.selected]: selectedValue && !errorText,
-            [styles.selectError]: errorText,
-            [focusStyles.accessibilityOutlineFocus]:
-              isFocused && isFocusVisible, // for focus keyboard
-            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse
-          })}
+          className={classNames(
+            styles.selectBox,
+            themeName === "classic"
+              ? styles.selectBoxClassic
+              : styles.selectBoxCambio,
+            themeName === "classic" && styles[size],
+            {
+              [styles.unselected]: !selectedValue && !errorText,
+              [styles.selected]: selectedValue && !errorText,
+              [themeName === "classic"
+                ? styles.selectError
+                : styles.selectErrorCambio]: errorText,
+              [focusStyles.accessibilityOutlineFocus]:
+                isFocused && isFocusVisible, // for focus keyboard
+              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse
+            },
+          )}
           onChange={onChange}
           onClick={onClick}
           value={
@@ -148,7 +166,7 @@ export default function SelectList({
             focusable="false"
             aria-hidden="true"
             viewBox="0 0 24 24"
-            width={iconSize[size]}
+            width={themeName === "classic" ? iconSize[size] : 24}
           >
             <path
               fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}
@@ -158,14 +176,14 @@ export default function SelectList({
         </div>
       </div>
       {(helperText || errorText) && (
-        <div className={styles.outerTextContainer}>
+        <Box paddingX={themeName === "classic" ? 1 : 0}>
           <Typography
             size={100}
             color={errorText ? "destructive-primary" : "gray700"}
           >
             {errorText ? errorText : helperText}
           </Typography>
-        </div>
+        </Box>
       )}
     </div>
   );
diff --git a/packages/syntax-core/src/TextArea/TextArea.module.css b/packages/syntax-core/src/TextArea/TextArea.module.css
index a33062c9..264ea20e 100644
--- a/packages/syntax-core/src/TextArea/TextArea.module.css
+++ b/packages/syntax-core/src/TextArea/TextArea.module.css
@@ -7,24 +7,24 @@
   padding-top: 12px;
 }
 
-.smTextareaCambio {
-  padding: 24px 12px 12px;
-}
-
 .md {
   padding-bottom: 12px;
   padding-top: 12px;
 }
 
-.mdTextareaCambio {
-  padding: 24px 12px 12px;
-}
-
 .lg {
   padding-bottom: 16px;
   padding-top: 16px;
 }
 
-.lgTextareaCambio {
+.textareaCambio {
   padding: 28px 12px 12px;
 }
+
+.fixTextareaHeight {
+  line-height: 0;
+}
+
+.labelCambio {
+  padding: 12px 0 4px;
+}
diff --git a/packages/syntax-core/src/TextArea/TextArea.stories.tsx b/packages/syntax-core/src/TextArea/TextArea.stories.tsx
index f8f228dd..d5e8857a 100644
--- a/packages/syntax-core/src/TextArea/TextArea.stories.tsx
+++ b/packages/syntax-core/src/TextArea/TextArea.stories.tsx
@@ -50,7 +50,7 @@ export const Default: StoryObj<typeof TextArea> = {
   render: (args) => <TextAreaDefault {...args} />,
 };
 
-export const SizeSm: StoryObj<typeof TextArea> = {
+export const SizeSmClassicOnly: StoryObj<typeof TextArea> = {
   render: (args) => <TextAreaDefault size="sm" {...args} />,
 };
 
@@ -58,7 +58,7 @@ export const SizeMd: StoryObj<typeof TextArea> = {
   render: (args) => <TextAreaDefault size="md" {...args} />,
 };
 
-export const SizeLg: StoryObj<typeof TextArea> = {
+export const SizeLgClassicOnly: StoryObj<typeof TextArea> = {
   render: (args) => <TextAreaDefault size="lg" {...args} />,
 };
 
@@ -69,7 +69,3 @@ export const helperText: StoryObj<typeof TextArea> = {
 export const ErrorText: StoryObj<typeof TextArea> = {
   render: (args) => <TextAreaDefault errorText="This is an error" {...args} />,
 };
-
-export const TypeNumber: StoryObj<typeof TextArea> = {
-  render: (args) => <TextAreaDefault type="number" {...args} />,
-};
diff --git a/packages/syntax-core/src/TextArea/TextArea.tsx b/packages/syntax-core/src/TextArea/TextArea.tsx
index 37c47179..c48063f3 100644
--- a/packages/syntax-core/src/TextArea/TextArea.tsx
+++ b/packages/syntax-core/src/TextArea/TextArea.tsx
@@ -47,6 +47,8 @@ type TextAreaProps = {
   /**
    * Size of the TextArea. Defines the font size and padding.
    *
+   * Cambio only supports `md`
+   *
    * @defaultValue "md"
    */
   size?: "sm" | "md" | "lg";
@@ -105,9 +107,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             themeName === "classic"
               ? textFieldStyles.label
               : textFieldStyles.labelCambio,
-            themeName === "cambio"
-              ? textFieldStyles[`${size}LabelCambio`]
-              : undefined,
+            themeName === "cambio" && styles.labelCambio,
           )}
           htmlFor={inputId}
         >
@@ -117,41 +117,43 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             </Typography>
           </Box>
         </label>
-        <Typography
-          size={
-            themeName === "cambio" && ["sm", "md"].includes(size) ? 100 : 200
-          }
-        >
-          <textarea
-            data-testid={dataTestId}
-            ref={forwardedRef}
+        <Typography size={themeName === "cambio" ? 100 : 200}>
+          <div
             className={classNames(
-              textFieldStyles.textfield,
-              themeName === "classic"
-                ? textFieldStyles.textfieldClassic
-                : textFieldStyles.textfieldCambio,
-              themeName === "classic"
-                ? textFieldStyles[size]
-                : textFieldStyles[`${size}TextfieldCambio`],
-              themeName === "classic" ? styles.textarea : undefined,
-              themeName === "classic"
-                ? styles[size]
-                : styles[`${size}TextareaCambio`],
-              {
-                [textFieldStyles.inputError]: errorText,
-              },
+              themeName === "cambio" && styles.fixTextareaHeight,
             )}
-            id={inputId}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            onChange={onChange}
-            rows={rows}
-            value={value}
-            disabled={disabled}
-          />
+          >
+            <textarea
+              data-testid={dataTestId}
+              ref={forwardedRef}
+              className={classNames(
+                textFieldStyles.textfield,
+                themeName === "classic"
+                  ? textFieldStyles.textfieldClassic
+                  : textFieldStyles.textfieldCambio,
+                themeName === "classic" && textFieldStyles[size],
+                themeName === "classic" && styles[size],
+                themeName === "classic"
+                  ? styles.textarea
+                  : styles.textareaCambio,
+                {
+                  [themeName === "classic"
+                    ? textFieldStyles.inputError
+                    : textFieldStyles.inputErrorCambio]: errorText,
+                },
+              )}
+              id={inputId}
+              placeholder={placeholder}
+              maxLength={maxLength}
+              onChange={onChange}
+              rows={rows}
+              value={value}
+              disabled={disabled}
+            />
+          </div>
         </Typography>
         {(helperText || errorText) && (
-          <Box paddingX={1}>
+          <Box paddingX={themeName === "classic" ? 1 : 0}>
             <Typography
               size={100}
               color={errorText ? "destructive-primary" : "gray700"}
diff --git a/packages/syntax-core/src/TextField/TextField.module.css b/packages/syntax-core/src/TextField/TextField.module.css
index 56400162..16f0e314 100644
--- a/packages/syntax-core/src/TextField/TextField.module.css
+++ b/packages/syntax-core/src/TextField/TextField.module.css
@@ -14,7 +14,7 @@
 .textfieldCambio {
   border: 1px solid var(--color-cambio-gray-370);
   border-radius: 8px;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .textfield:focus {
@@ -31,22 +31,16 @@
 }
 
 .labelCambio {
+  left: 1px; /* Adjust to 1px border */
+  right: 1px; /* Adjust to 1px border */
   position: absolute;
   border-radius: 8px;
   pointer-events: none;
   width: 100%;
 }
 
-.smLabelCambio {
-  padding: 6px 0 2px;
-}
-
-.mdLabelCambio {
-  padding: 6px 0 2px;
-}
-
-.lgLabelCambio {
-  padding: 12px 0 4px;
+.labelCambioTextfield {
+  padding-top: 7px;
 }
 
 .sm {
@@ -68,18 +62,14 @@
   padding: 28px 12px 12px;
 }
 
-.smTextfieldCambio {
-  font-size: 14px;
+.heightCambio {
+  height: 48px;
 }
 
 .smHeight {
   height: 32px;
 }
 
-.smHeightCambio {
-  height: 48px;
-}
-
 .md {
   border-radius: 12px;
   font-size: 14px;
@@ -91,14 +81,6 @@
   height: 40px;
 }
 
-.mdHeightCambio {
-  height: 48px;
-}
-
-.mdTextfieldCambio {
-  font-size: 14px;
-}
-
 .lg {
   border-radius: 16px;
   font-size: 16px;
@@ -110,14 +92,6 @@
   height: 48px;
 }
 
-.lgHeightCambio {
-  height: 64px;
-}
-
-.lgTextfieldCambio {
-  font-size: 14px;
-}
-
 .inputError {
   color: var(--color-base-destructive-700);
   border-color: var(--color-base-destructive-700);
@@ -127,3 +101,12 @@
 .inputError::placeholder {
   color: var(--color-base-destructive-700);
 }
+
+.inputErrorCambio {
+  color: var(--color-cambio-destructive-900);
+  border-color: var(--color-cambio-destructive-700);
+}
+
+.inputErrorCambio::placeholder {
+  color: var(--color-cambio-destructive-900);
+}
diff --git a/packages/syntax-core/src/TextField/TextField.stories.tsx b/packages/syntax-core/src/TextField/TextField.stories.tsx
index 0b383e77..13b37fec 100644
--- a/packages/syntax-core/src/TextField/TextField.stories.tsx
+++ b/packages/syntax-core/src/TextField/TextField.stories.tsx
@@ -81,7 +81,7 @@ export const Default: StoryObj<typeof TextField> = {
   render: (args) => <TextFieldDefault {...args} />,
 };
 
-export const SizeSm: StoryObj<typeof TextField> = {
+export const SizeSmClassicOnly: StoryObj<typeof TextField> = {
   render: (args) => <TextFieldDefault size="sm" {...args} />,
 };
 
@@ -89,7 +89,7 @@ export const SizeMd: StoryObj<typeof TextField> = {
   render: (args) => <TextFieldDefault size="md" {...args} />,
 };
 
-export const SizeLg: StoryObj<typeof TextField> = {
+export const SizeLgClassicOnly: StoryObj<typeof TextField> = {
   render: (args) => <TextFieldDefault size="lg" {...args} />,
 };
 
diff --git a/packages/syntax-core/src/TextField/TextField.tsx b/packages/syntax-core/src/TextField/TextField.tsx
index 1dfb2d1e..469787fd 100644
--- a/packages/syntax-core/src/TextField/TextField.tsx
+++ b/packages/syntax-core/src/TextField/TextField.tsx
@@ -69,10 +69,15 @@ export default function TextField({
   placeholder?: string;
   /**
    * Size of the TextField
+   *
+   * Classic:
    * * `sm`: 32px
    * * `md`: 40px
    * * `lg`: 48px
    *
+   * Cambio:
+   * * `md`: 48px
+   *
    * @defaultValue "md"
    */
   size?: "sm" | "md" | "lg";
@@ -93,12 +98,6 @@ export default function TextField({
   const { themeName } = useTheme();
   const inputId = id ?? reactId;
 
-  const cambioFontSizeMap = {
-    sm: 100,
-    md: 100,
-    lg: 100,
-  } as const;
-
   return (
     <Box
       display="flex"
@@ -116,15 +115,12 @@ export default function TextField({
         <label
           className={classNames(
             themeName === "classic" ? styles.label : styles.labelCambio,
-            themeName === "cambio" ? styles[`${size}LabelCambio`] : undefined,
+            themeName === "cambio" && styles.labelCambioTextfield,
           )}
           htmlFor={inputId}
         >
           <Box paddingX={themeName === "classic" ? 1 : 3}>
-            <Typography
-              size={themeName === "classic" ? 100 : cambioFontSizeMap[size]}
-              color="gray700"
-            >
+            <Typography size={100} color="gray700">
               {label}
             </Typography>
           </Box>
@@ -137,15 +133,15 @@ export default function TextField({
           themeName === "classic"
             ? styles.textfieldClassic
             : styles.textfieldCambio,
-          themeName === "classic"
-            ? styles[size]
-            : styles[`${size}TextfieldCambio`],
+          themeName === "classic" && styles[size],
           themeName === "cambio" ? styles[`${size}Cambio`] : undefined,
           themeName === "classic"
             ? styles[`${size}Height`]
-            : styles[`${size}HeightCambio`],
+            : styles.heightCambio,
           {
-            [styles.inputError]: errorText,
+            [themeName === "classic"
+              ? styles.inputError
+              : styles.inputErrorCambio]: errorText,
           },
         )}
         data-testid={dataTestId}
@@ -157,7 +153,7 @@ export default function TextField({
         value={value}
       />
       {(helperText || errorText) && (
-        <Box paddingX={1}>
+        <Box paddingX={themeName === "classic" ? 1 : 0}>
           <Typography
             size={100}
             color={errorText ? "destructive-primary" : "gray700"}
diff --git a/packages/syntax-core/src/Typography/Typography.module.css b/packages/syntax-core/src/Typography/Typography.module.css
index a8263e59..0bdd1c71 100644
--- a/packages/syntax-core/src/Typography/Typography.module.css
+++ b/packages/syntax-core/src/Typography/Typography.module.css
@@ -58,7 +58,7 @@
 
 /* Sizes - Cambio sizes are responsive */
 .size100Cambio {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .size200Cambio {
@@ -95,7 +95,7 @@
 
 @media (min-width: 480px) {
   .size100Cambio {
-    font-size: 13px;
+    font-size: 14px;
   }
 
   .size200Cambio {
@@ -193,6 +193,10 @@
   font-weight: 590;
 }
 
+.boldCambio {
+  font-weight: 700;
+}
+
 .underline {
   text-decoration: underline;
 }
diff --git a/packages/syntax-core/src/Typography/Typography.tsx b/packages/syntax-core/src/Typography/Typography.tsx
index 227d89da..dda98792 100644
--- a/packages/syntax-core/src/Typography/Typography.tsx
+++ b/packages/syntax-core/src/Typography/Typography.tsx
@@ -81,11 +81,10 @@ function classicWeight(
 
 function cambioWeight(
   weight: "regular" | "interactive" | "medium" | "semiBold" | "bold" | "heavy",
-): "regular" | "medium" | "semiBold" {
+): "regular" | "medium" | "semiBold" | "bold" {
   switch (weight) {
     case "interactive":
       return "medium";
-    case "bold":
     case "heavy":
       return "regular";
     default:
@@ -173,7 +172,7 @@ const Typography = forwardRef<
      * * `800`: 64px
      *
      * Cambio Mobile:
-     * * `100`: 13px
+     * * `100`: 14px
      * * `200`: 16px
      * * `300`: 18px
      * * `400`: 20px
@@ -224,13 +223,15 @@ const Typography = forwardRef<
      * * `regular`: 400
      * * `interactive`: 500 (Classic only)
      * * `semiBold`: 600
-     * * `bold`: 700 (Classic only)
+     * * `bold`: 700
      * * `heavy`: 860 (Classic only)
      *
      * Cambio:
      * * `regular`: 400
      * * `medium`: 510
      * * `semiBold`: 590
+     * * `bold`: 710
+     *
      *
      * @defaultValue "regular"
      */

From a2eb3def79a20070beb4e2f9f86ad636ca5bebf0 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Fri, 15 Mar 2024 14:45:04 -0700
Subject: [PATCH 6/6] Add Badge / Chip / Heading / Modal / Tooltip / Typography

---
 packages/syntax-core/src/Badge/Badge.tsx      | 52 +++++++++++--------
 packages/syntax-core/src/Box/Box.module.css   | 12 +++++
 packages/syntax-core/src/Box/Box.tsx          | 10 +++-
 packages/syntax-core/src/Chip/Chip.module.css | 25 +++++++--
 packages/syntax-core/src/Chip/Chip.tsx        | 31 ++++++++---
 .../src/Heading/Heading.stories.tsx           | 11 ++++
 packages/syntax-core/src/Heading/Heading.tsx  | 25 +++++++--
 .../syntax-core/src/Modal/Modal.module.css    | 24 ++++++++-
 packages/syntax-core/src/Modal/Modal.tsx      | 43 ++++++++++++---
 packages/syntax-core/src/Tooltip/Tooltip.tsx  |  2 +-
 .../src/Typography/Typography.module.css      | 25 +++++----
 .../src/Typography/Typography.stories.tsx     | 18 +++++--
 packages/syntax-core/src/rounding.module.css  |  2 +-
 13 files changed, 219 insertions(+), 61 deletions(-)

diff --git a/packages/syntax-core/src/Badge/Badge.tsx b/packages/syntax-core/src/Badge/Badge.tsx
index 64d65102..a5993b14 100644
--- a/packages/syntax-core/src/Badge/Badge.tsx
+++ b/packages/syntax-core/src/Badge/Badge.tsx
@@ -1,6 +1,7 @@
 import Typography from "../Typography/Typography";
 import Box from "../Box/Box";
 import styles from "./Badge.module.css";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 const BadgeColor = [
   "gray200",
@@ -47,27 +48,34 @@ const Badge = ({
    * @defaultValue "primary700"
    */
   color?: (typeof BadgeColor)[number];
-}): JSX.Element => (
-  <Box
-    display="inlineBlock"
-    paddingX={2}
-    paddingY={1}
-    rounding="full"
-    backgroundColor={color}
-  >
-    <Typography color={textColorForBackgroundColor(color)} size={100}>
-      <Box display="flex" gap={1} alignItems="center" justifyContent="start">
-        {Icon && <Icon className={styles.icon} />}
-        <Typography
-          color={textColorForBackgroundColor(color)}
-          size={100}
-          weight="bold"
-        >
-          {text}
-        </Typography>
-      </Box>
-    </Typography>
-  </Box>
-);
+}): JSX.Element => {
+  const { themeName } = useTheme();
+
+  return (
+    <Box
+      display={themeName === "classic" ? "inlineBlock" : "inlineFlex"}
+      paddingX={themeName === "classic" ? 2 : 3}
+      paddingY={1}
+      rounding={themeName === "classic" ? "full" : "sm"}
+      backgroundColor={color}
+      alignItems="center"
+      justifyContent="center"
+      height={themeName === "cambio" ? 32 : undefined}
+    >
+      <Typography color={textColorForBackgroundColor(color)}>
+        <Box display="flex" gap={1} alignItems="center" justifyContent="start">
+          {Icon && <Icon className={styles.icon} />}
+          <Typography
+            color={textColorForBackgroundColor(color)}
+            size={100}
+            weight={themeName === "classic" ? "bold" : "medium"}
+          >
+            {text}
+          </Typography>
+        </Box>
+      </Typography>
+    </Box>
+  );
+};
 
 export default Badge;
diff --git a/packages/syntax-core/src/Box/Box.module.css b/packages/syntax-core/src/Box/Box.module.css
index 861abf89..f6da4bfe 100644
--- a/packages/syntax-core/src/Box/Box.module.css
+++ b/packages/syntax-core/src/Box/Box.module.css
@@ -119,6 +119,10 @@
   display: inline-block;
 }
 
+.inlineFlex {
+  display: inline-flex;
+}
+
 .none {
   display: none;
 }
@@ -149,6 +153,10 @@
     display: inline-block;
   }
 
+  .inlineFlexSmall {
+    display: inline-flex;
+  }
+
   .noneSmall {
     display: none;
   }
@@ -180,6 +188,10 @@
     display: inline-block;
   }
 
+  .inlineFlexLarge {
+    display: inline-flex;
+  }
+
   .noneLarge {
     display: none;
   }
diff --git a/packages/syntax-core/src/Box/Box.tsx b/packages/syntax-core/src/Box/Box.tsx
index 7268e46f..2a8570c5 100644
--- a/packages/syntax-core/src/Box/Box.tsx
+++ b/packages/syntax-core/src/Box/Box.tsx
@@ -25,7 +25,13 @@ type As =
   | "summary";
 type Dimension = number | string;
 type Direction = "row" | "column";
-type Display = "none" | "flex" | "block" | "inlineBlock" | "visuallyHidden";
+type Display =
+  | "none"
+  | "flex"
+  | "block"
+  | "inlineBlock"
+  | "inlineFlex"
+  | "visuallyHidden";
 type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type JustifyContent =
   | "start"
@@ -518,7 +524,7 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
       : undefined;
   const cambioRoundingStyles =
     themeName === "cambio" && rounding && rounding !== "none"
-      ? roundingStyles[`rounding${roundingCambio(rounding)}`]
+      ? roundingStyles[`rounding${roundingCambio(rounding)}Cambio`]
       : undefined;
 
   const parsedProps = {
diff --git a/packages/syntax-core/src/Chip/Chip.module.css b/packages/syntax-core/src/Chip/Chip.module.css
index bc0fb36a..dd4b2655 100644
--- a/packages/syntax-core/src/Chip/Chip.module.css
+++ b/packages/syntax-core/src/Chip/Chip.module.css
@@ -1,25 +1,44 @@
 .chip {
-  background-color: var(--color-base-gray-200);
-  border: 1px solid var(--color-base-gray-300);
   display: flex;
   align-items: center;
-  border-radius: 1000px;
   justify-content: center;
   text-align: center;
   cursor: pointer;
   box-sizing: border-box;
 }
 
+.chipClassic {
+  border: 1px solid var(--color-base-gray-300);
+  border-radius: 1000px;
+}
+
+.chipCambio {
+  border: none;
+  border-radius: 8px;
+}
+
 .disabled {
   filter: opacity(50%);
   cursor: auto;
 }
 
+.deselectedChip {
+  background-color: var(--color-base-gray-200);
+}
+
 .selectedChip {
   background-color: var(--color-base-primary-800);
   border: 1px solid var(--color-base-primary-800);
 }
 
+.deselectedChipCambio {
+  background-color: var(--color-cambio-gray-370);
+}
+
+.selectedChipCambio {
+  background-color: var(--color-cambio-gray-800);
+}
+
 .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.tsx b/packages/syntax-core/src/Chip/Chip.tsx
index 6722ff8b..4a262011 100644
--- a/packages/syntax-core/src/Chip/Chip.tsx
+++ b/packages/syntax-core/src/Chip/Chip.tsx
@@ -4,6 +4,7 @@ import Typography from "../Typography/Typography";
 import Box from "../Box/Box";
 import styles from "./Chip.module.css";
 import useIsHydrated from "../useIsHydrated";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 type ChipProps = {
   /**
@@ -25,9 +26,13 @@ type ChipProps = {
   /**
    * Size of the chip.
    *
+   * Classic:
    * * `sm`: 32px
    * * `lg`: 48px
    *
+   * Cambio:
+   * * `sm`: 32px
+   *
    * @defaultValue sm
    */
   size?: "sm" | "lg";
@@ -63,14 +68,26 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
     }: ChipProps,
     ref,
   ) => {
+    const { themeName } = useTheme();
+    const transformedSize = themeName === "cambio" ? "sm" : size;
     const isHydrated = useIsHydrated();
     const disabled = !isHydrated || disabledProp;
 
-    const chipStyles = classnames(styles.chip, styles[size], {
-      [styles.selectedChip]: selected,
-      [styles.disabled]: disabled,
-      [styles.forceFocus]: dangerouslyForceFocusStyles,
-    });
+    const chipStyles = classnames(
+      styles.chip,
+      themeName === "classic" ? styles.chipClassic : styles.chipCambio,
+      styles[transformedSize],
+      {
+        [themeName === "classic"
+          ? styles.selectedChip
+          : styles.selectedChipCambio]: selected,
+        [themeName === "classic"
+          ? styles.deselectedChip
+          : styles.deselectedChipCambio]: !selected,
+        [styles.disabled]: disabled,
+        [styles.forceFocus]: dangerouslyForceFocusStyles,
+      },
+    );
     const iconStyles = classnames(styles.icon, {
       [styles.selectedIcon]: selected,
     });
@@ -92,7 +109,9 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
         {Icon && <Icon className={iconStyles} />}
         <Box paddingX={Icon ? 1 : 0}>
           <Typography
-            size={typographySize[size]}
+            size={
+              themeName === "classic" ? typographySize[transformedSize] : 100
+            }
             color={selected ? "white" : "gray900"}
           >
             {text}
diff --git a/packages/syntax-core/src/Heading/Heading.stories.tsx b/packages/syntax-core/src/Heading/Heading.stories.tsx
index 56d701e4..487a1d08 100644
--- a/packages/syntax-core/src/Heading/Heading.stories.tsx
+++ b/packages/syntax-core/src/Heading/Heading.stories.tsx
@@ -10,6 +10,17 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=4003-11352&t=t9iBh7rbKNhWCMrt-0",
     },
   },
+  args: {
+    color: "gray900",
+    fontStyle: "sans-serif",
+    size: 500,
+    align: "start",
+    transform: "none",
+    children: "Default text",
+    underline: false,
+    inline: false,
+    lineClamp: 0,
+  },
   argTypes: {
     align: {
       options: ["start", "center", "end", "forceLeft", "forceRight"],
diff --git a/packages/syntax-core/src/Heading/Heading.tsx b/packages/syntax-core/src/Heading/Heading.tsx
index 101808ca..769756c9 100644
--- a/packages/syntax-core/src/Heading/Heading.tsx
+++ b/packages/syntax-core/src/Heading/Heading.tsx
@@ -2,6 +2,22 @@ import { type ReactElement, type ReactNode } from "react";
 import Typography from "../Typography/Typography";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
 
+function cambioWeight({
+  fontStyle,
+  size,
+}: {
+  fontStyle: "serif" | "sans-serif";
+  size: 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100;
+}): "bold" | "medium" | "regular" {
+  if (fontStyle === "serif" && [400, 500].includes(size)) {
+    return "bold";
+  } else if (fontStyle === "serif") {
+    return "medium";
+  } else {
+    return "regular";
+  }
+}
+
 /**
  * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.
  */
@@ -11,7 +27,7 @@ const Heading = ({
   children,
   color = "gray900",
   "data-testid": dataTestId,
-  fontStyle,
+  fontStyle = "sans-serif",
   lineClamp,
   size = 500,
 }: {
@@ -97,7 +113,6 @@ const Heading = ({
 }): ReactElement => {
   const { themeName } = useTheme();
   const classicWeight = [700, 800].includes(size) ? "heavy" : "bold";
-  const cambioWeight = fontStyle === "serif" ? "medium" : "regular";
 
   return (
     <Typography
@@ -108,7 +123,11 @@ const Heading = ({
       data-testid={dataTestId}
       lineClamp={lineClamp}
       size={size}
-      weight={themeName === "classic" ? classicWeight : cambioWeight}
+      weight={
+        themeName === "classic"
+          ? classicWeight
+          : cambioWeight({ fontStyle, size })
+      }
     >
       {children}
     </Typography>
diff --git a/packages/syntax-core/src/Modal/Modal.module.css b/packages/syntax-core/src/Modal/Modal.module.css
index f8ababbe..a7af2aba 100644
--- a/packages/syntax-core/src/Modal/Modal.module.css
+++ b/packages/syntax-core/src/Modal/Modal.module.css
@@ -1,5 +1,4 @@
 .backdrop {
-  background-color: rgba(0, 0, 0, 0.6);
   position: absolute;
   width: 100%;
   height: 100%;
@@ -9,6 +8,14 @@
   top: 0;
 }
 
+.backdropClassic {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.backdropCambio {
+  background-color: var(--color-cambio-gray-870);
+}
+
 .closeButton {
   background: none;
   border: none;
@@ -24,12 +31,25 @@
   border-radius: 50%;
 }
 
+.closeButtonClassic {
+  height: 40px;
+  width: 40px;
+  top: 12px;
+  right: 12px;
+}
+
+.closeButtonCambio {
+  height: 24px;
+  width: 24px;
+  top: 4px;
+  right: 4px;
+}
+
 .closeButton:focus-visible {
   box-shadow: 0 0 0 4px #000;
   outline: solid 2px #fff;
 }
 
 .closeButtonWithImage {
-  border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.3);
 }
diff --git a/packages/syntax-core/src/Modal/Modal.tsx b/packages/syntax-core/src/Modal/Modal.tsx
index 67e20f51..66dc1fa1 100644
--- a/packages/syntax-core/src/Modal/Modal.tsx
+++ b/packages/syntax-core/src/Modal/Modal.tsx
@@ -8,6 +8,7 @@ import FocusTrap from "./FocusTrap";
 import StopScroll from "./StopScroll";
 import Layer from "./Layer";
 import styles from "./Modal.module.css";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 function XIcon({ color = "#000" }: { color?: string }) {
   return (
@@ -139,12 +140,18 @@ export default function Modal({
    */
   "data-testid"?: string;
 }): ReactElement {
+  const { themeName } = useTheme();
   return (
     <Layer zIndex={zIndex}>
       <StopScroll>
         <FocusTrap>
           <div
-            className={styles.backdrop}
+            className={classnames(
+              styles.backdrop,
+              themeName === "classic"
+                ? styles.backdropClassic
+                : styles.backdropCambio,
+            )}
             role="presentation"
             onClick={(e) => e.target === e.currentTarget && onDismiss()}
             onKeyDown={(e) => e.key === "Escape" && onDismiss()}
@@ -164,20 +171,40 @@ export default function Modal({
                 <button
                   aria-label={accessibilityCloseLabel}
                   type="button"
-                  className={classnames(styles.closeButton, {
-                    [styles.closeButtonWithImage]: !!image,
-                  })}
+                  className={classnames(
+                    styles.closeButton,
+                    themeName === "classic"
+                      ? styles.closeButtonClassic
+                      : styles.closeButtonCambio,
+                    {
+                      [styles.closeButtonWithImage]:
+                        !!image && themeName === "classic",
+                    },
+                  )}
                   onClick={onDismiss}
                 >
-                  <XIcon color={image ? "#fff" : "#000"} />
+                  <XIcon
+                    color={image && themeName === "classic" ? "#fff" : "#000"}
+                  />
                 </button>
               </Box>
               {image && <Box maxHeight={200}>{image}</Box>}
-              <Box display="flex" gap={3} direction="column" padding={9}>
-                <Heading as="h1" size={500}>
+              <Box
+                display="flex"
+                gap={3}
+                direction="column"
+                padding={themeName === "classic" ? 9 : 3}
+              >
+                <Heading
+                  as="h1"
+                  size={themeName === "classic" ? 500 : 400}
+                  fontStyle={themeName === "classic" ? "sans-serif" : "serif"}
+                >
                   {header}
                 </Heading>
-                <Box marginBottom={4}>{children}</Box>
+                <Box marginBottom={themeName === "classic" ? 4 : 0}>
+                  {children}
+                </Box>
                 {footer && (
                   <Box
                     display="flex"
diff --git a/packages/syntax-core/src/Tooltip/Tooltip.tsx b/packages/syntax-core/src/Tooltip/Tooltip.tsx
index 5c1bc46a..b8d5718c 100644
--- a/packages/syntax-core/src/Tooltip/Tooltip.tsx
+++ b/packages/syntax-core/src/Tooltip/Tooltip.tsx
@@ -72,8 +72,8 @@ export const AriaTooltip = forwardRef<
     boxStyles.box,
     colorStyles.gray900Color,
     colorStyles.gray900BackgroundColor,
+    paddingStyles.paddingX2,
     paddingStyles.paddingY2,
-    paddingStyles.paddingX3,
     roundingStyles.roundingsm,
     styles.tooltip,
   ]);
diff --git a/packages/syntax-core/src/Typography/Typography.module.css b/packages/syntax-core/src/Typography/Typography.module.css
index 0bdd1c71..cd092d88 100644
--- a/packages/syntax-core/src/Typography/Typography.module.css
+++ b/packages/syntax-core/src/Typography/Typography.module.css
@@ -3,17 +3,21 @@
 }
 
 @font-face {
-  font-family: GT-Super-Text-Medium;
+  font-family: "GT Super";
   font-style: normal;
-  font-weight: 500;
+  font-weight: 510;
   src: local("GT-Super-Text-Medium"),
-    /* TODO fix CORS issues and change to url("https://static.cambly.com/fonts/GT-Super-Text-Medium.woff2") */
-      url("https://partners.rebelmouse.com/protocol/GT-Super-Text-Medium.woff2")
-      format("woff2");
-
-  /* TODO enable Most performant option - see https://web.dev/articles/font-best-practices */
+    url("https://static.cambly.com/fonts/gt-super-medium.woff2");
+  font-display: optional;
+}
 
-  /* font-display: optional; */
+@font-face {
+  font-family: "GT Super";
+  font-style: normal;
+  font-weight: 700;
+  src: local("GT-Super-Text-Bold"),
+    url("https://static.cambly.com/fonts/gt-super-bold.woff2");
+  font-display: optional;
 }
 
 .sansSerif {
@@ -23,8 +27,9 @@
 }
 
 .serif {
-  font-family: GT-Super-Text-Medium, -apple-system, system-ui,
-    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, serif;
+  font-family: "GT Super", -apple-system, system-ui, BlinkMacSystemFont,
+    "Segoe UI", Roboto, Helvetica, Arial, serif;
+  -webkit-font-smoothing: antialiased;
 }
 
 /* Sizes */
diff --git a/packages/syntax-core/src/Typography/Typography.stories.tsx b/packages/syntax-core/src/Typography/Typography.stories.tsx
index 704a8279..6ea519ec 100644
--- a/packages/syntax-core/src/Typography/Typography.stories.tsx
+++ b/packages/syntax-core/src/Typography/Typography.stories.tsx
@@ -10,11 +10,24 @@ export default {
       url: "https://www.figma.com/file/p7LKna9JMU0JEkcKamzs53/%F0%9F%93%90-Syntax?node-id=4003-11352&t=t9iBh7rbKNhWCMrt-0",
     },
   },
+  args: {
+    color: "gray900",
+    fontStyle: "sans-serif",
+    size: 200,
+    align: "start",
+    as: "div",
+    transform: "none",
+    children: "Default text",
+    underline: false,
+    inline: false,
+    lineClamp: 0,
+    weight: "regular",
+    tooltip: "",
+  },
   argTypes: {
     align: {
       options: ["start", "center", "end", "forceLeft", "forceRight"],
       control: { type: "radio" },
-      defaultValue: "start",
     },
     as: {
       options: ["div", "h1", "h2", "h3", "h4", "h5", "h6"],
@@ -48,14 +61,13 @@ export default {
     },
     size: {
       options: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100],
-      control: { type: "select" },
+      control: { type: "select", defaultValue: 200 },
     },
     tooltip: {
       control: "text",
     },
     transform: {
       options: ["none", "uppercase"],
-      defaultValue: "none",
     },
     underline: {
       control: "boolean",
diff --git a/packages/syntax-core/src/rounding.module.css b/packages/syntax-core/src/rounding.module.css
index 9a921e6e..b58467bc 100644
--- a/packages/syntax-core/src/rounding.module.css
+++ b/packages/syntax-core/src/rounding.module.css
@@ -28,6 +28,6 @@
   border-radius: 8px;
 }
 
-.roundingFullCambio {
+.roundingfullCambio {
   border-radius: 999px;
 }