carbon-react 104.38.2 → 104.41.0

package/esm/components/draggable/draggable-item.style.js

@@ -8,9 +8,7 @@ const StyledDraggableContainer = styled.div`
 const StyledDraggableItem = styled.div`
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${({
-  theme
-}) => theme.draggableItem.border};
+  border-bottom: 1px solid var(--colorsUtilityMajor050);
   ${padding}
   cursor: move;
 

package/esm/components/grid/grid-item/grid-item.style.d.ts

@@ -1,2 +1,3 @@
+export function getSpacing(prop: any): any;
 export default GridItemStyle;
 declare const GridItemStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/grid/grid-item/grid-item.style.js

@@ -3,10 +3,9 @@ import { grid, flexbox } from "styled-system";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { padding } from "@styled-system/space";
 import PropTypes from "prop-types";
-import { baseTheme } from "../../../style/themes";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
-function responsiveGridItem(responsiveSettings, theme) {
+function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
@@ -26,24 +25,59 @@ function responsiveGridItem(responsiveSettings, theme) {
         justify-self: ${justifySelf || "stretch"};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
-        padding: ${getSpacing(p, theme)};
-        padding-left: ${getSpacing(pl, theme)};
-        padding-right: ${getSpacing(pr, theme)};
-        padding-top: ${getSpacing(pt, theme)};
-        padding-bottom: ${getSpacing(pb, theme)};
+        padding: ${getSpacing(p)};
+        padding-left: ${getSpacing(pl)};
+        padding-right: ${getSpacing(pr)};
+        padding-top: ${getSpacing(pt)};
+        padding-bottom: ${getSpacing(pb)};
       }
     `;
   });
 }
 
-function getSpacing(prop, theme) {
-  if (prop && typeof prop === "number") {
-    return `${theme.space[prop]}px`;
+export function getSpacing(prop) {
+  if (typeof prop === "number") {
+    switch (prop) {
+      case 0:
+        return "var(--spacing000)";
+
+      case 1:
+        return "var(--spacing100)";
+
+      case 2:
+        return "var(--spacing200)";
+
+      case 3:
+        return "var(--spacing300)";
+
+      case 4:
+        return "var(--spacing400)";
+
+      case 5:
+        return "var(--spacing500)";
+
+      case 6:
+        return "var(--spacing600)";
+
+      case 7:
+        return "var(--spacing700)";
+
+      case 8:
+        return "var(--spacing800)";
+
+      case 9:
+        return "var(--spacing900)";
+
+      case 10:
+        return "var(--spacing1000)";
+
+      default:
+        return "var(--spacing100)";
+    }
   }
 
   return prop;
 }
-
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 const GridItemStyle = styled.div`
   margin: 0;
@@ -70,10 +104,9 @@ const GridItemStyle = styled.div`
   gridColumn
 })}
   ${({
-  responsiveSettings,
-  theme
+  responsiveSettings
 }) => responsiveSettings && css`
-      ${responsiveGridItem(responsiveSettings, theme)};
+      ${responsiveGridItem(responsiveSettings)};
     `}
 `;
 GridItemStyle.propTypes = {
@@ -93,7 +126,6 @@ GridItemStyle.propTypes = {
 };
 GridItemStyle.defaultProps = {
   gridColumn: "1 / 13",
-  gridRow: "auto",
-  theme: baseTheme
+  gridRow: "auto"
 };
 export default GridItemStyle;

package/esm/components/link-preview/__internal__/placeholder.component.js

@@ -1,23 +1,17 @@
 import React from "react";
 import styled from "styled-components";
-import { toColor } from "../../../style/utils/color";
-import { baseTheme } from "../../../style/themes";
 const StyledPlaceHolder = styled.div`
   overflow: hidden;
   position: relative;
   height: 152px;
   min-width: 152px;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.background};
+  background-color: var(--colorsUtilityMajor025);
 `;
 const Circle = styled.div`
   height: 22px;
   width: 22px;
   border-radius: 50%;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.hoverBackground};
+  background-color: var(--colorsUtilityMajor100);
   position: absolute;
   left: 22px;
   top: 30px;
@@ -27,9 +21,8 @@ const Square = styled.div`
   width: 200px;
   transform: rotate(45deg);
   background-color: ${({
-  color,
-  theme
-}) => toColor(theme, color)};
+  color
+}) => color};
   position: absolute;
   border-radius: 2%;
   top: ${({
@@ -39,24 +32,15 @@ const Square = styled.div`
   left
 }) => left};
 `;
-StyledPlaceHolder.defaultProps = {
-  theme: baseTheme
-};
-Circle.defaultProps = {
-  theme: baseTheme
-};
-Square.defaultProps = {
-  theme: baseTheme
-};
 
 const Placeholder = () => /*#__PURE__*/React.createElement(StyledPlaceHolder, {
   "data-component": "link preview image placeholder"
 }, /*#__PURE__*/React.createElement(Circle, null), /*#__PURE__*/React.createElement(Square, {
-  color: "slateTint90",
+  color: "var(--colorsUtilityMajor050)",
   top: "120px",
   left: "-64px"
 }), /*#__PURE__*/React.createElement(Square, {
-  color: "slateTint75",
+  color: "var(--colorsUtilityMajor150)",
   top: "96px",
   left: "16px"
 }));

package/esm/components/link-preview/link-preview.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import { baseTheme } from "../../style/themes";
 import PreviewBars, { StyledPreview } from "../preview/preview.style";
 const StyledLinkPreview = styled.a`
   display: flex;
@@ -8,22 +7,21 @@ const StyledLinkPreview = styled.a`
   outline: none;
 
   ${({
-  theme,
   as
 }) => css`
-    border: 1px solid ${theme.editorLinkPreview.border};
-    background-color: ${theme.editorLinkPreview.background};
-    color: ${theme.text.color};
+    border: 1px solid var(--colorsUtilityMajor050);
+    background-color: var(--colorsUtilityMajor025);
+    color: var(--colorsUtilityYin090);
 
     ${as !== "div" && css`
       :focus {
-        outline: 2px solid ${theme.colors.focus};
+        outline: 2px solid var(--colorsSemanticFocus500);
         outline-offset: -1px;
       }
 
       :hover {
         cursor: pointer;
-        background-color: ${theme.editorLinkPreview.hoverBackground};
+        background-color: var(--colorsUtilityMajor100);
       }
     `}
   `}
@@ -81,14 +79,6 @@ const StyledUrl = styled.div`
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
-  color: ${({
-  theme
-}) => theme.editorLinkPreview.url};
+  color: var(--colorsUtilityMajor400);
 `;
-StyledLinkPreview.defaultProps = {
-  theme: baseTheme
-};
-StyledUrl.defaultProps = {
-  theme: baseTheme
-};
 export { StyledLinkPreview, StyledCloseIconWrapper, StyledPreviewWrapper, StyledTitle, StyledDescription, StyledUrl };

package/esm/components/popover-container/popover-container.style.d.ts

@@ -1,5 +1,4 @@
 export const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const PopoverContainerIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
 export const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;

package/esm/components/popover-container/popover-container.style.js

@@ -7,13 +7,6 @@ const PopoverContainerWrapperStyle = styled.div`
   position: relative;
   display: inline-block;
 `;
-const PopoverContainerIcon = styled(IconButton)`
-  ${StyledIcon} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
-  }
-`;
 const PopoverContainerHeaderStyle = styled.div`
   display: flex;
   justify-content: space-between;
@@ -23,12 +16,8 @@ const PopoverContainerHeaderStyle = styled.div`
 const PopoverContainerContentStyle = styled.div`
   ${padding}
 
-  background: ${({
-  theme
-}) => theme.colors.white};
-  box-shadow: ${({
-  theme
-}) => theme.shadows.depth1};
+  background: var(--colorsUtilityYang100);
+  box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;
   z-index: ${({
@@ -74,9 +63,7 @@ const PopoverContainerContentStyle = styled.div`
 `;
 const PopoverContainerOpenIcon = styled(IconButton)`
   ${StyledIcon} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
+    color: var(--colorsActionMinor500);
   }
 `;
 const PopoverContainerCloseIcon = styled(IconButton)`
@@ -85,9 +72,7 @@ const PopoverContainerCloseIcon = styled(IconButton)`
   right: 24px;
 
   ${StyledIcon} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
+    color: var(--colorsActionMinor500);
   }
 `;
 const PopoverContainerTitleStyle = styled.div`
@@ -97,13 +82,4 @@ const PopoverContainerTitleStyle = styled.div`
 PopoverContainerContentStyle.defaultProps = {
   theme: baseTheme
 };
-PopoverContainerIcon.defaultProps = {
-  theme: baseTheme
-};
-PopoverContainerCloseIcon.defaultProps = {
-  theme: baseTheme
-};
-PopoverContainerOpenIcon.defaultProps = {
-  theme: baseTheme
-};
-export { PopoverContainerWrapperStyle, PopoverContainerIcon, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };
+export { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };

package/esm/components/preview/preview.style.js

@@ -8,9 +8,7 @@ const shimmer = keyframes`
 `;
 const PreviewStyle = styled.span`
   animation: ${shimmer} 2s ease infinite;
-  background: ${({
-  theme
-}) => theme.colors.previewBackground};
+  background: var(--colorsUtilityMajor150);
   display: block;
   height: 15px;
   opacity: 0.6;
@@ -26,7 +24,4 @@ export const StyledPreview = styled.div`
 StyledPreview.defaultProps = {
   theme: baseTheme
 };
-PreviewStyle.defaultProps = {
-  theme: baseTheme
-};
 export default PreviewStyle;

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

@@ -433,16 +433,6 @@ declare function _default(palette: any): {
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
-        colorsComponentsNavigation500: string;
-        colorsComponentsNavigation600: string;
-        colorsComponentsNavigation700: string;
-        colorsComponentsNavigationTransparent: string;
-        colorsComponentsNavigationYin100: string;
-        colorsComponentsNavigationYin030: string;
-        colorsComponentsNavigationYin055: string;
-        colorsComponentsNavigationYin065: string;
-        colorsComponentsNavigationYin090: string;
-        colorsComponentsNavigationYang100: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -566,6 +556,7 @@ declare function _default(palette: any): {
         sizing075: string;
         sizingLogowidth: string;
         sizing010: string;
+        spacing1000: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
@@ -610,6 +601,9 @@ declare function _default(palette: any): {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardSelectTitleM: string;
+        typographyCardSelectSubtitleM: string;
+        typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;

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

@@ -70,16 +70,6 @@ declare var _default: {
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
-        colorsComponentsNavigation500: string;
-        colorsComponentsNavigation600: string;
-        colorsComponentsNavigation700: string;
-        colorsComponentsNavigationTransparent: string;
-        colorsComponentsNavigationYin100: string;
-        colorsComponentsNavigationYin030: string;
-        colorsComponentsNavigationYin055: string;
-        colorsComponentsNavigationYin065: string;
-        colorsComponentsNavigationYin090: string;
-        colorsComponentsNavigationYang100: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -224,6 +214,7 @@ declare var _default: {
         spacing700: string;
         spacing800: string;
         spacing900: string;
+        spacing1000: string;
         spacing000: string;
         spacing025: string;
         spacing050: string;
@@ -273,6 +264,9 @@ declare var _default: {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardSelectTitleM: string;
+        typographyCardSelectSubtitleM: string;
+        typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;

package/lib/components/draggable/draggable-item.style.js

@@ -22,9 +22,7 @@ exports.StyledDraggableContainer = StyledDraggableContainer;
 const StyledDraggableItem = _styledComponents.default.div`
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${({
-  theme
-}) => theme.draggableItem.border};
+  border-bottom: 1px solid var(--colorsUtilityMajor050);
   ${_styledSystem.padding}
   cursor: move;
 

package/lib/components/grid/grid-item/grid-item.style.d.ts

@@ -1,2 +1,3 @@
+export function getSpacing(prop: any): any;
 export default GridItemStyle;
 declare const GridItemStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/grid/grid-item/grid-item.style.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getSpacing = getSpacing;
 exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -15,8 +16,6 @@ var _space = require("@styled-system/space");
 
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
-var _themes = require("../../../style/themes");
-
 var _utils = require("../../../style/utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,7 +24,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; }
 
-function responsiveGridItem(responsiveSettings, theme) {
+function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
@@ -45,19 +44,55 @@ function responsiveGridItem(responsiveSettings, theme) {
         justify-self: ${justifySelf || "stretch"};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
-        padding: ${getSpacing(p, theme)};
-        padding-left: ${getSpacing(pl, theme)};
-        padding-right: ${getSpacing(pr, theme)};
-        padding-top: ${getSpacing(pt, theme)};
-        padding-bottom: ${getSpacing(pb, theme)};
+        padding: ${getSpacing(p)};
+        padding-left: ${getSpacing(pl)};
+        padding-right: ${getSpacing(pr)};
+        padding-top: ${getSpacing(pt)};
+        padding-bottom: ${getSpacing(pb)};
       }
     `;
   });
 }
 
-function getSpacing(prop, theme) {
-  if (prop && typeof prop === "number") {
-    return `${theme.space[prop]}px`;
+function getSpacing(prop) {
+  if (typeof prop === "number") {
+    switch (prop) {
+      case 0:
+        return "var(--spacing000)";
+
+      case 1:
+        return "var(--spacing100)";
+
+      case 2:
+        return "var(--spacing200)";
+
+      case 3:
+        return "var(--spacing300)";
+
+      case 4:
+        return "var(--spacing400)";
+
+      case 5:
+        return "var(--spacing500)";
+
+      case 6:
+        return "var(--spacing600)";
+
+      case 7:
+        return "var(--spacing700)";
+
+      case 8:
+        return "var(--spacing800)";
+
+      case 9:
+        return "var(--spacing900)";
+
+      case 10:
+        return "var(--spacing1000)";
+
+      default:
+        return "var(--spacing100)";
+    }
   }
 
   return prop;
@@ -89,10 +124,9 @@ const GridItemStyle = _styledComponents.default.div`
   gridColumn
 })}
   ${({
-  responsiveSettings,
-  theme
+  responsiveSettings
 }) => responsiveSettings && (0, _styledComponents.css)`
-      ${responsiveGridItem(responsiveSettings, theme)};
+      ${responsiveGridItem(responsiveSettings)};
     `}
 `;
 GridItemStyle.propTypes = {
@@ -112,8 +146,7 @@ GridItemStyle.propTypes = {
 };
 GridItemStyle.defaultProps = {
   gridColumn: "1 / 13",
-  gridRow: "auto",
-  theme: _themes.baseTheme
+  gridRow: "auto"
 };
 var _default = GridItemStyle;
 exports.default = _default;

package/lib/components/link-preview/__internal__/placeholder.component.js

@@ -9,10 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _color = require("../../../style/utils/color");
-
-var _themes = require("../../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledPlaceHolder = _styledComponents.default.div`
@@ -20,17 +16,13 @@ const StyledPlaceHolder = _styledComponents.default.div`
   position: relative;
   height: 152px;
   min-width: 152px;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.background};
+  background-color: var(--colorsUtilityMajor025);
 `;
 const Circle = _styledComponents.default.div`
   height: 22px;
   width: 22px;
   border-radius: 50%;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.hoverBackground};
+  background-color: var(--colorsUtilityMajor100);
   position: absolute;
   left: 22px;
   top: 30px;
@@ -40,9 +32,8 @@ const Square = _styledComponents.default.div`
   width: 200px;
   transform: rotate(45deg);
   background-color: ${({
-  color,
-  theme
-}) => (0, _color.toColor)(theme, color)};
+  color
+}) => color};
   position: absolute;
   border-radius: 2%;
   top: ${({
@@ -52,24 +43,15 @@ const Square = _styledComponents.default.div`
   left
 }) => left};
 `;
-StyledPlaceHolder.defaultProps = {
-  theme: _themes.baseTheme
-};
-Circle.defaultProps = {
-  theme: _themes.baseTheme
-};
-Square.defaultProps = {
-  theme: _themes.baseTheme
-};
 
 const Placeholder = () => /*#__PURE__*/_react.default.createElement(StyledPlaceHolder, {
   "data-component": "link preview image placeholder"
 }, /*#__PURE__*/_react.default.createElement(Circle, null), /*#__PURE__*/_react.default.createElement(Square, {
-  color: "slateTint90",
+  color: "var(--colorsUtilityMajor050)",
   top: "120px",
   left: "-64px"
 }), /*#__PURE__*/_react.default.createElement(Square, {
-  color: "slateTint75",
+  color: "var(--colorsUtilityMajor150)",
   top: "96px",
   left: "16px"
 }));

package/lib/components/link-preview/link-preview.style.js

@@ -7,8 +7,6 @@ exports.StyledUrl = exports.StyledDescription = exports.StyledTitle = exports.St
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../style/themes");
-
 var _preview = _interopRequireWildcard(require("../preview/preview.style"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -22,22 +20,21 @@ const StyledLinkPreview = _styledComponents.default.a`
   outline: none;
 
   ${({
-  theme,
   as
 }) => (0, _styledComponents.css)`
-    border: 1px solid ${theme.editorLinkPreview.border};
-    background-color: ${theme.editorLinkPreview.background};
-    color: ${theme.text.color};
+    border: 1px solid var(--colorsUtilityMajor050);
+    background-color: var(--colorsUtilityMajor025);
+    color: var(--colorsUtilityYin090);
 
     ${as !== "div" && (0, _styledComponents.css)`
       :focus {
-        outline: 2px solid ${theme.colors.focus};
+        outline: 2px solid var(--colorsSemanticFocus500);
         outline-offset: -1px;
       }
 
       :hover {
         cursor: pointer;
-        background-color: ${theme.editorLinkPreview.hoverBackground};
+        background-color: var(--colorsUtilityMajor100);
       }
     `}
   `}
@@ -100,14 +97,6 @@ const StyledUrl = _styledComponents.default.div`
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
-  color: ${({
-  theme
-}) => theme.editorLinkPreview.url};
+  color: var(--colorsUtilityMajor400);
 `;
-exports.StyledUrl = StyledUrl;
-StyledLinkPreview.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledUrl.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledUrl = StyledUrl;

package/lib/components/popover-container/popover-container.style.d.ts

@@ -1,5 +1,4 @@
 export const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const PopoverContainerIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
 export const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;

package/lib/components/popover-container/popover-container.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopoverContainerOpenIcon = exports.PopoverContainerTitleStyle = exports.PopoverContainerCloseIcon = exports.PopoverContainerContentStyle = exports.PopoverContainerHeaderStyle = exports.PopoverContainerIcon = exports.PopoverContainerWrapperStyle = void 0;
+exports.PopoverContainerOpenIcon = exports.PopoverContainerTitleStyle = exports.PopoverContainerCloseIcon = exports.PopoverContainerContentStyle = exports.PopoverContainerHeaderStyle = exports.PopoverContainerWrapperStyle = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -22,14 +22,6 @@ const PopoverContainerWrapperStyle = _styledComponents.default.div`
   display: inline-block;
 `;
 exports.PopoverContainerWrapperStyle = PopoverContainerWrapperStyle;
-const PopoverContainerIcon = (0, _styledComponents.default)(_iconButton.default)`
-  ${_icon.default} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
-  }
-`;
-exports.PopoverContainerIcon = PopoverContainerIcon;
 const PopoverContainerHeaderStyle = _styledComponents.default.div`
   display: flex;
   justify-content: space-between;
@@ -40,12 +32,8 @@ exports.PopoverContainerHeaderStyle = PopoverContainerHeaderStyle;
 const PopoverContainerContentStyle = _styledComponents.default.div`
   ${_styledSystem.padding}
 
-  background: ${({
-  theme
-}) => theme.colors.white};
-  box-shadow: ${({
-  theme
-}) => theme.shadows.depth1};
+  background: var(--colorsUtilityYang100);
+  box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;
   z-index: ${({
@@ -92,9 +80,7 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
 exports.PopoverContainerContentStyle = PopoverContainerContentStyle;
 const PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
   ${_icon.default} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
+    color: var(--colorsActionMinor500);
   }
 `;
 exports.PopoverContainerOpenIcon = PopoverContainerOpenIcon;
@@ -104,9 +90,7 @@ const PopoverContainerCloseIcon = (0, _styledComponents.default)(_iconButton.def
   right: 24px;
 
   ${_icon.default} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
+    color: var(--colorsActionMinor500);
   }
 `;
 exports.PopoverContainerCloseIcon = PopoverContainerCloseIcon;
@@ -117,13 +101,4 @@ const PopoverContainerTitleStyle = _styledComponents.default.div`
 exports.PopoverContainerTitleStyle = PopoverContainerTitleStyle;
 PopoverContainerContentStyle.defaultProps = {
   theme: _themes.baseTheme
-};
-PopoverContainerIcon.defaultProps = {
-  theme: _themes.baseTheme
-};
-PopoverContainerCloseIcon.defaultProps = {
-  theme: _themes.baseTheme
-};
-PopoverContainerOpenIcon.defaultProps = {
-  theme: _themes.baseTheme
 };

package/lib/components/preview/preview.style.js

@@ -24,9 +24,7 @@ const shimmer = (0, _styledComponents.keyframes)`
 `;
 const PreviewStyle = _styledComponents.default.span`
   animation: ${shimmer} 2s ease infinite;
-  background: ${({
-  theme
-}) => theme.colors.previewBackground};
+  background: var(--colorsUtilityMajor150);
   display: block;
   height: 15px;
   opacity: 0.6;
@@ -43,8 +41,5 @@ exports.StyledPreview = StyledPreview;
 StyledPreview.defaultProps = {
   theme: _base.default
 };
-PreviewStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = PreviewStyle;
 exports.default = _default;

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

@@ -433,16 +433,6 @@ declare function _default(palette: any): {
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
-        colorsComponentsNavigation500: string;
-        colorsComponentsNavigation600: string;
-        colorsComponentsNavigation700: string;
-        colorsComponentsNavigationTransparent: string;
-        colorsComponentsNavigationYin100: string;
-        colorsComponentsNavigationYin030: string;
-        colorsComponentsNavigationYin055: string;
-        colorsComponentsNavigationYin065: string;
-        colorsComponentsNavigationYin090: string;
-        colorsComponentsNavigationYang100: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -566,6 +556,7 @@ declare function _default(palette: any): {
         sizing075: string;
         sizingLogowidth: string;
         sizing010: string;
+        spacing1000: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
@@ -610,6 +601,9 @@ declare function _default(palette: any): {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardSelectTitleM: string;
+        typographyCardSelectSubtitleM: string;
+        typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;

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

@@ -70,16 +70,6 @@ declare var _default: {
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
-        colorsComponentsNavigation500: string;
-        colorsComponentsNavigation600: string;
-        colorsComponentsNavigation700: string;
-        colorsComponentsNavigationTransparent: string;
-        colorsComponentsNavigationYin100: string;
-        colorsComponentsNavigationYin030: string;
-        colorsComponentsNavigationYin055: string;
-        colorsComponentsNavigationYin065: string;
-        colorsComponentsNavigationYin090: string;
-        colorsComponentsNavigationYang100: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -224,6 +214,7 @@ declare var _default: {
         spacing700: string;
         spacing800: string;
         spacing900: string;
+        spacing1000: string;
         spacing000: string;
         spacing025: string;
         spacing050: string;
@@ -273,6 +264,9 @@ declare var _default: {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardSelectTitleM: string;
+        typographyCardSelectSubtitleM: string;
+        typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.38.2",
+  "version": "104.41.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -157,7 +157,7 @@
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
-    "@sage/design-tokens": "^1.92.0",
+    "@sage/design-tokens": "^1.93.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",