@veluai/velu 0.2.42 → 0.2.44

package/docs/mintlify-migration.md

@@ -163,3 +163,5 @@ Tests cover clean and review-required outputs, source immutability, JSONC/YAML
 references, ignore negation, collisions/junctions, script preservation, AST
 rewrites, assets, endpoint snapshots, generated-project validation, and CLI exit
 codes. No network is needed for the migration tests.
+
+Luma sites migrate to the Kadhir theme. See [Kadhir](kadhir.md) for layout details and verification.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "type": "module",
   "bin": "./dist/cli.js",
   "publishConfig": {

package/runtime/velu-ui/base.css

@@ -107,6 +107,10 @@
   --font-sans: "Google Sans Flex", sans-serif;
   --font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, monospace;
   --font-brand: "Outfit", var(--font-sans);
+  /* Brand wordmark (header site name, footer credits) — always
+     Google Sans Flex on every theme for a consistent Velu identity,
+     even when a project overrides --font-sans. */
+  --font-wordmark: "Google Sans Flex", var(--font-sans);
   font-family: var(--font-sans);
 
   /* Approx height of the docs PageHeader (used as the offset for sticky

package/runtime/velu-ui/components/ApiReferencePage.jsx

@@ -78,7 +78,7 @@ export default function ApiReferencePage({ operation, samples = [], apiOperation
         className="velu-api-page__tryit"
       />
 
-      {(preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) && <div className="velu-api-page__inline-samples"><ApiSamples idPrefix="inline-" samples={samples} responses={operation.responses} preset={preset} title={operation.title} /></div>}
+      {(preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(preset)) && <div className="velu-api-page__inline-samples"><ApiSamples idPrefix="inline-" samples={samples} responses={operation.responses} preset={preset} title={operation.title} /></div>}
       {children && <div className="velu-api-page__custom-content">{children}</div>}
 
       {/* Authorizations */}
