@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/components/status.css

@@ -0,0 +1,66 @@
+@layer zero.recipes {
+    [data-scope="status"][data-part="root"] {
+        --status-ink: var(--color-base-content);
+        --status-size: calc(var(--size-selector) * 2.5);
+    }
+
+    [data-scope="status"][data-part="root"] {
+        display: inline-block;
+        inline-size: var(--status-size);
+        block-size: var(--status-size);
+        box-sizing: border-box;
+        vertical-align: middle;
+        background: var(--status-ink);
+        border: calc(var(--status-size) / 2) solid var(--status-ink);
+        border-radius: 9999px;
+        box-shadow: 0 0 0 calc(var(--status-size) / 4) color-mix(in oklch, var(--status-ink) 25%, transparent);
+    }
+
+    [data-scope="status"][data-part="root"][data-color="primary"] {
+        --status-ink: var(--color-primary);
+    }
+
+    [data-scope="status"][data-part="root"][data-color="secondary"] {
+        --status-ink: var(--color-secondary);
+    }
+
+    [data-scope="status"][data-part="root"][data-color="accent"] {
+        --status-ink: var(--color-accent);
+    }
+
+    [data-scope="status"][data-part="root"][data-color="neutral"] {
+        --status-ink: var(--color-neutral);
+    }
+
+    [data-scope="status"][data-part="root"][data-color="info"] {
+        --status-ink: var(--color-info);
+    }
+
+    [data-scope="status"][data-part="root"][data-color="success"] {
+        --status-ink: var(--color-success);
+    }
+
+    [data-scope="status"][data-part="root"][data-color="warning"] {
+        --status-ink: var(--color-warning);
+    }
+
+    [data-scope="status"][data-part="root"][data-color="error"] {
+        --status-ink: var(--color-error);
+    }
+
+    [data-scope="status"][data-part="root"][data-size="xs"] {
+        --status-size: calc(var(--size-selector) * 1.5);
+    }
+
+    [data-scope="status"][data-part="root"][data-size="sm"] {
+        --status-size: calc(var(--size-selector) * 2);
+    }
+
+    [data-scope="status"][data-part="root"][data-size="lg"] {
+        --status-size: calc(var(--size-selector) * 3);
+    }
+
+    [data-scope="status"][data-part="root"][data-size="xl"] {
+        --status-size: calc(var(--size-selector) * 3.5);
+    }
+}

package/dist/css/components/steps.css

