Cambio: next round of updates

.changeset/strange-months-thank.md

@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Cambio: add Avatar & AvatarGroup updates

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",

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;
+}

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,14 +124,18 @@ const Avatar = ({
   src: string;
 }): JSX.Element => {
   const avatarGroupContext = useAvatarGroup();
+  const { themeName } = useTheme();
 
   if (avatarGroupContext !== null) {
     return (
       <Box
         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}
           />

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"}

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;

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;
   }