@refrakt-md/lumina 0.11.3 → 0.14.0

package/dist/tokens.js

@@ -0,0 +1,178 @@
+/**
+ * Lumina's design tokens — the new **neutral default** palette landing in
+ * v0.14.0 per SPEC-051. Warm-neutral surface, monochrome primary, the
+ * "quiet spectrum walk" syntax palette (teal / violet / rust / ochre /
+ * sage), and the four muted-earthy status colours.
+ *
+ * This is the *source of truth* for Lumina's runtime CSS values; the
+ * hand-authored `tokens/base.css` and `tokens/dark.css` mirror it
+ * verbatim and a coverage test keeps the two in lockstep.
+ *
+ * Sites that want the previous cream-and-navy appearance opt into the
+ * `tideline` preset shipping alongside this default (see
+ * `@refrakt-md/lumina/presets/tideline` once Chunk 7 lands).
+ *
+ * Sites that want Japanese-garden syntax colours on top of this neutral
+ * chrome opt into the `niwaki` preset (Chunk 7).
+ */
+export const luminaTokens = {
+    font: {
+        sans: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+        mono: "'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', monospace",
+    },
+    color: {
+        text: '#1c1a17',
+        muted: '#6b6661',
+        border: '#e2e0dd',
+        bg: '#f5f4f1',
+        primary: '#1c1a17',
+        'primary-hover': '#3a342d',
+        // Warm-neutral axis from near-bg to near-text, eleven hand-picked stops.
+        // Several stops intentionally overlap with semantic tokens (surface.base,
+        // border, primary-hover, text) — that's normal; palette steps double as
+        // the implementations of the named tokens at their lightness level.
+        'primary-scale': {
+            '50': '#fbfaf7',
+            '100': '#f5f4f1',
+            '200': '#ecebe8',
+            '300': '#e2e0dd',
+            '400': '#bfbab2',
+            '500': '#94908a',
+            '600': '#76716a',
+            '700': '#5a564f',
+            '800': '#3a342d',
+            '900': '#2a2622',
+            '950': '#1c1a17',
+        },
+        surface: {
+            base: '#fbfaf7',
+            hover: '#ecebe8',
+            active: '#e2e0dd',
+            raised: '#ffffff',
+        },
+        // Muted earthy status colours — same saturation/lightness band across all
+        // four so no sentiment is more aggressive than another. Per SPEC-051.
+        info: { base: '#34547a', bg: '#e8edf4', border: '#c5d2e0' },
+        warning: { base: '#9c5a18', bg: '#f5ebd9', border: '#e0c9a3' },
+        danger: { base: '#a83232', bg: '#f5e0e0', border: '#e0b8b8' },
+        success: { base: '#2d6a3e', bg: '#e0eee4', border: '#b8d4be' },
+        code: {
+            bg: '#ebeae8',
+            text: '#1c1a17',
+            // Mapped to --rf-color-code-inline-bg per the contract.
+            // `--rf-color-inline-code-bg` (legacy variable name) is emitted as an
+            // alias via `extra` below for downstream CSS that still reads it.
+            'inline-bg': '#e6e5e3',
+        },
+    },
+    radius: {
+        sm: '6px',
+        md: '10px',
+        lg: '16px',
+        full: '9999px',
+    },
+    spacing: {
+        xs: '0.25rem',
+        sm: '0.5rem',
+        md: '1.5rem',
+        lg: '2rem',
+        xl: '3rem',
+        '2xl': '4rem',
+        section: {
+            base: '4rem',
+            tight: '1.5rem',
+            loose: '6rem',
+            breathe: '8rem',
+        },
+    },
+    inset: {
+        flush: '0',
+        tight: '1rem',
+        loose: '4rem',
+        breathe: '8rem',
+    },
+    shadow: {
+        xs: '0 1px 2px rgba(0,0,0,0.04)',
+        sm: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
+        md: '0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04)',
+        lg: '0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04)',
+    },
+    // The "quiet spectrum walk": teal → violet → rust → ochre — cool, cool,
+    // warm, warm. Spectrum-adjacent without shouting. `constant` covers
+    // numeric literals + boolean/null/Symbol (Shiki paints them all from
+    // one slot).
+    syntax: {
+        keyword: '#2a5c63', // deep teal
+        function: '#4a3b6e', // slate violet
+        string: '#8a3a3a', // warm rust
+        constant: '#876327', // antique ochre
+        comment: '#8a857d', // warm muted (italic via rune CSS)
+        punctuation: '#6b6661', // tonal — same as color.muted
+        variable: '#1c1a17', // tonal — same as color.text
+    },
+    modes: {
+        dark: {
+            color: {
+                text: '#f6f4ef',
+                muted: '#94908a',
+                border: '#2a2825',
+                bg: '#1a1a17',
+                primary: '#f6f4ef',
+                'primary-hover': '#d4cfc5',
+                surface: {
+                    base: '#211f1c',
+                    hover: '#2a2825',
+                    active: '#353330',
+                    raised: '#292723',
+                },
+                info: { base: '#9bb4c7', bg: '#1f2530', border: '#3d4655' },
+                warning: { base: '#d4a868', bg: '#2a2519', border: '#4a3f2a' },
+                danger: { base: '#d48888', bg: '#2a1818', border: '#4a2a2a' },
+                success: { base: '#7eb398', bg: '#1a2a1f', border: '#2a4a35' },
+                code: {
+                    bg: '#222220',
+                    text: '#f6f4ef',
+                    'inline-bg': '#2b2b29',
+                },
+            },
+            shadow: {
+                xs: '0 1px 2px rgba(0,0,0,0.3)',
+                sm: '0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3)',
+                md: '0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3)',
+                lg: '0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3)',
+            },
+            // Dark-mode syntax — lifted and slightly desaturated from light values
+            // so they read against the warm-near-black surface without shouting.
+            syntax: {
+                keyword: '#7eb6bc', // light teal
+                function: '#a89bc7', // light slate violet
+                string: '#c79a9a', // light rust
+                constant: '#d4b07e', // light antique ochre
+                comment: '#6b6661', // warm muted (italic)
+                punctuation: '#94908a', // = dark color.muted
+                variable: '#f6f4ef', // = dark color.text
+            },
+            // Legacy alias — kept until the rename is fully rolled out. All the
+            // `rf-syntax-*` Shiki aliases (foreground/background/token-*) are
+            // auto-derived from the `syntax.*` and `color.{text,code.bg}` values
+            // above by the generator.
+            extra: {
+                'rf-color-inline-code-bg': '#2b2b29',
+            },
+        },
+    },
+    /** Lumina-specific tokens outside the universal contract. `rf-color-
+     *  inline-code-bg` is the legacy variable name for what the contract
+     *  calls `color.code.inline-bg` (→ `--rf-color-code-inline-bg`).
+     *  Aliased here so downstream CSS that reads the old name keeps
+     *  working through v0.14.0; rename target is a future cleanup.
+     *
+     *  The Shiki aliases (`--rf-syntax-foreground`, `--rf-syntax-background`,
+     *  and `--rf-syntax-token-*`) are auto-derived by the generator from
+     *  `color.text`, `color.code.bg`, and `syntax.*` — no need to repeat
+     *  them here. */
+    extra: {
+        'rf-color-inline-code-bg': '#e6e5e3',
+    },
+};
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/dist/transform.d.ts

@@ -2,6 +2,11 @@ export { createTransform } from '@refrakt-md/transform';
 export type { ThemeConfig, RuneConfig, SerializedTag, RendererNode } from '@refrakt-md/transform';
 /** Lumina theme configuration — rune-to-BEM-block mappings, modifier sources, structural injection */
 export { luminaConfig } from './config.js';
+/** Lumina design tokens — the typed {@link ThemeTokensConfig} that drives the
+ *  `--rf-*` CSS custom properties. Adapters consume this when composing
+ *  site-level token overrides; see `@refrakt-md/transform`'s
+ *  `mergeThemeTokensConfigs` and `generateThemeStylesheet`. */
+export { luminaTokens } from './tokens.js';
 /** Lumina identity transform — adds BEM classes, consumes meta tags, enhances structure */
 export declare const identityTransform: (tree: import("@refrakt-md/transform").RendererNode) => import("@refrakt-md/transform").RendererNode;
 //# sourceMappingURL=transform.d.ts.map

package/dist/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAElG,sGAAsG;AACtG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,2FAA2F;AAC3F,eAAO,MAAM,iBAAiB,sGAAgC,CAAC"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAElG,sGAAsG;AACtG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C;;;+DAG+D;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,2FAA2F;AAC3F,eAAO,MAAM,iBAAiB,sGAAgC,CAAC"}

package/dist/transform.js

@@ -4,6 +4,11 @@ import { luminaConfig } from './config.js';
 export { createTransform } from '@refrakt-md/transform';
 /** Lumina theme configuration — rune-to-BEM-block mappings, modifier sources, structural injection */
 export { luminaConfig } from './config.js';
+/** Lumina design tokens — the typed {@link ThemeTokensConfig} that drives the
+ *  `--rf-*` CSS custom properties. Adapters consume this when composing
+ *  site-level token overrides; see `@refrakt-md/transform`'s
+ *  `mergeThemeTokensConfigs` and `generateThemeStylesheet`. */
+export { luminaTokens } from './tokens.js';
 /** Lumina identity transform — adds BEM classes, consumes meta tags, enhances structure */
 export const identityTransform = createTransform(luminaConfig);
 //# sourceMappingURL=transform.js.map

package/dist/transform.js.map

@@ -1 +1 @@
-{"version":3,"file":"transform.js","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,sEAAsE;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,sGAAsG;AACtG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,2FAA2F;AAC3F,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC"}
+{"version":3,"file":"transform.js","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,sEAAsE;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,sGAAsG;AACtG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C;;;+DAG+D;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,2FAA2F;AAC3F,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC"}

package/index.css

@@ -78,6 +78,7 @@
 @import './styles/runes/nav.css';
 @import './styles/runes/organization.css';
 @import './styles/runes/page-section.css';
+@import './styles/runes/pagination.css';
 @import './styles/runes/playlist.css';
 @import './styles/runes/plot.css';
 @import './styles/runes/preview.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.11.3",
+  "version": "0.14.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,17 @@
       "types": "./dist/layouts.d.ts",
       "default": "./dist/layouts.js"
     },
-    "./styles/runes/*.css": "./styles/runes/*.css"
+    "./presets/tideline": {
+      "types": "./dist/presets/tideline.d.ts",
+      "default": "./dist/presets/tideline.js"
+    },
+    "./presets/niwaki": {
+      "types": "./dist/presets/niwaki.d.ts",
+      "default": "./dist/presets/niwaki.js"
+    },
+    "./styles/runes/*.css": "./styles/runes/*.css",
+    "./assets/logo/prism.svg": "./assets/logo/prism.svg",
+    "./assets/*": "./assets/*"
   },
   "files": [
     "dist",
@@ -38,15 +48,16 @@
     "contracts",
     "manifest.json",
     "layouts",
-    "svelte"
+    "svelte",
+    "assets"
   ],
   "scripts": {
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.11.3",
-    "@refrakt-md/transform": "0.11.3",
-    "@refrakt-md/types": "0.11.3"
+    "@refrakt-md/runes": "0.14.0",
+    "@refrakt-md/transform": "0.14.0",
+    "@refrakt-md/types": "0.14.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/surfaces.css

@@ -6,9 +6,11 @@
 
 /* ─── Rune Spacing ────────────────────────────────────────────────── */
 /* Only top-level runes get vertical margin; child runes (nav items,
-   accordion items, grid cells, etc.) inherit spacing from their parent. */
+   accordion items, grid cells, etc.) inherit spacing from their parent.
+   Layout-chrome navs (menubar in header, columns in footer) are excluded
+   so they sit flush with the surrounding header/footer container. */
 
-[data-rune]:not([data-rune] [data-rune]) {
+[data-rune]:not([data-rune] [data-rune]):not(:where([data-layout="menubar"], [data-layout="columns"])) {
 	margin: 1.5rem 0;
 }
 

package/styles/global.css

@@ -27,10 +27,10 @@ h1, h2, h3, h4, h5, h6 {
 	letter-spacing: -0.015em;
 }
 
-h1 { font-size: 2rem; font-weight: 400; letter-spacing: -0.025em; }
-h2 { font-size: 1.75rem; font-weight: 400; }
-h3 { font-size: 1.25rem; }
-h4 { font-size: 1.1rem; }
+h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.2rem; }
+h4 { font-size: 1.05rem; }
 
 p {
 	margin-top: 0;

package/styles/layouts/blog.css

@@ -39,9 +39,15 @@
 	font-size: 1.2rem;
 	letter-spacing: -0.02em;
 }
-.rf-blog-header img {
+.rf-blog-header img,
+.rf-blog-header p:first-child a > .rf-icon {
 	height: 2rem;
-	width: auto;
+	width: 2rem;
+}
+.rf-blog-header p:first-child a > .rf-icon {
+	display: inline-block;
+	vertical-align: middle;
+	color: currentColor;
 }
 .rf-blog-header__inner p ~ p {
 	font-size: 0.85rem;

package/styles/layouts/default.css

@@ -10,16 +10,20 @@
 	display: flex;
 	align-items: center;
 	gap: 1rem;
-	padding: 1.125rem 1.5rem;
+	padding: 0.625rem 1.5rem;
 }
 .rf-header__inner .rf-search-trigger {
 	margin-left: auto;
+	order: 1;
+}
+.rf-header__inner > rf-nav {
+	order: 3;
 }
 .rf-header__inner p ~ p {
 	order: 1;
 }
 .rf-header__inner .rf-mobile-menu-btn {
-	order: 2;
+	order: 3;
 }
 .rf-header p {
 	margin: 0;
@@ -48,10 +52,19 @@
 	font-size: 1.2rem;
 	letter-spacing: -0.02em;
 }
-.rf-header img {
+.rf-header img,
+.rf-header p:first-child a > .rf-icon {
 	height: 2rem;
+	width: 2rem;
+}
+.rf-header img {
 	width: auto;
 }
+.rf-header p:first-child a > .rf-icon {
+	display: inline-block;
+	vertical-align: middle;
+	color: currentColor;
+}
 .rf-header__inner p ~ p {
 	font-size: 0.85rem;
 }
@@ -211,3 +224,24 @@
 		display: none;
 	}
 }
+
+/* Site footer */
+.rf-footer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 2.5rem 1.5rem 2rem;
+	border-top: 1px solid var(--rf-color-border);
+	background: var(--rf-color-bg);
+	color: var(--rf-color-muted);
+	font-size: 0.875rem;
+}
+.rf-footer > * {
+	width: 100%;
+	max-width: 80rem;
+}
+.rf-footer p {
+	margin: 1.5rem 0 0;
+	font-size: 0.8rem;
+	color: var(--rf-color-muted);
+}

package/styles/layouts/docs.css

@@ -14,16 +14,20 @@
 	display: flex;
 	align-items: center;
 	gap: 1rem;
-	padding: 1.125rem 1.5rem;
+	padding: 0.625rem 1.5rem;
 }
 .rf-docs-header__inner .rf-search-trigger {
 	margin-left: auto;
+	order: 1;
+}
+.rf-docs-header__inner > rf-nav {
+	order: 3;
 }
 .rf-docs-header__inner p ~ p {
 	order: 1;
 }
 .rf-docs-header__inner .rf-mobile-menu-btn {
-	order: 2;
+	order: 3;
 }
 .rf-docs-header p {
 	margin: 0;
@@ -45,9 +49,15 @@
 	font-size: 1.2rem;
 	letter-spacing: -0.02em;
 }
