@enya-learning/nova 0.5.0 → 0.6.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enya-learning/nova",
-  "version": "0.5.0",
+  "version": "0.6.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"
   },
@@ -67,6 +68,18 @@
       "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/button-group": {
       "types": "./dist/src/components/button-group/index.d.ts",
       "default": "./dist/components/button-group.js"

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/dist/styles/theme-nova.css

@@ -1,197 +0,0 @@
-@theme {
-  --color-nova-surface-1: light-dark(
-    var(--color-nova-white),
-    var(--color-nova-black)
-  );
-  --color-nova-surface-2: light-dark(
-    var(--color-nova-grey-100),
-    var(--color-nova-grey-900)
-  );
-
-  --color-nova-surface-3: light-dark(
-    var(--color-nova-grey-200),
-    var(--color-nova-grey-800)
-  );
-
-  --color-nova-foreground: light-dark(
-    var(--color-nova-grey-900),
-    var(--color-nova-grey-100)
-  );
-
-  --color-nova-accent: light-dark(
-    var(--color-nova-brand-500),
-    var(--color-nova-brand-400)
-  );
-  --color-nova-accent-foreground: light-dark(
-    var(--color-nova-white),
-    var(--color-nova-brand-900)
-  );
-
-  --color-nova-info: light-dark(
-    var(--color-nova-blue-500),
-    var(--color-nova-blue-400)
-  );
-  --color-nova-info-foreground: light-dark(
-    var(--color-nova-white),
-    var(--color-nova-grey-900)
-  );
-  --color-nova-info-soft: light-dark(
-    var(--color-nova-blue-50),
-    var(--color-nova-blue-950)
-  );
-  --color-nova-info-soft-foreground: light-dark(
-    var(--color-nova-blue-500),
-    var(--color-nova-blue-300)
-  );
-
-  --color-nova-success: light-dark(
-    var(--color-nova-emerald-500),
-    var(--color-nova-emerald-400)
-  );
-  --color-nova-success-foreground: light-dark(
-    var(--color-nova-emerald-50),
-    var(--color-nova-emerald-900)
-  );
-  --color-nova-success-soft: light-dark(
-    var(--color-nova-emerald-50),
-    var(--color-nova-emerald-950)
-  );
-  --color-nova-success-soft-foreground: light-dark(
-    var(--color-nova-emerald-500),
-    var(--color-nova-emerald-300)
-  );
-
-  --color-nova-warning: light-dark(
-    var(--color-nova-amber-500),
-    var(--color-nova-amber-400)
-  );
-  --color-nova-warning-foreground: light-dark(
-    var(--color-nova-white),
-    var(--color-nova-amber-900)
-  );
-  --color-nova-warning-soft: light-dark(
-    var(--color-nova-amber-50),
-    var(--color-nova-amber-950)
-  );
-  --color-nova-warning-soft-foreground: light-dark(
-    var(--color-nova-amber-500),
-    var(--color-nova-amber-300)
-  );
-
-  --color-nova-destructive: light-dark(
-    var(--color-nova-red-600),
-    var(--color-nova-red-400)
-  );
-  --color-nova-destructive-foreground: light-dark(
-    var(--color-nova-white),
-    var(--color-nova-red-900)
-  );
-  --color-nova-destructive-soft: light-dark(
-    var(--color-nova-red-50),
-    var(--color-nova-red-950)
-  );
-  --color-nova-destructive-soft-foreground: light-dark(
-    var(--color-nova-red-500),
-    var(--color-nova-red-300)
-  );
-
-  --color-nova-border: light-dark(
-    var(--color-nova-grey-300),
-    var(--color-nova-grey-700)
-  );
-  --color-nova-ring: light-dark(
-    var(--color-nova-brand-500),
-    var(--color-nova-brand-400)
-  );
-
-  --color-nova-chart-1: light-dark(
-    var(--color-nova-brand-600),
-    var(--color-nova-brand-400)
-  );
-  --color-nova-chart-2: light-dark(
-    var(--color-nova-emerald-800),
-    var(--color-nova-emerald-200)
-  );
-  --color-nova-chart-3: light-dark(
-    var(--color-nova-yellow-600),
-    var(--color-nova-yellow-400)
-  );
-  --color-nova-chart-4: light-dark(
-    var(--color-nova-blue-800),
-    var(--color-nova-blue-400)
-  );
-  --color-nova-chart-5: light-dark(
-    var(--color-nova-red-600),
-    var(--color-nova-red-400)
-  );
-
-  --color-nova-sidebar: light-dark(
-    var(--color-nova-grey-50),
-    var(--color-nova-grey-950)
-  );
-  --color-nova-sidebar-foreground: light-dark(
-    var(--color-nova-grey-900),
-    var(--color-nova-grey-100)
-  );
-  --color-nova-sidebar-primary: light-dark(
-    var(--color-nova-brand-600),
-    var(--color-nova-brand-400)
-  );
-  --color-nova-sidebar-primary-foreground: light-dark(
-    var(--color-nova-grey-100),
-    var(--color-nova-grey-900)
-  );
-  --color-nova-sidebar-accent: light-dark(
-    var(--color-nova-grey-100),
-    var(--color-nova-grey-800)
-  );
-  --color-nova-sidebar-accent-foreground: light-dark(
-    var(--color-nova-grey-900),
-    var(--color-nova-grey-100)
-  );
-  --color-nova-sidebar-border: light-dark(
-    var(--color-nova-grey-200),
-    var(--color-nova-grey-800)
-  );
-  --color-nova-sidebar-ring: light-dark(
-    var(--color-nova-brand-600),
-    var(--color-nova-brand-400)
-  );
-
-  --color-nova-primary: light-dark(
-    var(--color-nova-grey-900),
-    var(--color-nova-grey-100)
-  );
-  --color-nova-primary-foreground: light-dark(
-    var(--color-nova-grey-50),
-    var(--color-nova-grey-900)
-  );
-
-  --color-nova-surface-muted: light-dark(
-    var(--color-nova-grey-50),
-    var(--color-nova-grey-950)
-  );
-  --color-nova-muted-foreground: light-dark(
-    var(--color-nova-grey-500),
-    var(--color-nova-grey-400)
-  );
-
-  /*------ TO BE REMOVED -----*/
-
-  --color-nova-card: light-dark(
-    var(--color-nova-grey-50),
-    var(--color-nova-grey-900)
-  );
-  --color-nova-card-foreground: light-dark(
-    var(--color-nova-grey-900),
-    var(--color-nova-grey-100)
-  );
-  --color-nova-popover: light-dark(
-    var(--color-nova-grey-50),
-    var(--color-nova-grey-900)
-  );
-  --color-nova-popover-foreground: light-dark(
-    var(--color-nova-grey-900),
-    var(--color-nova-grey-100)
-  );
-}