fractalstyler2 0.4.0 → 0.7.0

package/dist/styles/_05_shells.sass

@@ -0,0 +1,374 @@
+// ============================================================================
+// shells — L4. Canonical markups are canon: every class here implements the
+// markup registered in the registry. Overlay mechanics, the docs-frame roles
+// and the mobile TOC disclosure are authored to the registered behaviors.
+// Motion reads the motion tokens — presets reach everything.
+// ============================================================================
+
+@use 'sass:string'
+@use 'sass:list'
+@use 'sass:map'
+@use '01_config' as *
+
+$md: map.get($breakpoints, md)
+$lg: map.get($breakpoints, lg)
+$xl: map.get($breakpoints, xl)
+
+// --- The app-shell canon ------------------------------------------------------
+.app-shell
+	display: flex
+	flex-direction: column
+	position: relative
+	min-height: 100vh
+
+.app-header
+	display: flex
+	flex-direction: row
+	align-items: center
+	position: sticky
+	top: 0
+	z-index: var(--z-sticky)
+	height: var(--header-height)
+	padding-inline: calc(var(--space-sm) * var(--pad-scale, 1))
+	background: color-mix(in srgb, var(--bg-surface) 88%, transparent)
+	backdrop-filter: blur(12px)
+	-webkit-backdrop-filter: blur(12px)
+	border-bottom: 1px solid var(--border)
+
+.app-main
+	flex: 1 1 0%
+	min-width: 0
+	min-height: calc(100vh - var(--header-height) - var(--footer-height))
+	display: flex
+	flex-direction: row
+
+.main-section
+	flex: 1 1 0%
+	min-width: 0
+
+// --- Role-bound rails (Amendment A1) -------------------------------------------
+// Left = nav: visible ≥ lg; below, .open on .app-shell resurrects it as an
+// off-canvas drawer (the header menu button toggles it). Right = TOC: visible
+// ≥ xl; below, its content surfaces in .mobile-toc at the top of the page.
+.sidebar-left,
+.sidebar-right
+	display: none
+	flex-shrink: 0
+	position: sticky
+	top: var(--header-height)
+	height: calc(100vh - var(--header-height) - var(--footer-height))
+	overflow-y: auto
+	padding: calc(var(--space-sm) * var(--pad-scale, 1))
+
+.sidebar-left
+	width: var(--sidebar-width)
+
+.sidebar-right
+	width: var(--toc-width)
+
+@media (max-width: #{$lg - 1})
+	.app-shell.open .sidebar-left
+		display: block
+		position: fixed
+		left: 0
+		z-index: var(--z-modal)
+		width: min(85vw, var(--sidebar-width))
+		height: calc(100vh - var(--header-height) - var(--footer-height))
+		background: var(--bg)
+		border-right: 1px solid var(--border)
+
+@media #{string.unquote('(min-width: #{$lg})')}
+	.sidebar-left
+		display: block
+		border-right: 1px solid var(--border)
+
+@media #{string.unquote('(min-width: #{$xl})')}
+	.sidebar-right
+		display: block
+		border-left: 1px solid var(--border)
+
+.content-shell
+	max-width: var(--measure)
+	margin-inline: auto
+
+.app-footer
+	display: flex
+	flex-direction: row
+	align-items: center
+	padding-inline: calc(var(--space-sm) * var(--pad-scale, 1))
+	min-height: var(--footer-height)
+	border-top: 1px solid var(--border)
+
+// Page-top TOC dropdown — where the TOC lives below xl: <details class="mobile-toc">.
+.mobile-toc
+	padding: calc(var(--space-xs) * var(--pad-scale, 1))
+	border: 1px solid var(--border)
+	border-radius: var(--radius-md)
+	background: var(--bg-surface)
+	summary
+		display: flex
+		flex-direction: row
+		align-items: center
+		justify-content: space-between
+		font-weight: 500
+		font-size: var(--text-sm)
+		color: var(--text-primary)
+		cursor: pointer
+		user-select: none
+		list-style: none
+		&::-webkit-details-marker
+			display: none
+	&[open]
+		background: var(--bg-raised)
+		summary
+			padding-bottom: calc(var(--space-2xs) * var(--pad-scale, 1))
+			margin-bottom: calc(var(--space-xs) * var(--gap-scale, 1))
+			border-bottom: 1px solid var(--border)
+	@media #{string.unquote('(min-width: #{$xl})')}
+		display: none
+
+// --- Canonical shell roles — the tree (left rail) and the TOC (right rail) -----
+.navtree
+	display: flex
+	flex-direction: column
+	gap: calc(var(--space-sm) * var(--gap-scale, 1))
+
+// Flat group label — for groups that don't collapse (collapsible groups ride
+// the accordion family: trigger carries the title, content carries the links).
+.navtree-title
+	padding-inline: calc(var(--space-xs) * var(--pad-scale, 1))
+	font-size: var(--text-xs)
+	font-weight: 600
+	letter-spacing: 0.05em
+	text-transform: uppercase
+	color: var(--text-muted)
+
+.navtree-link
+	display: flex
+	align-items: center
+	padding-block: calc(var(--space-3xs) * var(--pad-scale, 1))
+	padding-inline: calc(var(--space-xs) * var(--pad-scale, 1))
+	font-size: var(--text-sm)
+	color: var(--text-secondary)
+	text-decoration: none
+	border-radius: var(--radius-sm)
+	transition: background var(--motion-fast) ease, color var(--motion-fast) ease
+	&:hover
+		background: var(--state-hover-subtle)
+		color: var(--text-primary)
+	&.active
+		background: var(--state-selected)
+		color: var(--text-primary)
+
+.navtree-sub
+	display: flex
+	flex-direction: column
+	gap: calc(var(--space-3xs) * var(--gap-scale, 1))
+	padding-left: calc(var(--space-sm) * var(--pad-scale, 1))
+
+.toc
+	display: flex
+	flex-direction: column
+	gap: calc(var(--space-xs) * var(--gap-scale, 1))
+
+.toc-title
+	padding-inline: calc(var(--space-xs) * var(--pad-scale, 1))
+	font-size: var(--text-xs)
+	font-weight: 600
+	letter-spacing: 0.05em
+	text-transform: uppercase
+	color: var(--text-muted)
+
+.toc-list
+	display: flex
+	flex-direction: column
+	gap: calc(var(--space-3xs) * var(--gap-scale, 1))
+	margin: 0
+	padding: 0
+	list-style: none
+
+.toc-link
+	display: block
+	font-size: var(--text-sm)
+	color: var(--text-secondary)
+	text-decoration: none
+	transition: color var(--motion-fast) ease
+	&:hover
+		color: var(--text-primary)
+	&.active
+		color: var(--theme-color)
+		font-weight: 500
+
+.toc-footer
+	margin-top: calc(var(--space-xs) * var(--gap-scale, 1))
+	padding-top: calc(var(--space-xs) * var(--pad-scale, 1))
+	border-top: 1px solid var(--border)
+	font-size: var(--text-xs)
+	color: var(--text-muted)
+
+// --- Tabs — current = .active; triggers carry native aria-selected -------------
+.tab-list
+	display: flex
+	flex-direction: row
+	gap: calc(var(--space-2xs) * var(--gap-scale, 1))
+	border-bottom: 1px solid var(--border)
+
+.tab-trigger
+	padding-block: calc(var(--space-2xs) * var(--pad-scale, 1))
+	padding-inline: calc(var(--space-xs) * var(--pad-scale, 1))
+	font-size: var(--text-sm)
+	color: var(--text-secondary)
+	background: transparent
+	border: 0
+	border-bottom: 2px solid transparent
+	margin-bottom: -1px
+	cursor: pointer
+	text-decoration: none
+	transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease
+	&:hover
+		color: var(--text-primary)
+	&.active
+		color: var(--text-primary)
+		border-bottom-color: var(--theme-color)
+
+// --- Page frames — padding ownership moves with full-bleed chrome ------------
+.page-shell
+	padding-inline: var(--page-gutter)
+	padding-block: calc(var(--space-md) * var(--pad-scale, 1))
+
+.page-split
+	display: grid
+	grid-template-columns: minmax(0, 1fr)
+	.page-main
+		min-width: 0
+		padding: var(--page-gutter)
+	.page-sidebar
+		display: none
+	@media #{string.unquote('(min-width: #{$md})')}
+		grid-template-columns: var(--sidebar-width) minmax(0, 1fr)
+		.page-sidebar
+			display: block
+			position: sticky
+			top: var(--header-height)
+			height: calc(100vh - var(--header-height) - var(--footer-height))
+			overflow-y: auto
+			border-right: 1px solid var(--border)
+
+// --- Overlays — shown via .open; triggers carry native aria ------------------
+.drawer
+	position: fixed
+	top: var(--header-height)
+	left: 0
+	z-index: var(--z-modal)
+	width: min(85vw, 320px)
+	height: calc(100dvh - var(--header-height))
+	padding: calc(var(--space-sm) * var(--pad-scale, 1))
+	overflow-y: auto
+	background: var(--bg)
+	border-right: 1px solid var(--border)
+	transform: translateX(-105%)
+	visibility: hidden
+	transition: transform var(--motion-base) var(--ease-out), visibility var(--motion-base)
+	&.open
+		transform: translateX(0)
+		visibility: visible
+
+.dialog
+	position: fixed
+	top: 50%
+	left: 50%
+	translate: 0 -4px
+	z-index: var(--z-modal)
+	max-width: min(92vw, 540px)
+	width: 100%
+	background: var(--bg-dialog)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-lg)
+	box-shadow: var(--shadow-lg)
+	opacity: 0
+	visibility: hidden
+	pointer-events: none
+	transition: opacity var(--motion-base) var(--ease-out), visibility var(--motion-base), translate var(--motion-base) var(--ease-out)
+	&.open,
+	&[open]
+		opacity: 1
+		visibility: visible
+		pointer-events: auto
+		translate: 0 0
+	&::backdrop
+		background: rgba(0, 0, 0, 0.5)
+
+.popover
+	position: absolute
+	top: calc(100% + 6px)
+	left: 0
+	z-index: var(--z-raised)
+	min-width: 200px
+	background: var(--bg-popover)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-md)
+	box-shadow: var(--shadow-md)
+	translate: 0 -4px
+	opacity: 0
+	visibility: hidden
+	pointer-events: none
+	transition: opacity var(--motion-fast) var(--ease-out), visibility var(--motion-fast), translate var(--motion-fast) var(--ease-out)
+	&.open
+		opacity: 1
+		visibility: visible
+		pointer-events: auto
+		translate: 0 0
+
+.accordion
+	display: flex
+	flex-direction: column
+	gap: calc(var(--space-2xs) * var(--gap-scale, 1))
+
+.accordion-item
+	border: 1px solid var(--border)
+	border-radius: var(--radius-md)
+	background: var(--bg-surface)
+	.accordion-content
+		display: grid
+		grid-template-rows: 0fr
+		padding: 0
+		transition: grid-template-rows var(--motion-base) var(--ease-out)
+	// The panel is what collapses. It needs min-height: 0 so the grid row can
+	// size it, and overflow: hidden so the content clips while closed — which
+	// is why it carries a name rather than being reached at by position.
+	.accordion-panel
+		overflow: hidden
+		min-height: 0
+	&.open .accordion-content
+		grid-template-rows: 1fr
+		padding: calc(var(--space-xs) * var(--pad-scale, 1))
+
+.accordion-trigger
+	display: flex
+	flex-direction: row
+	align-items: center
+	justify-content: space-between
+	width: 100%
+	min-height: var(--control-h-md)
+	padding: calc(var(--space-2xs) * var(--pad-scale, 1)) calc(var(--space-xs) * var(--pad-scale, 1))
+	font-weight: 500
+	font-size: var(--text-sm)
+	text-align: left
+	background: transparent
+	border: 0
+	cursor: pointer
+	user-select: none
+	&:hover
+		background: var(--bg-raised)
+	&:focus-visible
+		outline: 2px solid var(--ring)
+		outline-offset: -2px
+
+// --- .hero — documented sugar: .box.ycenter + gap-lg + pad-y-xl ---------------
+.hero
+	display: flex
+	flex-direction: column
+	align-items: center
+	justify-content: center
+	gap: calc(var(--space-lg) * var(--gap-scale, 1))
+	padding-block: calc(var(--space-xl) * var(--pad-scale, 1))

