carbon-react 104.15.0 → 104.18.0

package/lib/__internal__/validations/validation-icon.style.js

@@ -19,6 +19,12 @@ 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 validationIconTypes = {
+  error: "var(--colorsSemanticNegative500)",
+  info: "var(--colorsSemanticInfo500)",
+  success: "var(--colorsSemanticPositive500)",
+  warning: "var(--colorsSemanticCaution500)"
+};
 const ValidationIconStyle = _styledComponents.default.span`
   background: none;
   cursor: default;
@@ -37,15 +43,12 @@ const ValidationIconStyle = _styledComponents.default.span`
 
   ${_icon.default}:before {
     color: ${({
-  validationType,
-  theme
-}) => theme.colors[validationType]};
+  validationType
+}) => validationIconTypes[validationType]};
   }
 
   ${_icon.default}:focus {
-    outline: solid 2px ${({
-  theme
-}) => theme.colors.focus};
+    outline: solid 2px var(--colorsSemanticFocus500);
   }
 
   ${_styledSystem.margin}

package/lib/components/button-bar/button-bar.style.d.ts

@@ -1,5 +1,4 @@
 export default ButtonBar;
 declare const ButtonBar: import("styled-components").StyledComponent<"div", any, {
-    theme: any;
     size: any;
 }, never>;

package/lib/components/button-bar/button-bar.style.js

@@ -29,7 +29,6 @@ const ButtonBar = _styledComponents.default.div`
 `;
 
 function stylingForType({
-  theme,
   size
 }) {
   return (0, _styledComponents.css)`
@@ -50,7 +49,7 @@ function stylingForType({
 
     button {
       margin: 0;
-      border: 2px solid ${theme.colors.primary};
+      border: 2px solid var(--colorsActionMajor500);
 
       &:not(:last-of-type) {
         border-right-color: transparent;
@@ -61,20 +60,20 @@ function stylingForType({
       &:focus {
         position: relative;
         z-index: 2;
-        border-right-color: ${theme.colors.primary};
+        border-right-color: var(--colorsActionMajor500);
       }
       &:hover {
-        background-color: ${theme.colors.secondary};
-        border-color: ${theme.colors.secondary};
+        background-color: var(--colorsActionMajor600);
+        border-color: var(--colorsActionMajor600);
         & + button {
-          border-left-color: ${theme.colors.secondary};
+          border-left-color: var(--colorsActionMajor600);
         }
         & ${_icon.default} {
           color: white;
         }
       }
       & ${_icon.default} {
-        color: ${theme.colors.primary};
+        color: var(--colorsActionMajor500);
       }
     }
   `;

package/lib/components/decimal/decimal.component.d.ts

@@ -1,9 +1,9 @@
 export default Decimal;
 declare function Decimal({ align, defaultValue, precision, inputWidth, readOnly, onChange, onBlur, onKeyPress, id, name, allowEmptyValue, required, locale, value, ...rest }: {
     [x: string]: any;
-    align?: string | undefined;
+    align: any;
     defaultValue: any;
-    precision?: number | undefined;
+    precision: any;
     inputWidth: any;
     readOnly: any;
     onChange: any;
@@ -11,7 +11,7 @@ declare function Decimal({ align, defaultValue, precision, inputWidth, readOnly,
     onKeyPress: any;
     id: any;
     name: any;
-    allowEmptyValue?: boolean | undefined;
+    allowEmptyValue: any;
     required: any;
     locale: any;
     value: any;
@@ -77,5 +77,10 @@ declare namespace Decimal {
         /** Aria label for rendered help component */
         helpAriaLabel: PropTypes.Requireable<string>;
     };
+    namespace defaultProps {
+        const precision: number;
+        const allowEmptyValue: boolean;
+        const align: string;
+    }
 }
 import PropTypes from "prop-types";

package/lib/components/decimal/decimal.component.js

@@ -30,9 +30,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Decimal = ({
-  align = "right",
+  align,
   defaultValue,
-  precision = 2,
+  precision,
   inputWidth,
   readOnly,
   onChange,
@@ -40,7 +40,7 @@ const Decimal = ({
   onKeyPress,
   id,
   name,
-  allowEmptyValue = false,
+  allowEmptyValue,
   required,
   locale,
   value,
@@ -309,5 +309,10 @@ Decimal.propTypes = {
   /** Aria label for rendered help component */
   helpAriaLabel: _propTypes.default.string
 };
+Decimal.defaultProps = {
+  precision: 2,
+  allowEmptyValue: false,
+  align: "right"
+};
 var _default = Decimal;
 exports.default = _default;

package/lib/components/portrait/portrait-gravatar.component.d.ts

@@ -9,7 +9,6 @@ declare function PortraitGravatar({ gravatarEmail, size, alt, shape, errorCallba
 }): JSX.Element;
 declare namespace PortraitGravatar {
     namespace propTypes {
-        const theme: PropTypes.Requireable<object>;
         const gravatarEmail: PropTypes.Validator<string>;
         const size: PropTypes.Validator<string>;
         const shape: PropTypes.Requireable<string>;

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

@@ -51,9 +51,6 @@ const PortraitGravatar = ({
 };
 
 PortraitGravatar.propTypes = {
-  /** The theme to use. */
-  theme: _propTypes.default.object,
-
   /** The user's email address for the Gravatar. */
   gravatarEmail: _propTypes.default.string.isRequired,
 

package/lib/components/portrait/portrait-gravatar.d.ts

@@ -1,8 +1,6 @@
 import { PortraitSizes, PortraitShapes } from "./portrait";
 
 export interface PortraitGravatarProps {
-  /** The theme to use. */
-  theme?: Record<string, unknown>;
   /** The user's email address for the Gravatar. */
   gravatarEmail: string;
   /** The size of the Gravatar. */

package/lib/components/portrait/portrait-initials.component.d.ts

@@ -1,8 +1,23 @@
-declare var _default: React.ForwardRefExoticComponent<{
+export default PortraitInitials;
+declare function PortraitInitials({ initials, size, shape, darkBackground, alt, ...rest }: {
     [x: string]: any;
-    [x: number]: any;
-} & {
-    theme?: any;
-}>;
-export default _default;
-import React from "react";
+    initials: any;
+    size: any;
+    shape: any;
+    darkBackground: any;
+    alt: any;
+}): JSX.Element;
+declare namespace PortraitInitials {
+    namespace propTypes {
+        const initials: PropTypes.Validator<string>;
+        const size: PropTypes.Validator<string>;
+        const darkBackground: PropTypes.Requireable<boolean>;
+        const shape: PropTypes.Requireable<string>;
+        const alt: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const shape_1: string;
+        export { shape_1 as shape };
+    }
+}
+import PropTypes from "prop-types";

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

@@ -9,9 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = require("styled-components");
-
-var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
 
 var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
 
@@ -28,7 +26,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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); }
 
 const PortraitInitials = ({
-  theme,
   initials,
   size,
   shape,
@@ -39,7 +36,7 @@ const PortraitInitials = ({
   const [cachedImageDataUrl, setCachedImageDataUrl] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
     setCachedImageDataUrl(null);
-  }, [theme, initials, size, darkBackground]);
+  }, [initials, size, darkBackground]);
 
   const generateDataUrl = () => {
     if (cachedImageDataUrl) {
@@ -49,7 +46,7 @@ const PortraitInitials = ({
     const {
       textColor,
       bgColor
-    } = (0, _portrait.getColorsForInitials)(theme, darkBackground);
+    } = (0, _portrait.getColorsForInitials)(darkBackground);
 
     let canvas = _browser.default.getDocument().createElement("canvas");
 
@@ -66,9 +63,9 @@ const PortraitInitials = ({
     context.font = `${Math.round(canvas.width / 2.4)}px Lato, Arial`;
     context.textAlign = "center"; // Setup background and front color
 
-    context.fillStyle = bgColor;
+    context.fillStyle = _common.default[bgColor];
     context.fillRect(0, 0, dimensions, dimensions);
-    context.fillStyle = textColor;
+    context.fillStyle = _common.default[textColor];
     context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5); // Set image representation in default format (png)
 
     const dataURI = canvas.toDataURL(); // Dispose canvas element
@@ -81,8 +78,7 @@ const PortraitInitials = ({
   return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, _extends({
     "data-element": "initials",
     size: size,
-    shape: shape,
-    theme: theme
+    shape: shape
   }, rest), /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
     src: generateDataUrl(),
     alt: alt
@@ -90,9 +86,6 @@ const PortraitInitials = ({
 };
 
 PortraitInitials.propTypes = {
-  /** The theme to use. */
-  theme: _propTypes.default.object,
-
   /** The user's initials to render. */
   initials: _propTypes.default.string.isRequired,
 
@@ -109,10 +102,7 @@ PortraitInitials.propTypes = {
   alt: _propTypes.default.string
 };
 PortraitInitials.defaultProps = {
-  shape: "square",
-  theme: _base.default
+  shape: "square"
 };
-
-var _default = (0, _styledComponents.withTheme)(PortraitInitials);
-
+var _default = PortraitInitials;
 exports.default = _default;

package/lib/components/portrait/portrait-initials.d.ts

@@ -1,8 +1,6 @@
 import { PortraitSizes, PortraitShapes } from "./portrait";
 
 export interface PortraitInitialsProps {
-  /** The theme to use. */
-  theme?: Record<string, unknown>;
   /** The user's initials to render. */
   initials: string;
   /** The size of the initials image. */

package/lib/components/portrait/portrait.config.js

@@ -27,11 +27,11 @@ const PORTRAIT_SIZE_PARAMS = {
   },
   L: {
     dimensions: 72,
-    iconDimensions: 32
+    iconDimensions: 40
   },
   XL: {
     dimensions: 104,
-    iconDimensions: 48
+    iconDimensions: 56
   },
   XXL: {
     dimensions: 128,

package/lib/components/portrait/portrait.style.d.ts

@@ -1,10 +1,10 @@
-export function getColorsForInitials(theme: any, darkBackground: any): {
-    textColor: any;
-    bgColor: any;
+export function getColorsForInitials(darkBackground: any): {
+    textColor: string;
+    bgColor: string;
 };
 export const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPortraitInitialsImg: import("styled-components").StyledComponent<"img", any, {}, never>;
 export const StyledPortraitGravatar: import("styled-components").StyledComponent<"img", any, {}, never>;
 export const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
-export const StyledIcon: import("styled-components").StyledComponent<({ darkBackground, ...rest }: any) => JSX.Element, any, {}, never>;
+export const StyledIcon: import("styled-components").StyledComponent<({ size, darkBackground, ...rest }: any) => JSX.Element, any, {}, never>;
 export const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/portrait/portrait.style.js

@@ -54,7 +54,6 @@ function stylingForShape({
 
 function stylingForIcon({
   size,
-  theme,
   darkBackground
 }) {
   const params = _portrait.PORTRAIT_SIZE_PARAMS[size];
@@ -63,31 +62,28 @@ function stylingForIcon({
     return (0, _styledComponents.css)``;
   }
 
-  let color = theme.portrait.border;
-  let backgroundColor = theme.portrait.background;
+  let color = "var(--colorsUtilityMajor200)";
+  let backgroundColor = "var(--colorsUtilityMajor025)";
 
   if (darkBackground) {
-    color = theme.portrait.background;
-    backgroundColor = theme.portrait.border;
+    color = "var(--colorsUtilityMajor025)";
+    backgroundColor = "var(--colorsUtilityMajor200)";
   }
 
   return (0, _styledComponents.css)`
     background-color: ${backgroundColor};
     color: ${color};
 
-    ${params.iconDimensions && (0, _styledComponents.css)`
-      svg {
-        width: ${params.iconDimensions}px;
-        height: ${params.iconDimensions}px;
-      }
-    `}
+    ::before {
+      font-size: ${params.iconDimensions}px;
+    }
   `;
 }
 
-function getColorsForInitials(theme, darkBackground) {
+function getColorsForInitials(darkBackground) {
   return {
-    textColor: darkBackground ? theme.portrait.background : theme.portrait.initials,
-    bgColor: darkBackground ? theme.portrait.initials : theme.portrait.background
+    textColor: darkBackground ? "colorsUtilityYang100" : "colorsUtilityYin055",
+    bgColor: darkBackground ? "colorsUtilityMajor400" : "colorsUtilityMajor025"
   };
 }
 
@@ -97,20 +93,14 @@ const StyledPortraitInitials = _styledComponents.default.div`
   box-sizing: border-box;
   ${stylingForSize}
   ${stylingForShape}
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-      border: 1px solid ${theme.portrait.border};
-    `}
+  border: 1px solid var(--colorsUtilityMajor200);
 `;
 exports.StyledPortraitInitials = StyledPortraitInitials;
 StyledPortraitInitials.propTypes = {
-  theme: _propTypes.default.object,
   size: _propTypes.default.oneOf(_portrait.PORTRAIT_SIZES).isRequired,
   shape: _propTypes.default.oneOf(_portrait.PORTRAIT_SHAPES)
 };
 StyledPortraitInitials.defaultProps = {
-  theme: _base.default,
   shape: "square"
 };
 const StyledPortraitInitialsImg = _styledComponents.default.img`
@@ -134,9 +124,6 @@ StyledPortraitGravatar.propTypes = {
   src: _propTypes.default.string.isRequired,
   alt: _propTypes.default.string
 };
-StyledPortraitGravatar.defaultProps = {
-  theme: _base.default
-};
 const StyledCustomImg = _styledComponents.default.img`
   display: block;
   ${stylingForSize}
@@ -151,6 +138,7 @@ StyledCustomImg.propTypes = {
 }; // && is used here to increase the specificity
 
 const StyledIcon = (0, _styledComponents.default)(({
+  size,
   darkBackground,
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_icon.default, rest))`
@@ -160,11 +148,9 @@ const StyledIcon = (0, _styledComponents.default)(({
     ${stylingForSize}
     ${stylingForIcon}
     ${stylingForShape}
-    ${({
-  theme
-}) => (0, _styledComponents.css)`
-        border: 1px dashed ${theme.portrait.border};
-      `}
+    border: 1px dashed ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)"};
   }
 `;
 exports.StyledIcon = StyledIcon;
@@ -172,14 +158,12 @@ StyledIcon.propTypes = {
   darkBackground: _propTypes.default.bool,
   size: _propTypes.default.oneOf(_portrait.PORTRAIT_SIZES),
   shape: _propTypes.default.oneOf(_portrait.PORTRAIT_SHAPES),
-  theme: _propTypes.default.object,
   type: _propTypes.default.string.isRequired
 };
 StyledIcon.defaultProps = {
   darkBackground: false,
   size: "M",
-  shape: "square",
-  theme: _base.default
+  shape: "square"
 };
 const StyledPortraitContainer = _styledComponents.default.div`
   display: inline-block;

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

@@ -1,7 +1,6 @@
 export const PROFILE_SIZES: string[];
 declare namespace _default {
     namespace XS {
-        const dimensions: number;
         const nameSize: string;
         const emailSize: string;
         const lineHeight: string;
@@ -9,11 +8,10 @@ declare namespace _default {
         const marginTop: string;
     }
     namespace S {
-        const dimensions_1: number;
-        export { dimensions_1 as dimensions };
         const nameSize_1: string;
         export { nameSize_1 as nameSize };
-        export const emailsize: string;
+        const emailSize_1: string;
+        export { emailSize_1 as emailSize };
         const lineHeight_1: string;
         export { lineHeight_1 as lineHeight };
         const marginLeft_1: string;
@@ -22,12 +20,10 @@ declare namespace _default {
         export { marginTop_1 as marginTop };
     }
     namespace M {
-        const dimensions_2: number;
-        export { dimensions_2 as dimensions };
         const nameSize_2: string;
         export { nameSize_2 as nameSize };
-        const emailSize_1: string;
-        export { emailSize_1 as emailSize };
+        const emailSize_2: string;
+        export { emailSize_2 as emailSize };
         const lineHeight_2: string;
         export { lineHeight_2 as lineHeight };
         const marginLeft_2: string;
@@ -36,12 +32,10 @@ declare namespace _default {
         export { marginTop_2 as marginTop };
     }
     namespace ML {
-        const dimensions_3: number;
-        export { dimensions_3 as dimensions };
         const nameSize_3: string;
         export { nameSize_3 as nameSize };
-        const emailSize_2: string;
-        export { emailSize_2 as emailSize };
+        const emailSize_3: string;
+        export { emailSize_3 as emailSize };
         const lineHeight_3: string;
         export { lineHeight_3 as lineHeight };
         const marginLeft_3: string;
@@ -50,12 +44,10 @@ declare namespace _default {
         export { marginTop_3 as marginTop };
     }
     namespace L {
-        const dimensions_4: number;
-        export { dimensions_4 as dimensions };
         const nameSize_4: string;
         export { nameSize_4 as nameSize };
-        const emailSize_3: string;
-        export { emailSize_3 as emailSize };
+        const emailSize_4: string;
+        export { emailSize_4 as emailSize };
         const lineHeight_4: string;
         export { lineHeight_4 as lineHeight };
         const marginLeft_4: string;
@@ -64,12 +56,10 @@ declare namespace _default {
         export { marginTop_4 as marginTop };
     }
     namespace XL {
-        const dimensions_5: number;
-        export { dimensions_5 as dimensions };
         const nameSize_5: string;
         export { nameSize_5 as nameSize };
-        const emailSize_4: string;
-        export { emailSize_4 as emailSize };
+        const emailSize_5: string;
+        export { emailSize_5 as emailSize };
         const lineHeight_5: string;
         export { lineHeight_5 as lineHeight };
         const marginLeft_5: string;
@@ -78,12 +68,10 @@ declare namespace _default {
         export { marginTop_5 as marginTop };
     }
     namespace XXL {
-        const dimensions_6: number;
-        export { dimensions_6 as dimensions };
         const nameSize_6: string;
         export { nameSize_6 as nameSize };
-        const emailSize_5: string;
-        export { emailSize_5 as emailSize };
+        const emailSize_6: string;
+        export { emailSize_6 as emailSize };
         const lineHeight_6: string;
         export { lineHeight_6 as lineHeight };
         const marginLeft_6: string;

package/lib/components/profile/profile.config.js

@@ -8,57 +8,50 @@ const PROFILE_SIZES = ["XS", "S", "M", "ML", "L", "XL", "XXL"];
 exports.PROFILE_SIZES = PROFILE_SIZES;
 var _default = {
   XS: {
-    dimensions: 24,
-    nameSize: "13px",
-    emailSize: "12px",
+    nameSize: "var(--fontSizes050)",
+    emailSize: "var(--fontSizes025)",
     lineHeight: "12px",
     marginLeft: "16px",
     marginTop: "1px"
   },
   S: {
-    dimensions: 32,
-    nameSize: "14px",
-    emailsize: "12px",
+    nameSize: "var(--fontSizes100)",
+    emailSize: "var(--fontSizes100)",
     lineHeight: "16px",
     marginLeft: "16px",
     marginTop: "1px"
   },
   M: {
-    dimensions: 40,
-    nameSize: "14px",
-    emailSize: "14px",
+    nameSize: "var(--fontSizes100)",
+    emailSize: "var(--fontSizes100)",
     lineHeight: "16px",
     marginLeft: "16px",
     marginTop: "4px"
   },
   ML: {
-    dimensions: 56,
-    nameSize: "14px",
-    emailSize: "14px",
+    nameSize: "var(--fontSizes200)",
+    emailSize: "var(--fontSizes100)",
     lineHeight: "20px",
     marginLeft: "24px",
     marginTop: "8px"
   },
   L: {
-    dimensions: 72,
-    nameSize: "20px",
-    emailSize: "14px",
+    nameSize: "var(--fontSizes400)",
+    emailSize: "var(--fontSizes100)",
     lineHeight: "22px",
     marginLeft: "24px",
     marginTop: "14px"
   },
   XL: {
-    dimensions: 104,
-    nameSize: "24px",
-    emailSize: "20px",
+    nameSize: "var(--fontSizes600)",
+    emailSize: "var(--fontSizes300)",
     lineHeight: "26px",
     marginLeft: "32px",
     marginTop: "24px"
   },
   XXL: {
-    dimensions: 128,
-    nameSize: "32px",
-    emailSize: "24px",
+    nameSize: "var(--fontSizes700)",
+    emailSize: "var(--fontSizes600)",
     lineHeight: "30px",
     marginLeft: "40px",
     marginTop: "32px"

package/lib/components/profile/profile.style.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProfileEmailStyle = exports.ProfileAvatarStyle = exports.ProfileDetailsStyle = exports.ProfileNameStyle = exports.ProfileStyle = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
@@ -17,10 +17,6 @@ var _profile = _interopRequireDefault(require("./profile.config"));
 
 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 ProfileNameStyle = _styledComponents.default.span`
   font-weight: bold;
   display: block;
@@ -37,12 +33,7 @@ const ProfileEmailStyle = _styledComponents.default.span`
 exports.ProfileEmailStyle = ProfileEmailStyle;
 const ProfileStyle = _styledComponents.default.div`
   white-space: nowrap;
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-      color: ${theme.text.color};
-    `};
-
+  color: var(--colorsUtilityYin090);
   display: ${({
   hasSrc
 }) => hasSrc ? "flex" : ""};
@@ -73,14 +64,11 @@ ProfileStyle.defaultProps = {
   theme: _base.default
 };
 ProfileNameStyle.defaultProps = {
-  size: "M",
-  theme: _base.default
+  size: "M"
 };
 ProfileEmailStyle.defaultProps = {
-  size: "M",
-  theme: _base.default
+  size: "M"
 };
 ProfileDetailsStyle.defaultProps = {
-  size: "M",
-  theme: _base.default
+  size: "M"
 };

package/lib/components/select/option-group-header/option-group-header.style.js

@@ -26,16 +26,16 @@ const StyledOptionGroupHeader = _styledComponents.default.div`
     line-height: 18px;
     text-align: left;
     margin: 0;
-    color: var(--colorsYin055);
+    color: var(--colorsUtilityYin055);
   }
 
   ${_icon.default} {
     margin-right: 4px;
     margin-left: -5px;
-    color: var(--colorsYin055);
+    color: var(--colorsUtilityYin055);
 
     &:hover {
-      color: var(--colorsYin055);
+      color: var(--colorsUtilityYin055);
     }
   }
 `;

package/lib/components/select/select-list/select-list.style.js

@@ -101,7 +101,7 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
     font-weight: 900;
     font-size: 12px;
     text-transform: uppercase;
-    color: var(--colorsYin055);
+    color: var(--colorsUtilityYin055);
     :after {
       content: "";
       display: block;
@@ -110,7 +110,7 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
       left: 0px;
       background-image: linear-gradient(
         var(--colorsComponentsNavigationYin100),
-        var(--colorsYang100)
+        var(--colorsUtilityYang100)
       );
       opacity: 0.03;
       height: 8px;

package/lib/components/select/select.style.js

@@ -46,8 +46,8 @@ const StyledSelect = _styledComponents.default.div`
       `}
 
       ${readOnly && (0, _styledComponents.css)`
-        cursor: "text";
-        color: var(--colorsYin065);
+        cursor: ${hasTextCursor ? "text" : "default"};
+        color: var(--colorsActionMinorYin090);
         text-shadow: none;
       `}
     }

package/lib/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -145,7 +145,8 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     target: "_blank",
     as: "a"
   }, (0, _tags.default)("tab-header", tabTitleProps), {
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    size: size
   }), /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTitleContent, {
     error: error,
     warning: warning,
@@ -184,8 +185,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     tabIndex: null
   }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledSelectedIndicator, {
     "data-element": "tab-selected-indicator",
-    position: position,
-    size: size
+    position: position
   }));
 });
 

package/lib/components/tabs/__internal__/tab-title/tab-title.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 _icon = _interopRequireDefault(require("../../../icon/icon.style"));
 
 var _validationIcon = _interopRequireDefault(require("../../../../__internal__/validations/validation-icon.style"));
@@ -26,7 +24,6 @@ const StyledTitleContent = _styledComponents.default.span`
   display: inline-block;
 
   ${({
-  theme,
   size,
   borders,
   position,
@@ -49,7 +46,7 @@ const StyledTitleContent = _styledComponents.default.span`
     `}
 
     ${hasHref && (0, _styledComponents.css)`
-      color: ${theme.text.color};
+      color: var(--colorsActionMinorYin090);
       display: block;
       text-decoration: none;
 
@@ -62,13 +59,19 @@ const StyledTitleContent = _styledComponents.default.span`
       }
     `}
 
+    ${!hasHref && (0, _styledComponents.css)`
+      [data-component="icon"] {
+        color: var(--colorsActionMinorYin065);
+      }
+    `}
+
     ${borders && (0, _styledComponents.css)`
-      border-top: 1px solid ${theme.tab.background};
-      border-left: 1px solid ${theme.tab.background};
-      border-right: 1px solid ${theme.tab.background};
+      border-top: 1px solid var(--colorsActionMinor100);
+      border-left: 1px solid var(--colorsActionMinor100);
+      border-right: 1px solid var(--colorsActionMinor100);
 
       ${position === "left" && (0, _styledComponents.css)`
-        border-bottom: 1px solid ${theme.tab.background};
+        border-bottom: 1px solid var(--colorsActionMinor100);
         ${!alternateStyling && `margin-right: -1px;`}
       `}
 
@@ -76,7 +79,7 @@ const StyledTitleContent = _styledComponents.default.span`
         border-left: none;
 
         ${!noRightBorder && (0, _styledComponents.css)`
-          border-right: 1px solid ${theme.tab.background};
+          border-right: 1px solid var(--colorsActionMinor100);
         `}
       `}
 
@@ -86,14 +89,14 @@ const StyledTitleContent = _styledComponents.default.span`
     `}
 
     ${size === "large" && position === "top" && (0, _styledComponents.css)`
-      padding: 10px 24px;
+      padding: 14px 24px;
       ${borders && `padding-bottom: 9px;`}
       font-size: 16px;
     `}
 
     ${size === "large" && position === "left" && (0, _styledComponents.css)`
       font-size: 16px;
-      padding: 22px 24px;
+      padding: 14px 24px;
       ${!isTabSelected && !alternateStyling && error && `margin-right: -2px;`}
     `}
 
@@ -112,7 +115,6 @@ const StyledTitleContent = _styledComponents.default.span`
   position,
   warning,
   info,
-  theme,
   size,
   hasCustomLayout
 }) => (warning || info) && (0, _styledComponents.css)`
@@ -120,11 +122,11 @@ const StyledTitleContent = _styledComponents.default.span`
       outline-offset: -1px;
 
       ${info && !warning && (0, _styledComponents.css)`
-        outline-color: ${theme.colors.info};
+        outline-color: var(--colorsSemanticInfo500);
       `}
 
       ${warning && (0, _styledComponents.css)`
-        outline-color: ${theme.colors.warning};
+        outline-color: var(--colorsSemanticCaution500);
       `}
 
     ${position === "top" && (0, _styledComponents.css)`
@@ -133,7 +135,7 @@ const StyledTitleContent = _styledComponents.default.span`
 
     ${position === "left" && (0, _styledComponents.css)`
         border-right-color: transparent;
-        padding-right: ${size === "large" ? "26px;" : "18px;"};
+        padding-right: ${size === "large" ? "26px" : "18px"};
       `}
       
       &:hover {
@@ -141,11 +143,11 @@ const StyledTitleContent = _styledComponents.default.span`
         outline-offset: -1px;
 
         ${info && !warning && (0, _styledComponents.css)`
-          outline-color: ${theme.colors.info};
+          outline-color: var(--colorsSemanticInfo500);
         `}
 
         ${warning && (0, _styledComponents.css)`
-          outline-color: ${theme.colors.warning};
+          outline-color: var(--colorsSemanticCaution500);
         `}
 
       ${position === "top" && (0, _styledComponents.css)`
@@ -158,19 +160,18 @@ const StyledTitleContent = _styledComponents.default.span`
 
       ${position === "left" && (0, _styledComponents.css)`
           border-right-color: transparent;
-          padding-right: ${size === "large" ? "26px;" : "18px;"};
+          padding-right: ${size === "large" ? "26px" : "18px"};
         `}
       }
     `}
 
   ${({
   error,
-  theme,
   position,
   size,
   hasCustomLayout
 }) => error && (0, _styledComponents.css)`
-      outline: 2px solid ${theme.colors.error};
+      outline: 2px solid var(--colorsSemanticNegative500);
       outline-offset: -2px;
 
       ${position === "top" && (0, _styledComponents.css)`
@@ -183,7 +184,7 @@ const StyledTitleContent = _styledComponents.default.span`
       `}
     
       &:hover {
-        outline: 2px solid ${theme.colors.error};
+        outline: 2px solid var(--colorsSemanticNegative500);
         outline-offset: -2px;
         ${position === "top" && (0, _styledComponents.css)`
           border-bottom-color: transparent;
@@ -211,8 +212,6 @@ const StyledTitleContent = _styledComponents.default.span`
   position
 }) => hasSiblings && !hasCustomLayout && position === "top" && (0, _styledComponents.css)`
       height: 20px;
-      padding-top: 10px;
-      padding-bottom: 10px;
 
       ${size === "large" && !(error || warning || info) && isTabSelected && (0, _styledComponents.css)`
         padding-bottom: 6px;
@@ -241,16 +240,16 @@ const StyledTitleContent = _styledComponents.default.span`
       `}
 
       ${position === "top" && (0, _styledComponents.css)`
-        padding: ${size === "large" ? "2px;" : "0px;"}
-          ${isTabSelected && (0, _styledComponents.css)`
-            padding-bottom: 0px;
-          `}
-          ${(error || warning || info) && (0, _styledComponents.css)`
-          padding-bottom: ${size === "large" ? "4px;" : "2px;"}
-          padding-right: ${size === "large" ? "18px;" : "14px;"}
+        padding: ${size === "large" ? "2px" : "0px"};
+        ${isTabSelected && (0, _styledComponents.css)`
+          padding-bottom: 0px;
+        `}
+        ${(error || warning || info) && (0, _styledComponents.css)`
+          padding-bottom: ${size === "large" ? "4px" : "2px"};
+          padding-right: ${size === "large" ? "18px" : "14px"};
 
           &:hover {
-            padding-bottom: ${size === "large" ? "4px;" : "2px;"}
+            padding-bottom: ${size === "large" ? "4px" : "2px"};
           }
         `};
       `}
@@ -269,6 +268,9 @@ const StyledTabTitle = _styledComponents.default.button`
   text-decoration: none;
   outline-offset: 0px;
   margin: 0;
+  height: ${({
+  size
+}) => size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
 
   a:visited {
     color: inherit;
@@ -281,8 +283,6 @@ const StyledTabTitle = _styledComponents.default.button`
   noLeftBorder
 }) => (0, _styledComponents.css)`
     ${position === "top" && (0, _styledComponents.css)`
-      height: 40px;
-
       ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
         &:nth-of-type(n + 1) {
           margin-left: -1px;
@@ -305,49 +305,48 @@ const StyledTabTitle = _styledComponents.default.button`
   `}
 
   ${({
-  isTabSelected,
-  theme
+  isTabSelected
 }) => !isTabSelected && (0, _styledComponents.css)`
+      color: var(--colorsActionMinorYin090);
+
       &:hover {
-        background: ${theme.tab.background};
-        color: ${theme.text.color};
+        background: var(--colorsActionMinor100);
+        color: var(--colorsActionMinorYin090);
         outline: none;
       }
       &:focus {
-        color: ${theme.text.color};
+        color: var(--colorsActionMinorYin090);
         outline: none;
       }
     `}
 
   ${({
   isTabSelected,
-  theme,
   alternateStyling,
   error,
   warning,
   info
 }) => isTabSelected && (0, _styledComponents.css)`
-    color: ${theme.text.color};
-    background-color: ${theme.colors.white};
+      color: var(--colorsActionMajorYin090);
+      background-color: var(--colorsActionMajorYang100);
 
-    ${(error || warning || info) && (0, _styledComponents.css)`
+      ${(error || warning || info) && (0, _styledComponents.css)`
         padding-bottom: 0px;
       `}
 
-    &:hover {
-      background-color: ${theme.colors.white};
-      border-bottom-color: ${alternateStyling ? `${theme.tab.background};` : `${theme.colors.primary};`}
-      color: ${theme.text.color};
-      cursor: default;
-    }
-  `}
+      &:hover {
+        background-color: var(--colorsActionMajorYang100);
+        border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
+        color: var(--colorsActionMajorYin090);
+        cursor: default;
+      }
+    `}
 
   ${({
-  theme,
   isInSidebar
 }) => `
     &:focus {
-      outline: ${isInSidebar ? "none;" : `2px solid ${theme.colors.focus};`}
+      outline: ${isInSidebar ? "none;" : "var(--borderWidth300) solid var(--colorsSemanticFocus500);"}
       z-index: 2;
     }
   `}
@@ -355,7 +354,6 @@ const StyledTabTitle = _styledComponents.default.button`
   ${({
   position,
   borders,
-  theme,
   alternateStyling,
   error,
   warning,
@@ -367,7 +365,7 @@ const StyledTabTitle = _styledComponents.default.button`
 
       ${!isInSidebar && (0, _styledComponents.css)`
         border-right: ${alternateStyling ? "1px" : "2px"} solid
-          ${theme.tab.background};
+          var(--colorsActionMinor100);
       `}
 
       ${!borders && (0, _styledComponents.css)`
@@ -385,7 +383,7 @@ const StyledTabTitle = _styledComponents.default.button`
       }
 
       &:hover {
-        ${alternateStyling && `border-right-color: ${theme.tab.background};`}
+        ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
       }
 
       ${(warning || info) && (0, _styledComponents.css)`
@@ -396,7 +394,7 @@ const StyledTabTitle = _styledComponents.default.button`
   isTabSelected
 }) => isTabSelected && (0, _styledComponents.css)`
           ${alternateStyling && (0, _styledComponents.css)`
-            border-right-color: ${theme.tab.background};
+            border-right-color: var(--colorsActionMinor100);
           `}
 
           ${!alternateStyling && (0, _styledComponents.css)`
@@ -404,41 +402,40 @@ const StyledTabTitle = _styledComponents.default.button`
             padding-bottom: 0px;
 
             ${StyledTitleContent} {
-              ${!(error || warning || info) && `margin-right: 2px;`}
+              ${!(error || warning || info) && "margin-right: 2px;"}
               border-right: none;
             }
           `}
     
-          background-color: ${theme.colors.white};
+          background-color: var(--colorsActionMajorYang100);
 
           &:hover {
-            ${alternateStyling && ` border-right-color: ${theme.tab.background};`}
-            background-color: ${theme.colors.white};
-            ${(error || warning || info) && `border-right-color: ${theme.colors.error};`}
+            ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
+            background-color: var(--colorsActionMajorYang100);
+            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
           }
 
           &:focus {
-            ${(error || warning || info) && `border-right-color: ${theme.colors.error};`}
+            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
           }
         `}
     `}
 
   ${({
   alternateStyling,
-  theme,
   isTabSelected,
   isInSidebar
 }) => alternateStyling && (0, _styledComponents.css)`
       &:focus {
-        background-color: ${theme.tab.background};
+        background-color: var(--colorsActionMinor100);
       }
 
       &:hover {
-        background-color: ${isTabSelected ? `${theme.tab.background};` : `${theme.tab.altHover};`};
+        background-color: ${isTabSelected ? "var(--colorsActionMinor100)" : "var(--colorsActionMinor150)"};
       }
 
       ${isTabSelected && (0, _styledComponents.css)`
-        background-color: ${theme.tab.background};
+        background-color: var(--colorsActionMinor100);
       `}
 
       ${isInSidebar && `padding-bottom: 1px;`}
@@ -461,17 +458,13 @@ const StyledLayoutWrapper = _styledComponents.default.div`
 }) => !hasCustomLayout && (0, _styledComponents.css)`
       display: inline-flex;
 
-      ${({
-  theme
-}) => (0, _styledComponents.css)`
-        position: relative;
-        top: -1px;
-        ${hasCustomSibling && (0, _styledComponents.css)`
-          left: 4px;
-        `}
-        ${!hasCustomSibling && (0, _styledComponents.css)`
-          ${titlePosition === "before" ? `left: ${theme.spacing}px;` : `right: ${theme.spacing}px;`}
-        `}
+      position: relative;
+      top: -1px;
+      ${hasCustomSibling && (0, _styledComponents.css)`
+        left: 4px;
+      `}
+      ${!hasCustomSibling && (0, _styledComponents.css)`
+        ${titlePosition === "before" ? "left: 8px;" : "right: 8px;"}
       `}
 
       ${_icon.default} {
@@ -495,29 +488,25 @@ const StyledSelectedIndicator = _styledComponents.default.div`
   z-index: 1;
 
   ${({
-  position,
-  size,
-  theme
+  position
 }) => position === "top" && (0, _styledComponents.css)`
       bottom: 0px;
       left: 0px;
-      box-shadow: inset 0px ${size === "large" ? "-4px" : "-2px"} 0px
-        ${theme.colors.primary};
+      box-shadow: inset 0px calc(-1 * var(--sizing025)) 0px
+        var(--colorsActionMajor500);
       width: 100%;
-      height: ${size === "large" ? "4px" : "2px"};
+      height: var(--sizing025);
     `}
 
   ${({
-  position,
-  size,
-  theme
+  position
 }) => position === "left" && (0, _styledComponents.css)`
       top: 0px;
       right: 0px;
-      box-shadow: inset ${size === "large" ? "-4px" : "-2px"} 0px 0px 0px
-        ${theme.colors.primary};
+      box-shadow: inset calc(-1 * var(--sizing025)) 0px 0px 0px
+        var(--colorsActionMajor500);
       height: 100%;
-      width: ${size === "large" ? "4px" : "2px"};
+      width: var(--sizing025);
     `}
 `;
 exports.StyledSelectedIndicator = StyledSelectedIndicator;
@@ -527,7 +516,6 @@ StyledTabTitle.propTypes = {
   borders: _propTypes.default.bool
 };
 StyledTabTitle.defaultProps = {
-  theme: _base.default,
   position: "top",
   size: "default",
   borders: false
@@ -537,7 +525,6 @@ StyledLayoutWrapper.propTypes = {
   titlePosition: _propTypes.default.oneOf(["before", "after"])
 };
 StyledLayoutWrapper.defaultProps = {
-  theme: _base.default,
   titlePosition: "before"
 };
 StyledTitleContent.propTypes = {
@@ -552,7 +539,6 @@ StyledTitleContent.propTypes = {
   hasSiblings: _propTypes.default.bool
 };
 StyledTitleContent.defaultProps = {
-  theme: _base.default,
   position: "top",
   size: "default",
   borders: false
@@ -562,7 +548,6 @@ StyledSelectedIndicator.propTypes = {
   size: _propTypes.default.oneOf(["default", "large"])
 };
 StyledSelectedIndicator.defaultProps = {
-  theme: _base.default,
   position: "top",
   size: "default"
 };

package/lib/components/tabs/__internal__/tabs-header/tabs-header.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"));
-
 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; }
@@ -36,7 +34,7 @@ const StyledTabsHeaderWrapper = _styledComponents.default.div`
 }) => position === "left" && (0, _styledComponents.css)`
       overflow-y: auto;
       box-sizing: border-box;
-      padding: 2px;
+      padding: 3px;
 
       ${!isInSidebar && (0, _styledComponents.css)`
         min-width: 20%;
@@ -52,10 +50,7 @@ const StyledTabsHeaderWrapper = _styledComponents.default.div`
 exports.StyledTabsHeaderWrapper = StyledTabsHeaderWrapper;
 const StyledTabsHeaderList = _styledComponents.default.div`
   display: flex;
-  box-shadow: inset 0px ${computeLineWidth} 0px 0px
-    ${({
-  theme
-}) => theme.tab.background};
+  box-shadow: inset 0px ${computeLineWidth} 0px 0px var(--colorsActionMinor100);
   ${({
   extendedLine
 }) => !extendedLine && (0, _styledComponents.css)`
@@ -102,8 +97,7 @@ StyledTabsHeaderWrapper.propTypes = {
 StyledTabsHeaderList.defaultProps = {
   align: "left",
   position: "top",
-  extendedLine: true,
-  theme: _base.default
+  extendedLine: true
 };
 StyledTabsHeaderList.propTypes = {
   align: _propTypes.default.oneOf(["left", "right"]),

package/lib/components/tabs/tabs.style.js

@@ -27,10 +27,9 @@ const StyledTabs = _styledComponents.default.div`
   ${({
   position,
   inSidebar,
-  theme,
   headerWidth
 }) => (0, _styledComponents.css)`
-    color: ${theme.text.color};
+    color: var(--colorsActionMinorYin090);
 
     ${position === "left" && (0, _styledComponents.css)`
       ${headerWidth && (0, _styledComponents.css)`

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

@@ -543,6 +543,7 @@ declare function _default(palette: any): {
         colorsSemanticNegativeYang100: string;
         colorsSemanticCaution400: string;
         colorsSemanticCaution600: string;
+        colorsSemanticCaution650: string;
         colorsSemanticCautionTransparent: string;
         colorsSemanticCautionYin030: string;
         colorsSemanticCautionYin055: string;

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

@@ -171,6 +171,7 @@ declare var _default: {
         colorsSemanticCaution400: string;
         colorsSemanticCaution500: string;
         colorsSemanticCaution600: string;
+        colorsSemanticCaution650: string;
         colorsSemanticCautionTransparent: string;
         colorsSemanticCautionYin030: string;
         colorsSemanticCautionYin055: string;

package/package.json

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