@fractaldesign/fractalstyler 0.0.0-stage → 0.9.0

package/dist/styles/_03_typography.sass

@@ -0,0 +1,170 @@
+@use 'sass:string'
+@use 'sass:list'
+@use 'sass:map'
+@use '00_config' as *
+@use '00_tokens' as *
+
+//primitives - they are simply class versions of the text tokens defined in tokens file
+.text-xs
+	font-size: var(--text-xs)
+.text-sm
+	font-size: var(--text-sm)
+.text-md
+	font-size: var(--text-md)
+.text-bs
+	font-size: var(--text-bs)
+.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)
+.text-5xl
+	font-size: var(--text-5xl)
+
+//semantics - definitions of what text to actually use where
+.text-body
+	font-size: var(--text-bs)
+	line-height: 1.5
+.text-body-lg
+	font-size: var(--text-lg)
+	line-height: 1.5
+.text-body-sm
+	font-size: var(--text-sm)
+	line-height: 1.5
+.page-title
+	font-size: var(--text-3xl)
+	line-height: 1.1
+	font-weight: 700
+	letter-spacing: -0.02rem
+.page-desc
+	font-size: var(--text-lg)
+	line-height: 1.2
+.page-heading-xl
+	font-size: var(--text-xl)
+	line-height: 1.1
+	font-weight: 600
+	letter-spacing: -0.03rem
+.page-heading-lg
+	font-size: var(--text-lg)
+	line-height: 1.1
+	font-weight: 600
+	letter-spacing: -0.03rem
+.page-heading-bs
+	font-size: var(--text-bs)
+	line-height: 1.1
+	font-weight: 600
+	letter-spacing: -0.02rem
+.card-title
+	font-size: var(--text-lg)
+	font-weight: 600
+	line-height: 1.2
+.card-desc
+	font-size: var(--text-md)
+	line-height: 1.2
+.breadcrumb-link, .breadcrumb-spacer
+	color: var(--text-muted)
+	font-size: var(--text-xs)
+	text-transform: uppercase
+.breadcrumb-link
+	&:hover
+		color: var(--theme-color)
+.breadcrumb
+	display: flex
+	justify-content: flex-start
+	margin-left: -0.5rem
+
+//navigation text in headers, sidebars, etc.
+.nav-link
+	font-size: var(--text-md)
+	line-height: 1.2
+.nav-link-sm
+	font-size: var(--text-sm)
+	line-height: 1.2
+.nav-header
+	font-size: var(--text-sm)
+	line-height: 1.1
+	font-weight: 500
+	padding: var(--space-sm)
+.header-nav
+	a
+		text-transform: uppercase
+		font-size: var(--text-md)
+		font-weight: 500
+		&:hover
+			color: var(--theme-color)
+
+//line height modifiers
+.lh11
+	line-height: 1.1
+.lh12
+	line-height: 1.2
+.lh13
+	line-height: 1.3
+.lh14
+	line-height: 1.4
+.lh15
+	line-height: 1.5
+.lh16
+	line-height: 1.6
+
+//letter-spacing modifiers
+.ls-tight-bs
+	letter-spacing: -0.01rem
+.ls-tight-lg
+	letter-spacing: -0.02rem
+.ls-tight-xl
+	letter-spacing: -0.03rem
+.ls-wide-bs
+	letter-spacing: 0.01rem
+.ls-wide-lg
+	letter-spacing: 0.02rem
+.ls-wide-xl
+	letter-spacing: 0.03rem
+
+//font weight modifiers
+.weight-300
+	font-weight: 300
+.weight-400
+	font-weight: 400
+.weight-500
+	font-weight: 500
+.weight-600
+	font-weight: 600
+.weight-700
+	font-weight: 700
+.weight-800
+	font-weight: 800
+
+//text transformers and aligners
+.tt-u
+	text-transform: uppercase
+.tt-c
+	text-transform: capitalize
+.ta-c
+	text-align: center
+	&.mleft
+		@media (max-width: 1024px)
+			text-align: left
+.ta-l
+	text-align: left
+.ta-r
+	text-align: right
+	&.mleft
+		@media (max-width: 1024px)
+			text-align: left
+
+//font usage shorthands
+.mono
+	font-family: var(--font-mono)
+.sans
+	font-family: var(--font-sans)
+
+.truncate
+	overflow: hidden
+	white-space: nowrap
+	text-overflow: ellipsis

package/dist/styles/_04_containers.sass

