@ztwoint/z-ui 0.1.46 → 0.1.49

package/dist/css/config/colors/semantic/base.css

@@ -0,0 +1,395 @@
+/* Parent/Base Colors - Design System Foundation */
+
+/* TODO: A lot of these overlap with tailwind's defaults. We should only append the changes */
+
+:root {
+    /* Neutral Colors */
+    --neutral-00: #ffffff;
+    --neutral-25: #fafafa;
+    --neutral-50: #f6f6f6;
+    --neutral-75: #f0f0f0;
+    --neutral-100: #e7e7e7;
+    --neutral-150: #e0e0e0;
+    --neutral-200: #d1d1d1;
+    --neutral-300: #b0b0b0;
+    --neutral-400: #888888;
+    --neutral-500: #6d6d6d;
+    --neutral-600: #5d5d5d;
+    --neutral-700: #4f4f4f;
+    --neutral-800: #454545;
+    --neutral-900: #3d3d3d;
+    --neutral-950: #000000;
+
+    /* Blue Colors */
+    --blue-50: #eff6ff;
+    --blue-100: #dbeafe;
+    --blue-200: #bfdbfe;
+    --blue-300: #93c5fd;
+    --blue-400: #60a5fa;
+    --blue-500: #3b82f6;
+    --blue-600: #2563eb;
+    --blue-700: #1d4ed8;
+    --blue-800: #1e40af;
+    --blue-900: #1e3a8a;
+    --blue-950: #172554;
+
+    /* Red Colors */
+    --red-50: #fef2f2;
+    --red-100: #fee2e2;
+    --red-200: #fecaca;
+    --red-300: #fca5a5;
+    --red-400: #f87171;
+    --red-500: #ef4444;
+    --red-600: #dc2626;
+    --red-700: #b91c1c;
+    --red-800: #991b1b;
+    --red-900: #7f1d1d;
+    --red-950: #450a0a;
+
+    /* Amber Colors */
+    --amber-50: #fffbeb;
+    --amber-100: #fef3c7;
+    --amber-200: #fde68a;
+    --amber-300: #fcd34d;
+    --amber-400: #fbbf24;
+    --amber-500: #f59e0b;
+    --amber-600: #d97706;
+    --amber-700: #b45309;
+    --amber-800: #92400e;
+    --amber-900: #78350f;
+    --amber-950: #451a03;
+
+    /* Green Colors */
+    --green-50: #f0fdf4;
+    --green-100: #dcfce7;
+    --green-200: #bbf7d0;
+    --green-300: #86efac;
+    --green-400: #4ade80;
+    --green-500: #22c55e;
+    --green-600: #16a34a;
+    --green-700: #15803d;
+    --green-800: #166534;
+    --green-900: #14532d;
+    --green-950: #052e16;
+
+    /* Violet Colors */
+    --violet-50: #faf5ff;
+    --violet-100: #ede9fe;
+    --violet-200: #ddd6fe;
+    --violet-300: #c4b5fd;
+    --violet-400: #a78bfa;
+    --violet-500: #8b5cf6;
+    --violet-600: #7c3aed;
+    --violet-700: #6d28d9;
+    --violet-800: #5b21b6;
+    --violet-900: #4c1d95;
+    --violet-950: #2e1065;
+
+    /* Sky Colors */
+    --sky-50: #f0f9ff;
+    --sky-100: #e0f2fe;
+    --sky-200: #bae6fd;
+    --sky-300: #7dd3fc;
+    --sky-400: #38bdf8;
+    --sky-500: #0ea5e9;
+    --sky-600: #0284c7;
+    --sky-700: #0369a1;
+    --sky-800: #075985;
+    --sky-900: #0c4a6e;
+    --sky-950: #082f49;
+
+    /* Alpha One (Black with opacity in light mode) */
+    --alpha-one-0: rgba(0, 0, 0, 0);
+    --alpha-one-50: rgba(0, 0, 0, 0.05);
+    --alpha-one-100: rgba(0, 0, 0, 0.1);
+    --alpha-one-150: rgba(0, 0, 0, 0.15);
+    --alpha-one-200: rgba(0, 0, 0, 0.2);
+    --alpha-one-300: rgba(0, 0, 0, 0.3);
+    --alpha-one-400: rgba(0, 0, 0, 0.4);
+    --alpha-one-500: rgba(0, 0, 0, 0.5);
+    --alpha-one-600: rgba(0, 0, 0, 0.6);
+    --alpha-one-700: rgba(0, 0, 0, 0.7);
+    --alpha-one-800: rgba(0, 0, 0, 0.8);
+    --alpha-one-900: rgba(0, 0, 0, 0.9);
+
+    /* Alpha Two (White with opacity in light mode) */
+    --alpha-two-0: rgba(255, 255, 255, 0);
+    --alpha-two-50: rgba(255, 255, 255, 0.05);
+    --alpha-two-100: rgba(255, 255, 255, 0.1);
+    --alpha-two-150: rgba(255, 255, 255, 0.15);
+    --alpha-two-200: rgba(255, 255, 255, 0.2);
+    --alpha-two-300: rgba(255, 255, 255, 0.3);
+    --alpha-two-400: rgba(255, 255, 255, 0.4);
+    --alpha-two-500: rgba(255, 255, 255, 0.5);
+    --alpha-two-600: rgba(255, 255, 255, 0.6);
+    --alpha-two-700: rgba(255, 255, 255, 0.7);
+    --alpha-two-800: rgba(255, 255, 255, 0.8);
+    --alpha-two-900: rgba(255, 255, 255, 0.9);
+
+    --shadow-custom:
+        0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+    --shadow-default:
+        0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+
+    --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
+}
+
+.dark {
+    /* Neutral Colors - Dark Mode */
+    --neutral-00: #141414;
+    --neutral-25: rgba(255, 255, 255, 0.025);
+    --neutral-50: rgba(255, 255, 255, 0.05);
+    --neutral-75: rgba(255, 255, 255, 0.075);
+    --neutral-100: rgba(255, 255, 255, 0.1);
+    --neutral-150: rgba(255, 255, 255, 0.15);
+    --neutral-200: rgba(255, 255, 255, 0.2);
+    --neutral-300: rgba(255, 255, 255, 0.3);
+    --neutral-400: rgba(255, 255, 255, 0.4);
+    --neutral-500: rgba(255, 255, 255, 0.5);
+    --neutral-600: rgba(255, 255, 255, 0.6);
+    --neutral-700: rgba(255, 255, 255, 0.7);
+    --neutral-800: rgba(255, 255, 255, 0.8);
+    --neutral-900: rgba(255, 255, 255, 0.9);
+    --neutral-950: #ffffff;
+
+    /* Blue Colors - Dark Mode */
+    --blue-50: #181f2b;
+    --blue-100: #203558;
+    --blue-200: #284b85;
+    --blue-300: #2f61b2;
+    --blue-400: #3777df;
+    --blue-500: #3b82f6;
+    --blue-600: #4f8ef7;
+    --blue-700: #76a8f9;
+    --blue-800: #9dc1fb;
+    --blue-900: #c4d9fc;
+    --blue-950: #ebf2fe;
+
+    /* Red Colors - Dark Mode */
+    --red-50: #2a1919;
+    --red-100: #562222;
+    --red-200: #812c2c;
+    --red-300: #ad3636;
+    --red-400: #d93f3f;
+    --red-500: #ef4444;
+    --red-600: #f15757;
+    --red-700: #f47c7c;
+    --red-800: #f7a1a1;
+    --red-900: #fac7c7;
+    --red-950: #fdecec;
+
+    /* Amber Colors - Dark Mode */
+    --amber-50: #2b2213;
+    --amber-100: #583d11;
+    --amber-200: #845910;
+    --amber-300: #b1750e;
+    --amber-400: #de900c;
+    --amber-500: #f59e0b;
+    --amber-600: #f6a823;
+    --amber-700: #f8bb54;
+    --amber-800: #facf85;
+    --amber-900: #fce2b6;
+    --amber-950: #fef5e7;
+
+    /* Green Colors - Dark Mode */
+    --green-50: #15261b;
+    --green-100: #18492a;
+    --green-200: #1b6d39;
+    --green-300: #1e9048;
+    --green-400: #21b357;
+    --green-500: #22c55e;
+    --green-600: #38cb6e;
+    --green-700: #64d68e;
+    --green-800: #90e2ae;
+    --green-900: #bdeecf;
+    --green-950: #e9f9ef;
+
+    /* Violet Colors - Dark Mode */
+    --violet-50: #201b2b;
+    --violet-100: #382a58;
+    --violet-200: #503885;
+    --violet-300: #6746b2;
+    --violet-400: #7f55df;
+    --violet-500: #8b5cf6;
+    --violet-600: #976cf7;
+    --violet-700: #ae8df9;
+    --violet-800: #c5adfb;
+    --violet-900: #dccefc;
+    --violet-950: #f3effe;
+
+    /* Sky Colors - Dark Mode */
+    --sky-50: #132329;
+    --sky-100: #124054;
+    --sky-200: #115d7f;
+    --sky-300: #107aa9;
+    --sky-400: #0f96d4;
+    --sky-500: #0ea5e9;
+    --sky-600: #26aeeb;
+    --sky-700: #56c0f0;
+    --sky-800: #86d2f4;
+    --sky-900: #b7e4f8;
+    --sky-950: #e7f6fd;
+
+    /* Alpha One (White with opacity in dark mode) */
+    --alpha-one-0: rgba(255, 255, 255, 0);
+    --alpha-one-50: rgba(255, 255, 255, 0.05);
+    --alpha-one-100: rgba(255, 255, 255, 0.1);
+    --alpha-one-150: rgba(255, 255, 255, 0.15);
+    --alpha-one-200: rgba(255, 255, 255, 0.2);
+    --alpha-one-300: rgba(255, 255, 255, 0.3);
+    --alpha-one-400: rgba(255, 255, 255, 0.4);
+    --alpha-one-500: rgba(255, 255, 255, 0.5);
+    --alpha-one-600: rgba(255, 255, 255, 0.6);
+    --alpha-one-700: rgba(255, 255, 255, 0.7);
+    --alpha-one-800: rgba(255, 255, 255, 0.8);
+    --alpha-one-900: rgba(255, 255, 255, 0.9);
+
+    /* Alpha Two (Black with opacity in dark mode) */
+    --alpha-two-0: rgba(0, 0, 0, 0);
+    --alpha-two-50: rgba(0, 0, 0, 0.05);
+    --alpha-two-100: rgba(0, 0, 0, 0.1);
+    --alpha-two-150: rgba(0, 0, 0, 0.15);
+    --alpha-two-200: rgba(0, 0, 0, 0.2);
+    --alpha-two-300: rgba(0, 0, 0, 0.3);
+    --alpha-two-400: rgba(0, 0, 0, 0.4);
+    --alpha-two-500: rgba(0, 0, 0, 0.5);
+    --alpha-two-600: rgba(0, 0, 0, 0.6);
+    --alpha-two-700: rgba(0, 0, 0, 0.7);
+    --alpha-two-800: rgba(0, 0, 0, 0.8);
+    --alpha-two-900: rgba(0, 0, 0, 0.9);
+
+    --shadow-custom:
+        0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+    --shadow-default:
+        0px 1px 2px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
+
+    --shadow-button-disabled: 0px 0px 0px 0.5px var(--neutral-100), 0px 1px 2px 0px transparent;
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+    /* Neutral Colors */
+    --color-neutral-00: var(--neutral-00);
+    --color-neutral-25: var(--neutral-25);
+    --color-neutral-50: var(--neutral-50);
+    --color-neutral-75: var(--neutral-75);
+    --color-neutral-100: var(--neutral-100);
+    --color-neutral-150: var(--neutral-150);
+    --color-neutral-200: var(--neutral-200);
+    --color-neutral-300: var(--neutral-300);
+    --color-neutral-400: var(--neutral-400);
+    --color-neutral-500: var(--neutral-500);
+    --color-neutral-600: var(--neutral-600);
+    --color-neutral-700: var(--neutral-700);
+    --color-neutral-800: var(--neutral-800);
+    --color-neutral-900: var(--neutral-900);
+    --color-neutral-950: var(--neutral-950);
+
+    /* Blue Colors */
+    --color-blue-50: var(--blue-50);
+    --color-blue-100: var(--blue-100);
+    --color-blue-200: var(--blue-200);
+    --color-blue-300: var(--blue-300);
+    --color-blue-400: var(--blue-400);
+    --color-blue-500: var(--blue-500);
+    --color-blue-600: var(--blue-600);
+    --color-blue-700: var(--blue-700);
+    --color-blue-800: var(--blue-800);
+    --color-blue-900: var(--blue-900);
+    --color-blue-950: var(--blue-950);
+
+    /* Red Colors */
+    --color-red-50: var(--red-50);
+    --color-red-100: var(--red-100);
+    --color-red-200: var(--red-200);
+    --color-red-300: var(--red-300);
+    --color-red-400: var(--red-400);
+    --color-red-500: var(--red-500);
+    --color-red-600: var(--red-600);
+    --color-red-700: var(--red-700);
+    --color-red-800: var(--red-800);
+    --color-red-900: var(--red-900);
+    --color-red-950: var(--red-950);
+
+    /* Amber Colors */
+    --color-amber-50: var(--amber-50);
+    --color-amber-100: var(--amber-100);
+    --color-amber-200: var(--amber-200);
+    --color-amber-300: var(--amber-300);
+    --color-amber-400: var(--amber-400);
+    --color-amber-500: var(--amber-500);
+    --color-amber-600: var(--amber-600);
+    --color-amber-700: var(--amber-700);
+    --color-amber-800: var(--amber-800);
+    --color-amber-900: var(--amber-900);
+    --color-amber-950: var(--amber-950);
+
+    /* Green Colors */
+    --color-green-50: var(--green-50);
+    --color-green-100: var(--green-100);
+    --color-green-200: var(--green-200);
+    --color-green-300: var(--green-300);
+    --color-green-400: var(--green-400);
+    --color-green-500: var(--green-500);
+    --color-green-600: var(--green-600);
+    --color-green-700: var(--green-700);
+    --color-green-800: var(--green-800);
+    --color-green-900: var(--green-900);
+    --color-green-950: var(--green-950);
+
+    /* Violet Colors */
+    --color-violet-50: var(--violet-50);
+    --color-violet-100: var(--violet-100);
+    --color-violet-200: var(--violet-200);
+    --color-violet-300: var(--violet-300);
+    --color-violet-400: var(--violet-400);
+    --color-violet-500: var(--violet-500);
+    --color-violet-600: var(--violet-600);
+    --color-violet-700: var(--violet-700);
+    --color-violet-800: var(--violet-800);
+    --color-violet-900: var(--violet-900);
+    --color-violet-950: var(--violet-950);
+
+    /* Sky Colors */
+    --color-sky-50: var(--sky-50);
+    --color-sky-100: var(--sky-100);
+    --color-sky-200: var(--sky-200);
+    --color-sky-300: var(--sky-300);
+    --color-sky-400: var(--sky-400);
+    --color-sky-500: var(--sky-500);
+    --color-sky-600: var(--sky-600);
+    --color-sky-700: var(--sky-700);
+    --color-sky-800: var(--sky-800);
+    --color-sky-900: var(--sky-900);
+    --color-sky-950: var(--sky-950);
+
+    /* Alpha One Colors */
+    --color-alpha-one-0: var(--alpha-one-0);
+    --color-alpha-one-50: var(--alpha-one-50);
+    --color-alpha-one-100: var(--alpha-one-100);
+    --color-alpha-one-150: var(--alpha-one-150);
+    --color-alpha-one-200: var(--alpha-one-200);
+    --color-alpha-one-300: var(--alpha-one-300);
+    --color-alpha-one-400: var(--alpha-one-400);
+    --color-alpha-one-500: var(--alpha-one-500);
+    --color-alpha-one-600: var(--alpha-one-600);
+    --color-alpha-one-700: var(--alpha-one-700);
+    --color-alpha-one-800: var(--alpha-one-800);
+    --color-alpha-one-900: var(--alpha-one-900);
+
+    /* Alpha Two Colors */
+    --color-alpha-two-0: var(--alpha-two-0);
+    --color-alpha-two-50: var(--alpha-two-50);
+    --color-alpha-two-100: var(--alpha-two-100);
+    --color-alpha-two-150: var(--alpha-two-150);
+    --color-alpha-two-200: var(--alpha-two-200);
+    --color-alpha-two-300: var(--alpha-two-300);
+    --color-alpha-two-400: var(--alpha-two-400);
+    --color-alpha-two-500: var(--alpha-two-500);
+    --color-alpha-two-600: var(--alpha-two-600);
+    --color-alpha-two-700: var(--alpha-two-700);
+    --color-alpha-two-800: var(--alpha-two-800);
+    --color-alpha-two-900: var(--alpha-two-900);
+
+    --shadow-button-disabled: var(--shadow-button-disabled);
+}

