fractalstyler2 0.0.2 → 0.3.0

package/templates/_10_layouts.sass

@@ -0,0 +1,373 @@
+// =============================================================================
+// 10_LAYOUTS — the largest fractals. Same recipe move, page scale.
+// -----------------------------------------------------------------------------
+// Layouts compose molecule and atom fractals into structural arrangements.
+// State and responsive reflow are handled with +cols, +auto-grid, +cover.
+// =============================================================================
+
+@use 'fractals' as *
+
+// Column grid presets
+.grid-1
+	+cols((base: 1), s)
+
+.grid-2
+	+cols((base: 1, md: 2), m)
+
+.grid-3
+	+cols((base: 1, sm: 2, lg: 3), s)
+
+.grid-4
+	+cols((base: 1, sm: 2, lg: 4), s)
+
+.grid-6
+	+cols((base: 2, sm: 3, md: 4, lg: 6), xs)
+
+// A grid that never needs breakpoints: it fits as many columns as will hold
+// the min track. Reach for this when column count is negotiable.
+.card-grid
+	+auto-grid(16rem, s)
+
+// Hero — full-viewport cover with a centered, measured message.
+.hero
+	+cover(80vh, xl)
+	> .center
+		+stack(m, center)
+		text-align: center
+		max-width: 45ch
+
+// Holy grail — header / (nav · main · aside) / footer.
+.holy-grail
+	display: grid
+	min-height: 100vh
+	grid-template-rows: auto 1fr auto
+	grid-template-areas: 'header' 'main' 'footer'
+	> .hg-header
+		grid-area: header
+	> .hg-footer
+		grid-area: footer
+	> .hg-body
+		grid-area: main
+		display: grid
+		grid-template-columns: 1fr
+		+gap(m)
+		+pad(m)
+	+at(lg)
+		> .hg-body
+			grid-template-columns: var(--nav-w, 220px) minmax(0, 1fr) var(--aside-w, 260px)
+			> .hg-nav
+				+sticky(var(--space-m))
+				align-self: start
+			> .hg-aside
+				+sticky(var(--space-m))
+				align-self: start
+
+// Docs layout — responsive 3-column frame (nav · main · TOC).
+.docs
+	position: relative
+	display: grid
+	grid-template-columns: 1fr
+	min-height: calc(100vh - var(--header-height, 48px))
+
+	// Left Nav Rail (off-canvas drawer on mobile, sticky rail on desktop)
+	> .docs-nav
+		position: fixed
+		top: var(--header-height, 48px)
+		left: 0
+		z-index: var(--z-modal, 200)
+		width: min(85vw, 280px)
+		height: calc(100dvh - var(--header-height, 48px))
+		padding: var(--space-s)
+		overflow-y: auto
+		background: var(--bg)
+		+border(right)
+		transform: translateX(-105%)
+		transition: transform 200ms ease-out
+
+	&[data-drawer-open='true'] > .docs-nav
+		transform: translateX(0)
+
+	// Backdrop for mobile drawer
+	> .docs-backdrop
+		position: fixed
+		inset: var(--header-height, 48px) 0 0 0
+		z-index: calc(var(--z-modal, 200) - 1)
+		background: rgba(0, 0, 0, 0.5)
+		backdrop-filter: blur(2px)
+		border: none
+		cursor: pointer
+
+	// Center Reading Column
+	> .docs-main
+		+min0
+		+box
+		padding-block: var(--space-l)
+		padding-inline: var(--space-s)
+		> *
+			width: 100%
+			max-width: clamp(600px, 58vw, 760px)
+			margin-inline: auto
+
+	// Right TOC Rail (desktop only)
+	> .docs-toc
+		display: none
+
+	// Desktop Breakpoint (>= 1024px)
+	+at(lg)
+		--docs-nav-w: clamp(220px, 20vw, 270px)
+		--docs-toc-w: clamp(200px, 18vw, 240px)
+		grid-template-columns: var(--docs-nav-w) minmax(0, 1fr) var(--docs-toc-w)
+
+		> .docs-nav
+			position: sticky
+			top: var(--header-height, 48px)
+			width: auto
+			height: calc(100vh - var(--header-height, 48px))
+			transform: none
+			z-index: 10
+			padding: var(--space-m) var(--space-s)
+
+		> .docs-toc
+			display: block
+			position: sticky
+			top: var(--header-height, 48px)
+			height: calc(100vh - var(--header-height, 48px))
+			overflow-y: auto
+			padding: var(--space-m) var(--space-s)
+			+border(left)
+
+		> .docs-backdrop
+			display: none
+
+// NavTree styling
+.navtree
+	+box
+	+gap(m)
+
+.navtree-group
+	+box
+	+gap(3xs)
+
+.navtree-title
+	font-size: var(--text-xs)
+	font-weight: 600
+	text-transform: uppercase
+	letter-spacing: 0.06em
+	color: var(--text-muted)
+	padding: 6px 8px
+
+.navtree-link
+	+row(between, center)
+	padding: 6px 10px
+	font-size: var(--text-sm)
+	color: var(--text-secondary)
+	border-radius: var(--radius-4)
+	text-decoration: none
+	transition: all 120ms ease
+	&:hover
+		+bg(raised)
+		+ink(primary)
+	&[aria-current='page'], &[data-active='true']
+		+bg(surface)
+		color: var(--theme)
+		font-weight: 500
+		+border
+
+.navtree-sub
+	+box
+	+gap(3xs)
+	margin-left: 12px
+	padding-left: 8px
+	+border(left)
+
+// TOC styling
+.toc
+	+box
+	+gap(m)
+	height: 100%
+
+.toc-title
+	font-size: var(--text-xs)
+	font-weight: 600
+	text-transform: uppercase
+	letter-spacing: 0.06em
+	color: var(--text-muted)
+
+.toc-list
+	list-style: none
+	margin: 0
+	padding: 0
+	+box
+	+gap(2xs)
+
+.toc-link
+	display: block
+	font-size: var(--text-xs)
+	color: var(--text-muted)
+	text-decoration: none
+	padding: 3px 0
+	transition: color 120ms ease
+	&:hover
+		+ink(primary)
+	&[aria-current='true']
+		color: var(--theme)
+		font-weight: 500
+	&[data-depth='3']
+		padding-left: 10px
+
+.toc-footer
+	+partition(top, s)
+	+box
+	+gap(2xs)
+
+// Mobile TOC Disclosure
+.docs-mobile-toc
+	+box
+	+gap(xs)
+	+pad(xs)
+	+radius(6)
+	+bg(surface)
+	+border(all, var(--border))
+	summary
+		+row(between, center)
+		+weight(500)
+		+type(sm)
+		+ink(primary)
+		cursor: pointer
+		user-select: none
+		list-style: none
+		&::-webkit-details-marker
+			display: none
+	&[open]
+		+bg(raised)
+		summary
+			margin-bottom: var(--space-xs)
+			padding-bottom: var(--space-2xs)
+			+border(bottom, var(--border))
+
+// Prose Typography Container
+.prose
+	font-size: var(--text-sm)
+	line-height: 1.65
+	color: var(--text-secondary)
+
+	> * + *
+		margin-top: 1rem
+
+	h1
+		font-size: var(--text-3xl)
+		font-weight: 700
+		color: var(--text-primary)
+		line-height: 1.2
+		margin-top: 0
+		margin-bottom: 0.5rem
+
+	h2
+		font-size: var(--text-xl)
+		font-weight: 600
+		color: var(--text-primary)
+		line-height: 1.3
+		margin-top: 2rem
+		margin-bottom: 0.5rem
+		padding-bottom: 0.25rem
+		+border(bottom)
+
+	h3
+		font-size: var(--text-md)
+		font-weight: 600
+		color: var(--text-primary)
+		margin-top: 1.5rem
+		margin-bottom: 0.25rem
+
+	h4
+		font-size: var(--text-sm)
+		font-weight: 600
+		color: var(--text-primary)
+
+	p
+		margin-bottom: 1rem
+
+	ul, ol
+		padding-left: 1.25rem
+		margin-bottom: 1rem
+		li
+			margin-bottom: 0.25rem
+
+	code:not(pre code)
+		font-family: var(--font-mono)
+		font-size: 0.85em
+		padding: 2px 6px
+		background: var(--bg-raised)
+		border: 1px solid var(--border)
+		border-radius: var(--radius-3)
+		color: var(--text-primary)
+
+	pre
+		position: relative
+		background: var(--bg-surface)
+		border: 1px solid var(--border)
+		border-radius: var(--radius-6)
+		padding: var(--space-s)
+		overflow-x: auto
+		font-family: var(--font-mono)
+		font-size: var(--text-xs)
+		line-height: 1.5
+		color: var(--text-primary)
+		code
+			font-family: inherit
+			font-size: inherit
+			background: none
+			border: none
+			padding: 0
+
+	table
+		width: 100%
+		border-collapse: collapse
+		margin-block: 1.25rem
+		font-size: var(--text-sm)
+		th
+			text-align: left
+			padding: 8px 12px
+			border-bottom: 1px solid var(--border-subtle)
+			font-size: var(--text-xs)
+			font-weight: 600
+			text-transform: uppercase
+			letter-spacing: 0.04em
+			color: var(--text-primary)
+		td
+			padding: 8px 12px
+			border-bottom: 1px solid var(--border)
+			color: var(--text-secondary)
+
+	blockquote
+		margin: 1.25rem 0
+		padding: 8px 16px
+		border-left: 3px solid var(--theme)
+		background: var(--bg-raised)
+		border-radius: 0 var(--radius-4) var(--radius-4) 0
+		p
+			margin: 0
+			color: var(--text-primary)
+
+// App shell — sticky header, fluid body, footer.
+.app-shell
+	+box
+	+relative
+	isolation: isolate
+	min-height: 100vh
+	> .app-header
+		+row(null, center)
+		+sticky(0)
+		+px(m)
+		background: var(--bg)
+		z-index: var(--z-sticky)
+		height: var(--header-height)
+		+border(bottom)
+	> .app-main
+		+grow
+		+min0
+	> .app-footer
+		+row(null, center)
+		+px(m)
+		min-height: var(--footer-height)
+		+border(top)

