@invana/styling 0.0.4

package/src/themes/tailwind.css

@@ -0,0 +1,105 @@
+/**
+ * Tailwind CSS Theme
+ * Inspired by tailwindcss.com design
+ * Features: Sky/cyan accents, dark buttons, docs use violet for example buttons
+ * Based on research from https://github.com/tailwindlabs/tailwindcss.com
+ * 
+ * Key colors from Tailwind website:
+ * - Primary buttons: bg-black (light mode), bg-gray-700 (dark mode) 
+ * - Accent/links: sky-400/sky-500 (#38bdf8/#0ea5e9)
+ * - Example buttons in docs: violet-500 (#8b5cf6)
+ * - Dark mode background: oklch(.13 .028 261.692) ≈ hsl(262 18% 13%)
+ */
+
+/* Light mode - Tailwind theme */
+[data-theme="tailwind-light"],
+.theme-tailwind-light {
+  /* Raw HSL values for opacity modifiers */
+  --background: 0 0% 100%;
+  --foreground: 222 47% 11%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 199 89% 48%; /* sky-500: #0ea5e9 */
+  --accent-foreground: 0 0% 100%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --primary: 0 0% 0%; /* black - main buttons */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --ring: 199 89% 48%; /* sky-500 */
+
+  /* Full HSL colors for direct use */
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222 47% 11%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222 47% 11%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222 47% 11%);
+  --color-primary: hsl(0 0% 0%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(210 40% 96%);
+  --color-secondary-foreground: hsl(222 47% 11%);
+  --color-muted: hsl(210 40% 96%);
+  --color-muted-foreground: hsl(215 16% 47%);
+  --color-accent: hsl(199 89% 48%);
+  --color-accent-foreground: hsl(0 0% 100%);
+  --color-destructive: hsl(0 84% 60%);
+  --color-destructive-foreground: hsl(0 0% 100%);
+  --color-border: hsl(214 32% 91%);
+  --color-input: hsl(214 32% 91%);
+  --color-ring: hsl(199 89% 48%);
+}
+
+/* Dark mode - Tailwind theme */
+[data-theme="tailwind-dark"],
+.theme-tailwind-dark {
+  /* Raw HSL values for opacity modifiers */
+  /* Dark background from tailwindcss.com - very dark blue-gray, almost black */
+  --background: 222 47% 5%;
+  --foreground: 210 40% 98%;
+  --muted: 217 33% 12%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 198 93% 60%; /* sky-400: #38bdf8 */
+  --accent-foreground: 222 47% 11%;
+  --popover: 222 47% 7%;
+  --popover-foreground: 210 40% 98%;
+  --border: 217 19% 20%;
+  --input: 217 19% 20%;
+  --card: 222 47% 8%;
+  --card-foreground: 210 40% 98%;
+  --primary: 220 9% 46%; /* gray-700: #374151 - lighter button for dark mode */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 217 33% 12%;
+  --secondary-foreground: 210 40% 98%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --ring: 198 93% 60%; /* sky-400 */
+
+  /* Full HSL colors for direct use */
+  --color-background: hsl(222 47% 5%);
+  --color-foreground: hsl(210 40% 98%);
+  --color-card: hsl(222 47% 8%);
+  --color-card-foreground: hsl(210 40% 98%);
+  --color-popover: hsl(222 47% 7%);
+  --color-popover-foreground: hsl(210 40% 98%);
+  --color-primary: hsl(220 9% 46%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(217 33% 12%);
+  --color-secondary-foreground: hsl(210 40% 98%);
+  --color-muted: hsl(217 33% 12%);
+  --color-muted-foreground: hsl(215 20% 65%);
+  --color-accent: hsl(198 93% 60%);
+  --color-accent-foreground: hsl(222 47% 11%);
+  --color-destructive: hsl(0 63% 31%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(217 19% 27%);
+  --color-input: hsl(217 19% 27%);
+  --color-ring: hsl(198 93% 60%);
+}

package/src/themes/vite.css

@@ -0,0 +1,107 @@
+/**
+ * Vite Theme
+ * Inspired by vite.dev design
+ * Based on research from https://github.com/vitejs/vite
+ * 
+ * Key colors from Vite website:
+ * - Brand primary: #646cff (indigo/violet)
+ * - Brand hover: #535bf2
+ * - Brand lighter: #747bff, #9499ff
+ * - Link color: #646cff (dark mode), #747bff (light mode hover)
+ * - Button gradient: radial-gradient with #bd34fe (purple) and #41d1ff (cyan)
+ * - Background dark: #242424
+ * - Glow effects: purple #bd34fe, cyan #41d1ff
+ */
+
+/* Light mode - Vite theme */
+[data-theme="vite-light"],
+.theme-vite-light {
+  /* Raw HSL values for opacity modifiers */
+  --background: 0 0% 100%;
+  --foreground: 213 27% 27%; /* #213547 - Vite's light mode text */
+  --muted: 240 5% 96%;
+  --muted-foreground: 0 0% 53%; /* #888 - .read-the-docs color */
+  --accent: 235 85% 70%; /* #646cff - Vite brand */
+  --accent-foreground: 0 0% 100%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 213 27% 27%;
+  --border: 240 6% 90%;
+  --input: 240 6% 90%;
+  --card: 0 0% 100%;
+  --card-foreground: 213 27% 27%;
+  --primary: 235 85% 70%; /* #646cff - Vite brand */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 235 50% 95%;
+  --secondary-foreground: 235 85% 47%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --ring: 235 85% 70%;
+
+  /* Full HSL colors for direct use */
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(213 27% 27%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(213 27% 27%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(213 27% 27%);
+  --color-primary: hsl(235 85% 70%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(235 50% 95%);
+  --color-secondary-foreground: hsl(235 85% 47%);
+  --color-muted: hsl(240 5% 96%);
+  --color-muted-foreground: hsl(0 0% 53%);
+  --color-accent: hsl(235 85% 70%);
+  --color-accent-foreground: hsl(0 0% 100%);
+  --color-destructive: hsl(0 84% 60%);
+  --color-destructive-foreground: hsl(0 0% 100%);
+  --color-border: hsl(240 6% 90%);
+  --color-input: hsl(240 6% 90%);
+  --color-ring: hsl(235 85% 70%);
+}
+
+/* Dark mode - Vite theme */
+[data-theme="vite-dark"],
+.theme-vite-dark {
+  /* Raw HSL values for opacity modifiers */
+  /* Background: #242424 */
+  --background: 0 0% 14%;
+  --foreground: 0 0% 100%; /* white text with 87% opacity visually */
+  --muted: 0 0% 20%; /* #1a1a1a - button bg */
+  --muted-foreground: 0 0% 53%; /* #888 */
+  --accent: 235 85% 70%; /* #646cff */
+  --accent-foreground: 0 0% 100%;
+  --popover: 0 0% 10%;
+  --popover-foreground: 0 0% 100%;
+  --border: 235 85% 70%; /* button hover border: #646cff */
+  --input: 0 0% 20%;
+  --card: 0 0% 10%;
+  --card-foreground: 0 0% 100%;
+  --primary: 235 85% 70%; /* #646cff - Vite brand */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 20%;
+  --secondary-foreground: 0 0% 100%;
+  --destructive: 0 63% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --ring: 235 85% 70%;
+
+  /* Full HSL colors for direct use */
+  --color-background: hsl(0 0% 14%);
+  --color-foreground: hsl(0 0% 100%);
+  --color-card: hsl(0 0% 10%);
+  --color-card-foreground: hsl(0 0% 100%);
+  --color-popover: hsl(0 0% 10%);
+  --color-popover-foreground: hsl(0 0% 100%);
+  --color-primary: hsl(235 85% 70%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(0 0% 20%);
+  --color-secondary-foreground: hsl(0 0% 100%);
+  --color-muted: hsl(0 0% 20%);
+  --color-muted-foreground: hsl(0 0% 53%);
+  --color-accent: hsl(235 85% 70%);
+  --color-accent-foreground: hsl(0 0% 100%);
+  --color-destructive: hsl(0 63% 50%);
+  --color-destructive-foreground: hsl(0 0% 100%);
+  --color-border: hsl(0 0% 20%);
+  --color-input: hsl(0 0% 20%);
+  --color-ring: hsl(235 85% 70%);
+}

package/src/themes.config.ts

@@ -0,0 +1,212 @@
+/**
+ * Theme Configuration System
+ * Central configuration for all available themes
+ */
+
+export interface ThemeVariant {
+  id: string;
+  name: string;
+  mode: 'light' | 'dark' | 'system';
+  icon?: string;
+}
+
+export interface Theme {
+  id: string;
+  name: string;
+  description: string;
+  variants: ThemeVariant[];
+}
+
+/**
+ * Theme Presets contributed as first-class themes. Unlike the classic themes
+ * (which vary by light/dark/system), each preset is a single mode and its
+ * selectable accent swatches become the "variant" axis — e.g. theme `dark-gold`
+ * with variants `dark-gold-gold`, `dark-gold-ocean`, … The colours for every
+ * combination are plain CSS in `themes/presets.css`; only the ids/names/modes
+ * are listed here so they register with the toolbar and `applyTheme()`.
+ */
+const DARK_ACCENTS: [string, string][] = [
+  ['gold', 'Gold'], ['ocean', 'Ocean'], ['emerald', 'Emerald'], ['rose', 'Rose'],
+  ['purple', 'Purple'], ['amber', 'Amber'], ['teal', 'Teal'], ['silver', 'Silver'],
+];
+const LIGHT_ACCENTS: [string, string][] = [
+  ['indigo', 'Indigo'], ['ocean', 'Ocean'], ['emerald', 'Emerald'], ['rose', 'Rose'],
+  ['purple', 'Purple'], ['amber', 'Amber'], ['teal', 'Teal'], ['slate', 'Slate'],
+];
+
+// `default` is each preset's signature accent. It is
+// placed FIRST so it becomes the theme's default variant (variants[0]) — the value
+// consumers fall back to when no accent is specified.
+const PRESET_THEMES: { id: string; name: string; dark: boolean; accents: [string, string][]; default: string }[] = [
+  { id: 'dark-gold', name: 'Dark Gold', dark: true, accents: DARK_ACCENTS, default: 'gold' },
+  { id: 'dark-ocean', name: 'Dark Ocean', dark: true, accents: DARK_ACCENTS, default: 'ocean' },
+  { id: 'dark-forest', name: 'Dark Forest', dark: true, accents: DARK_ACCENTS, default: 'emerald' },
+  { id: 'dark-rose', name: 'Dark Rose', dark: true, accents: DARK_ACCENTS, default: 'rose' },
+  { id: 'light-minimal', name: 'Light Minimal', dark: false, accents: LIGHT_ACCENTS, default: 'indigo' },
+];
+
+function buildPresetThemes(): Theme[] {
+  return PRESET_THEMES.map((p) => {
+    // Signature accent first → it becomes variants[0] (the theme's default).
+    const ordered = [
+      ...p.accents.filter(([id]) => id === p.default),
+      ...p.accents.filter(([id]) => id !== p.default),
+    ];
+    return {
+      id: p.id,
+      name: p.name,
+      description: `${p.name} preset — pick an accent swatch (${p.dark ? 'dark' : 'light'} mode)`,
+      variants: ordered.map(([accentId, accentName]) => ({
+        id: `${p.id}-${accentId}`,
+        name: accentName,
+        mode: (p.dark ? 'dark' : 'light') as ThemeVariant['mode'],
+        icon: 'circle',
+      })),
+    };
+  });
+}
+
+export const themes: Theme[] = [
+  {
+    id: 'default',
+    name: 'Invana',
+    description: 'Default Invana brand theme with green accents',
+    variants: [
+      { id: 'default-light', name: 'Invana Light', mode: 'light', icon: 'sun' },
+      { id: 'default-dark', name: 'Invana Dark', mode: 'dark', icon: 'moon' },
+      { id: 'default-system', name: 'Invana System', mode: 'system', icon: 'circle' }
+    ]
+  },
+  {
+    id: 'tailwind',
+    name: 'Tailwind',
+    description: 'Inspired by tailwindcss.com - black primary buttons, sky/cyan accents',
+    variants: [
+      { id: 'tailwind-light', name: 'Tailwind Light', mode: 'light', icon: 'sun' },
+      { id: 'tailwind-dark', name: 'Tailwind Dark', mode: 'dark', icon: 'moon' },
+      { id: 'tailwind-system', name: 'Tailwind System', mode: 'system', icon: 'circle' }
+    ]
+  },
+  {
+    id: 'vite',
+    name: 'Vite',
+    description: 'Inspired by vite.dev - indigo/violet brand (#646cff)',
+    variants: [
+      { id: 'vite-light', name: 'Vite Light', mode: 'light', icon: 'sun' },
+      { id: 'vite-dark', name: 'Vite Dark', mode: 'dark', icon: 'moon' },
+      { id: 'vite-system', name: 'Vite System', mode: 'system', icon: 'circle' }
+    ]
+  },
+  ...buildPresetThemes()
+];
+
+/**
+ * Get all theme variants as a flat list for selection
+ */
+export function getAllThemeVariants(): ThemeVariant[] {
+  return themes.flatMap(theme => theme.variants);
+}
+
+/**
+ * Get a theme by its ID
+ */
+export function getThemeById(id: string): Theme | undefined {
+  return themes.find(theme => theme.id === id);
+}
+
+/**
+ * Get a theme variant by its ID
+ */
+export function getThemeVariantById(id: string): { theme: Theme; variant: ThemeVariant } | undefined {
+  for (const theme of themes) {
+    const variant = theme.variants.find(v => v.id === id);
+    if (variant) {
+      return { theme, variant };
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Get the default theme variant
+ */
+export function getDefaultThemeVariant(): ThemeVariant {
+  return themes[0].variants[0];
+}
+
+/**
+ * Apply a theme to the document
+ */
+export function applyTheme(variantId: string): void {
+  const root = document.documentElement;
+  const result = getThemeVariantById(variantId);
+  
+  if (!result) {
+    console.warn(`Theme variant "${variantId}" not found`);
+    return;
+  }
+  
+  const { variant } = result;
+  
+  // Remove all existing theme classes
+  getAllThemeVariants().forEach(v => {
+    root.classList.remove(`theme-${v.id}`);
+  });
+  
+  // Handle system mode with prefers-color-scheme detection
+  if (variant.mode === 'system') {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const effectiveMode = prefersDark ? 'dark' : 'light';
+    const themeBase = variantId.replace('-system', '');
+    const effectiveVariantId = `${themeBase}-${effectiveMode}`;
+    
+    // Apply the effective theme
+    root.setAttribute('data-theme', effectiveVariantId);
+    root.classList.add(`theme-${effectiveVariantId}`, effectiveMode);
+    root.classList.remove('light', 'dark');
+    root.classList.add(effectiveMode);
+    
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      const newMode = e.matches ? 'dark' : 'light';
+      const newVariantId = `${themeBase}-${newMode}`;
+      const oldVariantId = `${themeBase}-${e.matches ? 'light' : 'dark'}`;
+      
+      root.setAttribute('data-theme', newVariantId);
+      root.classList.remove(`theme-${oldVariantId}`, 'light', 'dark');
+      root.classList.add(`theme-${newVariantId}`, newMode);
+    };
+    
+    // Clean up previous listener and add new one
+    if ((window as any).__themeMediaQueryHandler) {
+      mediaQuery.removeEventListener('change', (window as any).__themeMediaQueryHandler);
+    }
+    (window as any).__themeMediaQueryHandler = handleChange;
+    mediaQuery.addEventListener('change', handleChange);
+  } else {
+    // Apply light or dark mode directly
+    root.setAttribute('data-theme', variantId);
+    root.classList.add(`theme-${variantId}`, variant.mode);
+    root.classList.remove('light', 'dark');
+    root.classList.add(variant.mode);
+    
+    // Clean up system mode listener if switching away from system mode
+    if ((window as any).__themeMediaQueryHandler) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      mediaQuery.removeEventListener('change', (window as any).__themeMediaQueryHandler);
+      delete (window as any).__themeMediaQueryHandler;
+    }
+  }
+}
+
+/**
+ * Get theme variant for Storybook toolbar items
+ */
+export function getStorybookThemeItems() {
+  return getAllThemeVariants().map(variant => ({
+    value: variant.id,
+    title: variant.name,
+    icon: variant.icon || (variant.mode === 'system' ? 'circle' : variant.mode === 'light' ? 'sun' : 'moon')
+  }));
+}