@@ -0,0 +1,208 @@
+@layer zero.recipes {
+    [data-scope="steps"][data-part="root"] {
+        --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-ind: calc(var(--size-selector) * 7);
+        --steps-font: var(--text-sm);
+    }
+
+    [data-scope="steps"][data-part="root"] {
+        display: flex;
+        align-items: stretch;
+    }
+
+    [data-scope="steps"][data-part="root"][data-orientation="vertical"] {
+        flex-direction: column;
+    }
+
+    [data-scope="steps"][data-part="item"] {
+        appearance: none;
+        position: relative;
+        display: flex;
+        flex: 1 1 0%;
+        background: transparent;
+        border: none;
+        padding: var(--space-xs);
+        gap: var(--space-2xs);
+        font-family: inherit;
+        font-size: var(--steps-font);
+        cursor: pointer;
+        text-align: center;
+    }
+
+    [data-scope="steps"][data-part="item"][data-state="active"] {
+        color: var(--steps-accent-ink);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="steps"][data-part="item"][data-state="complete"] {
+        color: var(--color-base-content);
+    }
+
+    [data-scope="steps"][data-part="item"][data-state="inactive"] {
+        color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+    }
+
+    [data-scope="steps"][data-part="item"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="steps"][data-part="item"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="steps"][data-part="item"][data-orientation="horizontal"] {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    [data-scope="steps"][data-part="item"][data-orientation="vertical"] {
+        flex-direction: row;
+        align-items: flex-start;
+        text-align: start;
+        column-gap: var(--space-sm);
+        padding-block-end: var(--space-lg);
+    }
+
+    [data-scope="steps"][data-part="item"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+    }
+
+    [data-scope="steps"][data-part="indicator"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        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;
+        z-index: 1;
+        flex-shrink: 0;
+        transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="steps"][data-part="indicator"][data-state="active"] {
+        background: var(--steps-accent);
+        color: var(--steps-accent-content);
+    }
+
+    [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);
+    }
+
+    [data-scope="steps"][data-part="indicator"][data-state="inactive"] {
+        background: var(--color-base-200);
+        color: var(--color-base-content);
+    }
+
+    [data-scope="steps"][data-part="separator"] {
+        position: absolute;
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    [data-scope="steps"][data-part="separator"][data-state="complete"] {
+        background: var(--steps-accent);
+    }
+
+    [data-scope="steps"][data-part="separator"][data-state="inactive"] {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="steps"][data-part="separator"][data-orientation="horizontal"] {
+        inset-block-start: calc(var(--space-xs) + var(--steps-ind) / 2);
+        inset-inline-start: 50%;
+        inline-size: 100%;
+        block-size: var(--border);
+    }
+
+    [data-scope="steps"][data-part="separator"][data-orientation="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);
+    }
+
+    [data-scope="steps"][data-part="title"] {
+        font-weight: var(--weight-medium);
+    }
+
+    [data-scope="steps"][data-part="description"] {
+        font-size: var(--text-xs);
+        color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+        font-weight: var(--weight-normal);
+    }
+
+    [data-scope="steps"][data-part="root"][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));
+    }
+
+    [data-scope="steps"][data-part="root"][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));
+    }
+
+    [data-scope="steps"][data-part="root"][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));
+    }
+
+    [data-scope="steps"][data-part="root"][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));
+    }
+
+    [data-scope="steps"][data-part="root"][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));
+    }
+
+    [data-scope="steps"][data-part="root"][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));
+    }
+
+    [data-scope="steps"][data-part="root"][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));
+    }
+
+    [data-scope="steps"][data-part="root"][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);
+    }
+}

package/dist/css/components/swap.css

@@ -0,0 +1,116 @@
+@layer zero.recipes {
+    [data-scope="swap"][data-part="root"] {
+        --swap-ink: var(--color-base-content);
+        --swap-size: var(--text-xl);
+    }
+
+    [data-scope="swap"][data-part="root"] {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        font-size: var(--swap-size);
+        line-height: var(--leading-none);
+        color: var(--swap-ink);
+        user-select: none;
+    }
+
+    [data-scope="swap"][data-part="root"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="swap"][data-part="root"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="swap"][data-part="root"]:is(button) {
+        appearance: none;
+        border: none;
+        background: transparent;
+        padding: var(--space-2xs);
+        border-radius: var(--radius-selector);
+        cursor: pointer;
+        font: inherit;
+        font-size: var(--swap-size);
+        color: var(--swap-ink);
+    }
+
+    [data-scope="swap"][data-part="on"] {
+        grid-area: 1 / 1;
+        transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="swap"][data-part="on"][data-state="off"] {
+        opacity: 0;
+        transform: rotate(45deg);
+    }
+
+    [data-scope="swap"][data-part="off"] {
+        grid-area: 1 / 1;
+        transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="swap"][data-part="off"][data-state="on"] {
+        opacity: 0;
+        transform: rotate(-45deg);
+    }
+
+    [data-scope="swap"][data-part="root"][data-color="primary"] {
+        --swap-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="swap"][data-part="root"][data-color="secondary"] {
+        --swap-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="swap"][data-part="root"][data-color="accent"] {
+        --swap-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="swap"][data-part="root"][data-color="neutral"] {
+        --swap-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="swap"][data-part="root"][data-color="info"] {
+        --swap-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="swap"][data-part="root"][data-color="success"] {
+        --swap-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="swap"][data-part="root"][data-color="warning"] {
+        --swap-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="swap"][data-part="root"][data-color="error"] {
+        --swap-ink: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="swap"][data-part="root"][data-size="xs"] {
+        --swap-size: var(--text-sm);
+    }
+
+    [data-scope="swap"][data-part="root"][data-size="sm"] {
+        --swap-size: var(--text-md);
+    }
+
+    [data-scope="swap"][data-part="root"][data-size="lg"] {
+        --swap-size: var(--text-2xl);
+    }
+
+    [data-scope="swap"][data-part="root"][data-size="xl"] {
+        --swap-size: var(--text-3xl);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="swap"][data-part="on"] {
+            transition: none;
+        }
+
+        [data-scope="swap"][data-part="off"] {
+            transition: none;
+        }
+    }
+}