package/templates/_11_own.sass

@@ -0,0 +1,21 @@
+// =============================================================================
+// 11_OWN — bespoke project-specific styles and micro-components.
+// =============================================================================
+
+@use 'fractals' as *
+
+.logomotif
+	height: 28px
+	width: 28px
+	filter: saturate(0)
+
+.logotype
+	height: 16px
+	filter: saturate(0)
+
+.header-nav
+	font-size: var(--text-sm)
+	text-decoration: none
+	color: var(--text-secondary)
+	&:hover
+		color: var(--theme-color)

package/templates/_fractals.sass

@@ -1,13 +1,14 @@
 // =============================================================================
-// FRACTALS — the pure API barrel. Emits NO css on its own.
+// FRACTALS — the pure API barrel. Emits NO CSS on its own.
 // -----------------------------------------------------------------------------
 // In any component partial or Svelte component:
 //   @use '$lib/styles/fractals' as *
 //   (or @use './fractals' as *)
-// then call fractals freely:  +surface(...)  +stack(...)  space(m) ...
+// then call fractals freely:  +surface(...)  +stack(...)  +card(...)
 // =============================================================================
 
-@forward 'config'
-@forward 'responsive'
-@forward 'atoms'
-@forward 'molecules'
+@forward '01_config'
+@forward '03_responsive'
+@forward '04_atoms'
+@forward '05_molecules'
+@forward '06_recipes'

