@birdycom/omniaui 0.11.1 → 0.12.0

package/dist/carousel.d.ts

@@ -0,0 +1,6 @@
+// File: packages/ui/src/carousel.d.ts
+// Types for the looping carousel script (.oc-carousel--loop prev/next buttons).
+
+export function loopTarget(position: number, max: number, step: number, direction: 1 | -1): number;
+export function bindCarousel(root: HTMLElement): void;
+export function initCarousels(scope?: ParentNode): void;

package/dist/carousel.js

@@ -0,0 +1,46 @@
+// File: packages/ui/src/carousel.js
+// Map: next scroll position (wraps at the ends) -> bind one .oc-carousel--loop (prev/next buttons) -> boot
+// Loop for the CSS carousel: the browser's ::scroll-button arrows stop at the first and last slide, so a looping
+// carousel has two real buttons (.oc-carousel-prev / .oc-carousel-next) and this script moves it one slide, from the
+// last slide back to the first and from the first to the last. Swipe, snap, dots and keyboard stay CSS.
+
+/**
+ * Where to scroll for one step. `position` and `max` are distances from the start edge (positive, also in RTL),
+ * `step` is one slide plus the gap. At an end (within 2px, scroll snapping rounds) it wraps around.
+ */
+export function loopTarget(position, max, step, direction) {
+  if (direction > 0) return position >= max - 2 ? 0 : Math.min(max, position + step);
+  return position <= 2 ? max : Math.max(0, position - step);
+}
+
+/** Wire the prev/next buttons of one looping carousel (once). */
+export function bindCarousel(root) {
+  if (root.hasAttribute("data-oc-loop")) return;
+  const viewport = root.querySelector(".oc-carousel-viewport");
+  const items = viewport?.querySelectorAll(".oc-carousel-item");
+  if (!viewport || !items?.length) return;
+  const rtl = getComputedStyle(viewport).direction === "rtl";
+  const move = (direction) => {
+    const max = viewport.scrollWidth - viewport.clientWidth;
+    // One slide plus the gap: the distance between the first two slides (one slide wide when there is only one).
+    const step = items.length > 1 ? Math.abs(items[1].offsetLeft - items[0].offsetLeft) : viewport.clientWidth;
+    const position = Math.abs(viewport.scrollLeft);
+    const target = loopTarget(position, max, step, direction);
+    viewport.scrollTo({ left: rtl ? -target : target });
+  };
+  root.querySelector(".oc-carousel-prev")?.addEventListener("click", () => move(-1));
+  root.querySelector(".oc-carousel-next")?.addEventListener("click", () => move(1));
+  root.setAttribute("data-oc-loop", "");
+}
+
+/** Wire every looping carousel under scope that is not wired yet. */
+export function initCarousels(scope = document) {
+  scope.querySelectorAll(".oc-carousel--loop").forEach((root) => bindCarousel(root));
+}
+
+// The docs site loads this file as /js/oc-carousel.js. A wrapper import must not scan the page.
+if (typeof document !== "undefined" && String(import.meta.url).includes("oc-carousel")) {
+  const boot = () => initCarousels(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/components-extra.css

@@ -503,6 +503,45 @@ a.oc-item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px
   .oc-carousel-viewport::scroll-button(inline-end):disabled { opacity: 0.35; cursor: default; }
 }
 
+/* Loop (.oc-carousel--loop): after the last slide comes the first again. CSS scroll buttons stop at the ends, so this
+   variant has two real buttons (.oc-carousel-prev / .oc-carousel-next) driven by carousel.js; swipe, snap, dots and
+   keyboard stay CSS. Until the script has run (data-oc-loop), the buttons stay hidden and the CSS arrows remain. */
+.oc-carousel-prev,
+.oc-carousel-next {
+  position: absolute;
+  inset-block-start: 50%;
+  translate: 0 -50%;
+  z-index: 1;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  font-size: 1rem;
+  color: var(--oc-foreground);
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px oklch(from var(--color-black-60) l c h / 0.18);
+  cursor: pointer;
+}
+.oc-carousel-prev { inset-inline-start: 0.5rem; }
+.oc-carousel-next { inset-inline-end: 0.5rem; }
+.oc-carousel-prev:hover,
+.oc-carousel-next:hover { background: var(--oc-accent); }
+.oc-carousel-prev:focus-visible,
+.oc-carousel-next:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-carousel--loop:not([data-oc-loop]) :is(.oc-carousel-prev, .oc-carousel-next) { display: none; }
+/* Centered on the viewport, not on the carousel with its dots underneath. */
+@supports (anchor-name: --a) {
+  .oc-carousel-prev,
+  .oc-carousel-next { position-anchor: --oc-carousel; inset-block-start: anchor(center); }
+}
+@supports selector(::scroll-button(inline-start)) {
+  .oc-carousel--loop[data-oc-loop] .oc-carousel-viewport::scroll-button(inline-start),
+  .oc-carousel--loop[data-oc-loop] .oc-carousel-viewport::scroll-button(inline-end) { content: none; }
+}
+
 /* ===================================================================
    RESIZABLE — split panes using the native CSS `resize` property (drag the grip in the corner of the resizable panel).
    A full-length drag handle between panes with keyboard support needs script: wrapper responsibility.

package/dist/components.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.11.1. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.0. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {
@@ -1363,37 +1363,120 @@ textarea.oc-input {
 
 /* ===================================================================
    TOOLTIP
-   Pure CSS via data-tooltip attribute
+   Pure CSS. Text: the data-tooltip attribute (drawn by ::after). Richer content, such as a title above lines
+   of values: a child .oc-tooltip__content. With anchor positioning the bubble is anchored to its element and
+   moves to the side that has room; otherwise it sits on the preferred side (top by default).
    =================================================================== */
 
 .oc-tooltip {
+  --oc-tooltip-bg: oklch(from var(--oc-popover) l c h / 0.94);
+  --oc-tooltip-gap: 8px;
   position: relative;
   cursor: help;
 }
 
-.oc-tooltip::after {
-  content: attr(data-tooltip);
+.oc-tooltip::after,
+.oc-tooltip > .oc-tooltip__content {
   position: absolute;
-  bottom: calc(100% + 6px);
+  bottom: calc(100% + var(--oc-tooltip-gap));
   left: 50%;
-  transform: translateX(-50%);
+  translate: -50% 0;
   padding: 6px 10px;
   font-size: 0.75rem;
-  line-height: 1.4;
-  color: var(--oc-primary-foreground);
-  background: var(--oc-primary);
-  border-radius: calc(var(--oc-radius) - 2px);
+  font-weight: 500;
+  line-height: 1.45;
+  color: var(--oc-popover-foreground);
+  background: var(--oc-tooltip-bg);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  box-shadow: 0 10px 28px -8px oklch(from var(--color-black-60) l c h / 0.3), 0 2px 6px -2px oklch(from var(--color-black-60) l c h / 0.15);
+  backdrop-filter: blur(12px) saturate(1.4);
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
-  transition: opacity var(--oc-transition-fast);
+  scale: 0.96;
+  transition: opacity var(--oc-transition-fast), scale 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
   z-index: 50;
 }
 
+.oc-tooltip::after { content: attr(data-tooltip); }
+/* Rich content only: no empty ::after bubble. */
+.oc-tooltip:not([data-tooltip])::after { content: none; }
+
 /* Also on keyboard focus of the element inside (Tab), not only on mouse hover. */
 .oc-tooltip:hover::after,
-.oc-tooltip:focus-within::after {
+.oc-tooltip:focus-within::after,
+.oc-tooltip:hover > .oc-tooltip__content,
+.oc-tooltip:focus-within > .oc-tooltip__content {
   opacity: 1;
+  scale: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-tooltip::after,
+  .oc-tooltip > .oc-tooltip__content { transition: opacity var(--oc-transition-fast); scale: 1; }
+}
+
+/* Several lines: line breaks in data-tooltip (or in .oc-tooltip__content) start a new line. */
+.oc-tooltip--multiline::after,
+.oc-tooltip > .oc-tooltip__content {
+  white-space: pre-line;
+  inline-size: max-content;
+  max-inline-size: 20rem;
+  padding: 8px 12px;
+  text-align: start;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Title line of the rich content: a bit larger, always starting with a capital. */
+.oc-tooltip__title {
+  display: block;
+  margin-block-end: 2px;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+.oc-tooltip__title::first-letter { text-transform: uppercase; }
+
+/* Preferred side (default: top). Without anchor positioning these are fixed places next to the element. */
+.oc-tooltip--bottom::after,
+.oc-tooltip--bottom > .oc-tooltip__content { bottom: auto; top: calc(100% + var(--oc-tooltip-gap)); }
+.oc-tooltip--left::after,
+.oc-tooltip--left > .oc-tooltip__content { bottom: auto; left: auto; top: 50%; right: calc(100% + var(--oc-tooltip-gap)); translate: 0 -50%; }
+.oc-tooltip--right::after,
+.oc-tooltip--right > .oc-tooltip__content { bottom: auto; top: 50%; left: calc(100% + var(--oc-tooltip-gap)); translate: 0 -50%; }
+
+/* Anchor positioning: fixed, so a scroll container (a wide table, a sidebar) does not clip it, and flipped to the
+   opposite side (then the other axis) when the preferred side has no room. ::after uses its element as implicit
+   anchor; .oc-tooltip__content needs a named anchor, scoped to its own .oc-tooltip (anchor-scope). */
+@supports (position-area: top) {
+  .oc-tooltip::after {
+    position: fixed;
+    inset: auto;
+    translate: none;
+    margin: var(--oc-tooltip-gap);
+    position-area: top;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  }
+  .oc-tooltip--bottom::after { position-area: bottom; }
+  .oc-tooltip--left::after { position-area: left; position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; }
+  .oc-tooltip--right::after { position-area: right; position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; }
+}
+
+@supports (position-area: top) and (anchor-scope: all) {
+  .oc-tooltip { anchor-name: --oc-tooltip; anchor-scope: --oc-tooltip; }
+  .oc-tooltip > .oc-tooltip__content {
+    position: fixed;
+    inset: auto;
+    translate: none;
+    margin: var(--oc-tooltip-gap);
+    position-anchor: --oc-tooltip;
+    position-area: top;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  }
+  .oc-tooltip--bottom > .oc-tooltip__content { position-area: bottom; }
+  .oc-tooltip--left > .oc-tooltip__content { position-area: left; position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; }
+  .oc-tooltip--right > .oc-tooltip__content { position-area: right; position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; }
 }
 
 /* ===================================================================
@@ -3502,7 +3585,8 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
         fact/tag/check lists -> site header -> site footer -> reveal on scroll */
 /* Showcase components — modern site/marketing building blocks, pure CSS (no JavaScript).
    Colors: Omnia palette tokens only (OKLCH), via the theme tokens of components.css.
-   Accent per element: --oc-accent-from / --oc-accent-to (or an .oc-accent--* preset). */
+   Accent per element: --oc-accent-from / --oc-accent-to (or an .oc-accent--* preset).
+   Accent as text color: in dark mode lifted to at least OKLCH L 0.72, so a dark custom accent stays readable. */
 
 :root {
   --oc-accent-from: var(--oc-brand-1);
@@ -3545,7 +3629,9 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 .oc-btn--pill { border-radius: 999px; }
 .oc-btn--gradient {
   border-radius: 999px;
-  background: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to));
+  /* border-box: the gradient also runs under the transparent 1px border of .oc-btn; from the padding box it would
+     repeat in that border and show a thin stripe of the other end's color on both sides. */
+  background: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to)) border-box;
   color: var(--color-white-50);
   box-shadow: 0 10px 30px -10px var(--oc-accent-to);
   transition: transform 0.2s var(--oc-ease-out), box-shadow 0.2s;
@@ -3671,7 +3757,7 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   background:
     linear-gradient(135deg, oklch(from var(--oc-accent-from) l c h / 0.3), oklch(from var(--oc-accent-to) l c h / 0.18)),
     var(--oc-card);
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   font-size: calc(var(--oc-tile-size) * 0.45);
   line-height: 1;
 }
@@ -3711,7 +3797,7 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 }
 .oc-product-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-block-end: 0.75rem; }
 .oc-product-card__name { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
-.oc-product-card__tagline { margin: 0; color: var(--oc-accent-from); font-weight: 600; font-size: 0.95rem; }
+.oc-product-card__tagline { margin: 0; color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); font-weight: 600; font-size: 0.95rem; }
 .oc-product-card__summary { margin: 0; color: var(--oc-muted-foreground); font-size: 0.95rem; flex-grow: 1; }
 .oc-product-card__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: 0.75rem; font-weight: 600; font-size: 0.92rem; }
 .oc-product-card__more::after { content: "→"; transition: translate 0.25s var(--oc-ease-out); }
