@zendeskgarden/react-buttons 9.0.0-next.10 → 9.0.0-next.11

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 (8) hide show
  1. package/dist/esm/styled/StyledAnchor.js +1 -1
  2. package/dist/esm/styled/StyledButton.js +214 -53
  3. package/dist/esm/styled/StyledExternalIcon.js +1 -1
  4. package/dist/esm/styled/StyledIcon.js +1 -1
  5. package/dist/esm/styled/StyledIconButton.js +29 -7
  6. package/dist/esm/styled/StyledSplitButton.js +1 -1
  7. package/dist/index.cjs.js +244 -61
  8. package/package.json +3 -3
package/dist/esm/styled/StyledAnchor.js CHANGED
@@ -11,7 +11,7 @@ import { StyledButton } from './StyledButton.js';
11
11
  const COMPONENT_ID = 'buttons.anchor';
12
12
  const StyledAnchor = styled(StyledButton).attrs(props => ({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.10',
14
+ 'data-garden-version': '9.0.0-next.11',
15
15
  as: 'a',
16
16
  dir: props.theme.rtl ? 'rtl' : undefined,
17
17
  isLink: true,
package/dist/esm/styled/StyledButton.js CHANGED
@@ -5,8 +5,8 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
- import { rgba, math, em } from 'polished';
9
- import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
8
+ import { math, em } from 'polished';
9
+ import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
10
10
  import { StyledSplitButton } from './StyledSplitButton.js';
11
11
  import { StyledIcon } from './StyledIcon.js';
12
12
 
@@ -17,9 +17,6 @@ const getBorderRadius = props => {
17
17
  }
18
18
  return props.theme.borderRadii.md;
19
19
  };
20
- const getDisabledBackgroundColor = props => {
21
- return getColorV8('neutralHue', 200, props.theme);
22
- };
23
20
  const getHeight = props => {
24
21
  if (props.size === 'small') {
25
22
  return `${props.theme.space.base * 8}px`;
@@ -28,65 +25,223 @@ const getHeight = props => {
28
25
  }
29
26
  return `${props.theme.space.base * 10}px`;
30
27
  };
31
- const colorStyles = props => {
28
+ const colorStyles = _ref => {
29
+ let {
30
+ theme,
31
+ isLink,
32
+ isBasic,
33
+ isDanger,
34
+ isNeutral,
35
+ isPrimary,
36
+ focusInset
37
+ } = _ref;
32
38
  let retVal;
33
- let hue;
34
- if (props.disabled || props.isNeutral && props.isPrimary && !props.isDanger) {
35
- hue = 'neutralHue';
36
- } else if (props.isDanger) {
37
- hue = 'dangerHue';
38
- } else {
39
- hue = 'primaryHue';
40
- }
41
- const shade = 600;
42
- const baseColor = getColorV8(hue, shade, props.theme);
43
- const hoverColor = getColorV8(hue, shade + 100, props.theme);
44
- const activeColor = getColorV8(hue, shade + 200, props.theme);
45
- const focusColor = getColorV8('primaryHue', shade, props.theme);
46
- const disabledBackgroundColor = getDisabledBackgroundColor(props);
47
- const disabledForegroundColor = getColorV8(hue, shade - 200, props.theme);
48
- if (props.isLink) {
49
- retVal = css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, focusStyles({
50
- theme: props.theme,
39
+ const disabledBackgroundColor = getColor({
40
+ theme,
41
+ variable: 'background.disabled'
42
+ });
43
+ const disabledForegroundColor = getColor({
44
+ theme,
45
+ variable: 'foreground.disabled'
46
+ });
47
+ const offset100 = {
48
+ dark: {
49
+ offset: -100
50
+ },
51
+ light: {
52
+ offset: 100
53
+ }
54
+ };
55
+ const offset200 = {
56
+ dark: {
57
+ offset: -200
58
+ },
59
+ light: {
60
+ offset: 200
61
+ }
62
+ };
63
+ if (isLink) {
64
+ const options = {
65
+ theme,
66
+ variable: isDanger ? 'foreground.danger' : 'foreground.primary'
67
+ };
68
+ const foregroundColor = getColor(options);
69
+ const hoverForegroundColor = getColor({
70
+ ...options,
71
+ ...offset100
72
+ });
73
+ const activeForegroundColor = getColor({
74
+ ...options,
75
+ ...offset200
76
+ });
77
+ const focusOutlineColor = getColor({
78
+ theme,
79
+ variable: 'border.primaryEmphasis'
80
+ });
81
+ retVal = css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], foregroundColor, focusStyles({
82
+ theme,
51
83
  condition: false,
52
84
  styles: {
53
- color: baseColor,
54
- outlineColor: focusColor
85
+ color: foregroundColor ,
86
+ outlineColor: focusOutlineColor
55
87
  }
56
- }), hoverColor, activeColor, disabledForegroundColor);
57
- } else if (props.isPrimary) {
58
- retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], baseColor, props.theme.palette.white, hoverColor, focusStyles({
59
- theme: props.theme,
60
- inset: props.focusInset,
61
- shadowWidth: props.focusInset ? 'sm' : 'md',
62
- spacerWidth: props.focusInset ? 'sm' : 'xs',
63
- styles: props.isDanger && props.focusInset ? {
64
- borderColor: focusColor
88
+ }), hoverForegroundColor, activeForegroundColor, disabledForegroundColor);
89
+ } else if (isPrimary) {
90
+ let backgroundVariable;
91
+ if (isDanger) {
92
+ backgroundVariable = 'background.dangerEmphasis';
93
+ } else if (isNeutral) {
94
+ backgroundVariable = 'background.emphasis';
95
+ } else {
96
+ backgroundVariable = 'background.primaryEmphasis';
97
+ }
98
+ const options = {
99
+ theme,
100
+ variable: backgroundVariable
101
+ };
102
+ const backgroundColor = getColor(options);
103
+ const hoverBackgroundColor = getColor({
104
+ ...options,
105
+ ...offset100
106
+ });
107
+ const activeBackgroundColor = getColor({
108
+ ...options,
109
+ ...offset200
110
+ });
111
+ const foregroundColor = getColor({
112
+ theme,
113
+ variable: 'foreground.onEmphasis'
114
+ });
115
+ retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], backgroundColor, foregroundColor, hoverBackgroundColor, focusStyles({
116
+ theme,
117
+ inset: focusInset,
118
+ shadowWidth: focusInset ? 'sm' : 'md',
119
+ spacerWidth: focusInset ? 'sm' : 'xs',
120
+ styles: (isDanger || isNeutral) && focusInset ? {
121
+ borderColor: getColor({
122
+ theme,
123
+ variable: 'border.primaryEmphasis'
124
+ })
65
125
  } : undefined
66
- }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
126
+ }), activeBackgroundColor, disabledBackgroundColor, disabledForegroundColor);
67
127
  } else {
68
- const borderColor = props.isNeutral && !props.isDanger ? getColorV8('neutralHue', 300, props.theme) : baseColor;
69
- const foregroundColor = props.isNeutral ? getColorV8('foreground', 600 , props.theme) : baseColor;
70
- const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
71
- const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
72
- retVal = css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, focusStyles({
73
- theme: props.theme,
74
- inset: props.focusInset,
75
- styles: props.isNeutral ? {
76
- borderColor: baseColor
77
- } : undefined
78
- }), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
128
+ let borderColor;
129
+ let hoverBorderColor;
130
+ let activeBorderColor;
131
+ let focusBorderColor;
132
+ let backgroundVariable;
133
+ let foregroundVariable;
134
+ if (isDanger) {
135
+ if (!isBasic) {
136
+ const borderOptions = {
137
+ theme,
138
+ variable: 'border.dangerEmphasis'
139
+ };
140
+ borderColor = getColor(borderOptions);
141
+ hoverBorderColor = getColor({
142
+ ...borderOptions,
143
+ ...offset100
144
+ });
145
+ activeBorderColor = getColor({
146
+ ...borderOptions,
147
+ ...offset200
148
+ });
149
+ if (isNeutral) {
150
+ focusBorderColor = getColor(borderOptions);
151
+ }
152
+ }
153
+ backgroundVariable = 'background.dangerEmphasis';
154
+ foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.danger';
155
+ } else {
156
+ if (!isBasic) {
157
+ const borderOptions = {
158
+ theme,
159
+ variable: 'border.primaryEmphasis'
160
+ };
161
+ if (isNeutral) {
162
+ borderColor = getColor({
163
+ theme,
164
+ variable: 'border.default',
165
+ ...offset100
166
+ });
167
+ focusBorderColor = getColor(borderOptions);
168
+ } else {
169
+ borderColor = getColor(borderOptions);
170
+ }
171
+ hoverBorderColor = getColor({
172
+ ...borderOptions,
173
+ ...offset100
174
+ });
175
+ activeBorderColor = getColor({
176
+ ...borderOptions,
177
+ ...offset200
178
+ });
179
+ }
180
+ backgroundVariable = 'background.primaryEmphasis';
181
+ foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.primary';
182
+ }
183
+ const hoverBackgroundColor = getColor({
184
+ theme,
185
+ variable: backgroundVariable,
186
+ transparency: theme.opacity[100]
187
+ });
188
+ const activeBackgroundColor = getColor({
189
+ theme,
190
+ variable: backgroundVariable,
191
+ transparency: theme.opacity[200]
192
+ });
193
+ const foregroundOptions = {
194
+ theme,
195
+ variable: foregroundVariable
196
+ };
197
+ const foregroundColor = getColor(foregroundOptions);
198
+ let hoverForegroundColor;
199
+ let activeForegroundColor;
200
+ let iconForegroundColor;
201
+ let hoverIconForegroundColor;
202
+ let activeIconForegroundColor;
203
+ if (isNeutral) {
204
+ const iconOptions = {
205
+ theme,
206
+ variable: 'foreground.subtle'
207
+ };
208
+ iconForegroundColor = getColor(iconOptions);
209
+ hoverIconForegroundColor = getColor({
210
+ ...iconOptions,
211
+ ...offset100
212
+ });
213
+ activeIconForegroundColor = getColor({
214
+ ...iconOptions,
215
+ ...offset200
216
+ });
217
+ } else {
218
+ hoverForegroundColor = getColor({
219
+ ...foregroundOptions,
220
+ ...offset100
221
+ });
222
+ activeForegroundColor = getColor({
223
+ ...foregroundOptions,
224
+ ...offset200
225
+ });
226
+ }
227
+ retVal = css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], borderColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
228
+ theme,
229
+ inset: focusInset,
230
+ styles: {
231
+ borderColor: focusBorderColor
232
+ }
233
+ }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, iconForegroundColor, StyledIcon, StyledIcon, hoverIconForegroundColor, StyledIcon, activeIconForegroundColor, StyledIcon, disabledForegroundColor);
79
234
  }
