@refrakt-md/lumina 0.15.0 → 0.16.1

package/styles/runes/progress.css

@@ -0,0 +1,49 @@
+/* progress — generic completion bar (SPEC-072 / WORK-285).
+ *
+ * Presentational: the fill width is driven by the `--rf-progress` custom
+ * property set on the root from the computed percent. Generalized from the
+ * former plan milestone progress bar.
+ */
+
+.rf-progress {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+	margin: var(--rf-spacing-sm) 0;
+}
+
+.rf-progress__label {
+	font-weight: 600;
+	color: var(--rf-color-text);
+}
+
+.rf-progress__value {
+	font-weight: 600;
+	color: var(--rf-color-text);
+	margin-left: auto;
+}
+
+.rf-progress__track {
+	flex-basis: 100%;
+	height: 0.5rem;
+	border-radius: var(--rf-radius-pill, 999px);
+	background: var(--rf-color-surface-hover);
+	overflow: hidden;
+}
+
+.rf-progress__fill {
+	display: block;
+	height: 100%;
+	width: var(--rf-progress, 0%);
+	border-radius: inherit;
+	background: var(--rf-color-primary);
+	transition: width 0.3s ease;
+}
+
+/* Sentiment variants tint the fill; the neutral default uses the primary.
+ * Token names follow the sentiment scheme in dimensions/metadata.css
+ * (positive→success, caution→warning, negative→danger). */
+.rf-progress--positive .rf-progress__fill { background: var(--rf-color-success); }
+.rf-progress--caution .rf-progress__fill { background: var(--rf-color-warning); }
+.rf-progress--negative .rf-progress__fill { background: var(--rf-color-danger); }

package/styles/runes/relationships.css

@@ -0,0 +1,132 @@
+/* Relationships — an entity's graph edges, grouped by kind (SPEC-072).
+ *
+ * Generic over kind: the rune emits `data-kind` on each item and a humanized
+ * group heading per kind. Mirrors collection's list chrome.
+ */
+
+.rf-relationships {
+	margin: var(--rf-spacing-md) 0;
+}
+
+.rf-relationships__preamble > :first-child { margin-top: 0; }
+
+.rf-relationships__empty {
+	color: var(--rf-color-muted);
+	font-size: 0.9375em;
+}
+
+.rf-relationships__items {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+}
+
+/* grid arranges edges into responsive columns; list stays a stacked flow.
+ * Mirrors collection: item chrome comes from the item (the card built-in, or
+ * a {% card %} in the body template), not the layout. */
+.rf-relationships[data-layout='grid'] .rf-relationships__items {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: var(--rf-spacing-md);
+	align-items: stretch;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__item {
+	display: flex;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__item > * {
+	flex: 1;
+	min-width: 0;
+}
+
+/* Grouped grid: the grid belongs to each group (its items are the cells), not
+ * to __items — whose children are the group blocks (or the accordion wrapper).
+ * Left on __items, each group collapses into a single column. So __items stacks
+ * the groups and each group becomes the grid, with its title spanning. */
+.rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-relationships__group),
+.rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-accordion) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-md);
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__group {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: var(--rf-spacing-md);
+	align-items: stretch;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__group-title {
+	grid-column: 1 / -1;
+}
+
+.rf-relationships__group {
+	margin-top: var(--rf-spacing-md);
+	display: flex;
+	flex-direction: column;
+	/* Tight default for the built-in inline shape (title + field spans). */
+	gap: var(--rf-spacing-xs);
+}
+.rf-relationships__group:first-child {
+	margin-top: 0;
+}
+/* Modestly roomier when items carry a body template (block content — more than
+ * a one-liner). Body-template items are marked `data-block` by the resolver;
+ * the built-in inline title+field rows are not. */
+.rf-relationships__group:has(.rf-relationships__item[data-block]) {
+	gap: var(--rf-spacing-sm);
+}
+
+.rf-relationships__group-title {
+	margin: 0 0 var(--rf-spacing-sm);
+	font-size: 0.875em;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+
+.rf-relationships__item {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+}
+/* Block-content item — let the body template (card / callout / etc.) fill the
+ * container width instead of shrink-fitting. Same `data-block` signal as the
+ * group spacing above; trim the template's outer block margins so the group
+ * `gap` governs spacing (works for any block content, not a wrapper element). */
+.rf-relationships__item[data-block] {
+	display: block;
+}
+.rf-relationships__item[data-block] > :first-child {
+	margin-top: 0;
+}
+.rf-relationships__item[data-block] > :last-child {
+	margin-bottom: 0;
+}
+
+/* Card chrome for the grid built-in (mirrors collection's __card). */
+.rf-relationships__card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-xs);
+	padding: var(--rf-spacing-md);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+}
+.rf-relationships__card:hover {
+	background: var(--rf-color-surface-hover);
+}
+
+.rf-relationships__title {
+	font-weight: 600;
+	color: var(--rf-color-text);
+	text-decoration: none;
+}
+.rf-relationships__title:hover {
+	color: var(--rf-color-primary);
+}
+
+.rf-relationships__field {
+	font-size: 0.875em;
+	color: var(--rf-color-muted);
+}

