@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/itinerary.css

@@ -1,144 +1,143 @@
 @layer skin {
-/* Itinerary */
-.rf-itinerary {
-	margin: 2rem 0;
-}
-.rf-itinerary > header {
-	margin-bottom: 1.5rem;
-}
+	/* Itinerary */
+	.rf-itinerary {
+		margin: 2rem 0;
+	}
+	.rf-itinerary > header {
+		margin-bottom: 1.5rem;
+	}
 
-/* Day grouping */
-.rf-itinerary-day {
-	margin-bottom: 2rem;
-}
-.rf-itinerary-day:last-child {
-	margin-bottom: 0;
-}
-.rf-itinerary-day__header {
-	font-size: var(--rf-text-lg);
-	font-weight: var(--rf-weight-bold);
-	color: var(--rf-color-text);
-	margin-bottom: 1rem;
-	padding-bottom: 0.5rem;
-	border-bottom: 2px solid var(--rf-color-border);
-}
-.rf-itinerary-day ol {
-	padding: 0;
-	margin: 0;
-}
+	/* Day grouping */
+	.rf-itinerary-day {
+		margin-bottom: 2rem;
+	}
+	.rf-itinerary-day:last-child {
+		margin-bottom: 0;
+	}
+	.rf-itinerary-day__header {
+		font-size: var(--rf-text-lg);
+		font-weight: var(--rf-weight-bold);
+		color: var(--rf-color-text);
+		margin-bottom: 1rem;
+		padding-bottom: 0.5rem;
+		border-bottom: 2px solid var(--rf-color-border);
+	}
+	.rf-itinerary-day ol {
+		padding: 0;
+		margin: 0;
+	}
 
-/* Stop */
-.rf-itinerary-stop {
-	padding-left: 2rem;
-	padding-bottom: 1.5rem;
-	border-left: 2px solid var(--rf-color-border);
-	margin-left: 0.375rem;
-}
-.rf-itinerary-stop:last-child {
-	border-left-color: transparent;
-	padding-bottom: 0;
-}
-.rf-itinerary-stop::before {
-	border-radius: 50%;
-	background: var(--rf-color-primary);
-	border: 2px solid var(--rf-color-bg);
-	box-shadow: 0 0 0 2px var(--rf-color-primary);
-}
+	/* Stop */
+	.rf-itinerary-stop {
+		padding-left: 2rem;
+		padding-bottom: 1.5rem;
+		border-left: 2px solid var(--rf-color-border);
+		margin-left: 0.375rem;
+	}
+	.rf-itinerary-stop:last-child {
+		border-left-color: transparent;
+		padding-bottom: 0;
+	}
+	.rf-itinerary-stop::before {
+		border-radius: 50%;
+		background: var(--rf-color-primary);
+		border: 2px solid var(--rf-color-bg);
+		box-shadow: 0 0 0 2px var(--rf-color-primary);
+	}
 
-/* Stop time */
-.rf-itinerary-stop__time {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-primary);
-	letter-spacing: var(--rf-tracking-wide);
-	margin-bottom: 0.15rem;
-}
+	/* Stop time */
+	.rf-itinerary-stop__time {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-primary);
+		letter-spacing: var(--rf-tracking-wide);
+		margin-bottom: 0.15rem;
+	}
 
-/* Stop location */
-.rf-itinerary-stop__location {
-	font-size: var(--rf-text);
-	font-weight: var(--rf-weight-bold);
-	color: var(--rf-color-text);
-	margin-bottom: 0.35rem;
-}
+	/* Stop location */
+	.rf-itinerary-stop__location {
+		font-size: var(--rf-text);
+		font-weight: var(--rf-weight-bold);
+		color: var(--rf-color-text);
+		margin-bottom: 0.35rem;
+	}
 
-/* Stop body */
-.rf-itinerary-stop__body {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-	color: var(--rf-color-muted);
-}
-.rf-itinerary-stop__body p:last-child {
-	margin-bottom: 0;
-}
+	/* Stop body */
+	.rf-itinerary-stop__body {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+		color: var(--rf-color-muted);
+	}
+	.rf-itinerary-stop__body p:last-child {
+		margin-bottom: 0;
+	}
 
