carbon-react 104.40.0 → 104.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm/components/link-preview/__internal__/placeholder.component.js +6 -22
  2. package/esm/components/link-preview/link-preview.style.js +6 -16
  3. package/esm/components/preview/preview.style.js +1 -6
  4. package/lib/components/link-preview/__internal__/placeholder.component.js +6 -24
  5. package/lib/components/link-preview/link-preview.style.js +7 -18
  6. package/lib/components/preview/preview.style.js +1 -6
  7. package/package.json +1 -1
package/esm/components/link-preview/__internal__/placeholder.component.js CHANGED
@@ -1,23 +1,17 @@
1
1
  import React from "react";
2
2
  import styled from "styled-components";
3
- import { toColor } from "../../../style/utils/color";
4
- import { baseTheme } from "../../../style/themes";
5
3
  const StyledPlaceHolder = styled.div`
6
4
  overflow: hidden;
7
5
  position: relative;
8
6
  height: 152px;
9
7
  min-width: 152px;
10
- background-color: ${({
11
- theme
12
- }) => theme.editorLinkPreview.background};
8
+ background-color: var(--colorsUtilityMajor025);
13
9
  `;
14
10
  const Circle = styled.div`
15
11
  height: 22px;
16
12
  width: 22px;
17
13
  border-radius: 50%;
18
- background-color: ${({
19
- theme
20
- }) => theme.editorLinkPreview.hoverBackground};
14
+ background-color: var(--colorsUtilityMajor100);
21
15
  position: absolute;
22
16
  left: 22px;
23
17
  top: 30px;
@@ -27,9 +21,8 @@ const Square = styled.div`
27
21
  width: 200px;
28
22
  transform: rotate(45deg);
29
23
  background-color: ${({
30
- color,
31
- theme
32
- }) => toColor(theme, color)};
24
+ color
25
+ }) => color};
33
26
  position: absolute;
34
27
  border-radius: 2%;
