@breadstone/mosaik-themes 0.0.203 → 0.0.206

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/index.node.d.mts DELETED
@@ -1,468 +0,0 @@
1
- /**
2
- * @public
3
- */
4
- type CssRGBColor = `rgb(${number}, ${number}, ${number})`;
5
- /**
6
- * @public
7
- */
8
- type CssRGBAColor = `rgba(${number}, ${number}, ${number}, ${number})`;
9
- /**
10
- * @public
11
- */
12
- type CssHEXColor = `#${string}`;
13
- /**
14
- * @public
15
- */
16
- type CssNameColor = 'aliceblue' | 'antiquewhite' | 'aqua' | 'aquamarine' | 'azure' | 'beige' | 'bisque' | 'black' | 'blanchedalmond' | 'blue' | 'blueviolet' | 'brown' | 'burlywood' | 'cadetblue' | 'chartreuse' | 'chocolate' | 'coral' | 'cornflowerblue' | 'cornsilk' | 'crimson' | 'cyan' | 'darkblue' | 'darkcyan' | 'darkgoldenrod' | 'darkgray' | 'darkgreen' | 'darkgrey' | 'darkkhaki' | 'darkmagenta' | 'darkolivegreen' | 'darkorange' | 'darkorchid' | 'darkred' | 'darksalmon' | 'darkseagreen' | 'darkslateblue' | 'darkslategray' | 'darkslategrey' | 'darkturquoise' | 'darkviolet' | 'deeppink' | 'deepskyblue' | 'dimgray' | 'dimgrey' | 'dodgerblue' | 'firebrick' | 'floralwhite' | 'forestgreen' | 'fuchsia' | 'gainsboro' | 'ghostwhite' | 'gold' | 'goldenrod' | 'gray' | 'green' | 'greenyellow' | 'grey' | 'honeydew' | 'hotpink' | 'indianred' | 'indigo' | 'ivory' | 'khaki' | 'lavender' | 'lavenderblush' | 'lawngreen' | 'lemonchiffon' | 'lightblue' | 'lightcoral' | 'lightcyan' | 'lightgoldenrodyellow' | 'lightgray' | 'lightgreen' | 'lightgrey' | 'lightpink' | 'lightsalmon' | 'lightseagreen' | 'lightskyblue' | 'lightslategray' | 'lightslategrey' | 'lightsteelblue' | 'lightyellow' | 'lime' | 'limegreen' | 'linen' | 'magenta' | 'maroon' | 'mediumaquamarine' | 'mediumblue' | 'mediumorchid' | 'mediumpurple' | 'mediumseagreen' | 'mediumslateblue' | 'mediumspringgreen' | 'mediumturquoise' | 'mediumvioletred' | 'midnightblue' | 'mintcream' | 'mistyrose' | 'moccasin' | 'navajowhite' | 'navy' | 'oldlace' | 'olive' | 'olivedrab' | 'orange' | 'orangered' | 'orchid' | 'palegoldenrod' | 'palegreen' | 'paleturquoise' | 'palevioletred' | 'papayawhip' | 'peachpuff' | 'peru' | 'pink' | 'plum' | 'powderblue' | 'purple' | 'rebeccapurple' | 'red' | 'rosybrown' | 'royalblue' | 'saddlebrown' | 'salmon' | 'sandybrown' | 'seagreen' | 'seashell' | 'sienna' | 'silver' | 'skyblue' | 'slateblue' | 'slategray' | 'slategrey' | 'snow' | 'springgreen' | 'steelblue' | 'tan' | 'teal' | 'thistle' | 'tomato' | 'transparent' | 'turquoise' | 'violet' | 'wheat' | 'white' | 'whitesmoke' | 'yellow' | 'yellowgreen';
17
- /**
18
- * @public
19
- */
20
- type CssColor = CssRGBColor | CssRGBAColor | CssHEXColor;
21
- /**
22
- * @public
23
- */
24
- declare namespace CssColor {
25
- /**
26
- * @public
27
- */
28
- function isCssColor(value: unknown): value is CssColor;
29
- }
30
-
31
- /**
32
- * Represents a dynamic color scheme.
33
- *
34
- * @public
35
- */
36
- interface IThemeScheme {
37
- [key: string]: CssColor;
38
- }
39
-
40
- /**
41
- * Represents a dynamic theme palette.
42
- *
43
- * @public
44
- */
45
- interface IThemePalette {
46
- [key: string]: CssColor;
47
- }
48
- /**
49
- * @public
50
- */
51
- declare namespace IThemePalette {
52
- /**
53
- * Checks if the value is a theme palette.
54
- *
55
- * @param value - The value to check.
56
- * @returns The result.
57
- */
58
- function isThemePalette(value: unknown): value is IThemePalette;
59
- }
60
-
61
- /**
62
- * @public
63
- */
64
- type CssLengthUnit = 'em' | 'ex' | 'ch' | 'rem' | 'vh' | 'vw' | 'vmin' | 'vmax' | 'px' | 'mm' | 'cm' | 'in' | 'pt' | 'pc' | 'mozmm';
65
- /**
66
- * @public
67
- */
68
- type CssLength = `${number}${CssLengthUnit | '%'}` | number | 'auto';
69
- declare namespace CssLength {
70
- /**
71
- * Determines whether the given value is a valid CSS length.
72
- *
73
- * @public
74
- * @param value - The value to check.
75
- * @returns `true` if the value is a valid CSS length; otherwise, `false`.
76
- */
77
- function isCssLength(value: unknown): value is CssLength;
78
- /**
79
- * @public
80
- */
81
- function isAuto(value: unknown): value is Extract<CssLength, 'auto'>;
82
- /**
83
- * @public
84
- */
85
- function isPercentage(value: unknown): value is `${number}%`;
86
- /**
87
- * @public
88
- */
89
- function isLength(value: unknown): value is `${number}${CssLengthUnit}`;
90
- function toNumber(value: CssLength): number;
91
- /**
92
- * Extracts the unit from a CSS length string.
93
- *
94
- * @public
95
- * @param cssLength - The CSS length string to extract the unit from.
96
- * @returns The unit as a `CssLengthUnit`.
97
- * @throws Error if the input is not a valid CSS length.
98
- */
99
- function extractUnit(cssLength: `${number}${CssLengthUnit | '%'}`): CssLengthUnit;
100
- /**
101
- * Extracts the numeric value from a CSS length string.
102
- *
103
- * @public
104
- * @param cssLength - The CSS length string to extract the value from.
105
- * @returns The numeric value as a number.
106
- * @throws Error if the input is not a valid CSS length.
107
- */
108
- function extractValue(cssLength: `${number}${CssLengthUnit | '%'}`): number;
109
- /**
110
- * Converts pixel values to rem units.
111
- *
112
- * @public
113
- * @param pixel - The pixel value to convert.
114
- * @returns The converted value in rem units.
115
- */
116
- function pxToRem(pixel: `${number}${Extract<CssLengthUnit, 'px'>}`): string;
117
- /**
118
- * Tries to parse a value into a `CssLength`.
119
- *
120
- * @public
121
- * @param value - The value to parse.
122
- * @param defaultUnit - The default unit to use if the value is a string without a unit.
123
- * @returns The parsed `CssLength` or `undefined` if parsing fails.
124
- */
125
- function tryParse(value: unknown, defaultUnit?: CssLengthUnit): CssLength | undefined;
126
- }
127
-
128
- /**
129
- * Represents a valid CSS box-shadow value (single or multiple).
130
- *
131
- * @public
132
- */
133
- type CssShadowSingle = 'none' | `${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${CssColor}` | `inset ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${CssColor}` | `${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${CssColor}` | `inset ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${CssColor}` | `${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${CssColor}` | `inset ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${`${number}${Extract<CssLengthUnit, 'px'>}`} ${CssColor}`;
134
- /**
135
- * Represents a valid CSS box-shadow value, including multiple shadows.
136
- *
137
- * @public
138
- */
139
- type CssShadow = CssShadowSingle | `${CssShadowSingle}, ${CssShadowSingle}` | `${CssShadowSingle}, ${CssShadowSingle}, ${CssShadowSingle}`;
140
- /**
141
- * @public
142
- */
143
- declare namespace CssShadow {
144
- /**
145
- * Checks if the given value is a valid CSS box-shadow (single or multiple).
146
- *
147
- * @param value - The value to check.
148
- * @returns `true` if the value is a valid CSS box-shadow, otherwise `false`.
149
- */
150
- function isCssShadow(value: unknown): value is CssShadow;
151
- }
152
-
153
- /**
154
- * Represents dynamic shadow elevation styles.
155
- *
156
- * @public
157
- */
158
- interface IThemeElevation {
159
- [key: string]: CssShadow;
160
- }
161
-
162
- /**
163
- * Represents dynamic layout properties.
164
- *
165
- * @public
166
- */
167
- interface IThemeLayout {
168
- thickness?: CssLength;
169
- radius?: CssLength;
170
- space?: CssLength;
171
- }
172
-
173
- /**
174
- * Represents dynamic typography styles.
175
- *
176
- * @public
177
- */
178
- interface IThemeTypographyFontType {
179
- fontFamily?: string;
180
- fontSize: `${number}${Extract<CssLengthUnit, 'px'>}`;
181
- lineHeight: `${number}${Extract<CssLengthUnit, 'px'>}` | `${number}`;
182
- fontWeight: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
183
- letterSpacing: `${number}${Extract<CssLengthUnit, 'px'>}` | `${number}` | 'normal';
184
- textDecoration: 'none' | 'underline' | 'overline' | 'line-through';
185
- textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
186
- }
187
-
188
- /**
189
- * Represents dynamic typography styles.
190
- *
191
- * @public
192
- */
193
- interface IThemeTypography {
194
- [key: string]: IThemeTypographyFontType;
195
- }
196
-
197
- /**
198
- * Represents a dynamic theme system.
199
- *
200
- * @public
201
- */
202
- interface ITheme {
203
- name: string;
204
- scheme: Record<string, IThemeScheme>;
205
- palette: Record<string, Record<string, IThemePalette | CssColor>>;
206
- fontFamily: string;
207
- typography: IThemeTypography;
208
- layout: IThemeLayout;
209
- elevation: Record<string, IThemeElevation>;
210
- }
211
- /**
212
- * @public
213
- */
214
- declare namespace ITheme {
215
- function getScheme(theme: ITheme, mode: string): IThemeScheme;
216
- function getSchemeColor(theme: ITheme, mode: string, key: string): CssColor;
217
- function getPalette(theme: ITheme, mode: string, palette: string): IThemePalette;
218
- function getPaletteColor(theme: ITheme, mode: string, palette: string, key: string): CssColor;
219
- }
220
-
221
- /**
222
- * @public
223
- */
224
- interface IThemeMetadata {
225
- theme: ITheme;
226
- palettes: Array<string>;
227
- paletteVariants: Array<string>;
228
- schemes: Array<string>;
229
- schemeVariants: Array<string>;
230
- elevation: Array<string>;
231
- elevationVariants: Array<string>;
232
- typographies: Array<string>;
233
- }
234
-
235
- declare namespace BootstrapTheme {
236
- const BOOTSTRAP_THEME: ITheme;
237
- const BOOTSTRAP_THEME_PALETTES: string[];
238
- const BOOTSTRAP_THEME_PALETTE_VARIANTS: string[];
239
- const BOOTSTRAP_THEME_SCHEMES: string[];
240
- const BOOTSTRAP_THEME_SCHEME_VARIANTS: string[];
241
- const BOOTSTRAP_THEME_ELEVATION: string[];
242
- const BOOTSTRAP_THEME_ELEVATION_VARIANTS: string[];
243
- const BOOTSTRAP_THEME_METADATA: IThemeMetadata;
244
- }
245
-
246
- declare namespace JoyTheme {
247
- const JOY_THEME: ITheme;
248
- const JOY_THEME_PALETTES: string[];
249
- const JOY_THEME_PALETTE_VARIANTS: string[];
250
- const JOY_THEME_SCHEMES: string[];
251
- const JOY_THEME_SCHEME_VARIANTS: string[];
252
- const JOY_THEME_ELEVATION: string[];
253
- const JOY_THEME_ELEVATION_VARIANTS: string[];
254
- const JOY_THEME_TYPOGRAPHY: string[];
255
- const JOY_THEME_METADATA: IThemeMetadata;
256
- }
257
-
258
- declare namespace MemphisTheme {
259
- const MEMPHIS_THEME: ITheme;
260
- const MEMPHIS_THEME_PALETTES: string[];
261
- const MEMPHIS_THEME_PALETTE_VARIANTS: string[];
262
- const MEMPHIS_THEME_SCHEMES: string[];
263
- const MEMPHIS_THEME_SCHEME_VARIANTS: string[];
264
- const MEMPHIS_THEME_ELEVATION: string[];
265
- const MEMPHIS_THEME_ELEVATION_VARIANTS: string[];
266
- const MEMPHIS_THEME_TYPOGRAPHY: string[];
267
- const MEMPHIS_THEME_METADATA: IThemeMetadata;
268
- }
269
-
270
- declare namespace CosmopolitanTheme {
271
- const COSMOPOLITAN_THEME: ITheme;
272
- const COSMOPOLITAN_THEME_PALETTES: string[];
273
- const COSMOPOLITAN_THEME_PALETTE_VARIANTS: string[];
274
- const COSMOPOLITAN_THEME_SCHEMES: string[];
275
- const COSMOPOLITAN_THEME_SCHEME_VARIANTS: string[];
276
- const COSMOPOLITAN_THEME_ELEVATION: string[];
277
- const COSMOPOLITAN_THEME_ELEVATION_VARIANTS: string[];
278
- const COSMOPOLITAN_THEME_TYPOGRAPHY: string[];
279
- const COSMOPOLITAN_THEME_METADATA: IThemeMetadata;
280
- }
281
-
282
- /**
283
- * @public
284
- */
285
- type CssAspectRatio = 'auto' | `${number}` | `${number}/${number}`;
286
- /**
287
- * @public
288
- */
289
- declare namespace CssAspectRatio {
290
- /**
291
- * @public
292
- */
293
- function isCssAspectRatio(value: unknown): value is CssAspectRatio;
294
- }
295
-
296
- /**
297
- * @public
298
- */
299
- type CssTimeUnit = 's' | 'ms';
300
- /**
301
- * @public
302
- */
303
- type CssTime = `${string}${CssTimeUnit}` | number | 0;
304
- /**
305
- * @public
306
- */
307
- declare namespace CssTime {
308
- /**
309
- * @public
310
- */
311
- function isCssTime(value: unknown): value is CssTime;
312
- }
313
-
314
- /**
315
- * Strategy interface for theme-specific palette and scheme generation.
316
- *
317
- * @public
318
- */
319
- interface IThemeGeneratorStrategy {
320
- /**
321
- * Generates a color palette for the theme.
322
- *
323
- * @param baseColor - The base color to generate the palette from
324
- * @param mode - The color mode (dark or light)
325
- * @returns The generated palette
326
- */
327
- generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
328
- /**
329
- * Generates a color scheme for the theme.
330
- *
331
- * @param baseColor - The base color to generate the scheme from
332
- * @param mode - The color mode (dark or light)
333
- * @returns The generated scheme
334
- */
335
- generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
336
- }
337
-
338
- /**
339
- * Factory function type for creating theme generator strategies.
340
- *
341
- * @public
342
- */
343
- type ThemeGeneratorFactoryFn = () => IThemeGeneratorStrategy;
344
-
345
- /**
346
- * Material Design theme generator strategy.
347
- *
348
- * @public
349
- */
350
- declare class MaterialThemeGeneratorStrategy implements IThemeGeneratorStrategy {
351
- constructor();
352
- generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
353
- generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
354
- }
355
- /**
356
- * Generates a Material theme generator strategy.
357
- *
358
- * @public
359
- */
360
- declare function createMaterialTheme(): ThemeGeneratorFactoryFn;
361
-
362
- /**
363
- * Joy UI theme generator strategy.
364
- * Uses the same generation logic as Material Design.
365
- *
366
- * @public
367
- */
368
- declare class JoyThemeGeneratorStrategy implements IThemeGeneratorStrategy {
369
- private readonly _materialStrategy;
370
- constructor();
371
- generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
372
- generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
373
- }
374
- /**
375
- * Generates a Joy theme generator strategy.
376
- *
377
- * @public
378
- */
379
- declare function createJoyTheme(): ThemeGeneratorFactoryFn;
380
-
381
- /**
382
- * Memphis theme generator strategy.
383
- * Uses the same generation logic as Material Design.
384
- *
385
- * @public
386
- */
387
- declare class MemphisThemeGeneratorStrategy implements IThemeGeneratorStrategy {
388
- private readonly _materialStrategy;
389
- constructor();
390
- generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
391
- generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
392
- }
393
- /**
394
- * Generates a Memphis theme generator strategy.
395
- *
396
- * @public
397
- */
398
- declare function createMemphisTheme(): ThemeGeneratorFactoryFn;
399
-
400
- /**
401
- * Cosmopolitan theme generator strategy.
402
- *
403
- * @public
404
- */
405
- declare class CosmopolitanThemeGeneratorStrategy implements IThemeGeneratorStrategy {
406
- private readonly _materialStrategy;
407
- constructor();
408
- generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
409
- generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
410
- }
411
- /**
412
- * Generates a Cosmopolitan theme generator strategy.
413
- *
414
- * @public
415
- */
416
- declare function createCosmopolitanTheme(): ThemeGeneratorFactoryFn;
417
-
418
- /**
419
- * Tailwind-like strategy.
420
- *
421
- * Generates a color palette with the following shade steps:
422
- * 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
423
- *
424
- * Each returned color is a hex string (CssColor).
425
- */
426
- declare class TailwindThemeGeneratorStrategy implements IThemeGeneratorStrategy {
427
- /**
428
- * Generates a palette of shades based on a base/accent color.
429
- *
430
- * @param baseColor - The base/accent color (e.g. "#3498db")
431
- * @param mode - 'light' or 'dark' mode: determines how light or dark the palette extremes are.
432
- * @returns An IThemePalette mapping each shade step to a hex color.
433
- *
434
- * Example (light mode, baseColor = blue-ish):
435
- * {
436
- * "50": "#f5faff",
437
- * "100": "#e1f3ff",
438
- * ...
439
- * "500": "#3498db",
440
- * ...
441
- * "900": "#0a2d4b"
442
- * }
443
- */
444
- generatePalette(baseColor: CssColor, mode: 'light' | 'dark'): IThemePalette;
445
- /**
446
- * Generates a semantic color scheme for UI usage, based on the generated palette.
447
- *
448
- * @param baseColor - The base/accent color
449
- * @param mode - 'light' or 'dark'
450
- * @returns An IThemeScheme with semantic color roles.
451
- *
452
- * Returned keys:
453
- * - background → shade "50"
454
- * - foreground → shade "900"
455
- * - primary → shade "500"
456
- * - accent → shade "700"
457
- * - muted → shade "300"
458
- */
459
- generateScheme(baseColor: CssColor, mode: 'light' | 'dark'): IThemeScheme;
460
- }
461
- /**
462
- * Generates a Tailwind theme generator strategy.
463
- *
464
- * @public
465
- */
466
- declare function createTailwindTheme(): ThemeGeneratorFactoryFn;
467
-
468
- export { BootstrapTheme, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, type CssHEXColor, CssLength, type CssLengthUnit, type CssNameColor, type CssRGBAColor, type CssRGBColor, CssShadow, type CssShadowSingle, CssTime, type CssTimeUnit, ITheme, type IThemeElevation, type IThemeGeneratorStrategy, type IThemeLayout, type IThemeMetadata, IThemePalette, type IThemeScheme, type IThemeTypography, type IThemeTypographyFontType, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, TailwindThemeGeneratorStrategy, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };