@refrakt-md/lumina 0.25.1 → 0.26.0

package/base.css

@@ -30,6 +30,7 @@
 @import './styles/dimensions/metadata.css';
 @import './styles/dimensions/density.css';
 @import './styles/dimensions/sections.css';
+@import './styles/dimensions/reading.css';
 @import './styles/dimensions/state.css';
 @import './styles/dimensions/media.css';
 @import './styles/dimensions/surfaces.css';

package/contracts/structures.json

@@ -913,11 +913,6 @@
 				"{content}"
 			],
 			"modifiers": {
-				"dropcap": {
-					"source": "meta",
-					"classPattern": ".rf-textblock--{value}",
-					"dataAttribute": "data-dropcap"
-				},
 				"columns": {
 					"source": "meta",
 					"classPattern": ".rf-textblock--{value}",
@@ -1636,6 +1631,14 @@
 					"default": "bottom",
 					"dataAttribute": "data-media-position"
 				},
+				"layout": {
+					"source": "meta",
+					"dataAttribute": "data-layout"
+				},
+				"collapse-to": {
+					"source": "meta",
+					"dataAttribute": "data-collapse-to"
+				},
 				"align": {
 					"source": "meta",
 					"default": "center",
@@ -1691,9 +1694,9 @@
 					"selector": ".rf-feature__image",
 					"source": "autoLabel"
 				},
-				"definitions": {
+				"items": {
 					"tag": "dl",
-					"selector": ".rf-feature__definitions",
+					"selector": ".rf-feature__items",
 					"source": "autoLabel"
 				}
 			},
@@ -1701,182 +1704,6 @@
 				"valign": {
 					"prop": "--split-valign"
 				}
-			},
-			"variants": {
-				"media-position": {
-					"top": {
-						"block": "feature",
-						"root": ".rf-feature",
-						"dataRune": "feature",
-						"childOrder": [
-							"{content}"
-						],
-						"modifiers": {
-							"media-position": {
-								"source": "meta",
-								"default": "bottom",
-								"dataAttribute": "data-media-position"
-							},
-							"align": {
-								"source": "meta",
-								"default": "center",
-								"classPattern": ".rf-feature--{value}",
-								"dataAttribute": "data-align"
-							},
-							"media-ratio": {
-								"source": "meta",
-								"dataAttribute": "data-media-ratio"
-							},
-							"valign": {
-								"source": "meta",
-								"dataAttribute": "data-valign"
-							},
-							"collapse": {
-								"source": "meta",
-								"dataAttribute": "data-collapse"
-							}
-						},
-						"contextModifiers": {
-							"hero": {
-								"suffix": "in-hero",
-								"selector": ".rf-feature--in-hero"
-							},
-							"grid": {
-								"suffix": "in-grid",
-								"selector": ".rf-feature--in-grid"
-							}
-						},
-						"staticModifiers": [
-							{
-								"name": "definitions-grid",
-								"selector": ".rf-feature--definitions-grid"
-							}
-						],
-						"elements": {
-							"preamble": {
-								"tag": "header",
-								"selector": ".rf-feature__preamble",
-								"source": "autoLabel"
-							},
-							"eyebrow": {
-								"tag": "eyebrow",
-								"selector": ".rf-feature__eyebrow",
-								"source": "autoLabel"
-							},
-							"headline": {
-								"tag": "headline",
-								"selector": ".rf-feature__headline",
-								"source": "autoLabel"
-							},
-							"blurb": {
-								"tag": "blurb",
-								"selector": ".rf-feature__blurb",
-								"source": "autoLabel"
-							},
-							"image": {
-								"tag": "image",
-								"selector": ".rf-feature__image",
-								"source": "autoLabel"
-							},
-							"definitions": {
-								"tag": "dl",
-								"selector": ".rf-feature__definitions",
-								"source": "autoLabel"
-							}
-						},
-						"inlineStyles": {
-							"valign": {
-								"prop": "--split-valign"
-							}
-						}
-					},
-					"bottom": {
-						"block": "feature",
-						"root": ".rf-feature",
-						"dataRune": "feature",
-						"childOrder": [
-							"{content}"
-						],
-						"modifiers": {
-							"media-position": {
-								"source": "meta",
-								"default": "bottom",
-								"dataAttribute": "data-media-position"
-							},
-							"align": {
-								"source": "meta",
-								"default": "center",
-								"classPattern": ".rf-feature--{value}",
-								"dataAttribute": "data-align"
-							},
-							"media-ratio": {
-								"source": "meta",
-								"dataAttribute": "data-media-ratio"
-							},
-							"valign": {
-								"source": "meta",
-								"dataAttribute": "data-valign"
-							},
-							"collapse": {
-								"source": "meta",
-								"dataAttribute": "data-collapse"
-							}
-						},
-						"contextModifiers": {
-							"hero": {
-								"suffix": "in-hero",
-								"selector": ".rf-feature--in-hero"
-							},
-							"grid": {
-								"suffix": "in-grid",
-								"selector": ".rf-feature--in-grid"
-							}
-						},
-						"staticModifiers": [
-							{
-								"name": "definitions-grid",
-								"selector": ".rf-feature--definitions-grid"
-							}
-						],
-						"elements": {
-							"preamble": {
-								"tag": "header",
-								"selector": ".rf-feature__preamble",
-								"source": "autoLabel"
-							},
-							"eyebrow": {
-								"tag": "eyebrow",
-								"selector": ".rf-feature__eyebrow",
-								"source": "autoLabel"
-							},
-							"headline": {
-								"tag": "headline",
-								"selector": ".rf-feature__headline",
-								"source": "autoLabel"
-							},
-							"blurb": {
-								"tag": "blurb",
-								"selector": ".rf-feature__blurb",
-								"source": "autoLabel"
-							},
-							"image": {
-								"tag": "image",
-								"selector": ".rf-feature__image",
-								"source": "autoLabel"
-							},
-							"definitions": {
-								"tag": "dl",
-								"selector": ".rf-feature__definitions",
-								"source": "autoLabel"
-							}
-						},
-						"inlineStyles": {
-							"valign": {
-								"prop": "--split-valign"
-							}
-						}
-					}
-				}
 			}
 		},
 		"Definition": {

package/index.css

@@ -38,6 +38,7 @@
 @import './styles/dimensions/metadata.css';
 @import './styles/dimensions/density.css';
 @import './styles/dimensions/sections.css';
+@import './styles/dimensions/reading.css';
 @import './styles/dimensions/state.css';
 @import './styles/dimensions/media.css';
 @import './styles/dimensions/surfaces.css';
@@ -92,6 +93,7 @@
 @import './styles/runes/figure.css';
 @import './styles/runes/placeholder.css';
 @import './styles/runes/gallery.css';
+@import './styles/runes/carousel.css';
 @import './styles/runes/form.css';
 @import './styles/runes/grid.css';
 @import './styles/runes/hero.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.25.1",
+  "version": "0.26.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -86,10 +86,10 @@
     "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.25.1",
-    "@refrakt-md/skeleton": "0.25.1",
-    "@refrakt-md/transform": "0.25.1",
-    "@refrakt-md/types": "0.25.1"
+    "@refrakt-md/runes": "0.26.0",
+    "@refrakt-md/skeleton": "0.26.0",
+    "@refrakt-md/transform": "0.26.0",
+    "@refrakt-md/types": "0.26.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/reading.css

@@ -0,0 +1,35 @@
+@layer skin {
+/* Reading register (SPEC-108) — Lumina's editorial treatment of `[data-reading]`.
+ * The measure cap + niceties are structural (skeleton); this is the type, rhythm,
+ * and drop-cap glyph. `ui` (the default) is left to the base body styling. */
+
+/* Prose — long-form reading. */
+[data-reading="prose"] {
+	line-height: var(--rf-leading-relaxed);
+}
+[data-reading="prose"] > p {
+	margin-bottom: 1em;
+}
+[data-reading="prose"] a {
+	text-underline-offset: 0.15em;
+}
+
+/* Drop-cap glyph — the theme owns the treatment; the author owns where (the
+ * `dropcap` opt-in, honoured only on a prose body). */
+[data-reading="prose"][data-dropcap] > p:first-child::first-letter {
+	font-size: 3.5em;
+	font-weight: var(--rf-weight-bold);
+	line-height: 0.8;
+	padding-right: 0.1em;
+	margin-top: 0.05em;
+	color: var(--rf-color-primary);
+	font-family: Georgia, 'Times New Roman', serif;
+}
+
+/* Fine print — captions, footnotes, asides: smaller and quieter. */
+[data-reading="fine"] {
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-normal);
+	color: var(--rf-color-muted);
+}
+}

package/styles/runes/carousel.css

@@ -0,0 +1,18 @@
+@layer skin {
+/* Carousel — shared nav chrome (SPEC-100). The track structure + nav positioning
+ * are skeleton (styles/runes/carousel.css); this is the skin (colour/shape). */
+.rf-carousel__nav {
+	border-radius: 50%;
+	border: none;
+	background: var(--rf-color-surface);
+	color: var(--rf-color-text);
+	box-shadow: var(--rf-shadow-md);
+	cursor: pointer;
+	font-size: var(--rf-text-xl);
+	opacity: 0.8;
+	transition: opacity 0.2s;
+}
+.rf-carousel__nav:hover {
+	opacity: 1;
+}
+}

package/styles/runes/cast.css

@@ -2,18 +2,18 @@
 /* Cast */
 
 /* Members list — base */
-.rf-cast__members {
+.rf-cast__items {
 	padding: 0;
 	margin: 0;
 }
 
 /* Grid layout (default) */
-.rf-cast--grid .rf-cast__members {
+.rf-cast--grid .rf-cast__items {
 	gap: 1rem;
 }
 
 /* List layout */
-.rf-cast--list .rf-cast__members {
+.rf-cast--list .rf-cast__items {
 	gap: 0.75rem;
 }
 

package/styles/runes/feature.css

@@ -1,6 +1,7 @@
 @layer skin {
-/* Feature — skin. The preamble/eyebrow/content/definitions-grid/icon layout and
- * the media-position flip live in @refrakt-md/skeleton (styles/runes/feature.css). */
+/* Feature — skin. The preamble/eyebrow/content/definitions/icon layout, the
+ * `[data-layout]` arrangement, and the media-position flip live in
+ * @refrakt-md/skeleton (styles/runes/feature.css). */
 .rf-feature {
 	padding: 2.5rem 0 2rem;
 }
@@ -55,24 +56,24 @@
 .rf-feature[data-align="right"] h2 {
 	text-align: right;
 }
-/* Definitions stack in a single column by default; the `--definitions-grid`
- * modifier (SPEC-091 media-position variant: top/bottom) tiles them as a grid. */
-.rf-feature__definitions {
+/* Definitions skin. Arrangement + item chrome follow the `layout` axis
+ * (SPEC-099): `grid` tiles carded items; `list` stacks flat rows. */
+.rf-feature__items {
 	margin: 0;
 }
-.rf-feature--definitions-grid .rf-feature__definitions {
+.rf-feature[data-layout="grid"] .rf-feature__items,
+.rf-feature[data-layout="carousel"] .rf-feature__items {
 	gap: 1.5rem;
 }
-/* Beside layouts (media on start/end): definitions stay stacked (no grid
- * modifier) inside the content track. */
+/* Beside layouts (media on start/end): left-align the heading/preamble. */
 .rf-feature[data-media-position="start"] .rf-feature__preamble,
 .rf-feature[data-media-position="end"] .rf-feature__preamble,
 .rf-feature[data-media-position="start"] h2,
 .rf-feature[data-media-position="end"] h2 {
 	text-align: left;
 }
-.rf-feature[data-media-position="start"] .rf-feature__feature-item,
-.rf-feature[data-media-position="end"] .rf-feature__feature-item {
+/* List arrangement: items are flat rows, not carded tiles. */
+.rf-feature[data-layout="list"] .rf-feature__feature-item {
 	background: none;
 	border: none;
 	border-radius: 0;

package/styles/runes/gallery.css

@@ -27,20 +27,7 @@
 	text-align: center;
 	font-style: italic;
 }
-.rf-gallery__nav {
-	border-radius: 50%;
-	border: none;
-	background: var(--rf-color-surface);
-	color: var(--rf-color-text);
-	box-shadow: var(--rf-shadow-md);
-	cursor: pointer;
-	font-size: var(--rf-text-xl);
-	opacity: 0.8;
-	transition: opacity 0.2s;
-}
-.rf-gallery__nav:hover {
-	opacity: 1;
-}
+/* Carousel nav chrome is now the shared `.rf-carousel__nav` (styles/runes/carousel.css). */
 .rf-gallery[data-layout="masonry"] .rf-gallery__items {
 	column-gap: var(--rf-gallery-gap);
 }

package/styles/runes/preview.css

@@ -4,9 +4,10 @@
 	margin: 2rem 0;
 }
 
-/* Toolbar — transparent, controls float above the canvas */
+/* Toolbar — transparent, controls float above the canvas (flush to the canvas
+ * edges, no horizontal inset). */
 .rf-preview__toolbar {
-	padding: 0.25rem 0.25rem 0.5rem;
+	padding: 0.25rem 0 0.5rem;
 }
 .rf-preview__title {
 	font-size: var(--rf-text-xs);
@@ -16,7 +17,8 @@
 	letter-spacing: var(--rf-tracking-wider);
 }
 
-/* Controls container (view toggle + theme toggle) */
+/* Toolbar groups — view-mode toggle on the left, preview-only controls (viewport
+ * + theme) on the right. */
 .rf-preview__controls {
 	gap: 0.5rem;
 }

package/styles/runes/textblock.css

@@ -1,15 +1,8 @@
 @layer skin {
 
-/* Drop cap — decorative first letter */
-.rf-textblock--dropcap .rf-textblock__body > p:first-child::first-letter {
-	font-size: 3.5em;
-	font-weight: var(--rf-weight-bold);
-	line-height: 0.8;
-	padding-right: 0.1em;
-	margin-top: 0.05em;
-	color: var(--rf-color-primary);
-	font-family: Georgia, 'Times New Roman', serif;
-}
+/* Drop cap is now the universal SPEC-108 opt-in, styled on
+ * `[data-reading="prose"][data-dropcap]` (dimensions/reading.css); textblock's
+ * body reads as prose, so it inherits the treatment. */
 
 /* Lead paragraph — emphasized opening text */
 .rf-textblock--lead .rf-textblock__body > p:first-child {