rei-kit 1.0.3 → 2.0.0

package/dist/tokens.css

@@ -1,14 +1,23 @@
 /* rei-kit design tokens.
  *
  * Semantic names on purpose. An app renames nothing to rebrand: it redefines
- * these values, and every component follows. */
-@theme {
-  --color-primary: #26667f;
-  --color-accent: #124170;
-  --color-positive: #67c090;
-  --color-negative: #e05b4f;
-  --color-warning: #d89a3e;
-
+ * these values, and every component follows.
+ *
+ * Three axes, each changed independently:
+ *
+ *   colour    — the eleven roles below; a palette redefines them
+ *   material  — how a surface is made: its fill, edge, depth and blur
+ *   motion    — how long things take and how they arrive
+ *
+ * A material (`rei-kit/materials.css`) changes the second without touching the
+ * first, which is how one app can be glass in one palette and brutalist in
+ * another without a component knowing either word.
+ *
+ * `static` so every variable is emitted whether or not a utility uses it.
+ * Components read many of these through `var()` in their own styles, and a
+ * theme variable Tailwind decided was unused would resolve to nothing there —
+ * a shadow that silently is not, which is exactly how `PriceCard` shipped. */
+@theme static {
   --color-canvas: #f4faf8;
   --color-surface: #ffffff;
   --color-muted: #ddf4e7;
@@ -32,6 +41,167 @@
   --radius-card: 16px;
   --radius-shell: 30px;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+
+  /* ---------------------------------------------------------------------
+     Motion.
+
+     Two curves and four durations, where there had been ten durations and a
+     cubic-bezier pasted into eight files. `sheet` is the iOS sheet curve:
+     quick take-off, long soft landing. `standard` is for everything that is
+     not arriving from an edge.
+     --------------------------------------------------------------------- */
+  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* ---------------------------------------------------------------------------
+   The filled roles, and the ink that sits on them.
+
+   Declared twice on purpose. `@theme reference` gives Tailwind the names, so
+   `bg-primary` and `text-on-primary` exist, without emitting a value. The
+   values come from the block below, at zero specificity inside the theme
+   layer — so anything an app states, in its own `@theme` or anywhere else,
+   wins in *both* modes.
+
+   That matters because the kit lightens these in the dark. Written as a plain
+   `.dark` rule, that lightening beat every app's own brand: an app that set
+   its primary in `@theme` switched to the dark mode and got Rei's blue. The
+   consumer checks of two apps caught it before it shipped.
+   --------------------------------------------------------------------------- */
+@theme reference {
+  --color-primary: #26667f;
+  --color-accent: #124170;
+  --color-positive: #67c090;
+  --color-negative: #c9463b;
+  --color-warning: #d89a3e;
+
+  --color-on-primary: #ffffff;
+  --color-on-accent: #ffffff;
+  --color-on-positive: #07141a;
+  --color-on-negative: #ffffff;
+  --color-on-warning: #07141a;
+}
+
+@layer theme {
+  :where(:root) {
+    --color-primary: #26667f;
+    --color-accent: #124170;
+    --color-positive: #67c090;
+    --color-negative: #c9463b;
+    --color-warning: #d89a3e;
+
+    --color-on-primary: #ffffff;
+    --color-on-accent: #ffffff;
+    --color-on-positive: #07141a;
+    --color-on-negative: #ffffff;
+    --color-on-warning: #07141a;
+  }
+
+  /* The filled roles lighten in the dark as well as the grounds darken. They
+     used not to: the light-mode primary on the dark surface measured 2.3:1,
+     so every link and focus ring in dark mode was below the line for a
+     control, and nothing but a measurement would have said so. */
+  :where(.dark) {
+    --color-primary: #5fb0c9;
+    --color-accent: #8cb8e0;
+    --color-negative: #f07a6f;
+    --color-warning: #e6ad58;
+
+    --color-on-primary: #07141a;
+    --color-on-accent: #07141a;
+    --color-on-positive: #07141a;
+    --color-on-negative: #07141a;
+    --color-on-warning: #07141a;
+  }
+
+  /* The on-colours follow their fill, whatever the fill turns out to be.
+     Black or white, whichever is further from the fill's lightness — so an
+     app that rebrands its primary and forgets `on-primary` gets readable text
+     instead of white on yellow.
+
+     A safety net, not a guarantee: across a hundred measured fills it never
+     falls below 3.9:1 and clears 4.5:1 on almost all of them. A palette sets
+     its on-colours explicitly, measured to WCAG AA, and so can an app. For the
+     kit's own colours it picks exactly what measurement picks. */
+  @supports (color: oklch(from red l c h)) {
+    :where(:root) {
+      --color-on-primary: oklch(from var(--color-primary) clamp(0, calc((0.6 - l) * 1000), 1) 0 0);
+      --color-on-accent: oklch(from var(--color-accent) clamp(0, calc((0.6 - l) * 1000), 1) 0 0);
+      --color-on-positive: oklch(
+        from var(--color-positive) clamp(0, calc((0.6 - l) * 1000), 1) 0 0
+      );
+      --color-on-negative: oklch(
+        from var(--color-negative) clamp(0, calc((0.6 - l) * 1000), 1) 0 0
+      );
+      --color-on-warning: oklch(from var(--color-warning) clamp(0, calc((0.6 - l) * 1000), 1) 0 0);
+    }
+  }
+}
+
+/* Material knobs that no utility is named after. Plain custom properties, so
+   a material or an app can set them on any element and the subtree follows. */
+:root {
+  --shadow-color: #0f2229;
+
+  /* ---------------------------------------------------------------------
+     Depth.
+
+     Four levels, named for what sits at them rather than for how big the
+     blur is: a card on the page, something lifted off it, a layer over the
+     whole page, and a control you can press. A material redefines all four,
+     which is how "a soft shadow" becomes "a hard offset" or "a raised puff"
+     across fifty components at once.
+
+     `--shadow-color` rather than a hex inside each shadow, so dark mode
+     changes one value instead of twelve.
+
+     Not in `@theme`, on purpose. Tailwind turns a theme shadow into a
+     `shadow-*` utility by *inlining its value*, so it can splice in a shadow
+     colour — which freezes it at whatever these say here. A material
+     redefining `--shadow-control` would reach every component except the ones
+     using `shadow-control`, and nothing would say so. Out here there is no such
+     utility to reach for; the way in is `shadow-(--shadow-control)`, which is
+     read at runtime like everything else.
+     --------------------------------------------------------------------- */
+  --shadow-card:
+    0 1px 2px color-mix(in oklab, var(--shadow-color) 4%, transparent),
+    0 2px 8px -2px color-mix(in oklab, var(--shadow-color) 6%, transparent);
+  --shadow-raised:
+    0 1px 2px color-mix(in oklab, var(--shadow-color) 6%, transparent),
+    0 12px 28px -10px color-mix(in oklab, var(--shadow-color) 18%, transparent);
+  --shadow-overlay:
+    0 4px 12px -4px color-mix(in oklab, var(--shadow-color) 10%, transparent),
+    0 24px 48px -16px color-mix(in oklab, var(--shadow-color) 28%, transparent);
+  --shadow-control: 0 1px 2px color-mix(in oklab, var(--shadow-color) 5%, transparent);
+  --shadow-control-pressed: none;
+
+  /* How much of the surface colour a surface keeps. Below 100% it lets the
+     page through, which is what glass is. */
+  --surface-opacity: 100%;
+  /* `none`, not `blur(0)`. Any backdrop-filter at all — zero included — makes
+     the element the containing block for its `position: fixed` descendants, so
+     a menu opened inside a card would position itself against the card. Only
+     a material that actually blurs pays that cost. */
+  --surface-backdrop: none;
+  --surface-border-width: 1px;
+  --surface-border-color: var(--color-hair);
+
+  --control-opacity: 100%;
+  --control-border-width: 1px;
+
+  /* The page behind everything. A material that needs something to blur puts
+     it here; the quiet one needs nothing. */
+  --canvas-backdrop: none;
+
+  /* What pressing a control does to it. A shrink by default; a material that
+     draws hard offset shadows presses *into* them instead. */
+  --press-scale: 0.97;
+  --press-offset: 0px;
+
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 340ms;
+  --duration-slower: 420ms;
 }
 
 /* Class-based rather than media-based: the app decides, and a user preference
@@ -45,13 +215,89 @@
   --color-ink: #e6f0ee;
   --color-ink-soft: #8fa8b2;
   --color-hair: #1c3945;
+
+  /* A shadow cast by a light ink would glow. Depth on a dark page is always
+     cast by black. */
+  --shadow-color: #000000;
 }
+
+/* Honouring the two preferences that say "less of this" — for every material
+   at once, so no material can forget to. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+    --duration-slower: 0ms;
+    --press-scale: 1;
+  }
+}
+
 /* rei-kit utilities.
  *
  * Declared with @utility rather than @layer utilities so an app can also reach
  * them from @apply inside a component's own styles — @layer classes cannot be
  * applied that way, which is a mistake worth only making once. */
 
+/* ---------------------------------------------------------------------------
+   Surfaces.
+
+   The one place a component learns what it is made of. Before these, every
+   card wrote `border border-hair bg-surface shadow-…` out in full, which is
+   how a material could not have reached them: there was no single thing to
+   redefine. Now a card says `surface` and the material says what that means.
+   --------------------------------------------------------------------------- */
+@utility surface {
+  background-color: color-mix(in oklab, var(--color-surface) var(--surface-opacity), transparent);
+  border: var(--surface-border-width) solid var(--surface-border-color);
+  /* `--surface-shadow` lets one card be lifted — a recommended plan, a hovered
+     tile — without a second shadow utility racing this one for the same
+     property. Unset, it is the card depth. */
+  box-shadow: var(--surface-shadow, var(--shadow-card));
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+}
+
+/* Lifted off the page: a toast, a popover, a card that is the point. */
+@utility surface-raised {
+  background-color: color-mix(in oklab, var(--color-surface) var(--surface-opacity), transparent);
+  border: var(--surface-border-width) solid var(--surface-border-color);
+  box-shadow: var(--shadow-raised);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+}
+
+/* Over the whole page: a dialog, a menu, a sheet. Always more opaque than a
+   card, because what is behind it is exactly what the reader has been asked
+   to stop looking at. */
+@utility surface-overlay {
+  background-color: color-mix(
+    in oklab,
+    var(--color-surface) calc(var(--surface-opacity) + (100% - var(--surface-opacity)) / 2),
+    transparent
+  );
+  border: var(--surface-border-width) solid var(--surface-border-color);
+  box-shadow: var(--shadow-overlay);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+}
+
+/* Something you type into or press that is not the main action. */
+@utility control {
+  background-color: color-mix(in oklab, var(--color-surface) var(--control-opacity), transparent);
+  border: var(--control-border-width) solid var(--surface-border-color);
+  box-shadow: var(--shadow-control);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+}
+
+/* The page itself. Put it on the element that fills the viewport. */
+@utility canvas {
+  background-color: var(--color-canvas);
+  background-image: var(--canvas-backdrop);
+  background-attachment: fixed;
+}
+
 /* Scrolling stays, the bar goes. On a narrow column a visible track reads as a
    stray line rather than as a control. */
 @utility no-scrollbar {

package/dist/utils/appearance.d.ts

@@ -0,0 +1,71 @@
+import { Ref } from 'vue';
+export declare const MATERIALS: readonly ["quiet", "glass", "brutal", "soft"];
+export type Material = (typeof MATERIALS)[number];
+export declare function isMaterial(value: unknown): value is Material;
+/**
+ * Switches the material for everything under `root`.
+ *
+ * `quiet` removes the attribute rather than writing it, because quiet is what
+ * the tokens already are — there is nothing to override.
+ *
+ * Needs `rei-kit/materials.css` (or the one material file) imported after
+ * `tokens.css`, or the attribute changes nothing.
+ */
+export declare function applyMaterial(material: Material, root?: HTMLElement): void;
+/** The eleven colour roles plus the five on-colours, for one mode. */
+export interface PaletteRoles {
+    primary: string;
+    accent: string;
+    positive: string;
+    negative: string;
+    warning: string;
+    canvas: string;
+    surface: string;
+    muted: string;
+    ink: string;
+    inkSoft: string;
+    hair: string;
+    onPrimary: string;
+    onAccent: string;
+    onPositive: string;
+    onNegative: string;
+    onWarning: string;
+}
+export interface Palette {
+    /** The value for `data-palette`. */
+    name: string;
+    /** A display name. */
+    label: string;
+    /** Who made it. Several are well-known open palettes, credited here. */
+    origin: string;
+    /** Four colours for a picker to show at a glance. */
+    swatch: readonly [string, string, string, string];
+    light: PaletteRoles;
+    dark: PaletteRoles;
+}
+export declare const PALETTES: readonly Palette[];
+export type PaletteName = string;
+export declare function isPaletteName(value: unknown): value is PaletteName;
+/**
+ * Switches the palette for everything under `root`.
+ *
+ * `rei` is the tokens' own palette, so it removes the attribute. Needs
+ * `rei-kit/palettes.css` imported after `tokens.css`.
+ */
+export declare function applyPalette(name: PaletteName, root?: HTMLElement): void;
+/** Call once at startup, before `useMaterial`, to namespace the stored value. */
+export declare function setMaterialStorageKey(key: string): void;
+/**
+ * The active material, as a writable ref. Assigning it stores and applies it.
+ *
+ * @example
+ * ```ts
+ * const material = useMaterial()
+ * material.value = 'glass'
+ * ```
+ */
+export declare function useMaterial(): Ref<Material>;
+/** Call once at startup, before `usePalette`, to namespace the stored value. */
+export declare function setPaletteStorageKey(key: string): void;
+/** The active palette's name, as a writable ref. Assigning it stores and applies it. */
+export declare function usePalette(): Ref<PaletteName>;

package/dist/web.js

@@ -62,7 +62,7 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}), 128))]);
 		};
 	}
