carbon-react 104.45.0 → 104.48.0

package/esm/components/box/box.component.js

@@ -4,6 +4,7 @@ import styled, { css } from "styled-components";
 import { space, layout, flexbox } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import color from "../../style/utils/color";
+import boxConfig from "./box.config";
 const Box = styled.div`
   ${space}
   ${layout}
@@ -17,20 +18,19 @@ const Box = styled.div`
     `}
 
   ${({
-  scrollVariant,
-  theme
+  scrollVariant
 }) => scrollVariant && css`
-      scrollbar-color: ${theme.scrollbar[scrollVariant].thumb}
-        ${theme.scrollbar[scrollVariant].track};
+      scrollbar-color: ${boxConfig[scrollVariant].thumb}
+        ${boxConfig[scrollVariant].track};
 
       &::-webkit-scrollbar {
         width: 8px;
       }
       &::-webkit-scrollbar-track {
-        background-color: ${theme.scrollbar[scrollVariant].track};
+        background-color: ${boxConfig[scrollVariant].track};
       }
       &::-webkit-scrollbar-thumb {
-        background-color: ${theme.scrollbar[scrollVariant].thumb};
+        background-color: ${boxConfig[scrollVariant].thumb};
       }
     `}
 `;

package/esm/components/box/box.config.d.ts

@@ -0,0 +1,13 @@
+declare namespace _default {
+    namespace light {
+        const thumb: string;
+        const track: string;
+    }
+    namespace dark {
+        const thumb_1: string;
+        export { thumb_1 as thumb };
+        const track_1: string;
+        export { track_1 as track };
+    }
+}
+export default _default;

package/esm/components/box/box.config.js

@@ -0,0 +1,10 @@
+export default {
+  light: {
+    thumb: "var(--colorsUtilityMajor300)",
+    track: "var(--colorsUtilityMajor025)"
+  },
+  dark: {
+    thumb: "var(--colorsUtilityMajor200)",
+    track: "var(--colorsUtilityMajor400)"
+  }
+};

package/esm/components/content/content.style.js

@@ -25,7 +25,6 @@ StyledContent.defaultProps = {
 };
 const StyledContentTitle = styled.div`
   ${({
-  theme,
   titleWidth,
   inline,
   variant,
@@ -34,7 +33,7 @@ const StyledContentTitle = styled.div`
   return css`
       display: ${inline ? "inline-block" : "block"};
       font-weight: bold;
-      color: ${theme.text.colors};
+      color: var(--colorsUtilityYin090);
       width: ${titleWidth && `calc(${titleWidth}% - 30px)`};
       text-align: ${!inline && align};
 
@@ -44,7 +43,7 @@ const StyledContentTitle = styled.div`
       `}
 
       ${variant === "secondary" && css`
-        color: ${theme.content.secondaryColor};
+        color: var(--colorsUtilityYin055);
         font-weight: normal;
       `}
     `;
@@ -86,7 +85,4 @@ const StyledContentBody = styled.div`
     `;
 }};
 `;
-StyledContentTitle.defaultProps = {
-  theme: baseTheme
-};
 export { StyledContent, StyledContentTitle, StyledContentBody };

package/esm/components/date/__internal__/date-picker/day-picker.style.js

@@ -231,7 +231,7 @@ const StyledDayPicker = styled.div`
     color: var(--colorsActionMajorYin090);
     line-height: var(--sizing500);
     height: var(--sizing500);
-    //font: var(--typographyDatePickerCalendarMonthM); to be implemented
+    //font: var(--typographyDatePickerCalendarMonthM); font assets to be updated part of FE-4975
     font-size: 16px;
     font-weight: 800;
 