-.rf-docs-header img {
+.rf-docs-header img,
+.rf-docs-header p:first-child a > .rf-icon {
 	height: 2rem;
-	width: auto;
+	width: 2rem;
+}
+.rf-docs-header p:first-child a > .rf-icon {
+	display: inline-block;
+	vertical-align: middle;
+	color: currentColor;
 }
 .rf-docs-header__inner p ~ p {
 	font-size: 0.85rem;
@@ -69,7 +79,7 @@
 .rf-docs-sidebar {
 	position: fixed;
 	left: 0;
-	top: 4.125rem;
+	top: 3.125rem;
 	bottom: 0;
 	width: 240px;
 	overflow-y: auto;
@@ -84,7 +94,7 @@
 
 /* ---- Content area ---- */
 .rf-docs-content {
-	padding-top: 5.75rem;
+	padding-top: 4.75rem;
 	padding-bottom: 4rem;
 	container-type: inline-size;
 }
@@ -133,6 +143,14 @@
 	margin-inline: auto;
 }
 
+/* Pagination wrapper sits outside the article grid, so it gets its own
+   horizontal padding so prev/next don't run to the viewport edges on
+   narrow viewports. Uses the same `--rf-content-padding` token the
+   article grid uses for its gutter columns. */
+.rf-docs-content__pagination {
+	padding-inline: var(--rf-content-padding, 2.5rem);
+}
+
 /* ---- "On this page" sidebar ---- */
 .rf-docs-toc {
 	width: 220px;

package/styles/layouts/mobile.css

@@ -58,18 +58,36 @@
 .rf-mobile-panel__nav img {
 	display: none;
 }
-.rf-mobile-panel__nav a {
+/* Panel items — top-level links and group items render uniformly. The
+   four-class selectors below carry specificity (0,4,0), beating the
+   menubar's mobile rules in nav.css ((0,3,0)) on equal source position
+   so the panel's typography always wins (nav.css is imported later than
+   mobile.css in index.css). */
+.rf-mobile-panel__nav a,
+.rf-mobile-panel .rf-nav--menubar .rf-nav__top-level .rf-nav-item__link,
+.rf-mobile-panel .rf-nav--menubar .rf-nav-group .rf-nav-item__link {
 	display: block;
-	padding: 0.75rem 0;
-	font-size: 1.1rem;
+	padding: 0.5rem 0;
+	font-size: 1.5rem;
+	font-weight: 700;
 	color: var(--rf-color-text);
 	text-decoration: none;
-	border-bottom: 1px solid var(--rf-color-border);
+	background: transparent;
+	border: 0;
 }
-.rf-mobile-panel__nav a:hover {
+.rf-mobile-panel__nav a:hover,
+.rf-mobile-panel .rf-nav--menubar .rf-nav__top-level .rf-nav-item__link:hover,
+.rf-mobile-panel .rf-nav--menubar .rf-nav-group .rf-nav-item__link:hover {
 	color: var(--rf-color-primary, var(--rf-color-text));
+	background: transparent;
 	text-decoration: none;
 }
+/* Group headings inside the panel — flush with items (no horizontal
+   padding) and breathing room above so each group reads as a section. */
+.rf-mobile-panel .rf-nav--menubar .rf-nav-group h2,
+.rf-mobile-panel .rf-nav--menubar .rf-nav-group h3 {
+	padding: 1.5rem 0 0.25rem;
+}
 .rf-mobile-panel__body {
 	padding: 1rem 1.5rem;
 }
@@ -83,4 +101,17 @@
 	.rf-mobile-menu-btn {
 		display: block;
 	}
+	/* The inline menubar collapses behind the hamburger on mobile — the
+	   .rf-mobile-panel duplicates the same nav and styles it as a flat
+	   vertical list (see nav.css's rf-nav--menubar mobile rules). */
+	.rf-header__inner > rf-nav,
+	.rf-docs-header__inner > rf-nav,
+	.rf-blog-header__inner > rf-nav {
+		display: none;
+	}
+	/* Hide the duplicated brand line inside the mobile panel — the panel
+	   already has its own "Menu" title. */
+	.rf-mobile-panel__nav > p:first-child {
+		display: none;
+	}
 }

package/styles/runes/codegroup.css

@@ -1,9 +1,15 @@
-/* Code Group */
+/* Code Group
+ *
+ * Chrome (the wrapper + topbar + tabs) uses `--rf-color-surface` so it
+ * reads against the page in both light and dark modes. The code areas
+ * themselves inherit `--rf-color-code-bg` from the global `pre` rule, so
+ * code stays on its own background even when the surrounding chrome
+ * flips with the page mode. */
 .rf-codegroup {
 	border: 1px solid var(--rf-color-border);
 	overflow: hidden;
-	background: var(--rf-color-code-bg);
-	color: var(--rf-color-code-text);
+	background: var(--rf-color-surface);
+	color: var(--rf-color-text);
 	box-shadow: var(--rf-shadow-md);
 	padding: 0;
 }
@@ -12,8 +18,8 @@
 	align-items: center;
 	gap: 0.375rem;
 	padding: 0.75rem 1rem;
-	background: rgba(255, 255, 255, 0.03);
-	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+	background: transparent;
+	border-bottom: 1px solid var(--rf-color-border);
 	margin-bottom: 0;
 }
 .rf-codegroup__dot {
@@ -30,8 +36,7 @@
 	font-family: var(--rf-font-mono);
 	font-size: 0.8rem;
 	font-weight: normal;
-	color: inherit;
-	opacity: 0.7;
+	color: var(--rf-color-muted);
 }
 .rf-codegroup ul {
 	list-style: none;
@@ -40,8 +45,8 @@
 }
 .rf-codegroup__tabs {
 	display: flex;
-	background: rgba(255, 255, 255, 0.03);
-	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+	background: transparent;
+	border-bottom: 1px solid var(--rf-color-border);
 	overflow-x: auto;
 	overflow-y: hidden;
 }
@@ -50,7 +55,7 @@
 	padding: 0.5rem 1rem;
 	font-size: 0.8rem;
 	font-family: var(--rf-font-mono);
-	color: rgba(255, 255, 255, 0.7);
+	color: var(--rf-color-muted);
 	background: none;
 	border: none;
 	border-bottom: 2px solid transparent;
@@ -60,15 +65,15 @@
 }
 .rf-codegroup__tab:hover,
 .rf-codegroup button[data-state="inactive"]:hover {
-	color: rgba(255, 255, 255, 0.8);
+	color: var(--rf-color-text);
 }
 .rf-codegroup__tab--active,
 .rf-codegroup button[data-state="active"] {
-	color: rgba(255, 255, 255, 0.95);
-	border-bottom-color: var(--rf-color-code-text);
+	color: var(--rf-color-text);
+	border-bottom-color: var(--rf-color-primary);
 }
 .rf-codegroup button[data-state="inactive"] {
-	color: rgba(255, 255, 255, 0.7);
+	color: var(--rf-color-muted);
 }
 .rf-codegroup .rf-codeblock {
 	margin: 0;
@@ -77,7 +82,6 @@
 	margin: 0;
 	padding: 1rem 1.25rem;
 	overflow-x: auto;
-	background: none;
 	border: none;
 	border-radius: 0;
 }

package/styles/runes/hint.css

@@ -1,11 +1,10 @@
 /* Hint */
 .rf-hint {
 	--hint-color: var(--rf-color-info);
-	--hint-bg: var(--rf-color-info-bg);
-	border-left: 3px solid var(--hint-color);
 	padding: 0.875rem 1.25rem;
-	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
-	background: var(--hint-bg);
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+	border: 1px solid var(--rf-color-border);
 }
 .rf-hint__header {
 	margin-bottom: 0.375rem;
@@ -56,21 +55,19 @@
 .rf-hint__body p:last-child {
 	margin-bottom: 0;
 }
+/* Per-variant colour drives the icon and title only — surface stays
+   neutral so the hint reads as a quiet panel, not a saturated banner. */
 .rf-hint--note {
 	--hint-color: var(--rf-color-info);
-	--hint-bg: var(--rf-color-info-bg);
 }
 .rf-hint--warning {
 	--hint-color: var(--rf-color-warning);
-	--hint-bg: var(--rf-color-warning-bg);
 }
 .rf-hint--caution {
 	--hint-color: var(--rf-color-danger);
-	--hint-bg: var(--rf-color-danger-bg);
 }
 .rf-hint--check {
 	--hint-color: var(--rf-color-success);
-	--hint-bg: var(--rf-color-success-bg);
 }
 
 /* Context-aware: compact hint when nested inside a hero */
@@ -88,6 +85,5 @@
 .rf-hint--in-feature {
 	margin: 0.75rem 0 0;
 	padding: 0.5rem 0.875rem;
-	border-left-width: 2px;
 	font-size: 0.85rem;
 }