package/tokens/base.css

@@ -52,6 +52,20 @@
 	--rf-color-success-bg: #e0eee4;
 	--rf-color-success-border: #b8d4be;
 
+	/* WORK-304 — neutral tint for line highlight (the third
+	 * `[data-line-status]` value that snippet / codegroup / diff share).
+	 * Subtle surface tint so highlighted rows read as emphasized but not
+	 * status-coloured (which would compete with diff's add/remove channel
+	 * and the semantic palette above). `*-rail` is the optional left-edge
+	 * border colour; falls back to the primary accent via the consuming
+	 * CSS for themes that don't override it. */
+	--rf-color-line-highlight: color-mix(in srgb, var(--rf-color-text) 6%, transparent);
+	--rf-color-line-highlight-rail: var(--rf-color-primary, var(--rf-color-text));
+	/* Gutter colour for `pre[data-linenumbers]` line counter. Defers to
+	 * the existing muted text token by default; themes can pin a
+	 * dedicated hue without overriding muted. */
+	--rf-color-line-number: var(--rf-color-muted);
+
 	/* Radii */
 	--rf-radius-sm: 6px;
 	--rf-radius-md: 10px;

package/styles/runes/backlog.css

@@ -1,108 +0,0 @@
-/* Backlog */
-
-/* Group sections */
-.rf-backlog__group {
-	margin-bottom: 1.5rem;
-}
-.rf-backlog__group-title {
-	font-size: 0.8125rem;
-	font-weight: 700;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--rf-color-muted);
-	margin: 0 0 0.5rem;
-	padding-bottom: 0.375rem;
-	border-bottom: 1px solid var(--rf-color-border);
-}
-
-/* Cards — mini rune surface */
-.rf-backlog__card {
-	display: flex;
-	flex-direction: column;
-	gap: 0.375rem;
-	padding: 0.75rem 1rem;
-	border-radius: var(--rf-radius-md);
-	background: var(--rf-color-surface);
-	margin-bottom: 0.5rem;
-	transition: box-shadow 200ms ease;
-}
-.rf-backlog__card:hover {
-	box-shadow: var(--rf-shadow-md);
-}
-
-/* Card link — suppress underline */
-.rf-backlog__card-link {
-	text-decoration: none;
-	color: inherit;
-	display: flex;
-	flex-direction: column;
-	gap: 0.375rem;
-}
-.rf-backlog__card-link:hover {
-	text-decoration: none;
-}
-
-/* ─── Header row: ID left, status + progress right ──────────────────── */
-.rf-backlog__card [data-section="header"] {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 0.5rem;
-	margin-bottom: 0;
-}
-.rf-backlog__card-header-left,
-.rf-backlog__card-header-right {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.5rem;
-}
-
-/* Strip borders and pill styling from header badges — doubled class for specificity */
-.rf-backlog__card [data-section="header"] [data-meta-type][data-meta-type] {
-	border: none;
-	padding: 0;
-	border-radius: 0;
-}
-
-/* Suppress sentiment circles in header */
-.rf-backlog__card [data-section="header"] [data-meta-sentiment]::before {
-	display: none;
-}
-
-/* ─── Body: title ───────────────────────────────────────────────────── */
-.rf-backlog__card [data-section="title"] {
-	font-size: 0.9375rem;
-	font-weight: 600;
-}
-
-/* ─── Footer row: uniform secondary pills ───────────────────────────── */
-.rf-backlog__card [data-section="footer"] {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 0.375rem;
-}
-
-/* Normalize all footer pills to same size regardless of rank/type */
-.rf-backlog__card [data-section="footer"] [data-meta-type] {
-	font-size: 0.75rem;
-	padding: 0.25em 0.75em;
-	opacity: 1;
-}
-
-/* Checklist progress badge — plain text in header.
-   Override checklist dimension styles that match [data-checked]. */
-.rf-backlog__card-progress {
-	font-family: var(--rf-font-mono);
-	font-size: 0.75rem;
-	font-weight: 600;
-	color: var(--rf-color-muted);
-	border: none;
-	padding: 0;
-	padding-left: 0;
-	margin-left: 0;
-	position: static;
-}
-.rf-backlog__card-progress::before {
-	display: none;
-}

package/styles/runes/decision-log.css

@@ -1,46 +0,0 @@
-/* Decision Log */
-
-/* Entry list */
-.rf-decision-log__list {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.rf-decision-log__entry {
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-	padding: 0.75rem 1rem;
-	border-radius: var(--rf-radius-md);
-	background: var(--rf-color-surface);
-	margin-bottom: 0.5rem;
-	transition: box-shadow 200ms ease;
-}
-.rf-decision-log__entry:hover {
-	box-shadow: var(--rf-shadow-md);
-}
-
-/* Entry link — suppress underline */
-.rf-decision-log__link {
-	text-decoration: none;
-	color: inherit;
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-}
-.rf-decision-log__link:hover {
-	text-decoration: none;
-}
-
-/* Entry title — smaller than full rune */
-.rf-decision-log__entry [data-section="title"] {
-	font-size: 0.9375rem;
-	font-weight: 600;
-}
-
-/* Superseded/deprecated entries — muted with strikethrough */
-.rf-decision-log__entry[data-status="superseded"] [data-section="title"],
-.rf-decision-log__entry[data-status="deprecated"] [data-section="title"] {
-	color: var(--rf-color-muted);
-	text-decoration: line-through;
-}

package/styles/runes/plan-activity.css

@@ -1,87 +0,0 @@
-/* Plan Activity */
-.rf-plan-activity__list {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.rf-plan-activity__entry {
-	display: flex;
-	align-items: baseline;
-	gap: 0.5rem;
-	padding: 0.25rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
-	font-size: 0.8125rem;
-}
-.rf-plan-activity__entry:nth-child(odd) {
-	background: var(--rf-color-surface);
-}
-.rf-plan-activity__date {
-	font-family: var(--rf-font-mono);
-	font-size: 0.75rem;
-	color: var(--rf-color-muted);
-	white-space: nowrap;
-}
-.rf-plan-activity__type {
-	font-size: 0.75rem;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--rf-color-muted);
-	min-width: 4rem;
-}
-.rf-plan-activity__id {
-	font-family: var(--rf-font-mono);
-	font-size: 0.75rem;
-	color: var(--rf-color-primary);
-	white-space: nowrap;
-}
-.rf-plan-activity__status {
-	font-size: 0.75rem;
-	padding: 0.0625rem 0.375rem;
-	border-radius: var(--rf-radius-sm);
-	white-space: nowrap;
-}
-
-/* Status badge colors */
-.rf-plan-activity__status[data-status="done"],
-.rf-plan-activity__status[data-status="fixed"],
-.rf-plan-activity__status[data-status="accepted"] {
-	color: var(--rf-color-success);
-	background: var(--rf-color-success-bg);
-}
-.rf-plan-activity__status[data-status="in-progress"],
-.rf-plan-activity__status[data-status="confirmed"],
-.rf-plan-activity__status[data-status="review"] {
-	color: var(--rf-color-warning);
-	background: var(--rf-color-warning-bg);
-}
-.rf-plan-activity__status[data-status="ready"],
-.rf-plan-activity__status[data-status="reported"],
-.rf-plan-activity__status[data-status="proposed"] {
-	color: var(--rf-color-info);
-	background: var(--rf-color-info-bg);
-}
-.rf-plan-activity__status[data-status="blocked"] {
-	color: var(--rf-color-danger);
-	background: var(--rf-color-danger-bg);
-}
-.rf-plan-activity__status[data-status="draft"] {
-	color: var(--rf-color-muted);
-	background: var(--rf-color-surface-active);
-}
-.rf-plan-activity__title {
-	color: var(--rf-color-text);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.rf-plan-activity__link {
-	display: flex;
-	align-items: baseline;
-	gap: 0.5rem;
-	color: inherit;
-	text-decoration: none;
-	width: 100%;
-}
-.rf-plan-activity__link:hover .rf-plan-activity__title {
-	color: var(--rf-color-primary);
-}

package/styles/runes/plan-entity-tabs.css

@@ -1,88 +0,0 @@
-/* Plan Entity Tabs — page-level tab navigation for spec/work/bug/decision pages */
-
-.rf-plan-entity-tabs {
-	margin-block-start: var(--rf-spacing-lg, 1.5rem);
-}
-
-/* Tab bar — underline style matching the core tabs rune */
-.rf-plan-entity-tabs__tabs {
-	display: flex;
-	border-bottom: 1px solid var(--rf-color-border, #dee2e6);
-	gap: 0;
-}
-
-/* Tab buttons */
-.rf-plan-entity-tabs__tab {
-	flex: 0 0 auto;
-	padding: 0.625rem 1.25rem;
-	font-size: 0.875rem;
-	font-weight: 500;
-	font-family: inherit;
-	color: var(--rf-color-muted, #868e96);
-	background: none;
-	border: none;
-	border-bottom: 2px solid transparent;
-	cursor: pointer;
-	transition: color 200ms ease, border-color 200ms ease;
-	white-space: nowrap;
-}
-
-.rf-plan-entity-tabs__tab:hover {
-	color: var(--rf-color-text, #212529);
-}
-
-.rf-plan-entity-tabs__tab--active,
-.rf-plan-entity-tabs__tab[data-state="active"] {
-	color: var(--rf-color-primary, #228be6);
-	border-bottom-color: var(--rf-color-primary, #228be6);
-	font-weight: 600;
-}
-
-/* Panels container */
-.rf-plan-entity-tabs__panels {
-	padding: 0;
-	margin: 0;
-}
-
-/* Individual panel */
-.rf-plan-entity-tabs__panel {
-	padding-block-start: var(--rf-spacing-lg, 1.5rem);
-}
-
-.rf-plan-entity-tabs__panel > *:first-child {
-	margin-top: 0;
-}
-
-.rf-plan-entity-tabs__panel > *:last-child {
-	margin-bottom: 0;
-}
-
-/* When inside entity tabs, relationships and history sections don't need
-   their own heading — the tab label provides the context */
-.rf-plan-entity-tabs__panel .rf-plan-relationships__heading,
-.rf-plan-entity-tabs__panel .rf-plan-history__heading {
-	display: none;
-}
-
-/* Remove top margin, padding, and border from relationships/history sections when inside a tab panel */
-.rf-plan-entity-tabs__panel .rf-plan-relationships,
-.rf-plan-entity-tabs__panel .rf-plan-history {
-	margin-block-start: 0;
-	padding-block-start: 0;
-	border-block-start: none;
-}
-
-/* ---- TOC dimming when non-Overview tab is active ---- */
-
-/* Desktop TOC: dim when a non-overview tab is active */
-:has([data-active-tab]:not([data-active-tab="overview"])) .rf-plan-toc {
-	opacity: 0.3;
-	pointer-events: none;
-	transition: opacity 200ms ease;
-}
-
-:has([data-active-tab="overview"]) .rf-plan-toc {
-	opacity: 1;
-	pointer-events: auto;
-	transition: opacity 200ms ease;
-}

package/styles/runes/plan-relationships.css

@@ -1,40 +0,0 @@
-/* Plan relationships section */
-
-.rf-plan-relationships {
-	margin-top: 2rem;
-	padding-top: 1.5rem;
-	border-top: 1px solid var(--rf-color-border, #dee2e6);
-}
-
-.rf-plan-relationships__heading {
-	font-size: 1.125rem;
-	font-weight: 600;
-	color: var(--rf-color-text, #212529);
-	margin: 0 0 1rem;
-}
-
-.rf-plan-relationships__group {
-	margin-bottom: 1rem;
-}
-
-.rf-plan-relationships__group-title {
-	font-size: 0.8125rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--rf-color-muted, #6c757d);
-	margin: 0 0 0.375rem;
-}
-
-.rf-plan-relationships__group[data-kind="blocked-by"] .rf-plan-relationships__group-title {
-	color: var(--rf-color-danger, #ff6b6b);
-}
-
-.rf-plan-relationships__group[data-kind="blocks"] .rf-plan-relationships__group-title {
-	color: var(--rf-color-warning, #f59f00);
-}
-
-.rf-plan-relationships__cards {
-	display: flex;
-	flex-direction: column;
-}