-}), [["__scopeId", "data-v-d7bddb65"]]);
+}), [["__scopeId", "data-v-03e2e1d0"]]);
 //#endregion
 //#region src/web/BaseBreadcrumb.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$6 = ["aria-label"];
@@ -102,7 +102,7 @@ var BaseBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}), 128))])], 8, _hoisted_1$6);
 		};
 	}
-}), [["__scopeId", "data-v-85ee4b4e"]]);
+}), [["__scopeId", "data-v-dcc01b03"]]);
 //#endregion
 //#region src/web/BaseDisclosure.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$5 = { class: "rk-disclosure" };
@@ -148,7 +148,7 @@ var BaseDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}, [createElementVNode("div", _hoisted_6$1, [createElementVNode("div", { class: normalizeClass(["rk-disclosure-body", { "is-open": open.value }]) }, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2)])], 10, _hoisted_5$2)]);
 		};
 	}
-}), [["__scopeId", "data-v-e09c1481"]]);
+}), [["__scopeId", "data-v-ad5c09f5"]]);
 //#endregion
 //#region src/web/BaseModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$4 = ["role", "aria-label"];
@@ -263,7 +263,7 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				}, [createElementVNode("div", {
 					ref_key: "panel",
 					ref: panel,
-					class: "rk-modal-panel",
+					class: "rk-modal-panel surface-overlay",
 					role: __props.tone === "alert" ? "alertdialog" : "dialog",
 					"aria-modal": "true",
 					"aria-label": __props.title,
@@ -291,7 +291,7 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			})]);
 		};
 	}
-}), [["__scopeId", "data-v-e092f731"]]);
+}), [["__scopeId", "data-v-c6537cc8"]]);
 //#endregion
 //#region src/web/BasePagination.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = ["aria-label"];
@@ -385,7 +385,7 @@ var BasePagination_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			], 8, _hoisted_1$3);
 		};
 	}
-}), [["__scopeId", "data-v-cc4bbb58"]]);
+}), [["__scopeId", "data-v-29950578"]]);
 //#endregion
 //#region src/web/BaseTabs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$2 = ["aria-label"];
@@ -471,7 +471,7 @@ var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), 128))]);
 		};
 	}
-}), [["__scopeId", "data-v-b854e7f5"]]);
+}), [["__scopeId", "data-v-2a18b30e"]]);
 //#endregion
 //#region src/web/BaseTooltip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "rk-tip" };
@@ -494,7 +494,7 @@ var BaseTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}, toDisplayString(__props.label), 11, _hoisted_2$1)]);
 		};
 	}
-}), [["__scopeId", "data-v-3ed61bd4"]]);
+}), [["__scopeId", "data-v-3a572640"]]);
 //#endregion
 //#region src/web/NavLinks.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -530,7 +530,7 @@ var NavLinks_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), 128))])], 8, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-5e640548"]]);
+}), [["__scopeId", "data-v-52e5d553"]]);
 //#endregion
 export { BaseAccordion_default as BaseAccordion, BaseBreadcrumb_default as BaseBreadcrumb, BaseDisclosure_default as BaseDisclosure, BaseModal_default as BaseModal, BasePagination_default as BasePagination, BaseTabs_default as BaseTabs, BaseTooltip_default as BaseTooltip, NavLinks_default as NavLinks };