@stackvibe-studio/themes 0.1.0 → 0.2.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.
- package/README.md +35 -0
- package/dist/index.cjs +25 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +24 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# @stackvibe-studio/themes
|
|
2
|
+
|
|
3
|
+
Theme tokens and presets for product-grade visual systems.
|
|
4
|
+
|
|
5
|
+
## Highlights
|
|
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
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @stackvibe-studio/themes
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Example
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { resolveTheme, listThemes } from '@stackvibe-studio/themes';
|
|
22
|
+
|
|
23
|
+
const palette = resolveTheme('aurora');
|
|
24
|
+
console.log(listThemes());
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Available themes
|
|
28
|
+
|
|
29
|
+
- aurora
|
|
30
|
+
- obsidian
|
|
31
|
+
- holographic
|
|
32
|
+
- soft-minimal
|
|
33
|
+
- neon-futuristic
|
|
34
|
+
- sunset-glow
|
|
35
|
+
- midnight-gold
|
package/dist/index.cjs
CHANGED
|
@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
+
listThemes: () => listThemes,
|
|
23
24
|
resolveTheme: () => resolveTheme,
|
|
24
25
|
themePresets: () => themePresets
|
|
25
26
|
});
|
|
@@ -74,13 +75,37 @@ var themePresets = {
|
|
|
74
75
|
surface: "#0f172a",
|
|
75
76
|
radius: "1.4rem",
|
|
76
77
|
glow: "rgba(34,211,238,0.35)"
|
|
78
|
+
},
|
|
79
|
+
"sunset-glow": {
|
|
80
|
+
background: "#1c0b13",
|
|
81
|
+
foreground: "#fff7ed",
|
|
82
|
+
primary: "#fb7185",
|
|
83
|
+
secondary: "#fbbf24",
|
|
84
|
+
accent: "#fdba74",
|
|
85
|
+
surface: "#2b1221",
|
|
86
|
+
radius: "1.1rem",
|
|
87
|
+
glow: "rgba(251,113,133,0.35)"
|
|
88
|
+
},
|
|
89
|
+
"midnight-gold": {
|
|
90
|
+
background: "#0b1220",
|
|
91
|
+
foreground: "#f8fafc",
|
|
92
|
+
primary: "#fbbf24",
|
|
93
|
+
secondary: "#a78bfa",
|
|
94
|
+
accent: "#f59e0b",
|
|
95
|
+
surface: "#111827",
|
|
96
|
+
radius: "1rem",
|
|
97
|
+
glow: "rgba(251,191,36,0.26)"
|
|
77
98
|
}
|
|
78
99
|
};
|
|
79
100
|
function resolveTheme(theme = "aurora") {
|
|
80
101
|
return themePresets[theme];
|
|
81
102
|
}
|
|
103
|
+
function listThemes() {
|
|
104
|
+
return Object.keys(themePresets);
|
|
105
|
+
}
|
|
82
106
|
// Annotate the CommonJS export names for ESM import in node:
|
|
83
107
|
0 && (module.exports = {
|
|
108
|
+
listThemes,
|
|
84
109
|
resolveTheme,
|
|
85
110
|
themePresets
|
|
86
111
|
});
|
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';
|
|
2
2
|
export type ThemeTokens = {
|
|
3
3
|
background: string;
|
|
4
4
|
foreground: string;
|
|
@@ -11,3 +11,4 @@ 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[];
|
package/dist/index.js
CHANGED
|
@@ -49,12 +49,36 @@ 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)"
|
|
52
72
|
}
|
|
53
73
|
};
|
|
54
74
|
function resolveTheme(theme = "aurora") {
|
|
55
75
|
return themePresets[theme];
|
|
56
76
|
}
|
|
77
|
+
function listThemes() {
|
|
78
|
+
return Object.keys(themePresets);
|
|
79
|
+
}
|
|
57
80
|
export {
|
|
81
|
+
listThemes,
|
|
58
82
|
resolveTheme,
|
|
59
83
|
themePresets
|
|
60
84
|
};
|