@toybreaker/fiko 0.6.2 → 0.7.0

package/omg/utils/fiko.css

@@ -1,66 +1,164 @@
 /*! fiko | MIT License */
-/* utils/fiko.css — .fiko signature class
+/* utils/fiko.css — FIKO signature utilities
  *
- * Adds the warm animated orb glow to any element.
- * Usage: <section class="fiko"> … </section>
+ * .fiko_glow     — ambient blurred orb glow; slow drift (no orbit)
+ *                  Override: --fiko_orb_a / --fiko_orb_b
  *
- * Requirements: the element needs dimensions (height/min-height).
+ * .fiko_orbital  — true elliptical orbit via CSS Motion Path
+ *                  Same tokens; super-slow so it reads as ambient, not busy
+ *
+ * .fiko          — one-shot vertical shake on page load (no JS)
+ * .fiko_hover    — vertical shake on :hover
+ * .fiko_loop     — continuous vertical shake
+ *                  Override: --shake_distance / --shake_duration
+ *
+ * Both glow utilities: 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));
+/* ── shared orb pseudo-element base ────────────────────── */
+.fiko_glow::before,
+.fiko_glow::after,
+.fiko_orbital::before,
+.fiko_orbital::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 0;
 }
 
-.fiko::before,
-.fiko::after {
-  content: '';
-  position: absolute;
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 0;
+/* ── .fiko_glow — ambient drift ────────────────────────── */
+
+.fiko_glow {
+    --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(--surface, oklch(0.12 0.01 265));
 }
 
 /* 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;
+.fiko_glow::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;
+.fiko_glow::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; }
+.fiko_glow > * { 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); }
+    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); }
+}
+
+/* ── .fiko_orbital — true elliptical orbit ─────────────── */
+/* CSS Motion Path (offset-path). Super slow — ambient, not busy.    */
+/* Two orbs on slightly different ellipses, opposite directions.      */
+
+.fiko_orbital {
+    --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(--surface, oklch(0.12 0.01 265));
+}
+
+.fiko_orbital::before {
+    width: 55%;
+    aspect-ratio: 1;
+    background: var(--fiko_orb_a);
+    filter: blur(70px);
+    opacity: 0.20;
+    offset-path: ellipse(30% 18% at 50% 50%);
+    offset-distance: 0%;
+    animation: fiko_orbit 38s linear infinite;
+}
+
+.fiko_orbital::after {
+    width: 40%;
+    aspect-ratio: 1;
+    background: var(--fiko_orb_b);
+    filter: blur(55px);
+    opacity: 0.14;
+    offset-path: ellipse(36% 22% at 50% 50%);
+    offset-distance: 50%;
+    animation: fiko_orbit 54s linear infinite reverse;
+}
+
+.fiko_orbital > * { position: relative; z-index: 1; }
+
+@keyframes fiko_orbit {
+    from { offset-distance: 0%; }
+    to   { offset-distance: 100%; }
+}
+
+/* ── motion safety ──────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+    .fiko_glow::before,
+    .fiko_glow::after,
+    .fiko_orbital::before,
+    .fiko_orbital::after { animation: none; }
+}
+
+/* ─── .fiko shake utility ───────────────────────────────────────────────────
+ *
+ * Token-driven vertical shake. Override via custom properties:
+ *   style="--shake_distance: 12px; --shake_duration: 0.4s"
+ *
+ * Variants:
+ *   .fiko          — one-shot on page load (no JS required)
+ *   .fiko_hover    — shakes on :hover
+ *   .fiko_loop     — shakes on repeat forever
+ */
+
+.fiko,
+.fiko_hover {
+    --shake_distance: 18px;
+    --shake_duration: 0.6s;
+}
+
+/* default: one-shot on load */
+.fiko {
+    animation: fiko_shake var(--shake_duration) ease-out both;
+}
+
+/* hover: re-triggers each time cursor enters */
+.fiko_hover:hover {
+    animation: fiko_shake var(--shake_duration) ease-out both;
+}
+
+@keyframes fiko_shake {
+    0%   { transform: translateY(0); }
+    10%  { transform: translateY(calc(var(--shake_distance) * -1)); }
+    22%  { transform: translateY(calc(var(--shake_distance) * 0.78)); }
+    36%  { transform: translateY(calc(var(--shake_distance) * -0.56)); }
+    50%  { transform: translateY(calc(var(--shake_distance) * 0.44)); }
+    64%  { transform: translateY(calc(var(--shake_distance) * -0.22)); }
+    78%  { transform: translateY(calc(var(--shake_distance) * 0.11)); }
+    100% { transform: translateY(0); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .fiko::before,
-  .fiko::after { animation: none; }
+    .fiko,
+    .fiko_hover:hover { animation: none; }
 }

package/omg/utils/layout.css

@@ -1,27 +1,165 @@
 /*! 🐉 404.css | MIT License */
-/* utils/layout.css — flex, positioning, writing mode */
+/* utils/layout.css — flex, grid, container, bento, positioning, writing mode */
+
+/* ── FLEX ───────────────────────────────────────── */
 
 .flex {
-  display: flex;
+    display: flex;
 }
 
 .flex_col {
-  flex-direction: column;
+    flex-direction: column;
+}
+
+.flex_wrap {
+    flex-wrap: wrap;
 }
 
+.flex_1 {
+    flex: 1;
+}
+
+.fill {
+    flex: 1;
+    min-width: 0;
+}
+
+.w_full {
+    width: 100%;
+}
+
+/* ── ALIGN ──────────────────────────────────────── */
+
+.align_start   { align-items: flex-start; }
+.align_center  { align-items: center; }
+.align_end     { align-items: flex-end; }
+.align_stretch { align-items: stretch; }
+.align_baseline { align-items: baseline; }
+
+/* ── JUSTIFY ────────────────────────────────────── */
+
+.justify_start   { justify-content: flex-start; }
+.justify_center  { justify-content: center; }
+.justify_end     { justify-content: flex-end; }
+.justify_between { justify-content: space-between; }
+.justify_around  { justify-content: space-around; }
+
+/* ── POSITIONING ────────────────────────────────── */
+
 .sticky {
-  position: sticky;
-  top: 0;
+    position: sticky;
+    top: 0;
 }
 
+/* ── WRITING MODE ───────────────────────────────── */
+
 .vertical {
-  display: block;
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-  text-transform: uppercase;
-  position: relative;
-  top: -10px;
-  .active & {
-    font-size: 200%;
-  }
+    display: block;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    text-transform: uppercase;
+    position: relative;
+    top: -10px;
+    .active & {
+        font-size: 200%;
+    }
+}
+
+/* ── CONTAINER ──────────────────────────────────── */
+/* Container query setup — wraps sections for responsive children */
+
+.container {
+    container-type: inline-size;
+    container-name: main-container;
+    width: min(100% - (var(--breath) * 2), var(--container_xl));
+    margin-inline: auto;
+}
+
+/* ── GRID ───────────────────────────────────────── */
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid_cols, 1), 1fr);
+    gap: var(--breath);
+}
+
+@container main-container (min-width: var(--bp_sm)) {
+    .grid {
+        --grid_cols: 2;
+    }
+}
+
+@container main-container (min-width: var(--bp_md)) {
+    .grid {
+        --grid_cols: 3;
+    }
+}
+
+@container main-container (min-width: var(--bp_lg)) {
+    .grid {
+        --grid_cols: 4;
+    }
+}
+
+/* ── BENTO BOX ──────────────────────────────────── */
+/* 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: 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);
+}
+
+/* Featured first child: 2×2 */
+.bento > :first-child { grid-column: span 2; grid-row: span 2; }
+
+/* ── 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; }
+
+/* ── 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: 480px) and (max-width: 639px) {
+    .bento { --bento_cols: 2; --bento_rows: 4; }
+    .bento > :first-child { grid-column: span 2; grid-row: span 2; }
+}
+
+/* ── BREAKOUT ───────────────────────────────────── */
+/* Pull an element outside the container margins */
+
+.maximise {
+    margin-inline: var(--maximise);
+}
+
+/* ── CLIP ───────────────────────────────────────── */
+
+.clipped_circle {
+    clip-path: circle(50px at center);
 }