@@ -243,13 +243,13 @@ const StyledDayPicker = styled.div`
 
   .DayPicker-Day {
     min-width: var(--sizing500);
-    height: 36px; //var(--sizing450); to be implemented
+    height: var(--sizing450);
     padding: 0;
     background-color: var(--colorsUtilityYang100);
     cursor: pointer;
     border: none;
-    //font-family: var(--fontFamiliesDefault); token value to be updated
-    //font: var(--typographyDatePickerCalendarDateM); to be implemented
+    //font-family: var(--fontFamiliesDefault); font assets to be updated part of FE-4975
+    //font: var(--typographyDatePickerCalendarDateM); font assets to be updated part of FE-4975
     font-weight: var(--fontWeights700);
     font-size: var(--fontSizes100);
     line-height: var(--lineHeights500);

package/esm/components/date/__internal__/weekday/weekday.style.js

@@ -9,7 +9,7 @@ const StyledWeekday = styled.div`
     color: var(--colorsActionMinor400);
     text-transform: uppercase;
     font-size: 12px;
-    //font: var(--typographyDatePickerCalendarDayM) to be implemented
+    //font: var(--typographyDatePickerCalendarDayM) font assets to be updated part of FE-4975
     text-align: center;
     padding: 20px 0 5px;
     box-sizing: border-box;

package/esm/components/date-range/date-range.style.js

