fractalstyler2 0.4.0 → 0.7.0

package/templates/_04_atoms.sass

@@ -1,155 +0,0 @@
-// =============================================================================
-// 04_ATOMS — the indivisible units. One visual decision each.
-// -----------------------------------------------------------------------------
-// Every atom is a mixin. Call it inside a class to compose, or let
-// _09_utilities.sass project it to a utility class. Same fractal, two consumers.
-// =============================================================================
-
-@use '01_config' as *
-
-// --- Flow: the two axes of layout ------------------------------------------
-// A box is a vertical stack, a row is horizontal. Optional semantic alignment:
-//   +box(center)          → items centered on the cross axis
-//   +row(between, center) → spread on main axis, centered on cross axis
-=box($x: null, $y: null)
-	display: flex
-	flex-direction: column
-	@if $x
-		align-items: align($x)
-	@if $y
-		justify-content: align($y)
-
-=row($x: null, $y: null)
-	display: flex
-	flex-direction: row
-	@if $x
-		justify-content: align($x)
-	@if $y
-		align-items: align($y)
-
-=wrap
-	flex-wrap: wrap
-
-=grid($cols: 1)
-	display: grid
-	grid-template-columns: repeat($cols, minmax(0, 1fr))
-
-// A grid that reflows on its own — no breakpoints, no counting columns.
-=auto-grid($min: 15rem, $gap: s)
-	display: grid
-	grid-template-columns: repeat(auto-fit, minmax(min(#{$min}, 100%), 1fr))
-	gap: space($gap)
-
-// Dead-center anything (grid is the one-liner that works for a single child).
-=center
-	display: grid
-	place-items: center
-
-// --- Spacing ---------------------------------------------------------------
-=gap($v: s)
-	gap: space($v)
-
-=pad($v: s)
-	padding: space($v)
-
-=px($v: s)
-	padding-inline: space($v)
-
-=py($v: s)
-	padding-block: space($v)
-
-=mx-auto
-	margin-inline: auto
-
-=my-auto
-	margin-block: auto
-
-// --- Size ------------------------------------------------------------------
-=w($v: 100%)
-	width: $v
-
-=h($v: 100%)
-	height: $v
-
-=full
-	width: 100%
-	height: 100%
-
-=square($v)
-	width: $v
-	height: $v
-
-=grow($n: 1)
-	flex-grow: $n
-
-=shrink($n: 0)
-	flex-shrink: $n
-
-=min0
-	min-width: 0
-	min-height: 0
-
-// --- Surface & skin --------------------------------------------------------
-=bg($role: surface)
-	background-color: surface($role)
-
-=ink($role: primary)
-	color: ink($role)
-
-=border($side: all, $color: var(--border))
-	@if $side == all
-		border: 1px solid $color
-	@else
-		border-#{$side}: 1px solid $color
-
-=radius($v: 4)
-	border-radius: radius($v)
-
-=shadow($v: md)
-	box-shadow: shadow($v)
-
-// --- Position --------------------------------------------------------------
-=relative
-	position: relative
-
-=absolute($inset: null)
-	position: absolute
-	@if $inset
-		inset: $inset
-
-=sticky($top: 0)
-	position: sticky
-	top: $top
-
-=fill
-	position: absolute
-	inset: 0
-
-// --- Type ------------------------------------------------------------------
-=type($v)
-	font-size: text-size($v)
-
-=weight($w: 500)
-	font-weight: $w
-
-=leading($lh: 1.5)
-	line-height: $lh
-
-=truncate
-	overflow: hidden
-	white-space: nowrap
-	text-overflow: ellipsis
-
-=clamp-lines($n: 2)
-	display: -webkit-box
-	-webkit-line-clamp: $n
-	-webkit-box-orient: vertical
-	overflow: hidden
-
-// --- Motion ----------------------------------------------------------------
-=transition($props: all, $dur: 150ms, $ease: ease)
-	transition: $props $dur $ease
-
-=ring($color: var(--ring))
-	outline: 2px solid $color
-	outline-offset: 1px

package/templates/_05_molecules.sass

@@ -1,97 +0,0 @@
-// =============================================================================
-// 05_MOLECULES — 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 'sass:string'
-@use '01_config' as *
-@use '04_atoms' as *
-@use '03_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: string.unquote('#{$ratio}')
-	overflow: hidden
-	position: relative
-	> *
-		+full
-	> :is(img, video, iframe)
-		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 + border + optional radius + optional padding + elevation.
-// The building block of every card/panel/popover.
-=surface($bg: surface, $pad: null, $radius: 6, $elevation: none)
-	+bg($bg)
-	@if $radius != null
-		+radius($radius)
-	@if $pad != null
-		+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/_06_recipes.sass

@@ -1,189 +0,0 @@
-// =============================================================================
-// 06_RECIPES — macro mixins. Compositions of molecules and atoms.
-// -----------------------------------------------------------------------------
-// Recipes are mixins, NOT locked CSS classes. They take arguments and allow
-// custom components to compose standard patterns with flexible parameters.
-// =============================================================================
-
-@use '01_config' as *
-@use '04_atoms' as *
-@use '05_molecules' as *
-
-// Universal interactive control primitive (Button, Select trigger, Accordion header)
-=control($size: md, $radius: 4)
-	+row(null, center)
-	+gap(2xs)
-	+radius($radius)
-	+border(all, var(--border))
-	+bg(surface)
-	+ink(primary)
-	+weight(500)
-	user-select: none
-	cursor: pointer
-	text-decoration: none
-	transition: background 120ms ease, border-color 120ms ease, transform 80ms ease
-
-	@if $size == sm
-		height: var(--control-h-sm, 26px)
-		+px(2xs)
-		+type(xs)
-	@else if $size == lg
-		height: var(--control-h-lg, 38px)
-		+px(s)
-		+type(md)
-	@else
-		height: var(--control-h-md, 32px)
-		+px(xs)
-		+type(sm)
-
-	&:hover
-		+bg(raised)
-		border-color: var(--border-subtle)
-
-	&:active
-		transform: scale(0.985)
-
-	&:focus-visible
-		+ring
-
-	&:disabled, &[aria-disabled='true']
-		opacity: 0.5
-		cursor: not-allowed
-		pointer-events: none
-
-// Select input recipe (with embedded SVG chevron and optical line-height)
-=select($size: md, $radius: 4)
-	+control($size, $radius)
-	appearance: none
-	-webkit-appearance: none
-	padding-right: 28px
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237F91AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
-	background-repeat: no-repeat
-	background-position: right 8px center
-	line-height: 1.2
-	cursor: pointer
-	width: 100%
-
-// Partition divider recipe with guaranteed breathing room
-=partition($side: top, $pad: s)
-	@if $side == top
-		margin-top: auto
-		padding-top: space($pad)
-		border-top: 1px solid var(--border)
-	@else if $side == bottom
-		margin-bottom: space($pad)
-		padding-bottom: space($pad)
-		border-bottom: 1px solid var(--border)
-
-// Pure CSS collapsible transition (0fr -> 1fr grid transition)
-=collapsible
-	display: grid
-	grid-template-rows: 0fr
-	transition: grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1)
-
-	&[data-open='true'], &[aria-expanded='true']
-		grid-template-rows: 1fr
-
-	> .collapsible-inner
-		overflow: hidden
-		min-height: 0
-
-// Marquee animation recipe
-=marquee($speed: 30s, $gap: 1rem)
-	overflow: hidden
-	display: flex
-	user-select: none
-	gap: $gap
-	position: relative
-
-	&[data-fade='true']
-		mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)
-
-	> [data-slot='marquee-track']
-		display: flex
-		flex-shrink: 0
-		justify-content: space-around
-		gap: $gap
-		min-width: 100%
-		animation: marquee-scroll $speed linear infinite
-
-	&[data-pause='true']:hover > [data-slot='marquee-track']
-		animation-play-state: paused
-
-// Card recipe — surface material + top-anchored vertical stack
-=card($bg: surface, $pad: null, $radius: 6, $elevation: none)
-	+surface($bg, $pad, $radius, $elevation)
-	+box(stretch, start)
-	+gap(s)
-	height: 100%
-	text-align: left
-
-// Button recipe
-=button($size: md, $radius: 4)
-	+control($size, $radius)
-	justify-content: center
-
-// Badge recipe — compact pill chip with subtle border
-=badge
-	+row(center, center)
-	display: inline-flex
-	+gap(3xs)
-	+px(2xs)
-	+type(xs)
-	+weight(500)
-	+radius(3)
-	+bg(raised)
-	+ink(secondary)
-	+border(all, var(--border))
-	padding-block: 2px
-
-// Input recipe — text entry field
-=input
-	display: block
-	+w(100%)
-	+px(xs)
-	+type(sm)
-	+leading(1.5)
-	+border(all, var(--border))
-	+radius(4)
-	+bg(input)
-	+ink(primary)
-	height: var(--control-h-md, 32px)
-	transition: border-color 120ms ease, box-shadow 120ms ease
-	&:focus-visible, &:focus
-		outline: none
-		border-color: var(--theme-color)
-		box-shadow: 0 0 0 2px var(--ring)
-
-// Keycap recipe
-=kbd
-	display: inline-block
-	+px(3xs)
-	+type(xs)
-	+leading(1)
-	+radius(3)
-	+bg(raised)
-	border: 1px solid var(--border)
-	font-family: var(--font-mono)
-	padding-block: 2px
-
-// Overlay & Dialog surfaces
-=dialog-surface
-	+bg(dialog)
-	+border(all, var(--border))
-	+radius(6)
-	+shadow(lg)
-	max-width: min(92vw, 540px)
-	width: 100%
-
-=popover-surface
-	+bg(popover)
-	+border(all, var(--border))
-	+radius(6)
-	+shadow(md)
-
-// Divider recipe
-=divider
-	border: none
-	+border(top)
-	margin-block: space(s)

package/templates/_07_base.sass

@@ -1,44 +0,0 @@
-// =============================================================================
-// 07_BASE — a minimal, opinionated reset so the tokens actually reach the page.
-// Kept tiny: box model, sane media defaults, and wiring body to the palette.
-// =============================================================================
-
-*, *::before, *::after
-	box-sizing: border-box
-
-html
-	-webkit-text-size-adjust: 100%
-	font-family: var(--font-sans)
-
-body
-	margin: 0
-	min-height: 100vh
-	font-family: var(--font-sans)
-	font-size: var(--text-md)
-	line-height: 1.5
-	color: var(--text-primary)
-	background-color: var(--bg)
-	-webkit-font-smoothing: antialiased
-
-:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote)
-	margin: 0
-
-:where(h1, h2, h3, h4)
-	line-height: 1.15
-	text-wrap: balance
-
-:where(img, picture, video, canvas, svg)
-	display: block
-	max-width: 100%
-
-:where(a)
-	color: inherit
-	text-decoration-color: var(--border-subtle)
-
-:where(button, input, select, textarea)
-	font: inherit
-	color: inherit
-
-:where(:focus-visible)
-	outline: 2px solid var(--ring)
-	outline-offset: 2px