@cratis/scene.primereact 1.1.0 → 3.0.0

package/theme/themePresets.ts

@@ -2,534 +2,579 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { Theme } from '@cratis/scene.model';
+import { PrimeReactThemeFamily } from './PrimeReactThemeFamily';
 
 /**
- * One PrimeReact theme, minus everything that is identical for all of them.
+ * One PrimeReact theme, minus everything that is identical for all of them, plus the two facts a v11
+ * theme needs that a v10 theme did not: which `@primeuix/themes` preset family it is built on, and which
+ * primitive color ramp is bound to the preset's primary scale.
  *
  * Attribution and compatibility are deliberately *not* here: they are added once, for every preset, in
- * `primeReactThemes`. Every one of these themes was made by PrimeTek and none of them by us, so crediting
- * them one entry at a time would make it possible to add a twenty-sixth and forget - and a dropped
- * credit is not the kind of mistake a code review reliably catches.
+ * `primeReactThemes`. Every one of these themes is PrimeTek's design work and none of them is ours, so
+ * crediting them one entry at a time would make it possible to add a twenty-fifth and forget - and a
+ * dropped credit is not the kind of mistake a code review reliably catches.
  */
-export type ThemePreset = Omit<Theme, 'compatibleWith' | 'author' | 'authorUrl' | 'license'>;
+export type ThemePreset = Omit<Theme, 'compatibleWith' | 'author' | 'authorUrl' | 'license'> & {
+    /**
+     * The `@primeuix/themes` preset family this theme applies through `PrimeReactProvider`.
+     */
+    family: PrimeReactThemeFamily;
+
+    /**
+     * The name of the primitive color ramp bound to the preset's `primary` scale - the accent the whole
+     * theme is tinted by.
+     */
+    primaryColor: string;
+};
 
 /**
- * Every free PrimeReact 10 theme this package exposes, and the Scene tokens each one stands for.
+ * Every theme this package ships, and the Scene tokens each one stands for.
  *
- * This is data, not logic. Each `name` is the folder the theme lives in under
- * `primereact/resources/themes`, which is what makes `primeReactThemeStylesheet` a direct lookup rather
- * than a table that could fall out of step with the files on disk.
+ * This is data, not logic, but unlike the PrimeReact 10 catalog it is *derived* data. A v10 theme was a
+ * compiled stylesheet whose `:root` block could be read with a text editor, so the token values were
+ * transcribed by hand. A v11 theme is a JavaScript preset whose values are token *references* -
+ * `{emerald.500}`, `light-dark({surface.0}, {surface.900})` - resolved by `@primeuix/styled` at runtime.
+ * Transcribing those by hand would mean re-implementing the resolver in one's head, once per theme.
  *
- * The token values are read verbatim out of each theme's own `theme.css` `:root` block, so a Scene token
- * always agrees with what the PrimeReact stylesheet actually renders. That fidelity is the point of the
- * bridge, and it is kept even where a theme's own values are odd - `lara-light-teal` really does ship
- * the same color for `--highlight-bg` and `--highlight-text-color`, and mirroring it keeps the token
- * layer honest about what the component skin will do.
+ * So these values were generated: each preset was loaded, its `primary` scale bound to the chosen color
+ * ramp, and the thirteen Scene tokens resolved through the same `light-dark()` and `{path}` rules
+ * `@primeuix/styled` applies. What is committed here is the *output* of that resolution, so the catalog
+ * stays plain data that a theme picker can read without booting a theme engine - while still agreeing,
+ * value for value, with what the preset actually renders.
  *
- * There is exactly one deliberate deviation: PrimeReact 10.9.8 ships `viva-dark` with an unresolved SCSS
- * expression, `rgba($primaryColor, 0.08)`, for `--surface-hover`. That is not valid CSS and resolves to
- * nothing at all, so it cannot be mirrored; the intended value - the theme's primary color at 8% - is
- * used instead.
+ * The catalog is not a like-for-like port of the v10 one. PrimeReact 11 ships four preset families -
+ * Aura, Lara, Nora and Material - and the v10 themes that had no counterpart among them (`saga`,
+ * `vela`, `arya`, `bootstrap4`, `soho`, `viva`, `nano`, `mira`, `fluent-light`, `tailwind-light`) are
+ * not carried over. Renaming a Lara onto `soho-dark` would have kept the catalog's length at the cost
+ * of its honesty.
  */
 export const themePresets: ThemePreset[] = [
     {
-        name: 'lara-light-blue',
-        description: 'The PrimeReact default: a clean, roomy light theme on a blue accent.',
+        name: 'aura-light-blue',
+        description: 'Aura, the flagship PrimeReact 11 design language, in light on a blue accent.',
+        family: PrimeReactThemeFamily.Aura,
+        primaryColor: 'blue',
         isDark: false,
         tokens: {
             'primary.color': '#3b82f6',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#f9fafb',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#dfe7ef',
-            'surface.hover': '#f6f9fc',
+            'surface.border': '#e2e8f0',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#4b5563',
-            'text.mutedColor': '#6b7280',
+            'text.color': '#334155',
+            'text.mutedColor': '#64748b',
             'highlight.background': '#eff6ff',
             'highlight.color': '#1d4ed8',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.2rem #bfdbfe',
+            'focus.ring': 'none',
         },
     },
     {
-        name: 'lara-dark-blue',
-        description: 'The Lara family in dark, on a blue accent.',
+        name: 'aura-dark-blue',
+        description: 'Aura, the flagship PrimeReact 11 design language, in dark on a blue accent.',
+        family: PrimeReactThemeFamily.Aura,
+        primaryColor: 'blue',
         isDark: true,
         tokens: {
             'primary.color': '#60a5fa',
-            'primary.contrastColor': '#030712',
-            'surface.background': '#111827',
-            'surface.card': '#1f2937',
-            'surface.border': 'rgba(255, 255, 255, 0.1)',
-            'surface.hover': 'rgba(255, 255, 255, 0.03)',
-            'surface.overlay': '#1f2937',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(96, 165, 250, 0.16)',
-            'highlight.color': 'rgba(255, 255, 255, 0.87)',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #60a5fa, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.2rem rgba(96, 165, 250, 0.2)',
+            'focus.ring': 'none',
         },
     },
     {
-        name: 'lara-light-indigo',
-        description: 'Lara light with an indigo accent.',
+        name: 'aura-light-indigo',
+        description: 'Aura, the flagship PrimeReact 11 design language, in light on an indigo accent.',
+        family: PrimeReactThemeFamily.Aura,
+        primaryColor: 'indigo',
         isDark: false,
         tokens: {
             'primary.color': '#6366f1',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#f9fafb',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#dfe7ef',
-            'surface.hover': '#f6f9fc',
+            'surface.border': '#e2e8f0',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#4b5563',
-            'text.mutedColor': '#6b7280',
+            'text.color': '#334155',
+            'text.mutedColor': '#64748b',
             'highlight.background': '#eef2ff',
             'highlight.color': '#4338ca',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.2rem #c7d2fe',
+            'focus.ring': 'none',
         },
     },
     {
-        name: 'lara-dark-indigo',
-        description: 'Lara dark with an indigo accent.',
+        name: 'aura-dark-indigo',
+        description: 'Aura, the flagship PrimeReact 11 design language, in dark on an indigo accent.',
+        family: PrimeReactThemeFamily.Aura,
+        primaryColor: 'indigo',
         isDark: true,
         tokens: {
             'primary.color': '#818cf8',
-            'primary.contrastColor': '#030712',
-            'surface.background': '#111827',
-            'surface.card': '#1f2937',
-            'surface.border': 'rgba(255, 255, 255, 0.1)',
-            'surface.hover': 'rgba(255, 255, 255, 0.03)',
-            'surface.overlay': '#1f2937',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(129, 140, 248, 0.16)',
-            'highlight.color': 'rgba(255, 255, 255, 0.87)',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #818cf8, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.2rem rgba(129, 140, 248, 0.2)',
+            'focus.ring': 'none',
         },
     },
     {
-        name: 'lara-light-purple',
-        description: 'Lara light with a purple accent.',
+        name: 'aura-light-purple',
+        description: 'Aura, the flagship PrimeReact 11 design language, in light on a purple accent.',
+        family: PrimeReactThemeFamily.Aura,
+        primaryColor: 'purple',
         isDark: false,
         tokens: {
-            'primary.color': '#8b5cf6',
+            'primary.color': '#a855f7',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#f9fafb',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#dfe7ef',
-            'surface.hover': '#f6f9fc',
+            'surface.border': '#e2e8f0',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#4b5563',
-            'text.mutedColor': '#6b7280',
-            'highlight.background': '#f5f3ff',
-            'highlight.color': '#6d28d9',
+            'text.color': '#334155',
+            'text.mutedColor': '#64748b',
+            'highlight.background': '#faf5ff',
+            'highlight.color': '#7e22ce',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.2rem #ddd6fe',
+            'focus.ring': 'none',
         },
     },
     {
-        name: 'lara-dark-purple',
-        description: 'Lara dark with a purple accent.',
+        name: 'aura-dark-purple',
+        description: 'Aura, the flagship PrimeReact 11 design language, in dark on a purple accent.',
+        family: PrimeReactThemeFamily.Aura,
+        primaryColor: 'purple',
         isDark: true,
         tokens: {
-            'primary.color': '#a78bfa',
-            'primary.contrastColor': '#030712',
-            'surface.background': '#111827',
-            'surface.card': '#1f2937',
-            'surface.border': 'rgba(255, 255, 255, 0.1)',
-            'surface.hover': 'rgba(255, 255, 255, 0.03)',
-            'surface.overlay': '#1f2937',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(167, 139, 250, 0.16)',
-            'highlight.color': 'rgba(255, 255, 255, 0.87)',
+            'primary.color': '#c084fc',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #c084fc, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.2rem rgba(167, 139, 250, 0.2)',
+            'focus.ring': 'none',
         },
     },
     {
-        name: 'lara-light-teal',
-        description: 'Lara light with a teal accent.',
+        name: 'aura-light-teal',
+        description: 'Aura, the flagship PrimeReact 11 design language, in light on a teal accent.',
+        family: PrimeReactThemeFamily.Aura,
+        primaryColor: 'teal',
         isDark: false,
         tokens: {
             'primary.color': '#14b8a6',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#f9fafb',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#dfe7ef',
-            'surface.hover': '#f6f9fc',
+            'surface.border': '#e2e8f0',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#4b5563',
-            'text.mutedColor': '#6b7280',
-            'highlight.background': '#0f766e',
+            'text.color': '#334155',
+            'text.mutedColor': '#64748b',
+            'highlight.background': '#f0fdfa',
             'highlight.color': '#0f766e',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.2rem #99f6e4',
+            'focus.ring': 'none',
         },
     },
     {
-        name: 'lara-dark-teal',
-        description: 'Lara dark with a teal accent.',
+        name: 'aura-dark-teal',
+        description: 'Aura, the flagship PrimeReact 11 design language, in dark on a teal accent.',
+        family: PrimeReactThemeFamily.Aura,
+        primaryColor: 'teal',
         isDark: true,
         tokens: {
             'primary.color': '#2dd4bf',
-            'primary.contrastColor': '#030712',
-            'surface.background': '#111827',
-            'surface.card': '#1f2937',
-            'surface.border': 'rgba(255, 255, 255, 0.1)',
-            'surface.hover': 'rgba(255, 255, 255, 0.03)',
-            'surface.overlay': '#1f2937',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(45, 212, 191, 0.16)',
-            'highlight.color': 'rgba(255, 255, 255, 0.87)',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #2dd4bf, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.2rem rgba(45, 212, 191, 0.2)',
+            'focus.ring': 'none',
         },
     },
     {
-        name: 'saga-blue',
-        description: 'PrimeTek\'s earlier light theme: tighter spacing and smaller radii than Lara.',
+        name: 'lara-light-blue',
+        description: 'Lara, the roomy family Scene shipped on PrimeReact 10, in light on a blue accent.',
+        family: PrimeReactThemeFamily.Lara,
+        primaryColor: 'blue',
         isDark: false,
         tokens: {
-            'primary.color': '#2196f3',
+            'primary.color': '#3b82f6',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#f8f9fa',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#dee2e6',
-            'surface.hover': '#e9ecef',
+            'surface.border': '#e2e8f0',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#495057',
-            'text.mutedColor': '#6c757d',
-            'highlight.background': '#e3f2fd',
-            'highlight.color': '#495057',
-            'content.borderRadius': '3px',
-            'focus.ring': '0 0 0 0.2rem #a6d5fa',
-        },
-    },
-    {
-        name: 'vela-blue',
-        description: 'Saga\'s dark counterpart, on a desaturated blue-grey ground.',
-        isDark: true,
-        tokens: {
-            'primary.color': '#64b5f6',
-            'primary.contrastColor': '#212529',
-            'surface.background': '#17212f',
-            'surface.card': '#1f2d40',
-            'surface.border': '#304562',
-            'surface.hover': 'rgba(255, 255, 255, 0.03)',
-            'surface.overlay': '#1f2d40',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(100, 181, 246, 0.16)',
-            'highlight.color': 'rgba(255, 255, 255, 0.87)',
-            'content.borderRadius': '3px',
-            'focus.ring': '0 0 0 1px #93cbf9',
+            'text.color': '#334155',
+            'text.mutedColor': '#64748b',
+            'highlight.background': '#eff6ff',
+            'highlight.color': '#1d4ed8',
+            'content.borderRadius': '6px',
+            'focus.ring': '0 0 0 0.2rem #bfdbfe',
         },
     },
     {
-        name: 'arya-blue',
-        description: 'Saga\'s near-black dark counterpart, for high-contrast dark surfaces.',
+        name: 'lara-dark-blue',
+        description: 'Lara, the roomy family Scene shipped on PrimeReact 10, in dark on a blue accent.',
+        family: PrimeReactThemeFamily.Lara,
+        primaryColor: 'blue',
         isDark: true,
         tokens: {
-            'primary.color': '#64b5f6',
-            'primary.contrastColor': '#212529',
-            'surface.background': '#121212',
-            'surface.card': '#1e1e1e',
-            'surface.border': '#383838',
-            'surface.hover': 'rgba(255, 255, 255, 0.03)',
-            'surface.overlay': '#1e1e1e',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(100, 181, 246, 0.16)',
-            'highlight.color': 'rgba(255, 255, 255, 0.87)',
-            'content.borderRadius': '3px',
-            'focus.ring': '0 0 0 1px #93cbf9',
+            'primary.color': '#60a5fa',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #60a5fa, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
+            'content.borderRadius': '6px',
+            'focus.ring': '0 0 0 0.2rem color-mix(in srgb, #60a5fa, transparent 80%)',
         },
     },
     {
-        name: 'bootstrap4-light-blue',
-        description: 'PrimeTek\'s interpretation of the Bootstrap 4 look, in light.',
+        name: 'lara-light-indigo',
+        description: 'Lara, the roomy family Scene shipped on PrimeReact 10, in light on an indigo accent.',
+        family: PrimeReactThemeFamily.Lara,
+        primaryColor: 'indigo',
         isDark: false,
         tokens: {
-            'primary.color': '#007bff',
+            'primary.color': '#6366f1',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#efefef',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#dee2e6',
-            'surface.hover': '#e9ecef',
+            'surface.border': '#e2e8f0',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#212529',
-            'text.mutedColor': '#6c757d',
-            'highlight.background': '#007bff',
-            'highlight.color': '#ffffff',
-            'content.borderRadius': '4px',
-            'focus.ring': '0 0 0 0.2rem rgba(38, 143, 255, 0.5)',
+            'text.color': '#334155',
+            'text.mutedColor': '#64748b',
+            'highlight.background': '#eef2ff',
+            'highlight.color': '#4338ca',
+            'content.borderRadius': '6px',
+            'focus.ring': '0 0 0 0.2rem #c7d2fe',
         },
     },
     {
-        name: 'bootstrap4-dark-blue',
-        description: 'PrimeTek\'s interpretation of the Bootstrap 4 look, in dark.',
+        name: 'lara-dark-indigo',
+        description: 'Lara, the roomy family Scene shipped on PrimeReact 10, in dark on an indigo accent.',
+        family: PrimeReactThemeFamily.Lara,
+        primaryColor: 'indigo',
         isDark: true,
         tokens: {
-            'primary.color': '#8dd0ff',
-            'primary.contrastColor': '#151515',
-            'surface.background': '#20262e',
-            'surface.card': '#2a323d',
-            'surface.border': '#3f4b5b',
-            'surface.hover': 'rgba(255, 255, 255, 0.04)',
-            'surface.overlay': '#2a323d',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': '#8dd0ff',
-            'highlight.color': '#151515',
-            'content.borderRadius': '4px',
-            'focus.ring': '0 0 0 1px #e3f3fe',
+            'primary.color': '#818cf8',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #818cf8, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
+            'content.borderRadius': '6px',
+            'focus.ring': '0 0 0 0.2rem color-mix(in srgb, #818cf8, transparent 80%)',
         },
     },
     {
-        name: 'soho-light',
-        description: 'A soft, low-contrast light theme on a violet accent.',
+        name: 'lara-light-purple',
+        description: 'Lara, the roomy family Scene shipped on PrimeReact 10, in light on a purple accent.',
+        family: PrimeReactThemeFamily.Lara,
+        primaryColor: 'purple',
         isDark: false,
         tokens: {
-            'primary.color': '#7254f3',
+            'primary.color': '#a855f7',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#eff3f8',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#dfe7ef',
-            'surface.hover': '#f6f9fc',
+            'surface.border': '#e2e8f0',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#043d75',
-            'text.mutedColor': '#708da9',
-            'highlight.background': '#e2dcfc',
-            'highlight.color': '#7254f3',
+            'text.color': '#334155',
+            'text.mutedColor': '#64748b',
+            'highlight.background': '#faf5ff',
+            'highlight.color': '#7e22ce',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 1px #c7bbfa',
+            'focus.ring': '0 0 0 0.2rem #e9d5ff',
         },
     },
     {
-        name: 'soho-dark',
-        description: 'Soho in dark, on the same violet accent.',
+        name: 'lara-dark-purple',
+        description: 'Lara, the roomy family Scene shipped on PrimeReact 10, in dark on a purple accent.',
+        family: PrimeReactThemeFamily.Lara,
+        primaryColor: 'purple',
         isDark: true,
         tokens: {
-            'primary.color': '#b19df7',
-            'primary.contrastColor': 'hsl(234, 15%, 13%)',
-            'surface.background': '#1d1e27',
-            'surface.card': '#282936',
-            'surface.border': '#3e4053',
-            'surface.hover': 'rgba(255, 255, 255, 0.03)',
-            'surface.overlay': '#282936',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(177, 157, 247, 0.16)',
-            'highlight.color': '#b19df7',
+            'primary.color': '#c084fc',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #c084fc, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 1px #e0d8fc',
+            'focus.ring': '0 0 0 0.2rem color-mix(in srgb, #c084fc, transparent 80%)',
         },
     },
     {
-        name: 'viva-light',
-        description: 'A neutral, understated light theme on a muted indigo accent.',
+        name: 'lara-light-teal',
+        description: 'Lara, the roomy family Scene shipped on PrimeReact 10, in light on a teal accent.',
+        family: PrimeReactThemeFamily.Lara,
+        primaryColor: 'teal',
         isDark: false,
         tokens: {
-            'primary.color': '#5472d4',
+            'primary.color': '#14b8a6',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#f5f5f5',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#ebebeb',
-            'surface.hover': '#edf0fa',
+            'surface.border': '#e2e8f0',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#6c6c6c',
-            'text.mutedColor': '#898989',
-            'highlight.background': '#ced6f1',
-            'highlight.color': '#585858',
+            'text.color': '#334155',
+            'text.mutedColor': '#64748b',
+            'highlight.background': '#f0fdfa',
+            'highlight.color': '#0f766e',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 0.1rem #bbc7ee',
+            'focus.ring': '0 0 0 0.2rem #99f6e4',
         },
     },
     {
-        name: 'viva-dark',
-        description: 'Viva in dark, on a near-black blue-grey ground.',
+        name: 'lara-dark-teal',
+        description: 'Lara, the roomy family Scene shipped on PrimeReact 10, in dark on a teal accent.',
+        family: PrimeReactThemeFamily.Lara,
+        primaryColor: 'teal',
         isDark: true,
         tokens: {
-            'primary.color': '#9eade6',
-            'primary.contrastColor': '#121212',
-            'surface.background': '#0e1315',
-            'surface.card': '#161d21',
-            'surface.border': '#263238',
-            'surface.hover': 'rgba(158, 173, 230, 0.08)',
-            'surface.overlay': '#161d21',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(158, 173, 230, 0.16)',
-            'highlight.color': '#9eade6',
+            'primary.color': '#2dd4bf',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #2dd4bf, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
             'content.borderRadius': '6px',
-            'focus.ring': '0 0 0 1px #9eade6',
+            'focus.ring': '0 0 0 0.2rem color-mix(in srgb, #2dd4bf, transparent 80%)',
         },
     },
     {
-        name: 'md-light-indigo',
-        description: 'PrimeTek\'s interpretation of Material Design, in light on indigo.',
+        name: 'nora-light-blue',
+        description: 'Nora, a tighter, squarer, more compact family, in light on a blue accent.',
+        family: PrimeReactThemeFamily.Nora,
+        primaryColor: 'blue',
         isDark: false,
         tokens: {
-            'primary.color': '#3F51B5',
+            'primary.color': '#2563eb',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#fafafa',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': 'rgba(0, 0, 0, 0.12)',
-            'surface.hover': 'rgba(0, 0, 0, 0.04)',
+            'surface.border': '#94a3b8',
+            'surface.hover': '#e2e8f0',
             'surface.overlay': '#ffffff',
-            'text.color': 'rgba(0, 0, 0, 0.87)',
-            'text.mutedColor': 'rgba(0, 0, 0, 0.6)',
-            'highlight.background': 'rgba(63, 81, 181, 0.12)',
-            'highlight.color': '#3F51B5',
-            'content.borderRadius': '4px',
+            'text.color': '#0f172a',
+            'text.mutedColor': '#475569',
+            'highlight.background': '#2563eb',
+            'highlight.color': '#ffffff',
+            'content.borderRadius': '2px',
             'focus.ring': 'none',
         },
     },
     {
-        name: 'md-dark-indigo',
-        description: 'PrimeTek\'s interpretation of Material Design, in dark on indigo.',
+        name: 'nora-dark-blue',
+        description: 'Nora, a tighter, squarer, more compact family, in dark on a blue accent.',
+        family: PrimeReactThemeFamily.Nora,
+        primaryColor: 'blue',
         isDark: true,
         tokens: {
-            'primary.color': '#9FA8DA',
-            'primary.contrastColor': '#121212',
-            'surface.background': '#121212',
-            'surface.card': '#1e1e1e',
-            'surface.border': 'hsla(0, 0%, 100%, 0.12)',
-            'surface.hover': 'hsla(0, 0%, 100%, 0.04)',
-            'surface.overlay': '#262626',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(159, 168, 218, 0.16)',
-            'highlight.color': '#9FA8DA',
-            'content.borderRadius': '4px',
+            'primary.color': '#3b82f6',
+            'primary.contrastColor': '#09090b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#71717a',
+            'surface.hover': '#3f3f46',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': '#3b82f6',
+            'highlight.color': '#09090b',
+            'content.borderRadius': '2px',
             'focus.ring': 'none',
         },
     },
     {
-        name: 'mdc-light-indigo',
-        description: 'The Material interpretation with compact density, in light.',
+        name: 'nora-light-indigo',
+        description: 'Nora, a tighter, squarer, more compact family, in light on an indigo accent.',
+        family: PrimeReactThemeFamily.Nora,
+        primaryColor: 'indigo',
         isDark: false,
         tokens: {
-            'primary.color': '#3F51B5',
+            'primary.color': '#4f46e5',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#fafafa',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': 'rgba(0, 0, 0, 0.12)',
-            'surface.hover': 'rgba(0, 0, 0, 0.04)',
+            'surface.border': '#94a3b8',
+            'surface.hover': '#e2e8f0',
             'surface.overlay': '#ffffff',
-            'text.color': 'rgba(0, 0, 0, 0.87)',
-            'text.mutedColor': 'rgba(0, 0, 0, 0.6)',
-            'highlight.background': 'rgba(63, 81, 181, 0.12)',
-            'highlight.color': '#3F51B5',
-            'content.borderRadius': '4px',
+            'text.color': '#0f172a',
+            'text.mutedColor': '#475569',
+            'highlight.background': '#4f46e5',
+            'highlight.color': '#ffffff',
+            'content.borderRadius': '2px',
             'focus.ring': 'none',
         },
     },
     {
-        name: 'mdc-dark-indigo',
-        description: 'The Material interpretation with compact density, in dark.',
+        name: 'nora-dark-indigo',
+        description: 'Nora, a tighter, squarer, more compact family, in dark on an indigo accent.',
+        family: PrimeReactThemeFamily.Nora,
+        primaryColor: 'indigo',
         isDark: true,
         tokens: {
-            'primary.color': '#9FA8DA',
-            'primary.contrastColor': '#121212',
-            'surface.background': '#121212',
-            'surface.card': '#1e1e1e',
-            'surface.border': 'hsla(0, 0%, 100%, 0.12)',
-            'surface.hover': 'hsla(0, 0%, 100%, 0.04)',
-            'surface.overlay': '#262626',
-            'text.color': 'rgba(255, 255, 255, 0.87)',
-            'text.mutedColor': 'rgba(255, 255, 255, 0.6)',
-            'highlight.background': 'rgba(159, 168, 218, 0.16)',
-            'highlight.color': '#9FA8DA',
-            'content.borderRadius': '4px',
+            'primary.color': '#6366f1',
+            'primary.contrastColor': '#09090b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#71717a',
+            'surface.hover': '#3f3f46',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': '#6366f1',
+            'highlight.color': '#09090b',
+            'content.borderRadius': '2px',
             'focus.ring': 'none',
         },
     },
     {
-        name: 'nano',
-        description: 'A dense, near-square theme for information-heavy screens.',
+        name: 'material-light-indigo',
+        description: 'Material, the PrimeTek reading of Material Design, in light on an indigo accent.',
+        family: PrimeReactThemeFamily.Material,
+        primaryColor: 'indigo',
         isDark: false,
         tokens: {
-            'primary.color': '#1174c0',
+            'primary.color': '#3F51B5',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#f2f4f8',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#dee2e6',
-            'surface.hover': '#dde1e6',
+            'surface.border': '#cbd5e1',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#343a3f',
-            'text.mutedColor': '#697077',
-            'highlight.background': '#44a1d9',
-            'highlight.color': '#ffffff',
-            'content.borderRadius': '1px',
-            'focus.ring': '0 0 0 0.2rem #90c9f5',
+            'text.color': '#0f172a',
+            'text.mutedColor': '#475569',
+            'highlight.background': 'color-mix(in srgb, #3F51B5, transparent 88%)',
+            'highlight.color': '#303F9F',
+            'content.borderRadius': '4px',
+            'focus.ring': '0 0 1px 4px #e2e8f0',
         },
     },
     {
-        name: 'mira',
-        description: 'A calm light theme on a Nord-inspired blue-grey palette.',
-        isDark: false,
+        name: 'material-dark-indigo',
+        description: 'Material, the PrimeTek reading of Material Design, in dark on an indigo accent.',
+        family: PrimeReactThemeFamily.Material,
+        primaryColor: 'indigo',
+        isDark: true,
         tokens: {
-            'primary.color': '#5e81ac',
-            'primary.contrastColor': '#ffffff',
-            'surface.background': '#eceff4',
-            'surface.card': '#ffffff',
-            'surface.border': '#e5e9f0',
-            'surface.hover': '#d8dee9',
-            'surface.overlay': '#ffffff',
-            'text.color': '#4c566a',
-            'text.mutedColor': '#81a1c1',
-            'highlight.background': '#d8dee9',
-            'highlight.color': '#2e3440',
+            'primary.color': '#5C6BC0',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #5C6BC0, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
             'content.borderRadius': '4px',
-            'focus.ring': '0 0 0 0.2rem #c0d0e0',
+            'focus.ring': '0 0 1px 4px #3f3f46',
         },
     },
     {
-        name: 'fluent-light',
-        description: 'PrimeTek\'s interpretation of the Microsoft Fluent look, in light.',
+        name: 'material-light-purple',
+        description: 'Material, the PrimeTek reading of Material Design, in light on a purple accent.',
+        family: PrimeReactThemeFamily.Material,
+        primaryColor: 'purple',
         isDark: false,
         tokens: {
-            'primary.color': '#0078d4',
+            'primary.color': '#9C27B0',
             'primary.contrastColor': '#ffffff',
-            'surface.background': '#faf9f8',
+            'surface.background': '#f8fafc',
             'surface.card': '#ffffff',
-            'surface.border': '#edebe9',
-            'surface.hover': '#f3f2f1',
+            'surface.border': '#cbd5e1',
+            'surface.hover': '#f1f5f9',
             'surface.overlay': '#ffffff',
-            'text.color': '#323130',
-            'text.mutedColor': '#605e5c',
-            'highlight.background': '#edebe9',
-            'highlight.color': '#323130',
-            'content.borderRadius': '2px',
-            'focus.ring': 'inset 0 0 0 1px #605e5c',
+            'text.color': '#0f172a',
+            'text.mutedColor': '#475569',
+            'highlight.background': 'color-mix(in srgb, #9C27B0, transparent 88%)',
+            'highlight.color': '#7B1FA2',
+            'content.borderRadius': '4px',
+            'focus.ring': '0 0 1px 4px #e2e8f0',
         },
     },
     {
-        name: 'tailwind-light',
-        description: 'PrimeTek\'s interpretation of the Tailwind UI look, in light.',
-        isDark: false,
+        name: 'material-dark-purple',
+        description: 'Material, the PrimeTek reading of Material Design, in dark on a purple accent.',
+        family: PrimeReactThemeFamily.Material,
+        primaryColor: 'purple',
+        isDark: true,
         tokens: {
-            'primary.color': '#4f46e5',
-            'primary.contrastColor': '#ffffff',
-            'surface.background': '#fafafa',
-            'surface.card': '#ffffff',
-            'surface.border': '#e5e7eb',
-            'surface.hover': '#f4f4f5',
-            'surface.overlay': '#ffffff',
-            'text.color': '#3f3f46',
-            'text.mutedColor': '#71717a',
-            'highlight.background': '#eef2ff',
-            'highlight.color': '#312e81',
-            'content.borderRadius': '0.375rem',
-            'focus.ring': '0 0 0 1px #6366f1',
+            'primary.color': '#AB47BC',
+            'primary.contrastColor': '#18181b',
+            'surface.background': '#09090b',
+            'surface.card': '#18181b',
+            'surface.border': '#3f3f46',
+            'surface.hover': '#27272a',
+            'surface.overlay': '#18181b',
+            'text.color': '#ffffff',
+            'text.mutedColor': '#a1a1aa',
+            'highlight.background': 'color-mix(in srgb, #AB47BC, transparent 84%)',
+            'highlight.color': 'rgba(255,255,255,.87)',
+            'content.borderRadius': '4px',
+            'focus.ring': '0 0 1px 4px #3f3f46',
         },
     },
 ];