@nerds-with-charisma/revit-ui 0.2.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.
- package/CHANGELOG.md +21 -0
- package/README.md +119 -1
- package/dist/index.d.ts +36 -1
- package/dist/index.js +294 -174
- package/dist/index.js.map +1 -1
- package/dist/native/index.cjs +898 -0
- package/dist/native/index.cjs.map +1 -0
- package/dist/native/index.d.cts +119 -0
- package/dist/native/index.d.ts +119 -0
- package/dist/native/index.js +861 -0
- package/dist/native/index.js.map +1 -0
- package/dist/native/theme/index.cjs +480 -0
- package/dist/native/theme/index.cjs.map +1 -0
- package/dist/native/theme/index.d.cts +122 -0
- package/dist/native/theme/index.d.ts +122 -0
- package/dist/native/theme/index.js +440 -0
- package/dist/native/theme/index.js.map +1 -0
- package/dist/styles.css +1 -1
- package/package.json +41 -6
|
@@ -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
|