fractalstyler2 0.4.1 → 0.7.0

package/dist/styles/_00_tokens.sass

@@ -28,8 +28,6 @@
 	--border-subtle: #EDF2F7
 	--theme-color: #04825B
 	--theme-color-alt: #047857
-	--theme: var(--theme-color)
-	--theme-hover: var(--theme-color-alt)
 	--success: #10B981
 	--success-hover: #059669
 	--warning: #F59E0B
@@ -40,6 +38,10 @@
 	--info-hover: #2563EB
 	--feedback-error: #DC2626
 	--ring: rgba(0, 127, 78, 0.35)
+	// Per-mode shadows (registry v1)
+	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06)
+	--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08)
+	--shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12)
 
 =dark-theme-tokens
 	color-scheme: dark
@@ -63,8 +65,6 @@
 	--state-selected: #32405E
 	--theme-color: #38BDF8
 	--theme-color-alt: #0EA5E9
-	--theme: var(--theme-color)
-	--theme-hover: var(--theme-color-alt)
 	--text-inverse: #0E1118
 	--success: #34D399
 	--success-hover: #6EE7B7
@@ -76,6 +76,10 @@
 	--info-hover: #93C5FD
 	--feedback-error: #F87171
 	--ring: rgba(16, 185, 129, 0.4)
+	// Per-mode shadows (registry v1)
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4)
+	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35)
+	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45)
 
 :root
 	color-scheme: light
@@ -94,17 +98,17 @@
 	--text-3xl: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem)
 	--text-4xl: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem)
 
-	// Fluid space scale
+	// Fluid space scale — the comfortable values. data-layout scales at USE
+	// sites: gaps/margins × var(--gap-scale), paddings × var(--pad-scale).
 	--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem)
 	--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem)
 	--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem)
-	--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)
-	--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem)
-	--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem)
+	--space-sm: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)
+	--space-md: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem)
+	--space-lg: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem)
 	--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem)
 	--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem)
 	--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem)
-	--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem)
 
 	// Radius (Concentric hierarchy)
 	--radius-0: 0
@@ -118,15 +122,25 @@
 	--radius-24: 24px
 	--radius-full: 9999px
 
+	// Radius channels — compositions read these; shape presets remap them.
+	// Defaults = curved (registry v1); unset data-shape IS curved.
+	--radius-sm: 8px
+	--radius-md: 16px
+	--radius-lg: 24px
+
+	// Motion language (registry v1) — durations and easings all compositions read.
+	--motion-fast: 120ms
+	--motion-base: 160ms
+	--motion-slow: 240ms
+	--ease-out: cubic-bezier(0.16, 1, 0.3, 1)
+	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)
+
 	// Control Heights
 	--control-h-sm: 26px
 	--control-h-md: 32px
 	--control-h-lg: 38px
 
-	// Shadow
-	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06)
-	--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08)
-	--shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12)
+	// Shadow values live in the theme mixins (per-mode since registry v1).
 
 	// Layering
 	--z-base: 0
@@ -137,14 +151,24 @@
 
 	// Layout
 	--header-height: 48px
-	--footer-height: 56px
+	--footer-height: 32px
 	--measure: 65ch
+	--page-gutter: clamp(1rem, 4vw, 2rem)
+	--sidebar-width: 260px
+	--toc-width: 240px
+	--card-min: 16rem
+	--breakpoint: 768px
 
 	// Default Light Palette
 	+light-theme-tokens
 
+// Plain :root, NOT :root:not([data-mode='light']). The :not() was redundant —
+// [data-mode='light'] is emitted below and wins on source order at equal
+// specificity — and it was harmful: :not() pushed this to (0,2,0), which
+// outranks a .theme-* class at (0,1,0). Under OS dark mode every theme's
+// surface tokens were silently overridden by these generic defaults.
 @media (prefers-color-scheme: dark)