-/* Duration badge */
-.rf-itinerary-stop[data-duration]::after {
-	content: attr(data-duration);
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-medium);
-	color: var(--rf-color-muted);
-	background: var(--rf-color-surface);
-	padding: 0.1rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
-}
+	/* Duration badge */
+	.rf-itinerary-stop[data-duration]::after {
+		content: attr(data-duration);
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-medium);
+		color: var(--rf-color-muted);
+		background: var(--rf-color-surface);
+		padding: 0.1rem 0.5rem;
+		border-radius: var(--rf-radius-sm);
+	}
 
-/* Activity variant dots */
-.rf-itinerary-stop--transport::before {
-	background: var(--rf-color-info);
-	box-shadow: 0 0 0 2px var(--rf-color-info);
-}
-.rf-itinerary-stop--food::before {
-	background: var(--rf-color-warning);
-	box-shadow: 0 0 0 2px var(--rf-color-warning);
-}
-.rf-itinerary-stop--sightseeing::before {
-	background: var(--rf-color-primary);
-	box-shadow: 0 0 0 2px var(--rf-color-primary);
-}
-.rf-itinerary-stop--lodging::before {
-	background: var(--rf-color-success);
-	box-shadow: 0 0 0 2px var(--rf-color-success);
-}
-.rf-itinerary-stop--activity::before {
-	background: var(--rf-color-primary);
-	box-shadow: 0 0 0 2px var(--rf-color-primary);
-}
-.rf-itinerary-stop--rest::before {
-	background: var(--rf-color-muted);
-	box-shadow: 0 0 0 2px var(--rf-color-muted);
-}
-
-/* Horizontal direction */
-.rf-itinerary--horizontal .rf-itinerary-day ol {
-	gap: 2rem;
-	padding: 2rem 0 1rem;
-}
-.rf-itinerary--horizontal .rf-itinerary-stop {
-	padding-left: 0;
-	padding-top: 1.5rem;
-	padding-bottom: 0;
-	border-left: none;
-	border-top: 2px solid var(--rf-color-border);
-	margin-left: 0;
-}
-.rf-itinerary--horizontal .rf-itinerary-stop:last-child {
-	border-top-color: transparent;
-}
-.rf-itinerary--horizontal .rf-itinerary-stop[data-duration]::after {
-	margin-top: 0.5rem;
-}
-.rf-itinerary--compact .rf-itinerary-stop {
-	padding-bottom: 0.75rem;
-}
-.rf-itinerary--compact .rf-itinerary-stop__location {
-	font-size: var(--rf-text-sm);
-}
-.rf-itinerary--compact .rf-itinerary-stop__time {
-	margin-bottom: 0;
-}
-.rf-itinerary--compact .rf-itinerary-stop__time::after {
-	content: ' — ';
-}
+	/* Activity variant dots */
+	.rf-itinerary-stop--transport::before {
+		background: var(--rf-color-info);
+		box-shadow: 0 0 0 2px var(--rf-color-info);
+	}
+	.rf-itinerary-stop--food::before {
+		background: var(--rf-color-warning);
+		box-shadow: 0 0 0 2px var(--rf-color-warning);
+	}
+	.rf-itinerary-stop--sightseeing::before {
+		background: var(--rf-color-primary);
+		box-shadow: 0 0 0 2px var(--rf-color-primary);
+	}
+	.rf-itinerary-stop--lodging::before {
+		background: var(--rf-color-success);
+		box-shadow: 0 0 0 2px var(--rf-color-success);
+	}
+	.rf-itinerary-stop--activity::before {
+		background: var(--rf-color-primary);
+		box-shadow: 0 0 0 2px var(--rf-color-primary);
+	}
+	.rf-itinerary-stop--rest::before {
+		background: var(--rf-color-muted);
+		box-shadow: 0 0 0 2px var(--rf-color-muted);
+	}
 
+	/* Horizontal direction */
+	.rf-itinerary--horizontal .rf-itinerary-day ol {
+		gap: 2rem;
+		padding: 2rem 0 1rem;
+	}
+	.rf-itinerary--horizontal .rf-itinerary-stop {
+		padding-left: 0;
+		padding-top: 1.5rem;
+		padding-bottom: 0;
+		border-left: none;
+		border-top: 2px solid var(--rf-color-border);
+		margin-left: 0;
+	}
+	.rf-itinerary--horizontal .rf-itinerary-stop:last-child {
+		border-top-color: transparent;
+	}
+	.rf-itinerary--horizontal .rf-itinerary-stop[data-duration]::after {
+		margin-top: 0.5rem;
+	}
+	.rf-itinerary--compact .rf-itinerary-stop {
+		padding-bottom: 0.75rem;
+	}
+	.rf-itinerary--compact .rf-itinerary-stop__location {
+		font-size: var(--rf-text-sm);
+	}
+	.rf-itinerary--compact .rf-itinerary-stop__time {
+		margin-bottom: 0;
+	}
+	.rf-itinerary--compact .rf-itinerary-stop__time::after {
+		content: " — ";
+	}
 }