package/templates/index.sass

@@ -1,20 +1,18 @@
 // =============================================================================
-// STYLES ENTRY — the full emitted stylesheet in cascade order.
+// FRACTALSTYLER2 — Master Stylesheet & Public Mixin API
 // -----------------------------------------------------------------------------
-//   1. tokens      the CSS custom properties (only literal values)
-//   2. base        fluid reset
-//   3. utilities   atom fractals projected to markup classes (optional layer)
-//   4. blocks      components composed from fractals
-//   5. layouts     page templates composed from fractals
-//
-// Consume from a SvelteKit app:  import '$lib/styles/index.sass'
-// or from package:               import 'fractalstyler2/styles'
-// The fractal mixins/functions themselves emit nothing until called, so output
-// contains only what you use.
+// 1. Public API: Forwards all pure mixins, functions, and atoms (0 bytes CSS)
+// 2. Cascade Order: Emits CSS rules in strict specificity sequence
 // =============================================================================
 
-@use './tokens'
-@use './base'
-@use './utilities'
-@use './blocks'
-@use './layouts'
+// Public Sass API — available to any file that @uses this module
+@forward 'fractals'
+
+// Global Stylesheet Cascade
+@use '02_fonts' as *
+@use '00_tokens' as *
+@use '07_base' as *
+@use '08_blocks' as *
+@use '09_utilities' as *
+@use '10_layouts' as *
+@use '11_own' as *