package/omg/utils/misc.css

@@ -1,9 +1,2 @@
 /*! 🐉 404.css | MIT License */
-/* utils/misc.css — one-off component state overrides */
-
-.adv {
-  opacity: 0.5;
-  #icn_whatsapp {
-    filter: grayscale(88%);
-  }
-}
+/* utils/misc.css — one-off utility overrides */

package/omg/utils/spacing.css

@@ -16,19 +16,19 @@
 .pad_block_xl  { padding-block: calc(var(--spaceV) * 9);   }
 .pad_block_xxl { padding-block: calc(var(--spaceV) * 12);  }
 
-.pad_top_sm  { padding-top: calc(var(--spaceV) * 1.5); }
-.pad_top_md  { padding-top: calc(var(--spaceV) * 3);   }
-.pad_top_lg  { padding-top: calc(var(--spaceV) * 6);   }
-.pad_top_xl  { padding-top: calc(var(--spaceV) * 9);   }
-.pad_top_xxl { padding-top: calc(var(--spaceV) * 12);  }
-
-.pad_bottom_sm  { padding-bottom: calc(var(--spaceV) * 1.5); }
-.pad_bottom_md  { padding-bottom: calc(var(--spaceV) * 3);   }
-.pad_bottom_lg  { padding-bottom: calc(var(--spaceV) * 6);   }
-.pad_bottom_xl  { padding-bottom: calc(var(--spaceV) * 9);   }
-.pad_bottom_xxl { padding-bottom: calc(var(--spaceV) * 12);  }
-
-.top_padding { padding-top: var(--spaceV); }
+.pad_top_sm  { padding-block-start: calc(var(--spaceV) * 1.5); }
+.pad_top_md  { padding-block-start: calc(var(--spaceV) * 3);   }
+.pad_top_lg  { padding-block-start: calc(var(--spaceV) * 6);   }
+.pad_top_xl  { padding-block-start: calc(var(--spaceV) * 9);   }
+.pad_top_xxl { padding-block-start: calc(var(--spaceV) * 12);  }
+
+.pad_bottom_sm  { padding-block-end: calc(var(--spaceV) * 1.5); }
+.pad_bottom_md  { padding-block-end: calc(var(--spaceV) * 3);   }
+.pad_bottom_lg  { padding-block-end: calc(var(--spaceV) * 6);   }
+.pad_bottom_xl  { padding-block-end: calc(var(--spaceV) * 9);   }
+.pad_bottom_xxl { padding-block-end: calc(var(--spaceV) * 12);  }
+
+.top_padding { padding-block-start: var(--spaceV); }
 
 /* ── SPACER BLOCKS ───────────────────────────────── */
 

