zero-to-app 3.2.1 → 3.2.2

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 (213) hide show
  1. package/dist/brand/brand-config.d.ts +65 -0
  2. package/dist/brand/brand-config.d.ts.map +1 -0
  3. package/dist/brand/brand-config.js +68 -0
  4. package/dist/brand/brand-config.js.map +1 -0
  5. package/dist/brand/brand-context.d.ts +55 -0
  6. package/dist/brand/brand-context.d.ts.map +1 -0
  7. package/dist/brand/brand-context.js +76 -0
  8. package/dist/brand/brand-context.js.map +1 -0
  9. package/dist/brand/brand-types.d.ts +92 -0
  10. package/dist/brand/brand-types.d.ts.map +1 -0
  11. package/dist/brand/brand-types.js +2 -0
  12. package/dist/brand/brand-types.js.map +1 -0
  13. package/dist/brand/default-brand.d.ts +11 -0
  14. package/dist/brand/default-brand.d.ts.map +1 -0
  15. package/dist/brand/default-brand.js +32 -0
  16. package/dist/brand/default-brand.js.map +1 -0
  17. package/dist/brand/index.d.ts +6 -0
  18. package/dist/brand/index.d.ts.map +1 -0
  19. package/dist/brand/index.js +8 -0
  20. package/dist/brand/index.js.map +1 -0
  21. package/dist/brand/palette-generator.d.ts +64 -0
  22. package/dist/brand/palette-generator.d.ts.map +1 -0
  23. package/dist/brand/palette-generator.js +292 -0
  24. package/dist/brand/palette-generator.js.map +1 -0
  25. package/dist/components/index.d.ts +3 -0
  26. package/dist/components/index.d.ts.map +1 -0
  27. package/dist/components/index.js +3 -0
  28. package/dist/components/index.js.map +1 -0
  29. package/dist/components/navigation/app-tabs/app-tabs.d.ts +63 -0
  30. package/dist/components/navigation/app-tabs/app-tabs.d.ts.map +1 -0
  31. package/dist/components/navigation/app-tabs/app-tabs.js +13 -0
  32. package/dist/components/navigation/app-tabs/app-tabs.js.map +1 -0
  33. package/dist/components/navigation/app-tabs/app-tabs.web.d.ts +47 -0
  34. package/dist/components/navigation/app-tabs/app-tabs.web.d.ts.map +1 -0
  35. package/dist/components/navigation/app-tabs/app-tabs.web.js +104 -0
  36. package/dist/components/navigation/app-tabs/app-tabs.web.js.map +1 -0
  37. package/dist/components/navigation/app-tabs/index.d.ts +3 -0
  38. package/dist/components/navigation/app-tabs/index.d.ts.map +1 -0
  39. package/dist/components/navigation/app-tabs/index.js +3 -0
  40. package/dist/components/navigation/app-tabs/index.js.map +1 -0
  41. package/dist/components/navigation/drawer/drawer.d.ts +24 -0
  42. package/dist/components/navigation/drawer/drawer.d.ts.map +1 -0
  43. package/dist/components/navigation/drawer/drawer.js +82 -0
  44. package/dist/components/navigation/drawer/drawer.js.map +1 -0
  45. package/dist/components/navigation/index.d.ts +10 -0
  46. package/dist/components/navigation/index.d.ts.map +1 -0
  47. package/dist/components/navigation/index.js +11 -0
  48. package/dist/components/navigation/index.js.map +1 -0
  49. package/dist/components/navigation/native-header.d.ts +25 -0
  50. package/dist/components/navigation/native-header.d.ts.map +1 -0
  51. package/dist/components/navigation/native-header.js +32 -0
  52. package/dist/components/navigation/native-header.js.map +1 -0
  53. package/dist/components/navigation/shared/sidebar-styles.d.ts +34 -0
  54. package/dist/components/navigation/shared/sidebar-styles.d.ts.map +1 -0
  55. package/dist/components/navigation/shared/sidebar-styles.js +34 -0
  56. package/dist/components/navigation/shared/sidebar-styles.js.map +1 -0
  57. package/dist/components/navigation/sidebar/index.d.ts +10 -0
  58. package/dist/components/navigation/sidebar/index.d.ts.map +1 -0
  59. package/dist/components/navigation/sidebar/index.js +7 -0
  60. package/dist/components/navigation/sidebar/index.js.map +1 -0
  61. package/dist/components/navigation/sidebar/sidebar-footer.d.ts +18 -0
  62. package/dist/components/navigation/sidebar/sidebar-footer.d.ts.map +1 -0
  63. package/dist/components/navigation/sidebar/sidebar-footer.js +27 -0
  64. package/dist/components/navigation/sidebar/sidebar-footer.js.map +1 -0
  65. package/dist/components/navigation/sidebar/sidebar-header.d.ts +26 -0
  66. package/dist/components/navigation/sidebar/sidebar-header.d.ts.map +1 -0
  67. package/dist/components/navigation/sidebar/sidebar-header.js +38 -0
  68. package/dist/components/navigation/sidebar/sidebar-header.js.map +1 -0
  69. package/dist/components/navigation/sidebar/sidebar-item.d.ts +36 -0
  70. package/dist/components/navigation/sidebar/sidebar-item.d.ts.map +1 -0
  71. package/dist/components/navigation/sidebar/sidebar-item.js +63 -0
  72. package/dist/components/navigation/sidebar/sidebar-item.js.map +1 -0
  73. package/dist/components/navigation/sidebar/sidebar-section.d.ts +34 -0
  74. package/dist/components/navigation/sidebar/sidebar-section.d.ts.map +1 -0
  75. package/dist/components/navigation/sidebar/sidebar-section.js +56 -0
  76. package/dist/components/navigation/sidebar/sidebar-section.js.map +1 -0
  77. package/dist/components/navigation/sidebar/sidebar.d.ts +2 -0
  78. package/dist/components/navigation/sidebar/sidebar.d.ts.map +1 -0
  79. package/dist/components/navigation/sidebar/sidebar.js +4 -0
  80. package/dist/components/navigation/sidebar/sidebar.js.map +1 -0
  81. package/dist/components/navigation/sidebar/sidebar.native.d.ts +23 -0
  82. package/dist/components/navigation/sidebar/sidebar.native.d.ts.map +1 -0
  83. package/dist/components/navigation/sidebar/sidebar.native.js +80 -0
  84. package/dist/components/navigation/sidebar/sidebar.native.js.map +1 -0
  85. package/dist/components/navigation/sidebar/sidebar.web.d.ts +26 -0
  86. package/dist/components/navigation/sidebar/sidebar.web.d.ts.map +1 -0
  87. package/dist/components/navigation/sidebar/sidebar.web.js +90 -0
  88. package/dist/components/navigation/sidebar/sidebar.web.js.map +1 -0
  89. package/dist/components/navigation/themed-stack.d.ts +25 -0
  90. package/dist/components/navigation/themed-stack.d.ts.map +1 -0
  91. package/dist/components/navigation/themed-stack.js +37 -0
  92. package/dist/components/navigation/themed-stack.js.map +1 -0
  93. package/dist/components/shared/index.d.ts +3 -0
  94. package/dist/components/shared/index.d.ts.map +1 -0
  95. package/dist/components/shared/index.js +2 -0
  96. package/dist/components/shared/index.js.map +1 -0
  97. package/dist/components/shared/types.d.ts +82 -0
  98. package/dist/components/shared/types.d.ts.map +1 -0
  99. package/dist/components/shared/types.js +2 -0
  100. package/dist/components/shared/types.js.map +1 -0
  101. package/dist/components/shared/utils.d.ts +19 -0
  102. package/dist/components/shared/utils.d.ts.map +1 -0
  103. package/dist/components/shared/utils.js +23 -0
  104. package/dist/components/shared/utils.js.map +1 -0
  105. package/dist/components/ui/button.d.ts +132 -0
  106. package/dist/components/ui/button.d.ts.map +1 -0
  107. package/dist/components/ui/button.js +252 -0
  108. package/dist/components/ui/button.js.map +1 -0
  109. package/dist/components/ui/chip.d.ts +88 -0
  110. package/dist/components/ui/chip.d.ts.map +1 -0
  111. package/dist/components/ui/chip.js +129 -0
  112. package/dist/components/ui/chip.js.map +1 -0
  113. package/dist/components/ui/collapsible.d.ts +88 -0
  114. package/dist/components/ui/collapsible.d.ts.map +1 -0
  115. package/dist/components/ui/collapsible.js +66 -0
  116. package/dist/components/ui/collapsible.js.map +1 -0
  117. package/dist/components/ui/container.d.ts +31 -0
  118. package/dist/components/ui/container.d.ts.map +1 -0
  119. package/dist/components/ui/container.js +46 -0
  120. package/dist/components/ui/container.js.map +1 -0
  121. package/dist/components/ui/fab.d.ts +51 -0
  122. package/dist/components/ui/fab.d.ts.map +1 -0
  123. package/dist/components/ui/fab.js +142 -0
  124. package/dist/components/ui/fab.js.map +1 -0
  125. package/dist/components/ui/index.d.ts +23 -0
  126. package/dist/components/ui/index.d.ts.map +1 -0
  127. package/dist/components/ui/index.js +22 -0
  128. package/dist/components/ui/index.js.map +1 -0
  129. package/dist/components/ui/screen.d.ts +40 -0
  130. package/dist/components/ui/screen.d.ts.map +1 -0
  131. package/dist/components/ui/screen.js +57 -0
  132. package/dist/components/ui/screen.js.map +1 -0
  133. package/dist/components/ui/slider.d.ts +47 -0
  134. package/dist/components/ui/slider.d.ts.map +1 -0
  135. package/dist/components/ui/slider.js +41 -0
  136. package/dist/components/ui/slider.js.map +1 -0
  137. package/dist/components/ui/themed-image.d.ts +7 -0
  138. package/dist/components/ui/themed-image.d.ts.map +1 -0
  139. package/dist/components/ui/themed-image.js +9 -0
  140. package/dist/components/ui/themed-image.js.map +1 -0
  141. package/dist/components/ui/themed-view.d.ts +20 -0
  142. package/dist/components/ui/themed-view.d.ts.map +1 -0
  143. package/dist/components/ui/themed-view.js +75 -0
  144. package/dist/components/ui/themed-view.js.map +1 -0
  145. package/dist/components/ui/typography.d.ts +110 -0
  146. package/dist/components/ui/typography.d.ts.map +1 -0
  147. package/dist/components/ui/typography.js +69 -0
  148. package/dist/components/ui/typography.js.map +1 -0
  149. package/dist/context/layout-context.d.ts +66 -0
  150. package/dist/context/layout-context.d.ts.map +1 -0
  151. package/dist/context/layout-context.js +83 -0
  152. package/dist/context/layout-context.js.map +1 -0
  153. package/dist/context/scroll-context.d.ts +8 -0
  154. package/dist/context/scroll-context.d.ts.map +1 -0
  155. package/dist/context/scroll-context.js +16 -0
  156. package/dist/context/scroll-context.js.map +1 -0
  157. package/dist/context/sidebar-context.d.ts +74 -0
  158. package/dist/context/sidebar-context.d.ts.map +1 -0
  159. package/dist/context/sidebar-context.js +95 -0
  160. package/dist/context/sidebar-context.js.map +1 -0
  161. package/dist/hooks/index.d.ts +4 -0
  162. package/dist/hooks/index.d.ts.map +1 -0
  163. package/dist/hooks/index.js +5 -0
  164. package/dist/hooks/index.js.map +1 -0
  165. package/dist/hooks/use-breakpoint.d.ts +8 -0
  166. package/dist/hooks/use-breakpoint.d.ts.map +1 -0
  167. package/dist/hooks/use-breakpoint.js +10 -0
  168. package/dist/hooks/use-breakpoint.js.map +1 -0
  169. package/dist/hooks/use-dimensions.d.ts +31 -0
  170. package/dist/hooks/use-dimensions.d.ts.map +1 -0
  171. package/dist/hooks/use-dimensions.js +44 -0
  172. package/dist/hooks/use-dimensions.js.map +1 -0
  173. package/dist/hooks/use-route-navigation.d.ts +19 -0
  174. package/dist/hooks/use-route-navigation.d.ts.map +1 -0
  175. package/dist/hooks/use-route-navigation.js +25 -0
  176. package/dist/hooks/use-route-navigation.js.map +1 -0
  177. package/dist/icons/icon-utils.d.ts +24 -0
  178. package/dist/icons/icon-utils.d.ts.map +1 -0
  179. package/dist/icons/icon-utils.js +57 -0
  180. package/dist/icons/icon-utils.js.map +1 -0
  181. package/dist/icons/index.d.ts +13 -0
  182. package/dist/icons/index.d.ts.map +1 -0
  183. package/dist/icons/index.js +12 -0
  184. package/dist/icons/index.js.map +1 -0
  185. package/dist/index.d.ts +9 -0
  186. package/dist/index.d.ts.map +1 -0
  187. package/dist/index.js +12 -0
  188. package/dist/index.js.map +1 -0
  189. package/dist/theme/high-contrast-theme.d.ts +19 -0
  190. package/dist/theme/high-contrast-theme.d.ts.map +1 -0
  191. package/dist/theme/high-contrast-theme.js +257 -0
  192. package/dist/theme/high-contrast-theme.js.map +1 -0
  193. package/dist/theme/index.d.ts +5 -0
  194. package/dist/theme/index.d.ts.map +1 -0
  195. package/dist/theme/index.js +6 -0
  196. package/dist/theme/index.js.map +1 -0
  197. package/dist/theme/theme-config.d.ts +150 -0
  198. package/dist/theme/theme-config.d.ts.map +1 -0
  199. package/dist/theme/theme-config.js +318 -0
  200. package/dist/theme/theme-config.js.map +1 -0
  201. package/dist/theme/theme.d.ts +106 -0
  202. package/dist/theme/theme.d.ts.map +1 -0
  203. package/dist/theme/theme.js +135 -0
  204. package/dist/theme/theme.js.map +1 -0
  205. package/dist/utils/contrast-checker.d.ts +51 -0
  206. package/dist/utils/contrast-checker.d.ts.map +1 -0
  207. package/dist/utils/contrast-checker.js +97 -0
  208. package/dist/utils/contrast-checker.js.map +1 -0
  209. package/dist/utils/index.d.ts +2 -0
  210. package/dist/utils/index.d.ts.map +1 -0
  211. package/dist/utils/index.js +3 -0
  212. package/dist/utils/index.js.map +1 -0
  213. package/package.json +1 -1
