@refrakt-md/lumina 0.18.0 → 0.20.0

package/styles/dimensions/surfaces.css

@@ -4,6 +4,17 @@
  * Padding scales with density via --rune-padding custom property.
  * ────────────────────────────────────────────────────────────────────── */
 
+/* Semantic surface/media aliases over the raw token scale (these reference
+ * tokens rather than holding raw values, so they live in the styles layer, not
+ * the generated token contract). Outer surfaces round at --rf-radius-container;
+ * media guests nested inside them round at the smaller --rf-radius-media so they
+ * never read as more rounded than their container. SPEC-086's `frame` will
+ * override these per-instance. */
+:root {
+	--rf-radius-container: var(--rf-radius-lg);
+	--rf-radius-media: var(--rf-radius-md);
+}
+
 /* ─── Rune Spacing ────────────────────────────────────────────────── */
 /* Only top-level runes get vertical margin; child runes (nav items,
    accordion items, grid cells, etc.) inherit spacing from their parent.
@@ -42,7 +53,8 @@
 .rf-howto,
 .rf-form {
 	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-container);
 	padding: var(--rune-padding, var(--rf-spacing-md));
 }
 
@@ -86,6 +98,27 @@
 .rf-figure,
 .rf-reveal {
 	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-container);
 	padding: var(--rune-padding, var(--rf-spacing-md));
 }
+
+/* ─── Inset surface (SPEC-087) — tint-tracking recessed fill ──────────
+ * Derived at use-site via relative-color (lower L, keep C+H) so it recomputes from a tinted
+ * `--rf-color-surface` automatically (a static inset-colour token would
+ * freeze to the untinted :root). Writes `background` only — never re-bases
+ * `--rf-color-surface` — so insets don't compound under nesting; depth is
+ * conveyed by border/elevation. `--rf-surface-inset-shift: 0` flushes it. */
+
+/* chart / diagram self surface: the standalone "darker surface". */
+.rf-chart,
+.rf-diagram {
+	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+}
+
+/* Media wells of media-bearing runes: a recessed sub-surface that tracks the
+ * (possibly tinted) container colour — invisible under a full-bleed guest,
+ * visible in the gaps (transparent, displaced, or absent guest). */
+:is(.rf-card, .rf-bento-cell, .rf-recipe, .rf-realm, .rf-faction, .rf-playlist) [data-section="media"] {
+	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+}

package/styles/global.css

@@ -28,6 +28,74 @@ body {
 	margin: 0;
 }
 