package/omg/utils/text.css

@@ -1,31 +1,119 @@
 /*! 🐉 404.css | MIT License */
-/* utils/text.css — text alignment, transform, wrap */
+/* utils/text.css — text utilities */
+
+/* ── ALIGNMENT & TRANSFORM ──────────────────────── */
 
 .center,
 .centre,
 .centered {
-  text-align: center;
+    text-align: center;
 }
 
 .uppercase,
 .uppercase > * {
-  text-transform: uppercase !important;
+    text-transform: uppercase !important;
 }
 
 .capitalize,
 .capitalise,
 .titlecase {
-  text-transform: capitalize;
+    text-transform: capitalize;
 }
 
 .strikethrough {
-  text-decoration: line-through;
+    text-decoration: line-through;
 }
 
 .pretty {
-  text-wrap: pretty;
+    text-wrap: pretty;
 }
 
+/* ── FONT FAMILY ────────────────────────────────── */
+
 .mono {
-  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
+    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
+}
+
+.typewriter {
+    font-family: var(--font_serif);
+}
+
+/* ── DECORATION ─────────────────────────────────── */
+
+.underline {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+/* ── WEIGHT ─────────────────────────────────────── */
+
+.weight_thin     { font-weight: var(--weight_thin); }
+.weight_light    { font-weight: var(--weight_light); }
+.weight_regular  { font-weight: var(--weight_regular); }
+.weight_medium   { font-weight: var(--weight_medium); }
+.weight_bold     { font-weight: var(--weight_bold); }
+
+/* numeric scale */
+.weight_100 { font-weight: var(--weight_100); }
+.weight_200 { font-weight: var(--weight_200); }
+.weight_300 { font-weight: var(--weight_300); }
+.weight_400 { font-weight: var(--weight_400); }
+.weight_500 { font-weight: var(--weight_500); }
+.weight_600 { font-weight: var(--weight_600); }
+.weight_700 { font-weight: var(--weight_700); }
+.weight_800 { font-weight: var(--weight_800); }
+
+/* ── SIZE & WEIGHT ──────────────────────────────── */
+
+.dim {
+    color: var(--text);
+    font-size: calc(var(--font_size) * 0.95);
+}
+
+/* ── PROSE ──────────────────────────────────────── */
+
+.prose {
+    max-width: 66ch;
+    margin-inline: auto;
+}
+
+/* ── CAT ────────────────────────────────────────── */
+
+.cat {
+    text-transform: capitalize;
+}
+
+/* ── HEADING SCALE ──────────────────────────────── */
+/* Apply heading styles to any element, decoupled from heading semantics.
+ * Usage: <p class="h2">Display heading</p>
+ */
+
+.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) !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) !important; font-weight: var(--weight_light) !important; }
+
+/* ── DOT LEADER ─────────────────────────────────── */
+/* Usage: <span class="dots"> between label and value in menus/TOC */
+
+.dots {
+    flex: 8;
+    border-bottom: max(2px, var(--borderpx)) dotted currentColor;
+    margin: 0 0 0 8px;
+    height: var(--borderpx);
+    position: relative;
+    top: 0;
+    opacity: 0.25;
 }

