@breadstone/mosaik-themes 0.0.181 → 0.0.183

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 (184) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/index.cjs +3005 -0
  3. package/index.cjs.map +1 -0
  4. package/index.d.mts +615 -0
  5. package/index.d.ts +615 -0
  6. package/index.js +2983 -0
  7. package/index.js.map +1 -0
  8. package/index.node.cjs +2710 -0
  9. package/index.node.cjs.map +1 -0
  10. package/index.node.d.mts +468 -0
  11. package/index.node.d.ts +468 -0
  12. package/index.node.js +2695 -0
  13. package/index.node.js.map +1 -0
  14. package/package.json +11 -12
  15. package/tailwind/v3/index.d.ts +0 -1
  16. package/tailwind/v3/index.d.ts.map +1 -1
  17. package/tailwind/v3/index.js +0 -4
  18. package/tailwind/v3/index.js.map +1 -1
  19. package/Index.d.ts +0 -31
  20. package/Index.d.ts.map +0 -1
  21. package/Index.js +0 -21
  22. package/Index.js.map +0 -1
  23. package/Theming/BootstrapTheme.d.ts +0 -12
  24. package/Theming/BootstrapTheme.d.ts.map +0 -1
  25. package/Theming/BootstrapTheme.js +0 -138
  26. package/Theming/BootstrapTheme.js.map +0 -1
  27. package/Theming/CosmopolitanTheme.d.ts +0 -13
  28. package/Theming/CosmopolitanTheme.d.ts.map +0 -1
  29. package/Theming/CosmopolitanTheme.js +0 -127
  30. package/Theming/CosmopolitanTheme.js.map +0 -1
  31. package/Theming/FluentTheme.d.ts +0 -4
  32. package/Theming/FluentTheme.d.ts.map +0 -1
  33. package/Theming/FluentTheme.js +0 -12
  34. package/Theming/FluentTheme.js.map +0 -1
  35. package/Theming/JoyTheme.d.ts +0 -13
  36. package/Theming/JoyTheme.d.ts.map +0 -1
  37. package/Theming/JoyTheme.js +0 -437
  38. package/Theming/JoyTheme.js.map +0 -1
  39. package/Theming/MaterialTheme.d.ts +0 -4
  40. package/Theming/MaterialTheme.d.ts.map +0 -1
  41. package/Theming/MaterialTheme.js +0 -12
  42. package/Theming/MaterialTheme.js.map +0 -1
  43. package/Theming/MemphisTheme.d.ts +0 -13
  44. package/Theming/MemphisTheme.d.ts.map +0 -1
  45. package/Theming/MemphisTheme.js +0 -383
  46. package/Theming/MemphisTheme.js.map +0 -1
  47. package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.d.ts +0 -16
  48. package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.d.ts.map +0 -1
  49. package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.js +0 -48
  50. package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.js.map +0 -1
  51. package/Theming/Strategies/JoyThemeGeneratorStrategy.d.ts +0 -17
  52. package/Theming/Strategies/JoyThemeGeneratorStrategy.d.ts.map +0 -1
  53. package/Theming/Strategies/JoyThemeGeneratorStrategy.js +0 -27
  54. package/Theming/Strategies/JoyThemeGeneratorStrategy.js.map +0 -1
  55. package/Theming/Strategies/MaterialThemeGeneratorStrategy.d.ts +0 -15
  56. package/Theming/Strategies/MaterialThemeGeneratorStrategy.d.ts.map +0 -1
  57. package/Theming/Strategies/MaterialThemeGeneratorStrategy.js +0 -84
  58. package/Theming/Strategies/MaterialThemeGeneratorStrategy.js.map +0 -1
  59. package/Theming/Strategies/MemphisThemeGeneratorStrategy.d.ts +0 -17
  60. package/Theming/Strategies/MemphisThemeGeneratorStrategy.d.ts.map +0 -1
  61. package/Theming/Strategies/MemphisThemeGeneratorStrategy.js +0 -27
  62. package/Theming/Strategies/MemphisThemeGeneratorStrategy.js.map +0 -1
  63. package/Theming/Strategies/TailwindThemeGeneratorStrategy.d.ts +0 -48
  64. package/Theming/Strategies/TailwindThemeGeneratorStrategy.d.ts.map +0 -1
  65. package/Theming/Strategies/TailwindThemeGeneratorStrategy.js +0 -69
  66. package/Theming/Strategies/TailwindThemeGeneratorStrategy.js.map +0 -1
  67. package/Theming/Strategies/index.d.ts +0 -7
  68. package/Theming/Strategies/index.d.ts.map +0 -1
  69. package/Theming/Strategies/index.js +0 -8
  70. package/Theming/Strategies/index.js.map +0 -1
  71. package/Theming/Strategies/interfaces/IThemeGeneratorStrategy.d.ts +0 -27
  72. package/Theming/Strategies/interfaces/IThemeGeneratorStrategy.d.ts.map +0 -1
  73. package/Theming/Strategies/interfaces/IThemeGeneratorStrategy.js +0 -3
  74. package/Theming/Strategies/interfaces/IThemeGeneratorStrategy.js.map +0 -1
  75. package/Theming/ThemeFactory.d.ts +0 -41
  76. package/Theming/ThemeFactory.d.ts.map +0 -1
  77. package/Theming/ThemeFactory.js +0 -58
  78. package/Theming/ThemeFactory.js.map +0 -1
  79. package/Theming/ThemeGenerator.d.ts +0 -25
  80. package/Theming/ThemeGenerator.d.ts.map +0 -1
  81. package/Theming/ThemeGenerator.js +0 -74
  82. package/Theming/ThemeGenerator.js.map +0 -1
  83. package/Theming/ThemeObserver.d.ts +0 -56
  84. package/Theming/ThemeObserver.d.ts.map +0 -1
  85. package/Theming/ThemeObserver.js +0 -135
  86. package/Theming/ThemeObserver.js.map +0 -1
  87. package/Theming/Tokens/BootstrapTokens.d.ts +0 -93
  88. package/Theming/Tokens/BootstrapTokens.d.ts.map +0 -1
  89. package/Theming/Tokens/BootstrapTokens.js +0 -93
  90. package/Theming/Tokens/BootstrapTokens.js.map +0 -1
  91. package/Theming/Tokens/CosmopolitanTokens.d.ts +0 -215
  92. package/Theming/Tokens/CosmopolitanTokens.d.ts.map +0 -1
  93. package/Theming/Tokens/CosmopolitanTokens.js +0 -215
  94. package/Theming/Tokens/CosmopolitanTokens.js.map +0 -1
  95. package/Theming/Tokens/FluentTokens.d.ts +0 -32
  96. package/Theming/Tokens/FluentTokens.d.ts.map +0 -1
  97. package/Theming/Tokens/FluentTokens.js +0 -32
  98. package/Theming/Tokens/FluentTokens.js.map +0 -1
  99. package/Theming/Tokens/JoyTokens.d.ts +0 -502
  100. package/Theming/Tokens/JoyTokens.d.ts.map +0 -1
  101. package/Theming/Tokens/JoyTokens.js +0 -502
  102. package/Theming/Tokens/JoyTokens.js.map +0 -1
  103. package/Theming/Tokens/MaterialTokens.d.ts +0 -24
  104. package/Theming/Tokens/MaterialTokens.d.ts.map +0 -1
  105. package/Theming/Tokens/MaterialTokens.js +0 -24
  106. package/Theming/Tokens/MaterialTokens.js.map +0 -1
  107. package/Theming/Tokens/MemphisTokens.d.ts +0 -394
  108. package/Theming/Tokens/MemphisTokens.d.ts.map +0 -1
  109. package/Theming/Tokens/MemphisTokens.js +0 -394
  110. package/Theming/Tokens/MemphisTokens.js.map +0 -1
  111. package/Theming/Utils/CssAspectRatio.d.ts +0 -14
  112. package/Theming/Utils/CssAspectRatio.d.ts.map +0 -1
  113. package/Theming/Utils/CssAspectRatio.js +0 -31
  114. package/Theming/Utils/CssAspectRatio.js.map +0 -1
  115. package/Theming/Utils/CssColor.d.ts +0 -30
  116. package/Theming/Utils/CssColor.d.ts.map +0 -1
  117. package/Theming/Utils/CssColor.js +0 -23
  118. package/Theming/Utils/CssColor.js.map +0 -1
  119. package/Theming/Utils/CssLength.d.ts +0 -67
  120. package/Theming/Utils/CssLength.d.ts.map +0 -1
  121. package/Theming/Utils/CssLength.js +0 -149
  122. package/Theming/Utils/CssLength.js.map +0 -1
  123. package/Theming/Utils/CssShadow.d.ts +0 -27
  124. package/Theming/Utils/CssShadow.d.ts.map +0 -1
  125. package/Theming/Utils/CssShadow.js +0 -46
  126. package/Theming/Utils/CssShadow.js.map +0 -1
  127. package/Theming/Utils/CssTime.d.ts +0 -18
  128. package/Theming/Utils/CssTime.d.ts.map +0 -1
  129. package/Theming/Utils/CssTime.js +0 -24
  130. package/Theming/Utils/CssTime.js.map +0 -1
  131. package/Theming/Utils/ITheme.d.ts +0 -30
  132. package/Theming/Utils/ITheme.d.ts.map +0 -1
  133. package/Theming/Utils/ITheme.js +0 -37
  134. package/Theming/Utils/ITheme.js.map +0 -1
  135. package/Theming/Utils/IThemeElevation.d.ts +0 -10
  136. package/Theming/Utils/IThemeElevation.d.ts.map +0 -1
  137. package/Theming/Utils/IThemeElevation.js +0 -3
  138. package/Theming/Utils/IThemeElevation.js.map +0 -1
  139. package/Theming/Utils/IThemeLayout.d.ts +0 -12
  140. package/Theming/Utils/IThemeLayout.d.ts.map +0 -1
  141. package/Theming/Utils/IThemeLayout.js +0 -3
  142. package/Theming/Utils/IThemeLayout.js.map +0 -1
  143. package/Theming/Utils/IThemeMetadata.d.ts +0 -15
  144. package/Theming/Utils/IThemeMetadata.d.ts.map +0 -1
  145. package/Theming/Utils/IThemeMetadata.js +0 -3
  146. package/Theming/Utils/IThemeMetadata.js.map +0 -1
  147. package/Theming/Utils/IThemePalette.d.ts +0 -22
  148. package/Theming/Utils/IThemePalette.d.ts.map +0 -1
  149. package/Theming/Utils/IThemePalette.js +0 -18
  150. package/Theming/Utils/IThemePalette.js.map +0 -1
  151. package/Theming/Utils/IThemeScheme.d.ts +0 -10
  152. package/Theming/Utils/IThemeScheme.d.ts.map +0 -1
  153. package/Theming/Utils/IThemeScheme.js +0 -3
  154. package/Theming/Utils/IThemeScheme.js.map +0 -1
  155. package/Theming/Utils/IThemeTypography.d.ts +0 -10
  156. package/Theming/Utils/IThemeTypography.d.ts.map +0 -1
  157. package/Theming/Utils/IThemeTypography.js +0 -3
  158. package/Theming/Utils/IThemeTypography.js.map +0 -1
  159. package/Theming/Utils/IThemeTypographyFontType.d.ts +0 -16
  160. package/Theming/Utils/IThemeTypographyFontType.d.ts.map +0 -1
  161. package/Theming/Utils/IThemeTypographyFontType.js +0 -3
  162. package/Theming/Utils/IThemeTypographyFontType.js.map +0 -1
  163. package/tailwind/v3/factories/index.d.ts +0 -6
  164. package/tailwind/v3/factories/index.d.ts.map +0 -1
  165. package/tailwind/v3/factories/index.js +0 -24
  166. package/tailwind/v3/factories/index.js.map +0 -1
  167. /package/{Themes → themes}/___bootstrap-tokens.css +0 -0
  168. /package/{Themes → themes}/___cosmopolitan-tokens.css +0 -0
  169. /package/{Themes → themes}/___fluent-tokens.css +0 -0
  170. /package/{Themes → themes}/___joy-tokens.css +0 -0
  171. /package/{Themes → themes}/___material-tokens.css +0 -0
  172. /package/{Themes → themes}/___memphis-tokens.css +0 -0
  173. /package/{Themes → themes}/bootstrap-tokens.scss +0 -0
  174. /package/{Themes → themes}/bootstrap.scss +0 -0
  175. /package/{Themes → themes}/cosmopolitan-tokens.scss +0 -0
  176. /package/{Themes → themes}/cosmopolitan.scss +0 -0
  177. /package/{Themes → themes}/fluent-tokens.scss +0 -0
  178. /package/{Themes → themes}/fluent.scss +0 -0
  179. /package/{Themes → themes}/joy-tokens.scss +0 -0
  180. /package/{Themes → themes}/joy.scss +0 -0
  181. /package/{Themes → themes}/material-tokens.scss +0 -0
  182. /package/{Themes → themes}/material.scss +0 -0
  183. /package/{Themes → themes}/memphis-tokens.scss +0 -0
  184. /package/{Themes → themes}/memphis.scss +0 -0
