@enya-learning/nova 0.5.0 → 0.7.0

package/dist/styles/nova.css

@@ -11,47 +11,160 @@
 @source "../**/*.{ts,tsx}";
 
 /*
- * Maps nova semantic tokens directly into Tailwind's @theme so utility
- * classes like bg-background, text-foreground, bg-muted/30, border-border
- * etc. are generated for consumers who import "@enya-learning/nova/styles".
+ * Semantic color tokens — maps palette stops to meaning (--color-primary,
+ * --color-surface-1, --color-destructive, etc.) with light-dark() for
+ * automatic light/dark switching. Raw palette values live in
+ * nova-binding.css and are referenced here.
+ */
+@theme {
+  --color-surface-1: light-dark(var(--color-white), var(--color-black));
+  --color-surface-2: light-dark(var(--color-grey-100), var(--color-grey-900));
+
+  --color-surface-3: light-dark(var(--color-grey-200), var(--color-grey-800));
+
+  --color-foreground: light-dark(var(--color-grey-900), var(--color-grey-100));
+
+  --color-accent: light-dark(var(--color-brand-500), var(--color-brand-400));
+  --color-accent-foreground: light-dark(
+    var(--color-white),
+    var(--color-brand-900)
+  );
+
+  --color-info: light-dark(var(--color-blue-500), var(--color-blue-400));
+  --color-info-foreground: light-dark(
+    var(--color-white),
+    var(--color-grey-900)
+  );
+  --color-info-soft: light-dark(var(--color-blue-50), var(--color-blue-950));
+  --color-info-soft-foreground: light-dark(
+    var(--color-blue-500),
+    var(--color-blue-300)
+  );
+
+  --color-success: light-dark(
+    var(--color-emerald-500),
+    var(--color-emerald-400)
+  );
+  --color-success-foreground: light-dark(
+    var(--color-emerald-50),
+    var(--color-emerald-900)
+  );
+  --color-success-soft: light-dark(
+    var(--color-emerald-50),
+    var(--color-emerald-950)
+  );
+  --color-success-soft-foreground: light-dark(
+    var(--color-emerald-500),
+    var(--color-emerald-300)
+  );
+
+  --color-warning: light-dark(var(--color-amber-500), var(--color-amber-400));
+  --color-warning-foreground: light-dark(
+    var(--color-white),
+    var(--color-amber-900)
+  );
+  --color-warning-soft: light-dark(
+    var(--color-amber-50),
+    var(--color-amber-950)
+  );
+  --color-warning-soft-foreground: light-dark(
+    var(--color-amber-500),
+    var(--color-amber-300)
+  );
+
+  --color-destructive: light-dark(var(--color-red-600), var(--color-red-400));
+  --color-destructive-foreground: light-dark(
+    var(--color-white),
+    var(--color-red-900)
+  );
+  --color-destructive-soft: light-dark(
+    var(--color-red-50),
+    var(--color-red-950)
+  );
+  --color-destructive-soft-foreground: light-dark(
+    var(--color-red-500),
+    var(--color-red-300)
+  );
+
+  --color-border: light-dark(var(--color-grey-300), var(--color-grey-700));
+  --color-ring: light-dark(var(--color-brand-500), var(--color-brand-400));
+
+  --color-chart-1: light-dark(var(--color-brand-600), var(--color-brand-400));
+  --color-chart-2: light-dark(
+    var(--color-emerald-800),
+    var(--color-emerald-200)
+  );
+  --color-chart-3: light-dark(var(--color-yellow-600), var(--color-yellow-400));
+  --color-chart-4: light-dark(var(--color-blue-800), var(--color-blue-400));
+  --color-chart-5: light-dark(var(--color-red-600), var(--color-red-400));
+
+  --color-sidebar: light-dark(var(--color-grey-50), var(--color-grey-950));
+  --color-sidebar-foreground: light-dark(
+    var(--color-grey-900),
+    var(--color-grey-100)
+  );
+  --color-sidebar-primary: light-dark(
+    var(--color-brand-600),
+    var(--color-brand-400)
+  );
+  --color-sidebar-primary-foreground: light-dark(
+    var(--color-grey-100),
+    var(--color-grey-900)
+  );
+  --color-sidebar-accent: light-dark(
+    var(--color-grey-100),
+    var(--color-grey-800)
+  );
+  --color-sidebar-accent-foreground: light-dark(
+    var(--color-grey-900),
+    var(--color-grey-100)
+  );
+  --color-sidebar-border: light-dark(
+    var(--color-grey-200),
+    var(--color-grey-800)
+  );
+  --color-sidebar-ring: light-dark(
+    var(--color-brand-600),
+    var(--color-brand-400)
+  );
+
+  --color-primary: light-dark(var(--color-grey-900), var(--color-grey-100));
+  --color-primary-foreground: light-dark(
+    var(--color-grey-50),
+    var(--color-grey-900)
+  );
+
+  --color-surface-muted: light-dark(
+    var(--color-grey-50),
+    var(--color-grey-950)
+  );
+  --color-muted-foreground: light-dark(
+    var(--color-grey-500),
+    var(--color-grey-400)
+  );
+
+  /*------ TO BE REMOVED -----*/
+
+  --color-card: light-dark(var(--color-grey-50), var(--color-grey-900));
+  --color-card-foreground: light-dark(
+    var(--color-grey-900),
+    var(--color-grey-100)
+  );
+  --color-popover: light-dark(var(--color-grey-50), var(--color-grey-900));
+  --color-popover-foreground: light-dark(
+    var(--color-grey-900),
+    var(--color-grey-100)
+  );
+}
+
+/*
+ * Nova-owned theme extensions (radius scale, spacing scale, fonts) that
+ * don't have a bare equivalent elsewhere. Spacing keys stay nova- prefixed
+ * on purpose — they use literal pixel values (spacing-nova-4 = 4px), not
+ * Tailwind's multiplier scale, so a bare --spacing-4 would silently
+ * override Tailwind's own numeric spacing utilities for any consumer.
  */
 @theme inline {
-  --color-background: var(--color-nova-surface-1);
-  --color-foreground: var(--color-nova-foreground);
-  --color-card: var(--color-nova-card);
-  --color-card-foreground: var(--color-nova-card-foreground);
-  --color-popover: var(--color-nova-popover);
-  --color-popover-foreground: var(--color-nova-popover-foreground);
-  --color-primary: var(--color-nova-primary);
-  --color-primary-foreground: var(--color-nova-primary-foreground);
-  --color-secondary: var(--color-nova-surface-2);
-  --color-secondary-foreground: var(--color-nova-foreground);
-  --color-muted: var(--color-nova-surface-muted);
-  --color-muted-foreground: var(--color-nova-muted-foreground);
-  --color-accent: var(--color-nova-accent);
-  --color-accent-foreground: var(--color-nova-accent-foreground);
-  --color-destructive: var(--color-nova-destructive);
-  --color-destructive-foreground: var(--color-nova-destructive-foreground);
-  --color-border: var(--color-nova-border);
-  --color-input: var(--color-nova-border);
-  --color-ring: var(--color-nova-ring);
-  --color-chart-1: var(--color-nova-chart-1);
-  --color-chart-2: var(--color-nova-chart-2);
-  --color-chart-3: var(--color-nova-chart-3);
-  --color-chart-4: var(--color-nova-chart-4);
-  --color-chart-5: var(--color-nova-chart-5);
-  --color-sidebar: var(--color-nova-sidebar);
-  --color-sidebar-foreground: var(--color-nova-sidebar-foreground);
-  --color-sidebar-primary: var(--color-nova-sidebar-primary);
-  --color-sidebar-primary-foreground: var(
-    --color-nova-sidebar-primary-foreground
-  );
-  --color-sidebar-accent: var(--color-nova-sidebar-accent);
-  --color-sidebar-accent-foreground: var(
-    --color-nova-sidebar-accent-foreground
-  );
-  --color-sidebar-border: var(--color-nova-sidebar-border);
-  --color-sidebar-ring: var(--color-nova-sidebar-ring);
   --radius-sm: 0.375rem;
   --radius-md: 0.5rem;
   --radius-lg: 0.5rem;
@@ -79,7 +192,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-surface-1 text-foreground;
   }
   button:not(:disabled),
   [role="button"]:not(:disabled) {
@@ -94,23 +207,19 @@
 @source "../chunks/*.js";
 @source "../index.js";
 
-/* prettier-ignore */
-@source inline("text-heading-72 text-heading-64 text-heading-56 text-heading-48 text-heading-40 text-heading-32 text-heading-24 text-heading-20 text-heading-16 text-heading-14");
 /* prettier-ignore */
 @source inline("text-button-24 text-button-20 text-button-16 text-button-14 text-button-12");
 /* prettier-ignore */
 @source inline("text-label-20 text-label-18 text-label-16 text-label-14 text-label-14-mono text-label-13 text-label-13-mono text-label-12 text-label-12-mono");
 /* prettier-ignore */
-@source inline("text-copy-24 text-copy-20 text-copy-18 text-copy-16 text-copy-14 text-copy-13 text-copy-13-mono text-copy-12");
-/* prettier-ignore */
-@source inline("bg-nova-success text-nova-success-foreground bg-nova-success-soft text-nova-success-soft-foreground bg-nova-warning text-nova-warning-foreground bg-nova-warning-soft text-nova-warning-soft-foreground bg-nova-destructive bg-nova-destructive-soft text-nova-destructive-foreground text-nova-destructive-soft-foreground bg-nova-info text-nova-info-foreground bg-nova-info-soft text-nova-info-soft-foreground");
+@source inline("bg-success text-success-foreground bg-success-soft text-success-soft-foreground bg-warning text-warning-foreground bg-warning-soft text-warning-soft-foreground bg-destructive bg-destructive-soft text-destructive-foreground text-destructive-soft-foreground bg-info text-info-foreground bg-info-soft text-info-soft-foreground");
 /* prettier-ignore */
-@source inline("text-nova-foreground bg-nova-surface-1 bg-nova-surface-2 bg-nova-surface-3 bg-nova-accent text-nova-accent-foreground border-nova-border ring-nova-ring");
+@source inline("text-foreground bg-surface-1 bg-surface-2 bg-surface-3 bg-accent text-accent-foreground border-border ring-ring");
 /* prettier-ignore */
-@source inline("bg-nova-chart-1 bg-nova-chart-2 bg-nova-chart-3 bg-nova-chart-4 bg-nova-chart-5");
+@source inline("bg-chart-1 bg-chart-2 bg-chart-3 bg-chart-4 bg-chart-5");
 /* prettier-ignore */
-@source inline("bg-nova-sidebar text-nova-sidebar-foreground bg-nova-sidebar-primary text-nova-sidebar-primary-foreground bg-nova-sidebar-accent text-nova-sidebar-accent-foreground border-nova-sidebar-border ring-nova-sidebar-ring");
+@source inline("bg-sidebar text-sidebar-foreground bg-sidebar-primary text-sidebar-primary-foreground bg-sidebar-accent text-sidebar-accent-foreground border-sidebar-border ring-sidebar-ring");
 /* prettier-ignore */
-@source inline("bg-nova-primary text-nova-primary-foreground bg-nova-surface-muted text-nova-muted-foreground bg-nova-card text-nova-card-foreground bg-nova-popover text-nova-popover-foreground");
+@source inline("bg-primary text-primary-foreground bg-surface-muted text-muted-foreground bg-card text-card-foreground bg-popover text-popover-foreground");
 
 /* Component-specific styles added here as components are built */

package/dist/styles/typography.css

@@ -1,77 +1,7 @@
-/* Geist-style typography utilities.
+/* Geist-style typography utilities for labels and button text.
+   Headings and body copy are set through the Heading and Text components instead.
    Each class pre-sets font-size, line-height, letter-spacing, and font-weight.
-   All classes work with Tailwind variants: md:text-heading-32, hover:text-label-14, etc. */
-
-/* ─── Headings ─────────────────────────────────────────────────────────────── */
-
-@utility text-heading-72 {
-  font-size: 4.5rem;
-  line-height: 4.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-64 {
-  font-size: 4rem;
-  line-height: 4rem;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-56 {
-  font-size: 3.5rem;
-  line-height: 3.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-48 {
-  font-size: 3rem;
-  line-height: 3.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-40 {
-  font-size: 2.5rem;
-  line-height: 3rem;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-32 {
-  font-size: 2rem;
-  line-height: 2.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-24 {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-20 {
-  font-size: 1.25rem;
-  line-height: 1.625;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-16 {
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: -0.02em;
-  font-weight: 500;
-}
-
-@utility text-heading-14 {
-  font-size: 0.875rem;
-  line-height: 1.25;
-  font-weight: 500;
-}
+   All classes work with Tailwind variants: md:text-label-16, hover:text-label-14, etc. */
 
 /* ─── Buttons ──────────────────────────────────────────────────────────────── */
 
@@ -175,53 +105,3 @@
   font-weight: 400;
   font-family: var(--font-mono);
 }
-
-/* ─── Copy ─────────────────────────────────────────────────────────────────── */
-
-@utility text-copy-24 {
-  font-size: 1.5rem;
-  line-height: 1.6667;
-  font-weight: 400;
-}
-
-@utility text-copy-20 {
-  font-size: 1.25rem;
-  line-height: 1.6;
-  font-weight: 400;
-}
-
-@utility text-copy-18 {
-  font-size: 1.125rem;
-  line-height: 1.5556;
-  font-weight: 400;
-}
-
-@utility text-copy-16 {
-  font-size: 1rem;
-  line-height: 1.625;
-  font-weight: 400;
-}
-
-@utility text-copy-14 {
-  font-size: 0.875rem;
-  line-height: 1.7143;
-  font-weight: 400;
-}
-
-@utility text-copy-13 {
-  font-size: 0.8125rem;
-  line-height: 1.5385;
-  font-weight: 400;
-}
-
-@utility text-copy-13-mono {
-  font-size: 0.8125rem;
-  line-height: 1.5385;
-  font-weight: 400;
-  font-family: var(--font-mono);
-}
-@utility text-copy-12 {
-  font-size: 0.75rem;
-  line-height: 150%;
-  font-weight: 400;
-}

package/dist/utils.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "./chunks/utils-kyb5nny4y41y7hd8.js";
+import { t as e } from "./chunks/utils-chr77evsz8gs6wle.js";
 export {
   e as cn
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enya-learning/nova",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -27,7 +27,8 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "lucide-react": "^1.17.0",
+    "@hugeicons/core-free-icons": "^4.2.2",
+    "@hugeicons/react": "^1.1.9",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
@@ -43,8 +44,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/ui": "^4.1.8",
-    "oxlint": "latest",
+    "@vitest/ui": "4.1.10",
     "plop": "^4.0.0",
     "react-docgen-typescript": "^2.4.0",
     "shadcn": "^4.10.0",
@@ -52,9 +52,10 @@
     "tailwindcss": "^4",
     "tsx": "^4.22.4",
     "typescript": "~6",
-    "vite": "^8.0.16",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.6",
     "vite-plugin-dts": "^5.0.2",
-    "vitest": "^4.1.8"
+    "vitest": "4.1.10",
+    "vite-plus": "0.2.6"
   },
   "exports": {
     ".": {
@@ -67,6 +68,22 @@
       "types": "./dist/src/components/button/index.d.ts",
       "default": "./dist/components/button.js"
     },
+    "./components/heading": {
+      "types": "./dist/src/components/heading/index.d.ts",
+      "default": "./dist/components/heading.js"
+    },
+    "./components/text": {
+      "types": "./dist/src/components/text/index.d.ts",
+      "default": "./dist/components/text.js"
+    },
+    "./components/box": {
+      "types": "./dist/src/components/box/index.d.ts",
+      "default": "./dist/components/box.js"
+    },
+    "./components/empty": {
+      "types": "./dist/src/components/empty/index.d.ts",
+      "default": "./dist/components/empty.js"
+    },
     "./components/button-group": {
       "types": "./dist/src/components/button-group/index.d.ts",
       "default": "./dist/components/button-group.js"
@@ -114,14 +131,14 @@
     "*.css"
   ],
   "scripts": {
-    "build": "vite build --mode production && tsx scripts/css-build.ts",
-    "dev": "vite build --watch --mode development",
+    "build": "vp build --mode production && tsx scripts/css-build.ts",
+    "dev": "vp build --watch --mode development",
     "clean": "rm -rf dist",
-    "lint": "oxlint --config oxlint.json src",
-    "format": "prettier --write \"**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
+    "lint": "vp lint src",
+    "format": "vp fmt \"**/*.{ts,tsx}\"",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "test": "vp test run",
+    "test:watch": "vp test",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "generate-docs": "tsx scripts/generate-docs.ts",

package/src/eslint/no-primitive-colors.js

@@ -3,7 +3,7 @@
  *
  * Flags raw Tailwind palette classes (e.g. bg-blue-500, text-red-600, bg-white)
  * in className / class attributes and in cn/clsx/cva/twMerge call arguments.
- * Consumers should use Nova semantic tokens instead (bg-background, bg-nova-primary, etc.).
+ * Consumers should use Nova semantic tokens instead (bg-primary, bg-surface-1, etc.).
  */
 
 const PREFIXES = [
@@ -89,7 +89,7 @@ export const noPrimitiveColors = {
     messages: {
       noPrimitive:
         'Raw Tailwind color "{{match}}" — use a Nova semantic token instead ' +
-        "(e.g. bg-background, text-foreground, bg-nova-primary, bg-nova-white). " +
+        "(e.g. bg-surface-1, text-foreground, bg-primary, bg-white). " +
         "See the Nova Colours docs.",
     },
   },

package/src/eslint/no-primitive-colors.test.ts

@@ -2,7 +2,7 @@ import { readFileSync } from "node:fs"
 import { globSync } from "node:fs"
 import { resolve } from "node:path"
 import { fileURLToPath } from "node:url"
-import { describe, expect, it } from "vitest"
+import { describe, expect, it } from "vite-plus/test"
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url))
 const NOVA_ROOT = resolve(__dirname, "../../..")

package/dist/chunks/dist-o8x0ip0z71xkr2oh.js

@@ -1,37 +0,0 @@
-"use client";
-import { n as O } from "./vendor-styling-eeiy57tyznmxsfky.js";
-var m = (n) => typeof n == "boolean" ? `${n}` : n === 0 ? "0" : n, y = O, j = (n, t) => (e) => {
-  var r;
-  if (t?.variants == null) return y(n, e?.class, e?.className);
-  const { variants: s, defaultVariants: d } = t, V = Object.keys(s).map((l) => {
-    const a = e?.[l], u = d?.[l];
-    if (a === null) return null;
-    const i = m(a) || m(u);
-    return s[l][i];
-  }), o = e && Object.entries(e).reduce((l, a) => {
-    let [u, i] = a;
-    return i === void 0 || (l[u] = i), l;
-  }, {});
-  return y(n, V, t == null || (r = t.compoundVariants) === null || r === void 0 ? void 0 : r.reduce((l, a) => {
-    let { class: u, className: i, ...N } = a;
-    return Object.entries(N).every((f) => {
-      let [c, v] = f;
-      return Array.isArray(v) ? v.includes({
-        ...d,
-        ...o
-      }[c]) : {
-        ...d,
-        ...o
-      }[c] === v;
-    }) ? [
-      ...l,
-      u,
-      i
-    ] : l;
-  }, []), e?.class, e?.className);
-};
-export {
-  j as t
-};
-
-//# sourceMappingURL=dist-o8x0ip0z71xkr2oh.js.map

package/dist/chunks/utils-kyb5nny4y41y7hd8.js

@@ -1,10 +0,0 @@
-"use client";
-import { n as e, t as n } from "./vendor-styling-eeiy57tyznmxsfky.js";
-function s(...t) {
-  return n(e(t));
-}
-export {
-  s as t
-};
-
-//# sourceMappingURL=utils-kyb5nny4y41y7hd8.js.map