@expo/styleguide-native 5.0.0 → 6.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 (3) hide show
  1. package/dist/styles/themes.d.ts +56 -72
  2. package/dist/styles/themes.js +76 -92
  3. package/package.json +1 -1
package/dist/styles/themes.d.ts CHANGED
@@ -1,27 +1,45 @@
1
1
  export declare const lightTheme: {
2
- success: {
3
- background: string;
4
- border: string;
5
- icon: string;
6
- text: string;
2
+ background: {
3
+ default: string;
4
+ screen: string;
5
+ subtle: string;
6
+ element: string;
7
+ hover: string;
8
+ selected: string;
9
+ overlay: string;
10
+ success: string;
11
+ warning: string;
12
+ danger: string;
13
+ info: string;
7
14
  };
8
- warning: {
9
- background: string;
10
- border: string;
11
- icon: string;
12
- text: string;
15
+ icon: {
16
+ default: string;
17
+ secondary: string;
18
+ tertiary: string;
19
+ quaternary: string;
20
+ success: string;
21
+ warning: string;
22
+ danger: string;
23
+ info: string;
13
24
  };
14
- danger: {
15
- background: string;
16
- border: string;
17
- icon: string;
18
- text: string;
25
+ text: {
26
+ default: string;
27
+ secondary: string;
28
+ tertiary: string;
29
+ quaternary: string;
30
+ link: string;
31
+ success: string;
32
+ warning: string;
33
+ danger: string;
34
+ info: string;
19
35
  };
20
- info: {
21
- background: string;
22
- border: string;
23
- icon: string;
24
- text: string;
36
+ border: {
37
+ default: string;
38
+ secondary: string;
39
+ success: string;
40
+ warning: string;
41
+ danger: string;
42
+ info: string;
25
43
  };
26
44
  button: {
27
45
  primary: {
@@ -97,6 +115,8 @@ export declare const lightTheme: {
97
115
  };
98
116
  };
99
117
  };
118
+ };
119
+ export declare const darkTheme: {
100
120
  background: {
101
121
  default: string;
102
122
  screen: string;
@@ -105,12 +125,20 @@ export declare const lightTheme: {
105
125
  hover: string;
106
126
  selected: string;
107
127
  overlay: string;
128
+ success: string;
129
+ warning: string;
130
+ danger: string;
131
+ info: string;
108
132
  };
109
133
  icon: {
110
134
  default: string;
111
135
  secondary: string;
112
136
  tertiary: string;
113
137
  quaternary: string;
138
+ success: string;
139
+ warning: string;
140
+ danger: string;
141
+ info: string;
114
142
  };
115
143
  text: {
116
144
  default: string;
@@ -118,36 +146,18 @@ export declare const lightTheme: {
118
146
  tertiary: string;
119
147
  quaternary: string;
120
148
  link: string;
149
+ success: string;
150
+ warning: string;
151
+ danger: string;
152
+ info: string;
121
153
  };
122
154
  border: {
123
155
  default: string;
124
156
  secondary: string;
125
- };
126
- };
127
- export declare const darkTheme: {
128
- success: {
129
- background: string;
130
- border: string;
131
- icon: string;
132
- text: string;
133
- };
134
- warning: {
135
- background: string;
136
- border: string;
137
- icon: string;
138
- text: string;
139
- };
140
- danger: {
141
- background: string;
142
- border: string;
143
- icon: string;
144
- text: string;
145
- };
146
- info: {
147
- background: string;
148
- border: string;
149
- icon: string;
150
- text: string;
157
+ success: string;
158
+ warning: string;
159
+ danger: string;
160
+ info: string;
151
161
  };
152
162
  button: {
153
163
  primary: {
@@ -223,30 +233,4 @@ export declare const darkTheme: {
223
233
  };
224
234
  };
225
235
  };
226
- background: {
227
- default: string;
228
- screen: string;
229
- subtle: string;
230
- element: string;
231
- hover: string;
232
- selected: string;
233
- overlay: string;
234
- };
235
- icon: {
236
- default: string;
237
- secondary: string;
238
- tertiary: string;
239
- quaternary: string;
240
- };
241
- text: {
242
- default: string;
243
- secondary: string;
244
- tertiary: string;
245
- quaternary: string;
246
- link: string;
247
- };
248
- border: {
249
- default: string;
250
- secondary: string;
251
- };
252
236
  };
package/dist/styles/themes.js CHANGED
@@ -3,29 +3,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.darkTheme = exports.lightTheme = void 0;
4
4
  const palette_1 = require("./palette");
5
5
  exports.lightTheme = {
6
- success: {
7
- background: palette_1.palette.light.green3,
8
- border: palette_1.palette.light.green7,
9
- icon: palette_1.palette.light.green10,
10
- text: palette_1.palette.light.green11,
6
+ background: {
7
+ default: palette_1.palette.white,
8
+ screen: palette_1.palette.light.gray1,
9
+ subtle: palette_1.palette.light.gray2,
10
+ element: palette_1.palette.light.gray3,
11
+ hover: palette_1.palette.light.gray4,
12
+ selected: palette_1.palette.light.gray5,
13
+ overlay: palette_1.palette.white,
14
+ success: palette_1.palette.light.green3,
15
+ warning: palette_1.palette.light.yellow3,
16
+ danger: palette_1.palette.light.red3,
17
+ info: palette_1.palette.light.blue3,
11
18
  },
12
- warning: {
13
- background: palette_1.palette.light.yellow3,
14
- border: palette_1.palette.light.yellow7,
15
- icon: palette_1.palette.light.yellow11,
16
- text: palette_1.palette.light.yellow11,
19
+ icon: {
20
+ default: palette_1.palette.light.gray11,
21
+ secondary: palette_1.palette.light.gray10,
22
+ tertiary: palette_1.palette.light.gray9,
23
+ quaternary: palette_1.palette.light.gray8,
24
+ success: palette_1.palette.light.green10,
25
+ warning: palette_1.palette.light.yellow11,
26
+ danger: palette_1.palette.light.red10,
27
+ info: palette_1.palette.light.blue10,
17
28
  },
18
- danger: {
19
- background: palette_1.palette.light.red3,
20
- border: palette_1.palette.light.red7,
21
- icon: palette_1.palette.light.red10,
22
- text: palette_1.palette.light.red11,
29
+ text: {
30
+ default: palette_1.palette.light.gray12,
31
+ secondary: palette_1.palette.light.gray11,
32
+ tertiary: palette_1.palette.light.gray10,
33
+ quaternary: palette_1.palette.light.gray9,
34
+ link: palette_1.palette.light.blue10,
35
+ success: palette_1.palette.light.green11,
36
+ warning: palette_1.palette.light.yellow11,
37
+ danger: palette_1.palette.light.red11,
38
+ info: palette_1.palette.light.blue11,
23
39
  },
24
- info: {
25
- background: palette_1.palette.light.blue3,
26
- border: palette_1.palette.light.blue7,
27
- icon: palette_1.palette.light.blue10,
28
- text: palette_1.palette.light.blue11,
40
+ border: {
41
+ default: palette_1.palette.light.gray7,
42
+ secondary: palette_1.palette.light.gray6,
43
+ success: palette_1.palette.light.green7,
44
+ warning: palette_1.palette.light.yellow7,
45
+ danger: palette_1.palette.light.red7,
46
+ info: palette_1.palette.light.blue7,
29
47
  },
30
48
  button: {
31
49
  primary: {
@@ -101,64 +119,56 @@ exports.lightTheme = {
101
119
  }
102
120
  },
103
121
  },
122
+ };
123
+ exports.darkTheme = {
104
124
  background: {
105
- default: palette_1.palette.white,
106
- screen: palette_1.palette.light.gray1,
107
- subtle: palette_1.palette.light.gray2,
108
- element: palette_1.palette.light.gray3,
109
- hover: palette_1.palette.light.gray4,
110
- selected: palette_1.palette.light.gray5,
111
- overlay: palette_1.palette.white,
125
+ default: palette_1.palette.dark.gray1,
126
+ screen: palette_1.palette.black,
127
+ subtle: palette_1.palette.dark.gray2,
128
+ element: palette_1.palette.dark.gray3,
129
+ hover: palette_1.palette.dark.gray4,
130
+ selected: palette_1.palette.dark.gray5,
131
+ overlay: palette_1.palette.dark.gray2,
132
+ success: palette_1.palette.dark.green3,
133
+ warning: palette_1.palette.dark.yellow3,
134
+ danger: palette_1.palette.dark.red3,
135
+ info: palette_1.palette.dark.blue3,
112
136
  },
113
137
  icon: {
114
- default: palette_1.palette.light.gray11,
115
- secondary: palette_1.palette.light.gray10,
116
- tertiary: palette_1.palette.light.gray9,
117
- quaternary: palette_1.palette.light.gray8,
138
+ default: palette_1.palette.dark.gray11,
139
+ secondary: palette_1.palette.dark.gray10,
140
+ tertiary: palette_1.palette.dark.gray9,
141
+ quaternary: palette_1.palette.dark.gray8,
142
+ success: palette_1.palette.dark.green10,
143
+ warning: palette_1.palette.dark.yellow11,
144
+ danger: palette_1.palette.dark.red10,
145
+ info: palette_1.palette.dark.blue10,
118
146
  },
119
147
  text: {
120
- default: palette_1.palette.light.gray12,
121
- secondary: palette_1.palette.light.gray11,
122
- tertiary: palette_1.palette.light.gray10,
123
- quaternary: palette_1.palette.light.gray9,
124
- link: palette_1.palette.light.blue10,
148
+ default: palette_1.palette.dark.gray12,
149
+ secondary: palette_1.palette.dark.gray11,
150
+ tertiary: palette_1.palette.dark.gray10,
151
+ quaternary: palette_1.palette.dark.gray9,
152
+ link: palette_1.palette.dark.blue10,
153
+ success: palette_1.palette.dark.green11,
154
+ warning: palette_1.palette.dark.yellow11,
155
+ danger: palette_1.palette.dark.red11,
156
+ info: palette_1.palette.dark.blue11,
125
157
  },
126
158
  border: {
127
- default: palette_1.palette.light.gray7,
128
- secondary: palette_1.palette.light.gray6,
129
- },
130
- };
131
- exports.darkTheme = {
132
- success: {
133
- background: palette_1.palette.dark.green3,
134
- border: palette_1.palette.dark.green7,
135
- icon: palette_1.palette.dark.green10,
136
- text: palette_1.palette.dark.green11,
137
- },
138
- warning: {
139
- background: palette_1.palette.dark.yellow3,
140
- border: palette_1.palette.dark.yellow7,
141
- icon: palette_1.palette.dark.yellow11,
142
- text: palette_1.palette.dark.yellow11,
143
- },
144
- danger: {
145
- background: palette_1.palette.dark.red3,
146
- border: palette_1.palette.dark.red7,
147
- icon: palette_1.palette.dark.red10,
148
- text: palette_1.palette.dark.red11,
149
- },
150
- info: {
151
- background: palette_1.palette.dark.blue3,
152
- border: palette_1.palette.dark.blue7,
153
- icon: palette_1.palette.dark.blue10,
154
- text: palette_1.palette.dark.blue11,
159
+ default: palette_1.palette.dark.gray7,
160
+ secondary: palette_1.palette.dark.gray6,
161
+ success: palette_1.palette.dark.green7,
162
+ warning: palette_1.palette.dark.yellow7,
163
+ danger: palette_1.palette.dark.red7,
164
+ info: palette_1.palette.dark.blue7,
155
165
  },
156
166
  button: {
157
167
  primary: {
158
168
  background: palette_1.palette.dark.blue9,
159
169
  border: palette_1.palette.dark.blue9,
160
170
  hover: palette_1.palette.dark.blue8,
161
- icon: palette_1.palette.dark.blue3,
171
+ icon: palette_1.palette.dark.blue12,
162
172
  text: palette_1.palette.white,
163
173
  disabled: {
164
174
  background: palette_1.palette.dark.blue7,
@@ -226,31 +236,5 @@ exports.darkTheme = {
226
236
  text: palette_1.palette.dark.gray9,
227
237
  }
228
238
  },
229
- },
230
- background: {
231
- default: palette_1.palette.dark.gray1,
232
- screen: palette_1.palette.black,
233
- subtle: palette_1.palette.dark.gray2,
234
- element: palette_1.palette.dark.gray3,
235
- hover: palette_1.palette.dark.gray4,
236
- selected: palette_1.palette.dark.gray5,
237
- overlay: palette_1.palette.dark.gray2,
238
- },
239
- icon: {
240
- default: palette_1.palette.dark.gray11,
241
- secondary: palette_1.palette.dark.gray10,
242
- tertiary: palette_1.palette.dark.gray9,
243
- quaternary: palette_1.palette.dark.gray8,
244
- },
245
- text: {
246
- default: palette_1.palette.dark.gray12,
247
- secondary: palette_1.palette.dark.gray11,
248
- tertiary: palette_1.palette.dark.gray10,
249
- quaternary: palette_1.palette.dark.gray9,
250
- link: palette_1.palette.dark.blue10,
251
- },
252
- border: {
253
- default: palette_1.palette.dark.gray7,
254
- secondary: palette_1.palette.dark.gray6,
255
- },
239
+ }
256
240
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@expo/styleguide-native",
3
- "version": "5.0.0",
3
+ "version": "6.0.0",
4
4
  "description": "Foundational styles for Expo interfaces.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",