@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/components/diff.css

@@ -0,0 +1,120 @@
+@layer zero.recipes {
+    [data-scope="diff"][data-part="root"] {
+        --diff-accent: var(--color-base-content);
+        --diff-grip: 1.5rem;
+        --diff-hit: 2rem;
+    }
+
+    [data-scope="diff"][data-part="root"] {
+        display: grid;
+        overflow: hidden;
+        background: var(--color-base-100);
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="diff"][data-part="before"] {
+        grid-area: 1 / 1;
+        min-width: 0;
+    }
+
+    [data-scope="diff"][data-part="after"] {
+        grid-area: 1 / 1;
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+        inline-size: var(--diff-percent);
+        overflow: hidden;
+    }
+
+    [data-scope="diff"][data-part="handle"] {
+        inset-block: 0;
+        inline-size: var(--diff-hit);
+        margin-inline-start: calc(var(--diff-hit) / -2);
+        display: grid;
+        place-items: center;
+        cursor: ew-resize;
+        touch-action: none;
+        z-index: 1;
+    }
+
+    [data-scope="diff"][data-part="handle"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="diff"][data-part="handle"][data-pressed] {
+        --diff-accent: color-mix(in oklab, var(--color-base-content) 85%, var(--color-base-100));
+    }
+
+    [data-scope="diff"][data-part="handle"]::before {
+        content: "";
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: calc(50% - var(--border));
+        inline-size: calc(var(--border) * 2);
+        background: var(--diff-accent);
+    }
+
+    [data-scope="diff"][data-part="handle"]::after {
+        content: "";
+        inline-size: var(--diff-grip);
+        block-size: var(--diff-grip);
+        box-sizing: border-box;
+        background: var(--color-base-100);
+        border: calc(var(--border) * 2) solid var(--diff-accent);
+        border-radius: 9999px;
+        z-index: 1;
+    }
+
+    [data-scope="diff"][data-part="root"][data-color="primary"] {
+        --diff-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="diff"][data-part="root"][data-color="secondary"] {
+        --diff-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="diff"][data-part="root"][data-color="accent"] {
+        --diff-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="diff"][data-part="root"][data-color="neutral"] {
+        --diff-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="diff"][data-part="root"][data-color="info"] {
+        --diff-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="diff"][data-part="root"][data-color="success"] {
+        --diff-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="diff"][data-part="root"][data-color="warning"] {
+        --diff-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="diff"][data-part="root"][data-color="error"] {
+        --diff-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="diff"][data-part="root"][data-size="xs"] {
+        --diff-grip: 1rem;
+        --diff-hit: 1.5rem;
+    }
+
+    [data-scope="diff"][data-part="root"][data-size="sm"] {
+        --diff-grip: 1.25rem;
+        --diff-hit: 1.75rem;
+    }
+
+    [data-scope="diff"][data-part="root"][data-size="lg"] {
+        --diff-grip: 2rem;
+        --diff-hit: 2.5rem;
+    }
+
+    [data-scope="diff"][data-part="root"][data-size="xl"] {
+        --diff-grip: 2.25rem;
+        --diff-hit: 2.75rem;
+    }
+}

package/dist/css/components/divider.css

@@ -0,0 +1,70 @@
+@layer zero.recipes {
+    [data-scope="divider"][data-part="root"] {
+        --divider-ink: var(--color-base-300);
+        --divider-thickness: var(--border);
+    }
+
+    [data-scope="divider"][data-part="root"] {
+        border: none;
+        background: var(--divider-ink);
+        align-self: stretch;
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="horizontal"] {
+        inline-size: 100%;
+        block-size: var(--divider-thickness);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"] {
+        inline-size: var(--divider-thickness);
+        min-block-size: 1em;
+    }
+
+    [data-scope="divider"][data-part="root"][data-color="primary"] {
+        --divider-ink: var(--color-primary);
+    }
+
+    [data-scope="divider"][data-part="root"][data-color="secondary"] {
+        --divider-ink: var(--color-secondary);
+    }
+
+    [data-scope="divider"][data-part="root"][data-color="accent"] {
+        --divider-ink: var(--color-accent);
+    }
+
+    [data-scope="divider"][data-part="root"][data-color="neutral"] {
+        --divider-ink: var(--color-neutral);
+    }
+
+    [data-scope="divider"][data-part="root"][data-color="info"] {
+        --divider-ink: var(--color-info);
+    }
+
+    [data-scope="divider"][data-part="root"][data-color="success"] {
+        --divider-ink: var(--color-success);
+    }
+
+    [data-scope="divider"][data-part="root"][data-color="warning"] {
+        --divider-ink: var(--color-warning);
+    }
+
+    [data-scope="divider"][data-part="root"][data-color="error"] {
+        --divider-ink: var(--color-error);
+    }
+
+    [data-scope="divider"][data-part="root"][data-size="xs"] {
+        --divider-thickness: var(--border);
+    }
+
+    [data-scope="divider"][data-part="root"][data-size="sm"] {
+        --divider-thickness: var(--border);
+    }
+
+    [data-scope="divider"][data-part="root"][data-size="lg"] {
+        --divider-thickness: calc(var(--border) * 2);
+    }
+
+    [data-scope="divider"][data-part="root"][data-size="xl"] {
+        --divider-thickness: calc(var(--border) * 3);
+    }
+}

