@bitcobblers/wod-wiki-ui 0.4.24 → 0.5.29

package/dist/styles.css

@@ -0,0 +1,188 @@
+/*
+ * @bitcobblers/wod-wiki-ui/styles.css
+ *
+ * Design tokens + Tailwind v4 @theme mapping for the Mineral / Arctic Frost
+ * palette. Consuming apps (wod-wiki, this repo's Storybook) inherit with:
+ *
+ *   @import "tailwindcss";
+ *   @import "@bitcobblers/wod-wiki-ui/styles.css";
+ *
+ * `@source` below scans this package (src in the workspace, dist when
+ * published) so utility classes used by widgets (`bg-card`, `text-metric-time`)
+ * are generated in the consumer's CSS. App-only chrome stays in the app.
+ */
+
+@source "./**/*.{js,mjs,cjs,ts,tsx}";
+
+@layer base {
+  :root {
+    /* ── Mineral — earth tones, light mode ───────────────────────────
+     * Inspired by geological survey palettes: slate, ochre, sienna,
+     * terracotta, mossy green. Muted saturation, warm-neutral base.
+     * ─────────────────────────────────────────────────────────────── */
+
+    /* Base surfaces */
+    --background: 40 20% 96%;          /* warm cream app shell */
+    --foreground: 30 16% 15%;          /* warm near-black */
+    --card: 40 38% 98%;                /* warm white focus surface */
+    --card-foreground: 30 16% 15%;
+    --popover: 38 32% 95%;
+    --popover-foreground: 30 16% 15%;
+
+    /* Primary — slate blue (time/duration hue) */
+    --primary: 212 32% 50%;            /* #5980a8 */
+    --primary-foreground: 40 38% 98%;
+
+    /* Secondary — soft blue tint */
+    --secondary: 212 22% 88%;
+    --secondary-foreground: 212 32% 32%;
+
+    /* Muted / neutral surfaces */
+    --muted: 38 18% 90%;               /* #ede9e2 */
+    --muted-foreground: 30 13% 45%;    /* #6a5f52 */
+
+    /* Accent — ochre (action hue) */
+    --accent: 46 42% 85%;
+    --accent-foreground: 46 52% 28%;
+
+    /* Semantic states */
+    --destructive: 0 34% 48%;          /* #a05858 terracotta */
+    --destructive-foreground: 0 0% 100%;
+    --success: 140 28% 42%;            /* #508860 moss green */
+    --success-foreground: 0 0% 100%;
+    --warning: 46 52% 37%;             /* #948030 ochre */
+    --warning-foreground: 0 0% 100%;
+
+    /* Chrome */
+    --border: 36 14% 76%;              /* #cdc5b8 */
+    --input: 36 14% 82%;
+    --ring: 212 32% 50%;
+    --radius: 1rem;
+
+    /* ── Metric tokens — 7 semantic colors ────────────────────────── */
+    --metric-time:       212 32% 50%;  /* #5980a8 slate blue */
+    --metric-rep:        30 46% 45%;   /* #a87040 raw sienna */
+    --metric-effort:     140 28% 42%;  /* #508860 moss green */
+    --metric-rounds:     270 26% 50%;  /* #7c62a0 slate violet */
+    --metric-distance:   180 36% 40%;  /* #408888 deep teal */
+    --metric-resistance: 0 34% 48%;    /* #a05858 terracotta */
+    --metric-action:     46 52% 37%;   /* #948030 ochre */
+  }
+
+  .dark {
+    /* ── Arctic Frost — Nord-inspired, dark mode ─────────────────────
+     * Polar Night bases (blue-grey darks) + Snow Storm (off-whites)
+     * + Aurora accent palette: teal, green, purple, red, amber.
+     * ─────────────────────────────────────────────────────────────── */
+
+    /* Base surfaces — Polar Night */
+    --background: 222 16% 21%;         /* #2e3440 polar night 1 */
+    --foreground: 218 22% 76%;         /* #d8dee9 snow storm 1 */
+    --card: 222 17% 28%;               /* #3b4252 polar night 3 */
+    --card-foreground: 218 22% 76%;
+    --popover: 222 17% 28%;
+    --popover-foreground: 218 22% 76%;
+
+    /* Primary — Nord frost blue */
+    --primary: 210 35% 64%;            /* #81a1c1 */
+    --primary-foreground: 222 16% 18%;
+
+    /* Secondary — darker surface */
+    --secondary: 222 15% 22%;
+    --secondary-foreground: 218 22% 65%;
+
+    /* Muted */
+    --muted: 222 18% 18%;              /* #262c38 polar night 0 */
+    --muted-foreground: 219 14% 62%;   /* #9099ab */
+
+    /* Accent — Nord aurora yellow */
+    --accent: 40 55% 28%;
+    --accent-foreground: 40 67% 80%;
+
+    /* Semantic states */
+    --destructive: 354 34% 58%;        /* #bf616a aurora red */
+    --destructive-foreground: 0 0% 100%;
+    --success: 95 30% 65%;             /* #a3be8c aurora green */
+    --success-foreground: 222 16% 18%;
+    --warning: 40 67% 74%;             /* #ebcb8b aurora yellow */
+    --warning-foreground: 222 16% 18%;
+
+    /* Chrome */
+    --border: 218 17% 30%;             /* #3f4859 */
+    --input: 218 17% 30%;
+    --ring: 210 35% 64%;
+
+    /* ── Metric tokens — Arctic Frost aurora palette ─────────────── */
+    --metric-time:       210 35% 64%;  /* #81a1c1 frost blue */
+    --metric-rep:        14 46% 63%;   /* #d08770 aurora orange */
+    --metric-effort:     95 30% 65%;   /* #a3be8c aurora green */
+    --metric-rounds:     305 24% 63%;  /* #b48ead aurora purple */
+    --metric-distance:   178 27% 65%;  /* #8fbcbb frost teal */
+    --metric-resistance: 354 34% 58%;  /* #bf616a aurora red */
+    --metric-action:     40 67% 74%;   /* #ebcb8b aurora yellow */
+  }
+}
+
+/*
+ * Tailwind v4 theme bridge. `bg-background`, `text-muted-foreground`,
+ * `bg-metric-time`, `rounded-lg` etc. resolve to the tokens above.
+ */
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-metric-time: hsl(var(--metric-time));
+  --color-metric-rep: hsl(var(--metric-rep));
+  --color-metric-effort: hsl(var(--metric-effort));
+  --color-metric-rounds: hsl(var(--metric-rounds));
+  --color-metric-distance: hsl(var(--metric-distance));
+  --color-metric-resistance: hsl(var(--metric-resistance));
+  --color-metric-action: hsl(var(--metric-action));
+
+  --color-brand: #5980a8;
+  --color-brand-light: #d6e4f0;
+  --color-brand-deep: #3d5c7a;
+
+  --radius-pill: 9999px;
+  --radius-2xl: 1.5rem;
+  --radius-xl: 1.25rem;
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: 4px;
+
+  --font-sans: Inter, "Inter Fallback", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+
+  --tracking-display: -0.08em;
+  --tracking-heading: -0.05em;
+  --tracking-subhead: -0.015em;
+  --tracking-label: 0.065em;
+  --tracking-mono: 0.06em;
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@bitcobblers/wod-wiki-ui",
-  "version": "0.4.24",
+  "version": "0.5.29",
   "description": "Interactive presentation, CodeMirror editor extensions, and WQL diagram widgets",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "style": "./dist/styles.css",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,10 +14,11 @@
       "require": "./dist/index.cjs"
     },
     "./extensions": {
-      "types": "./dist/extensions.d.ts",
-      "import": "./dist/extensions.mjs",
-      "require": "./dist/extensions.cjs"
-    }
+      "types": "./dist/extensions/index.d.ts",
+      "import": "./dist/extensions/index.mjs",
+      "require": "./dist/extensions/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
@@ -25,9 +27,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@bitcobblers/wod-wiki-core": "^0.4.24",
-    "@bitcobblers/wod-wiki-lang": "^0.4.24",
-    "@bitcobblers/wod-wiki-wql": "^0.4.24",
+    "@bitcobblers/wod-wiki-core": "^0.5.29",
+    "@bitcobblers/wod-wiki-lang": "^0.5.29",
+    "@bitcobblers/wod-wiki-wql": "^0.5.29",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0",
     "@heroicons/react": "^2.2.0"
@@ -93,7 +95,7 @@
     }
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && cp src/styles.css dist/styles.css",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"