baseui 0.0.0-next-9ea5ef7 → 0.0.0-next-4b225ad

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/select/select-component.js +2 -10
  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/select/select-component.js +2 -11
  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/select/select-component.js +2 -11
  11. package/select/select-component.js.flow +5 -7
  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/select/select-component.js CHANGED
@@ -124,11 +124,6 @@ class Select extends React.Component {
124
124
  this.handleClick(event);
125
125
  });
126
126
 
127
- _defineProperty(this, "handleTouchEndClearValue", event => {
128
- if (this.dragging) return;
129
- this.clearValue(event);
130
- });
131
-
132
127
  _defineProperty(this, "handleClick", event => {
133
128
  if (this.props.disabled || !isClick(event) && !isLeftClick(event)) {
134
129
  return;
@@ -741,7 +736,7 @@ class Select extends React.Component {
741
736
  "aria-required": this.props.required || null,
742
737
  onFocus: this.handleInputFocus,
743
738
  tabIndex: 0
744
- }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
739
+ }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
745
740
  "aria-hidden": true,
746
741
  id: this.props.id || null,
747
742
  ref: this.handleInputRef,
@@ -753,7 +748,7 @@ class Select extends React.Component {
753
748
  padding: 0
754
749
  },
755
750
  tabIndex: -1
756
- }));
751
+ }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
757
752
  }
758
753
 
759
754
  return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
@@ -800,9 +795,6 @@ class Select extends React.Component {
800
795
  title: ariaLabel,
801
796
  "aria-label": ariaLabel,
802
797
  onClick: this.clearValue,
803
- onTouchEnd: this.handleTouchEndClearValue,
804
- onTouchMove: this.handleTouchMove,
805
- onTouchStart: this.handleTouchStart,
806
798
  role: "button",
807
799
  overrides: {
808
800
  Svg: {
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/select/select-component.js CHANGED
@@ -183,12 +183,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
183
183
  _this.handleClick(event);
184
184
  });
185
185
 
186
- _defineProperty(_assertThisInitialized(_this), "handleTouchEndClearValue", function (event) {
187
- if (_this.dragging) return;
188
-
189
- _this.clearValue(event);
190
- });
191
-
192
186
  _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
193
187
  if (_this.props.disabled || !isClick(event) && !isLeftClick(event)) {
194
188
  return;
@@ -865,7 +859,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
865
859
  "aria-required": this.props.required || null,
866
860
  onFocus: this.handleInputFocus,
867
861
  tabIndex: 0
868
- }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
862
+ }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
869
863
  "aria-hidden": true,
870
864
  id: this.props.id || null,
871
865
  ref: this.handleInputRef,
@@ -877,7 +871,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
877
871
  padding: 0
878
872
  },
879
873
  tabIndex: -1
880
- }));
874
+ }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
881
875
  }
882
876
 
883
877
  return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
@@ -929,9 +923,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
929
923
  title: ariaLabel,
930
924
  "aria-label": ariaLabel,
931
925
  onClick: this.clearValue,
932
- onTouchEnd: this.handleTouchEndClearValue,
933
- onTouchMove: this.handleTouchMove,
934
- onTouchStart: this.handleTouchStart,
935
926
  role: "button",
936
927
  overrides: {
937
928
  Svg: {
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": "0.0.0-next-9ea5ef7",
3
+ "version": "0.0.0-next-4b225ad",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",
package/select/select-component.js CHANGED
@@ -204,12 +204,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
204
204
  _this.handleClick(event);
205
205
  });
206
206
 
207
- _defineProperty(_assertThisInitialized(_this), "handleTouchEndClearValue", function (event) {
208
- if (_this.dragging) return;
209
-
210
- _this.clearValue(event);
211
- });
212
-
213
207
  _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
214
208
  if (_this.props.disabled || !isClick(event) && !isLeftClick(event)) {
215
209
  return;
@@ -886,7 +880,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
886
880
  "aria-required": this.props.required || null,
887
881
  onFocus: this.handleInputFocus,
888
882
  tabIndex: 0
889
- }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
883
+ }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
890
884
  "aria-hidden": true,
891
885
  id: this.props.id || null,
892
886
  ref: this.handleInputRef,
@@ -898,7 +892,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
898
892
  padding: 0
899
893
  },
900
894
  tabIndex: -1
901
- }));
895
+ }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
902
896
  }
903
897
 
904
898
  return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(_autosizeInput.default, _extends({
@@ -950,9 +944,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
950
944
  title: ariaLabel,
951
945
  "aria-label": ariaLabel,
952
946
  onClick: this.clearValue,
953
- onTouchEnd: this.handleTouchEndClearValue,
954
- onTouchMove: this.handleTouchMove,
955
- onTouchStart: this.handleTouchStart,
956
947
  role: "button",
957
948
  overrides: {
958
949
  Svg: {
package/select/select-component.js.flow CHANGED
@@ -188,10 +188,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
188
188
  if (this.dragging) return;
189
189
  this.handleClick(event);
190
190
  };
191
- handleTouchEndClearValue = (event: TouchEvent) => {
192
- if (this.dragging) return;
193
- this.clearValue(event);
194
- };
195
191
 
196
192
  handleClick = (event: MouseEvent | TouchEvent) => {
197
193
  if (this.props.disabled || (!isClick(event) && !isLeftClick(event))) {
@@ -734,6 +730,11 @@ class Select extends React.Component<PropsT, SelectStateT> {
734
730
  padding: 0,
735
731
  }}
736
732
  tabIndex={-1}
733
+ {...(overrides.Input
734
+ ? overrides.Input.props
735
+ ? overrides.Input.props
736
+ : {}
737
+ : {})}
737
738
  />
738
739
  </InputContainer>
739
740
  );
@@ -796,9 +797,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
796
797
  title={ariaLabel}
797
798
  aria-label={ariaLabel}
798
799
  onClick={this.clearValue}
799
- onTouchEnd={this.handleTouchEndClearValue}
800
- onTouchMove={this.handleTouchMove}
801
- onTouchStart={this.handleTouchStart}
802
800
  role="button"
803
801
  overrides={{
804
802
  Svg: {
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,