@stackvibe-studio/themes 0.2.0 → 0.3.0

package/README.md

@@ -1,35 +1,96 @@
 # @stackvibe-studio/themes
 
-Theme tokens and presets for product-grade visual systems.
+Dynamic theme engine, design tokens, and presets for product-grade visual design systems.
 
-## Highlights
+Seamlessly toggle between 11 curated aesthetic palettes or inject theme CSS variables dynamically at runtime into your application root.
 
-- Ready-to-use palettes for product surfaces
-- Shared token model for color, radius, and glow values
-- Easy runtime access via resolveTheme and listThemes
-- New in v0.2.0: sunset-glow and midnight-gold presets
+[![npm version](https://img.shields.io/npm/v/@stackvibe-studio/themes.svg)](https://www.npmjs.com/package/@stackvibe-studio/themes)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-## Install
+## Features
+
+- **11 Curated Presets**: From high-contrast dark modes (`obsidian`, `tokyo-night`) to vibrant neons (`cyberpunk-crimson`, `neon-futuristic`) and clean minimalist layouts (`soft-minimal`, `nordic-frost`).
+- **Complete Design Tokens**: Backgrounds, surfaces, borders, text hierarchies, primary brand accents, glow values, and border radiuses.
+- **Runtime Theme Application**: Use `applyTheme(themeName)` to instantly apply tokens to `document.documentElement` or any React DOM container.
+- **CSS Variable Extraction**: Export ready-to-use CSS custom properties with `getThemeCSSVariables()`.
+- **Zero Dependencies**: Lightweight TypeScript bundle with zero external dependencies.
+
+## Installation
 
 ```bash
+pnpm add @stackvibe-studio/themes
+# or
 npm install @stackvibe-studio/themes
 ```
 
-## Example
+## Available Presets
+
+1. `aurora` - Northern lights iridescent glow with vibrant blues and violets.
+2. `obsidian` - Ultra-deep dark mode with sharp contrast and sleek zinc surfaces.
+3. `holographic` - Iridescent rainbow highlights for Web3 and creative tools.
+4. `soft-minimal` - Light, serene, clean enterprise aesthetic.
+5. `neon-futuristic` - Electric cyan and neon green cyber palette.
+6. `sunset-glow` - Warm amber, radiant peach, and deep sunset magenta.
+7. `midnight-gold` - Luxurious gold accents against deep royal navy.
+8. `cyberpunk-crimson` - Striking crimson red and high-voltage neon red on obsidian.
+9. `emerald-matrix` - High-tech matrix terminal emerald green.
+10. `nordic-frost` - Crisp arctic ice blue and slate minimalism.
+11. `tokyo-night` - Rich deep indigo, lavender, and pastel neon accents.
+
+## API & Usage
+
+### 1. Apply Theme at Runtime
+
+```tsx
+import { useEffect } from 'react';
+import { applyTheme } from '@stackvibe-studio/themes';
+
+export function ThemeSelector({ activeTheme }: { activeTheme: string }) {
+  useEffect(() => {
+    applyTheme(activeTheme);
+  }, [activeTheme]);
+
+  return <div>Active theme: {activeTheme}</div>;
+}
+```
+
+### 2. Inspect Palette Tokens
 
 ```ts
 import { resolveTheme, listThemes } from '@stackvibe-studio/themes';
 
-const palette = resolveTheme('aurora');
-console.log(listThemes());
+// List all 11 registered themes
+const themes = listThemes();
+
+// Resolve tokens for a specific theme
+const theme = resolveTheme('tokyo-night');
+console.log(theme.tokens.primary); // "#818cf8"
+console.log(theme.tokens.surface); // "#1a1b26"
+```
+
+### 3. Extract CSS Variables
+
+```ts
+import { getThemeCSSVariables } from '@stackvibe-studio/themes';
+
+const cssVars = getThemeCSSVariables('cyberpunk-crimson');
+/*
+{
+  "--sv-bg": "#09090b",
+  "--sv-surface": "#18181b",
+  "--sv-surface-hover": "#27272a",
+  "--sv-border": "#3f3f46",
+  "--sv-text": "#fafafa",
+  "--sv-text-muted": "#a1a1aa",
+  "--sv-primary": "#f43f5e",
+  "--sv-primary-hover": "#e11d48",
+  "--sv-accent": "#fb7185",
+  "--sv-glow": "0 0 32px rgba(244, 63, 94, 0.4)",
+  "--sv-radius": "10px"
+}
+*/
 ```
 
-## Available themes
+## License
 
-- aurora
-- obsidian
-- holographic
-- soft-minimal
-- neon-futuristic
-- sunset-glow
-- midnight-gold
+MIT © [StackVibe Studio](https://github.com/StackVibe-Studio/stackvibe-ui)

package/dist/index.cjs

@@ -20,6 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  applyTheme: () => applyTheme,
+  getThemeCSSVariables: () => getThemeCSSVariables,
   listThemes: () => listThemes,
   resolveTheme: () => resolveTheme,
   themePresets: () => themePresets
@@ -95,16 +97,79 @@ var themePresets = {
     surface: "#111827",
     radius: "1rem",
     glow: "rgba(251,191,36,0.26)"
+  },
+  "cyberpunk-crimson": {
+    background: "#0f050d",
+    foreground: "#ffe4e6",
+    primary: "#f43f5e",
+    secondary: "#e11d48",
+    accent: "#fb7185",
+    surface: "#1f0d18",
+    radius: "0.75rem",
+    glow: "rgba(244,63,94,0.45)"
+  },
+  "emerald-matrix": {
+    background: "#021a10",
+    foreground: "#ecfdf5",
+    primary: "#10b981",
+    secondary: "#059669",
+    accent: "#34d399",
+    surface: "#06291a",
+    radius: "1rem",
+    glow: "rgba(16,185,129,0.38)"
+  },
+  "nordic-frost": {
+    background: "#0b132b",
+    foreground: "#f0f9ff",
+    primary: "#38bdf8",
+    secondary: "#0284c7",
+    accent: "#7dd3fc",
+    surface: "#1c2541",
+    radius: "1.25rem",
+    glow: "rgba(56,189,248,0.32)"
+  },
+  "tokyo-night": {
+    background: "#1a1b26",
+    foreground: "#c0caf5",
+    primary: "#7aa2f7",
+    secondary: "#bb9af7",
+    accent: "#7dcfff",
+    surface: "#24283b",
+    radius: "1rem",
+    glow: "rgba(122,162,247,0.36)"
   }
 };
 function resolveTheme(theme = "aurora") {
-  return themePresets[theme];
+  return themePresets[theme] || themePresets.aurora;
 }
 function listThemes() {
   return Object.keys(themePresets);
 }
+function getThemeCSSVariables(theme = "aurora") {
+  const tokens = resolveTheme(theme);
+  return {
+    "--background": tokens.background,
+    "--foreground": tokens.foreground,
+    "--primary": tokens.primary,
+    "--secondary": tokens.secondary,
+    "--accent": tokens.accent,
+    "--surface": tokens.surface,
+    "--radius": tokens.radius,
+    "--glow": tokens.glow
+  };
+}
+function applyTheme(theme = "aurora") {
+  if (typeof document === "undefined") return;
+  const vars = getThemeCSSVariables(theme);
+  const root = document.documentElement;
+  Object.entries(vars).forEach(([key, value]) => {
+    root.style.setProperty(key, value);
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  applyTheme,
+  getThemeCSSVariables,
   listThemes,
   resolveTheme,
   themePresets

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type ThemeName = 'aurora' | 'obsidian' | 'holographic' | 'soft-minimal' | 'neon-futuristic' | 'sunset-glow' | 'midnight-gold';
+export type ThemeName = 'aurora' | 'obsidian' | 'holographic' | 'soft-minimal' | 'neon-futuristic' | 'sunset-glow' | 'midnight-gold' | 'cyberpunk-crimson' | 'emerald-matrix' | 'nordic-frost' | 'tokyo-night';
 export type ThemeTokens = {
     background: string;
     foreground: string;
@@ -12,3 +12,5 @@ export type ThemeTokens = {
 export declare const themePresets: Record<ThemeName, ThemeTokens>;
 export declare function resolveTheme(theme?: ThemeName): ThemeTokens;
 export declare function listThemes(): ThemeName[];
+export declare function getThemeCSSVariables(theme?: ThemeName): Record<string, string>;
+export declare function applyTheme(theme?: ThemeName): void;

package/dist/index.js

@@ -69,15 +69,78 @@ var themePresets = {
     surface: "#111827",
     radius: "1rem",
     glow: "rgba(251,191,36,0.26)"
+  },
+  "cyberpunk-crimson": {
+    background: "#0f050d",
+    foreground: "#ffe4e6",
+    primary: "#f43f5e",
+    secondary: "#e11d48",
+    accent: "#fb7185",
+    surface: "#1f0d18",
+    radius: "0.75rem",
+    glow: "rgba(244,63,94,0.45)"
+  },
+  "emerald-matrix": {
+    background: "#021a10",
+    foreground: "#ecfdf5",
+    primary: "#10b981",
+    secondary: "#059669",
+    accent: "#34d399",
+    surface: "#06291a",
+    radius: "1rem",
+    glow: "rgba(16,185,129,0.38)"
+  },
+  "nordic-frost": {
+    background: "#0b132b",
+    foreground: "#f0f9ff",
+    primary: "#38bdf8",
+    secondary: "#0284c7",
+    accent: "#7dd3fc",
+    surface: "#1c2541",
+    radius: "1.25rem",
+    glow: "rgba(56,189,248,0.32)"
+  },
+  "tokyo-night": {
+    background: "#1a1b26",
+    foreground: "#c0caf5",
+    primary: "#7aa2f7",
+    secondary: "#bb9af7",
+    accent: "#7dcfff",
+    surface: "#24283b",
+    radius: "1rem",
+    glow: "rgba(122,162,247,0.36)"
   }
 };
 function resolveTheme(theme = "aurora") {
-  return themePresets[theme];
+  return themePresets[theme] || themePresets.aurora;
 }
 function listThemes() {
   return Object.keys(themePresets);
 }
+function getThemeCSSVariables(theme = "aurora") {
+  const tokens = resolveTheme(theme);
+  return {
+    "--background": tokens.background,
+    "--foreground": tokens.foreground,
+    "--primary": tokens.primary,
+    "--secondary": tokens.secondary,
+    "--accent": tokens.accent,
+    "--surface": tokens.surface,
+    "--radius": tokens.radius,
+    "--glow": tokens.glow
+  };
+}
+function applyTheme(theme = "aurora") {
+  if (typeof document === "undefined") return;
+  const vars = getThemeCSSVariables(theme);
+  const root = document.documentElement;
+  Object.entries(vars).forEach(([key, value]) => {
+    root.style.setProperty(key, value);
+  });
+}
 export {
+  applyTheme,
+  getThemeCSSVariables,
   listThemes,
   resolveTheme,
   themePresets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackvibe-studio/themes",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Theme tokens and presets for StackVibe UI.",
   "repository": {