@zendeskgarden/react-tooltips 9.0.0-next.12 → 9.0.0-next.14

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 (5) hide show
  1. package/dist/esm/styled/StyledParagraph.js +1 -1
  2. package/dist/esm/styled/StyledTitle.js +1 -1
  3. package/dist/esm/styled/StyledTooltip.js +62 -13
  4. package/dist/index.cjs.js +63 -14
  5. package/package.json +5 -5
package/dist/esm/styled/StyledParagraph.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'tooltip.paragraph';
11
11
  const StyledParagraph = styled.p.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.12'
13
+ 'data-garden-version': '9.0.0-next.14'
14
14
  }).withConfig({
15
15
  displayName: "StyledParagraph",
16
16
  componentId: "sc-wuqkfc-0"
package/dist/esm/styled/StyledTitle.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'tooltip.title';
11
11
  const StyledTitle = styled.strong.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.12'
13
+ 'data-garden-version': '9.0.0-next.14'
14
14
  }).withConfig({
15
15
  displayName: "StyledTitle",
16
16
  componentId: "sc-vnjcvz-0"
package/dist/esm/styled/StyledTooltip.js CHANGED
@@ -5,7 +5,7 @@
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, getLineHeight, arrowStyles, getArrowPosition, getColorV8 } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getArrowPosition, getColor } from '@zendeskgarden/react-theming';
9
9
  import { StyledParagraph } from './StyledParagraph.js';
10
10
  import { StyledTitle } from './StyledTitle.js';
11
11
 
@@ -81,27 +81,76 @@ const colorStyles = _ref2 => {
81
81
  theme,
82
82
  type
83
83
  } = _ref2;
84
- let border;
85
- let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
86
- let backgroundColor = getColorV8('chromeHue', 700, theme);
87
- let color = getColorV8('background', 600 , theme);
84
+ let borderColor;
85
+ let boxShadow;
86
+ let backgroundColor;
87
+ let color;
88
88
  let titleColor;
89
89
  if (type === 'light') {
90
- boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColorV8('chromeHue', 600, theme, 0.15));
91
- border = `${theme.borders.sm} ${getColorV8('neutralHue', 300, theme)}`;
92
- backgroundColor = getColorV8('background', 600 , theme);
93
- color = getColorV8('neutralHue', 700, theme);
94
- titleColor = getColorV8('foreground', 600 , theme);
90
+ borderColor = getColor({
91
+ theme,
92
+ variable: 'border.default'
93
+ });
94
+ boxShadow = theme.shadows.lg(`${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`, `${theme.space.base * (theme.colors.base === 'dark' ? 6 : 7)}px`, getColor({
95
+ theme,
96
+ hue: 'neutralHue',
97
+ shade: 1200,
98
+ light: {
99
+ transparency: theme.opacity[200]
100
+ },
101
+ dark: {
102
+ transparency: theme.opacity[800]
103
+ }
104
+ }));
105
+ backgroundColor = getColor({
106
+ theme,
107
+ variable: 'background.raised'
108
+ });
109
+ color = getColor({
110
+ theme,
111
+ variable: 'foreground.subtle'
112
+ });
113
+ titleColor = getColor({
114
+ theme,
115
+ variable: 'foreground.default'
116
+ });
117
+ } else {
118
+ borderColor = 'transparent';
119
+ boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
120
+ theme,
121
+ hue: 'neutralHue',
122
+ shade: 1200,
123
+ light: {
124
+ transparency: theme.opacity[200]
125
+ },
126
+ dark: {
127
+ transparency: theme.opacity[1100]
128
+ }
129
+ }));
130
+ backgroundColor = getColor({
131
+ theme,
132
+ hue: 'neutralHue',
133
+ light: {
134
+ shade: 900
135
+ },
136
+ dark: {
137
+ shade: 700
138
+ }
139
+ });
140
+ color = getColor({
141
+ theme,
142
+ hue: 'white'
143
+ });
95
144
  }
96
- return css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
145
+ return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], borderColor, boxShadow, backgroundColor, color, StyledTitle, titleColor);
97
146
  };
