cdslibrary 1.0.7 → 1.0.8

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 (4) hide show
  1. package/components/CDSButton.jsx +2 -4
  2. package/index.js +6 -6
  3. package/package.json +2 -1
  4. 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/index.js CHANGED
@@ -1,11 +1,11 @@
1
- // import { registerRootComponent } from 'expo';
1
+ import { registerRootComponent } from 'expo';
2
2
 
3
- // import App from './App';
3
+ import App from './App';
4
4
 
5
- // // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
6
- // // It also ensures that whether you load the app in Expo Go or in a native build,
7
- // // the environment is set up appropriately
8
- // registerRootComponent(App);
5
+ // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
6
+ // It also ensures that whether you load the app in Expo Go or in a native build,
7
+ // the environment is set up appropriately
8
+ registerRootComponent(App);
9
9
 
10
10
  export {CDSBottomSheet} from './components/CDSBottomSheet';
11
11
  export {CDSButton} from './components/CDSButton';
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.8",
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