@sigx/zero-daisyui 0.4.0 → 0.6.0

package/dist/css/tokens.css

@@ -15,9 +15,9 @@
     :where(:root) {
         color-scheme: light dark;
         --color-primary: light-dark(oklch(45% 0.24 277.023), oklch(58% 0.233 277.117));
-        --color-primary-content: light-dark(oklch(93% 0.034 272.788), oklch(96% 0.018 272.314));
+        --color-primary-content: light-dark(oklch(93% 0.034 272.788), oklch(98.9% 0.005 272.314));
         --color-secondary: oklch(65% 0.241 354.308);
-        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-secondary-content: oklch(24.2% 0.028 342.258);
         --color-accent: oklch(77% 0.152 181.912);
         --color-accent-content: oklch(38% 0.063 188.416);
         --color-neutral: oklch(14% 0.005 285.823);
@@ -34,14 +34,14 @@
         --color-base-200: light-dark(oklch(98% 0 0), oklch(23.26% 0.014 253.1));
         --color-base-300: light-dark(oklch(95% 0 0), oklch(21.15% 0.012 254.09));
         --color-base-content: light-dark(oklch(21% 0.006 285.885), oklch(97.807% 0.029 256.847));
-        --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
-        --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100));
-        --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100));
-        --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100));
-        --color-info-soft: color-mix(in oklab, var(--color-info) 12%, var(--color-base-100));
-        --color-success-soft: color-mix(in oklab, var(--color-success) 12%, var(--color-base-100));
-        --color-warning-soft: color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100));
-        --color-error-soft: color-mix(in oklab, var(--color-error) 12%, var(--color-base-100));
+        --color-primary-soft: light-dark(color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100)));
+        --color-secondary-soft: light-dark(color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-secondary) 16%, var(--color-base-100)));
+        --color-accent-soft: light-dark(color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-accent) 16%, var(--color-base-100)));
+        --color-neutral-soft: light-dark(color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-neutral) 16%, var(--color-base-100)));
+        --color-info-soft: light-dark(color-mix(in oklab, var(--color-info) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-info) 16%, var(--color-base-100)));
+        --color-success-soft: light-dark(color-mix(in oklab, var(--color-success) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-success) 16%, var(--color-base-100)));
+        --color-warning-soft: light-dark(color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-warning) 16%, var(--color-base-100)));
+        --color-error-soft: light-dark(color-mix(in oklab, var(--color-error) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-error) 16%, var(--color-base-100)));
         --radius-selector: 0.5rem;
         --radius-field: 0.25rem;
         --radius-box: 0.5rem;
@@ -98,7 +98,7 @@
         --color-primary: oklch(45% 0.24 277.023);
         --color-primary-content: oklch(93% 0.034 272.788);
         --color-secondary: oklch(65% 0.241 354.308);
-        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-secondary-content: oklch(24.2% 0.028 342.258);
         --color-accent: oklch(77% 0.152 181.912);
         --color-accent-content: oklch(38% 0.063 188.416);
         --color-neutral: oklch(14% 0.005 285.823);
@@ -128,9 +128,9 @@
     [data-theme="dark"] {
         color-scheme: dark;
         --color-primary: oklch(58% 0.233 277.117);
-        --color-primary-content: oklch(96% 0.018 272.314);
+        --color-primary-content: oklch(98.9% 0.005 272.314);
         --color-secondary: oklch(65% 0.241 354.308);
-        --color-secondary-content: oklch(94% 0.028 342.258);
+        --color-secondary-content: oklch(24.2% 0.028 342.258);
         --color-accent: oklch(77% 0.152 181.912);
         --color-accent-content: oklch(38% 0.063 188.416);
         --color-neutral: oklch(14% 0.005 285.823);

package/dist/lynx/components/accordion.css

@@ -8,6 +8,11 @@
     gap: var(--space-md);
 }
 
+.zx-accordion__root.zx-o-horizontal {
+    flex-direction: row;
+    align-items: start;
+}
+
 .zx-accordion__item {
     interpolate-size: allow-keywords;
     border: var(--border) solid var(--color-base-300);

package/dist/lynx/components/alert.css

@@ -59,6 +59,26 @@
     outline-offset: 2px;
 }
 