package/dist/styles/_blocks.sass

@@ -1,88 +0,0 @@
-// =============================================================================
-// BLOCKS — components as recipes of fractals. Note how little CSS is here:
-// each block is a handful of fractal calls plus its own genuinely-unique lines.
-// State is expressed with data-*/aria-*, never modifier classes.
-// =============================================================================
-
-@use 'fractals' as *
-
-.card
-	+surface(surface, s, 12)
-	+stack(s)
-	&[data-elevated]
-		+shadow(md)
-
-.panel
-	+surface(raised, m, 16)
-	+stack(m)
-
-.badge
-	+row(center, center)
-	display: inline-flex
-	+px(2xs)
-	+type(xs)
-	+weight(500)
-	+radius(full)
-	+bg(raised)
-	+ink(secondary)
-	padding-block: 2px
-
-.avatar
-	+center
-	+square(var(--avatar-size, 40px))
-	+radius(full)
-	+bg(raised)
-	+ink(secondary)
-	overflow: hidden
-
-.input
-	display: block
-	+w(100%)
-	+px(2xs)
-	+type(md)
-	+leading(1.5)
-	+border
-	+radius(6)
-	+bg(bg)
-	+ink(primary)
-	padding-block: 8px
-	&:focus-visible
-		+ring
-
-.button
-	+row(center, center)
-	+gap(2xs)
-	+px(s)
-	+radius(6)
-	+weight(500)
-	+transition(background-color)
-	cursor: pointer
-	padding-block: 8px
-	user-select: none
-	// Exceptions: variants live on data-variant, not in the class name.
-	&[data-variant='primary']
-		background: var(--theme)
-		color: var(--text-inverse)
-		&:hover
-			background: var(--theme-hover)
-	&[data-variant='ghost']
-		background: transparent
-		+ink(secondary)
-		&:hover
-			+bg(raised)
-
-.divider
-	border: none
-	+border(top)
-	margin-block: space(s)
-
-.kbd
-	display: inline-block
-	+px(3xs)
-	+type(xs)
-	+leading(1)
-	+radius(4)
-	+bg(raised)
-	border: 1px solid var(--border-strong)
-	font-family: var(--font-mono)
-	padding-block: 2px

package/dist/styles/_layouts.sass