35
28
  top: ${({
@@ -39,24 +32,15 @@ const Square = styled.div`
39
32
  left
40
33
  }) => left};
41
34
  `;
42
- StyledPlaceHolder.defaultProps = {
43
- theme: baseTheme
44
- };
45
- Circle.defaultProps = {
46
- theme: baseTheme
47
- };
48
- Square.defaultProps = {
49
- theme: baseTheme
50
- };
51
35
 
52
36
  const Placeholder = () => /*#__PURE__*/React.createElement(StyledPlaceHolder, {
53
37
  "data-component": "link preview image placeholder"
54
38
  }, /*#__PURE__*/React.createElement(Circle, null), /*#__PURE__*/React.createElement(Square, {
55
- color: "slateTint90",
39
+ color: "var(--colorsUtilityMajor050)",
56
40
  top: "120px",
57
41
  left: "-64px"
58
42
  }), /*#__PURE__*/React.createElement(Square, {
59
- color: "slateTint75",
43
+ color: "var(--colorsUtilityMajor150)",
60
44
  top: "96px",
61
45
  left: "16px"
62
46
  }));
package/esm/components/link-preview/link-preview.style.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import styled, { css } from "styled-components";
2
- import { baseTheme } from "../../style/themes";
3
2
  import PreviewBars, { StyledPreview } from "../preview/preview.style";
4
3
  const StyledLinkPreview = styled.a`
5
4
  display: flex;
@@ -8,22 +7,21 @@ const StyledLinkPreview = styled.a`
8
7
  outline: none;
9
8
 
10
9
  ${({
11
- theme,
12
10
  as
13
11
  }) => css`
14
- border: 1px solid ${theme.editorLinkPreview.border};
15
- background-color: ${theme.editorLinkPreview.background};
16
- color: ${theme.text.color};
12
+ border: 1px solid var(--colorsUtilityMajor050);
13
+ background-color: var(--colorsUtilityMajor025);
14
+ color: var(--colorsUtilityYin090);
17
15
 
18
16
  ${as !== "div" && css`
19
17
  :focus {
20
- outline: 2px solid ${theme.colors.focus};
18
+ outline: 2px solid var(--colorsSemanticFocus500);
21
19
  outline-offset: -1px;
22
20
  }
23
21
 
24
22
  :hover {
25
23
  cursor: pointer;
26
- background-color: ${theme.editorLinkPreview.hoverBackground};
24
+ background-color: var(--colorsUtilityMajor100);
27
25
  }
28
26
  `}
29
27
  `}
@@ -81,14 +79,6 @@ const StyledUrl = styled.div`
81
79
  font-weight: 400;
82
80
  font-size: 14px;
83
81
  line-height: 21px;
84
- color: ${({
85
- theme
86
- }) => theme.editorLinkPreview.url};
82
+ color: var(--colorsUtilityMajor400);
87
83
  `;
88
- StyledLinkPreview.defaultProps = {
89
- theme: baseTheme
90
- };
91
- StyledUrl.defaultProps = {
92
- theme: baseTheme
93
- };
94
84
  export { StyledLinkPreview, StyledCloseIconWrapper, StyledPreviewWrapper, StyledTitle, StyledDescription, StyledUrl };
package/esm/components/preview/preview.style.js CHANGED
@@ -8,9 +8,7 @@ const shimmer = keyframes`
8
8
  `;
9
9
  const PreviewStyle = styled.span`
10
10
  animation: ${shimmer} 2s ease infinite;
11
- background: ${({
12
- theme
13
- }) => theme.colors.previewBackground};
11
+ background: var(--colorsUtilityMajor150);
14
12
  display: block;
15
13
  height: 15px;
16
14
  opacity: 0.6;
@@ -26,7 +24,4 @@ export const StyledPreview = styled.div`
26
24
  StyledPreview.defaultProps = {
27
25
  theme: baseTheme
28
26
  };
29
- PreviewStyle.defaultProps = {
30
- theme: baseTheme
31
- };
32
27
  export default PreviewStyle;
package/lib/components/link-preview/__internal__/placeholder.component.js CHANGED
@@ -9,10 +9,6 @@ var _react = _interopRequireDefault(require("react"));
9
9
 
10
10
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
 
12
- var _color = require("../../../style/utils/color");
13
-
14
- var _themes = require("../../../style/themes");
15
-
16
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
13
 
18
14
  const StyledPlaceHolder = _styledComponents.default.div`
@@ -20,17 +16,13 @@ const StyledPlaceHolder = _styledComponents.default.div`
20
16
  position: relative;
21
17
  height: 152px;
22
18
  min-width: 152px;
23
- background-color: ${({
24
- theme
25
- }) => theme.editorLinkPreview.background};
19
+ background-color: var(--colorsUtilityMajor025);
26
20
  `;
27
21
  const Circle = _styledComponents.default.div`
28
22
  height: 22px;
29
23
  width: 22px;
30
24
  border-radius: 50%;
31
- background-color: ${({
32
- theme
33
- }) => theme.editorLinkPreview.hoverBackground};
25
+ background-color: var(--colorsUtilityMajor100);
34
26
  position: absolute;
35
27
  left: 22px;
36
28
  top: 30px;
@@ -40,9 +32,8 @@ const Square = _styledComponents.default.div`
40
32
  width: 200px;
41
33
  transform: rotate(45deg);
42
34
  background-color: ${({
43
- color,
44
- theme
45
- }) => (0, _color.toColor)(theme, color)};
35
+ color
36
+ }) => color};
46
37
  position: absolute;
47
38
  border-radius: 2%;
48
39
  top: ${({
@@ -52,24 +43,15 @@ const Square = _styledComponents.default.div`
52
43
  left
53
44
  }) => left};