@@ -114,7 +114,7 @@ export default function ApiReferencePage({ operation, samples = [], apiOperation
       {operation.body?.fields?.length > 0 && (
         <api-section class="velu-api-page__section">
           <h2 data-component="api-section-heading">Body</h2>
-          {['thulir', 'aalam', 'nila'].includes(preset) && operation.body.contentType && <span className="velu-api-body-type">{operation.body.contentType}</span>}
+          {['thulir', 'aalam', 'nila', 'kadhir'].includes(preset) && operation.body.contentType && <span className="velu-api-body-type">{operation.body.contentType}</span>}
           {operation.body.fields.map((f, i) => (
             <Field key={i} name={f.name} type={f.type} required={f.required}>
               {f.description}
@@ -180,10 +180,10 @@ function EnumHint({ values }) {
 }
 
 function ResponseSections({ responses, preset }) {
-  if (preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) return <div className="velu-vepa-responses">{responses.map((r, i) => <section key={i}>
+  if (preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(preset)) return <div className="velu-vepa-responses">{responses.map((r, i) => <section key={i}>
     <div className="velu-vepa-responses__status">{r.status}{r.contentType && ` · ${r.contentType}`}</div>
     {r.description && <p>{r.description}</p>}
-    {(['thulir', 'aalam', 'nila'].includes(preset) ? [...(r.fields || [])].sort((a, b) => Number(Boolean(b.required)) - Number(Boolean(a.required))) : r.fields)?.map((f, j) => <Field key={f.name || j} name={f.name} type={f.type} required={f.required}>{f.description}</Field>)}
+    {(['thulir', 'aalam', 'nila', 'kadhir'].includes(preset) ? [...(r.fields || [])].sort((a, b) => Number(Boolean(b.required)) - Number(Boolean(a.required))) : r.fields)?.map((f, j) => <Field key={f.name || j} name={f.name} type={f.type} required={f.required}>{f.description}</Field>)}
   </section>)}</div>;
   return (
     <AccordionGroup className="velu-api-resp">

package/runtime/velu-ui/components/ApiSamples.jsx

@@ -14,7 +14,7 @@ export default function ApiSamples({ samples = [], responses = [], preset, title
   const sample = samples.find((s) => s.key === selected) || samples[0];
   // Mint displays JSON request bodies across lines. Keep custom/non-JSON
   // snippets intact, and change whitespace only in a valid JSON body.
-  const sampleCode = ['thulir', 'aalam', 'nila'].includes(preset) && sample?.key === 'curl'
+  const sampleCode = ['thulir', 'aalam', 'nila', 'kadhir'].includes(preset) && sample?.key === 'curl'
     ? sample.code.replace(/(--data )'([\s\S]*)'$/, (original, prefix, body) => {
       try { return `${prefix}'\n${JSON.stringify(JSON.parse(body), null, 2)}\n'`; }
       catch { return original; }
@@ -22,7 +22,7 @@ export default function ApiSamples({ samples = [], responses = [], preset, title
   const withExample = responses.filter((r) => r.example != null);
   return (
     <div className="velu-api-samples">
-      {sample && (preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) ? <section id={idPrefix + 'request-example'} className="velu-vepa-request">
+      {sample && (preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(preset)) ? <section id={idPrefix + 'request-example'} className="velu-vepa-request">
         <div className="velu-vepa-request__header"><span>{title}</span><select aria-label="Request example language" value={sample.key} onChange={(e) => setSelected(e.target.value)}>{samples.map((s) => <option key={s.key} value={s.key}>{s.label}</option>)}</select></div>
         <CodeBlock language={sample.language}>{sampleCode}</CodeBlock>
       </section> : samples.length > 0 && (

package/runtime/velu-ui/components/Card.jsx

@@ -16,13 +16,19 @@ import Switcher from '../primitives/Switcher.jsx';
  * Variants (combinable):
  *  - basic: icon (accent, --f-h2) + title (--f-h4) + body
  *  - `horizontal`: icon vertically centered on the left, title+body right
- *  - `img`: image fills the top, clipped to the radius
+ *  - `img`: image fills the top, clipped to the radius. Covers both themes,
+ *    unless `imgLight`/`imgDark` override per theme.
+ *  - `imgLight` / `imgDark`: per-theme image. When the effective light and
+ *    dark sources differ, both render and CSS shows the right one per
+ *    `[data-theme]` (same pattern as Logo's light/dark swap). When only one
+ *    of the three is present, it covers both themes.
  *  - `cta`: { label, href } → the single clickable "Click Here ›" link
  *
  * `icon` is a lucide id string (shared resolveIcon).
  *
  * @param {{ title?: React.ReactNode, icon?: string, horizontal?: boolean,
- *   img?: string, imgAlt?: string, href?: string,
+ *   img?: string, imgAlt?: string, imgLight?: string, imgDark?: string,
+ *   href?: string,
  *   cta?: {label: React.ReactNode, href: string},
  *   children?: React.ReactNode, className?: string }} props
  */
@@ -33,6 +39,8 @@ export function Card({
   horizontal = false,
   img,
   imgAlt = '',
+  imgLight,
+  imgDark,
   cta,
   href,
   children,
@@ -74,11 +82,40 @@ export function Card({
   return (
     <card className={cls} {...rest}>
       {href && !cta && <a className="velu-card__link" href={href} aria-label={typeof title === 'string' ? title : 'Read more'} />}
-      {img && (
-        <div className="velu-card__media" data-component-part="card-image">
-          <img src={img} alt={imgAlt} loading="lazy" />
-        </div>
-      )}
+      {(() => {
+        const lightSrc = imgLight ?? img;
+        const darkSrc = imgDark ?? img;
+        if (lightSrc && darkSrc && lightSrc !== darkSrc) {
+          return (
+            <div className="velu-card__media" data-component-part="card-image">
+              <img
+                className="velu-card__img velu-card__img--light"
+                src={lightSrc}
+                alt={imgAlt}
+                loading="lazy"
+              />
+              <img
+                className="velu-card__img velu-card__img--dark"
+                src={darkSrc}
+                alt=""
+                aria-hidden="true"
+                loading="lazy"
+              />
+            </div>
+          );
+        }
+        const singleSrc = imgLight ?? imgDark ?? img;
+        return singleSrc ? (
+          <div className="velu-card__media" data-component-part="card-image">
+            <img
+              className="velu-card__img"
+              src={singleSrc}
+              alt={imgAlt}
+              loading="lazy"
+            />
+          </div>
+        ) : null;
+      })()}
 
       <div className="velu-card__body" data-component-part="card-content-container">
         {horizontal ? (
@@ -117,6 +154,11 @@ export function CardGroup({
   className = '',
   ...rest
 }) {
+  // Grid column count follows the child count (capped by limit) so a group
+  // never renders emptier than it is: 2 cards fill 2 columns instead of
+  // leaving a third one blank. Mintlify's CardGroup defaults to 2 columns.
+  const count = React.Children.count(children);
+  const cols = Math.max(1, Math.min(4, Math.min(Number(limit) || 2, count || 1)));
   return (
     <Switcher
       as="card-group"
@@ -124,7 +166,7 @@ export function CardGroup({
       space={space}
       min={min}
       limit={limit}
-      style={{ '--vepa-columns': Math.max(1, Math.min(4, Number(limit) || 2)) }}
+      style={{ '--vepa-columns': cols }}
       {...rest}
     >
       {children}

package/runtime/velu-ui/components/PageFooter.jsx

@@ -57,7 +57,7 @@ export default function PageFooter({
   ...rest
 }) {
   const Link = linkComponent;
-  if (preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset)) {
+  if (preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(preset)) {
     return <VepaFooter preset={preset} brand={brand} columns={columns} socials={socials} linkComponent={Link} />;
   }
   const brandLabel = brand?.label ?? 'Velu';

package/runtime/velu-ui/components/PageHeader.jsx

@@ -4,6 +4,7 @@ import resolveIcon from '../lib/resolveIcon.jsx';
 import Stack from '../primitives/Stack.jsx';
 import Cluster from '../primitives/Cluster.jsx';
 import Logo from './Logo.jsx';
+import VeluMarkArt from '../lib/velu-mark.jsx';
 
 /**
  * PageHeader — top of the docs site.
@@ -51,22 +52,11 @@ import Logo from './Logo.jsx';
 /* Velu brand mark. Color: --accent-color via the wrapping wordmark
    span; the path uses currentColor. Exported so consumers (e.g. the
    mobile nav drawer) can render the mark alongside its own chrome.
-   Only the default theme shows it — the vepa / thulir / aalam / nila
-   presets hide it via CSS (text-only branding). */
-export function VeluMark() {
+   Only the default theme shows it — the vepa / thulir / aalam / nila /
+   kadhir presets hide it via CSS (text-only branding). */
+export function VeluMark({ className = '', ...rest }) {
   return (
-    <svg
-      className="velu-header__mark"
-      viewBox="0 0 32 24"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.6564 14.1534C29.5739 14.5616 29.3507 14.9288 29.0248 15.1926C28.699 15.4565 28.2907 15.6007 27.8694 15.6006H21.3702C20.5341 15.6006 19.8051 16.1627 19.6031 16.9638L18.1671 22.6368C18.0685 23.0263 17.8409 23.372 17.5205 23.619C17.2002 23.866 16.8054 24.0001 16.399 24H10.4378C10.1609 24.0001 9.88759 23.9378 9.63868 23.8179C9.38976 23.6979 9.1718 23.5235 9.00135 23.3079C8.8309 23.0923 8.71245 22.8412 8.65499 22.5736C8.59754 22.306 8.6026 22.029 8.66978 21.7636L10.1888 15.7636C10.2874 15.3743 10.5148 15.0287 10.835 14.7817C11.1551 14.5347 11.5496 14.4005 11.9559 14.4004H18.3931C19.2621 14.4004 20.0101 13.7949 20.1801 12.9532L22.3882 2.04774C22.4705 1.63945 22.6936 1.27198 23.0195 1.00793C23.3453 0.74388 23.7538 0.599578 24.1752 0.599605H30.1774C30.4471 0.599529 30.7134 0.658587 30.9572 0.772515C31.201 0.886444 31.4161 1.0524 31.5871 1.25842C31.758 1.46443 31.8806 1.70535 31.9458 1.96383C32.0111 2.2223 32.0175 2.49185 31.9645 2.75305L29.6564 14.1534ZM9.61081 13.5538C9.52825 13.962 9.30507 14.3292 8.97924 14.593C8.65341 14.857 8.24508 15.0011 7.82375 15.001H1.82257C1.55289 15.0011 1.28656 14.942 1.04279 14.8281C0.79902 14.7141 0.583892 14.5482 0.412928 14.3422C0.241965 14.1362 0.11943 13.8952 0.0541639 13.6368C-0.0111017 13.3783 -0.0174699 13.1087 0.0355186 12.8475L2.34359 1.44715C2.42614 1.03904 2.64933 0.671798 2.97516 0.407944C3.30099 0.144089 3.70932 -7.24082e-05 4.13064 7.25899e-08H10.1318C10.4015 -7.55792e-05 10.6678 0.0589818 10.9116 0.172911C11.1554 0.286839 11.3705 0.453799 11.5415 0.659813C11.7124 0.864828 11.835 1.10576 11.9002 1.36423C11.9655 1.62269 11.9719 1.89225 11.9189 2.15344L9.61081 13.5538Z"
-      />
-    </svg>
+    <VeluMarkArt className={`velu-header__mark ${className}`.trim()} {...rest} />
   );
 }
 
@@ -277,11 +267,15 @@ export default function PageHeader({
     Boolean(tabsTrailing) ||
     Boolean(onMenuClick);
 
-  // A configured logo replaces the mark + wordmark entirely (Mintlify-style).
+  // A configured logo renders alongside the wordmark (Mintlify-style
+  // headers show mark + name together).
   const brandBlock = (
     <Cluster space="var(--s-3)" align="center" className="velu-header__brand" style={{ flexWrap: 'nowrap' }}>
       {brand?.logo ? (
-        <Logo logo={brand.logo} alt={brandLabel} />
+        <>
+          <Logo logo={brand.logo} alt="" />
+          <span className="velu-header__wordmark">{brandLabel}</span>
+        </>
       ) : (
         <>
           <VeluMark />
@@ -294,7 +288,7 @@ export default function PageHeader({
   return (
     <Stack
       as="header"
-      space={preset === 'vepa' || ['thulir', 'aalam', 'nila'].includes(preset) ? '0px' : 'var(--s0)'}
+      space={preset === 'vepa' || ['thulir', 'aalam', 'nila', 'kadhir'].includes(preset) ? '0px' : 'var(--s0)'}
       data-has-tabs={tabs.length > 0 ? 'true' : 'false'}
       className={`velu-header${scrolled ? ' velu-header--scrolled' : ''}${
         showTabsRow ? '' : ' velu-header--no-tabs'

package/runtime/velu-ui/components/PoweredBy.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import VeluMark from '../lib/velu-mark.jsx';
 
 /**
  * PoweredBy — "Powered by Velu" badge. Right-aligned, sits above the
@@ -23,6 +24,7 @@ export default function PoweredBy({
       >
         <span className="velu-powered-by__label">Powered by</span>
         <span className="velu-powered-by__brand">
+          <VeluMark className="velu-powered-by__mark" />
           <span className="velu-powered-by__wordmark">Velu</span>
         </span>
       </a>

package/runtime/velu-ui/components/VepaFooter.jsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import Logo from './Logo.jsx';
+import VeluMark from '../lib/velu-mark.jsx';
 import SocialLinks from './SocialLinks.jsx';
 import ThemePreferenceMenu from './ThemePreferenceMenu.jsx';
 
 export default function VepaFooter({ preset = 'vepa', brand, columns = [], socials = [], linkComponent: Link = 'a' }) {
   const single = columns.length === 1;
   const completeHeadings = columns.every((c) => c.title);
-  const root = ['thulir', 'aalam', 'nila'].includes(preset) ? 'thulir-footer' : 'vepa-footer';
+  const root = ['thulir', 'aalam', 'nila', 'kadhir'].includes(preset) ? 'thulir-footer' : 'vepa-footer';
   return <footer id="footer" className={root} data-layout={columns.length <= 3 ? 'compact' : 'expanded'} data-single={single} data-headings={completeHeadings}>
     <div className={`${root}__inner`}>
       <div className={`${root}__top`}>
         <div className={`${root}__brand-column`}>
           <Link href={brand?.href || '/'} className={`${root}__brand`}>
-            {brand?.logo ? <Logo logo={brand.logo} alt={brand.label} /> : <span>{brand?.label || 'Velu'}</span>}
+            {brand?.logo ? <><Logo logo={brand.logo} alt="" /><span>{brand?.label || 'Velu'}</span></> : <span>{brand?.label || 'Velu'}</span>}
           </Link>
-          {['thulir', 'aalam', 'nila'].includes(preset) && <SocialLinks socials={socials} className="thulir-footer__brand-mobile-socials" />}
+          {['thulir', 'aalam', 'nila', 'kadhir'].includes(preset) && <SocialLinks socials={socials} className="thulir-footer__brand-mobile-socials" />}
           <SocialLinks socials={socials} className={`${root}__brand-socials`} />
         </div>
         <div className={`${root}__columns`} style={{ '--footer-columns': columns.length }}>
@@ -34,7 +35,7 @@ export default function VepaFooter({ preset = 'vepa', brand, columns = [], socia
       {!completeHeadings && <SocialLinks socials={socials} className={`${root}__mobile-socials`} />}
       <div className={`${root}__divider`} />
       <div className={`${root}__bottom`}>
-        <a href="https://veludocs.com" target="_blank" rel="noreferrer" className={`${root}__powered`}>Powered by <strong>Velu</strong></a>
+        <a href="https://veludocs.com" target="_blank" rel="noreferrer" className={`${root}__powered`}>Powered by <VeluMark className={`${root}__powered-mark`} /><strong>Velu</strong></a>
         <ThemePreferenceMenu inline />
       </div>
     </div>

package/runtime/velu-ui/components/api-page.css

@@ -164,7 +164,7 @@
   justify-content: center;
   padding: clamp(var(--s1), 6vh, var(--s5)) var(--s2);
   overflow-y: auto;
-  background: color-mix(in srgb, var(--page-bg) 35%, rgba(0, 0, 0, 0.55));
+  background: rgb(from var(--page-bg) r g b / 40%), rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(6px) saturate(1.1);
   -webkit-backdrop-filter: blur(6px) saturate(1.1);
   animation: velu-api-modal-in 140ms ease-out;
@@ -204,8 +204,8 @@
   border-radius: var(--radius-xs, 4px);
   text-transform: uppercase;
 }
-.velu-sidebar__method.velu-method-badge--get { color: var(--get-pill-color); background: color-mix(in srgb, var(--get-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--post { color: var(--post-pill-color); background: color-mix(in srgb, var(--post-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--put { color: var(--put-pill-color); background: color-mix(in srgb, var(--put-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--patch { color: var(--patch-pill-color); background: color-mix(in srgb, var(--patch-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--delete { color: var(--delete-pill-color); background: color-mix(in srgb, var(--delete-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--get { color: var(--get-pill-color); background: rgb(from var(--get-pill-color) r g b / 14%); }
+.velu-sidebar__method.velu-method-badge--post { color: var(--post-pill-color); background: rgb(from var(--post-pill-color) r g b / 14%); }
+.velu-sidebar__method.velu-method-badge--put { color: var(--put-pill-color); background: rgb(from var(--put-pill-color) r g b / 14%); }
+.velu-sidebar__method.velu-method-badge--patch { color: var(--patch-pill-color); background: rgb(from var(--patch-pill-color) r g b / 14%); }
+.velu-sidebar__method.velu-method-badge--delete { color: var(--delete-pill-color); background: rgb(from var(--delete-pill-color) r g b / 14%); }

package/runtime/velu-ui/components/api.css

@@ -194,7 +194,7 @@
   cursor: pointer;
 }
 .velu-try-it__cta:hover {
-  background: color-mix(in srgb, var(--method-cta, var(--accent-color)) 88%, #000);
+  background: rgb(from var(--method-cta, var(--accent-color)) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 .velu-try-it__cta:disabled {
   cursor: default;
@@ -528,7 +528,7 @@
   align-items: center;
   padding-block: 0;
   padding-inline: var(--s-3);
-  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  background: rgb(from var(--accent-color) r g b / 18%);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   font-size: var(--f-h6);

package/runtime/velu-ui/components/ask-bar.css

@@ -43,7 +43,7 @@
   border-color: var(--accent-color);
   box-shadow:
     0 0 0 var(--border-width) var(--accent-color),
-    0 0 var(--s1) color-mix(in srgb, var(--accent-color) 40%, transparent);
+    0 0 var(--s1) rgb(from var(--accent-color) r g b / 40%);
 }
 
 /* Multi-line input. padding-inline-end clears the send button so typed
@@ -87,7 +87,7 @@
   cursor: pointer;
 }
 .velu-ask-bar__send:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+  background: rgb(from var(--accent-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 .velu-ask-bar__send:focus-visible {
   outline: var(--border-width) solid var(--text-color);
@@ -97,7 +97,7 @@
    palette) so the button reads as "not yet ready" rather than a
    different control entirely. No pointer events / hover affordance. */
 .velu-ask-bar__send:disabled {
-  background: color-mix(in srgb, var(--accent-color) 35%, transparent);
+  background: rgb(from var(--accent-color) r g b / 35%);
   cursor: not-allowed;
   pointer-events: none;
 }

package/runtime/velu-ui/components/card.css

@@ -46,6 +46,7 @@
   flex-direction: column;
   gap: var(--s-2);
   padding: var(--s0) var(--s3);
+  flex: 1; /* fill the card so a CTA can pin to the bottom across a row */
 }
 .velu-card--horizontal .velu-card__body {
   flex-direction: row;
@@ -81,7 +82,8 @@
   display: inline-flex;
   align-items: center;
   gap: var(--s-3);
-  margin-block-start: var(--s-2);
+  margin-block-start: auto; /* pin to the card bottom so CTAs line up across a row */
+  padding-block-start: var(--s-2); /* keep the text gap when there is no free space */
   font-weight: 500;
   color: var(--text-color);
   text-decoration: none;
@@ -106,6 +108,19 @@
   block-size: auto;
   object-fit: cover;
 }
+/* Per-theme swap (same pattern as Logo): light image by default, `img` under
+   [data-theme=dark]. `display` (not opacity) so the inactive one leaves the
+   a11y tree too. A lone `img` (no `imgLight`) has neither modifier and always
+   shows. */
+.velu-card__media .velu-card__img--dark {
+  display: none;
+}
+[data-theme='dark'] .velu-card__media .velu-card__img--light {
+  display: none;
+}
+[data-theme='dark'] .velu-card__media .velu-card__img--dark {
+  display: block;
+}
 
 /* CardGroup layout is the Switcher primitive (composed in Card.jsx). Its
    threshold is computed count-aware in Card.jsx so the row flips to a full

package/runtime/velu-ui/components/changelog-filters.css

@@ -26,18 +26,18 @@
   font-size: var(--f-h6);
   font-weight: var(--weight-medium);
   color: var(--text-color);
-  background: color-mix(in srgb, var(--muted-color) 14%, transparent);
+  background: rgb(from var(--muted-color) r g b / 14%);
   border: var(--border-width) solid transparent;
   transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
 
 .velu-changelog-filter:hover {
-  border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
-  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+  border-color: rgb(from var(--accent-color) r g b / 50%);
+  background: rgb(from var(--accent-color) r g b / 8%);
 }
 
 .velu-changelog-filter--active {
   color: var(--accent-color);
-  border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  border-color: rgb(from var(--accent-color) r g b / 55%);
+  background: rgb(from var(--accent-color) r g b / 12%);
 }

package/runtime/velu-ui/components/chatbot.css

@@ -215,7 +215,7 @@
   color: var(--text-color);
 }
 .velu-chatbot__iconbtn.is-active {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  background: rgb(from var(--accent-color) r g b / 12%);
   color: var(--accent-color);
 }
 
@@ -322,7 +322,7 @@
 }
 .velu-chatbot__suggest:hover {
   border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+  background: rgb(from var(--accent-color) r g b / 6%);
 }
 .velu-chatbot__suggest svg {
   flex: none;
@@ -497,7 +497,7 @@
   font-size: var(--f-h7);
   font-weight: var(--weight-medium);
   color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  background: rgb(from var(--accent-color) r g b / 14%);
   border: var(--border-width) solid transparent;
   border-radius: var(--radius-sm);
   text-decoration: none;
@@ -552,7 +552,7 @@
   font-size: var(--f-h7);
   font-weight: var(--weight-medium);
   color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  background: rgb(from var(--accent-color) r g b / 14%);
   border-radius: var(--radius-sm);
 }
 .velu-chatbot__source-meta {
@@ -635,7 +635,7 @@
 }
 /* Chosen thumb (up/down) — accent tint so the click is clearly registered. */
 .velu-chatbot__msg-action.is-active {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  background: rgb(from var(--accent-color) r g b / 12%);
   color: var(--accent-color);
 }
 

package/runtime/velu-ui/components/code-block.css

@@ -128,7 +128,7 @@
   inline-size: 1.75em;
   block-size: 1.75em;
   padding: 0;
-  background: color-mix(in srgb, var(--surface-color) 75%, transparent);
+  background: rgb(from var(--surface-color) r g b / 75%);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   border: var(--border-width) solid var(--border-color);
@@ -160,7 +160,7 @@
    the code text. The bg is a subtle accent tint — works in both
    light + dark via [data-theme] color-mix. */
 .velu-code-block__line--highlight {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  background: rgb(from var(--accent-color) r g b / 12%);
   box-shadow: inset 2px 0 0 0 var(--accent-color);
   margin-inline: calc(var(--s0) * -1);
   padding-inline: var(--s0);

package/runtime/velu-ui/components/context-menu.css

@@ -51,7 +51,7 @@
 .velu-context-menu__rss:hover {
   color: var(--accent-color);
   border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+  background: rgb(from var(--accent-color) r g b / 8%);
 }
 
 /* The split button: "Copy Page" + a divider + a chevron toggle, joined as one

package/runtime/velu-ui/components/docs-layout.css

@@ -194,12 +194,12 @@
   scrollbar-width: thin;
   /* Firefox: thumb then track. */
   scrollbar-color: var(--muted-color)
-    color-mix(in srgb, var(--muted-color) 28%, var(--page-bg));
+    rgb(from var(--muted-color) r g b / 28%);
   /* Chromium overlay scrollbars often ignore ::-webkit-scrollbar-track,
      so paint a permanent rail on the inline-end edge as well. */
   background-image: linear-gradient(
     to left,
-    color-mix(in srgb, var(--muted-color) 28%, var(--page-bg)) 10px,
+    rgb(from var(--muted-color) r g b / 28%) 10px,
     transparent 10px
   );
 }
@@ -207,7 +207,7 @@
   inline-size: 10px;
 }
 .velu-docs-nav-scroll::-webkit-scrollbar-track {
-  background: color-mix(in srgb, var(--muted-color) 28%, var(--page-bg));
+  background: rgb(from var(--muted-color) r g b / 28%);
   border-radius: 0;
 }
 .velu-docs-nav-scroll::-webkit-scrollbar-thumb {

package/runtime/velu-ui/components/field.css

@@ -46,7 +46,7 @@
   align-items: center;
   padding-block: 0;
   padding-inline: var(--s-3);
-  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  background: rgb(from var(--accent-color) r g b / 18%);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
   font-size: var(--f-h6);

package/runtime/velu-ui/components/image.css

@@ -205,7 +205,7 @@
   inline-size: 15%;
   block-size: 0.5em;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--text-color) 14%, transparent);
+  background: rgb(from var(--text-color) r g b / 14%);
 }
 
 /* ── Device-frame variant ───────────────────────────────────────────────── */

package/runtime/velu-ui/components/not-found.css

@@ -86,7 +86,7 @@
   font-weight: var(--weight-bold);
 }
 .velu-404__btn--primary:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+  background: rgb(from var(--accent-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 .velu-404__btn-ic {
   display: inline-flex;

package/runtime/velu-ui/components/page-feedback.css

@@ -45,7 +45,7 @@
    The vote stays changeable: clicking the other button moves it here. */
 .velu-feedback__btn--chosen {
   border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  background: rgb(from var(--accent-color) r g b / 10%);
   color: var(--accent-color);
 }
 .velu-feedback__btn--chosen svg {
@@ -168,7 +168,7 @@
   color: #fff;
 }
 .velu-feedback__action--submit:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+  background: rgb(from var(--accent-color) calc(r * 0.88) calc(g * 0.88) calc(b * 0.88));
 }
 
 /* ── Submitted confirmation — sits below the divider line ───────────── */
@@ -214,13 +214,13 @@
   color: var(--accent-color);
 }
 .velu-feedback__heart--1 {
-  color: color-mix(in srgb, var(--accent-color) 60%, #fff);
+  color: rgb(from var(--accent-color) calc(r * 0.6 + 255 * 0.4) calc(g * 0.6 + 255 * 0.4) calc(b * 0.6 + 255 * 0.4));
 }
 .velu-feedback__heart--2 {
-  color: color-mix(in srgb, var(--accent-color) 55%, var(--text-color));
+  color: rgb(from var(--accent-color) calc(r * 0.55) calc(g * 0.55) calc(b * 0.55));
 }
 .velu-feedback__heart--3 {
-  color: color-mix(in srgb, var(--accent-color) 82%, #fff);
+  color: rgb(from var(--accent-color) calc(r * 0.82 + 255 * 0.18) calc(g * 0.82 + 255 * 0.18) calc(b * 0.82 + 255 * 0.18));
 }
 /* Register the per-heart custom props so they're typed + animatable inside the
    keyframes. WebKit (newer iOS Safari) won't interpolate UNregistered custom

package/runtime/velu-ui/components/page-footer.css

@@ -58,7 +58,7 @@
 }
 /* Outfit Light, per the brand spec — falls back to --font-sans. */
 .velu-footer__wordmark {
-  font-family: var(--font-brand);
+  font-family: var(--font-wordmark);
   font-weight: var(--weight-light);
   font-size: var(--f-h4);
   line-height: 1;