carbon-react 142.12.0 → 142.13.0

package/esm/components/select/option-row/option-row.style.js

@@ -25,7 +25,7 @@ const StyledOptionRow = styled.tr`
     padding: 12px 16px;
 
     &:first-child {
-      font-weight: 700;
+      font-weight: 500;
     }
   }
 

package/esm/components/step-flow/step-flow-title/step-flow-title.component.js

@@ -26,7 +26,7 @@ export const StepFlowTitle = ({
     variant: titleVariant || titleVariantContext || "h1",
     "data-element": "title-text"
   }, /*#__PURE__*/React.createElement(Typography, {
-    fontWeight: "900",
+    fontWeight: "700",
     fontSize: "var(--fontSizes600)",
     lineHeight: "var(--sizing375)",
     variant: "span",

package/esm/components/step-flow/step-flow.component.js

@@ -90,7 +90,7 @@ const StepFlow = /*#__PURE__*/forwardRef(({
     "aria-hidden": "true"
   }, locale.stepFlow.stepLabel(validatedCurrentStep, totalSteps));
   return /*#__PURE__*/React.createElement(StyledStepFlow, _extends({}, rest, tagComponent("step-flow", rest)), /*#__PURE__*/React.createElement(StyledStepContent, null, category ? /*#__PURE__*/React.createElement(StyledStepContentText, null, /*#__PURE__*/React.createElement(Typography, {
-    fontWeight: "500",
+    fontWeight: "400",
     fontSize: "var(--fontSizes100)",
     lineHeight: "var(--sizing250)",
     variant: "span",

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -14,7 +14,7 @@ const StyledSwitchSlider = styled.div`
 }) => css`
     display: flex;
     font-size: 12px;
-    font-weight: bold;
+    font-weight: 500;
     height: 28px;
     left: 0;
     letter-spacing: 1px;

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -227,7 +227,7 @@ const tabTitleStyles = css`
   display: inline-block;
   border-top-left-radius: var(--borderRadius100);
   border-top-right-radius: var(--borderRadius100);
-  font-weight: bold;
+  font-weight: 500;
   position: relative;
   border: none;
   cursor: pointer;

package/esm/components/text-editor/__internal__/editor-link/editor-link.style.js

@@ -5,7 +5,7 @@ const StyledEditorLink = styled(Link)`
 
   a {
     max-width: 100% span span span {
-      font-weight: 700;
+      font-weight: 500;
       font-style: normal;
     }
   }

package/esm/components/textbox/__internal__/prefix.style.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import InputSizes from "../../../__internal__/input/input-sizes.style";
 const StyledPrefix = styled.span`
   align-self: center;
-  font-weight: 900;
+  font-weight: 700;
   margin-left: ${({
   size
 }) => InputSizes[size].horizontalPadding}; // margin must match the original component padding

package/esm/components/tile-select/tile-select.style.js

@@ -8,7 +8,7 @@ import { baseTheme } from "../../style/themes";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 const StyledTitle = styled.h3`
   font-size: 16px;
-  font-weight: 900;
+  font-weight: 700;
   margin: 0;
   margin-right: 16px;
   margin-bottom: 8px;
@@ -16,7 +16,7 @@ const StyledTitle = styled.h3`
 `;
 const StyledSubtitle = styled.h4`
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 500;
   margin: 0;
   margin-right: 16px;
   margin-bottom: 8px;

package/esm/components/time/time.style.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import Label from "../../__internal__/label";
 export const StyledLabel = styled(Label)`
   label {
-    font-weight: var(--fontWeights500);
+    font-weight: var(--fontWeights400);
   }
 `;
 export const StyledHintText = styled.div`

package/esm/components/typography/typography.style.js

@@ -88,7 +88,7 @@ const getWeight = variant => {
     case "h1":
     case "segment-header":
     case "segment-header-small":
-      return "900";
+      return "700";
     case "h2":
     case "h3":
     case "segment-subheader":
@@ -96,7 +96,7 @@ const getWeight = variant => {
     case "b":
     case "em":
     case "strong":
-      return "700";
+      return "500";
     case "h4":
     case "h5":
     case "p":

package/esm/components/vertical-menu/vertical-menu.style.js

@@ -22,7 +22,7 @@ export const StyledVerticalMenuItem = styled.div`
   display: flex;
   border: none;
   align-items: center;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 14px;
   cursor: pointer;
   color: var(--colorsComponentsLeftnavWinterStandardContent);
