@gsk_poc/untitled-ui-base 0.1.1

package/package.json

@@ -0,0 +1,126 @@
+{
+  "name": "@gsk_poc/untitled-ui-base",
+  "version": "0.1.1",
+  "description": "GSK wrapper for Untitled UI React components with custom design tokens",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "styles",
+    "tokens",
+    "components/**/*.story.tsx",
+    "components/**/*.demo.tsx",
+    "LICENSE",
+    "README.md",
+    "styles/tokens-mapped.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles/globals.css": "./styles/globals.css",
+    "./styles/theme.css": "./styles/theme.css",
+    "./styles/typography.css": "./styles/typography.css",
+    "./styles/tokens.css": "./styles/tokens.css",
+    "./styles/tokens-mapped.css": "./styles/tokens-mapped.css",
+    "./tokens/*": "./tokens/*"
+  },
+  "scripts": {
+    "build": "tsup",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build -o ./storybook-static",
+    "build:tokens": "style-dictionary build --config style-dictionary.config.js",
+    "lint": "eslint components --fix",
+    "lint:check": "eslint components",
+    "prettier": "prettier . --write",
+    "prettier:check": "prettier . --check",
+    "type-check": "tsc --noEmit",
+    "test": "npm run type-check && npm run lint:check && npm run prettier:check",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "tailwind",
+    "ui",
+    "design-system",
+    "typescript",
+    "gsk"
+  ],
+  "author": "GSK",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/gsk-untitled-ui-base.git"
+  },
+  "peerDependencies": {
+    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.10.0",
+    "@react-aria/utils": "^3.31.0",
+    "@react-stately/utils": "^3.10.8",
+    "@tailwindcss/typography": "^0.5.16",
+    "@untitledui/file-icons": "^0.0.9",
+    "@untitledui/icons": "^0.0.19",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "motion": "^12.23.12",
+    "next-themes": "^0.4.6",
+    "qr-code-styling": "^1.9.2",
+    "react-aria": "^3.44.0",
+    "react-aria-components": "^1.13.0",
+    "react-hook-form": "^7.62.0",
+    "recharts": "^3.1.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-react-aria-components": "^2.0.0",
+    "zod": "^4.0.17"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@storybook/addon-themes": "^10.0.1",
+    "@storybook/nextjs": "^10.0.1",
+    "@storybook/nextjs-vite": "^10.0.1",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/node": "^24.2.1",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/parser": "^8.39.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint": "^9.33.0",
+    "eslint-config-next": "^15.4.6",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "10.0.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "next": "^16.0.7",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^10.0.1",
+    "style-dictionary": "^5.1.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.9.2",
+    "vite": "^7.2.7"
+  }
+}

package/styles/globals.css

@@ -0,0 +1,65 @@
+@source "../components";
+@source "../dist";
+
+@import "tailwindcss";
+@import "./theme.css";
+@import "./typography.css";
+
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:where(.dark-mode, .dark-mode *));
+@custom-variant label (& [data-label]);
+@custom-variant focus-input-within (&:has(input:focus));
+
+@utility scrollbar-hide {
+    /* For Webkit-based browsers (Chrome, Safari and Opera) */
+    &::-webkit-scrollbar {
+        display: none;
+        -webkit-appearance: none;
+    }
+
+    /* For IE, Edge and Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+@utility transition-inherit-all {
+    transition-property: inherit;
+    transition-duration: inherit;
+    transition-timing-function: inherit;
+}
+
+html,
+body {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual;
+    -webkit-font-kerning: normal;
+    font-kerning: normal;
+}
+
+/* Hide the default expand arrow on Safari.  */
+details summary::-webkit-details-marker {
+    display: none;
+}
+
+/* Hide default arrows from number inputs. */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+/* Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+/* Hide the default clear button (X) from search inputs. */
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}

package/styles/theme.css

@@ -0,0 +1,430 @@
+/**
+ * Theme CSS - Complete Token-Driven Version
+ * Auto-generated from design tokens
+ * All values reference tokens.css
+ */
+
+@theme {
+    /* FONT FAMILY */
+    --font-body: var(--font-family-body);
+    --font-display: var(--font-family-display);
+    --font-mono: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    /* FONT SIZE & LINE HEIGHT */
+    --text-xs: var(--font-size-text-xs);
+    --text-xs--line-height: var(--line-height-text-xs);
+    --text-sm: var(--font-size-text-sm);
+    --text-sm--line-height: var(--line-height-text-sm);
+    --text-md: var(--font-size-text-md);
+    --text-md--line-height: var(--line-height-text-md);
+    --text-lg: var(--font-size-text-lg);
+    --text-lg--line-height: var(--line-height-text-lg);
+    --text-xl: var(--font-size-text-xl);
+    --text-xl--line-height: var(--line-height-text-xl);
+    --text-display-xs: var(--font-size-display-xs);
+    --text-display-xs--line-height: var(--line-height-display-xs);
+    --text-display-sm: var(--font-size-display-sm);
+    --text-display-sm--line-height: var(--line-height-display-sm);
+    --text-display-md: var(--font-size-display-md);
+    --text-display-md--line-height: var(--line-height-display-md);
+    --text-display-lg: var(--font-size-display-lg);
+    --text-display-lg--line-height: var(--line-height-display-lg);
+    --text-display-xl: var(--font-size-display-xl);
+    --text-display-xl--line-height: var(--line-height-display-xl);
+    --text-display-2xl: var(--font-size-display-2xl);
+    --text-display-2xl--line-height: var(--line-height-display-2xl);
+
+    /* MAX WIDTH */
+    --max-width-container: 1280px;
+
+    /* BREAKPOINTS */
+    --breakpoint-xxs: 320px;
+    --breakpoint-xs: 600px;
+
+    /* RADIUS */
+    --radius-none: 0px;
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-DEFAULT: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 9999px;
+
+    /* SHADOW */
+    --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
+    --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
+    --shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
+    --shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
+    --shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
+    --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
+    --shadow-3xl: 0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
+    --shadow-skeumorphic: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
+    --shadow-xs-skeumorphic: var(--shadow-skeumorphic), var(--shadow-xs);
+
+    /* ANIMATIONS */
+    --animate-marquee: marquee 60s linear infinite;
+    --animate-caret-blink: caret-blink 1s infinite;
+
+    @keyframes marquee {
+        0% { transform: translateX(0); }
+        100% { transform: translateX(-100%); }
+    }
+
+    @keyframes caret-blink {
+        0%, 50% { opacity: 1; }
+        51%, 100% { opacity: 0; }
+    }
+
+    /* BASE COLORS */
+    --color-transparent: var(--colors-base-transparent);
+    --color-white: var(--colors-base-white);
+    --color-black: var(--colors-base-black);
+    --color-alpha-white: var(--colors-base-white);
+    --color-alpha-black: var(--colors-base-black);
+
+    /* BRAND COLORS */
+    --color-brand-25: var(--colors-brand-25);
+    --color-brand-50: var(--colors-brand-50);
+    --color-brand-100: var(--colors-brand-100);
+    --color-brand-200: var(--colors-brand-200);
+    --color-brand-300: var(--colors-brand-300);
+    --color-brand-400: var(--colors-brand-400);
+    --color-brand-500: var(--colors-brand-500);
+    --color-brand-600: var(--colors-brand-600);
+    --color-brand-700: var(--colors-brand-700);
+    --color-brand-800: var(--colors-brand-800);
+    --color-brand-900: var(--colors-brand-900);
+    --color-brand-950: var(--colors-brand-950);
+
+    /* ERROR COLORS */
+    --color-error-25: var(--colors-error-25);
+    --color-error-50: var(--colors-error-50);
+    --color-error-100: var(--colors-error-100);
+    --color-error-200: var(--colors-error-200);
+    --color-error-300: var(--colors-error-300);
+    --color-error-400: var(--colors-error-400);
+    --color-error-500: var(--colors-error-500);
+    --color-error-600: var(--colors-error-600);
+    --color-error-700: var(--colors-error-700);
+    --color-error-800: var(--colors-error-800);
+    --color-error-900: var(--colors-error-900);
+    --color-error-950: var(--colors-error-950);
+
+    /* WARNING COLORS */
+    --color-warning-25: var(--colors-warning-25);
+    --color-warning-50: var(--colors-warning-50);
+    --color-warning-100: var(--colors-warning-100);
+    --color-warning-200: var(--colors-warning-200);
+    --color-warning-300: var(--colors-warning-300);
+    --color-warning-400: var(--colors-warning-400);
+    --color-warning-500: var(--colors-warning-500);
+    --color-warning-600: var(--colors-warning-600);
+    --color-warning-700: var(--colors-warning-700);
+    --color-warning-800: var(--colors-warning-800);
+    --color-warning-900: var(--colors-warning-900);
+    --color-warning-950: var(--colors-warning-950);
+
+    /* SUCCESS COLORS */
+    --color-success-25: var(--colors-success-25);
+    --color-success-50: var(--colors-success-50);
+    --color-success-100: var(--colors-success-100);
+    --color-success-200: var(--colors-success-200);
+    --color-success-300: var(--colors-success-300);
+    --color-success-400: var(--colors-success-400);
+    --color-success-500: var(--colors-success-500);
+    --color-success-600: var(--colors-success-600);
+    --color-success-700: var(--colors-success-700);
+    --color-success-800: var(--colors-success-800);
+    --color-success-900: var(--colors-success-900);
+    --color-success-950: var(--colors-success-950);
+
+    /* GRAY COLORS (Light Mode) */
+    --color-gray-25: var(--colors-gray-light-mode-25);
+    --color-gray-50: var(--colors-gray-light-mode-50);
+    --color-gray-100: var(--colors-gray-light-mode-100);
+    --color-gray-200: var(--colors-gray-light-mode-200);
+    --color-gray-300: var(--colors-gray-light-mode-300);
+    --color-gray-400: var(--colors-gray-light-mode-400);
+    --color-gray-500: var(--colors-gray-light-mode-500);
+    --color-gray-600: var(--colors-gray-light-mode-600);
+    --color-gray-700: var(--colors-gray-light-mode-700);
+    --color-gray-800: var(--colors-gray-light-mode-800);
+    --color-gray-900: var(--colors-gray-light-mode-900);
+    --color-gray-950: var(--colors-gray-light-mode-950);
+
+    /* TEXT COLORS */
+    --color-text-white: var(--color-white);
+    --color-text-primary: var(--colors-text-text-primary-900);
+    --color-text-secondary: var(--colors-text-text-secondary-700);
+    --color-text-secondary_hover: var(--colors-text-text-secondary-hover);
+    --color-text-tertiary: var(--colors-text-text-tertiary-600);
+    --color-text-tertiary_hover: var(--colors-text-text-tertiary-hover);
+    --color-text-quaternary: var(--colors-text-text-quaternary-500);
+    --color-text-error-primary: var(--colors-text-text-error-primary-600);
+    --color-text-error-primary_hover: var(--colors-text-text-error-primary-600);
+    --color-text-warning-primary: var(--colors-text-text-warning-primary-600);
+    --color-text-success-primary: var(--colors-text-text-success-primary-600);
+    --color-text-disabled: var(--colors-text-text-disabled);
+    --color-text-placeholder: var(--colors-text-text-placeholder);
+    --color-text-placeholder_subtle: var(--colors-text-text-placeholder-subtle);
+    --color-text-primary_on-brand: var(--colors-text-text-primary-on-brand);
+    --color-text-secondary_on-brand: var(--colors-text-text-secondary-on-brand);
+    --color-text-tertiary_on-brand: var(--colors-text-text-tertiary-on-brand);
+    --color-text-quaternary_on-brand: var(--colors-text-text-quaternary-on-brand);
+    --color-text-brand-primary: var(--colors-text-text-brand-primary-900);
+    --color-text-brand-secondary: var(--colors-text-text-brand-secondary-700);
+    --color-text-brand-secondary_hover: var(--colors-text-text-brand-secondary-hover);
+    --color-text-brand-tertiary: var(--colors-text-text-brand-tertiary-600);
+    --color-text-brand-tertiary_alt: var(--colors-text-text-brand-tertiary-alt);
+    --color-text-editor-icon-fg: var(--colors-text-text-placeholder);
+    --color-text-editor-icon-fg_active: var(--colors-text-text-quaternary-500);
+
+    /* BORDER COLORS */
+    --color-border-primary: var(--colors-border-border-primary);
+    --color-border-secondary: var(--colors-border-border-secondary);
+    --color-border-secondary_alt: var(--colors-border-border-secondary-alt);
+    --color-border-tertiary: var(--colors-border-border-tertiary);
+    --color-border-error: var(--colors-border-border-error);
+    --color-border-error_subtle: var(--colors-border-border-error-subtle);
+    --color-border-disabled: var(--colors-border-border-disabled);
+    --color-border-disabled_subtle: var(--colors-border-border-disabled-subtle);
+    --color-border-brand: var(--colors-border-border-brand);
+    --color-border-brand_alt: var(--colors-border-border-brand-alt);
+
+    /* FOREGROUND COLORS */
+    --color-fg-white: var(--color-white);
+    --color-fg-primary: var(--colors-foreground-fg-primary-900);
+    --color-fg-secondary: var(--colors-foreground-fg-secondary-700);
+    --color-fg-secondary_hover: var(--colors-foreground-fg-secondary-hover);
+    --color-fg-tertiary: var(--colors-foreground-fg-tertiary-600);
+    --color-fg-tertiary_hover: var(--colors-foreground-fg-tertiary-hover);
+    --color-fg-quaternary: var(--colors-foreground-fg-quaternary-400);
+    --color-fg-quaternary_hover: var(--colors-foreground-fg-quaternary-hover);
+    --color-fg-warning-primary: var(--colors-foreground-fg-warning-primary);
+    --color-fg-warning-secondary: var(--colors-foreground-fg-warning-secondary);
+    --color-fg-success-primary: var(--colors-foreground-fg-success-primary);
+    --color-fg-success-secondary: var(--colors-foreground-fg-success-secondary);
+    --color-fg-error-primary: var(--colors-foreground-fg-error-primary);
+    --color-fg-error-secondary: var(--colors-foreground-fg-error-secondary);
+    --color-fg-disabled: var(--colors-foreground-fg-disabled);
+    --color-fg-disabled_subtle: var(--colors-foreground-fg-disabled-subtle);
+    --color-fg-brand-primary: var(--colors-foreground-fg-brand-primary-600);
+    --color-fg-brand-primary_alt: var(--colors-foreground-fg-brand-primary-alt);
+    --color-fg-brand-secondary: var(--colors-foreground-fg-brand-secondary-500);
+    --color-fg-brand-secondary_alt: var(--colors-foreground-fg-brand-secondary-alt);
+    --color-fg-brand-secondary_hover: var(--colors-foreground-fg-brand-secondary-hover);
+
+    /* BACKGROUND COLORS */
+    --color-bg-primary: var(--colors-background-bg-primary);
+    --color-bg-primary-solid: var(--colors-background-bg-primary-solid);
+    --color-bg-primary_alt: var(--colors-background-bg-primary-alt);
+    --color-bg-primary_hover: var(--colors-background-bg-primary-hover);
+    --color-bg-secondary: var(--colors-background-bg-secondary);
+    --color-bg-secondary-solid: var(--colors-background-bg-secondary-solid);
+    --color-bg-secondary_subtle: var(--colors-background-bg-secondary-subtle);
+    --color-bg-secondary_hover: var(--colors-background-bg-secondary-hover);
+    --color-bg-secondary_alt: var(--colors-background-bg-secondary-alt);
+    --color-bg-tertiary: var(--colors-background-bg-tertiary);
+    --color-bg-quaternary: var(--colors-background-bg-quaternary);
+    --color-bg-error-primary: var(--colors-background-bg-error-primary);
+    --color-bg-error-secondary: var(--colors-background-bg-error-secondary);
+    --color-bg-error-solid: var(--colors-background-bg-error-solid);
+    --color-bg-error-solid_hover: var(--colors-background-bg-error-solid-hover);
+    --color-bg-warning-primary: var(--colors-background-bg-warning-primary);
+    --color-bg-warning-secondary: var(--colors-background-bg-warning-secondary);
+    --color-bg-warning-solid: var(--colors-background-bg-warning-solid);
+    --color-bg-success-primary: var(--colors-background-bg-success-primary);
+    --color-bg-success-secondary: var(--colors-background-bg-success-secondary);
+    --color-bg-success-solid: var(--colors-background-bg-success-solid);
+    --color-bg-disabled: var(--colors-background-bg-disabled);
+    --color-bg-disabled_subtle: var(--colors-background-bg-disabled-subtle);
+    --color-bg-active: var(--colors-background-bg-active);
+    --color-bg-overlay: var(--colors-background-bg-overlay);
+    --color-bg-brand-primary: var(--colors-background-bg-brand-primary);
+    --color-bg-brand-primary_alt: var(--colors-background-bg-brand-primary-alt);
+    --color-bg-brand-secondary: var(--colors-background-bg-brand-secondary);
+    --color-bg-brand-solid: var(--colors-background-bg-brand-solid);
+    --color-bg-brand-solid_hover: var(--colors-background-bg-brand-solid-hover);
+    --color-bg-brand-section: var(--colors-background-bg-brand-section);
+    --color-bg-brand-section_subtle: var(--colors-background-bg-brand-section-subtle);
+
+    /* COMPONENT COLORS */
+    --color-app-store-badge-border: rgb(166 166 166);
+    --color-avatar-bg: var(--color-gray-100);
+    --color-avatar-contrast-border: rgb(0 0 0 / 0.08);
+    --color-avatar-profile-photo-border: var(--color-white);
+    --color-avatar-styles-bg-neutral: rgb(224 224 224);
+    --color-button-destructive-primary-icon: var(--component-colors-components-buttons-button-destructive-primary-icon);
+    --color-button-destructive-primary-icon_hover: var(--component-colors-components-buttons-button-destructive-primary-icon-hover);
+    --color-button-primary-icon: var(--component-colors-components-buttons-button-primary-icon);
+    --color-button-primary-icon_hover: var(--component-colors-components-buttons-button-primary-icon-hover);
+    --color-featured-icon-light-fg-brand: var(--colors-foreground-fg-brand-primary-600);
+    --color-featured-icon-light-fg-error: var(--colors-text-text-error-primary-600);
+    --color-featured-icon-light-fg-gray: var(--colors-text-text-quaternary-500);
+    --color-featured-icon-light-fg-success: var(--colors-text-text-success-primary-600);
+    --color-featured-icon-light-fg-warning: var(--colors-text-text-warning-primary-600);
+    --color-focus-ring-error: var(--colors-effects-focus-rings-focus-ring-error);
+    --color-focus-ring: var(--colors-effects-focus-rings-focus-ring);
+    --color-footer-button-fg: var(--colors-brand-200);
+    --color-footer-button-fg_hover: var(--color-white);
+    --color-icon-fg-brand: var(--colors-foreground-fg-brand-primary-600);
+    --color-icon-fg-brand_on-brand: var(--colors-brand-200);
+    --color-screen-mockup-border: var(--color-gray-900);
+    --color-slider-handle-bg: var(--color-white);
+    --color-slider-handle-border: var(--colors-foreground-fg-brand-primary-600);
+    --color-toggle-border: var(--colors-border-border-primary);
+    --color-toggle-button-fg_disabled: var(--color-gray-50);
+    --color-toggle-slim-border_pressed-hover: var(--color-bg-brand-solid_hover);
+    --color-toggle-slim-border_pressed: var(--color-bg-brand-solid);
+    --color-tooltip-supporting-text: var(--colors-border-border-primary);
+
+    /* BACKGROUND PROPERTY COLORS (Tailwind utilities) */
+    --background-color-primary: var(--color-bg-primary);
+    --background-color-primary-solid: var(--color-bg-primary-solid);
+    --background-color-primary_alt: var(--color-bg-primary_alt);
+    --background-color-primary_hover: var(--color-bg-primary_hover);
+    --background-color-secondary: var(--color-bg-secondary);
+    --background-color-secondary-solid: var(--color-bg-secondary-solid);
+    --background-color-secondary_alt: var(--color-bg-secondary_alt);
+    --background-color-secondary_hover: var(--color-bg-secondary_hover);
+    --background-color-secondary_subtle: var(--color-bg-secondary_subtle);
+    --background-color-tertiary: var(--color-bg-tertiary);
+    --background-color-quaternary: var(--color-bg-quaternary);
+    --background-color-brand-solid: var(--color-bg-brand-solid);
+    --background-color-active: var(--color-bg-active);
+    --background-color-disabled: var(--color-bg-disabled);
+    --background-color-disabled_subtle: var(--color-bg-disabled_subtle);
+    --background-color-overlay: var(--color-bg-overlay);
+    --background-color-brand-primary: var(--color-bg-brand-primary);
+    --background-color-brand-primary_alt: var(--color-bg-brand-primary_alt);
+    --background-color-brand-secondary: var(--color-bg-brand-secondary);
+    --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    --background-color-brand-section: var(--color-bg-brand-section);
+    --background-color-brand-section_subtle: var(--color-bg-brand-section_subtle);
+    --background-color-error-primary: var(--color-bg-error-primary);
+    --background-color-error-secondary: var(--color-bg-error-secondary);
+    --background-color-error-solid: var(--color-bg-error-solid);
+    --background-color-error-solid_hover: var(--color-bg-error-solid_hover);
+    --background-color-warning-primary: var(--color-bg-warning-primary);
+    --background-color-warning-secondary: var(--color-bg-warning-secondary);
+    --background-color-warning-solid: var(--color-bg-warning-solid);
+    --background-color-success-primary: var(--color-bg-success-primary);
+    --background-color-success-secondary: var(--color-bg-success-secondary);
+    --background-color-border-tertiary: var(--color-border-tertiary);
+    --background-color-success-solid: var(--color-bg-success-solid);
+    --background-color-border-brand: var(--color-border-brand);
+    --background-color-border-brand_alt: var(--color-border-brand_alt);
+
+    /* TEXT PROPERTY COLORS */
+    --text-color-primary: var(--color-text-primary);
+    --text-color-primary_on-brand: var(--color-text-primary_on-brand);
+    --text-color-secondary: var(--color-text-secondary);
+    --text-color-secondary_hover: var(--color-text-secondary_hover);
+    --text-color-secondary_on-brand: var(--color-text-secondary_on-brand);
+    --text-color-tertiary: var(--color-text-tertiary);
+    --text-color-tertiary_hover: var(--color-text-tertiary_hover);
+    --text-color-tertiary_on-brand: var(--color-text-tertiary_on-brand);
+    --text-color-quaternary: var(--color-text-quaternary);
+    --text-color-quaternary_on-brand: var(--color-text-quaternary_on-brand);
+    --text-color-disabled: var(--color-text-disabled);
+    --text-color-placeholder: var(--color-text-placeholder);
+    --text-color-placeholder_subtle: var(--color-text-placeholder_subtle);
+    --text-color-brand-primary: var(--color-text-brand-primary);
+    --text-color-brand-secondary: var(--color-text-brand-secondary);
+    --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
+    --text-color-brand-tertiary: var(--color-text-brand-tertiary);
+    --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
+    --text-color-error-primary: var(--color-text-error-primary);
+    --text-color-error-primary_hover: var(--color-text-error-primary_hover);
+    --text-color-warning-primary: var(--color-text-warning-primary);
+    --text-color-success-primary: var(--color-text-success-primary);
+    --text-color-tooltip-supporting-text: var(--color-tooltip-supporting-text);
+
+    /* BORDER PROPERTY COLORS */
+    --border-color-primary: var(--color-border-primary);
+    --border-color-secondary: var(--color-border-secondary);
+    --border-color-secondary_alt: var(--color-border-secondary_alt);
+    --border-color-tertiary: var(--color-border-tertiary);
+    --border-color-disabled: var(--color-border-disabled);
+    --border-color-disabled_subtle: var(--color-border-disabled_subtle);
+    --border-color-error: var(--color-border-error);
+    --border-color-error_subtle: var(--color-border-error_subtle);
+    --border-color-brand: var(--color-border-brand);
+    --border-color-brand_alt: var(--color-border-brand_alt);
+    --border-color-brand-solid: var(--color-bg-brand-solid);
+    --border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+
+    /* RING PROPERTY COLORS */
+    --ring-color-primary: var(--color-border-primary);
+    --ring-color-secondary: var(--color-border-secondary);
+    --ring-color-secondary_alt: var(--color-border-secondary_alt);
+    --ring-color-tertiary: var(--color-border-tertiary);
+    --ring-color-error: var(--color-border-error);
+    --ring-color-error_subtle: var(--color-border-error_subtle);
+    --ring-color-disabled: var(--color-border-disabled);
+    --ring-color-disabled_subtle: var(--color-border-disabled_subtle);
+    --ring-color-brand: var(--color-border-brand);
+    --ring-color-brand-solid: var(--color-bg-brand-solid);
+    --ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    --ring-color-brand_alt: var(--color-border-brand_alt);
+    --ring-color-bg-brand-solid: var(--color-bg-brand-solid);
+
+    /* OUTLINE PROPERTY COLORS */
+    --outline-color-primary: var(--color-border-primary);
+    --outline-color-secondary: var(--color-border-secondary);
+    --outline-color-secondary_alt: var(--color-border-secondary_alt);
+    --outline-color-tertiary: var(--color-border-tertiary);
+    --outline-color-error: var(--color-border-error);
+    --outline-color-error_subtle: var(--color-border-error_subtle);
+    --outline-color-disabled: var(--color-border-disabled);
+    --outline-color-disabled_subtle: var(--color-border-disabled_subtle);
+    --outline-color-brand: var(--color-border-brand);
+    --outline-color-brand-solid: var(--color-bg-brand-solid);
+    --outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    --outline-color-brand_alt: var(--color-border-brand_alt);
+}
+
+@layer base {
+    /* DARK MODE VARIABLES */
+    .dark-mode {
+        --color-alpha-white: rgb(12 14 18);
+        --color-alpha-black: rgb(255 255 255);
+
+        /* Gray colors in dark mode */
+        --color-gray-25: var(--colors-gray-dark-mode-25);
+        --color-gray-50: var(--colors-gray-dark-mode-50);
+        --color-gray-100: var(--colors-gray-dark-mode-100);
+        --color-gray-200: var(--colors-gray-dark-mode-200);
+        --color-gray-300: var(--colors-gray-dark-mode-300);
+        --color-gray-400: var(--colors-gray-dark-mode-400);
+        --color-gray-500: var(--colors-gray-dark-mode-500);
+        --color-gray-600: var(--colors-gray-dark-mode-600);
+        --color-gray-700: var(--colors-gray-dark-mode-700);
+        --color-gray-800: var(--colors-gray-dark-mode-800);
+        --color-gray-900: var(--colors-gray-dark-mode-900);
+        --color-gray-950: var(--colors-gray-dark-mode-950);
+
+        /* Text colors in dark mode */
+        --color-text-primary: var(--color-gray-50);
+        --color-text-secondary: var(--color-gray-300);
+        --color-text-secondary_hover: var(--color-gray-200);
+        --color-text-tertiary: var(--color-gray-400);
+        --color-text-tertiary_hover: var(--color-gray-300);
+        --color-text-quaternary: var(--color-gray-400);
+
+        /* Background in dark mode */
+        --color-bg-primary: var(--color-gray-950);
+        --color-bg-secondary: var(--color-gray-900);
+        --color-bg-tertiary: var(--color-gray-800);
+        --color-bg-brand-solid_hover: var(--colors-brand-500);
+        
+        /* Update Tailwind utilities for dark mode */
+        --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+        --border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+        --ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+        --outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    }
+}