+.zx-root .zx-alert__close.zx-f-pressed {
+    background: #18181b2e;
+}
+
+.zx-root.zx-theme-dark .zx-alert__close.zx-f-pressed {
+    background: #ecf9ff2e;
+}
+
+.zx-root.zx-theme-dim .zx-alert__close.zx-f-pressed {
+    background: #b2ccd62e;
+}
+
+.zx-root.zx-theme-nord .zx-alert__close.zx-f-pressed {
+    background: #2e34402e;
+}
+
+.zx-root.zx-theme-sunset .zx-alert__close.zx-f-pressed {
+    background: #9fb9d02e;
+}
+
 .zx-alert__root.zx-a-color-primary {
     --alert-tint: var(--color-primary-soft);
 }

package/dist/lynx/components/button.css

@@ -65,6 +65,11 @@
     outline-offset: 2px;
 }
 
+.zx-button__root.zx-f-pressed {
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
 .zx-button__root.zx-a-color-primary {
     --btn-accent: var(--color-primary);
     --btn-on-accent: var(--color-primary-content);

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

@@ -0,0 +1,209 @@
+.zx-checkbox-group__root {
+    --checkbox-group-accent: var(--color-base-content);
+}
+
+.zx-checkbox-group__root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+}
+
+.zx-checkbox-group__root.zx-o-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--space-lg);
+}
+
+.zx-checkbox-group__label {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--checkbox-group-accent);
+}
+
+.zx-checkbox-group__label.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+}
+
+.zx-root .zx-checkbox-group__root.zx-a-color-primary {
+    --checkbox-group-accent: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-primary {
+    --checkbox-group-accent: #6567ff;
+}
+
+.zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-primary {
+    --checkbox-group-accent: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-primary {
+    --checkbox-group-accent: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-primary {
+    --checkbox-group-accent: #fb8a62;
+}
+
+.zx-root .zx-checkbox-group__root.zx-a-color-secondary {
+    --checkbox-group-accent: #ad316f;
+}
+
+.zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-secondary {
+    --checkbox-group-accent: #fa7cb6;
+}
+
+.zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-secondary {
+    --checkbox-group-accent: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-secondary {
+    --checkbox-group-accent: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-secondary {
+    --checkbox-group-accent: #e68aac;
+}
+
+.zx-root .zx-checkbox-group__root.zx-a-color-accent {
+    --checkbox-group-accent: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-accent {
+    --checkbox-group-accent: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-accent {
+    --checkbox-group-accent: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-accent {
+    --checkbox-group-accent: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-accent {
+    --checkbox-group-accent: #ab9fe8;
+}
+
+.zx-root .zx-checkbox-group__root.zx-a-color-neutral {
+    --checkbox-group-accent: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-neutral {
+    --checkbox-group-accent: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-neutral {
+    --checkbox-group-accent: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-neutral {
+    --checkbox-group-accent: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-neutral {
+    --checkbox-group-accent: #667a8a;
+}
+
+.zx-root .zx-checkbox-group__root.zx-a-color-info {
+    --checkbox-group-accent: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-info {
+    --checkbox-group-accent: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-info {
+    --checkbox-group-accent: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-info {
+    --checkbox-group-accent: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-info {
+    --checkbox-group-accent: #91d4e3;
+}
+
+.zx-root .zx-checkbox-group__root.zx-a-color-success {
+    --checkbox-group-accent: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-success {
+    --checkbox-group-accent: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-success {
+    --checkbox-group-accent: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-success {
+    --checkbox-group-accent: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-success {
+    --checkbox-group-accent: #a6cebe;
+}
+
+.zx-root .zx-checkbox-group__root.zx-a-color-warning {
+    --checkbox-group-accent: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-warning {
+    --checkbox-group-accent: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-warning {
+    --checkbox-group-accent: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-warning {
+    --checkbox-group-accent: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-warning {
+    --checkbox-group-accent: #c5c1b7;
+}
+
+.zx-root .zx-checkbox-group__root.zx-a-color-error {
+    --checkbox-group-accent: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-error {
+    --checkbox-group-accent: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-error {
+    --checkbox-group-accent: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-error {
+    --checkbox-group-accent: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-error {
+    --checkbox-group-accent: #f2bbc0;
+}
+
+.zx-checkbox-group__root.zx-a-size-xs {
+    gap: var(--space-sm);
+}
+
+.zx-checkbox-group__label.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
+.zx-checkbox-group__label.zx-a-size-sm {
+    font-size: var(--text-xs);
+}
+
+.zx-checkbox-group__label.zx-a-size-lg {
+    font-size: var(--text-md);
+}
+
+.zx-checkbox-group__root.zx-a-size-xl {
+    gap: var(--space-lg);
+}
+
+.zx-checkbox-group__label.zx-a-size-xl {
+    font-size: var(--text-lg);
+}

package/dist/lynx/components/checkbox.css

@@ -11,6 +11,10 @@
     cursor: pointer;
 }
 
+.zx-checkbox__root.zx-f-readonly {
+    cursor: default;
+}
+
 .zx-checkbox__root.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -73,6 +77,10 @@
     border-color: var(--color-error);
 }
 
+.zx-checkbox__control.zx-f-readonly {
+    cursor: default;
+}
+
 .zx-checkbox__indicator {
     display: block;
     width: 100%;

package/dist/lynx/components/combobox.css

@@ -100,6 +100,26 @@
     outline-offset: 2px;
 }
 
+.zx-root .zx-combobox__tag-remove.zx-f-pressed {
+    background: #18181b2e;
+}
+
+.zx-root.zx-theme-dark .zx-combobox__tag-remove.zx-f-pressed {
+    background: #ecf9ff2e;
+}
+
+.zx-root.zx-theme-dim .zx-combobox__tag-remove.zx-f-pressed {
+    background: #b2ccd62e;
+}
+
+.zx-root.zx-theme-nord .zx-combobox__tag-remove.zx-f-pressed {
+    background: #2e34402e;
+}
+
+.zx-root.zx-theme-sunset .zx-combobox__tag-remove.zx-f-pressed {
+    background: #9fb9d02e;
+}
+
 .zx-combobox__trigger {
     appearance: none;
     border: none;
@@ -119,6 +139,19 @@
     cursor: not-allowed;
 }
 
+.zx-combobox__clear-trigger {
+    appearance: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    opacity: 0.6;
+    padding: 0 var(--space-xs);
+    line-height: var(--leading-none);
+    cursor: pointer;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+}
+
 .zx-combobox__popup {
     opacity: 0;
     transform: translateY(-4px);
@@ -144,6 +177,13 @@
     opacity: 0.6;
 }
 
+.zx-combobox__group-heading {
+    padding: var(--space-md) var(--space-lg) var(--space-xs);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-bold);
+    opacity: 0.6;
+}
+
 .zx-combobox__item {
     display: flex;
     align-items: center;
@@ -181,6 +221,19 @@
     opacity: 0.6;
 }
 
+.zx-combobox__loading {
+    padding: var(--space-lg);
+    font-size: var(--text-sm);
+    text-align: center;
+    opacity: 0.6;
+}
+
+.zx-combobox__separator {
+    height: var(--border);
+    margin: var(--space-sm) var(--space-md);
+    background: var(--color-base-300);
+}
+
 .zx-combobox__root.zx-a-color-primary {
     --combobox-accent: var(--color-primary);
 }

package/dist/lynx/components/diff.css

@@ -41,6 +41,11 @@
     outline-offset: 2px;
 }
 
+.zx-diff__handle.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
 .zx-root .zx-diff__handle.zx-f-pressed {
     --diff-accent: #353538;
 }

package/dist/lynx/components/drawer.css

@@ -63,6 +63,10 @@
     border-radius: 0;
 }
 
+.zx-drawer__panel.zx-l-dock-sheet.zx-s-open {
+    transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+}
+
 .zx-drawer__backdrop {
     background: #00000066;
 }

package/dist/lynx/components/file-upload.css

@@ -128,6 +128,30 @@
     opacity: var(--disabled-opacity);
 }
 
+.zx-file-upload__item.zx-f-invalid {
+    border-color: var(--color-error);
+}
+
+.zx-root .zx-file-upload__item.zx-f-invalid {
+    background: #fff3f4;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__item.zx-f-invalid {
+    background: #2e2930;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__item.zx-f-invalid {
+    background: #393943;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__item.zx-f-invalid {
+    background: #eae4e8;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__item.zx-f-invalid {
+    background: #22272d;
+}
+
 .zx-file-upload__item-name {
     flex: 1 1 auto;
     min-width: 0;
@@ -183,6 +207,29 @@
     outline-offset: 2px;
 }
 
+.zx-file-upload__clear-trigger {
+    appearance: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+    border-radius: 9999px;
+    padding: var(--space-2xs) var(--space-sm);
+    font-size: var(--fu-font);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-none);
+    cursor: pointer;
+}
+
+.zx-file-upload__clear-trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-file-upload__clear-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
 .zx-root .zx-file-upload__root.zx-a-color-primary {
     --fu-accent: #3f2bcb;
 }