carbon-react 104.39.0 → 104.42.0

package/esm/components/grid/grid-item/grid-item.style.d.ts

@@ -1,2 +1,3 @@
+export function getSpacing(prop: any): any;
 export default GridItemStyle;
 declare const GridItemStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/grid/grid-item/grid-item.style.js

@@ -3,10 +3,9 @@ import { grid, flexbox } from "styled-system";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { padding } from "@styled-system/space";
 import PropTypes from "prop-types";
-import { baseTheme } from "../../../style/themes";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
-function responsiveGridItem(responsiveSettings, theme) {
+function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
@@ -26,24 +25,59 @@ function responsiveGridItem(responsiveSettings, theme) {
         justify-self: ${justifySelf || "stretch"};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
-        padding: ${getSpacing(p, theme)};
-        padding-left: ${getSpacing(pl, theme)};
-        padding-right: ${getSpacing(pr, theme)};
-        padding-top: ${getSpacing(pt, theme)};
-        padding-bottom: ${getSpacing(pb, theme)};
+        padding: ${getSpacing(p)};
+        padding-left: ${getSpacing(pl)};
+        padding-right: ${getSpacing(pr)};
+        padding-top: ${getSpacing(pt)};
+        padding-bottom: ${getSpacing(pb)};
       }
     `;
   });
 }
 
-function getSpacing(prop, theme) {
-  if (prop && typeof prop === "number") {
-    return `${theme.space[prop]}px`;
+export function getSpacing(prop) {
+  if (typeof prop === "number") {
+    switch (prop) {
+      case 0:
+        return "var(--spacing000)";
+
+      case 1:
+        return "var(--spacing100)";
+
+      case 2:
+        return "var(--spacing200)";
+
+      case 3:
+        return "var(--spacing300)";
+
+      case 4:
+        return "var(--spacing400)";
+
+      case 5:
+        return "var(--spacing500)";
+
+      case 6:
+        return "var(--spacing600)";
+
+      case 7:
+        return "var(--spacing700)";
+
+      case 8:
+        return "var(--spacing800)";
+
+      case 9:
+        return "var(--spacing900)";
+
+      case 10:
+        return "var(--spacing1000)";
+
+      default:
+        return "var(--spacing100)";
+    }
   }
 
   return prop;
 }
-
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 const GridItemStyle = styled.div`
   margin: 0;
@@ -70,10 +104,9 @@ const GridItemStyle = styled.div`
   gridColumn
 })}
   ${({
-  responsiveSettings,
-  theme
+  responsiveSettings
 }) => responsiveSettings && css`
-      ${responsiveGridItem(responsiveSettings, theme)};
+      ${responsiveGridItem(responsiveSettings)};
     `}
 `;
 GridItemStyle.propTypes = {
@@ -93,7 +126,6 @@ GridItemStyle.propTypes = {
 };
 GridItemStyle.defaultProps = {
   gridColumn: "1 / 13",
-  gridRow: "auto",
-  theme: baseTheme
+  gridRow: "auto"
 };
 export default GridItemStyle;

package/esm/components/help/help.style.js

@@ -4,9 +4,6 @@ import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 const StyledHelp = styled.div`
   background: none;
-  color: ${({
-  theme
-}) => theme.help.color};
   cursor: default;
   border: none;
   outline: none;
@@ -18,24 +15,24 @@ const StyledHelp = styled.div`
   margin-top: 0;
   text-decoration: none;
 
+  ${StyledIcon} {
+    color: var(--colorsUtilityYin065);
+  }
+
   ${({
   href
 }) => href && css`
       cursor: pointer;
     `}
 
-  &:focus,
-  &:hover {
-    color: ${({
-  theme
-}) => theme.help.hover};
+  &:focus ${StyledIcon},
+  &:hover ${StyledIcon} {
+    color: var(--colorsUtilityYin090);
     text-decoration: none;
   }
 
   &:focus ${StyledIcon} {
-    outline: ${({
-  theme
-}) => `2px solid ${theme.colors.focus}`};
+    outline: 2px solid var(--colorsSemanticFocus500);
   }
 
   ${margin}

package/esm/components/link-preview/__internal__/placeholder.component.js

@@ -1,23 +1,17 @@
 import React from "react";
 import styled from "styled-components";
-import { toColor } from "../../../style/utils/color";
-import { baseTheme } from "../../../style/themes";
 const StyledPlaceHolder = styled.div`
   overflow: hidden;
   position: relative;
   height: 152px;
   min-width: 152px;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.background};
+  background-color: var(--colorsUtilityMajor025);
 `;
 const Circle = styled.div`
   height: 22px;
   width: 22px;
   border-radius: 50%;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.hoverBackground};
+  background-color: var(--colorsUtilityMajor100);
   position: absolute;
   left: 22px;
   top: 30px;
@@ -27,9 +21,8 @@ const Square = styled.div`
   width: 200px;
   transform: rotate(45deg);
   background-color: ${({
-  color,
-  theme
-}) => toColor(theme, color)};
+  color
+}) => color};
   position: absolute;
   border-radius: 2%;
   top: ${({
@@ -39,24 +32,15 @@ const Square = styled.div`
   left
 }) => left};
 `;
-StyledPlaceHolder.defaultProps = {
-  theme: baseTheme
-};
-Circle.defaultProps = {
-  theme: baseTheme
-};
-Square.defaultProps = {
-  theme: baseTheme
-};
 
 const Placeholder = () => /*#__PURE__*/React.createElement(StyledPlaceHolder, {
   "data-component": "link preview image placeholder"
 }, /*#__PURE__*/React.createElement(Circle, null), /*#__PURE__*/React.createElement(Square, {
-  color: "slateTint90",
+  color: "var(--colorsUtilityMajor050)",
   top: "120px",
   left: "-64px"
 }), /*#__PURE__*/React.createElement(Square, {
-  color: "slateTint75",
+  color: "var(--colorsUtilityMajor150)",
   top: "96px",
   left: "16px"
 }));

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

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import { baseTheme } from "../../style/themes";
 import PreviewBars, { StyledPreview } from "../preview/preview.style";
 const StyledLinkPreview = styled.a`
   display: flex;
@@ -8,22 +7,21 @@ const StyledLinkPreview = styled.a`
   outline: none;
 
   ${({
-  theme,
   as
 }) => css`
-    border: 1px solid ${theme.editorLinkPreview.border};
-    background-color: ${theme.editorLinkPreview.background};
-    color: ${theme.text.color};
+    border: 1px solid var(--colorsUtilityMajor050);
+    background-color: var(--colorsUtilityMajor025);
+    color: var(--colorsUtilityYin090);
 
     ${as !== "div" && css`
       :focus {
-        outline: 2px solid ${theme.colors.focus};
+        outline: 2px solid var(--colorsSemanticFocus500);
         outline-offset: -1px;
       }
 
       :hover {
         cursor: pointer;
-        background-color: ${theme.editorLinkPreview.hoverBackground};
+        background-color: var(--colorsUtilityMajor100);
       }
     `}
   `}
@@ -81,14 +79,6 @@ const StyledUrl = styled.div`
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
-  color: ${({
-  theme
-}) => theme.editorLinkPreview.url};
+  color: var(--colorsUtilityMajor400);
 `;
-StyledLinkPreview.defaultProps = {
-  theme: baseTheme
-};
-StyledUrl.defaultProps = {
-  theme: baseTheme
-};
 export { StyledLinkPreview, StyledCloseIconWrapper, StyledPreviewWrapper, StyledTitle, StyledDescription, StyledUrl };

package/esm/components/preview/preview.style.js

@@ -8,9 +8,7 @@ const shimmer = keyframes`
 `;
 const PreviewStyle = styled.span`
   animation: ${shimmer} 2s ease infinite;
-  background: ${({
-  theme
-}) => theme.colors.previewBackground};
+  background: var(--colorsUtilityMajor150);
   display: block;
   height: 15px;
   opacity: 0.6;
@@ -26,7 +24,4 @@ export const StyledPreview = styled.div`
 StyledPreview.defaultProps = {
   theme: baseTheme
 };
-PreviewStyle.defaultProps = {
-  theme: baseTheme
-};
 export default PreviewStyle;

package/lib/components/grid/grid-item/grid-item.style.d.ts

@@ -1,2 +1,3 @@
+export function getSpacing(prop: any): any;
 export default GridItemStyle;
 declare const GridItemStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getSpacing = getSpacing;
 exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -15,8 +16,6 @@ var _space = require("@styled-system/space");
 
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
-var _themes = require("../../../style/themes");
-
 var _utils = require("../../../style/utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,7 +24,7 @@ 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; }
 
-function responsiveGridItem(responsiveSettings, theme) {
+function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
@@ -45,19 +44,55 @@ function responsiveGridItem(responsiveSettings, theme) {
         justify-self: ${justifySelf || "stretch"};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
-        padding: ${getSpacing(p, theme)};
-        padding-left: ${getSpacing(pl, theme)};
-        padding-right: ${getSpacing(pr, theme)};
-        padding-top: ${getSpacing(pt, theme)};
-        padding-bottom: ${getSpacing(pb, theme)};
+        padding: ${getSpacing(p)};
+        padding-left: ${getSpacing(pl)};
+        padding-right: ${getSpacing(pr)};
+        padding-top: ${getSpacing(pt)};
+        padding-bottom: ${getSpacing(pb)};
       }
     `;
   });
 }
 
-function getSpacing(prop, theme) {
-  if (prop && typeof prop === "number") {
-    return `${theme.space[prop]}px`;
+function getSpacing(prop) {
+  if (typeof prop === "number") {
+    switch (prop) {
+      case 0:
+        return "var(--spacing000)";
+
+      case 1:
+        return "var(--spacing100)";
+
+      case 2:
+        return "var(--spacing200)";
+
+      case 3:
+        return "var(--spacing300)";
+
+      case 4:
+        return "var(--spacing400)";
+
+      case 5:
+        return "var(--spacing500)";
+
+      case 6:
+        return "var(--spacing600)";
+
+      case 7:
+        return "var(--spacing700)";
+
+      case 8:
+        return "var(--spacing800)";
+
+      case 9:
+        return "var(--spacing900)";
+
+      case 10:
+        return "var(--spacing1000)";
+
+      default:
+        return "var(--spacing100)";
+    }
   }
 
   return prop;
@@ -89,10 +124,9 @@ const GridItemStyle = _styledComponents.default.div`
   gridColumn
 })}
   ${({
-  responsiveSettings,
-  theme
+  responsiveSettings
 }) => responsiveSettings && (0, _styledComponents.css)`
-      ${responsiveGridItem(responsiveSettings, theme)};
+      ${responsiveGridItem(responsiveSettings)};
     `}
 `;
 GridItemStyle.propTypes = {
@@ -112,8 +146,7 @@ GridItemStyle.propTypes = {
 };
 GridItemStyle.defaultProps = {
   gridColumn: "1 / 13",
-  gridRow: "auto",
-  theme: _themes.baseTheme
+  gridRow: "auto"
 };
 var _default = GridItemStyle;
 exports.default = _default;

package/lib/components/help/help.style.js

@@ -21,9 +21,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledHelp = _styledComponents.default.div`
   background: none;
-  color: ${({
-  theme
-}) => theme.help.color};
   cursor: default;
   border: none;
   outline: none;
@@ -35,24 +32,24 @@ const StyledHelp = _styledComponents.default.div`
   margin-top: 0;
   text-decoration: none;
 
+  ${_icon.default} {
+    color: var(--colorsUtilityYin065);
+  }
+
   ${({
   href
 }) => href && (0, _styledComponents.css)`
       cursor: pointer;
     `}
 
-  &:focus,
-  &:hover {
-    color: ${({
-  theme
-}) => theme.help.hover};
+  &:focus ${_icon.default},
+  &:hover ${_icon.default} {
+    color: var(--colorsUtilityYin090);
     text-decoration: none;
   }
 
   &:focus ${_icon.default} {
-    outline: ${({
-  theme
-}) => `2px solid ${theme.colors.focus}`};
+    outline: 2px solid var(--colorsSemanticFocus500);
   }
 
   ${_styledSystem.margin}

package/lib/components/link-preview/__internal__/placeholder.component.js

@@ -9,10 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _color = require("../../../style/utils/color");
-
-var _themes = require("../../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledPlaceHolder = _styledComponents.default.div`
@@ -20,17 +16,13 @@ const StyledPlaceHolder = _styledComponents.default.div`
   position: relative;
   height: 152px;
   min-width: 152px;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.background};
+  background-color: var(--colorsUtilityMajor025);
 `;
 const Circle = _styledComponents.default.div`
   height: 22px;
   width: 22px;
   border-radius: 50%;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.hoverBackground};
+  background-color: var(--colorsUtilityMajor100);
   position: absolute;
   left: 22px;
   top: 30px;
@@ -40,9 +32,8 @@ const Square = _styledComponents.default.div`
   width: 200px;
   transform: rotate(45deg);
   background-color: ${({
-  color,
-  theme
-}) => (0, _color.toColor)(theme, color)};
+  color
+}) => color};
   position: absolute;
   border-radius: 2%;
   top: ${({
@@ -52,24 +43,15 @@ const Square = _styledComponents.default.div`
   left
 }) => left};
 `;
-StyledPlaceHolder.defaultProps = {
-  theme: _themes.baseTheme
-};
-Circle.defaultProps = {
-  theme: _themes.baseTheme
-};
-Square.defaultProps = {
-  theme: _themes.baseTheme
-};
 
 const Placeholder = () => /*#__PURE__*/_react.default.createElement(StyledPlaceHolder, {
   "data-component": "link preview image placeholder"
 }, /*#__PURE__*/_react.default.createElement(Circle, null), /*#__PURE__*/_react.default.createElement(Square, {
-  color: "slateTint90",
+  color: "var(--colorsUtilityMajor050)",
   top: "120px",
   left: "-64px"
 }), /*#__PURE__*/_react.default.createElement(Square, {
-  color: "slateTint75",
+  color: "var(--colorsUtilityMajor150)",
   top: "96px",
   left: "16px"
 }));

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

@@ -7,8 +7,6 @@ exports.StyledUrl = exports.StyledDescription = exports.StyledTitle = exports.St
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../style/themes");
-
 var _preview = _interopRequireWildcard(require("../preview/preview.style"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -22,22 +20,21 @@ const StyledLinkPreview = _styledComponents.default.a`
   outline: none;
 
   ${({
-  theme,
   as
 }) => (0, _styledComponents.css)`
-    border: 1px solid ${theme.editorLinkPreview.border};
-    background-color: ${theme.editorLinkPreview.background};
-    color: ${theme.text.color};
+    border: 1px solid var(--colorsUtilityMajor050);
+    background-color: var(--colorsUtilityMajor025);
+    color: var(--colorsUtilityYin090);
 
     ${as !== "div" && (0, _styledComponents.css)`
       :focus {
-        outline: 2px solid ${theme.colors.focus};
+        outline: 2px solid var(--colorsSemanticFocus500);
         outline-offset: -1px;
       }
 
       :hover {
         cursor: pointer;
-        background-color: ${theme.editorLinkPreview.hoverBackground};
+        background-color: var(--colorsUtilityMajor100);
       }
     `}
   `}
@@ -100,14 +97,6 @@ const StyledUrl = _styledComponents.default.div`
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
-  color: ${({
-  theme
-}) => theme.editorLinkPreview.url};
+  color: var(--colorsUtilityMajor400);
 `;
-exports.StyledUrl = StyledUrl;
-StyledLinkPreview.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledUrl.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledUrl = StyledUrl;

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

@@ -24,9 +24,7 @@ const shimmer = (0, _styledComponents.keyframes)`
 `;
 const PreviewStyle = _styledComponents.default.span`
   animation: ${shimmer} 2s ease infinite;
-  background: ${({
-  theme
-}) => theme.colors.previewBackground};
+  background: var(--colorsUtilityMajor150);
   display: block;
   height: 15px;
   opacity: 0.6;
@@ -43,8 +41,5 @@ exports.StyledPreview = StyledPreview;
 StyledPreview.defaultProps = {
   theme: _base.default
 };
-PreviewStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = PreviewStyle;
 exports.default = _default;

package/package.json

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