@umoa/saascfm-css 0.1.0 → 0.1.1

package/templates/ts/saascfm-css/CHEATSHEET.md

@@ -0,0 +1,245 @@
+# SaaSCFM Cheat Sheet
+
+Every class below is generated only when it appears in your source. Colors come from `primitives.ts` and `tokens/`; everything else is fixed by the package.
+
+---
+
+## Colors — Primitives
+
+Each primitive generates three classes: `name` (color), `bg-name` (background), `border-name` (border). Edit `primitives.ts` to change the values or add colors.
+
+### Brand
+
+| Class | Hex |
+| --- | --- |
+| `brand-50` | #EFF4FF |
+| `brand-100` | #DBE6FE |
+| `brand-200` | #BFD3FE |
+| `brand-300` | #93B4FD |
+| `brand-400` | #6090FA |
+| `brand-500` | #3B6FF0 |
+| `brand-600` | #2A55D6 |
+| `brand-700` | #2344AD |
+| `brand-800` | #1F3B8A |
+| `brand-900` | #1B3170 |
+### Neutral
+
+| Class | Hex |
+| --- | --- |
+| `neutral-50` | #FAFAF9 |
+| `neutral-100` | #F4F4F2 |
+| `neutral-200` | #E8E8E5 |
+| `neutral-300` | #D6D6D2 |
+| `neutral-400` | #A8A8A2 |
+| `neutral-500` | #7C7C76 |
+| `neutral-600` | #5C5C57 |
+| `neutral-700` | #44443F |
+| `neutral-800` | #2C2C29 |
+| `neutral-900` | #181816 |
+### White
+
+| Class | Hex |
+| --- | --- |
+| `white` | #FFFFFF |
+### Status hues
+
+| Class | Hex |
+| --- | --- |
+| `red-100` | #FDECEC |
+| `red-500` | #D64545 |
+| `green-100` | #E6F5EC |
+| `green-500` | #2F7A4C |
+| `yellow-100` | #FBF0DC |
+| `yellow-500` | #C9821B |
+| `blue-100` | #DCEAF7 |
+| `blue-500` | #2F6FA8 |
+| `purple-100` | #F3EEF8 |
+| `purple-500` | #8A5FB0 |
+
+---
+
+## Colors — Semantic Tokens
+
+Each token is a CSS variable on `:root` (`var(--token-name)`) and, when it starts with `text-`, `bg-` or `border-`, a utility class.
+
+### Text
+
+| Class | Resolves to | Role |
+| --- | --- | --- |
+| `text-primary` | neutral-900 · #181816 | Primary reading text |
+| `text-secondary` | neutral-600 · #5C5C57 | Supporting text, captions, metadata |
+| `text-disabled` | neutral-400 · #A8A8A2 | Disabled UI states |
+| `text-faint` | neutral-500 · #7C7C76 | De-emphasized metadata (not an inactive control) |
+| `text-inverse` | white · #FFFFFF | Text on dark or colored backgrounds |
+| `text-brand` | brand-500 · #3B6FF0 | Brand accent text |
+| `text-link` | brand-600 · #2A55D6 | Links |
+
+### Background
+
+| Class | Resolves to | Role |
+| --- | --- | --- |
+| `bg-page` | neutral-50 · #FAFAF9 | Page canvas, nav and content |
+| `bg-surface` | white · #FFFFFF | Cards, modals, form containers |
+| `bg-subtle` | neutral-100 · #F4F4F2 | Quiet fills, table stripes, hover |
+| `bg-overlay` | neutral-900 · #181816 | Modal backdrops, drawers |
+| `bg-header` | white · #FFFFFF | Header only |
+| `bg-crumb` | neutral-100 · #F4F4F2 | Breadcrumb strip only |
+| `bg-brand` | brand-500 · #3B6FF0 | Primary buttons, key actions |
+| `bg-brand-subtle` | brand-50 · #EFF4FF | Selected rows, brand tints |
+
+### Border
+
+| Class | Resolves to | Role |
+| --- | --- | --- |
+| `border-default` | neutral-200 · #E8E8E5 | Standard borders and dividers (used by hl and vl) |
+| `border-muted` | neutral-100 · #F4F4F2 | Quiet dividers (used by hl-muted) |
+| `border-accent` | brand-200 · #BFD3FE | Accent outlines |
+| `border-focus` | brand-400 · #6090FA | Focus rings |
+
+### Status
+
+Each status has four tokens: `text-status-X`, `bg-status-X`, `bg-status-X-subtle`, `border-status-X`.
+
+| Status (text / bg / border) | Solid | bg-…-subtle |
+| --- | --- | --- |
+| `*-status-error` | red-500 · #D64545 | red-100 · #FDECEC |
+| `*-status-success` | green-500 · #2F7A4C | green-100 · #E6F5EC |
+| `*-status-warning` | yellow-500 · #C9821B | yellow-100 · #FBF0DC |
+| `*-status-info` | blue-500 · #2F6FA8 | blue-100 · #DCEAF7 |
+| `*-status-hold` | purple-500 · #8A5FB0 | purple-100 · #F3EEF8 |
+
+### Navigation (CSS vars only, no utility class)
+
+| CSS var | Resolves to | Role |
+| --- | --- | --- |
+| `--nav-bg` | neutral-50 · #FAFAF9 | Sidebar background |
+| `--nav-item-text` | neutral-600 · #5C5C57 | Nav item text at rest |
+| `--nav-item-active-bg` | brand-50 · #EFF4FF | Active item background |
+| `--nav-item-active-text` | brand-600 · #2A55D6 | Active item text |
+| `--nav-group-label` | neutral-500 · #7C7C76 | Group label |
+| `--nav-parent-dot` | brand-500 · #3B6FF0 | Dot on expandable parents |
+| `--nav-children-border` | neutral-200 · #E8E8E5 | Guide line on nested items |
+| `--nav-children-active-border` | brand-500 · #3B6FF0 | Guide line, active state |
+| `--tabb-num-text` | neutral-500 · #7C7C76 | Step number text |
+| `--tabb-num-bg` | white · #FFFFFF | Step number background |
+| `--tabb-num-border` | neutral-200 · #E8E8E5 | Step number border |
+| `--tabb-num-next-text` | neutral-900 · #181816 | Next step text |
+| `--tabb-num-next-bg` | white · #FFFFFF | Next step background |
+| `--tabb-num-next-border` | neutral-400 · #A8A8A2 | Next step border |
+| `--tabb-num-active-text` | white · #FFFFFF | Active step text |
+| `--tabb-num-active-bg` | brand-500 · #3B6FF0 | Active step background |
+| `--tabb-num-active-border` | brand-500 · #3B6FF0 | Active step border |
+| `--tabb-check-completed-text` | brand-500 · #3B6FF0 | Completed check text |
+| `--tabb-check-completed-bg` | brand-50 · #EFF4FF | Completed check background |
+| `--tabb-check-completed-border` | brand-50 · #EFF4FF | Completed check border |
+| `--tabb-check-active-text` | white · #FFFFFF | Active check text |
+| `--tabb-check-active-bg` | brand-500 · #3B6FF0 | Active check background |
+| `--tabb-check-active-border` | brand-500 · #3B6FF0 | Active check border |
+
+---
+
+## Spacing and sizing: `{prefix}-{n?}{number}{suffix?}`
+
+| Prefix | Property |
+| --- | --- |
+| `w` `h` | width, height |
+| `mw` `mh` | max-width, max-height |
+| `minw` `minh` | min-width, min-height |
+| `mt` `mr` `mb` `ml` | margin sides |
+| `mtb` `mrl` | margin top+bottom, right+left |
+| `p` | padding, all sides |
+| `pt` `pr` `pb` `pl` | padding sides |
+| `ptb` `prl` | padding top+bottom, right+left |
+| `g` | gap |
+| `gc` `gr` | column-gap, row-gap |
+| `bdrd` | border-radius |
+| `bdw` | border-width (also sets border-style: solid) |
+| `zdex` | z-index (unitless) |
+
+Suffixes: `p` percent (`w-10p`), `vw` / `vh` (`w` and `h` only), `n` negative (`mt-n10`, not on gap), `d` decimal point (`mt-12d5` = 12.5px, `mt-12d5p` = 12.5%).
+
+```
+mt-20       margin-top: 20px
+mt-10p      margin-top: 10%
+w-50vw      width: 50vw
+mt-n10      margin-top: -10px
+g-16        gap: 16px
+gc-8 gr-12  column-gap: 8px, row-gap: 12px
+```
+
+Add `!` to any class to force `!important`: `mt-12!`, `bg-page!`.
+
+---
+
+## Spacing static
+
+| Class | Output |
+| --- | --- |
+| `bn` | border: none |
+| `auto` | margin: 0 auto |
+| `hl` | border-bottom 1px, border-default, width 100% |
+| `hl-muted` | border-bottom 1px, border-muted, width 100% |
+| `vl` | border-left 2px, border-default, height 20px |
+| `mcon-480` `640` `768` `1080` `1280` `1440` | max-width container, centered |
+
+---
+
+## Layout
+
+| Class | Output |
+| --- | --- |
+| `flex` | display: flex |
+| `flex-fdr` `fdrr` `fdc` `fdcr` | flex-direction |
+| `flex-wrap` `flex-nowrap` | flex-wrap |
+| `flex-jcfs` `jcfe` `jcc` `jcsb` `jcsa` `jcse` | justify-content |
+| `flex-aifs` `aife` `aic` `aist` `aib` | align-items |
+| `flex-acfs` `acfe` `acc` `acst` `acsb` `acsa` | align-content |
+| `flex-assr` `asc` `ass` `ase` | align-self |
+| `grid-jist` `jie` `jic` `jistr` | justify-items |
+| `grid-aist` `aie` `aic` `aistr` | align-items (grid) |
+| `align-l` `align-c` `align-r` | text-align |
+| `float-l` `float-r` | float |
+| `float-c` | position: fixed; top: 50%; left: 50% |
+
+---
+
+## Typography
+
+| Class | Output |
+| --- | --- |
+| `b` `nb` `bx` | bold, normal, bolder |
+| `b-100` … `b-900` | font-weight 100 to 900 |
+| `light` `lighter` (`b-light` `b-lighter`) | font-weight 300, 100 |
+| `uppercase` `lowercase` `capitalize` `text-none` | text-transform |
+| `i` | font-style: italic |
+| `underline` | text-decoration: underline |
+| `ow` `ww` | overflow-wrap + hyphens |
+| `fs-1em` `fs-1d5em` `fs-d5em` | font-size; `d` is the decimal point |
+| `ls-0d1em` `ls-n0d05em` | letter-spacing; `n` is negative |
+
+In `fs-` and `ls-`, `d` is the decimal point (`p` still works there for older apps). In spacing, `p` means percent.
+
+---
+
+## Border style
+
+| Class | Output |
+| --- | --- |
+| `bds-solid` | border-style: solid |
+| `bds-dashed` | border-style: dashed |
+| `bds-dotted` | border-style: dotted |
+| `bds-double` | border-style: double |
+| `bds-none` | border-style: none |
+
+`bdw-*` already sets `border-style: solid`; use `bds-*` only to change it (`bdw-2 bds-dashed`).
+
+---
+
+## Cursor
+
+`cursor-pointer` · `cursor-grab` · `cursor-grabbing` · `cursor-not-allowed`
+`cursor-default` · `cursor-text` · `cursor-move` · `cursor-zoom-in`
+`cursor-zoom-out` · `cursor-crosshair` · `cursor-help` · `cursor-wait`
+`cursor-col-resize` · `cursor-row-resize` · `cursor-copy` · `cursor-none`
+
+Every standard CSS cursor value is available with the `cursor-` prefix.

