@stridge/noctis 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/styles.css

@@ -481,7 +481,7 @@
 }
 
 /* ── Authored static palettes (accent-independent; switch on the resolved mode) ─────────
- * Chart and avatar series stay categorically stable regardless of the accent (re-theming
+ * Chart and categorical-palette series stay categorically stable regardless of the accent (re-theming
  * them would break legend↔series identity), so they are authored — not engine-derived. Dark
  * values sit on `:root`; light values under `[data-theme="light"]`, set by the app shell and the
  * theme provider from the resolved mode. Hues are spread across the wheel and separated in
@@ -497,17 +497,17 @@
     --noctis-color-chart-7: oklch(0.7 0.17 310);
     --noctis-color-chart-8: oklch(0.76 0.14 350);
 
-    --noctis-color-avatar-1: oklch(0.62 0.17 264);
-    --noctis-color-avatar-2: oklch(0.62 0.15 196);
-    --noctis-color-avatar-3: oklch(0.62 0.16 152);
-    --noctis-color-avatar-4: oklch(0.64 0.15 130);
-    --noctis-color-avatar-5: oklch(0.66 0.16 70);
-    --noctis-color-avatar-6: oklch(0.62 0.18 40);
-    --noctis-color-avatar-7: oklch(0.6 0.2 18);
-    --noctis-color-avatar-8: oklch(0.6 0.18 330);
-    --noctis-color-avatar-9: oklch(0.6 0.18 300);
-    --noctis-color-avatar-10: oklch(0.6 0.15 285);
-    --noctis-color-avatar-foreground: oklch(0.99 0 0);
+    --noctis-color-palette-1: oklch(0.62 0.17 264);
+    --noctis-color-palette-2: oklch(0.62 0.15 196);
+    --noctis-color-palette-3: oklch(0.62 0.16 152);
+    --noctis-color-palette-4: oklch(0.64 0.15 130);
+    --noctis-color-palette-5: oklch(0.66 0.16 70);
+    --noctis-color-palette-6: oklch(0.62 0.18 40);
+    --noctis-color-palette-7: oklch(0.6 0.2 18);
+    --noctis-color-palette-8: oklch(0.6 0.18 330);
+    --noctis-color-palette-9: oklch(0.6 0.18 300);
+    --noctis-color-palette-10: oklch(0.6 0.15 285);
+    --noctis-color-palette-foreground: oklch(0.99 0 0);
 }
 
 :root[data-theme="light"] {
@@ -520,16 +520,16 @@
     --noctis-color-chart-7: oklch(0.55 0.19 310);
     --noctis-color-chart-8: oklch(0.6 0.16 350);
 
-    --noctis-color-avatar-1: oklch(0.58 0.18 264);
-    --noctis-color-avatar-2: oklch(0.56 0.15 196);
-    --noctis-color-avatar-3: oklch(0.56 0.16 152);
-    --noctis-color-avatar-4: oklch(0.58 0.15 130);
-    --noctis-color-avatar-5: oklch(0.62 0.16 70);
-    --noctis-color-avatar-6: oklch(0.58 0.19 40);
-    --noctis-color-avatar-7: oklch(0.56 0.21 18);
-    --noctis-color-avatar-8: oklch(0.56 0.19 330);
-    --noctis-color-avatar-9: oklch(0.56 0.19 300);
-    --noctis-color-avatar-10: oklch(0.56 0.16 285);
+    --noctis-color-palette-1: oklch(0.58 0.18 264);
+    --noctis-color-palette-2: oklch(0.56 0.15 196);
+    --noctis-color-palette-3: oklch(0.56 0.16 152);
+    --noctis-color-palette-4: oklch(0.58 0.15 130);
+    --noctis-color-palette-5: oklch(0.62 0.16 70);
+    --noctis-color-palette-6: oklch(0.58 0.19 40);
+    --noctis-color-palette-7: oklch(0.56 0.21 18);
+    --noctis-color-palette-8: oklch(0.56 0.19 330);
+    --noctis-color-palette-9: oklch(0.56 0.19 300);
+    --noctis-color-palette-10: oklch(0.56 0.16 285);
 }
 
 /* ── Light-mode shadows ─────────────────────────────────────────────────────────────────
@@ -2441,6 +2441,31 @@
     [data-slot="noctis-avatar"][data-size="xl"] [data-slot="noctis-avatar-indicator"] {
         --_avatar-indicator-size: var(--noctis-avatar-indicator-size, 1rem);
     }
+    [data-slot="noctis-badge"] {
+        --_badge-padding-inline: var(--noctis-badge-padding-inline, 0.5rem);
+        --_badge-padding-block: var(--noctis-badge-padding-block, 0.1875rem);
+        --_badge-gap: var(--noctis-badge-gap, 0.3125rem);
+        --_badge-font-size: var(--noctis-badge-font-size, var(--noctis-text-mini));
+        --_badge-border-radius: var(--noctis-badge-border-radius, var(--noctis-radius-full));
+    }
+    [data-slot="noctis-badge-dot"] {
+        --_badge-dot-size: var(--noctis-badge-dot-size, 0.375rem);
+    }
+    [data-slot="noctis-badge-icon"] {
+        --_badge-icon-size: var(--noctis-badge-icon-size, 0.875rem);
+    }
+    [data-slot="noctis-badge"][data-size="sm"] {
+        --_badge-padding-inline: var(--noctis-badge-padding-inline, 0.4375rem);
+        --_badge-padding-block: var(--noctis-badge-padding-block, 0.125rem);
+        --_badge-gap: var(--noctis-badge-gap, 0.25rem);
+        --_badge-font-size: var(--noctis-badge-font-size, var(--noctis-text-micro));
+    }
+    [data-slot="noctis-badge"][data-size="sm"] [data-slot="noctis-badge-dot"] {
+        --_badge-dot-size: var(--noctis-badge-dot-size, 0.3125rem);
+    }
+    [data-slot="noctis-badge"][data-size="sm"] [data-slot="noctis-badge-icon"] {
+        --_badge-icon-size: var(--noctis-badge-icon-size, 0.75rem);
+    }
     [data-slot="noctis-otp-field"] {
         --_otp-field-gap: var(--noctis-otp-field-gap, 0.5rem);
     }
@@ -3402,7 +3427,7 @@
      * box-shadow rings) can extend past the edge without being cut off.
      *
      * Avatars are static-identity and accent-independent: the fallback fill is one of ten authored
-     * `--noctis-color-avatar-N` roles, selected by the `data-avatar-index` the component hashes from a
+     * `--noctis-color-palette-N` roles, selected by the `data-avatar-index` the component hashes from a
      * stable seed — so categorical identity holds across themes and the fill never re-themes on the accent.
      */
 
@@ -3456,48 +3481,48 @@
         font-weight: 500;
         line-height: 1;
         text-transform: uppercase;
-        color: var(--noctis-color-avatar-foreground);
+        color: var(--noctis-color-palette-foreground);
         background-color: var(--noctis-color-muted);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="1"] {
-        background-color: var(--noctis-color-avatar-1);
+        background-color: var(--noctis-color-palette-1);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="2"] {
-        background-color: var(--noctis-color-avatar-2);
+        background-color: var(--noctis-color-palette-2);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="3"] {
-        background-color: var(--noctis-color-avatar-3);
+        background-color: var(--noctis-color-palette-3);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="4"] {
-        background-color: var(--noctis-color-avatar-4);
+        background-color: var(--noctis-color-palette-4);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="5"] {
-        background-color: var(--noctis-color-avatar-5);
+        background-color: var(--noctis-color-palette-5);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="6"] {
-        background-color: var(--noctis-color-avatar-6);
+        background-color: var(--noctis-color-palette-6);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="7"] {
-        background-color: var(--noctis-color-avatar-7);
+        background-color: var(--noctis-color-palette-7);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="8"] {
-        background-color: var(--noctis-color-avatar-8);
+        background-color: var(--noctis-color-palette-8);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="9"] {
-        background-color: var(--noctis-color-avatar-9);
+        background-color: var(--noctis-color-palette-9);
     }
 
     [data-slot="noctis-avatar-fallback"][data-avatar-index="10"] {
-        background-color: var(--noctis-color-avatar-10);
+        background-color: var(--noctis-color-palette-10);
     }
 
     /*
@@ -3672,6 +3697,381 @@
     }
 }
 
+@layer noctis.components {
+    /*
+     * Badge is self-contained, so every rule keys off the element's own `data-slot`. The chip metrics
+     * flow through the `--_badge-*` internals, whose per-size defaults live in the generated component
+     * layer (`tokens.css`) keyed off the `data-size` the root stamps.
+     *
+     * Colour is a two-axis grid: `data-variant` (the emphasis — a `solid` fill, a `soft` tint, a
+     * transparent `outline`, or a neutral `dot` chip) crossed with `data-tone` (the colour identity). In
+     * every variant but `dot` the tone tints the whole chip and the dot/icon ride `currentColor`; the
+     * `dot` variant keeps the chip neutral and colours the leading dot alone. Like Avatar's swatch rules,
+     * the grid is hand-authored flat rules reading a declared role or palette swatch directly — no
+     * `--_badge-*` colour internal and no mint re-point, so a global retheme of a status/accent role (or
+     * the shared categorical palette) propagates for free, and the decorative tones never re-derive off
+     * the accent.
+     *
+     * The six semantic tones (neutral/accent/success/warning/danger/info) paint from their role families
+     * — `solid` from the role, `soft` from its `-muted` tint, `outline` from its `-border`. The eight
+     * decorative tones (red…pink) map onto the accent-independent `--noctis-color-palette-N` palette,
+     * authored for a white knockout, so a `solid` decorative chip stays legible; `soft` shows the swatch
+     * as the label on the neutral chip tint and `outline` draws the swatch as the edge (the palette ships
+     * no engine tint of its own, and a derived tint isn't expressible in component CSS).
+     *
+     * The dot and icon take no tone rules of their own: the dot fills with `currentColor` and the icon
+     * inherits it, so both track the chip's text colour and stay legible in every variant automatically.
+     */
+
+    /* root — the pill. A transparent 1px border holds the box geometry stable across variants, so the
+     * `outline` variant (which colours that border) never shifts the chip's size. The base colours are
+     * the default neutral `soft` look; the variant×tone rules below override them. */
+    [data-slot="noctis-badge"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--_badge-gap);
+        inline-size: fit-content;
+        max-inline-size: 100%;
+        padding-block: var(--_badge-padding-block);
+        padding-inline: var(--_badge-padding-inline);
+        border: 1px solid transparent;
+        border-radius: var(--_badge-border-radius);
+        font-family: var(--noctis-font-sans);
+        font-size: var(--_badge-font-size);
+        font-weight: 500;
+        line-height: 1;
+        white-space: nowrap;
+        vertical-align: middle;
+        color: var(--noctis-color-foreground);
+        background-color: var(--noctis-color-control);
+    }
+
+    /* A badge rendered on an anchor joins the chip, not the link — keep the chip's own colour, drop the
+     * underline. */
+    a[data-slot="noctis-badge"] {
+        text-decoration: none;
+    }
+
+    /* dot — a small leading status dot. Fills with the chip's text colour, so it reads on the fill in
+     * `solid` (a knockout dot) and shows the saturated tone in `soft`/`outline`. */
+    [data-slot="noctis-badge-dot"] {
+        flex-shrink: 0;
+        inline-size: var(--_badge-dot-size);
+        block-size: var(--_badge-dot-size);
+        border-radius: var(--noctis-radius-full);
+        background-color: currentcolor;
+    }
+
+    /* icon — a leading glyph clamped to the chip's icon size; inherits the chip's text colour. */
+    [data-slot="noctis-badge-icon"] {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+    }
+
+    [data-slot="noctis-badge-icon"] svg {
+        inline-size: var(--_badge-icon-size);
+        block-size: var(--_badge-icon-size);
+    }
+
+    /* ─── solid: a filled chip with a knockout label ─────────────────────────────────────────────── */
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="neutral"] {
+        background-color: var(--noctis-color-primary);
+        color: var(--noctis-color-primary-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="accent"] {
+        background-color: var(--noctis-color-accent);
+        color: var(--noctis-color-accent-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="success"] {
+        background-color: var(--noctis-color-success);
+        color: var(--noctis-color-success-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="warning"] {
+        background-color: var(--noctis-color-warning);
+        color: var(--noctis-color-warning-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="danger"] {
+        background-color: var(--noctis-color-danger);
+        color: var(--noctis-color-danger-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="info"] {
+        background-color: var(--noctis-color-info);
+        color: var(--noctis-color-info-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="red"] {
+        background-color: var(--noctis-color-palette-7);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="orange"] {
+        background-color: var(--noctis-color-palette-6);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="amber"] {
+        background-color: var(--noctis-color-palette-5);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="green"] {
+        background-color: var(--noctis-color-palette-4);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="teal"] {
+        background-color: var(--noctis-color-palette-3);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="blue"] {
+        background-color: var(--noctis-color-palette-1);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="purple"] {
+        background-color: var(--noctis-color-palette-9);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="solid"][data-tone="pink"] {
+        background-color: var(--noctis-color-palette-8);
+        color: var(--noctis-color-palette-foreground);
+    }
+
+    /* ─── soft: a quiet tint behind saturated text ──────────────────────────────────────────────── */
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="neutral"] {
+        background-color: var(--noctis-color-control);
+        color: var(--noctis-color-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="accent"] {
+        background-color: var(--noctis-color-accent-muted);
+        color: var(--noctis-color-accent);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="success"] {
+        background-color: var(--noctis-color-success-muted);
+        color: var(--noctis-color-success-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="warning"] {
+        background-color: var(--noctis-color-warning-muted);
+        color: var(--noctis-color-warning-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="danger"] {
+        background-color: var(--noctis-color-danger-muted);
+        color: var(--noctis-color-danger-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="info"] {
+        background-color: var(--noctis-color-info-muted);
+        color: var(--noctis-color-info-muted-foreground);
+    }
+
+    /* Decorative `soft` sits the saturated palette colour as text on the neutral chip tint — the
+     * the palette swatches ship no engine tint of their own (unlike the semantic `-muted` roles), and a
+     * faint tint can't be derived in component CSS (no `color-mix`), so the colour reads through the
+     * label while the chip stays a quiet neutral. */
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="red"] {
+        color: var(--noctis-color-palette-7);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="orange"] {
+        color: var(--noctis-color-palette-6);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="amber"] {
+        color: var(--noctis-color-palette-5);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="green"] {
+        color: var(--noctis-color-palette-4);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="teal"] {
+        color: var(--noctis-color-palette-3);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="blue"] {
+        color: var(--noctis-color-palette-1);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="purple"] {
+        color: var(--noctis-color-palette-9);
+    }
+
+    [data-slot="noctis-badge"][data-variant="soft"][data-tone="pink"] {
+        color: var(--noctis-color-palette-8);
+    }
+
+    /* ─── outline: a transparent chip with a coloured edge ──────────────────────────────────────── */
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="neutral"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-border);
+        color: var(--noctis-color-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="accent"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-accent);
+        color: var(--noctis-color-accent);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="success"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-success-border);
+        color: var(--noctis-color-success-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="warning"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-warning-border);
+        color: var(--noctis-color-warning-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="danger"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-danger-border);
+        color: var(--noctis-color-danger-muted-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="info"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-info-border);
+        color: var(--noctis-color-info-muted-foreground);
+    }
+
+    /* Decorative `outline` draws the saturated palette swatch as both the edge and the label colour on a
+     * transparent chip — the full swatch (no derived alpha) keeps the rule a declared-role read. */
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="red"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-7);
+        color: var(--noctis-color-palette-7);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="orange"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-6);
+        color: var(--noctis-color-palette-6);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="amber"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-5);
+        color: var(--noctis-color-palette-5);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="green"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-4);
+        color: var(--noctis-color-palette-4);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="teal"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-3);
+        color: var(--noctis-color-palette-3);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="blue"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-1);
+        color: var(--noctis-color-palette-1);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="purple"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-9);
+        color: var(--noctis-color-palette-9);
+    }
+
+    [data-slot="noctis-badge"][data-variant="outline"][data-tone="pink"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-palette-8);
+        color: var(--noctis-color-palette-8);
+    }
+
+    /* ─── dot: a neutral chip whose only colour is its leading status dot ───────────────────────────
+     * Unlike the variants above (where the tone tints the whole chip), the `dot` variant keeps the chip
+     * neutral — a transparent fill, a hairline border, neutral text for every tone — and lets the dot
+     * alone carry the status colour. So the dot must NOT ride `currentColor` here (that would render it
+     * neutral); each tone re-points the dot fill to its saturated role/swatch. */
+    [data-slot="noctis-badge"][data-variant="dot"] {
+        background-color: transparent;
+        border-color: var(--noctis-color-border);
+        color: var(--noctis-color-foreground);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="neutral"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-muted);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="accent"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-accent);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="success"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-success);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="warning"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-warning);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="danger"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-danger);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="info"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-info);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="red"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-7);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="orange"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-6);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="amber"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-5);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="green"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-4);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="teal"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-3);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="blue"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-1);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="purple"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-9);
+    }
+
+    [data-slot="noctis-badge"][data-variant="dot"][data-tone="pink"] [data-slot="noctis-badge-dot"] {
+        background-color: var(--noctis-color-palette-8);
+    }
+}
+
 @layer noctis.components {
     /*
      * Button is a class-escape-hatch primitive: `Button.props()` styles a *foreign* element (the rail's

package/dist/tailwind.css

@@ -167,17 +167,17 @@
     --color-chart-6: var(--noctis-color-chart-6);
     --color-chart-7: var(--noctis-color-chart-7);
     --color-chart-8: var(--noctis-color-chart-8);
-    --color-avatar-1: var(--noctis-color-avatar-1);
-    --color-avatar-2: var(--noctis-color-avatar-2);
-    --color-avatar-3: var(--noctis-color-avatar-3);
-    --color-avatar-4: var(--noctis-color-avatar-4);
-    --color-avatar-5: var(--noctis-color-avatar-5);
-    --color-avatar-6: var(--noctis-color-avatar-6);
-    --color-avatar-7: var(--noctis-color-avatar-7);
-    --color-avatar-8: var(--noctis-color-avatar-8);
-    --color-avatar-9: var(--noctis-color-avatar-9);
-    --color-avatar-10: var(--noctis-color-avatar-10);
-    --color-avatar-foreground: var(--noctis-color-avatar-foreground);
+    --color-palette-1: var(--noctis-color-palette-1);
+    --color-palette-2: var(--noctis-color-palette-2);
+    --color-palette-3: var(--noctis-color-palette-3);
+    --color-palette-4: var(--noctis-color-palette-4);
+    --color-palette-5: var(--noctis-color-palette-5);
+    --color-palette-6: var(--noctis-color-palette-6);
+    --color-palette-7: var(--noctis-color-palette-7);
+    --color-palette-8: var(--noctis-color-palette-8);
+    --color-palette-9: var(--noctis-color-palette-9);
+    --color-palette-10: var(--noctis-color-palette-10);
+    --color-palette-foreground: var(--noctis-color-palette-foreground);
 
     /* Named text sizes + their paired line-height keys (`--text-<size>--line-height`). */
     --text-micro: var(--noctis-text-micro);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stridge/noctis",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
@@ -69,9 +69,9 @@
     "culori": "4.0.2",
     "lucide-react": "1.17.0",
     "simple-icons": "16.23.0",
-    "@stridge/noctis-design-tokens": "1.0.0-beta.3",
-    "@stridge/noctis-theme-engine": "1.0.0-beta.3",
-    "@stridge/noctis-intl": "1.0.0-beta.3"
+    "@stridge/noctis-intl": "1.0.0-beta.4",
+    "@stridge/noctis-theme-engine": "1.0.0-beta.4",
+    "@stridge/noctis-design-tokens": "1.0.0-beta.4"
   },
   "peerDependencies": {
     "react": "19.2.7",