pixelplay 1.0.6 → 1.0.7
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/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/server.d.mts +195 -0
- package/dist/server.d.ts +195 -0
- package/dist/server.js +1586 -0
- package/dist/server.js.map +1 -0
- package/dist/server.mjs +1557 -0
- package/dist/server.mjs.map +1 -0
- package/package.json +6 -1
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme tokens — semantic design tokens for the PixelPlay UI system.
|
|
3
|
+
*
|
|
4
|
+
* THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR THEMING.
|
|
5
|
+
* To swap the entire theme, replace `lightTheme` and `darkTheme` below with
|
|
6
|
+
* a new palette. All CSS custom properties are generated from these objects
|
|
7
|
+
* at runtime — no other file needs to change.
|
|
8
|
+
*
|
|
9
|
+
* Token names map 1-to-1 to CSS custom properties: `primary` → `--primary`.
|
|
10
|
+
* Use them in components via `var(--primary)`, `var(--on-surface)`, etc.
|
|
11
|
+
*/
|
|
12
|
+
type ThemeTokens = {
|
|
13
|
+
/** Main app background / base layer */
|
|
14
|
+
surface: string;
|
|
15
|
+
/** Sidebar or dimmed backgrounds */
|
|
16
|
+
"surface-dim": string;
|
|
17
|
+
/** High-emphasis background (modals, popovers) */
|
|
18
|
+
"surface-bright": string;
|
|
19
|
+
/** Cards — lowest elevation */
|
|
20
|
+
"surface-container-lowest": string;
|
|
21
|
+
/** Cards / Inset sections */
|
|
22
|
+
"surface-container-low": string;
|
|
23
|
+
/** Dashboard widgets / Main cards */
|
|
24
|
+
"surface-container": string;
|
|
25
|
+
/** Modals / Dialogs */
|
|
26
|
+
"surface-container-high": string;
|
|
27
|
+
/** Top App Bar / Focused elements */
|
|
28
|
+
"surface-container-highest": string;
|
|
29
|
+
/** Primary text / High-emphasis icons */
|
|
30
|
+
"on-surface": string;
|
|
31
|
+
/** Secondary text / Captions / Helper text */
|
|
32
|
+
"on-surface-variant": string;
|
|
33
|
+
/** Tooltip backgrounds / Snackbars */
|
|
34
|
+
"inverse-surface": string;
|
|
35
|
+
/** Tooltip text / Snackbar actions */
|
|
36
|
+
"inverse-on-surface": string;
|
|
37
|
+
/** Primary buttons / Active states */
|
|
38
|
+
primary: string;
|
|
39
|
+
/** Text on Primary buttons */
|
|
40
|
+
"on-primary": string;
|
|
41
|
+
/** Active menu item background */
|
|
42
|
+
"primary-container": string;
|
|
43
|
+
/** Text on active menu items */
|
|
44
|
+
"on-primary-container": string;
|
|
45
|
+
/** Inverse theme primary actions */
|
|
46
|
+
"inverse-primary": string;
|
|
47
|
+
/** Secondary buttons / Filter chips */
|
|
48
|
+
secondary: string;
|
|
49
|
+
/** Text on Secondary elements */
|
|
50
|
+
"on-secondary": string;
|
|
51
|
+
/** Selected toggle / chip background */
|
|
52
|
+
"secondary-container": string;
|
|
53
|
+
/** Text on selected toggle / chip */
|
|
54
|
+
"on-secondary-container": string;
|
|
55
|
+
/** Accent elements / Specific chart series */
|
|
56
|
+
tertiary: string;
|
|
57
|
+
/** Text on Tertiary elements */
|
|
58
|
+
"on-tertiary": string;
|
|
59
|
+
/** Highlighting specific dashboard metrics */
|
|
60
|
+
"tertiary-container": string;
|
|
61
|
+
/** Text on tertiary metric background */
|
|
62
|
+
"on-tertiary-container": string;
|
|
63
|
+
/** Input borders / Card strokes */
|
|
64
|
+
outline: string;
|
|
65
|
+
/** Dividers / Table row separators */
|
|
66
|
+
"outline-variant": string;
|
|
67
|
+
/** Modal / Drawer backdrop */
|
|
68
|
+
scrim: string;
|
|
69
|
+
/** Component elevation shadows */
|
|
70
|
+
shadow: string;
|
|
71
|
+
/** Destructive actions / Critical alerts */
|
|
72
|
+
error: string;
|
|
73
|
+
/** Text on error background */
|
|
74
|
+
"on-error": string;
|
|
75
|
+
/** Error banner / Failed state background */
|
|
76
|
+
"error-container": string;
|
|
77
|
+
/** Text on error container */
|
|
78
|
+
"on-error-container": string;
|
|
79
|
+
/** Positive trends / Healthy status */
|
|
80
|
+
success: string;
|
|
81
|
+
/** Text on success background */
|
|
82
|
+
"on-success": string;
|
|
83
|
+
/** Positive metric background */
|
|
84
|
+
"success-container": string;
|
|
85
|
+
/** Text on success container */
|
|
86
|
+
"on-success-container": string;
|
|
87
|
+
/** Cautionary alerts / Pending status */
|
|
88
|
+
warning: string;
|
|
89
|
+
/** Text on warning background */
|
|
90
|
+
"on-warning": string;
|
|
91
|
+
/** Warning metric background */
|
|
92
|
+
"warning-container": string;
|
|
93
|
+
/** Text on warning container */
|
|
94
|
+
"on-warning-container": string;
|
|
95
|
+
/** Informational callouts */
|
|
96
|
+
info: string;
|
|
97
|
+
/** Text on info background */
|
|
98
|
+
"on-info": string;
|
|
99
|
+
/** Info callout background */
|
|
100
|
+
"info-container": string;
|
|
101
|
+
/** Text on info container */
|
|
102
|
+
"on-info-container": string;
|
|
103
|
+
/** Applied color for elevation overlays */
|
|
104
|
+
"surface-tint": string;
|
|
105
|
+
/** Hover — 8 % opacity overlay */
|
|
106
|
+
"state-hover": string;
|
|
107
|
+
/** Focus — 12 % opacity overlay */
|
|
108
|
+
"state-focus": string;
|
|
109
|
+
/** Pressed — 12 % opacity overlay */
|
|
110
|
+
"state-pressed": string;
|
|
111
|
+
/** Dragged — 16 % opacity overlay */
|
|
112
|
+
"state-dragged": string;
|
|
113
|
+
/** Disabled — 38 % on-surface opacity */
|
|
114
|
+
"state-disabled": string;
|
|
115
|
+
/** Map regions, pie slices, progress bars — series 1 */
|
|
116
|
+
"graphic-1": string;
|
|
117
|
+
"graphic-2": string;
|
|
118
|
+
"graphic-3": string;
|
|
119
|
+
"graphic-4": string;
|
|
120
|
+
"graphic-5": string;
|
|
121
|
+
"graphic-6": string;
|
|
122
|
+
"graphic-7": string;
|
|
123
|
+
"graphic-8": string;
|
|
124
|
+
"graphic-9": string;
|
|
125
|
+
"graphic-10": string;
|
|
126
|
+
/** Text / labels placed inside a graphic shape */
|
|
127
|
+
"on-graphic": string;
|
|
128
|
+
/** Light background tint — avatars, chips, tag backgrounds */
|
|
129
|
+
"graphic-1-container": string;
|
|
130
|
+
"graphic-2-container": string;
|
|
131
|
+
"graphic-3-container": string;
|
|
132
|
+
"graphic-4-container": string;
|
|
133
|
+
"graphic-5-container": string;
|
|
134
|
+
"graphic-6-container": string;
|
|
135
|
+
"graphic-7-container": string;
|
|
136
|
+
"graphic-8-container": string;
|
|
137
|
+
"graphic-9-container": string;
|
|
138
|
+
"graphic-10-container": string;
|
|
139
|
+
/** Dark foreground text on the corresponding container */
|
|
140
|
+
"on-graphic-1-container": string;
|
|
141
|
+
"on-graphic-2-container": string;
|
|
142
|
+
"on-graphic-3-container": string;
|
|
143
|
+
"on-graphic-4-container": string;
|
|
144
|
+
"on-graphic-5-container": string;
|
|
145
|
+
"on-graphic-6-container": string;
|
|
146
|
+
"on-graphic-7-container": string;
|
|
147
|
+
"on-graphic-8-container": string;
|
|
148
|
+
"on-graphic-9-container": string;
|
|
149
|
+
"on-graphic-10-container": string;
|
|
150
|
+
/** "Healthy" indicators — distinct from success buttons */
|
|
151
|
+
"status-positive": string;
|
|
152
|
+
/** "Attention required" — e.g. yellow node in a network map */
|
|
153
|
+
"status-warning": string;
|
|
154
|
+
/** "Critical failure" — e.g. red heat-map zone */
|
|
155
|
+
"status-negative": string;
|
|
156
|
+
/** "Inactive / Pending" — e.g. grayed-out map regions */
|
|
157
|
+
"status-neutral": string;
|
|
158
|
+
/** Empty background of a progress bar or radial gauge */
|
|
159
|
+
"progress-track": string;
|
|
160
|
+
/** Filled portion of a progress bar */
|
|
161
|
+
"progress-indicator": string;
|
|
162
|
+
/** Secondary loading / buffer indicator */
|
|
163
|
+
"progress-buffer": string;
|
|
164
|
+
/** Heatmap start — low value */
|
|
165
|
+
"scale-low": string;
|
|
166
|
+
/** Heatmap midpoint */
|
|
167
|
+
"scale-medium": string;
|
|
168
|
+
/** Heatmap end — high value */
|
|
169
|
+
"scale-high": string;
|
|
170
|
+
/** Borders for complex SVG shapes or map boundaries */
|
|
171
|
+
"graphic-outline": string;
|
|
172
|
+
/** Internal grid lines for tables or coordinate planes */
|
|
173
|
+
"graphic-divider": string;
|
|
174
|
+
/** Non-interactive text — axis labels, coordinates */
|
|
175
|
+
"graphic-label": string;
|
|
176
|
+
/** Data points, map pins, or node anchors */
|
|
177
|
+
"graphic-marker": string;
|
|
178
|
+
/** Highlight state for a hovered graphic element */
|
|
179
|
+
"graphic-hover": string;
|
|
180
|
+
/** Faded state for non-selected graphic elements */
|
|
181
|
+
"graphic-muted": string;
|
|
182
|
+
/** Lead lines connecting labels to specific graphic points */
|
|
183
|
+
"annotation-line": string;
|
|
184
|
+
};
|
|
185
|
+
declare const lightTheme: ThemeTokens;
|
|
186
|
+
declare const darkTheme: ThemeTokens;
|
|
187
|
+
/**
|
|
188
|
+
* Generates a `<style>` block with CSS custom properties for every design
|
|
189
|
+
* theme × light/dark mode. The first theme (rosewood) is output as `:root` / `.dark`.
|
|
190
|
+
* All themes also get `[data-design-theme="name"]` attribute selectors so they
|
|
191
|
+
* can be activated by setting the attribute on the root element.
|
|
192
|
+
*/
|
|
193
|
+
declare function generateThemeCSS(): string;
|
|
194
|
+
|
|
195
|
+
export { type ThemeTokens, darkTheme, generateThemeCSS, lightTheme };
|
package/dist/server.d.ts
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme tokens — semantic design tokens for the PixelPlay UI system.
|
|
3
|
+
*
|
|
4
|
+
* THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR THEMING.
|
|
5
|
+
* To swap the entire theme, replace `lightTheme` and `darkTheme` below with
|
|
6
|
+
* a new palette. All CSS custom properties are generated from these objects
|
|
7
|
+
* at runtime — no other file needs to change.
|
|
8
|
+
*
|
|
9
|
+
* Token names map 1-to-1 to CSS custom properties: `primary` → `--primary`.
|
|
10
|
+
* Use them in components via `var(--primary)`, `var(--on-surface)`, etc.
|
|
11
|
+
*/
|
|
12
|
+
type ThemeTokens = {
|
|
13
|
+
/** Main app background / base layer */
|
|
14
|
+
surface: string;
|
|
15
|
+
/** Sidebar or dimmed backgrounds */
|
|
16
|
+
"surface-dim": string;
|
|
17
|
+
/** High-emphasis background (modals, popovers) */
|
|
18
|
+
"surface-bright": string;
|
|
19
|
+
/** Cards — lowest elevation */
|
|
20
|
+
"surface-container-lowest": string;
|
|
21
|
+
/** Cards / Inset sections */
|
|
22
|
+
"surface-container-low": string;
|
|
23
|
+
/** Dashboard widgets / Main cards */
|
|
24
|
+
"surface-container": string;
|
|
25
|
+
/** Modals / Dialogs */
|
|
26
|
+
"surface-container-high": string;
|
|
27
|
+
/** Top App Bar / Focused elements */
|
|
28
|
+
"surface-container-highest": string;
|
|
29
|
+
/** Primary text / High-emphasis icons */
|
|
30
|
+
"on-surface": string;
|
|
31
|
+
/** Secondary text / Captions / Helper text */
|
|
32
|
+
"on-surface-variant": string;
|
|
33
|
+
/** Tooltip backgrounds / Snackbars */
|
|
34
|
+
"inverse-surface": string;
|
|
35
|
+
/** Tooltip text / Snackbar actions */
|
|
36
|
+
"inverse-on-surface": string;
|
|
37
|
+
/** Primary buttons / Active states */
|
|
38
|
+
primary: string;
|
|
39
|
+
/** Text on Primary buttons */
|
|
40
|
+
"on-primary": string;
|
|
41
|
+
/** Active menu item background */
|
|
42
|
+
"primary-container": string;
|
|
43
|
+
/** Text on active menu items */
|
|
44
|
+
"on-primary-container": string;
|
|
45
|
+
/** Inverse theme primary actions */
|
|
46
|
+
"inverse-primary": string;
|
|
47
|
+
/** Secondary buttons / Filter chips */
|
|
48
|
+
secondary: string;
|
|
49
|
+
/** Text on Secondary elements */
|
|
50
|
+
"on-secondary": string;
|
|
51
|
+
/** Selected toggle / chip background */
|
|
52
|
+
"secondary-container": string;
|
|
53
|
+
/** Text on selected toggle / chip */
|
|
54
|
+
"on-secondary-container": string;
|
|
55
|
+
/** Accent elements / Specific chart series */
|
|
56
|
+
tertiary: string;
|
|
57
|
+
/** Text on Tertiary elements */
|
|
58
|
+
"on-tertiary": string;
|
|
59
|
+
/** Highlighting specific dashboard metrics */
|
|
60
|
+
"tertiary-container": string;
|
|
61
|
+
/** Text on tertiary metric background */
|
|
62
|
+
"on-tertiary-container": string;
|
|
63
|
+
/** Input borders / Card strokes */
|
|
64
|
+
outline: string;
|
|
65
|
+
/** Dividers / Table row separators */
|
|
66
|
+
"outline-variant": string;
|
|
67
|
+
/** Modal / Drawer backdrop */
|
|
68
|
+
scrim: string;
|
|
69
|
+
/** Component elevation shadows */
|
|
70
|
+
shadow: string;
|
|
71
|
+
/** Destructive actions / Critical alerts */
|
|
72
|
+
error: string;
|
|
73
|
+
/** Text on error background */
|
|
74
|
+
"on-error": string;
|
|
75
|
+
/** Error banner / Failed state background */
|
|
76
|
+
"error-container": string;
|
|
77
|
+
/** Text on error container */
|
|
78
|
+
"on-error-container": string;
|
|
79
|
+
/** Positive trends / Healthy status */
|
|
80
|
+
success: string;
|
|
81
|
+
/** Text on success background */
|
|
82
|
+
"on-success": string;
|
|
83
|
+
/** Positive metric background */
|
|
84
|
+
"success-container": string;
|
|
85
|
+
/** Text on success container */
|
|
86
|
+
"on-success-container": string;
|
|
87
|
+
/** Cautionary alerts / Pending status */
|
|
88
|
+
warning: string;
|
|
89
|
+
/** Text on warning background */
|
|
90
|
+
"on-warning": string;
|
|
91
|
+
/** Warning metric background */
|
|
92
|
+
"warning-container": string;
|
|
93
|
+
/** Text on warning container */
|
|
94
|
+
"on-warning-container": string;
|
|
95
|
+
/** Informational callouts */
|
|
96
|
+
info: string;
|
|
97
|
+
/** Text on info background */
|
|
98
|
+
"on-info": string;
|
|
99
|
+
/** Info callout background */
|
|
100
|
+
"info-container": string;
|
|
101
|
+
/** Text on info container */
|
|
102
|
+
"on-info-container": string;
|
|
103
|
+
/** Applied color for elevation overlays */
|
|
104
|
+
"surface-tint": string;
|
|
105
|
+
/** Hover — 8 % opacity overlay */
|
|
106
|
+
"state-hover": string;
|
|
107
|
+
/** Focus — 12 % opacity overlay */
|
|
108
|
+
"state-focus": string;
|
|
109
|
+
/** Pressed — 12 % opacity overlay */
|
|
110
|
+
"state-pressed": string;
|
|
111
|
+
/** Dragged — 16 % opacity overlay */
|
|
112
|
+
"state-dragged": string;
|
|
113
|
+
/** Disabled — 38 % on-surface opacity */
|
|
114
|
+
"state-disabled": string;
|
|
115
|
+
/** Map regions, pie slices, progress bars — series 1 */
|
|
116
|
+
"graphic-1": string;
|
|
117
|
+
"graphic-2": string;
|
|
118
|
+
"graphic-3": string;
|
|
119
|
+
"graphic-4": string;
|
|
120
|
+
"graphic-5": string;
|
|
121
|
+
"graphic-6": string;
|
|
122
|
+
"graphic-7": string;
|
|
123
|
+
"graphic-8": string;
|
|
124
|
+
"graphic-9": string;
|
|
125
|
+
"graphic-10": string;
|
|
126
|
+
/** Text / labels placed inside a graphic shape */
|
|
127
|
+
"on-graphic": string;
|
|
128
|
+
/** Light background tint — avatars, chips, tag backgrounds */
|
|
129
|
+
"graphic-1-container": string;
|
|
130
|
+
"graphic-2-container": string;
|
|
131
|
+
"graphic-3-container": string;
|
|
132
|
+
"graphic-4-container": string;
|
|
133
|
+
"graphic-5-container": string;
|
|
134
|
+
"graphic-6-container": string;
|
|
135
|
+
"graphic-7-container": string;
|
|
136
|
+
"graphic-8-container": string;
|
|
137
|
+
"graphic-9-container": string;
|
|
138
|
+
"graphic-10-container": string;
|
|
139
|
+
/** Dark foreground text on the corresponding container */
|
|
140
|
+
"on-graphic-1-container": string;
|
|
141
|
+
"on-graphic-2-container": string;
|
|
142
|
+
"on-graphic-3-container": string;
|
|
143
|
+
"on-graphic-4-container": string;
|
|
144
|
+
"on-graphic-5-container": string;
|
|
145
|
+
"on-graphic-6-container": string;
|
|
146
|
+
"on-graphic-7-container": string;
|
|
147
|
+
"on-graphic-8-container": string;
|
|
148
|
+
"on-graphic-9-container": string;
|
|
149
|
+
"on-graphic-10-container": string;
|
|
150
|
+
/** "Healthy" indicators — distinct from success buttons */
|
|
151
|
+
"status-positive": string;
|
|
152
|
+
/** "Attention required" — e.g. yellow node in a network map */
|
|
153
|
+
"status-warning": string;
|
|
154
|
+
/** "Critical failure" — e.g. red heat-map zone */
|
|
155
|
+
"status-negative": string;
|
|
156
|
+
/** "Inactive / Pending" — e.g. grayed-out map regions */
|
|
157
|
+
"status-neutral": string;
|
|
158
|
+
/** Empty background of a progress bar or radial gauge */
|
|
159
|
+
"progress-track": string;
|
|
160
|
+
/** Filled portion of a progress bar */
|
|
161
|
+
"progress-indicator": string;
|
|
162
|
+
/** Secondary loading / buffer indicator */
|
|
163
|
+
"progress-buffer": string;
|
|
164
|
+
/** Heatmap start — low value */
|
|
165
|
+
"scale-low": string;
|
|
166
|
+
/** Heatmap midpoint */
|
|
167
|
+
"scale-medium": string;
|
|
168
|
+
/** Heatmap end — high value */
|
|
169
|
+
"scale-high": string;
|
|
170
|
+
/** Borders for complex SVG shapes or map boundaries */
|
|
171
|
+
"graphic-outline": string;
|
|
172
|
+
/** Internal grid lines for tables or coordinate planes */
|
|
173
|
+
"graphic-divider": string;
|
|
174
|
+
/** Non-interactive text — axis labels, coordinates */
|
|
175
|
+
"graphic-label": string;
|
|
176
|
+
/** Data points, map pins, or node anchors */
|
|
177
|
+
"graphic-marker": string;
|
|
178
|
+
/** Highlight state for a hovered graphic element */
|
|
179
|
+
"graphic-hover": string;
|
|
180
|
+
/** Faded state for non-selected graphic elements */
|
|
181
|
+
"graphic-muted": string;
|
|
182
|
+
/** Lead lines connecting labels to specific graphic points */
|
|
183
|
+
"annotation-line": string;
|
|
184
|
+
};
|
|
185
|
+
declare const lightTheme: ThemeTokens;
|
|
186
|
+
declare const darkTheme: ThemeTokens;
|
|
187
|
+
/**
|
|
188
|
+
* Generates a `<style>` block with CSS custom properties for every design
|
|
189
|
+
* theme × light/dark mode. The first theme (rosewood) is output as `:root` / `.dark`.
|
|
190
|
+
* All themes also get `[data-design-theme="name"]` attribute selectors so they
|
|
191
|
+
* can be activated by setting the attribute on the root element.
|
|
192
|
+
*/
|
|
193
|
+
declare function generateThemeCSS(): string;
|
|
194
|
+
|
|
195
|
+
export { type ThemeTokens, darkTheme, generateThemeCSS, lightTheme };
|