@refrakt-md/lumina 0.8.0 → 0.8.1

package/base.css

@@ -20,3 +20,7 @@
 @import './styles/layouts/on-this-page.css';
 @import './styles/layouts/search.css';
 @import './styles/layouts/version-switcher.css';
+@import './styles/layouts/split.css';
+
+/* Universal Rune Attributes */
+@import './styles/base/attributes.css';

package/contracts/structures.json

@@ -1184,6 +1184,11 @@
 					"tag": "image",
 					"selector": ".rf-feature__image",
 					"source": "autoLabel"
+				},
+				"definitions": {
+					"tag": "dl",
+					"selector": ".rf-feature__definitions",
+					"source": "autoLabel"
 				}
 			},
 			"inlineStyles": {
@@ -1198,15 +1203,6 @@
 				}
 			}
 		},
-		"FeatureDefinition": {
-			"block": "feature-definition",
-			"root": ".rf-feature-definition",
-			"dataRune": "feature-definition",
-			"parent": "Feature",
-			"childOrder": [
-				"{content}"
-			]
-		},
 		"Steps": {
 			"block": "steps",
 			"root": ".rf-steps",

package/html/index.ts

@@ -0,0 +1,28 @@
+import type { HtmlTheme } from '@refrakt-md/html';
+import manifest from '../manifest.json';
+import { defaultLayout, docsLayout, blogArticleLayout } from '@refrakt-md/transform';
+
+// Layout region metadata from the base theme manifest
+const layoutRegions: Record<string, { regions: string[]; requiredRegions?: string[] }> = {
+	default: { regions: ['header', 'footer'] },
+	docs: { regions: ['header', 'nav', 'sidebar', 'footer'], requiredRegions: ['nav'] },
+	'blog-article': { regions: ['header', 'sidebar', 'footer'] },
+};
+
+const layouts: Record<string, any> = {};
+for (const [name, def] of Object.entries(manifest.layouts)) {
+	layouts[name] = { ...layoutRegions[name], ...def };
+}
+
+const mergedManifest = { ...manifest, layouts };
+
+export { mergedManifest as manifest };
+
+export const theme: HtmlTheme = {
+	manifest: mergedManifest as any,
+	layouts: {
+		default: defaultLayout,
+		docs: docsLayout,
+		'blog-article': blogArticleLayout,
+	},
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and framework adapters",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -28,6 +28,10 @@
       "svelte": "./svelte/index.ts",
       "default": "./svelte/index.ts"
     },
+    "./html": {
+      "types": "./html/index.ts",
+      "default": "./html/index.ts"
+    },
     "./styles/runes/*.css": "./styles/runes/*.css",
     "./svelte/tokens.css": "./svelte/tokens.css",
     "./svelte/manifest": "./svelte/manifest.json"
@@ -40,20 +44,22 @@
     "styles",
     "contracts",
     "manifest.json",
-    "svelte"
+    "svelte",
+    "html"
   ],
   "scripts": {
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.8.0",
-    "@refrakt-md/transform": "0.8.0",
-    "@refrakt-md/types": "0.8.0",
-    "@refrakt-md/svelte": "0.8.0"
+    "@refrakt-md/runes": "0.8.1",
+    "@refrakt-md/transform": "0.8.1",
+    "@refrakt-md/types": "0.8.1",
+    "@refrakt-md/svelte": "0.8.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@sveltejs/kit": "^2.0.0"
+    "@sveltejs/kit": "^2.0.0",
+    "@refrakt-md/html": "0.8.1"
   },
   "devDependencies": {
     "postcss": "^8.4.0"
@@ -64,6 +70,9 @@
     },
     "@sveltejs/kit": {
       "optional": true
+    },
+    "@refrakt-md/html": {
+      "optional": true
     }
   }
 }

package/styles/runes/feature.css

@@ -57,7 +57,7 @@
 .rf-feature[data-align="right"] h2 {
 	text-align: right;
 }
-.rf-feature dl {
+.rf-feature__definitions {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
 	gap: 1.5rem;
@@ -74,40 +74,40 @@
 .rf-feature[data-layout="split-reverse"] h2 {
 	text-align: left;
 }
-.rf-feature[data-layout="split"] dl,
-.rf-feature[data-layout="split-reverse"] dl {
+.rf-feature[data-layout="split"] .rf-feature__definitions,
+.rf-feature[data-layout="split-reverse"] .rf-feature__definitions {
 	display: block;
 }
-.rf-feature[data-layout="split"] .rf-feature-definition,
-.rf-feature[data-layout="split-reverse"] .rf-feature-definition {
+.rf-feature[data-layout="split"] .rf-feature__feature-item,
+.rf-feature[data-layout="split-reverse"] .rf-feature__feature-item {
 	border: none;
 	background: none;
 	padding: 0.75rem 0;
 }
-.rf-feature-definition {
+.rf-feature__feature-item {
 	padding: 1.75rem;
 	border-radius: var(--rf-radius-md);
 	border: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg);
 }
-.rf-feature-definition dt {
+.rf-feature__feature-item dt {
 	font-weight: 650;
 	font-size: 1.125rem;
 	margin-bottom: 0.75rem;
 	letter-spacing: -0.01em;
 	color: var(--rf-color-text);
 }
-.rf-feature-definition dt:has(> .rf-icon) {
+.rf-feature__feature-item dt:has(> .rf-icon) {
 	display: flex;
 	flex-direction: column;
 }
-.rf-feature-definition dt > .rf-icon {
+.rf-feature__feature-item dt > .rf-icon {
 	width: 1.5rem;
 	height: 1.5rem;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-accent);
 }
-.rf-feature-definition dd {
+.rf-feature__feature-item dd {
 	margin: 0;
 	color: var(--rf-color-muted);
 	font-size: 0.9rem;
@@ -118,7 +118,7 @@
 .rf-feature--in-hero {
 	padding-top: 0;
 }
-.rf-feature--in-hero .rf-feature-definition {
+.rf-feature--in-hero .rf-feature__feature-item {
 	background: transparent;
 	border-color: rgba(255, 255, 255, 0.15);
 }

package/styles/runes/tabs.css

@@ -42,13 +42,7 @@
 .rf-tabs__image {
 	margin-bottom: 1rem;
 }
-.rf-tabs__tabs,
-.rf-tabs__panels {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.rf-tabs__bar {
+.rf-tabs__tabs {
 	display: flex;
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
@@ -56,7 +50,11 @@
 	overflow-y: hidden;
 	-webkit-overflow-scrolling: touch;
 }
-.rf-tabs__button {
+.rf-tabs__panels {
+	padding: 0;
+	margin: 0;
+}
+.rf-tab {
 	flex: 0 0 auto;
 	padding: 0.625rem 1.25rem;
 	font-size: 0.85rem;
@@ -71,11 +69,11 @@
 	margin-bottom: -1px;
 	font-family: inherit;
 }
-.rf-tabs__button:hover {
+.rf-tab:hover {
 	color: var(--rf-color-text);
 	background: var(--rf-color-surface-hover);
 }
-.rf-tabs__button--active {
+.rf-tab--active {
 	color: var(--rf-color-primary);
 	border-bottom-color: var(--rf-color-primary);
 	font-weight: 600;