carbon-react 102.0.1 → 102.4.0

package/lib/__internal__/label/icon-wrapper.style.js

@@ -11,8 +11,6 @@ var _validationIcon = _interopRequireDefault(require("../validations/validation-
 
 var _help = _interopRequireDefault(require("../../components/help/help.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const IconWrapperStyle = _styledComponents.default.div`
@@ -27,17 +25,12 @@ const IconWrapperStyle = _styledComponents.default.div`
   vertical-align: top;
 
   :focus {
-    outline: ${({
-  theme
-}) => `2px solid ${theme.colors.focus}`};
+    outline: 2px solid var(--colorsSemanticFocus500);
   }
 
   ${_validationIcon.default}, ${_help.default} {
     position: static;
   }
 `;
-IconWrapperStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = IconWrapperStyle;
 exports.default = _default;

package/lib/__internal__/label/label.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; }
@@ -18,36 +16,30 @@ 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 LabelStyle = _styledComponents.default.label`
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsYin090);
   display: block;
-  font-weight: 600;
+  font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
 
   ${({
-  isRequired,
-  theme
+  isRequired
 }) => isRequired && (0, _styledComponents.css)`
       ::after {
         content: "*";
-        color: ${theme.colors.asterisk};
+        color: var(--colorsSemanticNegative500);
         font-weight: 700;
-        margin-left: ${theme.spacing}px;
+        margin-left: var(--spacing100);
       }
     `}
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      color: ${theme.disabled.disabled};
+      color: var(--colorsYin030);
     `}
 `;
-LabelStyle.defaultProps = {
-  theme: _base.default
-};
 LabelStyle.propTypes = {
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+  isRequired: _propTypes.default.bool
 };
 const StyledLabelContainer = _styledComponents.default.div`
   display: flex;
@@ -59,16 +51,15 @@ const StyledLabelContainer = _styledComponents.default.div`
   inline,
   pr,
   pl,
-  width,
-  theme
+  width
 }) => inline && (0, _styledComponents.css)`
       box-sizing: border-box;
       margin-bottom: 0;
       ${pr && (0, _styledComponents.css)`
-        padding-right: ${pr * theme.spacing}px;
+        padding-right: var(${pr === 1 ? "--spacing100" : "--spacing200"});
       `};
       ${pl && (0, _styledComponents.css)`
-        padding-left: ${pl * theme.spacing}px;
+        padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       width: ${width === 0 ? StyledLabelContainer.defaultProps.width : width}%;
@@ -79,7 +70,7 @@ const StyledLabelContainer = _styledComponents.default.div`
 }) => optional && (0, _styledComponents.css)`
       ::after {
         content: "(optional)";
-        font-weight: 350;
+        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400)
         margin-left: 4px;
       }
     `}
@@ -87,14 +78,12 @@ const StyledLabelContainer = _styledComponents.default.div`
 exports.StyledLabelContainer = StyledLabelContainer;
 StyledLabelContainer.defaultProps = {
   align: "right",
-  theme: _base.default,
   width: 30
 };
 StyledLabelContainer.propTypes = {
   align: _propTypes.default.oneOf(["left", "right"]),
   inline: _propTypes.default.bool,
   width: _propTypes.default.number,
-  readOnly: _propTypes.default.bool,
   pr: _propTypes.default.number,
   pl: _propTypes.default.number
 };

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

@@ -37,8 +37,8 @@ const StyledLink = _styledComponents.default.span`
         line-height: 36px;
         left: -999em;
         z-index: ${theme.zIndex.aboveAll};
-        box-shadow: inset 0 0 0 2px ${theme.colors.primary};
-        border: 2px solid ${theme.colors.white};
+        box-shadow: inset 0 0 0 2px var(--colorsActionMajor500);
+        border: 2px solid var(--colorsYang100);
       }
 
       a:focus {
@@ -51,38 +51,38 @@ const StyledLink = _styledComponents.default.span`
   button {
       font-size: ${isSkipLink ? "16px" : "14px"};
       text-decoration: underline;
-      color: ${isSkipLink ? theme.text.color : theme.colors.primary};
+      color: ${isSkipLink ? "var(--colorsYin090)" : "var(--colorsActionMajor500)"};
       display: inline-block;
       ${_icon.default} {
         display: inline-block;
         position: relative;
         vertical-align: middle;
         ${iconAlign === "left" && (0, _styledComponents.css)`
-          margin-right: ${hasContent ? "5px" : 0};
+          margin-right: ${hasContent ? "var(--spacing100)" : 0};
         `}
         ${iconAlign === "right" && (0, _styledComponents.css)`
           margin-right: 0;
-          margin-left: ${hasContent ? "5px" : 0};
+          margin-left: ${hasContent ? "var(--spacing100)" : 0};
         `}
       }
 
       &:hover {
         cursor: pointer;
-        color: ${isSkipLink ? theme.text.color : theme.colors.secondary};
+        color: ${isSkipLink ? "var(--colorsYin090)" : "var(--colorsActionMajor600)"};
       }
 
       &:focus {
-        color: ${theme.text.color};
-        background-color: ${isSkipLink ? theme.colors.white : theme.colors.focusedLinkBackground};
+        color: var(--colorsYin090);
+        background-color: ${isSkipLink ? "var(--colorsYang100)" : "var(--colorsSemanticFocus250)"};
         outline: none;
       }
 
       ${disabled && (0, _styledComponents.css)`
-        color: ${theme.disabled.text};
+        color: var(--colorsYin065);
         &:hover,
         &:focus {
           cursor: not-allowed;
-          color: ${theme.disabled.text};
+          color: var(--colorsYin065);
         }
       `}
     }

package/lib/components/message/message.style.js

@@ -21,18 +21,21 @@ 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 messageVariants = {
+  error: "var(--colorsSemanticNegative500)",
+  info: "var(--colorsSemanticNeutral500)",
+  success: "var(--colorsSemanticPositive500)",
+  warning: "var(--colorsSemanticCaution500)"
+};
 const MessageStyle = _styledComponents.default.div`
   position: relative;
   display: flex;
   justify-content: flex-start;
   align-content: center;
   border: 1px solid ${({
-  theme,
   variant
-}) => theme.colors[variant]};
-  background-color: ${({
-  theme
-}) => theme.colors.white};
+}) => messageVariants[variant]};
+  background-color: var(--colorsUtilityYang100);
   min-height: 38px;
 
   ${({

package/lib/components/message/type-icon/type-icon.style.js

@@ -9,20 +9,23 @@ 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; }
 
 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 messageVariants = {
+  error: "var(--colorsSemanticNegative500)",
+  info: "var(--colorsSemanticNeutral500)",
+  success: "var(--colorsSemanticPositive500)",
+  warning: "var(--colorsSemanticCaution500)"
+};
 const TypeIconStyle = _styledComponents.default.div`
   align-items: center;
   background-color: ${({
-  theme,
   variant
-}) => theme.colors[variant]};
+}) => messageVariants[variant]};
   display: flex;
   justify-content: center;
   line-height: 100%;
@@ -30,28 +33,24 @@ const TypeIconStyle = _styledComponents.default.div`
   text-align: center;
   span {
     &:before {
-      color: ${({
-  theme
-}) => theme.colors.white};
+      color: var(--colorsUtilityYang100);
     }
   }
 
   ${({
-  theme,
   transparent,
   variant
 }) => transparent && (0, _styledComponents.css)`
       background-color: transparent;
       span {
         &:before {
-          color: ${theme.colors[variant]};
+          color: ${messageVariants[variant]};
         }
       }
     `}
 `;
 TypeIconStyle.defaultProps = {
   variant: "info",
-  theme: _base.default,
   transparent: false
 };
 TypeIconStyle.propTypes = {

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

@@ -37,10 +37,9 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
   fieldHelpInline,
   reverse,
   size,
-  theme,
   inline
 }) => (0, _styledComponents.css)`
-    margin-bottom: ${theme.space[2]}px;
+    margin-bottom: var(--spacing150);
 
     :last-of-type {
       margin-bottom: 0;
@@ -79,16 +78,16 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
     }
 
     ${_hiddenCheckableInput.default}:checked + ${_checkableInputSvgWrapper.default} circle {
-      fill: ${theme.text.color};
+      fill: var(--colorsUtilityYin090);
     }
 
     ${disabled && (0, _styledComponents.css)`
       circle {
-        fill: ${theme.disabled.input};
+        fill: var(--colorsCtilityDisabled400);
       }
 
       ${_hiddenCheckableInput.default}:checked + ${_checkableInputSvgWrapper.default} circle {
-        fill: ${theme.disabled.border};
+        fill: var(--colorsUtilityDisabled600);
       }
     `}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.0.1",
+  "version": "102.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -19,7 +19,6 @@
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
     "test:cypress": "cypress open",
     "cypress:react": "npx cypress open-ct",
-    "cypress:ci:react": "npx cypress run-ct --spec './src/components/**/*.test.js' --record --key --parallel --group 'ubuntu-cypress-react' --browser=chrome",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",