package/omg/utils/transitions.css

@@ -0,0 +1,22 @@
+/*! 🐉 404.css | MIT License */
+/* utils/transitions.css — View Transitions API helpers */
+
+/* ── VIEW TRANSITIONS ── */
+/* Assign view-transition-name to elements that should animate between pages/states.
+ * Usage: <img class="vt_hero"> on both pages — browser morphs between them.
+ * Names must be unique per page. Use inline style="--vt_name: my-name" for dynamic names.
+ */
+
+.vt_hero    { view-transition-name: hero; }
+.vt_header  { view-transition-name: header; }
+.vt_image   { view-transition-name: image; }
+.vt_title   { view-transition-name: title; }
+.vt_card    { view-transition-name: card; }
+
+/* token-driven — override with inline style="--vt_name: my-name" */
+.vt_custom  { view-transition-name: var(--vt_name, none); }
+
+/* opt in to cross-fade for the whole page */
+.vt_page {
+    view-transition-name: root;
+}

package/omg/utils/visibility.css

@@ -23,6 +23,32 @@
   display: none;
 }
 
+/* ── SKIP TO CONTENT ────────────────────────────── */
+/* Usage: <a class="skip_to_content" href="#main">Skip to content</a>
+ * Place as the very first element inside <body>.
+ * Invisible until focused — keyboard users can jump past nav.
+ */
+
+.skip_to_content {
+    position: absolute;
+    inset-block-start: var(--spaceV);
+    inset-inline-start: var(--spaceH);
+    z-index: 9999;
+    padding: var(--spaceV) var(--spaceH);
+    background: var(--surface);
+    border: var(--borderpx) solid var(--border_color);
+    border-radius: var(--radius);
+    font-weight: var(--weight_bold);
+    translate: 0 -200%;
+    transition: translate var(--transition);
+}
+
+.skip_to_content:focus-visible {
+    translate: 0 0;
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
 /* visually hidden but accessible to screen readers */
 .visually_hidden,
 .sr_only {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toybreaker/fiko",
-  "version": "0.6.2",
+  "version": "0.7.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,9 +22,9 @@
     "modern-css"
   ],
   "scripts": {
-    "dev": "serve . & sleep 1 && open http://localhost:3000/demo/",
+    "dev": "serve . -p 5555 & sleep 1 && open http://localhost:5555/",
     "build": "node scripts/build-demo.mjs",
-    "deploy": "node scripts/build-demo.mjs && netlify deploy --prod --dir=dist"
+    "deploy": "node scripts/build-demo.mjs && netlify deploy --prod --dir=dist --site=922d0a52-64e0-4eda-9fd9-742aa8619a87"
   },
   "main": "index.css",
   "style": "index.css",