@toybreaker/fiko 0.3.2 → 0.5.0

package/README.md

@@ -21,8 +21,6 @@ fiko takes a third path: a minimal, layered foundation you override by design, n
 ## Install
 
 ```bash
-npm install @toybreaker/fiko
-# or
 pnpm add @toybreaker/fiko
 ```
 
@@ -37,7 +35,7 @@ pnpm add @toybreaker/fiko
 @import "@toybreaker/fiko";
 ```
 
-This imports `omg/` — the brand-agnostic framework. It declares six cascade layers and imports all `omg/` sheets in the correct order.
+This imports `omg/` — the brand-agnostic framework. It declares seven cascade layers and imports all `omg/` sheets in the correct order.
 
 ### 2. Add your brand (copy the template)
 
@@ -52,18 +50,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 +83,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/`.
@@ -97,20 +95,23 @@ fiko/
 ## Cascade Layers
 
 ```css
-@layer reset, tokens, theme, layout, components, utilities;
+@layer reset, tokens, base, theme, layout, components, utilities;
 ```
 
-| Layer | Purpose |
-|---|---|
-| `reset` | Margin/padding zero, box-sizing, smooth scroll |
-| `tokens` | CSS custom properties: spacing, type, color |
-| `theme` | Semantic aliases + element defaults |
-| `layout` | Body, container, grid, nav |
-| `components` | Buttons, inputs, links |
-| `utilities` | Atomic helpers: `.hide`, `.flex`, `.center`, etc. |
+| Layer | Purpose | Your files |
+|---|---|---|
+| `reset` | Margin/padding zero, box-sizing, smooth scroll | — |
+| `tokens` | CSS custom properties: spacing, type, color | `branding/palette.css` |
+| `base` | Element defaults (h1–h6, p, blockquote) | — |
+| `theme` | Semantic aliases + brand overrides | `branding/roles.css`, `branding/overrides.css` |
+| `layout` | Body, container, grid, nav | — |
+| `components` | Buttons, inputs, links | — |
+| `utilities` | Atomic helpers: `.hide`, `.flex`, `.center`, etc. | — |
 
 `@layer` makes specificity predictable. A utility class in `utilities` always beats a component in `components` — no `!important` wars.
 
+**Why `theme` after `base`?** `base` sets sensible element defaults (e.g. `h1` size). Your `overrides.css` in `theme` always wins over them — no high-specificity selectors needed.
+
 ---
 
 ## OKLCH Colors