@@ -1,108 +0,0 @@
-// =============================================================================
-// LAYOUTS — the largest fractals. Same recipe move, page scale.
-// These are the concrete deliverables you named: a responsive 3-col grid, a
-// hero, a holy-grail, a docs template. Each is a short composition of fractals.
-// =============================================================================
-
-@use 'fractals' as *
-
-// 1. Responsive grid of 3 columns — 1 → 2 → 3 across breakpoints.
-.grid-3
-	+cols((base: 1, sm: 2, lg: 3), m)
-
-// A grid that never needs breakpoints: it fits as many columns as will hold
-// the min track. Reach for this before .grid-3 when column count is negotiable.
-.card-grid
-	+auto-grid(16rem, m)
-
-// 2. Hero — full-viewport cover with a centered, measured message.
-.hero
-	+cover(80vh, xl)
-	> .center
-		+stack(m, center)
-		text-align: center
-		max-width: 45ch
-
-// 3. Holy grail — header / (nav · main · aside) / footer.
-.holy-grail
-	display: grid
-	min-height: 100vh
-	grid-template-rows: auto 1fr auto
-	grid-template-areas: 'header' 'main' 'footer'
-	> .hg-header
-		grid-area: header
-	> .hg-footer
-		grid-area: footer
-	> .hg-body
-		grid-area: main
-		display: grid
-		grid-template-columns: 1fr
-		+gap(m)
-		+pad(m)
-	+at(lg)
-		> .hg-body
-			grid-template-columns: var(--nav-w, 220px) minmax(0, 1fr) var(--aside-w, 260px)
-			> .hg-nav
-				+sticky(var(--space-m))
-				align-self: start
-			> .hg-aside
-				+sticky(var(--space-m))
-				align-self: start
-
-// 4. Docs template — sidebar nav + reading column + on-page TOC.
-.docs
-	display: grid
-	min-height: 100vh
-	grid-template-columns: 1fr
-	> .docs-nav
-		display: none
-	> .docs-toc
-		display: none
-	> .docs-main
-		+min0
-		+stack(m)
-		+center-column(72ch, s-l)
-		+py(l)
-	+at(md)
-		grid-template-columns: var(--docs-nav-w, 240px) minmax(0, 1fr)
-		> .docs-nav
-			+box
-			+sticky(0)
-			+py(l)
-			+px(s)
-			height: 100vh
-			overflow-y: auto
-			+border(right)
-	+at(xl)
-		grid-template-columns: var(--docs-nav-w, 240px) minmax(0, 1fr) var(--docs-toc-w, 220px)
-		> .docs-toc
-			+box
-			+sticky(0)
-			+py(l)
-			+px(s)
-			height: 100vh
-			overflow-y: auto
-			+ink(secondary)
-
-// 5. App shell — sticky header, fluid body, footer. The frame most apps live in.
-.app-shell
-	+box
-	+relative
-	isolation: isolate
-	min-height: 100vh
-	> .app-header
-		+row(null, center)
-		+sticky(0)
-		+px(m)
-		z-index: var(--z-sticky)
-		height: var(--header-height)
-		+bg(surface)
-		+border(bottom)
-	> .app-main
-		+grow
-		+min0
-	> .app-footer
-		+row(null, center)
-		+px(m)
-		min-height: var(--footer-height)
-		+border(top)

package/dist/styles/_responsive.sass

@@ -1,43 +0,0 @@
-// =============================================================================
-// RESPONSIVE FRACTALS — the units that let any other fractal grow with the page.
-// -----------------------------------------------------------------------------
-// These are self-similar too: +at(md) wraps any block of fractal calls in a
-// breakpoint, so a "responsive component" is just a component whose fractals
-// are re-stated inside +at(...).
-// =============================================================================
-
-@use 'sass:map'
-@use 'config' as *
-
-// +at(md) — mobile-first min-width query by name (sm/md/lg/xl) or raw length.
-=at($name)
-	$edge: $name
-	@if map.has-key($breakpoints, $name)
-		$edge: bp($name)
-	@media (min-width: #{$edge})
-		@content
-
-// +until(md) — max-width query (one below the named edge).
-=until($name)
-	$edge: $name
-	@if map.has-key($breakpoints, $name)
-		$edge: bp($name)
-	@media (max-width: #{$edge})
-		@content
-
-// Container-query fractals — component-scoped responsiveness.
-=cq
-	container-type: inline-size
-
-=cq-at($width)
-	@container (min-width: #{$width})
-		@content
-
-=cq-until($width)
-	@container (max-width: #{$width})
-		@content
-
-// Motion / preference-aware fractal.
-=reduce-motion
-	@media (prefers-reduced-motion: reduce)
-		@content