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

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 (12) hide show
  1. package/dist/esm/styled/StyledAnchor.js +2 -2
  2. package/dist/esm/styled/StyledButton.js +216 -55
  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 +37 -12
  6. package/dist/esm/styled/StyledSplitButton.js +1 -1
  7. package/dist/index.cjs.js +252 -66
  8. package/dist/typings/styled/StyledAnchor.d.ts +1 -8
  9. package/dist/typings/styled/StyledButton.d.ts +1 -0
  10. package/dist/typings/styled/StyledIconButton.d.ts +2 -4
  11. package/dist/typings/styled/index.d.ts +2 -2
  12. 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.12',
15
15
  as: 'a',
16
16
  dir: props.theme.rtl ? 'rtl' : undefined,
17
17
  isLink: true,
@@ -19,7 +19,7 @@ const StyledAnchor = styled(StyledButton).attrs(props => ({
19
19
  })).withConfig({
20
20
  displayName: "StyledAnchor",
21
21
  componentId: "sc-xshgmo-0"
22
- })(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
22
+ })(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(props['data-garden-id'], props));
23
23
  StyledAnchor.defaultProps = {
24
24
  theme: DEFAULT_THEME
25
25
  };
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,
@@ -141,8 +302,8 @@ const sizeStyles = props => {
141
302
  return retVal;
142
303
  };
143
304
  const StyledButton = styled.button.attrs(props => ({
144
- 'data-garden-id': COMPONENT_ID,
145
- 'data-garden-version': '9.0.0-next.10',
305
+ 'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
306
+ 'data-garden-version': '9.0.0-next.12',
146
307
  type: props.type || 'button'
147
308
  })).withConfig({
148
309
  displayName: "StyledButton",
@@ -152,4 +313,4 @@ StyledButton.defaultProps = {
152
313
  theme: DEFAULT_THEME
153
314
  };
154
315
 
155
- export { StyledButton, getHeight };
316
+ export { COMPONENT_ID, StyledButton, getHeight };
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.12'
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.12'
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';
9
- import { StyledButton, getHeight } from './StyledButton.js';
8
+ import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
9
+ import { StyledButton, COMPONENT_ID as COMPONENT_ID$1, 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.subtle'
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 => {
@@ -25,15 +47,18 @@ const iconStyles = props => {
25
47
  const size = props.theme.iconSizes.md;
26
48
  return css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
27
49
  };
28
- const StyledIconButton = styled(StyledButton).attrs({
29
- 'data-garden-id': COMPONENT_ID,
30
- 'data-garden-version': '9.0.0-next.10'
50
+ const StyledIconButton = styled(StyledButton).attrs(props => {
51
+ const externalId = props['data-garden-id'];
52
+ return {
53
+ 'data-garden-id': externalId && externalId !== COMPONENT_ID$1 ? externalId : COMPONENT_ID,
54
+ 'data-garden-version': '9.0.0-next.12'
55
+ };
31
56
  }).withConfig({
32
57
  displayName: "StyledIconButton",
33
58
  componentId: "sc-1t0ughp-0"
34
- })(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
59
+ })(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(props['data-garden-id'], props));
35
60
  StyledIconButton.defaultProps = {
36
61
  theme: DEFAULT_THEME
37
62
  };
38
63
 
39
- export { StyledIconButton };
64
+ export { COMPONENT_ID, StyledIconButton };
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.12'
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.12'
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.12'
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,
@@ -202,8 +363,8 @@ const sizeStyles = props => {
202
363
  return retVal;
203
364
  };
204
365
  const StyledButton = styled__default.default.button.attrs(props => ({
205
- 'data-garden-id': COMPONENT_ID$3,
206
- 'data-garden-version': '9.0.0-next.10',
366
+ 'data-garden-id': props['data-garden-id'] || COMPONENT_ID$3,
367
+ 'data-garden-version': '9.0.0-next.12',
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.12',
220
381
  as: 'a',
221
382
  dir: props.theme.rtl ? 'rtl' : undefined,
222
383
  isLink: true,
@@ -224,7 +385,7 @@ const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
224
385
  })).withConfig({
225
386
  displayName: "StyledAnchor",
226
387
  componentId: "sc-xshgmo-0"
227
- })(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
388
+ })(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
228
389
  StyledAnchor.defaultProps = {
229
390
  theme: reactTheming.DEFAULT_THEME
230
391
  };
@@ -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.12'
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.subtle'
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 => {
@@ -275,13 +458,16 @@ const iconStyles = props => {
275
458
  const size = props.theme.iconSizes.md;
276
459
  return styled.css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
277
460
  };
278
- const StyledIconButton = styled__default.default(StyledButton).attrs({
279
- 'data-garden-id': COMPONENT_ID,
280
- 'data-garden-version': '9.0.0-next.10'
461
+ const StyledIconButton = styled__default.default(StyledButton).attrs(props => {
462
+ const externalId = props['data-garden-id'];
463
+ return {
464
+ 'data-garden-id': externalId && externalId !== COMPONENT_ID$3 ? externalId : COMPONENT_ID,
465
+ 'data-garden-version': '9.0.0-next.12'
466
+ };
281
467
  }).withConfig({
282
468
  displayName: "StyledIconButton",
283
469
  componentId: "sc-1t0ughp-0"
284
- })(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
470
+ })(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
285
471
  StyledIconButton.defaultProps = {
286
472
  theme: reactTheming.DEFAULT_THEME
287
473
  };
package/dist/typings/styled/StyledAnchor.d.ts CHANGED
@@ -7,11 +7,4 @@
7
7
  /**
8
8
  * Accepts all `<a>` props
9
9
  */
10
- export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").IButtonProps & {
11
- 'data-garden-id': string;
12
- 'data-garden-version': string;
13
- as: string;
14
- dir: "rtl" | undefined;
15
- isLink: boolean;
16
- type: undefined;
17
- }, "type" | "dir" | "as" | "data-garden-id" | "data-garden-version" | "isLink">;
10
+ export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("./../types").IButtonProps, never>;
package/dist/typings/styled/StyledButton.d.ts CHANGED
@@ -6,6 +6,7 @@
6
6
  */
7
7
  import { DefaultTheme, ThemeProps } from 'styled-components';
8
8
  import { IButtonProps } from '../types';
9
+ export declare const COMPONENT_ID = "buttons.button";
9
10
  export declare const getHeight: (props: IButtonProps & ThemeProps<DefaultTheme>) => string;
10
11
  /**
11
12
  * 1. FF <input type="submit"> fix
package/dist/typings/styled/StyledIconButton.d.ts CHANGED
@@ -6,7 +6,5 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { IButtonProps } from '../types';
9
- export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, {
10
- 'data-garden-id': string;
11
- 'data-garden-version': string;
12
- } & IButtonProps, "data-garden-id" | "data-garden-version">;
9
+ export declare const COMPONENT_ID = "buttons.icon_button";
10
+ export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, IButtonProps, never>;
package/dist/typings/styled/index.d.ts CHANGED
@@ -5,8 +5,8 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  export * from './StyledAnchor';
8
- export * from './StyledButton';
8
+ export { StyledButton } from './StyledButton';
9
9
  export * from './StyledSplitButton';
10
10
  export * from './StyledExternalIcon';
11
11
  export * from './StyledIcon';
12
- export * from './StyledIconButton';
12
+ export { StyledIconButton } from './StyledIconButton';
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.12",
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.12",
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": "7925ff78236795111e2953efbce549839df3a86d"
50
50
  }