package/dist/css/components/drawer.css

@@ -0,0 +1,285 @@
+@layer zero.recipes {
+    [data-scope="drawer"][data-part="trigger"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5em;
+        height: calc(var(--size-field) * 12);
+        padding-inline: calc(var(--size-field) * 4);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        box-shadow: var(--shadow-xs);
+        cursor: pointer;
+        transition: background var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="drawer"][data-part="trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="drawer"][data-part="panel"] {
+        opacity: 0;
+        transform: none;
+        transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
+        padding: var(--space-lg);
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        border: none;
+        border-radius: var(--radius-box);
+        box-shadow: var(--shadow-xl);
+        inline-size: min(20rem, 85vw);
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-state="open"] {
+        opacity: 1;
+        transform: none;
+    }
+
+    [data-scope="drawer"][data-part="panel"]:modal {
+        position: fixed;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        block-size: 100dvh;
+        max-block-size: 100dvh;
+        inline-size: min(20rem, 85vw);
+        max-inline-size: none;
+        margin: 0;
+        border-radius: 0;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="start"]:modal {
+        inset-inline-start: 0;
+        inset-inline-end: auto;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="end"]:modal {
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+    }
+
+    [data-scope="drawer"][data-part="panel"]::backdrop {
+        background: oklch(0% 0 0 / 0.4);
+    }
+
+    [data-scope="drawer"][data-part="title"] {
+        margin: 0 0 var(--space-md);
+        font-size: var(--text-lg);
+        font-weight: var(--weight-bold);
+    }
+
+    [data-scope="drawer"][data-part="close"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5em;
+        height: calc(var(--size-field) * 12);
+        padding-inline: calc(var(--size-field) * 4);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        box-shadow: var(--shadow-xs);
+        cursor: pointer;
+        transition: background var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="drawer"][data-part="close"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="drawer"][data-part="close"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="drawer"][data-part="close"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="primary"] {
+        background: var(--color-primary);
+        color: var(--color-primary-content);
+        border-color: transparent;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="primary"]:hover:not([data-disabled]) {
+        background: var(--color-primary);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="primary"][data-state="open"] {
+        background: var(--color-primary);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="secondary"] {
+        background: var(--color-secondary);
+        color: var(--color-secondary-content);
+        border-color: transparent;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="secondary"]:hover:not([data-disabled]) {
+        background: var(--color-secondary);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="secondary"][data-state="open"] {
+        background: var(--color-secondary);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="accent"] {
+        background: var(--color-accent);
+        color: var(--color-accent-content);
+        border-color: transparent;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="accent"]:hover:not([data-disabled]) {
+        background: var(--color-accent);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="accent"][data-state="open"] {
+        background: var(--color-accent);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="neutral"] {
+        background: var(--color-neutral);
+        color: var(--color-neutral-content);
+        border-color: transparent;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="neutral"]:hover:not([data-disabled]) {
+        background: var(--color-neutral);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="neutral"][data-state="open"] {
+        background: var(--color-neutral);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="info"] {
+        background: var(--color-info);
+        color: var(--color-info-content);
+        border-color: transparent;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="info"]:hover:not([data-disabled]) {
+        background: var(--color-info);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="info"][data-state="open"] {
+        background: var(--color-info);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="success"] {
+        background: var(--color-success);
+        color: var(--color-success-content);
+        border-color: transparent;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="success"]:hover:not([data-disabled]) {
+        background: var(--color-success);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="success"][data-state="open"] {
+        background: var(--color-success);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="warning"] {
+        background: var(--color-warning);
+        color: var(--color-warning-content);
+        border-color: transparent;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="warning"]:hover:not([data-disabled]) {
+        background: var(--color-warning);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="warning"][data-state="open"] {
+        background: var(--color-warning);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="error"] {
+        background: var(--color-error);
+        color: var(--color-error-content);
+        border-color: transparent;
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="error"]:hover:not([data-disabled]) {
+        background: var(--color-error);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-color="error"][data-state="open"] {
+        background: var(--color-error);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-size="xs"] {
+        height: calc(var(--size-field) * 8);
+        padding-inline: calc(var(--size-field) * 2);
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-size="sm"] {
+        height: calc(var(--size-field) * 10);
+        padding-inline: calc(var(--size-field) * 3);
+        font-size: var(--text-sm);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-size="lg"] {
+        height: calc(var(--size-field) * 14);
+        padding-inline: calc(var(--size-field) * 5);
+        font-size: var(--text-md);
+    }
+
+    [data-scope="drawer"][data-part="trigger"][data-size="xl"] {
+        height: calc(var(--size-field) * 16);
+        padding-inline: calc(var(--size-field) * 6);
+        font-size: var(--text-lg);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="drawer"][data-part="panel"] {
+            transition: none;
+        }
+
+        [data-scope="drawer"][data-part="panel"][data-state="open"] {
+            transform: none;
+        }
+    }
+
+    @starting-style {
+        [data-scope="drawer"][data-part="panel"][data-state="open"] {
+            opacity: 0;
+            transform: none;
+        }
+    }
+}

