@storybook/react-native-theming 6.5.5 → 6.5.6-alpha.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 (5) hide show
  1. package/dist/index.d.ts +488 -1
  2. package/dist/index.js +4197 -6
  3. package/package.json +8 -6
  4. package/dist/theme.d.ts +0 -189
  5. package/dist/theme.js +0 -321
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/react-native-theming",
3
- "version": "6.5.5",
3
+ "version": "6.5.6-alpha.0",
4
4
  "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
5
5
  "keywords": [
6
6
  "react",
@@ -21,12 +21,14 @@
21
21
  "main": "dist/index.js",
22
22
  "types": "dist/index.d.ts",
23
23
  "scripts": {
24
- "dev": "yarn tsc --watch",
25
- "prepare": "tsc"
24
+ "dev": "ts-node ./scripts/gendtsdev.ts && tsup --watch",
25
+ "prepare": "tsup && ts-node ./scripts/patchdts.ts"
26
26
  },
27
- "dependencies": {
27
+ "devDependencies": {
28
28
  "@emotion/native": "^11.11.0",
29
- "@emotion/react": "^11.11.1"
29
+ "@emotion/react": "^11.11.1",
30
+ "ts-node": "^10.9.1",
31
+ "tsup": "^7.2.0"
30
32
  },
31
33
  "peerDependencies": {
32
34
  "react": "*",
@@ -39,5 +41,5 @@
39
41
  "dist/**/*",
40
42
  "README.md"
41
43
  ],
42
- "gitHead": "ad15a9640397fbaf3536c1b8469c7b13b70676d8"
44
+ "gitHead": "f2ff9ddebf4e2a8a008cc484bf054c4a5cd641c5"
43
45
  }
package/dist/theme.d.ts DELETED
@@ -1,189 +0,0 @@
1
- import { ShadowStyleIOS, ViewStyle, TextStyle } from 'react-native';
2
- type ShadowStyle = ShadowStyleIOS | Pick<ViewStyle, 'elevation'>;
3
- type FontWeight = TextStyle['fontWeight'];
4
- /**
5
- * Primitive tokens used to build the theme.
6
- *
7
- * Ideally components should not use these values directly, and should prefer
8
- * to use more semantic values from the theme.
9
- */
10
- interface ThemeTokens {
11
- spacing1: number;
12
- spacing2: number;
13
- spacing3: number;
14
- spacing4: number;
15
- spacing5: number;
16
- spacing6: number;
17
- fontSize: {
18
- small: number;
19
- smaller: number;
20
- normal: number;
21
- };
22
- color: {
23
- navy: string;
24
- offBlack: string;
25
- black: string;
26
- white: string;
27
- grey200: string;
28
- grey700: string;
29
- grey800: string;
30
- red500: string;
31
- blue100: string;
32
- blue200: string;
33
- blue250: string;
34
- blue300: string;
35
- blue400: string;
36
- blue600: string;
37
- green500: string;
38
- };
39
- borderRadius: {
40
- small: number;
41
- medium: number;
42
- large: number;
43
- round: number;
44
- };
45
- borderWidthNormal: number;
46
- /** Elevation shadows */
47
- elevation: {
48
- floating: ShadowStyle;
49
- };
50
- }
51
- interface ThemeButton {
52
- textColor: string;
53
- backgroundColor: string;
54
- borderColor: string;
55
- borderWidth: number;
56
- borderRadius: number;
57
- }
58
- export interface Theme {
59
- tokens: ThemeTokens;
60
- backgroundColor: string;
61
- text: {
62
- primaryColor: string;
63
- secondaryColor: string;
64
- linkColor: string;
65
- };
66
- preview: {
67
- containerBackgroundColor: string;
68
- backgroundColor: string;
69
- };
70
- /** Navigation bar and related area */
71
- navigation: {
72
- backgroundColor: string;
73
- borderColor: string;
74
- borderWidth: number;
75
- visibilityBorderRadius: number;
76
- visibilityInnerBorderColor: string;
77
- visibilityOuterBorderColor: string;
78
- };
79
- /** Side panels (Story list, addons) */
80
- panel: {
81
- backgroundColor: string;
82
- borderWidth: number;
83
- borderColor: string;
84
- paddingVertical: number;
85
- paddingHorizontal: number;
86
- };
87
- /** Story list and list items */
88
- storyList: {
89
- fontSize: number;
90
- headerPaddingHorizontal: number;
91
- headerPaddingVertical: number;
92
- headerTextColor: string;
93
- headerFontWeight: FontWeight;
94
- storyPaddingHorizontal: number;
95
- storyPaddingVertical: number;
96
- storyIndent: number;
97
- storyTextColor: string;
98
- storyFontWeight: FontWeight;
99
- storySelectedBackgroundColor: string;
100
- storySelectedTextColor: string;
101
- storySelectedFontWeight: FontWeight;
102
- sectionSpacing: number;
103
- sectionActiveBackgroundColor: string;
104
- sectionBorderRadius: number;
105
- search: {
106
- fontSize: number;
107
- textColor: string;
108
- placeholderTextColor: string;
109
- borderRadius: number;
110
- borderColor: string;
111
- borderWidth: number;
112
- backgroundColor: string;
113
- paddingVertical: number;
114
- paddingHorizontal: number;
115
- };
116
- };
117
- /** Buttons */
118
- button: {
119
- fontSize: number;
120
- fontWeight: FontWeight;
121
- paddingVertical: number;
122
- paddingHorizontal: number;
123
- primary: ThemeButton;
124
- secondary: ThemeButton;
125
- };
126
- /** Tabs (navigation and addons) */
127
- tabs: {
128
- fontSize: number;
129
- fontWeight: FontWeight;
130
- paddingVertical: number;
131
- paddingHorizontal: number;
132
- borderWidth: number;
133
- borderRadius: number;
134
- activeBorderColor: string;
135
- activeBackgroundColor: string;
136
- activeTextColor: string;
137
- inactiveBorderColor: string;
138
- inactiveBackgroundColor: string;
139
- inactiveTextColor: string;
140
- };
141
- /** Inputs (text, radio, slider, etc.) */
142
- inputs: {
143
- errorTextColor: string;
144
- labelFontSize: number;
145
- labelTextColor: string;
146
- text: {
147
- fontSize: number;
148
- textColor: string;
149
- borderWidth: number;
150
- borderColor: string;
151
- backgroundColor: string;
152
- borderRadius: number;
153
- paddingVertical: number;
154
- paddingHorizontal: number;
155
- };
156
- radio: {
157
- fontSize: number;
158
- height: number;
159
- borderWidth: number;
160
- borderColor: string;
161
- backgroundColor: string;
162
- paddingVertical: number;
163
- paddingHorizontal: number;
164
- activeBackgroundColor: string;
165
- itemSpacing: number;
166
- labelSpacing: number;
167
- };
168
- swatch: {
169
- fontSize: number;
170
- height: number;
171
- borderWidth: number;
172
- borderColor: string;
173
- backgroundColor: string;
174
- outerBorderRadius: number;
175
- innerBorderRadius: number;
176
- paddingVertical: number;
177
- paddingHorizontal: number;
178
- nameTextWeight: FontWeight;
179
- };
180
- slider: {
181
- fontSize: number;
182
- labelTextColor: string;
183
- valueTextColor: string;
184
- };
185
- };
186
- }
187
- export declare const theme: Theme;
188
- export declare const darkTheme: Theme;
189
- export {};
package/dist/theme.js DELETED
@@ -1,321 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.darkTheme = exports.theme = void 0;
4
- var tokens = {
5
- spacing1: 4,
6
- spacing2: 8,
7
- spacing3: 12,
8
- spacing4: 16,
9
- spacing5: 20,
10
- spacing6: 24,
11
- fontSize: {
12
- small: 12,
13
- smaller: 14,
14
- normal: 16,
15
- },
16
- color: {
17
- navy: '#001a23',
18
- black: '#000',
19
- offBlack: '#222',
20
- white: '#ffffff',
21
- grey200: '#dee2e3',
22
- grey700: '#859499',
23
- grey800: '#575757',
24
- red500: '#ff4400',
25
- blue100: '#f6f9fc',
26
- blue200: '#e0eaf5',
27
- blue250: '#dcebf9',
28
- blue300: '#b2cbe6',
29
- blue400: '#a3c1e0',
30
- blue600: '#1ea7fd',
31
- green500: '#66bf3c',
32
- },
33
- borderRadius: {
34
- small: 4,
35
- medium: 6,
36
- large: 8,
37
- round: 100,
38
- },
39
- borderWidthNormal: 1,
40
- elevation: {
41
- floating: {
42
- shadowColor: '#000000',
43
- shadowOpacity: 0.2,
44
- shadowOffset: { width: 0, height: 0 },
45
- shadowRadius: 16,
46
- elevation: 10,
47
- },
48
- },
49
- };
50
- var text = {
51
- primaryColor: tokens.color.navy,
52
- secondaryColor: tokens.color.grey700,
53
- linkColor: '#0000ff',
54
- };
55
- var textOnDark = {
56
- primaryColor: tokens.color.white,
57
- secondaryColor: tokens.color.grey200,
58
- linkColor: tokens.color.blue600,
59
- };
60
- exports.theme = {
61
- tokens: tokens,
62
- text: text,
63
- backgroundColor: tokens.color.white,
64
- preview: {
65
- containerBackgroundColor: tokens.color.white,
66
- backgroundColor: tokens.color.white,
67
- },
68
- navigation: {
69
- backgroundColor: tokens.color.white,
70
- borderColor: tokens.color.grey200,
71
- borderWidth: tokens.borderWidthNormal,
72
- visibilityBorderRadius: tokens.borderRadius.small,
73
- visibilityInnerBorderColor: tokens.color.grey700,
74
- visibilityOuterBorderColor: tokens.color.white,
75
- },
76
- panel: {
77
- backgroundColor: tokens.color.blue100,
78
- borderWidth: tokens.borderWidthNormal,
79
- borderColor: tokens.color.blue200,
80
- paddingVertical: 0,
81
- paddingHorizontal: tokens.spacing2,
82
- },
83
- storyList: {
84
- fontSize: tokens.fontSize.normal,
85
- headerPaddingHorizontal: tokens.spacing2,
86
- headerPaddingVertical: tokens.spacing2,
87
- headerTextColor: text.primaryColor,
88
- headerFontWeight: '500',
89
- storyPaddingHorizontal: tokens.spacing2,
90
- storyPaddingVertical: tokens.spacing1 * 1.5,
91
- storyIndent: tokens.spacing6,
92
- storyTextColor: text.primaryColor,
93
- storyFontWeight: '400',
94
- storySelectedBackgroundColor: tokens.color.blue600,
95
- storySelectedTextColor: tokens.color.white,
96
- storySelectedFontWeight: '700',
97
- sectionSpacing: tokens.spacing2,
98
- sectionActiveBackgroundColor: tokens.color.blue200,
99
- sectionBorderRadius: tokens.borderRadius.medium,
100
- search: {
101
- fontSize: tokens.fontSize.normal,
102
- textColor: text.primaryColor,
103
- placeholderTextColor: text.secondaryColor,
104
- borderRadius: tokens.borderRadius.round,
105
- borderColor: tokens.color.blue400,
106
- borderWidth: tokens.borderWidthNormal,
107
- backgroundColor: tokens.color.white,
108
- paddingVertical: tokens.spacing2,
109
- paddingHorizontal: tokens.spacing3,
110
- },
111
- },
112
- button: {
113
- fontSize: tokens.fontSize.smaller,
114
- fontWeight: '600',
115
- paddingVertical: tokens.spacing2,
116
- paddingHorizontal: tokens.spacing5,
117
- primary: {
118
- textColor: text.primaryColor,
119
- backgroundColor: tokens.color.blue250,
120
- borderColor: tokens.color.blue300,
121
- borderWidth: tokens.borderWidthNormal,
122
- borderRadius: tokens.borderRadius.medium,
123
- },
124
- secondary: {
125
- textColor: text.primaryColor,
126
- backgroundColor: 'transparent',
127
- borderColor: tokens.color.blue300,
128
- borderWidth: tokens.borderWidthNormal,
129
- borderRadius: tokens.borderRadius.medium,
130
- },
131
- },
132
- tabs: {
133
- fontSize: tokens.fontSize.small,
134
- fontWeight: '500',
135
- paddingVertical: tokens.spacing2,
136
- paddingHorizontal: tokens.spacing2 * 1.25,
137
- borderWidth: tokens.borderWidthNormal,
138
- borderRadius: tokens.borderRadius.round,
139
- activeBorderColor: tokens.color.blue300,
140
- activeBackgroundColor: tokens.color.blue250,
141
- activeTextColor: text.primaryColor,
142
- inactiveBorderColor: 'transparent',
143
- inactiveBackgroundColor: 'transparent',
144
- inactiveTextColor: text.secondaryColor,
145
- },
146
- inputs: {
147
- errorTextColor: tokens.color.red500,
148
- labelFontSize: tokens.fontSize.smaller,
149
- labelTextColor: text.primaryColor,
150
- text: {
151
- fontSize: tokens.fontSize.smaller,
152
- textColor: text.primaryColor,
153
- borderWidth: tokens.borderWidthNormal,
154
- borderColor: tokens.color.blue400,
155
- backgroundColor: tokens.color.white,
156
- borderRadius: tokens.borderRadius.medium,
157
- paddingVertical: tokens.spacing1 * 1.5,
158
- paddingHorizontal: tokens.spacing1 * 1.5,
159
- },
160
- radio: {
161
- fontSize: tokens.fontSize.smaller,
162
- height: 20,
163
- borderWidth: tokens.borderWidthNormal,
164
- borderColor: tokens.color.blue400,
165
- backgroundColor: tokens.color.white,
166
- paddingVertical: 3,
167
- paddingHorizontal: 3,
168
- activeBackgroundColor: tokens.color.green500,
169
- itemSpacing: tokens.spacing1,
170
- labelSpacing: tokens.spacing2,
171
- },
172
- swatch: {
173
- fontSize: tokens.fontSize.smaller,
174
- height: 40,
175
- borderWidth: tokens.borderWidthNormal,
176
- borderColor: tokens.color.blue400,
177
- backgroundColor: tokens.color.white,
178
- outerBorderRadius: tokens.borderRadius.medium,
179
- innerBorderRadius: tokens.borderRadius.small,
180
- paddingVertical: tokens.spacing1,
181
- paddingHorizontal: tokens.spacing1,
182
- nameTextWeight: '600',
183
- },
184
- slider: {
185
- fontSize: tokens.fontSize.smaller,
186
- labelTextColor: text.secondaryColor,
187
- valueTextColor: text.primaryColor,
188
- },
189
- },
190
- };
191
- exports.darkTheme = {
192
- tokens: tokens,
193
- text: textOnDark,
194
- backgroundColor: tokens.color.offBlack,
195
- preview: {
196
- containerBackgroundColor: tokens.color.black,
197
- backgroundColor: tokens.color.offBlack,
198
- },
199
- navigation: {
200
- backgroundColor: tokens.color.offBlack,
201
- borderColor: tokens.color.grey800,
202
- borderWidth: tokens.borderWidthNormal,
203
- visibilityBorderRadius: tokens.borderRadius.small,
204
- visibilityInnerBorderColor: tokens.color.navy,
205
- visibilityOuterBorderColor: tokens.color.navy,
206
- },
207
- panel: {
208
- backgroundColor: tokens.color.offBlack,
209
- borderWidth: tokens.borderWidthNormal,
210
- borderColor: tokens.color.grey800,
211
- paddingVertical: 0,
212
- paddingHorizontal: tokens.spacing2,
213
- },
214
- storyList: {
215
- fontSize: tokens.fontSize.normal,
216
- headerPaddingHorizontal: tokens.spacing2,
217
- headerPaddingVertical: tokens.spacing2,
218
- headerTextColor: textOnDark.primaryColor,
219
- headerFontWeight: '500',
220
- storyPaddingHorizontal: tokens.spacing2,
221
- storyPaddingVertical: tokens.spacing1 * 1.5,
222
- storyIndent: tokens.spacing6,
223
- storyTextColor: textOnDark.primaryColor,
224
- storyFontWeight: '400',
225
- storySelectedBackgroundColor: tokens.color.navy,
226
- storySelectedTextColor: tokens.color.white,
227
- storySelectedFontWeight: '700',
228
- sectionSpacing: tokens.spacing2,
229
- sectionActiveBackgroundColor: tokens.color.grey800,
230
- sectionBorderRadius: tokens.borderRadius.medium,
231
- search: {
232
- fontSize: tokens.fontSize.normal,
233
- textColor: textOnDark.primaryColor,
234
- placeholderTextColor: textOnDark.secondaryColor,
235
- borderRadius: tokens.borderRadius.round,
236
- borderColor: tokens.color.grey800,
237
- borderWidth: tokens.borderWidthNormal,
238
- backgroundColor: tokens.color.grey800,
239
- paddingVertical: tokens.spacing2,
240
- paddingHorizontal: tokens.spacing3,
241
- },
242
- },
243
- button: {
244
- fontSize: tokens.fontSize.smaller,
245
- fontWeight: '600',
246
- paddingVertical: tokens.spacing2,
247
- paddingHorizontal: tokens.spacing5,
248
- primary: {
249
- textColor: textOnDark.primaryColor,
250
- backgroundColor: tokens.color.black,
251
- borderColor: tokens.color.blue300,
252
- borderWidth: tokens.borderWidthNormal,
253
- borderRadius: tokens.borderRadius.medium,
254
- },
255
- secondary: {
256
- textColor: textOnDark.primaryColor,
257
- backgroundColor: 'transparent',
258
- borderColor: tokens.color.blue300,
259
- borderWidth: tokens.borderWidthNormal,
260
- borderRadius: tokens.borderRadius.medium,
261
- },
262
- },
263
- tabs: {
264
- fontSize: tokens.fontSize.small,
265
- fontWeight: '500',
266
- paddingVertical: tokens.spacing2,
267
- paddingHorizontal: tokens.spacing2 * 1.25,
268
- borderWidth: tokens.borderWidthNormal,
269
- borderRadius: tokens.borderRadius.round,
270
- activeBorderColor: tokens.color.blue300,
271
- activeBackgroundColor: tokens.color.navy,
272
- activeTextColor: textOnDark.primaryColor,
273
- inactiveBorderColor: 'transparent',
274
- inactiveBackgroundColor: 'transparent',
275
- inactiveTextColor: textOnDark.secondaryColor,
276
- },
277
- inputs: {
278
- errorTextColor: tokens.color.red500,
279
- labelFontSize: tokens.fontSize.smaller,
280
- labelTextColor: textOnDark.primaryColor,
281
- text: {
282
- fontSize: tokens.fontSize.smaller,
283
- textColor: textOnDark.primaryColor,
284
- borderWidth: tokens.borderWidthNormal,
285
- borderColor: tokens.color.blue400,
286
- backgroundColor: tokens.color.black,
287
- borderRadius: tokens.borderRadius.medium,
288
- paddingVertical: tokens.spacing1 * 1.5,
289
- paddingHorizontal: tokens.spacing1 * 1.5,
290
- },
291
- radio: {
292
- fontSize: tokens.fontSize.smaller,
293
- height: 20,
294
- borderWidth: tokens.borderWidthNormal,
295
- borderColor: tokens.color.blue400,
296
- backgroundColor: tokens.color.black,
297
- paddingVertical: 3,
298
- paddingHorizontal: 3,
299
- activeBackgroundColor: tokens.color.green500,
300
- itemSpacing: tokens.spacing1,
301
- labelSpacing: tokens.spacing2,
302
- },
303
- swatch: {
304
- fontSize: tokens.fontSize.smaller,
305
- height: 40,
306
- borderWidth: tokens.borderWidthNormal,
307
- borderColor: tokens.color.blue400,
308
- backgroundColor: tokens.color.navy,
309
- outerBorderRadius: tokens.borderRadius.medium,
310
- innerBorderRadius: tokens.borderRadius.small,
311
- paddingVertical: tokens.spacing1,
312
- paddingHorizontal: tokens.spacing1,
313
- nameTextWeight: '600',
314
- },
315
- slider: {
316
- fontSize: tokens.fontSize.smaller,
317
- labelTextColor: textOnDark.secondaryColor,
318
- valueTextColor: textOnDark.primaryColor,
319
- },
320
- },
321
- };