@toybreaker/fiko 0.1.0 → 0.3.2

package/README.md

@@ -1,4 +1,4 @@
-# 404.css
+# fiko
 
 **A minimal, layered CSS foundation you override by design, not by accident.**
 
@@ -14,7 +14,7 @@ Modern CSS frameworks fall into two traps:
 1. **Too much opinion** — ship components that look like every other site, forcing you to fight the framework to express your brand.
 2. **Too much complexity** — utility-only systems (Tailwind, etc.) put all design decisions in HTML, making templates hard to read and refactor.
 
-404.css takes a third path: a minimal, layered foundation you override by design, not by accident.
+fiko takes a third path: a minimal, layered foundation you override by design, not by accident.
 
 ---
 
@@ -43,7 +43,7 @@ This imports `omg/` — the brand-agnostic framework. It declares six cascade la
 
 ```bash
 # copy the starter brand files into your project
-cp node_modules/@toybreaker/fiko/template/000/ src/assets/404/000/ -r
+cp node_modules/@toybreaker/fiko/template/branding/ src/assets/fiko/branding/ -r
 ```
 
 Then import your brand tokens **after** the framework, inside the same layers:
@@ -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(./000/1client_vars.css) layer(tokens);
+@import url(./branding/1client_vars.css) layer(tokens);
 
 /* semantic aliases (surface, text, cta) — loads in the theme layer */
-@import url(./000/2client_datatheme.css) layer(theme);
+@import url(./branding/2client_datatheme.css) layer(theme);
 
 /* element defaults, heading scale — loads in the theme layer */
-@import url(./000/3client_theme.css) layer(theme);
+@import url(./branding/3client_theme.css) layer(theme);
 ```
 
 ### 3. Customize your brand
 
-Edit `000/1client_vars.css` — change the hue angle for your brand color:
+Edit `branding/1client_vars.css` — change the hue angle for your brand color:
 
 ```css
 --brand: oklch(0.55 0.19 28);   /* orange — change the hue (0–360) */
@@ -71,10 +71,10 @@ Edit `000/1client_vars.css` — change the hue angle for your brand color:
 
 ---
 
-## Architecture: `omg/` vs `000/`
+## Architecture: `omg/` vs `branding/`
 
 ```
-404/
+fiko/
 ├── omg/          ← THE FRAMEWORK — brand-agnostic, versioned, never touch
 │   ├── 0reset.css
 │   ├── 1vars.css       ← layout, spacing, typography tokens
@@ -84,13 +84,13 @@ Edit `000/1client_vars.css` — change the hue angle for your brand color:
 │   ├── 6states.css     ← data-state helpers
 │   └── utils/          ← atomic utility classes
 │
-└── 000/          ← YOUR BRAND — per-client, fully owned, never extracted
+└── 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
 ```
 
-**The rule:** if it could work on any website → `omg/`. If it's specific to one brand → `000/`.
+**The rule:** if it could work on any website → `omg/`. If it's specific to one brand → `branding/`.
 
 ---
 
@@ -144,7 +144,7 @@ All color tokens use OKLCH:
 
 ---
 
-## What 404.css Intentionally Does NOT Do
+## What fiko Intentionally Does NOT Do
 
 - **No dark mode** — permanent light mode
 - **No JavaScript** — pure CSS
@@ -155,9 +155,9 @@ All color tokens use OKLCH:
 
 ## Pairing with Astro
 
-404.css was designed to pair with Astro scoped styles:
+fiko was designed to pair with Astro scoped styles:
 
-- 404.css owns the global layer stack (reset → utilities)
+- fiko owns the global layer stack (reset → utilities)
 - Astro components own their own layout via `<style>` blocks
 - Zero specificity conflicts
 

package/index.css

@@ -2,7 +2,7 @@
  * 🐉 404.css v0.1.0-alpha.1
  * https://github.com/junglesta/404css
  *
- * Copyright (c) 2024–2025 Toybreaker
+ * Copyright (c) 2024–2026 Toybreaker
  * Released under the MIT License
  *
  * An unknown modern CSS framework.
@@ -25,7 +25,7 @@
  */
 
 /* CASCADING ORDER — declared first so all @imports know their place */
-@layer reset, tokens, theme, layout, components, utilities;
+@layer reset, tokens, base, theme, layout, components, utilities;
 
 /* RESET */
 @import url(omg/0reset.css) layer(reset);
@@ -33,8 +33,9 @@
 /* TOKENS — framework spacing, typography, motion */
 @import url(omg/1vars.css) layer(tokens);
 
-/* LAYOUT — element defaults, grid, container, states */
-@import url(omg/3base.css)   layer(layout);
+/* BASE — element defaults (h1-h6, p, ol/ul, blockquote, hr, body structure)
+ * Sits below client theme so brand overrides in 3client_theme.css always win */
+@import url(omg/3base.css) layer(base);
 @import url(omg/4layout.css) layer(layout);
 @import url(omg/6states.css) layer(layout);
 
@@ -42,10 +43,10 @@
 @import url(omg/5components.css) layer(components);
 
 /* UTILITIES — highest priority, no !important needed */
-@import url(omg/utils/text.css)       layer(utilities);
+@import url(omg/utils/text.css) layer(utilities);
 @import url(omg/utils/visibility.css) layer(utilities);
-@import url(omg/utils/layout.css)     layer(utilities);
-@import url(omg/utils/spacing.css)    layer(utilities);
-@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/layout.css) layer(utilities);
+@import url(omg/utils/spacing.css) layer(utilities);
+@import url(omg/utils/aspect.css) layer(utilities);
+@import url(omg/utils/gradients.css) layer(utilities);
+@import url(omg/utils/misc.css) layer(utilities);

package/omg/1vars.css

@@ -1,8 +1,17 @@
 /*! 🐉 404.css | MIT License */
-/* 1vars.css — layout, spacing, typography tokens */
-/* Color tokens live in 000/1client_vars.css        */
+/* 1vars.css — layout, spacing, typography tokens   */
+/* Brand palette overrides live in branding/1client_vars.css */
 
 :root {
+  /* ── COLOR NEUTRALS ──────────────────────────── */
+  --dark:    oklch(0.20 0 0);
+  --darkT25: color-mix(in oklch, var(--dark),  transparent 75%);
+  --darkT50: color-mix(in oklch, var(--dark),  transparent 50%);
+
+  --light:    oklch(0.97 0 0);
+  --lightT25: color-mix(in oklch, var(--light), transparent 75%);
+  --lightT50: color-mix(in oklch, var(--light), transparent 50%);
+
   /* ── MOTION ─────────────────────────────────── */
   --transition: 200ms ease-out;
   --ease_out:   cubic-bezier(0.22, 1, 0.36, 1);

package/omg/3base.css

@@ -27,3 +27,77 @@ video {
   height: 100%;
   object-fit: cover;
 }
+
+/* ── BODY STRUCTURE ─────────────────────────────── */
+
+body {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-weight: var(--weight_light);
+}
+
+body > header,
+body > main,
+body > footer {
+  width: 100%;
+  margin-inline: auto;
+  line-height: var(--line_height);
+}
+
+/* ── TYPOGRAPHY ELEMENTS ────────────────────────── */
+
+strong { font-weight: var(--weight_bold); }
+
+p {
+  padding-block: var(--spaceV);
+  line-height: 1.5;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  user-select: none;
+  line-height: 1.5;
+  font-family: var(--font_family);
+  font-weight: var(--weight_light);
+}
+
+/* ── HR ─────────────────────────────────────────── */
+
+hr {
+  border: 0 none;
+  border-top: 0.5px solid currentColor;
+  opacity: 0.5;
+}
+
+/* ── BLOCKQUOTE ─────────────────────────────────── */
+
+blockquote {
+  display: block;
+  margin: calc(var(--spaceV) * 8) calc(var(--spaceH) * 4);
+  padding: var(--spaceV) calc(var(--spaceH) * 4);
+  border-left: 4px solid currentColor;
+  line-height: 1.2;
+  font-size: 120%;
+  font-style: italic;
+}
+
+cite {
+  display: block;
+  padding-top: var(--spaceV);
+  font-size: 66%;
+  text-transform: capitalize;
+}
+
+/* ── LISTS ──────────────────────────────────────── */
+
+ol, ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* ── LANGUAGE SWITCHING ─────────────────────────── */
+
+[lang="en"] { .lang_it, .lang_id { display: none; } }
+[lang="it"] { .lang_en, .lang_id { display: none; } }
+[lang="id"] { .lang_it, .lang_en { display: none; } }

package/omg/4layout.css

@@ -74,3 +74,31 @@ nav li {
     width: 100%;
   }
 }
+
+/* ── BENTO BOX ──────────────────────────────────── */
+/* Mosaic product grid. Wrap cards in <div class="bento"> */
+
+.bento {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: calc(var(--spaceV) * 0.5) calc(var(--spaceH) * 0.5);
+  width: 100%;
+}
+
+.bento > :first-child { grid-column: 1 / -1; }
+
+.bento > :nth-child(7n + 1):not(:first-child) { grid-column: 1 / -1; }
+
+@container main-container (min-width: 480px) {
+  .bento { grid-template-columns: 1fr 1fr; }
+}
+
+@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; }
+}

package/omg/5components.css

@@ -99,3 +99,118 @@ svg:not(:root) {
   top: 0;
   z-index: 20;
 }
