cdslibrary 1.0.4 → 1.0.5

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 (2) hide show
  1. package/package.json +1 -1
  2. package/tokens/CDSsemanticTextStyles.js +201 -187
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "cdslibrary",
3
3
  "license": "0BSD",
4
- "version": "1.0.4",
4
+ "version": "1.0.5",
5
5
  "main": "index.js",
6
6
  "author": "Nat Viramontes",
7
7
  "description": "A library of components for the CDS project",
package/tokens/CDSsemanticTextStyles.js CHANGED
@@ -1,208 +1,222 @@
1
1
  import { CDSprimitiveFontValues } from "./CDSprimitiveTokens";
2
- import { Dimensions, Platform } from "react-native";
2
+ import { Dimensions } from "react-native";
3
+
4
+ import { useFonts, Inter_400Regular, Inter_600SemiBold, Inter_700Bold } from "@expo-google-fonts/inter";
3
5
 
4
6
  const { width } = Dimensions.get("window");
5
7
  const isMobile = width <= 768;
6
8
 
7
- export const getSemanticTextStyles = (theme) => ({
8
- h1: {
9
- fontFamily: CDSprimitiveFontValues.family.interBold,
10
- fontSize: isMobile
11
- ? CDSprimitiveFontValues.size.typography.mobile["3xl"]
12
- : CDSprimitiveFontValues.size.typography.desktop["3xl"],
13
- color: theme.text.neutral.primary,
14
- },
15
- h2: {
16
- fontFamily: CDSprimitiveFontValues.family.interBold,
17
- fontSize: isMobile
18
- ? CDSprimitiveFontValues.size.typography.mobile["2xl"]
19
- : CDSprimitiveFontValues.size.typography.desktop["2xl"],
20
- color: theme.text.neutral.primary,
21
- },
22
- h3: {
23
- fontFamily: CDSprimitiveFontValues.family.interBold,
24
- fontSize: isMobile
25
- ? CDSprimitiveFontValues.size.typography.mobile.xl
26
- : CDSprimitiveFontValues.size.typography.desktop.xl,
27
- color: theme.text.neutral.primary,
28
- },
29
- h4: {
30
- fontFamily: CDSprimitiveFontValues.family.interBold,
31
- fontSize: isMobile
32
- ? CDSprimitiveFontValues.size.typography.mobile.lg
33
- : CDSprimitiveFontValues.size.typography.desktop.lg,
34
- color: theme.text.neutral.primary,
35
- },
36
-
37
- regular: {
38
- lg: {
39
- fontFamily: CDSprimitiveFontValues.family.interRegular,
40
- fontSize: isMobile
41
- ? CDSprimitiveFontValues.size.typography.mobile.lg
42
- : CDSprimitiveFontValues.size.typography.desktop.lg,
43
- color: theme.text.neutral.primary,
44
- },
45
-
46
- md: {
47
- fontFamily: CDSprimitiveFontValues.family.interRegular,
48
- fontSize: isMobile
49
- ? CDSprimitiveFontValues.size.typography.mobile.md
50
- : CDSprimitiveFontValues.size.typography.desktop.md,
51
- color: theme.text.neutral.primary,
52
- },
53
-
54
- sm: {
55
- fontFamily: CDSprimitiveFontValues.family.interRegular,
56
- fontSize: isMobile
57
- ? CDSprimitiveFontValues.size.typography.mobile.sm
58
- : CDSprimitiveFontValues.size.typography.desktop.sm,
59
- color: theme.text.neutral.primary,
60
- },
61
-
62
- xs: {
63
- fontFamily: CDSprimitiveFontValues.family.interRegular,
64
- fontSize: isMobile
65
- ? CDSprimitiveFontValues.size.typography.mobile.xs
66
- : CDSprimitiveFontValues.size.typography.desktop.xs,
67
- color: theme.text.neutral.primary,
68
- },
69
- },
70
- bold: {
71
- lg: {
72
- fontFamily: CDSprimitiveFontValues.family.interBold,
73
- fontSize: isMobile
74
- ? CDSprimitiveFontValues.size.typography.mobile.lg
75
- : CDSprimitiveFontValues.size.typography.desktop.lg,
76
- color: theme.text.neutral.primary,
77
- },
78
-
79
- md: {
80
- fontFamily: CDSprimitiveFontValues.family.interBold,
81
- fontSize: isMobile
82
- ? CDSprimitiveFontValues.size.typography.mobile.md
83
- : CDSprimitiveFontValues.size.typography.desktop.md,
84
- color: theme.text.neutral.primary,
85
- },
86
-
87
- sm: {
88
- fontFamily: CDSprimitiveFontValues.family.interBold,
89
- fontSize: isMobile
90
- ? CDSprimitiveFontValues.size.typography.mobile.sm
91
- : CDSprimitiveFontValues.size.typography.desktop.sm,
92
- color: theme.text.neutral.primary,
93
- },
94
-
95
- xs: {
96
- fontFamily: CDSprimitiveFontValues.family.interBold,
97
- fontSize: isMobile
98
- ? CDSprimitiveFontValues.size.typography.mobile.xs
99
- : CDSprimitiveFontValues.size.typography.desktop.xs,
100
- color: theme.text.neutral.primary,
101
- },
102
- },
103
- semiBold: {
104
- lg: {
105
- fontFamily: CDSprimitiveFontValues.family.interSemiBold,
106
- fontSize: isMobile
107
- ? CDSprimitiveFontValues.size.typography.mobile.lg
108
- : CDSprimitiveFontValues.size.typography.desktop.lg,
109
- color: theme.text.neutral.primary,
110
- },
111
-
112
- md: {
113
- fontFamily: CDSprimitiveFontValues.family.interSemiBold,
114
- fontSize: isMobile
115
- ? CDSprimitiveFontValues.size.typography.mobile.md
116
- : CDSprimitiveFontValues.size.typography.desktop.md,
117
- color: theme.text.neutral.primary,
118
- },
119
-
120
- sm: {
121
- fontFamily: CDSprimitiveFontValues.family.interSemiBold,
122
- fontSize: isMobile
123
- ? CDSprimitiveFontValues.size.typography.mobile.sm
124
- : CDSprimitiveFontValues.size.typography.desktop.sm,
125
- color: theme.text.neutral.primary,
126
- },
127
-
128
- xs: {
129
- fontFamily: CDSprimitiveFontValues.family.interSemiBold,
130
- fontSize: isMobile
131
- ? CDSprimitiveFontValues.size.typography.mobile.xs
132
- : CDSprimitiveFontValues.size.typography.desktop.xs,
133
- color: theme.text.neutral.primary,
134
- },
135
- },
136
-
137
- label: {
138
- fontFamily: CDSprimitiveFontValues.family.interSemiBold,
139
- fontSize: isMobile
140
- ? CDSprimitiveFontValues.size.typography.mobile.sm
141
- : CDSprimitiveFontValues.size.typography.desktop.sm,
142
- color: theme.text.neutral.primary,
143
- lineHeight: isMobile
144
- ? CDSprimitiveFontValues.lineHeight.mobile.sm
145
- : CDSprimitiveFontValues.lineHeight.desktop.sm,
146
- },
147
- inputText: {
148
- placeholder: {
149
- fontFamily: CDSprimitiveFontValues.family.interRegular,
9
+
10
+
11
+ export function useTextStyles(theme) {
12
+ const [fontsLoaded] = useFonts({
13
+ Inter_400Regular,
14
+ Inter_600SemiBold,
15
+ Inter_700Bold,
16
+ });
17
+
18
+ if (!fontsLoaded) {
19
+ return null; // Evita que se rendericen los estilos hasta que las fuentes estén listas
20
+ }
21
+ return {
22
+ h1: {
23
+ fontFamily: CDSprimitiveFontValues.family.interBold,
150
24
  fontSize: isMobile
151
- ? CDSprimitiveFontValues.size.typography.mobile.md
152
- : CDSprimitiveFontValues.size.typography.desktop.md,
153
- color: theme.text.neutral.placeholder,
25
+ ? CDSprimitiveFontValues.size.typography.mobile["3xl"]
26
+ : CDSprimitiveFontValues.size.typography.desktop["3xl"],
27
+ color: theme.text.neutral.primary,
154
28
  },
155
- value: {
156
- fontFamily: CDSprimitiveFontValues.family.interRegular,
29
+ h2: {
30
+ fontFamily: CDSprimitiveFontValues.family.interBold,
157
31
  fontSize: isMobile
158
- ? CDSprimitiveFontValues.size.typography.mobile.md
159
- : CDSprimitiveFontValues.size.typography.desktop.md,
32
+ ? CDSprimitiveFontValues.size.typography.mobile["2xl"]
33
+ : CDSprimitiveFontValues.size.typography.desktop["2xl"],
160
34
  color: theme.text.neutral.primary,
161
35
  },
162
- },
163
-
164
- link: {
165
- regular: {
36
+ h3: {
166
37
  fontFamily: CDSprimitiveFontValues.family.interBold,
167
38
  fontSize: isMobile
168
- ? CDSprimitiveFontValues.size.typography.mobile.md
169
- : CDSprimitiveFontValues.size.typography.desktop.md,
39
+ ? CDSprimitiveFontValues.size.typography.mobile.xl
40
+ : CDSprimitiveFontValues.size.typography.desktop.xl,
170
41
  color: theme.text.neutral.primary,
171
- textDecorationLine: "underline",
172
42
  },
173
- small: {
43
+ h4: {
174
44
  fontFamily: CDSprimitiveFontValues.family.interBold,
45
+ fontSize: isMobile
46
+ ? CDSprimitiveFontValues.size.typography.mobile.lg
47
+ : CDSprimitiveFontValues.size.typography.desktop.lg,
48
+ color: theme.text.neutral.primary,
49
+ },
50
+
51
+ regular: {
52
+ lg: {
53
+ fontFamily: CDSprimitiveFontValues.family.interRegular,
54
+ fontSize: isMobile
55
+ ? CDSprimitiveFontValues.size.typography.mobile.lg
56
+ : CDSprimitiveFontValues.size.typography.desktop.lg,
57
+ color: theme.text.neutral.primary,
58
+ },
59
+
60
+ md: {
61
+ fontFamily: CDSprimitiveFontValues.family.interRegular,
62
+ fontSize: isMobile
63
+ ? CDSprimitiveFontValues.size.typography.mobile.md
64
+ : CDSprimitiveFontValues.size.typography.desktop.md,
65
+ color: theme.text.neutral.primary,
66
+ },
67
+
68
+ sm: {
69
+ fontFamily: CDSprimitiveFontValues.family.interRegular,
70
+ fontSize: isMobile
71
+ ? CDSprimitiveFontValues.size.typography.mobile.sm
72
+ : CDSprimitiveFontValues.size.typography.desktop.sm,
73
+ color: theme.text.neutral.primary,
74
+ },
75
+
76
+ xs: {
77
+ fontFamily: CDSprimitiveFontValues.family.interRegular,
78
+ fontSize: isMobile
79
+ ? CDSprimitiveFontValues.size.typography.mobile.xs
80
+ : CDSprimitiveFontValues.size.typography.desktop.xs,
81
+ color: theme.text.neutral.primary,
82
+ },
83
+ },
84
+ bold: {
85
+ lg: {
86
+ fontFamily: CDSprimitiveFontValues.family.interBold,
87
+ fontSize: isMobile
88
+ ? CDSprimitiveFontValues.size.typography.mobile.lg
89
+ : CDSprimitiveFontValues.size.typography.desktop.lg,
90
+ color: theme.text.neutral.primary,
91
+ },
92
+
93
+ md: {
94
+ fontFamily: CDSprimitiveFontValues.family.interBold,
95
+ fontSize: isMobile
96
+ ? CDSprimitiveFontValues.size.typography.mobile.md
97
+ : CDSprimitiveFontValues.size.typography.desktop.md,
98
+ color: theme.text.neutral.primary,
99
+ },
100
+
101
+ sm: {
102
+ fontFamily: CDSprimitiveFontValues.family.interBold,
103
+ fontSize: isMobile
104
+ ? CDSprimitiveFontValues.size.typography.mobile.sm
105
+ : CDSprimitiveFontValues.size.typography.desktop.sm,
106
+ color: theme.text.neutral.primary,
107
+ },
108
+
109
+ xs: {
110
+ fontFamily: CDSprimitiveFontValues.family.interBold,
111
+ fontSize: isMobile
112
+ ? CDSprimitiveFontValues.size.typography.mobile.xs
113
+ : CDSprimitiveFontValues.size.typography.desktop.xs,
114
+ color: theme.text.neutral.primary,
115
+ },
116
+ },
117
+ semiBold: {
118
+ lg: {
119
+ fontFamily: CDSprimitiveFontValues.family.interSemiBold,
120
+ fontSize: isMobile
121
+ ? CDSprimitiveFontValues.size.typography.mobile.lg
122
+ : CDSprimitiveFontValues.size.typography.desktop.lg,
123
+ color: theme.text.neutral.primary,
124
+ },
125
+
126
+ md: {
127
+ fontFamily: CDSprimitiveFontValues.family.interSemiBold,
128
+ fontSize: isMobile
129
+ ? CDSprimitiveFontValues.size.typography.mobile.md
130
+ : CDSprimitiveFontValues.size.typography.desktop.md,
131
+ color: theme.text.neutral.primary,
132
+ },
133
+
134
+ sm: {
135
+ fontFamily: CDSprimitiveFontValues.family.interSemiBold,
136
+ fontSize: isMobile
137
+ ? CDSprimitiveFontValues.size.typography.mobile.sm
138
+ : CDSprimitiveFontValues.size.typography.desktop.sm,
139
+ color: theme.text.neutral.primary,
140
+ },
141
+
142
+ xs: {
143
+ fontFamily: CDSprimitiveFontValues.family.interSemiBold,
144
+ fontSize: isMobile
145
+ ? CDSprimitiveFontValues.size.typography.mobile.xs
146
+ : CDSprimitiveFontValues.size.typography.desktop.xs,
147
+ color: theme.text.neutral.primary,
148
+ },
149
+ },
150
+
151
+ label: {
152
+ fontFamily: CDSprimitiveFontValues.family.interSemiBold,
175
153
  fontSize: isMobile
176
154
  ? CDSprimitiveFontValues.size.typography.mobile.sm
177
155
  : CDSprimitiveFontValues.size.typography.desktop.sm,
178
156
  color: theme.text.neutral.primary,
179
- textDecorationLine: "underline",
157
+ lineHeight: isMobile
158
+ ? CDSprimitiveFontValues.lineHeight.mobile.sm
159
+ : CDSprimitiveFontValues.lineHeight.desktop.sm,
160
+ },
161
+ inputText: {
162
+ placeholder: {
163
+ fontFamily: CDSprimitiveFontValues.family.interRegular,
164
+ fontSize: isMobile
165
+ ? CDSprimitiveFontValues.size.typography.mobile.md
166
+ : CDSprimitiveFontValues.size.typography.desktop.md,
167
+ color: theme.text.neutral.placeholder,
168
+ },
169
+ value: {
170
+ fontFamily: CDSprimitiveFontValues.family.interRegular,
171
+ fontSize: isMobile
172
+ ? CDSprimitiveFontValues.size.typography.mobile.md
173
+ : CDSprimitiveFontValues.size.typography.desktop.md,
174
+ color: theme.text.neutral.primary,
175
+ },
176
+ },
177
+
178
+ link: {
179
+ regular: {
180
+ fontFamily: CDSprimitiveFontValues.family.interBold,
181
+ fontSize: isMobile
182
+ ? CDSprimitiveFontValues.size.typography.mobile.md
183
+ : CDSprimitiveFontValues.size.typography.desktop.md,
184
+ color: theme.text.neutral.primary,
185
+ textDecorationLine: "underline",
186
+ },
187
+ small: {
188
+ fontFamily: CDSprimitiveFontValues.family.interBold,
189
+ fontSize: isMobile
190
+ ? CDSprimitiveFontValues.size.typography.mobile.sm
191
+ : CDSprimitiveFontValues.size.typography.desktop.sm,
192
+ color: theme.text.neutral.primary,
193
+ textDecorationLine: "underline",
194
+ },
195
+ },
196
+
197
+ buttonText: {
198
+ fontFamily: CDSprimitiveFontValues.family.interBold,
199
+ fontSize: isMobile
200
+ ? CDSprimitiveFontValues.size.typography.mobile.md
201
+ : CDSprimitiveFontValues.size.typography.desktop.md,
202
+ },
203
+
204
+ icon: {
205
+ fontSize: isMobile
206
+ ? CDSprimitiveFontValues.size.iconography.mobile.sm
207
+ : CDSprimitiveFontValues.size.iconography.desktop.sm,
208
+ },
209
+
210
+ highlightText: {
211
+ color: theme.text.brand.primary,
180
212
  },
181
- },
182
-
183
- buttonText: {
184
- fontFamily: CDSprimitiveFontValues.family.interBold,
185
- fontSize: isMobile
186
- ? CDSprimitiveFontValues.size.typography.mobile.md
187
- : CDSprimitiveFontValues.size.typography.desktop.md,
188
- },
189
-
190
- icon: {
191
- fontSize: isMobile
192
- ? CDSprimitiveFontValues.size.iconography.mobile.sm
193
- : CDSprimitiveFontValues.size.iconography.desktop.sm,
194
- },
195
-
196
- highlightText: {
197
- color: theme.text.brand.primary,
198
- },
199
- // h5: {
200
- // fontFamily: primitiveFontValues.family.interBold,
201
- // fontSize: isMobile ? primitiveFontValues.size.typography.mobile.md : primitiveFontValues.size.typography.desktop.md,
202
- // },
203
- // h6: {
204
- // fontFamily: primitiveFontValues.family.interBold,
205
- // fontSize: isMobile ? primitiveFontValues.size.typography.mobile.sm : primitiveFontValues.size.typography.desktop.sm,
206
- // },
207
- });
213
+ // h5: {
214
+ // fontFamily: primitiveFontValues.family.interBold,
215
+ // fontSize: isMobile ? primitiveFontValues.size.typography.mobile.md : primitiveFontValues.size.typography.desktop.md,
216
+ // },
217
+ // h6: {
218
+ // fontFamily: primitiveFontValues.family.interBold,
219
+ // fontSize: isMobile ? primitiveFontValues.size.typography.mobile.sm : primitiveFontValues.size.typography.desktop.sm,
220
+ // },
221
+ }};
208
222