carbon-react 104.48.1 → 104.51.0

package/esm/__internal__/character-count/character-count.style.js

@@ -1,14 +1,12 @@
 import styled, { css } from "styled-components";
-import baseTheme from "../../style/themes/base";
 const StyledCharacterCount = styled.div`
   text-align: right;
   font-size: 12px;
   margin-top: 4px;
   margin-bottom: 4px;
   color: ${({
-  theme,
   isOverLimit
-}) => isOverLimit ? theme.colors.error : theme.disabled.disabled};
+}) => isOverLimit ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
 
   ${({
   isOverLimit
@@ -16,7 +14,4 @@ const StyledCharacterCount = styled.div`
       font-weight: 700;
     `}
 `;
-StyledCharacterCount.defaultProps = {
-  theme: baseTheme
-};
 export default StyledCharacterCount;

package/esm/__internal__/checkable-input/checkable-input.style.js

@@ -5,7 +5,6 @@ import { FieldLineStyle } from "../form-field/form-field.style";
 import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import LabelStyle, { StyledLabelContainer } from "../label/label.style";
 import StyledHelp from "../../components/help/help.style";
-import baseTheme from "../../style/themes/base";
 import StyledValidationIcon from "../validations/validation-icon.style";
 const StyledCheckableInput = styled.div`
   display: inline-block;
@@ -18,8 +17,7 @@ const StyledCheckableInputWrapper = styled.div`
   inputWidth,
   labelWidth,
   labelInline,
-  reverse,
-  theme
+  reverse
 }) => css`
     ${FieldLineStyle} {
       display: flex;
@@ -33,12 +31,12 @@ const StyledCheckableInputWrapper = styled.div`
       width: auto;
 
       & ${StyledHelp}, & ${StyledValidationIcon} {
-        color: ${theme.help.color};
+        color: var(--colorsUtilityYin065);
         vertical-align: middle;
 
         &:hover,
         &:focus {
-          color: ${theme.text.color};
+          color: var(--colorsUtilityYin090);
         }
       }
     }