package/styles/runes/juxtapose.css

@@ -1,86 +1,87 @@
 @layer skin {
-/* Juxtapose — skin. The panel clip/positioning, label placement, media fill, slider
+	/* Juxtapose — skin. The panel clip/positioning, label placement, media fill, slider
  * divider/handle positioning, toggle-bar flex, and meta/label hides live in
  * @refrakt-md/skeleton (styles/runes/juxtapose.css). */
-.rf-juxtapose__panels {
-	border-radius: var(--rf-radius-lg);
-	border: 1px solid var(--rf-color-border);
-	background: var(--rf-color-surface);
-}
-.rf-juxtapose-panel__name {
-	padding: 0.25rem 0.75rem;
-	background: rgba(0, 0, 0, 0.6);
-	color: white;
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	border-radius: var(--rf-radius-sm);
-}
-.rf-juxtapose__divider {
-	cursor: col-resize;
-}
-.rf-juxtapose:not([data-orientation="horizontal"]) .rf-juxtapose__divider {
-	background: var(--rf-color-bg, #fff);
-	box-shadow: var(--rf-shadow-sm);
-}
-.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider {
-	background: var(--rf-color-bg, #fff);
-	box-shadow: var(--rf-shadow-sm);
-	cursor: row-resize;
-}
-.rf-juxtapose__divider-handle {
-	border-radius: var(--rf-radius-full);
-	background: var(--rf-color-bg, #fff);
-	border: 2px solid var(--rf-color-border);
-	box-shadow: var(--rf-shadow-md);
-}
-.rf-juxtapose__divider-handle::before {
-	content: '\2194';
-	font-size: var(--rf-text);
-	color: var(--rf-color-muted);
-	line-height: 1;
-}
-.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider-handle::before {
-	content: '\2195';
-}
-.rf-juxtapose__divider:focus-visible {
-	outline: 2px solid var(--rf-color-primary);
-	outline-offset: 2px;
-}
-.rf-juxtapose__toggle-bar {
-	gap: 0.125rem;
-	padding: 0.125rem;
-	margin-bottom: 0.75rem;
-	background: var(--rf-color-surface-active);
-	border-radius: var(--rf-radius-full);
-}
-.rf-juxtapose__toggle-btn,
-.rf-juxtapose__toggle-btn[data-state] {
-	padding: 0.25rem 0.75rem;
-	border: none;
-	border-radius: var(--rf-radius-full);
-	background: transparent;
-	color: var(--rf-color-muted);
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-medium);
-	cursor: pointer;
-	transition: background 150ms ease, color 150ms ease;
-}
-.rf-juxtapose__toggle-btn:hover {
-	color: var(--rf-color-text);
-}
-.rf-juxtapose__toggle-btn--active,
-.rf-juxtapose__toggle-btn[data-state="active"] {
-	background: var(--rf-color-bg);
-	color: var(--rf-color-text);
-	box-shadow: var(--rf-shadow-xs);
-}
-.rf-juxtapose--fade .rf-juxtapose__panels {
-	cursor: pointer;
-}
-[data-section="media"] > .rf-juxtapose .rf-juxtapose__panels {
-	background: transparent;
-	border: 0;
-	border-radius: var(--rf-radius-media);
-}
-
+	.rf-juxtapose__panels {
+		border-radius: var(--rf-radius-lg);
+		border: 1px solid var(--rf-color-border);
+		background: var(--rf-color-surface);
+	}
+	.rf-juxtapose-panel__name {
+		padding: 0.25rem 0.75rem;
+		background: rgba(0, 0, 0, 0.6);
+		color: white;
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		border-radius: var(--rf-radius-sm);
+	}
+	.rf-juxtapose__divider {
+		cursor: col-resize;
+	}
+	.rf-juxtapose:not([data-orientation="horizontal"]) .rf-juxtapose__divider {
+		background: var(--rf-color-bg, #fff);
+		box-shadow: var(--rf-shadow-sm);
+	}
+	.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider {
+		background: var(--rf-color-bg, #fff);
+		box-shadow: var(--rf-shadow-sm);
+		cursor: row-resize;
+	}
+	.rf-juxtapose__divider-handle {
+		border-radius: var(--rf-radius-full);
+		background: var(--rf-color-bg, #fff);
+		border: 2px solid var(--rf-color-border);
+		box-shadow: var(--rf-shadow-md);
+	}
+	.rf-juxtapose__divider-handle::before {
+		content: "\2194";
+		font-size: var(--rf-text);
+		color: var(--rf-color-muted);
+		line-height: 1;
+	}
+	.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider-handle::before {
+		content: "\2195";
+	}
+	.rf-juxtapose__divider:focus-visible {
+		outline: 2px solid var(--rf-color-primary);
+		outline-offset: 2px;
+	}
+	.rf-juxtapose__toggle-bar {
+		gap: 0.125rem;
+		padding: 0.125rem;
+		margin-bottom: 0.75rem;
+		background: var(--rf-color-surface-active);
+		border-radius: var(--rf-radius-full);
+	}
+	.rf-juxtapose__toggle-btn,
+	.rf-juxtapose__toggle-btn[data-state] {
+		padding: 0.25rem 0.75rem;
+		border: none;
+		border-radius: var(--rf-radius-full);
+		background: transparent;
+		color: var(--rf-color-muted);
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-medium);
+		cursor: pointer;
+		transition:
+			background 150ms ease,
+			color 150ms ease;
+	}
+	.rf-juxtapose__toggle-btn:hover {
+		color: var(--rf-color-text);
+	}
+	.rf-juxtapose__toggle-btn--active,
+	.rf-juxtapose__toggle-btn[data-state="active"] {
+		background: var(--rf-color-bg);
+		color: var(--rf-color-text);
+		box-shadow: var(--rf-shadow-xs);
+	}
+	.rf-juxtapose--fade .rf-juxtapose__panels {
+		cursor: pointer;
+	}
+	[data-section="media"] > .rf-juxtapose .rf-juxtapose__panels {
+		background: transparent;
+		border: 0;
+		border-radius: var(--rf-radius-media);
+	}
 }

package/styles/runes/lore.css

@@ -1,37 +1,35 @@
 @layer skin {
+	/* Content */
+	.rf-lore__content {
+		transition: filter 0.3s ease;
+	}
+	.rf-lore__content ul,
+	.rf-lore__content ol {
+		padding-left: 1.5rem;
+	}
+	.rf-lore__content blockquote {
+		font-style: italic;
+	}
+	.rf-lore > span[property="title"] {
+		font-size: var(--rf-text-2xl);
+		font-weight: var(--rf-weight-bold);
+		margin-bottom: 0.5rem;
+		color: var(--rf-color-text);
+	}
 
-/* Content */
-.rf-lore__content {
-	transition: filter 0.3s ease;
-}
-.rf-lore__content ul,
-.rf-lore__content ol {
-	padding-left: 1.5rem;
-}
-.rf-lore__content blockquote {
-	font-style: italic;
-}
-.rf-lore > span[property="title"] {
-	font-size: var(--rf-text-2xl);
-	font-weight: var(--rf-weight-bold);
-	margin-bottom: 0.5rem;
-	color: var(--rf-color-text);
-}
-
-/* Spoiler mode */
-.rf-lore--spoiler .rf-lore__content {
-	filter: blur(5px);
-	user-select: none;
-}
-.rf-lore--spoiler::after {
-	content: 'Contains spoilers \2014 click to reveal';
-	padding: 0.5rem 1rem;
-	background: var(--rf-color-bg);
-	border-radius: var(--rf-radius-md);
-	font-size: var(--rf-text-sm);
-	font-weight: var(--rf-weight-medium);
-	color: var(--rf-color-muted);
-	cursor: pointer;
-}
-
+	/* Spoiler mode */
+	.rf-lore--spoiler .rf-lore__content {
+		filter: blur(5px);
+		user-select: none;
+	}
+	.rf-lore--spoiler::after {
+		content: "Contains spoilers \2014 click to reveal";
+		padding: 0.5rem 1rem;
+		background: var(--rf-color-bg);
+		border-radius: var(--rf-radius-md);
+		font-size: var(--rf-text-sm);
+		font-weight: var(--rf-weight-medium);
+		color: var(--rf-color-muted);
+		cursor: pointer;
+	}
 }