@nerds-with-charisma/revit-ui 0.3.0 → 0.4.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.
@@ -0,0 +1,122 @@
1
+ import { ViewStyle, TextStyle } from 'react-native';
2
+ import * as react from 'react';
3
+ import { ReactNode } from 'react';
4
+
5
+ /**
6
+ * Token contract for @nerds-with-charisma/revit-ui. Pass a full object into RevitUIProvider.
7
+ */
8
+ type RevitColorTokens = {
9
+ background: string;
10
+ foreground: string;
11
+ card: string;
12
+ cardForeground: string;
13
+ popover: string;
14
+ popoverForeground: string;
15
+ primary: string;
16
+ primaryForeground: string;
17
+ secondary: string;
18
+ secondaryForeground: string;
19
+ muted: string;
20
+ mutedForeground: string;
21
+ accent: string;
22
+ accentForeground: string;
23
+ destructive: string;
24
+ destructiveForeground: string;
25
+ border: string;
26
+ input: string;
27
+ ring: string;
28
+ brand: {
29
+ yellow: string;
30
+ yellowLight: string;
31
+ offBlack: string;
32
+ pink: string;
33
+ purple: string;
34
+ blue: string;
35
+ gold: string;
36
+ brown: string;
37
+ umber: string;
38
+ mist: string;
39
+ };
40
+ };
41
+ type RevitThemeTokens = {
42
+ colors: RevitColorTokens;
43
+ colorsDark: RevitColorTokens;
44
+ radius: {
45
+ sm: string;
46
+ md: string;
47
+ lg: string;
48
+ xl: string;
49
+ pill: string;
50
+ };
51
+ fontFamily: {
52
+ sans: string;
53
+ };
54
+ };
55
+
56
+ type RevitNativeColorScheme = 'light' | 'dark';
57
+ declare const getThemeColors: (tokens: RevitThemeTokens, scheme?: RevitNativeColorScheme) => RevitColorTokens;
58
+ type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
59
+ type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
60
+ type InputVariant = 'default' | 'pill' | 'filled';
61
+ type InputSize = 'default' | 'sm' | 'md';
62
+ type CardVariant = 'default' | 'elevated' | 'frost' | 'outline';
63
+ type CardSize = 'sm' | 'default' | 'lg';
64
+ type AlertVariant = 'default' | 'warning' | 'destructive';
65
+ type LabelVariant = 'default' | 'eyebrow';
66
+ type HeadingVariant = 'page' | 'title' | 'section' | 'eyebrow' | 'subtitle';
67
+ type TextVariant = 'body' | 'sm' | 'muted' | 'lead' | 'label' | 'destructive';
68
+ declare const getButtonStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, variant?: ButtonVariant, size?: ButtonSize) => {
69
+ container: ViewStyle;
70
+ text: TextStyle;
71
+ };
72
+ declare const getInputStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, variant?: InputVariant, size?: InputSize) => TextStyle;
73
+ declare const getCardStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, variant?: CardVariant) => ViewStyle;
74
+ declare const getCardPadding: (size?: CardSize) => 16 | 24 | 32;
75
+ declare const getAlertStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, variant?: AlertVariant) => ViewStyle;
76
+ declare const getLabelStyles: (colors: RevitColorTokens, variant?: LabelVariant) => TextStyle;
77
+ declare const getHeadingStyles: (colors: RevitColorTokens, variant?: HeadingVariant) => TextStyle;
78
+ declare const getTextStyles: (colors: RevitColorTokens, variant?: TextVariant) => TextStyle;
79
+ declare const getTabsListStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens) => ViewStyle;
80
+ declare const getTabsTriggerStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, isActive: boolean) => {
81
+ container: ViewStyle;
82
+ text: TextStyle;
83
+ };
84
+ type RevitNativeThemeStyles = ReturnType<typeof tokensToStyleSheet>;
85
+ declare const tokensToStyleSheet: (tokens: RevitThemeTokens, scheme?: RevitNativeColorScheme) => {
86
+ screen: {
87
+ flex: number;
88
+ backgroundColor: string;
89
+ };
90
+ foregroundText: {
91
+ color: string;
92
+ };
93
+ mutedText: {
94
+ color: string;
95
+ };
96
+ destructiveText: {
97
+ color: string;
98
+ };
99
+ card: ViewStyle;
100
+ cardElevated: ViewStyle;
101
+ input: TextStyle;
102
+ button: ViewStyle;
103
+ buttonText: TextStyle;
104
+ alert: ViewStyle;
105
+ tabsList: ViewStyle;
106
+ };
107
+
108
+ type RevitThemeContextValue = {
109
+ tokens: RevitThemeTokens;
110
+ scheme: RevitNativeColorScheme;
111
+ colors: RevitColorTokens;
112
+ styles: RevitNativeThemeStyles;
113
+ };
114
+ type RevitThemeProviderProps = {
115
+ children: ReactNode;
116
+ tokens?: RevitThemeTokens;
117
+ scheme?: RevitNativeColorScheme;
118
+ };
119
+ declare const RevitThemeProvider: ({ children, tokens, scheme, }: RevitThemeProviderProps) => react.JSX.Element;
120
+ declare const useRevitTheme: () => RevitThemeContextValue;
121
+
122
+ export { type AlertVariant, type ButtonSize, type ButtonVariant, type CardSize, type CardVariant, type HeadingVariant, type InputSize, type InputVariant, type LabelVariant, type RevitNativeColorScheme, type RevitNativeThemeStyles, type RevitThemeContextValue, RevitThemeProvider, type TextVariant, getAlertStyles, getButtonStyles, getCardPadding, getCardStyles, getHeadingStyles, getInputStyles, getLabelStyles, getTabsListStyles, getTabsTriggerStyles, getTextStyles, getThemeColors, tokensToStyleSheet, useRevitTheme };
@@ -0,0 +1,122 @@
1
+ import { ViewStyle, TextStyle } from 'react-native';
2
+ import * as react from 'react';
3
+ import { ReactNode } from 'react';
4
+
5
+ /**
6
+ * Token contract for @nerds-with-charisma/revit-ui. Pass a full object into RevitUIProvider.
7
+ */
8
+ type RevitColorTokens = {
9
+ background: string;
10
+ foreground: string;
11
+ card: string;
12
+ cardForeground: string;
13
+ popover: string;
14
+ popoverForeground: string;
15
+ primary: string;
16
+ primaryForeground: string;
17
+ secondary: string;
18
+ secondaryForeground: string;
19
+ muted: string;
20
+ mutedForeground: string;
21
+ accent: string;
22
+ accentForeground: string;
23
+ destructive: string;
24
+ destructiveForeground: string;
25
+ border: string;
26
+ input: string;
27
+ ring: string;
28
+ brand: {
29
+ yellow: string;
30
+ yellowLight: string;
31
+ offBlack: string;
32
+ pink: string;
33
+ purple: string;
34
+ blue: string;
35
+ gold: string;
36
+ brown: string;
37
+ umber: string;
38
+ mist: string;
39
+ };
40
+ };
41
+ type RevitThemeTokens = {
42
+ colors: RevitColorTokens;
43
+ colorsDark: RevitColorTokens;
44
+ radius: {
45
+ sm: string;
46
+ md: string;
47
+ lg: string;
48
+ xl: string;
49
+ pill: string;
50
+ };
51
+ fontFamily: {
52
+ sans: string;
53
+ };
54
+ };
55
+
56
+ type RevitNativeColorScheme = 'light' | 'dark';
57
+ declare const getThemeColors: (tokens: RevitThemeTokens, scheme?: RevitNativeColorScheme) => RevitColorTokens;
58
+ type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
59
+ type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
60
+ type InputVariant = 'default' | 'pill' | 'filled';
61
+ type InputSize = 'default' | 'sm' | 'md';
62
+ type CardVariant = 'default' | 'elevated' | 'frost' | 'outline';
63
+ type CardSize = 'sm' | 'default' | 'lg';
64
+ type AlertVariant = 'default' | 'warning' | 'destructive';
65
+ type LabelVariant = 'default' | 'eyebrow';
66
+ type HeadingVariant = 'page' | 'title' | 'section' | 'eyebrow' | 'subtitle';
67
+ type TextVariant = 'body' | 'sm' | 'muted' | 'lead' | 'label' | 'destructive';
68
+ declare const getButtonStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, variant?: ButtonVariant, size?: ButtonSize) => {
69
+ container: ViewStyle;
70
+ text: TextStyle;
71
+ };
72
+ declare const getInputStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, variant?: InputVariant, size?: InputSize) => TextStyle;
73
+ declare const getCardStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, variant?: CardVariant) => ViewStyle;
74
+ declare const getCardPadding: (size?: CardSize) => 16 | 24 | 32;
75
+ declare const getAlertStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, variant?: AlertVariant) => ViewStyle;
76
+ declare const getLabelStyles: (colors: RevitColorTokens, variant?: LabelVariant) => TextStyle;
77
+ declare const getHeadingStyles: (colors: RevitColorTokens, variant?: HeadingVariant) => TextStyle;
78
+ declare const getTextStyles: (colors: RevitColorTokens, variant?: TextVariant) => TextStyle;
79
+ declare const getTabsListStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens) => ViewStyle;
80
+ declare const getTabsTriggerStyles: (colors: RevitColorTokens, tokens: RevitThemeTokens, isActive: boolean) => {
81
+ container: ViewStyle;
82
+ text: TextStyle;
83
+ };
84
+ type RevitNativeThemeStyles = ReturnType<typeof tokensToStyleSheet>;
85
+ declare const tokensToStyleSheet: (tokens: RevitThemeTokens, scheme?: RevitNativeColorScheme) => {
86
+ screen: {
87
+ flex: number;
88
+ backgroundColor: string;
89
+ };
90
+ foregroundText: {
91
+ color: string;
92
+ };
93
+ mutedText: {
94
+ color: string;
95
+ };
96
+ destructiveText: {
97
+ color: string;
98
+ };
99
+ card: ViewStyle;
100
+ cardElevated: ViewStyle;
101
+ input: TextStyle;
102
+ button: ViewStyle;
103
+ buttonText: TextStyle;
104
+ alert: ViewStyle;
105
+ tabsList: ViewStyle;
106
+ };
107
+
108
+ type RevitThemeContextValue = {
109
+ tokens: RevitThemeTokens;
110
+ scheme: RevitNativeColorScheme;
111
+ colors: RevitColorTokens;
112
+ styles: RevitNativeThemeStyles;
113
+ };
114
+ type RevitThemeProviderProps = {
115
+ children: ReactNode;
116
+ tokens?: RevitThemeTokens;
117
+ scheme?: RevitNativeColorScheme;
118
+ };
119
+ declare const RevitThemeProvider: ({ children, tokens, scheme, }: RevitThemeProviderProps) => react.JSX.Element;
120
+ declare const useRevitTheme: () => RevitThemeContextValue;
121
+
122
+ export { type AlertVariant, type ButtonSize, type ButtonVariant, type CardSize, type CardVariant, type HeadingVariant, type InputSize, type InputVariant, type LabelVariant, type RevitNativeColorScheme, type RevitNativeThemeStyles, type RevitThemeContextValue, RevitThemeProvider, type TextVariant, getAlertStyles, getButtonStyles, getCardPadding, getCardStyles, getHeadingStyles, getInputStyles, getLabelStyles, getTabsListStyles, getTabsTriggerStyles, getTextStyles, getThemeColors, tokensToStyleSheet, useRevitTheme };
@@ -0,0 +1,440 @@
1
+ // src/native/theme/tokensToStyles.ts
2
+ import { StyleSheet } from "react-native";
3
+
4
+ // src/native/lib/remToPx.ts
5
+ var remToPx = (value, base = 16) => {
6
+ const parsed = parseFloat(value);
7
+ if (Number.isNaN(parsed)) return base;
8
+ if (value.endsWith("rem")) return parsed * base;
9
+ return parsed;
10
+ };
11
+
12
+ // src/native/theme/tokensToStyles.ts
13
+ var getThemeColors = (tokens, scheme = "light") => scheme === "dark" ? tokens.colorsDark : tokens.colors;
14
+ var withAlpha = (hex, alpha) => {
15
+ const normalized = hex.replace("#", "");
16
+ const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized.slice(0, 6);
17
+ const r = parseInt(value.slice(0, 2), 16);
18
+ const g = parseInt(value.slice(2, 4), 16);
19
+ const b = parseInt(value.slice(4, 6), 16);
20
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
21
+ };
22
+ var buttonSizeStyles = (size) => {
23
+ switch (size) {
24
+ case "sm":
25
+ return { paddingHorizontal: 12, paddingVertical: 6, fontSize: 10 };
26
+ case "lg":
27
+ return { minWidth: 160, paddingHorizontal: 24, paddingVertical: 12, fontSize: 14 };
28
+ case "icon":
29
+ return { width: 36, height: 36, paddingHorizontal: 0, paddingVertical: 0 };
30
+ default:
31
+ return { paddingHorizontal: 16, paddingVertical: 8, fontSize: 12 };
32
+ }
33
+ };
34
+ var getButtonStyles = (colors, tokens, variant = "default", size = "default") => {
35
+ const pillRadius = remToPx(tokens.radius.pill);
36
+ const base = {
37
+ ...buttonSizeStyles(size),
38
+ alignItems: "center",
39
+ justifyContent: "center",
40
+ flexDirection: "row",
41
+ gap: 8,
42
+ borderRadius: size === "icon" ? pillRadius : pillRadius,
43
+ borderWidth: 2,
44
+ fontWeight: "600",
45
+ textTransform: variant === "link" ? "none" : "uppercase",
46
+ letterSpacing: variant === "link" ? 0 : 1.2
47
+ };
48
+ switch (variant) {
49
+ case "secondary":
50
+ return {
51
+ container: {
52
+ ...base,
53
+ backgroundColor: colors.secondary,
54
+ borderColor: colors.secondary
55
+ },
56
+ text: { color: colors.secondaryForeground }
57
+ };
58
+ case "outline":
59
+ return {
60
+ container: {
61
+ ...base,
62
+ backgroundColor: colors.card,
63
+ borderColor: colors.border
64
+ },
65
+ text: { color: colors.cardForeground }
66
+ };
67
+ case "ghost":
68
+ return {
69
+ container: {
70
+ ...base,
71
+ backgroundColor: "transparent",
72
+ borderColor: "transparent",
73
+ borderWidth: 0
74
+ },
75
+ text: { color: colors.foreground }
76
+ };
77
+ case "link":
78
+ return {
79
+ container: {
80
+ ...base,
81
+ backgroundColor: "transparent",
82
+ borderColor: "transparent",
83
+ borderWidth: 0,
84
+ borderRadius: 0,
85
+ paddingHorizontal: 0,
86
+ paddingVertical: 0
87
+ },
88
+ text: { color: colors.primary, textDecorationLine: "underline" }
89
+ };
90
+ case "destructive":
91
+ return {
92
+ container: {
93
+ ...base,
94
+ backgroundColor: colors.destructive,
95
+ borderColor: colors.destructive
96
+ },
97
+ text: { color: colors.destructiveForeground }
98
+ };
99
+ }
100
+ return {
101
+ container: {
102
+ ...base,
103
+ backgroundColor: colors.primary,
104
+ borderColor: colors.primary,
105
+ shadowColor: "#000000",
106
+ shadowOffset: { width: 0, height: 8 },
107
+ shadowOpacity: 0.07,
108
+ shadowRadius: 12,
109
+ elevation: 4
110
+ },
111
+ text: { color: colors.primaryForeground }
112
+ };
113
+ };
114
+ var getInputStyles = (colors, tokens, variant = "default", size = "default") => {
115
+ const radius = variant === "pill" ? remToPx(tokens.radius.pill) : remToPx(tokens.radius.md);
116
+ const sizeStyles = size === "sm" ? { height: 36, paddingHorizontal: 12, paddingVertical: 4, fontSize: 14 } : size === "md" ? { height: 44, paddingHorizontal: 16, paddingVertical: 8, fontSize: 16 } : { height: 48, paddingHorizontal: 20, paddingVertical: 12, fontSize: 16 };
117
+ return {
118
+ ...sizeStyles,
119
+ width: "100%",
120
+ borderWidth: 1,
121
+ borderColor: colors.border,
122
+ backgroundColor: variant === "filled" ? colors.muted : colors.card,
123
+ color: colors.foreground,
124
+ borderRadius: radius
125
+ };
126
+ };
127
+ var getCardStyles = (colors, tokens, variant = "default") => {
128
+ switch (variant) {
129
+ case "elevated":
130
+ return {
131
+ backgroundColor: colors.card,
132
+ borderRadius: remToPx(tokens.radius.xl),
133
+ shadowColor: "#000000",
134
+ shadowOffset: { width: 0, height: 24 },
135
+ shadowOpacity: 0.12,
136
+ shadowRadius: 48,
137
+ elevation: 8
138
+ };
139
+ case "frost":
140
+ return {
141
+ backgroundColor: withAlpha(colors.card, 0.85),
142
+ borderRadius: remToPx(tokens.radius.lg),
143
+ borderWidth: 1,
144
+ borderColor: withAlpha("#ffffff", 0.55)
145
+ };
146
+ case "outline":
147
+ return {
148
+ backgroundColor: "transparent",
149
+ borderRadius: remToPx(tokens.radius.lg),
150
+ borderWidth: 1,
151
+ borderColor: colors.border
152
+ };
153
+ default:
154
+ return {
155
+ backgroundColor: colors.card,
156
+ borderRadius: remToPx(tokens.radius.lg),
157
+ borderWidth: 1,
158
+ borderColor: colors.border,
159
+ shadowColor: "#000000",
160
+ shadowOffset: { width: 0, height: 18 },
161
+ shadowOpacity: 0.04,
162
+ shadowRadius: 40,
163
+ elevation: 3
164
+ };
165
+ }
166
+ };
167
+ var getCardPadding = (size = "default") => {
168
+ switch (size) {
169
+ case "sm":
170
+ return 16;
171
+ case "lg":
172
+ return 32;
173
+ default:
174
+ return 24;
175
+ }
176
+ };
177
+ var getAlertStyles = (colors, tokens, variant = "default") => {
178
+ const base = {
179
+ width: "100%",
180
+ borderRadius: remToPx(tokens.radius.lg),
181
+ borderWidth: 1,
182
+ paddingHorizontal: 16,
183
+ paddingVertical: 12
184
+ };
185
+ switch (variant) {
186
+ case "warning":
187
+ return {
188
+ ...base,
189
+ borderColor: withAlpha(colors.primary, 0.6),
190
+ backgroundColor: withAlpha(colors.primary, 0.15)
191
+ };
192
+ case "destructive":
193
+ return {
194
+ ...base,
195
+ borderColor: withAlpha(colors.destructive, 0.4),
196
+ backgroundColor: withAlpha(colors.destructive, 0.1)
197
+ };
198
+ default:
199
+ return {
200
+ ...base,
201
+ borderColor: colors.border,
202
+ backgroundColor: colors.card
203
+ };
204
+ }
205
+ };
206
+ var getLabelStyles = (colors, variant = "default") => {
207
+ if (variant === "eyebrow") {
208
+ return {
209
+ fontSize: 12,
210
+ fontWeight: "700",
211
+ textTransform: "uppercase",
212
+ letterSpacing: 3.5,
213
+ color: colors.brand.gold
214
+ };
215
+ }
216
+ return {
217
+ fontSize: 14,
218
+ fontWeight: "500",
219
+ lineHeight: 14,
220
+ color: colors.foreground
221
+ };
222
+ };
223
+ var getHeadingStyles = (colors, variant = "title") => {
224
+ switch (variant) {
225
+ case "page":
226
+ return { fontSize: 24, fontWeight: "600", letterSpacing: -0.5, color: colors.foreground };
227
+ case "section":
228
+ return { fontSize: 18, fontWeight: "600", letterSpacing: -0.25, color: colors.foreground };
229
+ case "eyebrow":
230
+ return {
231
+ fontSize: 12,
232
+ fontWeight: "700",
233
+ textTransform: "uppercase",
234
+ letterSpacing: 3.5,
235
+ color: colors.brand.gold
236
+ };
237
+ case "subtitle":
238
+ return { fontSize: 14, fontWeight: "400", color: colors.mutedForeground };
239
+ default:
240
+ return {
241
+ fontSize: 20,
242
+ fontWeight: "600",
243
+ lineHeight: 20,
244
+ letterSpacing: -0.25,
245
+ color: colors.foreground
246
+ };
247
+ }
248
+ };
249
+ var getTextStyles = (colors, variant = "body") => {
250
+ switch (variant) {
251
+ case "sm":
252
+ return { fontSize: 14, fontWeight: "400", color: colors.foreground };
253
+ case "muted":
254
+ return { fontSize: 14, fontWeight: "400", color: colors.mutedForeground };
255
+ case "lead":
256
+ return { fontSize: 18, fontWeight: "400", color: colors.foreground };
257
+ case "label":
258
+ return { fontSize: 14, fontWeight: "500", lineHeight: 14, color: colors.foreground };
259
+ case "destructive":
260
+ return { fontSize: 14, fontWeight: "400", color: colors.destructive };
261
+ default:
262
+ return { fontSize: 16, fontWeight: "400", color: colors.foreground };
263
+ }
264
+ };
265
+ var getTabsListStyles = (colors, tokens) => ({
266
+ flexDirection: "row",
267
+ alignItems: "center",
268
+ gap: 4,
269
+ borderRadius: remToPx(tokens.radius.pill),
270
+ borderWidth: 1,
271
+ borderColor: colors.border,
272
+ backgroundColor: colors.card,
273
+ padding: 4
274
+ });
275
+ var getTabsTriggerStyles = (colors, tokens, isActive) => ({
276
+ container: {
277
+ alignItems: "center",
278
+ justifyContent: "center",
279
+ borderRadius: remToPx(tokens.radius.pill),
280
+ paddingHorizontal: 16,
281
+ paddingVertical: 8,
282
+ backgroundColor: isActive ? colors.primary : "transparent"
283
+ },
284
+ text: {
285
+ fontSize: 11,
286
+ fontWeight: "600",
287
+ textTransform: "uppercase",
288
+ letterSpacing: 1.2,
289
+ color: isActive ? colors.primaryForeground : colors.foreground
290
+ }
291
+ });
292
+ var tokensToStyleSheet = (tokens, scheme = "light") => {
293
+ const colors = getThemeColors(tokens, scheme);
294
+ return StyleSheet.create({
295
+ screen: {
296
+ flex: 1,
297
+ backgroundColor: colors.background
298
+ },
299
+ foregroundText: {
300
+ color: colors.foreground
301
+ },
302
+ mutedText: {
303
+ color: colors.mutedForeground
304
+ },
305
+ destructiveText: {
306
+ color: colors.destructive
307
+ },
308
+ card: getCardStyles(colors, tokens, "default"),
309
+ cardElevated: getCardStyles(colors, tokens, "elevated"),
310
+ input: getInputStyles(colors, tokens),
311
+ button: getButtonStyles(colors, tokens).container,
312
+ buttonText: getButtonStyles(colors, tokens).text,
313
+ alert: getAlertStyles(colors, tokens),
314
+ tabsList: getTabsListStyles(colors, tokens)
315
+ });
316
+ };
317
+
318
+ // src/native/theme/useRevitTheme.tsx
319
+ import { createContext, useContext, useMemo } from "react";
320
+
321
+ // src/theme/tokens.revit.ts
322
+ var brand = {
323
+ yellow: "#FFE500",
324
+ yellowLight: "#FFF06E",
325
+ offBlack: "#2C2C2C",
326
+ pink: "#FF005C",
327
+ purple: "#BA00FF",
328
+ blue: "#00FFFB",
329
+ gold: "#B8A500",
330
+ brown: "#78350F",
331
+ umber: "#58483B",
332
+ mist: "#F2F2F7"
333
+ };
334
+ var light = {
335
+ background: "#ffffff",
336
+ foreground: brand.offBlack,
337
+ card: "#ffffff",
338
+ cardForeground: brand.offBlack,
339
+ popover: "#ffffff",
340
+ popoverForeground: brand.offBlack,
341
+ primary: brand.yellow,
342
+ primaryForeground: "#000000",
343
+ secondary: "#000000",
344
+ secondaryForeground: "#ffffff",
345
+ muted: brand.mist,
346
+ mutedForeground: brand.umber,
347
+ accent: brand.yellowLight,
348
+ accentForeground: "#000000",
349
+ destructive: "#FF002B",
350
+ destructiveForeground: "#ffffff",
351
+ border: brand.mist,
352
+ input: brand.mist,
353
+ ring: brand.yellow,
354
+ brand
355
+ };
356
+ var dark = {
357
+ background: "#0f172a",
358
+ foreground: "#ffffff",
359
+ card: "#0f172a",
360
+ cardForeground: "#ffffff",
361
+ popover: "#0f172a",
362
+ popoverForeground: "#ffffff",
363
+ primary: brand.yellow,
364
+ primaryForeground: "#000000",
365
+ secondary: brand.yellow,
366
+ secondaryForeground: "#000000",
367
+ muted: "#1e293b",
368
+ mutedForeground: "#cbd5e1",
369
+ accent: "#1e293b",
370
+ accentForeground: "#ffffff",
371
+ destructive: "#FF002B",
372
+ destructiveForeground: "#ffffff",
373
+ border: "#334155",
374
+ input: "#334155",
375
+ ring: brand.yellow,
376
+ brand
377
+ };
378
+ var revitTokens = {
379
+ colors: light,
380
+ colorsDark: dark,
381
+ radius: {
382
+ sm: "0.375rem",
383
+ md: "0.5rem",
384
+ lg: "1.25rem",
385
+ xl: "1.5rem",
386
+ pill: "9999px"
387
+ },
388
+ fontFamily: {
389
+ sans: "Afacad, ui-sans-serif, system-ui, sans-serif"
390
+ }
391
+ };
392
+
393
+ // src/native/theme/useRevitTheme.tsx
394
+ import { jsx } from "react/jsx-runtime";
395
+ var RevitThemeContext = createContext(null);
396
+ var RevitThemeProvider = ({
397
+ children,
398
+ tokens = revitTokens,
399
+ scheme = "light"
400
+ }) => {
401
+ const value = useMemo(
402
+ () => ({
403
+ tokens,
404
+ scheme,
405
+ colors: getThemeColors(tokens, scheme),
406
+ styles: tokensToStyleSheet(tokens, scheme)
407
+ }),
408
+ [tokens, scheme]
409
+ );
410
+ return /* @__PURE__ */ jsx(RevitThemeContext.Provider, { value, children });
411
+ };
412
+ var useRevitTheme = () => {
413
+ const context = useContext(RevitThemeContext);
414
+ if (!context) {
415
+ return {
416
+ tokens: revitTokens,
417
+ scheme: "light",
418
+ colors: getThemeColors(revitTokens, "light"),
419
+ styles: tokensToStyleSheet(revitTokens, "light")
420
+ };
421
+ }
422
+ return context;
423
+ };
424
+ export {
425
+ RevitThemeProvider,
426
+ getAlertStyles,
427
+ getButtonStyles,
428
+ getCardPadding,
429
+ getCardStyles,
430
+ getHeadingStyles,
431
+ getInputStyles,
432
+ getLabelStyles,
433
+ getTabsListStyles,
434
+ getTabsTriggerStyles,
435
+ getTextStyles,
436
+ getThemeColors,
437
+ tokensToStyleSheet,
438
+ useRevitTheme
439
+ };
440
+ //# sourceMappingURL=index.js.map