fractalstyler2 0.4.1 → 0.7.0

package/dist/styles/_10_layouts.sass

@@ -1,374 +0,0 @@
-// =============================================================================
-// 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
-	min-height: 100vh
-	> .app-header
-		+row(null, center)
-		+sticky(0)
-		+px(m)
-		background: color-mix(in srgb, var(--bg-surface) 88%, transparent)
-		backdrop-filter: blur(12px)
-		-webkit-backdrop-filter: blur(12px)
-		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/dist/styles/_11_own.sass

@@ -1,21 +0,0 @@
-// =============================================================================
-// 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/dist/styles/_fractals.sass

@@ -1,14 +0,0 @@
-// =============================================================================
-// 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(...)  +card(...)
-// =============================================================================
-
-@forward '01_config'
-@forward '03_responsive'
-@forward '04_atoms'
-@forward '05_molecules'
-@forward '06_recipes'

package/skills/style-migration/SKILL.md

@@ -1,45 +0,0 @@
----
-name: style-migration
-description: Migrate legacy CSS, Tailwind utilities, or fractals-styler (v1) classes into modern fractalstyler2 SASS mixin recipes and token scales. Use when refactoring stylesheets, updating legacy components, or cleaning up utility class soup.
----
-
-# Style Migration & Refactoring Skill
-
-This skill guides the refactoring and migration of existing styles into idiomatic `fractalstyler2`.
-
----
-
-## 1. Quick Replacement Matrix
-
-| Legacy Pattern | Problem | fractalstyler2 Replacement |
-| :--- | :--- | :--- |
-| `gap8`, `gap16`, `gap24` | Dynamic JIT classes removed in v2 | Markup: `.gap-xs`, `.gap-s`, `.gap-m`<br>SASS: `+gap(8)` or `+gap(s)` |
-| `pad8`, `pad16`, `pad24` | Dynamic JIT classes removed in v2 | Markup: `.pad-xs`, `.pad-s`, `.pad-m`<br>SASS: `+pad(16)` or `+pad(m)` |
-| `<div class="center">` (as reading text column) | In v2, `.center` dead-centers items in a grid | SASS: `.reading-col { +center-column }` |
-| `<div class="stack">` | Markup class `.stack` does not exist | SASS: `.container { +stack(s) }` |
-| `<div class="cluster">` | Markup class `.cluster` does not exist | SASS: `.tag-row { +cluster(xs) }` |
-| `w100`, `h100` | Removed aliases | `.wfull`, `.hfull` |
-| `min-w-0`, `min-h-0` | Removed utilities | `.min0` |
-| `[data-variant='quiet']` | Renamed on button | `[data-variant='ghost']` |
-| `.appshell` | Renamed layout | `.app-shell` |
-
----
-
-## 2. Refactoring Procedure
-
-1. **Identify the Container**: Is it a card, panel, button, reading column, or grid?
-2. **Select the Molecule**:
-   - Vertical list of items → `+stack(s)`
-   - Tag list / button row → `+cluster(xs)`
-   - Box with border/radius/padding → `+surface(surface, s, 12)`
-   - Full height hero → `+cover(80vh, xl)`
-3. **Strip Utility Soup from Markup**: Replace long class strings (`class="box pad16 gap12 w100 min-w-0 radius12 border"`) with a single semantic class (`class="card"` or `class="feed-item"`).
-4. **Move Decisions to `<style lang="sass">`**:
-   ```sass
-   @use '$lib/styles/fractals' as *
-
-   .feed-item
-     +surface(surface, s, 12)
-     +stack(s)
-   ```
-5. **Verify**: Use the MCP tool `validate_recipe` or `npx sass src/lib/styles/index.sass /tmp/check.css`.

package/templates/_00_tokens.sass

@@ -1,154 +0,0 @@
-// =============================================================================
-// 00_TOKENS — the single source of truth for runtime CSS 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 explicit [data-mode='dark'].
-// =============================================================================
-
-=light-theme-tokens
-	color-scheme: light
-	--bg: #fdfefe
-	--bg-surface: #f8f7f7
-	--bg-raised: #f1f5f9
-	--bg-panel: #F1F3F5
-	--bg-footer: #E9ECEF
-	--bg-popover: #FFFFFF
-	--bg-dialog: #FFFFFF
-	--bg-terminal: #0F172A
-	--bg-input: #FFFFFF
-	--bg-canvas: #F8F9FA
-	--text-primary: #0f172a
-	--text-secondary: #5b6472
-	--text-muted: #929497
-	--text-inverse: #ffffff
-	--state-hover: #E2E8F0
-	--state-hover-subtle: #F1F5F9
-	--state-selected: #CBD5E1
-	--border: #E2E8F0
-	--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
-	--warning-hover: #D97706
-	--danger: #EF4444
-	--danger-hover: #DC2626
-	--info: #3B82F6
-	--info-hover: #2563EB
-	--feedback-error: #DC2626
-	--ring: rgba(0, 127, 78, 0.35)
-
-=dark-theme-tokens
-	color-scheme: dark
-	--bg: #0E1118
-	--bg-surface: #141824
-	--bg-raised: #1C2232
-	--bg-panel: #101420
-	--bg-footer: #0B0D14
-	--bg-popover: #20273A
-	--bg-dialog: #20273A
-	--bg-terminal: #080A0F
-	--bg-input: #121622
-	--bg-canvas: #0E1118
-	--border: #28324A
-	--border-subtle: #1E2538
-	--text-primary: #EDF2F7
-	--text-secondary: #9BB0C7
-	--text-muted: #5D7087
-	--state-hover: #263047
-	--state-hover-subtle: #1B2233
-	--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
-	--warning: #FBBF24
-	--warning-hover: #FCD34D
-	--danger: #F87171
-	--danger-hover: #FCA5A5
-	--info: #60A5FA
-	--info-hover: #93C5FD
-	--feedback-error: #F87171
-	--ring: rgba(16, 185, 129, 0.4)
-
-:root
-	color-scheme: light
-
-	// Fonts
-	--font-sans: "Google Sans Flex", sans-serif
-	--font-mono: "JetBrains Mono", 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 (Concentric hierarchy)
-	--radius-0: 0
-	--radius-2: 2px
-	--radius-3: 3px
-	--radius-4: 4px
-	--radius-6: 6px
-	--radius-8: 8px
-	--radius-12: 12px
-	--radius-16: 16px
-	--radius-24: 24px
-	--radius-full: 9999px
-
-	// 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)
-
-	// Layering
-	--z-base: 0
-	--z-raised: 10
-	--z-sticky: 100
-	--z-modal: 200
-	--z-toast: 300
-
-	// Layout
-	--header-height: 48px
-	--footer-height: 56px
-	--measure: 65ch
-
-	// Default Light Palette
-	+light-theme-tokens
-
-@media (prefers-color-scheme: dark)
-	:root:not([data-mode='light'])
-		+dark-theme-tokens
-
-[data-mode='dark']
-	+dark-theme-tokens
-
-[data-mode='light']
-	+light-theme-tokens

package/templates/_01_config.sass

@@ -1,66 +0,0 @@
-// =============================================================================
-// 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 and math.is-unitless($v)
-		@return #{$v}px
-	@if meta.type-of($v) == string and not (math.unit($v) != '')
-		@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)

package/templates/_02_fonts.sass

@@ -1,13 +0,0 @@
-// =============================================================================
-// 02_FONTS — local webfont declarations & font-family fallbacks.
-// -----------------------------------------------------------------------------
-// Downstream projects customize their font loading here.
-// =============================================================================
-
-// Define custom @font-face rules or load Google / local webfonts as needed:
-// @font-face
-// 	font-family: 'YourFont'
-// 	src: url('/fonts/YourFont.woff2') format('woff2')
-// 	font-weight: 100 900
-// 	font-style: normal
-// 	font-display: swap