package/dist/css/components/switch.css

@@ -0,0 +1,126 @@
+@layer zero.recipes {
+    [data-scope="switch"][data-part="root"] {
+        --switch-size: calc(var(--size-selector) * 6);
+        --switch-p: calc(var(--switch-size) * 0.125);
+        --switch-accent: var(--color-primary);
+        --switch-ink: color-mix(in oklab, var(--color-base-content) 60%, #0000);
+    }
+
+    [data-scope="switch"][data-part="root"] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-lg);
+        cursor: pointer;
+    }
+
+    [data-scope="switch"][data-part="root"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="switch"][data-part="control"] {
+        display: inline-grid;
+        grid-template-columns: 0fr 1fr 1fr;
+        place-content: center;
+        position: relative;
+        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-radius: calc(var(--radius-selector) + min(var(--switch-p), var(--switch-radius-max)) + min(var(--border), var(--switch-radius-max)));
+        border: var(--border) solid currentColor;
+        color: var(--switch-ink);
+        box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
+        user-select: none;
+        transition: color var(--duration-slow) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard), grid-template-columns var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="switch"][data-part="control"][data-state="checked"] {
+        grid-template-columns: 1fr 1fr 0fr;
+        color: var(--switch-accent);
+        background-color: var(--color-base-100);
+    }
+
+    [data-scope="switch"][data-part="control"][data-invalid] {
+        border-color: var(--color-error);
+    }
+
+    [data-scope="switch"][data-part="control"][data-focus-visible] {
+        outline: 2px solid var(--switch-accent);
+        outline-offset: 2px;
+    }
+
+    [data-scope="switch"][data-part="thumb"] {
+        grid-row-start: 1;
+        grid-column-start: 2;
+        aspect-ratio: 1;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--radius-selector);
+        background-color: currentColor;
+        background-size: auto, calc(var(--noise) * 100%);
+        background-image: none, var(--fx-noise);
+        box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);
+        transition: background-color var(--duration-instant) var(--ease-standard);
+    }
+
+    [data-scope="switch"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-medium);
+    }
+
+    [data-scope="switch"][data-part="root"][data-size="xs"] {
+        --switch-size: calc(var(--size-selector) * 4);
+    }
+
+    [data-scope="switch"][data-part="root"][data-size="sm"] {
+        --switch-size: calc(var(--size-selector) * 5);
+    }
+
+    [data-scope="switch"][data-part="root"][data-size="lg"] {
+        --switch-size: calc(var(--size-selector) * 7);
+    }
+
+    [data-scope="switch"][data-part="root"][data-size="xl"] {
+        --switch-size: calc(var(--size-selector) * 8);
+    }
+
+    [data-scope="switch"][data-part="root"][data-color="primary"] {
+        --switch-accent: var(--color-primary);
+    }
+
+    [data-scope="switch"][data-part="root"]:not([data-color]) {
+        --switch-accent: var(--color-primary);
+    }
+
+    [data-scope="switch"][data-part="root"][data-color="secondary"] {
+        --switch-accent: var(--color-secondary);
+    }
+
+    [data-scope="switch"][data-part="root"][data-color="accent"] {
+        --switch-accent: var(--color-accent);
+    }
+
+    [data-scope="switch"][data-part="root"][data-color="neutral"] {
+        --switch-accent: var(--color-neutral);
+    }
+
+    [data-scope="switch"][data-part="root"][data-color="info"] {
+        --switch-accent: var(--color-info);
+    }
+
+    [data-scope="switch"][data-part="root"][data-color="success"] {
+        --switch-accent: var(--color-success);
+    }
+
+    [data-scope="switch"][data-part="root"][data-color="warning"] {
+        --switch-accent: var(--color-warning);
+    }
+
+    [data-scope="switch"][data-part="root"][data-color="error"] {
+        --switch-accent: var(--color-error);
+    }
+}