54
45
  `;
55
- StyledPlaceHolder.defaultProps = {
56
- theme: _themes.baseTheme
57
- };
58
- Circle.defaultProps = {
59
- theme: _themes.baseTheme
60
- };
61
- Square.defaultProps = {
62
- theme: _themes.baseTheme
63
- };
64
46
 
65
47
  const Placeholder = () => /*#__PURE__*/_react.default.createElement(StyledPlaceHolder, {
66
48
  "data-component": "link preview image placeholder"
67
49
  }, /*#__PURE__*/_react.default.createElement(Circle, null), /*#__PURE__*/_react.default.createElement(Square, {
68
- color: "slateTint90",
50
+ color: "var(--colorsUtilityMajor050)",
69
51
  top: "120px",
70
52
  left: "-64px"
71
53
  }), /*#__PURE__*/_react.default.createElement(Square, {
72
- color: "slateTint75",
54
+ color: "var(--colorsUtilityMajor150)",
73
55
  top: "96px",
74
56
  left: "16px"
75
57
  }));
package/lib/components/link-preview/link-preview.style.js CHANGED
@@ -7,8 +7,6 @@ exports.StyledUrl = exports.StyledDescription = exports.StyledTitle = exports.St
7
7
 
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
10
- var _themes = require("../../style/themes");
11
-
12
10
  var _preview = _interopRequireWildcard(require("../preview/preview.style"));
13
11
 
14
12
  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`
22
20
  outline: none;
23
21
 
24
22
  ${({
25
- theme,
26
23
  as
27
24
  }) => (0, _styledComponents.css)`
28
- border: 1px solid ${theme.editorLinkPreview.border};
29
- background-color: ${theme.editorLinkPreview.background};
30
- color: ${theme.text.color};
25
+ border: 1px solid var(--colorsUtilityMajor050);
26
+ background-color: var(--colorsUtilityMajor025);
27
+ color: var(--colorsUtilityYin090);
31
28
 
32
29
  ${as !== "div" && (0, _styledComponents.css)`
33
30
  :focus {
34
- outline: 2px solid ${theme.colors.focus};
31
+ outline: 2px solid var(--colorsSemanticFocus500);
35
32
  outline-offset: -1px;
36
33
  }
37
34
 
38
35
  :hover {
39
36
  cursor: pointer;
40
- background-color: ${theme.editorLinkPreview.hoverBackground};
37
+ background-color: var(--colorsUtilityMajor100);
41
38
  }
42
39
  `}
43
40
  `}
@@ -100,14 +97,6 @@ const StyledUrl = _styledComponents.default.div`
100
97
  font-weight: 400;
101
98
  font-size: 14px;
102
99
  line-height: 21px;
103
- color: ${({
104
- theme
105
- }) => theme.editorLinkPreview.url};
100
+ color: var(--colorsUtilityMajor400);
106
101
  `;
107
- exports.StyledUrl = StyledUrl;
108
- StyledLinkPreview.defaultProps = {
109
- theme: _themes.baseTheme
110
- };
111
- StyledUrl.defaultProps = {
112
- theme: _themes.baseTheme
113
- };
102
+ exports.StyledUrl = StyledUrl;
package/lib/components/preview/preview.style.js CHANGED
@@ -24,9 +24,7 @@ const shimmer = (0, _styledComponents.keyframes)`
24
24
  `;
25
25
  const PreviewStyle = _styledComponents.default.span`
26
26
  animation: ${shimmer} 2s ease infinite;
27
- background: ${({
28
- theme
29
- }) => theme.colors.previewBackground};
27
+ background: var(--colorsUtilityMajor150);
30
28
  display: block;
31
29
  height: 15px;
32
30
  opacity: 0.6;
@@ -43,8 +41,5 @@ exports.StyledPreview = StyledPreview;
43
41
  StyledPreview.defaultProps = {
44
42
  theme: _base.default
45
43
  };
46
- PreviewStyle.defaultProps = {
47
- theme: _base.default
48
- };
49
44
  var _default = PreviewStyle;
50
45
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "104.40.0",
3
+ "version": "104.41.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {