@ztwoint/z-ui 0.1.46 → 0.1.49

package/dist/css/config/colors/components/badge.css

@@ -1,137 +1,137 @@
 /* FILLED (background-color) */
 .c-badge-gray {
-  background-color: var(--color-neutral-900);
+  background-color: var(--color-surface-neutral-pressed);
 }
 .c-badge-accent {
-  background-color: var(--color-accent-600);
+  background-color: var(--color-surface-accent-default);
 }
 .c-badge-danger {
-  background-color: var(--color-danger-600);
+  background-color: var(--color-surface-danger-default);
 }
 .c-badge-success {
-  background-color: var(--color-success-600);
+  background-color: var(--color-surface-success-default);
 }
 .c-badge-warning {
-  background-color: var(--color-warning-600);
+  background-color: var(--color-surface-warning-default);
 }
 .c-badge-purple {
-  background-color: var(--color-purple-600);
+  background-color: var(--color-surface-purple-default);
 }
 .c-badge-sky {
-  background-color: var(--color-sky-600);
+  background-color: var(--color-surface-accent-default);
 }
 
 /* LIGHT (background-color) */
 .c-badge-gray-light {
-  background-color: var(--color-gray-25);
+  background-color: var(--color-surface-neutral-hover);
 }
 .c-badge-accent-light {
-  background-color: var(--color-accent-50);
+  background-color: var(--alert-surface-accent);
 }
 .c-badge-danger-light {
-  background-color: var(--color-danger-50);
+  background-color: var(--alert-surface-danger);
 }
 .c-badge-success-light {
-  background-color: var(--color-success-50);
+  background-color: var(--alert-surface-success);
 }
 .c-badge-warning-light {
-  background-color: var(--color-warning-50);
+  background-color: var(--alert-surface-warning);
 }
 .c-badge-purple-light {
-  background-color: var(--color-purple-50);
+  background-color: var(--color-surface-inverted-default);
 }
 .c-badge-sky-light {
-  background-color: var(--color-sky-50);
+  background-color: var(--color-surface-inverted-default);
 }
 
 /* STROKE (border-color) */
 .c-badge-stroke-gray {
-  border-color: var(--color-gray-150);
+  border-color: var(--color-stroke-solid-medium);
 }
 .c-badge-stroke-accent {
-  border-color: var(--color-accent-100);
+  border-color: var(--alert-stroke-accent);
 }
 .c-badge-stroke-danger {
-  border-color: var(--color-danger-100);
+  border-color: var(--alert-stroke-danger);
 }
 .c-badge-stroke-success {
-  border-color: var(--color-success-100);
+  border-color: var(--alert-stroke-success);
 }
 .c-badge-stroke-warning {
-  border-color: var(--color-warning-100);
+  border-color: var(--alert-stroke-warning);
 }
 .c-badge-stroke-purple {
-  border-color: var(--color-purple-100);
+  border-color: var(--color-stroke-solid-medium);
 }
 .c-badge-stroke-sky {
-  border-color: var(--color-sky-100);
+  border-color: var(--color-stroke-solid-medium);
 }
 
 /* TEXT (color) */
 .c-badge-text-gray {
-  color: var(--color-neutral-600);
+  color: var(--color-text-neutral-secondary);
 }
 .c-badge-text-accent {
-  color: var(--color-accent-600);
+  color: var(--color-text-brand-secondary);
 }
 .c-badge-text-danger {
-  color: var(--color-danger-600);
+  color: var(--color-text-danger-secondary);
 }
 .c-badge-text-success {
-  color: var(--color-success-600);
+  color: var(--color-text-success-secondary);
 }
 .c-badge-text-warning {
-  color: var(--color-warning-600);
+  color: var(--color-text-warning-secondary);
 }
 .c-badge-text-purple {
-  color: var(--color-purple-600);
+  color: var(--color-text-purple-secondary);
 }
 .c-badge-text-sky {
-  color: var(--color-sky-600);
+  color: var(--color-text-brand-secondary);
 }
 
 /* SHAPE (fill) */
 .c-badge-shape-fill-gray {
-  fill: var(--color-neutral-600);
+  fill: var(--color-text-neutral-secondary);
 }
 .c-badge-shape-fill-accent {
-  fill: var(--color-accent-600);
+  fill: var(--color-text-brand-secondary);
 }
 .c-badge-shape-fill-danger {
-  fill: var(--color-danger-600);
+  fill: var(--color-text-danger-secondary);
 }
 .c-badge-shape-fill-success {
-  fill: var(--color-success-600);
+  fill: var(--color-text-success-secondary);
 }
 .c-badge-shape-fill-warning {
-  fill: var(--color-warning-600);
+  fill: var(--color-text-warning-secondary);
 }
 .c-badge-shape-fill-purple {
-  fill: var(--color-purple-600);
+  fill: var(--color-text-purple-secondary);
 }
 .c-badge-shape-fill-sky {
-  fill: var(--color-sky-600);
+  fill: var(--color-text-brand-secondary);
 }
 
 /* SHAPE (background-color) */
 .c-badge-shape-bg-gray {
-  background-color: var(--color-neutral-600);
+  background-color: var(--color-surface-neutral-pressed);
 }
 .c-badge-shape-bg-accent {
-  background-color: var(--color-accent-600);
+  background-color: var(--color-surface-accent-default);
 }
 .c-badge-shape-bg-danger {
-  background-color: var(--color-danger-600);
+  background-color: var(--color-surface-danger-default);
 }
 .c-badge-shape-bg-success {
-  background-color: var(--color-success-600);
+  background-color: var(--color-surface-success-default);
 }
 .c-badge-shape-bg-warning {
-  background-color: var(--color-warning-600);
+  background-color: var(--color-surface-warning-default);
 }
 .c-badge-shape-bg-purple {
-  background-color: var(--color-purple-600);
+  background-color: var(--color-surface-purple-default);
 }
 .c-badge-shape-bg-sky {
-  background-color: var(--color-sky-600);
+  background-color: var(--color-surface-accent-default);
 }

