@refrakt-md/lumina 0.21.0 → 0.23.0

package/base.css

@@ -36,6 +36,7 @@
 @import './styles/dimensions/frame.css';
 @import './styles/dimensions/substrate.css';
 @import './styles/dimensions/cover.css';
-@import './styles/dimensions/guest-posture.css';
+/* guest-posture is wholly structural → @refrakt-md/skeleton (loaded by the theme
+ * loader before base.css), so it has no skin remainder to import here (WORK-438). */
 @import './styles/dimensions/checklist.css';
 @import './styles/dimensions/sequence.css';

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAIA,gFAAgF;AAChF,eAAO,MAAM,YAAY,6CAoFvB,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAIA,gFAAgF;AAChF,eAAO,MAAM,YAAY,6CA2FvB,CAAC"}

package/dist/config.js

@@ -84,6 +84,13 @@ export const luminaConfig = mergeThemeConfig(baseConfig, {
             caution: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
             check: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
         },
+        // SPEC-094 §8 / WORK-437 (icon-from-config) — the accordion disclosure
+        // chevron lives in the icon registry, not embedded in accordion.css; the
+        // skeleton's `::before` reads the generated `--rf-icon-accordion-chevron`
+        // mask custom property, so a theme re-glyphs it without touching CSS.
+        accordion: {
+            chevron: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>',
+        },
         global: lucideIcons,
     },
 });

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAElD,gFAAgF;AAChF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAU,EAAE;IACxD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,oBAAoB;gBACxB,OAAO,EAAE,yBAAyB;gBAClC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,oBAAoB;gBACxB,OAAO,EAAE,yBAAyB;gBAClC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,MAAM,EAAE;YACP,KAAK,EAAE;gBACN,EAAE,EAAE,yBAAyB;gBAC7B,OAAO,EAAE,+BAA+B;gBACxC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,yBAAyB;gBAC7B,OAAO,EAAE,+BAA+B;gBACxC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,gCAAgC;gBACpC,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,yBAAyB;gBAC7B,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,6BAA6B;aACrC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,wBAAwB;aACjC;SACD;KACD;IACD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,4SAA4S;YAClT,OAAO,EAAE,iXAAiX;YAC1X,OAAO,EAAE,uSAAuS;YAChT,KAAK,EAAE,qRAAqR;SAC5R;QACD,MAAM,EAAE,WAAW;KACnB;CACD,CAAC,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAElD,gFAAgF;AAChF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAU,EAAE;IACxD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,oBAAoB;gBACxB,OAAO,EAAE,yBAAyB;gBAClC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,oBAAoB;gBACxB,OAAO,EAAE,yBAAyB;gBAClC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,MAAM,EAAE;YACP,KAAK,EAAE;gBACN,EAAE,EAAE,yBAAyB;gBAC7B,OAAO,EAAE,+BAA+B;gBACxC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,yBAAyB;gBAC7B,OAAO,EAAE,+BAA+B;gBACxC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,gCAAgC;gBACpC,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,yBAAyB;gBAC7B,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,6BAA6B;aACrC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,wBAAwB;aACjC;SACD;KACD;IACD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,4SAA4S;YAClT,OAAO,EAAE,iXAAiX;YAC1X,OAAO,EAAE,uSAAuS;YAChT,KAAK,EAAE,qRAAqR;SAC5R;QACD,uEAAuE;QACvE,yEAAyE;QACzE,0EAA0E;QAC1E,sEAAsE;QACtE,SAAS,EAAE;YACV,OAAO,EAAE,2MAA2M;SACpN;QACD,MAAM,EAAE,WAAW;KACnB;CACD,CAAC,CAAC"}

package/dist/tokens.d.ts

@@ -5,9 +5,11 @@ import type { ThemeTokensConfig } from '@refrakt-md/types';
  * "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.
+ * This is the *source of truth* for Lumina's runtime CSS values. The
+ * `tokens/base.css` and `tokens/dark.css` files are **generated** from this
+ * export by `scripts/generate-tokens.mjs` (run as part of the package build via
+ * `generateThemeStylesheet`); a drift test (`test/token-generation.test.ts`)
+ * fails CI if the committed CSS diverges. Edit this file, never the CSS.
  *
  * Sites that want the previous cream-and-navy appearance opt into the
  * `tideline` preset shipping alongside this default (see

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAyL1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAoO1B,CAAC"}

package/dist/tokens.js

@@ -4,9 +4,11 @@
  * "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.
+ * This is the *source of truth* for Lumina's runtime CSS values. The
+ * `tokens/base.css` and `tokens/dark.css` files are **generated** from this
+ * export by `scripts/generate-tokens.mjs` (run as part of the package build via
+ * `generateThemeStylesheet`); a drift test (`test/token-generation.test.ts`)
+ * fails CI if the committed CSS diverges. Edit this file, never the CSS.
  *
  * Sites that want the previous cream-and-navy appearance opt into the
  * `tideline` preset shipping alongside this default (see
@@ -19,6 +21,43 @@ 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",
+        // Lumina is a unified-neutral theme: its headings use the same sans as
+        // body. The slot exists so an editorial theme can swap in a serif/display
+        // family without touching rune CSS.
+        display: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    },
+    // SPEC-094 — typographic scale. A roughly-1.2 modular scale anchored at a
+    // 1rem body. Nothing consumes these yet (WORK-405 migrates Lumina's
+    // hardcoded sizes onto them); values match Lumina's current type feel.
+    text: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.5rem',
+    },
+    weight: {
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+    },
+    leading: {
+        tight: '1.2',
+        snug: '1.35',
+        normal: '1.5',
+        relaxed: '1.65',
+        loose: '2',
+    },
+    tracking: {
+        tight: '-0.01em',
+        normal: '0',
+        wide: '0.03em',
+        wider: '0.06em',
     },
     color: {
         text: '#1c1a17',
@@ -75,6 +114,8 @@ export const luminaTokens = {
     spacing: {
         xs: '0.25rem',
         sm: '0.5rem',
+        snug: '0.75rem',
+        cozy: '1rem',
         md: '1.5rem',
         lg: '2rem',
         xl: '3rem',

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAsB;IAC9C,IAAI,EAAE;QACL,IAAI,EAAE,mEAAmE;QACzE,IAAI,EAAE,yEAAyE;KAC/E;IAED,KAAK,EAAE;QACN,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,EAAE,EAAE,SAAS;QACb,OAAO,EAAE,SAAS;QAClB,eAAe,EAAE,SAAS;QAC1B,oEAAoE;QACpE,qEAAqE;QACrE,6DAA6D;QAC7D,YAAY,EAAE,+DAA+D;QAC7E,wEAAwE;QACxE,uEAAuE;QACvE,YAAY,EAAE,SAAS;QAEvB,OAAO,EAAE;YACR,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,SAAS;SACjB;QAED,0EAA0E;QAC1E,sEAAsE;QACtE,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAE9D,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,wDAAwD;YACxD,sEAAsE;YACtE,kEAAkE;YAClE,WAAW,EAAE,SAAS;SACtB;QAED,8DAA8D;QAC9D,oEAAoE;QACpE,oEAAoE;QACpE,+DAA+D;QAC/D,8DAA8D;QAC9D,6DAA6D;QAC7D,IAAI,EAAE;YACL,SAAS,EAAE,0DAA0D;YACrE,gBAAgB,EAAE,+CAA+C;YACjE,MAAM,EAAE,uBAAuB;SAC/B;KACD;IAED,MAAM,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,QAAQ;KACd;IAED,OAAO,EAAE;QACR,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;QACb,OAAO,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;SACf;KACD;IAED,KAAK,EAAE;QACN,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;KACf;IAED,MAAM,EAAE;QACP,IAAI,EAAE,MAAM;QACZ,EAAE,EAAE,4BAA4B;QAChC,EAAE,EAAE,wDAAwD;QAC5D,EAAE,EAAE,yDAAyD;QAC7D,EAAE,EAAE,yDAAyD;KAC7D;IAED,wEAAwE;IACxE,oEAAoE;IACpE,qEAAqE;IACrE,aAAa;IACb,MAAM,EAAE;QACP,OAAO,EAAE,SAAS,EAAM,YAAY;QACpC,QAAQ,EAAE,SAAS,EAAK,eAAe;QACvC,MAAM,EAAE,SAAS,EAAO,YAAY;QACpC,QAAQ,EAAE,SAAS,EAAK,gBAAgB;QACxC,OAAO,EAAE,SAAS,EAAM,mCAAmC;QAC3D,WAAW,EAAE,SAAS,EAAE,8BAA8B;QACtD,QAAQ,EAAE,SAAS,EAAK,6BAA6B;KACrD;IAED,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,EAAE,EAAE,SAAS;gBACb,OAAO,EAAE,SAAS;gBAClB,eAAe,EAAE,SAAS;gBAC1B,YAAY,EAAE,SAAS;gBAEvB,OAAO,EAAE;oBACR,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,SAAS;oBACjB,MAAM,EAAE,SAAS;iBACjB;gBAED,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAE9D,IAAI,EAAE;oBACL,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,SAAS;oBACf,WAAW,EAAE,SAAS;iBACtB;aACD;YAED,MAAM,EAAE;gBACP,EAAE,EAAE,2BAA2B;gBAC/B,EAAE,EAAE,sDAAsD;gBAC1D,EAAE,EAAE,uDAAuD;gBAC3D,EAAE,EAAE,uDAAuD;aAC3D;YAED,uEAAuE;YACvE,qEAAqE;YACrE,MAAM,EAAE;gBACP,OAAO,EAAE,SAAS,EAAM,aAAa;gBACrC,QAAQ,EAAE,SAAS,EAAK,qBAAqB;gBAC7C,MAAM,EAAE,SAAS,EAAO,aAAa;gBACrC,QAAQ,EAAE,SAAS,EAAK,sBAAsB;gBAC9C,OAAO,EAAE,SAAS,EAAM,sBAAsB;gBAC9C,WAAW,EAAE,SAAS,EAAE,qBAAqB;gBAC7C,QAAQ,EAAE,SAAS,EAAK,oBAAoB;aAC5C;YAED,oEAAoE;YACpE,kEAAkE;YAClE,qEAAqE;YACrE,0BAA0B;YAC1B,KAAK,EAAE;gBACN,yBAAyB,EAAE,SAAS;gBACpC,6DAA6D;gBAC7D,wBAAwB,EAAE,MAAM;aAChC;SACD;KACD;IAED;;;;;;;;;qBASiB;IACjB,KAAK,EAAE;QACN,yBAAyB,EAAE,SAAS;QACpC,4EAA4E;QAC5E,2EAA2E;QAC3E,wBAAwB,EAAE,MAAM;KAChC;CACD,CAAC"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/index.css

@@ -1,5 +1,12 @@
 /* Lumina Theme Identity — CSS Barrel */
 
+/* Cascade-layer contract — must load first so the `@layer skeleton, skin;` order
+ * declaration is emitted before any layer content (SPEC-094 §3 / WORK-436).
+ * Lumina's own CSS below is currently unlayered, which keeps it winning over the
+ * (empty) skeleton layer — the per-file `@layer skin` re-bucketing lands in
+ * WORK-438. */
+@import '@refrakt-md/skeleton';
+
 /* Design Tokens */
 @import './tokens/base.css';
 @import './tokens/dark.css';
@@ -37,7 +44,9 @@
 @import './styles/dimensions/frame.css';
 @import './styles/dimensions/substrate.css';
 @import './styles/dimensions/cover.css';
-@import './styles/dimensions/guest-posture.css';
+/* guest-posture is wholly structural (pointer-events + a tab-strip display reset)
+ * → @refrakt-md/skeleton (dimensions/guest-posture.css), promoted with the
+ * tabs/codegroup structure it depends on (WORK-438). */
 @import './styles/dimensions/checklist.css';
 @import './styles/dimensions/sequence.css';
 
@@ -80,6 +89,7 @@
 @import './styles/runes/faction.css';
 @import './styles/runes/feature.css';
 @import './styles/runes/figure.css';
+@import './styles/runes/placeholder.css';
 @import './styles/runes/gallery.css';
 @import './styles/runes/form.css';
 @import './styles/runes/grid.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.21.0",
+  "version": "0.23.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -80,12 +80,14 @@
     "assets"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc && node scripts/generate-tokens.mjs",
+    "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.21.0",
-    "@refrakt-md/transform": "0.21.0",
-    "@refrakt-md/types": "0.21.0"
+    "@refrakt-md/runes": "0.23.0",
+    "@refrakt-md/skeleton": "0.23.0",
+    "@refrakt-md/transform": "0.23.0",
+    "@refrakt-md/types": "0.23.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/base/attributes.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Universal Rune Attributes — spacing & inset
  *
  * Compound attribute selectors [data-rune][data-*] give specificity (0,2,0):
@@ -19,11 +20,9 @@
 [data-rune][data-inset="loose"]   { padding-inline: var(--rf-inset-loose, 4rem); }
 [data-rune][data-inset="breathe"] { padding-inline: var(--rf-inset-breathe, 8rem); }
 
-/* ── Elevation — drop shadow (box-shadow) ──────────────────────────────
- * Universal `elevation` attribute (SPEC-086). Maps to the shared --rf-shadow-*
- * token scale; `none` explicitly flattens a rune's default shadow. */
+/* The `elevation` axis (SPEC-107) — depth-ladder chrome (fill / border / radius
+ * / resting shadow) — is mapped by value in dimensions/surfaces.css. The old
+ * SPEC-086 shadow scale (none/sm/md/lg) is superseded; the engine maps those
+ * deprecated aliases onto the ladder before they reach the DOM. */
 
-[data-rune][data-elevation="none"] { box-shadow: var(--rf-shadow-none); }
-[data-rune][data-elevation="sm"]   { box-shadow: var(--rf-shadow-sm); }
-[data-rune][data-elevation="md"]   { box-shadow: var(--rf-shadow-md); }
-[data-rune][data-elevation="lg"]   { box-shadow: var(--rf-shadow-lg); }
+}

package/styles/dimensions/checklist.css

@@ -1,21 +1,11 @@
-/* === Checklist: universal checkbox item styling === */
+@layer skin {
+/* === Checklist — skin ===
+ * The indicator chrome (fill, border, radius, box-shadow) and the item text
+ * treatment per state. The indicator gutter + box placement/size live in
+ * @refrakt-md/skeleton (dimensions/checklist.css). */
 
-/* All checklist items get left padding for the indicator */
-[data-checked] {
-	position: relative;
-	padding-left: 1.75rem;
-	list-style: none;
-	margin-left: -1.5rem;
-}
-
-/* Indicator base — positioned left of text */
+/* Indicator base chrome. */
 [data-checked]::before {
-	content: '';
-	position: absolute;
-	left: 0.125rem;
-	top: 0.5em;
-	width: 1rem;
-	height: 1rem;
 	border-radius: var(--rf-radius-sm, 0.25rem);
 	border: 2px solid var(--rf-color-border);
 	background: transparent;
@@ -40,7 +30,7 @@
 
 [data-checked="active"] {
 	color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 
 /* Skipped — muted with strikethrough */
@@ -59,23 +49,4 @@
 	background: transparent;
 }
 
-/* === Density interaction === */
-
-/* Compact: tighter spacing */
-[data-density="compact"] [data-checked] {
-	padding-left: 1.5rem;
-}
-
-[data-density="compact"] [data-checked]::before {
-	width: 0.75rem;
-	height: 0.75rem;
-}
-
-/* Minimal: indicators only, no text */
-[data-density="minimal"] [data-checked] {
-	font-size: 0;
-	padding-left: 0;
-	display: inline-block;
-	width: 1rem;
-	height: 1rem;
 }

package/styles/dimensions/cover.css

@@ -1,116 +1,32 @@
-/* Cover layout (SPEC-089) — `media-position="cover"`.
+@layer skin {
+/* Cover layout (SPEC-089) — skin.
  *
- * The media well fills the rune interior and the content overlays it (the poster
- * / cover card). The media stays a media guest — the thin-edge frame and
- * `--rf-radius-media` are preserved — with content floated on top via grid
- * stacking (media + content share one grid cell). No overlay primitive in the
- * layout config; the variant supplies the structure (SPEC-091), CSS positions.
- *
- * Height authority: an external grid track (bento) wins; else the media aspect
- * (`frame-aspect`, default portrait); a card height/aspect knob overrides via the
- * cascade. Cover supersedes the media-vs-content split knobs (content-height /
- * media-ratio), which have no meaning when there is no split. */
+ * The grid-overlay *structure* (media well + content share one grid cell, the
+ * well fills/crops its guest, the overlay positions via content-place) lives in
+ * @refrakt-md/skeleton (dimensions/cover.css). What remains here is skin: the
+ * media radii, the overlay's surface padding, and the legibility scrim
+ * (gradient / frost) painted over the media. */
 
-/* ── full scope — the whole content overlays the media well ──────────── */
-[data-media-position="cover"]:not([data-cover-scope="header"]) {
-	display: grid;
-	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
-	aspect-ratio: var(--frame-aspect, var(--cover-aspect, 3 / 4));
-	container-type: size;
-	overflow: hidden;
-	isolation: isolate;
-}
-[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-section="media"],
-[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"] {
-	grid-area: 1 / 1;
-	margin: 0;
-	min-width: 0;
-}
-
-/* ── header scope — only the cover-band overlays; body flows below ────── */
 [data-cover-scope="header"] > [data-name="cover-band"] {
-	display: grid;
-	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
-	aspect-ratio: var(--frame-aspect, 16 / 9);
 	border-radius: var(--rf-radius-media);
-	overflow: hidden;
-	isolation: isolate;
-	container-type: size;
-}
-/* On narrow screens a 16/9 band is too short to seat the preamble over the
- * scrim, so default it to a taller (≥1:1) poster shape. An explicit
- * `frame-aspect` still wins. */
-@media (max-width: 40rem) {
-	[data-cover-scope="header"] > [data-name="cover-band"] {
-		aspect-ratio: var(--frame-aspect, 4 / 5);
-	}
-}
-[data-cover-scope="header"] > [data-name="cover-band"] > [data-section="media"],
-[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
-	grid-area: 1 / 1;
-	margin: 0;
 }
 
-/* ── shared: the media well fills, the overlaid box positions ─────────── */
 [data-media-position="cover"] [data-section="media"] {
-	position: relative;
-	height: 100%;
 	border-radius: var(--rf-radius-media);
-	overflow: hidden;
-}
-[data-media-position="cover"] [data-section="media"] > :is(img, video) {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-/* SPEC-101 — non-img/video guests (a sandbox, an embed) fill the well too.
- * They can't be object-fit-cropped, so they get the well's box outright;
- * display:block covers undefined custom elements (inline by default). */
-[data-media-position="cover"] [data-section="media"] > :not(img, video) {
-	display: block;
-	width: 100%;
-	height: 100%;
 }
+
 /* A backdrop sandbox sits flush in the well — the well's own radius/overflow
- * does the clipping. The iframe height is pinned inline by the element in
- * `fill` mode; this carries the fixed-height case visually until then. */
+ * does the clipping. */
 [data-media-position="cover"] [data-section="media"] .rf-sandbox {
-	margin: 0;
 	border-radius: 0;
 }
-[data-media-position="cover"] [data-section="media"] .rf-sandbox iframe {
-	height: 100%;
-}
-/* The overlaid box (full: content; header: preamble) anchors via content-place. */
+
+/* The overlaid box carries the surface padding (density-aware via --rune-padding). */
 [data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
 [data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
-	position: relative;
-	z-index: 1;
-	align-self: var(--cover-place-block, end);
-	justify-self: var(--cover-place-inline, stretch);
 	padding: var(--rune-padding, var(--rf-spacing-md));
 }
 
-/* ── auto / unset placement ───────────────────────────────────────────
- * `auto` is the cover default, so an unset content-place behaves the same as an
- * explicit `auto`. A header band is always a caption strip — the preamble sits at
- * the block-end over the scrim regardless of the band's orientation. A full-scope
- * overlay adapts to the cover region's orientation (portrait → block-end caption;
- * landscape → inline-start side panel). An explicit value (e.g. "center center")
- * sets the `--cover-place-*` vars on the base rule above and does NOT match here,
- * so it pins regardless of orientation. */
-[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"],
-[data-cover-scope="header"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="cover-band"] > [data-name="preamble"] {
-	align-self: end;
-	justify-self: stretch;
-}
-@container (min-aspect-ratio: 1 / 1) {
-	[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
-		align-self: center;
-		justify-self: start;
-	}
-}
-
 /* ── default cover scrim (SPEC-088 scrim, on the media surface) ────────
  * Overlaying text on an arbitrary image without a scrim is a legibility footgun,
  * so cover applies a default gradient scrim weighted toward the content edge.
@@ -169,3 +85,5 @@
 	 * reads at full foreground strength — the same colour as the headline. */
 	--rf-color-muted: var(--rf-color-text);
 }
+
+}

package/styles/dimensions/density.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* ─── Density Dimension ─────────────────────────────────────────────────
  * Controls spacing, visibility, and detail level across all runes.
  * Three levels: full (dedicated page), compact (grid/card), minimal (list).
@@ -9,14 +10,14 @@
 
 [data-density="full"] {
 	--rune-padding: var(--rf-spacing-md);
-	--rf-title-size: 1.5rem;
+	--rf-title-size: var(--rf-text-2xl);
 }
 
 /* ─── Compact: truncated descriptions, tight spacing ──────────────── */
 
 [data-density="compact"] {
 	--rune-padding: var(--rf-spacing-sm);
-	--rf-title-size: 1.25rem;
+	--rf-title-size: var(--rf-text-xl);
 }
 
 [data-density="compact"] [data-section="description"] {
@@ -34,7 +35,7 @@
 
 [data-density="minimal"] {
 	--rune-padding: var(--rf-spacing-xs);
-	--rf-title-size: 1rem;
+	--rf-title-size: var(--rf-text);
 }
 
 [data-density="minimal"] [data-section="description"] {
@@ -74,3 +75,5 @@
 [data-density="minimal"] [data-density="full"] [data-meta-rank="secondary"] {
 	display: revert;
 }
+
+}

package/styles/dimensions/frame.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Frame chrome (SPEC-086) — media-surface presentation.
  *
  * The engine lands the frame contract on the frame-target element: a rune's
@@ -42,7 +43,7 @@
  * guest so a displaced image's shadow falls into the slot's exposed
  * interior (clipped at the slot's `overflow: hidden` boundary like any
  * other in-slot content). */
-[data-section="media"][data-frame-shadow] > :is(img, video, [data-rune]) {
+[data-section="media"][data-frame-shadow] > :is(img, video, .rf-placeholder, [data-rune]) {
 	filter: var(--frame-shadow);
 }
 
@@ -50,7 +51,7 @@
 [style*="--frame-aspect"] { aspect-ratio: var(--frame-aspect); }
 
 /* ── Crop anchor — focal point when the guest is cut ─────────────────── */
-[style*="--frame-anchor"] > :is(img, video) { object-position: var(--frame-anchor); }
+[style*="--frame-anchor"] > :is(img, video, .rf-placeholder) { object-position: var(--frame-anchor); }
 
 /* ── Placement of the framed box within its slot ─────────────────────── */
 [style*="--frame-place-x"] { justify-self: var(--frame-place-x, auto); align-self: var(--frame-place-y, auto); }
@@ -59,7 +60,7 @@
 /* `[data-rune]` extends the rule to nested rune guests (codegroup, mockup,
  * chart, etc.), so frame chrome stays guest-agnostic — the same selector
  * pattern the displace rule uses. */
-[style*="--frame-oversize"] > :is(img, video, [data-rune]) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
+[style*="--frame-oversize"] > :is(img, video, .rf-placeholder, [data-rune]) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
 
 /* ── Displacement (peek / spill) — move the guest toward an edge/corner.
  * The host decides whether the guest is cropped or spills; this only moves it.
@@ -80,7 +81,7 @@
  *      parent's edge for a true breakout. */
 
 /* — Case 1: media-zone displace → translate the inner guest, zone clips. */
-[data-section="media"][data-displace] > :is(img, video, [data-rune]) {
+[data-section="media"][data-displace] > :is(img, video, .rf-placeholder, [data-rune]) {
 	transform: translate(var(--displace-x, 0), var(--displace-y, 0));
 }
 [data-section="media"][data-displace="top"]        { --displace-y: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
@@ -102,3 +103,5 @@
  * clipped by the zone's `overflow: hidden` regardless of width, so the peek
  * reads consistently from desktop to mobile. For self-target (showcase) the
  * negative-margin spill stays on too — that's the intended breakout. */
+
+}

package/styles/dimensions/media.css

@@ -1,62 +1,15 @@
-/* ─── Media Slots Dimension ─────────────────────────────────────────────
- * Generic treatment for 5 media slot types: portrait, cover, thumbnail,
- * hero, icon. Applied via data-media attribute on image/media elements.
- *
- * Includes density × media interactions (compact shrinks, minimal hides).
- * ────────────────────────────────────────────────────────────────────── */
-
-/* ─── Portrait: circular crop ─────────────────────────────────────── */
-
-[data-media="portrait"] {
-	border-radius: var(--rf-radius-full);
-	aspect-ratio: 1 / 1;
-	object-fit: cover;
-	width: var(--media-portrait-size, 5rem);
-	height: var(--media-portrait-size, 5rem);
-}
-
-/* ─── Cover: full-width banner image ──────────────────────────────── */
-
-[data-media="cover"] {
-	width: 100%;
-	object-fit: cover;
-	border-radius: var(--rf-radius-md);
-}
-
-/* ─── Thumbnail: small fixed preview ──────────────────────────────── */
-
-[data-media="thumbnail"] {
-	width: var(--media-thumbnail-size, 3rem);
-	height: var(--media-thumbnail-size, 3rem);
-	border-radius: var(--rf-radius-sm);
-	object-fit: cover;
-	flex-shrink: 0;
-}
-
-/* ─── Hero: large responsive image ────────────────────────────────── */
-
-[data-media="hero"] {
-	width: 100%;
-	object-fit: cover;
-}
-
-/* ─── Icon: small square, no crop ─────────────────────────────────── */
-
-[data-media="icon"] {
-	width: var(--media-icon-size, 2rem);
-	height: var(--media-icon-size, 2rem);
-	object-fit: contain;
-	flex-shrink: 0;
-}
-
-/* ─── Density × Media ─────────────────────────────────────────────── */
-
-/* Compact: smaller portraits */
-[data-density="compact"] [data-media="portrait"] {
-	--media-portrait-size: 3rem;
-}
-
-/* Minimal: hide all media */
-[data-density="minimal"] [data-media] {
-	display: none;
+/* ─── Media Slots Dimension — skin ──────────────────────────────────────
+ * The rounded corners of each slot type. Slot sizing/fit (the geometry) is
+ * structure and lives in `@refrakt-md/skeleton` (styles/dimensions/media.css). */
+
+@layer skin {
+	[data-media="portrait"] {
+		border-radius: var(--rf-radius-full);
+	}
+	[data-media="cover"] {
+		border-radius: var(--rf-radius-md);
+	}
+	[data-media="thumbnail"] {
+		border-radius: var(--rf-radius-sm);
+	}
 }