@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/components/toast.css

@@ -0,0 +1,234 @@
+@layer zero.recipes {
+    [data-scope="toast"][data-part="root"] {
+        --toast-bg: var(--color-base-200);
+        --toast-ink: var(--color-base-content);
+        --toast-from: 8px;
+    }
+
+    [data-scope="toast"][data-part="viewport"] {
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        padding: var(--space-lg);
+        border: none;
+        background: transparent;
+        overflow: visible;
+        width: min(24rem, 100vw);
+        list-style: none;
+        flex-direction: column;
+        gap: var(--space-sm);
+        pointer-events: none;
+    }
+
+    [data-scope="toast"][data-part="viewport"]:popover-open {
+        display: flex;
+    }
+
+    [data-scope="toast"][data-part="viewport"][data-placement="top-start"] {
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+    [data-scope="toast"][data-part="viewport"][data-placement="top"] {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    [data-scope="toast"][data-part="viewport"][data-placement="top-end"] {
+        top: 0;
+        inset-inline-end: 0;
+    }
+
+    [data-scope="toast"][data-part="viewport"][data-placement="bottom-start"] {
+        bottom: 0;
+        inset-inline-start: 0;
+        flex-direction: column-reverse;
+    }
+
+    [data-scope="toast"][data-part="viewport"][data-placement="bottom"] {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        flex-direction: column-reverse;
+    }
+
+    [data-scope="toast"][data-part="viewport"][data-placement="bottom-end"] {
+        bottom: 0;
+        inset-inline-end: 0;
+        flex-direction: column-reverse;
+    }
+
+    [data-scope="toast"][data-part="root"] {
+        pointer-events: auto;
+        display: grid;
+        grid-template-columns: 1fr auto auto;
+        align-items: center;
+        column-gap: var(--space-md);
+        padding: var(--space-md) var(--space-lg);
+        background: var(--toast-bg);
+        color: var(--toast-ink);
+        border-radius: var(--radius-box);
+        box-shadow: var(--shadow-lg);
+        font-size: var(--text-sm);
+        opacity: 0;
+        transform: translateY(var(--toast-from));
+        transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
+    }
+
+    [data-scope="toast"][data-part="root"][data-state="open"] {
+        opacity: 1;
+        transform: none;
+    }
+
+    [data-scope="toast"][data-part="root"][data-placement^="top"] {
+        --toast-from: -8px;
+    }
+
+    [data-scope="toast"][data-part="title"] {
+        grid-column: 1;
+        font-weight: var(--weight-semibold);
+    }
+
+    [data-scope="toast"][data-part="description"] {
+        grid-column: 1;
+        font-size: var(--text-xs);
+        color: color-mix(in oklab, var(--toast-ink) 75%, transparent);
+    }
+
+    [data-scope="toast"][data-part="action"] {
+        grid-column: 2;
+        grid-row: 1;
+        appearance: none;
+        border: var(--border) solid color-mix(in oklab, var(--toast-ink) 25%, transparent);
+        background: transparent;
+        color: var(--toast-ink);
+        border-radius: 9999px;
+        padding: var(--space-2xs) var(--space-md);
+        font-size: var(--text-xs);
+        font-weight: var(--weight-semibold);
+        cursor: pointer;
+    }
+
+    [data-scope="toast"][data-part="action"]:hover:not([data-disabled]) {
+        background: color-mix(in oklab, var(--toast-ink) 10%, transparent);
+    }
+
+    [data-scope="toast"][data-part="action"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="toast"][data-part="action"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="toast"][data-part="close"] {
+        grid-column: 3;
+        grid-row: 1;
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: var(--toast-ink);
+        border-radius: 9999px;
+        padding: var(--space-2xs) var(--space-xs);
+        font-size: var(--text-xs);
+        cursor: pointer;
+    }
+
+    [data-scope="toast"][data-part="close"]:hover:not([data-disabled]) {
+        background: color-mix(in oklab, var(--toast-ink) 10%, transparent);
+    }
+
+    [data-scope="toast"][data-part="close"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="toast"][data-part="close"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="toast"][data-part="root"][data-color="primary"] {
+        --toast-bg: var(--color-primary-soft);
+        --toast-ink: var(--color-primary);
+    }
+
+    [data-scope="toast"][data-part="root"][data-color="secondary"] {
+        --toast-bg: var(--color-secondary-soft);
+        --toast-ink: var(--color-secondary);
+    }
+
+    [data-scope="toast"][data-part="root"][data-color="accent"] {
+        --toast-bg: var(--color-accent-soft);
+        --toast-ink: var(--color-accent);
+    }
+
+    [data-scope="toast"][data-part="root"][data-color="neutral"] {
+        --toast-bg: var(--color-neutral-soft);
+        --toast-ink: var(--color-neutral);
+    }
+
+    [data-scope="toast"][data-part="root"][data-color="info"] {
+        --toast-bg: var(--color-info-soft);
+        --toast-ink: var(--color-info);
+    }
+
+    [data-scope="toast"][data-part="root"][data-color="success"] {
+        --toast-bg: var(--color-success-soft);
+        --toast-ink: var(--color-success);
+    }
+
+    [data-scope="toast"][data-part="root"][data-color="warning"] {
+        --toast-bg: var(--color-warning-soft);
+        --toast-ink: var(--color-warning);
+    }
+
+    [data-scope="toast"][data-part="root"][data-color="error"] {
+        --toast-bg: var(--color-error-soft);
+        --toast-ink: var(--color-error);
+    }
+
+    [data-scope="toast"][data-part="root"][data-size="xs"] {
+        padding: var(--space-xs) var(--space-md);
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="toast"][data-part="root"][data-size="sm"] {
+        padding: var(--space-sm) var(--space-md);
+        font-size: var(--text-sm);
+    }
+
+    [data-scope="toast"][data-part="root"][data-size="lg"] {
+        padding: var(--space-lg) var(--space-xl);
+        font-size: var(--text-md);
+    }
+
+    [data-scope="toast"][data-part="root"][data-size="xl"] {
+        padding: var(--space-xl) var(--space-2xl);
+        font-size: var(--text-lg);
+    }
+
+    @scope ([data-scope="toast"][data-part="root"][data-size="lg"]) to ([data-scope="toast"][data-part="root"]) {
+        [data-scope="toast"][data-part="description"] {
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="toast"][data-part="root"][data-size="xl"]) to ([data-scope="toast"][data-part="root"]) {
+        [data-scope="toast"][data-part="description"] {
+            font-size: var(--text-md);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="toast"][data-part="root"] {
+            transition: none;
+        }
+
+        [data-scope="toast"][data-part="root"][data-state="open"] {
+            transform: none;
+        }
+    }
+}

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

@@ -0,0 +1,164 @@
+@layer zero.recipes {
+    [data-scope="toggle-group"][data-part="root"] {
+        --toggle-group-accent: var(--color-primary);
+        --toggle-group-on-accent: var(--color-primary-content);
+    }
+
+    [data-scope="toggle-group"][data-part="root"] {
+        display: inline-flex;
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        box-shadow: var(--shadow-xs);
+        overflow: hidden;
+    }
+
+    [data-scope="toggle-group"][data-part="root"][data-disabled] {
+        opacity: var(--disabled-opacity);
+    }
+
+    [data-scope="toggle-group"][data-part="root"][data-orientation="vertical"] {
+        flex-direction: column;
+    }
+
+    [data-scope="toggle-group"][data-part="item"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5em;
+        background: transparent;
+        color: var(--color-base-content);
+        border: none;
+        padding: var(--space-sm) var(--space-lg);
+        font-family: inherit;
+        font-weight: var(--weight-semibold);
+        font-size: var(--text-sm);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="toggle-group"][data-part="item"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="toggle-group"][data-part="item"][data-state="on"] {
+        background: var(--toggle-group-accent);
+        color: var(--toggle-group-on-accent);
+    }
+
+    [data-scope="toggle-group"][data-part="item"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="toggle-group"][data-part="item"][data-focus-visible] {
+        outline: 2px solid var(--toggle-group-accent);
+        outline-offset: -2px;
+    }
+
+    [data-scope="toggle-group"][data-part="item"][data-state="on"]:hover {
+        background: var(--toggle-group-accent);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="toggle-group"][data-part="item"][data-orientation="horizontal"] + [data-scope="toggle-group"][data-part="item"] {
+        border-inline-start: var(--border) solid var(--color-base-300);
+    }
+
+    [data-scope="toggle-group"][data-part="item"][data-orientation="vertical"] + [data-scope="toggle-group"][data-part="item"] {
+        border-block-start: var(--border) solid var(--color-base-300);
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-size="xs"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            font-size: var(--text-xs);
+            padding: var(--space-2xs) var(--space-sm);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-size="sm"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            font-size: var(--text-xs);
+            padding: var(--space-xs) var(--space-md);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-size="lg"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            font-size: var(--text-md);
+            padding: var(--space-md) var(--space-xl);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-size="xl"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            font-size: var(--text-lg);
+            padding: var(--space-lg) var(--space-2xl);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-color="primary"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-primary);
+            --toggle-group-on-accent: var(--color-primary-content);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"]:not([data-color])) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-primary);
+            --toggle-group-on-accent: var(--color-primary-content);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-color="secondary"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-secondary);
+            --toggle-group-on-accent: var(--color-secondary-content);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-color="accent"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-accent);
+            --toggle-group-on-accent: var(--color-accent-content);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-color="neutral"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-neutral);
+            --toggle-group-on-accent: var(--color-neutral-content);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-color="info"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-info);
+            --toggle-group-on-accent: var(--color-info-content);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-color="success"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-success);
+            --toggle-group-on-accent: var(--color-success-content);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-color="warning"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-warning);
+            --toggle-group-on-accent: var(--color-warning-content);
+        }
+    }
+
+    @scope ([data-scope="toggle-group"][data-part="root"][data-color="error"]) to ([data-scope="toggle-group"][data-part="root"]) {
+        [data-scope="toggle-group"][data-part="item"] {
+            --toggle-group-accent: var(--color-error);
+            --toggle-group-on-accent: var(--color-error-content);
+        }
+    }
+}

package/dist/css/components/toggle.css

@@ -0,0 +1,139 @@
+@layer zero.recipes {
+    [data-scope="toggle"][data-part="root"] {
+        --toggle-accent: var(--color-primary);
+        --toggle-on-accent: var(--color-primary-content);
+        --toggle-soft: var(--color-primary-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5em;
+        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);
+        font-family: inherit;
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="toggle"][data-part="root"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-state="on"] {
+        background: var(--toggle-accent);
+        color: var(--toggle-on-accent);
+        border-color: var(--toggle-accent);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="toggle"][data-part="root"][data-focus-visible] {
+        outline: 2px solid var(--toggle-accent);
+        outline-offset: 2px;
+    }
+
+    [data-scope="toggle"][data-part="root"][data-state="on"]:hover {
+        background: var(--toggle-accent);
+        filter: brightness(0.92);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+        box-shadow: none;
+    }
+
+    [data-scope="toggle"][data-part="root"][data-color="primary"] {
+        --toggle-accent: var(--color-primary);
+        --toggle-on-accent: var(--color-primary-content);
+        --toggle-soft: var(--color-primary-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"]:not([data-color]) {
+        --toggle-accent: var(--color-primary);
+        --toggle-on-accent: var(--color-primary-content);
+        --toggle-soft: var(--color-primary-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-color="secondary"] {
+        --toggle-accent: var(--color-secondary);
+        --toggle-on-accent: var(--color-secondary-content);
+        --toggle-soft: var(--color-secondary-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-color="accent"] {
+        --toggle-accent: var(--color-accent);
+        --toggle-on-accent: var(--color-accent-content);
+        --toggle-soft: var(--color-accent-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-color="neutral"] {
+        --toggle-accent: var(--color-neutral);
+        --toggle-on-accent: var(--color-neutral-content);
+        --toggle-soft: var(--color-neutral-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-color="info"] {
+        --toggle-accent: var(--color-info);
+        --toggle-on-accent: var(--color-info-content);
+        --toggle-soft: var(--color-info-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-color="success"] {
+        --toggle-accent: var(--color-success);
+        --toggle-on-accent: var(--color-success-content);
+        --toggle-soft: var(--color-success-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-color="warning"] {
+        --toggle-accent: var(--color-warning);
+        --toggle-on-accent: var(--color-warning-content);
+        --toggle-soft: var(--color-warning-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-color="error"] {
+        --toggle-accent: var(--color-error);
+        --toggle-on-accent: var(--color-error-content);
+        --toggle-soft: var(--color-error-soft);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-size="xs"] {
+        padding: var(--space-2xs) var(--space-xs);
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-size="sm"] {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: var(--text-sm);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-size="md"] {
+        padding: var(--space-sm) var(--space-lg);
+        font-size: var(--text-md);
+    }
+
+    [data-scope="toggle"][data-part="root"]:not([data-size]) {
+        padding: var(--space-sm) var(--space-lg);
+        font-size: var(--text-md);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-size="lg"] {
+        padding: var(--space-md) var(--space-xl);
+        font-size: var(--text-lg);
+    }
+
+    [data-scope="toggle"][data-part="root"][data-size="xl"] {
+        padding: var(--space-lg) var(--space-2xl);
+        font-size: var(--text-xl);
+    }
+}