fractalstyler2 0.0.1 → 0.1.0

package/templates/_molecules.sass

@@ -0,0 +1,93 @@
+// =============================================================================
+// MOLECULE FRACTALS — self-similar: each is a small graph of atom fractals.
+// -----------------------------------------------------------------------------
+// This is the payoff of the model. A molecule reads like a recipe of atoms,
+// and a component (next layer up) reads like a recipe of molecules. Same move
+// at every scale — that is the "fractal" in fractalstyler2.
+// =============================================================================
+
+@use 'config' as *
+@use 'atoms' as *
+@use 'responsive' as *
+
+// Stack — vertical rhythm with one shared gap.
+=stack($gap: xs, $x: null)
+	+box($x)
+	+gap($gap)
+
+// Cluster — wrapping row of chips/tags/buttons.
+=cluster($gap: xs, $x: start, $y: center)
+	+row($x, $y)
+	+wrap
+	+gap($gap)
+
+// Center — a centered reading column bounded by a measure.
+=center-column($max: var(--measure, 60ch), $pad: s)
+	max-width: $max
+	+mx-auto
+	+px($pad)
+
+// Cover — fills a min-height with a centered focal child.
+=cover($min: 100vh, $pad: s)
+	+box
+	min-height: $min
+	+pad($pad)
+	> *
+		margin-block: 0
+	> .center
+		+my-auto
+
+// Frame — fixed aspect-ratio media box.
+=frame($ratio: 16 / 9)
+	aspect-ratio: $ratio
+	overflow: hidden
+	> :is(img, video, iframe)
+		+full
+		object-fit: cover
+
+// Reel — horizontal scroll-snap rail.
+=reel($gap: xs)
+	+row
+	+gap($gap)
+	overflow-x: auto
+	overscroll-behavior-inline: contain
+	scroll-snap-type: inline mandatory
+	> *
+		scroll-snap-align: start
+		flex: 0 0 auto
+
+// Sidebar — an intrinsic rail beside a fluid main; wraps when tight.
+=with-sidebar($rail: 240px, $gap: s, $min: 60%)
+	+row
+	+wrap
+	+gap($gap)
+	> .rail
+		flex-basis: $rail
+		flex-grow: 1
+	> .flow
+		flex-basis: 0
+		flex-grow: 999
+		min-width: $min
+
+// Surface — the "material" fractal: skin + elevation in one call.
+// The building block of every card/panel/popover.
+=surface($bg: surface, $pad: s, $radius: 12, $elevation: none)
+	+bg($bg)
+	+border
+	+radius($radius)
+	+pad($pad)
+	@if $elevation != none
+		+shadow($elevation)
+
+// Responsive column grid from a per-breakpoint map:
+//   +cols((base: 1, sm: 2, lg: 3))
+=cols($map, $gap: s)
+	display: grid
+	grid-auto-flow: row
+	+gap($gap)
+	@each $bp, $n in $map
+		@if $bp == base
+			grid-template-columns: repeat($n, minmax(0, 1fr))
+		@else
+			+at($bp)
+				grid-template-columns: repeat($n, minmax(0, 1fr))

package/templates/_responsive.sass

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

@@ -0,0 +1,127 @@
+// =============================================================================
+// 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/_utilities.sass

@@ -0,0 +1,125 @@
+// =============================================================================
+// UTILITY PROJECTION — the *other* way to consume a fractal.
+// -----------------------------------------------------------------------------
+// A fractal is a mixin. Here we bind a subset of them to class names so they
+// stay usable straight from markup (`class="box gap-m pad-l"`). This is the
+// key idea: utility classes are not a separate system — they are a generated
+// projection of the exact same fractals your components compose. Emit only the
+// atoms you want in markup; delete this whole file if you go SASS-only.
+// =============================================================================
+
+@use 'config' as *
+@use 'atoms' as *
+@use 'molecules' as *
+@use 'responsive' as *
+
+// --- Flow ------------------------------------------------------------------
+.box
+	+box
+.row
+	+row
+	&.wrap
+		+wrap
+
+// Alignment modifiers, semantic and axis-aware.
+.box
+	&.xcenter
+		align-items: center
+	&.xleft
+		align-items: flex-start
+	&.xright
+		align-items: flex-end
+	&.ycenter
+		justify-content: center
+	&.ytop
+		justify-content: flex-start
+	&.ybot
+		justify-content: flex-end
+
+.row
+	&.ycenter
+		align-items: center
+	&.ytop
+		align-items: flex-start
+	&.ybot
+		align-items: flex-end
+	&.xbetween
+		justify-content: space-between
+	&.xevenly
+		justify-content: space-evenly
+	&.xleft
+		justify-content: flex-start
+	&.xright
+		justify-content: flex-end
+
+// Fixed column grids.
+@for $n from 1 through 6
+	.grid-cols-#{$n}
+		+grid($n)
+
+.center
+	+center
+
+// --- Spacing scale → gap-* / pad-* -----------------------------------------
+@each $s in $space-steps
+	.gap-#{$s}
+		+gap($s)
+	.pad-#{$s}
+		+pad($s)
+	.px-#{$s}
+		+px($s)
+	.py-#{$s}
+		+py($s)
+
+// --- Radius / shadow / surface ---------------------------------------------
+@each $r in $radius-steps
+	.radius-#{$r}
+		+radius($r)
+
+@each $s in $shadow-steps
+	.shadow-#{$s}
+		+shadow($s)
+
+@each $role in $surface-roles
+	.bg-#{$role}
+		+bg($role)
+
+.border
+	+border
+@each $side in top right bottom left
+	.border-#{$side}
+		+border($side)
+
+// --- Type ------------------------------------------------------------------
+@each $t in $text-steps
+	.text-#{$t}
+		+type($t)
+
+.truncate
+	+truncate
+
+// Semantic type primitives — so you stop retyping `.text-sm .lh15 .muted`.
+.body
+	+type(md)
+	+leading(1.6)
+	+ink(primary)
+.muted
+	+ink(secondary)
+.eyebrow
+	+type(sm)
+	+ink(muted)
+	text-transform: uppercase
+	letter-spacing: 0.06em
+	font-weight: 500
+
+// --- Sizing shortcuts ------------------------------------------------------
+.wfull
+	+w(100%)
+.hfull
+	+h(100%)
+.full
+	+full
+.grow
+	+grow
+.min0
+	+min0

package/templates/index.sass

@@ -0,0 +1,20 @@
+// =============================================================================
+// STYLES ENTRY — the full emitted stylesheet in cascade order.
+// -----------------------------------------------------------------------------
+//   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.
+// =============================================================================
+
+@use './tokens'
+@use './base'
+@use './utilities'
+@use './blocks'
+@use './layouts'