@timmbr/ui 1.4.2 → 1.5.0

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

@@ -58,16 +58,16 @@ const ImageUploadSinglePreview = ({
             )
           }
         ),
-        isVideo && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 z-10 bg-black/65 backdrop-blur-md text-white text-[10px] font-medium px-2 py-0.5 rounded-full border border-white/20 flex items-center gap-1 shadow-sm pointer-events-none", children: [
+        isVideo && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 z-10 bg-grey-1000/65 backdrop-blur-md text-grey-50 text-caption font-medium px-2 py-0.5 rounded-full border border-grey-50/20 flex items-center gap-1 shadow-sm pointer-events-none", children: [
           /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }),
           /* @__PURE__ */ jsx("span", { children: "Video" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 p-1 backdrop-blur-[2px]", children: aspectRatio === "square" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-grey-1000/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 p-1 backdrop-blur-[2px]", children: aspectRatio === "square" ? /* @__PURE__ */ jsxs(Fragment, { children: [
           enablePreviewModal && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "size-8 rounded-lg bg-black/60 hover:bg-black/85 text-white flex items-center justify-center border border-white/20 transition-all cursor-pointer shadow-xs",
+              className: "size-8 rounded-lg bg-grey-1000/60 hover:bg-grey-1000/85 text-grey-50 flex items-center justify-center border border-grey-50/20 transition-all cursor-pointer shadow-xs",
               onClick: onPreview,
               title: "Preview full size",
               children: /* @__PURE__ */ jsx(Eye, { className: "size-3.5" })
@@ -79,7 +79,7 @@ const ImageUploadSinglePreview = ({
               type: "button",
               disabled: disabled || isUploading,
               onClick: onReplace,
-              className: "size-8 rounded-lg bg-primary hover:bg-primary/90 text-white flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
+              className: "size-8 rounded-lg bg-primary hover:bg-primary/90 text-grey-50 flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
               title: "Replace image",
               children: /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-3.5" })
             }
@@ -90,7 +90,7 @@ const ImageUploadSinglePreview = ({
               type: "button",
               disabled: disabled || isUploading,
               onClick: onRemove,
-              className: "size-8 rounded-lg bg-destructive hover:bg-destructive/90 text-white flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
+              className: "size-8 rounded-lg bg-destructive hover:bg-destructive/90 text-grey-50 flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
               title: "Remove image",
               children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
             }
@@ -102,7 +102,7 @@ const ImageUploadSinglePreview = ({
               type: "button",
               variant: "outline",
               size: "sm",
-              className: "border-white/40 bg-black/40 text-white hover:bg-black/60 hover:text-white backdrop-blur-xs",
+              className: "border-grey-50/40 bg-grey-1000/40 text-grey-50 hover:bg-grey-1000/60 hover:text-grey-50 backdrop-blur-xs",
               onClick: onPreview,
               leftIcon: /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }),
               children: "Preview"
@@ -126,7 +126,7 @@ const ImageUploadSinglePreview = ({
               variant: "outline",
               size: "sm",
               disabled: disabled || isUploading,
-              className: "border-destructive/60 bg-destructive/80 text-white hover:bg-destructive hover:text-white",
+              className: "border-destructive/60 bg-destructive/80 text-grey-50 hover:bg-destructive hover:text-grey-50",
               onClick: onRemove,
               leftIcon: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }),
               children: "Remove"

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

@@ -50,21 +50,21 @@ const ImageUploadThumbnailCard = ({
             className: "w-full h-full object-cover"
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1.5 pointer-events-none", children: index === 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-black/65 backdrop-blur-md text-white text-[10px] font-semibold px-2 py-0.5 rounded-full border border-white/20 shadow-md flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.8)]" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1.5 pointer-events-none", children: index === 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-grey-1000/65 backdrop-blur-md text-grey-50 text-caption font-semibold px-2 py-0.5 rounded-full border border-grey-50/20 shadow-md flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-success shadow-[0_0_6px_rgba(52,211,153,0.8)]" }),
           /* @__PURE__ */ jsx("span", { children: "Cover" })
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-black/55 backdrop-blur-md text-white/90 text-[10px] font-medium px-2 py-0.5 rounded-full border border-white/10 shadow-sm", children: [
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-grey-1000/55 backdrop-blur-md text-grey-50/90 text-caption font-medium px-2 py-0.5 rounded-full border border-grey-50/10 shadow-sm", children: [
           "#",
           index + 1
         ] }) }),
-        isVideo && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 bg-black/65 backdrop-blur-md text-white p-1 rounded-full border border-white/20 shadow-md pointer-events-none", children: /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/55 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 backdrop-blur-[2px] z-20", children: [
+        isVideo && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 bg-grey-1000/65 backdrop-blur-md text-grey-50 p-1 rounded-full border border-grey-50/20 shadow-md pointer-events-none", children: /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-grey-1000/55 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 backdrop-blur-[2px] z-20", children: [
           enablePreviewModal && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: onPreview,
-              className: "size-8 rounded-full bg-white/25 hover:bg-white/40 text-white flex items-center justify-center transition-colors shadow-xs cursor-pointer",
+              className: "size-8 rounded-full bg-grey-50/25 hover:bg-grey-50/40 text-grey-50 flex items-center justify-center transition-colors shadow-xs cursor-pointer",
               title: "Preview full size",
               children: /* @__PURE__ */ jsx(Eye, { className: "size-4" })
             }
@@ -75,7 +75,7 @@ const ImageUploadThumbnailCard = ({
               type: "button",
               disabled,
               onClick: onRemove,
-              className: "size-8 rounded-full bg-destructive/90 hover:bg-destructive text-white flex items-center justify-center transition-colors shadow-xs cursor-pointer",
+              className: "size-8 rounded-full bg-destructive/90 hover:bg-destructive text-grey-50 flex items-center justify-center transition-colors shadow-xs cursor-pointer",
               title: "Remove item",
               children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
             }
@@ -125,9 +125,9 @@ const ImageUploadTaskCard = ({
             className: "w-full h-full object-cover blur-xs scale-105 opacity-60"
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-1.5 p-2 text-center", children: [
-          /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "text-white" }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-white line-clamp-1 max-w-full px-1", children: name })
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-grey-1000/50 flex flex-col items-center justify-center gap-1.5 p-2 text-center", children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "text-grey-50" }),
+          /* @__PURE__ */ jsx("span", { className: "text-caption font-medium text-grey-50 line-clamp-1 max-w-full px-1", children: name })
         ] })
       ]
     },

