@ztwoint/z-ui 0.1.27 → 0.1.29

package/dist/css/config/colors/defaults.css

@@ -1,143 +1,384 @@
-@theme {
-  --color-neutral-00: #ffffff;
-  --color-neutral-25: #fafafa;
-  --color-neutral-50: #f6f6f6;
-  --color-neutral-100: #e7e7e7;
-  --color-neutral-150: #e0e0e0;
-  --color-neutral-200: #d1d1d1;
-  --color-neutral-300: #b0b0b0;
-  --color-neutral-400: #888888;
-  --color-neutral-500: #6d6d6d;
-  --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4f4f4f;
-  --color-neutral-800: #454545;
-  --color-neutral-900: #3d3d3d;
-  --color-neutral-950: #000000;
-
-  --color-accent-50: #eff6ff;
-  --color-accent-100: #dbeafe;
-  --color-accent-200: #bfdbfe;
-  --color-accent-300: #93c5fd;
-  --color-accent-400: #60a5fa;
-  --color-accent-500: #3b82f6;
-  --color-accent-600: #2563eb;
-  --color-accent-700: #1d4ed8;
-  --color-accent-800: #1e40af;
-  --color-accent-900: #1e3a8a;
-  --color-accent-950: #172554;
-
-  --color-red-50: #fef2f2;
-  --color-red-100: #fee2e2;
-  --color-red-200: #fecaca;
-  --color-red-300: #fca5a5;
-  --color-red-400: #f87171;
-  --color-red-500: #ef4444;
-  --color-red-600: #dc2626;
-  --color-red-700: #b91c1c;
-  --color-red-800: #991b1b;
-  --color-red-900: #7f1d1d;
-  --color-red-950: #450a0a;
-
-  --color-amber-50: #fffbeb;
-  --color-amber-100: #fef3c7;
-  --color-amber-200: #fde68a;
-  --color-amber-300: #fcd34d;
-  --color-amber-400: #fbbf24;
-  --color-amber-500: #f59e0b;
-  --color-amber-600: #d97706;
-  --color-amber-700: #b45309;
-  --color-amber-800: #92400e;
-  --color-amber-900: #78350f;
-  --color-amber-950: #451a03;
-
-  --color-green-50: #f0fdf4;
-  --color-green-100: #dcfce7;
-  --color-green-200: #bbf7d0;
-  --color-green-300: #86efac;
-  --color-green-400: #4ade80;
-  --color-green-500: #22c55e;
-  --color-green-600: #16a34a;
-  --color-green-700: #15803d;
-  --color-green-800: #166534;
-  --color-green-900: #14532d;
-  --color-green-950: #052e16;
-
-  --color-violet-50: #faf5ff;
-  --color-violet-100: #ede9fe;
-  --color-violet-200: #ddd6fe;
-  --color-violet-300: #c4b5fd;
-  --color-violet-400: #a78bfa;
-  --color-violet-500: #8b5cf6;
-  --color-violet-600: #7c3aed;
-  --color-violet-700: #6d28d9;
-  --color-violet-800: #5b21b6;
-  --color-violet-900: #4c1d95;
-  --color-violet-950: #2e1065;
-
-  --color-sky-50: #f0f9ff;
-  --color-sky-100: #e0f2fe;
-  --color-sky-200: #bae6fd;
-  --color-sky-300: #7dd3fc;
-  --color-sky-400: #38bdf8;
-  --color-sky-500: #0ea5e9;
-  --color-sky-600: #0284c7;
-  --color-sky-700: #0369a1;
-  --color-sky-800: #075985;
-  --color-sky-900: #0c4a6e;
-  --color-sky-950: #082f49;
-
-  --color-alpha-one-00: rgba(0, 0, 0, 0);
-  --color-alpha-one-50: rgba(0, 0, 0, 0.05);
-  --color-alpha-one-100: rgba(0, 0, 0, 0.1);
-  --color-alpha-one-150: rgba(0, 0, 0, 0.15);
-  --color-alpha-one-200: rgba(0, 0, 0, 0.2);
-  --color-alpha-one-300: rgba(0, 0, 0, 0.3);
-  --color-alpha-one-400: rgba(0, 0, 0, 0.4);
-  --color-alpha-one-500: rgba(0, 0, 0, 0.5);
-  --color-alpha-one-600: rgba(0, 0, 0, 0.6);
-  --color-alpha-one-700: rgba(0, 0, 0, 0.7);
-  --color-alpha-one-800: rgba(0, 0, 0, 0.8);
-  --color-alpha-one-900: rgba(0, 0, 0, 0.9);
-
-  --color-alpha-two-00: rgba(255, 255, 255, 0);
-  --color-alpha-two-50: rgba(255, 255, 255, 0.05);
-  --color-alpha-two-100: rgba(255, 255, 255, 0.1);
-  --color-alpha-two-150: rgba(255, 255, 255, 0.15);
-  --color-alpha-two-200: rgba(255, 255, 255, 0.2);
-  --color-alpha-two-300: rgba(255, 255, 255, 0.3);
-  --color-alpha-two-400: rgba(255, 255, 255, 0.4);
-  --color-alpha-two-500: rgba(255, 255, 255, 0.5);
-  --color-alpha-two-600: rgba(255, 255, 255, 0.6);
-  --color-alpha-two-700: rgba(255, 255, 255, 0.7);
-  --color-alpha-two-800: rgba(255, 255, 255, 0.8);
-  --color-alpha-two-900: rgba(255, 255, 255, 0.9);
-
-  --color-purple-50: #faf5ff;
-  --color-purple-100: #ede9fe;
-  --color-purple-200: #ddd6fe;
-  --color-purple-300: #c4b5fd;
-  --color-purple-400: #a78bfa;
-  --color-purple-500: #8b5cf6;
-  --color-purple-600: #7c3aed;
-  --color-purple-700: #6d28d9;
-  --color-purple-800: #5b21b6;
-  --color-purple-900: #4c1d95;
-  --color-purple-950: #2e1065;
-
-  --color-purple-alt-50: #201b2b;
-  --color-purple-alt-100: #382a58;
-  --color-purple-alt-200: #503885;
-  --color-purple-alt-300: #6746b2;
-  --color-purple-alt-400: #7f55df;
-  --color-purple-alt-500: #8b5cf6;
-  --color-purple-alt-600: #976cf7;
-  --color-purple-alt-700: #ae8df9;
-  --color-purple-alt-800: #c5adfb;
-  --color-purple-alt-900: #dccefc;
-  --color-purple-alt-950: #f3efff;
+/* Parent/Base Colors - Design System Foundation */
+
+:root {
+  /* Neutral Colors */
+  --neutral-0: #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);
+}
+
+.dark {
+  /* Neutral Colors - Dark Mode */
+  --neutral-0: #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);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+  /* Neutral Colors */
+  --color-neutral-0: var(--neutral-0);
+  --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-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 1px 2px 0px var(--color-neutral-950), 0px 0px 0px 0.5px var(--color-alpha-two-50);
 }