@@ -0,0 +1,173 @@
+// ============================================================================
+// flow — L2. Containers and the alignment universe, verbatim from the
+// registry. Alignment classes are nested under their base — never standalone.
+// x/y are physical axes, always (Contract 4).
+// ============================================================================
+.box
+	display: flex
+	flex-direction: column
+	&.xcenter
+		align-items: center
+		text-align: center
+	&.xleft
+		align-items: flex-start
+		text-align: left
+	&.xright
+		align-items: flex-end
+		text-align: right
+	&.ycenter
+		justify-content: center
+	&.ytop
+		justify-content: flex-start
+	&.ybot
+		justify-content: flex-end
+	&.ybetween
+		justify-content: space-between
+	&.yevenly
+		justify-content: space-evenly
+	&.yaround
+		justify-content: space-around
+
+.row
+	display: flex
+	flex-direction: row
+	&.xleft
+		justify-content: flex-start
+	&.xcenter
+		justify-content: center
+	&.xright
+		justify-content: flex-end
+	&.xbetween
+		justify-content: space-between
+	&.xevenly
+		justify-content: space-evenly
+	&.xaround
+		justify-content: space-around
+	&.ycenter
+		align-items: center
+	&.ytop
+		align-items: flex-start
+	&.ybot
+		align-items: flex-end
+
+.grid
+	display: grid
+	&.center
+		place-items: center
+	&.xcenter
+		justify-items: center
+		text-align: center
+	&.xleft
+		justify-items: start
+		text-align: left
+	&.xright
+		justify-items: end
+		text-align: right
+	&.xstretch
+		justify-items: stretch
+	&.ycenter
+		align-items: center
+	&.ytop
+		align-items: start
+	&.ybot
+		align-items: end
+	&.ystretch
+		align-items: stretch
+	&.xbetween
+		justify-content: space-between
+	&.xevenly
+		justify-content: space-evenly
+	&.xaround
+		justify-content: space-around
+	&.ybetween
+		align-content: space-between
+	&.yevenly
+		align-content: space-evenly
+	&.yaround
+		align-content: space-around
+
+.wrap
+	flex-wrap: wrap
+
+.grow
+	flex: 1 1 0%
+
+.shrink-0
+	flex-shrink: 0
+
+.relative
+	position: relative
+.absolute
+	position: absolute
+.fixed
+	position: fixed
+.sticky
+	position: sticky
+
+// Scroll containers. A panel that has to hold more than fits — a long option
+// list, a code block, a table — is a composition primitive, not a bespoke
+// widget. Without these the only way to express it was a hand-written rule,
+// which is the escape hatch the registry exists to avoid.
+// Pair with a height: .scroll-y needs one to have anything to scroll against.
+.scroll-y // Vertical scroll inside a bounded height; needs an .h-* or a constraining flex parent
+	overflow-y: auto
+	overflow-x: hidden
+	overscroll-behavior: contain
+
+.scroll-x // Horizontal scroll inside a bounded width; .reel adds snap points
+	overflow-x: auto
+	overflow-y: hidden
+	overscroll-behavior: contain
+
+.card
+	padding: var(--space-bs)
+	border: 1px solid var(--border)
+	background: var(--bg-panel)
+	svg.arrow
+		color: var(--theme-color)
+		transition: transform var(--speed1) var(--transout1)
+	footer
+		margin-top: auto
+	&[data-shape="modern"]
+		border-radius: var(--radius-sm)
+	&:hover
+		svg
+			transform: translateX(2rem)
+
+.chip
+	font-size: var(--text-xs)
+	font-weight: 500
+	letter-spacing: 0.01rem
+	padding: var(--space-xs) var(--space-sm)
+	border-radius: var(--radius-md)
+
+.prose-section
+	display: flex
+	flex-direction: column
+	gap: var(--space-lg)
+
+.nav-section
+	display: flex
+	flex-direction: column
+	gap: var(--space-xs)
+
+.page-header
+	display: flex
+	flex-direction: column
+	padding-bottom: var(--space-2xl)
+	gap: var(--space-sm)
+
+.inputs-wrapper
+	display: flex
+	gap: var(--space-xs)
+	label
+		font-size: var(--text-sm)
+		color: var(--text-muted)
+
+.checkbox-wrapper
+	display: flex
+	align-items: center
+	gap: var(--space-xs)
+	span
+		font-size: var(--text-sm)
+		font-weight: 500

package/dist/styles/_05_layouts.sass

@@ -0,0 +1,104 @@
+// ============================================================================
+// layouts — L3. Grids (gridding golden rules), card-grid, prose, frame
+// presets, reel. Grids are pure stepping: no default gap — compose .gap-*
+// (self-sufficiency; a default gap is an opinion the system doesn't hold).
+// ============================================================================
+
+@use 'sass:string'
+@use 'sass:list'
+@use 'sass:map'
+@use '00_config' as *
+@use '00_tokens' as *
+
+// Gridding golden rules: exactly 3 items → 3→1, never 2+1; count 4 or a
+// multiple of 4 → 4→2→1, never 3+1; 6 → 6→3→2→1 (both rules hold throughout).
+.grid-1
+	display: grid
+	grid-template-columns: repeat(1, minmax(0, 1fr))
+
+.grid-2
+	display: grid
+	grid-template-columns: repeat(1, minmax(0, 1fr))
+	@media (min-width: 1025px)
+		grid-template-columns: repeat(2, minmax(0, 1fr))
+
+.grid-3
+	display: grid
+	grid-template-columns: repeat(1, minmax(0, 1fr))
+	@media (min-width: 1025px)
+		grid-template-columns: repeat(3, minmax(0, 1fr))
+
+.grid-4
+	display: grid
+	grid-template-columns: repeat(1, minmax(0, 1fr))
+	@media (min-width: 1025px)
+		grid-template-columns: repeat(2, minmax(0, 1fr))
+	@media (min-width: 1281px)
+		grid-template-columns: repeat(4, minmax(0, 1fr))
+
+.grid-6
+	display: grid
+	grid-template-columns: repeat(1, minmax(0, 1fr))
+	@media (min-width: 1025px)
+		grid-template-columns: repeat(3, minmax(0, 1fr))
+	@media (min-width: 1281px)
+		grid-template-columns: repeat(6, minmax(0, 1fr))
+
+.cspan-1
+	grid-column: span 1
+.cspan-2
+	grid-column: span 2
+.cspan-3
+	grid-column: span 3
+.cspan-4
+	grid-column: span 4
+.cspan-5
+	grid-column: span 5
+.cspan-6
+	grid-column: span 6
+.cspan-7
+	grid-column: span 7
+.cspan-8
+	grid-column: span 8
+
+// Auto-fit repeatable cards — column count negotiable, min track from config.
+.card-grid
+	display: grid
+	grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr))
+
+// Prose — the reading measure (≤ 760px) + typographic rhythm (rhythm authored).
+.prose
+	max-width: var(--prose-clamp)
+	margin-inline: auto
+	display: flex
+	flex-direction: column
+	gap: var(--space-sm)
+	h1, h2, h3, h4
+		&:first-child
+			margin-top: 0
+
+// Frame presets — aspect-ratio media boxes (replaces any frame abstraction).
+@each $name, $ratio in $frame-ratios
+	.frame-#{$name}
+		aspect-ratio: #{$ratio}
+		overflow: hidden
+		position: relative
+		img, video, iframe, svg
+			width: 100%
+			height: 100%
+			object-fit: cover
+
+// Reel — the human-driven scroll-snap rail (filmstrip). Open for carousel duty.
+.reel
+	display: flex
+	flex-direction: row
+	overflow-x: auto
+	overscroll-behavior-inline: contain
+	scroll-snap-type: inline mandatory
+	// The system's one permitted `>`. Snap targets must be the rail's own
+	// children: a descendant selector would make nested elements snap too and
+	// the rail would catch in the wrong places. Kept deliberately — see the
+	// combinator guard in scripts/validate-deck.js.
+	> *
+		flex: 0 0 auto
+		scroll-snap-align: start

package/dist/styles/_06_shells.sass

@@ -0,0 +1,135 @@
+// ============================================================================
+// 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 '00_config' as *
+@use '00_tokens' as *
+
+$md: map.get($breakpoints, md)
+$bs: map.get($breakpoints, bs)
+$lg: map.get($breakpoints, lg)
+
+// --- 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: var(--app-inline)
+	background: var(--bg-surface)
+	&.clamped
+		width: var(--content-clamp)
+		margin-inline: auto
+
+.app-main
+	flex: 1 1 0%
+	min-width: 0
+	min-height: calc(100dvh - var(--fit-height))
+	display: flex
+	flex-direction: row
+	padding-inline: var(--app-inline)
+	&.clamped
+		width: var(--content-clamp)
+		margin-inline: auto
+
+.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(100dvh - var(--fit-height))
+	overflow-y: auto
+	padding-block: var(--space-2xl)
+	ul, ol
+		margin-left: 0
+		padding-left: 0
+
+.sidebar-left
+	width: var(--sidebar-width-left)
+
+.sidebar-right
+	width: var(--sidebar-width-right)
+
+@media (max-width: #{$bs})
+	.app-shell.open .sidebar-left
+		display: block
+		position: fixed
+		left: 0
+		z-index: var(--z-modal)
+		height: var(--fit-height)
+
+@media (min-width: 1025px)
+	.sidebar-left
+		display: block
+
+@media (min-width: 1281px)
+	.sidebar-right
+		display: block
+
+.app-footer
+	display: flex
+	flex-direction: row
+	align-items: center
+	padding-inline: var(--app-inline)
+	min-height: var(--footer-height)
+
+.content-section
+	width: 100%
+	padding: var(--space-2xl) 0
+	&.null
+		padding: 0 var(--space-bs)
+	@media (min-width: 769px)
+		padding: var(--space-2xl) var(--space-bs)
+		&.narrow-half
+			padding: var(--space-2xl) 0
+			width: 640px
+			margin-inline: auto
+		&.narrow-wide
+			padding: var(--space-2xl) 0
+			width: 720px
+			margin-inline: auto
+	@media (min-width: 1025px)
+		padding: var(--space-2xl) var(--space-bs)
+		&.narrow-full
+			width: 640px
+			margin-inline: auto
+		&.narrow-half
+			width: 750px
+			padding-right: 25px
+		&.narrow-wide
+			width: 750px
+	@media (min-width: 1281px)
+		&.narrow-full
+			width: 680px
+		&.narrow-half
+			width: 800px
+			padding-right: 120px
+		&.narrow-wide
+			width: 1024px
+	@media (min-width: 1441px)
+		&.narrow-wide
+			width: 1280px