@ebtgames/theme 0.1.5 → 0.1.6

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 (4) hide show
  1. package/dist/index.d.ts +98 -70
  2. package/dist/index.js +202 -159
  3. package/dist/index.js.map +1 -1
  4. package/package.json +4 -4
package/dist/index.d.ts CHANGED
@@ -11,32 +11,40 @@ import * as _chakra_ui_react from '@chakra-ui/react';
11
11
  * Examples: --color-surface-0, --color-text-primary, --shadow-glow-primary
12
12
  */
13
13
  declare const colorVariables: {
14
- readonly '--color-surface-0': "#1B0F26";
15
- readonly '--color-surface-1': "#24122F";
16
- readonly '--color-surface-2': "#2B173A";
17
- readonly '--color-surface-3': "#342046";
18
- readonly '--color-text-primary': "#F5F1FA";
19
- readonly '--color-text-secondary': "#D8D0E3";
20
- readonly '--color-text-muted': "#B9AEC9";
21
- readonly '--color-text-disabled': "#9E92B4";
22
- readonly '--color-interactive-primary': "#7C5BD6";
23
- readonly '--color-interactive-primary-hover': "#6F4FCB";
24
- readonly '--color-interactive-secondary': "#2AB9B0";
25
- readonly '--color-interactive-secondary-hover': "#52D6CC";
26
- readonly '--color-interactive-accent': "#D86B9A";
27
- readonly '--color-border-subtle': "#3A3341";
28
- readonly '--color-border-strong': "#4A4354";
29
- readonly '--color-status-success': "#2AB9B0";
30
- readonly '--color-status-warning': "#D9A24F";
31
- readonly '--color-status-error': "#D8524D";
32
- readonly '--color-status-info': "#7C5BD6";
33
- readonly '--color-overlay-subtle': "rgba(124, 91, 214, 0.05)";
34
- readonly '--color-overlay-light': "rgba(124, 91, 214, 0.1)";
35
- readonly '--color-overlay-medium': "rgba(124, 91, 214, 0.15)";
36
- readonly '--color-overlay-heavy': "rgba(124, 91, 214, 0.25)";
37
- readonly '--color-overlay-error': "rgba(216, 82, 77, 0.12)";
38
- readonly '--color-overlay-backdrop-light': "rgba(27, 15, 38, 0.8)";
39
- readonly '--color-overlay-backdrop-heavy': "rgba(27, 15, 38, 0.95)";
14
+ readonly '--color-surface-0': "#0F1216";
15
+ readonly '--color-surface-1': "#18202A";
16
+ readonly '--color-surface-2': "#222C38";
17
+ readonly '--color-surface-3': "#2F3B4A";
18
+ readonly '--color-surface-card-top': "#31364A";
19
+ readonly '--color-surface-card-bottom': "#232B39";
20
+ readonly '--color-surface-control-top': "#2A3341";
21
+ readonly '--color-surface-control-bottom': "#1E2632";
22
+ readonly '--color-text-primary': "#F3F6FB";
23
+ readonly '--color-text-secondary': "#D7DEE9";
24
+ readonly '--color-text-muted': "#AAB6C5";
25
+ readonly '--color-text-disabled': "#7F8A99";
26
+ readonly '--color-interactive-primary': "#9B7CFF";
27
+ readonly '--color-interactive-primary-hover': "#8A6EF0";
28
+ readonly '--color-interactive-secondary': "#34CBBF";
29
+ readonly '--color-interactive-secondary-hover': "#5DD9CF";
30
+ readonly '--color-interactive-accent': "#E282AE";
31
+ readonly '--color-border-subtle': "#334051";
32
+ readonly '--color-border-strong': "#5D6D84";
33
+ readonly '--color-border-soft': "#465365";
34
+ readonly '--color-border-contrast': "#748AA4";
35
+ readonly '--color-status-success': "#34CBBF";
36
+ readonly '--color-status-warning': "#E0AD5D";
37
+ readonly '--color-status-error': "#E26662";
38
+ readonly '--color-status-info': "#9B7CFF";
39
+ readonly '--color-overlay-subtle': "rgba(255, 255, 255, 0.03)";
40
+ readonly '--color-overlay-light': "rgba(255, 255, 255, 0.06)";
41
+ readonly '--color-overlay-medium': "rgba(255, 255, 255, 0.1)";
42
+ readonly '--color-overlay-heavy': "rgba(255, 255, 255, 0.16)";
43
+ readonly '--color-overlay-primary-soft': "rgba(155, 124, 255, 0.12)";
44
+ readonly '--color-overlay-secondary-soft': "rgba(52, 203, 191, 0.12)";
45
+ readonly '--color-overlay-error': "rgba(226, 102, 98, 0.14)";
46
+ readonly '--color-overlay-backdrop-light': "rgba(10, 12, 16, 0.78)";
47
+ readonly '--color-overlay-backdrop-heavy': "rgba(10, 12, 16, 0.9)";
40
48
  };
41
49
  declare const typographyVariables: {
42
50
  readonly '--font-display': "'Courier New', 'Courier', monospace";
@@ -84,17 +92,23 @@ declare const shadowVariables: {
84
92
  readonly '--shadow-md': "0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4)";
85
93
  readonly '--shadow-lg': "0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5)";
86
94
  readonly '--shadow-xl': "0 16px 48px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6)";
87
- readonly '--shadow-glow-primary': "0 0 10px rgba(124, 91, 214, 0.4)";
88
- readonly '--shadow-glow-primary-lg': "0 0 20px rgba(124, 91, 214, 0.5), 0 0 40px rgba(124, 91, 214, 0.3)";
89
- readonly '--shadow-glow-primary-xl': "0 0 30px rgba(124, 91, 214, 0.6), 0 0 60px rgba(124, 91, 214, 0.4)";
90
- readonly '--shadow-glow-secondary': "0 0 10px rgba(42, 185, 176, 0.3)";
91
- readonly '--shadow-glow-secondary-lg': "0 0 20px rgba(42, 185, 176, 0.4), 0 0 40px rgba(42, 185, 176, 0.2)";
92
- readonly '--shadow-glow-accent': "0 0 10px rgba(216, 107, 154, 0.3)";
93
- readonly '--shadow-glow-accent-lg': "0 0 20px rgba(216, 107, 154, 0.4), 0 0 40px rgba(216, 107, 154, 0.2)";
94
- readonly '--shadow-glow-error': "0 0 10px rgba(216, 82, 77, 0.4)";
95
- readonly '--shadow-inset-primary': "inset 0 0 10px rgba(124, 91, 214, 0.3)";
95
+ readonly '--shadow-elevation-1': "0 1px 2px rgba(0, 0, 0, 0.36), 0 3px 8px rgba(0, 0, 0, 0.22)";
96
+ readonly '--shadow-elevation-2': "0 6px 16px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2)";
97
+ readonly '--shadow-elevation-3': "0 12px 28px rgba(0, 0, 0, 0.36), 0 6px 14px rgba(0, 0, 0, 0.24)";
98
+ readonly '--shadow-glow-primary': "0 0 10px rgba(155, 124, 255, 0.24)";
99
+ readonly '--shadow-glow-primary-lg': "0 0 20px rgba(155, 124, 255, 0.3), 0 0 40px rgba(155, 124, 255, 0.18)";
100
+ readonly '--shadow-glow-primary-xl': "0 0 30px rgba(155, 124, 255, 0.38), 0 0 60px rgba(155, 124, 255, 0.24)";
101
+ readonly '--shadow-glow-secondary': "0 0 10px rgba(52, 203, 191, 0.2)";
102
+ readonly '--shadow-glow-secondary-lg': "0 0 20px rgba(52, 203, 191, 0.28), 0 0 40px rgba(52, 203, 191, 0.15)";
103
+ readonly '--shadow-glow-accent': "0 0 10px rgba(226, 130, 174, 0.2)";
104
+ readonly '--shadow-glow-accent-lg': "0 0 20px rgba(226, 130, 174, 0.28), 0 0 40px rgba(226, 130, 174, 0.15)";
105
+ readonly '--shadow-glow-error': "0 0 10px rgba(226, 102, 98, 0.24)";
106
+ readonly '--shadow-focus-ring-primary': "0 0 0 2px rgba(155, 124, 255, 0.55)";
107
+ readonly '--shadow-focus-ring-secondary': "0 0 0 2px rgba(52, 203, 191, 0.55)";
108
+ readonly '--shadow-inset-primary': "inset 0 0 10px rgba(155, 124, 255, 0.18)";
96
109
  readonly '--shadow-inset-subtle': "inset 0 1px 3px rgba(0, 0, 0, 0.3)";
97
110
  readonly '--shadow-inset-deep': "inset 0 2px 8px rgba(0, 0, 0, 0.5)";
111
+ readonly '--shadow-press-inset': "inset 0 2px 6px rgba(0, 0, 0, 0.45)";
98
112
  };
99
113
  declare const zIndexVariables: {
100
114
  readonly '--z-index-base': "1";
@@ -158,17 +172,23 @@ declare const allCssVariables: {
158
172
  readonly '--shadow-md': "0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4)";
159
173
  readonly '--shadow-lg': "0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5)";
160
174
  readonly '--shadow-xl': "0 16px 48px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6)";
161
- readonly '--shadow-glow-primary': "0 0 10px rgba(124, 91, 214, 0.4)";
162
- readonly '--shadow-glow-primary-lg': "0 0 20px rgba(124, 91, 214, 0.5), 0 0 40px rgba(124, 91, 214, 0.3)";
163
- readonly '--shadow-glow-primary-xl': "0 0 30px rgba(124, 91, 214, 0.6), 0 0 60px rgba(124, 91, 214, 0.4)";
164
- readonly '--shadow-glow-secondary': "0 0 10px rgba(42, 185, 176, 0.3)";
165
- readonly '--shadow-glow-secondary-lg': "0 0 20px rgba(42, 185, 176, 0.4), 0 0 40px rgba(42, 185, 176, 0.2)";
166
- readonly '--shadow-glow-accent': "0 0 10px rgba(216, 107, 154, 0.3)";
167
- readonly '--shadow-glow-accent-lg': "0 0 20px rgba(216, 107, 154, 0.4), 0 0 40px rgba(216, 107, 154, 0.2)";
168
- readonly '--shadow-glow-error': "0 0 10px rgba(216, 82, 77, 0.4)";
169
- readonly '--shadow-inset-primary': "inset 0 0 10px rgba(124, 91, 214, 0.3)";
175
+ readonly '--shadow-elevation-1': "0 1px 2px rgba(0, 0, 0, 0.36), 0 3px 8px rgba(0, 0, 0, 0.22)";
176
+ readonly '--shadow-elevation-2': "0 6px 16px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2)";
177
+ readonly '--shadow-elevation-3': "0 12px 28px rgba(0, 0, 0, 0.36), 0 6px 14px rgba(0, 0, 0, 0.24)";
178
+ readonly '--shadow-glow-primary': "0 0 10px rgba(155, 124, 255, 0.24)";
179
+ readonly '--shadow-glow-primary-lg': "0 0 20px rgba(155, 124, 255, 0.3), 0 0 40px rgba(155, 124, 255, 0.18)";
180
+ readonly '--shadow-glow-primary-xl': "0 0 30px rgba(155, 124, 255, 0.38), 0 0 60px rgba(155, 124, 255, 0.24)";
181
+ readonly '--shadow-glow-secondary': "0 0 10px rgba(52, 203, 191, 0.2)";
182
+ readonly '--shadow-glow-secondary-lg': "0 0 20px rgba(52, 203, 191, 0.28), 0 0 40px rgba(52, 203, 191, 0.15)";
183
+ readonly '--shadow-glow-accent': "0 0 10px rgba(226, 130, 174, 0.2)";
184
+ readonly '--shadow-glow-accent-lg': "0 0 20px rgba(226, 130, 174, 0.28), 0 0 40px rgba(226, 130, 174, 0.15)";
185
+ readonly '--shadow-glow-error': "0 0 10px rgba(226, 102, 98, 0.24)";
186
+ readonly '--shadow-focus-ring-primary': "0 0 0 2px rgba(155, 124, 255, 0.55)";
187
+ readonly '--shadow-focus-ring-secondary': "0 0 0 2px rgba(52, 203, 191, 0.55)";
188
+ readonly '--shadow-inset-primary': "inset 0 0 10px rgba(155, 124, 255, 0.18)";
170
189
  readonly '--shadow-inset-subtle': "inset 0 1px 3px rgba(0, 0, 0, 0.3)";
171
190
  readonly '--shadow-inset-deep': "inset 0 2px 8px rgba(0, 0, 0, 0.5)";
191
+ readonly '--shadow-press-inset': "inset 0 2px 6px rgba(0, 0, 0, 0.45)";
172
192
  readonly '--border-width-thin': "1px";
173
193
  readonly '--border-width-base': "2px";
174
194
  readonly '--border-width-thick': "3px";
@@ -203,32 +223,40 @@ declare const allCssVariables: {
203
223
  readonly '--letter-spacing-tight': "0.05em";
204
224
  readonly '--letter-spacing-normal': "0.1em";
205
225
  readonly '--letter-spacing-wide': "0.2em";
206
- readonly '--color-surface-0': "#1B0F26";
207
- readonly '--color-surface-1': "#24122F";
208
- readonly '--color-surface-2': "#2B173A";
209
- readonly '--color-surface-3': "#342046";
210
- readonly '--color-text-primary': "#F5F1FA";
211
- readonly '--color-text-secondary': "#D8D0E3";
212
- readonly '--color-text-muted': "#B9AEC9";
213
- readonly '--color-text-disabled': "#9E92B4";
214
- readonly '--color-interactive-primary': "#7C5BD6";
215
- readonly '--color-interactive-primary-hover': "#6F4FCB";
216
- readonly '--color-interactive-secondary': "#2AB9B0";
217
- readonly '--color-interactive-secondary-hover': "#52D6CC";
218
- readonly '--color-interactive-accent': "#D86B9A";
219
- readonly '--color-border-subtle': "#3A3341";
220
- readonly '--color-border-strong': "#4A4354";
221
- readonly '--color-status-success': "#2AB9B0";
222
- readonly '--color-status-warning': "#D9A24F";
223
- readonly '--color-status-error': "#D8524D";
224
- readonly '--color-status-info': "#7C5BD6";
225
- readonly '--color-overlay-subtle': "rgba(124, 91, 214, 0.05)";
226
- readonly '--color-overlay-light': "rgba(124, 91, 214, 0.1)";
227
- readonly '--color-overlay-medium': "rgba(124, 91, 214, 0.15)";
228
- readonly '--color-overlay-heavy': "rgba(124, 91, 214, 0.25)";
229
- readonly '--color-overlay-error': "rgba(216, 82, 77, 0.12)";
230
- readonly '--color-overlay-backdrop-light': "rgba(27, 15, 38, 0.8)";
231
- readonly '--color-overlay-backdrop-heavy': "rgba(27, 15, 38, 0.95)";
226
+ readonly '--color-surface-0': "#0F1216";
227
+ readonly '--color-surface-1': "#18202A";
228
+ readonly '--color-surface-2': "#222C38";
229
+ readonly '--color-surface-3': "#2F3B4A";
230
+ readonly '--color-surface-card-top': "#31364A";
231
+ readonly '--color-surface-card-bottom': "#232B39";
232
+ readonly '--color-surface-control-top': "#2A3341";
233
+ readonly '--color-surface-control-bottom': "#1E2632";
234
+ readonly '--color-text-primary': "#F3F6FB";
235
+ readonly '--color-text-secondary': "#D7DEE9";
236
+ readonly '--color-text-muted': "#AAB6C5";
237
+ readonly '--color-text-disabled': "#7F8A99";
238
+ readonly '--color-interactive-primary': "#9B7CFF";
239
+ readonly '--color-interactive-primary-hover': "#8A6EF0";
240
+ readonly '--color-interactive-secondary': "#34CBBF";
241
+ readonly '--color-interactive-secondary-hover': "#5DD9CF";
242
+ readonly '--color-interactive-accent': "#E282AE";
243
+ readonly '--color-border-subtle': "#334051";
244
+ readonly '--color-border-strong': "#5D6D84";
245
+ readonly '--color-border-soft': "#465365";
246
+ readonly '--color-border-contrast': "#748AA4";
247
+ readonly '--color-status-success': "#34CBBF";
248
+ readonly '--color-status-warning': "#E0AD5D";
249
+ readonly '--color-status-error': "#E26662";
250
+ readonly '--color-status-info': "#9B7CFF";
251
+ readonly '--color-overlay-subtle': "rgba(255, 255, 255, 0.03)";
252
+ readonly '--color-overlay-light': "rgba(255, 255, 255, 0.06)";
253
+ readonly '--color-overlay-medium': "rgba(255, 255, 255, 0.1)";
254
+ readonly '--color-overlay-heavy': "rgba(255, 255, 255, 0.16)";
255
+ readonly '--color-overlay-primary-soft': "rgba(155, 124, 255, 0.12)";
256
+ readonly '--color-overlay-secondary-soft': "rgba(52, 203, 191, 0.12)";
257
+ readonly '--color-overlay-error': "rgba(226, 102, 98, 0.14)";
258
+ readonly '--color-overlay-backdrop-light': "rgba(10, 12, 16, 0.78)";
259
+ readonly '--color-overlay-backdrop-heavy': "rgba(10, 12, 16, 0.9)";
232
260
  };
233
261
  type CssVariableName = keyof typeof allCssVariables;
234
262
  declare function getCssVariable(name: CssVariableName): string;