@teamturing/react-kit 2.0.0 → 2.1.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/dist/core/GradientText/index.d.ts +1 -1
- package/dist/core/ThemeProvider/index.d.ts +9 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +140 -50
- package/dist/theme/index.d.ts +226 -0
- package/esm/core/Button/index.js +21 -20
- package/esm/core/Chip/index.js +3 -2
- package/esm/core/Grid/index.js +2 -0
- package/esm/core/IconButton/index.js +21 -19
- package/esm/core/IconToggleButton/index.js +4 -2
- package/esm/core/Spinner/index.js +2 -0
- package/esm/core/Stack/index.js +2 -0
- package/esm/core/Text/index.js +1 -0
- package/esm/core/ThemeProvider/index.js +16 -0
- package/esm/enigma/EnigmaUI/index.js +2 -0
- package/esm/index.js +2 -0
- package/esm/packages/token-studio/esm/foundation/gradient/colorStopList/index.js +8 -0
- package/esm/packages/token-studio/esm/foundation/gradient/direction/index.js +8 -0
- package/esm/packages/token-studio/esm/foundation/shadow/index.js +5 -0
- package/esm/packages/token-studio/esm/token/color/index.js +8 -7
- package/esm/packages/token-studio/esm/token/elevation/index.js +16 -0
- package/esm/packages/token-studio/esm/token/gradient/index.js +33 -0
- package/esm/theme/index.js +29 -0
- package/package.json +3 -3
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
declare const theme: {
|
|
2
|
+
breakpoints: string[];
|
|
3
|
+
space: {
|
|
4
|
+
readonly '-80': number;
|
|
5
|
+
readonly '-50': number;
|
|
6
|
+
readonly '-48': number;
|
|
7
|
+
readonly '-40': number;
|
|
8
|
+
readonly '-32': number;
|
|
9
|
+
readonly '-30': number;
|
|
10
|
+
readonly '-28': number;
|
|
11
|
+
readonly '-24': number;
|
|
12
|
+
readonly '-20': number;
|
|
13
|
+
readonly '-18': number;
|
|
14
|
+
readonly '-16': number;
|
|
15
|
+
readonly '-14': number;
|
|
16
|
+
readonly '-12': number;
|
|
17
|
+
readonly '-10': number;
|
|
18
|
+
readonly '-8': number;
|
|
19
|
+
readonly '-7': number;
|
|
20
|
+
readonly '-6': number;
|
|
21
|
+
readonly '-5': number;
|
|
22
|
+
readonly '-4': number;
|
|
23
|
+
readonly '-3': number;
|
|
24
|
+
readonly '-2': number;
|
|
25
|
+
readonly '-1': number;
|
|
26
|
+
readonly '-0.5': number;
|
|
27
|
+
readonly '-0.25': number;
|
|
28
|
+
readonly 0: number;
|
|
29
|
+
readonly 0.25: number;
|
|
30
|
+
readonly 0.5: number;
|
|
31
|
+
readonly 1: number;
|
|
32
|
+
readonly 2: number;
|
|
33
|
+
readonly 3: number;
|
|
34
|
+
readonly 4: number;
|
|
35
|
+
readonly 5: number;
|
|
36
|
+
readonly 6: number;
|
|
37
|
+
readonly 7: number;
|
|
38
|
+
readonly 8: number;
|
|
39
|
+
readonly 10: number;
|
|
40
|
+
readonly 12: number;
|
|
41
|
+
readonly 14: number;
|
|
42
|
+
readonly 16: number;
|
|
43
|
+
readonly 18: number;
|
|
44
|
+
readonly 20: number;
|
|
45
|
+
readonly 24: number;
|
|
46
|
+
readonly 28: number;
|
|
47
|
+
readonly 30: number;
|
|
48
|
+
readonly 32: number;
|
|
49
|
+
readonly 40: number;
|
|
50
|
+
readonly 48: number;
|
|
51
|
+
readonly 50: number;
|
|
52
|
+
readonly 80: number;
|
|
53
|
+
};
|
|
54
|
+
fontWeights: {
|
|
55
|
+
readonly regular: number;
|
|
56
|
+
readonly medium: number;
|
|
57
|
+
readonly bold: number;
|
|
58
|
+
};
|
|
59
|
+
fontSizes: {
|
|
60
|
+
xxs: number;
|
|
61
|
+
xs: number;
|
|
62
|
+
s: number;
|
|
63
|
+
m: number;
|
|
64
|
+
l: number;
|
|
65
|
+
xl: number;
|
|
66
|
+
xxl: number;
|
|
67
|
+
display4: number;
|
|
68
|
+
display3: number;
|
|
69
|
+
display2: number;
|
|
70
|
+
display1: number;
|
|
71
|
+
};
|
|
72
|
+
lineHeights: {
|
|
73
|
+
readonly 1: number;
|
|
74
|
+
readonly 2: number;
|
|
75
|
+
};
|
|
76
|
+
radii: {
|
|
77
|
+
readonly none: number;
|
|
78
|
+
readonly xxs: number;
|
|
79
|
+
readonly xs: number;
|
|
80
|
+
readonly s: number;
|
|
81
|
+
readonly m: number;
|
|
82
|
+
readonly l: number;
|
|
83
|
+
readonly xl: number;
|
|
84
|
+
readonly xxl: number;
|
|
85
|
+
readonly full: number;
|
|
86
|
+
};
|
|
87
|
+
colors: {
|
|
88
|
+
surfaceElevation: {
|
|
89
|
+
readonly surface: "#FFFFFF";
|
|
90
|
+
readonly 'surface/overlay': "#FFFFFF";
|
|
91
|
+
};
|
|
92
|
+
'scale/violet/0': "#F3EFFD";
|
|
93
|
+
'scale/violet/1': "#E8E1FB";
|
|
94
|
+
'scale/violet/2': "#D9CDF9";
|
|
95
|
+
'scale/violet/3': "#C6B5F6";
|
|
96
|
+
'scale/violet/4': "#9C7EEF";
|
|
97
|
+
'scale/violet/5': "#835EEB";
|
|
98
|
+
'scale/violet/6': "#7756D6";
|
|
99
|
+
'scale/violet/7': "#5D43A7";
|
|
100
|
+
'scale/violet/8': "#483481";
|
|
101
|
+
'scale/violet/9': "#372763";
|
|
102
|
+
dim: "#00000099";
|
|
103
|
+
link: "#4880ee";
|
|
104
|
+
'link/hovered': "#335ba9";
|
|
105
|
+
'link/pressed': "#335ba9";
|
|
106
|
+
'link/neutral': "#7A828D";
|
|
107
|
+
'link/neutral/hovered': "#575C64";
|
|
108
|
+
'link/neutral/pressed': "#575C64";
|
|
109
|
+
'link/neutral/bold': "#575C64";
|
|
110
|
+
'link/neutral/bold/hovered': "#33373B";
|
|
111
|
+
'link/neutral/bold/pressed': "#33373B";
|
|
112
|
+
'link/disabled': "#575C64";
|
|
113
|
+
'icon/neutral': "#D1D5DB";
|
|
114
|
+
'icon/neutral/bold': "#8D94A0";
|
|
115
|
+
'icon/neutral/bolder': "#575C64";
|
|
116
|
+
'icon/accent/gray': "#33373B";
|
|
117
|
+
'icon/accent/blue': "#4880ee";
|
|
118
|
+
'icon/accent/blue/bold': "#335ba9";
|
|
119
|
+
'icon/accent/green': "#1FCCA1";
|
|
120
|
+
'icon/accent/yellow': "#FFC107";
|
|
121
|
+
'icon/accent/red': "#F22735";
|
|
122
|
+
'icon/inverse': "#FFFFFF";
|
|
123
|
+
'icon/disabled': "#D1D5DB";
|
|
124
|
+
'icon/disabled/subtler': "#E5E7EB";
|
|
125
|
+
'icon/selected/violet': "#835EEB";
|
|
126
|
+
'icon/selected': "#33373B";
|
|
127
|
+
'icon/primary/subtle': "#C6B5F6";
|
|
128
|
+
'icon/primary': "#835EEB";
|
|
129
|
+
'icon/primary/bold': "#5D43A7";
|
|
130
|
+
'icon/success': "#1FCCA1";
|
|
131
|
+
'icon/warning': "#FFC107";
|
|
132
|
+
'icon/danger': "#F22735";
|
|
133
|
+
'border/neutral/subtle': "#F3F4F6";
|
|
134
|
+
'border/neutral': "#E5E7EB";
|
|
135
|
+
'border/neutral/bolder': "#D1D5DB";
|
|
136
|
+
'border/input': "#E5E7EB";
|
|
137
|
+
'border/inverse': "#FFFFFF1A";
|
|
138
|
+
'border/selected': "#33373B";
|
|
139
|
+
'border/disabled': "#F3F4F6";
|
|
140
|
+
'border/primary': "#835EEB";
|
|
141
|
+
'border/hovered': "#84aaf4";
|
|
142
|
+
'border/focused': "#4880ee";
|
|
143
|
+
'border/danger': "#F22735";
|
|
144
|
+
'border/success': "#1FCCA1";
|
|
145
|
+
'bg/secondary': "#F3EFFD";
|
|
146
|
+
'bg/secondary/hovered': "#D9CDF9";
|
|
147
|
+
'bg/secondary/pressed': "#D9CDF9";
|
|
148
|
+
'bg/primary': "#835EEB";
|
|
149
|
+
'bg/primary/hovered': "#5D43A7";
|
|
150
|
+
'bg/primary/pressed': "#5D43A7";
|
|
151
|
+
'bg/neutral/subtler': "#FFFFFF00";
|
|
152
|
+
'bg/neutral/subtler/hovered': "#F3F4F6";
|
|
153
|
+
'bg/neutral/subtler/pressed': "#F3F4F6";
|
|
154
|
+
'bg/neutral/subtle': "#F9FAFB";
|
|
155
|
+
'bg/neutral/subtle/hovered': "#E5E7EB";
|
|
156
|
+
'bg/neutral/subtle/pressed': "#E5E7EB";
|
|
157
|
+
'bg/neutral': "#F3F4F6";
|
|
158
|
+
'bg/neutral/hovered': "#D1D5DB";
|
|
159
|
+
'bg/neutral/pressed': "#D1D5DB";
|
|
160
|
+
'bg/neutral/bold': "#575C64";
|
|
161
|
+
'bg/neutral/bold/hovered': "#33373B";
|
|
162
|
+
'bg/neutral/bold/pressed': "#33373B";
|
|
163
|
+
'bg/neutral/bolder': "#33373B";
|
|
164
|
+
'bg/neutral/bolder/hovered': "#000000";
|
|
165
|
+
'bg/neutral/bolder/pressed': "#000000";
|
|
166
|
+
'bg/disabled': "#F3F4F6";
|
|
167
|
+
'bg/disabled/subtlest': "#FFFFFF00";
|
|
168
|
+
'bg/input': "#FFFFFF";
|
|
169
|
+
'bg/accent/blue/subtlest': "#edf2fd";
|
|
170
|
+
'bg/accent/green/subtlest': "#E9FAF6";
|
|
171
|
+
'bg/accent/yellow/subtlest': "#FFF9E6";
|
|
172
|
+
'bg/accent/red/subtlest': "#FEE9EB";
|
|
173
|
+
'bg/accent/red/subtle': "#F5525D";
|
|
174
|
+
'bg/accent/red': "#F22735";
|
|
175
|
+
'bg/accent/gray/subtlest': "#E5E7EB";
|
|
176
|
+
'bg/selected/violet': "#835EEB";
|
|
177
|
+
'bg/selected': "#33373B";
|
|
178
|
+
'bg/selected/subtle': "#F3F4F6";
|
|
179
|
+
'bg/inverse': "#000000";
|
|
180
|
+
'bg/inverse/subtlest': "#FFFFFF1A";
|
|
181
|
+
'bg/success': "#E9FAF6";
|
|
182
|
+
'bg/success/bold': "#1FCCA1";
|
|
183
|
+
'bg/warning': "#FFF9E6";
|
|
184
|
+
'bg/warning/bold': "#FFC107";
|
|
185
|
+
'bg/danger': "#FEE9EB";
|
|
186
|
+
'bg/danger/bold': "#F5525D";
|
|
187
|
+
'bg/danger/bold/hovered': "#DC2330";
|
|
188
|
+
'bg/danger/bold/pressed': "#DC2330";
|
|
189
|
+
'text/primary': "#835EEB";
|
|
190
|
+
'text/accent/blue': "#4880ee";
|
|
191
|
+
'text/accent/green': "#1FCCA1";
|
|
192
|
+
'text/accent/yellow': "#FFC107";
|
|
193
|
+
'text/accent/red': "#F22735";
|
|
194
|
+
'text/neutral/subtlest': "#8D94A0";
|
|
195
|
+
'text/neutral/subtler': "#7A828D";
|
|
196
|
+
'text/neutral/subtle': "#575C64";
|
|
197
|
+
'text/neutral': "#33373B";
|
|
198
|
+
'text/inverse': "#FFFFFF";
|
|
199
|
+
'text/inverse/subtle': "#E5E7EB";
|
|
200
|
+
'text/inverse/subtler': "#D1D5DB";
|
|
201
|
+
'text/disabled': "#8D94A0";
|
|
202
|
+
'text/success': "#1FCCA1";
|
|
203
|
+
'text/warning': "#FFC107";
|
|
204
|
+
'text/danger': "#F22735";
|
|
205
|
+
'text/selected': "#33373B";
|
|
206
|
+
};
|
|
207
|
+
gradients: {
|
|
208
|
+
readonly 'overlay/subtlest/toright': string;
|
|
209
|
+
readonly 'overlay/subtlest/toleft': string;
|
|
210
|
+
readonly 'overlay/subtlest/totop': string;
|
|
211
|
+
readonly 'overlay/floating/toright': string;
|
|
212
|
+
readonly 'overlay/floating/toleft': string;
|
|
213
|
+
readonly 'overlay/floating/totop': string;
|
|
214
|
+
readonly 'overlay/bold/toright': string;
|
|
215
|
+
readonly 'overlay/bold/toleft': string;
|
|
216
|
+
readonly 'overlay/bold/totop': string;
|
|
217
|
+
readonly 'border/accent/violet': string;
|
|
218
|
+
readonly 'bg/accent/violet': string;
|
|
219
|
+
readonly 'bg/accent/neutral': string;
|
|
220
|
+
readonly 'text/accent': string;
|
|
221
|
+
};
|
|
222
|
+
shadows: {
|
|
223
|
+
'shadow/overlay': string;
|
|
224
|
+
};
|
|
225
|
+
};
|
|
226
|
+
export default theme;
|
package/esm/core/Button/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import color from '../../packages/token-studio/esm/token/color/index.js';
|
|
2
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
2
3
|
import radii from '../../packages/token-studio/esm/token/radii/index.js';
|
|
3
4
|
import typography from '../../packages/token-studio/esm/token/typography/index.js';
|
|
4
5
|
import { forwardRef } from 'react';
|
|
@@ -134,13 +135,13 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
134
135
|
'& svg': {
|
|
135
136
|
color: color['icon/inverse']
|
|
136
137
|
},
|
|
137
|
-
'
|
|
138
|
+
'&:hover:not(:disabled)': {
|
|
138
139
|
backgroundColor: color['bg/primary/hovered']
|
|
139
140
|
},
|
|
140
|
-
'
|
|
141
|
+
'&:active:not(:disabled)': {
|
|
141
142
|
backgroundColor: color['bg/primary/pressed']
|
|
142
143
|
},
|
|
143
|
-
'
|
|
144
|
+
'&:focus-visible': {
|
|
144
145
|
outlineColor: color['border/focused'],
|
|
145
146
|
outlineStyle: 'solid',
|
|
146
147
|
outlineWidth: 2,
|
|
@@ -160,13 +161,13 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
160
161
|
'& svg': {
|
|
161
162
|
color: color['icon/primary']
|
|
162
163
|
},
|
|
163
|
-
'
|
|
164
|
+
'&:hover:not(:disabled)': {
|
|
164
165
|
backgroundColor: color['bg/secondary/hovered']
|
|
165
166
|
},
|
|
166
|
-
'
|
|
167
|
+
'&:active:not(:disabled)': {
|
|
167
168
|
backgroundColor: color['bg/secondary/pressed']
|
|
168
169
|
},
|
|
169
|
-
'
|
|
170
|
+
'&:focus-visible': {
|
|
170
171
|
outlineColor: color['border/focused'],
|
|
171
172
|
outlineStyle: 'solid',
|
|
172
173
|
outlineWidth: 2,
|
|
@@ -186,13 +187,13 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
186
187
|
'& svg': {
|
|
187
188
|
color: color['icon/accent/gray']
|
|
188
189
|
},
|
|
189
|
-
'
|
|
190
|
+
'&:hover:not(:disabled)': {
|
|
190
191
|
backgroundColor: color['bg/neutral/hovered']
|
|
191
192
|
},
|
|
192
|
-
'
|
|
193
|
+
'&:active:not(:disabled)': {
|
|
193
194
|
backgroundColor: color['bg/neutral/pressed']
|
|
194
195
|
},
|
|
195
|
-
'
|
|
196
|
+
'&:focus-visible': {
|
|
196
197
|
outlineColor: color['border/focused'],
|
|
197
198
|
outlineStyle: 'solid',
|
|
198
199
|
outlineWidth: 2,
|
|
@@ -212,7 +213,7 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
212
213
|
'& svg': {
|
|
213
214
|
color: color['icon/neutral/bolder']
|
|
214
215
|
},
|
|
215
|
-
'
|
|
216
|
+
'&:after': {
|
|
216
217
|
content: '""',
|
|
217
218
|
position: 'absolute',
|
|
218
219
|
top: 0,
|
|
@@ -225,13 +226,13 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
225
226
|
borderRadius: radii.full,
|
|
226
227
|
boxSizing: 'border-box'
|
|
227
228
|
},
|
|
228
|
-
'
|
|
229
|
+
'&:hover:not(:disabled)': {
|
|
229
230
|
backgroundColor: color['bg/neutral/subtler/hovered']
|
|
230
231
|
},
|
|
231
|
-
'
|
|
232
|
+
'&:active:not(:disabled)': {
|
|
232
233
|
backgroundColor: color['bg/neutral/subtler/pressed']
|
|
233
234
|
},
|
|
234
|
-
'
|
|
235
|
+
'&:focus-visible': {
|
|
235
236
|
outlineColor: color['border/focused'],
|
|
236
237
|
outlineStyle: 'solid',
|
|
237
238
|
outlineWidth: 2,
|
|
@@ -243,7 +244,7 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
243
244
|
'& svg': {
|
|
244
245
|
color: color['icon/disabled']
|
|
245
246
|
},
|
|
246
|
-
'
|
|
247
|
+
'&:after': {
|
|
247
248
|
display: 'none'
|
|
248
249
|
}
|
|
249
250
|
} : {})
|
|
@@ -254,19 +255,19 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
254
255
|
'& svg': {
|
|
255
256
|
color: color['icon/neutral/bolder']
|
|
256
257
|
},
|
|
257
|
-
'
|
|
258
|
+
'&:hover:not(:disabled)': {
|
|
258
259
|
'color': color['text/neutral'],
|
|
259
260
|
'& svg': {
|
|
260
261
|
color: color['icon/accent/gray']
|
|
261
262
|
}
|
|
262
263
|
},
|
|
263
|
-
'
|
|
264
|
+
'&:active:not(:disabled)': {
|
|
264
265
|
'color': color['text/neutral'],
|
|
265
266
|
'& svg': {
|
|
266
267
|
color: color['icon/accent/gray']
|
|
267
268
|
}
|
|
268
269
|
},
|
|
269
|
-
'
|
|
270
|
+
'&:focus-visible': {
|
|
270
271
|
outlineColor: color['border/focused'],
|
|
271
272
|
outlineStyle: 'solid',
|
|
272
273
|
outlineWidth: 2,
|
|
@@ -286,13 +287,13 @@ const BaseButton = styled(UnstyledButton)(({
|
|
|
286
287
|
'& svg': {
|
|
287
288
|
color: color['icon/inverse']
|
|
288
289
|
},
|
|
289
|
-
'
|
|
290
|
+
'&:hover:not(:disabled)': {
|
|
290
291
|
backgroundColor: color['bg/danger/bold/hovered']
|
|
291
292
|
},
|
|
292
|
-
'
|
|
293
|
+
'&:active:not(:disabled)': {
|
|
293
294
|
backgroundColor: color['bg/danger/bold/pressed']
|
|
294
295
|
},
|
|
295
|
-
'
|
|
296
|
+
'&:focus-visible': {
|
|
296
297
|
outlineColor: color['border/focused'],
|
|
297
298
|
outlineStyle: 'solid',
|
|
298
299
|
outlineWidth: 2,
|
package/esm/core/Chip/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import color from '../../packages/token-studio/esm/token/color/index.js';
|
|
2
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
2
3
|
import radii from '../../packages/token-studio/esm/token/radii/index.js';
|
|
3
4
|
import typography from '../../packages/token-studio/esm/token/typography/index.js';
|
|
4
5
|
import styled from 'styled-components';
|
|
@@ -99,7 +100,7 @@ const BaseChip = styled.span({
|
|
|
99
100
|
'& svg': {
|
|
100
101
|
color: color['icon/primary']
|
|
101
102
|
},
|
|
102
|
-
'
|
|
103
|
+
'&:after': {
|
|
103
104
|
content: '""',
|
|
104
105
|
position: 'absolute',
|
|
105
106
|
top: 0,
|
|
@@ -119,7 +120,7 @@ const BaseChip = styled.span({
|
|
|
119
120
|
'& svg': {
|
|
120
121
|
color: color['icon/neutral/bolder']
|
|
121
122
|
},
|
|
122
|
-
'
|
|
123
|
+
'&:after': {
|
|
123
124
|
content: '""',
|
|
124
125
|
position: 'absolute',
|
|
125
126
|
top: 0,
|
package/esm/core/Grid/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
1
2
|
import space from '../../packages/token-studio/esm/token/space/index.js';
|
|
3
|
+
import '../../packages/token-studio/esm/token/typography/index.js';
|
|
2
4
|
import { forwardRef } from 'react';
|
|
3
5
|
import styled from 'styled-components';
|
|
4
6
|
import '../../node_modules/styled-system/dist/index.esm.js';
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import color from '../../packages/token-studio/esm/token/color/index.js';
|
|
2
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
2
3
|
import radii from '../../packages/token-studio/esm/token/radii/index.js';
|
|
4
|
+
import '../../packages/token-studio/esm/token/typography/index.js';
|
|
3
5
|
import { forwardRef } from 'react';
|
|
4
6
|
import styled from 'styled-components';
|
|
5
7
|
import '../../node_modules/styled-system/dist/index.esm.js';
|
|
@@ -44,7 +46,7 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
44
46
|
pointerEvents: 'none'
|
|
45
47
|
},
|
|
46
48
|
'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
|
|
47
|
-
'
|
|
49
|
+
'&:focus-visible': {
|
|
48
50
|
outlineColor: color['border/focused'],
|
|
49
51
|
outlineStyle: 'solid',
|
|
50
52
|
outlineWidth: 2,
|
|
@@ -83,10 +85,10 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
83
85
|
'primary': {
|
|
84
86
|
'backgroundColor': color['bg/primary'],
|
|
85
87
|
'color': color['icon/inverse'],
|
|
86
|
-
'
|
|
88
|
+
'&:hover:not(:disabled)': {
|
|
87
89
|
backgroundColor: color['bg/primary/hovered']
|
|
88
90
|
},
|
|
89
|
-
'
|
|
91
|
+
'&:active:not(:disabled)': {
|
|
90
92
|
backgroundColor: color['bg/primary/pressed']
|
|
91
93
|
},
|
|
92
94
|
...($disabled ? {
|
|
@@ -97,10 +99,10 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
97
99
|
'secondary': {
|
|
98
100
|
'backgroundColor': color['bg/secondary'],
|
|
99
101
|
'color': color['icon/primary'],
|
|
100
|
-
'
|
|
102
|
+
'&:hover:not(:disabled)': {
|
|
101
103
|
backgroundColor: color['bg/secondary/hovered']
|
|
102
104
|
},
|
|
103
|
-
'
|
|
105
|
+
'&:active:not(:disabled)': {
|
|
104
106
|
backgroundColor: color['bg/secondary/pressed']
|
|
105
107
|
},
|
|
106
108
|
...($disabled ? {
|
|
@@ -111,10 +113,10 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
111
113
|
'tertiary': {
|
|
112
114
|
'backgroundColor': color['bg/neutral'],
|
|
113
115
|
'color': color['icon/accent/gray'],
|
|
114
|
-
'
|
|
116
|
+
'&:hover:not(:disabled)': {
|
|
115
117
|
backgroundColor: color['bg/neutral/hovered']
|
|
116
118
|
},
|
|
117
|
-
'
|
|
119
|
+
'&:active:not(:disabled)': {
|
|
118
120
|
backgroundColor: color['bg/neutral/pressed']
|
|
119
121
|
},
|
|
120
122
|
...($disabled ? {
|
|
@@ -125,7 +127,7 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
125
127
|
'outlined': {
|
|
126
128
|
'backgroundColor': color['bg/neutral/subtler'],
|
|
127
129
|
'color': color['icon/neutral/bolder'],
|
|
128
|
-
'
|
|
130
|
+
'&:after': {
|
|
129
131
|
content: '""',
|
|
130
132
|
position: 'absolute',
|
|
131
133
|
top: 0,
|
|
@@ -138,16 +140,16 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
138
140
|
borderRadius: radii.full,
|
|
139
141
|
boxSizing: 'border-box'
|
|
140
142
|
},
|
|
141
|
-
'
|
|
143
|
+
'&:hover:not(:disabled)': {
|
|
142
144
|
backgroundColor: color['bg/neutral/subtler/hovered']
|
|
143
145
|
},
|
|
144
|
-
'
|
|
146
|
+
'&:active:not(:disabled)': {
|
|
145
147
|
backgroundColor: color['bg/neutral/subtler/pressed']
|
|
146
148
|
},
|
|
147
149
|
...($disabled ? {
|
|
148
150
|
'backgroundColor': color['bg/disabled'],
|
|
149
151
|
'color': color['icon/disabled'],
|
|
150
|
-
'
|
|
152
|
+
'&:after': {
|
|
151
153
|
display: 'none'
|
|
152
154
|
}
|
|
153
155
|
} : {})
|
|
@@ -155,10 +157,10 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
155
157
|
'plain-bold': {
|
|
156
158
|
'backgroundColor': color['bg/neutral/subtler'],
|
|
157
159
|
'color': color['icon/neutral/bolder'],
|
|
158
|
-
'
|
|
160
|
+
'&:hover:not(:disabled)': {
|
|
159
161
|
color: color['icon/accent/gray']
|
|
160
162
|
},
|
|
161
|
-
'
|
|
163
|
+
'&:active:not(:disabled)': {
|
|
162
164
|
color: color['icon/accent/gray']
|
|
163
165
|
},
|
|
164
166
|
...($disabled ? {
|
|
@@ -169,10 +171,10 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
169
171
|
'plain': {
|
|
170
172
|
'backgroundColor': color['bg/neutral/subtler'],
|
|
171
173
|
'color': color['icon/neutral/bold'],
|
|
172
|
-
'
|
|
174
|
+
'&:hover:not(:disabled)': {
|
|
173
175
|
color: color['icon/neutral/bolder']
|
|
174
176
|
},
|
|
175
|
-
'
|
|
177
|
+
'&:active:not(:disabled)': {
|
|
176
178
|
color: color['icon/neutral/bolder']
|
|
177
179
|
},
|
|
178
180
|
...($disabled ? {
|
|
@@ -183,10 +185,10 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
183
185
|
'plain-subtle': {
|
|
184
186
|
'backgroundColor': color['bg/neutral/subtler'],
|
|
185
187
|
'color': color['icon/neutral'],
|
|
186
|
-
'
|
|
188
|
+
'&:hover:not(:disabled)': {
|
|
187
189
|
color: color['icon/neutral/bold']
|
|
188
190
|
},
|
|
189
|
-
'
|
|
191
|
+
'&:active:not(:disabled)': {
|
|
190
192
|
color: color['icon/neutral/bold']
|
|
191
193
|
},
|
|
192
194
|
...($disabled ? {
|
|
@@ -197,10 +199,10 @@ const BaseIconButton = styled(UnstyledButton)(({
|
|
|
197
199
|
'danger': {
|
|
198
200
|
'backgroundColor': color['bg/danger/bold'],
|
|
199
201
|
'color': color['icon/inverse'],
|
|
200
|
-
'
|
|
202
|
+
'&:hover:not(:disabled)': {
|
|
201
203
|
backgroundColor: color['bg/danger/bold/hovered']
|
|
202
204
|
},
|
|
203
|
-
'
|
|
205
|
+
'&:active:not(:disabled)': {
|
|
204
206
|
backgroundColor: color['bg/danger/bold/pressed']
|
|
205
207
|
},
|
|
206
208
|
...($disabled ? {
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import color from '../../packages/token-studio/esm/token/color/index.js';
|
|
2
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
2
3
|
import radii from '../../packages/token-studio/esm/token/radii/index.js';
|
|
4
|
+
import '../../packages/token-studio/esm/token/typography/index.js';
|
|
3
5
|
import styled from 'styled-components';
|
|
4
6
|
import '../../node_modules/styled-system/dist/index.esm.js';
|
|
5
7
|
import { sx } from '../../utils/styled-system/index.js';
|
|
@@ -39,7 +41,7 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
|
|
|
39
41
|
display: 'block'
|
|
40
42
|
},
|
|
41
43
|
'cursor': $disabled ? 'not-allowed' : 'pointer',
|
|
42
|
-
'
|
|
44
|
+
'&:focus-visible': {
|
|
43
45
|
outlineColor: color['border/focused'],
|
|
44
46
|
outlineStyle: 'solid',
|
|
45
47
|
outlineWidth: 2,
|
|
@@ -92,7 +94,7 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
|
|
|
92
94
|
plain: {
|
|
93
95
|
backgroundColor: color['bg/neutral/subtler'],
|
|
94
96
|
...(selected ? {
|
|
95
|
-
color: color['icon/selected/
|
|
97
|
+
color: color['icon/selected/violet']
|
|
96
98
|
} : {
|
|
97
99
|
color: color['icon/neutral']
|
|
98
100
|
}),
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import 'react';
|
|
2
2
|
import SvgProgressGradient from '../../packages/icons/esm/ProgressGradient.js';
|
|
3
3
|
import color from '../../packages/token-studio/esm/token/color/index.js';
|
|
4
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
5
|
+
import '../../packages/token-studio/esm/token/typography/index.js';
|
|
4
6
|
import styled, { keyframes } from 'styled-components';
|
|
5
7
|
|
|
6
8
|
const spin = keyframes`
|
package/esm/core/Stack/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
1
2
|
import space from '../../packages/token-studio/esm/token/space/index.js';
|
|
3
|
+
import '../../packages/token-studio/esm/token/typography/index.js';
|
|
2
4
|
import { forwardRef } from 'react';
|
|
3
5
|
import styled from 'styled-components';
|
|
4
6
|
import '../../node_modules/styled-system/dist/index.esm.js';
|
package/esm/core/Text/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
1
2
|
import typography from '../../packages/token-studio/esm/token/typography/index.js';
|
|
2
3
|
import styled from 'styled-components';
|
|
3
4
|
import { fontSize, fontWeight, lineHeight, textAlign } from '../../node_modules/styled-system/dist/index.esm.js';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
|
|
2
|
+
import theme from '../../theme/index.js';
|
|
3
|
+
import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
|
|
4
|
+
|
|
5
|
+
const ThemeProvider = ({
|
|
6
|
+
theme: propTheme,
|
|
7
|
+
...props
|
|
8
|
+
}) => {
|
|
9
|
+
const theme$1 = propTheme ?? theme;
|
|
10
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
|
|
11
|
+
theme: theme$1,
|
|
12
|
+
...props
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export { ThemeProvider as default };
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import breakpoints from '../../packages/token-studio/esm/token/breakpoints/index.js';
|
|
2
|
+
import '../../packages/token-studio/esm/token/elevation/index.js';
|
|
3
|
+
import '../../packages/token-studio/esm/token/typography/index.js';
|
|
2
4
|
import useMediaQuery from '../../hook/useMediaQuery.js';
|
|
3
5
|
import SingleColumnLayout from '../Layout/SingleColumnLayout/index.js';
|
|
4
6
|
import ImageView from '../View/ImageView/index.js';
|
package/esm/index.js
CHANGED
|
@@ -11,6 +11,7 @@ export { default as Spinner } from './core/Spinner/index.js';
|
|
|
11
11
|
export { default as Stack } from './core/Stack/index.js';
|
|
12
12
|
export { default as StyledIcon } from './core/StyledIcon/index.js';
|
|
13
13
|
export { default as Text } from './core/Text/index.js';
|
|
14
|
+
export { default as ThemeProvider } from './core/ThemeProvider/index.js';
|
|
14
15
|
export { default as View } from './core/View/index.js';
|
|
15
16
|
export { default as UnstyledButton } from './core/_UnstyledButton.js';
|
|
16
17
|
export { default as EnigmaUI } from './enigma/EnigmaUI/index.js';
|
|
@@ -19,3 +20,4 @@ export { default as useOutsideClick } from './hook/useOutsideClick.js';
|
|
|
19
20
|
export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef.js';
|
|
20
21
|
export { default as useResize } from './hook/useResize.js';
|
|
21
22
|
export { default as useToggleHandler } from './hook/useToggleHandler.js';
|
|
23
|
+
export { default as theme } from './theme/index.js';
|