98
147
  const StyledTooltip = styled.div.attrs({
99
148
  'data-garden-id': COMPONENT_ID,
100
- 'data-garden-version': '9.0.0-next.12'
149
+ 'data-garden-version': '9.0.0-next.14'
101
150
  }).withConfig({
102
151
  displayName: "StyledTooltip",
103
152
  componentId: "sc-gzzjq4-0"
104
- })(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
153
+ })(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
105
154
  StyledTooltip.defaultProps = {
106
155
  theme: DEFAULT_THEME
107
156
  };
package/dist/index.cjs.js CHANGED
@@ -25,7 +25,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
25
25
  const COMPONENT_ID$2 = 'tooltip.paragraph';
26
26
  const StyledParagraph = styled__default.default.p.attrs({
27
27
  'data-garden-id': COMPONENT_ID$2,
28
- 'data-garden-version': '9.0.0-next.12'
28
+ 'data-garden-version': '9.0.0-next.14'
29
29
  }).withConfig({
30
30
  displayName: "StyledParagraph",
31
31
  componentId: "sc-wuqkfc-0"
@@ -37,7 +37,7 @@ StyledParagraph.defaultProps = {
37
37
  const COMPONENT_ID$1 = 'tooltip.title';
38
38
  const StyledTitle = styled__default.default.strong.attrs({
39
39
  'data-garden-id': COMPONENT_ID$1,
40
- 'data-garden-version': '9.0.0-next.12'
40
+ 'data-garden-version': '9.0.0-next.14'
41
41
  }).withConfig({
42
42
  displayName: "StyledTitle",
43
43
  componentId: "sc-vnjcvz-0"
@@ -118,27 +118,76 @@ const colorStyles = _ref2 => {
118
118
  theme,
119
119
  type
120
120
  } = _ref2;
121
- let border;
122
- let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
123
- let backgroundColor = reactTheming.getColorV8('chromeHue', 700, theme);
124
- let color = reactTheming.getColorV8('background', 600 , theme);
121
+ let borderColor;
122
+ let boxShadow;
123
+ let backgroundColor;
124
+ let color;
125
125
  let titleColor;
126
126
  if (type === 'light') {
127
- boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
128
- border = `${theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, theme)}`;
129
- backgroundColor = reactTheming.getColorV8('background', 600 , theme);
130
- color = reactTheming.getColorV8('neutralHue', 700, theme);
131
- titleColor = reactTheming.getColorV8('foreground', 600 , theme);
127
+ borderColor = reactTheming.getColor({
128
+ theme,
129
+ variable: 'border.default'
130
+ });
131
+ boxShadow = theme.shadows.lg(`${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`, `${theme.space.base * (theme.colors.base === 'dark' ? 6 : 7)}px`, reactTheming.getColor({
132
+ theme,
133
+ hue: 'neutralHue',
134
+ shade: 1200,
135
+ light: {
136
+ transparency: theme.opacity[200]
137
+ },
138
+ dark: {
139
+ transparency: theme.opacity[800]
140
+ }
141
+ }));
142
+ backgroundColor = reactTheming.getColor({
143
+ theme,
144
+ variable: 'background.raised'
145
+ });
146
+ color = reactTheming.getColor({
147
+ theme,
148
+ variable: 'foreground.subtle'
149
+ });
150
+ titleColor = reactTheming.getColor({
151
+ theme,
152
+ variable: 'foreground.default'
153
+ });
154
+ } else {
155
+ borderColor = 'transparent';
156
+ boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor({
157
+ theme,
158
+ hue: 'neutralHue',
159
+ shade: 1200,
160
+ light: {
161
+ transparency: theme.opacity[200]
162
+ },
163
+ dark: {
164
+ transparency: theme.opacity[1100]
165
+ }
166
+ }));
167
+ backgroundColor = reactTheming.getColor({
168
+ theme,
169
+ hue: 'neutralHue',
170
+ light: {
171
+ shade: 900
172
+ },
173
+ dark: {
174
+ shade: 700
175
+ }
176
+ });
177
+ color = reactTheming.getColor({
178
+ theme,
179
+ hue: 'white'
180
+ });
132
181
  }
133
- return styled.css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
182
+ return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], borderColor, boxShadow, backgroundColor, color, StyledTitle, titleColor);
134
183
  };
135
184
  const StyledTooltip = styled__default.default.div.attrs({
136
185
  'data-garden-id': COMPONENT_ID,
137
- 'data-garden-version': '9.0.0-next.12'
186
+ 'data-garden-version': '9.0.0-next.14'
138
187
  }).withConfig({
139
188
  displayName: "StyledTooltip",
140
189
  componentId: "sc-gzzjq4-0"
141
- })(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
190
+ })(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
142
191
  StyledTooltip.defaultProps = {
143
192
  theme: reactTheming.DEFAULT_THEME
144
193
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tooltips",
3
- "version": "9.0.0-next.12",
3
+ "version": "9.0.0-next.14",
4
4
  "description": "Collection of components and render prop containers relating to Tooltips in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,9 +22,9 @@
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
24
  "@floating-ui/react-dom": "^2.0.0",
25
- "@zendeskgarden/container-tooltip": "^1.0.0",
25
+ "@zendeskgarden/container-tooltip": "^1.0.16",
26
26
  "@zendeskgarden/container-utilities": "^2.0.0",
27
- "polished": "^4.0.0",
27
+ "polished": "^4.3.1",
28
28
  "prop-types": "^15.5.7",
29
29
  "react-merge-refs": "^2.0.0"
30
30
  },
@@ -35,7 +35,7 @@
35
35
  "styled-components": "^5.3.1"
36
36
  },
37
37
  "devDependencies": {
38
- "@zendeskgarden/react-theming": "^9.0.0-next.12"
38
+ "@zendeskgarden/react-theming": "^9.0.0-next.14"
39
39
  },
40
40
  "keywords": [
41
41
  "components",
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "zendeskgarden:src": "src/index.ts",
50
- "gitHead": "7925ff78236795111e2953efbce549839df3a86d"
50
+ "gitHead": "4cd4e10839f6d083f0c5e642b99256e390a37ae6"
51
51
  }