@rovula/ui 0.1.7 → 0.1.9

package/dist/theme/ThemeColorCoverageRuntime.stories.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { THEME_COLOR_KEYS, getThemeColor } from "../utils/colors";
+const meta = {
+    title: "Theme/Color Coverage Runtime",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+const DEPRECATED_KEYS = new Set([
+    "text-dark",
+    "text-medium",
+    "text-light",
+    "text-grey-dark",
+    "text-grey-medium",
+    "text-grey-light",
+    "base-bg",
+    "base-bg2",
+    "base-bg3",
+    "base-workspace-stroke",
+    "base-guideline-stroke",
+    "base-popup",
+    "base-popup-highlight",
+    "base-popup-curtain",
+    "base-popup-foreground",
+    "background",
+    "foreground",
+    "surface",
+    "surface-foreground",
+    "primary-foreground",
+    "secondary-foreground",
+    "tertiary-foreground",
+    "info-foreground",
+    "success-foreground",
+    "warning-foreground",
+    "error-foreground",
+    "grey-foreground",
+    "grey2-foreground",
+    "function-default-outline",
+]);
+const RuntimeCoveragePanel = () => {
+    const rows = useMemo(() => {
+        const baseRows = Object.entries(THEME_COLOR_KEYS)
+            .map(([key, variableName]) => {
+            const runtimeValue = getThemeColor(variableName);
+            const hasRuntimeValue = runtimeValue.length > 0;
+            const canonicalKey = variableName.replace(/^--/, "");
+            return {
+                key,
+                variableName,
+                runtimeValue,
+                hasRuntimeValue,
+                canonicalKey,
+                isMappedAlias: key !== canonicalKey,
+                isDeprecated: DEPRECATED_KEYS.has(key),
+            };
+        })
+            .sort((a, b) => a.key.localeCompare(b.key));
+        const existingKeys = new Set(baseRows.map((row) => row.key));
+        const generatedDirectRows = baseRows
+            .filter((row) => row.isMappedAlias)
+            .map((row) => {
+            return {
+                key: row.canonicalKey,
+                variableName: row.variableName,
+                runtimeValue: row.runtimeValue,
+                hasRuntimeValue: row.hasRuntimeValue,
+                canonicalKey: row.canonicalKey,
+                isMappedAlias: false,
+                isDeprecated: false,
+            };
+        })
+            .filter((row) => !existingKeys.has(row.key));
+        return [...baseRows, ...generatedDirectRows].sort((a, b) => a.key.localeCompare(b.key));
+    }, []);
+    const activeRows = rows.filter((row) => !row.isDeprecated && !row.isMappedAlias);
+    const mappedRows = rows.filter((row) => !row.isDeprecated && row.isMappedAlias);
+    const deprecatedRows = rows.filter((row) => row.isDeprecated);
+    const missingRuntimeValue = rows.filter((row) => !row.hasRuntimeValue);
+    const activeMissingRuntimeValue = activeRows.filter((row) => !row.hasRuntimeValue);
+    const mappedMissingRuntimeValue = mappedRows.filter((row) => !row.hasRuntimeValue);
+    const deprecatedMissingRuntimeValue = deprecatedRows.filter((row) => !row.hasRuntimeValue);
+    const stateRows = rows.filter((row) => row.variableName.startsWith("--state-"));
+    const stateRuntimeMissing = stateRows.filter((row) => !row.hasRuntimeValue);
+    const renderTable = (tableRows) => (_jsx("div", { className: "rounded-md border border-bg-stroke2 bg-bg-bg2 overflow-auto", children: _jsxs("table", { className: "w-full text-small3", children: [_jsx("thead", { className: "sticky top-0 bg-bg-bg3", children: _jsxs("tr", { children: [_jsx("th", { className: "text-left p-2", children: "Key" }), _jsx("th", { className: "text-left p-2", children: "CSS Variable" }), _jsx("th", { className: "text-left p-2", children: "Runtime" }), _jsx("th", { className: "text-left p-2", children: "Preview" })] }) }), _jsx("tbody", { children: tableRows.map((row) => (_jsxs("tr", { className: "border-t border-bg-stroke2", children: [_jsx("td", { className: "p-2", children: row.key }), _jsx("td", { className: "p-2", children: row.variableName }), _jsx("td", { className: "p-2", children: row.hasRuntimeValue ? row.runtimeValue : "missing" }), _jsx("td", { className: "p-2", children: row.hasRuntimeValue ? (_jsx("span", { className: "inline-block w-6 h-4 rounded border border-bg-stroke2", style: { backgroundColor: `var(${row.variableName})` } })) : ("-") })] }, row.key))) })] }) }));
+    return (_jsxs("div", { className: "p-6 space-y-4 bg-bg-bg2 text-text-g-contrast-high min-h-screen text-text-black", children: [_jsx("h2", { className: "text-h5", children: "Theme Color Runtime Coverage" }), _jsxs("div", { className: "grid grid-cols-2 gap-3 max-w-3xl", children: [_jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Total keys" }), _jsx("div", { className: "text-h6", children: rows.length })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Missing runtime values" }), _jsx("div", { className: "text-h6", children: missingRuntimeValue.length })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "State runtime coverage" }), _jsxs("div", { className: "text-h6", children: [stateRows.length - stateRuntimeMissing.length, "/", stateRows.length] })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Runtime coverage" }), _jsxs("div", { className: "text-h6", children: [rows.length - missingRuntimeValue.length, "/", rows.length] })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3 max-w-4xl", children: [_jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Active keys" }), _jsxs("div", { className: "text-h6", children: [activeRows.length - activeMissingRuntimeValue.length, "/", activeRows.length] })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Mapped keys (alias to canonical)" }), _jsxs("div", { className: "text-h6", children: [mappedRows.length - mappedMissingRuntimeValue.length, "/", mappedRows.length] })] }), _jsxs("div", { className: "rounded-md border border-bg-stroke2 p-3 bg-bg-bg2", children: [_jsx("div", { className: "text-small3", children: "Deprecated keys" }), _jsxs("div", { className: "text-h6", children: [deprecatedRows.length - deprecatedMissingRuntimeValue.length, "/", deprecatedRows.length] })] })] }), missingRuntimeValue.length > 0 ? (_jsxs("div", { className: "rounded-md border border-warning p-3 bg-warning-transparent-8", children: [_jsx("div", { className: "text-small2 text-warning", children: "Missing runtime values" }), _jsx("div", { className: "text-small3 mt-1", children: missingRuntimeValue.map((item) => item.variableName).join(", ") })] })) : null, _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-subtitle3", children: "Active Tokens" }), renderTable(activeRows)] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-subtitle3", children: "Mapped Tokens (Alias)" }), renderTable(mappedRows)] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-subtitle3", children: "Deprecated Aliases" }), renderTable(deprecatedRows)] })] }));
+};
+export const RuntimeCoverage = {
+    render: () => _jsx(RuntimeCoveragePanel, {}),
+};

package/dist/utils/colors.js

@@ -1,5 +1,13 @@
 /** CSS variable names for theme colors (resolved by data-theme) */
 export const THEME_COLOR_KEYS = {
+    /* ----- Main / Brand core ----- */
+    "main-primary": "--main-primary",
+    "main-secondary": "--main-secondary",
+    "main-tertiary": "--main-tertiary",
+    "brand-midnight-blue": "--brand-midnight-blue",
+    "brand-columbia-blue": "--brand-columbia-blue",
+    "brand-background": "--brand-background",
+    "brand-lemon-glacier": "--brand-lemon-glacier",
     /* ----- Palette: Primary ----- */
     "primary-5": "--ramps-primary-5",
     "primary-10": "--ramps-primary-10",
@@ -207,6 +215,14 @@ export const THEME_COLOR_KEYS = {
     "disable-outline": "--state-disable-outline",
     /* ----- Text ----- */
     "text-black": "--text-black",
+    "text-contrast-low": "--text-contrast-low",
+    "text-contrast-medium": "--text-contrast-medium",
+    "text-contrast-high": "--text-contrast-high",
+    "text-contrast-max": "--text-contrast-max",
+    "text-g-contrast-low": "--text-g-contrast-low",
+    "text-g-contrast-medium": "--text-g-contrast-medium",
+    "text-g-contrast-high": "--text-g-contrast-high",
+    /* ----- Deprecated text aliases ----- */
     "text-dark": "--text-dark",
     "text-medium": "--text-medium",
     "text-light": "--text-light",
@@ -236,7 +252,31 @@ export const THEME_COLOR_KEYS = {
     "function-active-hover-bg": "--function-active-hover-bg",
     "function-active-stroke": "--function-active-stroke",
     "function-active-icon": "--function-active-icon",
+    /* ----- Direct modal/background tokens ----- */
+    "modal-surface": "--modal-surface",
+    "modal-highlight": "--modal-highlight",
+    "modal-overlay": "--modal-overlay",
+    "bg-bg1": "--bg-bg1",
+    "bg-bg2": "--bg-bg2",
+    "bg-bg3": "--bg-bg3",
+    "bg-stroke1": "--bg-stroke1",
+    "bg-stroke2": "--bg-stroke2",
+    "state-primary-text-solid": "--state-primary-text-solid",
+    "state-primary-text-hover": "--state-primary-text-hover",
+    "state-secondary-text-solid": "--state-secondary-text-solid",
+    "state-secondary-text-hover": "--state-secondary-text-hover",
+    "state-tertiary-text-solid": "--state-tertiary-text-solid",
+    "state-tertiary-text-hover": "--state-tertiary-text-hover",
+    "state-info-text-solid": "--state-info-text-solid",
+    "state-info-text-hover": "--state-info-text-hover",
+    "state-success-text-solid": "--state-success-text-solid",
+    "state-success-text-hover": "--state-success-text-hover",
+    "state-warning-text-solid": "--state-warning-text-solid",
+    "state-warning-text-hover": "--state-warning-text-hover",
+    "state-error-text-solid": "--state-error-text-solid",
+    "state-error-text-hover": "--state-error-text-hover",
     /* ----- Base ----- */
+    /* ----- Deprecated base aliases ----- */
     "base-bg": "--base-color-bg",
     "base-bg2": "--base-color-bg2",
     "base-bg3": "--base-color-bg3",
@@ -249,7 +289,59 @@ export const THEME_COLOR_KEYS = {
     /* ----- Common ----- */
     "common-white": "--common-white",
     "common-black": "--common-black",
+    "brand-rvl-yellow": "--brand-rvl-yellow",
+    "brand-rvl-grey": "--brand-rvl-grey",
+    /* ----- Others ----- */
+    "others-1": "--others-1",
+    "others-2": "--others-2",
+    "others-3": "--others-3",
+    "others-4": "--others-4",
+    "others-5": "--others-5",
+    "others-6": "--others-6",
+    "others-7": "--others-7",
+    "others-8": "--others-8",
+    "others-9": "--others-9",
+    "others-10": "--others-10",
+    "others-11": "--others-11",
+    "others-12": "--others-12",
+    "others-13": "--others-13",
+    "others-14": "--others-14",
+    "others-15": "--others-15",
+    "others-16": "--others-16",
+    "others-17": "--others-17",
+    "others-18": "--others-18",
+    "others-19": "--others-19",
+    "others-20": "--others-20",
+    "others-21": "--others-21",
+    "others-22": "--others-22",
+    "others-23": "--others-23",
+    "others-24": "--others-24",
+    "others-25": "--others-25",
+    "others-26": "--others-26",
+    "others-27": "--others-27",
+    "others-28": "--others-28",
+    "others-29": "--others-29",
+    "others-30": "--others-30",
+    "others-31": "--others-31",
+    "others-32": "--others-32",
+    "others-33": "--others-33",
+    "others-34": "--others-34",
+    "others-35": "--others-35",
+    /* ----- Page background ----- */
+    "page-bg-main": "--page-bg-main",
+    "page-bg-circle-top-g-in": "--page-bg-circle-top-g-in",
+    "page-bg-circle-top-g-out": "--page-bg-circle-top-g-out",
+    "page-bg-circle-bottom-g-in": "--page-bg-circle-bottom-g-in",
+    "page-bg-circle-bottom-g-out": "--page-bg-circle-bottom-g-out",
+    /* ----- Extra surface/background ----- */
+    "modal-line": "--modal-line",
+    "bg-bg4": "--bg-bg4",
+    "bg-bg5": "--bg-bg5",
+    "bg-stroke3": "--bg-stroke3",
+    "bg-stroke4": "--bg-stroke4",
+    "bg-stroke5": "--bg-stroke5",
     /* ----- Semantic ----- */
+    /* ----- Deprecated semantic aliases ----- */
     background: "--background",
     foreground: "--foreground",
     surface: "--surface",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -77,7 +77,7 @@
   "dependencies": {
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
-    "lucide-react": "^0.460.0",
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -99,9 +99,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "lucide-react": "^0.460.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-day-picker": "^9.0.7",
     "react-dom": "^17.0.0 || ^18.0.0",
+    "react-hook-form": "^7.71.2",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "yup": "^1.4.0"

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 bg-base-bg2">
+      <div className="p-5 bg-bg-bg2">
         <Story />
       </div>
     ),
@@ -99,23 +99,23 @@ const forcedStateClassName: Record<
 const icon = <ArrowsUpDownIcon />;
 
 const renderPreview = (shape: "round" | "capsule") => (
-  <div className="bg-base-bg2 p-8 min-h-screen">
+  <div className="bg-bg-bg2 p-8 min-h-screen">
     <div className="flex flex-col gap-6">
-      <h3 className="text-xl font-semibold tracking-wide text-text-white">Function button</h3>
+      <h3 className="text-xl font-semibold tracking-wide text-text-contrast-max">Function button</h3>
 
       {previewStates.map((state) => (
         <div
           key={state.key}
           className="grid grid-cols-[120px_repeat(3,minmax(0,1fr))] items-stretch gap-4"
         >
-          <span className="pt-3 text-sm font-semibold text-text-white">{state.label}</span>
+          <span className="pt-3 text-sm font-semibold text-text-contrast-max">{state.label}</span>
 
           {previewVariants.map((previewVariant) => (
             <div
               key={previewVariant.variant}
-              className="h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3"
+              className="h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3"
             >
-              <span className="text-xs font-semibold tracking-wide text-text-white uppercase">
+              <span className="text-xs font-semibold tracking-wide text-text-contrast-max uppercase">
                 {previewVariant.label}
               </span>
 

package/src/components/ActionButton/ActionButton.styles.ts

@@ -106,7 +106,7 @@ export const actionButtonVariants = cva(
       {
         size: "xxs",
         variant: "icon",
-        className: "px-[1px] py-[1px] [&_svg]:size-[12px]",
+        className: "px-[1px] py-[1px] [&_svg]:size-[10px]",
       },
       {
         size: "xs",

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -105,3 +105,25 @@ export const CustomStyle = {
     );
   },
 } satisfies StoryObj;
+
+export const FigmaFail = {
+  render: () => (
+    <div className="flex w-full">
+      <AlertDialog defaultOpen>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Infomation update failed</AlertDialogTitle>
+            <AlertDialogDescription>
+              Please login again and complete your profile to activate your account.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction className="w-[140px] justify-center">
+              Try again
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  ),
+} satisfies StoryObj;

package/src/components/AlertDialog/AlertDialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 bg-base-popup-curtain z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 bg-modal-overlay z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border border-base-popup bg-base-popup p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-8 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col items-center gap-2 text-center",
       className
     )}
     {...props}
@@ -66,7 +66,7 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse items-center justify-center gap-3 sm:flex-row sm:gap-4",
       className
     )}
     {...props}
@@ -80,7 +80,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("typography-h5", className)}
+    className={cn("typography-subtitle3 text-text-contrast-max", className)}
     {...props}
   />
 ));
@@ -92,7 +92,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm", className)}
+    className={cn("typography-small1 text-text-contrast-max", className)}
     {...props}
   />
 ));

package/src/components/Avatar/Avatar.stories.tsx

@@ -52,7 +52,7 @@ export const Preview = {
     const BORDER: AvatarProps["rounded"][] = ["full", "normal", "none"];
 
     return (
-      <div className="flex flex-col gap-2 w-full  bg-black p-20">
+      <div className="flex flex-col gap-2 w-full bg-bg-bg2 p-20">
         {BORDER.map((rounded) => (
           <div key={rounded} className="flex flex-row items-center gap-3">
             <Avatar

package/src/components/Avatar/Avatar.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const avatarVariants = cva(
   [
-    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitle2 truncate",
+    "flex items-center justify-center bg-grey2-700 text-common-black typography-subtitle2 truncate",
   ],
   {
     variants: {

package/src/components/Avatar/AvatarBase.tsx

@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "flex h-full w-full items-center justify-center rounded-full bg-inherit text-inherit",
       className
     )}
     {...props}

package/src/components/Avatar/AvatarGroup.stories.tsx

@@ -55,7 +55,7 @@ export const Preview = {
     };
 
     return (
-      <div className="flex flex-col gap-2 w-full  bg-black p-20">
+      <div className="flex flex-col gap-2 w-full bg-bg-bg2 p-20">
         <div className="flex flex-row items-center gap-3">
           <AvatarGroup>
             <Avatar size="lg" rounded="full" type="text" text="AS" />

package/src/components/Button/Buttons.stories.tsx

@@ -221,11 +221,11 @@ const previewStates = [
 
 export const FigmaPreview = {
   render: () => (
-    <div className="bg-base-bg2 p-8 min-h-screen">
+    <div className="bg-bg-bg2 p-8 min-h-screen">
       <div className="flex flex-col gap-10">
         {previewColors.map((color) => (
           <div key={color} className="flex flex-col gap-2">
-            <h3 className="text-xl font-semibold tracking-wide text-text-white capitalize">
+            <h3 className="text-xl font-semibold tracking-wide text-text-contrast-max capitalize">
               {color} btn
             </h3>
 
@@ -234,16 +234,16 @@ export const FigmaPreview = {
                 key={state.label}
                 className="grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-2"
               >
-                {/* <span className="pt-3 text-sm font-semibold text-text-white">
+                {/* <span className="pt-3 text-sm font-semibold text-text-contrast-max">
                   {state.label}
                 </span> */}
 
                 {previewStyles.map((style) => (
                   <div
                     key={style.label}
-                    className="h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3"
+                    className="h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3"
                   >
-                    <span className="text-xs font-semibold tracking-wide text-text-white uppercase">
+                    <span className="text-xs font-semibold tracking-wide text-text-contrast-max uppercase">
                       {style.label} ({state.label})
                     </span>
 
@@ -295,11 +295,11 @@ export const FigmaPreview = {
 
 export const FigmaPreviewCapsule = {
   render: () => (
-    <div className="bg-base-bg2 p-8 min-h-screen">
+    <div className="bg-bg-bg2 p-8 min-h-screen">
       <div className="flex flex-col gap-10">
         {previewColors.map((color) => (
           <div key={color} className="flex flex-col gap-4">
-            <h3 className="text-xl font-semibold tracking-wide text-text-white capitalize">
+            <h3 className="text-xl font-semibold tracking-wide text-text-contrast-max capitalize">
               {color} btn
             </h3>
 
@@ -308,16 +308,16 @@ export const FigmaPreviewCapsule = {
                 key={state.label}
                 className="grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-4"
               >
-                {/* <span className="pt-3 text-sm font-semibold text-text-white">
+                {/* <span className="pt-3 text-sm font-semibold text-text-contrast-max">
                   {state.label}
                 </span> */}
 
                 {previewStyles.map((style) => (
                   <div
                     key={style.label}
-                    className="h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3"
+                    className="h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3"
                   >
-                    <span className="text-xs font-semibold tracking-wide text-text-white uppercase">
+                    <span className="text-xs font-semibold tracking-wide text-text-contrast-max uppercase">
                       {style.label} ({state.label})
                     </span>
 

package/src/components/Calendar/Calendar.tsx

@@ -22,7 +22,7 @@ function Calendar({
       captionLayout="dropdown-years"
       {...props}
       className={cn(
-        "bg-surface text-surface-foreground border-surface",
+        "bg-bg-bg1 text-common-black border-bg-bg1",
         className
       )}
       classNames={{
@@ -30,8 +30,8 @@ function Calendar({
         day_button: cn(defaultClassNames.day_button, "size-9"),
         day: "typography-subtitle1 ",
         today:
-          "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid",
-        selected: "bg-primary !text-primary-foreground rounded-full ",
+          "text-bold text-common-black [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid",
+        selected: "bg-primary !text-state-primary-text-solid rounded-full ",
         weekdays: "text-gray-400",
         month_caption: cn(defaultClassNames.month_caption, "h-[54px]"),
         outside: "text-gray-400",

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-base-bg2">
+      <div className="p-5 flex w-full bg-bg-bg2">
         <Story />
       </div>
     ),
@@ -37,7 +37,7 @@ export const Default = {
           <Checkbox id="terms" {...props} />
           <label
             htmlFor="terms"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            className="text-sm font-medium leading-none text-text-contrast-max peer-disabled:cursor-not-allowed peer-disabled:text-state-disable-outline"
           >
             Accept terms and conditions
           </label>
@@ -59,11 +59,11 @@ export const WithText = {
         <div className="grid gap-1.5 leading-none">
           <label
             htmlFor="terms1"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            className="text-sm font-medium leading-none text-text-contrast-max peer-disabled:cursor-not-allowed peer-disabled:text-state-disable-outline"
           >
             Accept terms and conditions
           </label>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-text-g-contrast-medium">
             You agree to our Terms of Service and Privacy Policy.
           </p>
         </div>
@@ -83,7 +83,7 @@ export const Disabled = {
         <Checkbox id="terms2" disabled />
         <label
           htmlFor="terms2"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          className="text-sm font-medium leading-none text-state-disable-outline peer-disabled:cursor-not-allowed"
         >
           Accept terms and conditions
         </label>
@@ -101,7 +101,11 @@ type CheckboxPreviewRow = {
 
 const checkboxPreviewRows: CheckboxPreviewRow[] = [
   { label: "Default", checked: false },
-  { label: "Hover", checked: false, className: "!border-function-default-hover" },
+  {
+    label: "Hover",
+    checked: false,
+    className: "!border-function-default-hover",
+  },
   { label: "Disable", checked: false, disabled: true },
   { label: "Checked", checked: true },
   {
@@ -118,17 +122,36 @@ const checkboxPreviewRows: CheckboxPreviewRow[] = [
     className:
       "!data-[state=indeterminate]:border-function-active-hover !data-[state=indeterminate]:bg-function-active-hover",
   },
-  { label: "Indeterminate - Disable", checked: "indeterminate", disabled: true },
+  {
+    label: "Indeterminate - Disable",
+    checked: "indeterminate",
+    disabled: true,
+  },
 ];
 
 export const FigmaPreview = {
   render: () => (
-    <div className="bg-base-bg2 p-8 min-h-screen">
-      <div className="mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6">
+    <div className="bg-bg-bg2 p-8 min-h-screen">
+      <div className="mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-bg-stroke1 bg-bg-bg1 p-6">
         {checkboxPreviewRows.map((row) => (
-          <div key={row.label} className="grid grid-cols-[160px_16px] items-center gap-4">
-            <span className="text-sm font-medium text-text-white">{row.label}</span>
-            <Checkbox checked={row.checked} disabled={row.disabled} className={row.className} />
+          <div
+            key={row.label}
+            className="grid grid-cols-[160px_16px] items-center gap-4"
+          >
+            <span
+              className={`text-sm font-medium ${
+                row.disabled
+                  ? "text-state-disable-outline"
+                  : "text-text-contrast-max"
+              }`}
+            >
+              {row.label}
+            </span>
+            <Checkbox
+              checked={row.checked}
+              disabled={row.disabled}
+              className={row.className}
+            />
           </div>
         ))}
       </div>

package/src/components/Checkbox/Checkbox.tsx

@@ -14,17 +14,19 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 cursor-pointer rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background",
+      "peer size-4 shrink-0 cursor-pointer rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-bg-bg1",
       "hover:border-function-default-hover",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline disabled:data-[state=checked]:bg-state-disable-solid disabled:data-[state=indeterminate]:bg-state-disable-solid",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-input-active-stroke focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:border-state-disable-outline disabled:text-state-disable-outline",
+      "disabled:data-[state=checked]:border-state-disable-solid disabled:data-[state=checked]:bg-state-disable-solid",
+      "disabled:data-[state=indeterminate]:border-state-disable-solid disabled:data-[state=indeterminate]:bg-state-disable-solid",
       {
         "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon data-[state=indeterminate]:border-function-active-solid data-[state=indeterminate]:bg-function-active-solid data-[state=indeterminate]:text-function-active-icon":
           !props.disabled,
         "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover hover:data-[state=indeterminate]:border-function-active-hover hover:data-[state=indeterminate]:bg-function-active-hover":
           !props.disabled,
       },
-      className
+      className,
     )}
     {...props}
   >
@@ -32,7 +34,7 @@ const Checkbox = React.forwardRef<
       className={cn(
         "flex size-[14px] items-center justify-center text-current",
         "[&[data-state=checked]_.checkbox-check-icon]:block",
-        "[&[data-state=indeterminate]_.checkbox-minus-icon]:block"
+        "[&[data-state=indeterminate]_.checkbox-minus-icon]:block",
       )}
     >
       <CheckIcon className="checkbox-check-icon hidden size-[14px]" />

package/src/components/Collapsible/Collapsible.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const collapseButtonVariants = cva(
   [
-    "flex flex-1 bg-secondary-default hover:bg-secondary-hover text-secondary-foreground",
+    "flex flex-1 bg-secondary-default hover:bg-secondary-hover text-state-secondary-text-solid",
     "focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75",
   ],
   {