baseui 10.7.1 → 10.8.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 (18) hide show
  1. package/es/popover/popover.js +4 -2
  2. package/es/themes/dark-theme/color-component-tokens.js +15 -10
  3. package/es/themes/light-theme/color-component-tokens.js +15 -10
  4. package/es/toast/styled-components.js +18 -7
  5. package/esm/popover/popover.js +4 -2
  6. package/esm/themes/dark-theme/color-component-tokens.js +15 -10
  7. package/esm/themes/light-theme/color-component-tokens.js +15 -10
  8. package/esm/toast/styled-components.js +13 -5
  9. package/package.json +1 -1
  10. package/popover/popover.js +4 -2
  11. package/popover/popover.js.flow +21 -17
  12. package/themes/dark-theme/color-component-tokens.js +15 -10
  13. package/themes/dark-theme/color-component-tokens.js.flow +15 -10
  14. package/themes/light-theme/color-component-tokens.js +15 -10
  15. package/themes/light-theme/color-component-tokens.js.flow +15 -10
  16. package/themes/types.js.flow +5 -0
  17. package/toast/styled-components.js +13 -5
  18. package/toast/styled-components.js.flow +17 -7
package/es/popover/popover.js CHANGED
@@ -447,14 +447,16 @@ class PopoverInner extends React.Component {
447
447
  },
448
448
  onPopperUpdate: this.onPopperUpdate,
449
449
  placement: this.state.placement
