@oxyhq/bloom 0.35.8 → 0.37.0

package/src/theme/color-presets.ts

@@ -1,34 +1,47 @@
-export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'yellow' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint' | 'oxy' | 'faircoin';
+import type { SchemeVariant } from './color-engine';
+
+export type AppColorName =
+  | 'teal'
+  | 'blue'
+  | 'green'
+  | 'amber'
+  | 'yellow'
+  | 'red'
+  | 'purple'
+  | 'pink'
+  | 'sky'
+  | 'orange'
+  | 'mint'
+  | 'oxy'
+  | 'faircoin';
 
 /**
- * Palette tokens for a single mode (light or dark) of a color preset.
+ * A single colour preset: a brand SEED colour plus the tonal scheme variant to
+ * derive its full role set with.
  *
- * Keys carry a leading `--` for historical reasons (shadcn-style CSS variable
- * names) — keep in mind the values are platform-agnostic **raw HSL triples**
- * (e.g. `'185 100% 20%'` or `'185 100% 20% / 0.5'`), not CSS-resolved colors.
- * The single canonical resolver `getResolvedTokens` (in `token-registry.ts`)
- * converts this raw map to sRGB `rgb(...)` for every runtime write — the same
- * values drive BOTH layers:
- *   - the web layer: `getResolvedTokens`'s `rgb(...)` strings are written to
- *     `document.documentElement` / a `BloomColorScope` element, so `var(--x)` —
- *     the form Tailwind v4 `@theme inline` compiles its color utilities to —
- *     resolves to a valid color directly, and
- *   - the native layer (`buildTheme` resolves the raw triples into `hsl(...)`
- *     strings consumable by React Native styles; `native-root-vars.native.ts`
- *     writes the same canonical `rgb(...)` values into react-native-css's
- *     `rootVariables` family).
- *
- * The `--` prefix is an implementation detail we will drop in a future major.
+ * Every preset's palette is now GENERATED by Bloom's dependency-free colour
+ * engine (`color-engine/`) from this seed — no hand-authored HSL triples. The
+ * engine's `generateRoleColors({ seed, variant, isDark })` yields the full
+ * Material-3 role set for light and dark; `getPresetVars` (in `preset-vars.ts`)
+ * maps those roles onto Bloom's canonical token names. A user-picked colour
+ * flows through the identical path — a preset is just a fixed seed.
  */
-export type PresetTokens = Record<string, string>;
-
 export interface AppColorPreset {
   name: AppColorName;
+  /** The brand seed colour, `#rrggbb`. Also the value the colour picker matches. */
   hex: string;
-  light: PresetTokens;
-  dark: PresetTokens;
+  /** The tonal scheme variant the engine derives roles with. */
+  variant: SchemeVariant;
 }
 
+/**
+ * Historically each preset carried a full light/dark map of raw HSL triples.
+ * That map is gone — the engine derives every role from {@link AppColorPreset.hex}.
+ * The type alias is retained for the public `PresetTokens` export shape (the
+ * resolved `--token -> value` record that `getPresetVars` produces).
+ */
+export type PresetTokens = Record<string, string>;
+
 export const APP_COLOR_NAMES: readonly AppColorName[] = ['teal', 'blue', 'green', 'amber', 'yellow', 'red', 'purple', 'pink', 'sky', 'orange', 'mint', 'oxy', 'faircoin'];
 
 /** Premium-exclusive presets, hidden from the standard color picker. */
@@ -54,614 +67,24 @@ export function hexToAppColorName(hex: string): AppColorName {
   return HEX_TO_APP_COLOR[hex.toLowerCase()] ?? 'teal';
 }
 
+/**
+ * The 13 named presets, each a brand seed + scheme variant. The engine derives
+ * the full role set (light + dark) from the seed. Seeds are the brand hex of
+ * each preset; `oxy` reads most faithfully as `vibrant`, everything else keeps a
+ * bold `vibrant` derivation to match the prior saturated palette.
+ */
 export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