package/dist/css/components/field.css

@@ -0,0 +1,111 @@
+@layer zero.recipes {
+    [data-scope="field"][data-part="root"] {
+        --field-accent: var(--color-base-content);
+    }
+
+    [data-scope="field"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+
+    [data-scope="field"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: var(--field-accent);
+    }
+
+    [data-scope="field"][data-part="label"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="field"][data-part="label"][data-required]::after {
+        content: " *";
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="field"][data-part="description"] {
+        margin: 0;
+        font-size: var(--text-xs);
+        opacity: 0.6;
+    }
+
+    [data-scope="field"][data-part="error"] {
+        margin: 0;
+        font-size: var(--text-xs);
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        font-weight: var(--weight-medium);
+    }
+
+    [data-scope="field"][data-part="root"][data-color="primary"] {
+        --field-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="field"][data-part="root"][data-color="secondary"] {
+        --field-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="field"][data-part="root"][data-color="accent"] {
+        --field-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="field"][data-part="root"][data-color="neutral"] {
+        --field-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="field"][data-part="root"][data-color="info"] {
+        --field-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="field"][data-part="root"][data-color="success"] {
+        --field-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="field"][data-part="root"][data-color="warning"] {
+        --field-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="field"][data-part="root"][data-color="error"] {
+        --field-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    @scope ([data-scope="field"][data-part="root"][data-size="xs"]) to ([data-scope="field"][data-part="root"]) {
+        [data-scope="field"][data-part="label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="field"][data-part="root"][data-size="sm"]) to ([data-scope="field"][data-part="root"]) {
+        [data-scope="field"][data-part="label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="field"][data-part="root"][data-size="lg"]) to ([data-scope="field"][data-part="root"]) {
+        [data-scope="field"][data-part="label"] {
+            font-size: var(--text-md);
+        }
+
+        [data-scope="field"][data-part="description"] {
+            font-size: var(--text-sm);
+        }
+
+        [data-scope="field"][data-part="error"] {
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="field"][data-part="root"][data-size="xl"]) to ([data-scope="field"][data-part="root"]) {
+        [data-scope="field"][data-part="label"] {
+            font-size: var(--text-lg);
+        }
+
+        [data-scope="field"][data-part="description"] {
+            font-size: var(--text-md);
+        }
+
+        [data-scope="field"][data-part="error"] {
+            font-size: var(--text-md);
+        }
+    }
+}