package/index.d.mts ADDED
@@ -0,0 +1,615 @@
1
+ import { IEventEmitter } from '@breadstone/mosaik-elements';
2
+
3
+ /**
4
+ * @public
5
+ */
6
+ type CssRGBColor = `rgb(${number}, ${number}, ${number})`;
7
+ /**
8
+ * @public
9
+ */
10
+ type CssRGBAColor = `rgba(${number}, ${number}, ${number}, ${number})`;
11
+ /**
12
+ * @public
13
+ */
14
+ type CssHEXColor = `#${string}`;
15
+ /**
16
+ * @public
17
+ */
18
+ 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';
19
+ /**
20
+ * @public
21
+ */
22
+ type CssColor = CssRGBColor | CssRGBAColor | CssHEXColor;
23
+ /**
24
+ * @public
25
+ */
26
+ declare namespace CssColor {
27
+ /**
28
+ * @public
29
+ */
30
+ function isCssColor(value: unknown): value is CssColor;
31
+ }
32
+
33
+ /**
34
+ * Represents a dynamic color scheme.
35
+ *
36
+ * @public
37
+ */
38
+ interface IThemeScheme {
39
+ [key: string]: CssColor;
40
+ }
41
+
42
+ /**
43
+ * Represents a dynamic theme palette.
44
+ *
45
+ * @public
46
+ */
47
+ interface IThemePalette {
48
+ [key: string]: CssColor;
49
+ }
50
+ /**
51
+ * @public
52
+ */
53
+ declare namespace IThemePalette {
54
+ /**
55
+ * Checks if the value is a theme palette.
56
+ *
57
+ * @param value - The value to check.
58
+ * @returns The result.
59
+ */
60
+ function isThemePalette(value: unknown): value is IThemePalette;
61
+ }
62
+
63
+ /**
64
+ * @public
65
+ */
66
+ type CssLengthUnit = 'em' | 'ex' | 'ch' | 'rem' | 'vh' | 'vw' | 'vmin' | 'vmax' | 'px' | 'mm' | 'cm' | 'in' | 'pt' | 'pc' | 'mozmm';
67
+ /**
68
+ * @public
69
+ */
70
+ type CssLength = `${number}${CssLengthUnit | '%'}` | number | 'auto';
71
+ declare namespace CssLength {
72
+ /**
73
+ * Determines whether the given value is a valid CSS length.
74
+ *
75
+ * @public
76
+ * @param value - The value to check.
77
+ * @returns `true` if the value is a valid CSS length; otherwise, `false`.
78
+ */
79
+ function isCssLength(value: unknown): value is CssLength;
80
+ /**
81
+ * @public
82
+ */
83
+ function isAuto(value: unknown): value is Extract<CssLength, 'auto'>;
84
+ /**
85
+ * @public
86
+ */
87
+ function isPercentage(value: unknown): value is `${number}%`;
88
+ /**
89
+ * @public
90
+ */
91
+ function isLength(value: unknown): value is `${number}${CssLengthUnit}`;
92
+ function toNumber(value: CssLength): number;
93
+ /**
94
+ * Extracts the unit from a CSS length string.
95
+ *
96
+ * @public
97
+ * @param cssLength - The CSS length string to extract the unit from.
98
+ * @returns The unit as a `CssLengthUnit`.
99
+ * @throws Error if the input is not a valid CSS length.
100
+ */
101
+ function extractUnit(cssLength: `${number}${CssLengthUnit | '%'}`): CssLengthUnit;
102
+ /**
103
+ * Extracts the numeric value from a CSS length string.
104
+ *
105
+ * @public
106
+ * @param cssLength - The CSS length string to extract the value from.
107
+ * @returns The numeric value as a number.
108
+ * @throws Error if the input is not a valid CSS length.
109
+ */
110
+ function extractValue(cssLength: `${number}${CssLengthUnit | '%'}`): number;
111
+ /**
112
+ * Converts pixel values to rem units.
113
+ *
114
+ * @public
115
+ * @param pixel - The pixel value to convert.
116
+ * @returns The converted value in rem units.
117
+ */
118
+ function pxToRem(pixel: `${number}${Extract<CssLengthUnit, 'px'>}`): string;
119
+ /**
120
+ * Tries to parse a value into a `CssLength`.
121
+ *
122
+ * @public
123
+ * @param value - The value to parse.
124
+ * @param defaultUnit - The default unit to use if the value is a string without a unit.
125
+ * @returns The parsed `CssLength` or `undefined` if parsing fails.
126
+ */
127
+ function tryParse(value: unknown, defaultUnit?: CssLengthUnit): CssLength | undefined;
128
+ }
129
+
130
+ /**
131
+ * Represents a valid CSS box-shadow value (single or multiple).
132
+ *
133
+ * @public
134
+ */
135
+ 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}`;
136
+ /**
137
+ * Represents a valid CSS box-shadow value, including multiple shadows.
138
+ *
139
+ * @public
140
+ */
141
+ type CssShadow = CssShadowSingle | `${CssShadowSingle}, ${CssShadowSingle}` | `${CssShadowSingle}, ${CssShadowSingle}, ${CssShadowSingle}`;
142
+ /**
143
+ * @public
144
+ */
145
+ declare namespace CssShadow {
146
+ /**
147
+ * Checks if the given value is a valid CSS box-shadow (single or multiple).
148
+ *
149
+ * @param value - The value to check.
150
+ * @returns `true` if the value is a valid CSS box-shadow, otherwise `false`.
151
+ */
152
+ function isCssShadow(value: unknown): value is CssShadow;
153
+ }
154
+
155
+ /**
156
+ * Represents dynamic shadow elevation styles.
157
+ *
158
+ * @public
159
+ */
160
+ interface IThemeElevation {
161
+ [key: string]: CssShadow;
162
+ }
163
+
164
+ /**
165
+ * Represents dynamic layout properties.
166
+ *
167
+ * @public
168
+ */
169
+ interface IThemeLayout {
170
+ thickness?: CssLength;
171
+ radius?: CssLength;
172
+ space?: CssLength;
173
+ }
174
+
175
+ /**
176
+ * Represents dynamic typography styles.
177
+ *
178
+ * @public
179
+ */
180
+ interface IThemeTypographyFontType {
181
+ fontFamily?: string;
182
+ fontSize: `${number}${Extract<CssLengthUnit, 'px'>}`;
183
+ lineHeight: `${number}${Extract<CssLengthUnit, 'px'>}` | `${number}`;
184
+ fontWeight: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
185
+ letterSpacing: `${number}${Extract<CssLengthUnit, 'px'>}` | `${number}` | 'normal';
186
+ textDecoration: 'none' | 'underline' | 'overline' | 'line-through';
187
+ textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
188
+ }
189
+
190
+ /**
191
+ * Represents dynamic typography styles.
192
+ *
193
+ * @public
194
+ */
195
+ interface IThemeTypography {
196
+ [key: string]: IThemeTypographyFontType;
197
+ }
198
+
199
+ /**
200
+ * Represents a dynamic theme system.
201
+ *
202
+ * @public
203
+ */
204
+ interface ITheme {
205
+ name: string;
206
+ scheme: Record<string, IThemeScheme>;
207
+ palette: Record<string, Record<string, IThemePalette | CssColor>>;
208
+ fontFamily: string;
209
+ typography: IThemeTypography;
210
+ layout: IThemeLayout;
211
+ elevation: Record<string, IThemeElevation>;
212
+ }
213
+ /**
214
+ * @public
215
+ */
216
+ declare namespace ITheme {
217
+ function getScheme(theme: ITheme, mode: string): IThemeScheme;
218
+ function getSchemeColor(theme: ITheme, mode: string, key: string): CssColor;
219
+ function getPalette(theme: ITheme, mode: string, palette: string): IThemePalette;
220
+ function getPaletteColor(theme: ITheme, mode: string, palette: string, key: string): CssColor;
221
+ }
222
+
223
+ /**
224
+ * @public
225
+ */
226
+ interface IThemeMetadata {
227
+ theme: ITheme;
228
+ palettes: Array<string>;
229
+ paletteVariants: Array<string>;
230
+ schemes: Array<string>;
231
+ schemeVariants: Array<string>;
232
+ elevation: Array<string>;
233
+ elevationVariants: Array<string>;
234
+ typographies: Array<string>;
235
+ }
236
+
237
+ declare namespace BootstrapTheme {
238
+ const BOOTSTRAP_THEME: ITheme;
239
+ const BOOTSTRAP_THEME_PALETTES: string[];
240
+ const BOOTSTRAP_THEME_PALETTE_VARIANTS: string[];
241
+ const BOOTSTRAP_THEME_SCHEMES: string[];
242
+ const BOOTSTRAP_THEME_SCHEME_VARIANTS: string[];
243
+ const BOOTSTRAP_THEME_ELEVATION: string[];
244
+ const BOOTSTRAP_THEME_ELEVATION_VARIANTS: string[];
245
+ const BOOTSTRAP_THEME_METADATA: IThemeMetadata;
246
+ }
247
+
248
+ declare namespace JoyTheme {
249
+ const JOY_THEME: ITheme;
250
+ const JOY_THEME_PALETTES: string[];
251
+ const JOY_THEME_PALETTE_VARIANTS: string[];
252
+ const JOY_THEME_SCHEMES: string[];
253
+ const JOY_THEME_SCHEME_VARIANTS: string[];
254
+ const JOY_THEME_ELEVATION: string[];
255
+ const JOY_THEME_ELEVATION_VARIANTS: string[];
256
+ const JOY_THEME_TYPOGRAPHY: string[];
257
+ const JOY_THEME_METADATA: IThemeMetadata;
258
+ }
259
+
260
+ declare namespace MemphisTheme {
261
+ const MEMPHIS_THEME: ITheme;
262
+ const MEMPHIS_THEME_PALETTES: string[];
263
+ const MEMPHIS_THEME_PALETTE_VARIANTS: string[];
264
+ const MEMPHIS_THEME_SCHEMES: string[];
265
+ const MEMPHIS_THEME_SCHEME_VARIANTS: string[];
266
+ const MEMPHIS_THEME_ELEVATION: string[];
267
+ const MEMPHIS_THEME_ELEVATION_VARIANTS: string[];
268
+ const MEMPHIS_THEME_TYPOGRAPHY: string[];
269
+ const MEMPHIS_THEME_METADATA: IThemeMetadata;
270
+ }
271
+
272
+ declare namespace CosmopolitanTheme {
273
+ const COSMOPOLITAN_THEME: ITheme;
274
+ const COSMOPOLITAN_THEME_PALETTES: string[];
275
+ const COSMOPOLITAN_THEME_PALETTE_VARIANTS: string[];
276
+ const COSMOPOLITAN_THEME_SCHEMES: string[];
277
+ const COSMOPOLITAN_THEME_SCHEME_VARIANTS: string[];
278
+ const COSMOPOLITAN_THEME_ELEVATION: string[];
279
+ const COSMOPOLITAN_THEME_ELEVATION_VARIANTS: string[];
280
+ const COSMOPOLITAN_THEME_TYPOGRAPHY: string[];
281
+ const COSMOPOLITAN_THEME_METADATA: IThemeMetadata;
282
+ }
283
+
284
+ /**
285
+ * @public
286
+ */
287
+ type CssAspectRatio = 'auto' | `${number}` | `${number}/${number}`;
288
+ /**
289
+ * @public
290
+ */
291
+ declare namespace CssAspectRatio {
292
+ /**
293
+ * @public
294
+ */
295
+ function isCssAspectRatio(value: unknown): value is CssAspectRatio;
296
+ }
297
+
298
+ /**
299
+ * @public
300
+ */
301
+ type CssTimeUnit = 's' | 'ms';
302
+ /**
303
+ * @public
304
+ */
305
+ type CssTime = `${string}${CssTimeUnit}` | number | 0;
306
+ /**
307
+ * @public
308
+ */
309
+ declare namespace CssTime {
310
+ /**
311
+ * @public
312
+ */
313
+ function isCssTime(value: unknown): value is CssTime;
314
+ }
315
+
316
+ /**
317
+ * Platform adapter interface for abstracting browser APIs.
318
+ * Allows ThemeObserver and ThemeGenerator to work in both browser and Node.js environments.
319
+ *
320
+ * @public
321
+ */
322
+ interface IPlatformAdapter {
323
+ /**
324
+ * Checks if media query matches (e.g., prefers-color-scheme).
325
+ */
326
+ matchMedia(query: string): boolean;
327
+ /**
328
+ * Sets an attribute on the document element.
329
+ */
330
+ setDocumentAttribute(name: string, value: string): void;
331
+ /**
332
+ * Gets an attribute from the document element.
333
+ */
334
+ getDocumentAttribute(name: string): string | null;
335
+ /**
336
+ * Observes changes to document element attributes.
337
+ */
338
+ observeDocumentAttributes(attributes: string[], callback: (attributeName: string, newValue: string | null) => void): () => void;
339
+ }
340
+
341
+ /**
342
+ * Theme mode.
343
+ *
344
+ * @public
345
+ */
346
+ type ThemeMode = 'system' | 'dark' | 'light';
347
+ /**
348
+ * Observer for applying themes.
349
+ *
350
+ * @public
351
+ */
352
+ declare class ThemeObserver {
353
+ private readonly _themeChanged;
354
+ private readonly _themeModeChanged;
355
+ private readonly _platformAdapter;
356
+ private _currentTheme;
357
+ private _currentThemeMode;
358
+ private _unsubscribe?;
359
+ /**
360
+ * Constructs a new instance of the `ThemeObserver` class.
361
+ *
362
+ * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
363
+ * @public
364
+ */
365
+ constructor(platformAdapter?: IPlatformAdapter);
366
+ /**
367
+ * Fires when the theme changes.
368
+ *
369
+ * @public
370
+ * @readonly
371
+ */
372
+ get themeChanged(): IEventEmitter<string>;
373
+ /**
374
+ * Fires when the theme mode changes.
375
+ *
376
+ * @public
377
+ * @readonly
378
+ */
379
+ get themeModeChanged(): IEventEmitter<ThemeMode>;
380
+ applyTheme(theme: string, themeMode: ThemeMode): void;
381
+ dispose(): void;
382
+ private observe;
383
+ }
384
+ /**
385
+ * @public
386
+ */
387
+ declare class ThemeObserverServiceLocator {
388
+ private static _current;
389
+ static get current(): ThemeObserver;
390
+ static isSet(): boolean;
391
+ static set(current: ThemeObserver): void;
392
+ }
393
+
394
+ /**
395
+ * @public
396
+ */
397
+ declare class ThemeGenerator {
398
+ private readonly _strategies;
399
+ private readonly _platformAdapter;
400
+ /**
401
+ * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
402
+ * @public
403
+ */
404
+ constructor(platformAdapter?: IPlatformAdapter);
405
+ generatePalette(theme: ITheme, baseColor: CssColor, mode: 'dark' | 'light' | 'system'): IThemePalette;
406
+ generateScheme(theme: ITheme, baseColor: CssColor, mode: 'dark' | 'light' | 'system'): IThemeScheme;
407
+ private resolveMode;
408
+ private getStrategy;
409
+ }
410
+ /**
411
+ * @public
412
+ */
413
+ declare class ThemeGeneratorServiceLocator {
414
+ private static _current;
415
+ static get current(): ThemeGenerator;
416
+ static isSet(): boolean;
417
+ static set(current: ThemeGenerator): void;
418
+ }
419
+
420
+ /**
421
+ * Strategy interface for theme-specific palette and scheme generation.
422
+ *
423
+ * @public
424
+ */
425
+ interface IThemeGeneratorStrategy {
426
+ /**
427
+ * Generates a color palette for the theme.
428
+ *
429
+ * @param baseColor - The base color to generate the palette from
430
+ * @param mode - The color mode (dark or light)
431
+ * @returns The generated palette
432
+ */
433
+ generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
434
+ /**
435
+ * Generates a color scheme for the theme.
436
+ *
437
+ * @param baseColor - The base color to generate the scheme from
438
+ * @param mode - The color mode (dark or light)
439
+ * @returns The generated scheme
440
+ */
441
+ generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
442
+ }
443
+
444
+ /**
445
+ * Factory function type for creating theme generator strategies.
446
+ *
447
+ * @public
448
+ */
449
+ type ThemeGeneratorFactoryFn = () => IThemeGeneratorStrategy;
450
+
451
+ /**
452
+ * Material Design theme generator strategy.
453
+ *
454
+ * @public
455
+ */
456
+ declare class MaterialThemeGeneratorStrategy implements IThemeGeneratorStrategy {
457
+ constructor();
458
+ generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
459
+ generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
460
+ }
461
+ /**
462
+ * Generates a Material theme generator strategy.
463
+ *
464
+ * @public
465
+ */
466
+ declare function createMaterialTheme(): ThemeGeneratorFactoryFn;
467
+
468
+ /**
469
+ * Joy UI theme generator strategy.
470
+ * Uses the same generation logic as Material Design.
471
+ *
472
+ * @public
473
+ */
474
+ declare class JoyThemeGeneratorStrategy implements IThemeGeneratorStrategy {
475
+ private readonly _materialStrategy;
476
+ constructor();
477
+ generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
478
+ generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
479
+ }
480
+ /**
481
+ * Generates a Joy theme generator strategy.
482
+ *
483
+ * @public
484
+ */
485
+ declare function createJoyTheme(): ThemeGeneratorFactoryFn;
486
+
487
+ /**
488
+ * Memphis theme generator strategy.
489
+ * Uses the same generation logic as Material Design.
490
+ *
491
+ * @public
492
+ */
493
+ declare class MemphisThemeGeneratorStrategy implements IThemeGeneratorStrategy {
494
+ private readonly _materialStrategy;
495
+ constructor();
496
+ generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
497
+ generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
498
+ }
499
+ /**
500
+ * Generates a Memphis theme generator strategy.
501
+ *
502
+ * @public
503
+ */
504
+ declare function createMemphisTheme(): ThemeGeneratorFactoryFn;
505
+
506
+ /**
507
+ * Cosmopolitan theme generator strategy.
508
+ *
509
+ * @public
510
+ */
511
+ declare class CosmopolitanThemeGeneratorStrategy implements IThemeGeneratorStrategy {
512
+ private readonly _materialStrategy;
513
+ constructor();
514
+ generatePalette(baseColor: CssColor, mode: 'dark' | 'light'): IThemePalette;
515
+ generateScheme(baseColor: CssColor, mode: 'dark' | 'light'): IThemeScheme;
516
+ }
517
+ /**
518
+ * Generates a Cosmopolitan theme generator strategy.
519
+ *
520
+ * @public
521
+ */
522
+ declare function createCosmopolitanTheme(): ThemeGeneratorFactoryFn;
523
+
524
+ /**
525
+ * Tailwind-like strategy.
526
+ *
527
+ * Generates a color palette with the following shade steps:
528
+ * 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
529
+ *
530
+ * Each returned color is a hex string (CssColor).
531
+ */
532
+ declare class TailwindThemeGeneratorStrategy implements IThemeGeneratorStrategy {
533
+ /**
534
+ * Generates a palette of shades based on a base/accent color.
535
+ *
536
+ * @param baseColor - The base/accent color (e.g. "#3498db")
537
+ * @param mode - 'light' or 'dark' mode: determines how light or dark the palette extremes are.
538
+ * @returns An IThemePalette mapping each shade step to a hex color.
539
+ *
540
+ * Example (light mode, baseColor = blue-ish):
541
+ * {
542
+ * "50": "#f5faff",
543
+ * "100": "#e1f3ff",
544
+ * ...
545
+ * "500": "#3498db",
546
+ * ...
547
+ * "900": "#0a2d4b"
548
+ * }
549
+ */
550
+ generatePalette(baseColor: CssColor, mode: 'light' | 'dark'): IThemePalette;
551
+ /**
552
+ * Generates a semantic color scheme for UI usage, based on the generated palette.
553
+ *
554
+ * @param baseColor - The base/accent color
555
+ * @param mode - 'light' or 'dark'
556
+ * @returns An IThemeScheme with semantic color roles.
557
+ *
558
+ * Returned keys:
559
+ * - background → shade "50"
560
+ * - foreground → shade "900"
561
+ * - primary → shade "500"
562
+ * - accent → shade "700"
563
+ * - muted → shade "300"
564
+ */
565
+ generateScheme(baseColor: CssColor, mode: 'light' | 'dark'): IThemeScheme;
566
+ }
567
+ /**
568
+ * Generates a Tailwind theme generator strategy.
569
+ *
570
+ * @public
571
+ */
572
+ declare function createTailwindTheme(): ThemeGeneratorFactoryFn;
573
+
574
+ /**
575
+ * Browser implementation of the platform adapter.
576
+ * Uses native DOM APIs (window, document, MutationObserver).
577
+ *
578
+ * @public
579
+ */
580
+ declare class BrowserPlatformAdapter implements IPlatformAdapter {
581
+ matchMedia(query: string): boolean;
582
+ setDocumentAttribute(name: string, value: string): void;
583
+ getDocumentAttribute(name: string): string | null;
584
+ observeDocumentAttributes(attributes: string[], callback: (attributeName: string, newValue: string | null) => void): () => void;
585
+ }
586
+
587
+ /**
588
+ * Node.js implementation of the platform adapter.
589
+ * No-op implementation that doesn't crash but does nothing.
590
+ *
591
+ * @public
592
+ */
593
+ declare class NodePlatformAdapter implements IPlatformAdapter {
594
+ matchMedia(_query: string): boolean;
595
+ setDocumentAttribute(_name: string, _value: string): void;
596
+ getDocumentAttribute(_name: string): string | null;
597
+ observeDocumentAttributes(_attributes: string[], _callback: (attributeName: string, newValue: string | null) => void): () => void;
598
+ }
599
+
600
+ /**
601
+ * Factory that automatically detects the environment and returns the appropriate adapter.
602
+ *
603
+ * @public
604
+ */
605
+ declare class PlatformAdapterFactory {
606
+ /**
607
+ * Creates the appropriate platform adapter based on the current environment.
608
+ * Automatically detects if running in browser or Node.js.
609
+ *
610
+ * @public
611
+ */
612
+ static create(): IPlatformAdapter;
613
+ }
614
+
615
+ export { BootstrapTheme, BrowserPlatformAdapter, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, type CssHEXColor, CssLength, type CssLengthUnit, type CssNameColor, type CssRGBAColor, type CssRGBColor, CssShadow, type CssShadowSingle, CssTime, type CssTimeUnit, type IPlatformAdapter, ITheme, type IThemeElevation, type IThemeGeneratorStrategy, type IThemeLayout, type IThemeMetadata, IThemePalette, type IThemeScheme, type IThemeTypography, type IThemeTypographyFontType, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, NodePlatformAdapter, PlatformAdapterFactory, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, type ThemeMode, ThemeObserver, ThemeObserverServiceLocator, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };