carbon-react 104.17.0 → 104.18.0

package/lib/components/portrait/portrait-gravatar.component.d.ts

@@ -9,7 +9,6 @@ declare function PortraitGravatar({ gravatarEmail, size, alt, shape, errorCallba
 }): JSX.Element;
 declare namespace PortraitGravatar {
     namespace propTypes {
-        const theme: PropTypes.Requireable<object>;
         const gravatarEmail: PropTypes.Validator<string>;
         const size: PropTypes.Validator<string>;
         const shape: PropTypes.Requireable<string>;

package/lib/components/portrait/portrait-gravatar.component.js

@@ -51,9 +51,6 @@ const PortraitGravatar = ({
 };
 
 PortraitGravatar.propTypes = {
-  /** The theme to use. */
-  theme: _propTypes.default.object,
-
   /** The user's email address for the Gravatar. */
   gravatarEmail: _propTypes.default.string.isRequired,
 

package/lib/components/portrait/portrait-gravatar.d.ts

@@ -1,8 +1,6 @@
 import { PortraitSizes, PortraitShapes } from "./portrait";
 
 export interface PortraitGravatarProps {
-  /** The theme to use. */
-  theme?: Record<string, unknown>;
   /** The user's email address for the Gravatar. */
   gravatarEmail: string;
   /** The size of the Gravatar. */

package/lib/components/portrait/portrait-initials.component.d.ts

@@ -1,8 +1,23 @@
-declare var _default: React.ForwardRefExoticComponent<{
+export default PortraitInitials;
+declare function PortraitInitials({ initials, size, shape, darkBackground, alt, ...rest }: {
     [x: string]: any;
-    [x: number]: any;
-} & {
-    theme?: any;
-}>;
-export default _default;
-import React from "react";
+    initials: any;
+    size: any;
+    shape: any;
+    darkBackground: any;
+    alt: any;
+}): JSX.Element;
+declare namespace PortraitInitials {
+    namespace propTypes {
+        const initials: PropTypes.Validator<string>;
+        const size: PropTypes.Validator<string>;
+        const darkBackground: PropTypes.Requireable<boolean>;
+        const shape: PropTypes.Requireable<string>;
+        const alt: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const shape_1: string;
+        export { shape_1 as shape };
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/portrait/portrait-initials.component.js

@@ -9,9 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = require("styled-components");
-
-var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
 
 var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
 
@@ -28,7 +26,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const PortraitInitials = ({
-  theme,
   initials,
   size,
   shape,
@@ -39,7 +36,7 @@ const PortraitInitials = ({
   const [cachedImageDataUrl, setCachedImageDataUrl] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
     setCachedImageDataUrl(null);
-  }, [theme, initials, size, darkBackground]);
+  }, [initials, size, darkBackground]);
 
   const generateDataUrl = () => {
     if (cachedImageDataUrl) {
@@ -49,7 +46,7 @@ const PortraitInitials = ({
     const {
       textColor,
       bgColor
-    } = (0, _portrait.getColorsForInitials)(theme, darkBackground);
+    } = (0, _portrait.getColorsForInitials)(darkBackground);
 
     let canvas = _browser.default.getDocument().createElement("canvas");
 
@@ -66,9 +63,9 @@ const PortraitInitials = ({
     context.font = `${Math.round(canvas.width / 2.4)}px Lato, Arial`;
     context.textAlign = "center"; // Setup background and front color
 
-    context.fillStyle = bgColor;
+    context.fillStyle = _common.default[bgColor];
     context.fillRect(0, 0, dimensions, dimensions);
-    context.fillStyle = textColor;
+    context.fillStyle = _common.default[textColor];
     context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5); // Set image representation in default format (png)
 
     const dataURI = canvas.toDataURL(); // Dispose canvas element
@@ -81,8 +78,7 @@ const PortraitInitials = ({
   return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, _extends({
     "data-element": "initials",
     size: size,
-    shape: shape,
-    theme: theme
+    shape: shape
   }, rest), /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
     src: generateDataUrl(),
     alt: alt
@@ -90,9 +86,6 @@ const PortraitInitials = ({
 };
 
 PortraitInitials.propTypes = {
-  /** The theme to use. */
-  theme: _propTypes.default.object,
-
   /** The user's initials to render. */
   initials: _propTypes.default.string.isRequired,
 
@@ -109,10 +102,7 @@ PortraitInitials.propTypes = {
   alt: _propTypes.default.string
 };
 PortraitInitials.defaultProps = {
-  shape: "square",
-  theme: _base.default
+  shape: "square"
 };
-
-var _default = (0, _styledComponents.withTheme)(PortraitInitials);
-
+var _default = PortraitInitials;
 exports.default = _default;

package/lib/components/portrait/portrait-initials.d.ts

@@ -1,8 +1,6 @@
 import { PortraitSizes, PortraitShapes } from "./portrait";
 
 export interface PortraitInitialsProps {
-  /** The theme to use. */
-  theme?: Record<string, unknown>;
   /** The user's initials to render. */
   initials: string;
   /** The size of the initials image. */

package/lib/components/portrait/portrait.config.js

@@ -27,11 +27,11 @@ const PORTRAIT_SIZE_PARAMS = {
   },
   L: {
     dimensions: 72,
-    iconDimensions: 32
+    iconDimensions: 40
   },
   XL: {
     dimensions: 104,
-    iconDimensions: 48
+    iconDimensions: 56
   },
   XXL: {
     dimensions: 128,

package/lib/components/portrait/portrait.style.d.ts

@@ -1,10 +1,10 @@
-export function getColorsForInitials(theme: any, darkBackground: any): {
-    textColor: any;
-    bgColor: any;
+export function getColorsForInitials(darkBackground: any): {
+    textColor: string;
+    bgColor: string;
 };
 export const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPortraitInitialsImg: import("styled-components").StyledComponent<"img", any, {}, never>;
 export const StyledPortraitGravatar: import("styled-components").StyledComponent<"img", any, {}, never>;
 export const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
-export const StyledIcon: import("styled-components").StyledComponent<({ darkBackground, ...rest }: any) => JSX.Element, any, {}, never>;
+export const StyledIcon: import("styled-components").StyledComponent<({ size, darkBackground, ...rest }: any) => JSX.Element, any, {}, never>;
 export const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/portrait/portrait.style.js

@@ -54,7 +54,6 @@ function stylingForShape({
 
 function stylingForIcon({
   size,
-  theme,
   darkBackground
 }) {
   const params = _portrait.PORTRAIT_SIZE_PARAMS[size];
@@ -63,31 +62,28 @@ function stylingForIcon({
     return (0, _styledComponents.css)``;
   }
 
-  let color = theme.portrait.border;
-  let backgroundColor = theme.portrait.background;
+  let color = "var(--colorsUtilityMajor200)";
+  let backgroundColor = "var(--colorsUtilityMajor025)";
 
   if (darkBackground) {
-    color = theme.portrait.background;
-    backgroundColor = theme.portrait.border;
+    color = "var(--colorsUtilityMajor025)";
+    backgroundColor = "var(--colorsUtilityMajor200)";
   }
 
   return (0, _styledComponents.css)`
     background-color: ${backgroundColor};
     color: ${color};
 
-    ${params.iconDimensions && (0, _styledComponents.css)`
-      svg {
-        width: ${params.iconDimensions}px;
-        height: ${params.iconDimensions}px;
-      }
-    `}
+    ::before {
+      font-size: ${params.iconDimensions}px;
+    }
   `;
 }
 
-function getColorsForInitials(theme, darkBackground) {
+function getColorsForInitials(darkBackground) {
   return {
-    textColor: darkBackground ? theme.portrait.background : theme.portrait.initials,
-    bgColor: darkBackground ? theme.portrait.initials : theme.portrait.background
+    textColor: darkBackground ? "colorsUtilityYang100" : "colorsUtilityYin055",
+    bgColor: darkBackground ? "colorsUtilityMajor400" : "colorsUtilityMajor025"
   };
 }
 
@@ -97,20 +93,14 @@ const StyledPortraitInitials = _styledComponents.default.div`
   box-sizing: border-box;
   ${stylingForSize}
   ${stylingForShape}
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-      border: 1px solid ${theme.portrait.border};
-    `}
+  border: 1px solid var(--colorsUtilityMajor200);
 `;
 exports.StyledPortraitInitials = StyledPortraitInitials;
 StyledPortraitInitials.propTypes = {
-  theme: _propTypes.default.object,
   size: _propTypes.default.oneOf(_portrait.PORTRAIT_SIZES).isRequired,
   shape: _propTypes.default.oneOf(_portrait.PORTRAIT_SHAPES)
 };
 StyledPortraitInitials.defaultProps = {
-  theme: _base.default,
   shape: "square"
 };
 const StyledPortraitInitialsImg = _styledComponents.default.img`
@@ -134,9 +124,6 @@ StyledPortraitGravatar.propTypes = {
   src: _propTypes.default.string.isRequired,
   alt: _propTypes.default.string
 };
-StyledPortraitGravatar.defaultProps = {
-  theme: _base.default
-};
 const StyledCustomImg = _styledComponents.default.img`
   display: block;
   ${stylingForSize}
@@ -151,6 +138,7 @@ StyledCustomImg.propTypes = {
 }; // && is used here to increase the specificity
 
 const StyledIcon = (0, _styledComponents.default)(({
+  size,
   darkBackground,
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_icon.default, rest))`
@@ -160,11 +148,9 @@ const StyledIcon = (0, _styledComponents.default)(({
     ${stylingForSize}
     ${stylingForIcon}
     ${stylingForShape}
-    ${({
-  theme
-}) => (0, _styledComponents.css)`
-        border: 1px dashed ${theme.portrait.border};
-      `}
+    border: 1px dashed ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)"};
   }
 `;
 exports.StyledIcon = StyledIcon;
@@ -172,14 +158,12 @@ StyledIcon.propTypes = {
   darkBackground: _propTypes.default.bool,
   size: _propTypes.default.oneOf(_portrait.PORTRAIT_SIZES),
   shape: _propTypes.default.oneOf(_portrait.PORTRAIT_SHAPES),
-  theme: _propTypes.default.object,
   type: _propTypes.default.string.isRequired
 };
 StyledIcon.defaultProps = {
   darkBackground: false,
   size: "M",
-  shape: "square",
-  theme: _base.default
+  shape: "square"
 };
 const StyledPortraitContainer = _styledComponents.default.div`
   display: inline-block;

package/lib/components/profile/profile.config.d.ts

@@ -1,7 +1,6 @@
 export const PROFILE_SIZES: string[];
 declare namespace _default {
     namespace XS {
-        const dimensions: number;
         const nameSize: string;
         const emailSize: string;
         const lineHeight: string;
@@ -9,11 +8,10 @@ declare namespace _default {
         const marginTop: string;
     }
     namespace S {
-        const dimensions_1: number;
-        export { dimensions_1 as dimensions };
         const nameSize_1: string;
         export { nameSize_1 as nameSize };
-        export const emailsize: string;
+        const emailSize_1: string;
+        export { emailSize_1 as emailSize };
         const lineHeight_1: string;
         export { lineHeight_1 as lineHeight };
         const marginLeft_1: string;
@@ -22,12 +20,10 @@ declare namespace _default {
         export { marginTop_1 as marginTop };
     }
     namespace M {
-        const dimensions_2: number;
-        export { dimensions_2 as dimensions };
         const nameSize_2: string;
         export { nameSize_2 as nameSize };
-        const emailSize_1: string;
-        export { emailSize_1 as emailSize };
+        const emailSize_2: string;
+        export { emailSize_2 as emailSize };
         const lineHeight_2: string;
         export { lineHeight_2 as lineHeight };
         const marginLeft_2: string;
@@ -36,12 +32,10 @@ declare namespace _default {
         export { marginTop_2 as marginTop };
     }
     namespace ML {
-        const dimensions_3: number;
-        export { dimensions_3 as dimensions };
         const nameSize_3: string;
         export { nameSize_3 as nameSize };
-        const emailSize_2: string;
-        export { emailSize_2 as emailSize };
+        const emailSize_3: string;
+        export { emailSize_3 as emailSize };
         const lineHeight_3: string;
         export { lineHeight_3 as lineHeight };
         const marginLeft_3: string;
@@ -50,12 +44,10 @@ declare namespace _default {
         export { marginTop_3 as marginTop };
     }
     namespace L {
-        const dimensions_4: number;
-        export { dimensions_4 as dimensions };
         const nameSize_4: string;
         export { nameSize_4 as nameSize };
-        const emailSize_3: string;
-        export { emailSize_3 as emailSize };
+        const emailSize_4: string;
+        export { emailSize_4 as emailSize };
         const lineHeight_4: string;
         export { lineHeight_4 as lineHeight };
         const marginLeft_4: string;
@@ -64,12 +56,10 @@ declare namespace _default {
         export { marginTop_4 as marginTop };
     }
     namespace XL {
-        const dimensions_5: number;
-        export { dimensions_5 as dimensions };
         const nameSize_5: string;
         export { nameSize_5 as nameSize };
-        const emailSize_4: string;
-        export { emailSize_4 as emailSize };
+        const emailSize_5: string;
+        export { emailSize_5 as emailSize };
         const lineHeight_5: string;
         export { lineHeight_5 as lineHeight };
         const marginLeft_5: string;
@@ -78,12 +68,10 @@ declare namespace _default {
         export { marginTop_5 as marginTop };
     }
     namespace XXL {
-        const dimensions_6: number;
-        export { dimensions_6 as dimensions };
         const nameSize_6: string;
         export { nameSize_6 as nameSize };
-        const emailSize_5: string;
-        export { emailSize_5 as emailSize };
+        const emailSize_6: string;
+        export { emailSize_6 as emailSize };
         const lineHeight_6: string;
         export { lineHeight_6 as lineHeight };
         const marginLeft_6: string;

package/lib/components/profile/profile.config.js

@@ -8,57 +8,50 @@ const PROFILE_SIZES = ["XS", "S", "M", "ML", "L", "XL", "XXL"];
 exports.PROFILE_SIZES = PROFILE_SIZES;
 var _default = {
   XS: {
-    dimensions: 24,
-    nameSize: "13px",
-    emailSize: "12px",
+    nameSize: "var(--fontSizes050)",
+    emailSize: "var(--fontSizes025)",
     lineHeight: "12px",
     marginLeft: "16px",
     marginTop: "1px"
   },
   S: {
-    dimensions: 32,
-    nameSize: "14px",
-    emailsize: "12px",
+    nameSize: "var(--fontSizes100)",
+    emailSize: "var(--fontSizes100)",
     lineHeight: "16px",
     marginLeft: "16px",
     marginTop: "1px"
   },
   M: {
-    dimensions: 40,
-    nameSize: "14px",
-    emailSize: "14px",
+    nameSize: "var(--fontSizes100)",
+    emailSize: "var(--fontSizes100)",
     lineHeight: "16px",
     marginLeft: "16px",
     marginTop: "4px"
   },
   ML: {
-    dimensions: 56,
-    nameSize: "14px",
-    emailSize: "14px",
+    nameSize: "var(--fontSizes200)",
+    emailSize: "var(--fontSizes100)",
     lineHeight: "20px",
     marginLeft: "24px",
     marginTop: "8px"
   },
   L: {
-    dimensions: 72,
-    nameSize: "20px",
-    emailSize: "14px",
+    nameSize: "var(--fontSizes400)",
+    emailSize: "var(--fontSizes100)",
     lineHeight: "22px",
     marginLeft: "24px",
     marginTop: "14px"
   },
   XL: {
-    dimensions: 104,
-    nameSize: "24px",
-    emailSize: "20px",
+    nameSize: "var(--fontSizes600)",
+    emailSize: "var(--fontSizes300)",
     lineHeight: "26px",
     marginLeft: "32px",
     marginTop: "24px"
   },
   XXL: {
-    dimensions: 128,
-    nameSize: "32px",
-    emailSize: "24px",
+    nameSize: "var(--fontSizes700)",
+    emailSize: "var(--fontSizes600)",
     lineHeight: "30px",
     marginLeft: "40px",
     marginTop: "32px"

package/lib/components/profile/profile.style.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProfileEmailStyle = exports.ProfileAvatarStyle = exports.ProfileDetailsStyle = exports.ProfileNameStyle = exports.ProfileStyle = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
@@ -17,10 +17,6 @@ var _profile = _interopRequireDefault(require("./profile.config"));
 
 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 ProfileNameStyle = _styledComponents.default.span`
   font-weight: bold;
   display: block;
@@ -37,12 +33,7 @@ const ProfileEmailStyle = _styledComponents.default.span`
 exports.ProfileEmailStyle = ProfileEmailStyle;
 const ProfileStyle = _styledComponents.default.div`
   white-space: nowrap;
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-      color: ${theme.text.color};
-    `};
-
+  color: var(--colorsUtilityYin090);
   display: ${({
   hasSrc
 }) => hasSrc ? "flex" : ""};
@@ -73,14 +64,11 @@ ProfileStyle.defaultProps = {
   theme: _base.default
 };
 ProfileNameStyle.defaultProps = {
-  size: "M",
-  theme: _base.default
+  size: "M"
 };
 ProfileEmailStyle.defaultProps = {
-  size: "M",
-  theme: _base.default
+  size: "M"
 };
 ProfileDetailsStyle.defaultProps = {
-  size: "M",
-  theme: _base.default
+  size: "M"
 };

package/package.json

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