fractalstyler2 0.1.0 → 0.3.0

package/dist/mcp/schemas/snap_to_tokens.json

@@ -0,0 +1,25 @@
+{
+  "name": "snap_to_tokens",
+  "description": "Takes raw pixel values (e.g. from canvas elements in OpenDesign / Figma) and snaps them to the nearest fractalstyler2 design tokens, CSS variables, and suggested mixins.",
+  "parameters": {
+    "type": "object",
+    "properties": {
+      "gap": {
+        "type": "number",
+        "description": "Gap in pixels (e.g. 16)"
+      },
+      "padding": {
+        "type": "number",
+        "description": "Padding in pixels (e.g. 24)"
+      },
+      "radius": {
+        "type": "number",
+        "description": "Border radius in pixels (e.g. 10)"
+      },
+      "fontSize": {
+        "type": "number",
+        "description": "Font size in pixels (e.g. 18)"
+      }
+    }
+  }
+}

package/dist/mcp/schemas/validate_recipe.json

@@ -0,0 +1,16 @@
+{
+  "name": "validate_recipe",
+  "description": "Lints a SASS snippet or Svelte component against fractalstyler2 golden rules (flags legacy v1 classes like gap8/pad16, hardcoded pixels, modifier classes).",
+  "parameters": {
+    "type": "object",
+    "properties": {
+      "code": {
+        "type": "string",
+        "description": "The SASS or Svelte code to validate."
+      }
+    },
+    "required": [
+      "code"
+    ]
+  }
+}

package/dist/mcp/server.js

@@ -11,7 +11,7 @@ import * as sass from 'sass';
 import { existsSync, readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-const VERSION = '0.1.0';
+const VERSION = '0.3.0';
 // Resolve styles directory for SASS compiler loadPaths
 function getStylesDir() {
     const HERE = dirname(fileURLToPath(import.meta.url));
@@ -23,7 +23,7 @@ function getStylesDir() {
         join(process.cwd(), 'templates')
     ];
     for (const candidate of candidates) {
-        if (existsSync(candidate) && existsSync(join(candidate, '_tokens.sass'))) {
+        if (existsSync(candidate) && existsSync(join(candidate, '_00_tokens.sass'))) {
             return candidate;
         }
     }
@@ -93,10 +93,11 @@ const DESIGN_TOKENS = {
         }
     },
     radius: {
-        steps: ['0', '2', '4', '6', '8', '12', '16', '24', 'full'],
+        steps: ['0', '2', '3', '4', '6', '8', '12', '16', '24', 'full'],
         values: {
             '0': '0px',
             '2': '2px',
+            '3': '3px',
             '4': '4px',
             '6': '6px',
             '8': '8px',
@@ -114,13 +115,22 @@ const DESIGN_TOKENS = {
     surfaces: {
         bg: 'var(--bg)',
         surface: 'var(--bg-surface)',
-        raised: 'var(--bg-raised)'
+        raised: 'var(--bg-raised)',
+        panel: 'var(--bg-panel)',
+        footer: 'var(--bg-footer)',
+        popover: 'var(--bg-popover)',
+        dialog: 'var(--bg-dialog)',
+        terminal: 'var(--bg-terminal)',
+        input: 'var(--bg-input)',
+        canvas: 'var(--bg-canvas)'
     },
     ink: {
         primary: 'var(--text-primary)',
         secondary: 'var(--text-secondary)',
         muted: 'var(--text-muted)',
-        inverse: 'var(--text-inverse)'
+        inverse: 'var(--text-inverse)',
+        themeColor: 'var(--theme-color)',
+        themeColorAlt: 'var(--theme-color-alt)'
     },
     brand: {
         theme: 'var(--theme)',
@@ -158,10 +168,10 @@ const FRACTAL_CATALOG = {
         { name: 'grow', signature: '+grow($n: 1)', description: 'Sets flex-grow.' },
         { name: 'shrink', signature: '+shrink($n: 0)', description: 'Sets flex-shrink.' },
         { name: 'min0', signature: '+min0', description: 'Sets min-width: 0 and min-height: 0 to prevent overflow.' },
-        { name: 'bg', signature: '+bg($role: surface)', description: 'Sets background-color to bg, surface, or raised.' },
-        { name: 'ink', signature: '+ink($role: primary)', description: 'Sets text color to primary, secondary, muted, or inverse.' },
+        { name: 'bg', signature: '+bg($role: surface)', description: 'Sets background-color to any of the 21 surface tokens.' },
+        { name: 'ink', signature: '+ink($role: primary)', description: 'Sets text color to primary, secondary, muted, inverse, theme-color, theme-color-alt.' },
         { name: 'border', signature: '+border($side: all, $color: var(--border))', description: 'Applies 1px solid border on all sides or a specific side.' },
-        { name: 'radius', signature: '+radius($v: 12)', description: 'Applies border-radius from radius token or raw px.' },
+        { name: 'radius', signature: '+radius($v: 6)', description: 'Applies border-radius from radius token or raw px.' },
         { name: 'shadow', signature: '+shadow($v: md)', description: 'Applies box-shadow from shadow scale (sm, md, lg).' },
         { name: 'type', signature: '+type($v)', description: 'Applies font-size from fluid type scale (xs..4xl).' },
         { name: 'weight', signature: '+weight($w: 500)', description: 'Sets font-weight.' },
@@ -179,9 +189,15 @@ const FRACTAL_CATALOG = {
         { name: 'frame', signature: '+frame($ratio: 16 / 9)', description: 'Aspect-ratio container for media (images, video, iframe).' },
         { name: 'reel', signature: '+reel($gap: xs)', description: 'Horizontal scroll-snap rail.' },
         { name: 'with-sidebar', signature: '+with-sidebar($rail: 240px, $gap: s, $min: 60%)', description: 'Intrinsic sidebar and fluid main content.' },
-        { name: 'surface', signature: '+surface($bg: surface, $pad: s, $radius: 12, $elevation: none)', description: 'All-in-one material fractal: skin, border, radius, pad, and elevation.' },
+        { name: 'surface', signature: '+surface($bg: surface, $pad: null, $radius: 6, $elevation: none)', description: 'All-in-one material fractal: skin, radius, pad, and elevation.' },
         { name: 'cols', signature: '+cols($map, $gap: s)', description: 'Responsive column grid mapped across breakpoints, e.g. (base: 1, sm: 2, lg: 3).' }
     ],
+    recipes: [
+        { name: 'card', signature: '+card($bg: surface, $pad: null, $radius: 6, $elevation: none)', description: 'Vertical card container recipe with optional pad and elevation.' },
+        { name: 'control', signature: '+control($size: md, $radius: 4)', description: 'Universal interactive control recipe (buttons, triggers, inputs).' },
+        { name: 'select', signature: '+select($size: md, $radius: 4)', description: 'Select input recipe with embedded SVG chevron.' },
+        { name: 'badge', signature: '+badge($radius: 4)', description: 'Compact status badge recipe.' }
+    ],
     layouts: [
         { name: 'grid-3', class: '.grid-3', description: 'Responsive 1 → 2 → 3 column reflow.' },
         { name: 'card-grid', class: '.card-grid', description: 'Intrinsic auto-fit grid for cards.' },
@@ -195,8 +211,8 @@ const FRACTAL_CATALOG = {
 const GUIDELINES = `
 # fractalstyler2 Design System Rules
 
-1. Never hardcode a value that a token covers (+gap(m), +radius(12), +bg(surface)).
-2. Compose fractals (+surface, +stack, +cluster); write raw CSS only for genuinely unique lines.
+1. Never hardcode a value that a token covers (+gap(m), +radius(6), +bg(surface)).
+2. Compose fractals (+surface, +stack, +cluster, +card); write raw CSS only for genuinely unique lines.
 3. Express component state on data-* / aria-* attributes, never modifier classes (e.g. &[data-elevated], &[data-variant='ghost']).
 4. Markup stays thin and semantic: prefer clean tags (<article class="card">) over utility class soup.
 5. Mobile-first: define base styles first, then grow with +at(md/lg/xl) or +cols().
@@ -332,7 +348,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
                     properties: {
                         tier: {
                             type: 'string',
-                            enum: ['all', 'atoms', 'molecules', 'layouts'],
+                            enum: ['all', 'atoms', 'molecules', 'recipes', 'layouts'],
                             description: 'Filter by fractal tier.'
                         }
                     }

package/dist/styles/_00_tokens.sass

@@ -0,0 +1,177 @@
+// =============================================================================
+// 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'].
+// =============================================================================
+
+: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 2px, 3px, 4px, 6px hierarchy)
+	--radius-0: 0
+	--radius-2: 2px
+	--radius-3: 3px
+	--radius-4: 4px
+	--radius-6: 6px
+	--radius-8: 6px
+	--radius-12: 6px
+	--radius-16: 6px
+	--radius-24: 6px
+	--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
+
+	// Light palette (marker-free default)
+	--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)
+	--ring: rgba(0, 127, 78, 0.35)
+
+@media (prefers-color-scheme: dark)
+	:root:not([data-mode='light'])
+		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
+		--ring: rgba(16, 185, 129, 0.4)
+
+[data-mode='dark']
+	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
+	--ring: rgba(16, 185, 129, 0.4)
+
+[data-mode='light']
+	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)
+	--ring: rgba(0, 127, 78, 0.35)

package/{templates/_config.sass → dist/styles/_01_config.sass}

@@ -1,5 +1,5 @@
 // =============================================================================
-// CONFIG — the finite vocabulary every fractal draws from.
+// 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 —
@@ -11,15 +11,17 @@
 @use 'sass:meta'
 @use 'sass:list'
 
-// --- Scales (mirror the custom properties in _tokens.sass) --------------------
+// --- 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 4 6 8 12 16 24 full
+$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
-$surface-roles: bg surface raised
-$ink-roles: primary secondary muted inverse
+
+// 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)
 
@@ -59,12 +61,16 @@ $align-map: (start: flex-start, end: flex-end, center: center, between: space-be
 @function surface($role)
 	@if $role == bg
 		@return var(--bg)
+	@else if list.index($surface-roles, $role)
+		@return var(--bg-#{$role})
 	@else
 		@return var(--bg-#{$role})
 
 @function ink($role)
 	@if $role == primary
 		@return var(--text-primary)
+	@else if list.index($ink-roles, $role)
+		@return var(--text-#{$role})
 	@else
 		@return var(--text-#{$role})
 

package/dist/styles/_02_fonts.sass

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

package/dist/styles/_03_responsive.sass

@@ -0,0 +1,31 @@
+// =============================================================================
+// 03_RESPONSIVE — the breakpoint mixins. Viewport-aware conditional styling.
+// -----------------------------------------------------------------------------
+// Mobile-first defaults; use +at($bp) for min-width media queries.
+// =============================================================================
+
+@use '01_config' as *
+
+=at($bp)
+	$width: bp($bp)
+	@if $width
+		@media (min-width: $width)
+			@content
+	@else
+		@media (min-width: $bp)
+			@content
+
+=below($bp)
+	$width: bp($bp)
+	@if $width
+		@media (max-width: ($width - 1px))
+			@content
+	@else
+		@media (max-width: $bp)
+			@content
+
+=between($min-bp, $max-bp)
+	$min: bp($min-bp)
+	$max: bp($max-bp)
+	@media (min-width: $min) and (max-width: ($max - 1px))
+		@content

package/dist/styles/{_atoms.sass → _04_atoms.sass}

@@ -1,11 +1,11 @@
 // =============================================================================
-// ATOM FRACTALS — the indivisible units. One visual decision each.
+// 04_ATOMS — the indivisible units. One visual decision each.
 // -----------------------------------------------------------------------------
 // Every atom is a mixin. Call it inside a class to compose, or let
-// _utilities.sass project it to a utility class. Same fractal, two consumers.
+// _09_utilities.sass project it to a utility class. Same fractal, two consumers.
 // =============================================================================
 
-@use 'config' as *
+@use '01_config' as *
 
 // --- Flow: the two axes of layout ------------------------------------------
 // A box is a vertical stack, a row is horizontal. Optional semantic alignment:
@@ -102,7 +102,7 @@
 	@else
 		border-#{$side}: 1px solid $color
 
-=radius($v: 12)
+=radius($v: 4)
 	border-radius: radius($v)
 
 =shadow($v: md)

package/{templates/_molecules.sass → dist/styles/_05_molecules.sass}

@@ -1,14 +1,15 @@
 // =============================================================================
-// MOLECULE FRACTALS — self-similar: each is a small graph of atom fractals.
+// 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 'config' as *
-@use 'atoms' as *
-@use 'responsive' as *
+@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)
@@ -38,11 +39,13 @@
 		+my-auto
 
 // Frame — fixed aspect-ratio media box.
-=frame($ratio: 16 / 9)
-	aspect-ratio: $ratio
+=frame($ratio: '16 / 9')
+	aspect-ratio: string.unquote('#{$ratio}')
 	overflow: hidden
-	> :is(img, video, iframe)
+	position: relative
+	> *
 		+full
+	> :is(img, video, iframe)
 		object-fit: cover
 
 // Reel — horizontal scroll-snap rail.
@@ -69,13 +72,14 @@
 		flex-grow: 999
 		min-width: $min
 
-// Surface — the "material" fractal: skin + elevation in one call.
+// Surface — the "material" fractal: skin + border + optional radius + optional padding + elevation.
 // The building block of every card/panel/popover.
-=surface($bg: surface, $pad: s, $radius: 12, $elevation: none)
+=surface($bg: surface, $pad: null, $radius: 6, $elevation: none)
 	+bg($bg)
-	+border
-	+radius($radius)
-	+pad($pad)
+	@if $radius != null
+		+radius($radius)
+	@if $pad != null
+		+pad($pad)
 	@if $elevation != none
 		+shadow($elevation)