@enya-learning/nova 0.4.2 → 0.5.0

package/dist/src/components/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/src/components/button/button.d.ts

@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "accent" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "accent" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/item/item.d.ts

@@ -10,7 +10,7 @@ declare const itemVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "default" | "icon" | null | undefined;
+    variant?: "default" | "icon" | "image" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/tabs/tabs.d.ts

@@ -2,7 +2,7 @@ import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 import { VariantProps } from 'class-variance-authority';
 declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "line" | "default" | null | undefined;
+    variant?: "default" | "line" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
 declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -1,57 +1,5 @@
-export * from './components/accordion';
-export * from './components/alert';
-export * from './components/alert-dialog';
-export * from './components/aspect-ratio';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/button-group';
-export * from './components/calendar';
-export * from './components/card';
-export * from './components/carousel';
-export * from './components/chart';
-export * from './components/checkbox';
-export * from './components/collapsible';
-export * from './components/combobox';
-export * from './components/command';
-export * from './components/context-menu';
-export * from './components/dialog';
-export * from './components/direction';
-export * from './components/drawer';
-export * from './components/dropdown-menu';
-export * from './components/empty';
-export * from './components/enya-logo';
-export * from './components/field';
-export * from './components/hover-card';
-export * from './components/input';
-export * from './components/input-group';
-export * from './components/input-otp';
-export * from './components/item';
-export * from './components/kbd';
-export * from './components/label';
-export * from './components/menubar';
-export * from './components/native-select';
-export * from './components/navigation-menu';
-export * from './components/pagination';
-export * from './components/popover';
-export * from './components/progress';
-export * from './components/radio-group';
-export * from './components/resizable';
-export * from './components/scroll-area';
-export * from './components/select';
-export * from './components/separator';
-export * from './components/sheet';
-export * from './components/sidebar';
-export * from './components/skeleton';
-export * from './components/slider';
-export * from './components/sonner';
 export * from './components/spinner';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/textarea';
-export * from './components/toggle';
-export * from './components/toggle-group';
-export * from './components/tooltip';
+export * from './components/enya-logo';
 export * from './utils';

package/dist/styles/nova-binding.css

@@ -19,6 +19,19 @@
   --color-nova-zinc-900: oklch(21% 0.006 285.885);
   --color-nova-zinc-950: oklch(14.1% 0.005 285.823);
 
+  /* Grey — Nova's neutral palette; aliases zinc so updates propagate automatically. Prefer Greys for Neutrals */
+  --color-nova-grey-50: var(--color-nova-zinc-50);
+  --color-nova-grey-100: var(--color-nova-zinc-100);
+  --color-nova-grey-200: var(--color-nova-zinc-200);
+  --color-nova-grey-300: var(--color-nova-zinc-300);
+  --color-nova-grey-400: var(--color-nova-zinc-400);
+  --color-nova-grey-500: var(--color-nova-zinc-500);
+  --color-nova-grey-600: var(--color-nova-zinc-600);
+  --color-nova-grey-700: var(--color-nova-zinc-700);
+  --color-nova-grey-800: var(--color-nova-zinc-800);
+  --color-nova-grey-900: var(--color-nova-zinc-900);
+  --color-nova-grey-950: var(--color-nova-zinc-950);
+
   --color-nova-neutral-50: oklch(98.5% 0 0);
   --color-nova-neutral-100: oklch(97% 0 0);
   --color-nova-neutral-200: oklch(92.2% 0 0);
@@ -259,6 +272,77 @@
   --color-nova-brand-800: var(--color-nova-blue-800);
   --color-nova-brand-900: var(--color-nova-blue-900);
   --color-nova-brand-950: var(--color-nova-blue-950);
