@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/components/chat.css

@@ -0,0 +1,167 @@
+@layer zero.recipes {
+    [data-scope="chat"][data-part="root"] {
+        --chat-fill: var(--color-base-200);
+        --chat-ink: var(--color-base-content);
+    }
+
+    [data-scope="chat"][data-part="root"] {
+        display: grid;
+        column-gap: var(--space-sm);
+        row-gap: var(--space-2xs);
+        padding-block: var(--space-2xs);
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="start"] {
+        grid-template-columns: auto minmax(0, 1fr);
+        justify-items: start;
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="end"] {
+        grid-template-columns: minmax(0, 1fr) auto;
+        justify-items: end;
+    }
+
+    [data-scope="chat"][data-part="avatar"] {
+        grid-row: 1 / span 3;
+        align-self: end;
+        display: flex;
+        align-items: center;
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="start"] > [data-scope="chat"][data-part="avatar"] {
+        grid-column: 1;
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="end"] > [data-scope="chat"][data-part="avatar"] {
+        grid-column: 2;
+    }
+
+    [data-scope="chat"][data-part="header"] {
+        font-size: var(--text-xs);
+        color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="start"] > [data-scope="chat"][data-part="header"] {
+        grid-column: 2;
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="end"] > [data-scope="chat"][data-part="header"] {
+        grid-column: 1;
+    }
+
+    [data-scope="chat"][data-part="bubble"] {
+        max-inline-size: 90%;
+        padding: var(--space-xs) var(--space-lg);
+        font-size: var(--text-sm);
+        background: var(--chat-fill);
+        color: var(--chat-ink);
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="start"] > [data-scope="chat"][data-part="bubble"] {
+        grid-column: 2;
+        border-end-start-radius: 0;
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="end"] > [data-scope="chat"][data-part="bubble"] {
+        grid-column: 1;
+        border-end-end-radius: 0;
+    }
+
+    [data-scope="chat"][data-part="footer"] {
+        font-size: var(--text-xs);
+        color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="start"] > [data-scope="chat"][data-part="footer"] {
+        grid-column: 2;
+    }
+
+    [data-scope="chat"][data-part="root"][data-placement="end"] > [data-scope="chat"][data-part="footer"] {
+        grid-column: 1;
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-color="primary"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            --chat-fill: var(--color-primary);
+            --chat-ink: var(--color-primary-content);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-color="secondary"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            --chat-fill: var(--color-secondary);
+            --chat-ink: var(--color-secondary-content);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-color="accent"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            --chat-fill: var(--color-accent);
+            --chat-ink: var(--color-accent-content);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-color="neutral"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            --chat-fill: var(--color-neutral);
+            --chat-ink: var(--color-neutral-content);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-color="info"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            --chat-fill: var(--color-info);
+            --chat-ink: var(--color-info-content);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-color="success"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            --chat-fill: var(--color-success);
+            --chat-ink: var(--color-success-content);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-color="warning"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            --chat-fill: var(--color-warning);
+            --chat-ink: var(--color-warning-content);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-color="error"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            --chat-fill: var(--color-error);
+            --chat-ink: var(--color-error-content);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-size="xs"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            font-size: var(--text-xs);
+            padding: var(--space-2xs) var(--space-sm);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-size="sm"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            font-size: var(--text-xs);
+            padding: var(--space-xs) var(--space-md);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-size="lg"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            font-size: var(--text-md);
+            padding: var(--space-md) var(--space-lg);
+        }
+    }
+
+    @scope ([data-scope="chat"][data-part="root"][data-size="xl"]) to ([data-scope="chat"][data-part="root"]) {
+        [data-scope="chat"][data-part="bubble"] {
+            font-size: var(--text-lg);
+            padding: var(--space-md) var(--space-xl);
+        }
+    }
+}

package/dist/css/components/checkbox.css

