carbon-react 154.1.0 → 154.1.1

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 (3) hide show
  1. package/esm/components/switch/__internal__/switch-slider.style.js +34 -35
  2. package/lib/components/switch/__internal__/switch-slider.style.js +34 -35
  3. package/package.json +1 -1
package/esm/components/switch/__internal__/switch-slider.style.js CHANGED
@@ -20,8 +20,8 @@ const StyledSwitchSlider = styled.div`
20
20
  position: relative;
21
21
  text-transform: uppercase;
22
22
  top: 0;
23
- width: 100%
24
- z-index: 2;
23
+ width: 100%;
24
+ z-index: 1;
25
25
  border-radius: var(--borderRadius400);
26
26
  border-style: solid;
27
27
  border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
@@ -44,56 +44,55 @@ const StyledSwitchSlider = styled.div`
44
44
  }
45
45
 
46
46
  ${checked && css`
47
- background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
48
- border-color: var(--colorsActionMinorTransparent);
47
+ background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
48
+ border-color: var(--colorsActionMinorTransparent);
49
49
 
50
- &::before {
51
- margin-left: calc(
52
- 100% -
53
- ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
54
- );
55
- background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
56
- }
57
- `}
50
+ &::before {
51
+ margin-left: calc(
52
+ 100% - ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
53
+ );
54
+ background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
55
+ }
56
+ `}
58
57
 
59
58
  ${disabled && !isLoading && css`
60
- border-color: var(--colorsActionDisabled600);
59
+ border-color: var(--colorsActionDisabled600);
60
+
61
+ &::before {
62
+ background-color: var(--colorsActionDisabled600);
63
+ }
64
+
65
+ ${SwitchSliderPanel} {
66
+ color: var(--colorsUtilityYin030);
67
+ }
68
+
69
+ ${checked && css`
70
+ background-color: var(--colorsActionDisabled500);
71
+ border-color: var(--colorsActionMinorTransparent);
61
72
 
62
73
  &::before {
63
- background-color: var(--colorsActionDisabled600);
74
+ background-color: var(--colorsActionMinorYang100);
64
75
  }
65
76
 
66
77
  ${SwitchSliderPanel} {
67
78
  color: var(--colorsUtilityYin030);
68
79
  }
69
-
70
- ${checked && css`
71
- background-color: var(--colorsActionDisabled500);
72
- border-color: var(--colorsActionMinorTransparent);
73
-
74
- &::before {
75
- background-color: var(--colorsActionMinorYang100);
76
- }
77
-
78
- ${SwitchSliderPanel} {
79
- color: var(--colorsUtilityYin030);
80
- }
81
- `}
82
80
  `}
81
+ `}
83
82
 
84
83
  ${isLoading && css`
85
- &::before {
86
- display: none;
87
- }
88
- `}
84
+ &::before {
85
+ display: none;
86
+ }
87
+ `}
89
88
 
90
89
  ${warning && !disabled && css`
91
- border-color: var(--colorsSemanticCaution500);
92
- `}
90
+ border-color: var(--colorsSemanticCaution500);
91
+ `}
93
92
 
94
93
  ${error && !disabled && css`
95
- border-color: var(--colorsSemanticNegative500);
96
- `}
94
+ border-color: var(--colorsSemanticNegative500);
95
+ `}
97
96
 
98
97
  ${StyledValidationIcon} {
99
98
  position: absolute;
package/lib/components/switch/__internal__/switch-slider.style.js CHANGED
@@ -29,8 +29,8 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
29
29
  position: relative;
30
30
  text-transform: uppercase;
31
31
  top: 0;
32
- width: 100%
33
- z-index: 2;
32
+ width: 100%;
33
+ z-index: 1;
34
34
  border-radius: var(--borderRadius400);
35
35
  border-style: solid;
36
36
  border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
@@ -53,56 +53,55 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
53
53
  }
54
54
 
55
55
  ${checked && (0, _styledComponents.css)`
56
- background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
57
- border-color: var(--colorsActionMinorTransparent);
56
+ background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
57
+ border-color: var(--colorsActionMinorTransparent);
58
58
 
59
- &::before {
60
- margin-left: calc(
61
- 100% -
62
- ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
63
- );
64
- background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
65
- }
66
- `}
59
+ &::before {
60
+ margin-left: calc(
61
+ 100% - ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
62
+ );
63
+ background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
64
+ }
65
+ `}
67
66
 
68
67
  ${disabled && !isLoading && (0, _styledComponents.css)`
69
- border-color: var(--colorsActionDisabled600);
68
+ border-color: var(--colorsActionDisabled600);
69
+
70
+ &::before {
71
+ background-color: var(--colorsActionDisabled600);
72
+ }
73
+
74
+ ${_switchSliderPanel.default} {
75
+ color: var(--colorsUtilityYin030);
76
+ }
77
+
78
+ ${checked && (0, _styledComponents.css)`
79
+ background-color: var(--colorsActionDisabled500);
80
+ border-color: var(--colorsActionMinorTransparent);
70
81
 
71
82
  &::before {
72
- background-color: var(--colorsActionDisabled600);
83
+ background-color: var(--colorsActionMinorYang100);
73
84
  }
74
85
 
75
86
  ${_switchSliderPanel.default} {
76
87
  color: var(--colorsUtilityYin030);
77
88
  }
78
-
79
- ${checked && (0, _styledComponents.css)`
80
- background-color: var(--colorsActionDisabled500);
81
- border-color: var(--colorsActionMinorTransparent);
82
-
83
- &::before {
84
- background-color: var(--colorsActionMinorYang100);
85
- }
86
-
87
- ${_switchSliderPanel.default} {
88
- color: var(--colorsUtilityYin030);
89
- }
90
- `}
91
89
  `}
90
+ `}
92
91
 
93
92
  ${isLoading && (0, _styledComponents.css)`
94
- &::before {
95
- display: none;
96
- }
97
- `}
93
+ &::before {
94
+ display: none;
95
+ }
96
+ `}
98
97
 
99
98
  ${warning && !disabled && (0, _styledComponents.css)`
100
- border-color: var(--colorsSemanticCaution500);
101
- `}
99
+ border-color: var(--colorsSemanticCaution500);
100
+ `}
102
101
 
103
102
  ${error && !disabled && (0, _styledComponents.css)`
104
- border-color: var(--colorsSemanticNegative500);
105
- `}
103
+ border-color: var(--colorsSemanticNegative500);
104
+ `}
106
105
 
107
106
  ${_validationIcon.default} {
108
107
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "154.1.0",
3
+ "version": "154.1.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",