@expo/styleguide-native 4.4.0 → 5.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 (9) hide show
  1. package/dist/styles/palette.d.ts +194 -222
  2. package/dist/styles/palette.js +41 -222
  3. package/dist/styles/shadows.d.ts +5 -35
  4. package/dist/styles/shadows.js +6 -12
  5. package/dist/styles/sizing.d.ts +15 -9
  6. package/dist/styles/sizing.js +15 -9
  7. package/dist/styles/themes.d.ts +199 -127
  8. package/dist/styles/themes.js +214 -142
  9. package/package.json +5 -2
package/dist/styles/palette.js CHANGED
@@ -1,231 +1,50 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.palette = void 0;
4
+ const colors_1 = require("@radix-ui/colors");
4
5
  exports.palette = {
6
+ white: 'hsl(0, 0%, 100%)',
7
+ black: 'hsl(0, 0%, 0%)',
5
8
  light: {
6
- blue: {
7
- '000': '#F1F8FF',
8
- 100: '#dbedff',
9
- 200: '#c8e1ff',
10
- 300: '#79b8ff',
11
- 400: '#2188ff',
12
- 500: '#0366d6',
13
- 600: '#005cc5',
14
- 700: '#044289',
15
- 800: '#032f62',
16
- 900: '#05264c',
17
- },
18
- gray: {
19
- '000': '#FDFDFE',
20
- 100: '#F8F9FA',
21
- 200: '#F0F1F2',
22
- 300: '#E1E4E8',
23
- 400: '#D1D5DA',
24
- 500: '#9B9EA3',
25
- 600: '#6C737C',
26
- 700: '#595F68',
27
- 800: '#464C55',
28
- 900: '#30353C',
29
- 1000: '#25292E',
30
- },
31
- green: {
32
- '000': '#f0fff4',
33
- 100: '#dcffe4',
34
- 200: '#bef5cb',
35
- 300: '#85e89d',
36
- 400: '#34d058',
37
- 500: '#28a745',
38
- 600: '#22863a',
39
- 700: '#176f2c',
40
- 800: '#165c26',
41
- 900: '#144620',
42
- },
43
- orange: {
44
- '000': '#fff8f2',
45
- 100: '#ffebda',
46
- 200: '#ffd1ac',
47
- 300: '#ffab70',
48
- 400: '#fb8e41',
49
- 500: '#fa7c25',
50
- 600: '#de6614',
51
- 700: '#c45408',
52
- 800: '#96430b',
53
- 900: '#7a4018',
54
- },
55
- pink: {
56
- '000': '#ffeef8',
57
- 100: '#fedbf0',
58
- 200: '#f9b3dd',
59
- 300: '#f692ce',
60
- 400: '#ec6cb9',
61
- 500: '#ea4aaa',
62
- 600: '#d03592',
63
- 700: '#b93a86',
64
- 800: '#99306f',
65
- 900: '#6d224f',
66
- },
67
- purple: {
68
- '000': '#f5f0ff',
69
- 100: '#e6dcfd',
70
- 200: '#d1bcf9',
71
- 300: '#b392f0',
72
- 400: '#8a63d2',
73
- 500: '#6f42c1',
74
- 600: '#5a32a3',
75
- 700: '#4c2888',
76
- 800: '#3a1d6e',
77
- 900: '#29134e',
78
- },
79
- primary: {
80
- '000': '#f9f7ff',
81
- 100: '#ede9ff',
82
- 200: '#d2cafd',
83
- 300: '#a193f9',
84
- 400: '#664fff',
85
- 500: '#4630eb',
86
- 600: '#3929c4',
87
- 700: '#2e2496',
88
- 800: '#261f73',
89
- 900: '#221e5c',
90
- },
91
- red: {
92
- '000': '#fee',
93
- 100: '#ffdcdc',
94
- 200: '#fdaeae',
95
- 300: '#f97575',
96
- 400: '#ea4a4a',
97
- 500: '#d73a3a',
98
- 600: '#cb2424',
99
- 700: '#b31d1d',
100
- 800: '#9e1e1c',
101
- 900: '#861c18',
102
- },
103
- yellow: {
104
- '000': '#fffdef',
105
- 100: '#fffbdd',
106
- 200: '#fff5b1',
107
- 300: '#ffeb87',
108
- 400: '#ffdf5d',
109
- 500: '#ffd33d',
110
- 600: '#f2c012',
111
- 700: '#cfa108',
112
- 800: '#9c7800',
113
- 900: '#735c0f',
114
- },
115
- white: '#fff',
116
- black: '#1b1f23',
9
+ ...colors_1.blue,
10
+ ...colors_1.red,
11
+ ...colors_1.yellow,
12
+ ...colors_1.green,
13
+ ...colors_1.orange,
14
+ ...colors_1.purple,
15
+ ...colors_1.pink,
16
+ gray1: colors_1.slate.slate1,
17
+ gray2: colors_1.slate.slate2,
18
+ gray3: colors_1.slate.slate3,
19
+ gray4: colors_1.slate.slate4,
20
+ gray5: colors_1.slate.slate5,
21
+ gray6: colors_1.slate.slate6,
22
+ gray7: colors_1.slate.slate7,
23
+ gray8: colors_1.slate.slate8,
24
+ gray9: colors_1.slate.slate9,
25
+ gray10: colors_1.slate.slate10,
26
+ gray11: colors_1.slate.slate11,
27
+ gray12: colors_1.slate.slate12
117
28
  },
118
29
  dark: {
119
- blue: {
120
- '000': '#122447',
121
- 100: '#173366',
122
- 200: '#1e4894',
123
- 300: '#2362c4',
124
- 400: '#2d73e0',
125
- 500: '#4794fd',
126
- 600: '#61abff',
127
- 700: '#8fcaff',
128
- 800: '#addaff',
129
- 900: '#cae8ff',
130
- },
131
- gray: {
132
- '000': '#0B0F13',
133
- 100: '#14191F',
134
- 200: '#1C2026',
135
- 300: '#262A31',
136
- 400: '#32373E',
137
- 500: '#49505A',
138
- 600: '#737B87',
139
- 700: '#9BA4B0',
140
- 800: '#BCC3CD',
141
- 900: '#E0E4EB',
142
- 1000: '#F0F2F5',
143
- },
144
- green: {
145
- '000': '#1a2b20',
146
- 100: '#1d3b27',
147
- 200: '#255232',
148
- 300: '#256936',
149
- 400: '#2e853f',
150
- 500: '#38a04b',
151
- 600: '#4ab959',
152
- 700: '#65d372',
153
- 800: '#8ae592',
154
- 900: '#b9f0bd',
155
- },
156
- orange: {
157
- '000': '#2e1e17',
158
- 100: '#472a1d',
159
- 200: '#66361f',
160
- 300: '#8f4824',
161
- 400: '#ad5a2b',
162
- 500: '#d67233',
163
- 600: '#eb853d',
164
- 700: '#f5a35b',
165
- 800: '#fcc279',
166
- 900: '#fcd49f',
167
- },
168
- pink: {
169
- '000': '#3d182f',
170
- 100: '#571e40',
171
- 200: '#782a57',
172
- 300: '#9c356e',
173
- 400: '#bf4b8a',
174
- 500: '#de62a4',
175
- 600: '#f77ebd',
176
- 700: '#ff9bce',
177
- 800: '#ffbedd',
178
- 900: '#ffcfe6',
179
- },
180
- primary: {
181
- '000': '#1b183d',
182
- 100: '#201d52',
183
- 200: '#2a2375',
184
- 300: '#342a9c',
185
- 400: '#4436c7',
186
- 500: '#5c49eb',
187
- 600: '#7766e8',
188
- 700: '#a498ed',
189
- 800: '#c9c2f2',
190
- 900: '#e4e0f5',
191
- },
192
- purple: {
193
- '000': '#2b1d47',
194
- 100: '#3c2563',
195
- 200: '#553096',
196
- 300: '#6e40c9',
197
- 400: '#8957e5',
198
- 500: '#a371f7',
199
- 600: '#bc8cff',
200
- 700: '#d2a8ff',
201
- 800: '#e2c5ff',
202
- 900: '#e9d6ff',
203
- },
204
- red: {
205
- '000': '#3d1515',
206
- 100: '#541c1f',
207
- 200: '#732225',
208
- 300: '#962926',
209
- 400: '#bd3939',
210
- 500: '#e0514a',
211
- 600: '#f76f65',
212
- 700: '#ff8d82',
213
- 800: '#ffb1a8',
214
- 900: '#ffd2cc',
215
- },
216
- yellow: {
217
- '000': '#30250a',
218
- 100: '#473510',
219
- 200: '#664b14',
220
- 300: '#856018',
221
- 400: '#a3751a',
222
- 500: '#bf8a1f',
223
- 600: '#d4a035',
224
- 700: '#e8bb51',
225
- 800: '#f2d06d',
226
- 900: '#fae296',
227
- },
228
- white: '#fff',
229
- black: '#0B0F13',
30
+ ...colors_1.blueDark,
31
+ ...colors_1.redDark,
32
+ ...colors_1.yellowDark,
33
+ ...colors_1.greenDark,
34
+ ...colors_1.orangeDark,
35
+ ...colors_1.purpleDark,
36
+ ...colors_1.pinkDark,
37
+ gray1: colors_1.slateDark.slate1,
38
+ gray2: colors_1.slateDark.slate2,
39
+ gray3: colors_1.slateDark.slate3,
40
+ gray4: colors_1.slateDark.slate4,
41
+ gray5: colors_1.slateDark.slate5,
42
+ gray6: colors_1.slateDark.slate6,
43
+ gray7: colors_1.slateDark.slate7,
44
+ gray8: colors_1.slateDark.slate8,
45
+ gray9: colors_1.slateDark.slate9,
46
+ gray10: colors_1.slateDark.slate10,
47
+ gray11: colors_1.slateDark.slate11,
48
+ gray12: colors_1.slateDark.slate12
230
49
  },
231
50
  };
