carbon-react 104.28.0 → 104.29.0

package/lib/__internal__/sticky-footer/sticky-footer.style.js

@@ -7,10 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,24 +16,20 @@ const FormButtonAnimation = (0, _styledComponents.keyframes)`
   100% { transform: translateY(0px); }
 `;
 const StyledStickyFooter = _styledComponents.default.div`
+  padding: var(--spacing200) var(--spacing400);
+  box-sizing: border-box;
+  width: 100%;
   ${({
-  sticky,
-  theme
-}) => (0, _styledComponents.css)`
-    ${sticky && (0, _styledComponents.css)`
+  sticky
+}) => sticky && (0, _styledComponents.css)`
       animation: ${FormButtonAnimation} 0.25s ease;
       position: sticky;
-      width: 100%;
       bottom: 0;
       left: 0;
-      background-color: ${theme.colors.white};
-      box-shadow: 0 -4px 12px rgba(153, 173, 182, 0.05);
+      background-color: var(--colorsComponentsNavigationYang100);
+      box-shadow: var(--boxShadow150);
       z-index: 1000;
     `}
-  `}
 `;
-StyledStickyFooter.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledStickyFooter;
 exports.default = _default;

package/lib/components/drawer/drawer.style.js

@@ -7,8 +7,6 @@ exports.StyledButton = exports.StyledSidebarTitle = exports.StyledDrawerSidebar
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _tabs = _interopRequireDefault(require("../tabs/tabs.style"));
 
 var _box = _interopRequireDefault(require("../box"));
@@ -21,6 +19,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const defaultExpandedWidth = "var(--sizing500)";
 const StyledSidebarHeader = _styledComponents.default.div`
   ${({
   isExpanded
@@ -29,14 +28,14 @@ const StyledSidebarHeader = _styledComponents.default.div`
     top: 0;
 
     ${isExpanded && (0, _styledComponents.css)`
-      border-bottom: 1px solid #ccd6db;
+      border-bottom: var(--sizing010) solid #ccd6db;
     `}
   `}
 `;
 exports.StyledSidebarHeader = StyledSidebarHeader;
 const StyledSidebarTitle = _styledComponents.default.div`
   white-space: nowrap;
-  padding: 24px 36px 24px 40px;
+  padding: var(--spacing300) var(--spacing500);
 `;
 exports.StyledSidebarTitle = StyledSidebarTitle;
 const StyledDrawerChildren = _styledComponents.default.div`
@@ -90,9 +89,9 @@ const sidebarHidden = () => (0, _styledComponents.keyframes)`
 
 const drawerOpen = expandedWidth => (0, _styledComponents.keyframes)`
   0% {
-    width: 40px;
+    width: ${defaultExpandedWidth};
     overflow: hidden;
-    min-width: 40px;
+    min-width: ${defaultExpandedWidth};
   }
   100% {
     width: ${expandedWidth};
@@ -102,7 +101,7 @@ const drawerOpen = expandedWidth => (0, _styledComponents.keyframes)`
 
 const drawerClose = expandedWidth => (0, _styledComponents.keyframes)`
   0% {width: ${expandedWidth};}
-  100% {width: 40px;}
+  100% {width: ${defaultExpandedWidth};}
 `;
 
 const buttonOpen = () => (0, _styledComponents.keyframes)`
@@ -119,19 +118,19 @@ const buttonClose = () => (0, _styledComponents.keyframes)`
 const StyledDrawerContent = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
-  min-width: 40px;
-  width: 40px;
+  min-width: ${defaultExpandedWidth};
+  width: ${defaultExpandedWidth};
   min-height: 40px;
   height: auto;
   position: relative;
   overflow: auto;
-  border-right: 1px solid ${({
-  theme
-}) => theme.drawer.divider};
-  background-color: ${({
-  backgroundColor,
-  theme
-}) => backgroundColor || theme.drawer.background}};
+
+  ${({
+  backgroundColor
+}) => (0, _styledComponents.css)`
+    background-color: ${backgroundColor || "var(--colorsUtilityMajor040)"};
+    border-right: 1px solid ${backgroundColor || "var(--colorsUtilityMajor075)"};
+  `};
 
   &.open {
     min-width: 52px;
@@ -150,11 +149,13 @@ const StyledDrawerContent = _styledComponents.default.div`
   animationDuration,
   expandedWidth
 }) => (0, _styledComponents.css)`
-      ${drawerOpen(expandedWidth)} ${animationDuration}
-    `} ease-in-out;
+        ${drawerOpen(expandedWidth)} ${animationDuration}
+      `}
+      ease-in-out;
 
     ${StyledDrawerSidebar}, ${StyledSidebarTitle} {
-      animation: ${sidebarVisible} ${({
+      animation: ${sidebarVisible}
+        ${({
   animationDuration
 }) => animationDuration} ease-in-out;
     }
@@ -173,11 +174,13 @@ const StyledDrawerContent = _styledComponents.default.div`
   animationDuration,
   expandedWidth
 }) => (0, _styledComponents.css)`
-      ${drawerClose(expandedWidth)} ${animationDuration}
-    `} ease-in-out;
+        ${drawerClose(expandedWidth)} ${animationDuration}
+      `}
+      ease-in-out;
 
     ${StyledDrawerSidebar}, ${StyledSidebarTitle}, ${_stickyFooter.default} {
-      animation: ${sidebarHidden} ${({
+      animation: ${sidebarHidden}
+        ${({
   animationDuration
 }) => animationDuration} ease-in-out;
     }
@@ -189,15 +192,17 @@ const StyledButton = _styledComponents.default.button.attrs({
 })`
   ${({
   animationDuration,
-  isExpanded,
-  theme
+  isExpanded
 }) => (0, _styledComponents.css)`
     position: absolute;
-    top: 24px;
+    top: var(--spacing300);
     right: 8px;
-    padding: 0;
-    width: 24px;
-    height: 24px;
+    padding: var(--spacing100);
+    width: var(--spacing300);
+    height: var(--spacing300);
+    display: flex;
+    justify-content: center;
+    align-items: center;
     transition: margin-right ${animationDuration} ease-in-out;
     background-color: transparent;
     border: none;
@@ -205,7 +210,7 @@ const StyledButton = _styledComponents.default.button.attrs({
     animation: ${buttonClose} ${animationDuration} ease-in-out;
 
     &:focus {
-      outline: 3px solid ${theme.colors.focus};
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     &:hover {
@@ -225,10 +230,4 @@ const StyledDrawerWrapper = _styledComponents.default.div`
   height
 }) => height};
 `;
-exports.StyledDrawerWrapper = StyledDrawerWrapper;
-StyledDrawerContent.defaultProps = {
-  theme: _base.default
-};
-StyledButton.defaultProps = {
-  theme: _base.default
-};
+exports.StyledDrawerWrapper = StyledDrawerWrapper;

package/package.json

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