@sigx/zero-daisyui 0.2.0-beta.1 → 0.2.0-beta.2

package/dist/lynx/components/steps.css

@@ -1,9 +1,30 @@
 .zx-steps__root {
     --steps-accent: var(--color-primary);
     --steps-accent-content: var(--color-primary-content);
+    --steps-ind: calc(var(--size-selector) * 7);
     --steps-font: var(--text-sm);
 }
 
+.zx-root .zx-steps__root {
+    --steps-accent-ink: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root {
+    --steps-accent-ink: #6567ff;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root {
+    --steps-accent-ink: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root {
+    --steps-accent-ink: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root {
+    --steps-accent-ink: #fb8a62;
+}
+
 .zx-steps__root {
     display: flex;
     align-items: stretch;
@@ -37,6 +58,26 @@
     color: var(--color-base-content);
 }
 
+.zx-root .zx-steps__item.zx-s-inactive {
+    color: #08080aa6;
+}
+
+.zx-root.zx-theme-dark .zx-steps__item.zx-s-inactive {
+    color: #848b8fa6;
+}
+
+.zx-root.zx-theme-dim .zx-steps__item.zx-s-inactive {
+    color: #627177a6;
+}
+
+.zx-root.zx-theme-nord .zx-steps__item.zx-s-inactive {
+    color: #151920a6;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__item.zx-s-inactive {
+    color: #576674a6;
+}
+
 .zx-steps__item.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -67,6 +108,7 @@
     inline-size: var(--steps-ind);
     block-size: var(--steps-ind);
     border-radius: 9999px;
+    font-size: calc(var(--steps-ind) * 0.45);
     font-weight: var(--weight-semibold);
     line-height: var(--leading-none);
     position: relative;
@@ -104,12 +146,16 @@
 }
 
 .zx-steps__separator.zx-o-horizontal {
+    inset-block-start: calc(var(--space-xs) + var(--steps-ind) / 2);
     inset-inline-start: 50%;
     inline-size: 100%;
     block-size: var(--border);
 }
 
 .zx-steps__separator.zx-o-vertical {
+    inset-inline-start: calc(var(--space-xs) + (var(--steps-ind) - var(--border)) / 2);
+    inset-block-start: calc(var(--space-xs) + var(--steps-ind));
+    inset-block-end: calc(var(--space-xs) * -1);
     inline-size: var(--border);
 }
 
@@ -122,50 +168,240 @@
     font-weight: var(--weight-normal);
 }
 
+.zx-root .zx-steps__description {
+    color: #0a0a0cb3;
+}
+
+.zx-root.zx-theme-dark .zx-steps__description {
+    color: #929a9eb3;
+}
+
+.zx-root.zx-theme-dim .zx-steps__description {
+    color: #6d7e84b3;
+}
+
+.zx-root.zx-theme-nord .zx-steps__description {
+    color: #181c24b3;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__description {
+    color: #617180b3;
+}
+
 .zx-steps__root.zx-a-color-primary {
     --steps-accent: var(--color-primary);
     --steps-accent-content: var(--color-primary-content);
 }
 
+.zx-root .zx-steps__root.zx-a-color-primary {
+    --steps-accent-ink: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-primary {
+    --steps-accent-ink: #6567ff;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-primary {
+    --steps-accent-ink: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-primary {
+    --steps-accent-ink: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-primary {
+    --steps-accent-ink: #fb8a62;
+}
+
 .zx-steps__root.zx-a-color-secondary {
     --steps-accent: var(--color-secondary);
     --steps-accent-content: var(--color-secondary-content);
 }
 
+.zx-root .zx-steps__root.zx-a-color-secondary {
+    --steps-accent-ink: #ad316f;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-secondary {
+    --steps-accent-ink: #fa7cb6;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-secondary {
+    --steps-accent-ink: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-secondary {
+    --steps-accent-ink: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-secondary {
+    --steps-accent-ink: #e68aac;
+}
+
 .zx-steps__root.zx-a-color-accent {
     --steps-accent: var(--color-accent);
     --steps-accent-content: var(--color-accent-content);
 }
 
+.zx-root .zx-steps__root.zx-a-color-accent {
+    --steps-accent-ink: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-accent {
+    --steps-accent-ink: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-accent {
+    --steps-accent-ink: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-accent {
+    --steps-accent-ink: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-accent {
+    --steps-accent-ink: #ab9fe8;
+}
+
 .zx-steps__root.zx-a-color-neutral {
     --steps-accent: var(--color-neutral);
     --steps-accent-content: var(--color-neutral-content);
 }
 
+.zx-root .zx-steps__root.zx-a-color-neutral {
+    --steps-accent-ink: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-neutral {
+    --steps-accent-ink: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-neutral {
+    --steps-accent-ink: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-neutral {
+    --steps-accent-ink: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-neutral {
+    --steps-accent-ink: #667a8a;
+}
+
 .zx-steps__root.zx-a-color-info {
     --steps-accent: var(--color-info);
     --steps-accent-content: var(--color-info-content);
 }
 
+.zx-root .zx-steps__root.zx-a-color-info {
+    --steps-accent-ink: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-info {
+    --steps-accent-ink: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-info {
+    --steps-accent-ink: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-info {
+    --steps-accent-ink: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-info {
+    --steps-accent-ink: #91d4e3;
+}
+
 .zx-steps__root.zx-a-color-success {
     --steps-accent: var(--color-success);
     --steps-accent-content: var(--color-success-content);
 }
 
+.zx-root .zx-steps__root.zx-a-color-success {
+    --steps-accent-ink: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-success {
+    --steps-accent-ink: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-success {
+    --steps-accent-ink: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-success {
+    --steps-accent-ink: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-success {
+    --steps-accent-ink: #a6cebe;
+}
+
 .zx-steps__root.zx-a-color-warning {
     --steps-accent: var(--color-warning);
     --steps-accent-content: var(--color-warning-content);
 }
 
+.zx-root .zx-steps__root.zx-a-color-warning {
+    --steps-accent-ink: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-warning {
+    --steps-accent-ink: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-warning {
+    --steps-accent-ink: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-warning {
+    --steps-accent-ink: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-warning {
+    --steps-accent-ink: #c5c1b7;
+}
+
 .zx-steps__root.zx-a-color-error {
     --steps-accent: var(--color-error);
     --steps-accent-content: var(--color-error-content);
 }
 
+.zx-root .zx-steps__root.zx-a-color-error {
+    --steps-accent-ink: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-error {
+    --steps-accent-ink: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-error {
+    --steps-accent-ink: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-error {
+    --steps-accent-ink: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-error {
+    --steps-accent-ink: #f2bbc0;
+}
+
 .zx-steps__root.zx-a-size-xs {
+    --steps-ind: calc(var(--size-selector) * 5);
     --steps-font: var(--text-xs);
 }
 
+.zx-steps__root.zx-a-size-sm {
+    --steps-ind: calc(var(--size-selector) * 6);
+}
+
+.zx-steps__root.zx-a-size-lg {
+    --steps-ind: calc(var(--size-selector) * 8);
+}
+
 .zx-steps__root.zx-a-size-xl {
+    --steps-ind: calc(var(--size-selector) * 9);
     --steps-font: var(--text-md);
 }

package/dist/lynx/components/swap.css

@@ -43,6 +43,166 @@
     transform: rotate(-45deg);
 }
 
+.zx-root .zx-swap__root.zx-a-color-primary {
+    --swap-ink: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-swap__root.zx-a-color-primary {
+    --swap-ink: #6567ff;
+}
+
+.zx-root.zx-theme-dim .zx-swap__root.zx-a-color-primary {
+    --swap-ink: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-swap__root.zx-a-color-primary {
+    --swap-ink: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-swap__root.zx-a-color-primary {
+    --swap-ink: #fb8a62;
+}
+
+.zx-root .zx-swap__root.zx-a-color-secondary {
+    --swap-ink: #ad316f;
+}
+
+.zx-root.zx-theme-dark .zx-swap__root.zx-a-color-secondary {
+    --swap-ink: #fa7cb6;
+}
+
+.zx-root.zx-theme-dim .zx-swap__root.zx-a-color-secondary {
+    --swap-ink: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-swap__root.zx-a-color-secondary {
+    --swap-ink: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-swap__root.zx-a-color-secondary {
+    --swap-ink: #e68aac;
+}
+
+.zx-root .zx-swap__root.zx-a-color-accent {
+    --swap-ink: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-swap__root.zx-a-color-accent {
+    --swap-ink: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-swap__root.zx-a-color-accent {
+    --swap-ink: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-swap__root.zx-a-color-accent {
+    --swap-ink: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-swap__root.zx-a-color-accent {
+    --swap-ink: #ab9fe8;
+}
+
+.zx-root .zx-swap__root.zx-a-color-neutral {
+    --swap-ink: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-swap__root.zx-a-color-neutral {
+    --swap-ink: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-swap__root.zx-a-color-neutral {
+    --swap-ink: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-swap__root.zx-a-color-neutral {
+    --swap-ink: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-swap__root.zx-a-color-neutral {
+    --swap-ink: #667a8a;
+}
+
+.zx-root .zx-swap__root.zx-a-color-info {
+    --swap-ink: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-swap__root.zx-a-color-info {
+    --swap-ink: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-swap__root.zx-a-color-info {
+    --swap-ink: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-swap__root.zx-a-color-info {
+    --swap-ink: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-swap__root.zx-a-color-info {
+    --swap-ink: #91d4e3;
+}
+
+.zx-root .zx-swap__root.zx-a-color-success {
+    --swap-ink: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-swap__root.zx-a-color-success {
+    --swap-ink: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-swap__root.zx-a-color-success {
+    --swap-ink: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-swap__root.zx-a-color-success {
+    --swap-ink: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-swap__root.zx-a-color-success {
+    --swap-ink: #a6cebe;
+}
+
+.zx-root .zx-swap__root.zx-a-color-warning {
+    --swap-ink: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-swap__root.zx-a-color-warning {
+    --swap-ink: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-swap__root.zx-a-color-warning {
+    --swap-ink: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-swap__root.zx-a-color-warning {
+    --swap-ink: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-swap__root.zx-a-color-warning {
+    --swap-ink: #c5c1b7;
+}
+
+.zx-root .zx-swap__root.zx-a-color-error {
+    --swap-ink: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-swap__root.zx-a-color-error {
+    --swap-ink: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-swap__root.zx-a-color-error {
+    --swap-ink: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-swap__root.zx-a-color-error {
+    --swap-ink: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-swap__root.zx-a-color-error {
+    --swap-ink: #f2bbc0;
+}
+
 .zx-swap__root.zx-a-size-xs {
     --swap-size: var(--text-sm);
 }

package/dist/lynx/components/switch.css

@@ -1,7 +1,29 @@
 .zx-switch__root {
+    --switch-size: calc(var(--size-selector) * 6);
+    --switch-p: calc(var(--switch-size) * 0.125);
     --switch-accent: var(--color-primary);
 }
 
+.zx-root .zx-switch__root {
+    --switch-ink: #07070899;
+}
+
+.zx-root.zx-theme-dark .zx-switch__root {
+    --switch-ink: #767d8099;
+}
+
+.zx-root.zx-theme-dim .zx-switch__root {
+    --switch-ink: #57656a99;
+}
+
+.zx-root.zx-theme-nord .zx-switch__root {
+    --switch-ink: #12151b99;
+}
+
+.zx-root.zx-theme-sunset .zx-switch__root {
+    --switch-ink: #4d5b6799;
+}
+
 .zx-switch__root {
     display: inline-flex;
     align-items: center;
@@ -22,8 +44,10 @@
     vertical-align: middle;
     flex-shrink: 0;
     box-sizing: border-box;
+    width: calc((var(--switch-size) * 2) - (var(--border) + var(--switch-p)) * 2);
     height: var(--switch-size);
     padding: var(--switch-p);
+    --switch-radius-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
     border: var(--border) solid currentColor;
     color: var(--switch-ink);
     user-select: none;
@@ -53,6 +77,7 @@
     height: 100%;
     border-radius: var(--radius-selector);
     background-color: currentColor;
+    background-size: auto, calc(var(--noise) * 100%);
     background-image: none, var(--fx-noise);
     transition: background-color var(--duration-instant) var(--ease-standard);
 }
@@ -62,6 +87,22 @@
     font-weight: var(--weight-medium);
 }
 
+.zx-switch__root.zx-a-size-xs {
+    --switch-size: calc(var(--size-selector) * 4);
+}
+
+.zx-switch__root.zx-a-size-sm {
+    --switch-size: calc(var(--size-selector) * 5);
+}
+
+.zx-switch__root.zx-a-size-lg {
+    --switch-size: calc(var(--size-selector) * 7);
+}
+
+.zx-switch__root.zx-a-size-xl {
+    --switch-size: calc(var(--size-selector) * 8);
+}
+
 .zx-switch__root.zx-a-color-primary {
     --switch-accent: var(--color-primary);
 }