@zendeskgarden/react-notifications 8.74.2 → 8.75.0

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 (4) hide show
  1. package/dist/index.cjs.js +68 -69
  2. package/dist/index.esm.js +69 -70
  3. package/dist/typings/styled/global-alert/StyledGlobalAlertButton.d.ts +1 -1
  4. package/package.json +4 -4
package/dist/index.cjs.js CHANGED
@@ -60,11 +60,11 @@ const TYPE = ['success', 'warning', 'error', 'info'];
60
60
  const COMPONENT_ID$b = 'notifications.close';
61
61
  const StyledClose = styled__default.default.button.attrs({
62
62
  'data-garden-id': COMPONENT_ID$b,
63
- 'data-garden-version': '8.74.2'
63
+ 'data-garden-version': '8.75.0'
64
64
  }).withConfig({
65
65
  displayName: "StyledClose",
66
66
  componentId: "sc-1mr9nx1-0"
67
- })(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? reactTheming.getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : reactTheming.getColor('neutralHue', 600, props.theme), props => props.hue ? reactTheming.getColor(props.hue, 800, props.theme) : reactTheming.getColor('neutralHue', 800, props.theme), props => reactTheming.focusStyles({
67
+ })(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? reactTheming.getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.hue ? reactTheming.getColorV8(props.hue, 800, props.theme) : reactTheming.getColorV8('neutralHue', 800, props.theme), props => reactTheming.focusStyles({
68
68
  theme: props.theme,
69
69
  inset: true
70
70
  }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
@@ -75,7 +75,7 @@ StyledClose.defaultProps = {
75
75
  const COMPONENT_ID$a = 'notifications.paragraph';
76
76
  const StyledParagraph = styled__default.default.p.attrs({
77
77
  'data-garden-id': COMPONENT_ID$a,
78
- 'data-garden-version': '8.74.2'
78
+ 'data-garden-version': '8.75.0'
79
79
  }).withConfig({
80
80
  displayName: "StyledParagraph",
81
81
  componentId: "sc-12tmd6p-0"
@@ -87,11 +87,11 @@ StyledParagraph.defaultProps = {
87
87
  const COMPONENT_ID$9 = 'notifications.title';
88
88
  const StyledTitle = styled__default.default.div.attrs({
89
89
  'data-garden-id': COMPONENT_ID$9,
90
- 'data-garden-version': '8.74.2'
90
+ 'data-garden-version': '8.75.0'
91
91
  }).withConfig({
92
92
  displayName: "StyledTitle",
93
93
  componentId: "sc-xx4jsv-0"
94
- })(["margin:0;color:", ";font-weight:", ";", ";"], props => props.theme.colors.foreground, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
94
+ })(["margin:0;color:", ";font-weight:", ";", ";"], props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
95
95
  StyledTitle.defaultProps = {
96
96
  theme: reactTheming.DEFAULT_THEME
97
97
  };
@@ -106,7 +106,7 @@ const boxShadow = props => {
106
106
  } = theme;
107
107
  const offsetY = `${space.base * 5}px`;
108
108
  const blurRadius = `${space.base * 7}px`;
109
- const color = reactTheming.getColor('chromeHue', 600, theme, 0.15);
109
+ const color = reactTheming.getColorV8('chromeHue', 600, theme, 0.15);
110
110
  return shadows.lg(offsetY, blurRadius, color);
111
111
  };
112
112
  const colorStyles$6 = props => {
@@ -114,13 +114,13 @@ const colorStyles$6 = props => {
114
114
  let borderColor;
115
115
  let foregroundColor;
116
116
  if (props.hue) {
117
- backgroundColor = reactTheming.getColor(props.hue, 100, props.theme);
118
- borderColor = reactTheming.getColor(props.hue, 300, props.theme);
119
- foregroundColor = reactTheming.getColor(props.hue, props.type === 'info' ? 600 : 700, props.theme);
117
+ backgroundColor = reactTheming.getColorV8(props.hue, 100, props.theme);
118
+ borderColor = reactTheming.getColorV8(props.hue, 300, props.theme);
119
+ foregroundColor = reactTheming.getColorV8(props.hue, props.type === 'info' ? 600 : 700, props.theme);
120
120
  } else {
121
- backgroundColor = props.theme.colors.background;
122
- borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
123
- foregroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
121
+ backgroundColor = reactTheming.getColorV8('background', 600 , props.theme);
122
+ borderColor = reactTheming.getColorV8('neutralHue', 300, props.theme);
123
+ foregroundColor = reactTheming.getColorV8('neutralHue', 800, props.theme);
124
124
  }
125
125
  return styled.css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
126
126
  };
@@ -141,10 +141,10 @@ StyledBase.defaultProps = {
141
141
  };
142
142
 
143
143
  const COMPONENT_ID$8 = 'notifications.alert';
144
- const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColor(props.hue, 800, props.theme));
144
+ const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColorV8(props.hue, 800, props.theme));
145
145
  const StyledAlert = styled__default.default(StyledBase).attrs({
146
146
  'data-garden-id': COMPONENT_ID$8,
147
- 'data-garden-version': '8.74.2'
147
+ 'data-garden-version': '8.75.0'
148
148
  }).withConfig({
149
149
  displayName: "StyledAlert",
150
150
  componentId: "sc-fyn8jp-0"
@@ -165,22 +165,21 @@ const colorStyles$4 = props => {
165
165
  const {
166
166
  successHue,
167
167
  dangerHue,
168
- warningHue,
169
- foreground
168
+ warningHue
170
169
  } = colors;
171
170
  let color;
172
171
  switch (type) {
173
172
  case 'success':
174
- color = reactTheming.getColor(successHue, 600, theme);
173
+ color = reactTheming.getColorV8(successHue, 600, theme);
175
174
  break;
176
175
  case 'error':
177
- color = reactTheming.getColor(dangerHue, 600, theme);
176
+ color = reactTheming.getColorV8(dangerHue, 600, theme);
178
177
  break;
179
178
  case 'warning':
180
- color = reactTheming.getColor(warningHue, 700, theme);
179
+ color = reactTheming.getColorV8(warningHue, 700, theme);
181
180
  break;
182
181
  case 'info':
183
- color = foreground;
182
+ color = reactTheming.getColorV8('foreground', 600 , theme);
184
183
  break;
185
184
  default:
186
185
  color = 'inherit';
@@ -190,7 +189,7 @@ const colorStyles$4 = props => {
190
189
  };
191
190
  const StyledNotification = styled__default.default(StyledBase).attrs({
192
191
  'data-garden-id': COMPONENT_ID$7,
193
- 'data-garden-version': '8.74.2'
192
+ 'data-garden-version': '8.75.0'
194
193
  }).withConfig({
195
194
  displayName: "StyledNotification",
196
195
  componentId: "sc-uf6jh-0"
@@ -205,11 +204,11 @@ StyledNotification.defaultProps = {
205
204
  const COMPONENT_ID$6 = 'notifications.well';
206
205
  const StyledWell = styled__default.default(StyledBase).attrs({
207
206
  'data-garden-id': COMPONENT_ID$6,
208
- 'data-garden-version': '8.74.2'
207
+ 'data-garden-version': '8.75.0'
209
208
  }).withConfig({
210
209
  displayName: "StyledWell",
211
210
  componentId: "sc-a5831c-0"
212
- })(["background-color:", ";color:", " ", ";"], props => props.isRecessed && reactTheming.getColor('neutralHue', 100, props.theme), props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
211
+ })(["background-color:", ";color:", " ", ";"], props => props.isRecessed && reactTheming.getColorV8('neutralHue', 100, props.theme), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
213
212
  StyledWell.defaultProps = {
214
213
  theme: reactTheming.DEFAULT_THEME
215
214
  };
@@ -223,7 +222,7 @@ const StyledIcon = styled__default.default(_ref => {
223
222
  }).withConfig({
224
223
  displayName: "StyledIcon",
225
224
  componentId: "sc-msklws-0"
226
- })(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && reactTheming.getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
225
+ })(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && reactTheming.getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
227
226
  StyledIcon.defaultProps = {
228
227
  theme: reactTheming.DEFAULT_THEME
229
228
  };
@@ -238,35 +237,35 @@ const colorStyles$3 = props => {
238
237
  let focusColor;
239
238
  switch (props.alertType) {
240
239
  case 'success':
241
- borderColor = reactTheming.getColor('successHue', 700, props.theme);
242
- backgroundColor = reactTheming.getColor('successHue', 600, props.theme);
243
- foregroundColor = reactTheming.getColor('successHue', 100, props.theme);
240
+ borderColor = reactTheming.getColorV8('successHue', 700, props.theme);
241
+ backgroundColor = reactTheming.getColorV8('successHue', 600, props.theme);
242
+ foregroundColor = reactTheming.getColorV8('successHue', 100, props.theme);
244
243
  anchorHoverColor = props.theme.palette.white;
245
244
  anchorActiveColor = props.theme.palette.white;
246
245
  focusColor = 'successHue';
247
246
  break;
248
247
  case 'error':
249
- borderColor = reactTheming.getColor('dangerHue', 700, props.theme);
250
- backgroundColor = reactTheming.getColor('dangerHue', 600, props.theme);
251
- foregroundColor = reactTheming.getColor('dangerHue', 100, props.theme);
248
+ borderColor = reactTheming.getColorV8('dangerHue', 700, props.theme);
249
+ backgroundColor = reactTheming.getColorV8('dangerHue', 600, props.theme);
250
+ foregroundColor = reactTheming.getColorV8('dangerHue', 100, props.theme);
252
251
  anchorHoverColor = props.theme.palette.white;
253
252
  anchorActiveColor = props.theme.palette.white;
254
253
  focusColor = 'dangerHue';
255
254
  break;
256
255
  case 'warning':
257
- borderColor = reactTheming.getColor('warningHue', 400, props.theme);
258
- backgroundColor = reactTheming.getColor('warningHue', 300, props.theme);
259
- foregroundColor = reactTheming.getColor('warningHue', 800, props.theme);
260
- anchorHoverColor = reactTheming.getColor('warningHue', 900, props.theme);
261
- anchorActiveColor = reactTheming.getColor('warningHue', 1000, props.theme);
256
+ borderColor = reactTheming.getColorV8('warningHue', 400, props.theme);
257
+ backgroundColor = reactTheming.getColorV8('warningHue', 300, props.theme);
258
+ foregroundColor = reactTheming.getColorV8('warningHue', 800, props.theme);
259
+ anchorHoverColor = reactTheming.getColorV8('warningHue', 900, props.theme);
260
+ anchorActiveColor = reactTheming.getColorV8('warningHue', 1000, props.theme);
262
261
  focusColor = 'warningHue';
263
262
  break;
264
263
  case 'info':
265
- borderColor = reactTheming.getColor('primaryHue', 300, props.theme);
266
- backgroundColor = reactTheming.getColor('primaryHue', 200, props.theme);
267
- foregroundColor = reactTheming.getColor('primaryHue', 700, props.theme);
268
- anchorHoverColor = reactTheming.getColor('primaryHue', 800, props.theme);
269
- anchorActiveColor = reactTheming.getColor('primaryHue', 900, props.theme);
264
+ borderColor = reactTheming.getColorV8('primaryHue', 300, props.theme);
265
+ backgroundColor = reactTheming.getColorV8('primaryHue', 200, props.theme);
266
+ foregroundColor = reactTheming.getColorV8('primaryHue', 700, props.theme);
267
+ anchorHoverColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
268
+ anchorActiveColor = reactTheming.getColorV8('primaryHue', 900, props.theme);
270
269
  focusColor = 'primaryHue';
271
270
  break;
272
271
  }
@@ -292,7 +291,7 @@ const sizeStyles$3 = props => {
292
291
  };
293
292
  const StyledGlobalAlert = styled__default.default.div.attrs({
294
293
  'data-garden-id': COMPONENT_ID$5,
295
- 'data-garden-version': '8.74.2'
294
+ 'data-garden-version': '8.75.0'
296
295
  }).withConfig({
297
296
  displayName: "StyledGlobalAlert",
298
297
  componentId: "sc-k6rimt-0"
@@ -310,31 +309,31 @@ const colorStyles$2 = props => {
310
309
  let focusColor;
311
310
  switch (props.alertType) {
312
311
  case 'success':
313
- hoverBackgroundColor = reactTheming.getColor('successHue', 100, props.theme, 0.08);
312
+ hoverBackgroundColor = reactTheming.getColorV8('successHue', 100, props.theme, 0.08);
314
313
  hoverForegroundColor = props.theme.palette.white;
315
- activeBackgroundColor = reactTheming.getColor('successHue', 100, props.theme, 0.2);
314
+ activeBackgroundColor = reactTheming.getColorV8('successHue', 100, props.theme, 0.2);
316
315
  activeForegroundColor = props.theme.palette.white;
317
316
  focusColor = 'successHue';
318
317
  break;
319
318
  case 'error':
320
- hoverBackgroundColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.08);
319
+ hoverBackgroundColor = reactTheming.getColorV8('dangerHue', 100, props.theme, 0.08);
321
320
  hoverForegroundColor = props.theme.palette.white;
322
- activeBackgroundColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.2);
321
+ activeBackgroundColor = reactTheming.getColorV8('dangerHue', 100, props.theme, 0.2);
323
322
  activeForegroundColor = props.theme.palette.white;
324
323
  focusColor = 'dangerHue';
325
324
  break;
326
325
  case 'warning':
327
- hoverBackgroundColor = reactTheming.getColor('warningHue', 800, props.theme, 0.08);
328
- hoverForegroundColor = reactTheming.getColor('warningHue', 900, props.theme);
329
- activeBackgroundColor = reactTheming.getColor('warningHue', 800, props.theme, 0.2);
330
- activeForegroundColor = reactTheming.getColor('warningHue', 1000, props.theme);
326
+ hoverBackgroundColor = reactTheming.getColorV8('warningHue', 800, props.theme, 0.08);
327
+ hoverForegroundColor = reactTheming.getColorV8('warningHue', 900, props.theme);
328
+ activeBackgroundColor = reactTheming.getColorV8('warningHue', 800, props.theme, 0.2);
329
+ activeForegroundColor = reactTheming.getColorV8('warningHue', 1000, props.theme);
331
330
  focusColor = 'warningHue';
332
331
  break;
333
332
  case 'info':
334
- hoverBackgroundColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.08);
335
- hoverForegroundColor = reactTheming.getColor('primaryHue', 800, props.theme);
336
- activeBackgroundColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.2);
337
- activeForegroundColor = reactTheming.getColor('primaryHue', 900, props.theme);
333
+ hoverBackgroundColor = reactTheming.getColorV8('primaryHue', 700, props.theme, 0.08);
334
+ hoverForegroundColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
335
+ activeBackgroundColor = reactTheming.getColorV8('primaryHue', 700, props.theme, 0.2);
336
+ activeForegroundColor = reactTheming.getColorV8('primaryHue', 900, props.theme);
338
337
  focusColor = 'primaryHue';
339
338
  break;
340
339
  }
@@ -352,7 +351,7 @@ const sizeStyles$2 = props => {
352
351
  };
353
352
  const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
354
353
  'data-garden-id': COMPONENT_ID$4,
355
- 'data-garden-version': '8.74.2',
354
+ 'data-garden-version': '8.75.0',
356
355
  size: 'small'
357
356
  }).withConfig({
358
357
  displayName: "StyledGlobalAlertClose",
@@ -373,21 +372,21 @@ function colorStyles$1(props) {
373
372
  let focusColor;
374
373
  switch (props.alertType) {
375
374
  case 'success':
376
- backgroundColor = reactTheming.getColor('successHue', 800, props.theme);
377
- hoverBackgroundColor = reactTheming.getColor('successHue', 900, props.theme);
378
- activeBackgroundColor = reactTheming.getColor('successHue', 1000, props.theme);
375
+ backgroundColor = reactTheming.getColorV8('successHue', 800, props.theme);
376
+ hoverBackgroundColor = reactTheming.getColorV8('successHue', 900, props.theme);
377
+ activeBackgroundColor = reactTheming.getColorV8('successHue', 1000, props.theme);
379
378
  focusColor = 'successHue';
380
379
  break;
381
380
  case 'error':
382
- backgroundColor = reactTheming.getColor('dangerHue', 800, props.theme);
383
- hoverBackgroundColor = reactTheming.getColor('dangerHue', 900, props.theme);
384
- activeBackgroundColor = reactTheming.getColor('dangerHue', 1000, props.theme);
381
+ backgroundColor = reactTheming.getColorV8('dangerHue', 800, props.theme);
382
+ hoverBackgroundColor = reactTheming.getColorV8('dangerHue', 900, props.theme);
383
+ activeBackgroundColor = reactTheming.getColorV8('dangerHue', 1000, props.theme);
385
384
  focusColor = 'dangerHue';
386
385
  break;
387
386
  case 'warning':
388
- backgroundColor = reactTheming.getColor('warningHue', 800, props.theme);
389
- hoverBackgroundColor = reactTheming.getColor('warningHue', 900, props.theme);
390
- activeBackgroundColor = reactTheming.getColor('warningHue', 1000, props.theme);
387
+ backgroundColor = reactTheming.getColorV8('warningHue', 800, props.theme);
388
+ hoverBackgroundColor = reactTheming.getColorV8('warningHue', 900, props.theme);
389
+ activeBackgroundColor = reactTheming.getColorV8('warningHue', 1000, props.theme);
391
390
  focusColor = 'warningHue';
392
391
  break;
393
392
  case 'info':
@@ -407,7 +406,7 @@ function sizeStyles$1(props) {
407
406
  }
408
407
  const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
409
408
  'data-garden-id': COMPONENT_ID$3,
410
- 'data-garden-version': '8.74.2',
409
+ 'data-garden-version': '8.75.0',
411
410
  focusInset: false,
412
411
  isDanger: false,
413
412
  isLink: false,
@@ -426,7 +425,7 @@ StyledGlobalAlertButton.defaultProps = {
426
425
  const COMPONENT_ID$2 = 'notifications.global-alert.content';
427
426
  const StyledGlobalAlertContent = styled__default.default.div.attrs({
428
427
  'data-garden-id': COMPONENT_ID$2,
429
- 'data-garden-version': '8.74.2'
428
+ 'data-garden-version': '8.75.0'
430
429
  }).withConfig({
431
430
  displayName: "StyledGlobalAlertContent",
432
431
  componentId: "sc-rept0u-0"
@@ -450,7 +449,7 @@ const StyledGlobalAlertIcon = styled__default.default(_ref => {
450
449
  return React__namespace.default.cloneElement(React.Children.only(children), props);
451
450
  }).attrs({
452
451
  'data-garden-id': COMPONENT_ID$1,
453
- 'data-garden-version': '8.74.2'
452
+ 'data-garden-version': '8.75.0'
454
453
  }).withConfig({
455
454
  displayName: "StyledGlobalAlertIcon",
456
455
  componentId: "sc-84ne9k-0"
@@ -468,17 +467,17 @@ const colorStyles = props => {
468
467
  color = props.theme.palette.white;
469
468
  break;
470
469
  case 'warning':
471
- color = reactTheming.getColor('warningHue', 900, props.theme);
470
+ color = reactTheming.getColorV8('warningHue', 900, props.theme);
472
471
  break;
473
472
  case 'info':
474
- color = reactTheming.getColor('primaryHue', 800, props.theme);
473
+ color = reactTheming.getColorV8('primaryHue', 800, props.theme);
475
474
  break;
476
475
  }
477
476
  return styled.css(["color:", ";"], color);
478
477
  };
479
478
  const StyledGlobalAlertTitle = styled__default.default.div.attrs({
480
479
  'data-garden-id': COMPONENT_ID,
481
- 'data-garden-version': '8.74.2'
480
+ 'data-garden-version': '8.75.0'
482
481
  }).withConfig({
483
482
  displayName: "StyledGlobalAlertTitle",
484
483
  componentId: "sc-10clqbo-0"
package/dist/index.esm.js CHANGED
@@ -9,7 +9,7 @@ import * as React from 'react';
9
9
  import React__default, { Children, createContext, useContext, forwardRef, useCallback, useState, useRef, useEffect, useReducer, useMemo } from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import styled, { css, ThemeContext } from 'styled-components';
12
- import { getColor, focusStyles, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText, useDocument } from '@zendeskgarden/react-theming';
12
+ import { getColorV8, focusStyles, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText, useDocument } from '@zendeskgarden/react-theming';
13
13
  import { IconButton, Button } from '@zendeskgarden/react-buttons';
14
14
  import { math, hideVisually } from 'polished';
15
15
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
@@ -35,11 +35,11 @@ const TYPE = ['success', 'warning', 'error', 'info'];
35
35
  const COMPONENT_ID$b = 'notifications.close';
36
36
  const StyledClose = styled.button.attrs({
37
37
  'data-garden-id': COMPONENT_ID$b,
38
- 'data-garden-version': '8.74.2'
38
+ 'data-garden-version': '8.75.0'
39
39
  }).withConfig({
40
40
  displayName: "StyledClose",
41
41
  componentId: "sc-1mr9nx1-0"
42
- })(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColor('neutralHue', 600, props.theme), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => focusStyles({
42
+ })(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColorV8('neutralHue', 600, props.theme), props => props.hue ? getColorV8(props.hue, 800, props.theme) : getColorV8('neutralHue', 800, props.theme), props => focusStyles({
43
43
  theme: props.theme,
44
44
  inset: true
45
45
  }), props => retrieveComponentStyles(COMPONENT_ID$b, props));
@@ -50,7 +50,7 @@ StyledClose.defaultProps = {
50
50
  const COMPONENT_ID$a = 'notifications.paragraph';
51
51
  const StyledParagraph = styled.p.attrs({
52
52
  'data-garden-id': COMPONENT_ID$a,
53
- 'data-garden-version': '8.74.2'
53
+ 'data-garden-version': '8.75.0'
54
54
  }).withConfig({
55
55
  displayName: "StyledParagraph",
56
56
  componentId: "sc-12tmd6p-0"
@@ -62,11 +62,11 @@ StyledParagraph.defaultProps = {
62
62
  const COMPONENT_ID$9 = 'notifications.title';
63
63
  const StyledTitle = styled.div.attrs({
64
64
  'data-garden-id': COMPONENT_ID$9,
65
- 'data-garden-version': '8.74.2'
65
+ 'data-garden-version': '8.75.0'
66
66
  }).withConfig({
67
67
  displayName: "StyledTitle",
68
68
  componentId: "sc-xx4jsv-0"
69
- })(["margin:0;color:", ";font-weight:", ";", ";"], props => props.theme.colors.foreground, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$9, props));
69
+ })(["margin:0;color:", ";font-weight:", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$9, props));
70
70
  StyledTitle.defaultProps = {
71
71
  theme: DEFAULT_THEME
72
72
  };
@@ -81,7 +81,7 @@ const boxShadow = props => {
81
81
  } = theme;
82
82
  const offsetY = `${space.base * 5}px`;
83
83
  const blurRadius = `${space.base * 7}px`;
84
- const color = getColor('chromeHue', 600, theme, 0.15);
84
+ const color = getColorV8('chromeHue', 600, theme, 0.15);
85
85
  return shadows.lg(offsetY, blurRadius, color);
86
86
  };
87
87
  const colorStyles$6 = props => {
@@ -89,13 +89,13 @@ const colorStyles$6 = props => {
89
89
  let borderColor;
90
90
  let foregroundColor;
91
91
  if (props.hue) {
92
- backgroundColor = getColor(props.hue, 100, props.theme);
93
- borderColor = getColor(props.hue, 300, props.theme);
94
- foregroundColor = getColor(props.hue, props.type === 'info' ? 600 : 700, props.theme);
92
+ backgroundColor = getColorV8(props.hue, 100, props.theme);
93
+ borderColor = getColorV8(props.hue, 300, props.theme);
94
+ foregroundColor = getColorV8(props.hue, props.type === 'info' ? 600 : 700, props.theme);
95
95
  } else {
96
- backgroundColor = props.theme.colors.background;
97
- borderColor = getColor('neutralHue', 300, props.theme);
98
- foregroundColor = getColor('neutralHue', 800, props.theme);
96
+ backgroundColor = getColorV8('background', 600 , props.theme);
97
+ borderColor = getColorV8('neutralHue', 300, props.theme);
98
+ foregroundColor = getColorV8('neutralHue', 800, props.theme);
99
99
  }
100
100
  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
101
101
  };
@@ -116,10 +116,10 @@ StyledBase.defaultProps = {
116
116
  };
117
117
 
118
118
  const COMPONENT_ID$8 = 'notifications.alert';
119
- const colorStyles$5 = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColor(props.hue, 800, props.theme));
119
+ const colorStyles$5 = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColorV8(props.hue, 800, props.theme));
120
120
  const StyledAlert = styled(StyledBase).attrs({
121
121
  'data-garden-id': COMPONENT_ID$8,
122
- 'data-garden-version': '8.74.2'
122
+ 'data-garden-version': '8.75.0'
123
123
  }).withConfig({
124
124
  displayName: "StyledAlert",
125
125
  componentId: "sc-fyn8jp-0"
@@ -140,22 +140,21 @@ const colorStyles$4 = props => {
140
140
  const {
141
141
  successHue,
142
142
  dangerHue,
143
- warningHue,
144
- foreground
143
+ warningHue
145
144
  } = colors;
146
145
  let color;
147
146
  switch (type) {
148
147
  case 'success':
149
- color = getColor(successHue, 600, theme);
148
+ color = getColorV8(successHue, 600, theme);
150
149
  break;
151
150
  case 'error':
152
- color = getColor(dangerHue, 600, theme);
151
+ color = getColorV8(dangerHue, 600, theme);
153
152
  break;
154
153
  case 'warning':
155
- color = getColor(warningHue, 700, theme);
154
+ color = getColorV8(warningHue, 700, theme);
156
155
  break;
157
156
  case 'info':
158
- color = foreground;
157
+ color = getColorV8('foreground', 600 , theme);
159
158
  break;
160
159
  default:
161
160
  color = 'inherit';
@@ -165,7 +164,7 @@ const colorStyles$4 = props => {
165
164
  };
166
165
  const StyledNotification = styled(StyledBase).attrs({
167
166
  'data-garden-id': COMPONENT_ID$7,
168
- 'data-garden-version': '8.74.2'
167
+ 'data-garden-version': '8.75.0'
169
168
  }).withConfig({
170
169
  displayName: "StyledNotification",
171
170
  componentId: "sc-uf6jh-0"
@@ -180,11 +179,11 @@ StyledNotification.defaultProps = {
180
179
  const COMPONENT_ID$6 = 'notifications.well';
181
180
  const StyledWell = styled(StyledBase).attrs({
182
181
  'data-garden-id': COMPONENT_ID$6,
183
- 'data-garden-version': '8.74.2'
182
+ 'data-garden-version': '8.75.0'
184
183
  }).withConfig({
185
184
  displayName: "StyledWell",
186
185
  componentId: "sc-a5831c-0"
187
- })(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColor('neutralHue', 100, props.theme), props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
186
+ })(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColorV8('neutralHue', 100, props.theme), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
188
187
  StyledWell.defaultProps = {
189
188
  theme: DEFAULT_THEME
190
189
  };
@@ -198,7 +197,7 @@ const StyledIcon = styled(_ref => {
198
197
  }).withConfig({
199
198
  displayName: "StyledIcon",
200
199
  componentId: "sc-msklws-0"
201
- })(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
200
+ })(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
202
201
  StyledIcon.defaultProps = {
203
202
  theme: DEFAULT_THEME
204
203
  };
@@ -213,35 +212,35 @@ const colorStyles$3 = props => {
213
212
  let focusColor;
214
213
  switch (props.alertType) {
215
214
  case 'success':
216
- borderColor = getColor('successHue', 700, props.theme);
217
- backgroundColor = getColor('successHue', 600, props.theme);
218
- foregroundColor = getColor('successHue', 100, props.theme);
215
+ borderColor = getColorV8('successHue', 700, props.theme);
216
+ backgroundColor = getColorV8('successHue', 600, props.theme);
217
+ foregroundColor = getColorV8('successHue', 100, props.theme);
219
218
  anchorHoverColor = props.theme.palette.white;
220
219
  anchorActiveColor = props.theme.palette.white;
221
220
  focusColor = 'successHue';
222
221
  break;
223
222
  case 'error':
224
- borderColor = getColor('dangerHue', 700, props.theme);
225
- backgroundColor = getColor('dangerHue', 600, props.theme);
226
- foregroundColor = getColor('dangerHue', 100, props.theme);
223
+ borderColor = getColorV8('dangerHue', 700, props.theme);
224
+ backgroundColor = getColorV8('dangerHue', 600, props.theme);
225
+ foregroundColor = getColorV8('dangerHue', 100, props.theme);
227
226
  anchorHoverColor = props.theme.palette.white;
228
227
  anchorActiveColor = props.theme.palette.white;
229
228
  focusColor = 'dangerHue';
230
229
  break;
231
230
  case 'warning':
232
- borderColor = getColor('warningHue', 400, props.theme);
233
- backgroundColor = getColor('warningHue', 300, props.theme);
234
- foregroundColor = getColor('warningHue', 800, props.theme);
235
- anchorHoverColor = getColor('warningHue', 900, props.theme);
236
- anchorActiveColor = getColor('warningHue', 1000, props.theme);
231
+ borderColor = getColorV8('warningHue', 400, props.theme);
232
+ backgroundColor = getColorV8('warningHue', 300, props.theme);
233
+ foregroundColor = getColorV8('warningHue', 800, props.theme);
234
+ anchorHoverColor = getColorV8('warningHue', 900, props.theme);
235
+ anchorActiveColor = getColorV8('warningHue', 1000, props.theme);
237
236
  focusColor = 'warningHue';
238
237
  break;
239
238
  case 'info':
240
- borderColor = getColor('primaryHue', 300, props.theme);
241
- backgroundColor = getColor('primaryHue', 200, props.theme);
242
- foregroundColor = getColor('primaryHue', 700, props.theme);
243
- anchorHoverColor = getColor('primaryHue', 800, props.theme);
244
- anchorActiveColor = getColor('primaryHue', 900, props.theme);
239
+ borderColor = getColorV8('primaryHue', 300, props.theme);
240
+ backgroundColor = getColorV8('primaryHue', 200, props.theme);
241
+ foregroundColor = getColorV8('primaryHue', 700, props.theme);
242
+ anchorHoverColor = getColorV8('primaryHue', 800, props.theme);
243
+ anchorActiveColor = getColorV8('primaryHue', 900, props.theme);
245
244
  focusColor = 'primaryHue';
246
245
  break;
247
246
  }
@@ -267,7 +266,7 @@ const sizeStyles$3 = props => {
267
266
  };
268
267
  const StyledGlobalAlert = styled.div.attrs({
269
268
  'data-garden-id': COMPONENT_ID$5,
270
- 'data-garden-version': '8.74.2'
269
+ 'data-garden-version': '8.75.0'
271
270
  }).withConfig({
272
271
  displayName: "StyledGlobalAlert",
273
272
  componentId: "sc-k6rimt-0"
@@ -285,31 +284,31 @@ const colorStyles$2 = props => {
285
284
  let focusColor;
286
285
  switch (props.alertType) {
287
286
  case 'success':
288
- hoverBackgroundColor = getColor('successHue', 100, props.theme, 0.08);
287
+ hoverBackgroundColor = getColorV8('successHue', 100, props.theme, 0.08);
289
288
  hoverForegroundColor = props.theme.palette.white;
290
- activeBackgroundColor = getColor('successHue', 100, props.theme, 0.2);
289
+ activeBackgroundColor = getColorV8('successHue', 100, props.theme, 0.2);
291
290
  activeForegroundColor = props.theme.palette.white;
292
291
  focusColor = 'successHue';
293
292
  break;
294
293
  case 'error':
295
- hoverBackgroundColor = getColor('dangerHue', 100, props.theme, 0.08);
294
+ hoverBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.08);
296
295
  hoverForegroundColor = props.theme.palette.white;
297
- activeBackgroundColor = getColor('dangerHue', 100, props.theme, 0.2);
296
+ activeBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.2);
298
297
  activeForegroundColor = props.theme.palette.white;
299
298
  focusColor = 'dangerHue';
300
299
  break;
301
300
  case 'warning':
302
- hoverBackgroundColor = getColor('warningHue', 800, props.theme, 0.08);
303
- hoverForegroundColor = getColor('warningHue', 900, props.theme);
304
- activeBackgroundColor = getColor('warningHue', 800, props.theme, 0.2);
305
- activeForegroundColor = getColor('warningHue', 1000, props.theme);
301
+ hoverBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.08);
302
+ hoverForegroundColor = getColorV8('warningHue', 900, props.theme);
303
+ activeBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.2);
304
+ activeForegroundColor = getColorV8('warningHue', 1000, props.theme);
306
305
  focusColor = 'warningHue';
307
306
  break;
308
307
  case 'info':
309
- hoverBackgroundColor = getColor('primaryHue', 700, props.theme, 0.08);
310
- hoverForegroundColor = getColor('primaryHue', 800, props.theme);
311
- activeBackgroundColor = getColor('primaryHue', 700, props.theme, 0.2);
312
- activeForegroundColor = getColor('primaryHue', 900, props.theme);
308
+ hoverBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.08);
309
+ hoverForegroundColor = getColorV8('primaryHue', 800, props.theme);
310
+ activeBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.2);
311
+ activeForegroundColor = getColorV8('primaryHue', 900, props.theme);
313
312
  focusColor = 'primaryHue';
314
313
  break;
315
314
  }
@@ -327,7 +326,7 @@ const sizeStyles$2 = props => {
327
326
  };
328
327
  const StyledGlobalAlertClose = styled(IconButton).attrs({
329
328
  'data-garden-id': COMPONENT_ID$4,
330
- 'data-garden-version': '8.74.2',
329
+ 'data-garden-version': '8.75.0',
331
330
  size: 'small'
332
331
  }).withConfig({
333
332
  displayName: "StyledGlobalAlertClose",
@@ -348,21 +347,21 @@ function colorStyles$1(props) {
348
347
  let focusColor;
349
348
  switch (props.alertType) {
350
349
  case 'success':
351
- backgroundColor = getColor('successHue', 800, props.theme);
352
- hoverBackgroundColor = getColor('successHue', 900, props.theme);
353
- activeBackgroundColor = getColor('successHue', 1000, props.theme);
350
+ backgroundColor = getColorV8('successHue', 800, props.theme);
351
+ hoverBackgroundColor = getColorV8('successHue', 900, props.theme);
352
+ activeBackgroundColor = getColorV8('successHue', 1000, props.theme);
354
353
  focusColor = 'successHue';
355
354
  break;
356
355
  case 'error':
357
- backgroundColor = getColor('dangerHue', 800, props.theme);
358
- hoverBackgroundColor = getColor('dangerHue', 900, props.theme);
359
- activeBackgroundColor = getColor('dangerHue', 1000, props.theme);
356
+ backgroundColor = getColorV8('dangerHue', 800, props.theme);
357
+ hoverBackgroundColor = getColorV8('dangerHue', 900, props.theme);
358
+ activeBackgroundColor = getColorV8('dangerHue', 1000, props.theme);
360
359
  focusColor = 'dangerHue';
361
360
  break;
362
361
  case 'warning':
363
- backgroundColor = getColor('warningHue', 800, props.theme);
364
- hoverBackgroundColor = getColor('warningHue', 900, props.theme);
365
- activeBackgroundColor = getColor('warningHue', 1000, props.theme);
362
+ backgroundColor = getColorV8('warningHue', 800, props.theme);
363
+ hoverBackgroundColor = getColorV8('warningHue', 900, props.theme);
364
+ activeBackgroundColor = getColorV8('warningHue', 1000, props.theme);
366
365
  focusColor = 'warningHue';
367
366
  break;
368
367
  case 'info':
@@ -382,7 +381,7 @@ function sizeStyles$1(props) {
382
381
  }
383
382
  const StyledGlobalAlertButton = styled(Button).attrs({
384
383
  'data-garden-id': COMPONENT_ID$3,
385
- 'data-garden-version': '8.74.2',
384
+ 'data-garden-version': '8.75.0',
386
385
  focusInset: false,
387
386
  isDanger: false,
388
387
  isLink: false,
@@ -401,7 +400,7 @@ StyledGlobalAlertButton.defaultProps = {
401
400
  const COMPONENT_ID$2 = 'notifications.global-alert.content';
402
401
  const StyledGlobalAlertContent = styled.div.attrs({
403
402
  'data-garden-id': COMPONENT_ID$2,
404
- 'data-garden-version': '8.74.2'
403
+ 'data-garden-version': '8.75.0'
405
404
  }).withConfig({
406
405
  displayName: "StyledGlobalAlertContent",
407
406
  componentId: "sc-rept0u-0"
@@ -425,7 +424,7 @@ const StyledGlobalAlertIcon = styled(_ref => {
425
424
  return React__default.cloneElement(Children.only(children), props);
426
425
  }).attrs({
427
426
  'data-garden-id': COMPONENT_ID$1,
428
- 'data-garden-version': '8.74.2'
427
+ 'data-garden-version': '8.75.0'
429
428
  }).withConfig({
430
429
  displayName: "StyledGlobalAlertIcon",
431
430
  componentId: "sc-84ne9k-0"
@@ -443,17 +442,17 @@ const colorStyles = props => {
443
442
  color = props.theme.palette.white;
444
443
  break;
445
444
  case 'warning':
446
- color = getColor('warningHue', 900, props.theme);
445
+ color = getColorV8('warningHue', 900, props.theme);
447
446
  break;
448
447
  case 'info':
449
- color = getColor('primaryHue', 800, props.theme);
448
+ color = getColorV8('primaryHue', 800, props.theme);
450
449
  break;
451
450
  }
452
451
  return css(["color:", ";"], color);
453
452
  };
454
453
  const StyledGlobalAlertTitle = styled.div.attrs({
455
454
  'data-garden-id': COMPONENT_ID,
456
- 'data-garden-version': '8.74.2'
455
+ 'data-garden-version': '8.75.0'
457
456
  }).withConfig({
458
457
  displayName: "StyledGlobalAlertTitle",
459
458
  componentId: "sc-10clqbo-0"
package/dist/typings/styled/global-alert/StyledGlobalAlertButton.d.ts CHANGED
@@ -30,5 +30,5 @@ export declare const StyledGlobalAlertButton: import("styled-components").Styled
30
30
  isPill: false;
31
31
  isStretched: false;
32
32
  size: "small";
33
- } & IStyledGlobalAlertButtonProps, "isDanger" | "size" | "isStretched" | "isNeutral" | "isLink" | "isPill" | "focusInset" | "data-garden-id" | "data-garden-version">;
33
+ } & IStyledGlobalAlertButtonProps, "size" | "isDanger" | "isStretched" | "isNeutral" | "isLink" | "isPill" | "focusInset" | "data-garden-id" | "data-garden-version">;
34
34
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-notifications",
3
- "version": "8.74.2",
3
+ "version": "8.75.0",
4
4
  "description": "Notification and Well components within the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/react-buttons": "^8.74.2",
24
+ "@zendeskgarden/react-buttons": "^8.75.0",
25
25
  "polished": "^4.1.1",
26
26
  "prop-types": "^15.5.7",
27
27
  "react-transition-group": "^4.4.2",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "devDependencies": {
37
37
  "@types/react-transition-group": "4.4.10",
38
- "@zendeskgarden/react-theming": "^8.74.2",
38
+ "@zendeskgarden/react-theming": "^8.75.0",
39
39
  "@zendeskgarden/svg-icons": "7.0.0"
40
40
  },
41
41
  "keywords": [
@@ -48,5 +48,5 @@
48
48
  "access": "public"
49
49
  },
50
50
  "zendeskgarden:src": "src/index.ts",
51
- "gitHead": "be0e20f0b016a227ed1ab6b5b13cb04971969d3b"
51
+ "gitHead": "56a54793a611efc223b8e36262d428365613c853"
52
52
  }