@zendeskgarden/react-tags 9.0.0-next.11 → 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 (6) hide show
  1. package/dist/esm/styled/StyledAvatar.js +1 -1
  2. package/dist/esm/styled/StyledClose.js +2 -2
  3. package/dist/esm/styled/StyledTag.js +118 -17
  4. package/dist/index.cjs.js +120 -19
  5. package/dist/typings/types/index.d.ts +2 -1
  6. package/package.json +3 -3
package/dist/esm/styled/StyledAvatar.js CHANGED
@@ -10,7 +10,7 @@ import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendesk
10
10
  const COMPONENT_ID = 'tags.avatar';
11
11
  const StyledAvatar = styled(StyledBaseIcon).attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.11'
13
+ 'data-garden-version': '9.0.0-next.12'
14
14
  }).withConfig({
15
15
  displayName: "StyledAvatar",
16
16
  componentId: "sc-3kdmgt-0"
package/dist/esm/styled/StyledClose.js CHANGED
@@ -10,11 +10,11 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'tags.close';
11
11
  const StyledClose = styled.button.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.11'
13
+ 'data-garden-version': '9.0.0-next.12'
14
14
  }).withConfig({
15
15
  displayName: "StyledClose",
16
16
  componentId: "sc-d6lrpn-0"
17
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
17
+ })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:", ";border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:", ";}&:focus{outline:none;}&:active{opacity:", ";}", ";"], props => props.theme.opacity[1000], props => props.theme.opacity[1100], props => props.theme.opacity[1200], props => retrieveComponentStyles(COMPONENT_ID, props));
18
18
  StyledClose.defaultProps = {
19
19
  theme: DEFAULT_THEME
20
20
  };
package/dist/esm/styled/StyledTag.js CHANGED
@@ -6,33 +6,134 @@
6
6
  */
7
7
  import styled, { css } from 'styled-components';
8
8
  import { readableColor, math } from 'polished';
9
- import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
9
+ import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
10
10
  import { StyledAvatar } from './StyledAvatar.js';
11
11
  import { StyledClose } from './StyledClose.js';
12
12
 
13
13
  const COMPONENT_ID = 'tags.tag_view';
14
- const colorStyles = props => {
14
+ const colorStyles = _ref => {
15
+ let {
16
+ theme,
17
+ hue
18
+ } = _ref;
15
19
  let backgroundColor;
16
20
  let foregroundColor;
17
- let closeColor;
18
- if (props.hue) {
19
- const shade = props.hue === 'yellow' ? 400 : 600;
20
- backgroundColor = getColorV8(props.hue, shade, props.theme);
21
- if (props.hue === 'yellow' || props.hue === 'lemon') {
22
- foregroundColor = getColorV8('yellow', 800, props.theme);
23
- } else {
24
- foregroundColor = readableColor(backgroundColor, props.theme.palette.grey[800], props.theme.palette.white);
21
+ if (hue) {
22
+ foregroundColor = getColor({
23
+ theme,
24
+ variable: 'foreground.onEmphasis'
25
+ });
26
+ switch (hue) {
27
+ case 'grey':
28
+ case 'neutralHue':
29
+ backgroundColor = getColor({
30
+ theme,
31
+ variable: 'background.emphasis',
32
+ dark: {
33
+ offset: -300
34
+ }
35
+ });
36
+ break;
37
+ case 'blue':
38
+ case 'primaryHue':
39
+ backgroundColor = getColor({
40
+ theme,
41
+ variable: 'background.primaryEmphasis'
42
+ });
43
+ break;
44
+ case 'red':
45
+ case 'dangerHue':
46
+ backgroundColor = getColor({
47
+ theme,
48
+ variable: 'background.dangerEmphasis'
49
+ });
50
+ break;
51
+ case 'green':
52
+ case 'successHue':
53
+ backgroundColor = getColor({
54
+ theme,
55
+ variable: 'background.successEmphasis'
56
+ });
57
+ break;
58
+ case 'yellow':
59
+ case 'warningHue':
60
+ backgroundColor = getColor({
61
+ theme,
62
+ hue: 'warningHue',
63
+ shade: 400
64
+ });
65
+ if (theme.colors.base === 'light') {
66
+ foregroundColor = getColor({
67
+ theme,
68
+ variable: 'foreground.warningEmphasis'
69
+ });
70
+ }
71
+ break;
72
+ case 'kale':
73
+ case 'chromeHue':
74
+ backgroundColor = getColor({
75
+ theme,
76
+ hue: 'chromeHue',
77
+ dark: {
78
+ shade: 500
79
+ },
80
+ light: {
81
+ shade: 800
82
+ }
83
+ });
84
+ break;
85
+ default:
86
+ {
87
+ const lightTheme = {
88
+ ...theme,
89
+ colors: {
90
+ ...theme.colors,
91
+ base: 'light'
92
+ }
93
+ };
94
+ const darkTheme = {
95
+ ...theme,
96
+ colors: {
97
+ ...theme.colors,
98
+ base: 'dark'
99
+ }
100
+ };
101
+ const variable = 'foreground.onEmphasis';
102
+ backgroundColor = getColor({
103
+ theme,
104
+ hue
105
+ });
106
+ foregroundColor = readableColor(backgroundColor, getColor({
107
+ theme: darkTheme,
108
+ variable
109
+ }), getColor({
110
+ theme: lightTheme,
111
+ variable
112
+ }), false );
113
+ break;
114
+ }
25
115
  }
26
116
  } else {
27
- backgroundColor = getColorV8('neutralHue', 200, props.theme);
28
- foregroundColor = getColorV8('neutralHue', 700, props.theme);
29
- closeColor = getColorV8('neutralHue', 600, props.theme);
117
+ backgroundColor = getColor({
118
+ theme,
119
+ hue: 'neutralHue',
120
+ dark: {
121
+ shade: 800
122
+ },
123
+ light: {
124
+ shade: 200
125
+ }
126
+ });
127
+ foregroundColor = getColor({
128
+ theme,
129
+ variable: 'foreground.default'
130
+ });
30
131
  }
31
- return css(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, focusStyles({
32
- theme: props.theme,
132
+ return css(["background-color:", ";color:", ";&:hover{color:", ";}", ""], backgroundColor, foregroundColor, foregroundColor, focusStyles({
133
+ theme,
33
134
  shadowWidth: 'sm',
34
135
  selector: '&:focus'
35
- }), StyledClose, closeColor);
136
+ }));
36
137
  };
37
138
  const sizeStyles = props => {
38
139
  let borderRadius;
@@ -84,7 +185,7 @@ const sizeStyles = props => {
84
185
  };
85
186
  const StyledTag = styled.div.attrs({
86
187
  'data-garden-id': COMPONENT_ID,
87
- 'data-garden-version': '9.0.0-next.11'
188
+ 'data-garden-version': '9.0.0-next.12'
88
189
  }).withConfig({
89
190
  displayName: "StyledTag",
90
191
  componentId: "sc-1jvbe03-0"
package/dist/index.cjs.js CHANGED
@@ -41,7 +41,7 @@ const SIZE = ['small', 'medium', 'large'];
41
41
  const COMPONENT_ID$2 = 'tags.avatar';
42
42
  const StyledAvatar = styled__default.default(reactTheming.StyledBaseIcon).attrs({
43
43
  'data-garden-id': COMPONENT_ID$2,
44
- 'data-garden-version': '9.0.0-next.11'
44
+ 'data-garden-version': '9.0.0-next.12'
45
45
  }).withConfig({
46
46
  displayName: "StyledAvatar",
47
47
  componentId: "sc-3kdmgt-0"
@@ -53,38 +53,139 @@ StyledAvatar.defaultProps = {
53
53
  const COMPONENT_ID$1 = 'tags.close';
54
54
  const StyledClose = styled__default.default.button.attrs({
55
55
  'data-garden-id': COMPONENT_ID$1,
56
- 'data-garden-version': '9.0.0-next.11'
56
+ 'data-garden-version': '9.0.0-next.12'
57
57
  }).withConfig({
58
58
  displayName: "StyledClose",
59
59
  componentId: "sc-d6lrpn-0"
60
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
60
+ })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:", ";border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:", ";}&:focus{outline:none;}&:active{opacity:", ";}", ";"], props => props.theme.opacity[1000], props => props.theme.opacity[1100], props => props.theme.opacity[1200], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
61
61
  StyledClose.defaultProps = {
62
62
  theme: reactTheming.DEFAULT_THEME
63
63
  };
64
64
 
65
65
  const COMPONENT_ID = 'tags.tag_view';
66
- const colorStyles = props => {
66
+ const colorStyles = _ref => {
67
+ let {
68
+ theme,
69
+ hue
70
+ } = _ref;
67
71
  let backgroundColor;
68
72
  let foregroundColor;
69
- let closeColor;
70
- if (props.hue) {
71
- const shade = props.hue === 'yellow' ? 400 : 600;
72
- backgroundColor = reactTheming.getColorV8(props.hue, shade, props.theme);
73
- if (props.hue === 'yellow' || props.hue === 'lemon') {
74
- foregroundColor = reactTheming.getColorV8('yellow', 800, props.theme);
75
- } else {
76
- foregroundColor = polished.readableColor(backgroundColor, props.theme.palette.grey[800], props.theme.palette.white);
73
+ if (hue) {
74
+ foregroundColor = reactTheming.getColor({
75
+ theme,
76
+ variable: 'foreground.onEmphasis'
77
+ });
78
+ switch (hue) {
79
+ case 'grey':
80
+ case 'neutralHue':
81
+ backgroundColor = reactTheming.getColor({
82
+ theme,
83
+ variable: 'background.emphasis',
84
+ dark: {
85
+ offset: -300
86
+ }
87
+ });
88
+ break;
89
+ case 'blue':
90
+ case 'primaryHue':
91
+ backgroundColor = reactTheming.getColor({
92
+ theme,
93
+ variable: 'background.primaryEmphasis'
94
+ });
95
+ break;
96
+ case 'red':
97
+ case 'dangerHue':
98
+ backgroundColor = reactTheming.getColor({
99
+ theme,
100
+ variable: 'background.dangerEmphasis'
101
+ });
102
+ break;
103
+ case 'green':
104
+ case 'successHue':
105
+ backgroundColor = reactTheming.getColor({
106
+ theme,
107
+ variable: 'background.successEmphasis'
108
+ });
109
+ break;
110
+ case 'yellow':
111
+ case 'warningHue':
112
+ backgroundColor = reactTheming.getColor({
113
+ theme,
114
+ hue: 'warningHue',
115
+ shade: 400
116
+ });
117
+ if (theme.colors.base === 'light') {
118
+ foregroundColor = reactTheming.getColor({
119
+ theme,
120
+ variable: 'foreground.warningEmphasis'
121
+ });
122
+ }
123
+ break;
124
+ case 'kale':
125
+ case 'chromeHue':
126
+ backgroundColor = reactTheming.getColor({
127
+ theme,
128
+ hue: 'chromeHue',
129
+ dark: {
130
+ shade: 500
131
+ },
132
+ light: {
133
+ shade: 800
134
+ }
135
+ });
136
+ break;
137
+ default:
138
+ {
139
+ const lightTheme = {
140
+ ...theme,
141
+ colors: {
142
+ ...theme.colors,
143
+ base: 'light'
144
+ }
145
+ };
146
+ const darkTheme = {
147
+ ...theme,
148
+ colors: {
149
+ ...theme.colors,
150
+ base: 'dark'
151
+ }
152
+ };
153
+ const variable = 'foreground.onEmphasis';
154
+ backgroundColor = reactTheming.getColor({
155
+ theme,
156
+ hue
157
+ });
158
+ foregroundColor = polished.readableColor(backgroundColor, reactTheming.getColor({
159
+ theme: darkTheme,
160
+ variable
161
+ }), reactTheming.getColor({
162
+ theme: lightTheme,
163
+ variable
164
+ }), false );
165
+ break;
166
+ }
77
167
  }
78
168
  } else {
79
- backgroundColor = reactTheming.getColorV8('neutralHue', 200, props.theme);
80
- foregroundColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
81
- closeColor = reactTheming.getColorV8('neutralHue', 600, props.theme);
169
+ backgroundColor = reactTheming.getColor({
170
+ theme,
171
+ hue: 'neutralHue',
172
+ dark: {
173
+ shade: 800
174
+ },
175
+ light: {
176
+ shade: 200
177
+ }
178
+ });
179
+ foregroundColor = reactTheming.getColor({
180
+ theme,
181
+ variable: 'foreground.default'
182
+ });
82
183
  }
83
- return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, reactTheming.focusStyles({
84
- theme: props.theme,
184
+ return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}", ""], backgroundColor, foregroundColor, foregroundColor, reactTheming.focusStyles({
185
+ theme,
85
186
  shadowWidth: 'sm',
86
187
  selector: '&:focus'
87
- }), StyledClose, closeColor);
188
+ }));
88
189
  };
89
190
  const sizeStyles = props => {
90
191
  let borderRadius;
@@ -136,7 +237,7 @@ const sizeStyles = props => {
136
237
  };
137
238
  const StyledTag = styled__default.default.div.attrs({
138
239
  'data-garden-id': COMPONENT_ID,
139
- 'data-garden-version': '9.0.0-next.11'
240
+ 'data-garden-version': '9.0.0-next.12'
140
241
  }).withConfig({
141
242
  displayName: "StyledTag",
142
243
  componentId: "sc-1jvbe03-0"
package/dist/typings/types/index.d.ts CHANGED
@@ -11,7 +11,8 @@ export interface ITagProps extends HTMLAttributes<HTMLDivElement> {
11
11
  size?: (typeof SIZE)[number];
12
12
  /**
13
13
  * Sets the color of the tag. Refer to
14
- * [PALETTE](/components/palette#palette)
14
+ * theming [colors](components/theme-object#colors)
15
+ * or [PALETTE](/components/palette#palette)
15
16
  * for available colors. Accepts any hex value.
16
17
  */
17
18
  hue?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tags",
3
- "version": "9.0.0-next.11",
3
+ "version": "9.0.0-next.12",
4
4
  "description": "Components relating to tags in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,7 +32,7 @@
32
32
  "styled-components": "^5.3.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^9.0.0-next.11",
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.12",
36
36
  "@zendeskgarden/svg-icons": "7.0.0"
37
37
  },
38
38
  "keywords": [
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "0de1cc664807bd993ccd3beeb78e8fd1f3828320"
48
+ "gitHead": "7925ff78236795111e2953efbce549839df3a86d"
49
49
  }