phaser-wind 0.3.0 → 0.4.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 +136 -97
- package/dist/components/column.d.ts +1 -0
- package/dist/components/column.d.ts.map +1 -0
- package/dist/components/column.js +7 -0
- package/dist/components/column.js.map +1 -0
- package/dist/core/color.d.ts +149 -282
- package/dist/core/color.d.ts.map +1 -1
- package/dist/core/color.js +117 -298
- package/dist/core/color.js.map +1 -1
- package/dist/core/color.spec.js +46 -55
- package/dist/core/color.spec.js.map +1 -1
- package/dist/core/font-size.d.ts +36 -15
- package/dist/core/font-size.d.ts.map +1 -1
- package/dist/core/font-size.js +42 -47
- package/dist/core/font-size.js.map +1 -1
- package/dist/core/font-size.spec.js +55 -43
- package/dist/core/font-size.spec.js.map +1 -1
- package/dist/core/font.d.ts +18 -91
- package/dist/core/font.d.ts.map +1 -1
- package/dist/core/font.js +33 -174
- package/dist/core/font.js.map +1 -1
- package/dist/core/font.spec.js +45 -49
- package/dist/core/font.spec.js.map +1 -1
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js +1 -1
- package/dist/core/{pallete.d.ts → palette.d.ts} +2 -2
- package/dist/core/{pallete.d.ts.map → palette.d.ts.map} +1 -1
- package/dist/core/{pallete.js → palette.js} +2 -2
- package/dist/core/{pallete.js.map → palette.js.map} +1 -1
- package/dist/core/radius.d.ts +19 -24
- package/dist/core/radius.d.ts.map +1 -1
- package/dist/core/radius.js +20 -28
- package/dist/core/radius.js.map +1 -1
- package/dist/core/radius.spec.js +28 -33
- package/dist/core/radius.spec.js.map +1 -1
- package/dist/core/shadow.d.ts +18 -10
- package/dist/core/shadow.d.ts.map +1 -1
- package/dist/core/shadow.js +29 -19
- package/dist/core/shadow.js.map +1 -1
- package/dist/core/shadow.spec.d.ts +2 -0
- package/dist/core/shadow.spec.d.ts.map +1 -0
- package/dist/core/shadow.spec.js +21 -0
- package/dist/core/shadow.spec.js.map +1 -0
- package/dist/core/spacing.d.ts +22 -29
- package/dist/core/spacing.d.ts.map +1 -1
- package/dist/core/spacing.js +27 -39
- package/dist/core/spacing.js.map +1 -1
- package/dist/core/spacing.spec.js +18 -29
- package/dist/core/spacing.spec.js.map +1 -1
- package/dist/exceptions.d.ts +1 -0
- package/dist/exceptions.d.ts.map +1 -0
- package/dist/exceptions.js +2 -0
- package/dist/exceptions.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/plugin/index.d.ts +2 -0
- package/dist/plugin/index.d.ts.map +1 -0
- package/dist/plugin/index.js +2 -0
- package/dist/plugin/index.js.map +1 -0
- package/dist/plugin/plugin.d.ts +71 -0
- package/dist/plugin/plugin.d.ts.map +1 -0
- package/dist/plugin/plugin.js +91 -0
- package/dist/plugin/plugin.js.map +1 -0
- package/dist/theme/theme-config.d.ts +24 -48
- package/dist/theme/theme-config.d.ts.map +1 -1
- package/dist/theme/theme-config.js +4 -1
- package/dist/theme/theme-config.js.map +1 -1
- package/dist/theme/theme-manager.d.ts +1 -106
- package/dist/theme/theme-manager.d.ts.map +1 -1
- package/dist/theme/theme-manager.js +1 -187
- package/dist/theme/theme-manager.js.map +1 -1
- package/dist/theme/type.d.ts +48 -0
- package/dist/theme/type.d.ts.map +1 -1
- package/dist/theme/type.js +1 -1
- package/package.json +3 -3
|
@@ -1,190 +1,4 @@
|
|
|
1
1
|
import merge from 'lodash/merge';
|
|
2
|
-
import {
|
|
3
|
-
/**
|
|
4
|
-
* Global theme manager for Phaser Wind
|
|
5
|
-
* Handles theme registration, switching, and token resolution with nested object support
|
|
6
|
-
*/
|
|
7
|
-
class ThemeManagerClass {
|
|
8
|
-
currentTheme = defaultLightTheme;
|
|
9
|
-
registeredThemes = new Map();
|
|
10
|
-
listeners = [];
|
|
11
|
-
/**
|
|
12
|
-
* Initialize the theme manager with a default theme
|
|
13
|
-
*/
|
|
14
|
-
init(theme, type = 'light') {
|
|
15
|
-
this.currentTheme = merge({}, type === 'light' ? defaultLightTheme : defaultDarkTheme, theme);
|
|
16
|
-
this.registerTheme('default', theme);
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Register a named theme
|
|
20
|
-
*/
|
|
21
|
-
registerTheme(name, theme) {
|
|
22
|
-
this.registeredThemes.set(name, theme);
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* Switch to a registered theme by name
|
|
26
|
-
*/
|
|
27
|
-
setTheme(name) {
|
|
28
|
-
const theme = this.registeredThemes.get(name);
|
|
29
|
-
if (!theme) {
|
|
30
|
-
// eslint-disable-next-line no-console
|
|
31
|
-
console.warn(`[Phaser Wind] Theme "${name}" not found. Available themes: ${Array.from(this.registeredThemes.keys()).join(', ')}`);
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
this.currentTheme = theme;
|
|
35
|
-
this.notifyListeners();
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Set theme directly with object by merging with current theme
|
|
39
|
-
* This method will merge the provided theme object with the current theme:
|
|
40
|
-
* - Existing properties will be replaced with new values
|
|
41
|
-
* - New properties will be added
|
|
42
|
-
* - Properties not specified in the new theme will be preserved
|
|
43
|
-
*
|
|
44
|
-
* Example:
|
|
45
|
-
* Current theme: { colors: { primary: 'blue', secondary: 'gray' } }
|
|
46
|
-
* New theme: { colors: { primary: 'red', accent: 'yellow' } }
|
|
47
|
-
* Result: { colors: { primary: 'red', secondary: 'gray', accent: 'yellow' } }
|
|
48
|
-
*/
|
|
49
|
-
setThemeObject(theme) {
|
|
50
|
-
this.currentTheme = merge({}, this.currentTheme, theme);
|
|
51
|
-
this.notifyListeners();
|
|
52
|
-
}
|
|
53
|
-
/**
|
|
54
|
-
* Get the current theme
|
|
55
|
-
*/
|
|
56
|
-
getCurrentTheme() {
|
|
57
|
-
return this.currentTheme;
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* Get a nested token using dot notation (e.g., 'colors.primary', 'fonts.display')
|
|
61
|
-
* @param path - The path to the token (e.g., 'colors.primary')
|
|
62
|
-
* @returns The resolved token value
|
|
63
|
-
*/
|
|
64
|
-
getToken(path) {
|
|
65
|
-
return this.getNestedValue(this.currentTheme, path);
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* Check if a nested token exists using dot notation
|
|
69
|
-
* @param path - The path to check (e.g., 'colors.primary')
|
|
70
|
-
* @returns True if the token exists
|
|
71
|
-
*/
|
|
72
|
-
hasToken(path) {
|
|
73
|
-
return this.getNestedValue(this.currentTheme, path) !== undefined;
|
|
74
|
-
}
|
|
75
|
-
/**
|
|
76
|
-
* Get a token with type safety for specific namespaces
|
|
77
|
-
*/
|
|
78
|
-
getColorToken(key) {
|
|
79
|
-
const value = this.getToken(`colors.${key}`);
|
|
80
|
-
return typeof value === 'string' ? value : undefined;
|
|
81
|
-
}
|
|
82
|
-
/**
|
|
83
|
-
* Get a font token
|
|
84
|
-
*/
|
|
85
|
-
getFontToken(key) {
|
|
86
|
-
const value = this.getToken(`fonts.${key}`);
|
|
87
|
-
return typeof value === 'string' ? value : undefined;
|
|
88
|
-
}
|
|
89
|
-
/**
|
|
90
|
-
* Get a spacing token
|
|
91
|
-
*/
|
|
92
|
-
getSpacingToken(key) {
|
|
93
|
-
const value = this.getToken(`spacing.${key}`);
|
|
94
|
-
return typeof value === 'number' ? value : undefined;
|
|
95
|
-
}
|
|
96
|
-
/**
|
|
97
|
-
* Get a typography token
|
|
98
|
-
*/
|
|
99
|
-
getTypographyToken(key) {
|
|
100
|
-
return this.getToken(`typography.${key}`);
|
|
101
|
-
}
|
|
102
|
-
/**
|
|
103
|
-
* Get an effect token
|
|
104
|
-
*/
|
|
105
|
-
getEffectToken(key) {
|
|
106
|
-
return this.getToken(`effects.${key}`);
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Resolve a theme reference (e.g., 'colors.primary' -> actual color value)
|
|
110
|
-
* This allows theme tokens to reference other theme tokens
|
|
111
|
-
*/
|
|
112
|
-
resolveToken(value) {
|
|
113
|
-
if (typeof value === 'string' && value.includes('.')) {
|
|
114
|
-
// Check if it's a theme reference
|
|
115
|
-
const resolved = this.getToken(value);
|
|
116
|
-
if (resolved !== undefined) {
|
|
117
|
-
// Recursively resolve in case of nested references
|
|
118
|
-
return typeof resolved === 'string' && resolved.includes('.')
|
|
119
|
-
? this.resolveToken(resolved)
|
|
120
|
-
: resolved;
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
return value;
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Listen for theme changes
|
|
127
|
-
*/
|
|
128
|
-
onThemeChange(listener) {
|
|
129
|
-
this.listeners.push(listener);
|
|
130
|
-
// Return unsubscribe function
|
|
131
|
-
return () => {
|
|
132
|
-
const index = this.listeners.indexOf(listener);
|
|
133
|
-
if (index > -1) {
|
|
134
|
-
this.listeners.splice(index, 1);
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* Get all registered theme names
|
|
140
|
-
*/
|
|
141
|
-
getRegisteredThemes() {
|
|
142
|
-
return Array.from(this.registeredThemes.keys());
|
|
143
|
-
}
|
|
144
|
-
/**
|
|
145
|
-
* Create a new theme based on the current one with overrides
|
|
146
|
-
*/
|
|
147
|
-
extendCurrentTheme(overrides) {
|
|
148
|
-
return { ...this.currentTheme, ...overrides };
|
|
149
|
-
}
|
|
150
|
-
/**
|
|
151
|
-
* Reset to default theme
|
|
152
|
-
*/
|
|
153
|
-
reset() {
|
|
154
|
-
const defaultTheme = this.registeredThemes.get('default');
|
|
155
|
-
if (defaultTheme) {
|
|
156
|
-
this.currentTheme = defaultTheme;
|
|
157
|
-
this.notifyListeners();
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
/**
|
|
161
|
-
* Clear all registered themes and reset to default
|
|
162
|
-
*/
|
|
163
|
-
clear() {
|
|
164
|
-
this.registeredThemes.clear();
|
|
165
|
-
this.currentTheme = defaultLightTheme;
|
|
166
|
-
this.registerTheme('default', defaultLightTheme);
|
|
167
|
-
this.listeners = [];
|
|
168
|
-
}
|
|
169
|
-
notifyListeners() {
|
|
170
|
-
this.listeners.forEach(listener => listener(this.currentTheme));
|
|
171
|
-
}
|
|
172
|
-
/**
|
|
173
|
-
* Helper method to get nested values using dot notation
|
|
174
|
-
* @param obj - The object to search in
|
|
175
|
-
* @param path - The dot notation path (e.g., 'colors.primary')
|
|
176
|
-
* @returns The value at the path or undefined
|
|
177
|
-
*/
|
|
178
|
-
getNestedValue(obj, path) {
|
|
179
|
-
return path.split('.').reduce((current, key) => {
|
|
180
|
-
return current && typeof current === 'object'
|
|
181
|
-
? current[key]
|
|
182
|
-
: undefined;
|
|
183
|
-
}, obj);
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
// Export singleton instance
|
|
187
|
-
export const ThemeManager = new ThemeManagerClass();
|
|
188
|
-
// Type helper for creating themes with proper typing
|
|
2
|
+
import { defaultLightTheme } from './theme-config';
|
|
189
3
|
export const createTheme = (theme) => merge({}, defaultLightTheme, theme);
|
|
190
4
|
//# sourceMappingURL=theme-manager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-manager.js","sourceRoot":"","sources":["../../src/theme/theme-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,cAAc,CAAC;AAEjC,OAAO,
|
|
1
|
+
{"version":3,"file":"theme-manager.js","sourceRoot":"","sources":["../../src/theme/theme-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,cAAc,CAAC;AAEjC,OAAO,EAAsB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEvE,MAAM,CAAC,MAAM,WAAW,GAAG,CAA0B,KAAQ,EAAK,EAAE,CAClE,KAAK,CAAC,EAAE,EAAE,iBAAiB,EAAE,KAAK,CAAC,CAAC"}
|
package/dist/theme/type.d.ts
CHANGED
|
@@ -1 +1,49 @@
|
|
|
1
|
+
import type { Game } from 'phaser';
|
|
2
|
+
import type { ColorToken } from '../core/color';
|
|
3
|
+
import type { FontSizeKey } from '../core/font-size';
|
|
4
|
+
export type PhaserWithTheme<T> = Game & {
|
|
5
|
+
theme: T;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Font configuration structure
|
|
9
|
+
*/
|
|
10
|
+
export type FontConfig = {
|
|
11
|
+
[key: string]: string;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Color configuration structure
|
|
15
|
+
*/
|
|
16
|
+
export type ColorConfig = {
|
|
17
|
+
[key: string]: ColorToken | string;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Spacing configuration structure (following Tailwind spacing scale)
|
|
21
|
+
*/
|
|
22
|
+
export type SpacingConfig = {
|
|
23
|
+
[key: string]: number;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Typography configuration structure
|
|
27
|
+
*/
|
|
28
|
+
export type TypographyConfig = {
|
|
29
|
+
[key: string]: {
|
|
30
|
+
fontSize: FontSizeKey | string;
|
|
31
|
+
fontFamily?: string;
|
|
32
|
+
fontWeight?: number | string;
|
|
33
|
+
lineHeight?: number | string;
|
|
34
|
+
letterSpacing?: number | string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* Shadow/Effect configuration structure
|
|
39
|
+
*/
|
|
40
|
+
export type EffectConfig = {
|
|
41
|
+
[key: string]: {
|
|
42
|
+
blur?: number;
|
|
43
|
+
offsetX?: number;
|
|
44
|
+
offsetY?: number;
|
|
45
|
+
color?: ColorToken | string;
|
|
46
|
+
alpha?: number;
|
|
47
|
+
};
|
|
48
|
+
};
|
|
1
49
|
//# sourceMappingURL=type.d.ts.map
|
package/dist/theme/type.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/theme/type.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/theme/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,GAAG;IACtC,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,QAAQ,EAAE,WAAW,GAAG,MAAM,CAAC;QAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;QAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC"}
|
package/dist/theme/type.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=type.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "phaser-wind",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Wind theme like Tailwind CSS for Phaser games",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"homepage": "https://github.com/renatocassino/phaser-toolkit/tree/main/packages/phaser-wind#readme",
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@eslint-recommended/eslint-config": "^28.0.0",
|
|
38
|
-
"@types/node": "^24.2.
|
|
38
|
+
"@types/node": "^24.2.1",
|
|
39
39
|
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
|
40
40
|
"@typescript-eslint/parser": "^6.15.0",
|
|
41
41
|
"eslint": "^8.55.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"vitest": "^3.2.4"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
|
-
"phaser": "
|
|
55
|
+
"phaser": "*"
|
|
56
56
|
},
|
|
57
57
|
"publishConfig": {
|
|
58
58
|
"access": "public"
|