cdslibrary 1.0.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.
Files changed (34) hide show
  1. package/.expo/README.md +8 -0
  2. package/.expo/devices.json +3 -0
  3. package/.expo/packager-info.json +4 -0
  4. package/.expo/settings.json +10 -0
  5. package/.expo/web/cache/production/images/favicon/favicon-24272cdaeff82cc5facdaccd982a6f05b60c4504704bbf94c19a6388659880bb-contain-transparent/favicon-48.png +0 -0
  6. package/app.json +23 -0
  7. package/assets/adaptive-icon.png +0 -0
  8. package/assets/favicon.png +0 -0
  9. package/assets/icon.png +0 -0
  10. package/assets/onboarding/image1.png +0 -0
  11. package/assets/onboarding/image1D.png +0 -0
  12. package/assets/onboarding/image2.png +0 -0
  13. package/assets/onboarding/image2D.png +0 -0
  14. package/assets/onboarding/image3.png +0 -0
  15. package/assets/onboarding/image3D.png +0 -0
  16. package/assets/onboarding/slides.js +22 -0
  17. package/assets/splash-icon.png +0 -0
  18. package/components/CDSBottomSheet.jsx +163 -0
  19. package/components/CDSButton.jsx +95 -0
  20. package/components/CDSCarousel.jsx +60 -0
  21. package/components/CDSCarouselDots.jsx +56 -0
  22. package/components/CDSInput.jsx +54 -0
  23. package/components/CDSOnboarding.jsx +70 -0
  24. package/components/CDSSwitch.jsx +29 -0
  25. package/components/CustomSlotDebug.jsx +14 -0
  26. package/components/Onboarding.jsx +65 -0
  27. package/components/Paginator.jsx +52 -0
  28. package/components/onboardingItem.jsx +39 -0
  29. package/context/CDSThemeContext.js +52 -0
  30. package/index.js +21 -0
  31. package/package.json +28 -0
  32. package/tokens/CDSprimitiveTokens.js +146 -0
  33. package/tokens/CDSsemanticColors.js +213 -0
  34. package/tokens/CDSsemanticTextStyles.js +208 -0
package/tokens/CDSsemanticTextStyles.js ADDED
@@ -0,0 +1,208 @@
1
+ import { CDSprimitiveFontValues } from "./CDSprimitiveTokens";
2
+ import { Dimensions, Platform } from "react-native";
3
+
4
+ const { width } = Dimensions.get("window");
5
+ const isMobile = width <= 768;
6
+
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,
150
+ fontSize: isMobile
151
+ ? CDSprimitiveFontValues.size.typography.mobile.md
152
+ : CDSprimitiveFontValues.size.typography.desktop.md,
153
+ color: theme.text.neutral.placeholder,
154
+ },
155
+ value: {
156
+ fontFamily: CDSprimitiveFontValues.family.interRegular,
157
+ fontSize: isMobile
158
+ ? CDSprimitiveFontValues.size.typography.mobile.md
159
+ : CDSprimitiveFontValues.size.typography.desktop.md,
160
+ color: theme.text.neutral.primary,
161
+ },
162
+ },
163
+
164
+ link: {
165
+ regular: {
166
+ fontFamily: CDSprimitiveFontValues.family.interBold,
167
+ fontSize: isMobile
168
+ ? CDSprimitiveFontValues.size.typography.mobile.md
169
+ : CDSprimitiveFontValues.size.typography.desktop.md,
170
+ color: theme.text.neutral.primary,
171
+ textDecorationLine: "underline",
172
+ },
173
+ small: {
174
+ fontFamily: CDSprimitiveFontValues.family.interBold,
175
+ fontSize: isMobile
176
+ ? CDSprimitiveFontValues.size.typography.mobile.sm
177
+ : CDSprimitiveFontValues.size.typography.desktop.sm,
178
+ color: theme.text.neutral.primary,
179
+ textDecorationLine: "underline",
180
+ },
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
+ });
208
+