@@ -73,7 +73,7 @@ StyledVerticalMenuItem.defaultProps = {
   theme: baseTheme
 };
 export const StyledTitle = styled.h3`
-  font-weight: 600;
+  font-weight: 500;
   font-size: 14px;
   line-height: 21px;
   margin: 0;

package/esm/style/fonts.css

@@ -19,7 +19,7 @@
 @font-face {
   font-family: "Sage UI";
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   src: url("~@sage/design-tokens/assets/fonts/sageui-medium.woff2") format("woff2"),
     url("~@sage/design-tokens/assets/fonts/sageui-medium.woff") format("woff"),
     url("~@sage/design-tokens/assets/fonts/sageui-medium.ttf") format("truetype"),
@@ -29,7 +29,7 @@
 @font-face {
   font-family: "Sage UI";
   font-style: normal;
-  font-weight: 900;
+  font-weight: 700;
   src: url("~@sage/design-tokens/assets/fonts/sageui-bold.woff2") format("woff2"),
     url("~@sage/design-tokens/assets/fonts/sageui-bold.woff") format("woff"),
     url("~@sage/design-tokens/assets/fonts/sageui-bold.ttf") format("truetype"),

package/esm/style/global-style.js

@@ -15,12 +15,12 @@ const GlobalStyle = createGlobalStyle`
     font-family: inherit;
   }
 
-  h1, .h1 { font-size: 24px; font-weight: 900; line-height: 32px; }
-  h2, .h2 { font-size: 22px; font-weight: 700; margin-bottom: 26px; }
-  h3, .h3 { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
-  h4, .h4 { font-size: 18px; font-weight: 700; margin-bottom: 22px; }
-  h5, .h5 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
-  h6, .h6 { font-size: 14px; font-weight: 700; margin-bottom: 18px; }
+  h1, .h1 { font-size: 24px; font-weight: 700; line-height: 32px; }
+  h2, .h2 { font-size: 22px; font-weight: 500; margin-bottom: 26px; }
+  h3, .h3 { font-size: 20px; font-weight: 500; margin-bottom: 24px; }
+  h4, .h4 { font-size: 18px; font-weight: 500; margin-bottom: 22px; }
+  h5, .h5 { font-size: 16px; font-weight: 500; margin-bottom: 20px; }
+  h6, .h6 { font-size: 14px; font-weight: 500; margin-bottom: 18px; }
 
   [data-element=${TAB_GUARD_TOP}], [data-element=${TAB_GUARD_BOTTOM}] {
     position: fixed;

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

@@ -23,7 +23,7 @@ const StyledCharacterCount = exports.StyledCharacterCount = _styledComponents.de
   ${({
   isOverLimit
 }) => isOverLimit && (0, _styledComponents.css)`
-      font-weight: var(--fontWeights700);
+      font-weight: var(--fontWeights500);
     `}
 `;
 const VisuallyHiddenCharacterCount = exports.VisuallyHiddenCharacterCount = _styledComponents.default.div`

package/lib/__internal__/fieldset/fieldset.style.js

@@ -35,7 +35,7 @@ const StyledLegendContent = exports.StyledLegendContent = _styledComponents.defa
         content: "*";
         line-height: 24px;
         color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights700);
+        font-weight: var(--fontWeights500);
         margin-left: var(--spacing050);
         position: relative;
         top: 1px;
@@ -67,7 +67,7 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   align-items: center;
   margin-bottom: var(--spacing100);
   padding: 0;
-  font-weight: var(--fontWeights700);
+  font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
   ${({
   inline,

package/lib/__internal__/label/label.style.js

@@ -10,7 +10,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledLabel = _styledComponents.default.label`
   color: var(--colorsUtilityYin090);
   display: block;
-  font-weight: var(--fontWeights700);
+  font-weight: var(--fontWeights500);
 
   ${({
   isRequired
@@ -18,7 +18,7 @@ const StyledLabel = _styledComponents.default.label`
       ::after {
         content: "*";
         color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights700);
+        font-weight: var(--fontWeights500);
         margin-left: var(--spacing050);
       }
     `}

package/lib/__internal__/validation-message/validation-message.style.js

@@ -12,7 +12,7 @@ const StyledValidationMessage = _styledComponents.default.p`
   isWarning
 }) => (0, _styledComponents.css)`
     color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
-    font-weight: ${isWarning ? "normal" : "bold"};
+    font-weight: ${isWarning ? "normal" : "500"};
     margin-top: 0px;
     margin-bottom: 8px;
   `}

