@sudobility/building_blocks 0.0.201 → 0.0.203

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b, a, S, u } from "./SafeSubscriptionContext-CNuEKeqJ.js";
+import { b, a, S, u } from "./SafeSubscriptionContext-D4q_l1Kw.js";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import i18n from "i18next";
@@ -10,7 +10,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useMemo, useCallback, useEffect } from "react";
 import { TopbarProvider, Topbar, TopbarLeft, TopbarNavigation, TopbarLogo, Logo, TopbarCenter, TopbarRight, TopbarActions, TopbarMobileContent, Footer, FooterCompact, FooterCompactLeft, FooterVersion, FooterCopyright, FooterCompactRight, FooterGrid, FooterLinkSection, FooterLink, FooterBottom, FooterBrand, FooterSocialLinks, LayoutProvider, AspectFitView, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, MasterListItem, MasterDetailLayout, Section } from "@sudobility/components";
 import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, LanguageIcon, ChevronRightIcon, EnvelopeIcon, DocumentTextIcon, CogIcon, HomeIcon } from "@heroicons/react/24/outline";
-import { GRADIENT_CLASSES, textVariants } from "@sudobility/design";
+import { GRADIENT_CLASSES, ui, textVariants, colors, buttonVariant, focusRing } from "@sudobility/design";
 import { cva } from "class-variance-authority";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -447,9 +447,9 @@ const AppTopBarWithWallet = ({
 const breadcrumbContainerVariants = cva("border-b", {
   variants: {
     variant: {
-      default: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
+      default: `${ui.background.surface} ${ui.border.default}`,
       transparent: "bg-transparent border-transparent",
-      subtle: "bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700"
+      subtle: `${ui.background.subtle} ${ui.border.default}`
     }
   },
   defaultVariants: {
@@ -729,7 +729,7 @@ const ShareDropdown = ({
     isOpen && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "absolute right-0 top-10 z-[999999] w-40 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1",
+        className: `absolute right-0 top-10 z-[999999] w-40 ${ui.background.surface} rounded-lg shadow-xl border ${ui.border.default} py-1`,
         role: "menu",
         "aria-label": "Share options",
         onKeyDown: handleMenuKeyDown,
@@ -848,15 +848,15 @@ const AppBreadcrumbs = ({
   }
   return /* @__PURE__ */ jsx("div", { className: cn(breadcrumbContainerVariants({ variant }), className), children: /* @__PURE__ */ jsx("div", { className: cn("max-w-7xl mx-auto px-4 py-2", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center text-sm space-x-2", children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      /* @__PURE__ */ jsx("li", { children: item.current || !item.href ? /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: item.label }) : /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("li", { children: item.current || !item.href ? /* @__PURE__ */ jsx("span", { className: ui.text.body, children: item.label }) : /* @__PURE__ */ jsx(
         "a",
         {
           href: item.href,
-          className: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors",
+          className: `${ui.text.linkSubtle} transition-colors`,
           children: item.label
         }
       ) }),
-      index < items.length - 1 && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { className: "text-gray-400 dark:text-gray-500", children: "/" }) })
+      index < items.length - 1 && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { className: ui.text.muted, children: "/" }) })
     ] }, index)) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       talkToFounder && /* @__PURE__ */ jsx(TalkToFounderButton, { config: talkToFounder }),
@@ -920,7 +920,7 @@ const AppFooter = ({
     LinkComponent,
     {
       href: companyUrl,
-      className: "text-blue-400 hover:text-blue-300 transition-colors",
+      className: cn(ui.text.linkSubtle, ui.transition.default),
       children: companyName
     }
   ) : void 0;
@@ -962,7 +962,7 @@ const AppFooter = ({
               link.href,
               link.onClick
             ),
-            className: "text-gray-400 hover:text-white transition-colors",
+            className: cn(ui.text.linkMuted, ui.transition.default),
             children: link.label
           }
         ) : /* @__PURE__ */ jsx(
@@ -970,7 +970,7 @@ const AppFooter = ({
           {
             href: link.href,
             onClick: createTrackedLinkHandler(link.label, link.href),
-            className: "text-gray-400 hover:text-white transition-colors",
+            className: cn(ui.text.linkMuted, ui.transition.default),
             children: link.label
           }
         ) }, link.href || index)) })
