@instruments/materia-ui 0.3.0 → 0.3.1

package/dist/components/button/button-variants.d.ts

@@ -34,7 +34,8 @@ declare const getBaseSize: (size: ButtonSize) => ComponentSize;
  *   - neutral + outline     → the bordered button (old `outline` variant)
  *   - neutral + ghost       → the transparent button (old `ghost` variant)
  *   - neutral + link        → the inline link button (old `link` variant)
- *   - neutral + transparent → the blurred translucent button
+ *   - neutral + transparent → the blurred translucent button, for content
+ *     over images only (see `tokens/emphasis`)
  */
 declare const buttonVariants: (props?: ({
     tone?: "brand" | "danger" | "neutral" | null | undefined;

package/dist/components/button/button-variants.js

@@ -156,7 +156,8 @@ const BRAND_TRANSPARENT = "transform-gpu border-transparent bg-brand/50 backdrop
  *   - neutral + outline     → the bordered button (old `outline` variant)
  *   - neutral + ghost       → the transparent button (old `ghost` variant)
  *   - neutral + link        → the inline link button (old `link` variant)
- *   - neutral + transparent → the blurred translucent button
+ *   - neutral + transparent → the blurred translucent button, for content
+ *     over images only (see `tokens/emphasis`)
  */
 const buttonVariants = cva([
     "duration-quick text-paragraph-sm isolate inline-flex shrink-0 cursor-pointer items-center gap-2 border font-medium whitespace-nowrap transition ease-out",

package/dist/components/pill/pill-variants.d.ts

@@ -22,6 +22,9 @@ export declare const DEFAULT_PILL_SIZE: ComponentSize;
  *   - `neutral` + `solid`   → the dark primary pill (old default/solid)
  *   - `neutral` + `soft`    → the grey secondary pill (old secondary/solid)
  *   - `neutral` + `outline` → the bordered transparent pill (old `outline` variant)
+ *
+ * `neutral` + `transparent` is glass for content over images only (see
+ * `tokens/emphasis`).
  */
 export declare const pillVariants: (props?: ({
     tone?: "brand" | "danger" | "info" | "neutral" | "success" | "warning" | null | undefined;

package/dist/components/pill/pill-variants.js

@@ -30,8 +30,15 @@ export const DEFAULT_PILL_SIZE = "base";
  *   - `neutral` + `solid`   → the dark primary pill (old default/solid)
  *   - `neutral` + `soft`    → the grey secondary pill (old secondary/solid)
  *   - `neutral` + `outline` → the bordered transparent pill (old `outline` variant)
+ *
+ * `neutral` + `transparent` is glass for content over images only (see
+ * `tokens/emphasis`).
  */
-export const pillVariants = cva(cn("inline-flex items-center justify-center border border-transparent font-normal whitespace-nowrap [&_svg]:-ms-px [&_svg]:shrink-0", focusRing(), "data-[hovered=true]:opacity-90"), {
+export const pillVariants = cva(cn("inline-flex items-center justify-center border border-transparent font-normal whitespace-nowrap [&_svg]:-ms-px [&_svg]:shrink-0", focusRing(), 
+// Hover tints the fill with a 4% foreground wash laid over it as an image,
+// so the text keeps its colour. 4% is the most every tone and emphasis takes
+// and still reaches AA (styles/tone-contrast.test.ts, PILL_HOVER_WASH).
+"data-[hovered=true]:from-foreground/4 data-[hovered=true]:to-foreground/4 data-[hovered=true]:bg-linear-to-b"), {
     compoundVariants: [
         /* ── Focus ring colours by tone ────────────────────────── */
         {

package/dist/data/token-gallery.js

@@ -65,7 +65,7 @@ export const SEMANTIC_COLORS = [
         class: "bg-brand-soft",
         key: "brand-soft",
         name: "Brand Soft",
-        value: "#fffef5",
+        value: "#fffbd9",
     },
     {
         class: "bg-brand-accent",

package/dist/styles/index.css

@@ -233,7 +233,13 @@
   --color-info-foreground: #1e3a5f; /* blue-900 */
 
   --color-brand: #ffe600; /* Brand yellow, per the Figma base/brand token */
-  --color-brand-soft: #fffef5; /* very soft brand yellow (code-only) */
+  /* Pale brand yellow (code-only), mixed from --color-brand so a re-brand
+     carries its soft fill with it: #fffbd9 for the default yellow. */
+  --color-brand-soft: color-mix(
+    in srgb,
+    var(--color-brand) 15%,
+    var(--color-white)
+  );
   --color-brand-accent: #dda600; /* per Figma base/brand accent - consumed at /40 for borders/accents */
   --color-brand-foreground: var(--color-gray-800); /* #1F2937 - per Figma */
   /* Brand-hued text on the page background, for brand buttons without a fill.

package/dist/tokens/emphasis.d.ts

@@ -10,6 +10,11 @@
  * cva-backed components anchor their variant map `satisfies Record<Emphasis, …>`
  * so the fill vocabulary stays in lockstep with the canon.
  *
+ * `transparent` is a blurred half fill of the tone. Its brand and status tones
+ * are tuned to read on the page. Neutral transparent is glass for
+ * content over images: its white text reaches AA over a mid-to-dark photo or a
+ * Scrim, but not on the page or a pale image, so keep it to media.
+ *
  * `link` is deliberately NOT a member: it is a Button-only extension expressed
  * as `ButtonEmphasis = Emphasis | "link"`, so no other component inherits an
  * inline-link treatment it has no styling for.

package/dist/tokens/emphasis.js

@@ -10,6 +10,11 @@
  * cva-backed components anchor their variant map `satisfies Record<Emphasis, …>`
  * so the fill vocabulary stays in lockstep with the canon.
  *
+ * `transparent` is a blurred half fill of the tone. Its brand and status tones
+ * are tuned to read on the page. Neutral transparent is glass for
+ * content over images: its white text reaches AA over a mid-to-dark photo or a
+ * Scrim, but not on the page or a pale image, so keep it to media.
+ *
  * `link` is deliberately NOT a member: it is a Button-only extension expressed
  * as `ButtonEmphasis = Emphasis | "link"`, so no other component inherits an
  * inline-link treatment it has no styling for.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instruments/materia-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Materia design system: React components, tokens and Tailwind v4 styles.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {