carbon-react 104.38.2 → 104.39.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 (11) hide show
  1. package/esm/components/draggable/draggable-item.style.js +1 -3
  2. package/esm/components/popover-container/popover-container.style.d.ts +0 -1
  3. package/esm/components/popover-container/popover-container.style.js +5 -29
  4. package/esm/style/themes/base/base-theme.config.d.ts +4 -10
  5. package/esm/style/themes/sage/index.d.ts +4 -10
  6. package/lib/components/draggable/draggable-item.style.js +1 -3
  7. package/lib/components/popover-container/popover-container.style.d.ts +0 -1
  8. package/lib/components/popover-container/popover-container.style.js +5 -30
  9. package/lib/style/themes/base/base-theme.config.d.ts +4 -10
  10. package/lib/style/themes/sage/index.d.ts +4 -10
  11. package/package.json +2 -2
package/esm/components/draggable/draggable-item.style.js CHANGED
@@ -8,9 +8,7 @@ const StyledDraggableContainer = styled.div`
8
8
  const StyledDraggableItem = styled.div`
9
9
  display: flex;
10
10
  align-items: center;
11
- border-bottom: 1px solid ${({
12
- theme
13
- }) => theme.draggableItem.border};
11
+ border-bottom: 1px solid var(--colorsUtilityMajor050);
14
12
  ${padding}
15
13
  cursor: move;
16
14
 
package/esm/components/popover-container/popover-container.style.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export const PopoverContainerIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
3
2
  export const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
4
3
  export const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
5
4
  export const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
package/esm/components/popover-container/popover-container.style.js CHANGED
@@ -7,13 +7,6 @@ const PopoverContainerWrapperStyle = styled.div`
7
7
  position: relative;
8
8
  display: inline-block;
9
9
  `;
10
- const PopoverContainerIcon = styled(IconButton)`
11
- ${StyledIcon} {
12
- color: ${({
13
- theme
14
- }) => theme.popoverContainer.iconColor};
15
- }
16
- `;
17
10
  const PopoverContainerHeaderStyle = styled.div`
18
11
  display: flex;
19
12
  justify-content: space-between;
@@ -23,12 +16,8 @@ const PopoverContainerHeaderStyle = styled.div`
23
16
  const PopoverContainerContentStyle = styled.div`
24
17
  ${padding}
25
18
 
26
- background: ${({
27
- theme
28
- }) => theme.colors.white};
29
- box-shadow: ${({
30
- theme
31
- }) => theme.shadows.depth1};
19
+ background: var(--colorsUtilityYang100);
20
+ box-shadow: var(--boxShadow100);
32
21
  min-width: 300px;
33
22
  position: absolute;
34
23
  z-index: ${({
@@ -74,9 +63,7 @@ const PopoverContainerContentStyle = styled.div`
74
63
  `;
75
64
  const PopoverContainerOpenIcon = styled(IconButton)`
76
65
  ${StyledIcon} {
77
- color: ${({
78
- theme
79
- }) => theme.popoverContainer.iconColor};
66
+ color: var(--colorsActionMinor500);
80
67
  }
81
68
  `;
82
69
  const PopoverContainerCloseIcon = styled(IconButton)`
@@ -85,9 +72,7 @@ const PopoverContainerCloseIcon = styled(IconButton)`
85
72
  right: 24px;
86
73
 
87
74
  ${StyledIcon} {
88
- color: ${({
89
- theme
90
- }) => theme.popoverContainer.iconColor};
75
+ color: var(--colorsActionMinor500);
91
76
  }
92
77
  `;
93
78
  const PopoverContainerTitleStyle = styled.div`
@@ -97,13 +82,4 @@ const PopoverContainerTitleStyle = styled.div`
97
82
  PopoverContainerContentStyle.defaultProps = {
98
83
  theme: baseTheme
99
84
  };