@@ -1039,7 +1039,7 @@ const AppFooterForHomePage = ({
     LinkComponent,
     {
       href: companyUrl,
-      className: "text-blue-400 hover:text-blue-300 transition-colors",
+      className: cn(ui.text.linkSubtle, ui.transition.default),
       children: companyName
     }
   ) : void 0;
@@ -1564,38 +1564,56 @@ const AppSitemapPage = ({
 }) => {
   const content = /* @__PURE__ */ jsxs(Section, { spacing: "3xl", maxWidth: "6xl", className: cn(className), children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center mb-12", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white mb-4", children: text.title }),
-      /* @__PURE__ */ jsx("p", { className: "text-xl text-gray-600 dark:text-gray-300", children: text.subtitle })
-    ] }),
-    languages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-12 p-6 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: [
-      /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center", children: [
-        /* @__PURE__ */ jsx(LanguageIcon, { className: "w-6 h-6 mr-2" }),
-        text.languagesSectionTitle
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-300 mb-6", children: text.languagesDescription }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4", children: languages.map((lang) => /* @__PURE__ */ jsxs(
-        LinkComponent,
-        {
-          href: languageLinkPath ?? "/",
-          language: lang.code,
-          className: "flex items-center space-x-2 p-3 bg-white dark:bg-gray-800 rounded-lg hover:shadow-md transition-shadow",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "text-2xl", children: lang.flag }),
-            /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: lang.name })
-          ]
-        },
-        lang.code
-      )) })
+      /* @__PURE__ */ jsx("h1", { className: `text-4xl font-bold ${ui.text.strong} mb-4`, children: text.title }),
+      /* @__PURE__ */ jsx("p", { className: `text-xl ${ui.text.muted}`, children: text.subtitle })
     ] }),
