@aurora-ds/theme 2.0.1 → 3.1.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 +117 -642
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +56 -720
- package/dist/index.d.ts +56 -720
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -2,330 +2,20 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { ReactNode, CSSProperties } from 'react';
|
|
3
3
|
export { CSSProperties } from 'react';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
* - 2xl: Extra extra large devices (wide screens)
|
|
15
|
-
*/
|
|
16
|
-
type BaseBreakpoints = {
|
|
17
|
-
xs: string;
|
|
18
|
-
sm: string;
|
|
19
|
-
md: string;
|
|
20
|
-
lg: string;
|
|
21
|
-
xl: string;
|
|
22
|
-
'2xl': string;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Base color tokens following modern design system semantics - V2
|
|
27
|
-
*/
|
|
28
|
-
type BaseColors = {
|
|
29
|
-
background: string;
|
|
30
|
-
surface: string;
|
|
31
|
-
surfaceHover: string;
|
|
32
|
-
surfaceActive: string;
|
|
33
|
-
text: string;
|
|
34
|
-
textSecondary: string;
|
|
35
|
-
textTertiary: string;
|
|
36
|
-
primary: string;
|
|
37
|
-
primaryHover: string;
|
|
38
|
-
primaryActive: string;
|
|
39
|
-
primarySubtle: string;
|
|
40
|
-
primaryDisabled: string;
|
|
41
|
-
onPrimary: string;
|
|
42
|
-
secondary: string;
|
|
43
|
-
secondaryHover: string;
|
|
44
|
-
secondaryActive: string;
|
|
45
|
-
secondarySubtle: string;
|
|
46
|
-
secondaryDisabled: string;
|
|
47
|
-
onSecondary: string;
|
|
48
|
-
border: string;
|
|
49
|
-
disabled: string;
|
|
50
|
-
disabledText: string;
|
|
51
|
-
success: string;
|
|
52
|
-
successSubtle: string;
|
|
53
|
-
warning: string;
|
|
54
|
-
warningSubtle: string;
|
|
55
|
-
error: string;
|
|
56
|
-
errorHover: string;
|
|
57
|
-
errorSubtle: string;
|
|
58
|
-
onError: string;
|
|
59
|
-
info: string;
|
|
60
|
-
infoSubtle: string;
|
|
61
|
-
link: string;
|
|
62
|
-
linkHover: string;
|
|
63
|
-
linkActive: string;
|
|
64
|
-
linkDisabled: string;
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Spacing scale with semantic naming
|
|
69
|
-
* Based on 4px unit system
|
|
70
|
-
*/
|
|
71
|
-
type BaseSpacing = {
|
|
72
|
-
none: string;
|
|
73
|
-
'2xs': string;
|
|
74
|
-
xs: string;
|
|
75
|
-
sm: string;
|
|
76
|
-
md: string;
|
|
77
|
-
lg: string;
|
|
78
|
-
xl: string;
|
|
79
|
-
'2xl': string;
|
|
80
|
-
'3xl': string;
|
|
81
|
-
'4xl': string;
|
|
82
|
-
'5xl': string;
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Border radius scale
|
|
87
|
-
*/
|
|
88
|
-
type BaseRadius = {
|
|
89
|
-
none: string;
|
|
90
|
-
xs: string;
|
|
91
|
-
sm: string;
|
|
92
|
-
md: string;
|
|
93
|
-
lg: string;
|
|
94
|
-
xl: string;
|
|
95
|
-
'2xl': string;
|
|
96
|
-
full: string;
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
/**
|
|
100
|
-
* Shadow scale for elevation
|
|
101
|
-
*/
|
|
102
|
-
type BaseShadows = {
|
|
103
|
-
none: string;
|
|
104
|
-
xs: string;
|
|
105
|
-
sm: string;
|
|
106
|
-
md: string;
|
|
107
|
-
lg: string;
|
|
108
|
-
xl: string;
|
|
109
|
-
'2xl': string;
|
|
110
|
-
inner: string;
|
|
111
|
-
focus: string;
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
/**
|
|
115
|
-
* Font size scale
|
|
116
|
-
*/
|
|
117
|
-
type BaseFontSize = {
|
|
118
|
-
'2xs': string;
|
|
119
|
-
xs: string;
|
|
120
|
-
sm: string;
|
|
121
|
-
md: string;
|
|
122
|
-
lg: string;
|
|
123
|
-
xl: string;
|
|
124
|
-
'2xl': string;
|
|
125
|
-
'3xl': string;
|
|
126
|
-
'4xl': string;
|
|
127
|
-
'5xl': string;
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
/**
|
|
131
|
-
* Font weight scale
|
|
132
|
-
*/
|
|
133
|
-
type BaseFontWeight = {
|
|
134
|
-
light: number;
|
|
135
|
-
regular: number;
|
|
136
|
-
medium: number;
|
|
137
|
-
semibold: number;
|
|
138
|
-
bold: number;
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* Line height scale
|
|
143
|
-
*/
|
|
144
|
-
type BaseLineHeight = {
|
|
145
|
-
none: number;
|
|
146
|
-
tight: number;
|
|
147
|
-
normal: number;
|
|
148
|
-
relaxed: number;
|
|
149
|
-
loose: number;
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
/**
|
|
153
|
-
* Z-index scale for layering
|
|
154
|
-
*/
|
|
155
|
-
type BaseZIndex = {
|
|
156
|
-
behind: number;
|
|
157
|
-
base: number;
|
|
158
|
-
dropdown: number;
|
|
159
|
-
sticky: number;
|
|
160
|
-
overlay: number;
|
|
161
|
-
modal: number;
|
|
162
|
-
popover: number;
|
|
163
|
-
tooltip: number;
|
|
164
|
-
toast: number;
|
|
165
|
-
};
|
|
5
|
+
/** Registry for theme type via module augmentation */
|
|
6
|
+
interface ThemeRegistry {
|
|
7
|
+
}
|
|
8
|
+
/** @internal */
|
|
9
|
+
type InferredTheme = ThemeRegistry extends {
|
|
10
|
+
theme: infer T;
|
|
11
|
+
} ? T : Record<string, any>;
|
|
12
|
+
/** Theme type, inferred from ThemeRegistry */
|
|
13
|
+
type Theme<T = InferredTheme> = T extends Record<string, any> ? T : Record<string, any>;
|
|
166
14
|
|
|
167
15
|
/**
|
|
168
|
-
*
|
|
16
|
+
* Creates a typed theme. Type is inferred from ThemeRegistry.
|
|
169
17
|
*/
|
|
170
|
-
|
|
171
|
-
fast: string;
|
|
172
|
-
normal: string;
|
|
173
|
-
slow: string;
|
|
174
|
-
};
|
|
175
|
-
|
|
176
|
-
/**
|
|
177
|
-
* Base opacity scale for consistent transparency
|
|
178
|
-
*/
|
|
179
|
-
type BaseOpacity = {
|
|
180
|
-
/** Fully transparent - 0 */
|
|
181
|
-
none: number;
|
|
182
|
-
/** Very low opacity - 0.05 */
|
|
183
|
-
lowest: number;
|
|
184
|
-
/** Low opacity - 0.1 */
|
|
185
|
-
low: number;
|
|
186
|
-
/** Medium-low opacity - 0.25 */
|
|
187
|
-
medium: number;
|
|
188
|
-
/** Medium-high opacity - 0.5 */
|
|
189
|
-
high: number;
|
|
190
|
-
/** High opacity - 0.75 */
|
|
191
|
-
higher: number;
|
|
192
|
-
/** Fully opaque - 1 */
|
|
193
|
-
full: number;
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* Standard theme type with all required tokens
|
|
198
|
-
*/
|
|
199
|
-
type Theme = {
|
|
200
|
-
colors: BaseColors;
|
|
201
|
-
spacing: BaseSpacing;
|
|
202
|
-
radius: BaseRadius;
|
|
203
|
-
shadows: BaseShadows;
|
|
204
|
-
fontSize: BaseFontSize;
|
|
205
|
-
fontWeight: BaseFontWeight;
|
|
206
|
-
lineHeight: BaseLineHeight;
|
|
207
|
-
zIndex: BaseZIndex;
|
|
208
|
-
transition: BaseTransition;
|
|
209
|
-
opacity: BaseOpacity;
|
|
210
|
-
breakpoints: BaseBreakpoints;
|
|
211
|
-
};
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* Generic theme type that allows extending base tokens
|
|
215
|
-
*/
|
|
216
|
-
type ExtendedTheme<TColors extends BaseColors = BaseColors, TSpacing extends BaseSpacing = BaseSpacing, TRadius extends BaseRadius = BaseRadius, TShadows extends BaseShadows = BaseShadows, TFontSize extends BaseFontSize = BaseFontSize, TFontWeight extends BaseFontWeight = BaseFontWeight, TLineHeight extends BaseLineHeight = BaseLineHeight, TZIndex extends BaseZIndex = BaseZIndex, TTransition extends BaseTransition = BaseTransition, TExtensions extends Record<string, unknown> = Record<string, never>> = {
|
|
217
|
-
colors: TColors;
|
|
218
|
-
spacing: TSpacing;
|
|
219
|
-
radius: TRadius;
|
|
220
|
-
shadows: TShadows;
|
|
221
|
-
fontSize: TFontSize;
|
|
222
|
-
fontWeight: TFontWeight;
|
|
223
|
-
lineHeight: TLineHeight;
|
|
224
|
-
zIndex: TZIndex;
|
|
225
|
-
transition: TTransition;
|
|
226
|
-
} & TExtensions;
|
|
227
|
-
/**
|
|
228
|
-
* Helper type to create a custom theme with extensions
|
|
229
|
-
*/
|
|
230
|
-
type ExtendTheme<T extends Partial<Theme> & Record<string, unknown>> = Theme & T;
|
|
231
|
-
/**
|
|
232
|
-
* Utility type to deeply make all properties optional
|
|
233
|
-
*/
|
|
234
|
-
type DeepPartial<T> = {
|
|
235
|
-
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
|
|
236
|
-
};
|
|
237
|
-
/**
|
|
238
|
-
* Type for theme overrides
|
|
239
|
-
*/
|
|
240
|
-
type ThemeOverride<T extends Theme = Theme> = DeepPartial<T>;
|
|
241
|
-
/**
|
|
242
|
-
* Base structure for custom themes with user-defined color tokens
|
|
243
|
-
* Use this when you want to completely replace the default color tokens
|
|
244
|
-
* with your own semantic tokens
|
|
245
|
-
*/
|
|
246
|
-
type CustomThemeBase<TColors extends Record<string, string>> = {
|
|
247
|
-
colors: TColors;
|
|
248
|
-
spacing: BaseSpacing;
|
|
249
|
-
radius: BaseRadius;
|
|
250
|
-
shadows: BaseShadows;
|
|
251
|
-
fontSize: BaseFontSize;
|
|
252
|
-
fontWeight: BaseFontWeight;
|
|
253
|
-
lineHeight: BaseLineHeight;
|
|
254
|
-
zIndex: BaseZIndex;
|
|
255
|
-
transition: BaseTransition;
|
|
256
|
-
opacity: BaseOpacity;
|
|
257
|
-
breakpoints: BaseBreakpoints;
|
|
258
|
-
};
|
|
259
|
-
/**
|
|
260
|
-
* Fully customizable theme where ALL token categories can be replaced
|
|
261
|
-
*
|
|
262
|
-
* @example
|
|
263
|
-
* ```ts
|
|
264
|
-
* // Define your own color tokens
|
|
265
|
-
* type MyColors = {
|
|
266
|
-
* brand: string
|
|
267
|
-
* brandHover: string
|
|
268
|
-
* surface: string
|
|
269
|
-
* textPrimary: string
|
|
270
|
-
* textSecondary: string
|
|
271
|
-
* }
|
|
272
|
-
*
|
|
273
|
-
* // Create your theme type
|
|
274
|
-
* type MyTheme = CustomTheme<MyColors>
|
|
275
|
-
*
|
|
276
|
-
* // Use with createCustomTheme()
|
|
277
|
-
* const myTheme = createCustomTheme<MyColors>({
|
|
278
|
-
* colors: {
|
|
279
|
-
* brand: '#007bff',
|
|
280
|
-
* brandHover: '#0056b3',
|
|
281
|
-
* surface: '#ffffff',
|
|
282
|
-
* textPrimary: '#212529',
|
|
283
|
-
* textSecondary: '#6c757d',
|
|
284
|
-
* },
|
|
285
|
-
* // ... other tokens use defaults or custom
|
|
286
|
-
* })
|
|
287
|
-
* ```
|
|
288
|
-
*/
|
|
289
|
-
type CustomTheme<TColors extends Record<string, string> = Record<string, string>, TSpacing extends Record<string, string> = BaseSpacing, TRadius extends Record<string, string> = BaseRadius, TShadows extends Record<string, string> = BaseShadows, TFontSize extends Record<string, string> = BaseFontSize, TFontWeight extends Record<string, number> = BaseFontWeight, TLineHeight extends Record<string, number> = BaseLineHeight, TZIndex extends Record<string, number> = BaseZIndex, TTransition extends Record<string, string> = BaseTransition, TOpacity extends Record<string, number> = BaseOpacity, TBreakpoints extends Record<string, string> = BaseBreakpoints> = {
|
|
290
|
-
colors: TColors;
|
|
291
|
-
spacing: TSpacing;
|
|
292
|
-
radius: TRadius;
|
|
293
|
-
shadows: TShadows;
|
|
294
|
-
fontSize: TFontSize;
|
|
295
|
-
fontWeight: TFontWeight;
|
|
296
|
-
lineHeight: TLineHeight;
|
|
297
|
-
zIndex: TZIndex;
|
|
298
|
-
transition: TTransition;
|
|
299
|
-
opacity: TOpacity;
|
|
300
|
-
breakpoints: TBreakpoints;
|
|
301
|
-
};
|
|
302
|
-
/**
|
|
303
|
-
* Options for theme creation
|
|
304
|
-
*/
|
|
305
|
-
type CreateThemeOptions = {
|
|
306
|
-
/**
|
|
307
|
-
* How to handle the merge of overrides with the base theme
|
|
308
|
-
* - 'merge': Deep merge overrides into base (default, preserves base tokens)
|
|
309
|
-
* - 'replace': Replace entire categories when specified in overrides
|
|
310
|
-
*/
|
|
311
|
-
mode?: 'merge' | 'replace';
|
|
312
|
-
};
|
|
313
|
-
/**
|
|
314
|
-
* Options for custom theme creation
|
|
315
|
-
*/
|
|
316
|
-
type CreateCustomThemeOptions<T> = {
|
|
317
|
-
/**
|
|
318
|
-
* Use defaults from the standard theme for non-color tokens
|
|
319
|
-
* If false, you must provide all tokens
|
|
320
|
-
* @default true
|
|
321
|
-
*/
|
|
322
|
-
useDefaults?: boolean;
|
|
323
|
-
/**
|
|
324
|
-
* Partial overrides for non-color tokens
|
|
325
|
-
* Only used when useDefaults is true
|
|
326
|
-
*/
|
|
327
|
-
overrides?: Partial<Omit<T, 'colors'>>;
|
|
328
|
-
};
|
|
18
|
+
declare const createTheme: <T extends Record<string, unknown>>(values: T) => Theme<T>;
|
|
329
19
|
|
|
330
20
|
/**
|
|
331
21
|
* Color scale type - 12 shades from 25 to 950
|
|
@@ -345,237 +35,7 @@ type ColorScale = {
|
|
|
345
35
|
950: string;
|
|
346
36
|
};
|
|
347
37
|
|
|
348
|
-
/**
|
|
349
|
-
* Available color scale names
|
|
350
|
-
*/
|
|
351
|
-
type ColorName = 'gray' | 'slate' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
|
|
352
|
-
|
|
353
|
-
/**
|
|
354
|
-
* Available shade values (keys of ColorScale)
|
|
355
|
-
*/
|
|
356
|
-
type ColorShade = keyof ColorScale;
|
|
357
|
-
|
|
358
|
-
type ThemeProviderProps<T extends Theme = Theme> = {
|
|
359
|
-
theme: T;
|
|
360
|
-
children?: ReactNode;
|
|
361
|
-
};
|
|
362
|
-
/**
|
|
363
|
-
* Theme provider component
|
|
364
|
-
* Provides theme context to all child components
|
|
365
|
-
*
|
|
366
|
-
* @example
|
|
367
|
-
* ```tsx
|
|
368
|
-
* // With default theme
|
|
369
|
-
* <ThemeProvider theme={defaultTheme}>
|
|
370
|
-
* <App />
|
|
371
|
-
* </ThemeProvider>
|
|
372
|
-
*
|
|
373
|
-
* // With custom extended theme
|
|
374
|
-
* <ThemeProvider theme={myCustomTheme}>
|
|
375
|
-
* <App />
|
|
376
|
-
* </ThemeProvider>
|
|
377
|
-
* ```
|
|
378
|
-
*/
|
|
379
|
-
declare const ThemeProvider: <T extends Theme>({ theme, children }: ThemeProviderProps<T>) => react_jsx_runtime.JSX.Element;
|
|
380
|
-
/**
|
|
381
|
-
* Hook to access the current theme
|
|
382
|
-
* Use the generic parameter to get proper typing for extended themes
|
|
383
|
-
*
|
|
384
|
-
* @example
|
|
385
|
-
* ```tsx
|
|
386
|
-
* // Basic usage
|
|
387
|
-
* const theme = useTheme()
|
|
388
|
-
*
|
|
389
|
-
* // With custom theme type
|
|
390
|
-
* const theme = useTheme<MyCustomTheme>()
|
|
391
|
-
* ```
|
|
392
|
-
*
|
|
393
|
-
* @throws {Error} If used outside a ThemeProvider
|
|
394
|
-
*/
|
|
395
|
-
declare const useTheme: <T extends Theme = Theme>() => T;
|
|
396
|
-
|
|
397
|
-
/**
|
|
398
|
-
* Default spacing scale
|
|
399
|
-
*/
|
|
400
|
-
declare const defaultSpacing: Theme['spacing'];
|
|
401
|
-
/**
|
|
402
|
-
* Default border radius scale
|
|
403
|
-
*/
|
|
404
|
-
declare const defaultRadius: Theme['radius'];
|
|
405
|
-
/**
|
|
406
|
-
* Default shadow scale
|
|
407
|
-
*/
|
|
408
|
-
declare const defaultShadows: Theme['shadows'];
|
|
409
|
-
/**
|
|
410
|
-
* Default font size scale
|
|
411
|
-
*/
|
|
412
|
-
declare const defaultFontSize: Theme['fontSize'];
|
|
413
|
-
/**
|
|
414
|
-
* Default font weight scale
|
|
415
|
-
*/
|
|
416
|
-
declare const defaultFontWeight: Theme['fontWeight'];
|
|
417
|
-
/**
|
|
418
|
-
* Default line height scale
|
|
419
|
-
*/
|
|
420
|
-
declare const defaultLineHeight: Theme['lineHeight'];
|
|
421
|
-
/**
|
|
422
|
-
* Default z-index scale
|
|
423
|
-
*/
|
|
424
|
-
declare const defaultZIndex: Theme['zIndex'];
|
|
425
|
-
/**
|
|
426
|
-
* Default transition scale
|
|
427
|
-
*/
|
|
428
|
-
declare const defaultTransition: Theme['transition'];
|
|
429
|
-
/**
|
|
430
|
-
* Default opacity scale
|
|
431
|
-
*/
|
|
432
|
-
declare const defaultOpacity: Theme['opacity'];
|
|
433
|
-
/**
|
|
434
|
-
* Default responsive breakpoints
|
|
435
|
-
*/
|
|
436
|
-
declare const defaultBreakpoints: Theme['breakpoints'];
|
|
437
|
-
/**
|
|
438
|
-
* Complete default theme V2
|
|
439
|
-
*/
|
|
440
|
-
declare const defaultTheme: Theme;
|
|
441
|
-
|
|
442
|
-
/**
|
|
443
|
-
* Create a theme by merging a base theme with overrides
|
|
444
|
-
*
|
|
445
|
-
* @param baseTheme - The base theme to extend
|
|
446
|
-
* @param overrides - Partial overrides to apply
|
|
447
|
-
* @param options - Optional configuration
|
|
448
|
-
* @param options.mode - 'merge' (default) deep merges, 'replace' replaces entire categories
|
|
449
|
-
*
|
|
450
|
-
* @example
|
|
451
|
-
* ```ts
|
|
452
|
-
* // Default behavior: deep merge (extends existing tokens)
|
|
453
|
-
* const myTheme = createTheme(defaultTheme, {
|
|
454
|
-
* colors: {
|
|
455
|
-
* primary: '#ff0000',
|
|
456
|
-
* // Other color tokens from defaultTheme are preserved
|
|
457
|
-
* },
|
|
458
|
-
* })
|
|
459
|
-
*
|
|
460
|
-
* // Replace mode: completely replace categories
|
|
461
|
-
* const myTheme = createTheme(defaultTheme, {
|
|
462
|
-
* colors: {
|
|
463
|
-
* // This becomes the ENTIRE colors object
|
|
464
|
-
* brand: '#ff0000',
|
|
465
|
-
* surface: '#ffffff',
|
|
466
|
-
* text: '#000000',
|
|
467
|
-
* },
|
|
468
|
-
* }, { mode: 'replace' })
|
|
469
|
-
* ```
|
|
470
|
-
*/
|
|
471
|
-
declare const createTheme: <T extends Theme>(baseTheme: T, overrides: DeepPartial<T>, options?: CreateThemeOptions) => T;
|
|
472
|
-
/**
|
|
473
|
-
* Merge multiple theme overrides into one
|
|
474
|
-
* Later overrides take precedence
|
|
475
|
-
*
|
|
476
|
-
* @example
|
|
477
|
-
* ```ts
|
|
478
|
-
* const theme = mergeThemes(
|
|
479
|
-
* baseTheme,
|
|
480
|
-
* brandOverrides,
|
|
481
|
-
* darkModeOverrides,
|
|
482
|
-
* userPreferences
|
|
483
|
-
* )
|
|
484
|
-
* ```
|
|
485
|
-
*/
|
|
486
|
-
declare const mergeThemes: <T extends Theme>(baseTheme: T, ...overrides: DeepPartial<T>[]) => T;
|
|
487
|
-
/**
|
|
488
|
-
* Create a theme extension factory
|
|
489
|
-
* Useful for creating theme variants (dark mode, high contrast, etc.)
|
|
490
|
-
*
|
|
491
|
-
* @example
|
|
492
|
-
* ```ts
|
|
493
|
-
* const createDarkVariant = createThemeVariant({
|
|
494
|
-
* colors: {
|
|
495
|
-
* background: '#1a1a1a',
|
|
496
|
-
* text: '#ffffff',
|
|
497
|
-
* },
|
|
498
|
-
* })
|
|
499
|
-
*
|
|
500
|
-
* const darkTheme = createDarkVariant(lightTheme)
|
|
501
|
-
* ```
|
|
502
|
-
*/
|
|
503
|
-
declare const createThemeVariant: <T extends Theme>(variantOverrides: DeepPartial<T>) => (baseTheme: T) => T;
|
|
504
|
-
/**
|
|
505
|
-
* Create a fully custom theme with your own color tokens
|
|
506
|
-
* This allows you to define a completely different color token structure
|
|
507
|
-
* without being constrained by BaseColors
|
|
508
|
-
*
|
|
509
|
-
* @param config - Full theme configuration with custom colors
|
|
510
|
-
*
|
|
511
|
-
* @example
|
|
512
|
-
* ```ts
|
|
513
|
-
* // Define your custom color tokens
|
|
514
|
-
* type MyBrandColors = {
|
|
515
|
-
* brand: string
|
|
516
|
-
* brandHover: string
|
|
517
|
-
* brandActive: string
|
|
518
|
-
* surface: string
|
|
519
|
-
* surfaceElevated: string
|
|
520
|
-
* textPrimary: string
|
|
521
|
-
* textSecondary: string
|
|
522
|
-
* border: string
|
|
523
|
-
* }
|
|
524
|
-
*
|
|
525
|
-
* // Create a theme with ONLY your color tokens
|
|
526
|
-
* const myTheme = createCustomTheme<MyBrandColors>({
|
|
527
|
-
* colors: {
|
|
528
|
-
* brand: '#007bff',
|
|
529
|
-
* brandHover: '#0056b3',
|
|
530
|
-
* brandActive: '#004085',
|
|
531
|
-
* surface: '#ffffff',
|
|
532
|
-
* surfaceElevated: '#f8f9fa',
|
|
533
|
-
* textPrimary: '#212529',
|
|
534
|
-
* textSecondary: '#6c757d',
|
|
535
|
-
* border: '#dee2e6',
|
|
536
|
-
* },
|
|
537
|
-
* // Uses defaults for other tokens, or provide your own:
|
|
538
|
-
* // spacing: { ... },
|
|
539
|
-
* // radius: { ... },
|
|
540
|
-
* })
|
|
541
|
-
*
|
|
542
|
-
* // TypeScript knows your theme has only YOUR color tokens:
|
|
543
|
-
* myTheme.colors.brand // ✅ OK
|
|
544
|
-
* myTheme.colors.primary // ❌ Error - doesn't exist
|
|
545
|
-
* ```
|
|
546
|
-
*/
|
|
547
|
-
declare const createCustomTheme: <TColors extends Record<string, string>, TSpacing extends Record<string, string> = typeof defaultSpacing, TRadius extends Record<string, string> = typeof defaultRadius, TShadows extends Record<string, string> = typeof defaultShadows, TFontSize extends Record<string, string> = typeof defaultFontSize, TFontWeight extends Record<string, number> = typeof defaultFontWeight, TLineHeight extends Record<string, number> = typeof defaultLineHeight, TZIndex extends Record<string, number> = typeof defaultZIndex, TTransition extends Record<string, string> = typeof defaultTransition, TOpacity extends Record<string, number> = typeof defaultOpacity, TBreakpoints extends Record<string, string> = typeof defaultBreakpoints>(config: {
|
|
548
|
-
colors: TColors;
|
|
549
|
-
spacing?: TSpacing;
|
|
550
|
-
radius?: TRadius;
|
|
551
|
-
shadows?: TShadows;
|
|
552
|
-
fontSize?: TFontSize;
|
|
553
|
-
fontWeight?: TFontWeight;
|
|
554
|
-
lineHeight?: TLineHeight;
|
|
555
|
-
zIndex?: TZIndex;
|
|
556
|
-
transition?: TTransition;
|
|
557
|
-
opacity?: TOpacity;
|
|
558
|
-
breakpoints?: TBreakpoints;
|
|
559
|
-
}) => CustomTheme<TColors, TSpacing, TRadius, TShadows, TFontSize, TFontWeight, TLineHeight, TZIndex, TTransition, TOpacity, TBreakpoints>;
|
|
560
|
-
|
|
561
|
-
/**
|
|
562
|
-
* Color Scales - Modern color palettes with shades from 25 to 950
|
|
563
|
-
*
|
|
564
|
-
* Scales are only accessible via the colors object to maintain consistency
|
|
565
|
-
*
|
|
566
|
-
* @example
|
|
567
|
-
* ```ts
|
|
568
|
-
* import { colors } from '@aurora-ui/theme'
|
|
569
|
-
*
|
|
570
|
-
* colors.indigo[500] // '#6366f1'
|
|
571
|
-
* colors.emerald[400] // '#34d399'
|
|
572
|
-
* colors.gray[900] // '#18181b'
|
|
573
|
-
* ```
|
|
574
|
-
*/
|
|
575
|
-
/**
|
|
576
|
-
* All color scales organized by name
|
|
577
|
-
* All scales and special values are only accessible via this object
|
|
578
|
-
*/
|
|
38
|
+
/** All color scales (19 scales with 12 shades each) */
|
|
579
39
|
declare const colors: {
|
|
580
40
|
readonly gray: ColorScale;
|
|
581
41
|
readonly slate: ColorScale;
|
|
@@ -589,7 +49,6 @@ declare const colors: {
|
|
|
589
49
|
readonly emerald: ColorScale;
|
|
590
50
|
readonly teal: ColorScale;
|
|
591
51
|
readonly cyan: ColorScale;
|
|
592
|
-
readonly sky: ColorScale;
|
|
593
52
|
readonly blue: ColorScale;
|
|
594
53
|
readonly indigo: ColorScale;
|
|
595
54
|
readonly violet: ColorScale;
|
|
@@ -603,15 +62,39 @@ declare const colors: {
|
|
|
603
62
|
readonly current: "currentColor";
|
|
604
63
|
};
|
|
605
64
|
|
|
65
|
+
type ThemeProviderProps = {
|
|
66
|
+
theme: Theme;
|
|
67
|
+
children?: ReactNode;
|
|
68
|
+
};
|
|
606
69
|
/**
|
|
607
|
-
*
|
|
608
|
-
*
|
|
70
|
+
* Provides the theme to all child components.
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* ```tsx
|
|
74
|
+
* <ThemeProvider theme={lightTheme}>
|
|
75
|
+
* <App />
|
|
76
|
+
* </ThemeProvider>
|
|
77
|
+
* ```
|
|
609
78
|
*/
|
|
610
|
-
declare const
|
|
611
|
-
|
|
79
|
+
declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
|
|
612
80
|
/**
|
|
613
|
-
*
|
|
81
|
+
* Hook to access the current theme.
|
|
82
|
+
*
|
|
83
|
+
* Type is automatically inferred from ThemeRegistry (module augmentation).
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```tsx
|
|
87
|
+
* function MyComponent() {
|
|
88
|
+
* const theme = useTheme()
|
|
89
|
+
* return <div style={{ color: theme.colors.primary }} />
|
|
90
|
+
* }
|
|
91
|
+
* ```
|
|
92
|
+
*
|
|
93
|
+
* @throws {Error} If used outside a ThemeProvider
|
|
614
94
|
*/
|
|
95
|
+
declare const useTheme: () => Theme;
|
|
96
|
+
|
|
97
|
+
/** CSS properties with support for pseudo-classes, media/container queries, and complex selectors */
|
|
615
98
|
type StyleWithPseudos = CSSProperties & {
|
|
616
99
|
[key: `:${string}`]: CSSProperties;
|
|
617
100
|
[key: `@media ${string}`]: CSSProperties;
|
|
@@ -619,194 +102,47 @@ type StyleWithPseudos = CSSProperties & {
|
|
|
619
102
|
[key: `@supports ${string}`]: CSSProperties;
|
|
620
103
|
[key: `& ${string}` | `&>${string}` | `&:${string}` | `&[${string}`]: CSSProperties;
|
|
621
104
|
};
|
|
622
|
-
/**
|
|
623
|
-
* Type for a function that returns StyleWithPseudos with any parameters
|
|
624
|
-
*/
|
|
105
|
+
/** Function that returns StyleWithPseudos */
|
|
625
106
|
type StyleFunction = (...args: never[]) => StyleWithPseudos;
|
|
626
|
-
/**
|
|
627
|
-
* Type for @font-face options
|
|
628
|
-
*/
|
|
107
|
+
/** Options for @font-face */
|
|
629
108
|
type FontFaceOptions = {
|
|
630
|
-
/** Font family name */
|
|
631
109
|
fontFamily: string;
|
|
632
|
-
/** Font source(s) - URL or local() */
|
|
633
110
|
src: string;
|
|
634
|
-
/** Font style */
|
|
635
111
|
fontStyle?: 'normal' | 'italic' | 'oblique';
|
|
636
|
-
/** Font weight */
|
|
637
112
|
fontWeight?: number | string;
|
|
638
|
-
/** Display behavior */
|
|
639
113
|
fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
|
|
640
|
-
/** Unicode character range */
|
|
641
114
|
unicodeRange?: string;
|
|
642
115
|
};
|
|
643
116
|
|
|
644
117
|
/**
|
|
645
|
-
*
|
|
646
|
-
*
|
|
647
|
-
* Supports custom extended themes via generic parameter.
|
|
648
|
-
*
|
|
649
|
-
* @example
|
|
650
|
-
* ```ts
|
|
651
|
-
* // Basic usage with default theme
|
|
652
|
-
* const STYLES = createStyles((theme) => ({
|
|
653
|
-
* root: {
|
|
654
|
-
* display: 'flex',
|
|
655
|
-
* padding: theme.spacing.md,
|
|
656
|
-
* ':hover': { backgroundColor: theme.colors.backgroundHover },
|
|
657
|
-
* }
|
|
658
|
-
* }))
|
|
659
|
-
*
|
|
660
|
-
* // With custom extended theme
|
|
661
|
-
* type MyTheme = Theme & { colors: BaseColors & { accent: string } }
|
|
662
|
-
*
|
|
663
|
-
* const STYLES = createStyles<MyTheme>((theme) => ({
|
|
664
|
-
* root: {
|
|
665
|
-
* backgroundColor: theme.colors.accent, // TypeScript knows about accent!
|
|
666
|
-
* }
|
|
667
|
-
* }))
|
|
668
|
-
* ```
|
|
669
|
-
*/
|
|
670
|
-
declare const createStyles: <TTheme extends Theme = Theme, T extends Record<string, StyleWithPseudos | StyleFunction> = Record<string, StyleWithPseudos | StyleFunction>>(stylesOrCreator: T | ((theme: TTheme) => T)) => { [K in keyof T]: T[K] extends (...args: infer TArgs) => StyleWithPseudos ? (...args: TArgs) => string : string; };
|
|
671
|
-
/**
|
|
672
|
-
* Create a typed createStyles function pre-configured with your custom theme type.
|
|
673
|
-
* This eliminates the need to specify the theme type on every createStyles call.
|
|
674
|
-
*
|
|
675
|
-
* @example
|
|
676
|
-
* ```ts
|
|
677
|
-
* // 1. Define your custom theme
|
|
678
|
-
* type MyTheme = CustomTheme<{
|
|
679
|
-
* brand: string
|
|
680
|
-
* brandHover: string
|
|
681
|
-
* surface: string
|
|
682
|
-
* }>
|
|
683
|
-
*
|
|
684
|
-
* // 2. Create a pre-typed createStyles function (do this once)
|
|
685
|
-
* export const createStyles = createTypedStyles<MyTheme>()
|
|
686
|
-
*
|
|
687
|
-
* // 3. Use it everywhere without specifying the type!
|
|
688
|
-
* const STYLES = createStyles((theme) => ({
|
|
689
|
-
* button: {
|
|
690
|
-
* backgroundColor: theme.colors.brand, // ✅ TypeScript knows!
|
|
691
|
-
* // backgroundColor: theme.colors.primary, // ❌ Error - doesn't exist
|
|
692
|
-
* },
|
|
693
|
-
* }))
|
|
694
|
-
* ```
|
|
118
|
+
* Creates styles with theme support. Type is inferred from ThemeRegistry.
|
|
119
|
+
* Supports pseudo-classes, media queries, and complex selectors.
|
|
695
120
|
*/
|
|
696
|
-
declare const
|
|
121
|
+
declare const createStyles: <T extends Record<string, StyleWithPseudos | StyleFunction> = Record<string, StyleWithPseudos | StyleFunction>>(stylesOrCreator: T | ((theme: Theme) => T)) => { [K in keyof T]: T[K] extends (...args: infer TArgs) => StyleWithPseudos ? (...args: TArgs) => string : string; };
|
|
697
122
|
|
|
698
|
-
/**
|
|
699
|
-
* Create and inject keyframes
|
|
700
|
-
*
|
|
701
|
-
* @example
|
|
702
|
-
* ```ts
|
|
703
|
-
* const fadeIn = keyframes({
|
|
704
|
-
* from: { opacity: 0 },
|
|
705
|
-
* to: { opacity: 1 }
|
|
706
|
-
* })
|
|
707
|
-
*
|
|
708
|
-
* const STYLES = createStyles({
|
|
709
|
-
* animated: { animation: `${fadeIn} 0.3s ease-in-out` }
|
|
710
|
-
* })
|
|
711
|
-
* ```
|
|
712
|
-
*/
|
|
123
|
+
/** Creates and injects a @keyframes rule, returns the animation name */
|
|
713
124
|
declare const keyframes: (frames: Record<string, CSSProperties>) => string;
|
|
714
125
|
|
|
715
|
-
/**
|
|
716
|
-
* Inject a @font-face rule
|
|
717
|
-
*
|
|
718
|
-
* @example
|
|
719
|
-
* ```ts
|
|
720
|
-
* fontFace({
|
|
721
|
-
* fontFamily: 'MyFont',
|
|
722
|
-
* src: "url('/fonts/myfont.woff2') format('woff2')",
|
|
723
|
-
* fontWeight: 400,
|
|
724
|
-
* fontStyle: 'normal',
|
|
725
|
-
* fontDisplay: 'swap'
|
|
726
|
-
* })
|
|
727
|
-
* ```
|
|
728
|
-
*/
|
|
126
|
+
/** Injects a @font-face rule and returns the font family name */
|
|
729
127
|
declare const fontFace: (options: FontFaceOptions) => string;
|
|
730
128
|
|
|
731
|
-
/**
|
|
732
|
-
* Create CSS variables from the theme
|
|
733
|
-
* Injects variables into :root
|
|
734
|
-
*
|
|
735
|
-
* @example
|
|
736
|
-
* ```ts
|
|
737
|
-
* // In ThemeProvider
|
|
738
|
-
* injectCssVariables(theme, 'aurora')
|
|
739
|
-
* // Generates: :root { --aurora-colors-primary: #2563EB; ... }
|
|
740
|
-
* ```
|
|
741
|
-
*/
|
|
129
|
+
/** Injects CSS variables from theme into :root */
|
|
742
130
|
declare const injectCssVariables: (theme: Theme, prefix?: string) => void;
|
|
743
|
-
/**
|
|
744
|
-
* Helper to use a CSS variable from the theme
|
|
745
|
-
*
|
|
746
|
-
* @example
|
|
747
|
-
* ```ts
|
|
748
|
-
* const STYLES = createStyles({
|
|
749
|
-
* root: { color: cssVar('colors-primary') }
|
|
750
|
-
* })
|
|
751
|
-
* // Generates: color: var(--theme-colors-primary)
|
|
752
|
-
* ```
|
|
753
|
-
*/
|
|
131
|
+
/** Returns a CSS var() reference for a theme path */
|
|
754
132
|
declare const cssVar: (path: string, fallback?: string) => string;
|
|
755
|
-
/**
|
|
756
|
-
* Create CSS variable references from a typed object
|
|
757
|
-
* Returns an object with the same structure where values are var() references
|
|
758
|
-
*
|
|
759
|
-
* @example
|
|
760
|
-
* ```ts
|
|
761
|
-
* const vars = cssVariables({
|
|
762
|
-
* primaryColor: '#007bff',
|
|
763
|
-
* spacing: '1rem',
|
|
764
|
-
* })
|
|
765
|
-
* // vars.primaryColor === 'var(--primary-color)'
|
|
766
|
-
* ```
|
|
767
|
-
*/
|
|
133
|
+
/** Creates CSS variable references from an object */
|
|
768
134
|
declare const cssVariables: <T extends Record<string, string | number>>(variables: T, options?: {
|
|
769
135
|
prefix?: string;
|
|
770
136
|
inject?: boolean;
|
|
771
137
|
}) => { [K in keyof T]: string; };
|
|
772
138
|
|
|
773
|
-
/**
|
|
774
|
-
* SSR: Get all collected CSS rules as a single string
|
|
775
|
-
* @returns The CSS content to inject into HTML
|
|
776
|
-
*/
|
|
139
|
+
/** SSR: Returns all collected CSS rules as a single string */
|
|
777
140
|
declare const getSSRStyles: () => string;
|
|
778
|
-
/**
|
|
779
|
-
* SSR: Get styles as a <style> tag ready to inject
|
|
780
|
-
* @returns The complete style tag to inject into <head>
|
|
781
|
-
*/
|
|
141
|
+
/** SSR: Returns styles wrapped in a style tag */
|
|
782
142
|
declare const getSSRStyleTag: () => string;
|
|
783
|
-
/**
|
|
784
|
-
* SSR: Clear the collected rules buffer
|
|
785
|
-
* Call at the beginning of each SSR request to ensure clean state
|
|
786
|
-
*/
|
|
143
|
+
/** SSR: Clears the collected rules buffer */
|
|
787
144
|
declare const clearSSRRules: () => void;
|
|
788
|
-
/**
|
|
789
|
-
* SSR: Get raw CSS rules as an array
|
|
790
|
-
* @returns Array of CSS rules
|
|
791
|
-
*/
|
|
145
|
+
/** SSR: Returns raw CSS rules as an array */
|
|
792
146
|
declare const getSSRRulesArray: () => string[];
|
|
793
147
|
|
|
794
|
-
|
|
795
|
-
* Set the theme getter
|
|
796
|
-
*/
|
|
797
|
-
declare const setThemeContextGetter: (getter: (() => Theme | undefined) | null) => (() => Theme | undefined) | null;
|
|
798
|
-
/**
|
|
799
|
-
* Get the current theme
|
|
800
|
-
*/
|
|
801
|
-
declare const getTheme: () => Theme | undefined;
|
|
802
|
-
/**
|
|
803
|
-
* Insert a CSS rule
|
|
804
|
-
*/
|
|
805
|
-
declare const insertRule: (rule: string) => void;
|
|
806
|
-
/**
|
|
807
|
-
* Sanitize a CSS value to prevent injection attacks
|
|
808
|
-
* Returns the sanitized value or 'unset' if the value is dangerous
|
|
809
|
-
*/
|
|
810
|
-
declare const sanitizeCssValue: (value: string) => string;
|
|
811
|
-
|
|
812
|
-
export { type BaseBreakpoints, type BaseColors, type BaseFontSize, type BaseFontWeight, type BaseLineHeight, type BaseOpacity, type BaseRadius, type BaseShadows, type BaseSpacing, type BaseTransition, type BaseZIndex, type ColorName, type ColorScale, type ColorShade, type CreateCustomThemeOptions, type CreateThemeOptions, type CustomTheme, type CustomThemeBase, type DeepPartial, type ExtendTheme, type ExtendedTheme, type FontFaceOptions, type StyleFunction, type StyleWithPseudos, type Theme, type ThemeOverride, ThemeProvider, type ThemeProviderProps, clearSSRRules, colors, createCustomTheme, createStyles, createTheme, createThemeVariant, createTypedStyles, cssVar, cssVariables, defaultBreakpoints, defaultFontSize, defaultFontWeight, defaultLineHeight, defaultOpacity, defaultPalette, defaultRadius, defaultShadows, defaultSpacing, defaultTheme, defaultTransition, defaultZIndex, fontFace, getSSRRulesArray, getSSRStyleTag, getSSRStyles, getTheme, injectCssVariables, insertRule, keyframes, mergeThemes, sanitizeCssValue, setThemeContextGetter, useTheme };
|
|
148
|
+
export { type FontFaceOptions, type StyleFunction, type StyleWithPseudos, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, clearSSRRules, colors, createStyles, createTheme, cssVar, cssVariables, fontFace, getSSRRulesArray, getSSRStyleTag, getSSRStyles, injectCssVariables, keyframes, useTheme };
|