fractalstyler2 0.4.0 → 0.7.0

package/skills/fractal-styler/references/fractals.md

@@ -1,28 +1,416 @@
-# Fractals Catalog Reference
-
-## Atom Fractals (Single Decisions)
-
-* **Layout Flow**: `+box(x, y)` (flex col), `+row(x, y)` (flex row), `+wrap`, `+grid(cols)`, `+auto-grid(min, gap)`, `+center` (grid center).
-* **Spacing**: `+gap(v)`, `+pad(v)`, `+px(v)`, `+py(v)`, `+mx-auto`, `+my-auto`.
-* **Sizing**: `+w(v)`, `+h(v)`, `+full`, `+square(v)`, `+grow(n)`, `+shrink(n)`, `+min0`.
-* **Surfaces**: `+bg(role)`, `+ink(role)`, `+border(side, color)`, `+radius(v)`, `+shadow(v)`.
-* **Position**: `+relative`, `+absolute(inset)`, `+sticky(top)`, `+fill`.
-* **Type**: `+type(v)`, `+weight(w)`, `+leading(lh)`, `+truncate`, `+clamp-lines(n)`.
-* **Motion**: `+transition(props, dur, ease)`, `+ring(color)`.
-
-## Molecule Fractals (Compositions of Atoms)
-
-* **`+stack($gap: xs, $x: null)`**: Vertical flex column rhythm with uniform gap.
-* **`+cluster($gap: xs, $x: start, $y: center)`**: Wrapping flex row for tag clouds, chips, and button rows.
-* **`+center-column($max: 60ch, $pad: s)`**: Bounded reading column with max-width measure and auto margins.
-* **`+cover($min: 100vh, $pad: s)`**: Full-height container with a vertically centered focal child (`> .center`).
-* **`+frame($ratio: 16 / 9)`**: Fixed aspect-ratio container for media.
-* **`+reel($gap: xs)`**: Horizontal scroll-snap rail.
-* **`+with-sidebar($rail: 240px, $gap: s, $min: 60%)`**: Intrinsic sidebar + fluid main layout.
-* **`+surface($bg: surface, $pad: s, $radius: 12, $elevation: none)`**: The all-in-one material mixin.
-* **`+cols($map, $gap: s)`**: Responsive grid mapped across breakpoints, e.g. `+cols((base: 1, sm: 2, lg: 3), m)`.
-
-## Responsive Utilities
-* `+at(sm | md | lg | xl)`: Mobile-first min-width media query.
-* `+until(sm | md | lg | xl)`: Max-width media query.
-* `+cq`, `+cq-at(width)`, `+cq-until(width)`: Container queries.
+# Fractalstyler2 — Class Reference
+
+GENERATED FILE — do not edit. Emitted by `scripts/update-registry.js` from the
+parsed stylesheet. 250 classes across 89 tokens.
+
+**The classes below are the entire public API.** The system defines no
+authoring mixins and no SASS functions — `+stack`, `+surface`, `space()` and
+friends do not exist. Compose in markup.
+
+`*` marks a family: substitute a preset step (`3xs 2xs xs sm md lg xl 2xl 3xl`)
+or a value from the literal ladder: `0, 1, 2, 4, 6, 8, 12`, then every
+multiple of 8 — to 64px for gap/pad/marg and radius, to 512px for sizing.
+Append `-mob` or `-desk` to bind a
+class to one side of the 768px seam.
+
+---
+
+## L0 — Tokens
+
+Raw values. Every token also exists as a class.
+
+| Class | Applies | Source |
+|:---|:---|:---|
+| `.theme-light-default` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-himalaya-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-editorial-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-space-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-sun-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-monochrono-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-molly-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-malana-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-coresync-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-studio-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-matcha-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-sakura-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-nordic-frost-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-desert-dune-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-lavender-mist-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-botanical-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-clay-studio-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-solaris-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-cyberpunk-day-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-copper-patina-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-dracula-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-lagoona-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-frozen-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-night-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-inkworm-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-monochrono-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-fouram-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-wintercame-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-sun-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-console-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-dracula-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-catppuccin-mocha` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-nord-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-gruvbox-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-onedark-pro` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-rose-pine-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-midnight-emerald-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-obsidian-crimson-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-synthwave-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-deep-ocean-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-amethyst-void-dark` | 22 colour tokens | `_00_themes.sass` |
+
+---
+
+## L1 — Dimensions
+
+Space, size, radius. Preset steps (3xs..3xl) and the literal ladder, each in three bands: base, -mob, -desk.
+
+| Class | Applies | Source |
+|:---|:---|:---|
+| `.gap-*` | gap: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.rgap-*` | row-gap: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.cgap-*` | column-gap: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.pad-*` | padding: calc(var(--space-*) * var(--pad-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.pad-x-*` | padding-inline: calc(var(--space-*) * var(--pad-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.pad-y-*` | padding-block: calc(var(--space-*) * var(--pad-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.pad-top-*` | padding-top: calc(var(--space-*) * var(--pad-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.pad-right-*` | padding-right: calc(var(--space-*) * var(--pad-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.pad-bottom-*` | padding-bottom: calc(var(--space-*) * var(--pad-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.pad-left-*` | padding-left: calc(var(--space-*) * var(--pad-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.marg-*` | margin: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.marg--*` | margin: calc(var(--space-*) * var(--gap-scale) * -1) \| -{N}px | `_02_dimensions.sass` |
+| `.marg-x-*` | margin-inline: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.marg-y-*` | margin-block: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.marg-top-*` | margin-top: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.marg-top--*` | margin-top: calc(var(--space-*) * var(--gap-scale) * -1) \| -{N}px | `_02_dimensions.sass` |
+| `.marg-bottom-*` | margin-bottom: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.marg-bottom--*` | margin-bottom: calc(var(--space-*) * var(--gap-scale) * -1) \| -{N}px | `_02_dimensions.sass` |
+| `.marg-left-*` | margin-left: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.marg-right-*` | margin-right: calc(var(--space-*) * var(--gap-scale)) \| {N}px | `_02_dimensions.sass` |
+| `.radius-*` | border-radius: {N}px | `_02_dimensions.sass` |
+| `.radius-full` | border-radius: var(--radius-full) | `_02_dimensions.sass` |
+| `.w-*` | width: {N}px | `_02_dimensions.sass` |
+| `.h-*` | height: {N}px | `_02_dimensions.sass` |
+| `.square-*` | width: {N}px; height: {N}px | `_02_dimensions.sass` |
+| `.min0` | min-width: 0; min-height: 0 | `_02_dimensions.sass` |
+| `.wfull` | width: 100% | `_02_dimensions.sass` |
+| `.hfull` | height: 100% | `_02_dimensions.sass` |
+| `.full` | width: 100%; height: 100% | `_02_dimensions.sass` |
+| `.hfull-vh` | min-height: 100vh | `_02_dimensions.sass` |
+| `.hfull-vh-fitted` | min-height: calc(100vh - var(--header-height) - var(--footer-height)) | `_02_dimensions.sass` |
+
+---
+
+## L2 — Containers
+
+Flow and alignment. x* is ALWAYS horizontal, y* is ALWAYS vertical, in every container.
+
+| Class | Applies | Source |
+|:---|:---|:---|
+| `.box` | .box component / container | `_03_containers.sass` |
+| `.box.xcenter` | Modifier for .box | `_03_containers.sass` |
+| `.box.xleft` | Modifier for .box | `_03_containers.sass` |
+| `.box.xright` | Modifier for .box | `_03_containers.sass` |
+| `.box.ycenter` | Modifier for .box | `_03_containers.sass` |
+| `.box.ytop` | Modifier for .box | `_03_containers.sass` |
+| `.box.ybot` | Modifier for .box | `_03_containers.sass` |
+| `.box.ybetween` | Modifier for .box | `_03_containers.sass` |
+| `.box.yevenly` | Modifier for .box | `_03_containers.sass` |
+| `.box.yaround` | Modifier for .box | `_03_containers.sass` |
+| `.row` | .row component / container | `_03_containers.sass` |
+| `.row.xleft` | Modifier for .row | `_03_containers.sass` |
+| `.row.xcenter` | Modifier for .row | `_03_containers.sass` |
+| `.row.xright` | Modifier for .row | `_03_containers.sass` |
+| `.row.xbetween` | Modifier for .row | `_03_containers.sass` |
+| `.row.xevenly` | Modifier for .row | `_03_containers.sass` |
+| `.row.xaround` | Modifier for .row | `_03_containers.sass` |
+| `.row.ycenter` | Modifier for .row | `_03_containers.sass` |
+| `.row.ytop` | Modifier for .row | `_03_containers.sass` |
+| `.row.ybot` | Modifier for .row | `_03_containers.sass` |
+| `.grid` | .grid component / container | `_03_containers.sass` |
+| `.grid.center` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.xcenter` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.xleft` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.xright` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.xstretch` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.ycenter` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.ytop` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.ybot` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.ystretch` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.xbetween` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.xevenly` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.xaround` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.ybetween` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.yevenly` | Modifier for .grid | `_03_containers.sass` |
+| `.grid.yaround` | Modifier for .grid | `_03_containers.sass` |
+| `.wrap` | .wrap component / container | `_03_containers.sass` |
+| `.grow` | .grow component / container | `_03_containers.sass` |
+| `.shrink-0` | .shrink-0 component / container | `_03_containers.sass` |
+| `.relative` | .relative component / container | `_03_containers.sass` |
+| `.absolute` | .absolute component / container | `_03_containers.sass` |
+| `.fixed` | .fixed component / container | `_03_containers.sass` |
+| `.sticky` | .sticky component / container | `_03_containers.sass` |
+
+---
+
+## L3 — Layouts
+
+Grids that step only through divisors, reading measures, frames, reels.
+
+| Class | Applies | Source |
+|:---|:---|:---|
+| `.frame-16-9` | aspect-ratio: 16 / 9 | `_04_layouts.sass` |
+| `.frame-9-16` | aspect-ratio: 9 / 16 | `_04_layouts.sass` |
+| `.frame-4-3` | aspect-ratio: 4 / 3 | `_04_layouts.sass` |
+| `.frame-3-4` | aspect-ratio: 3 / 4 | `_04_layouts.sass` |
+| `.frame-3-2` | aspect-ratio: 3 / 2 | `_04_layouts.sass` |
+| `.frame-2-3` | aspect-ratio: 2 / 3 | `_04_layouts.sass` |
+| `.frame-1-1` | aspect-ratio: 1 / 1 | `_04_layouts.sass` |
+| `.grid-1` | .grid-1 component / container | `_04_layouts.sass` |
+| `.grid-2` | .grid-2 component / container | `_04_layouts.sass` |
+| `.grid-3` | .grid-3 component / container | `_04_layouts.sass` |
+| `.grid-4` | .grid-4 component / container | `_04_layouts.sass` |
+| `.grid-6` | .grid-6 component / container | `_04_layouts.sass` |
+| `.card-grid` | .card-grid component / container | `_04_layouts.sass` |
+| `.prose` | .prose component / container | `_04_layouts.sass` |
+| `.reel` | .reel component / container | `_04_layouts.sass` |
+
+---
+
+## L4 — Shells
+
+Page and application scaffolding. Each shell class is paired with a canonical markup — see canonical-markups.md.
+
+| Class | Applies | Source |
+|:---|:---|:---|
+| `.app-shell` | .app-shell component / container | `_05_shells.sass` |
+| `.app-header` | .app-header component / container | `_05_shells.sass` |
+| `.app-main` | .app-main component / container | `_05_shells.sass` |
+| `.main-section` | .main-section component / container | `_05_shells.sass` |
+| `.sidebar-left` | , | `_05_shells.sass` |
+| `.sidebar-right` | .sidebar-right component / container | `_05_shells.sass` |
+| `.sidebar-left` | .sidebar-left component / container | `_05_shells.sass` |
+| `.sidebar-right` | .sidebar-right component / container | `_05_shells.sass` |
+| `.sidebar-left` | Required child of .sidebar-right — see canonical-markups.md | `_05_shells.sass` |
+| `.sidebar-right` | Required child of .sidebar-right — see canonical-markups.md | `_05_shells.sass` |
+| `.content-shell` | .content-shell component / container | `_05_shells.sass` |
+| `.app-footer` | .app-footer component / container | `_05_shells.sass` |
+| `.mobile-toc` | .mobile-toc component / container | `_05_shells.sass` |
+| `.navtree` | .navtree component / container | `_05_shells.sass` |
+| `.navtree-title` | .navtree-title component / container | `_05_shells.sass` |
+| `.navtree-link` | .navtree-link component / container | `_05_shells.sass` |
+| `.navtree-link.active` | Modifier for .navtree-link | `_05_shells.sass` |
+| `.navtree-sub` | .navtree-sub component / container | `_05_shells.sass` |
+| `.toc` | .toc component / container | `_05_shells.sass` |
+| `.toc-title` | .toc-title component / container | `_05_shells.sass` |
+| `.toc-list` | .toc-list component / container | `_05_shells.sass` |
+| `.toc-link` | .toc-link component / container | `_05_shells.sass` |
+| `.toc-link.active` | Modifier for .toc-link | `_05_shells.sass` |
+| `.toc-footer` | .toc-footer component / container | `_05_shells.sass` |
+| `.tab-list` | .tab-list component / container | `_05_shells.sass` |
+| `.tab-trigger` | .tab-trigger component / container | `_05_shells.sass` |
+| `.tab-trigger.active` | Modifier for .tab-trigger | `_05_shells.sass` |
+| `.page-shell` | .page-shell component / container | `_05_shells.sass` |
+| `.page-split` | .page-split component / container | `_05_shells.sass` |
+| `.page-main` | Required child of .page-split — see canonical-markups.md | `_05_shells.sass` |
+| `.page-sidebar` | Required child of .page-split — see canonical-markups.md | `_05_shells.sass` |
+| `.drawer` | .drawer component / container | `_05_shells.sass` |
+| `.drawer.open` | Modifier for .drawer | `_05_shells.sass` |
+| `.dialog` | .dialog component / container | `_05_shells.sass` |
+| `.dialog.open` | , | `_05_shells.sass` |
+| `.popover` | .popover component / container | `_05_shells.sass` |
+| `.popover.open` | Modifier for .popover | `_05_shells.sass` |
+| `.accordion` | .accordion component / container | `_05_shells.sass` |
+| `.accordion-item` | .accordion-item component / container | `_05_shells.sass` |
+| `.accordion-content` | Required child of .accordion-item — see canonical-markups.md | `_05_shells.sass` |
+| `.accordion-panel` | Required child of .accordion-item — see canonical-markups.md | `_05_shells.sass` |
+| `.accordion-item.open` | .accordion-content | `_05_shells.sass` |
+| `.accordion-trigger` | .accordion-trigger component / container | `_05_shells.sass` |
+| `.hero` | .hero component / container | `_05_shells.sass` |
+
+---
+
+## L5 — Visuals & Interactions
+
+Surfaces, ink, borders, type, controls. The outermost layer.
+
+| Class | Applies | Source |
+|:---|:---|:---|
+| `.bg` | .bg component / container | `_06_visuals.sass` |
+| `.surface` | .surface component / container | `_06_visuals.sass` |
+| `.raised` | .raised component / container | `_06_visuals.sass` |
+| `.panel` | .panel component / container | `_06_visuals.sass` |
+| `.footer` | .footer component / container | `_06_visuals.sass` |
+| `.canvas` | .canvas component / container | `_06_visuals.sass` |
+| `.terminal` | .terminal component / container | `_06_visuals.sass` |
+| `.text-primary` | .text-primary component / container | `_06_visuals.sass` |
+| `.text-secondary` | .text-secondary component / container | `_06_visuals.sass` |
+| `.text-muted` | .text-muted component / container | `_06_visuals.sass` |
+| `.text-inverse` | .text-inverse component / container | `_06_visuals.sass` |
+| `.text-theme` | .text-theme component / container | `_06_visuals.sass` |
+| `.text-success` | .text-success component / container | `_06_visuals.sass` |
+| `.text-warning` | .text-warning component / container | `_06_visuals.sass` |
+| `.text-danger` | .text-danger component / container | `_06_visuals.sass` |
+| `.text-info` | .text-info component / container | `_06_visuals.sass` |
+| `.bg-success` | .bg-success component / container | `_06_visuals.sass` |
+| `.bg-warning` | .bg-warning component / container | `_06_visuals.sass` |
+| `.bg-danger` | .bg-danger component / container | `_06_visuals.sass` |
+| `.bg-info` | .bg-info component / container | `_06_visuals.sass` |
+| `.border` | .border component / container | `_06_visuals.sass` |
+| `.border-subtle` | .border-subtle component / container | `_06_visuals.sass` |
+| `.border-top` | .border-top component / container | `_06_visuals.sass` |
+| `.border-right` | .border-right component / container | `_06_visuals.sass` |
+| `.border-bottom` | .border-bottom component / container | `_06_visuals.sass` |
+| `.border-left` | .border-left component / container | `_06_visuals.sass` |
+| `.text-xs` | .text-xs component / container | `_06_visuals.sass` |
+| `.text-sm` | .text-sm component / container | `_06_visuals.sass` |
+| `.text-md` | .text-md component / container | `_06_visuals.sass` |
+| `.text-lg` | .text-lg component / container | `_06_visuals.sass` |
+| `.text-xl` | .text-xl component / container | `_06_visuals.sass` |
+| `.text-2xl` | .text-2xl component / container | `_06_visuals.sass` |
+| `.text-3xl` | .text-3xl component / container | `_06_visuals.sass` |
+| `.text-4xl` | .text-4xl component / container | `_06_visuals.sass` |
+| `.weight-400` | .weight-400 component / container | `_06_visuals.sass` |
+| `.weight-500` | .weight-500 component / container | `_06_visuals.sass` |
+| `.weight-600` | .weight-600 component / container | `_06_visuals.sass` |
+| `.weight-700` | .weight-700 component / container | `_06_visuals.sass` |
+| `.mono` | .mono component / container | `_06_visuals.sass` |
+| `.tt-u` | .tt-u component / container | `_06_visuals.sass` |
+| `.tt-c` | .tt-c component / container | `_06_visuals.sass` |
+| `.truncate` | .truncate component / container | `_06_visuals.sass` |
+| `.clamp-1` | .clamp-1 component / container | `_06_visuals.sass` |
+| `.clamp-2` | .clamp-2 component / container | `_06_visuals.sass` |
+| `.clamp-3` | .clamp-3 component / container | `_06_visuals.sass` |
+| `.eyebrow` | .eyebrow component / container | `_06_visuals.sass` |
+| `.card` | .card component / container | `_06_visuals.sass` |
+| `.field` | .field component / container | `_06_visuals.sass` |
+| `.field-label` | .field-label component / container | `_06_visuals.sass` |
+| `.field-error` | .field-error component / container | `_06_visuals.sass` |
+| `.avatar` | .avatar component / container | `_06_visuals.sass` |
+| `.divider` | .divider component / container | `_06_visuals.sass` |
+| `.kbd` | .kbd component / container | `_06_visuals.sass` |
+| `.switch-track` | .switch-track component / container | `_06_visuals.sass` |
+| `.switch-thumb` | .switch-thumb component / container | `_06_visuals.sass` |
+| `.switch-track` | [aria-checked='true'], | `_06_visuals.sass` |
+| `.switch-track` | .checked | `_06_visuals.sass` |
+| `.switch-thumb` | Required child of .switch-track — see canonical-markups.md | `_06_visuals.sass` |
+| `.hide-mobile` | .hide-mobile component / container | `_06_visuals.sass` |
+| `.hide-desktop` | .hide-desktop component / container | `_06_visuals.sass` |
+| `.only-mobile` | .only-mobile component / container | `_06_visuals.sass` |
+| `.shadow-sm` | .shadow-sm component / container | `_06_visuals.sass` |
+| `.shadow-md` | .shadow-md component / container | `_06_visuals.sass` |
+| `.shadow-lg` | .shadow-lg component / container | `_06_visuals.sass` |
+| `.badge` | .badge component / container | `_07_interactions.sass` |
+| `.input` | .input component / container | `_07_interactions.sass` |
+| `.select` | .select component / container | `_07_interactions.sass` |
+| `.link` | .link component / container | `_07_interactions.sass` |
+| `.link-plain` | .link-plain component / container | `_07_interactions.sass` |
+| `.link-parent` | .link-parent component / container | `_07_interactions.sass` |
+| `.link-plain` | Required child of .link-parent — see canonical-markups.md | `_07_interactions.sass` |
+| `.button` | .button component / container | `_07_interactions.sass` |
+| `.button.primary` | Modifier for .button | `_07_interactions.sass` |
+| `.button.ghost` | Modifier for .button | `_07_interactions.sass` |
+| `.button.active` | Modifier for .button | `_07_interactions.sass` |
+| `.button.is-icon` | Modifier for .button | `_07_interactions.sass` |
+
+---
+
+## Semantic Tokens
+
+```css
+:root {
+  --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;
+  --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);
+  --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);
+  --font-sans: "Google Sans Flex", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --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);
+  --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-sm: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+  --space-md: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
+  --space-lg: 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);
+  --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;
+  --radius-sm: 8px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --motion-fast: 120ms;
+  --motion-base: 160ms;
+  --motion-slow: 240ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --control-h-sm: 26px;
+  --control-h-md: 32px;
+  --control-h-lg: 38px;
+  --z-base: 0;
+  --z-raised: 10;
+  --z-sticky: 100;
+  --z-modal: 200;
+  --z-toast: 300;
+  --header-height: 48px;
+  --footer-height: 32px;
+  --measure: 65ch;
+  --page-gutter: clamp(1rem, 4vw, 2rem);
+  --sidebar-width: 260px;
+  --toc-width: 240px;
+  --card-min: 16rem;
+  --breakpoint: 768px;
+  --gap-scale: 0.85;
+  --pad-scale: 0.7;
+}
+```

package/skills/fractal-styler/references/tokens.md

@@ -1,36 +1,110 @@
-# Design Tokens Reference
-
-## Space Scale (Fluid Utopia)
-| Step | Token Variable | Approximate Px | Clamp Formula |
-| :--- | :--- | :--- | :--- |
-| `3xs` | `--space-3xs` | ~5px | `clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem)` |
-| `2xs` | `--space-2xs` | ~9px | `clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem)` |
-| `xs`  | `--space-xs`  | ~14px | `clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem)` |
-| `s`   | `--space-s`   | ~18px | `clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)` |
-| `m`   | `--space-m`   | ~27px | `clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem)` |
-| `l`   | `--space-l`   | ~36px | `clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem)` |
-| `xl`  | `--space-xl`  | ~54px | `clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem)` |
-| `2xl` | `--space-2xl` | ~72px | `clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem)` |
-| `3xl` | `--space-3xl` | ~108px | `clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem)` |
-| `s-l` | `--space-s-l` | ~18→40px | `clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem)` |
-
-## Typography Scale
-| Step | Token Variable | Fluid Clamp |
-| :--- | :--- | :--- |
-| `xs`  | `--text-xs`  | `0.75rem` (12px) |
-| `sm`  | `--text-sm`  | `clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem)` |
-| `md`  | `--text-md`  | `clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)` |
-| `lg`  | `--text-lg`  | `clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem)` |
-| `xl`  | `--text-xl`  | `clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem)` |
-| `2xl` | `--text-2xl` | `clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem)` |
-| `3xl` | `--text-3xl` | `clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem)` |
-| `4xl` | `--text-4xl` | `clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem)` |
-
-## Radius Scale
-`0`, `2`, `4`, `6`, `8`, `12`, `16`, `24`, `full`
-
-## Color & Surface Roles
-* **Surfaces**: `--bg`, `--bg-surface`, `--bg-raised`
-* **Ink**: `--text-primary`, `--text-secondary`, `--text-muted`, `--text-inverse`
-* **Borders**: `--border`, `--border-strong`
-* **Brand**: `--theme`, `--theme-hover`, `--theme-active`, `--ring`
+# Fractalstyler2 — Token Reference
+
+GENERATED FILE — do not edit. Emitted by `scripts/update-registry.js`
+from `_00_tokens.sass`.
+
+Every token is also a class. If `--space-md` exists, so do `.gap-md`,
+`.pad-md` and `.marg-md`. There is no second vocabulary to learn.
+
+## Fluid Type Scale
+
+Interpolates smoothly between 360px and 1240px. No breakpoints.
+
+| Token | Class | Value |
+|:---|:---|:---|
+| `--text-xs` | `.text-xs` | `0.75rem` |
+| `--text-sm` | `.text-sm` | `clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem)` |
+| `--text-md` | `.text-md` | `clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)` |
+| `--text-lg` | `.text-lg` | `clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem)` |
+| `--text-xl` | `.text-xl` | `clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem)` |
+| `--text-2xl` | `.text-2xl` | `clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem)` |
+| `--text-3xl` | `.text-3xl` | `clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem)` |
+| `--text-4xl` | `.text-4xl` | `clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem)` |
+
+## Fluid Space Scale
+
+Gaps and margins scale by `--gap-scale`; paddings by `--pad-scale`.
+The two move at different rates under the layout preset.
+
+| Token | Class | Value |
+|:---|:---|:---|
+| `--space-3xs` | `.gap-3xs` `.pad-3xs` | `clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem)` |
+| `--space-2xs` | `.gap-2xs` `.pad-2xs` | `clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem)` |
+| `--space-xs` | `.gap-xs` `.pad-xs` | `clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem)` |
+| `--space-sm` | `.gap-sm` `.pad-sm` | `clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)` |
+| `--space-md` | `.gap-md` `.pad-md` | `clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem)` |
+| `--space-lg` | `.gap-lg` `.pad-lg` | `clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem)` |
+| `--space-xl` | `.gap-xl` `.pad-xl` | `clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem)` |
+| `--space-2xl` | `.gap-2xl` `.pad-2xl` | `clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem)` |
+| `--space-3xl` | `.gap-3xl` `.pad-3xl` | `clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem)` |
+
+## Radius
+
+The `-sm/-md/-lg` channels are what compositions read; shape presets remap them.
+
+| Token | Class | Value |
+|:---|:---|:---|
+| `--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` |
+| `--radius-sm` | — | `8px` |
+| `--radius-md` | — | `16px` |
+| `--radius-lg` | — | `24px` |
+
+## Colour Roles
+
+Name the role, never the hex. Values shown are the light default;
+`[data-mode="dark"]` and the colour presets remap them.
+
+| Token | Class | Value |
+|:---|:---|:---|
+| `--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` | `.text-secondary` | `#5b6472` |
+| `--text-muted` | `.text-muted` | `#929497` |
+| `--text-inverse` | `.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` |
+| `--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)` |
+
+## Preset Axes
+
+Stamped as attributes. An absent attribute means that axis's default.
+
+| Attribute | Values | Default |
+|:---|:---|:---|
+| `data-layout` | tight · comfortable · sprawling | comfortable |
+| `data-shape` | round · curved · pro · sharp | curved |
+| `data-color` | clean · general · vibrant | general |
+| `data-motion` | reduced · active · heavy · springy | active |
+| `data-mode` | light · dark | follows prefers-color-scheme |

package/dist/styles/_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

package/dist/styles/_03_responsive.sass

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