+    languages.length > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `mb-12 p-6 ${colors.component.alert.info.base} ${colors.component.alert.info.dark} rounded-lg`,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "h2",
+            {
+              className: `text-xl font-semibold ${ui.text.strong} mb-4 flex items-center`,
+              children: [
+                /* @__PURE__ */ jsx(LanguageIcon, { className: "w-6 h-6 mr-2" }),
+                text.languagesSectionTitle
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: `${ui.text.body} mb-6`, children: text.languagesDescription }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4", children: languages.map((lang) => /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href: languageLinkPath ?? "/",
+              language: lang.code,
+              className: `flex items-center space-x-2 p-3 ${ui.background.surface} rounded-lg hover:shadow-md transition-shadow`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-2xl", children: lang.flag }),
+                /* @__PURE__ */ jsx("div", { className: `font-medium ${ui.text.strong}`, children: lang.name })
+              ]
+            },
+            lang.code
+          )) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: sections.map((section, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6",
+        className: `${ui.background.surface} rounded-lg shadow-sm p-6`,
         children: [
-          /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center", children: [
-            getIcon(section.icon),
-            section.title
-          ] }),
+          /* @__PURE__ */ jsxs(
+            "h2",
+            {
+              className: `text-lg font-semibold ${ui.text.strong} mb-4 flex items-center`,
+              children: [
+                getIcon(section.icon),
+                section.title
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
             LinkComponent,
             {
@@ -1614,16 +1632,18 @@ const AppSitemapPage = ({
       },
       index
     )) }),
-    quickLinks.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-12 p-6 bg-gray-50 dark:bg-gray-900 rounded-lg", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4", children: text.quickLinksTitle }),
+    quickLinks.length > 0 && /* @__PURE__ */ jsxs("div", { className: `mt-12 p-6 ${ui.background.subtle} rounded-lg`, children: [
+      /* @__PURE__ */ jsx("h3", { className: `text-lg font-semibold ${ui.text.strong} mb-4`, children: text.quickLinksTitle }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: quickLinks.map((link, index) => {
-        const baseClasses = "inline-flex items-center px-4 py-2 rounded-lg transition-colors";
-        const variantClasses = link.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : link.variant === "secondary" ? "bg-gray-600 text-white hover:bg-gray-700" : "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800";
+        const baseClasses = "inline-flex items-center px-4 py-2 rounded-lg";
+        const variantClasses = buttonVariant(
+          link.variant === "primary" ? "primary" : link.variant === "secondary" ? "secondary" : "outline"
+        );
         return /* @__PURE__ */ jsxs(
           LinkComponent,
           {
             href: link.path,
-            className: `${baseClasses} ${variantClasses}`,
+            className: cn(baseClasses, variantClasses),
             children: [
               link.icon === "envelope" && /* @__PURE__ */ jsx(EnvelopeIcon, { className: "w-5 h-5 mr-2" }),
               link.icon === "document" && /* @__PURE__ */ jsx(DocumentTextIcon, { className: "w-5 h-5 mr-2" }),
@@ -1646,13 +1666,13 @@ function isSectionWithList(section) {
 function isSectionWithSubsections(section) {
   return "subsections" in section && Array.isArray(section.subsections);
 }
-const SectionHeading = ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mt-8 mb-4", children });
-const SubsectionHeading = ({ children }) => /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100 mt-6 mb-3", children });
+const SectionHeading = ({ children }) => /* @__PURE__ */ jsx("h2", { className: `text-2xl font-bold ${ui.text.strong} mt-8 mb-4`, children });
+const SubsectionHeading = ({ children }) => /* @__PURE__ */ jsx("h3", { className: `text-xl font-semibold ${ui.text.strong} mt-6 mb-3`, children });
 const Paragraph = ({
   children,
   className = ""
-}) => /* @__PURE__ */ jsx("p", { className: `text-gray-600 dark:text-gray-300 mb-6 ${className}`, children });
-const List = ({ items }) => /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside text-gray-600 dark:text-gray-300 mb-6 space-y-1", children: items.map((item, index) => /* @__PURE__ */ jsx("li", { dangerouslySetInnerHTML: { __html: item } }, index)) });
+}) => /* @__PURE__ */ jsx("p", { className: cn(ui.text.body, "mb-6", className), children });
+const List = ({ items }) => /* @__PURE__ */ jsx("ul", { className: `list-disc list-inside ${ui.text.body} mb-6 space-y-1`, children: items.map((item, index) => /* @__PURE__ */ jsx("li", { dangerouslySetInnerHTML: { __html: item } }, index)) });
 const AppTextPage = ({
   text,
   lastUpdatedDate = (/* @__PURE__ */ new Date()).toLocaleDateString(),
@@ -1660,7 +1680,7 @@ const AppTextPage = ({
   className
 }) => {
   const content = /* @__PURE__ */ jsxs(Section, { spacing: "3xl", maxWidth: "4xl", className: cn(className), children: [
-    /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-gray-100 mb-8", children: text.title }),
+    /* @__PURE__ */ jsx("h1", { className: `text-4xl font-bold ${ui.text.strong} mb-8`, children: text.title }),
     /* @__PURE__ */ jsxs("div", { className: "prose prose-lg dark:prose-invert max-w-none", children: [
       text.lastUpdated && /* @__PURE__ */ jsx(Paragraph, { className: "mb-6", children: text.lastUpdated.replace("{{date}}", lastUpdatedDate) }),
       text.sections.map((section, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
@@ -1694,28 +1714,21 @@ const AppTextPage = ({
             dangerouslySetInnerHTML: { __html: text.contact.description }
           }
         ) }) : /* @__PURE__ */ jsx(Paragraph, { children: text.contact.description }),
-        /* @__PURE__ */ jsx("div", { className: "bg-gray-50 dark:bg-gray-800 p-4 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-gray-700 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsx("div", { className: `${ui.background.subtle} p-4 rounded-lg`, children: /* @__PURE__ */ jsxs("p", { className: ui.text.body, children: [
           text.contact.info.emailLabel,
           " ",
           /* @__PURE__ */ jsx(
             "a",
             {
               href: `mailto:${text.contact.info.email}`,
-              className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+              className: ui.text.link,
               children: text.contact.info.email
             }
           ),
           /* @__PURE__ */ jsx("br", {}),
           text.contact.info.websiteLabel,
           " ",
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: text.contact.info.websiteUrl,
-              className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
-              children: text.contact.info.websiteUrl
-            }
-          ),
+          /* @__PURE__ */ jsx("a", { href: text.contact.info.websiteUrl, className: ui.text.link, children: text.contact.info.websiteUrl }),
           text.contact.info.dpoLabel && text.contact.info.dpoEmail && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("br", {}),
             text.contact.info.dpoLabel,
@@ -1724,27 +1737,33 @@ const AppTextPage = ({
               "a",
               {
                 href: `mailto:${text.contact.info.dpoEmail}`,
-                className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+                className: ui.text.link,
                 children: text.contact.info.dpoEmail
               }
             )
           ] })
         ] }) }),
-        text.contact.gdprNotice && /* @__PURE__ */ jsxs("div", { className: "mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-blue-900 dark:text-blue-200 mb-2", children: text.contact.gdprNotice.title }),
-          /* @__PURE__ */ jsxs("p", { className: "text-blue-800 dark:text-blue-300", children: [
-            text.contact.gdprNotice.content,
-            " ",
-            text.contact.info.dpoEmail && /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: `mailto:${text.contact.info.dpoEmail}`,
-                className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
-                children: text.contact.info.dpoEmail
-              }
-            )
-          ] })
-        ] })
+        text.contact.gdprNotice && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `mt-8 p-4 ${colors.component.alert.info.base} ${colors.component.alert.info.dark} rounded-lg`,
+            children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-blue-900 dark:text-blue-200 mb-2", children: text.contact.gdprNotice.title }),
+              /* @__PURE__ */ jsxs("p", { className: "text-blue-800 dark:text-blue-300", children: [
+                text.contact.gdprNotice.content,
+                " ",
+                text.contact.info.dpoEmail && /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: `mailto:${text.contact.info.dpoEmail}`,
+                    className: ui.text.link,
+                    children: text.contact.info.dpoEmail
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       ] })
     ] })
   ] });
