@sigx/zero-daisyui 0.2.0-beta.5 → 0.3.0-beta.1

package/dist/css/components/nav-list.css

@@ -0,0 +1,165 @@
+@layer zero.recipes {
+    [data-scope="nav-list"][data-part="root"] {
+        --nav-accent: var(--color-base-content);
+        --nav-tint: var(--color-base-300);
+        --nav-ink: var(--color-base-content);
+    }
+
+    [data-scope="nav-list"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-lg);
+        font-size: var(--text-sm);
+        color: var(--color-base-content);
+    }
+
+    [data-scope="nav-list"][data-part="group"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+    }
+
+    [data-scope="nav-list"][data-part="heading"] {
+        padding: 0 var(--space-lg);
+        font-size: var(--text-xs);
+        font-weight: var(--weight-bold);
+        opacity: 0.6;
+    }
+
+    [data-scope="nav-list"][data-part="list"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2xs);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    [data-scope="nav-list"][data-part="item"] {
+        display: block;
+    }
+
+    [data-scope="nav-list"][data-part="link"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        text-decoration: none;
+        color: var(--nav-ink);
+        padding: var(--space-sm) var(--space-lg);
+        border-radius: var(--radius-field);
+        font-weight: var(--weight-medium);
+        line-height: var(--leading-tight);
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="nav-list"][data-part="link"]:hover:not([data-disabled]) {
+        background: var(--color-base-200);
+    }
+
+    [data-scope="nav-list"][data-part="link"][data-state="active"] {
+        background: var(--nav-tint);
+        color: var(--nav-accent);
+    }
+
+    [data-scope="nav-list"][data-part="link"]:focus-visible {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="nav-list"][data-part="icon"] {
+        display: inline-flex;
+        inline-size: 1.25em;
+        justify-content: center;
+        flex: none;
+        line-height: var(--leading-none);
+    }
+
+    [data-scope="nav-list"][data-part="meta"] {
+        margin-inline-start: auto;
+        display: inline-flex;
+        align-items: center;
+        font-size: var(--text-xs);
+        font-variant-numeric: tabular-nums;
+        opacity: 0.7;
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="primary"] {
+        --nav-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        --nav-tint: var(--color-primary-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="secondary"] {
+        --nav-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        --nav-tint: var(--color-secondary-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="accent"] {
+        --nav-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        --nav-tint: var(--color-accent-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="neutral"] {
+        --nav-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        --nav-tint: var(--color-neutral-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="info"] {
+        --nav-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        --nav-tint: var(--color-info-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="success"] {
+        --nav-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        --nav-tint: var(--color-success-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="warning"] {
+        --nav-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        --nav-tint: var(--color-warning-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-color="error"] {
+        --nav-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        --nav-tint: var(--color-error-soft);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-size="xs"] {
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-size="sm"] {
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-size="lg"] {
+        font-size: var(--text-md);
+    }
+
+    [data-scope="nav-list"][data-part="root"][data-size="xl"] {
+        font-size: var(--text-lg);
+    }
+
+    @scope ([data-scope="nav-list"][data-part="root"][data-size="xs"]) to ([data-scope="nav-list"][data-part="root"]) {
+        [data-scope="nav-list"][data-part="link"] {
+            padding: var(--space-2xs) var(--space-md);
+        }
+    }
+
+    @scope ([data-scope="nav-list"][data-part="root"][data-size="sm"]) to ([data-scope="nav-list"][data-part="root"]) {
+        [data-scope="nav-list"][data-part="link"] {
+            padding: var(--space-xs) var(--space-md);
+        }
+    }
+
+    @scope ([data-scope="nav-list"][data-part="root"][data-size="lg"]) to ([data-scope="nav-list"][data-part="root"]) {
+        [data-scope="nav-list"][data-part="link"] {
+            padding: var(--space-md) var(--space-lg);
+        }
+    }
+
+    @scope ([data-scope="nav-list"][data-part="root"][data-size="xl"]) to ([data-scope="nav-list"][data-part="root"]) {
+        [data-scope="nav-list"][data-part="link"] {
+            padding: var(--space-lg) var(--space-xl);
+        }
+    }
+}

package/dist/css/components/radio-group.css

@@ -8,7 +8,7 @@
     [data-scope="radio-group"][data-part="root"] {
         display: flex;
         flex-direction: column;
-        gap: 0.625rem;
+        gap: var(--space-md);
     }
 
     [data-scope="radio-group"][data-part="root"][data-invalid] [data-part="item-control"] {
@@ -27,7 +27,7 @@
     [data-scope="radio-group"][data-part="item"] {
         display: inline-flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         cursor: pointer;
     }
 

package/dist/css/components/select.css

@@ -93,7 +93,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-md) var(--space-lg);
         font-size: var(--text-sm);
         font-weight: var(--weight-medium);

package/dist/css/components/spacer.css

@@ -0,0 +1,13 @@
+@layer zero.recipes {
+    [data-scope="spacer"][data-part="root"] {
+        --l-space: 0;
+        --l-space-grow: 1;
+    }
+
+    [data-scope="spacer"][data-part="root"] {
+        flex-grow: var(--l-space-grow);
+        flex-shrink: 0;
+        flex-basis: var(--l-space);
+        align-self: stretch;
+    }
+}

package/dist/css/components/stack.css

@@ -0,0 +1,39 @@
+@layer zero.recipes {
+    [data-scope="stack"][data-part="root"] {
+        --l-gap: 0;
+        --l-gap-x: var(--l-gap);
+        --l-gap-y: var(--l-gap);
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+        --l-align: stretch;
+        --l-justify: flex-start;
+        --l-wrap: nowrap;
+    }
+
+    [data-scope="stack"][data-part="root"] {
+        display: flex;
+        min-inline-size: 0;
+        column-gap: var(--l-gap-x);
+        row-gap: var(--l-gap-y);
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+        align-items: var(--l-align);
+        justify-content: var(--l-justify);
+        flex-wrap: var(--l-wrap);
+    }
+
+    [data-scope="stack"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+    }
+
+    [data-scope="stack"][data-part="root"][data-orientation="vertical"] {
+        flex-direction: column;
+    }
+
+    [data-scope="stack"][data-part="item"] {
+        --l-grow: 0;
+        flex-grow: var(--l-grow);
+        min-inline-size: 0;
+    }
+}

package/dist/css/components/steps.css

@@ -3,6 +3,7 @@
         --steps-accent: var(--color-primary);
         --steps-accent-content: var(--color-primary-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--steps-accent) 70%, var(--color-base-content));
         --steps-ind: calc(var(--size-selector) * 7);
         --steps-font: var(--text-sm);
     }
@@ -93,8 +94,8 @@
     }
 
     [data-scope="steps"][data-part="indicator"][data-state="complete"] {
-        background: color-mix(in oklch, var(--steps-accent) 20%, var(--color-base-100));
-        color: var(--steps-accent-ink);
+        background: color-mix(in oklab, var(--steps-accent) 20%, var(--color-base-100));
+        color: var(--steps-complete-ink);
     }
 
     [data-scope="steps"][data-part="indicator"][data-state="inactive"] {
@@ -140,69 +141,149 @@
         font-weight: var(--weight-normal);
     }
 
-    [data-scope="steps"][data-part="root"][data-color="primary"] {
+    [data-scope="steps"][data-part="root"][data-size="xs"] {
+        --steps-ind: calc(var(--size-selector) * 5);
+        --steps-font: var(--text-xs);
+    }
+
+    [data-scope="steps"][data-part="root"][data-size="sm"] {
+        --steps-ind: calc(var(--size-selector) * 6);
+    }
+
+    [data-scope="steps"][data-part="root"][data-size="lg"] {
+        --steps-ind: calc(var(--size-selector) * 8);
+    }
+
+    [data-scope="steps"][data-part="root"][data-size="xl"] {
+        --steps-ind: calc(var(--size-selector) * 9);
+        --steps-font: var(--text-md);
+    }
+
+    [data-scope="steps"][data-part="item"][data-color="primary"] {
         --steps-accent: var(--color-primary);
         --steps-accent-content: var(--color-primary-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-primary) 70%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="secondary"] {
+    [data-scope="steps"][data-part="item"][data-color="secondary"] {
         --steps-accent: var(--color-secondary);
         --steps-accent-content: var(--color-secondary-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="accent"] {
+    [data-scope="steps"][data-part="item"][data-color="accent"] {
         --steps-accent: var(--color-accent);
         --steps-accent-content: var(--color-accent-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="neutral"] {
+    [data-scope="steps"][data-part="item"][data-color="neutral"] {
         --steps-accent: var(--color-neutral);
         --steps-accent-content: var(--color-neutral-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="info"] {
+    [data-scope="steps"][data-part="item"][data-color="info"] {
         --steps-accent: var(--color-info);
         --steps-accent-content: var(--color-info-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="success"] {
+    [data-scope="steps"][data-part="item"][data-color="success"] {
         --steps-accent: var(--color-success);
         --steps-accent-content: var(--color-success-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="warning"] {
+    [data-scope="steps"][data-part="item"][data-color="warning"] {
         --steps-accent: var(--color-warning);
         --steps-accent-content: var(--color-warning-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        --steps-complete-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
     }
 
-    [data-scope="steps"][data-part="root"][data-color="error"] {
+    [data-scope="steps"][data-part="item"][data-color="error"] {
         --steps-accent: var(--color-error);
         --steps-accent-content: var(--color-error-content);
         --steps-accent-ink: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
-    }
-
-    [data-scope="steps"][data-part="root"][data-size="xs"] {
-        --steps-ind: calc(var(--size-selector) * 5);
-        --steps-font: var(--text-xs);
-    }
-
-    [data-scope="steps"][data-part="root"][data-size="sm"] {
-        --steps-ind: calc(var(--size-selector) * 6);
-    }
-
-    [data-scope="steps"][data-part="root"][data-size="lg"] {
-        --steps-ind: calc(var(--size-selector) * 8);
-    }
-
-    [data-scope="steps"][data-part="root"][data-size="xl"] {
-        --steps-ind: calc(var(--size-selector) * 9);
-        --steps-font: var(--text-md);
+        --steps-complete-ink: color-mix(in oklab, var(--color-error) 70%, var(--color-base-content));
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="primary"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-primary);
+            --steps-accent-content: var(--color-primary-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-primary) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="secondary"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-secondary);
+            --steps-accent-content: var(--color-secondary-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="accent"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-accent);
+            --steps-accent-content: var(--color-accent-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="neutral"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-neutral);
+            --steps-accent-content: var(--color-neutral-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="info"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-info);
+            --steps-accent-content: var(--color-info-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="success"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-success);
+            --steps-accent-content: var(--color-success-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="warning"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-warning);
+            --steps-accent-content: var(--color-warning-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="steps"][data-part="root"][data-color="error"]) to ([data-scope="steps"][data-part="root"]) {
+        [data-scope="steps"][data-part="item"] {
+            --steps-accent: var(--color-error);
+            --steps-accent-content: var(--color-error-content);
+            --steps-accent-ink: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+            --steps-complete-ink: color-mix(in oklab, var(--color-error) 70%, var(--color-base-content));
+        }
     }
 }