@@ -3733,18 +3819,23 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 .oc-pill--accent {
   border-color: oklch(from var(--oc-accent-from) l c h / 0.45);
   background: oklch(from var(--oc-accent-from) l c h / 0.14);
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
 }
+/* Pulse: the ring starts at --oc-status-dot-pulse-alpha of the accent and grows to --oc-status-dot-pulse-size.
+   --strong starts at the full accent with a wider ring. */
 .oc-status-dot {
+  --oc-status-dot-pulse-alpha: 0.6;
+  --oc-status-dot-pulse-size: 8px;
   inline-size: 0.5rem;
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--oc-accent-from);
   animation: oc-pulse 2s infinite;
 }
+.oc-status-dot--strong { --oc-status-dot-pulse-alpha: 1; --oc-status-dot-pulse-size: 10px; }
 @keyframes oc-pulse {
-  0% { box-shadow: 0 0 0 0 oklch(from var(--oc-accent-from) l c h / 0.6); }
-  70%, 100% { box-shadow: 0 0 0 8px transparent; }
+  0% { box-shadow: 0 0 0 0 oklch(from var(--oc-accent-from) l c h / var(--oc-status-dot-pulse-alpha)); }
+  70%, 100% { box-shadow: 0 0 0 var(--oc-status-dot-pulse-size) transparent; }
 }
 
 /* Stat strip: big numbers in a bordered row (pairs with .oc-counter for counting up) */
@@ -3775,7 +3866,7 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
     var(--oc-card);
 }
 .oc-spotlight__title { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0.5rem; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; }
-.oc-spotlight__tagline { color: var(--oc-accent-from); font-size: 1.2rem; font-weight: 600; }
+.oc-spotlight__tagline { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); font-size: 1.2rem; font-weight: 600; }
 .oc-spotlight__modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
 .oc-spotlight__modules > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-surface); font-size: 0.95rem; }
 
@@ -3850,9 +3941,14 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 }
 @media (max-width: 860px) {
   .oc-site-header__toggle { display: block; }
+  /* The author rule display:flex above beats the UA rule that hides a closed popover. */
+  .oc-site-header__nav[popover]:not(:popover-open) { display: none; }
   .oc-site-header__nav[popover]:popover-open {
     position: fixed;
     inset: 4.5rem 0 auto;
+    /* The UA popover style sizes to fit-content; let inset span the full width. */
+    inline-size: auto;
+    block-size: auto;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -4674,6 +4770,45 @@ a.oc-item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px
   .oc-carousel-viewport::scroll-button(inline-end):disabled { opacity: 0.35; cursor: default; }
 }
 
+/* Loop (.oc-carousel--loop): after the last slide comes the first again. CSS scroll buttons stop at the ends, so this
+   variant has two real buttons (.oc-carousel-prev / .oc-carousel-next) driven by carousel.js; swipe, snap, dots and
+   keyboard stay CSS. Until the script has run (data-oc-loop), the buttons stay hidden and the CSS arrows remain. */
+.oc-carousel-prev,
+.oc-carousel-next {
+  position: absolute;
+  inset-block-start: 50%;
+  translate: 0 -50%;
+  z-index: 1;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  font-size: 1rem;
+  color: var(--oc-foreground);
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px oklch(from var(--color-black-60) l c h / 0.18);
+  cursor: pointer;
+}
+.oc-carousel-prev { inset-inline-start: 0.5rem; }
+.oc-carousel-next { inset-inline-end: 0.5rem; }
+.oc-carousel-prev:hover,
+.oc-carousel-next:hover { background: var(--oc-accent); }
+.oc-carousel-prev:focus-visible,
+.oc-carousel-next:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-carousel--loop:not([data-oc-loop]) :is(.oc-carousel-prev, .oc-carousel-next) { display: none; }
+/* Centered on the viewport, not on the carousel with its dots underneath. */
+@supports (anchor-name: --a) {
+  .oc-carousel-prev,
+  .oc-carousel-next { position-anchor: --oc-carousel; inset-block-start: anchor(center); }
+}
+@supports selector(::scroll-button(inline-start)) {
+  .oc-carousel--loop[data-oc-loop] .oc-carousel-viewport::scroll-button(inline-start),
+  .oc-carousel--loop[data-oc-loop] .oc-carousel-viewport::scroll-button(inline-end) { content: none; }
+}
+
 /* ===================================================================
    RESIZABLE — split panes using the native CSS `resize` property (drag the grip in the corner of the resizable panel).
    A full-length drag handle between panes with keyboard support needs script: wrapper responsibility.
@@ -9346,7 +9481,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 .oc-fact-list--stacked dd { text-align: start; }
 
 /* Values in the accent color. */
-.oc-fact-list--accent dd { color: var(--oc-accent-from); }
+.oc-fact-list--accent dd { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); }
 
 /* Very narrow containers: wrap instead of squeezing label and value together. */
 .oc-fact-list > div { flex-wrap: wrap; }