package/dist/css/config/colors/semantic/button.css

@@ -0,0 +1,131 @@
+/* Button Colors - Design System */
+:root {
+  /* Button Colors */
+  --btn-primary-neutral-surface-default: var(--neutral-950);
+  --btn-primary-neutral-surface-hover: var(--neutral-900);
+  --btn-primary-neutral-surface-pressed: var(--neutral-500);
+  --btn-primary-neutral-surface-disabled: var(--neutral-50);
+
+  --btn-primary-neutral-stroke-default: transparent;
+  --btn-primary-neutral-stroke-hover: transparent;
+  --btn-primary-neutral-stroke-pressed: transparent;
+  --btn-primary-neutral-stroke-disabled: var(--neutral-100);
+
+  --btn-primary-brand-surface-default: var(--blue-600);
+  --btn-primary-brand-surface-hover: var(--blue-700);
+  --btn-primary-brand-surface-pressed: var(--blue-500);
+  --btn-primary-brand-surface-disabled: var(--neutral-50);
+
+  --btn-primary-brand-stroke-default: transparent;
+  --btn-primary-brand-stroke-hover: transparent;
+  --btn-primary-brand-stroke-pressed: transparent;
+  --btn-primary-brand-stroke-disabled: var(--neutral-100);
+
+  --btn-primary-danger-surface-default: var(--red-600);
+  --btn-primary-danger-surface-hover: var(--red-700);
+  --btn-primary-danger-surface-pressed: var(--red-500);
+  --btn-primary-danger-surface-disabled: var(--neutral-50);
+
+  --btn-primary-danger-stroke-default: transparent;
+  --btn-primary-danger-stroke-hover: transparent;
+  --btn-primary-danger-stroke-pressed: transparent;
+  --btn-primary-danger-stroke-disabled: var(--neutral-100);
+
+  --btn-secondary-surface-default: var(--neutral-00);
+  --btn-secondary-surface-hover: var(--neutral-50);
+  --btn-secondary-surface-pressed: var(--neutral-75);
+  --btn-secondary-surface-disabled: var(--neutral-50);
+
+  --btn-secondary-stroke-default: var(--neutral-150);
+  --btn-secondary-stroke-hover: var(--neutral-200);
+  --btn-secondary-stroke-pressed: transparent;
+  --btn-secondary-stroke-disabled: var(--neutral-100);
+
+  /* box-shadow: 0 1px 2px 0 var(--drop-shadow-5), 0 0 0 var(--stroke-default) var(--button-secondary-stroke-default); */
+}
+
+.dark {
+  /* Button Colors - Dark Mode */
+  --btn-primary-neutral-surface-default: var(--neutral-950);
+  --btn-primary-neutral-surface-hover: var(--neutral-800);
+  --btn-primary-neutral-surface-pressed: var(--neutral-500);
+  --btn-primary-neutral-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  --btn-primary-neutral-stroke-default: transparent;
+  --btn-primary-neutral-stroke-hover: transparent;
+  --btn-primary-neutral-stroke-pressed: transparent;
+  --btn-primary-neutral-stroke-disabled: var(--neutral-50);
+
+  --btn-primary-brand-surface-default: var(--blue-500);
+  --btn-primary-brand-surface-hover: var(--blue-700);
+  --btn-primary-brand-surface-pressed: var(--blue-400);
+  --btn-primary-brand-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  --btn-primary-brand-stroke-default: transparent;
+  --btn-primary-brand-stroke-hover: transparent;
+  --btn-primary-brand-stroke-pressed: transparent;
+  --btn-primary-brand-stroke-disabled: var(--neutral-50);
+
+  --btn-primary-danger-surface-default: var(--red-500);
+  --btn-primary-danger-surface-hover: var(--red-700);
+  --btn-primary-danger-surface-pressed: var(--red-400);
+  --btn-primary-danger-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  --btn-primary-danger-stroke-default: transparent;
+  --btn-primary-danger-stroke-hover: transparent;
+  --btn-primary-danger-stroke-pressed: transparent;
+  --btn-primary-danger-stroke-disabled: var(--neutral-50);
+
+  --btn-secondary-surface-default: var(--neutral-50);
+  --btn-secondary-surface-hover: var(--neutral-150);
+  --btn-secondary-surface-pressed: var(--neutral-75);
+  --btn-secondary-surface-disabled: rgba(0, 0, 0, 0.2);
+
+  --btn-secondary-stroke-default: var(--neutral-100);
+  --btn-secondary-stroke-hover: var(--neutral-200);
+  --btn-secondary-stroke-pressed: transparent;
+  --btn-secondary-stroke-disabled: var(--neutral-50);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+  /* Button Primary Neutral */
+  --color-btn-primary-neutral-surface-default: var(--btn-primary-neutral-surface-default);
+  --color-btn-primary-neutral-surface-hover: var(--btn-primary-neutral-surface-hover);
+  --color-btn-primary-neutral-surface-pressed: var(--btn-primary-neutral-surface-pressed);
+  --color-btn-primary-neutral-surface-disabled: var(--btn-primary-neutral-surface-disabled);
+  --color-btn-primary-neutral-stroke-default: var(--btn-primary-neutral-stroke-default);
+  --color-btn-primary-neutral-stroke-hover: var(--btn-primary-neutral-stroke-hover);
+  --color-btn-primary-neutral-stroke-pressed: var(--btn-primary-neutral-stroke-pressed);
+  --color-btn-primary-neutral-stroke-disabled: var(--btn-primary-neutral-stroke-disabled);
+
+  /* Button Primary Brand */
+  --color-btn-primary-brand-surface-default: var(--btn-primary-brand-surface-default);
+  --color-btn-primary-brand-surface-hover: var(--btn-primary-brand-surface-hover);
+  --color-btn-primary-brand-surface-pressed: var(--btn-primary-brand-surface-pressed);
+  --color-btn-primary-brand-surface-disabled: var(--btn-primary-brand-surface-disabled);
+  --color-btn-primary-brand-stroke-default: var(--btn-primary-brand-stroke-default);
+  --color-btn-primary-brand-stroke-hover: var(--btn-primary-brand-stroke-hover);
+  --color-btn-primary-brand-stroke-pressed: var(--btn-primary-brand-stroke-pressed);
+  --color-btn-primary-brand-stroke-disabled: var(--btn-primary-brand-stroke-disabled);
+
+  /* Button Primary Danger */
+  --color-btn-primary-danger-surface-default: var(--btn-primary-danger-surface-default);
+  --color-btn-primary-danger-surface-hover: var(--btn-primary-danger-surface-hover);
+  --color-btn-primary-danger-surface-pressed: var(--btn-primary-danger-surface-pressed);
+  --color-btn-primary-danger-surface-disabled: var(--btn-primary-danger-surface-disabled);
+  --color-btn-primary-danger-stroke-default: var(--btn-primary-danger-stroke-default);
+  --color-btn-primary-danger-stroke-hover: var(--btn-primary-danger-stroke-hover);
+  --color-btn-primary-danger-stroke-pressed: var(--btn-primary-danger-stroke-pressed);
+  --color-btn-primary-danger-stroke-disabled: var(--btn-primary-danger-stroke-disabled);
+
+  /* Button Secondary */
+  --color-btn-secondary-surface-default: var(--btn-secondary-surface-default);
+  --color-btn-secondary-surface-hover: var(--btn-secondary-surface-hover);
+  --color-btn-secondary-surface-pressed: var(--btn-secondary-surface-pressed);
+  --color-btn-secondary-surface-disabled: var(--btn-secondary-surface-disabled);
+  --color-btn-secondary-stroke-default: var(--btn-secondary-stroke-default);
+  --color-btn-secondary-stroke-hover: var(--btn-secondary-stroke-hover);
+  --color-btn-secondary-stroke-pressed: var(--btn-secondary-stroke-pressed);
+  --color-btn-secondary-stroke-disabled: var(--btn-secondary-stroke-disabled);
+}