@@ -1806,52 +1825,31 @@ const USER_ACTION_ERROR_CODES = [
 ];
 const colorVariantClasses = {
   primary: {
-    title: "text-primary-600",
-    inputFocus: "focus:ring-primary-500 focus:border-primary-500",
-    submitButton: "bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 disabled:bg-primary-300",
-    googleButtonFocusRing: "focus:ring-primary-500",
-    toggleLink: "text-primary-600 hover:text-primary-500"
+    title: "text-blue-600",
+    toggleLink: "text-blue-600 hover:text-blue-500"
   },
   blue: {
     title: "text-blue-600",
-    inputFocus: "focus:ring-blue-500 focus:border-blue-500",
-    submitButton: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 disabled:bg-blue-300",
-    googleButtonFocusRing: "focus:ring-blue-500",
     toggleLink: "text-blue-600 hover:text-blue-500"
   },
   indigo: {
     title: "text-indigo-600",
-    inputFocus: "focus:ring-indigo-500 focus:border-indigo-500",
-    submitButton: "bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 disabled:bg-indigo-300",
-    googleButtonFocusRing: "focus:ring-indigo-500",
     toggleLink: "text-indigo-600 hover:text-indigo-500"
   },
   violet: {
     title: "text-violet-600",
-    inputFocus: "focus:ring-violet-500 focus:border-violet-500",
-    submitButton: "bg-violet-600 hover:bg-violet-700 focus:ring-violet-500 disabled:bg-violet-300",
-    googleButtonFocusRing: "focus:ring-violet-500",
     toggleLink: "text-violet-600 hover:text-violet-500"
   },
   orange: {
     title: "text-orange-600",
-    inputFocus: "focus:ring-orange-500 focus:border-orange-500",
-    submitButton: "bg-orange-600 hover:bg-orange-700 focus:ring-orange-500 disabled:bg-orange-300",
-    googleButtonFocusRing: "focus:ring-orange-500",
     toggleLink: "text-orange-600 hover:text-orange-500"
   },
   emerald: {
     title: "text-emerald-600",
-    inputFocus: "focus:ring-emerald-500 focus:border-emerald-500",
-    submitButton: "bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500 disabled:bg-emerald-300",
-    googleButtonFocusRing: "focus:ring-emerald-500",
     toggleLink: "text-emerald-600 hover:text-emerald-500"
   },
   rose: {
     title: "text-rose-600",
-    inputFocus: "focus:ring-rose-500 focus:border-rose-500",
-    submitButton: "bg-rose-600 hover:bg-rose-700 focus:ring-rose-500 disabled:bg-rose-300",
-    googleButtonFocusRing: "focus:ring-rose-500",
     toggleLink: "text-rose-600 hover:text-rose-500"
   }
 };
@@ -1863,6 +1861,7 @@ function LoginPage({
   onGoogleSignIn,
   onSuccess,
   onAuthError,
+  text: textOverrides,
   showGoogleSignIn = true,
   showSignUp = true,
   className = "",
@@ -1887,7 +1886,7 @@ function LoginPage({
   const [isLoading, setIsLoading] = useState(false);
   const [isGoogleSignInPending, setIsGoogleSignInPending] = useState(false);
   const googleSignInStartTime = useRef(null);
-  const colors = colorVariantClasses[colorVariant];
+  const colors$1 = colorVariantClasses[colorVariant];
   useEffect(() => {
     const handleFocus = () => {
       if (isGoogleSignInPending && googleSignInStartTime.current) {
@@ -1947,39 +1946,38 @@ function LoginPage({
       googleSignInStartTime.current = null;
     }
   };
-  const text = defaultText;
+  const text = { ...defaultText, ...textOverrides };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8",
+        `min-h-screen flex items-center justify-center ${ui.background.subtle} py-12 px-4 sm:px-6 lg:px-8`,
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "max-w-md w-full space-y-8", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: logo }),
-          /* @__PURE__ */ jsx("h1", { className: cn("text-center text-3xl font-bold", colors.title), children: appName }),
-          /* @__PURE__ */ jsx("h2", { className: "mt-6 text-center text-2xl font-semibold text-gray-900", children: isSignUp && showSignUp ? text.createAccount : text.signInToAccount })
+          /* @__PURE__ */ jsx("h1", { className: cn("text-center text-3xl font-bold", colors$1.title), children: appName }),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: `mt-6 text-center text-2xl font-semibold ${ui.text.strong}`,
+              children: isSignUp && showSignUp ? text.createAccount : text.signInToAccount
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, children: [
           error && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-md text-sm",
+              className: `${colors.component.alert.error.base} ${colors.component.alert.error.dark} border px-4 py-3 rounded-md text-sm`,
               role: "alert",
               children: error
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(
-                "label",
-                {
-                  htmlFor: "login-email",
-                  className: "block text-sm font-medium text-gray-700",
-                  children: text.emailLabel
-                }
-              ),
+              /* @__PURE__ */ jsx("label", { htmlFor: "login-email", className: `block ${ui.text.label}`, children: text.emailLabel }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -1992,8 +1990,8 @@ function LoginPage({
                   onChange: (e) => setEmail(e.target.value),
                   placeholder: text.emailPlaceholder,
                   className: cn(
-                    "mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none sm:text-sm",
-                    colors.inputFocus
+                    `mt-1 appearance-none block w-full px-3 py-2 border rounded-md shadow-sm sm:text-sm ${colors.component.input.default.base} ${colors.component.input.default.dark}`,
+                    focusRing
                   )
                 }
               )
@@ -2003,7 +2001,7 @@ function LoginPage({
                 "label",
                 {
                   htmlFor: "login-password",
-                  className: "block text-sm font-medium text-gray-700",
+                  className: `block ${ui.text.label}`,
                   children: text.passwordLabel
                 }
               ),
@@ -2019,8 +2017,8 @@ function LoginPage({
                   onChange: (e) => setPassword(e.target.value),
                   placeholder: text.passwordPlaceholder,
                   className: cn(
-                    "mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none sm:text-sm",
-                    colors.inputFocus
+                    `mt-1 appearance-none block w-full px-3 py-2 border rounded-md shadow-sm sm:text-sm ${colors.component.input.default.base} ${colors.component.input.default.dark}`,
+                    focusRing
                   )
                 }
               )
@@ -2032,8 +2030,9 @@ function LoginPage({
               type: "submit",
               disabled: isLoading,
               className: cn(
-                "w-full inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-white px-4 py-2 text-sm",
-                colors.submitButton
+                "w-full inline-flex items-center justify-center font-medium rounded-md px-4 py-2 text-sm",
+                buttonVariant("primary"),
+                "disabled:opacity-50 disabled:cursor-not-allowed"
               ),
               children: [
                 isLoading && /* @__PURE__ */ jsxs(
@@ -2074,7 +2073,13 @@ function LoginPage({
           showGoogleSignIn && onGoogleSignIn && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-gray-300" }) }),
-              /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx("span", { className: "px-2 bg-gray-50 text-gray-500", children: text.orContinueWith }) })
+              /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `px-2 ${ui.background.subtle} ${ui.text.muted}`,
+                  children: text.orContinueWith
+                }
+              ) })
             ] }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
               "button",
@@ -2083,8 +2088,9 @@ function LoginPage({
                 onClick: handleGoogleSignIn,
                 disabled: isLoading,
                 className: cn(
-                  "w-full inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 disabled:bg-gray-100 px-4 py-2 text-sm",
-                  colors.googleButtonFocusRing
+                  "w-full inline-flex items-center justify-center font-medium rounded-md px-4 py-2 text-sm",
+                  buttonVariant("outline"),
+                  `${ui.background.surface} ${ui.text.label} disabled:opacity-50 disabled:cursor-not-allowed`
                 ),
                 children: [
                   isLoading ? /* @__PURE__ */ jsxs(
@@ -2124,7 +2130,7 @@ function LoginPage({
             ) })
           ] })
         ] }),
-        showSignUp && /* @__PURE__ */ jsxs("p", { className: "text-center text-sm text-gray-600", children: [
+        showSignUp && /* @__PURE__ */ jsxs("p", { className: `text-center text-sm ${ui.text.muted}`, children: [
           isSignUp ? text.alreadyHaveAccount : text.dontHaveAccount,
           " ",
           /* @__PURE__ */ jsx(
@@ -2132,7 +2138,7 @@ function LoginPage({
             {
               type: "button",
               onClick: () => setIsSignUp(!isSignUp),
-              className: cn("font-medium", colors.toggleLink),
+              className: cn("font-medium", colors$1.toggleLink),
               children: isSignUp ? text.signIn : text.signUp
             }
           )
@@ -2147,13 +2153,25 @@ const EmptyState = ({
   onPress
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center px-8", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400 text-center text-[15px] leading-relaxed mb-5", children: message }),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          ui.text.muted,
+          "text-center text-[15px] leading-relaxed mb-5"
+        ),
+        children: message
+      }
+    ),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: onPress,
-        className: "bg-blue-600 hover:bg-blue-700 text-white rounded-md px-6 py-2 text-sm font-medium min-h-[44px]",
+        className: cn(
+          buttonVariant("primary"),
+          "rounded-md px-6 py-2 text-sm font-medium min-h-[44px]"
+        ),
         children: buttonLabel
       }
     )