cdslibrary 1.0.7 → 1.0.9

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