package/dist/css/config/colors/semantic/drop-shadow.css

@@ -0,0 +1,30 @@
+:root {
+    --drop-shadow-5: var(--alpha-one-50);
+    --drop-shadow-10: var(--alpha-one-100);
+    --drop-shadow-15: var(--alpha-one-150);
+    --drop-shadow-20: var(--alpha-one-200);
+    --drop-shadow-30: var(--alpha-one-300);
+    --drop-shadow-40: var(--alpha-one-400);
+    --drop-shadow-50: var(--alpha-one-500);
+}
+
+.dark {
+    --drop-shadow-5: transparent;
+    --drop-shadow-10: transparent;
+    --drop-shadow-15: transparent;
+    --drop-shadow-20: transparent;
+    --drop-shadow-30: transparent;
+    --drop-shadow-40: transparent;
+    --drop-shadow-50: transparent;
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+    --color-drop-shadow-5: var(--drop-shadow-5);
+    --color-drop-shadow-10: var(--drop-shadow-10);
+    --color-drop-shadow-15: var(--drop-shadow-15);
+    --color-drop-shadow-20: var(--drop-shadow-20);
+    --color-drop-shadow-30: var(--drop-shadow-30);
+    --color-drop-shadow-40: var(--drop-shadow-40);
+    --color-drop-shadow-50: var(--drop-shadow-50);
+}