@@ -9374,7 +9509,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 .oc-link-arrow--external:is(:hover, :focus-visible)::after { translate: 3px -3px; }
 
 /* Colors: accent of the element, or muted text that turns to the foreground color on hover. */
-.oc-link-arrow--accent { color: var(--oc-accent-from); }
+.oc-link-arrow--accent { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); }
 .oc-link-arrow--muted { color: var(--oc-muted-foreground); font-weight: 500; transition: color 0.2s; }
 .oc-link-arrow--muted:hover { color: var(--oc-foreground); }
 
@@ -9473,7 +9608,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 }
 .oc-next-teaser__tagline::after {
   content: "→";
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   transition: translate 0.25s var(--oc-ease-out);
 }
 
@@ -9481,7 +9616,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 .oc-next-teaser--prev .oc-next-teaser__tagline::after { content: none; }
 .oc-next-teaser--prev .oc-next-teaser__tagline::before {
   content: "←";
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   transition: translate 0.25s var(--oc-ease-out);
 }
 
@@ -9654,7 +9789,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 .oc-product-mark--soft {
   border: 1px solid color-mix(in oklch, var(--oc-accent-from) 40%, transparent);
   background: color-mix(in oklch, var(--oc-accent-from) 16%, var(--oc-card));
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   box-shadow: none;
 }
 