package/dist/styles/shadows.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const shadows: {
2
- input: {
2
+ xs: {
3
3
  elevation: number;
4
4
  shadowColor: string;
5
5
  shadowRadius: number;
@@ -9,7 +9,7 @@ export declare const shadows: {
9
9
  };
10
10
  shadowOpacity: number;
11
11
  };
12
- button: {
12
+ sm: {
13
13
  elevation: number;
14
14
  shadowColor: string;
15
15
  shadowRadius: number;
@@ -19,7 +19,7 @@ export declare const shadows: {
19
19
  };
20
20
  shadowOpacity: number;
21
21
  };
22
- popover: {
22
+ md: {
23
23
  elevation: number;
24
24
  shadowColor: string;
25
25
  shadowRadius: number;
@@ -29,7 +29,7 @@ export declare const shadows: {
29
29
  };
30
30
  shadowOpacity: number;
31
31
  };
32
- micro: {
32
+ lg: {
33
33
  elevation: number;
34
34
  shadowColor: string;
35
35
  shadowRadius: number;
@@ -39,37 +39,7 @@ export declare const shadows: {
39
39
  };
40
40
  shadowOpacity: number;
41
41
  };
42
- tiny: {
43
- elevation: number;
44
- shadowColor: string;
45
- shadowRadius: number;
46
- shadowOffset: {
47
- height: number;
48
- width: number;
49
- };
50
- shadowOpacity: number;
51
- };
52
- small: {
53
- elevation: number;
54
- shadowColor: string;
55
- shadowRadius: number;
56
- shadowOffset: {
57
- height: number;
58
- width: number;
59
- };
60
- shadowOpacity: number;
61
- };
62
- medium: {
63
- elevation: number;
64
- shadowColor: string;
65
- shadowRadius: number;
66
- shadowOffset: {
67
- height: number;
68
- width: number;
69
- };
70
- shadowOpacity: number;
71
- };
72
- large: {
42
+ xl: {
73
43
  elevation: number;
74
44
  shadowColor: string;
75
45
  shadowRadius: number;
package/dist/styles/shadows.js CHANGED
@@ -1,36 +1,36 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.shadows = void 0;
4
- const shadowsBase = {
5
- micro: {
4
+ exports.shadows = {
5
+ xs: {
6
6
  elevation: 1,
7
7
  shadowColor: '#000',
8
8
  shadowRadius: 1,
9
9
  shadowOffset: { height: 1, width: 0 },
10
10
  shadowOpacity: 0.075,
11
11
  },
12
- tiny: {
12
+ sm: {
13
13
  elevation: 4,
14
14
  shadowColor: '#000',
15
15
  shadowRadius: 3,
16
16
  shadowOffset: { height: 3, width: 0 },
17
17
  shadowOpacity: 0.15,
18
18
  },
19
- small: {
19
+ md: {
20
20
  elevation: 8,
21
21
  shadowColor: '#000',
22
22
  shadowRadius: 8,
23
23
  shadowOffset: { height: 6, width: 0 },
24
24
  shadowOpacity: 0.15,
25
25
  },
26
- medium: {
26
+ lg: {
27
27
  elevation: 16,
28
28
  shadowColor: '#000',
29
29
  shadowRadius: 10,
30
30
  shadowOffset: { height: 10, width: 0 },
31
31
  shadowOpacity: 0.17,
32
32
  },
33
- large: {
33
+ xl: {
34
34
  elevation: 28,
35
35
  shadowColor: '#000',
36
36
  shadowRadius: 25,
@@ -38,9 +38,3 @@ const shadowsBase = {
38
38
  shadowOpacity: 0.2,
39
39
  },
40
40
  };
41
- exports.shadows = {
42
- ...shadowsBase,
43
- input: shadowsBase.micro,
44
- button: shadowsBase.micro,
45
- popover: shadowsBase.small,
46
- };
package/dist/styles/sizing.d.ts CHANGED
@@ -1,13 +1,19 @@
1
1
  export declare const borderRadius: {
2
- huge: number;
3
- large: number;
4
- medium: number;
5
- small: number;
2
+ none: number;
3
+ xs: number;
4
+ sm: number;
5
+ md: number;
6
+ lg: number;
7
+ xl: number;
8
+ '2xl': number;
9
+ '3xl': number;
10
+ full: number;
6
11
  };
7
12
  export declare const iconSize: {
8
- micro: number;
9
- tiny: number;
10
- small: number;
11
- regular: number;
12
- large: number;
13
+ '2xs': number;
14
+ xs: number;
15
+ sm: number;
16
+ md: number;
17
+ lg: number;
18
+ xl: number;
13
19
  };
package/dist/styles/sizing.js CHANGED
@@ -2,15 +2,21 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.iconSize = exports.borderRadius = void 0;
4
4
  exports.borderRadius = {
5
- huge: 16,
6
- large: 10,
7
- medium: 6,
8
- small: 4,
5
+ none: 0,
6
+ xs: 2,
7
+ sm: 4,
8
+ md: 6,
9
+ lg: 10,
10
+ xl: 16,
11
+ '2xl': 20,
12
+ '3xl': 24,
13
+ 'full': 9999,
9
14
  };
10
15
  exports.iconSize = {
11
- micro: 12,
12
- tiny: 14,
13
- small: 16,
14
- regular: 20,
15
- large: 24,
16
+ '2xs': 12,
17
+ xs: 14,
18
+ sm: 16,
19
+ md: 20,
20
+ lg: 24,
21
+ xl: 40,
16
22
  };