@toybreaker/fiko 0.4.0 → 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)
 
@@ -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
@@ -154,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

@@ -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/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

@@ -144,7 +144,7 @@ svg:not(:root) {
   margin-right: var(--maximise);
 }
 
-.clipped-circle {
+.clipped_circle {
   clip-path: circle(50px at center);
 }
 
@@ -206,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toybreaker/fiko",
-  "version": "0.4.0",
+  "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>",
@@ -22,7 +22,9 @@
     "modern-css"
   ],
   "scripts": {
-    "build": "node scripts/build-demo.mjs"
+    "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",
@@ -35,5 +37,8 @@
     "index.css",
     "omg/",
     "template/"
-  ]
+  ],
+  "devDependencies": {
+    "serve": "^14.2.6"
+  }
 }

package/template/branding/overrides.css

@@ -1,8 +1,11 @@
-/*! 🐉 404.css | MIT License */
-/* branding/3client_theme.css — brand-specific overrides
+/*! fiko | MIT License */
+/* branding/overrides.css — brand-specific overrides
  *
- * .h1–.h6, .dim, .underline, .typewriter, .dots, .maximise,
- * .clipped-circle, .cat, .bento, [lang] switching are in fiko core.
+ * 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.
  */
 

package/template/branding/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/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.
  */