carbon-react 104.4.0 → 104.5.0

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

@@ -13,8 +13,6 @@ var _fieldset = _interopRequireDefault(require("../fieldset"));
 
 var _input = require("../../__internal__/input");
 
-var _tint = _interopRequireDefault(require("../../style/utils/tint"));
-
 var _fieldset2 = require("../fieldset/fieldset.style");
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
@@ -33,6 +31,7 @@ const StyledTitle = _styledComponents.default.h3`
   margin: 0;
   margin-right: 16px;
   margin-bottom: 8px;
+  color: var(--colorsActionMinorYin090);
 `;
 exports.StyledTitle = StyledTitle;
 const StyledSubtitle = _styledComponents.default.h4`
@@ -41,6 +40,7 @@ const StyledSubtitle = _styledComponents.default.h4`
   margin: 0;
   margin-right: 16px;
   margin-bottom: 8px;
+  color: var(--colorsActionMinorYin090);
 `;
 exports.StyledSubtitle = StyledSubtitle;
 const StyledAdornment = _styledComponents.default.div`
@@ -51,36 +51,28 @@ const StyledAdornment = _styledComponents.default.div`
 `;
 exports.StyledAdornment = StyledAdornment;
 const StyledDescription = _styledComponents.default.p`
-  color: ${({
-  theme
-}) => theme.tileSelect.descriptionColor};
+  color: var(--colorsActionMinorYin055);
   font-size: 14px;
   margin: 0;
 `;
 exports.StyledDescription = StyledDescription;
 const StyledTileSelect = _styledComponents.default.div`
-  background-color: ${({
-  theme
-}) => theme.colors.white};
+  background: var(--colorsActionMinorYang100);
   padding: 24px;
   ${({
-  checked,
-  theme
+  checked
 }) => checked && (0, _styledComponents.css)`
-      background: ${(0, _tint.default)(theme.colors.primary)(95)};
+      background: var(--colorsActionMajor025);
     `}
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      background: ${theme.tileSelect.disabledBackground};
+      background: var(--colorsActionMinorYang100);
       ${StyledTitle}, ${StyledSubtitle}, ${StyledDescription} {
-        color: ${theme.tileSelect.disabledText};
+        color: var(--colorsActionMinorYin030);
       }
       ${StyledAdornment} * {
-        color: ${theme.colors.black};
-        fill: ${theme.colors.black};
         opacity: 0.3;
       }
     `}
@@ -89,18 +81,17 @@ exports.StyledTileSelect = StyledTileSelect;
 const StyledFocusWrapper = _styledComponents.default.div`
   ${({
   checked,
-  theme,
   hasFocus
 }) => (0, _styledComponents.css)`
     position: relative;
-    border: 1px solid ${theme.tileSelect.border};
+    border: 1px solid var(--colorsActionMinor250);
     ${checked && (0, _styledComponents.css)`
-      border-color: ${theme.colors.primary};
+      border-color: var(--colorsActionMajor500);
       z-index: 10;
     `}
 
     ${hasFocus && (0, _styledComponents.css)`
-      outline: 3px solid ${theme.colors.focus};
+      outline: 3px solid var(--colorsSemanticFocus500);
       z-index: 15;
     `}
   `}
@@ -116,11 +107,10 @@ const StyledTileSelectContainer = _styledComponents.default.div`
   }
   ${({
   checked,
-  disabled,
-  theme
+  disabled
 }) => !checked && !disabled && (0, _styledComponents.css)`
       &:hover ${StyledTileSelect} {
-        background: ${theme.tileSelect.hoverBackground};
+        background: var(--colorsActionMinor050);
       }
     `}
 `;
@@ -171,8 +161,7 @@ const StyledTitleContainer = _styledComponents.default.div`
 exports.StyledTitleContainer = StyledTitleContainer;
 const StyledDeselectWrapper = _styledComponents.default.div`
   ${({
-  hasActionAdornment,
-  theme
+  hasActionAdornment
 }) => (0, _styledComponents.css)`
     z-index: 200;
     position: relative;
@@ -181,10 +170,10 @@ const StyledDeselectWrapper = _styledComponents.default.div`
     height: fit-content;
 
     ${hasActionAdornment && `
-      margin-right: ${2 * theme.spacing}px;
+      margin-right: var(--sizing200);
       display: flex;
       align-items: baseline;
-      min-height: ${4 * theme.spacing}px;
+      min-height: var(--sizing400);
 
       ${_icon.default} {
         top: 2px;
@@ -214,9 +203,7 @@ const StyledTileSelectFieldset = (0, _styledComponents.default)(_fieldset.defaul
 `;
 exports.StyledTileSelectFieldset = StyledTileSelectFieldset;
 const StyledGroupDescription = _styledComponents.default.p`
-  color: ${({
-  theme
-}) => theme.tileSelect.descriptionColor};
+  color: var(--colorsActionMinorYin055);
   margin: 0;
   margin-bottom: 16px;
 `;
@@ -224,24 +211,6 @@ exports.StyledGroupDescription = StyledGroupDescription;
 StyledTileSelectFieldset.defaultProps = {
   theme: _themes.baseTheme
 };
-StyledTileSelect.defaultProps = {
-  theme: _themes.baseTheme
-};
 StyledTileSelectContainer.defaultProps = {
   theme: _themes.baseTheme
-};
-StyledGroupDescription.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledTileSelectInput.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledDescription.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledDeselectWrapper.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledFocusWrapper.defaultProps = {
-  theme: _themes.baseTheme
 };

package/package.json

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