-  teal: {
-    name: 'teal',
-    hex: '#005c67',
-    light: {
-      '--background': '185 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '185 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '185 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '185 100% 20%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '185 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '185 55% 92%',
-      '--muted-foreground': '185 5% 42%',
-      '--accent': '185 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '185 40% 87%',
-      '--input': '185 40% 87%',
-      '--ring': '185 100% 20%',
-      '--sidebar': '185 58% 94%',
-    },
-    dark: {
-      '--background': '185 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '185 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '185 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '185 100% 20%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '185 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '185 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '185 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '185 12% 20%',
-      '--input': '185 10% 23%',
-      '--ring': '185 100% 20%',
-      '--sidebar': '185 30% 8%',
-    },
-  },
-
-  blue: {
-    name: 'blue',
-    hex: '#1D9BF0',
-    light: {
-      '--background': '205 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '205 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '205 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '205 87% 53%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '205 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '205 55% 92%',
-      '--muted-foreground': '205 5% 42%',
-      '--accent': '205 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '205 40% 87%',
-      '--input': '205 40% 87%',
-      '--ring': '205 87% 53%',
-      '--sidebar': '205 58% 94%',
-    },
-    dark: {
-      '--background': '205 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '205 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '205 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '205 87% 53%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '205 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '205 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '205 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '205 12% 20%',
-      '--input': '205 10% 23%',
-      '--ring': '205 87% 53%',
-      '--sidebar': '205 30% 8%',
-    },
-  },
-
-  green: {
-    name: 'green',
-    hex: '#10B981',
-    light: {
-      '--background': '160 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '160 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '160 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '160 84% 39%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '160 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '160 55% 92%',
-      '--muted-foreground': '160 5% 42%',
-      '--accent': '160 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '160 40% 87%',
-      '--input': '160 40% 87%',
-      '--ring': '160 84% 39%',
-      '--sidebar': '160 58% 94%',
-    },
-    dark: {
-      '--background': '160 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '160 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '160 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '160 84% 39%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '160 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '160 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '160 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '160 12% 20%',
-      '--input': '160 10% 23%',
-      '--ring': '160 84% 39%',
-      '--sidebar': '160 30% 8%',
-    },
-  },
-
-  amber: {
-    name: 'amber',
-    hex: '#F59E0B',
-    light: {
-      '--background': '38 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '38 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '38 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '38 92% 50%',
-      '--primary-foreground': '0 0% 0%',
-      '--secondary': '38 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '38 55% 92%',
-      '--muted-foreground': '38 5% 42%',
-      '--accent': '38 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '38 40% 87%',
-      '--input': '38 40% 87%',
-      '--ring': '38 92% 50%',
-      '--sidebar': '38 58% 94%',
-    },
-    dark: {
-      '--background': '38 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '38 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '38 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '38 92% 50%',
-      '--primary-foreground': '0 0% 0%',
-      '--secondary': '38 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '38 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '38 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '38 12% 20%',
-      '--input': '38 10% 23%',
-      '--ring': '38 92% 50%',
-      '--sidebar': '38 30% 8%',
-    },
-  },
-
-  yellow: {
-    name: 'yellow',
-    hex: '#ffc300',
-    light: {
-      '--background': '46 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '46 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '46 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '46 100% 50%',
-      '--primary-foreground': '0 0% 0%',
-      '--secondary': '46 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '46 55% 92%',
-      '--muted-foreground': '46 5% 42%',
-      '--accent': '46 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '46 40% 87%',
-      '--input': '46 40% 87%',
-      '--ring': '46 100% 50%',
-      '--sidebar': '46 58% 94%',
-    },
-    dark: {
-      '--background': '46 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '46 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '46 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '46 100% 50%',
-      '--primary-foreground': '0 0% 0%',
-      '--secondary': '46 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '46 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '46 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '46 12% 20%',
-      '--input': '46 10% 23%',
-      '--ring': '46 100% 50%',
-      '--sidebar': '46 30% 8%',
-    },
-  },
-
-  red: {
-    name: 'red',
-    hex: '#EF4444',
-    light: {
-      '--background': '0 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '0 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '0 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '0 84% 60%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '0 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '0 55% 92%',
-      '--muted-foreground': '0 5% 42%',
-      '--accent': '0 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '0 40% 87%',
-      '--input': '0 40% 87%',
-      '--ring': '0 84% 60%',
-      '--sidebar': '0 58% 94%',
-    },
-    dark: {
-      '--background': '0 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '0 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '0 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '0 84% 60%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '0 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '0 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '0 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '0 12% 20%',
-      '--input': '0 10% 23%',
-      '--ring': '0 84% 60%',
-      '--sidebar': '0 30% 8%',
-    },
-  },
-
-  purple: {
-    name: 'purple',
-    hex: '#8B5CF6',
-    light: {
-      '--background': '258 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '258 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '258 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '258 90% 66%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '258 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '258 55% 92%',
-      '--muted-foreground': '258 5% 42%',
-      '--accent': '258 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '258 40% 87%',
-      '--input': '258 40% 87%',
-      '--ring': '258 90% 66%',
-      '--sidebar': '258 58% 94%',
-    },
-    dark: {
-      '--background': '258 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '258 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '258 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '258 90% 66%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '258 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '258 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '258 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '258 12% 20%',
-      '--input': '258 10% 23%',
-      '--ring': '258 90% 66%',
-      '--sidebar': '258 30% 8%',
-    },
-  },
-
-  pink: {
-    name: 'pink',
-    hex: '#EC4899',
-    light: {
-      '--background': '330 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '330 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '330 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '330 81% 60%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '330 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '330 55% 92%',
-      '--muted-foreground': '330 5% 42%',
-      '--accent': '330 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '330 40% 87%',
-      '--input': '330 40% 87%',
-      '--ring': '330 81% 60%',
-      '--sidebar': '330 58% 94%',
-    },
-    dark: {
-      '--background': '330 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '330 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '330 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '330 81% 60%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '330 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '330 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '330 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '330 12% 20%',
-      '--input': '330 10% 23%',
-      '--ring': '330 81% 60%',
-      '--sidebar': '330 30% 8%',
-    },
-  },
-
-  sky: {
-    name: 'sky',
-    hex: '#0EA5E9',
-    light: {
-      '--background': '199 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '199 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '199 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '199 89% 48%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '199 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '199 55% 92%',
-      '--muted-foreground': '199 5% 42%',
-      '--accent': '199 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '199 40% 87%',
-      '--input': '199 40% 87%',
-      '--ring': '199 89% 48%',
-      '--sidebar': '199 58% 94%',
-    },
-    dark: {
-      '--background': '199 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '199 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '199 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '199 89% 48%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '199 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '199 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '199 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '199 12% 20%',
-      '--input': '199 10% 23%',
-      '--ring': '199 89% 48%',
-      '--sidebar': '199 30% 8%',
-    },
-  },
-
-  orange: {
-    name: 'orange',
-    hex: '#F97316',
-    light: {
-      '--background': '25 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '25 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '25 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '25 95% 53%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '25 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '25 55% 92%',
-      '--muted-foreground': '25 5% 42%',
-      '--accent': '25 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '25 40% 87%',
-      '--input': '25 40% 87%',
-      '--ring': '25 95% 53%',
-      '--sidebar': '25 58% 94%',
-    },
-    dark: {
-      '--background': '25 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '25 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '25 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '25 95% 53%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '25 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '25 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '25 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '25 12% 20%',
-      '--input': '25 10% 23%',
-      '--ring': '25 95% 53%',
-      '--sidebar': '25 30% 8%',
-    },
-  },
-
-  mint: {
-    name: 'mint',
-    hex: '#14B8A6',
-    light: {
-      '--background': '173 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '173 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '173 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '173 80% 40%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '173 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '173 55% 92%',
-      '--muted-foreground': '173 5% 42%',
-      '--accent': '173 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '173 40% 87%',
-      '--input': '173 40% 87%',
-      '--ring': '173 80% 40%',
-      '--sidebar': '173 58% 94%',
-    },
-    dark: {
-      '--background': '173 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '173 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '173 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '173 80% 40%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '173 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '173 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '173 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '173 12% 20%',
-      '--input': '173 10% 23%',
-      '--ring': '173 80% 40%',
-      '--sidebar': '173 30% 8%',
-    },
-  },
-
-  oxy: {
-    name: 'oxy',
-    hex: '#c46ede',
-    light: {
-      '--background': '277 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '277 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '277 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '277 66% 56%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '277 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '277 55% 92%',
-      '--muted-foreground': '277 5% 42%',
-      '--accent': '277 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '277 40% 87%',
-      '--input': '277 40% 87%',
-      '--ring': '277 66% 56%',
-      '--sidebar': '277 58% 94%',
-    },
-    dark: {
-      '--background': '277 50% 5%',
-      '--foreground': '0 0% 93%',
-      '--surface': '277 20% 18%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '277 20% 18%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '277 66% 56%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '277 20% 18%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '277 18% 20%',
-      '--muted-foreground': '0 0% 70%',
-      '--accent': '277 18% 20%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '277 12% 20%',
-      '--input': '277 10% 23%',
-      '--ring': '277 66% 56%',
-      '--sidebar': '277 30% 8%',
-    },
-  },
-  faircoin: {
-    name: 'faircoin',
-    hex: '#9ffb50',
-    light: {
-      '--background': '92 55% 96%',
-      '--foreground': '0 0% 12%',
-      '--surface': '92 58% 94%',
-      '--surface-foreground': '0 0% 12%',
-      '--popover': '92 55% 97%',
-      '--popover-foreground': '0 0% 12%',
-      '--primary': '92 90% 25%',
-      '--primary-foreground': '0 0% 100%',
-      '--secondary': '92 55% 92%',
-      '--secondary-foreground': '0 0% 12%',
-      '--muted': '92 55% 92%',
-      '--muted-foreground': '92 5% 40%',
-      '--accent': '92 55% 92%',
-      '--accent-foreground': '0 0% 12%',
-      '--destructive': '0 84% 60%',
-      '--border': '92 40% 87%',
-      '--input': '92 40% 87%',
-      '--ring': '92 90% 25%',
-      '--sidebar': '92 58% 94%',
-    },
-    dark: {
-      '--background': '69 54% 8%',
-      '--foreground': '0 0% 93%',
-      '--surface': '69 30% 13%',
-      '--surface-foreground': '0 0% 93%',
-      '--popover': '69 30% 13%',
-      '--popover-foreground': '0 0% 93%',
-      '--primary': '92 96% 65%',
-      '--primary-foreground': '0 0% 0%',
-      '--secondary': '69 20% 15%',
-      '--secondary-foreground': '0 0% 93%',
-      '--muted': '69 18% 16%',
-      '--muted-foreground': '0 0% 46%',
-      '--accent': '69 18% 16%',
-      '--accent-foreground': '0 0% 93%',
-      '--destructive': '0 84% 60%',
-      '--border': '69 20% 18%',
-      '--input': '69 15% 20%',
-      '--ring': '92 96% 65%',
-      '--sidebar': '69 40% 6%',
-    },
-  },
+  teal: { name: 'teal', hex: '#005c67', variant: 'vibrant' },
+  blue: { name: 'blue', hex: '#1d9bf0', variant: 'vibrant' },
+  green: { name: 'green', hex: '#10b981', variant: 'vibrant' },
+  amber: { name: 'amber', hex: '#f59e0b', variant: 'vibrant' },
+  yellow: { name: 'yellow', hex: '#ffc300', variant: 'vibrant' },
+  red: { name: 'red', hex: '#ef4444', variant: 'vibrant' },
+  purple: { name: 'purple', hex: '#8b5cf6', variant: 'vibrant' },
+  pink: { name: 'pink', hex: '#ec4899', variant: 'vibrant' },
+  sky: { name: 'sky', hex: '#0ea5e9', variant: 'vibrant' },
+  orange: { name: 'orange', hex: '#f97316', variant: 'vibrant' },
+  mint: { name: 'mint', hex: '#14b8a6', variant: 'vibrant' },
+  oxy: { name: 'oxy', hex: '#c46ede', variant: 'vibrant' },
+  faircoin: { name: 'faircoin', hex: '#9ffb50', variant: 'vibrant' },
 };