@teamturing/react-kit 2.21.6 → 2.21.7

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 (16) hide show
  1. package/dist/index.js +1242 -1116
  2. package/esm/core/Chip/index.js +53 -51
  3. package/esm/core/Dialog/index.js +8 -7
  4. package/esm/core/Grid/index.js +8 -6
  5. package/esm/core/IconButton/index.js +56 -57
  6. package/esm/core/IconToggleButton/index.js +17 -18
  7. package/esm/core/OverlayPopper/index.js +3 -3
  8. package/esm/core/Spinner/index.js +4 -4
  9. package/esm/core/Stack/index.js +8 -6
  10. package/esm/core/Tab/TabItem.js +12 -11
  11. package/esm/core/Tab/index.js +6 -7
  12. package/esm/core/Text/index.js +128 -27
  13. package/esm/core/TextInput/index.js +6 -7
  14. package/esm/packages/token-studio/esm/token/elevation/index.js +1 -5
  15. package/esm/packages/token-studio/esm/token/typography/index.js +3 -3
  16. package/package.json +2 -2
package/esm/core/Chip/index.js CHANGED
@@ -1,6 +1,3 @@
1
- import color from '../../packages/token-studio/esm/token/color/index.js';
2
- import radii from '../../packages/token-studio/esm/token/radii/index.js';
3
- import typography from '../../packages/token-studio/esm/token/typography/index.js';
4
1
  import styled from 'styled-components';
5
2
  import '../../node_modules/styled-system/dist/index.esm.js';
6
3
  import { sx } from '../../utils/styled-system/index.js';
@@ -22,17 +19,20 @@ const Chip = ({
22
19
  trailingIcon: TrailingIcon,
23
20
  children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
24
21
  });