package/dist/components/Input/Input.js

@@ -84,7 +84,7 @@ const Input = React.forwardRef(
             "label",
             {
               htmlFor: id,
-              className: "text-xs font-semibold text-foreground tracking-wide select-none text-left",
+              className: "text-body-3 font-semibold text-foreground tracking-wide select-none text-left",
               children: label
             }
           ),
@@ -113,7 +113,7 @@ const Input = React.forwardRef(
                       htmlFor: id,
                       className: cn(
                         "absolute pointer-events-none transition-all duration-200 select-none truncate max-w-full z-10",
-                        isFloatingActive ? "-top-2.5 left-0 px-1 bg-white dark:bg-grey-900 text-[11px] font-semibold leading-none rounded-xs" : "top-1/2 -translate-y-1/2 left-0 text-sm text-muted-foreground leading-none"
+                        isFloatingActive ? "-top-2.5 left-0 px-1 bg-grey-50 dark:bg-grey-900 text-caption-lg font-semibold leading-none rounded-xs" : "top-1/2 -translate-y-1/2 left-0 text-body-2 text-muted-foreground leading-none"
                       ),
                       style: {
                         color: isFloatingActive ? isError ? "var(--color-destructive)" : "var(--color-primary)" : void 0
@@ -136,7 +136,7 @@ const Input = React.forwardRef(
                       placeholder: floating && !isFloatingActive ? void 0 : placeholder,
                       className: cn(
                         inputFieldVariants(),
-                        "text-sm leading-normal"
+                        "text-body-2 leading-normal"
                       ),
                       "aria-invalid": isError ? "true" : void 0,
                       "aria-describedby": errorMessage || helperText ? `${id}-desc` : void 0,
@@ -175,7 +175,7 @@ const Input = React.forwardRef(
             {
               id: `${id}-desc`,
               className: cn(
-                "text-xs mt-1 flex items-center gap-1.5 text-left",
+                "text-body-3 mt-1 flex items-center gap-1.5 text-left",
                 isError ? "text-destructive font-medium" : "text-muted-foreground"
               ),
               children: [

package/dist/components/Input/Input.styles.js

@@ -5,15 +5,15 @@ const inputWrapperVariants = cva(
   {
     variants: {
       variant: {
-        outline: "border-grey-300 dark:border-grey-700 bg-white dark:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
-        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus-within:bg-white dark:focus-within:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+        outline: "border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus-within:bg-grey-50 dark:focus-within:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
         subtle: "border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900/50 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
       },
       size: {
-        sm: "h-9 px-2.5 text-xs",
-        default: "h-11 px-3.5 text-sm",
-        md: "h-11 px-3.5 text-sm",
-        lg: "h-[52px] px-4 text-base"
+        sm: "h-9 px-2.5 text-body-3",
+        default: "h-11 px-3.5 text-body-2",
+        md: "h-11 px-3.5 text-body-2",
+        lg: "h-[52px] px-4 text-body-1"
       },
       isError: {
         true: "border-destructive focus-within:border-destructive focus-within:ring-1 focus-within:ring-destructive text-destructive",

package/dist/components/Label/Label.styles.js

@@ -5,10 +5,10 @@ const labelVariants = cva(
   {
     variants: {
       size: {
-        sm: "text-xs",
-        default: "text-sm",
-        md: "text-sm",
-        lg: "text-base"
+        sm: "text-body-3",
+        default: "text-body-2",
+        md: "text-body-2",
+        lg: "text-body-1"
       }
     },
     defaultVariants: {

package/dist/components/LinkButton/LinkButton.styles.js

@@ -7,19 +7,19 @@ const linkButtonVariants = cva(
       variant: {
         default: "text-primary underline-offset-4 hover:underline font-medium p-0 h-auto active:scale-100",
         link: "text-primary underline-offset-4 hover:underline font-medium p-0 h-auto active:scale-100",
-        primary: "bg-primary text-white hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        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 active:scale-[0.98] font-semibold whitespace-nowrap",
         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 active:scale-[0.98] font-semibold whitespace-nowrap",
         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 active:scale-[0.98] font-semibold whitespace-nowrap",
         ghost: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 active:scale-[0.98] font-semibold whitespace-nowrap",
-        destructive: "bg-destructive text-white hover:bg-red-700 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        destructive: "bg-destructive text-grey-50 hover:bg-destructive/90 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
         muted: "text-grey-600 dark:text-grey-400 hover:text-foreground underline-offset-4 hover:underline font-normal p-0 h-auto active:scale-100",
         subtle: "text-foreground/80 hover:text-foreground underline-offset-4 hover:underline font-normal p-0 h-auto active:scale-100"
       },
       size: {
-        sm: "text-xs gap-1",
-        default: "text-sm gap-1.5",
-        md: "text-sm gap-1.5",
-        lg: "text-base gap-2",
+        sm: "text-body-3 gap-1",
+        default: "text-body-2 gap-1.5",
+        md: "text-body-2 gap-1.5",
+        lg: "text-body-1 gap-2",
         icon: "p-1 shrink-0"
       },
       disabled: {

package/dist/components/List/List.js

@@ -59,7 +59,7 @@ const ListItemText = React.forwardRef(
       ...props,
       children: [
         primary && /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground truncate", children: primary }),
-        secondary && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate mt-0.5", children: secondary }),
+        secondary && /* @__PURE__ */ jsx("div", { className: "text-body-3 text-muted-foreground truncate mt-0.5", children: secondary }),
         children
       ]
     }

package/dist/components/List/List.styles.js

@@ -17,9 +17,9 @@ const listItemVariants = cva(
   {
     variants: {
       density: {
-        sm: "py-2 px-3 text-xs",
-        default: "py-3 px-4 text-sm",
-        lg: "py-4 px-5 text-base"
+        sm: "py-2 px-3 text-body-3",
+        default: "py-3 px-4 text-body-2",
+        lg: "py-4 px-5 text-body-1"
       },
       interactive: {
         true: "cursor-pointer hover:bg-grey-100/70 dark:hover:bg-grey-800/60 active:bg-grey-200/50",

package/dist/components/NavFooter/NavFooter.styles.js

@@ -1,12 +1,12 @@
 import { cva } from 'class-variance-authority';
 
 const navFooterRootVariants = cva(
-  "w-full bg-[#1A1714] text-[#F7F1E6] relative border-t border-black/20 transition-colors select-text",
+  "w-full bg-surface-dark text-bg-2 relative border-t border-grey-1000/20 transition-colors select-text",
   {
     variants: {
       tone: {
-        dark: "bg-[#1A1714] text-[#F7F1E6]",
-        light: "bg-[var(--color-bg-2,#F7F1E6)] text-[var(--color-grey-800,#3C3C3C)] border-t border-[#E7DFD3]"
+        dark: "bg-surface-dark text-bg-2",
+        light: "bg-[var(--color-bg-2,#F7F1E6)] text-[var(--color-grey-800,#3C3C3C)] border-t border-border-warm"
       }
     },
     defaultVariants: {
@@ -33,22 +33,22 @@ const navFooterContainerVariants = cva(
   }
 );
 const footerSectionTitleVariants = cva(
-  "font-title text-xs font-semibold text-[#D39375] uppercase tracking-[0.14em] select-none flex items-center justify-between w-full"
+  "font-title! text-body-3 font-semibold text-primary-200 uppercase tracking-[0.14em] select-none flex items-center justify-between w-full"
 );
 const footerNavLinkVariants = cva(
-  "font-sans text-sm text-[#F7F1E6]/85 hover:text-[#D39375] hover:opacity-100 transition-colors inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/60 rounded py-0.5 select-none"
+  "text-body-2 text-bg-2/85 hover:text-primary-200 hover:opacity-100 transition-colors inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/60 rounded py-0.5 select-none"
 );
 const footerSocialButtonVariants = cva(
-  "inline-flex items-center justify-center text-[#D39375] hover:text-[#F7F1E6] hover:bg-white/5 p-2 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/60 active:scale-95"
+  "inline-flex items-center justify-center text-primary-200 hover:text-bg-2 hover:bg-grey-50/5 p-2 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/60 active:scale-95"
 );
 const footerOfficeBlockVariants = cva(
-  "flex flex-col gap-1.5 text-sm text-[#F7F1E6]/85 font-sans leading-relaxed"
+  "flex flex-col gap-1.5 text-body-2 text-bg-2/85 leading-relaxed"
 );
 const footerLegalBarVariants = cva(
-  "border-t border-white/10 py-5 sm:py-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs font-sans text-[#B7AEA2]"
+  "border-t border-grey-50/10 py-5 sm:py-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-body-3 text-sand-muted"
 );
 const footerLegalLinkVariants = cva(
-  "text-xs font-sans text-[#B7AEA2] hover:text-white transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#D39375]/60 rounded px-1"
+  "text-body-3 text-sand-muted hover:text-grey-50 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-200/60 rounded px-1"
 );
 
 export { footerLegalBarVariants, footerLegalLinkVariants, footerNavLinkVariants, footerOfficeBlockVariants, footerSectionTitleVariants, footerSocialButtonVariants, navFooterContainerVariants, navFooterRootVariants };

package/dist/components/NavFooter/subcomponents/FooterBrand.js

@@ -60,7 +60,7 @@ const FooterBrand = ({
       href: resolvedHref,
       "aria-label": alt,
       onClick,
-      className: "inline-flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/50 rounded-md transition-opacity hover:opacity-90",
+      className: "inline-flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/50 rounded-md transition-opacity hover:opacity-90",
       "data-slot": "footer-brand-link",
       children: logoContent
     }
@@ -71,7 +71,7 @@ const FooterBrand = ({
       "aria-label": alt,
       onClick,
       "data-cross-zone": requiresCrossZone ? "true" : void 0,
-      className: "inline-flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/50 rounded-md transition-opacity hover:opacity-90",
+      className: "inline-flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/50 rounded-md transition-opacity hover:opacity-90",
       "data-slot": "footer-brand-link",
       children: logoContent
     }
@@ -86,7 +86,7 @@ const FooterBrand = ({
         description && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "text-sm font-sans text-[#B7AEA2] leading-relaxed select-text",
+            className: "text-body-2 text-sand-muted leading-relaxed select-text",
             "data-slot": "footer-brand-description",
             children: typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line m-0", children: description }) : description
           }

package/dist/components/NavFooter/subcomponents/FooterLegalBar.js

@@ -43,7 +43,7 @@ const FooterLegalBar = ({
       "data-slot": "footer-legal-bar",
       children: [
         /* @__PURE__ */ jsx("div", { className: "select-text", "data-slot": "footer-copyright", children: typeof copyright === "string" ? /* @__PURE__ */ jsx("span", { children: copyright }) : copyright }),
-        extra && /* @__PURE__ */ jsx("div", { className: "text-xs text-[#B7AEA2]", children: extra }),
+        extra && /* @__PURE__ */ jsx("div", { className: "text-body-3 text-sand-muted", children: extra }),
         links && links.length > 0 && /* @__PURE__ */ jsx(
           "ul",
           {

package/dist/components/NavFooter/subcomponents/FooterNavSection.js

@@ -31,7 +31,7 @@ const FooterNavSection = ({
     const linkContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
       /* @__PURE__ */ jsx("span", { children: item.label }),
-      item.badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.2 rounded text-[10px] font-bold bg-[#D39375] text-[#1A1714] uppercase tracking-wider", children: item.badge })
+      item.badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.2 rounded text-caption font-bold bg-primary-200 text-surface-dark uppercase tracking-wider", children: item.badge })
     ] });
     const linkProps = {
       href: resolvedHref,
@@ -59,7 +59,7 @@ const FooterNavSection = ({
     "div",
     {
       className: cn(
-        "flex flex-col border-b border-white/10 md:border-b-0 py-3 md:py-0 transition-colors",
+        "flex flex-col border-b border-grey-50/10 md:border-b-0 py-3 md:py-0 transition-colors",
         sectionClass,
         className
       ),
@@ -77,7 +77,7 @@ const FooterNavSection = ({
               onClick: onToggle,
               className: cn(
                 footerSectionTitleVariants(),
-                "py-2 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/50 rounded"
+                "py-2 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/50 rounded"
               ),
               "data-slot": "footer-section-accordion-trigger",
               children: [
@@ -89,7 +89,7 @@ const FooterNavSection = ({
                     initial: false,
                     animate: shouldAnimate ? isOpen ? "expanded" : "collapsed" : void 0,
                     className: cn(
-                      "shrink-0 text-[#D39375] transition-transform duration-200",
+                      "shrink-0 text-primary-200 transition-transform duration-200",
                       !shouldAnimate && (isOpen ? "rotate-180" : "rotate-0"),
                       motionClass
                     ),

package/dist/components/NavFooter/subcomponents/FooterNewsletter.js

@@ -45,13 +45,13 @@ const FooterNewsletter = ({
       className: cn("flex flex-col gap-3 max-w-[420px]", newsletterClass, className),
       "data-slot": "footer-newsletter",
       children: [
-        title && /* @__PURE__ */ jsx("div", { className: "font-title text-xs font-semibold text-[#D39375] uppercase tracking-[0.14em]", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-sm font-sans text-[#B7AEA2] m-0 leading-relaxed", children: description }),
-        currentStatus === "success" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg bg-[#4E8752]/20 border border-[#4E8752]/40 text-[#4E8752] text-sm font-sans", children: [
+        title && /* @__PURE__ */ jsx("div", { className: "font-title! text-body-3 font-semibold text-primary-200 uppercase tracking-[0.14em]", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-body-2 text-sand-muted m-0 leading-relaxed", children: description }),
+        currentStatus === "success" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg bg-success/20 border border-success/40 text-success text-body-2", children: [
           /* @__PURE__ */ jsx(CheckCircle, { size: 18, className: "shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: successMessage })
         ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-lg bg-black/40 border border-white/15 focus-within:border-[#D39375] focus-within:ring-2 focus-within:ring-[#D39375]/30 transition-all p-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-lg bg-grey-1000/40 border border-grey-50/15 focus-within:border-primary-200 focus-within:ring-2 focus-within:ring-primary-200/30 transition-all p-1", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -64,7 +64,7 @@ const FooterNewsletter = ({
                 placeholder,
                 required: true,
                 disabled: currentStatus === "loading",
-                className: "flex-1 bg-transparent px-3 py-2 text-sm text-[#F7F1E6] placeholder-[#B7AEA2]/60 focus:outline-none disabled:opacity-50",
+                className: "flex-1 bg-transparent px-3 py-2 text-body-2 text-bg-2 placeholder:text-sand-muted/60 focus:outline-none disabled:opacity-50",
                 "data-slot": "footer-newsletter-input"
               }
             ),
@@ -73,7 +73,7 @@ const FooterNewsletter = ({
               {
                 type: "submit",
                 disabled: currentStatus === "loading" || !email,
-                className: "inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-md bg-[#D39375] text-[#1A1714] font-title text-xs font-semibold uppercase tracking-wider hover:bg-[#D39375]/90 transition-all disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0",
+                className: "inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-md bg-primary-200 text-surface-dark font-title! text-body-3 font-semibold uppercase tracking-wider hover:bg-primary-200/90 transition-all disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0",
                 "data-slot": "footer-newsletter-button",
                 children: currentStatus === "loading" ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("span", { children: buttonText }),
@@ -82,7 +82,7 @@ const FooterNewsletter = ({
               }
             )
           ] }),
-          currentStatus === "error" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-red-400", children: [
+          currentStatus === "error" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-body-3 text-destructive", children: [
             /* @__PURE__ */ jsx(AlertCircle, { size: 14, className: "shrink-0" }),
             /* @__PURE__ */ jsx("span", { children: errorMessage })
           ] })

package/dist/components/NavFooter/subcomponents/FooterOffice.js

@@ -21,7 +21,7 @@ const FooterOffice = ({ office, className }) => {
         title && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "font-bold text-sm text-[#F7F1E6]/90 font-sans select-text",
+            className: "font-bold text-body-2 text-bg-2/90 select-text",
             "data-slot": "footer-office-title",
             children: title
           }
@@ -29,17 +29,17 @@ const FooterOffice = ({ office, className }) => {
         address && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(footerOfficeBlockVariants(), "select-text text-sm"),
+            className: cn(footerOfficeBlockVariants(), "select-text text-body-2"),
             "data-slot": "footer-office-address",
             children: typeof address === "string" ? /* @__PURE__ */ jsx("p", { className: "m-0 leading-relaxed whitespace-pre-line", children: address }) : address
           }
         ),
-        (email || phone) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 pt-1 text-xs text-[#B7AEA2] font-sans", children: [
+        (email || phone) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 pt-1 text-body-3 text-sand-muted", children: [
           email && /* @__PURE__ */ jsx(
             "a",
             {
               href: `mailto:${email}`,
-              className: "hover:text-[#D39375] transition-colors inline-block select-text",
+              className: "hover:text-primary-200 transition-colors inline-block select-text",
               "data-slot": "footer-office-email",
               children: email
             }
@@ -48,7 +48,7 @@ const FooterOffice = ({ office, className }) => {
             "a",
             {
               href: `tel:${phone.replace(/\s+/g, "")}`,
-              className: "hover:text-[#D39375] transition-colors inline-block select-text",
+              className: "hover:text-primary-200 transition-colors inline-block select-text",
               "data-slot": "footer-office-phone",
               children: phone
             }

package/dist/components/NavFooter/subcomponents/FooterSocial.js

@@ -14,10 +14,10 @@ const FooterSocial = ({
 }) => {
   if (!links || links.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), "data-slot": "footer-social", children: [
-    title && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-[#D39375] uppercase tracking-[0.14em] font-title", children: title }),
+    title && /* @__PURE__ */ jsx("div", { className: "text-body-3 font-semibold text-primary-200 uppercase tracking-[0.14em] font-title!", children: title }),
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 sm:gap-6 flex-wrap", "data-slot": "footer-social-icons", children: links.map((link) => {
       const platformKey = link.name.toLowerCase();
-      const iconElement = link.icon ?? DefaultSocialIcons[platformKey] ?? /* @__PURE__ */ jsx("span", { className: "text-sm uppercase font-bold", children: link.name.slice(0, 2) });
+      const iconElement = link.icon ?? DefaultSocialIcons[platformKey] ?? /* @__PURE__ */ jsx("span", { className: "text-body-2 uppercase font-bold", children: link.name.slice(0, 2) });
       const defaultAria = `Follow us on ${link.name.charAt(0).toUpperCase() + link.name.slice(1)}`;
       return /* @__PURE__ */ jsx(
         motion.a,
@@ -33,7 +33,7 @@ const FooterSocial = ({
           whileTap: shouldAnimate ? "tap" : void 0,
           className: cn(
             footerSocialButtonVariants(),
-            "relative p-1.5 text-[#D39375] hover:text-[#F7F1E6] transition-colors",
+            "relative p-1.5 text-primary-200 hover:text-bg-2 transition-colors",
             motionClass,
             link.className
           ),

package/dist/components/NavHeader/NavHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavHeader.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EACV,cAAc,EAMf,MAAM,mBAAmB,CAAC;AAa3B,eAAO,MAAM,SAAS,oFAqpBrB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,MAAM,oFAAY,CAAC"}
+{"version":3,"file":"NavHeader.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EACV,cAAc,EAMf,MAAM,mBAAmB,CAAC;AAa3B,eAAO,MAAM,SAAS,oFA6pBrB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,MAAM,oFAAY,CAAC"}

package/dist/components/NavHeader/NavHeader.js

@@ -49,6 +49,8 @@ const NavHeader = React.forwardRef(
     profileAction: shorthandProfileAction,
     wishlistAction: shorthandWishlistAction,
     cartAction: shorthandCartAction,
+    authMode: shorthandAuthMode,
+    onAuthTrigger: shorthandOnAuthTrigger,
     mobileTabSlider: shorthandMobileTabSlider,
     mobileSearchMode: shorthandMobileSearchMode,
     mobileActiveItemId: shorthandMobileActiveItemId,
@@ -95,6 +97,8 @@ const NavHeader = React.forwardRef(
     const profileAction = shorthandProfileAction ?? actionsConfig.profile;
     const wishlistAction = shorthandWishlistAction ?? actionsConfig.wishlist;
     const cartAction = shorthandCartAction ?? actionsConfig.cart;
+    const authMode = shorthandAuthMode ?? actionsConfig.authMode ?? "modal";
+    const onAuthTrigger = shorthandOnAuthTrigger ?? actionsConfig.onAuthTrigger;
     const mobileConfig = React.useMemo(
       () => mobile ?? {},
       [mobile]
@@ -408,6 +412,8 @@ const NavHeader = React.forwardRef(
                         profileAction,
                         wishlistAction,
                         cartAction,
+                        authMode,
+                        onAuthTrigger,
                         rightContent,
                         shouldAnimate,
                         motionClass,
@@ -457,11 +463,11 @@ const NavHeader = React.forwardRef(
                         type: "button",
                         onClick: () => setIsMobileSearchOpen(true),
                         "aria-label": "Open search drawer",
-                        className: "group flex flex-col items-center justify-center min-w-[36px] sm:min-w-[40px] lg:min-w-[52px] text-[#3C3C3C] hover:text-[#C0643A] transition-colors py-1 px-1 lg:px-1.5 cursor-pointer",
+                        className: "group flex flex-col items-center justify-center min-w-[36px] sm:min-w-[40px] lg:min-w-[52px] text-grey-800 hover:text-primary transition-colors py-1 px-1 lg:px-1.5 cursor-pointer",
                         "data-slot": "nav-mobile-search-icon-trigger",
                         children: [
                           /* @__PURE__ */ jsx(Search, { size: 22, className: "shrink-0 stroke-[1.8]" }),
-                          /* @__PURE__ */ jsx("span", { className: "hidden lg:inline font-sans font-bold text-[10px] tracking-[0.0926em] uppercase", children: "SEARCH" })
+                          /* @__PURE__ */ jsx("span", { className: "hidden lg:inline font-bold text-caption tracking-[0.0926em] uppercase", children: "SEARCH" })
                         ]
                       }
                     ),
@@ -475,6 +481,8 @@ const NavHeader = React.forwardRef(
                         profileAction,
                         wishlistAction,
                         cartAction,
+                        authMode,
+                        onAuthTrigger,
                         rightContent,
                         shouldAnimate,
                         motionClass,
@@ -491,7 +499,7 @@ const NavHeader = React.forwardRef(
                 type: "button",
                 onClick: () => setIsMobileSearchOpen(true),
                 "aria-label": "Open search drawer",
-                className: "w-full h-10 px-4 flex items-center gap-2.5 rounded-full bg-white border border-[#E7DFD3] text-left text-sm text-grey-400 hover:border-grey-400 shadow-xs transition-all cursor-pointer select-none",
+                className: "w-full h-10 px-4 flex items-center gap-2.5 rounded-full bg-grey-50 border border-border-warm text-left text-body-2 text-grey-400 hover:border-grey-400 shadow-xs transition-all cursor-pointer select-none",
                 "data-slot": "nav-mobile-search-pill",
                 children: [
                   /* @__PURE__ */ jsx(Search, { size: 18, className: "text-grey-500 shrink-0" }),