@enya-learning/nova 0.4.3 → 0.6.0

package/dist/styles/nova.css

@@ -1,58 +1,225 @@
+@import "tailwindcss";
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/geist-mono";
 @import "./nova-binding.css";
 @import "./typography.css";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is([data-mode="dark"] *));
+@source "../../../../apps/**/*.{ts,tsx,astro}";
+@source "../**/*.{ts,tsx}";
 
 /*
- * Remaps shadcn CSS variables to nova tokens.
- * shadcn components (bg-primary, text-muted-foreground, etc.) continue
- * working without modification — they now reflect nova brand values.
+ * 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.
  */
-@layer base {
-  :root {
-    --background:           var(--color-nova-background);
-    --foreground:           var(--color-nova-foreground);
+@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));
 
-    --card:                 var(--color-nova-card);
-    --card-foreground:      var(--color-nova-card-foreground);
+  --color-accent: light-dark(var(--color-brand-500), var(--color-brand-400));
+  --color-accent-foreground: light-dark(
+    var(--color-white),
+    var(--color-brand-900)
+  );
 
-    --popover:              var(--color-nova-popover);
-    --popover-foreground:   var(--color-nova-popover-foreground);
+  --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)
+  );
 
-    --primary:              var(--color-nova-primary);
-    --primary-foreground:   var(--color-nova-primary-foreground);
+  --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)
+  );
 
-    --secondary:            var(--color-nova-secondary);
-    --secondary-foreground: var(--color-nova-secondary-foreground);
+  --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)
+  );
 
-    --muted:                var(--color-nova-muted);
-    --muted-foreground:     var(--color-nova-muted-foreground);
+  --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)
+  );
 
-    --accent:               var(--color-nova-accent);
-    --accent-foreground:    var(--color-nova-accent-foreground);
+  --color-border: light-dark(var(--color-grey-300), var(--color-grey-700));
+  --color-ring: light-dark(var(--color-brand-500), var(--color-brand-400));
 
-    --destructive:             var(--color-nova-destructive);
-    --destructive-foreground:  var(--color-nova-destructive-foreground);
+  --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));
 
-    --border: var(--color-nova-border);
-    --input:  var(--color-nova-input);
-    --ring:   var(--color-nova-ring);
+  --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)
+  );
 
-    --radius: 0.625rem;
+  --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)
+  );
+}
 
-    --chart-1: var(--color-nova-chart-1);
-    --chart-2: var(--color-nova-chart-2);
-    --chart-3: var(--color-nova-chart-3);
-    --chart-4: var(--color-nova-chart-4);
-    --chart-5: var(--color-nova-chart-5);
+/*
+ * 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 {
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --spacing-nova-4: var(--nova-space);
+  --spacing-nova-8: var(--nova-space-2x);
+  --spacing-nova-12: var(--nova-space-3x);
+  --spacing-nova-16: var(--nova-space-4x);
+  --spacing-nova-24: var(--nova-space-6x);
+  --spacing-nova-32: var(--nova-space-8x);
+  --spacing-nova-40: var(--nova-space-10x);
+  --spacing-nova-64: var(--nova-space-16x);
+  --spacing-nova-96: var(--nova-space-24x);
+  --spacing-nova-128: var(--nova-space-32x);
+  --font-sans: "Inter Variable", sans-serif;
+  --font-mono: "Geist Mono Variable", ui-monospace, monospace;
+  --font-heading: var(--font-sans);
+}
 
-    --sidebar:                    var(--color-nova-sidebar);
-    --sidebar-foreground:         var(--color-nova-sidebar-foreground);
-    --sidebar-primary:            var(--color-nova-sidebar-primary);
-    --sidebar-primary-foreground: var(--color-nova-sidebar-primary-foreground);
-    --sidebar-accent:             var(--color-nova-sidebar-accent);
-    --sidebar-accent-foreground:  var(--color-nova-sidebar-accent-foreground);
-    --sidebar-border:             var(--color-nova-sidebar-border);
-    --sidebar-ring:                var(--color-nova-sidebar-ring);
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-surface-1 text-foreground;
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
   }
 }
 
+/* Scan nova's built component and chunk JS files so all component class
+ * names (data-open:, group-aria-expanded:, etc.) are included in the
+ * consumer's Tailwind output without any additional @source config. */
+@source "../components/*.js";
+@source "../chunks/*.js";
+@source "../index.js";
+
+/* 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("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-foreground bg-surface-1 bg-surface-2 bg-surface-3 bg-accent text-accent-foreground border-border ring-ring");
+/* prettier-ignore */
+@source inline("bg-chart-1 bg-chart-2 bg-chart-3 bg-chart-4 bg-chart-5");
+/* prettier-ignore */
+@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-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,99 +1,41 @@
-/* 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. */
+   All classes work with Tailwind variants: md:text-label-16, hover:text-label-14, etc. */
 