450
- }, /*#__PURE__*/React.createElement(FocusLock, {
450
+ }, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
451
451
  disabled: !this.props.focusLock,
452
452
  noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
453
453
  ,
454
454
  returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
455
455
  autoFocus: this.state.autoFocusAfterPositioning,
456
456
  focusOptions: this.props.focusOptions
457
- }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
457
+ }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
458
+ disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
459
+ }, this.renderPopover(renderedContent)))));
458
460
  } else {
459
461
  rendered.push( /*#__PURE__*/React.createElement(Hidden, {
460
462
  key: "hidden-layer"
package/es/themes/dark-theme/color-component-tokens.js CHANGED
@@ -106,15 +106,15 @@ export default ((themePrimitives = colorTokens) => ({
106
106
  modalCloseColorFocus: themePrimitives.mono400,
107
107
  // Notification
108
108
  notificationPrimaryBackground: themePrimitives.primary700,
109
- notificationPrimaryText: themePrimitives.primary200,
109
+ notificationPrimaryText: themePrimitives.primaryA,
110
110
  notificationInfoBackground: themePrimitives.accent700,
111
- notificationInfoText: themePrimitives.accent200,
111
+ notificationInfoText: themePrimitives.primaryA,
112
112
  notificationPositiveBackground: themePrimitives.positive700,
113
- notificationPositiveText: themePrimitives.positive200,
113
+ notificationPositiveText: themePrimitives.primaryA,
114
114
  notificationWarningBackground: themePrimitives.warning700,
115
- notificationWarningText: themePrimitives.warning200,
115
+ notificationWarningText: themePrimitives.primaryA,
116
116
  notificationNegativeBackground: themePrimitives.negative700,
117
- notificationNegativeText: themePrimitives.negative200,
117
+ notificationNegativeText: themePrimitives.primaryA,
118
118
  // Tag
119
119
  // Custom ramps
120
120
  tagFontDisabledRampUnit: '600',
@@ -274,11 +274,16 @@ export default ((themePrimitives = colorTokens) => ({
274
274
  tableFilterFooterBackground: themePrimitives.mono800,
275
275
  // Toast
276
276
  toastText: themePrimitives.white,
277
- toastPrimaryBackground: themePrimitives.primary500,
278
- toastInfoBackground: themePrimitives.accent500,
279
- toastPositiveBackground: themePrimitives.positive500,
280
- toastWarningBackground: themePrimitives.warning500,
281
- toastNegativeBackground: themePrimitives.negative500,
277
+ toastPrimaryBackground: themePrimitives.primary400,
278
+ toastPrimaryText: themePrimitives.white,
279
+ toastInfoBackground: themePrimitives.accent400,
280
+ toastInfoText: themePrimitives.white,
281
+ toastPositiveBackground: themePrimitives.positive400,
282
+ toastPositiveText: themePrimitives.white,
283
+ toastWarningBackground: themePrimitives.warning400,
284
+ toastWarningText: themePrimitives.black,
285
+ toastNegativeBackground: themePrimitives.negative400,
286
+ toastNegativeText: themePrimitives.white,
282
287
  // Toggle
283
288
  toggleFill: themePrimitives.mono300,
284
289
  toggleFillChecked: themePrimitives.primary,
package/es/themes/light-theme/color-component-tokens.js CHANGED
@@ -182,15 +182,15 @@ export default ((themePrimitives = colorTokens) => ({
182
182
  tabColor: themePrimitives.mono800,
183
183
  // Notification
184
184
  notificationPrimaryBackground: themePrimitives.primary50,
185
- notificationPrimaryText: themePrimitives.primary500,
185
+ notificationPrimaryText: themePrimitives.primaryA,
186
186
  notificationInfoBackground: themePrimitives.accent50,
187
- notificationInfoText: themePrimitives.accent500,
187
+ notificationInfoText: themePrimitives.primaryA,
188
188
  notificationPositiveBackground: themePrimitives.positive50,
189
- notificationPositiveText: themePrimitives.positive500,
189
+ notificationPositiveText: themePrimitives.primaryA,
190
190
  notificationWarningBackground: themePrimitives.warning50,
191
- notificationWarningText: themePrimitives.warning500,
191
+ notificationWarningText: themePrimitives.primaryA,
192
192
  notificationNegativeBackground: themePrimitives.negative50,
193
- notificationNegativeText: themePrimitives.negative500,
193
+ notificationNegativeText: themePrimitives.primaryA,
194
194
  // Tag
195
195
  // Custom ramps
196
196
  tagFontDisabledRampUnit: '100',
@@ -349,11 +349,16 @@ export default ((themePrimitives = colorTokens) => ({
349
349
  tableFilterFooterBackground: themePrimitives.mono200,
350
350
  // Toast
351
351
  toastText: themePrimitives.white,
352
- toastPrimaryBackground: themePrimitives.primary500,
353
- toastInfoBackground: themePrimitives.accent500,
354
- toastPositiveBackground: themePrimitives.positive500,
355
- toastWarningBackground: themePrimitives.warning500,
356
- toastNegativeBackground: themePrimitives.negative500,
352
+ toastPrimaryBackground: themePrimitives.primary400,
353
+ toastPrimaryText: themePrimitives.white,
354
+ toastInfoBackground: themePrimitives.accent400,
355
+ toastInfoText: themePrimitives.white,
356
+ toastPositiveBackground: themePrimitives.positive400,
357
+ toastPositiveText: themePrimitives.white,
358
+ toastWarningBackground: themePrimitives.warning400,
359
+ toastWarningText: themePrimitives.black,
360
+ toastNegativeBackground: themePrimitives.negative400,
361
+ toastNegativeText: themePrimitives.white,
357
362
  // Spinner
358
363
  spinnerTrackFill: themePrimitives.mono900,
359
364
  // Progress bar
package/es/toast/styled-components.js CHANGED
@@ -18,12 +18,23 @@ function getBackgroundColor(kind, type, theme) {
18
18
  }[kind];
19
19
  }
20
20
 
21
- function getFontColor(kind, theme) {
21
+ function getFontColor(kind, type, theme) {
22
+ const isInline = type === TYPE.inline;
23
+
24
+ if (isInline) {
25
+ return {
26
+ [KIND.info]: theme.colors.notificationInfoText,
27
+ [KIND.positive]: theme.colors.notificationPositiveText,
28
+ [KIND.warning]: theme.colors.notificationWarningText,
29
+ [KIND.negative]: theme.colors.notificationNegativeText
30
+ }[kind];
31
+ }
32
+
22
33
  return {
23
- [KIND.info]: theme.colors.notificationInfoText,
24
- [KIND.positive]: theme.colors.notificationPositiveText,
25
- [KIND.warning]: theme.colors.notificationWarningText,
26
- [KIND.negative]: theme.colors.notificationNegativeText
34
+ [KIND.info]: theme.colors.toastInfoText,
35
+ [KIND.positive]: theme.colors.toastPositiveText,
36
+ [KIND.warning]: theme.colors.toastWarningText,
37
+ [KIND.negative]: theme.colors.toastNegativeText
27
38
  }[kind];
28
39
  }
29
40
 
@@ -99,9 +110,9 @@ export const Body = styled('div', props => {
99
110
  $theme
100
111
  } = props;
101
112
  const isInline = $type === TYPE.inline;
102
- return { ...$theme.typography.font250,
113
+ return { ...$theme.typography.font300,
103
114
  pointerEvents: 'auto',
104
- color: isInline ? getFontColor($kind, $theme) : $theme.colors.toastText,
115
+ color: getFontColor($kind, $type, $theme),
105
116
  height: 'auto',
106
117
  width: '288px',
107
118
  paddingTop: $theme.sizing.scale600,
package/esm/popover/popover.js CHANGED
@@ -510,14 +510,16 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
510
510
  popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
511
511
  onPopperUpdate: this.onPopperUpdate,
512
512
  placement: this.state.placement
513
- }, /*#__PURE__*/React.createElement(FocusLock, {
513
+ }, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
514
514
  disabled: !this.props.focusLock,
515
515
  noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
516
516
  ,
517
517
  returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
518
518
  autoFocus: this.state.autoFocusAfterPositioning,
519
519
  focusOptions: this.props.focusOptions
520
- }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
520
+ }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
521
+ disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
522
+ }, this.renderPopover(renderedContent)))));
521
523
  } else {
522
524
  rendered.push( /*#__PURE__*/React.createElement(Hidden, {
523
525
  key: "hidden-layer"
package/esm/themes/dark-theme/color-component-tokens.js CHANGED
@@ -108,15 +108,15 @@ export default (function () {
108
108
  modalCloseColorFocus: themePrimitives.mono400,
109
109
  // Notification
110
110
  notificationPrimaryBackground: themePrimitives.primary700,
111
- notificationPrimaryText: themePrimitives.primary200,
111
+ notificationPrimaryText: themePrimitives.primaryA,
112
112
  notificationInfoBackground: themePrimitives.accent700,
113
- notificationInfoText: themePrimitives.accent200,
113
+ notificationInfoText: themePrimitives.primaryA,
114
114
  notificationPositiveBackground: themePrimitives.positive700,
115
- notificationPositiveText: themePrimitives.positive200,
115
+ notificationPositiveText: themePrimitives.primaryA,
116
116
  notificationWarningBackground: themePrimitives.warning700,
117
- notificationWarningText: themePrimitives.warning200,
117
+ notificationWarningText: themePrimitives.primaryA,
118
118
  notificationNegativeBackground: themePrimitives.negative700,
119
- notificationNegativeText: themePrimitives.negative200,
119
+ notificationNegativeText: themePrimitives.primaryA,
120
120
  // Tag
121
121
  // Custom ramps
122
122
  tagFontDisabledRampUnit: '600',
@@ -276,11 +276,16 @@ export default (function () {
276
276
  tableFilterFooterBackground: themePrimitives.mono800,
277
277
  // Toast
278
278
  toastText: themePrimitives.white,
279
- toastPrimaryBackground: themePrimitives.primary500,
280
- toastInfoBackground: themePrimitives.accent500,
281
- toastPositiveBackground: themePrimitives.positive500,
282
- toastWarningBackground: themePrimitives.warning500,
283
- toastNegativeBackground: themePrimitives.negative500,
279
+ toastPrimaryBackground: themePrimitives.primary400,
280
+ toastPrimaryText: themePrimitives.white,
281
+ toastInfoBackground: themePrimitives.accent400,
282
+ toastInfoText: themePrimitives.white,
283
+ toastPositiveBackground: themePrimitives.positive400,
284
+ toastPositiveText: themePrimitives.white,
285
+ toastWarningBackground: themePrimitives.warning400,
286
+ toastWarningText: themePrimitives.black,
287
+ toastNegativeBackground: themePrimitives.negative400,
288
+ toastNegativeText: themePrimitives.white,
284
289
  // Toggle
285
290
  toggleFill: themePrimitives.mono300,
286
291
  toggleFillChecked: themePrimitives.primary,
package/esm/themes/light-theme/color-component-tokens.js CHANGED
@@ -184,15 +184,15 @@ export default (function () {
184
184
  tabColor: themePrimitives.mono800,
185
185
  // Notification
186
186
  notificationPrimaryBackground: themePrimitives.primary50,
187
- notificationPrimaryText: themePrimitives.primary500,
187
+ notificationPrimaryText: themePrimitives.primaryA,
188
188
  notificationInfoBackground: themePrimitives.accent50,
189
- notificationInfoText: themePrimitives.accent500,
189
+ notificationInfoText: themePrimitives.primaryA,
190
190
  notificationPositiveBackground: themePrimitives.positive50,
191
- notificationPositiveText: themePrimitives.positive500,
191
+ notificationPositiveText: themePrimitives.primaryA,
192
192
  notificationWarningBackground: themePrimitives.warning50,
193
- notificationWarningText: themePrimitives.warning500,
193
+ notificationWarningText: themePrimitives.primaryA,
194
194
  notificationNegativeBackground: themePrimitives.negative50,
195
- notificationNegativeText: themePrimitives.negative500,
195
+ notificationNegativeText: themePrimitives.primaryA,
196
196
  // Tag
197
197
  // Custom ramps
198
198
  tagFontDisabledRampUnit: '100',
@@ -351,11 +351,16 @@ export default (function () {
351
351
  tableFilterFooterBackground: themePrimitives.mono200,
352
352
  // Toast
353
353
  toastText: themePrimitives.white,
354
- toastPrimaryBackground: themePrimitives.primary500,
355
- toastInfoBackground: themePrimitives.accent500,
356
- toastPositiveBackground: themePrimitives.positive500,
357
- toastWarningBackground: themePrimitives.warning500,
358
- toastNegativeBackground: themePrimitives.negative500,
354
+ toastPrimaryBackground: themePrimitives.primary400,
355
+ toastPrimaryText: themePrimitives.white,
356
+ toastInfoBackground: themePrimitives.accent400,
357
+ toastInfoText: themePrimitives.white,
358
+ toastPositiveBackground: themePrimitives.positive400,
359
+ toastPositiveText: themePrimitives.white,
360
+ toastWarningBackground: themePrimitives.warning400,
361
+ toastWarningText: themePrimitives.black,
362
+ toastNegativeBackground: themePrimitives.negative400,
363
+ toastNegativeText: themePrimitives.white,
359
364
  // Spinner
360
365
  spinnerTrackFill: themePrimitives.mono900,
361
366
  // Progress bar
package/esm/toast/styled-components.js CHANGED
@@ -21,10 +21,18 @@ function getBackgroundColor(kind, type, theme) {
21
21
  return (_KIND$info$KIND$posit = {}, _defineProperty(_KIND$info$KIND$posit, KIND.info, isInline ? theme.colors.notificationInfoBackground : theme.colors.toastInfoBackground), _defineProperty(_KIND$info$KIND$posit, KIND.positive, isInline ? theme.colors.notificationPositiveBackground : theme.colors.toastPositiveBackground), _defineProperty(_KIND$info$KIND$posit, KIND.warning, isInline ? theme.colors.notificationWarningBackground : theme.colors.toastWarningBackground), _defineProperty(_KIND$info$KIND$posit, KIND.negative, isInline ? theme.colors.notificationNegativeBackground : theme.colors.toastNegativeBackground), _KIND$info$KIND$posit)[kind];
22
22
  }
23
23
 
24
- function getFontColor(kind, theme) {
25
- var _KIND$info$KIND$posit2;
24
+ function getFontColor(kind, type, theme) {
25
+ var _KIND$info$KIND$posit3;
26
26
 
27
- return (_KIND$info$KIND$posit2 = {}, _defineProperty(_KIND$info$KIND$posit2, KIND.info, theme.colors.notificationInfoText), _defineProperty(_KIND$info$KIND$posit2, KIND.positive, theme.colors.notificationPositiveText), _defineProperty(_KIND$info$KIND$posit2, KIND.warning, theme.colors.notificationWarningText), _defineProperty(_KIND$info$KIND$posit2, KIND.negative, theme.colors.notificationNegativeText), _KIND$info$KIND$posit2)[kind];
27
+ var isInline = type === TYPE.inline;
28
+
29
+ if (isInline) {
30
+ var _KIND$info$KIND$posit2;
31
+
32
+ return (_KIND$info$KIND$posit2 = {}, _defineProperty(_KIND$info$KIND$posit2, KIND.info, theme.colors.notificationInfoText), _defineProperty(_KIND$info$KIND$posit2, KIND.positive, theme.colors.notificationPositiveText), _defineProperty(_KIND$info$KIND$posit2, KIND.warning, theme.colors.notificationWarningText), _defineProperty(_KIND$info$KIND$posit2, KIND.negative, theme.colors.notificationNegativeText), _KIND$info$KIND$posit2)[kind];
33
+ }
34
+
35
+ return (_KIND$info$KIND$posit3 = {}, _defineProperty(_KIND$info$KIND$posit3, KIND.info, theme.colors.toastInfoText), _defineProperty(_KIND$info$KIND$posit3, KIND.positive, theme.colors.toastPositiveText), _defineProperty(_KIND$info$KIND$posit3, KIND.warning, theme.colors.toastWarningText), _defineProperty(_KIND$info$KIND$posit3, KIND.negative, theme.colors.toastNegativeText), _KIND$info$KIND$posit3)[kind];
28
36
  }
29
37
 
30
38
  export function getPlacement(placement) {
@@ -89,9 +97,9 @@ export var Body = styled('div', function (props) {
89
97
  $type = props.$type,
90
98
  $theme = props.$theme;
91
99
  var isInline = $type === TYPE.inline;
92
- return _objectSpread(_objectSpread({}, $theme.typography.font250), {}, {
100
+ return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
93
101
  pointerEvents: 'auto',
94
- color: isInline ? getFontColor($kind, $theme) : $theme.colors.toastText,
102
+ color: getFontColor($kind, $type, $theme),
95
103
  height: 'auto',
96
104
  width: '288px',
97
105
  paddingTop: $theme.sizing.scale600,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "10.7.1",
3
+ "version": "10.8.0",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",
package/popover/popover.js CHANGED
@@ -525,14 +525,16 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
525
525
  popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
526
526
  onPopperUpdate: this.onPopperUpdate,
527
527
  placement: this.state.placement
528
- }, /*#__PURE__*/React.createElement(_reactFocusLock.default, {
528
+ }, this.props.focusLock ? /*#__PURE__*/React.createElement(_reactFocusLock.default, {
529
529
  disabled: !this.props.focusLock,
530
530
  noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
531
531
  ,
532
532
  returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
533
533
  autoFocus: this.state.autoFocusAfterPositioning,
534
534
  focusOptions: this.props.focusOptions
535
- }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(_reactFocusLock.MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
535
+ }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(_reactFocusLock.MoveFocusInside, {
536
+ disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
537
+ }, this.renderPopover(renderedContent)))));
536
538
  } else {
537
539
  rendered.push( /*#__PURE__*/React.createElement(_styledComponents.Hidden, {
538
540
  key: "hidden-layer"
package/popover/popover.js.flow CHANGED
@@ -470,23 +470,27 @@ class PopoverInner extends React.Component<
470
470
  onPopperUpdate={this.onPopperUpdate}
471
471
  placement={this.state.placement}
472
472
  >
473
- <FocusLock
474
- disabled={!this.props.focusLock}
475
- noFocusGuards={false}
476
- // see popover-focus-loop.scenario.js for why hover cannot return focus
477
- returnFocus={!this.isHoverTrigger() && this.props.returnFocus}
478
- autoFocus={this.state.autoFocusAfterPositioning}
479
- focusOptions={this.props.focusOptions}
480
- >
481
- {!this.props.focusLock &&
482
- this.state.autoFocusAfterPositioning ? (
483
- <MoveFocusInside>
484
- {this.renderPopover(renderedContent)}
485
- </MoveFocusInside>
486
- ) : (
487
- this.renderPopover(renderedContent)
488
- )}
489
- </FocusLock>
473
+ {this.props.focusLock ? (
474
+ <FocusLock
475
+ disabled={!this.props.focusLock}
476
+ noFocusGuards={false}
477
+ // see popover-focus-loop.scenario.js for why hover cannot return focus
478
+ returnFocus={!this.isHoverTrigger() && this.props.returnFocus}
479
+ autoFocus={this.state.autoFocusAfterPositioning}
480
+ focusOptions={this.props.focusOptions}
481
+ >
482
+ {this.renderPopover(renderedContent)}
483
+ </FocusLock>
484
+ ) : (
485
+ <MoveFocusInside
486
+ disabled={
487
+ !this.props.autoFocus &&
488
+ !this.state.autoFocusAfterPositioning
489
+ }
490
+ >
491
+ {this.renderPopover(renderedContent)}
492
+ </MoveFocusInside>
493
+ )}
490
494
  </TetherBehavior>
491
495
  </Layer>,
492
496
  );
package/themes/dark-theme/color-component-tokens.js CHANGED
@@ -118,15 +118,15 @@ var _default = function _default() {
118
118
  modalCloseColorFocus: themePrimitives.mono400,
119
119
  // Notification
120
120
  notificationPrimaryBackground: themePrimitives.primary700,
121
- notificationPrimaryText: themePrimitives.primary200,
121
+ notificationPrimaryText: themePrimitives.primaryA,
122
122
  notificationInfoBackground: themePrimitives.accent700,
123
- notificationInfoText: themePrimitives.accent200,
123
+ notificationInfoText: themePrimitives.primaryA,
124
124
  notificationPositiveBackground: themePrimitives.positive700,
125
- notificationPositiveText: themePrimitives.positive200,
125
+ notificationPositiveText: themePrimitives.primaryA,
126
126
  notificationWarningBackground: themePrimitives.warning700,
127
- notificationWarningText: themePrimitives.warning200,
127
+ notificationWarningText: themePrimitives.primaryA,
128
128
  notificationNegativeBackground: themePrimitives.negative700,
129
- notificationNegativeText: themePrimitives.negative200,
129
+ notificationNegativeText: themePrimitives.primaryA,
130
130
  // Tag
131
131
  // Custom ramps
132
132
  tagFontDisabledRampUnit: '600',
@@ -286,11 +286,16 @@ var _default = function _default() {
286
286
  tableFilterFooterBackground: themePrimitives.mono800,
287
287
  // Toast
288
288
  toastText: themePrimitives.white,
289
- toastPrimaryBackground: themePrimitives.primary500,
290
- toastInfoBackground: themePrimitives.accent500,
291
- toastPositiveBackground: themePrimitives.positive500,
292
- toastWarningBackground: themePrimitives.warning500,
293
- toastNegativeBackground: themePrimitives.negative500,
289
+ toastPrimaryBackground: themePrimitives.primary400,
290
+ toastPrimaryText: themePrimitives.white,
291
+ toastInfoBackground: themePrimitives.accent400,
292
+ toastInfoText: themePrimitives.white,
293
+ toastPositiveBackground: themePrimitives.positive400,
294
+ toastPositiveText: themePrimitives.white,
295
+ toastWarningBackground: themePrimitives.warning400,
296
+ toastWarningText: themePrimitives.black,
297
+ toastNegativeBackground: themePrimitives.negative400,
298
+ toastNegativeText: themePrimitives.white,
294
299
  // Toggle
295
300
  toggleFill: themePrimitives.mono300,
296
301
  toggleFillChecked: themePrimitives.primary,
package/themes/dark-theme/color-component-tokens.js.flow CHANGED
@@ -125,15 +125,15 @@ export default (
125
125
 
126
126
  // Notification
127
127
  notificationPrimaryBackground: themePrimitives.primary700,
128
- notificationPrimaryText: themePrimitives.primary200,
128
+ notificationPrimaryText: themePrimitives.primaryA,
129
129
  notificationInfoBackground: themePrimitives.accent700,
130
- notificationInfoText: themePrimitives.accent200,
130
+ notificationInfoText: themePrimitives.primaryA,
131
131
  notificationPositiveBackground: themePrimitives.positive700,
132
- notificationPositiveText: themePrimitives.positive200,
132
+ notificationPositiveText: themePrimitives.primaryA,
133
133
  notificationWarningBackground: themePrimitives.warning700,
134
- notificationWarningText: themePrimitives.warning200,
134
+ notificationWarningText: themePrimitives.primaryA,
135
135
  notificationNegativeBackground: themePrimitives.negative700,
136
- notificationNegativeText: themePrimitives.negative200,
136
+ notificationNegativeText: themePrimitives.primaryA,
137
137
 
138
138
  // Tag
139
139
 
@@ -302,11 +302,16 @@ export default (
302
302
 
303
303
  // Toast
304
304
  toastText: themePrimitives.white,
305
- toastPrimaryBackground: themePrimitives.primary500,
306
- toastInfoBackground: themePrimitives.accent500,
307
- toastPositiveBackground: themePrimitives.positive500,
308
- toastWarningBackground: themePrimitives.warning500,
309
- toastNegativeBackground: themePrimitives.negative500,
305
+ toastPrimaryBackground: themePrimitives.primary400,
306
+ toastPrimaryText: themePrimitives.white,
307
+ toastInfoBackground: themePrimitives.accent400,
308
+ toastInfoText: themePrimitives.white,
309
+ toastPositiveBackground: themePrimitives.positive400,
310
+ toastPositiveText: themePrimitives.white,
311
+ toastWarningBackground: themePrimitives.warning400,
312
+ toastWarningText: themePrimitives.black,
313
+ toastNegativeBackground: themePrimitives.negative400,
314
+ toastNegativeText: themePrimitives.white,
310
315
 
311
316
  // Toggle
312
317
  toggleFill: themePrimitives.mono300,
package/themes/light-theme/color-component-tokens.js CHANGED
@@ -194,15 +194,15 @@ var _default = function _default() {
194
194
  tabColor: themePrimitives.mono800,
195
195
  // Notification
196
196
  notificationPrimaryBackground: themePrimitives.primary50,
197
- notificationPrimaryText: themePrimitives.primary500,
197
+ notificationPrimaryText: themePrimitives.primaryA,
198
198
  notificationInfoBackground: themePrimitives.accent50,
199
- notificationInfoText: themePrimitives.accent500,
199
+ notificationInfoText: themePrimitives.primaryA,
200
200
  notificationPositiveBackground: themePrimitives.positive50,
201
- notificationPositiveText: themePrimitives.positive500,
201
+ notificationPositiveText: themePrimitives.primaryA,
202
202
  notificationWarningBackground: themePrimitives.warning50,
203
- notificationWarningText: themePrimitives.warning500,
203
+ notificationWarningText: themePrimitives.primaryA,
204
204
  notificationNegativeBackground: themePrimitives.negative50,
205
- notificationNegativeText: themePrimitives.negative500,
205
+ notificationNegativeText: themePrimitives.primaryA,
206
206
  // Tag
207
207
  // Custom ramps
208
208
  tagFontDisabledRampUnit: '100',
@@ -361,11 +361,16 @@ var _default = function _default() {
361
361
  tableFilterFooterBackground: themePrimitives.mono200,
362
362
  // Toast
363
363
  toastText: themePrimitives.white,
364
- toastPrimaryBackground: themePrimitives.primary500,
365
- toastInfoBackground: themePrimitives.accent500,
366
- toastPositiveBackground: themePrimitives.positive500,
367
- toastWarningBackground: themePrimitives.warning500,
368
- toastNegativeBackground: themePrimitives.negative500,
364
+ toastPrimaryBackground: themePrimitives.primary400,
365
+ toastPrimaryText: themePrimitives.white,
366
+ toastInfoBackground: themePrimitives.accent400,
367
+ toastInfoText: themePrimitives.white,
368
+ toastPositiveBackground: themePrimitives.positive400,
369
+ toastPositiveText: themePrimitives.white,
370
+ toastWarningBackground: themePrimitives.warning400,
371
+ toastWarningText: themePrimitives.black,
372
+ toastNegativeBackground: themePrimitives.negative400,
373
+ toastNegativeText: themePrimitives.white,
369
374
  // Spinner
370
375
  spinnerTrackFill: themePrimitives.mono900,
371
376
  // Progress bar
package/themes/light-theme/color-component-tokens.js.flow CHANGED
@@ -215,15 +215,15 @@ export default (
215
215
 
216
216
  // Notification
217
217
  notificationPrimaryBackground: themePrimitives.primary50,
218
- notificationPrimaryText: themePrimitives.primary500,
218
+ notificationPrimaryText: themePrimitives.primaryA,
219
219
  notificationInfoBackground: themePrimitives.accent50,
220
- notificationInfoText: themePrimitives.accent500,
220
+ notificationInfoText: themePrimitives.primaryA,
221
221
  notificationPositiveBackground: themePrimitives.positive50,
222
- notificationPositiveText: themePrimitives.positive500,
222
+ notificationPositiveText: themePrimitives.primaryA,
223
223
  notificationWarningBackground: themePrimitives.warning50,
224
- notificationWarningText: themePrimitives.warning500,
224
+ notificationWarningText: themePrimitives.primaryA,
225
225
  notificationNegativeBackground: themePrimitives.negative50,
226
- notificationNegativeText: themePrimitives.negative500,
226
+ notificationNegativeText: themePrimitives.primaryA,
227
227
 
228
228
  // Tag
229
229
 
@@ -392,11 +392,16 @@ export default (
392
392
 
393
393
  // Toast
394
394
  toastText: themePrimitives.white,
395
- toastPrimaryBackground: themePrimitives.primary500,
396
- toastInfoBackground: themePrimitives.accent500,
397
- toastPositiveBackground: themePrimitives.positive500,
398
- toastWarningBackground: themePrimitives.warning500,
399
- toastNegativeBackground: themePrimitives.negative500,
395
+ toastPrimaryBackground: themePrimitives.primary400,
396
+ toastPrimaryText: themePrimitives.white,
397
+ toastInfoBackground: themePrimitives.accent400,
398
+ toastInfoText: themePrimitives.white,
399
+ toastPositiveBackground: themePrimitives.positive400,
400
+ toastPositiveText: themePrimitives.white,
401
+ toastWarningBackground: themePrimitives.warning400,
402
+ toastWarningText: themePrimitives.black,
403
+ toastNegativeBackground: themePrimitives.negative400,
404
+ toastNegativeText: themePrimitives.white,
400
405
 
401
406
  // Spinner
402
407
  spinnerTrackFill: themePrimitives.mono900,
package/themes/types.js.flow CHANGED
@@ -524,10 +524,15 @@ export type ComponentColorTokensT = {|
524
524
  // Toast
525
525
  toastText: string,
526
526
  toastPrimaryBackground: string,
527
+ toastPrimaryText: string,
527
528
  toastInfoBackground: string,
529
+ toastInfoText: string,
528
530
  toastPositiveBackground: string,
531
+ toastPositiveText: string,
529
532
  toastWarningBackground: string,
533
+ toastWarningText: string,
530
534
  toastNegativeBackground: string,
535
+ toastNegativeText: string,
531
536
 
532
537
  // Spinner
533
538
  spinnerTrackFill: string,
package/toast/styled-components.js CHANGED
@@ -25,10 +25,18 @@ function getBackgroundColor(kind, type, theme) {
25
25
  return (_KIND$info$KIND$posit = {}, _defineProperty(_KIND$info$KIND$posit, _constants.KIND.info, isInline ? theme.colors.notificationInfoBackground : theme.colors.toastInfoBackground), _defineProperty(_KIND$info$KIND$posit, _constants.KIND.positive, isInline ? theme.colors.notificationPositiveBackground : theme.colors.toastPositiveBackground), _defineProperty(_KIND$info$KIND$posit, _constants.KIND.warning, isInline ? theme.colors.notificationWarningBackground : theme.colors.toastWarningBackground), _defineProperty(_KIND$info$KIND$posit, _constants.KIND.negative, isInline ? theme.colors.notificationNegativeBackground : theme.colors.toastNegativeBackground), _KIND$info$KIND$posit)[kind];
26
26
  }
27
27
 
28
- function getFontColor(kind, theme) {
29
- var _KIND$info$KIND$posit2;
28
+ function getFontColor(kind, type, theme) {
29
+ var _KIND$info$KIND$posit3;
30
30
 
31
- return (_KIND$info$KIND$posit2 = {}, _defineProperty(_KIND$info$KIND$posit2, _constants.KIND.info, theme.colors.notificationInfoText), _defineProperty(_KIND$info$KIND$posit2, _constants.KIND.positive, theme.colors.notificationPositiveText), _defineProperty(_KIND$info$KIND$posit2, _constants.KIND.warning, theme.colors.notificationWarningText), _defineProperty(_KIND$info$KIND$posit2, _constants.KIND.negative, theme.colors.notificationNegativeText), _KIND$info$KIND$posit2)[kind];
31
+ var isInline = type === _constants.TYPE.inline;
32
+
33
+ if (isInline) {
34
+ var _KIND$info$KIND$posit2;
35
+
36
+ return (_KIND$info$KIND$posit2 = {}, _defineProperty(_KIND$info$KIND$posit2, _constants.KIND.info, theme.colors.notificationInfoText), _defineProperty(_KIND$info$KIND$posit2, _constants.KIND.positive, theme.colors.notificationPositiveText), _defineProperty(_KIND$info$KIND$posit2, _constants.KIND.warning, theme.colors.notificationWarningText), _defineProperty(_KIND$info$KIND$posit2, _constants.KIND.negative, theme.colors.notificationNegativeText), _KIND$info$KIND$posit2)[kind];
37
+ }
38
+
39
+ return (_KIND$info$KIND$posit3 = {}, _defineProperty(_KIND$info$KIND$posit3, _constants.KIND.info, theme.colors.toastInfoText), _defineProperty(_KIND$info$KIND$posit3, _constants.KIND.positive, theme.colors.toastPositiveText), _defineProperty(_KIND$info$KIND$posit3, _constants.KIND.warning, theme.colors.toastWarningText), _defineProperty(_KIND$info$KIND$posit3, _constants.KIND.negative, theme.colors.toastNegativeText), _KIND$info$KIND$posit3)[kind];
32
40
  }
33
41
 
34
42
  function getPlacement(placement) {
@@ -96,9 +104,9 @@ var Body = (0, _index.styled)('div', function (props) {
96
104
  $type = props.$type,
97
105
  $theme = props.$theme;
98
106
  var isInline = $type === _constants.TYPE.inline;
99
- return _objectSpread(_objectSpread({}, $theme.typography.font250), {}, {
107
+ return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
100
108
  pointerEvents: 'auto',
101
- color: isInline ? getFontColor($kind, $theme) : $theme.colors.toastText,
109
+ color: getFontColor($kind, $type, $theme),
102
110
  height: 'auto',
103
111
  width: '288px',
104
112
  paddingTop: $theme.sizing.scale600,
package/toast/styled-components.js.flow CHANGED
@@ -40,12 +40,22 @@ function getBackgroundColor(
40
40
  }[kind];
41
41
  }
42
42
 
43
- function getFontColor(kind: KindTypeT, theme: ThemeT) {
43
+ function getFontColor(kind: KindTypeT, type: NotificationTypeT, theme: ThemeT) {
44
+ const isInline = type === TYPE.inline;
45
+ if (isInline) {
46
+ return {
47
+ [KIND.info]: theme.colors.notificationInfoText,
48
+ [KIND.positive]: theme.colors.notificationPositiveText,
49
+ [KIND.warning]: theme.colors.notificationWarningText,
50
+ [KIND.negative]: theme.colors.notificationNegativeText,
51
+ }[kind];
52
+ }
53
+
44
54
  return {
45
- [KIND.info]: theme.colors.notificationInfoText,
46
- [KIND.positive]: theme.colors.notificationPositiveText,
47
- [KIND.warning]: theme.colors.notificationWarningText,
48
- [KIND.negative]: theme.colors.notificationNegativeText,
55
+ [KIND.info]: theme.colors.toastInfoText,
56
+ [KIND.positive]: theme.colors.toastPositiveText,
57
+ [KIND.warning]: theme.colors.toastWarningText,
58
+ [KIND.negative]: theme.colors.toastNegativeText,
49
59
  }[kind];
50
60
  }
51
61
 
@@ -115,9 +125,9 @@ export const Body = styled<SharedStylePropsArgT>('div', props => {
115
125
  const {$isVisible, $kind, $type, $theme} = props;
116
126
  const isInline = $type === TYPE.inline;
117
127
  return {
118
- ...$theme.typography.font250,
128
+ ...$theme.typography.font300,
119
129
  pointerEvents: 'auto',
120
- color: isInline ? getFontColor($kind, $theme) : $theme.colors.toastText,
130
+ color: getFontColor($kind, $type, $theme),
121
131
  height: 'auto',
122
132
  width: '288px',
123
133
  paddingTop: $theme.sizing.scale600,