@@ -138,7 +139,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` |
 
@@ -153,6 +155,23 @@ All color tokens use OKLCH:
 
 ---
 
+## Local Development
+
+```bash
+# dev server — opens http://localhost:3000/demo/ automatically
+pnpm dev
+
+# build demo into dist/
+pnpm build
+
+# build + deploy to Netlify
+pnpm deploy
+```
+
+`pnpm dev` serves the repo root (so `demo/index.html` can load `../index.css`) and opens the browser automatically. Edit any file in `omg/` or `demo/` and reload — no build step needed during development.
+
+---
+
 ## Pairing with Astro
 
 fiko was designed to pair with Astro scoped styles:

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/
  * ─────────────────────────────────────────────
  */
 
@@ -50,3 +50,5 @@
 @import url(omg/utils/aspect.css) layer(utilities);
 @import url(omg/utils/gradients.css) layer(utilities);
 @import url(omg/utils/misc.css) layer(utilities);
+
+@import url(omg/utils/fiko.css) layer(utilities);

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/4layout.css

@@ -76,29 +76,51 @@ nav li {
 }
 
 /* ── BENTO BOX ──────────────────────────────────── */
-/* Mosaic product grid. Wrap cards in <div class="bento"> */
+/* Mosaic product grid. Wrap cards in <div class="bento">
+ *
+ * Token-driven: adjust --bento_cols / --bento_rows at any level.
+ * aspect-ratio keeps cells proportional automatically.
+ * grid-auto-flow: dense fills gaps — add items in any order.
+ *
+ * Quick override examples:
+ *   style="--bento_cols:4; --bento_rows:2"   → 4×2 landscape
+ *   style="--bento_cols:2; --bento_rows:4"   → 2×4 portrait
+ *
+ * Span modifiers on children:
+ *   .bento_col_2 / .bento_col_3   → span N columns
+ *   .bento_row_2 / .bento_row_3   → span N rows
+ *   .bento_full                    → full width
+ */
 
 .bento {
+  --bento_cols: 3;
+  --bento_rows: 3;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(var(--bento_cols), 1fr);
+  grid-template-rows: repeat(var(--bento_rows), 1fr);
+  grid-auto-flow: dense;
   gap: calc(var(--spaceV) * 0.5) calc(var(--spaceH) * 0.5);
   width: 100%;
+  aspect-ratio: var(--bento_cols) / var(--bento_rows);
 }
 
-.bento > :first-child { grid-column: 1 / -1; }
+/* Featured first child: 2×2 */
+.bento > :first-child { grid-column: span 2; grid-row: span 2; }
 
-.bento > :nth-child(7n + 1):not(:first-child) { grid-column: 1 / -1; }
+/* ── Span modifiers ─────────────────────────────── */
+.bento > .bento_col_2  { grid-column: span 2; }
+.bento > .bento_col_3  { grid-column: span 3; }
+.bento > .bento_full   { grid-column: 1 / -1; }
+.bento > .bento_row_2  { grid-row: span 2; }
+.bento > .bento_row_3  { grid-row: span 3; }
 
-@container main-container (min-width: 480px) {
-  .bento { grid-template-columns: 1fr 1fr; }
+/* ── Responsive defaults ────────────────────────── */
+@container main-container (max-width: 479px) {
+  .bento { --bento_cols: 1; --bento_rows: 6; }
+  .bento > :first-child { grid-column: span 1; grid-row: span 1; }
 }
 
-@container main-container (min-width: 640px) {
-  .bento { grid-template-columns: 1fr 1fr 1fr; }
-  .bento > :first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
-}
-
-@container main-container (min-width: 960px) {
-  .bento { grid-template-columns: repeat(4, 1fr); }
-  .bento > :first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
+@container main-container (min-width: 480px) and (max-width: 639px) {
+  .bento { --bento_cols: 2; --bento_rows: 4; }
+  .bento > :first-child { grid-column: span 2; grid-row: span 2; }
 }

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 ───────────────────────────── */
@@ -140,7 +144,7 @@ svg:not(:root) {
   margin-right: var(--maximise);
 }
 
-.clipped-circle {
+.clipped_circle {
   clip-path: circle(50px at center);
 }
 
@@ -202,6 +206,40 @@ details.accordion > :not(summary) {
   padding: var(--spaceV) var(--spaceH);
 }
 
+/* ── ACCORDION CHEVRON — SVG arrow marker ────────── */
+/* Modifier: <details class="accordion accordion_chevron">
+ * Replaces +/× text with an animated SVG chevron via mask-image.
+ * Closed: → pointing right. Open: rotated 90° pointing down.
+ * Composable: stack with other modifiers for full editorial style.
+ * Color inherits --cta; override with: style="--cta: var(--brand)"
+ */
+
+details.accordion.accordion_chevron > summary::after,
+details.accordion.accordion_chevron[open] > summary::after {
+  content: '';
+  display: block;
+  width: 1.25em;
+  height: 1.25em;
+  flex-shrink: 0;
+  background-color: var(--cta);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  transform: rotate(0deg);
+  transition: transform 200ms ease, background-color var(--transition);
+  line-height: 1;
+  font-size: 1em;
+}
+
+details.accordion.accordion_chevron[open] > summary::after {
+  transform: rotate(90deg);
+}
+
 /* ── DOT LEADER ─────────────────────────────────── */
 /* Usage: <span class="dots"> between label and value in menus/TOC */
 

package/omg/utils/fiko.css

@@ -0,0 +1,66 @@
+/*! fiko | MIT License */
+/* utils/fiko.css — .fiko signature class
+ *
+ * Adds the warm animated orb glow to any element.
+ * Usage: <section class="fiko"> … </section>
+ *
+ * Requirements: the element needs dimensions (height/min-height).
+ * Pseudo-elements carry the orbs; direct children stay above via z-index.
+ * Override orb colors with --fiko_orb_a / --fiko_orb_b.
+ */
+
+.fiko {
+  --fiko_orb_a: oklch(0.65 0.22 40);   /* warm orange */
+  --fiko_orb_b: oklch(0.72 0.20 65);   /* amber */
+  position: relative;
+  overflow: hidden;
+  background: var(--dark, oklch(0.12 0.01 265));
+}
+
+.fiko::before,
+.fiko::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* primary orb — top-right */
+.fiko::before {
+  width: 60%;
+  aspect-ratio: 1;
+  background: var(--fiko_orb_a);
+  filter: blur(80px);
+  opacity: 0.22;
+  top: -20%;
+  right: -10%;
+  animation: fiko_orb_drift 9s ease-in-out infinite;
+}
+
+/* secondary orb — bottom-right */
+.fiko::after {
+  width: 40%;
+  aspect-ratio: 1;
+  background: var(--fiko_orb_b);
+  filter: blur(60px);
+  opacity: 0.15;
+  bottom: -10%;
+  right: 25%;
+  animation: fiko_orb_drift 13s ease-in-out infinite reverse;
+}
+
+/* keep children above orbs */
+.fiko > * { position: relative; z-index: 1; }
+
+@keyframes fiko_orb_drift {
+  0%   { transform: translate(0, 0) scale(1); }
+  33%  { transform: translate(30px, -20px) scale(1.05); }
+  66%  { transform: translate(-20px, 15px) scale(0.96); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fiko::before,
+  .fiko::after { animation: none; }
+}

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.5.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,11 @@
     "utility-css",
     "modern-css"
   ],
+  "scripts": {
+    "dev": "serve . & sleep 1 && open http://localhost:3000/demo/",
+    "build": "node scripts/build-demo.mjs",
+    "deploy": "node scripts/build-demo.mjs && netlify deploy --prod --dir=dist"
+  },
   "main": "index.css",
   "style": "index.css",
   "exports": {
@@ -32,5 +37,8 @@
     "index.css",
     "omg/",
     "template/"
-  ]
+  ],
+  "devDependencies": {
+    "serve": "^14.2.6"
+  }
 }

package/template/branding/overrides.css

@@ -0,0 +1,15 @@
+/*! fiko | MIT License */
+/* branding/overrides.css — brand-specific overrides
+ *
+ * Injected into the `theme` layer:
+ *   @import url(./branding/overrides.css) layer(theme);
+ *
+ * .h1–.h6, .dim, .underline, .typewriter, .prose, .dots, .maximise,
+ * .cat, .bento, .accordion, [lang] switching are in fiko core (omg/).
+ * Add brand/client-specific rules here only.
+ */
+
+/* ── EXAMPLE OVERRIDES ──────────────────────────── */
+
+/* .typewriter { font-family: var(--font_serif); } */
+/* blockquote.typewriter { border-left-style: dotted; } */

package/template/branding/{1client_vars.css → palette.css}

@@ -1,10 +1,13 @@
-/*! 🐉 404.css | MIT License */
-/* branding/1client_vars.css — brand palette tokens
+/*! fiko | MIT License */
+/* branding/palette.css — raw brand color tokens
  *
- * Neutrals (--dark, --light and alpha variants) are defined in
- * omg/1vars.css — override here only if your brand uses a tinted surface.
+ * Injected into the `tokens` layer:
+ *   @import url(./branding/palette.css) layer(tokens);
  *
- * Add brand-specific tokens: --brand, --nobori, --surface_*, gradients, etc.
+ * Neutrals (--dark, --light and alpha variants) are defined in omg/1vars.css.
+ * Override here only if your brand uses a tinted surface.
+ *
+ * Add brand-specific tokens: --brand, --surface_*, gradients, etc.
  */
 
 :root {

package/template/branding/{2client_datatheme.css → roles.css}

@@ -1,8 +1,11 @@
-/*! 🐉 404.css | MIT License */
-/* 000/2client_datatheme.css — semantic theme aliases
+/*! fiko | MIT License */
+/* branding/roles.css — semantic theme aliases
+ *
+ * Maps raw palette tokens (from palette.css) to semantic roles.
+ *
+ * Injected into the `theme` layer:
+ *   @import url(./branding/roles.css) layer(theme);
  *
- * Maps raw palette tokens (from 1client_vars.css) to semantic roles.
- * This file loads in the `theme` layer.
  * Permanent light mode — dark mode intentionally excluded.
  */
 

package/template/branding/3client_theme.css

@@ -1,12 +0,0 @@
-/*! 🐉 404.css | MIT License */
-/* branding/3client_theme.css — brand-specific overrides
- *
- * .h1–.h6, .dim, .underline, .typewriter, .dots, .maximise,
- * .clipped-circle, .cat, .bento, [lang] switching are in fiko core.
- * Add brand/client-specific rules here only.
- */
-
-/* ── EXAMPLE OVERRIDES ──────────────────────────── */
-
-/* .typewriter { font-family: var(--font_serif); } */
-/* blockquote.typewriter { border-left-style: dotted; } */