@@ -9714,6 +9849,8 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   background:
     radial-gradient(circle at 80% 20%, color-mix(in oklch, var(--color-white-50) 30%, transparent), transparent 45%),
     linear-gradient(135deg, var(--oc-accent-from), var(--oc-accent-to));
+  /* The hover zoom grows down and sideways (clipped by the frame), never up over the title bar. */
+  transform-origin: 50% 0;
   transition: scale 0.5s var(--oc-ease-out);
 }
 
@@ -9730,7 +9867,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   padding: 0.2rem 0.6rem;
   border-radius: 999px;
   background: color-mix(in oklch, var(--oc-accent-from) 14%, transparent);
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   font-size: 0.75rem;
   font-weight: 600;
 }
@@ -9751,7 +9888,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   gap: 0.4rem;
   margin-block-start: auto;
   padding-block-start: 0.6rem;
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   font-size: 0.9rem;
   font-weight: 600;
 }
@@ -9935,7 +10072,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   display: inline-grid;
   place-items: center;
   inline-size: 1.1em;
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
 }
 .oc-stack-list__icon > :is(img, svg) { inline-size: 100%; block-size: auto; }
 
@@ -9977,7 +10114,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 /* Date or year label (use a <time> element when it is a real date).
    Scoped under .oc-timeline so it wins over the showcase rules ".oc-timeline span / strong". */
 .oc-timeline .oc-timeline__date {
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   font-family: var(--oc-font-mono);
   font-size: 0.85rem;
 }