package/lib/components/accordion/accordion.style.js

@@ -62,7 +62,7 @@ const StyledAccordionTitle = exports.StyledAccordionTitle = _styledComponents.de
   size,
   variant
 }) => size === "small" || variant === "subtle" ? "var(--fontSizes200)" : "var(--fontSizes400)"};
-  font-weight: 700;
+  font-weight: 500;
   line-height: 1;
   user-select: none;
   margin: 0;
@@ -170,7 +170,7 @@ const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _s
 
     ${buttonHeading && (0, _styledComponents.css)`
       box-sizing: border-box;
-      font-weight: 600;
+      font-weight: 500;
       text-decoration: none;
       font-size: var(--fontSizes100);
       min-height: var(--spacing500);

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

@@ -125,7 +125,7 @@ const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.button
   width: 100%;
   color: var(--colorsUtilityYin090);
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 500;
 
   &:focus {
     ${({

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -22,7 +22,7 @@ const StyledNavigationItem = _styledComponents.default.li`
     color: var(--colorsUtilityYin090);
     background-color: transparent;
     border-left: var(--sizing050) solid var(--colorsActionMinor100);
-    font-weight: 700;
+    font-weight: 500;
     padding: 12px 24px;
     border-top-right-radius: var(--borderRadius100);
     border-bottom-right-radius: var(--borderRadius100);

package/lib/components/badge/badge.style.js

@@ -28,7 +28,7 @@ const StyledBadgeWrapper = exports.StyledBadgeWrapper = _styledComponents.defaul
   display: inline-block;
 `;
 const StyledCounter = exports.StyledCounter = _styledComponents.default.div`
-  font-weight: 700;
+  font-weight: 500;
   font-size: 12px;
   margin-top: -1px;
 `;

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

@@ -79,7 +79,7 @@ const StyledButton = _styledComponents.default.button`
     outline-offset: 0;
     border: 2px solid transparent;
     box-sizing: border-box;
-    font-weight: 600;
+    font-weight: 500;
     text-decoration: none;
     border-radius: var(--borderRadius400);
 

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

@@ -55,7 +55,7 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
   box-sizing: border-box;
   max-width: 100%;
 
-  font-weight: 700;
+  font-weight: 500;
   background-color: transparent;
   cursor: pointer;
   text-align: center;

package/lib/components/card/card-footer/card-footer.style.js

@@ -33,7 +33,7 @@ const StyledCardFooter = _styledComponents.default.div`
     border-top-width: 1px;
     border-top-style: solid;
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 500;
     margin: ${marginSizes[spacing]};
     display: flex;
     ${roundness === "default" && (0, _styledComponents.css)`

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

@@ -40,7 +40,7 @@ const StyledContentTitle = exports.StyledContentTitle = _styledComponents.defaul
 }) => {
   return (0, _styledComponents.css)`
       display: ${inline ? "inline-block" : "block"};
-      font-weight: bold;
+      font-weight: 500;
       width: ${titleWidth && `calc(${titleWidth}% - 30px)`};
       text-align: ${!inline && align};
 

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

@@ -272,7 +272,7 @@ const StyledDayPicker = _styledComponents.default.div`
     border: none;
     //font-family: var(--fontFamiliesDefault); font assets to be updated part of FE-4975
     //font: var(--typographyDatePickerCalendarDateM); font assets to be updated part of FE-4975
-    font-weight: var(--fontWeights700);
+    font-weight: var(--fontWeights500);
     font-size: var(--fontSizes100);
     line-height: var(--lineHeights500);
     border-radius: var(--borderRadius400);

package/lib/components/definition-list/dd/dd.component.js

@@ -25,6 +25,7 @@ const Dd = ({
   } = (0, _react.useContext)(_dl.default);
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDd, _extends({
     "data-element": "dd",
+    "data-role": "dd",
     asSingleColumn: asSingleColumn,
     ddTextAlign: ddTextAlign,
     mb: mb || 2

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

@@ -38,7 +38,7 @@ StyledDl.defaultProps = {
 const StyledDt = exports.StyledDt = _styledComponents.default.dt`
   ${_styledSystem.space}
   font-size: var(--fontSizes100);
-  font-weight: 700;
+  font-weight: 500;
   color: var(--colorsUtilityYin090);
   ${({
   asSingleColumn

package/lib/components/definition-list/dl.component.js

@@ -21,6 +21,7 @@ const Dl = ({
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDl, _extends({
     w: w,
     "data-component": "dl",
+    "data-role": "dl",
     asSingleColumn: asSingleColumn
   }, rest), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
     value: {

package/lib/components/definition-list/dt/dt.component.js

@@ -26,6 +26,7 @@ const Dt = ({
   } = rest;
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDt, _extends({
     "data-element": "dt",
+    "data-role": "dt",
     mb: mb || asSingleColumn ? undefined : 2,
     pr: pr || asSingleColumn ? undefined : 3,
     dtTextAlign: dtTextAlign,

package/lib/components/duelling-picklist/duelling-picklist.style.js

@@ -35,7 +35,7 @@ const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.de
   margin-bottom: 16px;
 `;
 const StyledLabel = exports.StyledLabel = _styledComponents.default.p`
-  font-weight: bold;
+  font-weight: 500;
   font-size: 12px;
   letter-spacing: 1;
   margin: 0;

package/lib/components/fieldset/fieldset.style.js

@@ -36,7 +36,7 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   align-items: center;
   margin-bottom: 32px;
   font-size: 20px;
-  font-weight: var(--fontWeights700);
+  font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
   line-height: 24px;
   margin-right: 4px;
@@ -48,7 +48,7 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
         content: "*";
         line-height: 24px;
         color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights700);
+        font-weight: var(--fontWeights500);
         margin-left: var(--spacing100);
         position: relative;
         top: 1px;

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -80,7 +80,7 @@ const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponent
       border: var(--${borderWidthToken}) solid var(--${colorToken});
       ${hasError && `&& ${_typography.default} {
         color: var(--${colorToken});
-        font-weight: 500;
+        font-weight: 400;
       }`}
     `;
 }}

package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.style.js

@@ -41,7 +41,7 @@ const StyledFlatTableCheckbox = _styledComponents.default.td`
       border-width: 0;
       border-bottom: 1px solid var(--colorsUtilityMajor100);
       box-sizing: border-box;
-      font-weight: 700;
+      font-weight: 500;
       left: auto;
       padding: 0;
       text-align: left;

package/lib/components/flat-table/flat-table-head/flat-table-head.style.js

@@ -16,7 +16,7 @@ const StyledFlatTableHead = _styledComponents.default.thead`
       border-right: none;
     }
     ${_flatTableRowHeader.StyledFlatTableRowHeader}, ${_flatTableCheckbox.default} {
-      font-weight: 700;
+      font-weight: 500;
     }
   }
 `;

package/lib/components/flat-table/flat-table-header/flat-table-header.style.js

@@ -33,7 +33,7 @@ const StyledFlatTableHeader = _styledComponents.default.th`
     background-color: transparent;
     border-width: 0;
     box-sizing: border-box;
-    font-weight: 700;
+    font-weight: 500;
     left: auto;
     text-align: ${align};
     user-select: none;

package/lib/components/form/__internal__/form-summary.style.js

@@ -14,7 +14,7 @@ const StyledFormSummary = exports.StyledFormSummary = _styledComponents.default.
   display: inline-flex;
   align-items: center;
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 500;
   margin: -8px;
   padding: 8px;
   white-space: nowrap;

package/lib/components/form/required-fields-indicator/required-fields-indicator.component.js

@@ -17,7 +17,7 @@ const StyledIndicatorContainer = (0, _styledComponents.default)(_box.default)`
   ::after {
     content: "*";
     color: var(--colorsSemanticNegative500);
-    font-weight: 700;
+    font-weight: 500;
     margin-left: var(--spacing050);
   }
 `;

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

@@ -74,7 +74,7 @@ const StyledPreviewWrapper = exports.StyledPreviewWrapper = _styledComponents.de
 const StyledTitle = exports.StyledTitle = _styledComponents.default.div`
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 21px;
 `;

package/lib/components/loader-spinner/loader-spinner.component.js

@@ -30,7 +30,7 @@ const LoaderSpinner = ({
   const renderSpinnerLabel = /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledLabel, {
     "data-role": "visible-label",
     variant: "span",
-    fontWeight: "500",
+    fontWeight: "400",
     size: size,
     color: isLabelDark ? "var(--colorsUtilityYin090);" : "var(--colorsActionMajorYang100);",
     fontSize: size === "extra-large" ? "var(--sizing200)" : "var(--sizing175)",

package/lib/components/loader-star/loader-star.component.js

@@ -23,7 +23,7 @@ const LoaderStar = ({
   const label = /*#__PURE__*/_react.default.createElement(_loaderStar.StyledLabel, {
     "data-role": "visible-label",
     variant: "span",
-    fontWeight: "500"
+    fontWeight: "400"
   }, loaderStarLabel || locale.loaderStar.loading());
   return /*#__PURE__*/_react.default.createElement(_loaderStar.StyledLoaderStarWrapper, _extends({
     role: "status"

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

@@ -108,7 +108,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
     display: flex;
     align-items: center;
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 500;
     min-height: 40px;
     position: relative;
     box-shadow: none;
@@ -259,7 +259,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       ${_link.StyledLink} a,
       ${_link.StyledLink} button,
       ${_link.StyledLink} [data-component="icon"] {
-        font-weight: 700;
+        font-weight: 500;
         text-decoration: none;
         ${!hasInput && `color: ${_menu.default[menuType].color};`}
       }

package/lib/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -18,7 +18,7 @@ const StyledTitle = exports.StyledTitle = _styledComponents.default.h2`
     margin: 0px;
     padding: 16px 16px 8px;
     font-size: 12px;
-    font-weight: 700;
+    font-weight: 500;
     text-transform: uppercase;
     line-height: 14px;
     cursor: default;

package/lib/components/note/note.style.js

@@ -50,7 +50,7 @@ const StyledInlineControl = exports.StyledInlineControl = _styledComponents.defa
   min-width: fit-content;
 `;
 const StyledTitle = exports.StyledTitle = _styledComponents.default.header`
-  font-weight: 900;
+  font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   padding-bottom: 16px;
@@ -58,7 +58,7 @@ const StyledTitle = exports.StyledTitle = _styledComponents.default.header`
 const StyledFooterContent = exports.StyledFooterContent = _styledComponents.default.div`
   line-height: 21px;
   align-items: baseline;
-  font-weight: bold;
+  font-weight: 500;
 
   ${({
   hasName

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

@@ -60,7 +60,7 @@ const StyledPill = _styledComponents.default.span`
   return (0, _styledComponents.css)`
       font-size: 12px;
       letter-spacing: 0.7px;
-      font-weight: 700;
+      font-weight: 500;
       position: relative;
       display: inline-flex;
       text-align: center;

package/lib/components/pod/pod.style.js

@@ -349,7 +349,7 @@ const StyledSubtitle = exports.StyledSubtitle = _styledComponents.default.h5`
 const StyledTitle = exports.StyledTitle = _styledComponents.default.h4`
   display: inline;
   font-size: 18px;
-  font-weight: 600;
+  font-weight: 500;
 `;
 StyledPod.defaultProps = {
   theme: _themes.baseTheme