@@ -0,0 +1,318 @@
1
+ export const createLightTheme = (brand) => {
2
+ const c = brand.colors;
3
+ return {
4
+ primary: c.primary,
5
+ onPrimary: c.onPrimary,
6
+ primaryContainer: c.primaryContainer,
7
+ onPrimaryContainer: c.onPrimaryContainer,
8
+ secondary: c.secondary,
9
+ onSecondary: c.onSecondary,
10
+ secondaryContainer: c.secondaryContainer,
11
+ onSecondaryContainer: c.onSecondaryContainer,
12
+ tertiary: c.tertiary,
13
+ onTertiary: c.onTertiary,
14
+ tertiaryContainer: c.tertiaryContainer,
15
+ onTertiaryContainer: c.onTertiaryContainer,
16
+ error: c.error,
17
+ onError: c.onError,
18
+ errorContainer: c.errorContainer,
19
+ onErrorContainer: c.onErrorContainer,
20
+ surface: c.surface,
21
+ surfaceVariant: c.surfaceContainer,
22
+ surfaceTint: c.primary,
23
+ onSurface: c.onSurface,
24
+ onSurfaceVariant: c.onSurfaceVariant,
25
+ surfaceContainerLowest: c.surfaceContainerLowest,
26
+ surfaceContainerLow: c.surfaceContainerLow,
27
+ surfaceContainer: c.surfaceContainer,
28
+ surfaceContainerHigh: c.surfaceContainerHigh,
29
+ surfaceContainerHighest: c.surfaceContainerHighest,
30
+ outline: c.outline,
31
+ outlineVariant: c.outlineVariant,
32
+ inverseSurface: c.inverseSurface,
33
+ inverseOnSurface: c.inverseOnSurface,
34
+ inversePrimary: c.inversePrimary,
35
+ scrim: c.scrim,
36
+ shadow: c.shadow,
37
+ spacing: brand.spacing,
38
+ borderRadius: brand.borderRadius,
39
+ shape: brand.shape,
40
+ isDark: false,
41
+ tokens: {
42
+ button: {
43
+ // Filled / high-emphasis (Material `filled`)
44
+ filledBg: c.primary,
45
+ filledText: c.onPrimary,
46
+ filledHoverBg: c.primaryContainer ?? c.primary,
47
+ filledPressedBg: c.primaryContainer ?? c.primary,
48
+ // Elevated (surface with elevation)
49
+ elevatedBg: c.surfaceContainerHigh,
50
+ elevatedText: c.onSurface,
51
+ elevatedHoverBg: c.surfaceContainerHighest,
52
+ // Tonal (Material `tonal`)
53
+ tonalBg: c.secondaryContainer,
54
+ tonalText: c.onSecondary,
55
+ tonalHoverBg: c.secondaryContainer ?? c.secondary,
56
+ // Outlined
57
+ outlinedBorder: c.outlineVariant ?? c.outline,
58
+ outlinedText: c.primary,
59
+ outlinedHoverBorder: c.outlineVariant ?? c.outline,
60
+ // Text (low emphasis)
61
+ textColor: c.primary,
62
+ textHoverColor: c.primary,
63
+ // Disabled
64
+ disabledBg: c.surfaceContainerLow,
65
+ disabledText: c.onSurfaceVariant,
66
+ },
67
+ card: {
68
+ background: c.surfaceContainer,
69
+ text: c.onSurface,
70
+ },
71
+ input: {
72
+ background: c.surfaceContainerLow,
73
+ text: c.onSurface,
74
+ border: c.outlineVariant ?? c.outline,
75
+ placeholder: c.onSurfaceVariant,
76
+ },
77
+ appbar: {
78
+ background: c.surface,
79
+ text: c.onSurface,
80
+ border: c.outlineVariant ?? c.outline,
81
+ },
82
+ link: {
83
+ text: c.primary,
84
+ hover: c.primary,
85
+ },
86
+ badge: {
87
+ background: c.primary,
88
+ text: c.onPrimary,
89
+ },
90
+ chip: {
91
+ filledBg: c.secondaryContainer,
92
+ filledText: c.onSecondaryContainer,
93
+ outlinedBorder: c.outline,
94
+ outlinedText: c.onSurface,
95
+ selectedBg: c.secondaryContainer,
96
+ selectedText: c.onSecondaryContainer,
97
+ disabledBg: c.surfaceContainerLow,
98
+ disabledText: c.onSurfaceVariant,
99
+ disabledBorder: c.outlineVariant ?? c.outline,
100
+ },
101
+ slider: {
102
+ activeTrack: c.primary,
103
+ inactiveTrack: c.surfaceContainerHighest,
104
+ thumb: c.primary,
105
+ },
106
+ sidebar: {
107
+ background: c.surface,
108
+ itemText: c.onSurface,
109
+ itemActiveText: c.primary,
110
+ itemActiveBg: c.primaryContainer,
111
+ itemHoverBg: c.surfaceContainerHigh,
112
+ divider: c.outlineVariant ?? c.outline,
113
+ width: 280,
114
+ },
115
+ elevation: {
116
+ level0: 0,
117
+ level1: 1,
118
+ level2: 3,
119
+ level3: 6,
120
+ level4: 8,
121
+ level5: 12,
122
+ },
123
+ focusRing: {
124
+ color: c.primary,
125
+ width: 2,
126
+ offset: 2,
127
+ },
128
+ typography: {
129
+ // M3 Display styles (largest)
130
+ displayLarge: 57,
131
+ displayMedium: 45,
132
+ displaySmall: 36,
133
+ // M3 Headline styles
134
+ headlineLarge: 32,
135
+ headlineMedium: 28,
136
+ headlineSmall: 24,
137
+ // M3 Title styles
138
+ titleLarge: 22,
139
+ titleMedium: 16,
140
+ titleSmall: 14,
141
+ // M3 Body styles
142
+ bodyLarge: 16,
143
+ bodyMedium: 14,
144
+ bodySmall: 12,
145
+ // M3 Label styles
146
+ labelLarge: 14,
147
+ labelMedium: 12,
148
+ labelSmall: 11,
149
+ // Font weights
150
+ weightLight: 300,
151
+ weightRegular: 400,
152
+ weightMedium: 500,
153
+ weightBold: 700,
154
+ // Line heights (multipliers)
155
+ lineHeightTight: 1.2,
156
+ lineHeightNormal: 1.5,
157
+ lineHeightRelaxed: 1.75,
158
+ },
159
+ },
160
+ };
161
+ };
162
+ export const createDarkTheme = (brand) => {
163
+ // Use brand.darkColors if available, otherwise use brand.colors (assumes colors work for both themes)
164
+ const c = brand.darkColors ?? brand.colors;
165
+ return {
166
+ primary: c.primary,
167
+ onPrimary: c.onPrimary,
168
+ primaryContainer: c.primaryContainer,
169
+ onPrimaryContainer: c.onPrimaryContainer,
170
+ secondary: c.secondary,
171
+ onSecondary: c.onSecondary,
172
+ secondaryContainer: c.secondaryContainer,
173
+ onSecondaryContainer: c.onSecondaryContainer,
174
+ tertiary: c.tertiary,
175
+ onTertiary: c.onTertiary,
176
+ tertiaryContainer: c.tertiaryContainer,
177
+ onTertiaryContainer: c.onTertiaryContainer,
178
+ error: c.error,
179
+ onError: c.onError,
180
+ errorContainer: c.errorContainer,
181
+ onErrorContainer: c.onErrorContainer,
182
+ surface: c.surface,
183
+ surfaceVariant: c.surfaceContainer,
184
+ surfaceTint: c.primary,
185
+ onSurface: c.onSurface,
186
+ onSurfaceVariant: c.onSurfaceVariant,
187
+ surfaceContainerLowest: c.surfaceContainerLowest,
188
+ surfaceContainerLow: c.surfaceContainerLow,
189
+ surfaceContainer: c.surfaceContainer,
190
+ surfaceContainerHigh: c.surfaceContainerHigh,
191
+ surfaceContainerHighest: c.surfaceContainerHighest,
192
+ outline: c.outline,
193
+ outlineVariant: c.outlineVariant,
194
+ inverseSurface: c.inverseSurface,
195
+ inverseOnSurface: c.inverseOnSurface,
196
+ inversePrimary: c.inversePrimary,
197
+ scrim: c.scrim,
198
+ shadow: c.shadow,
199
+ spacing: brand.spacing,
200
+ borderRadius: brand.borderRadius,
201
+ shape: brand.shape,
202
+ isDark: true,
203
+ tokens: {
204
+ button: {
205
+ filledBg: c.primary,
206
+ filledText: c.onPrimary,
207
+ filledHoverBg: c.primaryContainer ?? c.primary,
208
+ filledPressedBg: c.primaryContainer ?? c.primary,
209
+ elevatedBg: c.surfaceContainerHigh,
210
+ elevatedText: c.onSurface,
211
+ elevatedHoverBg: c.surfaceContainerHighest,
212
+ tonalBg: c.secondaryContainer,
213
+ tonalText: c.onSecondary,
214
+ tonalHoverBg: c.secondaryContainer ?? c.secondary,
215
+ outlinedBorder: c.outlineVariant ?? c.outline,
216
+ outlinedText: c.primary,
217
+ outlinedHoverBorder: c.outlineVariant ?? c.outline,
218
+ textColor: c.primary,
219
+ textHoverColor: c.primary,
220
+ disabledBg: c.surfaceContainerLow,
221
+ disabledText: c.onSurfaceVariant,
222
+ },
223
+ card: {
224
+ background: c.surfaceContainer,
225
+ text: c.onSurface,
226
+ },
227
+ input: {
228
+ background: c.surfaceContainerLow,
229
+ text: c.onSurface,
230
+ border: c.outlineVariant ?? c.outline,
231
+ placeholder: c.onSurfaceVariant,
232
+ },
233
+ appbar: {
234
+ background: c.surface,
235
+ text: c.onSurface,
236
+ border: c.outlineVariant ?? c.outline,
237
+ },
238
+ link: {
239
+ text: c.primary,
240
+ hover: c.primary,
241
+ },
242
+ badge: {
243
+ background: c.primary,
244
+ text: c.onPrimary,
245
+ },
246
+ chip: {
247
+ filledBg: c.secondaryContainer,
248
+ filledText: c.onSecondaryContainer,
249
+ outlinedBorder: c.outline,
250
+ outlinedText: c.onSurface,
251
+ selectedBg: c.secondaryContainer,
252
+ selectedText: c.onSecondaryContainer,
253
+ disabledBg: c.surfaceContainerLow,
254
+ disabledText: c.onSurfaceVariant,
255
+ disabledBorder: c.outlineVariant ?? c.outline,
256
+ },
257
+ slider: {
258
+ activeTrack: c.primary,
259
+ inactiveTrack: c.surfaceContainerHighest,
260
+ thumb: c.primary,
261
+ },
262
+ sidebar: {
263
+ background: c.surface,
264
+ itemText: c.onSurface,
265
+ itemActiveText: c.primary,
266
+ itemActiveBg: c.primaryContainer,
267
+ itemHoverBg: c.surfaceContainerHigh,
268
+ divider: c.outlineVariant ?? c.outline,
269
+ width: 280,
270
+ },
271
+ elevation: {
272
+ level0: 0,
273
+ level1: 1,
274
+ level2: 3,
275
+ level3: 6,
276
+ level4: 8,
277
+ level5: 12,
278
+ },
279
+ focusRing: {
280
+ color: c.primary,
281
+ width: 2,
282
+ offset: 2,
283
+ },
284
+ typography: {
285
+ // M3 Display styles (largest)
286
+ displayLarge: 57,
287
+ displayMedium: 45,
288
+ displaySmall: 36,
289
+ // M3 Headline styles
290
+ headlineLarge: 32,
291
+ headlineMedium: 28,
292
+ headlineSmall: 24,
293
+ // M3 Title styles
294
+ titleLarge: 22,
295
+ titleMedium: 16,
296
+ titleSmall: 14,
297
+ // M3 Body styles
298
+ bodyLarge: 16,
299
+ bodyMedium: 14,
300
+ bodySmall: 12,
301
+ // M3 Label styles
302
+ labelLarge: 14,
303
+ labelMedium: 12,
304
+ labelSmall: 11,
305
+ // Font weights
306
+ weightLight: 300,
307
+ weightRegular: 400,
308
+ weightMedium: 500,
309
+ weightBold: 700,
310
+ // Line heights (multipliers)
311
+ lineHeightTight: 1.2,
312
+ lineHeightNormal: 1.5,
313
+ lineHeightRelaxed: 1.75,
314
+ },
315
+ },
316
+ };
317
+ };
318
+ //# sourceMappingURL=theme-config.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-config.js","sourceRoot":"","sources":["../../theme/theme-config.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,106 @@
1
+ import React from 'react';
2
+ import { ThemeValuesType, type ThemeTokens } from './theme-config';
3
+ import { Brand } from '../brand';
4
+ export type ThemeMode = 'light' | 'dark';
5
+ export type ThemeContextType = {
6
+ values: ThemeValuesType;
7
+ mode: ThemeMode;
8
+ setMode: (m: ThemeMode) => void;
9
+ toggleTheme: () => void;
10
+ };
11
+ declare const MISSING_PROVIDER: unique symbol;
12
+ declare const ThemeContext: React.Context<ThemeContextType | typeof MISSING_PROVIDER>;
13
+ type ZeroToAppProps = {
14
+ brand: Brand;
15
+ children: React.ReactNode;
16
+ };
17
+ declare const ZeroToApp: ({ brand, children }: ZeroToAppProps) => import("react/jsx-runtime").JSX.Element;
18
+ /**
19
+ * Hook to access the current theme values and mode.
20
+ * Must be used within a `<ZeroToApp>` provider.
21
+ *
22
+ * @returns The theme context containing values, mode, setMode, and toggleTheme
23
+ * @throws Error if used outside of a ZeroToApp provider
24
+ *
25
+ * @example
26
+ * ```tsx
27
+ * function MyComponent() {
28
+ * const theme = useTheme();
29
+ *
30
+ * return (
31
+ * <View style={{ backgroundColor: theme.surface }}>
32
+ * <Text style={{ color: theme.onSurface }}>
33
+ * Hello World
34
+ * </Text>
35
+ * </View>
36
+ * );
37
+ * }
38
+ * ```
39
+ */
40
+ export declare const useTheme: () => ThemeValuesType;
41
+ /**
42
+ * Hook to access the current theme mode and controllers.
43
+ * Must be used within a `<ZeroToApp>` provider.
44
+ *
45
+ * @returns The theme mode context containing mode, setMode, and toggleTheme
46
+ * @throws Error if used outside of a ZeroToApp provider
47
+ *
48
+ * @example
49
+ * ```tsx
50
+ * function ThemeToggler() {
51
+ * const { mode, toggleTheme } = useThemeMode();
52
+ * return <Button title={`Switch to ${mode === 'light' ? 'dark' : 'light'}`} onPress={toggleTheme} />;
53
+ * }
54
+ * ```
55
+ */
56
+ export declare const useThemeMode: () => {
57
+ mode: ThemeMode;
58
+ setMode: (m: ThemeMode) => void;
59
+ toggleTheme: () => void;
60
+ };
61
+ export declare const useThemeContext: () => ThemeContextType;
62
+ /**
63
+ * Convenience hook to access theme tokens directly without drilling through `values.tokens`.
64
+ * Must be used within a `<ZeroToApp>` provider.
65
+ *
66
+ * @returns The theme tokens object containing button, card, input, typography, elevation, etc.
67
+ * @throws Error if used outside of a ZeroToApp provider
68
+ *
69
+ * @example
70
+ * ```tsx
71
+ * function MyCard() {
72
+ * const tokens = useTokens();
73
+ *
74
+ * return (
75
+ * <View style={{
76
+ * backgroundColor: tokens.card.background,
77
+ * shadowOffset: { width: 0, height: tokens.elevation.level2 },
78
+ * }}>
79
+ * <Text style={{ fontSize: tokens.typography.bodyMedium }}>
80
+ * Card content
81
+ * </Text>
82
+ * </View>
83
+ * );
84
+ * }
85
+ * ```
86
+ *
87
+ * @example
88
+ * ```tsx
89
+ * // Access specific token groups
90
+ * function MyButton() {
91
+ * const { button, focusRing } = useTokens();
92
+ *
93
+ * return (
94
+ * <Pressable style={{
95
+ * backgroundColor: button.filledBg,
96
+ * borderColor: focusRing.color,
97
+ * }}>
98
+ * <Text style={{ color: button.filledText }}>Click me</Text>
99
+ * </Pressable>
100
+ * );
101
+ * }
102
+ * ```
103
+ */
104
+ export declare const useTokens: () => ThemeTokens;
105
+ export { ThemeContext, ZeroToApp };
106
+ //# sourceMappingURL=theme.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../theme/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAqC,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAMjC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,eAAe,CAAC;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAGF,QAAA,MAAM,gBAAgB,eAA6B,CAAC;AAGpD,QAAA,MAAM,YAAY,2DAA8E,CAAC;AAEjG,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,qBAAqB,cAAc,4CA0BrD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,QAAO,eAG3B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;;iBArFV,SAAS,KAAK,IAAI;uBACZ,IAAI;CAuFxB,CAAC;AAEF,eAAO,MAAM,eAAe,QAAO,gBAoBlC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,SAAS,QAAO,WAG5B,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}
@@ -0,0 +1,135 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createContext, useState, useMemo, useContext } from 'react';
3
+ import { createDarkTheme, createLightTheme } from './theme-config';
4
+ import { BrandProvider } from '../brand/brand-context';
5
+ import { SidebarProvider } from '../context/sidebar-context';
6
+ import { LayoutProvider } from '../context/layout-context';
7
+ // Sentinel value to detect missing provider
8
+ const MISSING_PROVIDER = Symbol('MISSING_PROVIDER');
9
+ // Initialize ThemeContext with undefined to detect missing provider
10
+ const ThemeContext = createContext(MISSING_PROVIDER);
11
+ //Initialize ZeroToApp with a toggle function
12
+ const ZeroToApp = ({ brand, children }) => {
13
+ const lightTheme = useMemo(() => createLightTheme(brand), [brand]);
14
+ // Use brand.darkColors if available, otherwise generate from brand.colors
15
+ const darkTheme = useMemo(() => createDarkTheme(brand), [brand]);
16
+ const [mode, setModeState] = useState('light');
17
+ const values = mode === 'light' ? lightTheme : darkTheme;
18
+ const setMode = (m) => {
19
+ setModeState(m);
20
+ };
21
+ const toggleTheme = () => {
22
+ setModeState((prev) => (prev === 'light' ? 'dark' : 'light'));
23
+ };
24
+ return (_jsx(BrandProvider, { brand: brand, children: _jsx(ThemeContext.Provider, { value: { values, mode, setMode, toggleTheme }, children: _jsx(LayoutProvider, { children: _jsx(SidebarProvider, { children: children }) }) }) }));
25
+ };
26
+ /**
27
+ * Hook to access the current theme values and mode.
28
+ * Must be used within a `<ZeroToApp>` provider.
29
+ *
30
+ * @returns The theme context containing values, mode, setMode, and toggleTheme
31
+ * @throws Error if used outside of a ZeroToApp provider
32
+ *
33
+ * @example
34
+ * ```tsx
35
+ * function MyComponent() {
36
+ * const theme = useTheme();
37
+ *
38
+ * return (
39
+ * <View style={{ backgroundColor: theme.surface }}>
40
+ * <Text style={{ color: theme.onSurface }}>
41
+ * Hello World
42
+ * </Text>
43
+ * </View>
44
+ * );
45
+ * }
46
+ * ```
47
+ */
48
+ export const useTheme = () => {
49
+ const { values } = useThemeContext();
50
+ return values;
51
+ };
52
+ /**
53
+ * Hook to access the current theme mode and controllers.
54
+ * Must be used within a `<ZeroToApp>` provider.
55
+ *
56
+ * @returns The theme mode context containing mode, setMode, and toggleTheme
57
+ * @throws Error if used outside of a ZeroToApp provider
58
+ *
59
+ * @example
60
+ * ```tsx
61
+ * function ThemeToggler() {
62
+ * const { mode, toggleTheme } = useThemeMode();
63
+ * return <Button title={`Switch to ${mode === 'light' ? 'dark' : 'light'}`} onPress={toggleTheme} />;
64
+ * }
65
+ * ```
66
+ */
67
+ export const useThemeMode = () => {
68
+ const { mode, setMode, toggleTheme } = useThemeContext();
69
+ return { mode, setMode, toggleTheme };
70
+ };
71
+ export const useThemeContext = () => {
72
+ const context = useContext(ThemeContext);
73
+ if (context === MISSING_PROVIDER) {
74
+ throw new Error('useThemeContext must be used within a <ZeroToApp> provider.\n\n' +
75
+ 'Make sure your component is wrapped with ZeroToApp:\n\n' +
76
+ ' import { ZeroToApp, createBrand } from "zero-to-app";\n\n' +
77
+ ' const brand = createBrand({ ... });\n\n' +
78
+ ' function App() {\n' +
79
+ ' return (\n' +
80
+ ' <ZeroToApp brand={brand}>\n' +
81
+ ' <YourComponent />\n' +
82
+ ' </ZeroToApp>\n' +
83
+ ' );\n' +
84
+ ' }');
85
+ }
86
+ return context;
87
+ };
88
+ /**
89
+ * Convenience hook to access theme tokens directly without drilling through `values.tokens`.
90
+ * Must be used within a `<ZeroToApp>` provider.
91
+ *
92
+ * @returns The theme tokens object containing button, card, input, typography, elevation, etc.
93
+ * @throws Error if used outside of a ZeroToApp provider
94
+ *
95
+ * @example
96
+ * ```tsx
97
+ * function MyCard() {
98
+ * const tokens = useTokens();
99
+ *
100
+ * return (
101
+ * <View style={{
102
+ * backgroundColor: tokens.card.background,
103
+ * shadowOffset: { width: 0, height: tokens.elevation.level2 },
104
+ * }}>
105
+ * <Text style={{ fontSize: tokens.typography.bodyMedium }}>
106
+ * Card content
107
+ * </Text>
108
+ * </View>
109
+ * );
110
+ * }
111
+ * ```
112
+ *
113
+ * @example
114
+ * ```tsx
115
+ * // Access specific token groups
116
+ * function MyButton() {
117
+ * const { button, focusRing } = useTokens();
118
+ *
119
+ * return (
120
+ * <Pressable style={{
121
+ * backgroundColor: button.filledBg,
122
+ * borderColor: focusRing.color,
123
+ * }}>
124
+ * <Text style={{ color: button.filledText }}>Click me</Text>
125
+ * </Pressable>
126
+ * );
127
+ * }
128
+ * ```
129
+ */
130
+ export const useTokens = () => {
131
+ const { values } = useThemeContext();
132
+ return values.tokens;
133
+ };
134
+ export { ThemeContext, ZeroToApp };
135
+ //# sourceMappingURL=theme.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme.js","sourceRoot":"","sources":["../../theme/theme.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,51 @@
1
+ /**
2
+ * WCAG 2.1 Contrast Checker
3
+ * Automated accessibility contrast validation
4
+ */
5
+ import type { Colors } from '../brand/brand-types';
6
+ export interface ContrastCheck {
7
+ pair: string;
8
+ foreground: string;
9
+ background: string;
10
+ ratio: number;
11
+ passes: boolean;
12
+ level: 'AAA' | 'AA' | 'Fail';
13
+ }
14
+ /**
15
+ * WCAG 2.1 contrast requirements
16
+ * - AAA: 7:1 for normal text, 4.5:1 for large text
17
+ * - AA: 4.5:1 for normal text, 3:1 for large text
18
+ */
19
+ export declare const WCAG_LEVELS: {
20
+ readonly AAA_NORMAL: 7;
21
+ readonly AAA_LARGE: 4.5;
22
+ readonly AA_NORMAL: 4.5;
23
+ readonly AA_LARGE: 3;
24
+ };
25
+ /**
26
+ * Check all critical color pairs in a theme for WCAG compliance
27
+ * @param colors Color scheme to validate
28
+ * @param largeText Whether to use large text criteria (default: false)
29
+ * @returns Array of contrast check results
30
+ */
31
+ export declare function checkThemeContrast(colors: Colors, largeText?: boolean): ContrastCheck[];
32
+ /**
33
+ * Validate theme and return failing pairs
34
+ * @param colors Color scheme to validate
35
+ * @returns Array of failing contrast pairs
36
+ */
37
+ export declare function validateThemeContrast(colors: Colors): ContrastCheck[];
38
+ /**
39
+ * Generate a contrast report for a theme
40
+ * @param colors Color scheme to validate
41
+ * @returns Human-readable report string
42
+ */
43
+ export declare function generateContrastReport(colors: Colors): string;
44
+ /**
45
+ * Assert theme contrast passes WCAG AA
46
+ * Useful for automated tests
47
+ * @param colors Color scheme to validate
48
+ * @throws Error if any pairs fail
49
+ */
50
+ export declare function assertThemeContrast(colors: Colors): void;
51
+ //# sourceMappingURL=contrast-checker.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"contrast-checker.d.ts","sourceRoot":"","sources":["../../utils/contrast-checker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,EACd,SAAS,GAAE,OAAe,GACzB,aAAa,EAAE,CAqCjB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,EAAE,CAGrE;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAiB7D;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAQxD"}