@sigx/zero-daisyui 0.2.0-beta.1

package/dist/css/components/button.css

@@ -0,0 +1,252 @@
+@layer zero.recipes {
+    [data-scope="button"][data-part="root"] {
+        --btn-accent: var(--color-primary);
+        --btn-on-accent: var(--color-primary-content);
+        --btn-soft: var(--color-primary-soft);
+        --btn-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5em;
+        border: var(--border) solid transparent;
+        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), border-color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="button"][data-part="root"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="button"][data-part="root"][data-focus-visible] {
+        outline: 2px solid var(--btn-ink);
+        outline-offset: 2px;
+    }
+
+    [data-scope="button"][data-part="root"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+        box-shadow: none;
+    }
+
+    [data-scope="button"][data-part="root"][data-color="primary"] {
+        --btn-accent: var(--color-primary);
+        --btn-on-accent: var(--color-primary-content);
+        --btn-soft: var(--color-primary-soft);
+        --btn-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"]:not([data-color]) {
+        --btn-accent: var(--color-primary);
+        --btn-on-accent: var(--color-primary-content);
+        --btn-soft: var(--color-primary-soft);
+        --btn-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"][data-color="secondary"] {
+        --btn-accent: var(--color-secondary);
+        --btn-on-accent: var(--color-secondary-content);
+        --btn-soft: var(--color-secondary-soft);
+        --btn-ink: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"][data-color="accent"] {
+        --btn-accent: var(--color-accent);
+        --btn-on-accent: var(--color-accent-content);
+        --btn-soft: var(--color-accent-soft);
+        --btn-ink: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"][data-color="neutral"] {
+        --btn-accent: var(--color-neutral);
+        --btn-on-accent: var(--color-neutral-content);
+        --btn-soft: var(--color-neutral-soft);
+        --btn-ink: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"][data-color="info"] {
+        --btn-accent: var(--color-info);
+        --btn-on-accent: var(--color-info-content);
+        --btn-soft: var(--color-info-soft);
+        --btn-ink: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"][data-color="success"] {
+        --btn-accent: var(--color-success);
+        --btn-on-accent: var(--color-success-content);
+        --btn-soft: var(--color-success-soft);
+        --btn-ink: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"][data-color="warning"] {
+        --btn-accent: var(--color-warning);
+        --btn-on-accent: var(--color-warning-content);
+        --btn-soft: var(--color-warning-soft);
+        --btn-ink: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"][data-color="error"] {
+        --btn-accent: var(--color-error);
+        --btn-on-accent: var(--color-error-content);
+        --btn-soft: var(--color-error-soft);
+        --btn-ink: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="solid"] {
+        background: var(--btn-accent);
+        color: var(--btn-on-accent);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="solid"]:hover:not([data-disabled]) {
+        filter: brightness(0.92);
+    }
+
+    [data-scope="button"][data-part="root"]:not([data-variant]) {
+        background: var(--btn-accent);
+        color: var(--btn-on-accent);
+    }
+
+    [data-scope="button"][data-part="root"]:not([data-variant]):hover:not([data-disabled]) {
+        filter: brightness(0.92);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="outline"] {
+        background: transparent;
+        color: var(--btn-ink);
+        border-color: var(--btn-ink);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="outline"]:hover:not([data-disabled]) {
+        background: var(--btn-soft);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="soft"] {
+        background: var(--btn-soft);
+        color: var(--btn-ink);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="soft"]:hover:not([data-disabled]) {
+        filter: brightness(0.95);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="ghost"] {
+        background: transparent;
+        color: var(--btn-ink);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="ghost"]:hover:not([data-disabled]) {
+        background: var(--btn-soft);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="dash"] {
+        background: transparent;
+        color: var(--btn-ink);
+        border-color: var(--btn-ink);
+        border-style: dashed;
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="dash"]:hover:not([data-disabled]) {
+        background: var(--btn-soft);
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="link"] {
+        background: transparent;
+        color: var(--btn-ink);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        box-shadow: none;
+    }
+
+    [data-scope="button"][data-part="root"][data-variant="link"]:hover:not([data-disabled]) {
+        text-decoration-thickness: 2px;
+    }
+
+    [data-scope="button"][data-part="root"][data-size="xs"] {
+        padding: var(--space-2xs) var(--space-xs);
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="button"][data-part="root"][data-size="sm"] {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: var(--text-sm);
+    }
+
+    [data-scope="button"][data-part="root"][data-size="md"] {
+        padding: var(--space-sm) var(--space-lg);
+        font-size: var(--text-md);
+    }
+
+    [data-scope="button"][data-part="root"]:not([data-size]) {
+        padding: var(--space-sm) var(--space-lg);
+        font-size: var(--text-md);
+    }
+
+    [data-scope="button"][data-part="root"][data-size="lg"] {
+        padding: var(--space-md) var(--space-xl);
+        font-size: var(--text-lg);
+    }
+
+    [data-scope="button"][data-part="root"][data-size="xl"] {
+        padding: var(--space-lg) var(--space-2xl);
+        font-size: var(--text-xl);
+    }
+
+    [data-scope="button"][data-part="root"][data-mod-wide] {
+        inline-size: 100%;
+        max-inline-size: 16rem;
+    }
+
+    [data-scope="button"][data-part="root"][data-mod-block] {
+        inline-size: 100%;
+    }
+
+    [data-scope="button"][data-part="root"][data-mod-square] {
+        padding-inline: 0;
+        aspect-ratio: 1;
+    }
+
+    [data-scope="button"][data-part="root"][data-mod-circle] {
+        padding-inline: 0;
+        aspect-ratio: 1;
+        border-radius: 9999px;
+    }
+
+    [data-scope="button"][data-part="root"][data-mod-active] {
+        transform: translateY(1px);
+        box-shadow: none;
+        filter: brightness(0.92);
+    }
+
+    [data-scope="button"][data-part="root"][data-mod-loading] {
+        cursor: progress;
+    }
+
+    [data-scope="button"][data-part="root"][data-mod-loading]::before {
+        content: "";
+        box-sizing: border-box;
+        inline-size: 1em;
+        block-size: 1em;
+        flex: none;
+        border-radius: 9999px;
+        border: calc(var(--border) * 2) solid currentColor;
+        border-block-start-color: transparent;
+        animation: zero-daisyui-btn-spin 0.7s linear infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="button"][data-part="root"][data-mod-loading]::before {
+            animation: none;
+        }
+    }
+}
+@keyframes zero-daisyui-btn-spin {
+    to { transform: rotate(360deg) }
+}

package/dist/css/components/card.css

@@ -0,0 +1,97 @@
+@layer zero.recipes {
+    [data-scope="card"][data-part="root"] {
+        --card-pad: var(--space-xl);
+    }
+
+    [data-scope="card"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        border-radius: var(--radius-box);
+        box-shadow: var(--shadow-md);
+        overflow: hidden;
+    }
+
+    [data-scope="card"][data-part="header"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2xs);
+        padding: var(--card-pad) var(--card-pad) 0;
+    }
+
+    [data-scope="card"][data-part="title"] {
+        margin: 0;
+        font-size: var(--text-lg);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-tight);
+    }
+
+    [data-scope="card"][data-part="description"] {
+        margin: 0;
+        font-size: var(--text-sm);
+        color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    }
+
+    [data-scope="card"][data-part="body"] {
+        padding: var(--card-pad);
+        font-size: var(--text-sm);
+        line-height: var(--leading-normal);
+    }
+
+    [data-scope="card"][data-part="footer"] {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--space-md);
+        padding: 0 var(--card-pad) var(--card-pad);
+    }
+
+    [data-scope="card"][data-part="root"][data-color="primary"] {
+        border-top: calc(var(--border) * 3) solid var(--color-primary);
+    }
+
+    [data-scope="card"][data-part="root"][data-color="secondary"] {
+        border-top: calc(var(--border) * 3) solid var(--color-secondary);
+    }
+
+    [data-scope="card"][data-part="root"][data-color="accent"] {
+        border-top: calc(var(--border) * 3) solid var(--color-accent);
+    }
+
+    [data-scope="card"][data-part="root"][data-color="neutral"] {
+        border-top: calc(var(--border) * 3) solid var(--color-neutral);
+    }
+
+    [data-scope="card"][data-part="root"][data-color="info"] {
+        border-top: calc(var(--border) * 3) solid var(--color-info);
+    }
+
+    [data-scope="card"][data-part="root"][data-color="success"] {
+        border-top: calc(var(--border) * 3) solid var(--color-success);
+    }
+
+    [data-scope="card"][data-part="root"][data-color="warning"] {
+        border-top: calc(var(--border) * 3) solid var(--color-warning);
+    }
+
+    [data-scope="card"][data-part="root"][data-color="error"] {
+        border-top: calc(var(--border) * 3) solid var(--color-error);
+    }
+
+    [data-scope="card"][data-part="root"][data-size="xs"] {
+        --card-pad: var(--space-sm);
+    }
+
+    [data-scope="card"][data-part="root"][data-size="sm"] {
+        --card-pad: var(--space-md);
+    }
+
+    [data-scope="card"][data-part="root"][data-size="lg"] {
+        --card-pad: var(--space-2xl);
+    }
+
+    [data-scope="card"][data-part="root"][data-size="xl"] {
+        --card-pad: var(--space-2xl);
+    }
+}

package/dist/css/components/carousel.css

@@ -0,0 +1,196 @@
+@layer zero.recipes {
+    [data-scope="carousel"][data-part="root"] {
+        --carousel-accent: var(--color-base-content);
+        --carousel-dot: 0.625rem;
+        --carousel-nav: 2rem;
+    }
+
+    [data-scope="carousel"][data-part="root"] {
+        position: relative;
+        display: grid;
+        gap: var(--space-sm);
+    }
+
+    [data-scope="carousel"][data-part="viewport"] {
+        display: flex;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        overscroll-behavior-x: contain;
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="carousel"][data-part="viewport"]:focus-visible {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="carousel"][data-part="item"] {
+        flex: 0 0 100%;
+        min-width: 0;
+        scroll-snap-align: center;
+    }
+
+    [data-scope="carousel"][data-part="prev-trigger"] {
+        appearance: none;
+        position: absolute;
+        inset-block-start: calc(50% - var(--carousel-nav) / 2);
+        inset-inline-start: var(--space-sm);
+        inline-size: var(--carousel-nav);
+        block-size: var(--carousel-nav);
+        display: grid;
+        place-items: center;
+        font-size: var(--text-sm);
+        line-height: var(--leading-none);
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: 9999px;
+        cursor: pointer;
+        z-index: 1;
+    }
+
+    [data-scope="carousel"][data-part="prev-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="carousel"][data-part="prev-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="carousel"][data-part="prev-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="carousel"][data-part="prev-trigger"][data-pressed]:not([data-disabled]) {
+        translate: 0 1px;
+    }
+
+    [data-scope="carousel"][data-part="next-trigger"] {
+        appearance: none;
+        position: absolute;
+        inset-block-start: calc(50% - var(--carousel-nav) / 2);
+        inset-inline-end: var(--space-sm);
+        inline-size: var(--carousel-nav);
+        block-size: var(--carousel-nav);
+        display: grid;
+        place-items: center;
+        font-size: var(--text-sm);
+        line-height: var(--leading-none);
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: 9999px;
+        cursor: pointer;
+        z-index: 1;
+    }
+
+    [data-scope="carousel"][data-part="next-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="carousel"][data-part="next-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="carousel"][data-part="next-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="carousel"][data-part="next-trigger"][data-pressed]:not([data-disabled]) {
+        translate: 0 1px;
+    }
+
+    [data-scope="carousel"][data-part="indicator-group"] {
+        display: flex;
+        gap: var(--space-xs);
+        justify-content: center;
+    }
+
+    [data-scope="carousel"][data-part="indicator"] {
+        appearance: none;
+        inline-size: max(var(--carousel-dot), 1.5rem);
+        block-size: max(var(--carousel-dot), 1.5rem);
+        padding: 0;
+        display: grid;
+        place-items: center;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+    }
+
+    [data-scope="carousel"][data-part="indicator"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="carousel"][data-part="indicator"]::before {
+        content: "";
+        inline-size: var(--carousel-dot);
+        block-size: var(--carousel-dot);
+        box-sizing: border-box;
+        border: calc(var(--border) * 2) solid color-mix(in oklab, var(--color-base-content) 70%, transparent);
+        border-radius: 9999px;
+        background: transparent;
+    }
+
+    [data-scope="carousel"][data-part="indicator"][data-state="active"]::before {
+        background: var(--carousel-accent);
+        border-color: var(--carousel-accent);
+    }
+
+    [data-scope="carousel"][data-part="root"][data-color="primary"] {
+        --carousel-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="carousel"][data-part="root"][data-color="secondary"] {
+        --carousel-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="carousel"][data-part="root"][data-color="accent"] {
+        --carousel-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="carousel"][data-part="root"][data-color="neutral"] {
+        --carousel-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="carousel"][data-part="root"][data-color="info"] {
+        --carousel-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="carousel"][data-part="root"][data-color="success"] {
+        --carousel-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="carousel"][data-part="root"][data-color="warning"] {
+        --carousel-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="carousel"][data-part="root"][data-color="error"] {
+        --carousel-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="carousel"][data-part="root"][data-size="xs"] {
+        --carousel-dot: 0.375rem;
+        --carousel-nav: 1.5rem;
+    }
+
+    [data-scope="carousel"][data-part="root"][data-size="sm"] {
+        --carousel-dot: 0.5rem;
+        --carousel-nav: 1.75rem;
+    }
+
+    [data-scope="carousel"][data-part="root"][data-size="lg"] {
+        --carousel-dot: 0.75rem;
+        --carousel-nav: 2.5rem;
+    }
+
+    [data-scope="carousel"][data-part="root"][data-size="xl"] {
+        --carousel-dot: 0.875rem;
+        --carousel-nav: 3rem;
+    }
+}