package/dist/css/components/table.css

@@ -0,0 +1,124 @@
+@layer zero.recipes {
+    [data-scope="table"][data-part="root"] {
+        --table-accent: var(--color-base-content);
+        --table-pad-block: var(--space-sm);
+        --table-pad-inline: var(--space-md);
+        --table-font: var(--text-sm);
+    }
+
+    [data-scope="table"][data-part="root"] {
+        overflow-x: auto;
+        border: var(--border) solid var(--color-base-200);
+        border-radius: var(--radius-box);
+        background: var(--color-base-100);
+    }
+
+    [data-scope="table"][data-part="table"] {
+        border-collapse: collapse;
+        inline-size: 100%;
+        font-size: var(--table-font);
+        color: var(--color-base-content);
+    }
+
+    [data-scope="table"][data-part="caption"] {
+        caption-side: top;
+        text-align: start;
+        padding: var(--table-pad-block) var(--table-pad-inline);
+        font-size: var(--text-xs);
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+
+    [data-scope="table"][data-part="foot"] {
+        font-size: var(--text-xs);
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+
+    [data-scope="table"][data-part="row"] {
+        border-block-end: var(--border) solid var(--color-base-200);
+    }
+
+    [data-scope="table"][data-part="row"][data-selected] {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="table"][data-part="header-cell"] {
+        padding: var(--table-pad-block) var(--table-pad-inline);
+        text-align: start;
+        font-weight: var(--weight-semibold);
+        font-size: var(--text-xs);
+        color: color-mix(in oklab, var(--table-accent) 60%, transparent);
+    }
+
+    [data-scope="table"][data-part="cell"] {
+        padding: var(--table-pad-block) var(--table-pad-inline);
+        text-align: start;
+    }
+
+    [data-scope="table"][data-part="root"][data-color="primary"] {
+        --table-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="table"][data-part="root"][data-color="secondary"] {
+        --table-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="table"][data-part="root"][data-color="accent"] {
+        --table-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="table"][data-part="root"][data-color="neutral"] {
+        --table-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="table"][data-part="root"][data-color="info"] {
+        --table-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="table"][data-part="root"][data-color="success"] {
+        --table-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="table"][data-part="root"][data-color="warning"] {
+        --table-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="table"][data-part="root"][data-color="error"] {
+        --table-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="table"][data-part="root"][data-size="xs"] {
+        --table-pad-block: calc(var(--space-xs) / 2);
+        --table-pad-inline: var(--space-xs);
+        --table-font: var(--text-xs);
+    }
+
+    [data-scope="table"][data-part="root"][data-size="sm"] {
+        --table-pad-block: var(--space-xs);
+        --table-pad-inline: var(--space-sm);
+        --table-font: var(--text-xs);
+    }
+
+    [data-scope="table"][data-part="root"][data-size="lg"] {
+        --table-pad-block: var(--space-md);
+        --table-pad-inline: var(--space-lg);
+        --table-font: var(--text-md);
+    }
+
+    [data-scope="table"][data-part="root"][data-size="xl"] {
+        --table-pad-block: var(--space-lg);
+        --table-pad-inline: var(--space-xl);
+        --table-font: var(--text-md);
+    }
+
+    @scope ([data-scope="table"][data-part="root"][data-mod-zebra]) to ([data-scope="table"][data-part="root"]) {
+        [data-scope="table"][data-part="body"] > [data-scope="table"][data-part="row"]:nth-child(even):not([data-selected]) {
+            background: var(--color-base-200);
+        }
+    }
+
+    @scope ([data-scope="table"][data-part="root"][data-mod-hover]) to ([data-scope="table"][data-part="root"]) {
+        [data-scope="table"][data-part="body"] > [data-scope="table"][data-part="row"]:hover:not([data-selected]) {
+            background: var(--color-base-200);
+        }
+    }
+}