+
+/* ── HEADING SCALE ──────────────────────────────── */
+
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  user-select: none !important;
+  line-height: 1.2 !important;
+  font-family: var(--font_family) !important;
+}
+.h1 { font-size: calc(var(--font_size) * 2.5)  !important; font-weight: var(--weight_light) !important; }
+.h2 { font-size: calc(var(--font_size) * 2.0)  !important; font-weight: var(--weight_light) !important; }
+.h3 { font-size: calc(var(--font_size) * 1.75) !important; font-weight: var(--weight_thin)  !important; }
+.h4 { font-size: calc(var(--font_size) * 1.5)  !important; font-weight: var(--weight_thin)  !important; }
+.h5 { font-size: calc(var(--font_size) * 1.25) !important; font-weight: var(--weight_thin)  !important; }
+.h6 { font-size: calc(var(--font_size) * 1.0)  !important; font-weight: var(--weight_light) !important; }
+
+/* ── TEXT UTILITIES ─────────────────────────────── */
+
+.dim {
+  color: var(--textT50);
+  font-size: calc(var(--font_size) * 0.85);
+}
+
+.underline {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.typewriter {
+  max-width: 66ch;
+  margin-inline: auto;
+}
+
+.cat { text-transform: capitalize; }
+
+/* ── LAYOUT UTILITIES ───────────────────────────── */
+
+.maximise {
+  margin-left: var(--maximise);
+  margin-right: var(--maximise);
+}
+
+.clipped-circle {
+  clip-path: circle(50px at center);
+}
+
+/* ── ACCORDION ──────────────────────────────────── */
+/* Usage: <details class="accordion"><summary>Title</summary><div>…</div></details>
+ * Icon tokens: --accordion_icon_open / --accordion_icon_closed (default + / ×)
+ * Override per-element: style="--accordion_icon_closed: '▶'; --accordion_icon_open: '▼'"
+ */
+
+details.accordion {
+  border: var(--borderpx) solid var(--border_color);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+details.accordion + details.accordion {
+  margin-top: calc(var(--spaceV) * 0.5);
+}
+
+details.accordion > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: var(--spaceV) var(--spaceH);
+  cursor: pointer;
+  list-style: none;
+  font-weight: var(--weight_regular);
+  user-select: none;
+  min-height: unset;
+  transition: background-color var(--transition);
+}
+
+details.accordion > summary::-webkit-details-marker { display: none; }
+
+details.accordion > summary::after {
+  content: var(--accordion_icon_closed, '+');
+  font-size: 1.4em;
+  font-weight: 300;
+  color: var(--cta);
+  flex-shrink: 0;
+  line-height: 1;
+  transition: color var(--transition);
+}
+
+details.accordion[open] > summary {
+  border-bottom: var(--borderpx) solid var(--border_color);
+}
+
+details.accordion[open] > summary::after {
+  content: var(--accordion_icon_open, '×');
+}
+
+details.accordion > summary:hover {
+  background: color-mix(in oklch, var(--cta), transparent 90%);
+}
+
+details.accordion > :not(summary) {
+  padding: var(--spaceV) var(--spaceH);
+}
+
+/* ── DOT LEADER ─────────────────────────────────── */
+/* Usage: <span class="dots"> between label and value in menus/TOC */
+
+.dots {
+  flex: 8;
+  border-bottom: var(--borderpx) dotted currentColor;
+  margin: 0 0 0 8px;
+  height: var(--borderpx);
+  position: relative;
+  top: 0;
+  opacity: 0.25;
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@toybreaker/fiko",
-  "version": "0.1.0",
-  "description": "An unknown modern CSS framework. Implementing issues gone 404. SMILING DX!",
+  "version": "0.3.2",
+  "description": "LOOK GOOD OR DIE! — cascade layers, OKLCH colors, design tokens. Zero specificity wars. Smiling DX.",
   "license": "MIT",
   "author": "Toybreaker <hello@junglestar.co>",
-  "homepage": "https://github.com/junglesta/fiko",
+  "homepage": "https://junglesta.github.io/fiko/demo/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/junglesta/fiko.git"
+    "url": "git+https://github.com/junglesta/fiko.git"
   },
   "bugs": {
     "url": "https://github.com/junglesta/fiko/issues"

package/template/branding/1client_vars.css

@@ -0,0 +1,32 @@
+/*! 🐉 404.css | MIT License */
+/* branding/1client_vars.css — brand palette tokens
+ *
+ * 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, --nobori, --surface_*, gradients, etc.
+ */
+
+:root {
+  /* ── LIGHT OVERRIDE (optional) ──────────────────── */
+  /* Uncomment and set if your brand uses a tinted surface instead of neutral white:
+   * --light: oklch(0.84 0.028 74);  ← warm sand example
+   */
+
+  /* ── BRAND COLOR ────────────────────────────────── */
+  /* Change the hue (0–360) to match your brand.
+   * red oklch(0.55 0.22 20) · orange oklch(0.55 0.19 40)
+   * green oklch(0.45 0.18 145) · blue oklch(0.50 0.20 250)
+   */
+  --brand:         oklch(0.55 0.19 28);   /* ← change me */
+  --brand_lighter: oklch(from var(--brand) calc(l + 0.08) c h);
+  --brand_darker:  oklch(from var(--brand) calc(l - 0.18) c h);
+  --brand_invert:  oklch(from var(--brand) l c calc(h + 180)); /* complementary — auto-updates with --brand */
+  --brandT25:      color-mix(in oklch, var(--brand), transparent 75%);
+  --brandT50:      color-mix(in oklch, var(--brand), transparent 50%);
+
+  /* ── PAGE SURFACES ──────────────────────────────── */
+  /* Add named surfaces for sections, e.g.:
+   * --surface_hero: oklch(0.92 0.02 28);
+   */
+}

package/template/branding/3client_theme.css

@@ -0,0 +1,12 @@
+/*! 🐉 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; } */

package/template/000/1client_vars.css

@@ -1,40 +0,0 @@
-/*! 🐉 404.css | MIT License */
-/* 000/1client_vars.css — brand palette tokens
- *
- * Copy this file into your project's 000/ folder.
- * Customize the values below for your brand.
- * This file loads in the `tokens` layer alongside omg/1vars.css.
- */
-
-:root {
-  /* ── NEUTRALS ──────────────────────────────────── */
-  --dark:    oklch(0.20 0 0);
-  --darkT25: color-mix(in oklch, var(--dark),  transparent 75%);
-  --darkT50: color-mix(in oklch, var(--dark),  transparent 50%);
-
-  --light:    oklch(0.97 0 0);
-  --lightT25: color-mix(in oklch, var(--light), transparent 75%);
-  --lightT50: color-mix(in oklch, var(--light), transparent 50%);
-
-  /* ── BRAND COLOR ───────────────────────────────── */
-  /* Change the hue (0–360) to match your brand.
-   * Lightness (0–1) and chroma (0–0.37) control shade and saturation.
-   * Examples:
-   *   red       oklch(0.55 0.22   20)
-   *   orange    oklch(0.55 0.19   40)
-   *   green     oklch(0.45 0.18  145)
-   *   blue      oklch(0.50 0.20  250)
-   *   purple    oklch(0.45 0.22  290)
-   */
-  --brand:         oklch(0.55 0.19 28);   /* ← change me */
-  --brand_lighter: oklch(from var(--brand) calc(l + 0.08) c h);
-  --brand_darker:  oklch(from var(--brand) calc(l - 0.18) c h);
-  --brandT25:      color-mix(in oklch, var(--brand), transparent 75%);
-  --brandT50:      color-mix(in oklch, var(--brand), transparent 50%);
-
-  /* ── PAGE SURFACES ─────────────────────────────── */
-  /* --surface is defined in 2client_datatheme.css as var(--light).
-   * Add custom section surfaces here as needed, e.g.:
-   *   --surface_hero: oklch(0.92 0.02 var(--brand-hue));
-   */
-}

package/template/000/3client_theme.css

@@ -1,37 +0,0 @@
-/*! 🐉 404.css | MIT License */
-/* 000/3client_theme.css — element & component defaults
- *
- * Brand-specific overrides that sit on top of the framework.
- * Loaded in the `theme` layer — below utilities, above components.
- * Customize freely. All rules here are brand-specific, not framework rules.
- */
-
-/* ── TYPOGRAPHY SCALE ─────────────────────────────────────────── */
-
-.h1 { font-size: calc(var(--font_size) * 2.5)  !important; font-weight: var(--weight_light) !important; }
-.h2 { font-size: calc(var(--font_size) * 2.0)  !important; font-weight: var(--weight_light) !important; }
-.h3 { font-size: calc(var(--font_size) * 1.75) !important; font-weight: var(--weight_thin)  !important; }
-.h4 { font-size: calc(var(--font_size) * 1.5)  !important; font-weight: var(--weight_thin)  !important; }
-.h5 { font-size: calc(var(--font_size) * 1.25) !important; font-weight: var(--weight_thin)  !important; }
-.h6 { font-size: calc(var(--font_size) * 1.0)  !important; font-weight: var(--weight_light) !important; }
-
-/* ── DIM — secondary text ──────────────────────────────────────── */
-
-.dim {
-  color: var(--textT50);
-  font-size: calc(var(--font_size) * 0.85);
-}
-
-/* ── UNDERLINE LINK ─────────────────────────────────────────────  */
-
-.underline {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-/* ── TYPEWRITER — constrained readable prose column ─────────────── */
-
-.typewriter {
-  max-width: 66ch;
-  margin-inline: auto;
-}