package/dist/css/config/colors/semantic/dropdown.css

@@ -0,0 +1,12 @@
+:root {
+    --dropdown-surface: var(--color-neutral-00);
+}
+
+.dark {
+    --dropdown-surface: rgba(255, 255, 255, 0.075);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+    --color-dropdown-surface: var(--dropdown-surface);
+}

package/dist/css/config/colors/semantic/index.css

@@ -0,0 +1,16 @@
+/* Semantic Colors - Design System Foundation */
+/* Split into modular files */
+@import './base.css';
+@import './alert.css';
+@import './background.css';
+@import './button.css';
+@import './dropdown.css';
+@import './drop-shadow.css';
+@import './input.css';
+@import './stroke.css';
+@import './surface.css';
+@import './text.css';
+@import './tooltip.css';
+@import './overlay.css';
+
+

package/dist/css/config/colors/semantic/input.css

@@ -0,0 +1,56 @@
+
+
+:root {
+    /* Input - Surface */
+    --input-surface-default: var(--neutral-00);
+    --input-surface-hover: var(--neutral-50);
+    --input-surface-pressed: var(--neutral-100);
+    --input-surface-active: var(--neutral-00);
+    --input-surface-filled: var(--neutral-25);
+    --input-surface-disabled: var(--neutral-50);
+  
+    /* Input - Stroke */
+    --input-stroke-default: var(--neutral-150);
+    --input-stroke-hover: var(--neutral-200);
+    --input-stroke-pressed: transparent;
+    --input-stroke-active: var(--neutral-950);
+    --input-stroke-filled: var(--neutral-150);
+    --input-stroke-disabled: var(--neutral-100);
+  }
+  
+  .dark {
+    /* Input - Surface - Dark Mode */
+    --input-surface-default: var(--neutral-50);
+    --input-surface-hover: var(--neutral-100);
+    --input-surface-pressed: var(--neutral-150);
+    --input-surface-active: var(--neutral-50);
+    --input-surface-filled: rgba(0, 0, 0, 0.2);
+    --input-surface-disabled: rgba(0, 0, 0, 0.2);
+  
+    /* Input - Stroke - Dark Mode */
+    --input-stroke-default: var(--neutral-100);
+    --input-stroke-hover: var(--neutral-200);
+    --input-stroke-pressed: transparent;
+    --input-stroke-active: var(--neutral-950);
+    --input-stroke-filled: var(--neutral-50);
+    --input-stroke-disabled: var(--neutral-50);
+  }
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+    /* Input - Surface */
+    --color-input-surface-default: var(--input-surface-default);
+    --color-input-surface-hover: var(--input-surface-hover);
+    --color-input-surface-pressed: var(--input-surface-pressed);
+    --color-input-surface-active: var(--input-surface-active);
+    --color-input-surface-filled: var(--input-surface-filled);
+    --color-input-surface-disabled: var(--input-surface-disabled);
+  
+    /* Input - Stroke */
+    --color-input-stroke-default: var(--input-stroke-default);
+    --color-input-stroke-hover: var(--input-stroke-hover);
+    --color-input-stroke-pressed: var(--input-stroke-pressed);
+    --color-input-stroke-active: var(--input-stroke-active);
+    --color-input-stroke-filled: var(--input-stroke-filled);
+    --color-input-stroke-disabled: var(--input-stroke-disabled);
+  }

package/dist/css/config/colors/semantic/overlay.css

@@ -0,0 +1,13 @@
+
+:root {
+    --overlay-default: var(--alpha-one-500);
+}
+
+.dark {
+    --overlay-default: var(--alpha-one-200);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+    --color-overlay-default: var(--overlay-default);
+}