@@ -16,7 +16,7 @@ const StyledDateRange = styled.div`
   }
 
   & ${StyledDateInput}:first-child {
-    margin-right: 15px;
+    margin-right: var(--spacing150);
   }
 
   ${StyledLabelContainer} {

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -11,7 +11,7 @@ const variantStyles = {
     backgroundColor: "#FFFFFF"
   },
   dark: {
-    backgroundColor: "slateTint90"
+    backgroundColor: "var(--colorsUtilityMajor050)"
   }
 };
 
@@ -34,7 +34,7 @@ const DismissibleBox = ({
   ml: 3
 }, /*#__PURE__*/React.createElement(Icon, {
   type: "close",
-  color: "slateTint20"
+  color: "var(--colorsActionMinor500)"
 }))));
 
 DismissibleBox.propTypes = { ...propTypes.space,

package/esm/components/dismissible-box/dismissible-box.style.js

@@ -1,23 +1,21 @@
 import styled, { css } from "styled-components";
 import Box from "../box";
-import { toColor } from "../../style/utils/color";
 import StyledIcon from "../icon/icon.style";
 export default styled(Box)`
   ${({
-  hasBorderLeftHighlight,
-  theme
+  hasBorderLeftHighlight
 }) => css`
     word-break: break-word;
 
-    border: 1px solid ${toColor(theme, "slateTint80")};
+    border: 1px solid var(--colorsUtilityMajor100);
 
     ${hasBorderLeftHighlight && `
       border-left: none;
-      box-shadow: -4px 0 0 0 ${toColor(theme, "slateTint20")};
+      box-shadow: -4px 0 0 0 var(--colorsUtilityMajor400);
     `}
 
     ${StyledIcon}:hover {
-      color: ${theme.palette.slate};
+      color: var(--colorsActionMinor600);
     }
   `}
 `;

package/esm/components/show-edit-pod/show-edit-pod.style.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { StyledFormFooter } from "../form/form.style.js";
 import { StyledContent } from "../pod/pod.style.js";
 import Pod from "../pod";
@@ -9,6 +9,13 @@ const StyledPod = styled(Pod)`
 
   ${StyledContent} {
     padding: 16px;
+    ${({
+  softDelete
+}) => softDelete && css`
+        [data-element="content-title"] {
+          color: var(--colorsUtilityYin030);
+        }
+      `}
   }
 
   .common-input__prefix {

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js

@@ -1,21 +1,11 @@
 import styled from "styled-components";
-import baseTheme from "../../../../style/themes/base";
 const SidebarHeaderStyle = styled.div`
-  background-color: ${({
-  theme
-}) => theme.colors.white};
-  box-shadow: inset 0 -1px 0 0 ${({
-  theme
-}) => theme.disabled.border};
+  background-color: var(--colorsUtilityMajor025);
+  box-shadow: inset 0 -1px 0 0 var(--colorsUtilityMajor100);
   box-sizing: border-box;
   width: 100%;
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsActionMinorYin090);
   transition: all 0.2s ease;
   padding: 27px 32px 32px 32px;
 `;
-SidebarHeaderStyle.defaultProps = {
-  theme: baseTheme
-};
 export default SidebarHeaderStyle;

package/esm/style/themes/base/base-theme.config.d.ts

@@ -261,16 +261,6 @@ declare function _default(palette: any): {
         warningButtonFocus: any;
         errorButtonFocus: any;
     };
-    scrollbar: {
-        light: {
-            thumb: any;
-            track: any;
-        };
-        dark: {
-            thumb: any;
-            track: any;
-        };
-    };
     search: {
         active: any;
         button: string;

package/esm/style/themes/base/base-theme.config.js

@@ -269,16 +269,6 @@ export default (palette => {
       warningButtonFocus: palette.carrotOrange,
       errorButtonFocus: palette.errorRedShade(20)
     },
-    scrollbar: {
-      light: {
-        thumb: palette.slateTint(40),
-        track: palette.slateTint(95)
-      },
-      dark: {
-        thumb: palette.slateTint(60),
-        track: palette.slateTint(20)
-      }
-    },
     search: {
       active: palette.gold,
       button: "#255BC7",

package/esm/style/themes/base/index.d.ts

@@ -294,18 +294,6 @@ export interface ThemeObject {
     errorButtonFocus: string;
   };
 
-  scrollbar: {
-    light: {
-      thumb: string;
-      track: string;
-    };
-
-    dark: {
-      thumb: string;
-      track: string;
-    };
-  };
-
   search: {
     active: string;
     button: string;

package/esm/style/themes/sage/index.d.ts

@@ -578,16 +578,6 @@ declare var _default: {
         warningButtonFocus: string;
         errorButtonFocus: string;
     };
-    scrollbar: {
-        light: {
-            thumb: string;
-            track: string;
-        };
-        dark: {
-            thumb: string;
-            track: string;
-        };
-    };
     search: {
         active: string;
         button: string;

package/lib/components/box/box.component.js

@@ -17,6 +17,8 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 
+var _box = _interopRequireDefault(require("./box.config"));
+
 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; }
@@ -36,20 +38,19 @@ const Box = _styledComponents.default.div`
     `}
 
   ${({
-  scrollVariant,
-  theme
+  scrollVariant
 }) => scrollVariant && (0, _styledComponents.css)`
-      scrollbar-color: ${theme.scrollbar[scrollVariant].thumb}
-        ${theme.scrollbar[scrollVariant].track};
+      scrollbar-color: ${_box.default[scrollVariant].thumb}
+        ${_box.default[scrollVariant].track};
 
       &::-webkit-scrollbar {
         width: 8px;
       }
       &::-webkit-scrollbar-track {
-        background-color: ${theme.scrollbar[scrollVariant].track};
+        background-color: ${_box.default[scrollVariant].track};
       }
       &::-webkit-scrollbar-thumb {
-        background-color: ${theme.scrollbar[scrollVariant].thumb};
+        background-color: ${_box.default[scrollVariant].thumb};
       }
     `}
 `;

package/lib/components/box/box.config.d.ts

@@ -0,0 +1,13 @@
+declare namespace _default {
+    namespace light {
+        const thumb: string;
+        const track: string;
+    }
+    namespace dark {
+        const thumb_1: string;
+        export { thumb_1 as thumb };
+        const track_1: string;
+        export { track_1 as track };
+    }
+}
+export default _default;

package/lib/components/box/box.config.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  light: {
+    thumb: "var(--colorsUtilityMajor300)",
+    track: "var(--colorsUtilityMajor025)"
+  },
+  dark: {
+    thumb: "var(--colorsUtilityMajor200)",
+    track: "var(--colorsUtilityMajor400)"
+  }
+};
+exports.default = _default;

package/lib/components/content/content.style.js

@@ -40,7 +40,6 @@ StyledContent.defaultProps = {
 };
 const StyledContentTitle = _styledComponents.default.div`
   ${({
-  theme,
   titleWidth,
   inline,
   variant,
@@ -49,7 +48,7 @@ const StyledContentTitle = _styledComponents.default.div`
   return (0, _styledComponents.css)`
       display: ${inline ? "inline-block" : "block"};
       font-weight: bold;
-      color: ${theme.text.colors};
+      color: var(--colorsUtilityYin090);
       width: ${titleWidth && `calc(${titleWidth}% - 30px)`};
       text-align: ${!inline && align};
 
@@ -59,7 +58,7 @@ const StyledContentTitle = _styledComponents.default.div`
       `}
 
       ${variant === "secondary" && (0, _styledComponents.css)`
-        color: ${theme.content.secondaryColor};
+        color: var(--colorsUtilityYin055);
         font-weight: normal;
       `}
     `;
@@ -102,7 +101,4 @@ const StyledContentBody = _styledComponents.default.div`
     `;
 }};
 `;
-exports.StyledContentBody = StyledContentBody;
-StyledContentTitle.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledContentBody = StyledContentBody;

package/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -242,7 +242,7 @@ const StyledDayPicker = _styledComponents.default.div`
     color: var(--colorsActionMajorYin090);
     line-height: var(--sizing500);
     height: var(--sizing500);
-    //font: var(--typographyDatePickerCalendarMonthM); to be implemented
+    //font: var(--typographyDatePickerCalendarMonthM); font assets to be updated part of FE-4975
     font-size: 16px;
     font-weight: 800;
 
@@ -254,13 +254,13 @@ const StyledDayPicker = _styledComponents.default.div`
 
   .DayPicker-Day {
     min-width: var(--sizing500);
-    height: 36px; //var(--sizing450); to be implemented
+    height: var(--sizing450);
     padding: 0;
     background-color: var(--colorsUtilityYang100);
     cursor: pointer;
     border: none;
-    //font-family: var(--fontFamiliesDefault); token value to be updated
-    //font: var(--typographyDatePickerCalendarDateM); to be implemented
+    //font-family: var(--fontFamiliesDefault); font assets to be updated part of FE-4975
+    //font: var(--typographyDatePickerCalendarDateM); font assets to be updated part of FE-4975
     font-weight: var(--fontWeights700);
     font-size: var(--fontSizes100);
     line-height: var(--lineHeights500);

package/lib/components/date/__internal__/weekday/weekday.style.js

@@ -19,7 +19,7 @@ const StyledWeekday = _styledComponents.default.div`
     color: var(--colorsActionMinor400);
     text-transform: uppercase;
     font-size: 12px;
-    //font: var(--typographyDatePickerCalendarDayM) to be implemented
+    //font: var(--typographyDatePickerCalendarDayM) font assets to be updated part of FE-4975
     text-align: center;
     padding: 20px 0 5px;
     box-sizing: border-box;

package/lib/components/date-range/date-range.style.js

@@ -31,7 +31,7 @@ const StyledDateRange = _styledComponents.default.div`
   }
 
   & ${_date.default}:first-child {
-    margin-right: 15px;
+    margin-right: var(--spacing150);
   }
 
   ${_labelStyle.StyledLabelContainer} {

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -26,7 +26,7 @@ const variantStyles = {
     backgroundColor: "#FFFFFF"
   },
   dark: {
-    backgroundColor: "slateTint90"
+    backgroundColor: "var(--colorsUtilityMajor050)"
   }
 };
 
@@ -49,7 +49,7 @@ const DismissibleBox = ({
   ml: 3
 }, /*#__PURE__*/_react.default.createElement(_icon.default, {
   type: "close",
-  color: "slateTint20"
+  color: "var(--colorsActionMinor500)"
 }))));
 
 DismissibleBox.propTypes = { ..._propTypes2.default.space,

package/lib/components/dismissible-box/dismissible-box.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _box = _interopRequireDefault(require("../box"));
 
-var _color = require("../../style/utils/color");
-
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,20 +19,19 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 var _default = (0, _styledComponents.default)(_box.default)`
   ${({
-  hasBorderLeftHighlight,
-  theme
+  hasBorderLeftHighlight
 }) => (0, _styledComponents.css)`
     word-break: break-word;
 
-    border: 1px solid ${(0, _color.toColor)(theme, "slateTint80")};
+    border: 1px solid var(--colorsUtilityMajor100);
 
     ${hasBorderLeftHighlight && `
       border-left: none;
-      box-shadow: -4px 0 0 0 ${(0, _color.toColor)(theme, "slateTint20")};
+      box-shadow: -4px 0 0 0 var(--colorsUtilityMajor400);
     `}
 
     ${_icon.default}:hover {
-      color: ${theme.palette.slate};
+      color: var(--colorsActionMinor600);
     }
   `}
 `;

package/lib/components/show-edit-pod/show-edit-pod.style.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _formStyle = require("../form/form.style.js");
 
@@ -15,6 +15,10 @@ var _pod = _interopRequireDefault(require("../pod"));
 
 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; }
+
 const StyledPod = (0, _styledComponents.default)(_pod.default)`
   ${_formStyle.StyledFormFooter} {
     margin-top: 24px;
@@ -22,6 +26,13 @@ const StyledPod = (0, _styledComponents.default)(_pod.default)`
 
   ${_podStyle.StyledContent} {
     padding: 16px;
+    ${({
+  softDelete
+}) => softDelete && (0, _styledComponents.css)`
+        [data-element="content-title"] {
+          color: var(--colorsUtilityYin030);
+        }
+      `}
   }
 
   .common-input__prefix {

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js

@@ -7,27 +7,16 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const SidebarHeaderStyle = _styledComponents.default.div`
-  background-color: ${({
-  theme
-}) => theme.colors.white};
-  box-shadow: inset 0 -1px 0 0 ${({
-  theme
-}) => theme.disabled.border};
+  background-color: var(--colorsUtilityMajor025);
+  box-shadow: inset 0 -1px 0 0 var(--colorsUtilityMajor100);
   box-sizing: border-box;
   width: 100%;
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsActionMinorYin090);
   transition: all 0.2s ease;
   padding: 27px 32px 32px 32px;
 `;
-SidebarHeaderStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = SidebarHeaderStyle;
 exports.default = _default;

package/lib/style/themes/base/base-theme.config.d.ts

@@ -261,16 +261,6 @@ declare function _default(palette: any): {
         warningButtonFocus: any;
         errorButtonFocus: any;
     };
-    scrollbar: {
-        light: {
-            thumb: any;
-            track: any;
-        };
-        dark: {
-            thumb: any;
-            track: any;
-        };
-    };
     search: {
         active: any;
         button: string;

package/lib/style/themes/base/base-theme.config.js

@@ -280,16 +280,6 @@ var _default = palette => {
       warningButtonFocus: palette.carrotOrange,
       errorButtonFocus: palette.errorRedShade(20)
     },
-    scrollbar: {
-      light: {
-        thumb: palette.slateTint(40),
-        track: palette.slateTint(95)
-      },
-      dark: {
-        thumb: palette.slateTint(60),
-        track: palette.slateTint(20)
-      }
-    },
     search: {
       active: palette.gold,
       button: "#255BC7",

package/lib/style/themes/base/index.d.ts

@@ -294,18 +294,6 @@ export interface ThemeObject {
     errorButtonFocus: string;
   };
 
-  scrollbar: {
-    light: {
-      thumb: string;
-      track: string;
-    };
-
-    dark: {
-      thumb: string;
-      track: string;
-    };
-  };
-
   search: {
     active: string;
     button: string;

package/lib/style/themes/sage/index.d.ts

@@ -578,16 +578,6 @@ declare var _default: {
         warningButtonFocus: string;
         errorButtonFocus: string;
     };
-    scrollbar: {
-        light: {
-            thumb: string;
-            track: string;
-        };
-        dark: {
-            thumb: string;
-            track: string;
-        };
-    };
     search: {
         active: string;
         button: string;

package/package.json

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