+/* ─── Theme-aware browser chrome (WORK-351) ─────────────────────────
+ * Make native chrome — scrollbars, form controls, the main viewport
+ * scrollbar — follow the active theme instead of always rendering in
+ * the OS default scheme. */
+
+/* `color-scheme` so the UA paints native widgets/scrollbars per mode.
+ * Mirrors the dark-token selectors (explicit toggle + system preference
+ * unless forced light). */
+:root { color-scheme: light; }
+[data-theme="dark"] { color-scheme: dark; }
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme="light"]) { color-scheme: dark; }
+}
+
+/* Branded text selection — a subtle primary wash (the native/OS blue
+ * otherwise leaks through). Background only, so the element's own text
+ * colour stays legible under any theme. */
+::selection {
+	background: color-mix(in oklch, var(--rf-color-primary) 22%, transparent);
+}
+
+/* Token-driven scrollbars. `scrollbar-color` / `scrollbar-width` inherit,
+ * so setting them on the root reaches every overflow container (codegroup,
+ * datatable, drawer body, nav/sidebar) without per-rune rules; the WebKit
+ * pseudo-elements refine the same colours. More specific per-container
+ * rules (e.g. the hidden docs sidebar) still win. */
+:root {
+	scrollbar-width: thin;
+	scrollbar-color: var(--rf-color-muted) transparent;
+}
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+	background: var(--rf-color-muted);
+	border-radius: var(--rf-radius-full);
+	border: 2px solid transparent;
+	background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--rf-color-text); }
+
+/* ─── Keyboard focus (WORK-352) ─────────────────────────────────────
+ * A uniform, token-driven focus ring on every interactive element, at
+ * zero specificity (`:where`) so a rune's own `:focus-visible` overrides
+ * it. An outline (not box-shadow) follows border-radius and never shifts
+ * layout; `outline-color` uses `primary`, so it is visible in both modes. */
+:where(
+	a[href], button, input, select, textarea, summary,
+	[tabindex]:not([tabindex="-1"]),
+	[role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="menuitemradio"]
+):focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: 2px;
+}
+
+/* ─── Reduced motion (WORK-352) ─────────────────────────────────────
+ * Honour the user's motion preference across every animated rune
+ * (chart, reveal, juxtapose, accordion, drawer, …) in one place. Uses a
+ * near-zero duration rather than `none` so animation/transition end
+ * events still fire for behaviours that await them. */
+@media (prefers-reduced-motion: reduce) {
+	*, *::before, *::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	margin-top: 2em;

package/styles/layouts/on-this-page.css

@@ -40,9 +40,9 @@
 }
 
 .rf-on-this-page__item[data-active] {
-	border-left-color: var(--rf-color-primary, #0ea5e9);
+	border-left-color: var(--rf-color-primary);
 }
 
 .rf-on-this-page__item[data-active] a {
-	color: var(--rf-color-primary, #0ea5e9);
+	color: var(--rf-color-primary);
 }

package/styles/layouts/search.css

@@ -145,8 +145,8 @@
 	color: var(--rf-color-muted);
 }
 .rf-search-result__excerpt mark {
-	background: var(--rf-color-primary-100);
-	color: var(--rf-color-primary-700);
+	background: var(--rf-color-primary-bg);
+	color: var(--rf-color-text);
 	border-radius: 2px;
 	padding: 0 1px;
 }

package/styles/layouts/split.css

@@ -1,231 +1,182 @@
-/* Shared split layout — used by Feature, Hero, Step, and any rune with data-layout */
-
-[data-layout="split"],
-[data-layout="split-reverse"] {
+/* Shared media + content layout — used by card, recipe, hero, feature, step,
+ * realm, faction, playlist (anything that uses the `splitLayoutAttributes`
+ * preset). Same vocabulary as `bento-cell`:
+ *   • `data-media-position="top"`    — media above content (default, block flow)
+ *   • `data-media-position="bottom"` — media below content (flex column-reverse)
+ *   • `data-media-position="start"`  — media beside content on the left  (grid)
+ *   • `data-media-position="end"`    — media beside content on the right (grid)
+ *
+ * Body source order is always media-first (the `splitMediaBodyFooter` helper
+ * splits `media --- content` zones in that order); the position dial decides
+ * the visual order independently. */
+
+/* ─── Beside layouts (start / end): two-column grid ─────────────────── */
+
+[data-media-position="start"],
+[data-media-position="end"] {
   display: grid;
-  grid-template-columns: var(--split-ratio, 1fr 1fr);
+  grid-template-columns: var(--media-share, 50%) 1fr;
   align-items: var(--split-valign, start);
-  column-gap: var(--split-gap, var(--rf-spacing-lg));
 }
 
-[data-layout="split-reverse"] > [data-name="content"] { order: 2; }
-[data-layout="split-reverse"] > [data-name="media"] { order: 1; }
+/* "end" flips the grid so media lands in column 2 (right) instead of column 1.
+ * Source order is media-first, so we re-place media via grid-column. */
+[data-media-position="end"] {
+  grid-template-columns: 1fr var(--media-share, 50%);
+}
+[data-media-position="end"] > [data-section="media"],
+[data-media-position="end"] > [data-name="media"] { grid-column: 2; }
+[data-media-position="end"] > [data-name="content"] { grid-column: 1; }
+
+/* `media-ratio` → media's share of the row width (shared across runes; mirrors
+ * the bento-cell scale at `bento.css:50-54`). When unset, columns fall back to
+ * the 50% default on `--media-share`. */
+[data-media-ratio="1/3"] { --media-share: 33.333%; }
+[data-media-ratio="2/5"] { --media-share: 40%; }
+[data-media-ratio="1/2"] { --media-share: 50%; }
+[data-media-ratio="3/5"] { --media-share: 60%; }
+[data-media-ratio="2/3"] { --media-share: 66.667%; }
 
 /* Grid so children can use justify-self/align-self (default: stretch) */
-[data-layout="split"] > [data-name="media"],
-[data-layout="split-reverse"] > [data-name="media"],
-[data-layout="split"] > [data-section="media"],
-[data-layout="split-reverse"] > [data-section="media"] {
+[data-media-position="start"] > [data-name="media"],
+[data-media-position="end"] > [data-name="media"],
+[data-media-position="start"] > [data-section="media"],
+[data-media-position="end"] > [data-section="media"] {
   display: grid;
 }
 
-/* ─── 3-section grid placement (header + content + media) ─────────── */
-/* Only applies when a data-section="header" child exists (3-section runes).
-   2-section runes (e.g. Feature with display:contents on content) use the
-   default 2-column flow from the base grid above. */
-
-/* Split: header + content in col 1, media in col 2 spanning both rows */
-[data-layout="split"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 1; grid-row: 1; }
-[data-layout="split"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 1; grid-row: 2; }
-[data-layout="split"]:has(> [data-section="header"]) > [data-section="media"]   { grid-column: 2; grid-row: 1 / 3; }
-
-/* Split-reverse: media in col 1 spanning both rows, header + content in col 2 */
-[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 2; grid-row: 1; }
-[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 2; grid-row: 2; }
-[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="media"]   { grid-column: 1; grid-row: 1 / 3; }
-
-/* Reset margin on media zone in 3-section split layouts (header + content + media).
-   2-section runes (e.g. Hero) retain their per-rune media margins. */
-[data-layout="split"]:has(> [data-section="header"]) > [data-section="media"],
-[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="media"] {
+/* ─── Stacked layouts (top / bottom) ────────────────────────────────── */
+
+/* "bottom" puts content on top, media at the bottom. Source order is media-
+ * first, so column-reverse flips it visually without changing the DOM. */
+[data-media-position="bottom"] {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+/* ─── 3-section grid placement (header + content + media) ───────────── */
+/* Applies only when a `data-section="header"` child exists. 2-section runes
+ * (e.g. hero, feature with the header rolled into content) fall through to
+ * the simple 2-column flow above. */
+
+[data-media-position="start"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 1; grid-row: 1; }
+[data-media-position="start"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 1; grid-row: 2; }
+[data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"]  { grid-column: 2; grid-row: 1 / 3; }
+
+[data-media-position="end"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 2; grid-row: 1; }
+[data-media-position="end"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 2; grid-row: 2; }
+[data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"]  { grid-column: 1; grid-row: 1 / 3; }
+
+[data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"],
+[data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"] {
   margin: 0;
 }
 
 /* ─── Media zone base styles ──────────────────────────────────────── */
 
-/* Clip overflow + round corners when the media zone holds media-like
-   content: an image, or a self-contained block rune that wants the same
-   "fills the slot" treatment (codegroup, snippet, chart, sandbox). Anything
-   else keeps overflow visible so interactive bleed effects (preview,
-   juxtapose) still work. Add new rune-typed media here when they should
-   participate in the same chrome. */
-[data-section="media"]:where(
-  :has(> img),
-  :has(> [data-rune="code-group"]),
-  :has(> [data-rune="snippet"]),
-  :has(> [data-rune="chart"]),
-  :has(> [data-rune="sandbox"])
-) {
-  border-radius: var(--rf-radius-lg);
+/* Media-zone guest adaptation (WORK-339 / SPEC-084). Any visual guest fills the
+ * zone, and the zone clips, rounds, and becomes a container-query context — so
+ * a tall guest scales/clips instead of ballooning, and intrinsically responsive
+ * guests (e.g. `mockup`'s `cqi` auto-scale) resolve against the slot. Guests
+ * that manage their own bleed / interactive chrome (preview, juxtapose, an
+ * explicitly-bleeding showcase) self-declare an opt-out below so their
+ * displacement isn't clipped. */
+[data-section="media"] {
+  container-type: inline-size;
   overflow: hidden;
+  /* Media guests use the smaller media radius tier so they never read as more
+   * rounded than the (larger-radius) container they sit in. */
+  border-radius: var(--rf-radius-media);
 }
-[data-section="media"] > :where(
-  img,
-  [data-rune="code-group"],
-  [data-rune="snippet"],
-  [data-rune="chart"],
-  [data-rune="sandbox"]
-) {
+[data-section="media"] > * {
   display: block;
   width: 100%;
-  height: auto;
-  border-radius: var(--rf-radius-lg);
+  max-height: 100%;
+  border-radius: inherit;
   margin: 0;
 }
-
-/* Split layout images get subtle depth. Block runes carry their own visual
-   weight (topbars, frames) so the shadow is image-only. */
-[data-layout="split"] > [data-section="media"] > img,
-[data-layout="split-reverse"] > [data-section="media"] > img {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+[data-section="media"] > :is(img, video) {
+  height: 100%;
+  object-fit: cover;
 }
-
-/* ─── Collapse breakpoints ────────────────────────────────────────── */
-
-@media (max-width: 640px) {
-  [data-layout^="split"][data-collapse="sm"] { grid-template-columns: 1fr; }
-  [data-layout^="split"][data-collapse="sm"] > * { order: unset; }
+[data-section="media"]:is(
+  :has(> [data-rune="preview"]),
+  :has(> [data-rune="juxtapose"]),
+  :has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+) {
+  overflow: visible;
+  container-type: normal;
+  border-radius: 0;
 }
-
-@media (max-width: 768px) {
-  [data-layout^="split"][data-collapse="md"] { grid-template-columns: 1fr; }
-  [data-layout^="split"][data-collapse="md"] > * { order: unset; }
+/* …and let those self-managing guests keep their intrinsic width/sizing: the
+ * generic `width: 100%` above would defeat a negative-margin breakout (e.g.
+ * `preview--in-feature` bleeding to the viewport edge on mobile). */
+[data-section="media"]:is(
+  :has(> [data-rune="preview"]),
+  :has(> [data-rune="juxtapose"]),
+  :has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+) > * {
+  width: auto;
+  max-height: none;
+  border-radius: 0;
 }
 
-@media (max-width: 1024px) {
-  [data-layout^="split"][data-collapse="lg"] { grid-template-columns: 1fr; }
-  [data-layout^="split"][data-collapse="lg"] > * { order: unset; }
+/* (Figure-style media bleed used to live here — a negative-margin breakout that
+ * extended a top-position media banner past the container padding to leave a
+ * small consistent figure margin. Every consumer (card / recipe / realm /
+ * faction / playlist / bento-cell) moved to the thin-edge inset model — outer
+ * padding is a thin edge, the content zone fills the remaining inset — which
+ * achieves the same visual without the negative-margin hack. The rule was
+ * removed once it had no remaining matches; reintroduce a positive opt-in if
+ * a new rune ever wants figure bleed.) */
+
+/* A code-group dropped into a media zone uses the media radius tier so its
+ * border and corners line up with the zone's clip instead of the larger
+ * container radius it gets as a standalone inset surface. */
+[data-section="media"] .rf-codegroup {
+  border-radius: var(--rf-radius-media);
 }
 
-/* ─── Default mobile collapse for split layouts ───────────────────── */
-/* Runes without an explicit data-collapse always collapse at sm */
-
-@media (max-width: 640px) {
-  [data-layout^="split"]:not([data-collapse]) {
-    grid-template-columns: 1fr;
-  }
-  [data-layout^="split"]:not([data-collapse]) > [data-section="header"],
-  [data-layout^="split"]:not([data-collapse]) > [data-name="content"],
-  [data-layout^="split"]:not([data-collapse]) > [data-section="media"] {
-    grid-column: auto;
-    grid-row: auto;
-  }
-  [data-layout^="split"]:not([data-collapse]) > * {
-    order: unset;
-  }
-
-  /* ─── Content-first collapse (data-media-position="top") ────────── */
-  /* Media hoists above preamble as full-bleed card header */
-  [data-media-position="top"] > [data-section="media"],
-  [data-media-position="top"][data-layout="split"] > [data-section="media"],
-  [data-media-position="top"][data-layout="split-reverse"] > [data-section="media"] {
-    order: -1;
-    grid-column: auto;
-    grid-row: auto;
-    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
-    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
-    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
-    border-radius: 0;
-  }
-  [data-media-position="top"] > [data-section="media"] > :where(
-    img,
-    [data-rune="code-group"],
-    [data-rune="snippet"],
-    [data-rune="chart"],
-    [data-rune="sandbox"]
-  ) {
-    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
-  }
-
-  /* Stacked layout also needs flex context for order to work */
-  [data-media-position="top"][data-layout="stacked"] {
-    display: flex;
-    flex-direction: column;
-  }
+/* Beside-layout images get subtle depth. Block runes carry their own visual
+ * weight (topbars, frames) so the shadow is image-only. */
+[data-media-position="start"] > [data-section="media"] > img,
+[data-media-position="end"] > [data-section="media"] > img {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
-/* ─── Explicit collapse breakpoint + content-first ────────────────── */
+/* ─── Collapse breakpoints ────────────────────────────────────────────
+ * Beside (start/end) layouts drop to a single column at the chosen breakpoint;
+ * the source-order (media-first) carries through, so media ends up on top of
+ * content after the collapse. `top` / `bottom` are already stacked and unchanged
+ * by collapse (their orientation is preserved). */
 
 @media (max-width: 640px) {
-  [data-media-position="top"][data-collapse="sm"] > [data-section="media"],
-  [data-media-position="top"][data-collapse="sm"][data-layout="split"] > [data-section="media"],
-  [data-media-position="top"][data-collapse="sm"][data-layout="split-reverse"] > [data-section="media"] {
-    order: -1;
-    grid-column: auto;
-    grid-row: auto;
-    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
-    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
-    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
-    border-radius: 0;
-  }
-  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] > :where(
-    img,
-    [data-rune="code-group"],
-    [data-rune="snippet"],
-    [data-rune="chart"],
-    [data-rune="sandbox"]
-  ) {
-    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="sm"],
+  :is([data-media-position="start"], [data-media-position="end"]):not([data-collapse]) {
+    grid-template-columns: 1fr;
   }
-  /* Reset grid placement on collapse for header/content */
-  [data-media-position="top"][data-collapse="sm"] > [data-section="header"],
-  [data-media-position="top"][data-collapse="sm"] > [data-name="content"] {
+  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="sm"] > *,
+  :is([data-media-position="start"], [data-media-position="end"]):not([data-collapse]) > * {
     grid-column: auto;
     grid-row: auto;
   }
 }
 
 @media (max-width: 768px) {
-  [data-media-position="top"][data-collapse="md"] > [data-section="media"],
-  [data-media-position="top"][data-collapse="md"][data-layout="split"] > [data-section="media"],
-  [data-media-position="top"][data-collapse="md"][data-layout="split-reverse"] > [data-section="media"] {
-    order: -1;
-    grid-column: auto;
-    grid-row: auto;
-    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
-    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
-    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
-    border-radius: 0;
-  }
-  [data-media-position="top"][data-collapse="md"] > [data-section="media"] > :where(
-    img,
-    [data-rune="code-group"],
-    [data-rune="snippet"],
-    [data-rune="chart"],
-    [data-rune="sandbox"]
-  ) {
-    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="md"] {
+    grid-template-columns: 1fr;
   }
-  [data-media-position="top"][data-collapse="md"] > [data-section="header"],
-  [data-media-position="top"][data-collapse="md"] > [data-name="content"] {
+  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="md"] > * {
     grid-column: auto;
     grid-row: auto;
   }
 }
 
 @media (max-width: 1024px) {
-  [data-media-position="top"][data-collapse="lg"] > [data-section="media"],
-  [data-media-position="top"][data-collapse="lg"][data-layout="split"] > [data-section="media"],
-  [data-media-position="top"][data-collapse="lg"][data-layout="split-reverse"] > [data-section="media"] {
-    order: -1;
-    grid-column: auto;
-    grid-row: auto;
-    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
-    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
-    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
-    border-radius: 0;
-  }
-  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] > :where(
-    img,
-    [data-rune="code-group"],
-    [data-rune="snippet"],
-    [data-rune="chart"],
-    [data-rune="sandbox"]
-  ) {
-    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="lg"] {
+    grid-template-columns: 1fr;
   }
-  [data-media-position="top"][data-collapse="lg"] > [data-section="header"],
-  [data-media-position="top"][data-collapse="lg"] > [data-name="content"] {
+  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="lg"] > * {
     grid-column: auto;
     grid-row: auto;
   }

package/styles/layouts/version-switcher.css

@@ -41,5 +41,5 @@
 .rf-version-switcher__select:focus-visible {
 	outline: none;
 	border-color: var(--rf-color-primary);
-	box-shadow: 0 0 0 2px var(--rf-color-primary-100, rgba(14, 165, 233, 0.15));
+	box-shadow: 0 0 0 2px var(--rf-color-primary-bg);
 }

package/styles/runes/audio.css

@@ -58,7 +58,7 @@
 	border-radius: var(--rf-radius-full, 9999px);
 	border: none;
 	background: var(--rf-color-primary);
-	color: #fff;
+	color: var(--rf-color-on-primary);
 	cursor: pointer;
 	display: flex;
 	align-items: center;