@toybreaker/fiko 0.3.2 → 0.4.0

package/README.md

@@ -52,18 +52,18 @@ Then import your brand tokens **after** the framework, inside the same layers:
 @import "@toybreaker/fiko";
 
 /* brand palette — loads in the tokens layer */
-@import url(./branding/1client_vars.css) layer(tokens);
+@import url(./branding/palette.css) layer(tokens);
 
 /* semantic aliases (surface, text, cta) — loads in the theme layer */
-@import url(./branding/2client_datatheme.css) layer(theme);
+@import url(./branding/roles.css) layer(theme);
 
 /* element defaults, heading scale — loads in the theme layer */
-@import url(./branding/3client_theme.css) layer(theme);
+@import url(./branding/overrides.css) layer(theme);
 ```
 
 ### 3. Customize your brand
 
-Edit `branding/1client_vars.css` — change the hue angle for your brand color:
+Edit `branding/palette.css` — change the hue angle for your brand color:
 
 ```css
 --brand: oklch(0.55 0.19 28);   /* orange — change the hue (0–360) */
@@ -85,9 +85,9 @@ fiko/
 │   └── utils/          ← atomic utility classes
 │
 └── branding/     ← YOUR BRAND — per-client, fully owned, never extracted
-    ├── 1client_vars.css      ← raw palette (OKLCH colors)
-    ├── 2client_datatheme.css ← semantic aliases (surface, text, cta…)
-    └── 3client_theme.css     ← element defaults, heading scale, brand specifics
+    ├── palette.css   ← raw brand colors (OKLCH tokens)
+    ├── roles.css     ← semantic aliases (surface, text, cta…)
+    └── overrides.css ← element defaults, heading scale, brand specifics
 ```
 
 **The rule:** if it could work on any website → `omg/`. If it's specific to one brand → `branding/`.
@@ -138,7 +138,8 @@ All color tokens use OKLCH:
 | `.pad_block_sm` | block padding small |
 | `.h1` – `.h6` | heading scale classes |
 | `.dim` | secondary text color + smaller size |
-| `.typewriter` | `max-width: 66ch; margin-inline: auto` |
+| `.typewriter` | `font-family: var(--font_serif)` — "Courier New", Courier, monospace |
+| `.prose` | `max-width: 66ch; margin-inline: auto` |
 | `.aspect_square` | `aspect-ratio: 1` |
 | `.aspect_video` | `aspect-ratio: 16/9` |
 

package/index.css

@@ -16,11 +16,11 @@
  *
  *   your-project/404.css
  *   ├── @import "@junglesta/404css";          ← this file (tokens + layout + components + utils)
- *   ├── @import "./000/1client_vars.css"  layer(tokens);
- *   ├── @import "./000/2client_datatheme.css" layer(theme);
- *   └── @import "./000/3client_theme.css"     layer(theme);
+ *   ├── @import "./000/palette.css"   layer(tokens);
+ *   ├── @import "./000/roles.css"     layer(theme);
+ *   └── @import "./000/overrides.css" layer(theme);
  *
- * Starter 000/ templates are in node_modules/@junglesta/404css/template/000/
+ * Starter templates are in node_modules/fiko/template/branding/
  * ─────────────────────────────────────────────
  */
 

package/omg/1vars.css

@@ -1,6 +1,6 @@
 /*! 🐉 404.css | MIT License */
 /* 1vars.css — layout, spacing, typography tokens   */
-/* Brand palette overrides live in branding/1client_vars.css */
+/* Brand palette overrides live in branding/palette.css */
 
 :root {
   /* ── COLOR NEUTRALS ──────────────────────────── */

package/omg/5components.css

@@ -126,11 +126,15 @@ svg:not(:root) {
   text-underline-offset: 3px;
 }
 
-.typewriter {
+.prose {
   max-width: 66ch;
   margin-inline: auto;
 }
 
+.typewriter {
+  font-family: var(--font_serif);
+}
+
 .cat { text-transform: capitalize; }
 
 /* ── LAYOUT UTILITIES ───────────────────────────── */

package/omg/utils/gradients.css

@@ -1,5 +1,7 @@
 /*! 🐉 404.css | MIT License */
 /* utils/gradients.css — gradient utility classes */
 
-.gradient_brand { background: var(--gradient_brand); }
-.gradient_warm  { background: var(--gradient_warm);  }
+.gradient_o { background: var(--gradient_o); }
+.gradient_h { background: var(--gradient_h); }
+.gradient_v { background: var(--gradient_v); }
+.gradient_warm        { background: var(--gradient_warm);        }

package/omg/utils/text.css

@@ -25,3 +25,7 @@
 .pretty {
   text-wrap: pretty;
 }
+
+.mono {
+  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toybreaker/fiko",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "LOOK GOOD OR DIE! — cascade layers, OKLCH colors, design tokens. Zero specificity wars. Smiling DX.",
   "license": "MIT",
   "author": "Toybreaker <hello@junglestar.co>",
@@ -21,6 +21,9 @@
     "utility-css",
     "modern-css"
   ],
+  "scripts": {
+    "build": "node scripts/build-demo.mjs"
+  },
   "main": "index.css",
   "style": "index.css",
   "exports": {