prime-ui-kit 0.15.0 → 0.17.0

package/dist/tokens/semantic.d.ts

@@ -1,3 +1,9 @@
+export type PaletteRoles = {
+    soft?: string;
+    text: string;
+    solid: string;
+    solidFg: string;
+};
 export declare const semanticTokens: {
     readonly color: {
         /**
@@ -6,19 +12,27 @@ export declare const semanticTokens: {
          * `bg` the layer, `fill` controls on it, `fillHover`, `selected` the thumb on its track.
          * Components read them through the depth context variables (globals.css), not directly.
          */
-        readonly layer: Record<string, import("./layers").LayerColors>;
+        readonly layer: Record<string, {
+            bg: string;
+            fill: string;
+            fillHover: string;
+            selected: string;
+        }>;
         readonly bg: {
             readonly inverse: "{color.gray.925}";
-            readonly scrim: "rgba(17, 19, 24, 0.44)";
+            readonly scrim: "color-mix(in srgb, {color.gray.925} 44%, transparent)";
             /** Soft shade over an edge that hides scrolled content (DataTable columns). */
-            readonly edgeShadow: "rgba(17, 19, 24, 0.14)";
+            readonly edgeShadow: "color-mix(in srgb, {color.gray.925} 14%, transparent)";
             /**
-             * Translucent glass over content (floating BottomNav), always with a strong backdrop blur:
-             * dense, as the iOS tab bar — the content shows through as soft shapes.
+             * Translucent glass over content (floating BottomNav), always with a strong backdrop blur
+             * (`--prime-glass-saturation` lifts the colors under it): dense, as the iOS tab bar — the
+             * content shows through as soft shapes.
              */
-            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-0) 72%, transparent)";
+            readonly glass: "color-mix(in srgb, {color.white} 72%, transparent)";
             /** The light that catches on the rim of a glass surface: the line that makes it read as glass. */
-            readonly glassEdge: "rgba(255, 255, 255, 0.85)";
+            readonly glassEdge: "color-mix(in srgb, {color.white} 85%, transparent)";
+            /** Glass made opaque, where the person asked for less transparency: the floating layer's fill. */
+            readonly glassSolid: "{color.layer.floating.bg}";
         };
         /**
          * Over a photo the picture is the ground, not the theme: one look in both themes. `shade` sits
@@ -28,17 +42,17 @@ export declare const semanticTokens: {
          * white frame.
          */
         readonly media: {
-            readonly shade: "rgba(17, 19, 24, 0.56)";
-            readonly shadeFg: "{color.gray.0}";
+            readonly shade: "color-mix(in srgb, {color.gray.925} 56%, transparent)";
+            readonly shadeFg: "{color.white}";
             /**
              * A round disk over media (play, cancel, retry, download — Button `shade`, the play mark):
              * lighter than `shade` under a softer blur, so the frame shows through; its white glyph
              * keeps 3:1 (a graphical object) even over a white frame. Pills keep `shade` / `pill`:
              * they carry text, which needs the denser ground.
              */
-            readonly disk: "rgba(17, 19, 24, 0.48)";
-            readonly pill: "rgba(17, 19, 24, 0.72)";
-            readonly pillFg: "rgba(255, 255, 255, 0.8)";
+            readonly disk: "color-mix(in srgb, {color.gray.925} 48%, transparent)";
+            readonly pill: "color-mix(in srgb, {color.gray.925} 72%, transparent)";
+            readonly pillFg: "color-mix(in srgb, {color.white} 80%, transparent)";
             /** The ground of a full-screen media viewer: near black, so any picture reads at its truest. */
             readonly stage: "{color.gray.950}";
         };
@@ -49,14 +63,19 @@ export declare const semanticTokens: {
          */
         readonly fill: {
             /** Ghost hover, row hover. */
-            readonly subtle: "rgba(17, 19, 24, 0.04)";
-            readonly subtleActive: "rgba(17, 19, 24, 0.07)";
+            readonly subtle: "color-mix(in srgb, {color.gray.925} 4%, transparent)";
+            readonly subtleActive: "color-mix(in srgb, {color.gray.925} 7%, transparent)";
             /** The faintest wash: hover of a tab in the tab strip, below the selected tab's step. */
-            readonly faint: "rgba(17, 19, 24, 0.04)";
+            readonly faint: "color-mix(in srgb, {color.gray.925} 4%, transparent)";
             /** Unchecked checkbox, switch track, slider track. */
-            readonly strong: "color-mix(in srgb, var(--prime-ref-color-gray-925) 15%, transparent)";
-            readonly strongHover: "color-mix(in srgb, var(--prime-ref-color-gray-925) 22%, transparent)";
+            readonly strong: "color-mix(in srgb, {color.gray.925} 15%, transparent)";
+            readonly strongHover: "color-mix(in srgb, {color.gray.925} 22%, transparent)";
         };
+        /**
+         * Dark ink for a mark on a light color that is not a theme surface (the check on a light
+         * swatch, text on a yellow solid): one value in both themes.
+         */
+        readonly inkOnLight: "{color.gray.925}";
         readonly text: {
             readonly primary: "{color.gray.925}";
             readonly secondary: "{color.gray.700}";
@@ -64,7 +83,7 @@ export declare const semanticTokens: {
             /** gray.600: keeps AA on the field wash over every host, including the canvas. */
             readonly placeholder: "{color.gray.600}";
             readonly disabled: "{color.gray.400}";
-            readonly inverse: "{color.gray.0}";
+            readonly inverse: "{color.white}";
         };
         readonly border: {
             /** Zone separators inside floating layers (dialog header/footer): only just visible. */
@@ -115,7 +134,7 @@ export declare const semanticTokens: {
         /** The field fill at rest, hover and focus comes from the ladder (`--prime-color-field-bg*`). */
         readonly field: {
             /** A disabled field: a faint wash on whatever it sits on. */
-            readonly bgDisabled: "color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent)";
+            readonly bgDisabled: "color-mix(in srgb, {color.gray.925} 4%, transparent)";
         };
         readonly focus: {
             readonly ring: "{color.cobalt.700}";
@@ -123,6 +142,12 @@ export declare const semanticTokens: {
         readonly control: {
             /** Switch thumb, slider thumb. */
             readonly thumb: "{color.white}";
+            /** A disabled switch thumb: quiet on the disabled track, like the rest of the control. */
+            readonly thumbDisabled: "{color.white}";
+        };
+        readonly skeleton: {
+            /** A loading placeholder: a wash over whatever layer it sits on, readable in both themes. */
+            readonly fill: "color-mix(in srgb, {color.gray.925} 6%, transparent)";
         };
         /**
          * The tooltip is an inverse chip: everything inside it (a Kbd, a secondary line) reads its
@@ -130,18 +155,13 @@ export declare const semanticTokens: {
          */
         readonly tooltip: {
             readonly bg: "{color.gray.925}";
-            readonly text: "{color.gray.0}";
+            readonly text: "{color.white}";
             /** Secondary text on the chip (a shortcut, a second line). */
             readonly muted: "{color.gray.300}";
             /** A key cap or chip on the chip: a light wash over the dark fill. */
-            readonly fill: "rgba(255, 255, 255, 0.14)";
+            readonly fill: "color-mix(in srgb, {color.white} 14%, transparent)";
         };
-        readonly palette: Record<string, {
-            soft: string;
-            text: string;
-            solid: string;
-            solidFg: string;
-        }>;
+        readonly palette: Record<string, PaletteRoles>;
         /**
          * Chat bubbles (`Message`). An incoming bubble is a surface on the ladder (one step off its
          * host); an outgoing one is a tinted host off the ladder in the accent hue, and everything inside
@@ -160,22 +180,23 @@ export declare const semanticTokens: {
                 readonly accentFg: "{color.white}";
                 /** A failed send, a failed upload: AA on `bg`. */
                 readonly danger: "{color.red.700}";
-                readonly fill: "color-mix(in srgb, var(--prime-ref-color-cobalt-700) 10%, transparent)";
-                readonly fillHover: "color-mix(in srgb, var(--prime-ref-color-cobalt-700) 16%, transparent)";
-                readonly track: "color-mix(in srgb, var(--prime-ref-color-cobalt-700) 28%, transparent)";
+                readonly fill: "color-mix(in srgb, {color.cobalt.700} 10%, transparent)";
+                readonly fillHover: "color-mix(in srgb, {color.cobalt.700} 16%, transparent)";
+                readonly track: "color-mix(in srgb, {color.cobalt.700} 28%, transparent)";
                 /**
                  * A reaction chip that is not the reader's: a neutral dark wash over `bg`, precomposed
                  * (opaque), so the ring of its avatars matches it.
                  */
-                readonly chip: "color-mix(in srgb, var(--prime-ref-color-gray-925) 8%, var(--prime-ref-color-cobalt-100))";
-                readonly chipHover: "color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, var(--prime-ref-color-cobalt-100))";
+                readonly chip: "color-mix(in srgb, {color.gray.925} 8%, {color.cobalt.100})";
+                readonly chipHover: "color-mix(in srgb, {color.gray.925} 12%, {color.cobalt.100})";
             };
         };
         /**
          * Data visualisation (foundation §3, SKILL/foundations.md «Charts»). Categories wear these,
          * statuses wear the tones.
          * - `1`…`8`: categorical series in one fixed order — blue, orange, teal, yellow, pink, green,
-         *   purple, red. Assign in order, never cycle; a ninth series folds into `other`. Palette hues
+         *   purple, red; each keeps 3:1 on every layer ground of its theme (`chartColors.test.ts`).
+         *   Assign in order, never cycle; a ninth series folds into `other`. Palette hues
          *   (`color` props) map onto the same steps (`--hue-chart`), so a category keeps its color in a
          *   chart and in a ProgressBar share.
          * - `other`: the «Прочее» share. `grid`: gridlines. `axis`: the axis line and ticks (axis
@@ -209,6 +230,7 @@ export declare const semanticTokens: {
         readonly family: {
             readonly sans: "{font.family.sans}";
             readonly mono: "{font.family.mono}";
+            readonly key: "{font.family.key}";
         };
         readonly weight: {
             readonly regular: "{font.weight.regular}";
@@ -345,6 +367,11 @@ export declare const semanticTokens: {
         readonly m: "{icon.20}";
         readonly l: "{icon.24}";
         readonly xl: "{icon.32}";
+        /**
+         * The one amplitude of an icon gesture (`src/icons/glyphMotion.module.css`): a step in the
+         * glyph's own 24-unit drawing, so it reads the same at every icon size.
+         */
+        readonly gestureShift: "4px";
     };
     readonly border: {
         readonly width: "1px";
@@ -360,13 +387,13 @@ export declare const semanticTokens: {
     };
     readonly shadow: {
         /** Cards on canvas: a whisper, depth mostly comes from the fill. */
-        readonly raised: "0 1px 2px rgba(17, 19, 24, 0.04)";
+        readonly raised: "0 1px 2px color-mix(in srgb, {color.gray.925} 4%, transparent)";
         /** Menus, popovers, tooltips, datepicker. */
-        readonly overlay: "0 0 0 1px rgba(17, 19, 24, 0.04), 0 12px 32px -8px rgba(17, 19, 24, 0.18)";
+        readonly overlay: "0 0 0 1px color-mix(in srgb, {color.gray.925} 4%, transparent), 0 12px 32px -8px color-mix(in srgb, {color.gray.925} 18%, transparent)";
         /** Modals and drawers. */
-        readonly modal: "0 0 0 1px rgba(17, 19, 24, 0.04), 0 32px 64px -16px rgba(17, 19, 24, 0.30)";
+        readonly modal: "0 0 0 1px color-mix(in srgb, {color.gray.925} 4%, transparent), 0 32px 64px -16px color-mix(in srgb, {color.gray.925} 30%, transparent)";
         /** Slider thumb: one crisp outer edge plus a short contact shadow. */
-        readonly thumb: "0 0 0 1px rgba(17, 19, 24, 0.08), 0 1px 3px rgba(17, 19, 24, 0.16)";
+        readonly thumb: "0 0 0 1px color-mix(in srgb, {color.gray.925} 8%, transparent), 0 1px 3px color-mix(in srgb, {color.gray.925} 16%, transparent)";
     };
     readonly motion: {
         readonly duration: {
@@ -397,12 +424,118 @@ export declare const semanticTokens: {
             readonly scale: "0.98";
             readonly scaleCompact: "0.96";
         };
+        /**
+         * Scale magnitudes. Below 1, where a part starts as it enters (and ends as it leaves);
+         * above 1, how far a part grows.
+         * - `mark`: a glyph or a dot drawn in place (a check, a swapped icon, a radio dot).
+         * - `pop`: a small part that pops in (a reaction, a button that appears in a row).
+         * - `settle`: a tile part or a disk that settles into place.
+         * - `enter`: a block entering in place (a bar, a bubble) — foundation §7 rule 7.
+         * - `lift`: a picked-up item (a drag source).
+         * - `hover`: a small target under a fine pointer (a swatch, a slider thumb).
+         * - `emphasis`: a glyph a pointer or focus singles out (a reaction).
+         * - `grab`: a thumb held by the pointer.
+         * - `burst`: the peak of a one-shot pick (a reaction chosen).
+         * - `pulse`: a ring that spreads out of a live mark and fades.
+         */
+        readonly scale: {
+            readonly mark: "0.6";
+            readonly pop: "0.8";
+            readonly settle: "0.9";
+            readonly enter: "0.96";
+            readonly lift: "1.02";
+            readonly hover: "1.1";
+            readonly emphasis: "1.2";
+            readonly grab: "1.25";
+            readonly burst: "1.4";
+            readonly pulse: "2";
+        };
+        /**
+         * Fades and color changes (`opacity`, `color`, `background-color`, `box-shadow`…): the same
+         * clock as `duration`, but reduced motion keeps it (foundation §7 rule 12: movement may go,
+         * opacity and color feedback stay). Movement — `transform`, the height glide — takes `duration`.
+         */
+        readonly fade: {
+            readonly xfast: "{duration.150}";
+            readonly fast: "{duration.230}";
+            readonly base: "{duration.380}";
+            readonly slow: "{duration.570}";
+        };
+        /**
+         * How long a hold-to-confirm press lasts (Button `holdToConfirm`): a gesture time, not motion,
+         * so reduced motion keeps it.
+         */
+        readonly holdConfirm: "{duration.1200}";
+        /**
+         * A clock stopped: the value `globals.css` gives the movement clocks under reduced motion and
+         * every clock while a theme switches.
+         */
+        readonly instant: "{duration.0}";
+        /**
+         * A clock that never runs out in a session: the browser's autofill paint of a field is pushed
+         * out of reach with it (`controls.css`). Not motion, so nothing zeroes it.
+         */
+        readonly never: "{duration.never}";
     };
+    /**
+     * Stacking. `sticky`, `overlay` and `toast` are the page levels. The rest are local steps, in
+     * rising order, for the parts stacked inside one component; they never compete with the page.
+     * `below` a part drawn under its host's content, `base` the content's own level, then `raised`,
+     * `above`, `top`, `cover` and `front` for each part laid over the last: a hover wash or a handle
+     * is `raised`; the marks over a picture (play, duration, check) are `top`; a control spread over
+     * those marks is `cover`; a transfer in front of a whole tile is `front`. A component with sticky
+     * parts names them from the same steps (DataTable: first column, group row, header, corner).
+     */
     readonly z: {
+        readonly below: "{zIndex.below}";
+        readonly base: "{zIndex.0}";
+        readonly raised: "{zIndex.1}";
+        readonly above: "{zIndex.2}";
+        readonly top: "{zIndex.3}";
+        readonly cover: "{zIndex.4}";
+        readonly front: "{zIndex.5}";
         readonly sticky: "{zIndex.sticky}";
         readonly overlay: "{zIndex.overlay}";
         readonly toast: "{zIndex.toast}";
     };
+    /**
+     * Opacity of content that steps back while it stays in place.
+     * - `busy`: a change in flight (a save, a check, a reorder), a picture under a transfer, a target
+     *   that is full; the content quiets down and comes back when the answer arrives.
+     * - `disabled`: a color sample that cannot wear the disabled text color (a swatch).
+     * - `ghost`: the copy a drag source leaves at its place.
+     * - `dim`: content that steps back while the screen points at another (a chat's selection, its
+     *   current search match, the blink of a jump).
+     */
+    readonly opacity: {
+        readonly busy: "0.6";
+        readonly disabled: "0.5";
+        readonly ghost: "0.4";
+        readonly dim: "0.42";
+    };
+    /**
+     * Tint ladder: how much of a hue a wash takes (`color-mix(in srgb, <hue> var(--prime-tint-*),
+     * transparent)`). `faint` a whisper, `soft` a resting chip or selection, `hover` its hover,
+     * `active` its press or a selected chip, `line` a track or a ring, `strong` a fill that must read
+     * over pictures, `heavy` a near-solid edge.
+     */
+    readonly tint: {
+        readonly faint: "8%";
+        readonly soft: "12%";
+        readonly hover: "18%";
+        readonly active: "24%";
+        readonly line: "32%";
+        readonly strong: "48%";
+        readonly heavy: "72%";
+    };
+    /**
+     * Glass (`color.bg.glass`): how much the backdrop filter lifts the colors seen through it, and
+     * the blur behind it — strong, as the iOS tab bar: the page shows only as soft shapes.
+     */
+    readonly glass: {
+        readonly saturation: "1.8";
+        readonly blur: "0.875rem";
+    };
     /**
      * Control size tiers shared by Button, Input, Select, Datepicker, Tabs, SegmentedControl, etc.
      * Pairing: a field of tier T uses `labelSize`/`hintSize` of tier T; menus opened from tier T
@@ -615,8 +748,9 @@ export declare const semanticTokens: {
         };
     };
     /**
-     * A media album (`Gallery`): the size cap of its box — an album is at most this wide, a lone
-     * portrait this tall — the narrowest it stands over a caption, and the gap between its tiles.
+     * A media album (`Gallery`, the pictures of a message): the size cap of its box — an album is at
+     * most this wide, a lone portrait this tall — the narrowest it stands over a caption, and the gap
+     * between its tiles.
      */
     readonly gallery: {
         readonly maxSize: "22.5rem";
@@ -624,10 +758,6 @@ export declare const semanticTokens: {
         readonly minSize: "16rem";
         readonly gap: "2px";
     };
-    /**
-     * The full-screen media viewer (`MediaViewer`): the gap between two pages while one slides into
-     * the other, and the inset of its bars from the screen edges (the safe areas are added on top).
-     */
     /**
      * A round disk over media (`--prime-color-media-disk`): the backdrop blur behind it — gentle,
      * so the frame under the disk stays recognisable.
@@ -635,6 +765,18 @@ export declare const semanticTokens: {
     readonly mediaDisk: {
         readonly blur: "{space.1}";
     };
+    /**
+     * A shade over media that carries text (`--prime-color-media-shade` / `-pill`: a pill, a bar, a
+     * caption over a picture): the backdrop blur behind it — denser than the disk's, so the text
+     * keeps its ground over any frame.
+     */
+    readonly mediaShade: {
+        readonly blur: "{space.2}";
+    };
+    /**
+     * The full-screen media viewer (`MediaViewer`): the gap between two pages while one slides into
+     * the other, and the inset of its bars from the screen edges (the safe areas are added on top).
+     */
     readonly mediaViewer: {
         readonly pageGap: "{space.6}";
         readonly inset: "{space.4}";
@@ -643,8 +785,8 @@ export declare const semanticTokens: {
     };
     /**
      * Chat bubble geometry (`Message`): the corner radius (one on every corner of every bubble), the
-     * padding, the gap inside a group of one author and between groups,
-     * the width cap of a bubble, and the diameter of a video message.
+     * padding, the gap inside a group of one author and between groups, the width cap of a bubble.
+     * Its pictures are capped by `gallery.maxSize`.
      */
     readonly message: {
         readonly radius: "{radius.14}";
@@ -655,8 +797,10 @@ export declare const semanticTokens: {
         readonly maxWidth: "30rem";
         /** The content width of a card in a bubble (file, contact, location): one width for all. */
         readonly cardWidth: "16rem";
-        readonly mediaMaxHeight: "22.5rem";
+        /** The round video a person is recording (the Composer preview). */
         readonly videoNote: "14.5rem";
+        /** The box of a sent round video message (`VideoNote`): its diameter, at most the row. */
+        readonly videoNoteBox: "16.75rem";
         /**
          * A message changing size (a reaction row, a transcript that opens): the bubble's box, its
          * parts and the messages around glide in one calm stroke, between `fast` and `base`; zeroed
@@ -664,11 +808,10 @@ export declare const semanticTokens: {
          */
         readonly morphDuration: "{duration.300}";
         /**
-         * Messages that step back: the unselected ones in selection mode, the others while the chat
-         * points at one (a jump blinks them, the current search match keeps them back). Opacity and a
-         * slight desaturation; the message pointed at or selected stays at full strength.
+         * Messages that step back (the unselected ones in selection mode, the others while the chat
+         * keeps a search match current) take `opacity.dim` and this slight desaturation; the message
+         * pointed at or selected stays at full strength.
          */
-        readonly dimOpacity: "0.42";
         readonly dimSaturation: "0.6";
         /**
          * The tail of the last bubble of a run: a curl out of its square bottom corner on the author's
@@ -764,7 +907,7 @@ export declare const semanticTokens: {
          * iOS tab bar: the page under the glass shows only as soft shapes.
          */
         readonly floatingInset: "{space.3}";
-        readonly blur: "0.875rem";
+        readonly blur: "{glass.blur}";
     };
     /**
      * Tooltip tiers: a chip of tier T is as tall as a menu item of tier T (24 · 28 · 32 · 36 · 40),
@@ -825,6 +968,15 @@ export declare const semanticTokens: {
         readonly rowHeightXl: "3.25rem";
         readonly cellPaddingX: "{space.3}";
     };
+    /**
+     * Page frame and content widths. The gutters are the side air of the page per viewport step;
+     * `globals.css` publishes the one that applies as `--prime-layout-gutter`.
+     * Content widths, for a block that holds its own width (a form, a column, a preview):
+     * - `tileMinWidth`: the narrowest column of an auto-fit grid of tiles.
+     * - `minWidth`: the narrowest screen the kit supports (320): a block that must fit everywhere.
+     * - `narrowWidth`: a phone-wide column (a feed, a list beside a pane).
+     * - `formWidthS` / `formWidthM`: a form of a few short fields / of wider fields.
+     */
     readonly layout: {
         readonly sidebarWidth: "15.5rem";
         readonly sidebarCollapsedWidth: "{space.14}";
@@ -833,5 +985,10 @@ export declare const semanticTokens: {
         readonly gutterL: "{space.8}";
         readonly contentMaxWidth: "75rem";
         readonly readingMaxWidth: "42rem";
+        readonly tileMinWidth: "12rem";
+        readonly minWidth: "20rem";
+        readonly narrowWidth: "22.5rem";
+        readonly formWidthS: "27.5rem";
+        readonly formWidthM: "35rem";
     };
 };

package/dist/tokens/themes/dark.d.ts

@@ -1,26 +1,33 @@
+import type { PaletteRoles } from "../semantic";
 export declare const darkThemeOverrides: {
     readonly color: {
-        readonly layer: Record<string, import("../layers").LayerColors>;
+        readonly layer: Record<string, {
+            bg: string;
+            fill: string;
+            fillHover: string;
+            selected: string;
+        }>;
         readonly bg: {
             readonly inverse: "{color.gray.100}";
-            readonly scrim: "rgba(0, 0, 0, 0.6)";
+            readonly scrim: "color-mix(in srgb, {color.black} 60%, transparent)";
             /** Darker than the scrim's share: a shade on a 900 surface needs more ink to read. */
-            readonly edgeShadow: "rgba(0, 0, 0, 0.5)";
-            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-875) 76%, transparent)";
-            readonly glassEdge: "rgba(255, 255, 255, 0.28)";
+            readonly edgeShadow: "color-mix(in srgb, {color.black} 50%, transparent)";
+            readonly glass: "color-mix(in srgb, {color.gray.875} 76%, transparent)";
+            readonly glassEdge: "color-mix(in srgb, {color.white} 28%, transparent)";
         };
         readonly fill: {
-            readonly subtle: "rgba(233, 235, 240, 0.05)";
-            readonly subtleActive: "rgba(233, 235, 240, 0.09)";
-            readonly faint: "rgba(233, 235, 240, 0.02)";
-            readonly strong: "color-mix(in srgb, var(--prime-ref-color-gray-100) 16%, transparent)";
-            readonly strongHover: "color-mix(in srgb, var(--prime-ref-color-gray-100) 22%, transparent)";
+            readonly subtle: "color-mix(in srgb, {color.gray.100} 5%, transparent)";
+            readonly subtleActive: "color-mix(in srgb, {color.gray.100} 9%, transparent)";
+            readonly faint: "color-mix(in srgb, {color.gray.100} 2%, transparent)";
+            readonly strong: "color-mix(in srgb, {color.gray.100} 16%, transparent)";
+            readonly strongHover: "color-mix(in srgb, {color.gray.100} 22%, transparent)";
         };
         readonly text: {
             readonly primary: "{color.gray.100}";
             readonly secondary: "{color.gray.300}";
-            readonly muted: "{color.gray.400}";
-            readonly placeholder: "{color.gray.400}";
+            /** gray.350: AA on every layer, its fill and the fill's hover (a hovered field, row, chip). */
+            readonly muted: "{color.gray.350}";
+            readonly placeholder: "{color.gray.350}";
             readonly disabled: "{color.gray.600}";
             readonly inverse: "{color.gray.925}";
         };
@@ -36,14 +43,14 @@ export declare const darkThemeOverrides: {
             readonly hover: "{color.cobalt.500}";
             readonly fg: "{color.white}";
             readonly soft: "{color.cobalt.950}";
-            readonly softHover: "color-mix(in srgb, var(--prime-ref-color-cobalt-500) 28%, transparent)";
+            readonly softHover: "color-mix(in srgb, {color.cobalt.500} 28%, transparent)";
             readonly text: "{color.cobalt.400}";
         };
         readonly danger: {
             readonly default: "{color.red.600}";
             readonly hover: "{color.red.500}";
             readonly fg: "{color.white}";
-            readonly soft: "color-mix(in srgb, var(--prime-ref-color-red-500) 16%, transparent)";
+            readonly soft: "color-mix(in srgb, {color.red.500} 16%, transparent)";
             readonly text: "{color.red.300}";
             readonly border: "{color.red.400}";
         };
@@ -51,43 +58,42 @@ export declare const darkThemeOverrides: {
             readonly default: "{color.green.400}";
             readonly hover: "{color.green.300}";
             readonly fg: "{color.gray.950}";
-            readonly soft: "color-mix(in srgb, var(--prime-ref-color-green-500) 16%, transparent)";
+            readonly soft: "color-mix(in srgb, {color.green.500} 16%, transparent)";
             readonly text: "{color.green.300}";
         };
         readonly warning: {
             readonly default: "{color.orange.400}";
             readonly fg: "{color.gray.950}";
-            readonly soft: "color-mix(in srgb, var(--prime-ref-color-orange-500) 16%, transparent)";
+            readonly soft: "color-mix(in srgb, {color.orange.500} 16%, transparent)";
             readonly text: "{color.orange.300}";
         };
         readonly info: {
             readonly default: "{color.sky.400}";
             readonly fg: "{color.gray.950}";
-            readonly soft: "color-mix(in srgb, var(--prime-ref-color-sky-500) 16%, transparent)";
+            readonly soft: "color-mix(in srgb, {color.sky.500} 16%, transparent)";
             readonly text: "{color.sky.300}";
         };
         readonly field: {
-            readonly bgDisabled: "color-mix(in srgb, var(--prime-ref-color-gray-100) 4%, transparent)";
+            readonly bgDisabled: "color-mix(in srgb, {color.gray.100} 4%, transparent)";
         };
         readonly focus: {
             readonly ring: "{color.cobalt.400}";
         };
         readonly control: {
             readonly thumb: "{color.gray.100}";
+            readonly thumbDisabled: "{color.gray.600}";
+        };
+        readonly skeleton: {
+            readonly fill: "color-mix(in srgb, {color.gray.100} 10%, transparent)";
         };
         /** A light chip over the dark UI: inverse like in light, so it reads over any layer. */
         readonly tooltip: {
             readonly bg: "{color.gray.100}";
             readonly text: "{color.gray.925}";
             readonly muted: "{color.gray.600}";
-            readonly fill: "rgba(17, 19, 24, 0.08)";
+            readonly fill: "color-mix(in srgb, {color.gray.925} 8%, transparent)";
         };
-        readonly palette: Record<string, {
-            soft: string;
-            text: string;
-            solid: string;
-            solidFg: string;
-        }>;
+        readonly palette: Record<string, PaletteRoles>;
         /** The outgoing bubble is the accent itself in dark, as messengers do; text on it is light. */
         readonly message: {
             readonly outgoing: {
@@ -97,12 +103,12 @@ export declare const darkThemeOverrides: {
                 readonly accent: "{color.white}";
                 readonly accentFg: "{color.cobalt.700}";
                 readonly danger: "{color.red.100}";
-                readonly fill: "rgba(255, 255, 255, 0.14)";
-                readonly fillHover: "rgba(255, 255, 255, 0.2)";
-                readonly track: "rgba(255, 255, 255, 0.36)";
+                readonly fill: "color-mix(in srgb, {color.white} 14%, transparent)";
+                readonly fillHover: "color-mix(in srgb, {color.white} 20%, transparent)";
+                readonly track: "color-mix(in srgb, {color.white} 36%, transparent)";
                 /** A light wash over `bg`, precomposed (opaque) for the avatar ring. */
-                readonly chip: "color-mix(in srgb, var(--prime-ref-color-white) 14%, var(--prime-ref-color-cobalt-700))";
-                readonly chipHover: "color-mix(in srgb, var(--prime-ref-color-white) 20%, var(--prime-ref-color-cobalt-700))";
+                readonly chip: "color-mix(in srgb, {color.white} 14%, {color.cobalt.700})";
+                readonly chipHover: "color-mix(in srgb, {color.white} 20%, {color.cobalt.700})";
             };
         };
         /** Own steps for the dark grounds, validated as a set; the scale rises from the ground. */
@@ -130,8 +136,8 @@ export declare const darkThemeOverrides: {
     };
     readonly shadow: {
         readonly raised: "none";
-        readonly overlay: "0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px -8px rgba(0, 0, 0, 0.6)";
-        readonly modal: "0 0 0 1px rgba(255, 255, 255, 0.06), 0 32px 72px -16px rgba(0, 0, 0, 0.75)";
-        readonly thumb: "0 1px 3px rgba(0, 0, 0, 0.5)";
+        readonly overlay: "0 0 0 1px color-mix(in srgb, {color.white} 6%, transparent), 0 16px 40px -8px color-mix(in srgb, {color.black} 60%, transparent)";
+        readonly modal: "0 0 0 1px color-mix(in srgb, {color.white} 6%, transparent), 0 32px 72px -16px color-mix(in srgb, {color.black} 75%, transparent)";
+        readonly thumb: "0 1px 3px color-mix(in srgb, {color.black} 50%, transparent)";
     };
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "packageManager": "bun@1.3.13",
-  "description": "React 19 UI kit for product interfaces: 79 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y, Next.js App Router ready. Ships COMPONENT.md docs, copyable examples and an agent skill.",
+  "description": "React 19 UI kit for product interfaces: 78 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y, Next.js App Router ready. Ships COMPONENT.md docs, copyable examples and an agent skill.",
   "bin": {
     "prime-ui-kit": "bin/prime-ui-kit.js"
   },
@@ -82,9 +82,11 @@
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5",
     "date-fns": "^4.1.0",
+    "dom-accessibility-api": "0.6.3",
     "esbuild": "^0.27.0",
     "jsdom": "^29.0.1",
     "lucide-react": "^0.577.0",
+    "postcss": "8.5.8",
     "react": "^19.2.4",
     "react-aria-components": "^1.16.0",
     "react-dom": "^19.2.4",
@@ -140,7 +142,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "verify": "bun run check:ci && bun run typecheck && bun run test && bun run verify:tokens && bun run build",
-    "verify:tokens": "bun run tokens:build && git diff --exit-code -- src/styles/tokens.css src/styles/theme-light.css src/styles/theme-dark.css"
+    "verify:tokens": "bun run tokens:build && git diff --exit-code -- src/styles/tokens.css src/styles/theme-light.css src/styles/theme-dark.css src/internal/tokenDefaults.ts docs/foundation.md"
   },
   "sideEffects": [
     "**/*.css"