fractalstyler2 0.0.2 → 0.3.0

package/dist/styles/_tokens.sass

@@ -1,127 +0,0 @@
-// =============================================================================
-// TOKENS — the only place literal values live. Everything else is a fractal
-// that consumes these custom properties. Light is the marker-free default so
-// tokens stay defined during SSR and with JS disabled; dark comes from
-// prefers-color-scheme and from an explicit [data-mode='dark'].
-// =============================================================================
-
-:root
-	color-scheme: light
-
-	// Fonts
-	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
-	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
-
-	// Fluid type scale (Utopia 360→1240)
-	--text-xs: 0.75rem
-	--text-sm: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem)
-	--text-md: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)
-	--text-lg: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem)
-	--text-xl: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem)
-	--text-2xl: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem)
-	--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
-	--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-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
-	--radius-0: 0
-	--radius-2: 2px
-	--radius-4: 4px
-	--radius-6: 6px
-	--radius-8: 8px
-	--radius-12: 12px
-	--radius-16: 16px
-	--radius-24: 24px
-	--radius-full: 9999px
-
-	// 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)
-
-	// Layering
-	--z-base: 0
-	--z-raised: 10
-	--z-sticky: 100
-	--z-modal: 200
-	--z-toast: 300
-
-	// Layout
-	--header-height: 64px
-	--footer-height: 56px
-	--measure: 65ch
-
-	// Light palette (marker-free default)
-	--bg: #fdfefe
-	--bg-surface: #f8f7f7
-	--bg-raised: #f1f5f9
-	--text-primary: #0f172a
-	--text-secondary: #5b6472
-	--text-muted: #929497
-	--text-inverse: #ffffff
-	--border: #e2e8f0
-	--border-strong: #cbd5e1
-	--theme: #007f4e
-	--theme-hover: #00663f
-	--theme-active: #005031
-	--ring: rgba(0, 127, 78, 0.35)
-
-@media (prefers-color-scheme: dark)
-	:root:not([data-mode='light'])
-		color-scheme: dark
-		--bg: #131313
-		--bg-surface: #1e1e1e
-		--bg-raised: #2b2b2b
-		--text-primary: #f9fafb
-		--text-secondary: #a7adb7
-		--text-muted: #6b7280
-		--text-inverse: #0b0f17
-		--border: #2f3030
-		--border-strong: #4a4b4b
-		--theme: #10b981
-		--theme-hover: #34d399
-		--theme-active: #059669
-		--ring: rgba(16, 185, 129, 0.4)
-
-[data-mode='dark']
-	color-scheme: dark
-	--bg: #131313
-	--bg-surface: #1e1e1e
-	--bg-raised: #2b2b2b
-	--text-primary: #f9fafb
-	--text-secondary: #a7adb7
-	--text-muted: #6b7280
-	--text-inverse: #0b0f17
-	--border: #2f3030
-	--border-strong: #4a4b4b
-	--theme: #10b981
-	--theme-hover: #34d399
-	--theme-active: #059669
-	--ring: rgba(16, 185, 129, 0.4)
-
-[data-mode='light']
-	color-scheme: light
-	--bg: #fdfefe
-	--bg-surface: #f8f7f7
-	--bg-raised: #f1f5f9
-	--text-primary: #0f172a
-	--text-secondary: #5b6472
-	--text-muted: #929497
-	--text-inverse: #ffffff
-	--border: #e2e8f0
-	--border-strong: #cbd5e1
-	--theme: #007f4e
-	--theme-hover: #00663f
-	--theme-active: #005031
-	--ring: rgba(0, 127, 78, 0.35)

package/templates/_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/templates/_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/templates/_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

package/templates/_tokens.sass

@@ -1,127 +0,0 @@
-// =============================================================================
-// TOKENS — the only place literal values live. Everything else is a fractal
-// that consumes these custom properties. Light is the marker-free default so
-// tokens stay defined during SSR and with JS disabled; dark comes from
-// prefers-color-scheme and from an explicit [data-mode='dark'].
-// =============================================================================
-
-:root
-	color-scheme: light
-
-	// Fonts
-	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
-	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
-
-	// Fluid type scale (Utopia 360→1240)
-	--text-xs: 0.75rem
-	--text-sm: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem)
-	--text-md: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)
-	--text-lg: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem)
-	--text-xl: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem)
-	--text-2xl: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem)
-	--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
-	--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-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
-	--radius-0: 0
-	--radius-2: 2px
-	--radius-4: 4px
-	--radius-6: 6px
-	--radius-8: 8px
-	--radius-12: 12px
-	--radius-16: 16px
-	--radius-24: 24px
-	--radius-full: 9999px
-
-	// 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)
-
-	// Layering
-	--z-base: 0
-	--z-raised: 10
-	--z-sticky: 100
-	--z-modal: 200
-	--z-toast: 300
-
-	// Layout
-	--header-height: 64px
-	--footer-height: 56px
-	--measure: 65ch
-
-	// Light palette (marker-free default)
-	--bg: #fdfefe
-	--bg-surface: #f8f7f7
-	--bg-raised: #f1f5f9
-	--text-primary: #0f172a
-	--text-secondary: #5b6472
-	--text-muted: #929497
-	--text-inverse: #ffffff
-	--border: #e2e8f0
-	--border-strong: #cbd5e1
-	--theme: #007f4e
-	--theme-hover: #00663f
-	--theme-active: #005031
-	--ring: rgba(0, 127, 78, 0.35)
-
-@media (prefers-color-scheme: dark)
-	:root:not([data-mode='light'])
-		color-scheme: dark
-		--bg: #131313
-		--bg-surface: #1e1e1e
-		--bg-raised: #2b2b2b
-		--text-primary: #f9fafb
-		--text-secondary: #a7adb7
-		--text-muted: #6b7280
-		--text-inverse: #0b0f17
-		--border: #2f3030
-		--border-strong: #4a4b4b
-		--theme: #10b981
-		--theme-hover: #34d399
-		--theme-active: #059669
-		--ring: rgba(16, 185, 129, 0.4)
-
-[data-mode='dark']
-	color-scheme: dark
-	--bg: #131313
-	--bg-surface: #1e1e1e
-	--bg-raised: #2b2b2b
-	--text-primary: #f9fafb
-	--text-secondary: #a7adb7
-	--text-muted: #6b7280
-	--text-inverse: #0b0f17
-	--border: #2f3030
-	--border-strong: #4a4b4b
-	--theme: #10b981
-	--theme-hover: #34d399
-	--theme-active: #059669
-	--ring: rgba(16, 185, 129, 0.4)
-
-[data-mode='light']
-	color-scheme: light
-	--bg: #fdfefe
-	--bg-surface: #f8f7f7
-	--bg-raised: #f1f5f9
-	--text-primary: #0f172a
-	--text-secondary: #5b6472
-	--text-muted: #929497
-	--text-inverse: #ffffff
-	--border: #e2e8f0
-	--border-strong: #cbd5e1
-	--theme: #007f4e
-	--theme-hover: #00663f
-	--theme-active: #005031
-	--ring: rgba(0, 127, 78, 0.35)