@@ -0,0 +1,245 @@
+@layer zero.recipes {
+    [data-scope="checkbox"][data-part="root"] {
+        --checkbox-size: calc(var(--size-selector) * 6);
+        --checkbox-pad: 0.25rem;
+        --checkbox-accent: var(--color-primary);
+        --checkbox-on-accent: var(--color-primary-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"] {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.625rem;
+        cursor: pointer;
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="checkbox"][data-part="control"] {
+        display: inline-block;
+        position: relative;
+        vertical-align: middle;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        width: var(--checkbox-size);
+        height: var(--checkbox-size);
+        padding: var(--checkbox-pad);
+        border: var(--border) solid var(--checkbox-accent, color-mix(in oklab, var(--color-base-content) 20%, #0000));
+        border-radius: var(--radius-selector);
+        color: var(--checkbox-on-accent);
+        box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
+        background-size: auto, calc(var(--noise) * 100%);
+        background-image: none, var(--fx-noise);
+        cursor: pointer;
+        transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="checkbox"][data-part="control"][data-state="checked"] {
+        background-color: var(--checkbox-accent);
+        box-shadow: 0 0 #0000 inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
+    }
+
+    [data-scope="checkbox"][data-part="control"][data-state="indeterminate"] {
+        background-color: var(--checkbox-accent);
+    }
+
+    [data-scope="checkbox"][data-part="control"][data-focus-visible] {
+        outline: 2px solid var(--checkbox-accent);
+        outline-offset: 2px;
+    }
+
+    [data-scope="checkbox"][data-part="control"][data-invalid] {
+        border-color: var(--color-error);
+    }
+
+    [data-scope="checkbox"][data-part="indicator"] {
+        display: block;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        rotate: 45deg;
+        background-color: currentColor;
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+        box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
+        font-size: 1rem;
+        line-height: 0.75;
+        transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), rotate var(--duration-slow) var(--ease-standard) var(--duration-instant), translate var(--duration-slow) var(--ease-standard) var(--duration-instant);
+    }
+
+    [data-scope="checkbox"][data-part="indicator"][data-state="checked"] {
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+        opacity: 1;
+    }
+
+    [data-scope="checkbox"][data-part="indicator"][data-state="indeterminate"] {
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+        opacity: 1;
+        translate: 0 -35%;
+        rotate: 0deg;
+    }
+
+    [data-scope="checkbox"][data-part="label"] {
+        font-size: var(--text-sm);
+        font-weight: var(--weight-medium);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-color="primary"] {
+        --checkbox-accent: var(--color-primary);
+        --checkbox-on-accent: var(--color-primary-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-color="secondary"] {
+        --checkbox-accent: var(--color-secondary);
+        --checkbox-on-accent: var(--color-secondary-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-color="accent"] {
+        --checkbox-accent: var(--color-accent);
+        --checkbox-on-accent: var(--color-accent-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-color="neutral"] {
+        --checkbox-accent: var(--color-neutral);
+        --checkbox-on-accent: var(--color-neutral-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-color="info"] {
+        --checkbox-accent: var(--color-info);
+        --checkbox-on-accent: var(--color-info-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-color="success"] {
+        --checkbox-accent: var(--color-success);
+        --checkbox-on-accent: var(--color-success-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-color="warning"] {
+        --checkbox-accent: var(--color-warning);
+        --checkbox-on-accent: var(--color-warning-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-color="error"] {
+        --checkbox-accent: var(--color-error);
+        --checkbox-on-accent: var(--color-error-content);
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-size="xs"] {
+        --checkbox-size: calc(var(--size-selector) * 4);
+        --checkbox-pad: 0.125rem;
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-size="sm"] {
+        --checkbox-size: calc(var(--size-selector) * 5);
+        --checkbox-pad: 0.1875rem;
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-size="md"] {
+        --checkbox-size: calc(var(--size-selector) * 6);
+        --checkbox-pad: 0.25rem;
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-size="lg"] {
+        --checkbox-size: calc(var(--size-selector) * 7);
+        --checkbox-pad: 0.3125rem;
+    }
+
+    [data-scope="checkbox"][data-part="root"][data-size="xl"] {
+        --checkbox-size: calc(var(--size-selector) * 8);
+        --checkbox-pad: 0.375rem;
+    }
+
+    @scope ([data-scope="checkbox"][data-part="root"][data-size="xs"]) to ([data-scope="checkbox"][data-part="root"]) {
+        [data-scope="checkbox"][data-part="label"] {
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="checkbox"][data-part="root"][data-size="sm"]) to ([data-scope="checkbox"][data-part="root"]) {
+        [data-scope="checkbox"][data-part="label"] {
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="checkbox"][data-part="root"][data-size="md"]) to ([data-scope="checkbox"][data-part="root"]) {
+        [data-scope="checkbox"][data-part="label"] {
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="checkbox"][data-part="root"][data-size="lg"]) to ([data-scope="checkbox"][data-part="root"]) {
+        [data-scope="checkbox"][data-part="label"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="checkbox"][data-part="root"][data-size="xl"]) to ([data-scope="checkbox"][data-part="root"]) {
+        [data-scope="checkbox"][data-part="label"] {
+            font-size: var(--text-lg);
+        }
+    }
+
+    @media (forced-colors: active) {
+        [data-scope="checkbox"][data-part="indicator"] {
+            color: CanvasText;
+        }
+
+        [data-scope="checkbox"][data-part="indicator"][data-state="checked"] {
+            opacity: 1;
+            clip-path: none;
+            background-color: #0000;
+            rotate: 0deg;
+            color: CanvasText;
+        }
+
+        [data-scope="checkbox"][data-part="indicator"][data-state="indeterminate"] {
+            opacity: 1;
+            clip-path: none;
+            background-color: #0000;
+            rotate: 0deg;
+            translate: none;
+            color: CanvasText;
+        }
+
+        [data-scope="checkbox"][data-part="indicator"][data-state="checked"]::after {
+            content: "✔︎";
+        }
+
+        [data-scope="checkbox"][data-part="indicator"][data-state="indeterminate"]::after {
+            content: "−";
+        }
+    }
+
+    @media print {
+        [data-scope="checkbox"][data-part="indicator"] {
+            color: var(--print-ink);
+        }
+
+        [data-scope="checkbox"][data-part="indicator"][data-state="checked"] {
+            opacity: 1;
+            clip-path: none;
+            background-color: #0000;
+            rotate: 0deg;
+            color: var(--print-ink);
+        }
+
+        [data-scope="checkbox"][data-part="indicator"][data-state="indeterminate"] {
+            opacity: 1;
+            clip-path: none;
+            background-color: #0000;
+            rotate: 0deg;
+            translate: none;
+            color: var(--print-ink);
+        }
+
+        [data-scope="checkbox"][data-part="indicator"][data-state="checked"]::after {
+            content: "✔︎";
+        }
+
+        [data-scope="checkbox"][data-part="indicator"][data-state="indeterminate"]::after {
+            content: "−";
+        }
+    }
+}

package/dist/css/components/collapsible.css

@@ -0,0 +1,157 @@
+@layer zero.recipes {
+    [data-scope="collapsible"][data-part="root"] {
+        --collapsible-accent: var(--color-base-content);
+    }
+
+    [data-scope="collapsible"][data-part="root"] {
+        interpolate-size: allow-keywords;
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-box);
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        overflow: hidden;
+    }
+
+    [data-scope="collapsible"][data-part="root"]::details-content {
+        block-size: 0;
+        overflow: hidden;
+        transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
+    }
+
+    [data-scope="collapsible"][data-part="root"][open]::details-content {
+        block-size: auto;
+    }
+
+    [data-scope="collapsible"][data-part="trigger"] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-xl) var(--space-2xl);
+        font-size: var(--text-md);
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="collapsible"][data-part="trigger"][data-state="open"] {
+        color: var(--collapsible-accent);
+    }
+
+    [data-scope="collapsible"][data-part="trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-200);
+    }
+
+    [data-scope="collapsible"][data-part="trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="collapsible"][data-part="trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="collapsible"][data-part="trigger"]::after {
+        content: "";
+        width: 0.5rem;
+        height: 0.5rem;
+        border: 2px solid currentColor;
+        border-top: none;
+        border-left: none;
+        transform: rotate(45deg);
+        transition: transform var(--duration-normal) var(--ease-standard);
+        opacity: 0.6;
+    }
+
+    [data-scope="collapsible"][data-part="trigger"][data-state="open"]::after {
+        transform: rotate(225deg);
+    }
+
+    [data-scope="collapsible"][data-part="panel"] {
+        padding: 0 var(--space-2xl) var(--space-xl);
+        font-size: var(--text-md);
+    }
+
+    [data-scope="collapsible"][data-part="root"][data-color="primary"] {
+        --collapsible-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="collapsible"][data-part="root"][data-color="secondary"] {
+        --collapsible-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="collapsible"][data-part="root"][data-color="accent"] {
+        --collapsible-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="collapsible"][data-part="root"][data-color="neutral"] {
+        --collapsible-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="collapsible"][data-part="root"][data-color="info"] {
+        --collapsible-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="collapsible"][data-part="root"][data-color="success"] {
+        --collapsible-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="collapsible"][data-part="root"][data-color="warning"] {
+        --collapsible-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="collapsible"][data-part="root"][data-color="error"] {
+        --collapsible-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    @scope ([data-scope="collapsible"][data-part="root"][data-size="xs"]) to ([data-scope="collapsible"][data-part="root"]) {
+        [data-scope="collapsible"][data-part="trigger"] {
+            padding: var(--space-md) var(--space-lg);
+            font-size: var(--text-sm);
+        }
+
+        [data-scope="collapsible"][data-part="panel"] {
+            padding: 0 var(--space-lg) var(--space-md);
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="collapsible"][data-part="root"][data-size="sm"]) to ([data-scope="collapsible"][data-part="root"]) {
+        [data-scope="collapsible"][data-part="trigger"] {
+            padding: var(--space-lg) var(--space-xl);
+            font-size: var(--text-sm);
+        }
+
+        [data-scope="collapsible"][data-part="panel"] {
+            padding: 0 var(--space-xl) var(--space-lg);
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="collapsible"][data-part="root"][data-size="lg"]) to ([data-scope="collapsible"][data-part="root"]) {
+        [data-scope="collapsible"][data-part="trigger"] {
+            padding: var(--space-2xl) var(--space-2xl);
+            font-size: var(--text-lg);
+        }
+
+        [data-scope="collapsible"][data-part="panel"] {
+            padding: 0 var(--space-2xl) var(--space-2xl);
+            font-size: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="collapsible"][data-part="root"][data-size="xl"]) to ([data-scope="collapsible"][data-part="root"]) {
+        [data-scope="collapsible"][data-part="trigger"] {
+            padding: var(--space-2xl) var(--space-2xl);
+            font-size: var(--text-xl);
+        }
+
+        [data-scope="collapsible"][data-part="panel"] {
+            padding: 0 var(--space-2xl) var(--space-2xl);
+            font-size: var(--text-lg);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="collapsible"][data-part="root"]::details-content {
+            transition: none;
+        }
+    }
+}