25
- const BaseChip = styled.span({
22
+ const BaseChip = styled.span(({
23
+ theme
24
+ }) => ({
26
25
  position: 'relative',
27
26
  width: 'fit-content',
28
- borderRadius: radii.full,
27
+ borderRadius: theme.radii.full,
29
28
  outline: 'none',
30
29
  display: 'flex',
31
30
  flexDirection: 'row',
32
31
  alignItems: 'center'
33
- }, ({
32
+ }), ({
34
33
  leadingIcon,
35
- trailingIcon
34
+ trailingIcon,
35
+ theme
36
36
  }) => variant({
37
37
  prop: 'size',
38
38
  variants: {
@@ -40,9 +40,9 @@ const BaseChip = styled.span({
40
40
  'pl': leadingIcon ? 2 : 3,
41
41
  'pr': trailingIcon ? 2 : 3,
42
42
  'py': 1,
43
- 'fontSize': typography['s'].fontSize,
44
- 'fontWeight': typography['s'].fontWeight,
45
- 'lineHeight': typography['s'].lineHeight,
43
+ 'fontSize': theme.fontSizes.s,
44
+ 'fontWeight': theme.fontWeights.medium,
45
+ 'lineHeight': theme.lineHeights[2],
46
46
  'columnGap': 1,
47
47
  '& svg': {
48
48
  width: 16,
@@ -53,9 +53,9 @@ const BaseChip = styled.span({
53
53
  'pl': leadingIcon ? 2 : 3,
54
54
  'pr': trailingIcon ? 2 : 3,
55
55
  'py': 1,
56
- 'fontSize': typography['xs'].fontSize,
57
- 'fontWeight': typography['xs'].fontWeight,
58
- 'lineHeight': typography['xs'].lineHeight,
56
+ 'fontSize': theme.fontSizes.xs,
57
+ 'fontWeight': theme.fontWeights.medium,
58
+ 'lineHeight': theme.lineHeights[2],
59
59
  'columnGap': 0.5,
60
60
  '& svg': {
61
61
  width: 16,
@@ -66,9 +66,9 @@ const BaseChip = styled.span({
66
66
  'pl': !leadingIcon && trailingIcon ? 3 : 2,
67
67
  'pr': leadingIcon && !trailingIcon ? 3 : 2,
68
68
  'py': 0.5,
69
- 'fontSize': typography['xxs'].fontSize,
70
- 'fontWeight': typography['xxs'].fontWeight,
71
- 'lineHeight': typography['xxs'].lineHeight,
69
+ 'fontSize': theme.fontSizes.xxs,
70
+ 'fontWeight': theme.fontWeights.medium,
71
+ 'lineHeight': theme.lineHeights[2],
72
72
  'columnGap': 0.5,
73
73
  '& svg': {
74
74
  width: 12,
@@ -76,28 +76,30 @@ const BaseChip = styled.span({
76
76
  }
77
77
  }
78
78
  }
79
- }), variant({
79
+ }), ({
80
+ theme
81
+ }) => variant({
80
82
  prop: 'variant',
81
83
  variants: {
82
84
  'primary': {
83
- 'backgroundColor': color['bg/primary'],
84
- 'color': color['text/inverse'],
85
+ 'backgroundColor': theme.colors['bg/primary'],
86
+ 'color': theme.colors['text/inverse'],
85
87
  '& svg': {
86
- color: color['icon/inverse']
88
+ color: theme.colors['icon/inverse']
87
89
  }
88
90
  },
89
91
  'secondary': {
90
- 'backgroundColor': color['bg/secondary'],
91
- 'color': color['text/primary'],
92
+ 'backgroundColor': theme.colors['bg/secondary'],
93
+ 'color': theme.colors['text/primary'],
92
94
  '& svg': {
93
- color: color['icon/primary']
95
+ color: theme.colors['icon/primary']
94
96
  }
95
97
  },
96
98
  'outlined-primary': {
97
- 'backgroundColor': color['bg/neutral/subtler'],
98
- 'color': color['text/primary'],
99
+ 'backgroundColor': theme.colors['bg/neutral/subtler'],
100
+ 'color': theme.colors['text/primary'],
99
101
  '& svg': {
100
- color: color['icon/primary']
102
+ color: theme.colors['icon/primary']
101
103
  },
102
104
  '&:after': {
103
105
  content: '""',
@@ -108,16 +110,16 @@ const BaseChip = styled.span({
108
110
  left: 0,
109
111
  borderWidth: 1,
110
112
  borderStyle: 'solid',
111
- borderColor: color['border/primary'],
112
- borderRadius: radii.full,
113
+ borderColor: theme.colors['border/primary'],
114
+ borderRadius: theme.radii.full,
113
115
  boxSizing: 'border-box'
114
116
  }
115
117
  },
116
118
  'outlined-neutral': {
117
- 'backgroundColor': color['bg/neutral/subtler'],
118
- 'color': color['text/neutral/subtle'],
119
+ 'backgroundColor': theme.colors['bg/neutral/subtler'],
120
+ 'color': theme.colors['text/neutral/subtle'],
119
121
  '& svg': {
120
- color: color['icon/neutral/bolder']
122
+ color: theme.colors['icon/neutral/bolder']
121
123
  },
122
124
  '&:after': {
123
125
  content: '""',
@@ -128,51 +130,51 @@ const BaseChip = styled.span({
128
130
  left: 0,
129
131
  borderWidth: 1,
130
132
  borderStyle: 'solid',
131
- borderColor: color['border/neutral/bolder'],
132
- borderRadius: radii.full,
133
+ borderColor: theme.colors['border/neutral/bolder'],
134
+ borderRadius: theme.radii.full,
133
135
  boxSizing: 'border-box'
134
136
  }
135
137
  },
136
138
  'neutral': {
137
- 'backgroundColor': color['bg/neutral'],
138
- 'color': color['text/neutral/subtle'],
139
+ 'backgroundColor': theme.colors['bg/neutral'],
140
+ 'color': theme.colors['text/neutral/subtle'],
139
141
  '& svg': {
140
- color: color['icon/neutral/bolder']
142
+ color: theme.colors['icon/neutral/bolder']
141
143
  }
142
144
  },
143
145
  'red': {
144
- 'backgroundColor': color['bg/accent/red/subtlest'],
145
- 'color': color['text/accent/red'],
146
+ 'backgroundColor': theme.colors['bg/accent/red/subtlest'],
147
+ 'color': theme.colors['text/accent/red'],
146
148
  '& svg': {
147
- color: color['icon/accent/red']
149
+ color: theme.colors['icon/accent/red']
148
150
  }
149
151
  },
150
152
  'red-accent': {
151
- 'backgroundColor': color['bg/accent/red'],
152
- 'color': color['text/inverse'],
153
+ 'backgroundColor': theme.colors['bg/accent/red'],
154
+ 'color': theme.colors['text/inverse'],
153
155
  '& svg': {
154
- color: color['icon/inverse']
156
+ color: theme.colors['icon/inverse']
155
157
  }
156
158
  },
157
159
  'yellow': {
158
- 'backgroundColor': color['bg/accent/yellow/subtlest'],
159
- 'color': color['text/accent/yellow'],
160
+ 'backgroundColor': theme.colors['bg/accent/yellow/subtlest'],
161
+ 'color': theme.colors['text/accent/yellow'],
160
162
  '& svg': {
161
- color: color['icon/accent/yellow']
163
+ color: theme.colors['icon/accent/yellow']
162
164
  }
163
165
  },
164
166
  'green': {
165
- 'backgroundColor': color['bg/accent/green/subtlest'],
166
- 'color': color['text/accent/green'],
167
+ 'backgroundColor': theme.colors['bg/accent/green/subtlest'],
168
+ 'color': theme.colors['text/accent/green'],
167
169
  '& svg': {
168
- color: color['icon/accent/green']
170
+ color: theme.colors['icon/accent/green']
169
171
  }
170
172
  },
171
173
  'dim': {
172
- 'backgroundColor': color['dim'],
173
- 'color': color['text/inverse'],
174
+ 'backgroundColor': theme.colors['dim'],
175
+ 'color': theme.colors['text/inverse'],
174
176
  '& svg': {
175
- color: color['icon/inverse']
177
+ color: theme.colors['icon/inverse']
176
178
  }
177
179
  }
178
180
  }
package/esm/core/Dialog/index.js CHANGED
@@ -1,8 +1,5 @@
1
1
  import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
2
2
  import SvgClose from '../../packages/icons/esm/Close.js';
3
- import color from '../../packages/token-studio/esm/token/color/index.js';
4
- import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
5
- import '../../packages/token-studio/esm/token/typography/index.js';
6
3
  import styled from 'styled-components';
7
4
  import IconButton from '../IconButton/index.js';
8
5
  import View from '../View/index.js';
@@ -135,15 +132,19 @@ const Blanket = styled.span`
135
132
  display: block;
136
133
  cursor: default;
137
134
  content: '';
138
- background: ${color.dim};
135
+ background: ${({
136
+ theme
137
+ }) => theme.colors.dim};
139
138
  }
140
139
  `;
141
- const BaseDialog = styled.div(() => ({
140
+ const BaseDialog = styled.div(({
141
+ theme
142
+ }) => ({
142
143
  display: 'flex',
143
144
  flexDirection: 'column',
144
145
  position: 'relative',
145
- boxShadow: elevation['shadow/overlay'],
146
- backgroundColor: elevation['surface/overlay'],
146
+ boxShadow: theme.shadows['shadow/overlay'],
147
+ backgroundColor: theme.colors['surface/overlay'],
147
148
  outline: 'none',
148
149
  overflow: 'hidden',
149
150
  margin: 'auto'
package/esm/core/Grid/index.js CHANGED
@@ -1,5 +1,3 @@
1
- import space from '../../packages/token-studio/esm/token/space/index.js';
2
- import '../../packages/token-studio/esm/token/typography/index.js';
3
1
  import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
2
  import { isArray } from '../../packages/utils/esm/isArray.js';
5
3
  import { isNullable } from '../../packages/utils/esm/isNullable.js';
@@ -32,9 +30,11 @@ const Grid = /*#__PURE__*/forwardRef(({
32
30
  const BaseGrid = styled(View)({
33
31
  display: 'flex',
34
32
  flexDirection: 'row'
35
- }, variant({
33
+ }, ({
34
+ theme
35
+ }) => variant({
36
36
  prop: 'gapX',
37
- variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
37
+ variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
38
38
  const styleValue = {
39
39
  '& > *': {
40
40
  px: forcePixelValue(value / 2)
@@ -43,9 +43,11 @@ const BaseGrid = styled(View)({
43
43
  };
44
44
  return [key, styleValue];
45
45
  }))
46
- }), variant({
46
+ }), ({
47
+ theme
48
+ }) => variant({
47
49
  prop: 'gapY',
48
- variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
50
+ variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
49
51
  const styleValue = {
50
52
  '& > *': {
51
53
  mt: forcePixelValue(value)
package/esm/core/IconButton/index.js CHANGED
@@ -1,6 +1,3 @@
1
- import color from '../../packages/token-studio/esm/token/color/index.js';
2
- import radii from '../../packages/token-studio/esm/token/radii/index.js';
3
- import '../../packages/token-studio/esm/token/typography/index.js';
4
1
  import { forwardRef } from 'react';
5
2
  import styled from 'styled-components';
6
3
  import '../../node_modules/styled-system/dist/index.esm.js';
@@ -33,10 +30,11 @@ const IconButton = /*#__PURE__*/forwardRef(({
33
30
  });
34
31
  const BaseIconButton = styled(UnstyledButton)(({
35
32
  $loading,
36
- $disabled
33
+ $disabled,
34
+ theme
37
35
  }) => ({
38
36
  'position': 'relative',
39
- 'borderRadius': radii.full,
37
+ 'borderRadius': theme.radii.full,
40
38
  'transition': 'background-color 100ms, color 100ms',
41
39
  '& svg': {
42
40
  display: 'block',
@@ -44,7 +42,7 @@ const BaseIconButton = styled(UnstyledButton)(({
44
42
  },
45
43
  'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
46
44
  '&:focus-visible': {
47
- outlineColor: color['border/focused'],
45
+ outlineColor: theme.colors['border/focused'],
48
46
  outlineStyle: 'solid',
49
47
  outlineWidth: 2,
50
48
  outlineOffset: 2
@@ -75,55 +73,56 @@ const BaseIconButton = styled(UnstyledButton)(({
75
73
  }
76
74
  }
77
75
  }), ({
78
- $disabled
76
+ $disabled,
77
+ theme
79
78
  }) => variant({
80
79
  prop: 'variant',
81
80
  variants: {
82
81
  'primary': {
83
- 'backgroundColor': color['bg/primary'],
84
- 'color': color['icon/inverse'],
82
+ 'backgroundColor': theme.colors['bg/primary'],
83
+ 'color': theme.colors['icon/inverse'],
85
84
  '&:hover:not(:disabled)': {
86
- backgroundColor: color['bg/primary/hovered']
85
+ backgroundColor: theme.colors['bg/primary/hovered']
87
86
  },
88
87
  '&:active:not(:disabled)': {
89
- backgroundColor: color['bg/primary/pressed']
88
+ backgroundColor: theme.colors['bg/primary/pressed']
90
89
  },
91
90
  ...($disabled ? {
92
- backgroundColor: color['bg/disabled'],
93
- color: color['icon/disabled']
91
+ backgroundColor: theme.colors['bg/disabled'],
92
+ color: theme.colors['icon/disabled']
94
93
  } : {})
95
94
  },
96
95
  'secondary': {
97
- 'backgroundColor': color['bg/secondary'],
98
- 'color': color['icon/primary'],
96
+ 'backgroundColor': theme.colors['bg/secondary'],
97
+ 'color': theme.colors['icon/primary'],
99
98
  '&:hover:not(:disabled)': {
100
- backgroundColor: color['bg/secondary/hovered']
99
+ backgroundColor: theme.colors['bg/secondary/hovered']
101
100
  },
102
101
  '&:active:not(:disabled)': {
103
- backgroundColor: color['bg/secondary/pressed']
102
+ backgroundColor: theme.colors['bg/secondary/pressed']
104
103
  },
105
104
  ...($disabled ? {
106
- backgroundColor: color['bg/disabled'],
107
- color: color['icon/disabled']
105
+ backgroundColor: theme.colors['bg/disabled'],
106
+ color: theme.colors['icon/disabled']
108
107
  } : {})
109
108
  },
110
109
  'neutral': {
111
- 'backgroundColor': color['bg/neutral'],
112
- 'color': color['icon/accent/gray'],
110
+ 'backgroundColor': theme.colors['bg/neutral'],
111
+ 'color': theme.colors['icon/accent/gray'],
113
112
  '&:hover:not(:disabled)': {
114
- backgroundColor: color['bg/neutral/hovered']
113
+ backgroundColor: theme.colors['bg/neutral/hovered']
115
114
  },
116
115
  '&:active:not(:disabled)': {
117
- backgroundColor: color['bg/neutral/pressed']
116
+ backgroundColor: theme.colors['bg/neutral/pressed']
118
117
  },
119
118
  ...($disabled ? {
120
- backgroundColor: color['bg/disabled'],
121
- color: color['icon/disabled']
119
+ backgroundColor: theme.colors['bg/disabled'],
120
+ color: theme.colors['icon/disabled']
122
121
  } : {})
123
122
  },
124
123
  'outlined': {
125
- 'backgroundColor': color['bg/neutral/subtler'],
126
- 'color': color['icon/neutral/bolder'],
124
+ 'backgroundColor': theme.colors['bg/neutral/subtler'],
125
+ 'color': theme.colors['icon/neutral/bolder'],
127
126
  '&:after': {
128
127
  content: '""',
129
128
  position: 'absolute',
@@ -133,78 +132,78 @@ const BaseIconButton = styled(UnstyledButton)(({
133
132
  left: 0,
134
133
  borderWidth: 1,
135
134
  borderStyle: 'solid',
136
- borderColor: color['border/neutral/bolder'],
137
- borderRadius: radii.full,
135
+ borderColor: theme.colors['border/neutral/bolder'],
136
+ borderRadius: theme.radii.full,
138
137
  boxSizing: 'border-box'
139
138
  },
140
139
  '&:hover:not(:disabled)': {
141
- backgroundColor: color['bg/neutral/subtler/hovered']
140
+ backgroundColor: theme.colors['bg/neutral/subtler/hovered']
142
141
  },
143
142
  '&:active:not(:disabled)': {
144
- backgroundColor: color['bg/neutral/subtler/pressed']
143
+ backgroundColor: theme.colors['bg/neutral/subtler/pressed']
145
144
  },
146
145
  ...($disabled ? {
147
- 'backgroundColor': color['bg/disabled'],
148
- 'color': color['icon/disabled'],
146
+ 'backgroundColor': theme.colors['bg/disabled'],
147
+ 'color': theme.colors['icon/disabled'],
149
148
  '&:after': {
150
149
  display: 'none'
151
150
  }
152
151
  } : {})
153
152
  },
154
153
  'plain-bold': {
155
- 'backgroundColor': color['bg/neutral/subtler'],
156
- 'color': color['icon/neutral/bolder'],
154
+ 'backgroundColor': theme.colors['bg/neutral/subtler'],
155
+ 'color': theme.colors['icon/neutral/bolder'],
157
156
  '&:hover:not(:disabled)': {
158
- color: color['icon/accent/gray']
157
+ color: theme.colors['icon/accent/gray']
159
158
  },
160
159
  '&:active:not(:disabled)': {
161
- color: color['icon/accent/gray']
160
+ color: theme.colors['icon/accent/gray']
162
161
  },
163
162
  ...($disabled ? {
164
- backgroundColor: color['bg/disabled/subtlest'],
165
- color: color['icon/disabled']
163
+ backgroundColor: theme.colors['bg/disabled/subtlest'],
164
+ color: theme.colors['icon/disabled']
166
165
  } : {})
167
166
  },
168
167
  'plain': {
169
- 'backgroundColor': color['bg/neutral/subtler'],
170
- 'color': color['icon/neutral/bold'],
168
+ 'backgroundColor': theme.colors['bg/neutral/subtler'],
169
+ 'color': theme.colors['icon/neutral/bold'],
171
170
  '&:hover:not(:disabled)': {
172
- color: color['icon/neutral/bolder']
171
+ color: theme.colors['icon/neutral/bolder']
173
172
  },
174
173
  '&:active:not(:disabled)': {
175
- color: color['icon/neutral/bolder']
174
+ color: theme.colors['icon/neutral/bolder']
176
175
  },
177
176
  ...($disabled ? {
178
- backgroundColor: color['bg/disabled/subtlest'],
179
- color: color['icon/disabled/subtler']
177
+ backgroundColor: theme.colors['bg/disabled/subtlest'],
178
+ color: theme.colors['icon/disabled/subtler']
180
179
  } : {})
181
180
  },
182
181
  'plain-subtle': {
183
- 'backgroundColor': color['bg/neutral/subtler'],
184
- 'color': color['icon/neutral'],
182
+ 'backgroundColor': theme.colors['bg/neutral/subtler'],
183
+ 'color': theme.colors['icon/neutral'],
185
184
  '&:hover:not(:disabled)': {
186
- color: color['icon/neutral/bold']
185
+ color: theme.colors['icon/neutral/bold']
187
186
  },
188
187
  '&:active:not(:disabled)': {
189
- color: color['icon/neutral/bold']
188
+ color: theme.colors['icon/neutral/bold']
190
189
  },
191
190
  ...($disabled ? {
192
- backgroundColor: color['bg/disabled/subtlest'],
193
- color: color['icon/disabled/subtler']
191
+ backgroundColor: theme.colors['bg/disabled/subtlest'],
192
+ color: theme.colors['icon/disabled/subtler']
194
193
  } : {})
195
194
  },
196
195
  'danger': {
197
- 'backgroundColor': color['bg/danger/bold'],
198
- 'color': color['icon/inverse'],
196
+ 'backgroundColor': theme.colors['bg/danger/bold'],
197
+ 'color': theme.colors['icon/inverse'],
199
198
  '&:hover:not(:disabled)': {
200
- backgroundColor: color['bg/danger/bold/hovered']
199
+ backgroundColor: theme.colors['bg/danger/bold/hovered']
201
200
  },
202
201
  '&:active:not(:disabled)': {
203
- backgroundColor: color['bg/danger/bold/pressed']
202
+ backgroundColor: theme.colors['bg/danger/bold/pressed']
204
203
  },
205
204
  ...($disabled ? {
206
- backgroundColor: color['bg/disabled'],
207
- color: color['icon/disabled']
205
+ backgroundColor: theme.colors['bg/disabled'],
206
+ color: theme.colors['icon/disabled']
208
207
  } : {})
209
208
  }
210
209
  }
package/esm/core/IconToggleButton/index.js CHANGED
@@ -1,6 +1,3 @@
1
- import color from '../../packages/token-studio/esm/token/color/index.js';
2
- import radii from '../../packages/token-studio/esm/token/radii/index.js';
3
- import '../../packages/token-studio/esm/token/typography/index.js';
4
1
  import styled from 'styled-components';
5
2
  import '../../node_modules/styled-system/dist/index.esm.js';
6
3
  import { sx } from '../../utils/styled-system/index.js';
@@ -31,17 +28,18 @@ const IconToggleButton = ({
31
28
  });
32
29
  };
33
30
  const BaseIconToggleButton = styled(UnstyledButton)(({
34
- $disabled
31
+ $disabled,
32
+ theme
35
33
  }) => ({
36
34
  'position': 'relative',
37
- 'borderRadius': radii.full,
35
+ 'borderRadius': theme.radii.full,
38
36
  'transition': 'background-color 100ms, color 100ms',
39
37
  '& svg': {
40
38
  display: 'block'
41
39
  },
42
40
  'cursor': $disabled ? 'not-allowed' : 'pointer',
43
41
  '&:focus-visible': {
44
- outlineColor: color['border/focused'],
42
+ outlineColor: theme.colors['border/focused'],
45
43
  outlineStyle: 'solid',
46
44
  outlineWidth: 2,
47
45
  outlineOffset: 2
@@ -73,33 +71,34 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
73
71
  }
74
72
  }), ({
75
73
  selected,
76
- $disabled
74
+ $disabled,
75
+ theme
77
76
  }) => variant({
78
77
  prop: 'variant',
79
78
  variants: {
80
79
  primary: {
81
80
  ...(selected ? {
82
- backgroundColor: color['bg/selected/violet'],
83
- color: color['icon/inverse']
81
+ backgroundColor: theme.colors['bg/selected/violet'],
82
+ color: theme.colors['icon/inverse']
84
83
  } : {
85
- backgroundColor: color['bg/neutral'],
86
- color: color['icon/accent/gray']
84
+ backgroundColor: theme.colors['bg/neutral'],
85
+ color: theme.colors['icon/accent/gray']
87
86
  }),
88
87
  ...($disabled ? {
89
- backgroundColor: color['bg/disabled'],
90
- color: color['icon/disabled']
88
+ backgroundColor: theme.colors['bg/disabled'],
89
+ color: theme.colors['icon/disabled']
91
90
  } : {})
92
91
  },
93
92
  plain: {
94
- backgroundColor: color['bg/neutral/subtler'],
93
+ backgroundColor: theme.colors['bg/neutral/subtler'],
95
94
  ...(selected ? {
96
- color: color['icon/selected/violet']
95
+ color: theme.colors['icon/selected/violet']
97
96
  } : {
98
- color: color['icon/neutral']
97
+ color: theme.colors['icon/neutral']
99
98
  }),
100
99
  ...($disabled ? {
101
- backgroundColor: color['bg/disabled/subtlest'],
102
- color: color['icon/disabled/subtler']
100
+ backgroundColor: theme.colors['bg/disabled/subtlest'],
101
+ color: theme.colors['icon/disabled/subtler']
103
102
  } : {})
104
103
  }
105
104
  }
package/esm/core/OverlayPopper/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import { useFloating } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
2
- import space from '../../packages/token-studio/esm/token/space/index.js';
3
- import '../../packages/token-studio/esm/token/typography/index.js';
4
2
  import { isFunction } from '../../packages/utils/esm/isFunction.js';
5
3
  import { Children, cloneElement } from 'react';
4
+ import { useTheme } from 'styled-components';
6
5
  import useFocusTrap from '../../hook/useFocusTrap.js';
7
6
  import useFocusZone from '../../hook/useFocusZone.js';
8
7
  import useToggleState from '../../hook/useToggleState.js';
@@ -19,6 +18,7 @@ const OverlayPopper = ({
19
18
  onOpen,
20
19
  onClose
21
20
  }) => {
21
+ const theme = useTheme();
22
22
  const {
23
23
  refs,
24
24
  elements,
@@ -27,7 +27,7 @@ const OverlayPopper = ({
27
27
  } = useFloating({
28
28
  placement,
29
29
  whileElementsMounted: autoUpdate,
30
- middleware: [offset(space[1]), flip(), shift()],
30
+ middleware: [offset(theme.space[1]), flip(), shift()],
31
31
  strategy: 'fixed'
32
32
  });
33
33
  const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({
package/esm/core/Spinner/index.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import 'react';
2
2
  import SvgProgressGradient from '../../packages/icons/esm/ProgressGradient.js';
3
- import color from '../../packages/token-studio/esm/token/color/index.js';
4
- import '../../packages/token-studio/esm/token/typography/index.js';
5
3
  import styled, { keyframes } from 'styled-components';
6
4
 
7
5
  const spin = keyframes`
@@ -13,12 +11,14 @@ const spin = keyframes`
13
11
  }
14
12
  `;
15
13
  const Spinner = styled(SvgProgressGradient)`
14
+ color: ${({
15
+ theme
16
+ }) => theme.colors['icon/neutral']};
16
17
  animation: ${spin} 1000ms infinite steps(8, end);
17
18
  `;
18
19
  Spinner.defaultProps = {
19
20
  width: 32,
20
- height: 32,
21
- color: color['icon/neutral']
21
+ height: 32
22
22
  };
23
23
 
24
24
  export { Spinner as default };
package/esm/core/Stack/index.js CHANGED
@@ -1,5 +1,3 @@
1
- import space from '../../packages/token-studio/esm/token/space/index.js';
2
- import '../../packages/token-studio/esm/token/typography/index.js';
3
1
  import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
4
2
  import { forwardRef } from 'react';
5
3
  import styled from 'styled-components';
@@ -29,9 +27,11 @@ const BaseStack = styled(View)({
29
27
  display: 'flex',
30
28
  flexDirection: 'row',
31
29
  flexWrap: 'wrap'
32
- }, variant({
30
+ }, ({
31
+ theme
32
+ }) => variant({
33
33
  prop: 'gapX',
34
- variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
34
+ variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
35
35
  const styleValue = {
36
36
  '& > *': {
37
37
  px: forcePixelValue(value / 2)
@@ -40,9 +40,11 @@ const BaseStack = styled(View)({
40
40
  };
41
41
  return [key, styleValue];
42
42
  }))
43
- }), variant({
43
+ }), ({
44
+ theme
45
+ }) => variant({
44
46
  prop: 'gapY',
45
- variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
47
+ variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
46
48
  const styleValue = {
47
49
  '& > *': {
48
50
  mt: forcePixelValue(value)