@@ -103,10 +101,6 @@ StyledCheckableInputWrapper.propTypes = {
   disabled: PropTypes.bool,
   fieldHelpInline: PropTypes.bool,
   inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  theme: PropTypes.object
-};
-StyledCheckableInputWrapper.defaultProps = {
-  theme: baseTheme
+  labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { StyledCheckableInput, StyledCheckableInputWrapper };

package/esm/__internal__/input/input-presentation.style.js

@@ -10,7 +10,7 @@ export const StyledInputPresentationContainer = styled.div`
 `;
 const InputPresentationStyle = styled.div`
   align-items: stretch;
-  background: #fff;
+  background: var(--colorsUtilityYang100);
   border: 1px solid var(--colorsUtilityMajor300);
   box-sizing: border-box;
   cursor: text;

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts

@@ -1,5 +1,4 @@
 export default InputIconToggleStyle;
 declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, {
     onKeyDown: (e: import("react").KeyboardEvent<HTMLSpanElement>) => any;
-    theme: import("../../style/themes/base").ThemeObject;
-}, "theme" | "onKeyDown">;
+}, "onKeyDown">;

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
-import BaseTheme from "../../style/themes/base";
 import sizes from "../input/input-sizes.style";
 const InputIconToggleStyle = styled.span.attrs(({
   onClick
@@ -11,8 +10,7 @@ const InputIconToggleStyle = styled.span.attrs(({
       e.preventDefault();
       return onClick(e);
     }
-  },
-  theme: BaseTheme
+  }
 }))`
   align-items: center;
   cursor: pointer;
@@ -28,15 +26,12 @@ const InputIconToggleStyle = styled.span.attrs(({
   `}
 
   &:focus {
-    outline: solid 3px ${({
-  theme
-}) => theme.colors.focus};
+    outline: solid 3px var(--colorsSemanticFocus500);
   }
 `;
 InputIconToggleStyle.safeProps = ["size", "error", "warning", "info"];
 InputIconToggleStyle.defaultProps = {
-  size: "medium",
-  theme: BaseTheme
+  size: "medium"
 };
 InputIconToggleStyle.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large"]),

package/esm/components/button/button.component.js

@@ -24,10 +24,10 @@ function renderChildren({
 
 }) {
   const iconColorMap = {
-    primary: "var(--colorsActionMajorYang100)",
-    secondary: "var(--colorsActionMajor500)",
-    tertiary: "var(--colorsActionMajor500)",
-    darkBackground: "var(--colorsActionMajor500)"
+    primary: "--colorsActionMajorYang100",
+    secondary: "--colorsActionMajor500",
+    tertiary: "--colorsActionMajor500",
+    darkBackground: "--colorsActionMajor500"
   };
   const iconProps = {
     "aria-hidden": true,

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

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

package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -121,7 +121,7 @@ FlatTableCell.propTypes = {
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
 
-  /** Sets a custom vertical right border */
+  /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: PropTypes.string
 };
 export default FlatTableCell;

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -154,7 +154,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   }))));
 });
 FlatTableRow.propTypes = {
-  /** Overrides default cell color */
+  /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
   bgColor: PropTypes.string,
 
   /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
@@ -181,7 +181,7 @@ FlatTableRow.propTypes = {
   /** Sets an expandable row to be expanded on start */
   expanded: PropTypes.bool,
 
-  /** Sets the color of the bottom border in the row */
+  /** Sets the color of the bottom border in the row, provide design token, any color from palette or any valid css color value. */
   horizontalBorderColor: PropTypes.string,
 
   /** Sets the weight of the bottom border in the row */

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -82,7 +82,7 @@ FlatTableRowHeader.propTypes = {
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
 
-  /** Sets a custom vertical right border */
+  /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: PropTypes.string
 };
 export default FlatTableRowHeader;

package/esm/components/icon/icon.component.js

@@ -140,10 +140,10 @@ Icon.propTypes = { ...marginPropTypes,
   /** Icon font size */
   fontSize: PropTypes.oneOf(["small", "medium", "large", "extra-large"]),
 
-  /** Icon colour, provide any color from palette or any valid css color value. */
+  /** Icon colour, provide design token, any color from palette or any valid css color value. */
   color: PropTypes.string,
 
-  /** Background colour, provide any color from palette or any valid css color value. */
+  /** Background colour, provide design token, any color from palette, or any valid css color value. */
   bg: PropTypes.string,
 
   /** Sets the icon in the disabled state */
@@ -164,10 +164,10 @@ Icon.propTypes = { ...marginPropTypes,
   /** Control whether the tooltip is visible */
   tooltipVisible: PropTypes.bool,
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipBgColor: PropTypes.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipFontColor: PropTypes.string,
 
   /** Id passed to the tooltip container, used for accessibility purposes. */

package/esm/components/icon/icon.style.js

@@ -7,6 +7,7 @@ import baseTheme from "../../style/themes/base";
 import iconSizeConfig, { ICON_SHAPES } from "./icon-config";
 import browserTypeCheck, { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
 import styledColor from "../../style/utils/color";
+import getColorValue from "../../style/utils/get-color-value";
 
 function adjustIconBgSize(fontSize, bgSize) {
   var _replacements$fontSiz;
@@ -56,9 +57,6 @@ const StyledIcon = styled.span`
     if (disabled) {
       finalColor = "var(--colorsYin030)";
       finalHoverColor = "var(--colorsYin030)";
-    } else if (typeof color === "string" && color.startsWith("var")) {
-      finalColor = color;
-      finalHoverColor = shade(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
     } else if (color) {
       const {
         color: renderedColor
@@ -67,7 +65,7 @@ const StyledIcon = styled.span`
         theme
       });
       finalColor = renderedColor;
-      finalHoverColor = shade(0.2, renderedColor);
+      finalHoverColor = shade(0.2, getColorValue(renderedColor));
     } else {
       finalColor = "var(--colorsYin090)";
       finalHoverColor = "var(--colorsYin090)";
@@ -81,7 +79,7 @@ const StyledIcon = styled.span`
         theme
       });
       bgColor = backgroundColor;
-      bgHoverColor = shade(0.2, backgroundColor);
+      bgHoverColor = shade(0.2, getColorValue(backgroundColor));
     } else {
       bgColor = "transparent";
       bgHoverColor = "transparent";

package/esm/components/link/link.component.js

@@ -1,13 +1,11 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext, useMemo } from "react";
-import { ThemeContext } from "styled-components";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
 import Event from "../../__internal__/utils/helpers/events";
 import { StyledLink, StyledContent } from "./link.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { baseTheme } from "../../style/themes";
 import useLocale from "../../hooks/__internal__/useLocale";
 const Link = /*#__PURE__*/React.forwardRef(({
   children,
@@ -29,7 +27,6 @@ const Link = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const l = useLocale();
-  const theme = useContext(ThemeContext) || baseTheme;
   const tabIndex = tabbable && !disabled ? "0" : "-1";
 
   const handleOnKeyDown = ev => {
@@ -53,7 +50,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
       type: icon,
       bgSize: "extra-small",
-      color: theme.colors.primary,
+      color: "--colorsActionMajor500",
       disabled: disabled,
       ariaLabel: ariaLabel,
       tooltipMessage: tooltipMessage,

package/esm/components/pill/pill.component.js

@@ -45,7 +45,7 @@ Pill.propTypes = {
   /** Change the color of a status pill. */
   colorVariant: PropTypes.oneOf(["neutral", "negative", "positive", "warning"]),
 
-  /** Override color variant, provide any color from palette or any valid css color value. */
+  /** Override color variant, provide design token, any color from palette or any valid css color value. */
   borderColor: PropTypes.string,
 
   /** The content to display inside of the pill.  */

package/esm/components/pill/pill.style.js

@@ -6,6 +6,7 @@ import styleConfig from "./pill.style.config";
 import { baseTheme } from "../../style/themes";
 import StyledIcon from "../icon/icon.style";
 import { toColor } from "../../style/utils/color.js";
+import getColorValue from "../../style/utils/get-color-value";
 
 function addStyleToPillIcon(fontSize) {
   return `
@@ -37,8 +38,8 @@ const PillStyle = styled.span`
   try {
     if (borderColor) {
       pillColor = toColor(theme, borderColor);
-      buttonFocusColor = shade(0.2, pillColor);
-      contentColor = meetsContrastGuidelines(pillColor, theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
+      buttonFocusColor = shade(0.2, getColorValue(pillColor));
+      contentColor = meetsContrastGuidelines(getColorValue(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
       const {
         varietyColor,

package/esm/components/portrait/portrait.component.js

@@ -152,10 +152,10 @@ Portrait.propTypes = { ...marginPropTypes,
   /** Defines the size of the tooltip content */
   tooltipSize: PropTypes.oneOf(["medium", "large"]),
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipBgColor: PropTypes.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipFontColor: PropTypes.string
 };
 Portrait.defaultProps = {

package/esm/components/scrollable-list/scrollable-list-item.component.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import propTypes from "prop-types";
-import baseTheme from "../../style/themes/base";
 const ScrollableListItem = styled.li`
   ${({
   isSelectable
@@ -8,10 +7,9 @@ const ScrollableListItem = styled.li`
       cursor: pointer;
     `}
   ${({
-  isSelected,
-  theme
+  isSelected
 }) => isSelected && css`
-      background-color: ${theme.select.selected};
+      background-color: var(--colorsUtilityMajor025);
     `}
   box-sizing: content-box;
   padding: 5px 6px;
@@ -19,12 +17,10 @@ const ScrollableListItem = styled.li`
 `;
 ScrollableListItem.propTypes = {
   id: propTypes.any,
-  isSelected: propTypes.bool,
-  theme: propTypes.object
+  isSelected: propTypes.bool
 };
 ScrollableListItem.defaultProps = {
-  isSelectable: true,
-  // defaulted to true so it integrates with ScrollableList by default,
-  theme: baseTheme
+  isSelectable: true // defaulted to true so it integrates with ScrollableList by default,
+
 };
 export default ScrollableListItem;

package/esm/components/tooltip/tooltip.component.js

@@ -102,10 +102,10 @@ Tooltip.propTypes = {
   // Reference element, tooltip will be positioned in relation to this element
   target: PropTypes.instanceOf(Element),
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   bgColor: PropTypes.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   fontColor: PropTypes.string,
 
   /** @ignore @private */

package/esm/style/utils/color.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { color as styledColor } from "styled-system";
+import tokens from "@sage/design-tokens/js/base/common";
 /*
  * styled-system/color allows users to use a color from the theme, from the `colors` object.
  *
@@ -21,6 +22,10 @@ import { color as styledColor } from "styled-system";
  */
 
 export const toColor = (theme, color) => {
+  if (color.startsWith("--") && color.slice(2) in tokens) {
+    return `var(${color})`;
+  }
+
   const {
     palette
   } = theme;

package/esm/style/utils/get-color-value.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: string) => string;
+export default _default;

package/esm/style/utils/get-color-value.js

@@ -0,0 +1,8 @@
+import tokens from "@sage/design-tokens/js/base/common";
+export default (color => {
+  if (color.startsWith("var")) {
+    return tokens[color.replace("var(--", "").replace(")", "")];
+  }
+
+  return color;
+});

package/lib/__internal__/character-count/character-count.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; }
@@ -21,9 +17,8 @@ const StyledCharacterCount = _styledComponents.default.div`
   margin-top: 4px;
   margin-bottom: 4px;
   color: ${({
-  theme,
   isOverLimit
-}) => isOverLimit ? theme.colors.error : theme.disabled.disabled};
+}) => isOverLimit ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
 
   ${({
   isOverLimit
@@ -31,8 +26,5 @@ const StyledCharacterCount = _styledComponents.default.div`
       font-weight: 700;
     `}
 `;
-StyledCharacterCount.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledCharacterCount;
 exports.default = _default;

package/lib/__internal__/checkable-input/checkable-input.style.js

@@ -19,8 +19,6 @@ var _label = _interopRequireWildcard(require("../label/label.style"));
 
 var _help = _interopRequireDefault(require("../../components/help/help.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _validationIcon = _interopRequireDefault(require("../validations/validation-icon.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,8 +39,7 @@ const StyledCheckableInputWrapper = _styledComponents.default.div`
   inputWidth,
   labelWidth,
   labelInline,
-  reverse,
-  theme
+  reverse
 }) => (0, _styledComponents.css)`
     ${_formField.FieldLineStyle} {
       display: flex;
@@ -56,12 +53,12 @@ const StyledCheckableInputWrapper = _styledComponents.default.div`
       width: auto;
 
       & ${_help.default}, & ${_validationIcon.default} {
-        color: ${theme.help.color};
+        color: var(--colorsUtilityYin065);
         vertical-align: middle;
 
         &:hover,
         &:focus {
-          color: ${theme.text.color};
+          color: var(--colorsUtilityYin090);
         }
       }
     }
@@ -127,9 +124,5 @@ StyledCheckableInputWrapper.propTypes = {
   disabled: _propTypes.default.bool,
   fieldHelpInline: _propTypes.default.bool,
   inputWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  labelWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  theme: _propTypes.default.object
-};
-StyledCheckableInputWrapper.defaultProps = {
-  theme: _base.default
+  labelWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };

package/lib/__internal__/input/input-presentation.style.js

@@ -27,7 +27,7 @@ const StyledInputPresentationContainer = _styledComponents.default.div`
 exports.StyledInputPresentationContainer = StyledInputPresentationContainer;
 const InputPresentationStyle = _styledComponents.default.div`
   align-items: stretch;
-  background: #fff;
+  background: var(--colorsUtilityYang100);
   border: 1px solid var(--colorsUtilityMajor300);
   box-sizing: border-box;
   cursor: text;

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts

@@ -1,5 +1,4 @@
 export default InputIconToggleStyle;
 declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, {
     onKeyDown: (e: import("react").KeyboardEvent<HTMLSpanElement>) => any;
-    theme: import("../../style/themes/base").ThemeObject;
-}, "theme" | "onKeyDown">;
+}, "onKeyDown">;

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _inputSizes = _interopRequireDefault(require("../input/input-sizes.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,8 +26,7 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
       e.preventDefault();
       return onClick(e);
     }
-  },
-  theme: _base.default
+  }
 }))`
   align-items: center;
   cursor: pointer;
@@ -45,15 +42,12 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
   `}
 
   &:focus {
-    outline: solid 3px ${({
-  theme
-}) => theme.colors.focus};
+    outline: solid 3px var(--colorsSemanticFocus500);
   }
 `;
 InputIconToggleStyle.safeProps = ["size", "error", "warning", "info"];
 InputIconToggleStyle.defaultProps = {
-  size: "medium",
-  theme: _base.default
+  size: "medium"
 };
 InputIconToggleStyle.propTypes = {
   size: _propTypes.default.oneOf(["small", "medium", "large"]),

package/lib/components/button/button.component.js

@@ -43,10 +43,10 @@ function renderChildren({
 
 }) {
   const iconColorMap = {
-    primary: "var(--colorsActionMajorYang100)",
-    secondary: "var(--colorsActionMajor500)",
-    tertiary: "var(--colorsActionMajor500)",
-    darkBackground: "var(--colorsActionMajor500)"
+    primary: "--colorsActionMajorYang100",
+    secondary: "--colorsActionMajor500",
+    tertiary: "--colorsActionMajor500",
+    darkBackground: "--colorsActionMajor500"
   };
   const iconProps = {
     "aria-hidden": true,

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

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

package/lib/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -140,7 +140,7 @@ FlatTableCell.propTypes = {
   /** Sets a custom vertical right border */
   verticalBorder: _propTypes.default.oneOf(["small", "medium", "large"]),
 
-  /** Sets a custom vertical right border */
+  /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: _propTypes.default.string
 };
 var _default = FlatTableCell;

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -179,7 +179,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 FlatTableRow.propTypes = {
-  /** Overrides default cell color */
+  /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
   bgColor: _propTypes.default.string,
 
   /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
@@ -206,7 +206,7 @@ FlatTableRow.propTypes = {
   /** Sets an expandable row to be expanded on start */
   expanded: _propTypes.default.bool,
 
-  /** Sets the color of the bottom border in the row */
+  /** Sets the color of the bottom border in the row, provide design token, any color from palette or any valid css color value. */
   horizontalBorderColor: _propTypes.default.string,
 
   /** Sets the weight of the bottom border in the row */

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -97,7 +97,7 @@ FlatTableRowHeader.propTypes = {
   /** Sets a custom vertical right border */
   verticalBorder: _propTypes.default.oneOf(["small", "medium", "large"]),
 
-  /** Sets a custom vertical right border */
+  /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: _propTypes.default.string
 };
 var _default = FlatTableRowHeader;

package/lib/components/icon/icon.component.js

@@ -165,10 +165,10 @@ Icon.propTypes = { ...marginPropTypes,
   /** Icon font size */
   fontSize: _propTypes.default.oneOf(["small", "medium", "large", "extra-large"]),
 
-  /** Icon colour, provide any color from palette or any valid css color value. */
+  /** Icon colour, provide design token, any color from palette or any valid css color value. */
   color: _propTypes.default.string,
 
-  /** Background colour, provide any color from palette or any valid css color value. */
+  /** Background colour, provide design token, any color from palette, or any valid css color value. */
   bg: _propTypes.default.string,
 
   /** Sets the icon in the disabled state */
@@ -189,10 +189,10 @@ Icon.propTypes = { ...marginPropTypes,
   /** Control whether the tooltip is visible */
   tooltipVisible: _propTypes.default.bool,
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipBgColor: _propTypes.default.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipFontColor: _propTypes.default.string,
 
   /** Id passed to the tooltip container, used for accessibility purposes. */

package/lib/components/icon/icon.style.js

@@ -23,6 +23,8 @@ var _browserTypeCheck = _interopRequireWildcard(require("../../__internal__/util
 
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 
+var _getColorValue = _interopRequireDefault(require("../../style/utils/get-color-value"));
+
 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; }
@@ -77,9 +79,6 @@ const StyledIcon = _styledComponents.default.span`
     if (disabled) {
       finalColor = "var(--colorsYin030)";
       finalHoverColor = "var(--colorsYin030)";
-    } else if (typeof color === "string" && color.startsWith("var")) {
-      finalColor = color;
-      finalHoverColor = (0, _polished.shade)(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
     } else if (color) {
       const {
         color: renderedColor
@@ -88,7 +87,7 @@ const StyledIcon = _styledComponents.default.span`
         theme
       });
       finalColor = renderedColor;
-      finalHoverColor = (0, _polished.shade)(0.2, renderedColor);
+      finalHoverColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(renderedColor));
     } else {
       finalColor = "var(--colorsYin090)";
       finalHoverColor = "var(--colorsYin090)";
@@ -102,7 +101,7 @@ const StyledIcon = _styledComponents.default.span`
         theme
       });
       bgColor = backgroundColor;
-      bgHoverColor = (0, _polished.shade)(0.2, backgroundColor);
+      bgHoverColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(backgroundColor));
     } else {
       bgColor = "transparent";
       bgHoverColor = "transparent";

package/lib/components/link/link.component.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = require("styled-components");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../icon"));
@@ -19,8 +17,6 @@ var _link = require("./link.style");
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _themes = require("../../style/themes");
-
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,9 +47,6 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const l = (0, _useLocale.default)();
-
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
-
   const tabIndex = tabbable && !disabled ? "0" : "-1";
 
   const handleOnKeyDown = ev => {
@@ -77,7 +70,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     return hasProperAlignment ? /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: icon,
       bgSize: "extra-small",
-      color: theme.colors.primary,
+      color: "--colorsActionMajor500",
       disabled: disabled,
       ariaLabel: ariaLabel,
       tooltipMessage: tooltipMessage,

package/lib/components/pill/pill.component.js

@@ -62,7 +62,7 @@ Pill.propTypes = {
   /** Change the color of a status pill. */
   colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
 
-  /** Override color variant, provide any color from palette or any valid css color value. */
+  /** Override color variant, provide design token, any color from palette or any valid css color value. */
   borderColor: _propTypes.default.string,
 
   /** The content to display inside of the pill.  */

package/lib/components/pill/pill.style.js

@@ -21,6 +21,8 @@ var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
 var _color = require("../../style/utils/color.js");
 
+var _getColorValue = _interopRequireDefault(require("../../style/utils/get-color-value"));
+
 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; }
@@ -57,8 +59,8 @@ const PillStyle = _styledComponents.default.span`
   try {
     if (borderColor) {
       pillColor = (0, _color.toColor)(theme, borderColor);
-      buttonFocusColor = (0, _polished.shade)(0.2, pillColor);
-      contentColor = (0, _polished.meetsContrastGuidelines)(pillColor, theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
+      buttonFocusColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(pillColor));
+      contentColor = (0, _polished.meetsContrastGuidelines)((0, _getColorValue.default)(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
       const {
         varietyColor,

package/lib/components/portrait/portrait.component.js

@@ -174,10 +174,10 @@ Portrait.propTypes = { ...marginPropTypes,
   /** Defines the size of the tooltip content */
   tooltipSize: _propTypes.default.oneOf(["medium", "large"]),
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipBgColor: _propTypes.default.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   tooltipFontColor: _propTypes.default.string
 };
 Portrait.defaultProps = {

package/lib/components/scrollable-list/scrollable-list-item.component.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-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; }
@@ -24,10 +22,9 @@ const ScrollableListItem = _styledComponents.default.li`
       cursor: pointer;
     `}
   ${({
-  isSelected,
-  theme
+  isSelected
 }) => isSelected && (0, _styledComponents.css)`
-      background-color: ${theme.select.selected};
+      background-color: var(--colorsUtilityMajor025);
     `}
   box-sizing: content-box;
   padding: 5px 6px;
@@ -35,13 +32,11 @@ const ScrollableListItem = _styledComponents.default.li`
 `;
 ScrollableListItem.propTypes = {
   id: _propTypes.default.any,
-  isSelected: _propTypes.default.bool,
-  theme: _propTypes.default.object
+  isSelected: _propTypes.default.bool
 };
 ScrollableListItem.defaultProps = {
-  isSelectable: true,
-  // defaulted to true so it integrates with ScrollableList by default,
-  theme: _base.default
+  isSelectable: true // defaulted to true so it integrates with ScrollableList by default,
+
 };
 var _default = ScrollableListItem;
 exports.default = _default;

package/lib/components/tooltip/tooltip.component.js

@@ -124,10 +124,10 @@ Tooltip.propTypes = {
   // Reference element, tooltip will be positioned in relation to this element
   target: _propTypes.default.instanceOf(Element),
 
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   bgColor: _propTypes.default.string,
 
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
   fontColor: _propTypes.default.string,
 
   /** @ignore @private */

package/lib/style/utils/color.js

@@ -7,6 +7,10 @@ exports.default = exports.toColor = void 0;
 
 var _styledSystem = require("styled-system");
 
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // eslint-disable-next-line no-restricted-imports
 
 /*
@@ -29,6 +33,10 @@ var _styledSystem = require("styled-system");
  * This allows us to keep our themes as plain objects.
  */
 const toColor = (theme, color) => {
+  if (color.startsWith("--") && color.slice(2) in _common.default) {
+    return `var(${color})`;
+  }
+
   const {
     palette
   } = theme;

package/lib/style/utils/get-color-value.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: string) => string;
+export default _default;

package/lib/style/utils/get-color-value.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = color => {
+  if (color.startsWith("var")) {
+    return _common.default[color.replace("var(--", "").replace(")", "")];
+  }
+
+  return color;
+};
+
+exports.default = _default;

package/package.json

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