@sigx/zero-daisyui 0.2.0-beta.6 → 0.4.0

package/src/tokens.ts

@@ -3,6 +3,7 @@
  * zero contract. Values match the daisy presets `@sigx/daisyui` ships, so a
  * zero app skinned with this package sits visually next to a daisy app.
  */
+import { layoutScopes } from '@sigx/zero-kit/define';
 import type { CustomTokenDecl, RoleDecl, SystemTokens, TokensInput } from '@sigx/zero-kit';
 
 /** daisyUI's color vocabulary — the recommended eight roles, declared explicitly. */
@@ -42,6 +43,18 @@ export const system = {
     },
     // daisy runs a slightly roomier ramp than basic — the `xl`/`2xl` steps
     // are where its cards and modals get their air.
+    // Page-scale widths a Container is bounded by. The density ramp cannot
+    // reach these — it tops out at a rung you would not notice.
+    // Tailwind's container ramp, which is what daisy is authored against.
+    measure: {
+        xs: '20rem',
+        sm: '24rem',
+        md: '28rem',
+        lg: '32rem',
+        xl: '36rem',
+        prose: '65ch',
+    },
+
     spacing: {
         '2xs': '0.125rem',
         xs: '0.25rem',
@@ -140,18 +153,20 @@ export const variants = [...buttonVariants, ...tabVariants] as const;
 
 /**
  * daisyUI 5's button modifier set (#332), each a documented `btn-*` class:
- * `btn-wide`, `btn-block`, `btn-square`, `btn-circle`, `btn-active`, and
- * the loading spinner (daisy renders it as a `loading loading-spinner`
- * span; here the recipe draws it, no DOM change). All six were boolean
- * props on the old `@sigx/daisyui` Button — the api declaration routes
- * them back to those names.
+ * `btn-wide`, `btn-block`, `btn-square`, `btn-circle`, `btn-active`. All
+ * five were boolean props on the old `@sigx/daisyui` Button — the api
+ * declaration routes them back to those names. The sixth, `loading`, is not
+ * a modifier any more: since #50 it is `Button.Root`'s own prop (a state
+ * with `aria-busy` and blocked activation, not just paint), so
+ * `<Button loading>` reaches zero directly and the recipe draws the
+ * `spinner` part.
  *
  * `glass` is deliberately NOT here: daisyUI 5 no longer documents it on
  * any component (a v4 relic whose v5 survival is a compatibility style
  * with open breakage — saadeghi/daisyui#3316, #3501), and the old
  * `@sigx/daisyui` Button never exposed it either.
  */
-export const modifiers = ['wide', 'block', 'square', 'circle', 'active', 'loading'] as const;
+export const modifiers = ['wide', 'block', 'square', 'circle', 'active'] as const;
 
 /**
  * daisyUI's table looks (#340): `table-zebra` and the row-level `hover`
@@ -160,11 +175,37 @@ export const modifiers = ['wide', 'block', 'square', 'circle', 'active', 'loadin
  */
 export const tableModifiers = ['zebra', 'hover'] as const;
 
+/**
+ * A countdown set inside a sentence (#57). daisy's own `.countdown` sets no
+ * display size — it takes the text utilities around it — so `inline` is the
+ * daisy-faithful look, spelled as the opt-out from this skin's display step.
+ */
+export const countdownModifiers = ['inline'] as const;
+
 export const tokens: TokensInput<typeof roles, typeof system> = {
     roles,
     custom,
     variants,
-    modifiers: [...modifiers, ...tableModifiers],
+    modifiers: [...modifiers, ...tableModifiers, ...countdownModifiers],
+    /**
+     * The avatar's shape (zero#129) — the first custom axis a shipped skin
+     * declares, and the acceptance test for `tokens.axes`: an enumerated
+     * choice with no named prop (`axes={{ shape: 'square' }}` →
+     * `data-shape="square"`). Wired on avatar alone; its unset default is
+     * this skin's own avatar radius.
+     */
+    axes: { shape: ['circle', 'square', 'rounded'] },
+    /**
+     * daisyUI's own ramp — Tailwind's, which daisy is authored against.
+     *
+     * Declared because of the layout tier: the other five skins already had
+     * breakpoints, and without one here a responsive layout prop
+     * (`gap={{ md: 'lg' }}`) would render an attribute that matches nothing
+     * on this skin alone — a zero-level prop silently working in five design
+     * systems and not the sixth. `resolveCondition` also throws on an
+     * unknown condition key, so a recipe could not reference one either.
+     */
+    breakpoints: { sm: '40rem', md: '48rem', lg: '64rem' },
     /**
      * Per-scope vocabulary claims (#294). Button wires `variant` and the
      * `btn-*` modifier set (#175); restating its union is the explicit
@@ -174,11 +215,17 @@ export const tokens: TokensInput<typeof roles, typeof system> = {
      * and tabs (#377) carries the three flavors and nothing of button's.
      */
     scopes: {
+        // The layout tier wires neither colour nor size — every one of its
+        // scopes is geometry, and `data-color` on geometry would paint
+        // nothing. Declared out of existence rather than left to the
+        // axis-coverage audit to report.
+        ...layoutScopes,
         button: {
             variants: [...buttonVariants],
             modifiers: [...modifiers],
         },
         table: { modifiers: [...tableModifiers] },
+        countdown: { modifiers: [...countdownModifiers] },
         tabs: { variants: [...tabVariants] },
     },
     system,

package/dist/css/components/native-select.css

@@ -1,128 +0,0 @@
-@layer zero.recipes {
-    [data-scope="native-select"][data-part="root"] {
-        --native-select-accent: var(--color-base-content);
-    }
-
-    [data-scope="native-select"][data-part="root"] {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    [data-scope="native-select"][data-part="control"] {
-        appearance: none;
-        width: 100%;
-        min-width: 12rem;
-        box-sizing: border-box;
-        height: calc(var(--size-field) * 12);
-        background: var(--color-base-100);
-        border: var(--border) solid var(--color-base-300);
-        border-radius: var(--radius-field);
-        box-shadow: var(--shadow-xs);
-        color: var(--color-base-content);
-        font: inherit;
-        font-size: var(--text-sm);
-        padding: var(--space-sm) var(--space-md);
-        padding-inline-end: calc(var(--space-md) + 1.25em);
-        cursor: pointer;
-        transition: border-color var(--duration-fast) var(--ease-standard);
-    }
-
-    [data-scope="native-select"][data-part="control"]:hover:not([data-disabled]) {
-        border-color: var(--color-base-content);
-    }
-
-    [data-scope="native-select"][data-part="control"][data-invalid] {
-        border-color: var(--color-error);
-    }
-
-    [data-scope="native-select"][data-part="control"][data-disabled] {
-        opacity: var(--disabled-opacity);
-        cursor: not-allowed;
-    }
-
-    [data-scope="native-select"][data-part="control"][data-placeholder] {
-        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-    }
-
-    [data-scope="native-select"][data-part="control"][data-focus-visible] {
-        outline: 2px solid var(--native-select-accent);
-        outline-offset: 2px;
-    }
-
-    [data-scope="native-select"][data-part="indicator"] {
-        position: absolute;
-        inset-inline-end: var(--space-md);
-        pointer-events: none;
-        opacity: 0.6;
-        font-size: var(--text-sm);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="primary"] {
-        --native-select-accent: var(--color-primary);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="secondary"] {
-        --native-select-accent: var(--color-secondary);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="accent"] {
-        --native-select-accent: var(--color-accent);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="neutral"] {
-        --native-select-accent: var(--color-neutral);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="info"] {
-        --native-select-accent: var(--color-info);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="success"] {
-        --native-select-accent: var(--color-success);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="warning"] {
-        --native-select-accent: var(--color-warning);
-    }
-
-    [data-scope="native-select"][data-part="root"][data-color="error"] {
-        --native-select-accent: var(--color-error);
-    }
-
-    @scope ([data-scope="native-select"][data-part="root"][data-size="xs"]) to ([data-scope="native-select"][data-part="root"]) {
-        [data-scope="native-select"][data-part="control"] {
-            height: calc(var(--size-field) * 8);
-            font-size: var(--text-xs);
-            padding: var(--space-2xs) var(--space-xs);
-            padding-inline-end: calc(var(--space-xs) + 1.25em);
-        }
-    }
-
-    @scope ([data-scope="native-select"][data-part="root"][data-size="sm"]) to ([data-scope="native-select"][data-part="root"]) {
-        [data-scope="native-select"][data-part="control"] {
-            height: calc(var(--size-field) * 10);
-            font-size: var(--text-xs);
-            padding: var(--space-xs) var(--space-sm);
-            padding-inline-end: calc(var(--space-sm) + 1.25em);
-        }
-    }
-
-    @scope ([data-scope="native-select"][data-part="root"][data-size="lg"]) to ([data-scope="native-select"][data-part="root"]) {
-        [data-scope="native-select"][data-part="control"] {
-            height: calc(var(--size-field) * 14);
-            font-size: var(--text-md);
-            padding: var(--space-md) var(--space-lg);
-            padding-inline-end: calc(var(--space-lg) + 1.25em);
-        }
-    }
-
-    @scope ([data-scope="native-select"][data-part="root"][data-size="xl"]) to ([data-scope="native-select"][data-part="root"]) {
-        [data-scope="native-select"][data-part="control"] {
-            height: calc(var(--size-field) * 16);
-            font-size: var(--text-lg);
-            padding: var(--space-lg) var(--space-xl);
-            padding-inline-end: calc(var(--space-xl) + 1.25em);
-        }
-    }
-}

package/dist/lynx/components/native-select.css

@@ -1,130 +0,0 @@
-.zx-native-select__root {
-    --native-select-accent: var(--color-base-content);
-}
-
-.zx-native-select__root {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-.zx-native-select__control {
-    appearance: none;
-    width: 100%;
-    min-width: 12rem;
-    box-sizing: border-box;
-    height: calc(var(--size-field) * 12);
-    background: var(--color-base-100);
-    border: var(--border) solid var(--color-base-300);
-    border-radius: var(--radius-field);
-    box-shadow: var(--shadow-xs);
-    color: var(--color-base-content);
-    font: inherit;
-    font-size: var(--text-sm);
-    padding: var(--space-sm) var(--space-md);
-    cursor: pointer;
-    transition: border-color var(--duration-fast) var(--ease-standard);
-    padding-right: calc(var(--space-md) + 1.25em);
-}
-
-.zx-native-select__control.zx-f-invalid {
-    border-color: var(--color-error);
-}
-
-.zx-native-select__control.zx-f-disabled {
-    opacity: var(--disabled-opacity);
-    cursor: not-allowed;
-}
-
-.zx-root .zx-native-select__control.zx-f-placeholder {
-    color: #07070899;
-}
-
-.zx-root.zx-theme-dark .zx-native-select__control.zx-f-placeholder {
-    color: #767d8099;
-}
-
-.zx-root.zx-theme-dim .zx-native-select__control.zx-f-placeholder {
-    color: #57656a99;
-}
-
-.zx-root.zx-theme-nord .zx-native-select__control.zx-f-placeholder {
-    color: #12151b99;
-}
-
-.zx-root.zx-theme-sunset .zx-native-select__control.zx-f-placeholder {
-    color: #4d5b6799;
-}
-
-.zx-native-select__control.zx-f-focus-visible {
-    outline: 2px solid var(--native-select-accent);
-    outline-offset: 2px;
-}
-
-.zx-native-select__indicator {
-    position: absolute;
-    pointer-events: none;
-    opacity: 0.6;
-    font-size: var(--text-sm);
-    right: var(--space-md);
-}
-
-.zx-native-select__root.zx-a-color-primary {
-    --native-select-accent: var(--color-primary);
-}
-
-.zx-native-select__root.zx-a-color-secondary {
-    --native-select-accent: var(--color-secondary);
-}
-
-.zx-native-select__root.zx-a-color-accent {
-    --native-select-accent: var(--color-accent);
-}
-
-.zx-native-select__root.zx-a-color-neutral {
-    --native-select-accent: var(--color-neutral);
-}
-
-.zx-native-select__root.zx-a-color-info {
-    --native-select-accent: var(--color-info);
-}
-
-.zx-native-select__root.zx-a-color-success {
-    --native-select-accent: var(--color-success);
-}
-
-.zx-native-select__root.zx-a-color-warning {
-    --native-select-accent: var(--color-warning);
-}
-
-.zx-native-select__root.zx-a-color-error {
-    --native-select-accent: var(--color-error);
-}
-
-.zx-native-select__control.zx-a-size-xs {
-    height: calc(var(--size-field) * 8);
-    font-size: var(--text-xs);
-    padding: var(--space-2xs) var(--space-xs);
-    padding-right: calc(var(--space-xs) + 1.25em);
-}
-
-.zx-native-select__control.zx-a-size-sm {
-    height: calc(var(--size-field) * 10);
-    font-size: var(--text-xs);
-    padding: var(--space-xs) var(--space-sm);
-    padding-right: calc(var(--space-sm) + 1.25em);
-}
-
-.zx-native-select__control.zx-a-size-lg {
-    height: calc(var(--size-field) * 14);
-    font-size: var(--text-md);
-    padding: var(--space-md) var(--space-lg);
-    padding-right: calc(var(--space-lg) + 1.25em);
-}
-
-.zx-native-select__control.zx-a-size-xl {
-    height: calc(var(--size-field) * 16);
-    font-size: var(--text-lg);
-    padding: var(--space-lg) var(--space-xl);
-    padding-right: calc(var(--space-xl) + 1.25em);
-}