80
235
  return retVal;
81
236
  };
82
- const groupStyles = props => {
83
- const {
237
+ const groupStyles = _ref2 => {
238
+ let {
84
239
  theme,
85
240
  isPrimary,
86
241
  isBasic,
87
242
  isPill,
88
243
  focusInset
89
- } = props;
244
+ } = _ref2;
90
245
  const {
91
246
  rtl,
92
247
  borderWidths,
@@ -97,9 +252,15 @@ const groupStyles = props => {
97
252
  const marginOffset = borderWidths.sm;
98
253
  const marginDisplacement = `${isPrimary || isBasic ? '' : '-'}${marginOffset}`;
99
254
  const iconMarginDisplacement = isPill && '-2px';
100
- const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
255
+ const disabledBackgroundColor = !isPrimary && getColor({
256
+ theme,
257
+ variable: 'background.disabled'
258
+ });
101
259
  const borderColor = isBasic ? 'transparent' : 'revert';
102
- const focusColor = getColorV8('primaryHue', 600, theme);
260
+ const focusColor = getColor({
261
+ theme,
262
+ variable: 'border.primaryEmphasis'
263
+ });
103
264
  const focusBoxShadow = isBasic && !isPrimary && getFocusBoxShadow({
104
265
  theme,
105
266
  inset: focusInset,
@@ -142,7 +303,7 @@ const sizeStyles = props => {
142
303
  };
143
304
  const StyledButton = styled.button.attrs(props => ({
144
305
  'data-garden-id': COMPONENT_ID,
145
- 'data-garden-version': '9.0.0-next.10',
306
+ 'data-garden-version': '9.0.0-next.11',
146
307
  type: props.type || 'button'
147
308
  })).withConfig({
148
309
  displayName: "StyledButton",
package/dist/esm/styled/StyledExternalIcon.js CHANGED
@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
11
11
  const COMPONENT_ID = 'buttons.external_icon';
12
12
  const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.10'
14
+ 'data-garden-version': '9.0.0-next.11'
15
15
  }).withConfig({
16
16
  displayName: "StyledExternalIcon",
17
17
  componentId: "sc-16oz07e-0"
package/dist/esm/styled/StyledIcon.js CHANGED
@@ -19,7 +19,7 @@ const sizeStyles = props => {
19
19
  };
20
20
  const StyledIcon = styled(StyledBaseIcon).attrs({
21
21
  'data-garden-id': COMPONENT_ID,
22
- 'data-garden-version': '9.0.0-next.10'
22
+ 'data-garden-version': '9.0.0-next.11'
23
23
  }).withConfig({
24
24
  displayName: "StyledIcon",
25
25
  componentId: "sc-19meqgg-0"
package/dist/esm/styled/StyledIconButton.js CHANGED
@@ -5,16 +5,38 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
- import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
9
9
  import { StyledButton, getHeight } from './StyledButton.js';
10
10
  import { StyledIcon } from './StyledIcon.js';
11
11
 
12
12
  const COMPONENT_ID = 'buttons.icon_button';
13
- const iconColorStyles = props => {
14
- const shade = 600;
15
- const baseColor = getColorV8('neutralHue', shade, props.theme);
16
- const hoverColor = getColorV8('neutralHue', shade + 100, props.theme);
17
- const activeColor = getColorV8('neutralHue', shade + 200, props.theme);
13
+ const iconColorStyles = _ref => {
14
+ let {
15
+ theme
16
+ } = _ref;
17
+ const options = {
18
+ theme,
19
+ variable: 'foreground.default'
20
+ };
21
+ const baseColor = getColor(options);
22
+ const hoverColor = getColor({
23
+ ...options,
24
+ dark: {
25
+ offset: -100
26
+ },
27
+ light: {
28
+ offset: 100
29
+ }
30
+ });
31
+ const activeColor = getColor({
32
+ ...options,
33
+ dark: {
34
+ offset: -200
35
+ },
36
+ light: {
37
+ offset: 200
38
+ }
39
+ });
18
40
  return css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
19
41
  };
20
42
  const iconButtonStyles = props => {
@@ -27,7 +49,7 @@ const iconStyles = props => {
27
49
  };
28
50
  const StyledIconButton = styled(StyledButton).attrs({
29
51
  'data-garden-id': COMPONENT_ID,
30
- 'data-garden-version': '9.0.0-next.10'
52
+ 'data-garden-version': '9.0.0-next.11'
31
53
  }).withConfig({
32
54
  displayName: "StyledIconButton",
33
55
  componentId: "sc-1t0ughp-0"
package/dist/esm/styled/StyledSplitButton.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'buttons.button_group_view';
11
11
  const StyledSplitButton = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.10'
13
+ 'data-garden-version': '9.0.0-next.11'
14
14
  }).withConfig({
15
15
  displayName: "StyledSplitButton",
16
16
  componentId: "sc-1u4v04v-0"
package/dist/index.cjs.js CHANGED
@@ -41,7 +41,7 @@ const SIZE = ['small', 'medium', 'large'];
41
41
  const COMPONENT_ID$5 = 'buttons.button_group_view';
42
42
  const StyledSplitButton = styled__default.default.div.attrs({
43
43
  'data-garden-id': COMPONENT_ID$5,
44
- 'data-garden-version': '9.0.0-next.10'
44
+ 'data-garden-version': '9.0.0-next.11'
45
45
  }).withConfig({
46
46
  displayName: "StyledSplitButton",
47
47
  componentId: "sc-1u4v04v-0"
@@ -62,7 +62,7 @@ const sizeStyles$1 = props => {
62
62
  };
63
63
  const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
64
64
  'data-garden-id': COMPONENT_ID$4,
65
- 'data-garden-version': '9.0.0-next.10'
65
+ 'data-garden-version': '9.0.0-next.11'
66
66
  }).withConfig({
67
67
  displayName: "StyledIcon",
68
68
  componentId: "sc-19meqgg-0"
@@ -78,9 +78,6 @@ const getBorderRadius = props => {
78
78
  }
79
79
  return props.theme.borderRadii.md;
80
80
  };
81
- const getDisabledBackgroundColor = props => {
82
- return reactTheming.getColorV8('neutralHue', 200, props.theme);
83
- };
84
81
  const getHeight = props => {
85
82
  if (props.size === 'small') {
86
83
  return `${props.theme.space.base * 8}px`;
@@ -89,65 +86,223 @@ const getHeight = props => {
89
86
  }
90
87
  return `${props.theme.space.base * 10}px`;
91
88
  };
92
- const colorStyles = props => {
89
+ const colorStyles = _ref => {
90
+ let {
91
+ theme,
92
+ isLink,
93
+ isBasic,
94
+ isDanger,
95
+ isNeutral,
96
+ isPrimary,
97
+ focusInset
98
+ } = _ref;
93
99
  let retVal;
94
- let hue;
95
- if (props.disabled || props.isNeutral && props.isPrimary && !props.isDanger) {
96
- hue = 'neutralHue';
97
- } else if (props.isDanger) {
98
- hue = 'dangerHue';
99
- } else {
100
- hue = 'primaryHue';
101
- }
102
- const shade = 600;
103
- const baseColor = reactTheming.getColorV8(hue, shade, props.theme);
104
- const hoverColor = reactTheming.getColorV8(hue, shade + 100, props.theme);
105
- const activeColor = reactTheming.getColorV8(hue, shade + 200, props.theme);
106
- const focusColor = reactTheming.getColorV8('primaryHue', shade, props.theme);
107
- const disabledBackgroundColor = getDisabledBackgroundColor(props);
108
- const disabledForegroundColor = reactTheming.getColorV8(hue, shade - 200, props.theme);
109
- if (props.isLink) {
110
- retVal = styled.css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, reactTheming.focusStyles({
111
- theme: props.theme,
100
+ const disabledBackgroundColor = reactTheming.getColor({
101
+ theme,
102
+ variable: 'background.disabled'
103
+ });
104
+ const disabledForegroundColor = reactTheming.getColor({
105
+ theme,
106
+ variable: 'foreground.disabled'
107
+ });
108
+ const offset100 = {
109
+ dark: {
110
+ offset: -100
111
+ },
112
+ light: {
113
+ offset: 100
114
+ }
115
+ };
116
+ const offset200 = {
117
+ dark: {
118
+ offset: -200
119
+ },
120
+ light: {
121
+ offset: 200
122
+ }
123
+ };
124
+ if (isLink) {
125
+ const options = {
126
+ theme,
127
+ variable: isDanger ? 'foreground.danger' : 'foreground.primary'
128
+ };
129
+ const foregroundColor = reactTheming.getColor(options);
130
+ const hoverForegroundColor = reactTheming.getColor({
131
+ ...options,
132
+ ...offset100
133
+ });
134
+ const activeForegroundColor = reactTheming.getColor({
135
+ ...options,
136
+ ...offset200
137
+ });
138
+ const focusOutlineColor = reactTheming.getColor({
139
+ theme,
140
+ variable: 'border.primaryEmphasis'
141
+ });
142
+ retVal = styled.css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], foregroundColor, reactTheming.focusStyles({
143
+ theme,
112
144
  condition: false,
113
145
  styles: {
114
- color: baseColor,
115
- outlineColor: focusColor
146
+ color: foregroundColor ,
147
+ outlineColor: focusOutlineColor
116
148
  }
117
- }), hoverColor, activeColor, disabledForegroundColor);
118
- } else if (props.isPrimary) {
119
- retVal = styled.css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], baseColor, props.theme.palette.white, hoverColor, reactTheming.focusStyles({
120
- theme: props.theme,
121
- inset: props.focusInset,
122
- shadowWidth: props.focusInset ? 'sm' : 'md',
123
- spacerWidth: props.focusInset ? 'sm' : 'xs',
124
- styles: props.isDanger && props.focusInset ? {
125
- borderColor: focusColor
149
+ }), hoverForegroundColor, activeForegroundColor, disabledForegroundColor);
150
+ } else if (isPrimary) {
151
+ let backgroundVariable;
152
+ if (isDanger) {
153
+ backgroundVariable = 'background.dangerEmphasis';
154
+ } else if (isNeutral) {
155
+ backgroundVariable = 'background.emphasis';
156
+ } else {
157
+ backgroundVariable = 'background.primaryEmphasis';
158
+ }
159
+ const options = {
160
+ theme,
161
+ variable: backgroundVariable
162
+ };
163
+ const backgroundColor = reactTheming.getColor(options);
164
+ const hoverBackgroundColor = reactTheming.getColor({
165
+ ...options,
166
+ ...offset100
167
+ });
168
+ const activeBackgroundColor = reactTheming.getColor({
169
+ ...options,
170
+ ...offset200
171
+ });
172
+ const foregroundColor = reactTheming.getColor({
173
+ theme,
174
+ variable: 'foreground.onEmphasis'
175
+ });
176
+ retVal = styled.css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], backgroundColor, foregroundColor, hoverBackgroundColor, reactTheming.focusStyles({
177
+ theme,
178
+ inset: focusInset,
179
+ shadowWidth: focusInset ? 'sm' : 'md',
180
+ spacerWidth: focusInset ? 'sm' : 'xs',
181
+ styles: (isDanger || isNeutral) && focusInset ? {
182
+ borderColor: reactTheming.getColor({
183
+ theme,
184
+ variable: 'border.primaryEmphasis'
185
+ })
126
186
  } : undefined
127
- }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
187
+ }), activeBackgroundColor, disabledBackgroundColor, disabledForegroundColor);
128
188
  } else {
129
- const borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColorV8('neutralHue', 300, props.theme) : baseColor;
130
- const foregroundColor = props.isNeutral ? reactTheming.getColorV8('foreground', 600 , props.theme) : baseColor;
131
- const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
132
- const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
133
- retVal = styled.css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, polished.rgba(baseColor, 0.08), hoverForegroundColor, reactTheming.focusStyles({
134
- theme: props.theme,
135
- inset: props.focusInset,
136
- styles: props.isNeutral ? {
137
- borderColor: baseColor
138
- } : undefined
139
- }), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
189
+ let borderColor;
190
+ let hoverBorderColor;
191
+ let activeBorderColor;
192
+ let focusBorderColor;
193
+ let backgroundVariable;
194
+ let foregroundVariable;
195
+ if (isDanger) {
196
+ if (!isBasic) {
197
+ const borderOptions = {
198
+ theme,
199
+ variable: 'border.dangerEmphasis'
200
+ };
201
+ borderColor = reactTheming.getColor(borderOptions);
202
+ hoverBorderColor = reactTheming.getColor({
203
+ ...borderOptions,
204
+ ...offset100
205
+ });
206
+ activeBorderColor = reactTheming.getColor({
207
+ ...borderOptions,
208
+ ...offset200
209
+ });
210
+ if (isNeutral) {
211
+ focusBorderColor = reactTheming.getColor(borderOptions);
212
+ }
213
+ }
214
+ backgroundVariable = 'background.dangerEmphasis';
215
+ foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.danger';
216
+ } else {
217
+ if (!isBasic) {
218
+ const borderOptions = {
219
+ theme,
220
+ variable: 'border.primaryEmphasis'
221
+ };
222
+ if (isNeutral) {
223
+ borderColor = reactTheming.getColor({
224
+ theme,
225
+ variable: 'border.default',
226
+ ...offset100
227
+ });
228
+ focusBorderColor = reactTheming.getColor(borderOptions);
229
+ } else {
230
+ borderColor = reactTheming.getColor(borderOptions);
231
+ }
232
+ hoverBorderColor = reactTheming.getColor({
233
+ ...borderOptions,
234
+ ...offset100
235
+ });
236
+ activeBorderColor = reactTheming.getColor({
237
+ ...borderOptions,
238
+ ...offset200
239
+ });
240
+ }
241
+ backgroundVariable = 'background.primaryEmphasis';
242
+ foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.primary';
243
+ }
244
+ const hoverBackgroundColor = reactTheming.getColor({
245
+ theme,
246
+ variable: backgroundVariable,
247
+ transparency: theme.opacity[100]
248
+ });
249
+ const activeBackgroundColor = reactTheming.getColor({
250
+ theme,
251
+ variable: backgroundVariable,
252
+ transparency: theme.opacity[200]
253
+ });
254
+ const foregroundOptions = {
255
+ theme,
256
+ variable: foregroundVariable
257
+ };
258
+ const foregroundColor = reactTheming.getColor(foregroundOptions);
259
+ let hoverForegroundColor;
260
+ let activeForegroundColor;
261
+ let iconForegroundColor;
262
+ let hoverIconForegroundColor;
263
+ let activeIconForegroundColor;
264
+ if (isNeutral) {
265
+ const iconOptions = {
266
+ theme,
267
+ variable: 'foreground.subtle'
268
+ };
269
+ iconForegroundColor = reactTheming.getColor(iconOptions);
270
+ hoverIconForegroundColor = reactTheming.getColor({
271
+ ...iconOptions,
272
+ ...offset100
273
+ });
274
+ activeIconForegroundColor = reactTheming.getColor({
275
+ ...iconOptions,
276
+ ...offset200
277
+ });
278
+ } else {
279
+ hoverForegroundColor = reactTheming.getColor({
280
+ ...foregroundOptions,
281
+ ...offset100
282
+ });
283
+ activeForegroundColor = reactTheming.getColor({
284
+ ...foregroundOptions,
285
+ ...offset200
286
+ });
287
+ }
288
+ retVal = styled.css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], borderColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
289
+ theme,
290
+ inset: focusInset,
291
+ styles: {
292
+ borderColor: focusBorderColor
293
+ }
294
+ }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, iconForegroundColor, StyledIcon, StyledIcon, hoverIconForegroundColor, StyledIcon, activeIconForegroundColor, StyledIcon, disabledForegroundColor);
140
295
  }
141
296
  return retVal;
142
297
  };
143
- const groupStyles = props => {
144
- const {
298
+ const groupStyles = _ref2 => {
299
+ let {
145
300
  theme,
146
301
  isPrimary,
147
302
  isBasic,
148
303
  isPill,
149
304
  focusInset
150
- } = props;
305
+ } = _ref2;
151
306
  const {
152
307
  rtl,
153
308
  borderWidths,
@@ -158,9 +313,15 @@ const groupStyles = props => {
158
313
  const marginOffset = borderWidths.sm;
159
314
  const marginDisplacement = `${isPrimary || isBasic ? '' : '-'}${marginOffset}`;
160
315
  const iconMarginDisplacement = isPill && '-2px';
161
- const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
316
+ const disabledBackgroundColor = !isPrimary && reactTheming.getColor({
317
+ theme,
318
+ variable: 'background.disabled'
319
+ });
162
320
  const borderColor = isBasic ? 'transparent' : 'revert';
163
- const focusColor = reactTheming.getColorV8('primaryHue', 600, theme);
321
+ const focusColor = reactTheming.getColor({
322
+ theme,
323
+ variable: 'border.primaryEmphasis'
324
+ });
164
325
  const focusBoxShadow = isBasic && !isPrimary && reactTheming.getFocusBoxShadow({
165
326
  theme,
166
327
  inset: focusInset,
@@ -203,7 +364,7 @@ const sizeStyles = props => {
203
364
  };
204
365
  const StyledButton = styled__default.default.button.attrs(props => ({
205
366
  'data-garden-id': COMPONENT_ID$3,
206
- 'data-garden-version': '9.0.0-next.10',
367
+ 'data-garden-version': '9.0.0-next.11',
207
368
  type: props.type || 'button'
208
369
  })).withConfig({
209
370
  displayName: "StyledButton",
@@ -216,7 +377,7 @@ StyledButton.defaultProps = {
216
377
  const COMPONENT_ID$2 = 'buttons.anchor';
217
378
  const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
218
379
  'data-garden-id': COMPONENT_ID$2,
219
- 'data-garden-version': '9.0.0-next.10',
380
+ 'data-garden-version': '9.0.0-next.11',
220
381
  as: 'a',
221
382
  dir: props.theme.rtl ? 'rtl' : undefined,
222
383
  isLink: true,
@@ -250,7 +411,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
250
411
  const COMPONENT_ID$1 = 'buttons.external_icon';
251
412
  const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
252
413
  'data-garden-id': COMPONENT_ID$1,
253
- 'data-garden-version': '9.0.0-next.10'
414
+ 'data-garden-version': '9.0.0-next.11'
254
415
  }).withConfig({
255
416
  displayName: "StyledExternalIcon",
256
417
  componentId: "sc-16oz07e-0"
@@ -260,11 +421,33 @@ StyledExternalIcon.defaultProps = {
260
421
  };
261
422
 
262
423
  const COMPONENT_ID = 'buttons.icon_button';
263
- const iconColorStyles = props => {
264
- const shade = 600;
265
- const baseColor = reactTheming.getColorV8('neutralHue', shade, props.theme);
266
- const hoverColor = reactTheming.getColorV8('neutralHue', shade + 100, props.theme);
267
- const activeColor = reactTheming.getColorV8('neutralHue', shade + 200, props.theme);
424
+ const iconColorStyles = _ref => {
425
+ let {
426
+ theme
427
+ } = _ref;
428
+ const options = {
429
+ theme,
430
+ variable: 'foreground.default'
431
+ };
432
+ const baseColor = reactTheming.getColor(options);
433
+ const hoverColor = reactTheming.getColor({
434
+ ...options,
435
+ dark: {
436
+ offset: -100
437
+ },
438
+ light: {
439
+ offset: 100
440
+ }
441
+ });
442
+ const activeColor = reactTheming.getColor({
443
+ ...options,
444
+ dark: {
445
+ offset: -200
446
+ },
447
+ light: {
448
+ offset: 200
449
+ }
450
+ });
268
451
  return styled.css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
269
452
  };
270
453
  const iconButtonStyles = props => {
@@ -277,7 +460,7 @@ const iconStyles = props => {
277
460
  };
278
461
  const StyledIconButton = styled__default.default(StyledButton).attrs({
279
462
  'data-garden-id': COMPONENT_ID,
280
- 'data-garden-version': '9.0.0-next.10'
463
+ 'data-garden-version': '9.0.0-next.11'
281
464
  }).withConfig({
282
465
  displayName: "StyledIconButton",
283
466
  componentId: "sc-1t0ughp-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-buttons",
3
- "version": "9.0.0-next.10",
3
+ "version": "9.0.0-next.11",
4
4
  "description": "Components relating to buttons in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
33
33
  "styled-components": "^5.3.1"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^9.0.0-next.10",
36
+ "@zendeskgarden/react-theming": "^9.0.0-next.11",
37
37
  "@zendeskgarden/svg-icons": "7.0.0"
38
38
  },
39
39
  "keywords": [
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "zendeskgarden:src": "src/index.ts",
49
- "gitHead": "818e6100aa6676af7e972198b82516d330307d60"
49
+ "gitHead": "0de1cc664807bd993ccd3beeb78e8fd1f3828320"
50
50
  }