@timmbr/ui 1.4.2 → 1.5.0

package/dist/components/Avatar/Avatar.styles.js

@@ -5,18 +5,18 @@ const avatarRootVariants = cva(
   {
     variants: {
       size: {
-        xs: "size-6 text-[10px]",
-        sm: "size-8 text-xs",
-        md: "size-10 text-[15px]",
-        lg: "size-12 text-base",
-        xl: "size-16 text-xl",
-        "2xl": "size-20 text-2xl"
+        xs: "size-6 text-caption",
+        sm: "size-8 text-body-3",
+        md: "size-10 text-body-2",
+        lg: "size-12 text-body-1",
+        xl: "size-16 text-h5",
+        "2xl": "size-20 text-h4"
       },
       variant: {
-        primary: "bg-primary text-white",
+        primary: "bg-primary text-grey-50",
         secondary: "bg-secondary text-secondary-foreground",
         subtle: "bg-bg-subtle text-foreground",
-        grey: "bg-grey-700 text-white",
+        grey: "bg-grey-700 text-grey-50",
         outline: "bg-background border border-grey-300 dark:border-grey-700 text-foreground"
       }
     },
@@ -31,10 +31,10 @@ const avatarStatusVariants = cva(
   {
     variants: {
       status: {
-        online: "bg-emerald-500",
+        online: "bg-success",
         offline: "bg-grey-400",
-        busy: "bg-rose-500",
-        away: "bg-amber-500"
+        busy: "bg-destructive",
+        away: "bg-warning"
       },
       size: {
         xs: "size-1.5",

package/dist/components/Badge/Badge.styles.js

@@ -5,19 +5,19 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        primary: "bg-primary-300 text-white",
-        brand: "bg-primary text-white",
-        default: "bg-primary text-white",
+        primary: "bg-primary-300 text-grey-50",
+        brand: "bg-primary text-grey-50",
+        default: "bg-primary text-grey-50",
         secondary: "bg-secondary text-secondary-foreground",
         outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground",
         subtle: "bg-bg-subtle text-foreground",
-        success: "bg-emerald-600 text-white",
-        destructive: "bg-destructive text-white"
+        success: "bg-success text-grey-50",
+        destructive: "bg-destructive text-grey-50"
       },
       size: {
-        sm: "px-1.5 py-0.5 text-xs",
-        md: "px-2 py-1 text-[14px]",
-        lg: "px-3 py-1.5 text-base font-medium"
+        sm: "px-1.5 py-0.5 text-body-3",
+        md: "px-2 py-1 text-body-2",
+        lg: "px-3 py-1.5 text-body-1 font-medium"
       }
     },
     defaultVariants: {

package/dist/components/Button/Button.styles.js

@@ -5,19 +5,19 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-white hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm",
-        primary: "bg-primary text-white hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm",
+        default: "bg-primary text-grey-50 hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm",
+        primary: "bg-primary text-grey-50 hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm",
         secondary: "bg-secondary text-secondary-foreground hover:bg-bg-subtle hover:brightness-105 active:bg-secondary-foreground/10 active:brightness-95 shadow-xs hover:shadow-sm",
         outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 hover:border-grey-400 dark:hover:border-grey-600",
         ghost: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800",
-        destructive: "bg-destructive text-white hover:bg-red-700 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm",
+        destructive: "bg-destructive text-grey-50 hover:bg-destructive/90 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm",
         link: "text-primary underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal"
       },
       size: {
-        sm: "h-9 px-3 text-xs",
-        default: "h-11 px-5 text-sm",
-        md: "h-11 px-5 text-sm",
-        lg: "h-[52px] px-6 text-base",
+        sm: "h-9 px-3 text-body-3",
+        default: "h-11 px-5 text-body-2",
+        md: "h-11 px-5 text-body-2",
+        lg: "h-[52px] px-6 text-body-1",
         icon: "h-10 w-10 p-0 shrink-0"
       }
     },

package/dist/components/Card/Card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;8EA2BxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAAoC,CAAC;AACpE,eAAO,MAAM,iBAAiB,oFAAmF,CAAC;AAClH,eAAO,MAAM,uBAAuB,oFAA4C,CAAC;AACjF,eAAO,MAAM,mBAAmB,oFAA6B,CAAC;AAC9D,eAAO,MAAM,kBAAkB,oFAAmG,CAAC;AAEnI,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;8EA2BxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAAoC,CAAC;AACpE,eAAO,MAAM,iBAAiB,oFAAwE,CAAC;AACvG,eAAO,MAAM,uBAAuB,oFAAgD,CAAC;AACrF,eAAO,MAAM,mBAAmB,oFAA6B,CAAC;AAC9D,eAAO,MAAM,kBAAkB,oFAAmG,CAAC;AAEnI,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/Card/Card.styles.js

@@ -5,10 +5,10 @@ const cardVariants = cva(
   {
     variants: {
       variant: {
-        outline: "border border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 shadow-sm",
-        elevated: "border border-transparent bg-white dark:bg-grey-900 shadow-md hover:shadow-lg",
+        outline: "border border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 shadow-sm",
+        elevated: "border border-transparent bg-grey-50 dark:bg-grey-900 shadow-md hover:shadow-lg",
         subtle: "border border-transparent bg-grey-50 dark:bg-grey-950",
-        interactive: "border border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 shadow-sm hover:border-primary hover:shadow-md cursor-pointer"
+        interactive: "border border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 shadow-sm hover:border-primary hover:shadow-md cursor-pointer"
       },
       padding: {
         none: "p-0",
@@ -25,8 +25,8 @@ const cardVariants = cva(
   }
 );
 const cardHeaderVariants = cva("flex flex-col gap-1.5 mb-4");
-const cardTitleVariants = cva("text-lg font-serif font-bold text-foreground leading-tight tracking-tight");
-const cardDescriptionVariants = cva("text-sm text-muted leading-relaxed");
+const cardTitleVariants = cva("text-h6 font-bold text-foreground leading-tight tracking-tight");
+const cardDescriptionVariants = cva("text-body-2 text-muted leading-relaxed");
 const cardContentVariants = cva("flex flex-col gap-4");
 const cardFooterVariants = cva("flex items-center justify-between pt-4 mt-4 border-t border-grey-100 dark:border-grey-800");
 

package/dist/components/Checkbox/Checkbox.js

@@ -39,7 +39,7 @@ const Checkbox = React.forwardRef(
           {
             className: cn(checkboxIndicatorVariants({ size })),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "hidden [[data-state=indeterminate]_&]:block w-2.5 h-0.5 bg-white rounded-full" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden [[data-state=indeterminate]_&]:block w-2.5 h-0.5 bg-grey-50 rounded-full" }),
               /* @__PURE__ */ jsx(Check, { className: "[[data-state=indeterminate]_&]:hidden w-full h-full stroke-[3]" })
             ]
           }
@@ -68,16 +68,16 @@ const Checkbox = React.forwardRef(
                 {
                   htmlFor: id,
                   className: cn(
-                    "text-sm font-medium text-foreground cursor-pointer select-none leading-snug",
+                    "text-body-2 font-medium text-foreground cursor-pointer select-none leading-snug",
                     disabled && "cursor-not-allowed"
                   ),
                   children: label
                 }
               ),
-              description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted leading-normal mt-0.5", children: description })
+              description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted leading-normal mt-0.5", children: description })
             ] })
           ] }),
-          errorMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive font-medium pl-7", children: errorMessage })
+          errorMessage && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-destructive font-medium pl-7", children: errorMessage })
         ]
       }
     );

package/dist/components/Checkbox/Checkbox.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const checkboxVariants = cva(
-  "peer shrink-0 rounded-[2px] border border-grey-300 dark:border-grey-600 bg-white dark:bg-grey-900 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-white data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-white cursor-pointer flex items-center justify-center",
+  "peer shrink-0 rounded-[2px] border border-grey-300 dark:border-grey-600 bg-grey-50 dark:bg-grey-900 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-grey-50 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-grey-50 cursor-pointer flex items-center justify-center",
   {
     variants: {
       size: {

package/dist/components/Chip/Chip.js

@@ -60,7 +60,7 @@ const Chip = React.forwardRef(
               tabIndex: -1,
               onClick: handleRemove,
               "aria-label": "Remove",
-              className: "shrink-0 -mr-1 size-4 rounded-full inline-flex items-center justify-center opacity-70 hover:opacity-100 hover:bg-black/10 dark:hover:bg-white/20 transition-all cursor-pointer",
+              className: "shrink-0 -mr-1 size-4 rounded-full inline-flex items-center justify-center opacity-70 hover:opacity-100 hover:bg-grey-1000/10 dark:hover:bg-grey-50/20 transition-all cursor-pointer",
               children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           )

package/dist/components/Chip/Chip.styles.js

@@ -6,7 +6,7 @@ const chipVariants = cva(
     variants: {
       variant: {
         subtle: "bg-grey-100 dark:bg-grey-800 text-foreground border border-transparent",
-        filled: "bg-primary text-white border border-transparent shadow-xs",
+        filled: "bg-primary text-grey-50 border border-transparent shadow-xs",
         outlined: "bg-transparent border border-grey-300 dark:border-grey-700 text-foreground"
       },
       color: {
@@ -17,16 +17,16 @@ const chipVariants = cva(
         destructive: "bg-destructive/10 text-destructive border-destructive/20"
       },
       size: {
-        sm: "h-6 px-2.5 text-[11px]",
-        default: "h-8 px-3 text-xs",
-        lg: "h-9 px-4 text-sm"
+        sm: "h-6 px-2.5 text-caption-lg",
+        default: "h-8 px-3 text-body-3",
+        lg: "h-9 px-4 text-body-2"
       },
       clickable: {
         true: "cursor-pointer hover:brightness-95 active:scale-95 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
         false: ""
       },
       selected: {
-        true: "bg-primary text-white border-primary shadow-xs",
+        true: "bg-primary text-grey-50 border-primary shadow-xs",
         false: ""
       }
     },

package/dist/components/DataList/DataList.styles.js

@@ -7,9 +7,9 @@ const dataListVariants = cva("font-sans text-foreground", {
       vertical: "flex flex-col"
     },
     size: {
-      sm: "text-xs gap-1.5",
-      default: "text-sm gap-2.5",
-      lg: "text-base gap-3.5"
+      sm: "text-body-3 gap-1.5",
+      default: "text-body-2 gap-2.5",
+      lg: "text-body-1 gap-3.5"
     },
     divided: {
       true: "divide-y divide-grey-200 dark:divide-grey-800",

package/dist/components/Dialog/Dialog.styles.js

@@ -1,25 +1,25 @@
 import { cva } from 'class-variance-authority';
 
 const dialogOverlayVariants = cva(
-  "fixed inset-0 z-50 bg-black/60 backdrop-blur-xs transition-opacity duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+  "fixed inset-0 z-50 bg-grey-1000/60 backdrop-blur-xs transition-opacity duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
 );
 const dialogContentVariants = cva(
-  "relative pointer-events-auto flex flex-col w-full max-w-lg max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)] rounded-xl border border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 shadow-xl font-sans text-foreground overflow-hidden data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
+  "relative pointer-events-auto flex flex-col w-full max-w-lg max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)] rounded-xl border border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 shadow-xl font-sans text-foreground overflow-hidden data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
 );
 const dialogHeaderVariants = cva(
-  "flex flex-col space-y-1.5 text-left p-6 pb-4 border-b border-grey-100 dark:border-grey-800/60 shrink-0 bg-white dark:bg-grey-900 pr-12"
+  "flex flex-col space-y-1.5 text-left p-6 pb-4 border-b border-grey-100 dark:border-grey-800/60 shrink-0 bg-grey-50 dark:bg-grey-900 pr-12"
 );
 const dialogBodyVariants = cva(
   "flex-1 overflow-y-auto p-6 min-h-0"
 );
 const dialogFooterVariants = cva(
-  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 p-6 pt-4 border-t border-grey-100 dark:border-grey-800/60 shrink-0 bg-white dark:bg-grey-900"
+  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 p-6 pt-4 border-t border-grey-100 dark:border-grey-800/60 shrink-0 bg-grey-50 dark:bg-grey-900"
 );
 const dialogTitleVariants = cva(
-  "text-xl font-display font-semibold leading-none tracking-tight text-foreground"
+  "text-h5 font-semibold leading-none tracking-tight text-foreground"
 );
 const dialogDescriptionVariants = cva(
-  "text-sm text-muted-foreground font-sans leading-relaxed"
+  "text-body-2 text-muted-foreground leading-relaxed"
 );
 
 export { dialogBodyVariants, dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogTitleVariants };

package/dist/components/Divider/Divider.js

@@ -41,7 +41,7 @@ const Divider = React.forwardRef(
           "data-slot": "divider",
           "data-testid": "timmbr-divider",
           style,
-          className: cn("flex items-center w-full my-4 gap-3 text-xs font-medium text-grey-500 dark:text-grey-400", className),
+          className: cn("flex items-center w-full my-4 gap-3 text-body-3 font-medium text-grey-500 dark:text-grey-400", className),
           ...props,
           children: [
             /* @__PURE__ */ jsx("div", { className: leftLineClass }),

package/dist/components/Drawer/Drawer.styles.js

@@ -1,10 +1,10 @@
 import { cva } from 'class-variance-authority';
 
 const drawerOverlayVariants = cva(
-  "fixed inset-0 z-50 bg-black/60 backdrop-blur-xs transition-opacity duration-300 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+  "fixed inset-0 z-50 bg-grey-1000/60 backdrop-blur-xs transition-opacity duration-300 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
 );
 const drawerContentVariants = cva(
-  "fixed z-50 gap-4 bg-white dark:bg-grey-900 p-6 shadow-2xl transition ease-in-out duration-300 font-sans text-foreground border-grey-200 dark:border-grey-800",
+  "fixed z-50 gap-4 bg-grey-50 dark:bg-grey-900 p-6 shadow-2xl transition ease-in-out duration-300 font-sans text-foreground border-grey-200 dark:border-grey-800",
   {
     variants: {
       side: {

package/dist/components/Dropdown/Dropdown.js

@@ -98,7 +98,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
     ref,
     "data-slot": "dropdown-label",
     className: cn(
-      "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+      "px-2 py-1.5 text-body-3 font-semibold text-muted-foreground uppercase tracking-wider",
       inset && "pl-8",
       className
     ),
@@ -123,7 +123,7 @@ const DropdownMenuShortcut = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("ml-auto text-xs tracking-widest text-muted-foreground font-mono", className),
+      className: cn("ml-auto text-body-3 tracking-widest text-muted-foreground tabular-nums", className),
       ...props
     }
   );

package/dist/components/Dropdown/Dropdown.styles.js

@@ -1,10 +1,10 @@
 import { cva } from 'class-variance-authority';
 
 const dropdownContentVariants = cva(
-  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-900 p-1 text-foreground shadow-lg font-sans transition-all duration-150 data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out"
+  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 p-1 text-foreground shadow-lg font-sans transition-all duration-150 data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out"
 );
 const dropdownItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:bg-grey-100 dark:focus:bg-grey-800 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  "relative flex cursor-pointer select-none items-center rounded-sm px-2.5 py-1.5 text-body-2 outline-none transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:bg-grey-100 dark:focus:bg-grey-800 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
 );
 
 export { dropdownContentVariants, dropdownItemVariants };

package/dist/components/EmptyState/EmptyState.js

@@ -47,7 +47,7 @@ const EmptyState = React.forwardRef(
           title && /* @__PURE__ */ jsx(
             "h3",
             {
-              className: "text-base font-display font-semibold text-foreground tracking-tight",
+              className: "text-h6 font-semibold text-foreground tracking-tight",
               "data-slot": "empty-state-title",
               children: title
             }
@@ -55,7 +55,7 @@ const EmptyState = React.forwardRef(
           description && /* @__PURE__ */ jsx(
             "p",
             {
-              className: "text-xs text-muted-foreground mt-1.5 max-w-sm leading-relaxed",
+              className: "text-body-3 text-muted-foreground mt-1.5 max-w-sm leading-relaxed",
               "data-slot": "empty-state-description",
               children: description
             }

package/dist/components/EmptyState/EmptyState.styles.js

@@ -26,9 +26,9 @@ const emptyStateIconWrapperVariants = cva(
   {
     variants: {
       size: {
-        sm: "size-10 text-lg",
-        default: "size-14 text-2xl",
-        lg: "size-20 text-3xl"
+        sm: "size-10 text-subtitle-1",
+        default: "size-14 text-h4",
+        lg: "size-20 text-h3"
       }
     },
     defaultVariants: {

package/dist/components/FormField/FormField.js

@@ -39,7 +39,7 @@ const FormField = React.forwardRef(
             {
               id: `${id}-desc`,
               className: cn(
-                "text-xs mt-1 flex items-center gap-1.5",
+                "text-body-3 mt-1 flex items-center gap-1.5",
                 isError ? "text-destructive font-medium" : "text-muted"
               ),
               children: [

package/dist/components/Heading/Heading.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;;;;8EAqC1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"Heading.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,eAAe;;;;;8EAuC1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/Heading/Heading.styles.js

@@ -1,18 +1,20 @@
 import { cva } from 'class-variance-authority';
 
-const headingVariants = cva("transition-colors leading-[1.3] text-foreground", {
+const headingVariants = cva("transition-colors text-foreground", {
   variants: {
     level: {
-      1: "text-[64px]",
-      2: "text-[48px]",
-      3: "text-[32px]",
-      4: "text-[24px] tracking-[-0.02em]",
-      5: "text-[20px]",
-      6: "text-[20px]"
+      1: "text-h1",
+      2: "text-h2",
+      3: "text-h3",
+      4: "text-h4",
+      5: "text-h5",
+      6: "text-h6"
     },
     font: {
-      display: "font-display font-normal",
-      title: "font-title font-bold"
+      // The h* tokens already use the display font.
+      display: "",
+      // Override the token's family ("!" so it wins regardless of CSS order).
+      title: "font-title! font-bold"
     },
     foreground: {
       default: "text-foreground",
@@ -21,7 +23,7 @@ const headingVariants = cva("transition-colors leading-[1.3] text-foreground", {
       primary: "text-primary",
       secondary: "text-secondary-foreground",
       destructive: "text-destructive",
-      white: "text-white",
+      white: "text-grey-50",
       inherit: "text-inherit"
     },
     weight: {

package/dist/components/Icon/Icon.styles.js

@@ -5,11 +5,11 @@ const iconVariants = cva(
   {
     variants: {
       size: {
-        xs: "size-3 text-xs",
-        sm: "size-4 text-sm",
-        md: "size-5 text-base",
-        lg: "size-6 text-lg",
-        xl: "size-8 text-2xl"
+        xs: "size-3 text-body-3",
+        sm: "size-4 text-body-2",
+        md: "size-5 text-body-1",
+        lg: "size-6 text-subtitle-1",
+        xl: "size-8 text-h4"
       },
       foreground: {
         default: "text-foreground",
@@ -18,7 +18,7 @@ const iconVariants = cva(
         primary: "text-primary",
         secondary: "text-secondary-foreground",
         destructive: "text-destructive",
-        white: "text-white",
+        white: "text-grey-50",
         inherit: "text-inherit"
       },
       clickable: {

package/dist/components/ImageUpload/ImageUpload.js

@@ -201,15 +201,15 @@ const ImageUpload = React.forwardRef(
           ...props,
           children: [
             (label || maxFiles || minFiles) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 select-none", children: [
-              label && /* @__PURE__ */ jsxs("label", { className: "text-xs font-semibold text-foreground tracking-wide flex items-center gap-1.5", children: [
+              label && /* @__PURE__ */ jsxs("label", { className: "text-body-3 font-semibold text-foreground tracking-wide flex items-center gap-1.5", children: [
                 /* @__PURE__ */ jsx("span", { children: label }),
-                minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted font-normal", children: [
+                minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted font-normal", children: [
                   "(Min ",
                   minFiles,
                   ")"
                 ] })
               ] }),
-              multiple && /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium text-muted", children: [
+              multiple && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg font-medium text-muted", children: [
                 items.length,
                 maxFiles ? ` / ${maxFiles}` : "",
                 " uploaded"
@@ -284,7 +284,7 @@ const ImageUpload = React.forwardRef(
                     onDragLeave: handleDragLeave,
                     onDrop: handleDrop
                   }
-                ) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-xs text-muted", children: [
+                ) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-body-3 text-muted", children: [
                   "Maximum upload limit reached (",
                   maxFiles,
                   "/",
@@ -334,8 +334,8 @@ const ImageUpload = React.forwardRef(
               "p",
               {
                 className: cn(
-                  "text-xs mt-1 flex items-center gap-1.5 leading-normal",
-                  isError ? "text-destructive font-medium" : minFilesWarning ? "text-amber-600 dark:text-amber-400 font-medium" : "text-muted"
+                  "text-body-3 mt-1 flex items-center gap-1.5 leading-normal",
+                  isError ? "text-destructive font-medium" : minFilesWarning ? "text-warning dark:text-warning font-medium" : "text-muted"
                 ),
                 children: [
                   (isError || minFilesWarning) && /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),

package/dist/components/ImageUpload/subcomponents/ImageUploadDropzone.js

@@ -64,38 +64,38 @@ const ImageUploadDropzone = ({
       ),
       children: isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsx(Spinner, { size: "md" }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: loadingText })
+        /* @__PURE__ */ jsx("span", { className: "text-body-3 font-medium text-foreground", children: loadingText })
       ] }) : size === "compact" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 text-center pointer-events-none", children: [
-        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-grey-50 dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-body-3 font-medium text-foreground", children: [
             /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: hasItems ? "Add more files" : "Click to upload" }),
             " ",
             "or drag & drop"
           ] }),
-          /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted", children: [
             mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `Images & Videos (Max ${maxMb}MB each)` : `PNG, JPG, WEBP (Max ${maxMb}MB each)`,
             maxFiles && ` • Up to ${maxFiles} items`
           ] })
         ] })
       ] }) : aspectRatio === "square" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 text-center pointer-events-none p-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-grey-50 dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-primary underline", children: "Upload" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-primary underline", children: "Upload" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted", children: [
             "Max ",
             maxMb,
             "MB"
           ] })
         ] })
       ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center pointer-events-none", children: [
-        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-xl bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5 text-primary animate-bounce" }) : mediaType === "video" ? /* @__PURE__ */ jsx(FilmIcon, { className: "size-5 text-primary" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-5 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-xl bg-grey-50 dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5 text-primary animate-bounce" }) : mediaType === "video" ? /* @__PURE__ */ jsx(FilmIcon, { className: "size-5 text-primary" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-5 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-body-3 font-medium text-foreground", children: [
             /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: "Click to upload" }),
             " or drag and drop"
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
+          /* @__PURE__ */ jsx("span", { className: "text-caption-lg text-muted", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
         ] })
       ] })
     }

package/dist/components/ImageUpload/subcomponents/ImageUploadModal.js

@@ -42,7 +42,7 @@ const ImageUploadModal = ({
         animate: shouldAnimate ? { opacity: 1 } : void 0,
         exit: shouldAnimate ? { opacity: 0 } : void 0,
         transition: getTransition("fast"),
-        className: "fixed inset-0 z-[100] flex flex-col items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-xs",
+        className: "fixed inset-0 z-[100] flex flex-col items-center justify-center p-4 sm:p-6 bg-grey-1000/60 backdrop-blur-xs",
         onClick: onClose,
         children: /* @__PURE__ */ jsxs(
           motion.div,
@@ -51,14 +51,14 @@ const ImageUploadModal = ({
             animate: shouldAnimate ? { scale: 1, opacity: 1 } : void 0,
             exit: shouldAnimate ? { scale: 0.95, opacity: 0 } : void 0,
             transition: getTransition("spring"),
-            className: "relative max-w-2xl max-h-[85vh] w-full bg-white dark:bg-grey-950 border border-grey-200 dark:border-grey-800 rounded-2xl overflow-hidden shadow-2xl flex flex-col",
+            className: "relative max-w-2xl max-h-[85vh] w-full bg-grey-50 dark:bg-grey-950 border border-grey-200 dark:border-grey-800 rounded-2xl overflow-hidden shadow-2xl flex flex-col",
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-grey-200 dark:border-grey-800 bg-grey-50/80 dark:bg-grey-900/80 backdrop-blur-xs select-none", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground tracking-wide truncate max-w-xs sm:max-w-md", children: activeItem.name || `Media Item #${activeIndex + 1}` }),
-                  activeIndex === 0 && /* @__PURE__ */ jsx("span", { className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/20 text-[10px] font-semibold px-2 py-0.5 rounded-full", children: "Cover" }),
-                  /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-foreground tracking-wide truncate max-w-xs sm:max-w-md", children: activeItem.name || `Media Item #${activeIndex + 1}` }),
+                  activeIndex === 0 && /* @__PURE__ */ jsx("span", { className: "bg-success/10 text-success dark:text-success border border-success/20 text-caption font-semibold px-2 py-0.5 rounded-full", children: "Cover" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted", children: [
                     "(",
                     activeIndex + 1,
                     " of ",
@@ -77,7 +77,7 @@ const ImageUploadModal = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-center p-4 min-h-[260px] max-h-[70vh] bg-grey-100/50 dark:bg-black/50 overflow-hidden", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-center p-4 min-h-[260px] max-h-[70vh] bg-grey-100/50 dark:bg-grey-1000/50 overflow-hidden", children: [
                 isVideoMedia(activeItem) ? /* @__PURE__ */ jsx(
                   "video",
                   {
@@ -104,7 +104,7 @@ const ImageUploadModal = ({
                         e.stopPropagation();
                         onNavigate(activeIndex > 0 ? activeIndex - 1 : items.length - 1);
                       },
-                      className: "absolute left-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-white/90 hover:bg-white dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
+                      className: "absolute left-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-grey-50/90 hover:bg-grey-50 dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
                       title: "Previous (Left Arrow)",
                       children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
                     }
@@ -117,7 +117,7 @@ const ImageUploadModal = ({
                         e.stopPropagation();
                         onNavigate(activeIndex < items.length - 1 ? activeIndex + 1 : 0);
                       },
-                      className: "absolute right-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-white/90 hover:bg-white dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
+                      className: "absolute right-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-grey-50/90 hover:bg-grey-50 dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
                       title: "Next (Right Arrow)",
                       children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
                     }