package/dist/css/config/colors/components/checkbox.css

@@ -1,7 +1,7 @@
 .c-checkbox {
-  border-color: var(--color-neutral-200);
+  border-color: var(--color-stroke-solid-high);
 }
 
 .c-checkbox-hover {
-  border-color: var(--color-neutral-300);
+  border-color: var(--color-stroke-solid-hover);
 }

package/dist/css/config/colors/components/featured-icon.css

@@ -1,80 +1,80 @@
 /* blue */
 .c-featured-icon-surface {
-  fill: var(--color-accent-100);
+  fill: var(--alert-surface-accent);
 }
 
 .c-featured-icon-icon {
-  fill: var(--color-accent-950);
+  fill: var(--color-text-brand-primary);
 }
 
 .c-featured-icon-bg-icon {
-  background-color: var(--color-accent-950);
+  background-color: var(--color-surface-accent-default);
 }
 
 /* red */
 .c-featured-icon-surface {
-  fill: var(--color-danger-100);
+  fill: var(--alert-surface-danger);
 }
 
 .c-featured-icon-icon {
-  fill: var(--color-danger-950);
+  fill: var(--color-text-danger-primary);
 }
 
 .c-featured-icon-bg-icon {
-  background-color: var(--color-danger-950);
+  background-color: var(--color-surface-danger-default);
 }
 
 /* yellow */
 .c-featured-icon-surface {
-  fill: var(--color-warning-100);
+  fill: var(--alert-surface-warning);
 }
 
 .c-featured-icon-icon {
-  fill: var(--color-warning-950);
+  fill: var(--color-text-warning-primary);
 }
 
 .c-featured-icon-bg-icon {
-  background-color: var(--color-warning-950);
+  background-color: var(--color-surface-warning-default);
 }
 
 /* green */
 .c-featured-icon-surface {
-  fill: var(--color-success-100);
+  fill: var(--alert-surface-success);
 }
 
 .c-featured-icon-icon {
-  fill: var(--color-success-950);
+  fill: var(--color-text-success-primary);
 }
 
 .c-featured-icon-bg-icon {
-  background-color: var(--color-success-950);
+  background-color: var(--color-surface-success-default);
 }
 
 /* purple */
 .c-featured-icon-surface {
-  fill: var(--color-purple-100);
+  fill: var(--color-surface-purple-default);
 }
 
 .c-featured-icon-icon {
-  fill: var(--color-purple-950);
+  fill: var(--color-text-purple-primary);
   &:icon {
     padding: 40px;
   }
 }
 
 .c-featured-icon-bg-icon {
-  background-color: var(--color-purple-950);
+  background-color: var(--color-surface-purple-default);
 }
 
 /* sky */
 .c-featured-icon-surface {
-  fill: var(--color-sky-100);
+  fill: var(--color-surface-accent-default);
 }
 
 .c-featured-icon-icon {
-  fill: var(--color-sky-950);
+  fill: var(--color-text-brand-primary);
 }
 
 .c-featured-icon-bg-icon {
-  background-color: var(--color-sky-950);
+  background-color: var(--color-surface-accent-default);
 }

