@stackvibe-studio/themes 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +96 -0
  2. package/dist/index.cjs +91 -1
  3. package/dist/index.d.ts +4 -1
  4. package/dist/index.js +88 -1
  5. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,96 @@
1
+ # @stackvibe-studio/themes
2
+
3
+ Dynamic theme engine, design tokens, and presets for product-grade visual design systems.
4
+
5
+ Seamlessly toggle between 11 curated aesthetic palettes or inject theme CSS variables dynamically at runtime into your application root.
6
+
7
+ [![npm version](https://img.shields.io/npm/v/@stackvibe-studio/themes.svg)](https://www.npmjs.com/package/@stackvibe-studio/themes)
8
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
9
+
10
+ ## Features
11
+
12
+ - **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`).
13
+ - **Complete Design Tokens**: Backgrounds, surfaces, borders, text hierarchies, primary brand accents, glow values, and border radiuses.
14
+ - **Runtime Theme Application**: Use `applyTheme(themeName)` to instantly apply tokens to `document.documentElement` or any React DOM container.
15
+ - **CSS Variable Extraction**: Export ready-to-use CSS custom properties with `getThemeCSSVariables()`.
16
+ - **Zero Dependencies**: Lightweight TypeScript bundle with zero external dependencies.
17
+
18
+ ## Installation
19
+
20
+ ```bash
21
+ pnpm add @stackvibe-studio/themes
22
+ # or
23
+ npm install @stackvibe-studio/themes
24
+ ```
25
+
26
+ ## Available Presets
27
+
28
+ 1. `aurora` - Northern lights iridescent glow with vibrant blues and violets.
29
+ 2. `obsidian` - Ultra-deep dark mode with sharp contrast and sleek zinc surfaces.
30
+ 3. `holographic` - Iridescent rainbow highlights for Web3 and creative tools.
31
+ 4. `soft-minimal` - Light, serene, clean enterprise aesthetic.
32
+ 5. `neon-futuristic` - Electric cyan and neon green cyber palette.
33
+ 6. `sunset-glow` - Warm amber, radiant peach, and deep sunset magenta.
34
+ 7. `midnight-gold` - Luxurious gold accents against deep royal navy.
35
+ 8. `cyberpunk-crimson` - Striking crimson red and high-voltage neon red on obsidian.
36
+ 9. `emerald-matrix` - High-tech matrix terminal emerald green.
37
+ 10. `nordic-frost` - Crisp arctic ice blue and slate minimalism.
38
+ 11. `tokyo-night` - Rich deep indigo, lavender, and pastel neon accents.
39
+
40
+ ## API & Usage
41
+
42
+ ### 1. Apply Theme at Runtime
43
+
44
+ ```tsx
45
+ import { useEffect } from 'react';
46
+ import { applyTheme } from '@stackvibe-studio/themes';
47
+
48
+ export function ThemeSelector({ activeTheme }: { activeTheme: string }) {
49
+ useEffect(() => {
50
+ applyTheme(activeTheme);
51
+ }, [activeTheme]);
52
+
53
+ return <div>Active theme: {activeTheme}</div>;
54
+ }
55
+ ```
56
+
57
+ ### 2. Inspect Palette Tokens
58
+
59
+ ```ts
60
+ import { resolveTheme, listThemes } from '@stackvibe-studio/themes';
61
+
62
+ // List all 11 registered themes
63
+ const themes = listThemes();
64
+
65
+ // Resolve tokens for a specific theme
66
+ const theme = resolveTheme('tokyo-night');
67
+ console.log(theme.tokens.primary); // "#818cf8"
68
+ console.log(theme.tokens.surface); // "#1a1b26"
69
+ ```
70
+
71
+ ### 3. Extract CSS Variables
72
+
73
+ ```ts
74
+ import { getThemeCSSVariables } from '@stackvibe-studio/themes';
75
+
76
+ const cssVars = getThemeCSSVariables('cyberpunk-crimson');
77
+ /*
78
+ {
79
+ "--sv-bg": "#09090b",
80
+ "--sv-surface": "#18181b",
81
+ "--sv-surface-hover": "#27272a",
82
+ "--sv-border": "#3f3f46",
83
+ "--sv-text": "#fafafa",
84
+ "--sv-text-muted": "#a1a1aa",
85
+ "--sv-primary": "#f43f5e",
86
+ "--sv-primary-hover": "#e11d48",
87
+ "--sv-accent": "#fb7185",
88
+ "--sv-glow": "0 0 32px rgba(244, 63, 94, 0.4)",
89
+ "--sv-radius": "10px"
90
+ }
91
+ */
92
+ ```
93
+
94
+ ## License
95
+
96
+ MIT © [StackVibe Studio](https://github.com/StackVibe-Studio/stackvibe-ui)
package/dist/index.cjs CHANGED
@@ -20,6 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/index.ts
21
21
  var index_exports = {};
22
22
  __export(index_exports, {
23
+ applyTheme: () => applyTheme,
24
+ getThemeCSSVariables: () => getThemeCSSVariables,
25
+ listThemes: () => listThemes,
23
26
  resolveTheme: () => resolveTheme,
24
27
  themePresets: () => themePresets
25
28
  });
@@ -74,13 +77,100 @@ var themePresets = {
74
77
  surface: "#0f172a",
75
78
  radius: "1.4rem",
76
79
  glow: "rgba(34,211,238,0.35)"
80
+ },
81
+ "sunset-glow": {
82
+ background: "#1c0b13",
83
+ foreground: "#fff7ed",
84
+ primary: "#fb7185",
85
+ secondary: "#fbbf24",
86
+ accent: "#fdba74",
87
+ surface: "#2b1221",
88
+ radius: "1.1rem",
89
+ glow: "rgba(251,113,133,0.35)"
90
+ },
91
+ "midnight-gold": {
92
+ background: "#0b1220",
93
+ foreground: "#f8fafc",
94
+ primary: "#fbbf24",
95
+ secondary: "#a78bfa",
96
+ accent: "#f59e0b",
97
+ surface: "#111827",
98
+ radius: "1rem",
99
+ glow: "rgba(251,191,36,0.26)"
100
+ },
101
+ "cyberpunk-crimson": {
102
+ background: "#0f050d",
103
+ foreground: "#ffe4e6",
104
+ primary: "#f43f5e",
105
+ secondary: "#e11d48",
106
+ accent: "#fb7185",
107
+ surface: "#1f0d18",
108
+ radius: "0.75rem",
109
+ glow: "rgba(244,63,94,0.45)"
110
+ },
111
+ "emerald-matrix": {
112
+ background: "#021a10",
113
+ foreground: "#ecfdf5",
114
+ primary: "#10b981",
115
+ secondary: "#059669",
116
+ accent: "#34d399",
117
+ surface: "#06291a",
118
+ radius: "1rem",
119
+ glow: "rgba(16,185,129,0.38)"
120
+ },
121
+ "nordic-frost": {
122
+ background: "#0b132b",
123
+ foreground: "#f0f9ff",
124
+ primary: "#38bdf8",
125
+ secondary: "#0284c7",
126
+ accent: "#7dd3fc",
127
+ surface: "#1c2541",
128
+ radius: "1.25rem",
129
+ glow: "rgba(56,189,248,0.32)"
130
+ },
131
+ "tokyo-night": {
132
+ background: "#1a1b26",
133
+ foreground: "#c0caf5",
134
+ primary: "#7aa2f7",
135
+ secondary: "#bb9af7",
136
+ accent: "#7dcfff",
137
+ surface: "#24283b",
138
+ radius: "1rem",
139
+ glow: "rgba(122,162,247,0.36)"
77
140
  }
78
141
  };
79
142
  function resolveTheme(theme = "aurora") {
80
- return themePresets[theme];
143
+ return themePresets[theme] || themePresets.aurora;
144
+ }
145
+ function listThemes() {
146
+ return Object.keys(themePresets);
147
+ }
148
+ function getThemeCSSVariables(theme = "aurora") {
149
+ const tokens = resolveTheme(theme);
150
+ return {
151
+ "--background": tokens.background,
152
+ "--foreground": tokens.foreground,
153
+ "--primary": tokens.primary,
154
+ "--secondary": tokens.secondary,
155
+ "--accent": tokens.accent,
156
+ "--surface": tokens.surface,
157
+ "--radius": tokens.radius,
158
+ "--glow": tokens.glow
159
+ };
160
+ }
161
+ function applyTheme(theme = "aurora") {
162
+ if (typeof document === "undefined") return;
163
+ const vars = getThemeCSSVariables(theme);
164
+ const root = document.documentElement;
165
+ Object.entries(vars).forEach(([key, value]) => {
166
+ root.style.setProperty(key, value);
167
+ });
81
168
  }
82
169
  // Annotate the CommonJS export names for ESM import in node:
83
170
  0 && (module.exports = {
171
+ applyTheme,
172
+ getThemeCSSVariables,
173
+ listThemes,
84
174
  resolveTheme,
85
175
  themePresets
86
176
  });
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type ThemeName = 'aurora' | 'obsidian' | 'holographic' | 'soft-minimal' | 'neon-futuristic';
1
+ export type ThemeName = 'aurora' | 'obsidian' | 'holographic' | 'soft-minimal' | 'neon-futuristic' | 'sunset-glow' | 'midnight-gold' | 'cyberpunk-crimson' | 'emerald-matrix' | 'nordic-frost' | 'tokyo-night';
2
2
  export type ThemeTokens = {
3
3
  background: string;
4
4
  foreground: string;
@@ -11,3 +11,6 @@ export type ThemeTokens = {
11
11
  };
12
12
  export declare const themePresets: Record<ThemeName, ThemeTokens>;
13
13
  export declare function resolveTheme(theme?: ThemeName): ThemeTokens;
14
+ export declare function listThemes(): ThemeName[];
15
+ export declare function getThemeCSSVariables(theme?: ThemeName): Record<string, string>;
16
+ export declare function applyTheme(theme?: ThemeName): void;
package/dist/index.js CHANGED
@@ -49,12 +49,99 @@ var themePresets = {
49
49
  surface: "#0f172a",
50
50
  radius: "1.4rem",
51
51
  glow: "rgba(34,211,238,0.35)"
52
+ },
53
+ "sunset-glow": {
54
+ background: "#1c0b13",
55
+ foreground: "#fff7ed",
56
+ primary: "#fb7185",
57
+ secondary: "#fbbf24",
58
+ accent: "#fdba74",
59
+ surface: "#2b1221",
60
+ radius: "1.1rem",
61
+ glow: "rgba(251,113,133,0.35)"
62
+ },
63
+ "midnight-gold": {
64
+ background: "#0b1220",
65
+ foreground: "#f8fafc",
66
+ primary: "#fbbf24",
67
+ secondary: "#a78bfa",
68
+ accent: "#f59e0b",
69
+ surface: "#111827",
70
+ radius: "1rem",
71
+ glow: "rgba(251,191,36,0.26)"
72
+ },
73
+ "cyberpunk-crimson": {
74
+ background: "#0f050d",
75
+ foreground: "#ffe4e6",
76
+ primary: "#f43f5e",
77
+ secondary: "#e11d48",
78
+ accent: "#fb7185",
79
+ surface: "#1f0d18",
80
+ radius: "0.75rem",
81
+ glow: "rgba(244,63,94,0.45)"
82
+ },
83
+ "emerald-matrix": {
84
+ background: "#021a10",
85
+ foreground: "#ecfdf5",
86
+ primary: "#10b981",
87
+ secondary: "#059669",
88
+ accent: "#34d399",
89
+ surface: "#06291a",
90
+ radius: "1rem",
91
+ glow: "rgba(16,185,129,0.38)"
92
+ },
93
+ "nordic-frost": {
94
+ background: "#0b132b",
95
+ foreground: "#f0f9ff",
96
+ primary: "#38bdf8",
97
+ secondary: "#0284c7",
98
+ accent: "#7dd3fc",
99
+ surface: "#1c2541",
100
+ radius: "1.25rem",
101
+ glow: "rgba(56,189,248,0.32)"
102
+ },
103
+ "tokyo-night": {
104
+ background: "#1a1b26",
105
+ foreground: "#c0caf5",
106
+ primary: "#7aa2f7",
107
+ secondary: "#bb9af7",
108
+ accent: "#7dcfff",
109
+ surface: "#24283b",
110
+ radius: "1rem",
111
+ glow: "rgba(122,162,247,0.36)"
52
112
  }
53
113
  };
54
114
  function resolveTheme(theme = "aurora") {
55
- return themePresets[theme];
115
+ return themePresets[theme] || themePresets.aurora;
116
+ }
117
+ function listThemes() {
118
+ return Object.keys(themePresets);
119
+ }
120
+ function getThemeCSSVariables(theme = "aurora") {
121
+ const tokens = resolveTheme(theme);
122
+ return {
123
+ "--background": tokens.background,
124
+ "--foreground": tokens.foreground,
125
+ "--primary": tokens.primary,
126
+ "--secondary": tokens.secondary,
127
+ "--accent": tokens.accent,
128
+ "--surface": tokens.surface,
129
+ "--radius": tokens.radius,
130
+ "--glow": tokens.glow
131
+ };
132
+ }
133
+ function applyTheme(theme = "aurora") {
134
+ if (typeof document === "undefined") return;
135
+ const vars = getThemeCSSVariables(theme);
136
+ const root = document.documentElement;
137
+ Object.entries(vars).forEach(([key, value]) => {
138
+ root.style.setProperty(key, value);
139
+ });
56
140
  }
57
141
  export {
142
+ applyTheme,
143
+ getThemeCSSVariables,
144
+ listThemes,
58
145
  resolveTheme,
59
146
  themePresets
60
147
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stackvibe-studio/themes",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "description": "Theme tokens and presets for StackVibe UI.",
6
6
  "repository": {