package/dist/styles/_06_visuals.sass

@@ -0,0 +1,236 @@
+// ============================================================================
+// dress — L5. Skin and compositions. Emission order within this file follows
+// Contract 5: bare dress before compositions. Components own their own hover
+// states; there is no standalone .hover / .transition (registry ruling).
+// All compositions read the --radius-* channels so shape presets reach them.
+// ============================================================================
+
+@use 'sass:string'
+@use 'sass:list'
+@use 'sass:map'
+@use '01_config' as *
+
+// --- Bare backgrounds (one declaration each) ----------------------------------
+.bg
+	background: var(--bg)
+.surface
+	background: var(--bg-surface)
+.raised
+	background: var(--bg-raised)
+.panel
+	background: var(--bg-panel)
+.footer
+	background: var(--bg-footer)
+.canvas
+	background: var(--bg-canvas)
+.terminal
+	background: var(--bg-terminal)
+
+// --- Ink ----------------------------------------------------------------------
+.text-primary
+	color: var(--text-primary)
+.text-secondary
+	color: var(--text-secondary)
+.text-muted
+	color: var(--text-muted)
+.text-inverse
+	color: var(--text-inverse)
+.text-theme
+	color: var(--theme-color)
+.text-success
+	color: var(--success)
+.text-warning
+	color: var(--warning)
+.text-danger
+	color: var(--danger)
+.text-info
+	color: var(--info)
+
+// Status fills, mirroring the status inks above. A dot or chip that carries the
+// status as a background had no composable form before these, which made it a
+// reason to open _08_own.sass.
+.bg-success
+	background: var(--success)
+.bg-warning
+	background: var(--warning)
+.bg-danger
+	background: var(--danger)
+.bg-info
+	background: var(--info)
+
+// --- Lines (the partition-law set) ---------------------------------------------
+.border
+	border: 1px solid var(--border)
+.border-subtle
+	border: 1px solid var(--border-subtle)
+.border-top
+	border-top: 1px solid var(--border)
+.border-right
+	border-right: 1px solid var(--border)
+.border-bottom
+	border-bottom: 1px solid var(--border)
+.border-left
+	border-left: 1px solid var(--border)
+
+// --- Typography -----------------------------------------------------------------
+.text-xs
+	font-size: var(--text-xs)
+.text-sm
+	font-size: var(--text-sm)
+.text-md
+	font-size: var(--text-md)
+.text-lg
+	font-size: var(--text-lg)
+.text-xl
+	font-size: var(--text-xl)
+.text-2xl
+	font-size: var(--text-2xl)
+.text-3xl
+	font-size: var(--text-3xl)
+.text-4xl
+	font-size: var(--text-4xl)
+
+.weight-400
+	font-weight: 400
+.weight-500
+	font-weight: 500
+.weight-600
+	font-weight: 600
+.weight-700
+	font-weight: 700
+
+.mono
+	font-family: var(--font-mono)
+.tt-u
+	text-transform: uppercase
+.tt-c
+	text-transform: capitalize
+
+.truncate
+	overflow: hidden
+	white-space: nowrap
+	text-overflow: ellipsis
+
+.clamp-1
+	display: -webkit-box
+	-webkit-line-clamp: 1
+	-webkit-box-orient: vertical
+	overflow: hidden
+.clamp-2
+	display: -webkit-box
+	-webkit-line-clamp: 2
+	-webkit-box-orient: vertical
+	overflow: hidden
+.clamp-3
+	display: -webkit-box
+	-webkit-line-clamp: 3
+	-webkit-box-orient: vertical
+	overflow: hidden
+
+.eyebrow
+	font-size: var(--text-sm)
+	text-transform: uppercase
+	letter-spacing: 0.06em
+	font-weight: 500
+	color: var(--text-muted)
+
+// --- Compositions (plain classes over the vocabulary, yours to restyle) ----------
+.card
+	display: flex
+	gap: calc(var(--space-sm) * var(--gap-scale, 1))
+	padding: calc(var(--space-md) * var(--pad-scale, 1))
+	background: var(--bg-surface)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-md)
+
+.field
+	display: flex
+	flex-direction: column
+	gap: calc(var(--space-3xs) * var(--gap-scale, 1))
+
+.field-label
+	font-size: var(--text-xs)
+	font-weight: 500
+	color: var(--text-secondary)
+
+.field-error
+	font-size: var(--text-xs)
+	color: var(--danger)
+
+.avatar
+	width: 32px
+	height: 32px
+	flex-shrink: 0
+	border-radius: var(--radius-full)
+	overflow: hidden
+	&:is(img)
+		object-fit: cover
+	img
+		width: 100%
+		height: 100%
+		object-fit: cover
+
+.divider
+	border: 0
+	border-top: 1px solid var(--border)
+	margin-block: calc(var(--space-sm) * var(--gap-scale, 1))
+
+.kbd
+	display: inline-block
+	padding-inline: calc(var(--space-2xs) * var(--pad-scale, 1))
+	padding-block: 2px
+	font-family: var(--font-mono)
+	font-size: var(--text-xs)
+	line-height: 1.4
+	background: var(--bg-raised)
+	color: var(--text-primary)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-sm)
+
+.switch-track
+	display: inline-flex
+	align-items: center
+	width: 40px
+	height: 22px
+	padding: 2px
+	background: var(--bg-raised)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-full)
+	cursor: pointer
+	transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease
+
+.switch-thumb
+	width: 16px
+	height: 16px
+	background: var(--text-inverse)
+	border-radius: var(--radius-full)
+	box-shadow: var(--shadow-sm)
+	transition: translate var(--motion-fast) ease
+
+.switch-track[aria-checked='true'],
+.switch-track.checked
+	background: var(--theme-color)
+	border-color: var(--theme-color)
+	.switch-thumb
+		translate: 18px 0
+
+// --- Responsive visibility -----------------------------------------------------
+.hide-mobile
+	@media #{string.unquote(map.get($responsive-modes, 'mob'))}
+		display: none
+
+.hide-desktop
+	@media #{string.unquote(map.get($responsive-modes, 'desk'))}
+		display: none
+
+.only-mobile
+	@media #{string.unquote(map.get($responsive-modes, 'desk'))}
+		display: none
+
+// Shadows — token channels; per-mode values live in tokens.
+.shadow-sm
+	box-shadow: var(--shadow-sm)
+.shadow-md
+	box-shadow: var(--shadow-md)
+.shadow-lg
+	box-shadow: var(--shadow-lg)