package/dist/css/config/colors/components/progress-bar.css

@@ -1,7 +1,7 @@
 .c-progress-bar {
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-surface-neutral-pressed);
 }
 
 .c-progress-bar-active {
-  background-color: var(--color-accent-600);
+  background-color: var(--color-surface-accent-default);
 }

package/dist/css/config/colors/components/radio-button.css

@@ -1,7 +1,7 @@
 .c-radio-button {
-  border-color: var(--color-neutral-200);
+  border-color: var(--color-stroke-solid-high);
 }
 
 .c-radio-button-hover {
-  border-color: var(--color-neutral-300);
+  border-color: var(--color-stroke-solid-hover);
 }

package/dist/css/config/colors/components/scroll-overlay.css

@@ -1,17 +1,17 @@
 /* white */
 .c-scroll-overlay-white {
-  background-color: var(--color-neutral-00);
+  background-color: var(--color-background-neutral-default);
 }
 
 .c-scroll-overlay-white-transparent {
-  background-color: rgba(255, 255, 255, 0);
+  background-color: var(--color-alpha-two-0);
 }
 
 /* secondary */
 .c-scroll-overlay-secondary {
-  background-color: var(--color-neutral-25);
+  background-color: var(--color-background-neutral-light);
 }
 
 .c-scroll-overlay-secondary-transparent {
-  background-color: rgba(249, 250, 250, 0);
+  background-color: var(--color-alpha-two-0);
 }

package/dist/css/config/colors/components/tab.css

@@ -12,7 +12,7 @@
   bottom: 0;
   transform: translateX(-50%);
   width: calc(100% - 24px);
-  border-bottom: 0.5px solid #000000;
+  border-bottom: 0.5px solid var(--color-stroke-solid-attention);
   opacity: 0;
   transition: opacity 0.2s ease;
   z-index: 10;
@@ -25,22 +25,22 @@
 
 /* Active state for text */
 [data-slot='tabs-trigger'][data-state='active'] .tab-label {
-  color: var(--color-neutral-950) !important;
+  color: var(--color-text-neutral-primary) !important;
 }
 
 /* Active state for text */
 [data-slot='tabs-trigger'][data-state='active'] .tab-icon {
-  color: var(--color-neutral-950) !important;
+  color: var(--color-text-neutral-primary) !important;
 }
 
 /* Inactive state for text */
 [data-slot='tabs-trigger']:not([data-state='active']) .tab-label {
-  color: var(--color-neutral-600) !important;
+  color: var(--color-text-neutral-secondary) !important;
 }
 
 /* Inactive state for text */
 [data-slot='tabs-trigger']:not([data-state='active']) .tab-icon {
-  color: var(--color-neutral-600) !important;
+  color: var(--color-text-neutral-secondary) !important;
 }
 
 /* Icon size enforcement */
@@ -51,10 +51,10 @@
 
 /* Hover state for text */
 [data-slot='tabs-trigger']:hover .tab-label {
-  color: var(--color-neutral-950) !important;
+  color: var(--color-text-neutral-primary) !important;
 }
 
 /* Hover state for icon */
 [data-slot='tabs-trigger']:hover .tab-icon {
-  color: var(--color-neutral-950) !important;
+  color: var(--color-text-neutral-primary) !important;
 }

package/dist/css/config/colors/components/toggle-switch.css

@@ -1,3 +1,3 @@
 .c-toggle-switch-surface {
-  background-color: var(--color-neutral-75);
+  background-color: var(--color-surface-neutral-hover);
 }

