carbon-react 104.14.0 → 104.17.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/note/note.style.js

@@ -26,7 +26,6 @@ const StyledNoteContent = _styledComponents.default.div`
   width: 100%;
 
   ${({
-  theme,
   hasPreview
 }) => (0, _styledComponents.css)`
     &:not(:last-of-type) {
@@ -42,16 +41,16 @@ const StyledNoteContent = _styledComponents.default.div`
     div.public-DraftEditor-content {
       min-height: inherit;
       height: 100%;
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
 
     &:last-of-type:not(:first-of-type) {
-      border-top: solid 1px ${theme.tile.separator};
+      border-top: solid 1px var(--colorsUtilityMajor050);
     }
 
     ${hasPreview && `
-      margin-top: ${2 * theme.spacing}px;
+      margin-top: var(--spacing200);
     `}
   `}
 `;
@@ -76,10 +75,9 @@ const StyledFooterContent = _styledComponents.default.div`
   font-weight: bold;
 
   ${({
-  theme,
   hasName
 }) => (0, _styledComponents.css)`
-    margin-top: ${2 * theme.spacing}px;
+    margin-top: var(--spacing200);
 
     ${hasName && (0, _styledComponents.css)`
       &:first-of-type {
@@ -88,29 +86,29 @@ const StyledFooterContent = _styledComponents.default.div`
 
       &:nth-of-type(2) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
-        margin-left: ${2 * theme.spacing}px;
+        color: var(--colorsUtilityYin065);
+        margin-left: var(--spacing200);
       }
 
       &:last-of-type:not(:nth-of-type(2)) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
         cursor: pointer;
-        margin-left: ${3 * theme.spacing}px;
+        margin-left: var(--spacing300);
       }
     `}
 
     ${!hasName && (0, _styledComponents.css)`
       &:first-of-type {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
       }
 
       &:last-of-type:not(:first-of-type) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
         cursor: pointer;
-        margin-left: ${3 * theme.spacing}px;
+        margin-left: var(--spacing300);
       }
     `}
   `}
@@ -118,19 +116,16 @@ const StyledFooterContent = _styledComponents.default.div`
 exports.StyledFooterContent = StyledFooterContent;
 const StyledFooter = _styledComponents.default.div`
   display: flex;
-  margin-bottom: ${({
-  theme
-}) => `${-theme.spacing}px;`}
+  margin-bottom: calc(-1 * var(--spacing100));
   flex-wrap: wrap;
 `;
 exports.StyledFooter = StyledFooter;
 const StyledNote = _styledComponents.default.div`
   ${({
-  theme,
   width
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.white};
-    border: 1px solid ${theme.tile.border};
+    background-color: var(--colorsUtilityYang100);
+    border: 1px solid var(--colorsUtilityMajor100);
     display: flex;
     flex-direction: column;
     padding: 24px;
@@ -155,19 +150,10 @@ const StyledNote = _styledComponents.default.div`
   ${_styledSystem.margin}
 `;
 exports.StyledNote = StyledNote;
-StyledNoteContent.defaultProps = {
-  theme: _base.default
-};
 StyledNote.propTypes = {
   padding: _propTypes.default.string,
   width: _propTypes.default.number
 };
 StyledNote.defaultProps = {
   theme: _base.default
-};
-StyledFooter.defaultProps = {
-  theme: _base.default
-};
-StyledFooterContent.defaultProps = {
-  theme: _base.default
 };

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

@@ -336,9 +336,6 @@ declare function _default(palette: any): {
         background: any;
         altHover: any;
     };
-    note: {
-        timeStamp: string;
-    };
     editorLinkPreview: {
         background: any;
         hoverBackground: any;
@@ -546,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/base/base-theme.config.js

@@ -357,9 +357,6 @@ var _default = palette => {
       background: palette.slateTint(80),
       altHover: palette.slateTint(85)
     },
-    note: {
-      timeStamp: "rgba(0,0,0,0.65)"
-    },
     editorLinkPreview: {
       background: palette.slateTint(95),
       hoverBackground: palette.slateTint(80),

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.14.0",
+  "version": "104.17.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",