@ebtgames/theme 0.1.2 → 0.1.4
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.d.ts +294 -1
- package/dist/index.js +1362 -107
- package/dist/index.js.map +1 -1
- package/package.json +3 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,298 @@
|
|
|
1
1
|
import * as _chakra_ui_react from '@chakra-ui/react';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* CSS Variables - Single Source of Truth
|
|
5
|
+
*
|
|
6
|
+
* This file defines all design tokens as CSS custom properties.
|
|
7
|
+
* Chakra tokens reference these variables, ensuring consistency
|
|
8
|
+
* between Chakra components and non-Chakra code (WebGL, etc.)
|
|
9
|
+
*
|
|
10
|
+
* Token naming: --{category}-{semantic}-{variant}
|
|
11
|
+
* Examples: --color-surface-0, --color-text-primary, --shadow-glow-primary
|
|
12
|
+
*/
|
|
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)";
|
|
40
|
+
};
|
|
41
|
+
declare const typographyVariables: {
|
|
42
|
+
readonly '--font-display': "'Courier New', 'Courier', monospace";
|
|
43
|
+
readonly '--font-heading': "'Courier New', 'Courier', monospace";
|
|
44
|
+
readonly '--font-body': "'Courier New', 'Courier', monospace";
|
|
45
|
+
readonly '--font-size-xs': "0.75rem";
|
|
46
|
+
readonly '--font-size-sm': "0.875rem";
|
|
47
|
+
readonly '--font-size-base': "1rem";
|
|
48
|
+
readonly '--font-size-md': "1.125rem";
|
|
49
|
+
readonly '--font-size-lg': "1.25rem";
|
|
50
|
+
readonly '--font-size-xl': "1.5rem";
|
|
51
|
+
readonly '--font-size-2xl': "2rem";
|
|
52
|
+
readonly '--font-size-3xl': "3rem";
|
|
53
|
+
readonly '--font-size-4xl': "4rem";
|
|
54
|
+
readonly '--font-size-cell': "clamp(1rem, 3vw, 1.5rem)";
|
|
55
|
+
readonly '--font-size-hero': "clamp(2.5rem, 8vw, 4rem)";
|
|
56
|
+
readonly '--font-size-subtitle': "clamp(1rem, 3vw, 1.25rem)";
|
|
57
|
+
readonly '--font-weight-normal': "400";
|
|
58
|
+
readonly '--font-weight-medium': "600";
|
|
59
|
+
readonly '--font-weight-bold': "700";
|
|
60
|
+
readonly '--letter-spacing-tight': "0.05em";
|
|
61
|
+
readonly '--letter-spacing-normal': "0.1em";
|
|
62
|
+
readonly '--letter-spacing-wide': "0.2em";
|
|
63
|
+
};
|
|
64
|
+
declare const spacingVariables: {
|
|
65
|
+
readonly '--spacing-2xs': "0.125rem";
|
|
66
|
+
readonly '--spacing-xs': "0.25rem";
|
|
67
|
+
readonly '--spacing-sm': "0.5rem";
|
|
68
|
+
readonly '--spacing-md': "1rem";
|
|
69
|
+
readonly '--spacing-lg': "1.5rem";
|
|
70
|
+
readonly '--spacing-xl': "2rem";
|
|
71
|
+
readonly '--spacing-2xl': "3rem";
|
|
72
|
+
};
|
|
73
|
+
declare const borderVariables: {
|
|
74
|
+
readonly '--border-width-thin': "1px";
|
|
75
|
+
readonly '--border-width-base': "2px";
|
|
76
|
+
readonly '--border-width-thick': "3px";
|
|
77
|
+
readonly '--radius-sm': "2px";
|
|
78
|
+
readonly '--radius-md': "4px";
|
|
79
|
+
readonly '--radius-lg': "6px";
|
|
80
|
+
};
|
|
81
|
+
declare const shadowVariables: {
|
|
82
|
+
readonly '--shadow-xs': "0 1px 2px rgba(0, 0, 0, 0.4)";
|
|
83
|
+
readonly '--shadow-sm': "0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3)";
|
|
84
|
+
readonly '--shadow-md': "0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4)";
|
|
85
|
+
readonly '--shadow-lg': "0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5)";
|
|
86
|
+
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)";
|
|
96
|
+
readonly '--shadow-inset-subtle': "inset 0 1px 3px rgba(0, 0, 0, 0.3)";
|
|
97
|
+
readonly '--shadow-inset-deep': "inset 0 2px 8px rgba(0, 0, 0, 0.5)";
|
|
98
|
+
};
|
|
99
|
+
declare const zIndexVariables: {
|
|
100
|
+
readonly '--z-index-base': "1";
|
|
101
|
+
readonly '--z-index-dropdown': "100";
|
|
102
|
+
readonly '--z-index-overlay': "500";
|
|
103
|
+
readonly '--z-index-modal': "1000";
|
|
104
|
+
readonly '--z-index-toast': "1500";
|
|
105
|
+
readonly '--z-index-fullscreen': "2000";
|
|
106
|
+
};
|
|
107
|
+
declare const timingVariables: {
|
|
108
|
+
readonly '--timing-fast': "150ms";
|
|
109
|
+
readonly '--timing-base': "200ms";
|
|
110
|
+
readonly '--timing-slow': "300ms";
|
|
111
|
+
readonly '--easing-default': "ease";
|
|
112
|
+
readonly '--easing-out': "ease-out";
|
|
113
|
+
readonly '--easing-in-out': "ease-in-out";
|
|
114
|
+
};
|
|
115
|
+
declare const breakpointVariables: {
|
|
116
|
+
readonly '--breakpoint-mobile': "767px";
|
|
117
|
+
readonly '--breakpoint-tablet': "768px";
|
|
118
|
+
readonly '--breakpoint-desktop': "1024px";
|
|
119
|
+
};
|
|
120
|
+
declare const allCssVariables: {
|
|
121
|
+
readonly '--color-primary': "var(--color-interactive-primary)";
|
|
122
|
+
readonly '--color-primary-hover': "var(--color-interactive-primary-hover)";
|
|
123
|
+
readonly '--color-utility': "var(--color-interactive-secondary)";
|
|
124
|
+
readonly '--color-utility-hover': "var(--color-interactive-secondary-hover)";
|
|
125
|
+
readonly '--color-emphasis': "var(--color-interactive-accent)";
|
|
126
|
+
readonly '--color-success': "var(--color-status-success)";
|
|
127
|
+
readonly '--color-warning': "var(--color-status-warning)";
|
|
128
|
+
readonly '--color-error': "var(--color-status-error)";
|
|
129
|
+
readonly '--shadow-glow-utility': "var(--shadow-glow-secondary)";
|
|
130
|
+
readonly '--shadow-glow-utility-lg': "var(--shadow-glow-secondary-lg)";
|
|
131
|
+
readonly '--shadow-glow-emphasis': "var(--shadow-glow-accent)";
|
|
132
|
+
readonly '--shadow-glow-emphasis-lg': "var(--shadow-glow-accent-lg)";
|
|
133
|
+
readonly '--border-radius-sm': "var(--radius-sm)";
|
|
134
|
+
readonly '--border-radius-md': "var(--radius-md)";
|
|
135
|
+
readonly '--border-radius-lg': "var(--radius-lg)";
|
|
136
|
+
readonly '--transition-fast': "var(--timing-fast)";
|
|
137
|
+
readonly '--transition-base': "var(--timing-base)";
|
|
138
|
+
readonly '--transition-slow': "var(--timing-slow)";
|
|
139
|
+
readonly '--ease-default': "var(--easing-default)";
|
|
140
|
+
readonly '--ease-out': "var(--easing-out)";
|
|
141
|
+
readonly '--breakpoint-mobile': "767px";
|
|
142
|
+
readonly '--breakpoint-tablet': "768px";
|
|
143
|
+
readonly '--breakpoint-desktop': "1024px";
|
|
144
|
+
readonly '--timing-fast': "150ms";
|
|
145
|
+
readonly '--timing-base': "200ms";
|
|
146
|
+
readonly '--timing-slow': "300ms";
|
|
147
|
+
readonly '--easing-default': "ease";
|
|
148
|
+
readonly '--easing-out': "ease-out";
|
|
149
|
+
readonly '--easing-in-out': "ease-in-out";
|
|
150
|
+
readonly '--z-index-base': "1";
|
|
151
|
+
readonly '--z-index-dropdown': "100";
|
|
152
|
+
readonly '--z-index-overlay': "500";
|
|
153
|
+
readonly '--z-index-modal': "1000";
|
|
154
|
+
readonly '--z-index-toast': "1500";
|
|
155
|
+
readonly '--z-index-fullscreen': "2000";
|
|
156
|
+
readonly '--shadow-xs': "0 1px 2px rgba(0, 0, 0, 0.4)";
|
|
157
|
+
readonly '--shadow-sm': "0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3)";
|
|
158
|
+
readonly '--shadow-md': "0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4)";
|
|
159
|
+
readonly '--shadow-lg': "0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5)";
|
|
160
|
+
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)";
|
|
170
|
+
readonly '--shadow-inset-subtle': "inset 0 1px 3px rgba(0, 0, 0, 0.3)";
|
|
171
|
+
readonly '--shadow-inset-deep': "inset 0 2px 8px rgba(0, 0, 0, 0.5)";
|
|
172
|
+
readonly '--border-width-thin': "1px";
|
|
173
|
+
readonly '--border-width-base': "2px";
|
|
174
|
+
readonly '--border-width-thick': "3px";
|
|
175
|
+
readonly '--radius-sm': "2px";
|
|
176
|
+
readonly '--radius-md': "4px";
|
|
177
|
+
readonly '--radius-lg': "6px";
|
|
178
|
+
readonly '--spacing-2xs': "0.125rem";
|
|
179
|
+
readonly '--spacing-xs': "0.25rem";
|
|
180
|
+
readonly '--spacing-sm': "0.5rem";
|
|
181
|
+
readonly '--spacing-md': "1rem";
|
|
182
|
+
readonly '--spacing-lg': "1.5rem";
|
|
183
|
+
readonly '--spacing-xl': "2rem";
|
|
184
|
+
readonly '--spacing-2xl': "3rem";
|
|
185
|
+
readonly '--font-display': "'Courier New', 'Courier', monospace";
|
|
186
|
+
readonly '--font-heading': "'Courier New', 'Courier', monospace";
|
|
187
|
+
readonly '--font-body': "'Courier New', 'Courier', monospace";
|
|
188
|
+
readonly '--font-size-xs': "0.75rem";
|
|
189
|
+
readonly '--font-size-sm': "0.875rem";
|
|
190
|
+
readonly '--font-size-base': "1rem";
|
|
191
|
+
readonly '--font-size-md': "1.125rem";
|
|
192
|
+
readonly '--font-size-lg': "1.25rem";
|
|
193
|
+
readonly '--font-size-xl': "1.5rem";
|
|
194
|
+
readonly '--font-size-2xl': "2rem";
|
|
195
|
+
readonly '--font-size-3xl': "3rem";
|
|
196
|
+
readonly '--font-size-4xl': "4rem";
|
|
197
|
+
readonly '--font-size-cell': "clamp(1rem, 3vw, 1.5rem)";
|
|
198
|
+
readonly '--font-size-hero': "clamp(2.5rem, 8vw, 4rem)";
|
|
199
|
+
readonly '--font-size-subtitle': "clamp(1rem, 3vw, 1.25rem)";
|
|
200
|
+
readonly '--font-weight-normal': "400";
|
|
201
|
+
readonly '--font-weight-medium': "600";
|
|
202
|
+
readonly '--font-weight-bold': "700";
|
|
203
|
+
readonly '--letter-spacing-tight': "0.05em";
|
|
204
|
+
readonly '--letter-spacing-normal': "0.1em";
|
|
205
|
+
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)";
|
|
232
|
+
};
|
|
233
|
+
type CssVariableName = keyof typeof allCssVariables;
|
|
234
|
+
declare function getCssVariable(name: CssVariableName): string;
|
|
235
|
+
declare function cssVar(name: CssVariableName): string;
|
|
236
|
+
declare function generateCssVariablesString(): string;
|
|
237
|
+
|
|
238
|
+
/**
|
|
239
|
+
* WCAG Contrast Ratio Utilities
|
|
240
|
+
*
|
|
241
|
+
* Provides functions to calculate and verify contrast ratios
|
|
242
|
+
* between colors for accessibility compliance.
|
|
243
|
+
*/
|
|
244
|
+
/**
|
|
245
|
+
* Parse a hex color string to RGB values
|
|
246
|
+
*/
|
|
247
|
+
declare function hexToRgb(hex: string): {
|
|
248
|
+
r: number;
|
|
249
|
+
g: number;
|
|
250
|
+
b: number;
|
|
251
|
+
};
|
|
252
|
+
/**
|
|
253
|
+
* Calculate relative luminance of a color
|
|
254
|
+
* Based on WCAG 2.1 definition: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
|
|
255
|
+
*/
|
|
256
|
+
declare function relativeLuminance(r: number, g: number, b: number): number;
|
|
257
|
+
/**
|
|
258
|
+
* Calculate contrast ratio between two colors
|
|
259
|
+
* Returns a value between 1 and 21
|
|
260
|
+
*/
|
|
261
|
+
declare function contrastRatio(color1: string, color2: string): number;
|
|
262
|
+
/**
|
|
263
|
+
* Format contrast ratio for display (e.g., "16.49:1")
|
|
264
|
+
*/
|
|
265
|
+
declare function formatContrastRatio(ratio: number): string;
|
|
266
|
+
/**
|
|
267
|
+
* WCAG compliance levels
|
|
268
|
+
*/
|
|
269
|
+
type WcagLevel = 'AAA' | 'AA' | 'AA-large' | 'fail';
|
|
270
|
+
/**
|
|
271
|
+
* Check WCAG compliance level for a contrast ratio
|
|
272
|
+
* @param ratio - The contrast ratio
|
|
273
|
+
* @param isLargeText - Whether the text is considered "large" (14pt bold or 18pt regular)
|
|
274
|
+
*/
|
|
275
|
+
declare function getWcagLevel(ratio: number, isLargeText?: boolean): WcagLevel;
|
|
276
|
+
/**
|
|
277
|
+
* Get a human-readable description of WCAG compliance
|
|
278
|
+
*/
|
|
279
|
+
declare function getWcagDescription(level: WcagLevel): string;
|
|
280
|
+
/**
|
|
281
|
+
* Check if a contrast ratio meets minimum WCAG AA requirements
|
|
282
|
+
*/
|
|
283
|
+
declare function meetsWcagAA(ratio: number, isLargeText?: boolean): boolean;
|
|
284
|
+
/**
|
|
285
|
+
* Get all color pairs with their contrast ratios
|
|
286
|
+
* Useful for building contrast grids
|
|
287
|
+
*/
|
|
288
|
+
interface ContrastPair {
|
|
289
|
+
foreground: string;
|
|
290
|
+
background: string;
|
|
291
|
+
ratio: number;
|
|
292
|
+
level: WcagLevel;
|
|
293
|
+
}
|
|
294
|
+
declare function getContrastPairs(foregrounds: Record<string, string>, backgrounds: Record<string, string>): ContrastPair[];
|
|
295
|
+
|
|
3
296
|
declare const system: _chakra_ui_react.SystemContext;
|
|
4
297
|
|
|
5
|
-
export { system };
|
|
298
|
+
export { type ContrastPair, type CssVariableName, type WcagLevel, allCssVariables, borderVariables, breakpointVariables, colorVariables, contrastRatio, cssVar, formatContrastRatio, generateCssVariablesString, getContrastPairs, getCssVariable, getWcagDescription, getWcagLevel, hexToRgb, meetsWcagAA, relativeLuminance, shadowVariables, spacingVariables, system, timingVariables, typographyVariables, zIndexVariables };
|