@ztwoint/z-ui 0.1.131 → 0.1.132

package/dist/css/config/colors/backgrounds.css

@@ -0,0 +1,32 @@
+/* neutral */
+@utility bg-neutral-default {
+  background-color: var(--color-background-neutral-default);
+}
+
+@utility bg-neutral-on-top {
+  background-color: var(--color-background-neutral-on-top);
+}
+
+@utility bg-neutral-light {
+  background-color: var(--color-background-neutral-light);
+}
+
+@utility bg-neutral-high {
+  background-color: var(--color-background-neutral-high);
+}
+
+@utility bg-neutral-medium {
+  background-color: var(--color-background-neutral-medium);
+}
+
+@utility bg-neutral-inverted-elevated {
+  background-color: var(--color-surface-inverted-default);
+}
+
+@utility bg-neutral-inverted-attention {
+  background-color: var(--color-surface-inverted-hover);
+}
+
+@utility bg-neutral-inverted-brand {
+  background-color: var(--color-surface-accent-default);
+}

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

@@ -0,0 +1,53 @@
+/* blue */
+.c-avatar-blue-surface {
+  background-color: var(--alert-surface-accent);
+}
+
+.c-avatar-blue-name {
+  color: var(--color-text-brand-primary);
+}
+
+/* red */
+.c-avatar-red-surface {
+  background-color: var(--alert-surface-danger);
+}
+
+.c-avatar-red-name {
+  color: var(--color-text-danger-primary);
+}
+
+/* yellow */
+.c-avatar-yellow-surface {
+  background-color: var(--alert-surface-warning);
+}
+
+.c-avatar-yellow-name {
+  color: var(--color-text-warning-primary);
+}
+
+/* green */
+.c-avatar-green-surface {
+  background-color: var(--alert-surface-success);
+}
+
+.c-avatar-green-name {
+  color: var(--color-text-success-primary);
+}
+
+/* purple */
+.c-avatar-purple-surface {
+  background-color: var(--color-surface-purple-default);
+}
+
+.c-avatar-purple-name {
+  color: var(--color-text-purple-primary);
+}
+
+/* sky */
+.c-avatar-sky-surface {
+  background-color: var(--color-surface-accent-default);
+}
+
+.c-avatar-sky-name {
+  color: var(--color-text-brand-primary);
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,59 @@
+/* Tab component specific styles */
+
+/* Base underline for all tabs */
+[data-slot='tabs-trigger'] {
+  position: relative;
+}
+
+[data-slot='tabs-trigger']::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: calc(100% - 24px);
+  border-bottom: 0.5px solid var(--color-stroke-solid-attention);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+/* Active state for underline */
+[data-slot='tabs-trigger'][data-state='active']::after {
+  opacity: 1;
+}
+
+/* Active state for text */
+[data-slot='tabs-trigger'][data-state='active'] .tab-label {
+  color: var(--color-text-neutral-primary) !important;
+}
+
+/* Active state for text */
+[data-slot='tabs-trigger'][data-state='active'] .tab-icon {
+  color: var(--color-text-neutral-primary) !important;
+}
+
+/* Inactive state for text */
+[data-slot='tabs-trigger']:not([data-state='active']) .tab-label {
+  color: var(--color-text-neutral-secondary) !important;
+}
+
+/* Inactive state for text */
+[data-slot='tabs-trigger']:not([data-state='active']) .tab-icon {
+  color: var(--color-text-neutral-secondary) !important;
+}
+
+/* Icon size enforcement */
+[data-slot='tabs-trigger'] svg {
+  width: 14px !important;
+  height: 14px !important;
+}
+
+/* Hover state for text */
+[data-slot='tabs-trigger']:hover .tab-label {
+  color: var(--color-text-neutral-primary) !important;
+}
+
+/* Hover state for icon */
+[data-slot='tabs-trigger']:hover .tab-icon {
+  color: var(--color-text-neutral-primary) !important;
+}

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

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

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

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

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

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

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

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

package/dist/css/config/colors/shape.css

@@ -0,0 +1,163 @@
+/* shape: neutral */
+@utility shape-neutral-default {
+  fill: var(--color-text-neutral-secondary);
+}
+
+@utility shape-neutral-transparent {
+  fill: var(--color-stroke-transparent-hover);
+}
+
+@utility shape-neutral-disabled {
+  fill: var(--color-text-neutral-muted);
+}
+
+@utility shape-neutral-pale {
+  fill: var(--color-stroke-solid-hover);
+}
+
+@utility shape-neutral-attention {
+  fill: var(--color-text-neutral-primary);
+}
+
+@utility shape-neutral-accent {
+  fill: var(--color-text-brand-secondary);
+}
+
+@utility shape-neutral-danger {
+  fill: var(--color-text-danger-secondary);
+}
+
+@utility shape-neutral-warning {
+  fill: var(--color-text-warning-secondary);
+}
+
+@utility shape-neutral-success {
+  fill: var(--color-text-success-secondary);
+}
+
+@utility shape-neutral-purple {
+  fill: var(--color-text-purple-secondary);
+}
+
+@utility shape-neutral-sky {
+  fill: var(--color-text-brand-secondary);
+}
+
+/* shape: inverted */
+@utility shape-inverted-default {
+  fill: var(--color-text-inverted-secondary);
+}
+
+@utility shape-inverted-disabled {
+  fill: var(--color-stroke-inverted-default);
+}
+
+@utility shape-inverted-attention {
+  fill: var(--color-text-inverted-primary);
+}
+
+@utility shape-inverted-accent {
+  fill: var(--color-text-brand-secondary);
+}
+
+@utility shape-inverted-danger {
+  fill: var(--color-text-danger-secondary);
+}
+
+@utility shape-inverted-warning {
+  fill: var(--color-text-warning-secondary);
+}
+
+@utility shape-inverted-success {
+  fill: var(--color-text-success-secondary);
+}
+
+@utility shape-inverted-purple {
+  fill: var(--color-text-purple-secondary);
+}
+
+@utility shape-inverted-sky {
+  fill: var(--color-text-brand-secondary);
+}
+
+/* shape-bg: neutral */
+@utility shape-bg-neutral-default {
+  background-color: var(--color-surface-neutral-pressed);
+}
+
+@utility shape-bg-neutral-transparent {
+  background-color: var(--color-stroke-transparent-hover);
+}
+
+@utility shape-bg-neutral-disabled {
+  background-color: var(--color-surface-neutral-disabled);
+}
+
+@utility shape-bg-neutral-pale {
+  background-color: var(--color-surface-neutral-hover);
+}
+
+@utility shape-bg-neutral-attention {
+  background-color: var(--color-surface-neutral-pressed);
+}
+
+@utility shape-bg-neutral-accent {
+  background-color: var(--color-surface-accent-default);
+}
+
+@utility shape-bg-neutral-danger {
+  background-color: var(--color-surface-danger-default);
+}
+
+@utility shape-bg-neutral-warning {
+  background-color: var(--color-surface-warning-default);
+}
+
+@utility shape-bg-neutral-success {
+  background-color: var(--color-surface-success-default);
+}
+
+@utility shape-bg-neutral-purple {
+  background-color: var(--color-surface-purple-default);
+}
+
+@utility shape-bg-neutral-sky {
+  background-color: var(--color-surface-accent-default);
+}
+
+/* shape-bg: inverted */
+@utility shape-bg-inverted-default {
+  background-color: var(--color-surface-inverted-default);
+}
+
+@utility shape-bg-inverted-disabled {
+  background-color: var(--color-surface-inverted-disabled);
+}
+
+@utility shape-bg-inverted-attention {
+  background-color: var(--color-surface-inverted-pressed);
+}
+
+@utility shape-bg-inverted-accent {
+  background-color: var(--color-surface-accent-default);
+}
+
+@utility shape-bg-inverted-danger {
+  background-color: var(--color-surface-danger-default);
+}
+
+@utility shape-bg-inverted-warning {
+  background-color: var(--color-surface-warning-default);
+}
+
+@utility shape-bg-inverted-success {
+  background-color: var(--color-surface-success-default);
+}
+
+@utility shape-bg-inverted-purple {
+  background-color: var(--color-surface-purple-default);
+}
+
+@utility shape-bg-inverted-sky {
+  background-color: var(--color-surface-accent-default);
+}