@stackvibe-studio/themes 0.2.0 → 0.3.1

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 +79 -18
  2. package/dist/index.cjs +75 -1
  3. package/dist/index.d.ts +3 -1
  4. package/dist/index.js +73 -1
  5. package/package.json +16 -1
package/README.md CHANGED
@@ -1,35 +1,96 @@
1
1
  # @stackvibe-studio/themes
2
2
 
3
- Theme tokens and presets for product-grade visual systems.
3
+ Dynamic theme engine, design tokens, and presets for product-grade visual design systems.
4
4
 
5
- ## Highlights
5
+ Seamlessly toggle between 11 curated aesthetic palettes or inject theme CSS variables dynamically at runtime into your application root.
6
6
 
7
- - Ready-to-use palettes for product surfaces
8
- - Shared token model for color, radius, and glow values
9
- - Easy runtime access via resolveTheme and listThemes
10
- - New in v0.2.0: sunset-glow and midnight-gold presets
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)
11
9
 
12
- ## Install
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
13
19
 
14
20
  ```bash
21
+ pnpm add @stackvibe-studio/themes
22
+ # or
15
23
  npm install @stackvibe-studio/themes
16
24
  ```
17
25
 
18
- ## Example
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
19
58
 
20
59
  ```ts
21
60
  import { resolveTheme, listThemes } from '@stackvibe-studio/themes';
22
61
 
23
- const palette = resolveTheme('aurora');
24
- console.log(listThemes());
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
+ */
25
92
  ```
26
93
 
27
- ## Available themes
94
+ ## License
28
95
 
29
- - aurora
30
- - obsidian
31
- - holographic
32
- - soft-minimal
33
- - neon-futuristic
34
- - sunset-glow
35
- - midnight-gold
96
+ MIT © [StackVibe Studio](https://github.com/StackVibe-Studio/stackvibe-ui)
package/dist/index.cjs CHANGED
@@ -20,6 +20,8 @@ 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,
23
25
  listThemes: () => listThemes,
24
26
  resolveTheme: () => resolveTheme,
25
27
  themePresets: () => themePresets
@@ -95,16 +97,88 @@ var themePresets = {
95
97
  surface: "#111827",
96
98
  radius: "1rem",
97
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)"
98
140
  }
99
141
  };
100
142
  function resolveTheme(theme = "aurora") {
101
- return themePresets[theme];
143
+ return themePresets[theme] || themePresets.aurora;
102
144
  }
103
145
  function listThemes() {
104
146
  return Object.keys(themePresets);
105
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
+ "--sv-background": tokens.background,
160
+ "--sv-foreground": tokens.foreground,
161
+ "--sv-primary": tokens.primary,
162
+ "--sv-secondary": tokens.secondary,
163
+ "--sv-accent": tokens.accent,
164
+ "--sv-surface": tokens.surface,
165
+ "--sv-radius": tokens.radius,
166
+ "--sv-glow": tokens.glow
167
+ };
168
+ }
169
+ function applyTheme(theme = "aurora") {
170
+ if (typeof document === "undefined") return;
171
+ const vars = getThemeCSSVariables(theme);
172
+ const root = document.documentElement;
173
+ root.setAttribute("data-theme", theme);
174
+ Object.entries(vars).forEach(([key, value]) => {
175
+ root.style.setProperty(key, value);
176
+ });
177
+ }
106
178
  // Annotate the CommonJS export names for ESM import in node:
107
179
  0 && (module.exports = {
180
+ applyTheme,
181
+ getThemeCSSVariables,
108
182
  listThemes,
109
183
  resolveTheme,
110
184
  themePresets
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type ThemeName = 'aurora' | 'obsidian' | 'holographic' | 'soft-minimal' | 'neon-futuristic' | 'sunset-glow' | 'midnight-gold';
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;
@@ -12,3 +12,5 @@ export type ThemeTokens = {
12
12
  export declare const themePresets: Record<ThemeName, ThemeTokens>;
13
13
  export declare function resolveTheme(theme?: ThemeName): ThemeTokens;
14
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
@@ -69,15 +69,87 @@ var themePresets = {
69
69
  surface: "#111827",
70
70
  radius: "1rem",
71
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)"
72
112
  }
73
113
  };
74
114
  function resolveTheme(theme = "aurora") {
75
- return themePresets[theme];
115
+ return themePresets[theme] || themePresets.aurora;
76
116
  }
77
117
  function listThemes() {
78
118
  return Object.keys(themePresets);
79
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
+ "--sv-background": tokens.background,
132
+ "--sv-foreground": tokens.foreground,
133
+ "--sv-primary": tokens.primary,
134
+ "--sv-secondary": tokens.secondary,
135
+ "--sv-accent": tokens.accent,
136
+ "--sv-surface": tokens.surface,
137
+ "--sv-radius": tokens.radius,
138
+ "--sv-glow": tokens.glow
139
+ };
140
+ }
141
+ function applyTheme(theme = "aurora") {
142
+ if (typeof document === "undefined") return;
143
+ const vars = getThemeCSSVariables(theme);
144
+ const root = document.documentElement;
145
+ root.setAttribute("data-theme", theme);
146
+ Object.entries(vars).forEach(([key, value]) => {
147
+ root.style.setProperty(key, value);
148
+ });
149
+ }
80
150
  export {
151
+ applyTheme,
152
+ getThemeCSSVariables,
81
153
  listThemes,
82
154
  resolveTheme,
83
155
  themePresets
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stackvibe-studio/themes",
3
- "version": "0.2.0",
3
+ "version": "0.3.1",
4
4
  "type": "module",
5
5
  "description": "Theme tokens and presets for StackVibe UI.",
6
6
  "repository": {
@@ -12,6 +12,21 @@
12
12
  "url": "https://github.com/StackVibe-Studio/stackvibe-ui/issues"
13
13
  },
14
14
  "license": "MIT",
15
+ "keywords": [
16
+ "themes",
17
+ "design-tokens",
18
+ "token-system",
19
+ "color-palettes",
20
+ "dark-mode",
21
+ "aurora",
22
+ "obsidian",
23
+ "cyberpunk",
24
+ "matrix",
25
+ "tokyo-night",
26
+ "css-variables",
27
+ "theme-switcher",
28
+ "stackvibe"
29
+ ],
15
30
  "main": "./dist/index.js",
16
31
  "types": "./dist/index.d.ts",
17
32
  "exports": {