carbon-react 104.11.0 → 104.13.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 (5) hide show
  1. package/lib/components/button-toggle/button-toggle.style.js +25 -41
  2. package/lib/components/button-toggle-group/button-toggle-group.style.js +5 -13
  3. package/lib/components/navigation-bar/navigation-bar.style.js +10 -9
  4. package/lib/components/toast/toast.style.js +1 -1
  5. package/package.json +1 -1
package/lib/components/button-toggle/button-toggle.style.js CHANGED
@@ -9,8 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
 
10
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
11
 
12
- var _base = _interopRequireDefault(require("../../style/themes/base"));
13
-
14
12
  var _icon = _interopRequireDefault(require("../icon/icon.style"));
15
13
 
16
14
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -63,41 +61,35 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
63
61
  padding: 0 ${paddingConfig[size]}px;
64
62
  font-size: ${fontSizeConfig[size]}px;
65
63
  `}
66
- font-weight: 600;
64
+ font-weight: 700;
67
65
  cursor: pointer;
68
66
 
69
- ${({
70
- theme
71
- }) => (0, _styledComponents.css)`
72
- border: 1px solid ${theme.colors.border};
73
- background-color: ${theme.colors.white};
67
+ border: 1px solid var(--colorsActionMinor500);
74
68
 
75
- ${_icon.default} {
76
- color: ${theme.colors.black};
77
- }
69
+ ${_icon.default} {
70
+ color: var(--colorsActionMinor500);
71
+ }
78
72
 
79
- input:checked ~ && {
80
- background-color: ${theme.colors.whiteMix};
81
- border-color: ${theme.colors.secondary};
82
- color: ${theme.colors.text};
83
- cursor: auto;
84
- }
73
+ input:checked ~ && {
74
+ background-color: var(--colorsActionMinor300);
75
+ color: var(--colorsActionMinor600);
76
+ cursor: auto;
77
+ }
85
78
 
86
- input:focus ~ & {
87
- outline: 3px solid ${theme.colors.focus};
88
- z-index: 100;
89
- }
79
+ input:focus ~ & {
80
+ outline: 3px solid var(--colorsSemanticFocus500);
81
+ z-index: 100;
82
+ }
90
83
 
91
- input:not(:checked):not(:disabled) ~ &:hover {
92
- background-color: ${theme.colors.secondary};
93
- border-color: ${theme.colors.secondary};
94
- color: ${theme.colors.white};
84
+ input:not(:checked):not(:disabled) ~ &:hover {
85
+ background-color: var(--colorsActionMinor200);
86
+ border-color: var(--colorsActionMinor500);
87
+ color: var(--colorsActionMinor500);
95
88
 
96
- ${_icon.default} {
97
- color: ${theme.colors.white};
98
- }
89
+ ${_icon.default} {
90
+ color: var(--colorsActionMinor500);
99
91
  }
100
- `};
92
+ }
101
93
 
102
94
  ${({
103
95
  buttonIcon,
@@ -113,16 +105,14 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
113
105
  `}
114
106
 
115
107
  ${({
116
- disabled,
117
- theme
108
+ disabled
118
109
  }) => disabled && (0, _styledComponents.css)`
119
110
  & {
120
- background-color: ${theme.disabled.button};
121
- border-color: ${theme.disabled.button};
122
- color: ${theme.disabled.buttonText};
111
+ border-color: var(--colorsActionDisabled500);
112
+ color: var(--colorsActionMinorYin030);
123
113
 
124
114
  ${_icon.default} {
125
- color: ${theme.disabled.buttonText};
115
+ color: var(--colorsActionMinorYin030);
126
116
  }
127
117
  }
128
118
  cursor: not-allowed;
@@ -188,10 +178,4 @@ const StyledButtonToggleInput = _styledComponents.default.input`
188
178
  exports.StyledButtonToggleInput = StyledButtonToggleInput;
189
179
  StyledButtonToggleIcon.propTypes = {
190
180
  buttonIconSize: _propTypes.default.string
191
- };
192
- StyledButtonToggleLabel.defaultProps = {
193
- theme: _base.default
194
- };
195
- StyledButtonToggleLabel.defaultProps = {
196
- theme: _base.default
197
181
  };
package/lib/components/button-toggle-group/button-toggle-group.style.js CHANGED
@@ -11,8 +11,6 @@ var _buttonToggle = require("../button-toggle/button-toggle.style");
11
11
 
12
12
  var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
13
13
 
14
- var _base = _interopRequireDefault(require("../../style/themes/base"));
15
-
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
15
 
18
16
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -30,24 +28,21 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
30
28
 
31
29
  ${_buttonToggle.StyledButtonToggleLabel} {
32
30
  ${({
33
- theme,
34
31
  info
35
32
  }) => info && (0, _styledComponents.css)`
36
- border-color: ${theme.colors.info};
33
+ border-color: var(--colorsActionMinor500);
37
34
  `};
38
35
  ${({
39
- theme,
40
36
  warning
41
37
  }) => warning && (0, _styledComponents.css)`
42
- border-color: ${theme.colors.warning};
38
+ border-color: var(--colorsSemanticCaution500);
43
39
  `}
44
40
  ${({
45
- theme,
46
41
  error
47
42
  }) => error && (0, _styledComponents.css)`
48
- box-shadow: inset 1px 1px 0 ${theme.colors.error},
49
- inset -1px -1px 0 ${theme.colors.error};
50
- border-color: ${theme.colors.error};
43
+ box-shadow: inset 1px 1px 0 var(--colorsSemanticNegative500),
44
+ inset -1px -1px 0 var(--colorsSemanticNegative500);
45
+ border-color: var(--colorsSemanticNegative500);
51
46
  `}
52
47
  }
53
48
 
@@ -55,8 +50,5 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
55
50
  margin-left: 4px;
56
51
  }
57
52
  `;
58
- ButtonToggleGroupStyle.defaultProps = {
59
- theme: _base.default
60
- };
61
53
  var _default = ButtonToggleGroupStyle;
62
54
  exports.default = _default;
package/lib/components/navigation-bar/navigation-bar.style.js CHANGED
@@ -65,24 +65,25 @@ const StyledNavigationBar = _styledComponents.default.nav`
65
65
  z-index: ${theme.zIndex.nav};
66
66
 
67
67
  ${navigationType === "light" && (0, _styledComponents.css)`
68
- background-color: ${theme.navigationBar.light.background};
69
- border-bottom: 1px solid ${theme.navigationBar.light.borderBottom};
68
+ background-color: var(--colorsComponentsMenuSpringStandard500);
69
+ border-bottom: var(--borderWidth100) solid
70
+ var(--colorsComponentsMenuSpringChildAlt500);
70
71
  `}
71
72
 
72
73
  ${navigationType === "dark" && (0, _styledComponents.css)`
73
- background-color: ${theme.navigationBar.dark.background};
74
- border-bottom: 1px solid ${theme.navigationBar.dark.borderBottom};
75
- color: ${theme.colors.white};
74
+ background-color: var(--colorsComponentsMenuAutumnStandard500);
75
+ color: var(--colorsComponentsMenuYang100);
76
76
  `}
77
77
 
78
78
  ${navigationType === "black" && (0, _styledComponents.css)`
79
- background-color: ${theme.navigationBar.black.background};
80
- color: ${theme.colors.white};
79
+ background-color: var(--colorsComponentsMenuWinterStandard500);
80
+ color: var(--colorsComponentsMenuYang100);
81
81
  `}
82
82
 
83
83
  ${navigationType === "white" && (0, _styledComponents.css)`
84
- background-color: ${theme.colors.white};
85
- border-bottom: 1px solid ${theme.navigationBar.white.borderBottom};
84
+ background-color: var(--colorsComponentsMenuSummerStandard500);
85
+ border-bottom: var(--borderWidth100) solid
86
+ var(--colorsComponentsMenuSummerChildAlt500);
86
87
  `}
87
88
  `}
88
89
  `;
package/lib/components/toast/toast.style.js CHANGED
@@ -35,7 +35,7 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
35
35
  ${({
36
36
  theme
37
37
  }) => (0, _styledComponents.css)`
38
- position: absolute;
38
+ position: fixed;
39
39
  top: 0;
40
40
 
41
41
  z-index: ${theme.zIndex.notification};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "104.11.0",
3
+ "version": "104.13.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {