@utilitywarehouse/hearth-react-native 0.33.1 → 0.34.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.
- package/.storybook/preview.tsx +2 -4
- package/CHANGELOG.md +54 -0
- package/build/core/themes.d.ts +60 -500
- package/build/tokens/border-radius.d.ts +0 -1
- package/build/tokens/border-radius.js +0 -1
- package/build/tokens/color.d.ts +0 -182
- package/build/tokens/color.js +0 -91
- package/build/tokens/font.d.ts +0 -8
- package/build/tokens/font.js +0 -8
- package/build/tokens/letter-spacing.d.ts +0 -9
- package/build/tokens/letter-spacing.js +0 -9
- package/build/tokens/line-height.d.ts +0 -7
- package/build/tokens/line-height.js +0 -7
- package/build/tokens/primitive.d.ts +0 -26
- package/build/tokens/primitive.js +0 -26
- package/build/tokens/space.d.ts +0 -1
- package/build/tokens/space.js +0 -1
- package/build/tokens/typography.d.ts +30 -0
- package/build/tokens/typography.js +15 -0
- package/docs/changelog.mdx +54 -0
- package/docs/components/AllComponents.web.tsx +6 -6
- package/docs/introduction.mdx +0 -1
- package/docs/styling.mdx +14 -14
- package/docs/theme-tokens.mdx +1 -4
- package/eslint.config.js +2 -1
- package/package.json +5 -5
- package/src/components/Carousel/Carousel.stories.tsx +2 -2
- package/src/components/Container/Container.stories.tsx +3 -3
- package/src/components/IndicatorIconButton/IndicatorIconButton.docs.mdx +1 -1
- package/src/components/IndicatorIconButton/IndicatorIconButton.stories.tsx +1 -1
- package/src/tokens/border-radius.ts +0 -1
- package/src/tokens/color.ts +0 -91
- package/src/tokens/font.ts +0 -8
- package/src/tokens/letter-spacing.ts +0 -9
- package/src/tokens/line-height.ts +0 -7
- package/src/tokens/primitive.ts +0 -26
- package/src/tokens/space.ts +0 -1
- package/src/tokens/typography.ts +15 -0
package/src/tokens/color.ts
CHANGED
|
@@ -3,75 +3,38 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
export const blue = {
|
|
6
|
-
'0': '#f8fbff',
|
|
7
|
-
'50': '#eef7ff',
|
|
8
|
-
'100': '#d9ecff',
|
|
9
6
|
'200': '#bcddff',
|
|
10
|
-
'300': '#93c1ff',
|
|
11
7
|
'400': '#6bb0ff',
|
|
12
|
-
'500': '#41a0ff',
|
|
13
8
|
'600': '#2786f1',
|
|
14
9
|
'700': '#1c6cd4',
|
|
15
|
-
'800': '#2354a4',
|
|
16
10
|
'900': '#0b3375',
|
|
17
|
-
'950': '#042455',
|
|
18
|
-
'1000': '#001433',
|
|
19
11
|
} as const;
|
|
20
12
|
|
|
21
13
|
export const broadbandGreen = {
|
|
22
|
-
'0': '#f8faf6',
|
|
23
|
-
'50': '#f2f6ed',
|
|
24
|
-
'100': '#e7efdc',
|
|
25
14
|
'200': '#d2e6b0',
|
|
26
15
|
'300': '#8cba3b',
|
|
27
|
-
'400': '#7aa031',
|
|
28
|
-
'500': '#6e932b',
|
|
29
|
-
'600': '#64862a',
|
|
30
|
-
'700': '#5a7926',
|
|
31
16
|
'800': '#506c21',
|
|
32
17
|
'900': '#4f6b20',
|
|
33
|
-
'950': '#35421c',
|
|
34
|
-
'1000': '#252d16',
|
|
35
18
|
} as const;
|
|
36
19
|
|
|
37
20
|
export const cashbackLilac = {
|
|
38
|
-
'0': '#f7f5f8',
|
|
39
|
-
'50': '#f5f2f6',
|
|
40
|
-
'100': '#ebdef5',
|
|
41
|
-
'200': '#e4caf5',
|
|
42
21
|
'300': '#dfbdf5',
|
|
43
|
-
'400': '#ce9cf0',
|
|
44
22
|
'500': '#be7aeb',
|
|
45
|
-
'600': '#9f3be2',
|
|
46
23
|
'700': '#8b2bc9',
|
|
47
|
-
'800': '#7821b8',
|
|
48
24
|
'900': '#7429b5',
|
|
49
|
-
'950': '#522270',
|
|
50
|
-
'1000': '#3a1f52',
|
|
51
25
|
} as const;
|
|
52
26
|
|
|
53
27
|
export const energyBlue = {
|
|
54
|
-
'0': '#f7f9fa',
|
|
55
|
-
'50': '#edf4f6',
|
|
56
|
-
'100': '#d4e5e9',
|
|
57
28
|
'200': '#bddee4',
|
|
58
29
|
'300': '#6db5c3',
|
|
59
|
-
'400': '#579daa',
|
|
60
|
-
'500': '#4c8a97',
|
|
61
|
-
'600': '#367683',
|
|
62
30
|
'700': '#326e7a',
|
|
63
|
-
'800': '#2d6571',
|
|
64
31
|
'900': '#2c6370',
|
|
65
|
-
'950': '#254348',
|
|
66
|
-
'1000': '#1a2f35',
|
|
67
32
|
} as const;
|
|
68
33
|
|
|
69
34
|
export const green = {
|
|
70
|
-
'0': '#f8fdf9',
|
|
71
35
|
'50': '#e7f9f0',
|
|
72
36
|
'100': '#c5edda',
|
|
73
37
|
'200': '#a2e2c3',
|
|
74
|
-
'300': '#74d6a0',
|
|
75
38
|
'400': '#58ca93',
|
|
76
39
|
'500': '#36bf7d',
|
|
77
40
|
'600': '#19a660',
|
|
@@ -101,91 +64,50 @@ export const grey = {
|
|
|
101
64
|
} as const;
|
|
102
65
|
|
|
103
66
|
export const insuranceOrange = {
|
|
104
|
-
'0': '#fefcf9',
|
|
105
|
-
'50': '#fdf5eb',
|
|
106
|
-
'100': '#fcecd6',
|
|
107
|
-
'200': '#ffcda0',
|
|
108
67
|
'300': '#ffb46d',
|
|
109
68
|
'400': '#ff7b00',
|
|
110
|
-
'500': '#f06b00',
|
|
111
|
-
'600': '#e26400',
|
|
112
|
-
'700': '#cb5b00',
|
|
113
69
|
'800': '#9b4c0e',
|
|
114
70
|
'900': '#7f4518',
|
|
115
|
-
'950': '#5a3213',
|
|
116
|
-
'1000': '#3f2616',
|
|
117
71
|
} as const;
|
|
118
72
|
|
|
119
73
|
export const mobileRose = {
|
|
120
|
-
'0': '#fffaf9',
|
|
121
|
-
'50': '#fdf2f6',
|
|
122
|
-
'100': '#faeaf2',
|
|
123
74
|
'200': '#fad0e9',
|
|
124
|
-
'300': '#f49fd2',
|
|
125
75
|
'400': '#ee6dbb',
|
|
126
|
-
'500': '#e652aa',
|
|
127
|
-
'600': '#de379a',
|
|
128
|
-
'700': '#d61c89',
|
|
129
76
|
'800': '#a7266d',
|
|
130
77
|
'900': '#8a3260',
|
|
131
|
-
'950': '#601f42',
|
|
132
|
-
'1000': '#421a32',
|
|
133
78
|
} as const;
|
|
134
79
|
|
|
135
80
|
export const orange = {
|
|
136
|
-
'0': '#fffdf8',
|
|
137
|
-
'50': '#fff5ed',
|
|
138
|
-
'100': '#ffe6d4',
|
|
139
81
|
'200': '#ffcca8',
|
|
140
|
-
'300': '#ffab70',
|
|
141
82
|
'400': '#ff9639',
|
|
142
83
|
'500': '#ff8010',
|
|
143
84
|
'600': '#f56e00',
|
|
144
85
|
'700': '#cf5d00',
|
|
145
86
|
'750': '#be5400',
|
|
146
|
-
'800': '#ad4b00',
|
|
147
87
|
'900': '#893900',
|
|
148
|
-
'950': '#6b2d00',
|
|
149
|
-
'1000': '#4a1f00',
|
|
150
88
|
} as const;
|
|
151
89
|
|
|
152
90
|
export const piggyPink = {
|
|
153
|
-
'0': '#faf5fa',
|
|
154
|
-
'50': '#f6f1f7',
|
|
155
|
-
'100': '#f9eafa',
|
|
156
91
|
'200': '#f9ceff',
|
|
157
92
|
'300': '#f295ff',
|
|
158
|
-
'400': '#ed66ff',
|
|
159
|
-
'500': '#d052c8',
|
|
160
|
-
'600': '#bc48b4',
|
|
161
|
-
'700': '#a53fa5',
|
|
162
93
|
'800': '#8f358f',
|
|
163
94
|
'900': '#7a1f7e',
|
|
164
|
-
'950': '#5d2167',
|
|
165
|
-
'1000': '#3f1448',
|
|
166
95
|
} as const;
|
|
167
96
|
|
|
168
97
|
export const purple = {
|
|
169
|
-
'0': '#f7f6f9',
|
|
170
|
-
'50': '#eeebf4',
|
|
171
98
|
'100': '#ddd5eb',
|
|
172
99
|
'200': '#c6b5e2',
|
|
173
100
|
'300': '#af90de',
|
|
174
101
|
'400': '#996cda',
|
|
175
|
-
'500': '#8851d6',
|
|
176
|
-
'600': '#8149ce',
|
|
177
102
|
'700': '#7a42c8',
|
|
178
103
|
'800': '#5c2ca9',
|
|
179
104
|
'900': '#442484',
|
|
180
|
-
'950': '#331c68',
|
|
181
105
|
'1000': '#26164f',
|
|
182
106
|
} as const;
|
|
183
107
|
|
|
184
108
|
export const red = {
|
|
185
|
-
'0': '#fff6f5',
|
|
186
109
|
'50': '#fff3f1',
|
|
187
110
|
'100': '#ffe3df',
|
|
188
|
-
'200': '#ffccc5',
|
|
189
111
|
'300': '#ffa89d',
|
|
190
112
|
'400': '#ff7964',
|
|
191
113
|
'500': '#ff634a',
|
|
@@ -198,36 +120,23 @@ export const red = {
|
|
|
198
120
|
} as const;
|
|
199
121
|
|
|
200
122
|
export const warmWhite = {
|
|
201
|
-
'0': '#fdfcfa',
|
|
202
123
|
'50': '#fcfbf2',
|
|
203
124
|
'100': '#f7f6eb',
|
|
204
125
|
'200': '#f1efe4',
|
|
205
126
|
'300': '#d4d2c0',
|
|
206
|
-
'400': '#bfb9a9',
|
|
207
|
-
'500': '#a99f8b',
|
|
208
|
-
'600': '#89816e',
|
|
209
|
-
'700': '#6a6354',
|
|
210
127
|
'800': '#4c473d',
|
|
211
128
|
'900': '#30302c',
|
|
212
129
|
'950': '#282825',
|
|
213
|
-
'975': '#20201d',
|
|
214
130
|
'1000': '#191917',
|
|
215
131
|
} as const;
|
|
216
132
|
|
|
217
133
|
export const yellow = {
|
|
218
|
-
'0': '#fffef9',
|
|
219
|
-
'50': '#fff8ea',
|
|
220
|
-
'100': '#ffe8b8',
|
|
221
134
|
'200': '#ffd885',
|
|
222
135
|
'300': '#ffc852',
|
|
223
136
|
'400': '#ffb921',
|
|
224
137
|
'500': '#eba400',
|
|
225
138
|
'600': '#d1950b',
|
|
226
|
-
'700': '#b78715',
|
|
227
|
-
'800': '#9c7820',
|
|
228
139
|
'900': '#82692b',
|
|
229
|
-
'950': '#756230',
|
|
230
|
-
'1000': '#4c401f',
|
|
231
140
|
} as const;
|
|
232
141
|
|
|
233
142
|
export const light = {
|
package/src/tokens/font.ts
CHANGED
|
@@ -9,8 +9,6 @@ export default {
|
|
|
9
9
|
heading: 'Comic Hams',
|
|
10
10
|
},
|
|
11
11
|
size: {
|
|
12
|
-
'50': 10,
|
|
13
|
-
'75': 12,
|
|
14
12
|
'90': 14,
|
|
15
13
|
'100': 16,
|
|
16
14
|
'150': 18,
|
|
@@ -20,16 +18,10 @@ export default {
|
|
|
20
18
|
'500': 36,
|
|
21
19
|
'550': 40,
|
|
22
20
|
'575': 44,
|
|
23
|
-
'600': 48,
|
|
24
21
|
'650': 54,
|
|
25
|
-
'700': 60,
|
|
26
|
-
'800': 72,
|
|
27
|
-
'900': 96,
|
|
28
|
-
'1000': 128,
|
|
29
22
|
},
|
|
30
23
|
weight: {
|
|
31
24
|
bold: 700,
|
|
32
|
-
heavy: 900,
|
|
33
25
|
medium: 500,
|
|
34
26
|
regular: 400,
|
|
35
27
|
semibold: 600,
|
|
@@ -3,9 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
|
-
'0': 0,
|
|
7
|
-
'50': -0.30000001192092896,
|
|
8
|
-
'75': -0.36000001430511475,
|
|
9
6
|
'90': -0.41999998688697815,
|
|
10
7
|
'100': -0.47999998927116394,
|
|
11
8
|
'150': -0.5400000214576721,
|
|
@@ -13,10 +10,4 @@ export default {
|
|
|
13
10
|
'300': -0.7200000286102295,
|
|
14
11
|
'400': -0.8999999761581421,
|
|
15
12
|
'500': -1.0800000429153442,
|
|
16
|
-
'550': -1.2000000476837158,
|
|
17
|
-
'600': -1.440000057220459,
|
|
18
|
-
'700': -1.7999999523162842,
|
|
19
|
-
'800': -2.1600000858306885,
|
|
20
|
-
'900': -2.880000114440918,
|
|
21
|
-
'1000': -3.8399999141693115,
|
|
22
13
|
} as const;
|
|
@@ -3,9 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
|
-
'50': 12,
|
|
7
|
-
'75': 14,
|
|
8
|
-
'100': 16,
|
|
9
6
|
'200': 18,
|
|
10
7
|
'300': 20,
|
|
11
8
|
'400': 22,
|
|
@@ -13,11 +10,7 @@ export default {
|
|
|
13
10
|
'600': 28,
|
|
14
11
|
'700': 32,
|
|
15
12
|
'800': 36,
|
|
16
|
-
'900': 40,
|
|
17
13
|
'950': 48,
|
|
18
14
|
'975': 52,
|
|
19
|
-
'1000': 56,
|
|
20
15
|
'1050': 62,
|
|
21
|
-
'1100': 72,
|
|
22
|
-
'1200': 90,
|
|
23
16
|
} as const;
|
package/src/tokens/primitive.ts
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
export default {
|
|
6
6
|
borderRadius: {
|
|
7
7
|
full: 9999,
|
|
8
|
-
lg: 12,
|
|
9
8
|
md: 8,
|
|
10
9
|
none: 0,
|
|
11
10
|
sm: 6,
|
|
@@ -23,8 +22,6 @@ export default {
|
|
|
23
22
|
heading: 'Comic Hams',
|
|
24
23
|
},
|
|
25
24
|
size: {
|
|
26
|
-
'50': 10,
|
|
27
|
-
'75': 12,
|
|
28
25
|
'90': 14,
|
|
29
26
|
'100': 16,
|
|
30
27
|
'150': 18,
|
|
@@ -34,25 +31,16 @@ export default {
|
|
|
34
31
|
'500': 36,
|
|
35
32
|
'550': 40,
|
|
36
33
|
'575': 44,
|
|
37
|
-
'600': 48,
|
|
38
34
|
'650': 54,
|
|
39
|
-
'700': 60,
|
|
40
|
-
'800': 72,
|
|
41
|
-
'900': 96,
|
|
42
|
-
'1000': 128,
|
|
43
35
|
},
|
|
44
36
|
weight: {
|
|
45
37
|
bold: 700,
|
|
46
|
-
heavy: 900,
|
|
47
38
|
medium: 500,
|
|
48
39
|
regular: 400,
|
|
49
40
|
semibold: 600,
|
|
50
41
|
},
|
|
51
42
|
},
|
|
52
43
|
letterSpacing: {
|
|
53
|
-
'0': 0,
|
|
54
|
-
'50': -0.30000001192092896,
|
|
55
|
-
'75': -0.36000001430511475,
|
|
56
44
|
'90': -0.41999998688697815,
|
|
57
45
|
'100': -0.47999998927116394,
|
|
58
46
|
'150': -0.5400000214576721,
|
|
@@ -60,17 +48,8 @@ export default {
|
|
|
60
48
|
'300': -0.7200000286102295,
|
|
61
49
|
'400': -0.8999999761581421,
|
|
62
50
|
'500': -1.0800000429153442,
|
|
63
|
-
'550': -1.2000000476837158,
|
|
64
|
-
'600': -1.440000057220459,
|
|
65
|
-
'700': -1.7999999523162842,
|
|
66
|
-
'800': -2.1600000858306885,
|
|
67
|
-
'900': -2.880000114440918,
|
|
68
|
-
'1000': -3.8399999141693115,
|
|
69
51
|
},
|
|
70
52
|
lineHeight: {
|
|
71
|
-
'50': 12,
|
|
72
|
-
'75': 14,
|
|
73
|
-
'100': 16,
|
|
74
53
|
'200': 18,
|
|
75
54
|
'300': 20,
|
|
76
55
|
'400': 22,
|
|
@@ -78,13 +57,9 @@ export default {
|
|
|
78
57
|
'600': 28,
|
|
79
58
|
'700': 32,
|
|
80
59
|
'800': 36,
|
|
81
|
-
'900': 40,
|
|
82
60
|
'950': 48,
|
|
83
61
|
'975': 52,
|
|
84
|
-
'1000': 56,
|
|
85
62
|
'1050': 62,
|
|
86
|
-
'1100': 72,
|
|
87
|
-
'1200': 90,
|
|
88
63
|
},
|
|
89
64
|
motion: {
|
|
90
65
|
duration: {
|
|
@@ -123,6 +98,5 @@ export default {
|
|
|
123
98
|
'700': 56,
|
|
124
99
|
'800': 64,
|
|
125
100
|
'900': 72,
|
|
126
|
-
'1000': 80,
|
|
127
101
|
},
|
|
128
102
|
} as const;
|
package/src/tokens/space.ts
CHANGED
package/src/tokens/typography.ts
CHANGED
|
@@ -23,6 +23,11 @@ export const mobile = {
|
|
|
23
23
|
lineHeight: 20,
|
|
24
24
|
paragraphSpacing: 14,
|
|
25
25
|
},
|
|
26
|
+
xl: {
|
|
27
|
+
fontSize: 20,
|
|
28
|
+
lineHeight: 28,
|
|
29
|
+
paragraphSpacing: 20,
|
|
30
|
+
},
|
|
26
31
|
},
|
|
27
32
|
detailText: {
|
|
28
33
|
'2xl': {
|
|
@@ -115,6 +120,11 @@ export const tablet = {
|
|
|
115
120
|
lineHeight: 20,
|
|
116
121
|
paragraphSpacing: 14,
|
|
117
122
|
},
|
|
123
|
+
xl: {
|
|
124
|
+
fontSize: 20,
|
|
125
|
+
lineHeight: 28,
|
|
126
|
+
paragraphSpacing: 20,
|
|
127
|
+
},
|
|
118
128
|
},
|
|
119
129
|
detailText: {
|
|
120
130
|
'2xl': {
|
|
@@ -207,6 +217,11 @@ export const desktop = {
|
|
|
207
217
|
lineHeight: 20,
|
|
208
218
|
paragraphSpacing: 14,
|
|
209
219
|
},
|
|
220
|
+
xl: {
|
|
221
|
+
fontSize: 20,
|
|
222
|
+
lineHeight: 28,
|
|
223
|
+
paragraphSpacing: 20,
|
|
224
|
+
},
|
|
210
225
|
},
|
|
211
226
|
detailText: {
|
|
212
227
|
'2xl': {
|