@sigx/zero-daisyui 0.2.0-beta.3 → 0.2.0-beta.5

package/dist/lynx/components/tabs.css

@@ -5,24 +5,23 @@
 }
 
 .zx-tabs__list {
-    display: inline-flex;
+    display: flex;
     align-self: flex-start;
-    padding: var(--space-xs);
-    gap: var(--space-xs);
-    background: var(--color-base-200);
-    border-radius: var(--radius-field);
 }
 
 .zx-tabs__tab {
     appearance: none;
     border: none;
     background: transparent;
-    padding: var(--space-sm) var(--space-xl);
+    --tab-py: var(--space-sm);
+    --tab-px: var(--space-xl);
+    padding: var(--tab-py) var(--tab-px);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
-    border-radius: calc(var(--radius-field) - 0.25rem);
     cursor: pointer;
+    position: relative;
     transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
+    --tab-active-ink: var(--color-base-content);
 }
 
 .zx-root .zx-tabs__tab {
@@ -46,9 +45,7 @@
 }
 
 .zx-tabs__tab.zx-s-active {
-    background: var(--color-base-100);
     color: var(--color-base-content);
-    box-shadow: var(--shadow-sm);
 }
 
 .zx-tabs__tab.zx-f-disabled {
@@ -67,60 +64,425 @@
 
 .zx-tabs__tab.zx-a-size-xs {
     font-size: var(--text-xs);
-    padding: var(--space-2xs) var(--space-md);
+    --tab-py: var(--space-2xs);
+    --tab-px: var(--space-md);
 }
 
 .zx-tabs__tab.zx-a-size-sm {
     font-size: var(--text-xs);
-    padding: var(--space-xs) var(--space-lg);
+    --tab-py: var(--space-xs);
+    --tab-px: var(--space-lg);
 }
 
 .zx-tabs__tab.zx-a-size-lg {
     font-size: var(--text-md);
-    padding: var(--space-md) var(--space-2xl);
+    --tab-py: var(--space-md);
+    --tab-px: var(--space-2xl);
 }
 
 .zx-tabs__tab.zx-a-size-xl {
     font-size: var(--text-lg);
-    padding: var(--space-lg) var(--space-2xl);
+    --tab-py: var(--space-lg);
+    --tab-px: var(--space-2xl);
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #6567ff;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #fb8a62;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #6567ff;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #fb8a62;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #ad316f;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #fa7cb6;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #e68aac;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #ad316f;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #fa7cb6;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #e68aac;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #ab9fe8;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #ab9fe8;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #667a8a;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #667a8a;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #91d4e3;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #91d4e3;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #a6cebe;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #a6cebe;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #c5c1b7;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #c5c1b7;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #f2bbc0;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #f2bbc0;
+}
+
+.zx-tabs__tab.zx-a-variant-border {
+    border-radius: var(--radius-field);
+    border-bottom: 3px solid transparent;
+}
+
+.zx-tabs__tab.zx-a-variant-border.zx-s-active {
+    border-bottom-color: var(--tab-active-ink);
+}
+
+.zx-tabs__tab.zx-a-variant-lift {
+    --tab-radius-limit: var(--radius-field);
+    border-start-start-radius: var(--tab-radius-limit);
+    border-start-end-radius: var(--tab-radius-limit);
+    border-width: 0 0 var(--border) 0;
+    border-style: solid;
+    border-color: var(--color-base-300);
+    padding: calc(var(--tab-py) + var(--border)) var(--tab-px) var(--tab-py);
+}
+
+.zx-tabs__tab.zx-a-variant-lift.zx-s-active {
+    background: var(--color-base-100);
+    border-width: var(--border) var(--border) 0 var(--border);
+    padding: var(--tab-py) calc(var(--tab-px) - var(--border)) calc(var(--tab-py) + var(--border));
+}
+
+.zx-tabs__list.zx-a-variant-box {
+    padding: var(--space-xs);
+    gap: var(--space-xs);
+    background: var(--color-base-200);
+    border-radius: var(--radius-field);
+}
+
+.zx-tabs__tab.zx-a-variant-box {
+    border-radius: calc(var(--radius-field) - 0.25rem);
+}
+
+.zx-tabs__tab.zx-a-variant-box.zx-s-active {
+    background: var(--color-base-100);
+    box-shadow: var(--shadow-sm);
 }
 
-.zx-tabs__tab.zx-a-color-primary.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-primary.zx-s-active {
     background: var(--color-primary);
     color: var(--color-primary-content);
 }
 
-.zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-secondary.zx-s-active {
     background: var(--color-secondary);
     color: var(--color-secondary-content);
 }
 
-.zx-tabs__tab.zx-a-color-accent.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-accent.zx-s-active {
     background: var(--color-accent);
     color: var(--color-accent-content);
 }
 
-.zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-neutral.zx-s-active {
     background: var(--color-neutral);
     color: var(--color-neutral-content);
 }
 
-.zx-tabs__tab.zx-a-color-info.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-info.zx-s-active {
     background: var(--color-info);
     color: var(--color-info-content);
 }
 
-.zx-tabs__tab.zx-a-color-success.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-success.zx-s-active {
     background: var(--color-success);
     color: var(--color-success-content);
 }
 
-.zx-tabs__tab.zx-a-color-warning.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-warning.zx-s-active {
     background: var(--color-warning);
     color: var(--color-warning-content);
 }
 
-.zx-tabs__tab.zx-a-color-error.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-error.zx-s-active {
     background: var(--color-error);
     color: var(--color-error-content);
 }

package/dist/lynx/components/textarea.css

@@ -3,7 +3,7 @@
 }
 
 .zx-textarea__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
 }

package/dist/lynx/components/timeline.css

@@ -1,6 +1,5 @@
 .zx-timeline__root {
     --timeline-accent: var(--color-base-content);
-    --timeline-marker-size: calc(var(--size-selector) * 3);
 }
 
 .zx-timeline__root {
@@ -32,18 +31,42 @@
 }
 
 .zx-timeline__marker {
-    inline-size: var(--timeline-marker-size);
-    block-size: var(--timeline-marker-size);
+    inline-size: calc(var(--size-selector) * 3);
+    block-size: calc(var(--size-selector) * 3);
     box-sizing: border-box;
     border-radius: 9999px;
     background: var(--timeline-accent);
-    border: calc(var(--timeline-marker-size) / 2) solid var(--timeline-accent);
+    border: calc((var(--size-selector) * 3) / 2) solid var(--timeline-accent);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0;
 }
 
+.zx-timeline__marker.zx-a-size-xs {
+    inline-size: calc(var(--size-selector) * 2);
+    block-size: calc(var(--size-selector) * 2);
+    border: calc((var(--size-selector) * 2) / 2) solid var(--timeline-accent);
+}
+
+.zx-timeline__marker.zx-a-size-sm {
+    inline-size: calc(var(--size-selector) * 2.5);
+    block-size: calc(var(--size-selector) * 2.5);
+    border: calc((var(--size-selector) * 2.5) / 2) solid var(--timeline-accent);
+}
+
+.zx-timeline__marker.zx-a-size-lg {
+    inline-size: calc(var(--size-selector) * 3.5);
+    block-size: calc(var(--size-selector) * 3.5);
+    border: calc((var(--size-selector) * 3.5) / 2) solid var(--timeline-accent);
+}
+
+.zx-timeline__marker.zx-a-size-xl {
+    inline-size: calc(var(--size-selector) * 4);
+    block-size: calc(var(--size-selector) * 4);
+    border: calc((var(--size-selector) * 4) / 2) solid var(--timeline-accent);
+}
+
 .zx-timeline__connector {
     background: var(--color-base-300);
 }
@@ -108,34 +131,18 @@
     --timeline-accent: var(--color-error);
 }
 
-.zx-timeline__marker.zx-a-size-xs {
-    --timeline-marker-size: calc(var(--size-selector) * 2);
-}
-
 .zx-timeline__content.zx-a-size-xs {
     font-size: var(--text-xs);
 }
 
-.zx-timeline__marker.zx-a-size-sm {
-    --timeline-marker-size: calc(var(--size-selector) * 2.5);
-}
-
 .zx-timeline__content.zx-a-size-sm {
     font-size: var(--text-xs);
 }
 
-.zx-timeline__marker.zx-a-size-lg {
-    --timeline-marker-size: calc(var(--size-selector) * 3.5);
-}
-
 .zx-timeline__content.zx-a-size-lg {
     font-size: var(--text-md);
 }
 
-.zx-timeline__marker.zx-a-size-xl {
-    --timeline-marker-size: calc(var(--size-selector) * 4);
-}
-
 .zx-timeline__content.zx-a-size-xl {
     font-size: var(--text-md);
 }

package/dist/lynx/components/toggle-group.css

@@ -4,7 +4,7 @@
 }
 
 .zx-toggle-group__root {
-    display: inline-flex;
+    display: flex;
     background: var(--color-base-200);
     border: var(--border) solid var(--color-base-300);
     border-radius: var(--radius-field);
@@ -22,7 +22,7 @@
 
 .zx-toggle-group__item {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;

package/dist/lynx/components/toggle.css

@@ -6,7 +6,7 @@
 
 .zx-toggle__root {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;

package/dist/lynx/components/tooltip.css

@@ -1,6 +1,6 @@
 .zx-tooltip__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;