package/dist/css/config/colors/components/toggle.css

@@ -1,25 +1,25 @@
 /* surface */
 .c-toggle-surface {
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-surface-neutral-pressed);
 }
 
 .c-toggle-surface-unactive-hover {
-  background-color: var(--color-neutral-300);
+  background-color: var(--color-surface-neutral-focused);
 }
 
 .c-toggle-surface-active {
-  background-color: var(--color-accent-600);
+  background-color: var(--color-surface-accent-default);
 }
 
 .c-toggle-surface-active-hover {
-  background-color: var(--color-accent-700);
+  background-color: var(--color-surface-accent-hover);
 }
 
 /* knob */
 .c-toggle-knob {
-  background-color: var(--color-neutral-00);
+  background-color: var(--color-surface-neutral-default);
 }
 
 .c-toggle-knob-disabled {
-  background-color: var(--color-neutral-300);
+  background-color: var(--color-surface-neutral-disabled);
 }

package/dist/css/config/colors/icons.css

@@ -1,81 +1,81 @@
 /* neutral */
 @utility icon-neutral {
-  fill: var(--color-neutral-500);
+  fill: var(--color-text-neutral-secondary);
 }
 
 @utility icon-neutral-transparent {
-  fill: var(--color-alpha-500);
+  fill: var(--color-stroke-transparent-hover);
 }
 
 @utility icon-neutral-disabled {
-  fill: var(--color-neutral-400);
+  fill: var(--color-text-neutral-muted);
 }
 
 @utility icon-neutral-pale {
-  fill: var(--color-neutral-300);
+  fill: var(--color-stroke-solid-hover);
 }
 
 @utility icon-neutral-attention {
-  fill: var(--color-neutral-950);
+  fill: var(--color-text-neutral-primary);
 }
 
 @utility icon-neutral-accent {
-  fill: var(--color-accent-600);
+  fill: var(--color-text-brand-secondary);
 }
 
 @utility icon-neutral-danger {
-  fill: var(--color-danger-600);
+  fill: var(--color-text-danger-secondary);
 }
 
 @utility icon-neutral-warning {
-  fill: var(--color-warning-600);
+  fill: var(--color-text-warning-secondary);
 }
 
 @utility icon-neutral-success {
-  fill: var(--color-success-600);
+  fill: var(--color-text-success-secondary);
 }
 
 @utility icon-neutral-purple {
-  fill: var(--color-purple-600);
+  fill: var(--color-text-purple-secondary);
 }
 
 @utility icon-neutral-sky {
-  fill: var(--color-sky-600);
+  fill: var(--color-text-brand-secondary);
 }
 
 /* inverted */
 @utility icon-inverted {
-  fill: var(--color-alpha-two-500);
+  fill: var(--color-text-inverted-secondary);
 }
 
 @utility icon-inverted-disabled {
-  fill: var(--color-alpha-two-400);
+  fill: var(--color-stroke-inverted-default);
 }
 
 @utility icon-inverted-attention {
-  fill: var(--color-neutral-00);
+  fill: var(--color-text-inverted-primary);
 }
 
 @utility icon-inverted-accent {
-  fill: var(--color-accent-500);
+  fill: var(--color-text-brand-secondary);
 }
 
 @utility icon-inverted-danger {
-  fill: var(--color-danger-500);
+  fill: var(--color-text-danger-secondary);
 }
 
 @utility icon-inverted-warning {
-  fill: var(--color-warning-500);
+  fill: var(--color-text-warning-secondary);
 }
 
 @utility icon-inverted-success {
-  fill: var(--color-success-500);
+  fill: var(--color-text-success-secondary);
 }
 
 @utility icon-inverted-purple {
-  fill: var(--color-purple-500);
+  fill: var(--color-text-purple-secondary);
 }
 
 @utility icon-inverted-sky {
-  fill: var(--color-sky-500);
+  fill: var(--color-text-brand-secondary);
 }

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

@@ -1,3 +1,3 @@
 @utility overlay {
-  background-color: var(--color-alpha-one-500);
+  background-color: var(--color-overlay-default);
 }

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

@@ -0,0 +1,44 @@
+:root {
+    --alert-surface-neutral: var(--color-neutral-50);
+    --alert-surface-accent: var(--color-blue-50);
+    --alert-surface-success: var(--color-green-50);
+    --alert-surface-warning: var(--color-amber-50);
+    --alert-surface-danger: var(--color-red-50);
+
+    --alert-stroke-neutral: var(--color-neutral-100);
+    --alert-stroke-accent: var(--color-blue-100);
+    --alert-stroke-success: var(--color-green-100);
+    --alert-stroke-warning: var(--color-amber-100);
+    --alert-stroke-danger: var(--color-red-100);
+}
+
+.dark {
+    --alert-surface-neutral: var(--color-neutral-50);
+    --alert-surface-accent: var(--color-blue-50);
+    --alert-surface-success: var(--color-green-50);
+    --alert-surface-warning: var(--color-amber-50);
+    --alert-surface-danger: var(--color-red-50);
+
+    --alert-stroke-neutral: var(--color-neutral-100);
+    --alert-stroke-accent: var(--color-blue-100);
+    --alert-stroke-success: var(--color-green-100);
+    --alert-stroke-warning: var(--color-amber-100);
+    --alert-stroke-danger: var(--color-red-100);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+    /* Alert - Surface */
+    --color-alert-surface-neutral: var(--alert-surface-neutral);
+    --color-alert-surface-accent: var(--alert-surface-accent);
+    --color-alert-surface-success: var(--alert-surface-success);
+    --color-alert-surface-warning: var(--alert-surface-warning);
+    --color-alert-surface-danger: var(--alert-surface-danger);
+
+    /* Alert - Stroke */
+    --color-alert-stroke-neutral: var(--alert-stroke-neutral);
+    --color-alert-stroke-accent: var(--alert-stroke-accent);
+    --color-alert-stroke-success: var(--alert-stroke-success);
+    --color-alert-stroke-warning: var(--alert-stroke-warning);
+    --color-alert-stroke-danger: var(--alert-stroke-danger);
+}

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

@@ -0,0 +1,51 @@
+/* Background and Overlay Colors - Design System */
+:root {
+  /* Background Colors - Neutral */
+  --background-neutral-default: var(--neutral-00);
+  --background-neutral-on-top: var(--neutral-00);
+  --background-neutral-light: var(--neutral-25);
+  --background-neutral-medium: var(--neutral-50);
+  --background-neutral-high: var(--neutral-100);
+  --background-neutral-pressed: var(--neutral-75);
+  --background-neutral-hover: var(--neutral-50);
+  --background-neutral-focused: var(--neutral-25);
+
+  --background-inverted-elevated: rgb(255, 255, 255, 0.1);
+
+  /* Overlay */
+  --overlay-default: var(--alpha-one-500);
+}
+
+.dark {
+  /* Background Colors - Neutral - Dark Mode */
+  --background-neutral-default: var(--neutral-00);
+  --background-neutral-on-top: var(--neutral-50);
+  --background-neutral-light: var(--neutral-25);
+  --background-neutral-medium: var(--neutral-25);
+  --background-neutral-high: var(--neutral-100);
+  --background-neutral-pressed: var(--neutral-75);
+  --background-neutral-hover: var(--neutral-50);
+  --background-neutral-focused: var(--neutral-25);
+
+  --background-inverted-elevated: #1414141A;
+
+  /* Overlay - Dark Mode */
+  --overlay-default: var(--neutral-50);
+}
+
+@theme inline {
+  /* Background Colors - Neutral */
+  --color-background-neutral-default: var(--background-neutral-default);
+  --color-background-neutral-on-top: var(--background-neutral-on-top);
+  --color-background-neutral-light: var(--background-neutral-light);
+  --color-background-neutral-medium: var(--background-neutral-medium);
+  --color-background-neutral-high: var(--background-neutral-high);
+  --color-background-neutral-pressed: var(--background-neutral-pressed);
+  --color-background-neutral-hover: var(--background-neutral-hover);
+  --color-background-neutral-focused: var(--background-neutral-focused);
+
+  --color-background-inverted-elevated: var(--background-inverted-elevated);
+
+  /* Overlay */
+  --color-overlay-default: var(--overlay-default);
+}