+
+  /* Enya Graphic and Illustration palette */
+  --colour-enya-black: #151515;
+  --colour-enya-white: #f5f5f5;
+
+  --colour-enya-yellow: #ffbb00;
+  --colour-enya-yellow-100: #fff1cc;
+  --colour-enya-yellow-200: #ffe8aa;
+  --colour-enya-yellow-300: #ffdd80;
+  --colour-enya-yellow-400: #ffd255;
+  --colour-enya-yellow-900: #332500;
+
+  --colour-enya-green: #00c01e;
+  --colour-enya-green-100: #ccf2d2;
+  --colour-enya-green-200: #aaeab4;
+  --colour-enya-green-300: #80e08f;
+  --colour-enya-green-400: #55d569;
+  --colour-enya-green-900: #002606;
+
+  --colour-enya-orange: #ff7a00;
+  --colour-enya-orange-100: #ffe5ce;
+  --colour-enya-orange-200: #ffd4ae;
+  --colour-enya-orange-300: #ffbf85;
+  --colour-enya-orange-400: #ffaa5c;
+  --colour-enya-orange-900: #331902;
+
+  --colour-enya-blue: #012afc;
+  --colour-enya-blue-100: #ccd4fe;
+  --colour-enya-blue-200: #aab8fe;
+  --colour-enya-blue-300: #8095fe;
+  --colour-enya-blue-400: #5671fd;
+  --colour-enya-blue-900: #000832;
+
+  --colour-enya-purple: #6a00df;
+  --colour-enya-purple-100: #e1ccf9;
+  --colour-enya-purple-200: #cdaaf4;
+  --colour-enya-purple-300: #b580ef;
+  --colour-enya-purple-400: #9c55ea;
+  --colour-enya-purple-900: #15002d;
+
+  --colour-enya-pink: #ff709e;
+  --colour-enya-pink-100: #ffe2ec;
+  --colour-enya-pink-200: #ffcfdf;
+  --colour-enya-pink-300: #ffb8cf;
+  --colour-enya-pink-400: #ffa0be;
+  --colour-enya-pink-900: #331620;
+
+  --colour-enya-grey-100: #e7e6e6;
+  --colour-enya-grey-200: #d2cfcf;
+  --colour-enya-grey-300: #b2aeae;
+  --colour-enya-grey-400: #8b8586;
+  --colour-enya-grey-500: #706a6b;
+  --colour-enya-grey-600: #5f5b5b;
+  --colour-enya-grey-700: #514d4d;
+  --colour-enya-grey-800: #464445;
+  --colour-enya-grey-900: #3d3c3c;
+  --colour-enya-grey-950: #1a1919;
+
+  --nova-space: 4px;
+  --nova-space-2x: 8px;
+  --nova-space-3x: 12px;
+  --nova-space-4x: 16px;
+  --nova-space-6x: 24px;
+  --nova-space-8x: 32px;
+  --nova-space-10x: 40px;
+  --nova-space-16x: 64px;
+  --nova-space-24x: 96px;
+  --nova-space-32x: 128px;
+  --nova-space-sm: var(--nova-space-2x);
+  --nova-space-md: var(--nova-space-4x);
+  --nova-space-lg: var(--nova-space-8x);
 }
 
 @theme {
@@ -268,6 +352,13 @@
 
   --ease-bounce: cubic-bezier(0.2, 0, 0, 1.5);
   --default-transition-duration: 100ms;
+
+  --shadow-border:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.04);
+  --shadow-border-hover:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.06);
 }
 
 @layer base {
@@ -276,6 +367,14 @@
   }
   [data-mode="dark"] {
     color-scheme: dark;
+    --shadow-border:
+      0px 0px 0px 1px rgba(255, 255, 255, 0.06),
+      0px 1px 2px -1px rgba(255, 255, 255, 0.06),
+      0px 2px 4px 0px rgba(255, 255, 255, 0.04);
+    --shadow-border-hover:
+      0px 0px 0px 1px rgba(255, 255, 255, 0.08),
+      0px 1px 2px -1px rgba(255, 255, 255, 0.08),
+      0px 2px 4px 0px rgba(255, 255, 255, 0.06);
   }
 }
 
@@ -287,4 +386,7 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+  .shadow {
+    box-shadow: var(--shadow-border);
+  }
 }

package/dist/styles/nova.css

@@ -1,58 +1,116 @@
+@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.
+ * 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".
  */
-@layer base {
-  :root {
-    --background:           var(--color-nova-background);
-    --foreground:           var(--color-nova-foreground);
-
-    --card:                 var(--color-nova-card);
-    --card-foreground:      var(--color-nova-card-foreground);
-
-    --popover:              var(--color-nova-popover);
-    --popover-foreground:   var(--color-nova-popover-foreground);
-
-    --primary:              var(--color-nova-primary);
-    --primary-foreground:   var(--color-nova-primary-foreground);
-
-    --secondary:            var(--color-nova-secondary);
-    --secondary-foreground: var(--color-nova-secondary-foreground);
-
-    --muted:                var(--color-nova-muted);
-    --muted-foreground:     var(--color-nova-muted-foreground);
-
-    --accent:               var(--color-nova-accent);
-    --accent-foreground:    var(--color-nova-accent-foreground);
-
-    --destructive:             var(--color-nova-destructive);
-    --destructive-foreground:  var(--color-nova-destructive-foreground);
-
-    --border: var(--color-nova-border);
-    --input:  var(--color-nova-input);
-    --ring:   var(--color-nova-ring);
-
-    --radius: 0.625rem;
-
-    --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);
+@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;
+  --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-background 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-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");
+/* 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");
+/* prettier-ignore */
+@source inline("bg-nova-chart-1 bg-nova-chart-2 bg-nova-chart-3 bg-nova-chart-4 bg-nova-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");
+/* 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");
+
 /* Component-specific styles added here as components are built */

package/dist/styles/theme-nova.css

@@ -1,34 +1,21 @@
 @theme {
-  --color-nova-background: light-dark(
+  --color-nova-surface-1: light-dark(
     var(--color-nova-white),
     var(--color-nova-black)
   );
-
-  --color-nova-primary: light-dark(
-    var(--color-nova-zinc-900),
-    var(--color-nova-zinc-100)
-  );
-  --color-nova-primary-foreground: light-dark(
-    var(--color-nova-zinc-100),
-    var(--color-nova-zinc-900)
+  --color-nova-surface-2: light-dark(
+    var(--color-nova-grey-100),
+    var(--color-nova-grey-900)
   );
 
-  --color-nova-secondary: light-dark(
-    var(--color-nova-zinc-100),
-    var(--color-nova-zinc-800)
-  );
-  --color-nova-secondary-foreground: light-dark(
-    var(--color-nova-zinc-900),
-    var(--color-nova-zinc-100)
+  --color-nova-surface-3: light-dark(
+    var(--color-nova-grey-200),
+    var(--color-nova-grey-800)
   );
 
-  --color-nova-muted: light-dark(
-    var(--color-nova-zinc-50),
-    var(--color-nova-zinc-800)
-  );
-  --color-nova-muted-foreground: light-dark(
-    var(--color-nova-zinc-500),
-    var(--color-nova-zinc-400)
+  --color-nova-foreground: light-dark(
+    var(--color-nova-grey-900),
+    var(--color-nova-grey-100)
   );
 
   --color-nova-accent: light-dark(
@@ -36,65 +23,41 @@
     var(--color-nova-brand-400)
   );
   --color-nova-accent-foreground: light-dark(
-    var(--color-nova-zinc-100),
-    var(--color-nova-zinc-900)
-  );
-
-  /*DO NOT REFERENCE AS IT MIGHT BE DELETED IN THE FUTURE*/
-  --color-nova-foreground: light-dark(
-    var(--color-nova-zinc-900),
-    var(--color-nova-zinc-100)
-  );
-
-  --color-nova-card: light-dark(
-    var(--color-nova-zinc-50),
-    var(--color-nova-zinc-900)
-  );
-  --color-nova-card-foreground: light-dark(
-    var(--color-nova-zinc-900),
-    var(--color-nova-zinc-100)
-  );
-
-  --color-nova-popover: light-dark(
-    var(--color-nova-zinc-50),
-    var(--color-nova-zinc-900)
-  );
-  --color-nova-popover-foreground: light-dark(
-    var(--color-nova-zinc-900),
-    var(--color-nova-zinc-100)
+    var(--color-nova-white),
+    var(--color-nova-brand-900)
   );
 
   --color-nova-info: light-dark(
-    var(--color-nova-blue-600),
+    var(--color-nova-blue-500),
     var(--color-nova-blue-400)
   );
   --color-nova-info-foreground: light-dark(
-    var(--color-nova-zinc-100),
-    var(--color-nova-zinc-900)
+    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-700),
+    var(--color-nova-blue-500),
     var(--color-nova-blue-300)
   );
 
   --color-nova-success: light-dark(
-    var(--color-nova-emerald-600),
+    var(--color-nova-emerald-500),
     var(--color-nova-emerald-400)
   );
   --color-nova-success-foreground: light-dark(
-    var(--color-nova-zinc-100),
-    var(--color-nova-zinc-900)
+    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-700),
+    var(--color-nova-emerald-500),
     var(--color-nova-emerald-300)
   );
 
@@ -103,15 +66,15 @@
     var(--color-nova-amber-400)
   );
   --color-nova-warning-foreground: light-dark(
-    var(--color-nova-zinc-900),
-    var(--color-nova-zinc-900)
+    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-700),
+    var(--color-nova-amber-500),
     var(--color-nova-amber-300)
   );
 
@@ -120,25 +83,21 @@
     var(--color-nova-red-400)
   );
   --color-nova-destructive-foreground: light-dark(
-    var(--color-nova-zinc-100),
-    var(--color-nova-zinc-900)
+    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-700),
+    var(--color-nova-red-500),
     var(--color-nova-red-300)
   );
 
   --color-nova-border: light-dark(
-    var(--color-nova-zinc-200),
-    var(--color-nova-zinc-800)
-  );
-  --color-nova-input: light-dark(
-    var(--color-nova-zinc-300),
-    var(--color-nova-zinc-700)
+    var(--color-nova-grey-300),
+    var(--color-nova-grey-700)
   );
   --color-nova-ring: light-dark(
     var(--color-nova-brand-500),
@@ -167,35 +126,72 @@
   );
 
   --color-nova-sidebar: light-dark(
-    var(--color-nova-zinc-50),
-    var(--color-nova-zinc-950)
+    var(--color-nova-grey-50),
+    var(--color-nova-grey-950)
   );
   --color-nova-sidebar-foreground: light-dark(
-    var(--color-nova-zinc-900),
-    var(--color-nova-zinc-100)
+    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-zinc-100),
-    var(--color-nova-zinc-900)
+    var(--color-nova-grey-100),
+    var(--color-nova-grey-900)
   );
   --color-nova-sidebar-accent: light-dark(
-    var(--color-nova-zinc-100),
-    var(--color-nova-zinc-800)
+    var(--color-nova-grey-100),
+    var(--color-nova-grey-800)
   );
   --color-nova-sidebar-accent-foreground: light-dark(
-    var(--color-nova-zinc-900),
-    var(--color-nova-zinc-100)
+    var(--color-nova-grey-900),
+    var(--color-nova-grey-100)
   );
   --color-nova-sidebar-border: light-dark(
-    var(--color-nova-zinc-200),
-    var(--color-nova-zinc-800)
+    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)
+  );
 }