-	:root:not([data-mode='light'])
+	:root
 		+dark-theme-tokens
 
 [data-mode='dark']
@@ -152,5 +176,3 @@
 
 [data-mode='light']
 	+light-theme-tokens
-
-

package/dist/styles/_01_config.sass

@@ -1,70 +1,77 @@
-// =============================================================================
-// 01_CONFIG — the finite vocabulary every fractal draws from.
-// -----------------------------------------------------------------------------
-// Scales live here as Sass data; resolvers turn a keyword-or-raw value into the
-// right token var() or unit. Fractals never hardcode a px or a token name —
-// they route through space(), radius(), etc. so the system speaks one language.
-// =============================================================================
-
-@use 'sass:map'
-@use 'sass:math'
-@use 'sass:meta'
-@use 'sass:list'
-
-// --- Scales (mirror the custom properties in _00_tokens.sass) ----------------
-$breakpoints: (sm: 640px, md: 768px, lg: 1024px, xl: 1240px)
-
-$space-steps: 3xs 2xs xs s m l xl 2xl 3xl s-l
-$radius-steps: 0 2 3 4 6 8 12 16 24 full
-$text-steps: xs sm md lg xl 2xl 3xl 4xl
-$shadow-steps: sm md lg
-
-// Surfaces mapped to the 21 theme token contract
-$surface-roles: bg surface raised panel footer popover dialog terminal input canvas
-$ink-roles: primary secondary muted inverse theme-color theme-color-alt
-
-$align-map: (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, stretch: stretch, baseline: baseline)
-
-// --- Universal Token Resolver --------------------------------------------------
-@function tok($group, $v)
-	@if $v == null
-		@return null
-	@if meta.type-of($v) == number
-		@if math.is-unitless($v)
-			@return #{$v}px
-		@else
-			@return $v
-	@if meta.type-of($v) == string
-		@return var(--#{$group}-#{$v})
-	@return $v
-
-// --- Resolvers ----------------------------------------------------------------
-
-@function space($v)
-	@return tok(space, $v)
-
-@function radius($v)
-	@return tok(radius, $v)
-
-@function text-size($v)
-	@return tok(text, $v)
-
-@function shadow($v)
-	@return tok(shadow, $v)
-
-@function surface($role)
-	@if $role == bg
-		@return var(--bg)
-	@return tok(bg, $role)
-
-@function ink($role)
-	@if $role == primary
-		@return var(--text-primary)
-	@return tok(text, $role)
-
-@function align($v)
-	@return map.get($align-map, $v) or $v
-
-@function bp($name)
-	@return map.get($breakpoints, $name)
-
+// ============================================================================
+// config — the builder knobs the Contract names. All !default: overridable at
+// compile time, never edited in place. The numbered filename is not a valid
+// Sass identifier, so a consumer MUST namespace the configuring load:
+//
+//   @use 'styles/01_config' as cfg with ($literal-max: 256)
+//   @use 'styles/index' as *
+//
+// Configure before anything else loads 01_config, or Sass rejects it.
+// ============================================================================
+
+// The responsive seam. Every loop-generated class takes -mob (below) and
+// -desk (at or above) this width.
+$breakpoint: 768px !default
+$responsive-modes: (mob: 'all and (max-width: #{$breakpoint - 1})', desk: 'all and (min-width: #{$breakpoint})') !default
+
+// Literal ladder: the discrete pixel values .gap-{N}, .radius-{N}, .w-{N}… emit.
+//
+// Fine at the bottom, where interfaces genuinely need 1px and 2px precision,
+// then multiples of $literal-step the rest of the way. A continuous 1…256
+// range emitted 7,302 rungs per band to serve maybe forty useful values;
+// nobody types .marg-left--193.
+$literal-fine: (0, 1, 2, 4, 6, 8, 12) !default
+$literal-step: 8 !default
+$literal-max: 512 !default
+
+// Space literals stop earlier than sizing ones. Gaps, paddings and margins are
+// 24 of the 28 classes emitted per rung (marg doubles for negatives), so they
+// dominate the output — and a 512px gap is meaningless where a 512px width is
+// not. Large spacing is the preset steps' job: --space-3xl is already ~120px.
+$literal-space-max: 64 !default
+
+// Radius stops early for the same reason: .radius-full already handles pills,
+// and the shape presets top out at --radius-lg (~24-32px). A 512px corner is
+// not a corner.
+$literal-radius-max: 64 !default
+
+// Named steps for grid stepping and the shell rails (not the responsive seam).
+$breakpoints: (sm: 640px, md: 768px, lg: 1024px, xl: 1280px) !default
+
+// ============================================================================
+// base — element baseline. Builder infrastructure, not registry classes: the
+// registry is a list of classes; this only makes documents predictable so the
+// classes behave. Deliberately minimal — no typographic opinions beyond body.
+// ============================================================================
+
+*,
+*::before,
+*::after
+	box-sizing: border-box
+
+*
+	margin: 0
+
+body, html
+	font-family: var(--font-sans)
+	font-size: var(--text-sm)
+	line-height: 1.5
+	color: var(--text-primary)
+	background: var(--bg)
+	box-sizing: border-box
+
+img,
+video,
+svg
+	display: block
+	max-width: 100%
+
+button,
+input,
+select,
+textarea
+	font: inherit
+	color: inherit
+
+a
+	color: inherit

package/dist/styles/_02_dimensions.sass

@@ -0,0 +1,174 @@
+// ============================================================================
+// dimensions — L1. The loop-generated half of the registry: 17 space families,
+// radius, size, viewport heights, shadows — each class in three bands (base,
+// -mob, -desk) per Contract 7. Presets are token-routed; literals are px.
+// ============================================================================
+
+@use 'sass:string'
+@use 'sass:list'
+@use 'sass:math'
+@use '01_config' as *
+
+// The literal ladder, built once: the fine tail, then every $literal-step up
+// to $literal-max. Radius and sizing iterate all of it.
+$literals: $literal-fine
+@for $i from 2 through math.div($literal-max, $literal-step)
+	$literals: list.append($literals, $i * $literal-step)
+
+// The space families take the same ladder truncated at $literal-space-max,
+// radius at $literal-radius-max. Only sizing runs the whole thing.
+$space-literals: ()
+@each $n in $literals
+	@if $n <= $literal-space-max
+		$space-literals: list.append($space-literals, $n)
+
+$radius-literals: ()
+@each $n in $literals
+	@if $n <= $literal-radius-max
+		$radius-literals: list.append($radius-literals, $n)
+$steps: ('3xs' '2xs' 'xs' 'sm' 'md' 'lg' 'xl' '2xl' '3xl')
+
+// Space families, role-split for the layout preset: gaps/margins separate
+// content (× --gap-scale); paddings are the container's breathing (× --pad-scale).
+$gap-families: (gap: gap, rgap: row-gap, cgap: column-gap)
+
+$pad-families: (pad: padding, pad-x: padding-inline, pad-y: padding-block, pad-top: padding-top, pad-right: padding-right, pad-bottom: padding-bottom, pad-left: padding-left)
+
+// Negatives ride margin families only (Contract: `--` infix).
+$marg-families: (marg: margin, marg-x: margin-inline, marg-y: margin-block, marg-top: margin-top, marg-right: margin-right, marg-bottom: margin-bottom, marg-left: margin-left)
+
+// --- Base band ---------------------------------------------------------------
+@each $name, $prop in $gap-families
+	@each $step in $steps
+		.#{$name}-#{$step}
+			#{$prop}: calc(var(--space-#{$step}) * var(--gap-scale, 1))
+	@each $n in $space-literals
+		.#{$name}-#{$n}
+			#{$prop}: #{$n}px
+
+@each $name, $prop in $pad-families
+	@each $step in $steps
+		.#{$name}-#{$step}
+			#{$prop}: calc(var(--space-#{$step}) * var(--pad-scale, 1))
+	@each $n in $space-literals
+		.#{$name}-#{$n}
+			#{$prop}: #{$n}px
+
+@each $name, $prop in $marg-families
+	@each $step in $steps
+		.#{$name}-#{$step}
+			#{$prop}: calc(var(--space-#{$step}) * var(--gap-scale, 1))
+		.#{$name}--#{$step}
+			#{$prop}: calc(var(--space-#{$step}) * var(--gap-scale, 1) * -1)
+	@each $n in $space-literals
+		.#{$name}-#{$n}
+			#{$prop}: #{$n}px
+		.#{$name}--#{$n}
+			#{$prop}: -#{$n}px
+
+// Radius — literal px (0 = the reset); never rides shape presets.
+@each $n in $radius-literals
+	.radius-#{$n}
+		border-radius: #{$n}px
+
+.radius-full
+	border-radius: var(--radius-full)
+
+// The radius CHANNELS as classes. Unlike the numeric ladder these follow
+// data-shape, so a card on .radius-md goes round -> curved -> pro -> sharp with
+// the preset. Reach for these first; the literals are for exact requirements.
+@each $step in ('sm' 'md' 'lg')
+	.radius-#{$step}
+		border-radius: var(--radius-#{$step})
+
+// Size
+@each $n in $literals
+	.w-#{$n}
+		width: #{$n}px
+	.h-#{$n}
+		height: #{$n}px
+	.square-#{$n}
+		width: #{$n}px
+		height: #{$n}px
+
+.wfull
+	width: 100%
+.hfull
+	height: 100%
+.full
+	width: 100%
+	height: 100%
+.min0
+	min-width: 0
+	min-height: 0
+
+// Viewport heights
+.hfull-vh
+	min-height: 100vh
+.hfull-vh-fitted
+	min-height: calc(100vh - var(--header-height, 48px) - var(--footer-height))
+
+// --- Responsive bands: -mob / -desk, generated wholesale (Contract 7) --------
+@each $mode, $query in $responsive-modes
+	@media #{string.unquote($query)}
+		@each $name, $prop in $gap-families
+			@each $step in $steps
+				.#{$name}-#{$step}-#{$mode}
+					#{$prop}: calc(var(--space-#{$step}) * var(--gap-scale, 1))
+			@each $n in $space-literals
+				.#{$name}-#{$n}-#{$mode}
+					#{$prop}: #{$n}px
+		@each $name, $prop in $pad-families
+			@each $step in $steps
+				.#{$name}-#{$step}-#{$mode}
+					#{$prop}: calc(var(--space-#{$step}) * var(--pad-scale, 1))
+			@each $n in $space-literals
+				.#{$name}-#{$n}-#{$mode}
+					#{$prop}: #{$n}px
+		@each $name, $prop in $marg-families
+			@each $step in $steps
+				.#{$name}-#{$step}-#{$mode}
+					#{$prop}: calc(var(--space-#{$step}) * var(--gap-scale, 1))
+				.#{$name}--#{$step}-#{$mode}
+					#{$prop}: calc(var(--space-#{$step}) * var(--gap-scale, 1) * -1)
+			@each $n in $space-literals
+				.#{$name}-#{$n}-#{$mode}
+					#{$prop}: #{$n}px
+				.#{$name}--#{$n}-#{$mode}
+					#{$prop}: -#{$n}px
+		@each $n in $radius-literals
+			.radius-#{$n}-#{$mode}
+				border-radius: #{$n}px
+		.radius-full-#{$mode}
+			border-radius: var(--radius-full)
+		@each $step in ('sm' 'md' 'lg')
+			.radius-#{$step}-#{$mode}
+				border-radius: var(--radius-#{$step})
+		@each $n in $literals
+			.w-#{$n}-#{$mode}
+				width: #{$n}px
+			.h-#{$n}-#{$mode}
+				height: #{$n}px
+			.square-#{$n}-#{$mode}
+				width: #{$n}px
+				height: #{$n}px
+		.wfull-#{$mode}
+			width: 100%
+		.hfull-#{$mode}
+			height: 100%
+		.full-#{$mode}
+			width: 100%
+			height: 100%
+		.min0-#{$mode}
+			min-width: 0
+			min-height: 0
+		.hfull-vh-#{$mode}
+			min-height: 100vh
+		.hfull-vh-fitted-#{$mode}
+			min-height: calc(100vh - var(--header-height, 48px) - var(--footer-height))
+		.shadow-sm-#{$mode}
+			box-shadow: var(--shadow-sm)
+		.shadow-md-#{$mode}
+			box-shadow: var(--shadow-md)
+		.shadow-lg-#{$mode}
+			box-shadow: var(--shadow-lg)

package/dist/styles/_03_containers.sass

@@ -0,0 +1,105 @@
+// ============================================================================
+// 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

package/dist/styles/_04_layouts.sass

@@ -0,0 +1,100 @@
+// ============================================================================
+// 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 '01_config' as *
+
+$sm: map.get($breakpoints, sm)
+$md: map.get($breakpoints, md)
+$lg: map.get($breakpoints, lg)
+
+// 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 #{string.unquote('(min-width: #{$md})')}
+		grid-template-columns: repeat(2, minmax(0, 1fr))
+
+.grid-3
+	display: grid
+	grid-template-columns: repeat(1, minmax(0, 1fr))
+	@media #{string.unquote('(min-width: #{$lg})')}
+		grid-template-columns: repeat(3, minmax(0, 1fr))
+
+.grid-4
+	display: grid
+	grid-template-columns: repeat(1, minmax(0, 1fr))
+	@media #{string.unquote('(min-width: #{$sm})')}
+		grid-template-columns: repeat(2, minmax(0, 1fr))
+	@media #{string.unquote('(min-width: #{$lg})')}
+		grid-template-columns: repeat(4, minmax(0, 1fr))
+
+.grid-6
+	display: grid
+	grid-template-columns: repeat(1, minmax(0, 1fr))
+	@media #{string.unquote('(min-width: #{$sm})')}
+		grid-template-columns: repeat(2, minmax(0, 1fr))
+	@media #{string.unquote('(min-width: #{$md})')}
+		grid-template-columns: repeat(3, minmax(0, 1fr))
+	@media #{string.unquote('(min-width: #{$lg})')}
+		grid-template-columns: repeat(6, minmax(0, 1fr))
+
+// 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: min(100%, 760px)
+	margin-inline: auto
+	line-height: 1.65
+	// Rhythm comes from gap, not from adjacent-sibling margins: one rule
+	// instead of a combinator, and it cannot leak into nested content.
+	display: flex
+	flex-direction: column
+	gap: calc(var(--space-sm) * var(--gap-scale, 1))
+	h1, h2, h3, h4
+		line-height: 1.25
+		font-weight: 600
+		// Extra breathing above a heading, on top of the gap.
+		margin-top: calc(var(--space-2xs) * var(--gap-scale, 1))
+		&:first-child
+			margin-top: 0
+
+// Frame presets — aspect-ratio media boxes (replaces any frame abstraction).
+$frame-ratios: ('16-9': '16 / 9', '9-16': '9 / 16', '4-3': '4 / 3', '3-4': '3 / 4', '3-2': '3 / 2', '2-3': '2 / 3', '1-1': '1 / 1')
+@each $name, $ratio in $frame-ratios
+	.frame-#{$name}
+		aspect-ratio: #{$ratio}
+		overflow: hidden
+		position: relative
+		img, video, iframe
+			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