100
- PopoverContainerIcon.defaultProps = {
101
- theme: baseTheme
102
- };
103
- PopoverContainerCloseIcon.defaultProps = {
104
- theme: baseTheme
105
- };
106
- PopoverContainerOpenIcon.defaultProps = {
107
- theme: baseTheme
108
- };
109
- export { PopoverContainerWrapperStyle, PopoverContainerIcon, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };
85
+ export { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };
package/esm/style/themes/base/base-theme.config.d.ts CHANGED
@@ -433,16 +433,6 @@ declare function _default(palette: any): {
433
433
  colorsComponentsMenuYin090: string;
434
434
  colorsComponentsMenuYang100: string;
435
435
  colorsComponentsMenuYang080: string;
436
- colorsComponentsNavigation500: string;
437
- colorsComponentsNavigation600: string;
438
- colorsComponentsNavigation700: string;
439
- colorsComponentsNavigationTransparent: string;
440
- colorsComponentsNavigationYin100: string;
441
- colorsComponentsNavigationYin030: string;
442
- colorsComponentsNavigationYin055: string;
443
- colorsComponentsNavigationYin065: string;
444
- colorsComponentsNavigationYin090: string;
445
- colorsComponentsNavigationYang100: string;
446
436
  colorsUtilityMajor100: string;
447
437
  colorsUtilityMajor150: string;
448
438
  colorsUtilityMajor200: string;
@@ -566,6 +556,7 @@ declare function _default(palette: any): {
566
556
  sizing075: string;
567
557
  sizingLogowidth: string;
568
558
  sizing010: string;
559
+ spacing1000: string;
569
560
  borderWidth100: string;
570
561
  borderWidth200: string;
571
562
  borderWidth300: string;
@@ -610,6 +601,9 @@ declare function _default(palette: any): {
610
601
  typographyButtonLabelS: string;
611
602
  typographyButtonLabelM: string;
612
603
  typographyButtonLabelL: string;
604
+ typographyCardSelectTitleM: string;
605
+ typographyCardSelectSubtitleM: string;
606
+ typographyCardSelectParagraphM: string;
613
607
  typographyDatePickerCalendarDateM: string;
614
608
  typographyDatePickerCalendarDayM: string;
615
609
  typographyDatePickerCalendarMonthM: string;
package/esm/style/themes/sage/index.d.ts CHANGED
@@ -70,16 +70,6 @@ declare var _default: {
70
70
  colorsComponentsMenuYin090: string;
71
71
  colorsComponentsMenuYang100: string;
72
72
  colorsComponentsMenuYang080: string;
73
- colorsComponentsNavigation500: string;
74
- colorsComponentsNavigation600: string;
75
- colorsComponentsNavigation700: string;
76
- colorsComponentsNavigationTransparent: string;
77
- colorsComponentsNavigationYin100: string;
78
- colorsComponentsNavigationYin030: string;
79
- colorsComponentsNavigationYin055: string;
80
- colorsComponentsNavigationYin065: string;
81
- colorsComponentsNavigationYin090: string;
82
- colorsComponentsNavigationYang100: string;
83
73
  colorsUtilityMajor100: string;
84
74
  colorsUtilityMajor150: string;
85
75
  colorsUtilityMajor200: string;
@@ -224,6 +214,7 @@ declare var _default: {
224
214
  spacing700: string;
225
215
  spacing800: string;
226
216
  spacing900: string;
217
+ spacing1000: string;
227
218
  spacing000: string;
228
219
  spacing025: string;
229
220
  spacing050: string;
@@ -273,6 +264,9 @@ declare var _default: {
273
264
  typographyButtonLabelS: string;
274
265
  typographyButtonLabelM: string;
275
266
  typographyButtonLabelL: string;
267
+ typographyCardSelectTitleM: string;
268
+ typographyCardSelectSubtitleM: string;
269
+ typographyCardSelectParagraphM: string;
276
270
  typographyDatePickerCalendarDateM: string;
277
271
  typographyDatePickerCalendarDayM: string;
278
272
  typographyDatePickerCalendarMonthM: string;
package/lib/components/draggable/draggable-item.style.js CHANGED
@@ -22,9 +22,7 @@ exports.StyledDraggableContainer = StyledDraggableContainer;
22
22
  const StyledDraggableItem = _styledComponents.default.div`
23
23
  display: flex;
24
24
  align-items: center;
25
- border-bottom: 1px solid ${({
26
- theme
27
- }) => theme.draggableItem.border};
25
+ border-bottom: 1px solid var(--colorsUtilityMajor050);
28
26
  ${_styledSystem.padding}
29
27
  cursor: move;
30
28
 
package/lib/components/popover-container/popover-container.style.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export const PopoverContainerIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
3
2
  export const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
4
3
  export const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
5
4
  export const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
package/lib/components/popover-container/popover-container.style.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.PopoverContainerOpenIcon = exports.PopoverContainerTitleStyle = exports.PopoverContainerCloseIcon = exports.PopoverContainerContentStyle = exports.PopoverContainerHeaderStyle = exports.PopoverContainerIcon = exports.PopoverContainerWrapperStyle = void 0;
6
+ exports.PopoverContainerOpenIcon = exports.PopoverContainerTitleStyle = exports.PopoverContainerCloseIcon = exports.PopoverContainerContentStyle = exports.PopoverContainerHeaderStyle = exports.PopoverContainerWrapperStyle = void 0;
7
7
 
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
 
@@ -22,14 +22,6 @@ const PopoverContainerWrapperStyle = _styledComponents.default.div`
22
22
  display: inline-block;
23
23
  `;
24
24
  exports.PopoverContainerWrapperStyle = PopoverContainerWrapperStyle;
25
- const PopoverContainerIcon = (0, _styledComponents.default)(_iconButton.default)`
26
- ${_icon.default} {
27
- color: ${({
28
- theme
29
- }) => theme.popoverContainer.iconColor};
30
- }
31
- `;
32
- exports.PopoverContainerIcon = PopoverContainerIcon;
33
25
  const PopoverContainerHeaderStyle = _styledComponents.default.div`
34
26
  display: flex;
35
27
  justify-content: space-between;
@@ -40,12 +32,8 @@ exports.PopoverContainerHeaderStyle = PopoverContainerHeaderStyle;
40
32
  const PopoverContainerContentStyle = _styledComponents.default.div`
41
33
  ${_styledSystem.padding}
42
34
 
43
- background: ${({
44
- theme
45
- }) => theme.colors.white};
46
- box-shadow: ${({
47
- theme
48
- }) => theme.shadows.depth1};
35
+ background: var(--colorsUtilityYang100);
36
+ box-shadow: var(--boxShadow100);
49
37
  min-width: 300px;
50
38
  position: absolute;
51
39
  z-index: ${({
@@ -92,9 +80,7 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
92
80
  exports.PopoverContainerContentStyle = PopoverContainerContentStyle;
93
81
  const PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
94
82
  ${_icon.default} {
95
- color: ${({
96
- theme
97
- }) => theme.popoverContainer.iconColor};
83
+ color: var(--colorsActionMinor500);
98
84
  }
99
85
  `;
100
86
  exports.PopoverContainerOpenIcon = PopoverContainerOpenIcon;
@@ -104,9 +90,7 @@ const PopoverContainerCloseIcon = (0, _styledComponents.default)(_iconButton.def
104
90
  right: 24px;
105
91
 
106
92
  ${_icon.default} {
107
- color: ${({
108
- theme
109
- }) => theme.popoverContainer.iconColor};
93
+ color: var(--colorsActionMinor500);
110
94
  }
111
95
  `;
112
96
  exports.PopoverContainerCloseIcon = PopoverContainerCloseIcon;
@@ -117,13 +101,4 @@ const PopoverContainerTitleStyle = _styledComponents.default.div`
117
101
  exports.PopoverContainerTitleStyle = PopoverContainerTitleStyle;
118
102
  PopoverContainerContentStyle.defaultProps = {
119
103
  theme: _themes.baseTheme
120
- };
121
- PopoverContainerIcon.defaultProps = {
122
- theme: _themes.baseTheme
123
- };
124
- PopoverContainerCloseIcon.defaultProps = {
125
- theme: _themes.baseTheme
126
- };
127
- PopoverContainerOpenIcon.defaultProps = {
128
- theme: _themes.baseTheme
129
104
  };
package/lib/style/themes/base/base-theme.config.d.ts CHANGED
@@ -433,16 +433,6 @@ declare function _default(palette: any): {
433
433
  colorsComponentsMenuYin090: string;
434
434
  colorsComponentsMenuYang100: string;
435
435
  colorsComponentsMenuYang080: string;
436
- colorsComponentsNavigation500: string;
437
- colorsComponentsNavigation600: string;
438
- colorsComponentsNavigation700: string;
439
- colorsComponentsNavigationTransparent: string;
440
- colorsComponentsNavigationYin100: string;
441
- colorsComponentsNavigationYin030: string;
442
- colorsComponentsNavigationYin055: string;
443
- colorsComponentsNavigationYin065: string;
444
- colorsComponentsNavigationYin090: string;
445
- colorsComponentsNavigationYang100: string;
446
436
  colorsUtilityMajor100: string;
447
437
  colorsUtilityMajor150: string;
448
438
  colorsUtilityMajor200: string;
@@ -566,6 +556,7 @@ declare function _default(palette: any): {
566
556
  sizing075: string;
567
557
  sizingLogowidth: string;
568
558
  sizing010: string;
559
+ spacing1000: string;
569
560
  borderWidth100: string;
570
561
  borderWidth200: string;
571
562
  borderWidth300: string;
@@ -610,6 +601,9 @@ declare function _default(palette: any): {
610
601
  typographyButtonLabelS: string;
611
602
  typographyButtonLabelM: string;
612
603
  typographyButtonLabelL: string;
604
+ typographyCardSelectTitleM: string;
605
+ typographyCardSelectSubtitleM: string;
606
+ typographyCardSelectParagraphM: string;
613
607
  typographyDatePickerCalendarDateM: string;
614
608
  typographyDatePickerCalendarDayM: string;
615
609
  typographyDatePickerCalendarMonthM: string;
package/lib/style/themes/sage/index.d.ts CHANGED
@@ -70,16 +70,6 @@ declare var _default: {
70
70
  colorsComponentsMenuYin090: string;
71
71
  colorsComponentsMenuYang100: string;
72
72
  colorsComponentsMenuYang080: string;
73
- colorsComponentsNavigation500: string;
74
- colorsComponentsNavigation600: string;
75
- colorsComponentsNavigation700: string;
76
- colorsComponentsNavigationTransparent: string;
77
- colorsComponentsNavigationYin100: string;
78
- colorsComponentsNavigationYin030: string;
79
- colorsComponentsNavigationYin055: string;
80
- colorsComponentsNavigationYin065: string;
81
- colorsComponentsNavigationYin090: string;
82
- colorsComponentsNavigationYang100: string;
83
73
  colorsUtilityMajor100: string;
84
74
  colorsUtilityMajor150: string;
85
75
  colorsUtilityMajor200: string;
@@ -224,6 +214,7 @@ declare var _default: {
224
214
  spacing700: string;
225
215
  spacing800: string;
226
216
  spacing900: string;
217
+ spacing1000: string;
227
218
  spacing000: string;
228
219
  spacing025: string;
229
220
  spacing050: string;
@@ -273,6 +264,9 @@ declare var _default: {
273
264
  typographyButtonLabelS: string;
274
265
  typographyButtonLabelM: string;
275
266
  typographyButtonLabelL: string;
267
+ typographyCardSelectTitleM: string;
268
+ typographyCardSelectSubtitleM: string;
269
+ typographyCardSelectParagraphM: string;
276
270
  typographyDatePickerCalendarDateM: string;
277
271
  typographyDatePickerCalendarDayM: string;
278
272
  typographyDatePickerCalendarMonthM: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "104.38.2",
3
+ "version": "104.39.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {
@@ -157,7 +157,7 @@
157
157
  "dependencies": {
158
158
  "@octokit/rest": "^18.12.0",
159
159
  "@popperjs/core": "^2.9.0",
160
- "@sage/design-tokens": "^1.92.0",
160
+ "@sage/design-tokens": "^1.93.0",
161
161
  "@styled-system/prop-types": "^5.1.5",
162
162
  "@tippyjs/react": "^4.2.5",
163
163
  "@types/styled-system": "^5.1.11",