package/dist/styles/_07_interactions.sass

@@ -0,0 +1,112 @@
+.badge
+	display: inline-flex
+	align-items: center
+	gap: calc(var(--space-3xs) * var(--gap-scale, 1))
+	padding-inline: calc(var(--space-2xs) * var(--pad-scale, 1))
+	padding-block: 2px
+	font-size: var(--text-xs)
+	font-weight: 500
+	background: var(--bg-raised)
+	color: var(--text-secondary)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-sm)
+
+.input
+	display: block
+	width: 100%
+	height: var(--control-h-md)
+	padding-inline: calc(var(--space-xs) * var(--pad-scale, 1))
+	font-size: var(--text-sm)
+	line-height: 1.5
+	background: var(--bg-input)
+	color: var(--text-primary)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-sm)
+	&:focus-visible
+		outline: none
+		border-color: var(--theme-color)
+		box-shadow: 0 0 0 2px var(--ring)
+
+.select
+	display: block
+	width: 100%
+	height: var(--control-h-md)
+	padding-inline: calc(var(--space-xs) * var(--pad-scale, 1))
+	padding-right: 28px
+	font-size: var(--text-sm)
+	appearance: none
+	-webkit-appearance: none
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
+	background-repeat: no-repeat
+	background-position: right 8px center
+	background-color: var(--bg-input)
+	color: var(--text-primary)
+	border: 1px solid var(--border)
+	border-radius: var(--radius-sm)
+	cursor: pointer
+	&:focus-visible
+		outline: none
+		border-color: var(--theme-color)
+		box-shadow: 0 0 0 2px var(--ring)
+
+// --- The link family -------------------------------------------------------------
+.link
+	color: var(--theme-color)
+	text-decoration: none
+	&:hover
+		text-decoration: underline
+
+.link-plain
+	color: inherit
+	text-decoration: none
+
+.link-parent
+	&:hover
+		.link,
+		.link-plain
+			color: var(--theme-color-alt)
+
+// --- The button quartet (nested — never standalone) -----------------------------
+.button
+	display: inline-flex
+	align-items: center
+	justify-content: center
+	height: var(--control-h-md)
+	padding-inline: calc(var(--space-sm) * var(--pad-scale, 1))
+	border: 1px solid transparent
+	border-radius: var(--radius-sm)
+	font-weight: 500
+	font-size: var(--text-sm)
+	text-decoration: none
+	cursor: pointer
+	user-select: none
+	transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease
+	&:focus-visible
+		outline: 2px solid var(--ring)
+		outline-offset: 1px
+	&:disabled
+		opacity: 0.5
+		cursor: not-allowed
+		pointer-events: none
+	&.primary
+		background: var(--theme-color)
+		color: var(--text-inverse)
+		&:hover
+			background: var(--theme-color-alt)
+	&.ghost
+		background: none
+		border: none
+		color: var(--text-primary)
+		&:hover
+			background: var(--bg-raised)
+	&.active
+		background: var(--state-selected)
+		border-color: var(--border)
+		color: var(--text-primary)
+	&.is-icon
+		padding: 0
+		background: 0
+		border: 0
+		color: var(--text-primary)
+		&:hover
+			color: var(--theme-color)

package/dist/styles/_08_own.sass

@@ -0,0 +1,4 @@
+// =============================================================================
+// 11_OWN — bespoke project-specific styles and micro-components.
+// =============================================================================
+