-/* ─── Headings ─────────────────────────────────────────────────────────────── */
-
-@utility text-heading-72 {
-  font-size: 4.5rem;
-  line-height: 4.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-@utility text-heading-64 {
-  font-size: 4rem;
-  line-height: 4rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-@utility text-heading-56 {
-  font-size: 3.5rem;
-  line-height: 3.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-@utility text-heading-48 {
-  font-size: 3rem;
-  line-height: 3.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-@utility text-heading-40 {
-  font-size: 2.5rem;
-  line-height: 3rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-@utility text-heading-32 {
-  font-size: 2rem;
-  line-height: 2.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
+/* ─── Buttons ──────────────────────────────────────────────────────────────── */
 
-@utility text-heading-24 {
+@utility text-button-24 {
   font-size: 1.5rem;
-  line-height: 2rem;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-@utility text-heading-20 {
-  font-size: 1.25rem;
   line-height: 1.625;
-  letter-spacing: -0.02em;
-  font-weight: 600;
+  letter-spacing: -0.01em;
+  font-weight: 400;
 }
-
-@utility text-heading-16 {
-  font-size: 1rem;
+@utility text-button-20 {
+  font-size: 1.25rem;
   line-height: 1.5;
-  letter-spacing: -0.02em;
-  font-weight: 600;
-}
-
-@utility text-heading-14 {
-  font-size: 0.875rem;
-  line-height: 1.25;
-  font-weight: 600;
+  letter-spacing: -0.01em;
+  font-weight: 400;
 }
-
-/* ─── Buttons ──────────────────────────────────────────────────────────────── */
-
 @utility text-button-16 {
   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: -0.01em;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @utility text-button-14 {
   font-size: 0.875rem;
   line-height: 1.4286;
   letter-spacing: -0.01em;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @utility text-button-12 {
   font-size: 0.75rem;
   line-height: 1.3333;
   letter-spacing: 0;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 /* ─── Labels ───────────────────────────────────────────────────────────────── */
@@ -102,35 +44,35 @@
   font-size: 1.25rem;
   line-height: 1.4;
   letter-spacing: -0.01em;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @utility text-label-18 {
   font-size: 1.125rem;
   line-height: 1.3333;
   letter-spacing: -0.01em;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @utility text-label-16 {
   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: -0.01em;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @utility text-label-14 {
   font-size: 0.875rem;
   line-height: 1.4286;
   letter-spacing: -0.01em;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @utility text-label-14-mono {
   font-size: 0.875rem;
   line-height: 1.4286;
   letter-spacing: 0;
-  font-weight: 500;
+  font-weight: 400;
   font-family: var(--font-mono);
 }
 
@@ -138,14 +80,14 @@
   font-size: 0.8125rem;
   line-height: 1.2308;
   letter-spacing: 0;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @utility text-label-13-mono {
   font-size: 0.8125rem;
   line-height: 1.2308;
   letter-spacing: 0;
-  font-weight: 500;
+  font-weight: 400;
   font-family: var(--font-mono);
 }
 
@@ -153,63 +95,13 @@
   font-size: 0.75rem;
   line-height: 1.3333;
   letter-spacing: 0;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @utility text-label-12-mono {
   font-size: 0.75rem;
   line-height: 1.3333;
   letter-spacing: 0;
-  font-weight: 500;
-  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.4.3",
+  "version": "0.6.0",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -27,12 +27,12 @@
     "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"
   },
   "devDependencies": {
-    "@eslint/js": "^10",
     "@storybook/addon-a11y": "^10.4.2",
     "@storybook/addon-docs": "^10.4.2",
     "@storybook/addon-themes": "^10.4.2",
@@ -45,10 +45,7 @@
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/ui": "^4.1.8",
-    "eslint": "^10",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17",
+    "oxlint": "latest",
     "plop": "^4.0.0",
     "react-docgen-typescript": "^2.4.0",
     "shadcn": "^4.10.0",
@@ -56,7 +53,6 @@
     "tailwindcss": "^4",
     "tsx": "^4.22.4",
     "typescript": "~6",
-    "typescript-eslint": "^8",
     "vite": "^8.0.16",
     "vite-plugin-dts": "^5.0.2",
     "vitest": "^4.1.8"
@@ -68,11 +64,30 @@
     },
     "./styles/tailwind": "./dist/styles/nova.css",
     "./styles": "./dist/styles/nova.css",
-    "./globals.css": "./dist/styles/globals.css",
     "./components/button": {
       "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"
+    },
+    "./components/spinner": {
+      "types": "./dist/src/components/spinner/index.d.ts",
+      "default": "./dist/components/spinner.js"
+    },
     "./components/enya-logo": {
       "types": "./dist/src/components/enya-logo/index.d.ts",
       "default": "./dist/components/enya-logo.js"
@@ -90,6 +105,12 @@
       "components/button": [
         "./dist/src/components/button/index.d.ts"
       ],
+      "components/button-group": [
+        "./dist/src/components/button-group/index.d.ts"
+      ],
+      "components/spinner": [
+        "./dist/src/components/spinner/index.d.ts"
+      ],
       "components/enya-logo": [
         "./dist/src/components/enya-logo/index.d.ts"
       ],
@@ -109,7 +130,7 @@
     "build": "vite build --mode production && tsx scripts/css-build.ts",
     "dev": "vite build --watch --mode development",
     "clean": "rm -rf dist",
-    "lint": "eslint",
+    "lint": "oxlint --config oxlint.json src",
     "format": "prettier --write \"**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",

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.",
     },
   },