package/templates/ts/saascfm-css/RULES.md

@@ -0,0 +1,129 @@
+# SaaSCFM Rules Reference
+
+How this folder works and how to extend it. For the class list, see `CHEATSHEET.md`.
+
+```
+saascfm-css/
+  primitives.ts            raw color scale, one source of truth
+  _component.tokens.ts     aggregator: exports TOKENS + PRIMITIVES (pass this to the plugin)
+  tokens/
+    surface.tokens.ts      text-*, bg-* roles
+    border.tokens.ts       border-* roles
+    status.tokens.ts       error / success / warning / info / hold
+    navigation.tokens.ts   nav-* and tabb-* (CSS vars only)
+  CHEATSHEET.md            every class and token
+  RULES.md                 this file
+```
+
+The folder belongs to your app. The plugin never imports it by path; you pass `_component.tokens` to the plugin as `colorsModule`:
+
+```ts
+import cssModule from '@umoa/saascfm-css'
+import * as colors from './src/saascfm-css/_component.tokens'
+
+plugins: [cssModule({ colorsModule: colors })]
+```
+
+---
+
+## Layer 1: Primitives
+
+`primitives.ts` is a flat map of name to color. Every entry generates three classes:
+
+```
+brand-500          color: #3B6FF0
+bg-brand-500       background-color: #3B6FF0
+border-brand-500   border-color: #3B6FF0
+```
+
+`rgba()` and `hsla()` values generate the color class only.
+
+Use primitives for feature-level work, one-off colors, and when the exact shade matters more than the role. Rename or add colors freely; any name works.
+
+---
+
+## Layer 2: Semantic tokens
+
+Tokens are named by role, not value. Each token points at a primitive:
+
+```ts
+export const SURFACE_TOKENS = {
+  'text-primary': P['neutral-900'],
+}
+```
+
+Each token becomes a CSS variable on `:root`. The first word of the name decides whether it also gets a class:
+
+| Name starts with | Class generated | Property |
+| --- | --- | --- |
+| `text-` | yes | color |
+| `bg-` | yes | background-color |
+| `border-` | yes | border-color |
+| anything else (`nav-`, `tabb-`, `shadow-`) | no, variable only | |
+
+```vue
+<p class="text-primary">Body copy</p>
+
+<style scoped>
+.card {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+</style>
+```
+
+A token value can be a primitive (`P['neutral-900']`), a primitive name as a string (`'neutral-900'`), or any CSS color or value (`'#fff'`, `'rgba(0,0,0,.4)'`, `'56px'`). A string that looks like a primitive name but doesn't exist prints a warning and is skipped.
+
+### When to use which
+
+| Situation | Use |
+| --- | --- |
+| System chrome (nav, headers) | Token via `var()` |
+| Status and feedback | Token class |
+| Cross-app rebrandable color | Token |
+| Feature screen, new component | Primitive class |
+| One-off color | Primitive class |
+
+---
+
+## Adding a token file
+
+1. Create `tokens/my-feature.tokens.ts`
+2. `import { PRIMITIVES as P } from '../primitives'`
+3. `export const MY_FEATURE_TOKENS = { 'bg-banner': P['brand-50'] }`
+4. Import it in `_component.tokens.ts` and spread it into `TOKENS`
+
+The plugin and `vite.config` never change.
+
+Keep `.tokens.` in token file names, and `primitives.` in the primitives file name. The plugin skips files with `.colors.`, `.tokens.` or `primitives.` in their path when it scans for classes. A color file named differently gets scanned, and every color in it generates a class.
+
+---
+
+## Specificity and `!important`
+
+Generated classes have normal specificity, so component CSS overrides them. Set `important: true` in the plugin options to make every class win, or add `!` to one class (`mt-12!`).
+
+Output order puts general classes before specific ones: `p` before `pt`, `mtb` before `mt`, `mrl` before `ml`. `bds-*` is always last.
+
+---
+
+## Migrating from a hand-written utility file
+
+1. **Cursor classes get a `cursor-` prefix.** Bare names like `pointer`, `grab`, `help` become `cursor-pointer`, `cursor-grab`, `cursor-help`. `auto`, `text`, `default` and `none` need a manual pass because they collide with other utilities.
+2. **`vh-N` becomes `h-Nvh`:**
+   ```bash
+   grep -rl 'vh-[0-9]' src/ | xargs sed -i -E 's/\bvh-([0-9]+)\b/h-\1vh/g'
+   ```
+3. **Lines:** replace `hl-1`, `hl-2`, `vl-1` with `hl`, `hl-muted`, `vl`.
+4. **Color class names:** map your old names onto your token names and replace them. Example:
+
+   | Old | New |
+   | --- | --- |
+   | `text-default` | `text-primary` |
+   | `text-muted` | `text-secondary` |
+   | `text-light` | `text-inverse` |
+   | `bg-default` | `bg-page` |
+   | `.error` | `text-status-error` |
+   | `.disabled` | `text-disabled` |
+
+5. **Verify:** run the greps again. Zero hits means the old rules can be dropped.

package/templates/ts/saascfm-css/_component.tokens.ts

@@ -0,0 +1,15 @@
+import { NAVIGATION_TOKENS } from './tokens/navigation.tokens'
+import { STATUS_TOKENS }     from './tokens/status.tokens'
+import { SURFACE_TOKENS }    from './tokens/surface.tokens'
+import { BORDER_TOKENS }     from './tokens/border.tokens'
+
+import { PRIMITIVES }        from './primitives'
+
+export const TOKENS = {
+  ...NAVIGATION_TOKENS,
+  ...STATUS_TOKENS,
+  ...SURFACE_TOKENS,
+  ...BORDER_TOKENS,
+}
+
+export { PRIMITIVES }

package/templates/{js/sectioned/primitives.colors.js → ts/saascfm-css/primitives.ts}

@@ -1,5 +1,5 @@
 export const PRIMITIVES = {
-  'brand-50':  '#EFF4FF',
+  'brand-50': '#EFF4FF',
   'brand-100': '#DBE6FE',
   'brand-200': '#BFD3FE',
   'brand-300': '#93B4FD',
@@ -10,7 +10,7 @@ export const PRIMITIVES = {
   'brand-800': '#1F3B8A',
   'brand-900': '#1B3170',
 
-  'neutral-50':  '#FAFAF9',
+  'neutral-50': '#FAFAF9',
   'neutral-100': '#F4F4F2',
   'neutral-200': '#E8E8E5',
   'neutral-300': '#D6D6D2',
@@ -22,11 +22,10 @@ export const PRIMITIVES = {
   'neutral-900': '#181816',
 
   'white': '#FFFFFF',
-  'black': '#000000',
 
-  'red-100': '#FDECEC',    'red-500': '#D64545',
+  'red-100': '#FDECEC',  'red-500': '#D64545',
   'green-100': '#E6F5EC',  'green-500': '#2F7A4C',
-  'yellow-100': '#FBF0DC', 'yellow-500': '#C9821B',
-  'blue-100': '#DCEAF7',   'blue-500': '#2F6FA8',
-  'purple-100': '#F3EEF8', 'purple-500': '#8A5FB0',
+  'yellow-100': '#FBF0DC',  'yellow-500': '#C9821B',
+  'blue-100': '#DCEAF7',  'blue-500': '#2F6FA8',
+  'purple-100': '#F3EEF8',  'purple-500': '#8A5FB0',
 }

package/templates/ts/saascfm-css/tokens/border.tokens.ts

@@ -0,0 +1,8 @@
+import { PRIMITIVES as P } from '../primitives'
+
+export const BORDER_TOKENS = {
+  'border-default': P['neutral-200'],
+  'border-muted':   P['neutral-100'],
+  'border-accent':  P['brand-200'],
+  'border-focus':   P['brand-400'],
+}

package/templates/ts/saascfm-css/tokens/navigation.tokens.ts

@@ -0,0 +1,32 @@
+import { PRIMITIVES as P } from '../primitives'
+
+export const NAVIGATION_TOKENS = {
+  'nav-bg':                      P['neutral-50'],
+  'nav-item-text':               P['neutral-600'],
+  'nav-item-active-bg':          P['brand-50'],
+  'nav-item-active-text':        P['brand-600'],
+  'nav-group-label':             P['neutral-500'],
+  'nav-parent-dot':              P['brand-500'],
+  'nav-children-border':         P['neutral-200'],
+  'nav-children-active-border':  P['brand-500'],
+
+  'tabb-num-text':               P['neutral-500'],
+  'tabb-num-bg':                 P['white'],
+  'tabb-num-border':             P['neutral-200'],
+
+  'tabb-num-next-text':          P['neutral-900'],
+  'tabb-num-next-bg':            P['white'],
+  'tabb-num-next-border':        P['neutral-400'],
+
+  'tabb-num-active-text':        P['white'],
+  'tabb-num-active-bg':          P['brand-500'],
+  'tabb-num-active-border':      P['brand-500'],
+
+  'tabb-check-completed-text':   P['brand-500'],
+  'tabb-check-completed-bg':     P['brand-50'],
+  'tabb-check-completed-border': P['brand-50'],
+
+  'tabb-check-active-text':      P['white'],
+  'tabb-check-active-bg':        P['brand-500'],
+  'tabb-check-active-border':    P['brand-500'],
+}

package/templates/ts/saascfm-css/tokens/status.tokens.ts

@@ -0,0 +1,28 @@
+import { PRIMITIVES as P } from '../primitives'
+
+export const STATUS_TOKENS = {
+  'text-status-error':        P['red-500'],
+  'bg-status-error':          P['red-500'],
+  'bg-status-error-subtle':   P['red-100'],
+  'border-status-error':      P['red-500'],
+
+  'text-status-success':      P['green-500'],
+  'bg-status-success':        P['green-500'],
+  'bg-status-success-subtle': P['green-100'],
+  'border-status-success':    P['green-500'],
+
+  'text-status-warning':      P['yellow-500'],
+  'bg-status-warning':        P['yellow-500'],
+  'bg-status-warning-subtle': P['yellow-100'],
+  'border-status-warning':    P['yellow-500'],
+
+  'text-status-info':         P['blue-500'],
+  'bg-status-info':           P['blue-500'],
+  'bg-status-info-subtle':    P['blue-100'],
+  'border-status-info':       P['blue-500'],
+
+  'text-status-hold':         P['purple-500'],
+  'bg-status-hold':           P['purple-500'],
+  'bg-status-hold-subtle':    P['purple-100'],
+  'border-status-hold':       P['purple-500'],
+}

package/templates/ts/saascfm-css/tokens/surface.tokens.ts

@@ -0,0 +1,20 @@
+import { PRIMITIVES as P } from '../primitives'
+
+export const SURFACE_TOKENS = {
+  'text-primary':    P['neutral-900'],
+  'text-secondary':  P['neutral-600'],
+  'text-disabled':   P['neutral-400'],
+  'text-faint':      P['neutral-500'],
+  'text-inverse':    P['white'],
+  'text-brand':      P['brand-500'],
+  'text-link':       P['brand-600'],
+
+  'bg-page':         P['neutral-50'],
+  'bg-surface':      P['white'],
+  'bg-subtle':       P['neutral-100'],
+  'bg-overlay':      P['neutral-900'],
+  'bg-header':       P['white'],
+  'bg-crumb':        P['neutral-100'],
+  'bg-brand':        P['brand-500'],
+  'bg-brand-subtle': P['brand-50'],
+}

package/templates/js/sectioned/app.colors.js

@@ -1,14 +0,0 @@
-import { PRIMITIVES } from './primitives.colors'
-import { SURFACE_TOKENS } from './surface.colors'
-import { BORDER_TOKENS } from './border.colors'
-import { STATUS_TOKENS } from './status.colors'
-import { NAVIGATION_TOKENS } from './navigation.colors'
-
-export { PRIMITIVES }
-
-export const TOKENS = {
-  ...SURFACE_TOKENS,
-  ...BORDER_TOKENS,
-  ...STATUS_TOKENS,
-  ...NAVIGATION_TOKENS,
-}

package/templates/js/sectioned/border.colors.js

@@ -1,7 +0,0 @@
-export const BORDER_TOKENS = {
-  'border-default': 'neutral-200',
-  'border-muted':   'neutral-100',
-  'border-strong':  'neutral-300',
-  'border-brand':   'brand-500',
-  'border-focus':   'brand-400',
-}

package/templates/js/sectioned/navigation.colors.js

@@ -1,9 +0,0 @@
-export const NAVIGATION_TOKENS = {
-  'nav-bg':                     'neutral-50',
-  'nav-item-text':              'neutral-600',
-  'nav-item-active-bg':         'brand-50',
-  'nav-item-active-text':       'brand-600',
-  'nav-group-label':            'neutral-500',
-  'nav-children-border':        'neutral-200',
-  'nav-children-active-border': 'brand-500',
-}

package/templates/js/sectioned/status.colors.js

@@ -1,21 +0,0 @@
-export const STATUS_TOKENS = {
-  'text-status-error':        'red-500',
-  'bg-status-error':          'red-500',
-  'bg-status-error-subtle':   'red-100',
-  'border-status-error':      'red-500',
-
-  'text-status-success':      'green-500',
-  'bg-status-success':        'green-500',
-  'bg-status-success-subtle': 'green-100',
-  'border-status-success':    'green-500',
-
-  'text-status-warning':      'yellow-500',
-  'bg-status-warning':        'yellow-500',
-  'bg-status-warning-subtle': 'yellow-100',
-  'border-status-warning':    'yellow-500',
-
-  'text-status-info':         'blue-500',
-  'bg-status-info':           'blue-500',
-  'bg-status-info-subtle':    'blue-100',
-  'border-status-info':       'blue-500',
-}

package/templates/js/sectioned/surface.colors.js

@@ -1,17 +0,0 @@
-export const SURFACE_TOKENS = {
-  'text-primary':   'neutral-900',
-  'text-secondary': 'neutral-600',
-  'text-muted':     'neutral-500',
-  'text-disabled':  'neutral-400',
-  'text-inverse':   'white',
-  'text-brand':     'brand-500',
-  'text-link':      'brand-600',
-
-  'bg-page':          'neutral-50',
-  'bg-surface':       'white',
-  'bg-subtle':        'neutral-100',
-  'bg-header':        'white',
-  'bg-overlay':       'neutral-900',
-  'bg-brand':         'brand-500',
-  'bg-brand-subtle':  'brand-50',
-}

package/templates/js/single/app.colors.js

@@ -1,89 +0,0 @@
-export const PRIMITIVES = {
-  'brand-50':  '#EFF4FF',
-  'brand-100': '#DBE6FE',
-  'brand-200': '#BFD3FE',
-  'brand-300': '#93B4FD',
-  'brand-400': '#6090FA',
-  'brand-500': '#3B6FF0',
-  'brand-600': '#2A55D6',
-  'brand-700': '#2344AD',
-  'brand-800': '#1F3B8A',
-  'brand-900': '#1B3170',
-
-  'neutral-50':  '#FAFAF9',
-  'neutral-100': '#F4F4F2',
-  'neutral-200': '#E8E8E5',
-  'neutral-300': '#D6D6D2',
-  'neutral-400': '#A8A8A2',
-  'neutral-500': '#7C7C76',
-  'neutral-600': '#5C5C57',
-  'neutral-700': '#44443F',
-  'neutral-800': '#2C2C29',
-  'neutral-900': '#181816',
-
-  'white': '#FFFFFF',
-  'black': '#000000',
-
-  'red-100': '#FDECEC',    'red-500': '#D64545',
-  'green-100': '#E6F5EC',  'green-500': '#2F7A4C',
-  'yellow-100': '#FBF0DC', 'yellow-500': '#C9821B',
-  'blue-100': '#DCEAF7',   'blue-500': '#2F6FA8',
-  'purple-100': '#F3EEF8', 'purple-500': '#8A5FB0',
-}
-
-export const TOKENS = {
-  // Text
-  'text-primary':   'neutral-900',
-  'text-secondary': 'neutral-600',
-  'text-muted':     'neutral-500',
-  'text-disabled':  'neutral-400',
-  'text-inverse':   'white',
-  'text-brand':     'brand-500',
-  'text-link':      'brand-600',
-
-  // Background
-  'bg-page':          'neutral-50',
-  'bg-surface':       'white',
-  'bg-subtle':        'neutral-100',
-  'bg-header':        'white',
-  'bg-overlay':       'neutral-900',
-  'bg-brand':         'brand-500',
-  'bg-brand-subtle':  'brand-50',
-
-  // Border
-  'border-default': 'neutral-200',
-  'border-muted':   'neutral-100',
-  'border-strong':  'neutral-300',
-  'border-brand':   'brand-500',
-  'border-focus':   'brand-400',
-
-  // Status
-  'text-status-error':        'red-500',
-  'bg-status-error':          'red-500',
-  'bg-status-error-subtle':   'red-100',
-  'border-status-error':      'red-500',
-
-  'text-status-success':      'green-500',
-  'bg-status-success':        'green-500',
-  'bg-status-success-subtle': 'green-100',
-  'border-status-success':    'green-500',
-
-  'text-status-warning':      'yellow-500',
-  'bg-status-warning':        'yellow-500',
-  'bg-status-warning-subtle': 'yellow-100',
-  'border-status-warning':    'yellow-500',
-
-  'text-status-info':         'blue-500',
-  'bg-status-info':           'blue-500',
-  'bg-status-info-subtle':    'blue-100',
-  'border-status-info':       'blue-500',
-
-  // Navigation (CSS vars only)
-  'nav-bg':                     'neutral-50',
-  'nav-item-text':              'neutral-600',
-  'nav-item-active-bg':         'brand-50',
-  'nav-item-active-text':       'brand-600',
-  'nav-group-label':            'neutral-500',
-  'nav-children-border':        'neutral-200',
-  'nav-children-active-border': 'brand-500',
-}