carbon-react 104.2.0 → 104.3.0

package/lib/components/accordion/accordion.style.js

@@ -37,18 +37,11 @@ const StyledAccordionContainer = _styledComponents.default.div`
   width: ${({
   width
 }) => width || "100%"};
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsUtilityYin090);
   background-color: ${({
-  scheme,
-  theme
-}) => scheme === "white" ? theme.colors.white : "transparent"};
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-      border: 1px solid ${theme.accordion.border};
-    `}
+  scheme
+}) => scheme === "white" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
+  border: 1px solid var(--colorsUtilityMajor100);
   ${({
   borders
 }) => borders === "default" && (0, _styledComponents.css)`
@@ -63,12 +56,8 @@ const StyledAccordionContainer = _styledComponents.default.div`
 
   & + & {
     margin-top: -1px;
-    border-top: 1px solid ${({
-  theme
-}) => theme.accordion.border};
-    border-bottom: 1px solid ${({
-  theme
-}) => theme.accordion.border};
+    border-top: 1px solid var(--colorsUtilityMajor100);
+    border-bottom: 1px solid var(--colorsUtilityMajor100);
   }
 `;
 exports.StyledAccordionContainer = StyledAccordionContainer;
@@ -91,15 +80,15 @@ exports.StyledAccordionSubTitle = StyledAccordionSubTitle;
 const StyledAccordionIcon = (0, _styledComponents.default)(_icon.default)`
   transition: transform 0.3s;
   margin-right: ${({
-  iconAlign,
-  theme
-}) => iconAlign === "left" ? theme.spacing * 2 : 0}px;
+  iconAlign
+}) => iconAlign === "left" ? "var(--spacing200)" : "var(--spacing000)"};
   ${({
   isExpanded,
   iconAlign
 }) => {
   return !isExpanded && (iconAlign === "right" ? "transform: rotate(90deg)" : "transform: rotate(-90deg)");
 }};
+  color: var(--colorsActionMinor500);
 `;
 exports.StyledAccordionIcon = StyledAccordionIcon;
 const StyledAccordionHeadingsContainer = _styledComponents.default.div`
@@ -134,10 +123,9 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
   buttonWidth,
   iconAlign,
   size,
-  theme,
   hasButtonProps
 }) => (0, _styledComponents.css)`
-    padding: ${size === "small" ? theme.spacing * 2 : theme.spacing * 3}px;
+    padding: ${size === "small" ? "var(--spacing200)" : "var(--spacing300)"};
     ${_styledSystem.space}
     display: flex;
     align-items: center;
@@ -152,12 +140,12 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
     z-index: 1;
 
     &:focus {
-      outline: ${buttonHeading ? "3px" : "2px"} solid ${theme.colors.focus};
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     ${!buttonHeading && (0, _styledComponents.css)`
       &:hover {
-        background-color: ${theme.accordion.background};
+        background-color: var(--colorsUtilityMajor050);
       }
     `}
 
@@ -165,10 +153,10 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       box-sizing: border-box;
       font-weight: 600;
       text-decoration: none;
-      font-size: ${theme.text.size};
-      min-height: ${theme.spacing * 5}px;
+      font-size: var(--fontSizes100);
+      min-height: var(--spacing500);
 
-      color: ${theme.colors.primary};
+      color: var(--colorsActionMajor500);
 
       ${!hasButtonProps && (0, _styledComponents.css)`
         ${StyledAccordionHeadingsContainer} {
@@ -177,7 +165,7 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       `}
 
       ${StyledAccordionIcon} {
-        color: ${theme.colors.primary};
+        color: var(--colorsActionMajor500);
         ${!hasButtonProps && (0, _styledComponents.css)`
           position: relative;
           ${iconAlign}: 16px;
@@ -185,9 +173,9 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       }
 
       &:hover {
-        color: ${theme.colors.secondary};
+        color: var(--colorsActionMajor600);
         ${StyledAccordionIcon} {
-          color: ${theme.colors.secondary};
+          color: var(--colorsActionMajor600);
         }
       }
 
@@ -217,9 +205,8 @@ const StyledAccordionContentContainer = _styledComponents.default.div`
 `;
 exports.StyledAccordionContentContainer = StyledAccordionContentContainer;
 const StyledAccordionContent = _styledComponents.default.div`
-  padding: 0 ${({
-  theme
-}) => theme.spacing * 3}px;
+  padding: var(--spacing300);
+  padding-top: 0;
   overflow: hidden;
 
   ${({
@@ -237,16 +224,4 @@ StyledAccordionContainer.defaultProps = {
 };
 StyledAccordionTitleContainer.defaultProps = {
   theme: _themes.baseTheme
-};
-StyledAccordionTitle.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledAccordionIcon.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledAccordionContent.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledAccordionContentContainer.defaultProps = {
-  theme: _themes.baseTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.2.0",
+  "version": "104.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {