fernwell 0.1.0

package/dist/toast.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Toast — a single, reused, bottom-right notice.
+ *
+ *   toast.show('Invoice sent');
+ *   toast.show('That card was declined', { variant: 'error', duration: 6000 });
+ */
+export type ToastVariant = 'success' | 'error' | 'info' | 'pending';
+export interface ToastOptions {
+    variant?: ToastVariant;
+    /** ms before it hides; 0 keeps it until `hide()` or the next `show()`. */
+    duration?: number;
+}
+export declare function show(message: string, { variant, duration }?: ToastOptions): HTMLElement;
+export declare function hide(): void;

package/dist/tokens.json

@@ -0,0 +1,199 @@
+{
+  "prefix": "fw",
+  "$schema-notes": [
+    "Each token has either `value` (same in both themes) or `light` + optional `dark`.",
+    "`{name}` inside a value references another token in the same group and is emitted as var(--fw-name).",
+    "Tokens whose value references another token are derived: override the seed, and they follow in both themes."
+  ],
+  "color": {
+    "text": {
+      "light": "#1F2430",
+      "dark": "#F2F1EA",
+      "comment": "primary text — dark neutral in light, warm off-white in dark (never pure white)"
+    },
+    "text-soft": {
+      "light": "#565D6E",
+      "dark": "#9CA1B0",
+      "comment": "secondary text — never pure gray"
+    },
+    "bg": {
+      "light": "#F5F6F1",
+      "dark": "#14161C",
+      "comment": "page background — dark is near-black with a trace of Plum, never pure black"
+    },
+    "bg-dim": {
+      "light": "#EAEBE4",
+      "dark": "#2B2F3B",
+      "comment": "dividers, input borders, recessed surfaces"
+    },
+    "surface": {
+      "light": "#FFFFFF",
+      "dark": "#1D2029",
+      "comment": "card / panel surface"
+    },
+    "primary": {
+      "value": "#FFC145",
+      "comment": "primary brand / CTA (default: Marigold) — same hex in both themes"
+    },
+    "primary-hover": {
+      "value": "color-mix(in srgb, {primary}, {text} 12%)",
+      "comment": "derived: darkens in light, brightens in dark"
+    },
+    "primary-soft": {
+      "value": "color-mix(in srgb, {primary}, white 35%)",
+      "comment": "derived: highlight (empty-state blob gradient)"
+    },
+    "secondary": {
+      "light": "#4C3A73",
+      "dark": "#6B54A3",
+      "comment": "secondary brand, nav, headers (default: Plum) — lifted a step in dark so it stays legible"
+    },
+    "secondary-hover": {
+      "value": "color-mix(in srgb, {secondary}, {text} 15%)",
+      "comment": "derived"
+    },
+    "secondary-bg": {
+      "light": "color-mix(in srgb, {secondary} 10%, {surface})",
+      "dark": "color-mix(in srgb, {secondary} 16%, transparent)",
+      "comment": "derived: tint — opaque pastel in light, low-opacity wash in dark"
+    },
+    "success": {
+      "light": "#3FA672",
+      "dark": "#55D194",
+      "comment": "success (default: Meadow) — status colours lift 1–2 steps lighter in dark to hold contrast"
+    },
+    "success-bg": {
+      "light": "color-mix(in srgb, {success} 12%, {surface})",
+      "dark": "color-mix(in srgb, {success} 14%, transparent)",
+      "comment": "derived"
+    },
+    "warning": {
+      "light": "#E8A521",
+      "dark": "#FFD166",
+      "comment": "pending / waiting (default: deep Marigold) — independent of primary so it stays amber when primary changes"
+    },
+    "warning-bg": {
+      "light": "color-mix(in srgb, {warning} 14%, {surface})",
+      "dark": "color-mix(in srgb, {warning} 16%, transparent)",
+      "comment": "derived"
+    },
+    "danger": {
+      "light": "#E85B4F",
+      "dark": "#FF8478",
+      "comment": "error / danger (default: Coral)"
+    },
+    "danger-bg": {
+      "light": "color-mix(in srgb, {danger} 13%, {surface})",
+      "dark": "color-mix(in srgb, {danger} 14%, transparent)",
+      "comment": "derived"
+    },
+    "info": {
+      "light": "#3E8FD0",
+      "dark": "#6BB3E8",
+      "comment": "info (default: Sky)"
+    },
+    "info-bg": {
+      "light": "color-mix(in srgb, {info} 12%, {surface})",
+      "dark": "color-mix(in srgb, {info} 14%, transparent)",
+      "comment": "derived"
+    },
+    "on-primary": {
+      "value": "#1F2430",
+      "comment": "text on primary surfaces (buttons, avatars); never flips with the theme"
+    },
+    "on-secondary": {
+      "value": "#FFFFFF",
+      "comment": "text on secondary / text-coloured surfaces (nav, footer, banners)"
+    },
+    "on-secondary-soft": {
+      "value": "color-mix(in srgb, {on-secondary} 72%, transparent)",
+      "comment": "derived: secondary text on the nav bar"
+    },
+    "on-secondary-fill": {
+      "value": "color-mix(in srgb, {on-secondary} 10%, transparent)",
+      "comment": "derived: translucent control fill on the nav bar"
+    },
+    "on-secondary-line": {
+      "value": "color-mix(in srgb, {on-secondary} 16%, transparent)",
+      "comment": "derived: translucent border on the nav bar"
+    },
+    "overlay": {
+      "light": "rgba(31, 36, 48, 0.55)",
+      "dark": "rgba(0, 0, 0, 0.6)",
+      "comment": "modal backdrop"
+    },
+    "overlay-soft": {
+      "light": "rgba(31, 36, 48, 0.32)",
+      "dark": "rgba(0, 0, 0, 0.4)",
+      "comment": "drawer backdrop"
+    },
+    "focus-ring": {
+      "value": "0 0 0 4px color-mix(in srgb, {primary} 25%, transparent)",
+      "comment": "derived: box-shadow focus ring, primary wash"
+    }
+  },
+  "font": {
+    "display": {
+      "value": "'Plus Jakarta Sans', system-ui, sans-serif",
+      "comment": "anything that should feel like a voice — headlines, empty states, onboarding"
+    },
+    "body": {
+      "value": "'Inter', system-ui, sans-serif",
+      "comment": "anything read quickly and often — tables, forms, nav"
+    },
+    "mono": {
+      "value": "'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
+      "comment": "numbers, IDs, anywhere precision matters more than warmth"
+    }
+  },
+  "space": {
+    "1": { "value": "4px" },
+    "2": { "value": "8px" },
+    "3": { "value": "12px" },
+    "4": { "value": "16px" },
+    "5": { "value": "24px" },
+    "6": { "value": "32px" },
+    "7": { "value": "48px" },
+    "8": { "value": "64px" },
+    "9": { "value": "96px" }
+  },
+  "radius": {
+    "sm": { "value": "10px", "comment": "inputs, small badges" },
+    "md": { "value": "16px", "comment": "buttons, tags" },
+    "lg": { "value": "24px", "comment": "cards" },
+    "xl": { "value": "32px", "comment": "modals, hero panels" },
+    "full": { "value": "999px", "comment": "avatars, pills" }
+  },
+  "shadow": {
+    "sm": {
+      "light": "0 1px 2px rgba(31, 36, 48, 0.06), 0 1px 1px rgba(31, 36, 48, 0.04)",
+      "dark": "0 1px 2px rgba(0, 0, 0, 0.3)"
+    },
+    "md": {
+      "light": "0 4px 12px rgba(31, 36, 48, 0.08), 0 2px 4px rgba(31, 36, 48, 0.04)",
+      "dark": "0 4px 12px rgba(0, 0, 0, 0.35)"
+    },
+    "lg": {
+      "light": "0 12px 32px rgba(31, 36, 48, 0.12), 0 4px 8px rgba(31, 36, 48, 0.06)",
+      "dark": "0 12px 32px rgba(0, 0, 0, 0.45)"
+    },
+    "primary": {
+      "light": "0 6px 16px color-mix(in srgb, {primary} 35%, transparent)",
+      "dark": "0 6px 16px color-mix(in srgb, {primary} 22%, transparent)",
+      "comment": "derived: CTA glow"
+    },
+    "success": {
+      "light": "0 6px 16px color-mix(in srgb, {success} 28%, transparent)",
+      "dark": "0 6px 16px color-mix(in srgb, {success} 22%, transparent)",
+      "comment": "derived"
+    }
+  },
+  "border": {
+    "w": { "value": "1.5px", "comment": "the system's one border weight" }
+  },
+  "motion": {
+    "fast": { "value": "120ms", "comment": "buttons & controls" },
+    "base": { "value": "180ms", "comment": "cards, modals, dropdowns entering" },
+    "ease": { "value": "ease" }
+  }
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "fernwell",
+  "version": "0.1.0",
+  "description": "Fernwell — the HunnyDo design system. Design tokens, CSS components, and small vanilla JS enhancers that work in any web app, with or without a build step.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Jacob Knaack",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JacobKnaack/fernwell.git"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "css",
+    "ui",
+    "components",
+    "hunnydo",
+    "fernwell"
+  ],
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/fernwell.cjs",
+  "module": "./dist/fernwell.esm.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/fernwell.css",
+  "unpkg": "./dist/fernwell.iife.js",
+  "jsdelivr": "./dist/fernwell.iife.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/fernwell.esm.js",
+      "require": "./dist/fernwell.cjs"
+    },
+    "./css": "./dist/fernwell.css",
+    "./css/min": "./dist/fernwell.min.css",
+    "./tokens.css": "./dist/fernwell.tokens.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "tokens": "node scripts/gen-tokens.mjs",
+    "lint": "node scripts/lint-tokens.mjs",
+    "build": "npm run tokens && npm run lint && node scripts/build.mjs && tsc",
+    "docs": "serve docs/",
+    "prepublishOnly": "npm run build"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.12",
+    "serve": "^14.2.6",
+    "typescript": "^5.9.3"
+  }
+}