carbon-react 125.9.2 → 125.10.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 (25) hide show
  1. package/esm/components/pages/page/page.style.js +1 -2
  2. package/esm/components/pages/pages.component.js +2 -8
  3. package/esm/components/pages/pages.config.js +0 -4
  4. package/esm/components/pages/pages.style.js +0 -1
  5. package/esm/components/pill/pill.component.d.ts +4 -2
  6. package/esm/components/pill/pill.component.js +28 -18
  7. package/esm/components/pill/pill.style.config.d.ts +3 -1
  8. package/esm/components/pill/pill.style.config.js +20 -10
  9. package/esm/components/pill/pill.style.d.ts +2 -1
  10. package/esm/components/pill/pill.style.js +4 -3
  11. package/esm/style/design-tokens/debug-theme.util.d.ts +24 -5
  12. package/esm/style/themes/sage/index.d.ts +24 -5
  13. package/lib/components/pages/page/page.style.js +1 -2
  14. package/lib/components/pages/pages.component.js +2 -8
  15. package/lib/components/pages/pages.config.js +0 -4
  16. package/lib/components/pages/pages.style.js +0 -1
  17. package/lib/components/pill/pill.component.d.ts +4 -2
  18. package/lib/components/pill/pill.component.js +28 -18
  19. package/lib/components/pill/pill.style.config.d.ts +3 -1
  20. package/lib/components/pill/pill.style.config.js +20 -10
  21. package/lib/components/pill/pill.style.d.ts +2 -1
  22. package/lib/components/pill/pill.style.js +4 -3
  23. package/lib/style/design-tokens/debug-theme.util.d.ts +24 -5
  24. package/lib/style/themes/sage/index.d.ts +24 -5
  25. package/package.json +2 -4
package/esm/components/pages/page/page.style.js CHANGED
@@ -3,14 +3,13 @@ import { padding } from "styled-system";
3
3
  import BaseTheme from "../../../style/themes/base";
4
4
  const StyledPage = styled.div`
5
5
  width: 100%;
6
- height: 100%;
6
+ position: absolute;
7
7
  `;
8
8
  const StyledPageContent = styled.div`
9
9
  ${padding}
10
10
  box-sizing: border-box;
11
11
  width: 100%;
12
12
  height: 100%;
13
- overflow-y: auto;
14
13
  `;
15
14
  StyledPage.defaultProps = {
16
15
  theme: BaseTheme
package/esm/components/pages/pages.component.js CHANGED
@@ -23,23 +23,17 @@ const Pages = ({
23
23
  return `carousel-transition-${transition}`;
24
24
  };
25
25
  const handleVisiblePage = () => {
26
- let index = pageIndex;
27
- const visiblePage = React.Children.toArray(children)[index];
26
+ const visiblePage = React.Children.toArray(children)[pageIndex];
28
27
 
29
28
  /* istanbul ignore if */
30
29
  if (! /*#__PURE__*/React.isValidElement(visiblePage)) return visiblePage;
31
- index = visiblePage.props.id || index;
32
30
  const additionalProps = {
33
31
  transitionName,
34
32
  timeout: TRANSITION_TIME,
35
33
  "data-element": "visible-page",
36
- key: `carbon-page-${visiblePage.props.id || pageIndex}`,
37
34
  className: visiblePage.props.className
38
35
  };
39
- return /*#__PURE__*/React.cloneElement(visiblePage, {
40
- ...visiblePage.props,
41
- ...additionalProps
42
- });
36
+ return /*#__PURE__*/React.cloneElement(visiblePage, additionalProps);
43
37
  };
44
38
  const numOfPages = useCallback(() => {
45
39
  return Array.isArray(children) ? children.length : 1;
package/esm/components/pages/pages.config.js CHANGED
@@ -5,7 +5,6 @@ const slideAnimation = css`
5
5
  .slide-next-enter {
6
6
  opacity: 0;
7
7
  left: 100%;
8
- position: absolute;
9
8
  }
10
9
 
11
10
  .slide-next-enter.slide-next-enter-active {
@@ -17,7 +16,6 @@ const slideAnimation = css`
17
16
  .slide-next-exit {
18
17
  opacity: 1;
19
18
  left: 0;
20
- position: relative;
21
19
  }
22
20
 
23
21
  .slide-next-exit.slide-next-exit-active {
@@ -30,7 +28,6 @@ const slideAnimation = css`
30
28
  .slide-previous-enter {
31
29
  opacity: 0;
32
30
  left: -100%;
33
- position: absolute;
34
31
  }
35
32
 
36
33
  .slide-previous-enter.slide-previous-enter-active {
@@ -42,7 +39,6 @@ const slideAnimation = css`
42
39
  .slide-previous-exit {
43
40
  opacity: 1;
44
41
  left: 0;
45
- position: relative;
46
42
  }
47
43
 
48
44
  .slide-previous-exit.slide-previous-exit-active {
package/esm/components/pages/pages.style.js CHANGED
@@ -16,7 +16,6 @@ const PagesContent = styled.div`
16
16
  `;
17
17
  const PagesWrapperStyle = styled.div`
18
18
  .carbon-carousel__content {
19
- overflow: hidden;
20
19
  position: relative;
21
20
  }
22
21
  ${slideAnimation}
package/esm/components/pill/pill.component.d.ts CHANGED
@@ -4,7 +4,9 @@ export interface PillProps extends StyledPillProps {
4
4
  /** The content to display inside of the pill. */
5
5
  children: string;
6
6
  /** Change the color of a status pill. */
7
- colorVariant?: "neutral" | "negative" | "positive" | "warning";
7
+ colorVariant?: "neutral" | "negative" | "positive" | "warning" | "information" | "neutralWhite";
8
+ /** Sets the colour styling when a status pill is rendered on a dark background. */
9
+ isDarkBackground?: boolean;
8
10
  /** Identifier used for testing purposes, applied to the root element of the component. */
9
11
  "data-element"?: string;
10
12
  /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -22,5 +24,5 @@ export interface PillProps extends StyledPillProps {
22
24
  /** @private @ignore title attribute passed down to underlying element */
23
25
  title?: string;
24
26
  }
25
- export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => React.JSX.Element;
27
+ export declare const Pill: ({ wrapText, borderColor, colorVariant, isDarkBackground, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => React.JSX.Element;
26
28
  export default Pill;
package/esm/components/pill/pill.component.js CHANGED
@@ -5,10 +5,12 @@ import StyledPill from "./pill.style";
5
5
  import Icon from "../icon";
6
6
  import tagComponent from "../../__internal__/utils/helpers/tags/tags";
7
7
  import IconButton from "../icon-button";
8
+ let neutralWhiteWarnTriggered = false;
8
9
  export const Pill = ({
9
10
  wrapText,
10
11
  borderColor,
11
12
  colorVariant = "neutral",
13
+ isDarkBackground = false,
12
14
  children,
13
15
  fill = false,
14
16
  maxWidth,
@@ -18,22 +20,30 @@ export const Pill = ({
18
20
  size = "M",
19
21
  ariaLabelOfRemoveButton = "remove pill",
20
22
  ...rest
21
- }) => /*#__PURE__*/React.createElement(StyledPill, _extends({
22
- inFill: fill,
23
- colorVariant: colorVariant,
24
- isDeletable: !!onDelete,
25
- pillRole: pillRole,
26
- size: size,
27
- borderColor: borderColor,
28
- onClick: onClick
29
- }, tagComponent("pill", rest), {
30
- maxWidth: maxWidth,
31
- wrapText: wrapText
32
- }, rest), children, onDelete && /*#__PURE__*/React.createElement(IconButton, {
33
- onClick: onDelete,
34
- "data-element": "close",
35
- "aria-label": ariaLabelOfRemoveButton
36
- }, /*#__PURE__*/React.createElement(Icon, {
37
- type: "cross"
38
- })));
23
+ }) => {
24
+ if (!neutralWhiteWarnTriggered && !isDarkBackground && colorVariant === "neutralWhite" && !fill) {
25
+ neutralWhiteWarnTriggered = true;
26
+ // eslint-disable-next-line no-console
27
+ console.warn("[WARNING] The `neutralWhite` variant should only be used on dark backgrounds with fill set to true. " + "Please set the `isDarkBackground` and `fill` props to true or use another color variant.");
28
+ }
29
+ return /*#__PURE__*/React.createElement(StyledPill, _extends({
30
+ inFill: fill,
31
+ colorVariant: colorVariant,
32
+ isDarkBackground: isDarkBackground,
33
+ isDeletable: !!onDelete,
34
+ pillRole: pillRole,
35
+ size: size,
36
+ borderColor: borderColor,
37
+ onClick: onClick
38
+ }, tagComponent("pill", rest), {
39
+ maxWidth: maxWidth,
40
+ wrapText: wrapText
41
+ }, rest), children, onDelete && /*#__PURE__*/React.createElement(IconButton, {
42
+ onClick: onDelete,
43
+ "data-element": "close",
44
+ "aria-label": ariaLabelOfRemoveButton
45
+ }, /*#__PURE__*/React.createElement(Icon, {
46
+ type: "cross"
47
+ })));
48
+ };
39
49
  export default Pill;
package/esm/components/pill/pill.style.config.d.ts CHANGED
@@ -9,10 +9,12 @@ interface StyledPillConfig {
9
9
  negative: StyledPillInnerConfigProps;
10
10
  warning: StyledPillInnerConfigProps;
11
11
  positive: StyledPillInnerConfigProps;
12
+ information: StyledPillInnerConfigProps;
13
+ neutralWhite: StyledPillInnerConfigProps;
12
14
  };
13
15
  tag: {
14
16
  primary: StyledPillInnerConfigProps;
15
17
  };
16
18
  }
17
- declare const _default: () => StyledPillConfig;
19
+ declare const _default: (isDarkBackground: boolean) => StyledPillConfig;
18
20
  export default _default;
package/esm/components/pill/pill.style.config.js CHANGED
@@ -1,15 +1,15 @@
1
- export default (() => {
1
+ export default (isDarkBackground => {
2
2
  return {
3
3
  status: {
4
4
  neutral: {
5
- varietyColor: "var(--colorsSemanticNeutral500)",
6
- buttonFocus: "var(--colorsSemanticNeutral600)",
7
- content: "var(--colorsSemanticNeutralYang100)"
5
+ varietyColor: isDarkBackground ? "var(--colorsSemanticNeutral400)" : "var(--colorsSemanticNeutral500)",
6
+ buttonFocus: isDarkBackground ? "var(--colorsSemanticNeutral500)" : "var(--colorsSemanticNeutral600)",
7
+ content: isDarkBackground ? "var(--colorsSemanticNeutralYin090)" : "var(--colorsSemanticNeutralYang100)"
8
8
  },
9
9
  negative: {
10
- varietyColor: "var(--colorsSemanticNegative500)",
11
- buttonFocus: "var(--colorsSemanticNegative600)",
12
- content: "var(--colorsSemanticNegativeYang100)"
10
+ varietyColor: isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)",
11
+ buttonFocus: isDarkBackground ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNegative600)",
12
+ content: isDarkBackground ? "var(--colorsSemanticNegativeYin090)" : "var(--colorsSemanticNegativeYang100)"
13
13
  },
14
14
  warning: {
15
15
  varietyColor: "var(--colorsSemanticCaution400)",
@@ -17,9 +17,19 @@ export default (() => {
17
17
  content: "var(--colorsSemanticCautionYin090)"
18
18
  },
19
19
  positive: {
20
- varietyColor: "var(--colorsSemanticPositive500)",
21
- buttonFocus: "var(--colorsSemanticPositive600)",
22
- content: "var(--colorsSemanticPositiveYang100)"
20
+ varietyColor: isDarkBackground ? "var(--colorsSemanticPositive400)" : "var(--colorsSemanticPositive500)",
21
+ buttonFocus: isDarkBackground ? "var(--colorsSemanticPositive500)" : "var(--colorsSemanticPositive600)",
22
+ content: isDarkBackground ? "var(--colorsSemanticPositiveYin090)" : "var(--colorsSemanticPositiveYang100)"
23
+ },
24
+ information: {
25
+ varietyColor: isDarkBackground ? "var(--colorsSemanticInfo400)" : "var(--colorsSemanticInfo500)",
26
+ buttonFocus: isDarkBackground ? "var(--colorsSemanticInfo500)" : "var(--colorsSemanticInfo600)",
27
+ content: isDarkBackground ? "var(--colorsSemanticInfoYin090)" : "var(--colorsSemanticInfoYang100)"
28
+ },
29
+ neutralWhite: {
30
+ varietyColor: "var(--colorsSemanticNeutralYang100)",
31
+ buttonFocus: "var(--colorsSemanticNeutralYin030)",
32
+ content: "var(--colorsSemanticNeutral500)"
23
33
  }
24
34
  },
25
35
  tag: {
package/esm/components/pill/pill.style.d.ts CHANGED
@@ -15,7 +15,8 @@ export interface StyledPillProps extends MarginProps {
15
15
  interface AllStyledPillProps extends StyledPillProps {
16
16
  inFill?: boolean;
17
17
  isDeletable: boolean;
18
- colorVariant: "neutral" | "negative" | "positive" | "warning";
18
+ isDarkBackground: boolean;
19
+ colorVariant: "neutral" | "negative" | "positive" | "warning" | "information" | "neutralWhite";
19
20
  pillRole: "tag" | "status";
20
21
  }
21
22
  declare const StyledPill: import("styled-components").StyledComponent<"span", any, AllStyledPillProps, never>;
package/esm/components/pill/pill.style.js CHANGED
@@ -21,6 +21,7 @@ const StyledPill = styled.span`
21
21
  wrapText,
22
22
  borderColor,
23
23
  colorVariant,
24
+ isDarkBackground,
24
25
  isDeletable,
25
26
  inFill,
26
27
  maxWidth,
@@ -41,7 +42,7 @@ const StyledPill = styled.span`
41
42
  const {
42
43
  status,
43
44
  tag
44
- } = styleConfig();
45
+ } = styleConfig(isDarkBackground);
45
46
  const {
46
47
  varietyColor,
47
48
  buttonFocus,
@@ -83,7 +84,7 @@ const StyledPill = styled.span`
83
84
  `}
84
85
 
85
86
  ${!inFill && css`
86
- color: var(--colorsUtilityYin090);
87
+ color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
87
88
  `}
88
89
 
89
90
  ${size === "S" && css`
@@ -204,7 +205,7 @@ const StyledPill = styled.span`
204
205
 
205
206
  ${!inFill && css`
206
207
  ${StyledIcon} {
207
- color: var(--colorsUtilityYin090);
208
+ color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
208
209
  }
209
210
  `}
210
211
  }
package/esm/style/design-tokens/debug-theme.util.d.ts CHANGED
@@ -52,6 +52,7 @@ declare const _default: {
52
52
  colorsActionMinor500: string;
53
53
  colorsActionMinor550: string;
54
54
  colorsActionMinor600: string;
55
+ colorsActionMinor700: string;
55
56
  colorsActionMinor850: string;
56
57
  colorsActionMinor900: string;
57
58
  colorsActionMinor025: string;
@@ -62,6 +63,7 @@ declare const _default: {
62
63
  colorsActionMinorYin065: string;
63
64
  colorsActionMinorYin090: string;
64
65
  colorsActionMinorYang100: string;
66
+ colorsActionMinorGray700: string;
65
67
  colorsActionDisabled400: string;
66
68
  colorsActionDisabled500: string;
67
69
  colorsActionDisabled600: string;
@@ -81,6 +83,7 @@ declare const _default: {
81
83
  colorsSemanticFocus250: string;
82
84
  colorsSemanticFocus500: string;
83
85
  colorsSemanticFocusTransparent: string;
86
+ colorsSemanticPositive400: string;
84
87
  colorsSemanticPositive500: string;
85
88
  colorsSemanticPositive600: string;
86
89
  colorsSemanticPositiveTransparent: string;
@@ -144,6 +147,8 @@ declare const _default: {
144
147
  colorsReadOnly500: string;
145
148
  colorsReadOnly600: string;
146
149
  colorsComponentsLeftnavWinterStandardBackground: string;
150
+ colorsComponentsLeftnavWinterStandardBackgroundChild: string;
151
+ colorsComponentsLeftnavWinterStandardDividerOnDark: string;
147
152
  colorsComponentsLeftnavWinterStandardHover: string;
148
153
  colorsComponentsLeftnavWinterStandardSelected: string;
149
154
  colorsComponentsLeftnavWinterStandardContent: string;
@@ -237,14 +242,21 @@ declare const _default: {
237
242
  sizing450: string;
238
243
  sizing500: string;
239
244
  sizing525: string;
245
+ sizing550: string;
240
246
  sizing600: string;
241
247
  sizing700: string;
242
248
  sizing800: string;
243
249
  sizing900: string;
244
250
  sizing1000: string;
251
+ sizing1100: string;
245
252
  sizing1200: string;
246
253
  sizing1300: string;
254
+ sizing1500: string;
247
255
  sizing1600: string;
256
+ sizing2000: string;
257
+ sizing2500: string;
258
+ sizing3000: string;
259
+ sizing7000: string;
248
260
  sizing010: string;
249
261
  sizing025: string;
250
262
  sizing050: string;
@@ -268,6 +280,7 @@ declare const _default: {
268
280
  spacing000: string;
269
281
  spacing010: string;
270
282
  spacing025: string;
283
+ spacing035: string;
271
284
  spacing050: string;
272
285
  spacing060: string;
273
286
  spacing075: string;
@@ -275,6 +288,7 @@ declare const _default: {
275
288
  spacingNeg025: string;
276
289
  spacingNeg050: string;
277
290
  spacingNeg075: string;
291
+ spacingNeg100: string;
278
292
  borderWidth100: string;
279
293
  borderWidth200: string;
280
294
  borderWidth300: string;
@@ -403,6 +417,11 @@ declare const _default: {
403
417
  typographyLinkTextFocusS: string;
404
418
  typographyLinkTextFocusM: string;
405
419
  typographyLinkTextFocusL: string;
420
+ typographyLoaderMessageXs: string;
421
+ typographyLoaderMessageS: string;
422
+ typographyLoaderMessageM: string;
423
+ typographyLoaderMessageL: string;
424
+ typographyLoaderMessageXl: string;
406
425
  typographyMenuLabelM: string;
407
426
  typographyMenuLabelL: string;
408
427
  typographyMenuSegmentTitleM: string;
@@ -410,6 +429,11 @@ declare const _default: {
410
429
  typographyMessageHeadingL: string;
411
430
  typographyMessageTextM: string;
412
431
  typographyMessageTextL: string;
432
+ typographyNoteEditorNameM: string;
433
+ typographyNoteDateM: string;
434
+ typographyNoteParagraphM: string;
435
+ typographyNoteParagraphListM: string;
436
+ typographyNoteTitleM: string;
413
437
  typographyPageStateTitleM: string;
414
438
  typographyPageStateSubtitleM: string;
415
439
  typographyPageStateParagraphM: string;
@@ -481,11 +505,6 @@ declare const _default: {
481
505
  typographyTileSubscriptionPriceM: string;
482
506
  typographyTooltipTextM: string;
483
507
  typographyTooltipTextL: string;
484
- typographyNoteEditorNameM: string;
485
- typographyNoteDateM: string;
486
- typographyNoteParagraphM: string;
487
- typographyNoteParagraphListM: string;
488
- typographyNoteTitleM: string;
489
508
  opacity300: string;
490
509
  opacity600: string;
491
510
  opacity800: string;
package/esm/style/themes/sage/index.d.ts CHANGED
@@ -52,6 +52,7 @@ declare const _default: {
52
52
  colorsActionMinor500: string;
53
53
  colorsActionMinor550: string;
54
54
  colorsActionMinor600: string;
55
+ colorsActionMinor700: string;
55
56
  colorsActionMinor850: string;
56
57
  colorsActionMinor900: string;
57
58
  colorsActionMinor025: string;
@@ -62,6 +63,7 @@ declare const _default: {
62
63
  colorsActionMinorYin065: string;
63
64
  colorsActionMinorYin090: string;
64
65
  colorsActionMinorYang100: string;
66
+ colorsActionMinorGray700: string;
65
67
  colorsActionDisabled400: string;
66
68
  colorsActionDisabled500: string;
67
69
  colorsActionDisabled600: string;
@@ -81,6 +83,7 @@ declare const _default: {
81
83
  colorsSemanticFocus250: string;
82
84
  colorsSemanticFocus500: string;
83
85
  colorsSemanticFocusTransparent: string;
86
+ colorsSemanticPositive400: string;
84
87
  colorsSemanticPositive500: string;
85
88
  colorsSemanticPositive600: string;
86
89
  colorsSemanticPositiveTransparent: string;
@@ -144,6 +147,8 @@ declare const _default: {
144
147
  colorsReadOnly500: string;
145
148
  colorsReadOnly600: string;
146
149
  colorsComponentsLeftnavWinterStandardBackground: string;
150
+ colorsComponentsLeftnavWinterStandardBackgroundChild: string;
151
+ colorsComponentsLeftnavWinterStandardDividerOnDark: string;
147
152
  colorsComponentsLeftnavWinterStandardHover: string;
148
153
  colorsComponentsLeftnavWinterStandardSelected: string;
149
154
  colorsComponentsLeftnavWinterStandardContent: string;
@@ -237,14 +242,21 @@ declare const _default: {
237
242
  sizing450: string;
238
243
  sizing500: string;
239
244
  sizing525: string;
245
+ sizing550: string;
240
246
  sizing600: string;
241
247
  sizing700: string;
242
248
  sizing800: string;
243
249
  sizing900: string;
244
250
  sizing1000: string;
251
+ sizing1100: string;
245
252
  sizing1200: string;
246
253
  sizing1300: string;
254
+ sizing1500: string;
247
255
  sizing1600: string;
256
+ sizing2000: string;
257
+ sizing2500: string;
258
+ sizing3000: string;
259
+ sizing7000: string;
248
260
  sizing010: string;
249
261
  sizing025: string;
250
262
  sizing050: string;
@@ -268,6 +280,7 @@ declare const _default: {
268
280
  spacing000: string;
269
281
  spacing010: string;
270
282
  spacing025: string;
283
+ spacing035: string;
271
284
  spacing050: string;
272
285
  spacing060: string;
273
286
  spacing075: string;
@@ -275,6 +288,7 @@ declare const _default: {
275
288
  spacingNeg025: string;
276
289
  spacingNeg050: string;
277
290
  spacingNeg075: string;
291
+ spacingNeg100: string;
278
292
  borderWidth100: string;
279
293
  borderWidth200: string;
280
294
  borderWidth300: string;
@@ -403,6 +417,11 @@ declare const _default: {
403
417
  typographyLinkTextFocusS: string;
404
418
  typographyLinkTextFocusM: string;
405
419
  typographyLinkTextFocusL: string;
420
+ typographyLoaderMessageXs: string;
421
+ typographyLoaderMessageS: string;
422
+ typographyLoaderMessageM: string;
423
+ typographyLoaderMessageL: string;
424
+ typographyLoaderMessageXl: string;
406
425
  typographyMenuLabelM: string;
407
426
  typographyMenuLabelL: string;
408
427
  typographyMenuSegmentTitleM: string;
@@ -410,6 +429,11 @@ declare const _default: {
410
429
  typographyMessageHeadingL: string;
411
430
  typographyMessageTextM: string;
412
431
  typographyMessageTextL: string;
432
+ typographyNoteEditorNameM: string;
433
+ typographyNoteDateM: string;
434
+ typographyNoteParagraphM: string;
435
+ typographyNoteParagraphListM: string;
436
+ typographyNoteTitleM: string;
413
437
  typographyPageStateTitleM: string;
414
438
  typographyPageStateSubtitleM: string;
415
439
  typographyPageStateParagraphM: string;
@@ -481,11 +505,6 @@ declare const _default: {
481
505
  typographyTileSubscriptionPriceM: string;
482
506
  typographyTooltipTextM: string;
483
507
  typographyTooltipTextL: string;
484
- typographyNoteEditorNameM: string;
485
- typographyNoteDateM: string;
486
- typographyNoteParagraphM: string;
487
- typographyNoteParagraphListM: string;
488
- typographyNoteTitleM: string;
489
508
  opacity300: string;
490
509
  opacity600: string;
491
510
  opacity800: string;
package/lib/components/pages/page/page.style.js CHANGED
@@ -10,14 +10,13 @@ var _base = _interopRequireDefault(require("../../../style/themes/base"));
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
11
  const StyledPage = exports.StyledPage = _styledComponents.default.div`
12
12
  width: 100%;
13
- height: 100%;
13
+ position: absolute;
14
14
  `;
15
15
  const StyledPageContent = exports.StyledPageContent = _styledComponents.default.div`
16
16
  ${_styledSystem.padding}
17
17
  box-sizing: border-box;
18
18
  width: 100%;
19
19
  height: 100%;
20
- overflow-y: auto;
21
20
  `;
22
21
  StyledPage.defaultProps = {
23
22
  theme: _base.default
package/lib/components/pages/pages.component.js CHANGED
@@ -38,23 +38,17 @@ const Pages = ({
38
38
  return `carousel-transition-${transition}`;
39
39
  };
40
40
  const handleVisiblePage = () => {
41
- let index = pageIndex;
42
- const visiblePage = _react.default.Children.toArray(children)[index];
41
+ const visiblePage = _react.default.Children.toArray(children)[pageIndex];
43
42
 
44
43
  /* istanbul ignore if */
45
44
  if (! /*#__PURE__*/_react.default.isValidElement(visiblePage)) return visiblePage;
46
- index = visiblePage.props.id || index;
47
45
  const additionalProps = {
48
46
  transitionName,
49
47
  timeout: TRANSITION_TIME,
50
48
  "data-element": "visible-page",
51
- key: `carbon-page-${visiblePage.props.id || pageIndex}`,
52
49
  className: visiblePage.props.className
53
50
  };
54
- return /*#__PURE__*/_react.default.cloneElement(visiblePage, {
55
- ...visiblePage.props,
56
- ...additionalProps
57
- });
51
+ return /*#__PURE__*/_react.default.cloneElement(visiblePage, additionalProps);
58
52
  };
59
53
  const numOfPages = (0, _react.useCallback)(() => {
60
54
  return Array.isArray(children) ? children.length : 1;
package/lib/components/pages/pages.config.js CHANGED
@@ -11,7 +11,6 @@ const slideAnimation = exports.slideAnimation = (0, _styledComponents.css)`
11
11
  .slide-next-enter {
12
12
  opacity: 0;
13
13
  left: 100%;
14
- position: absolute;
15
14
  }
16
15
 
17
16
  .slide-next-enter.slide-next-enter-active {
@@ -23,7 +22,6 @@ const slideAnimation = exports.slideAnimation = (0, _styledComponents.css)`
23
22
  .slide-next-exit {
24
23
  opacity: 1;
25
24
  left: 0;
26
- position: relative;
27
25
  }
28
26
 
29
27
  .slide-next-exit.slide-next-exit-active {
@@ -36,7 +34,6 @@ const slideAnimation = exports.slideAnimation = (0, _styledComponents.css)`
36
34
  .slide-previous-enter {
37
35
  opacity: 0;
38
36
  left: -100%;
39
- position: absolute;
40
37
  }
41
38
 
42
39
  .slide-previous-enter.slide-previous-enter-active {
@@ -48,7 +45,6 @@ const slideAnimation = exports.slideAnimation = (0, _styledComponents.css)`
48
45
  .slide-previous-exit {
49
46
  opacity: 1;
50
47
  left: 0;
51
- position: relative;
52
48
  }
53
49
 
54
50
  .slide-previous-exit.slide-previous-exit-active {
package/lib/components/pages/pages.style.js CHANGED
@@ -23,7 +23,6 @@ const PagesContent = exports.PagesContent = _styledComponents.default.div`
23
23
  `;
24
24
  const PagesWrapperStyle = exports.PagesWrapperStyle = _styledComponents.default.div`
25
25
  .carbon-carousel__content {
26
- overflow: hidden;
27
26
  position: relative;
28
27
  }
29
28
  ${_pages.slideAnimation}
package/lib/components/pill/pill.component.d.ts CHANGED
@@ -4,7 +4,9 @@ export interface PillProps extends StyledPillProps {
4
4
  /** The content to display inside of the pill. */
5
5
  children: string;
6
6
  /** Change the color of a status pill. */
7
- colorVariant?: "neutral" | "negative" | "positive" | "warning";
7
+ colorVariant?: "neutral" | "negative" | "positive" | "warning" | "information" | "neutralWhite";
8
+ /** Sets the colour styling when a status pill is rendered on a dark background. */
9
+ isDarkBackground?: boolean;
8
10
  /** Identifier used for testing purposes, applied to the root element of the component. */
9
11
  "data-element"?: string;
10
12
  /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -22,5 +24,5 @@ export interface PillProps extends StyledPillProps {
22
24
  /** @private @ignore title attribute passed down to underlying element */
23
25
  title?: string;
24
26
  }
25
- export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => React.JSX.Element;
27
+ export declare const Pill: ({ wrapText, borderColor, colorVariant, isDarkBackground, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => React.JSX.Element;
26
28
  export default Pill;
package/lib/components/pill/pill.component.js CHANGED
@@ -12,10 +12,12 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
12
12
  var _iconButton = _interopRequireDefault(require("../icon-button"));
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
  function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
15
+ let neutralWhiteWarnTriggered = false;
15
16
  const Pill = ({
16
17
  wrapText,
17
18
  borderColor,
18
19
  colorVariant = "neutral",
20
+ isDarkBackground = false,
19
21
  children,
20
22
  fill = false,
21
23
  maxWidth,
@@ -25,23 +27,31 @@ const Pill = ({
25
27
  size = "M",
26
28
  ariaLabelOfRemoveButton = "remove pill",
27
29
  ...rest
28
- }) => /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
29
- inFill: fill,
30
- colorVariant: colorVariant,
31
- isDeletable: !!onDelete,
32
- pillRole: pillRole,
33
- size: size,
34
- borderColor: borderColor,
35
- onClick: onClick
36
- }, (0, _tags.default)("pill", rest), {
37
- maxWidth: maxWidth,
38
- wrapText: wrapText
39
- }, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
40
- onClick: onDelete,
41
- "data-element": "close",
42
- "aria-label": ariaLabelOfRemoveButton
43
- }, /*#__PURE__*/_react.default.createElement(_icon.default, {
44
- type: "cross"
45
- })));
30
+ }) => {
31
+ if (!neutralWhiteWarnTriggered && !isDarkBackground && colorVariant === "neutralWhite" && !fill) {
32
+ neutralWhiteWarnTriggered = true;
33
+ // eslint-disable-next-line no-console
34
+ console.warn("[WARNING] The `neutralWhite` variant should only be used on dark backgrounds with fill set to true. " + "Please set the `isDarkBackground` and `fill` props to true or use another color variant.");
35
+ }
36
+ return /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
37
+ inFill: fill,
38
+ colorVariant: colorVariant,
39
+ isDarkBackground: isDarkBackground,
40
+ isDeletable: !!onDelete,
41
+ pillRole: pillRole,
42
+ size: size,
43
+ borderColor: borderColor,
44
+ onClick: onClick
45
+ }, (0, _tags.default)("pill", rest), {
46
+ maxWidth: maxWidth,
47
+ wrapText: wrapText
48
+ }, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
49
+ onClick: onDelete,
50
+ "data-element": "close",
51
+ "aria-label": ariaLabelOfRemoveButton
52
+ }, /*#__PURE__*/_react.default.createElement(_icon.default, {
53
+ type: "cross"
54
+ })));
55
+ };
46
56
  exports.Pill = Pill;
47
57
  var _default = exports.default = Pill;
package/lib/components/pill/pill.style.config.d.ts CHANGED
@@ -9,10 +9,12 @@ interface StyledPillConfig {
9
9
  negative: StyledPillInnerConfigProps;
10
10
  warning: StyledPillInnerConfigProps;
11
11
  positive: StyledPillInnerConfigProps;
12
+ information: StyledPillInnerConfigProps;
13
+ neutralWhite: StyledPillInnerConfigProps;
12
14
  };
13
15
  tag: {
14
16
  primary: StyledPillInnerConfigProps;
15
17
  };
16
18
  }
17
- declare const _default: () => StyledPillConfig;
19
+ declare const _default: (isDarkBackground: boolean) => StyledPillConfig;
18
20
  export default _default;
package/lib/components/pill/pill.style.config.js CHANGED
@@ -4,18 +4,18 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _default = () => {
7
+ var _default = isDarkBackground => {
8
8
  return {
9
9
  status: {
10
10
  neutral: {
11
- varietyColor: "var(--colorsSemanticNeutral500)",
12
- buttonFocus: "var(--colorsSemanticNeutral600)",
13
- content: "var(--colorsSemanticNeutralYang100)"
11
+ varietyColor: isDarkBackground ? "var(--colorsSemanticNeutral400)" : "var(--colorsSemanticNeutral500)",
12
+ buttonFocus: isDarkBackground ? "var(--colorsSemanticNeutral500)" : "var(--colorsSemanticNeutral600)",
13
+ content: isDarkBackground ? "var(--colorsSemanticNeutralYin090)" : "var(--colorsSemanticNeutralYang100)"
14
14
  },
15
15
  negative: {
16
- varietyColor: "var(--colorsSemanticNegative500)",
17
- buttonFocus: "var(--colorsSemanticNegative600)",
18
- content: "var(--colorsSemanticNegativeYang100)"
16
+ varietyColor: isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)",
17
+ buttonFocus: isDarkBackground ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNegative600)",
18
+ content: isDarkBackground ? "var(--colorsSemanticNegativeYin090)" : "var(--colorsSemanticNegativeYang100)"
19
19
  },
20
20
  warning: {
21
21
  varietyColor: "var(--colorsSemanticCaution400)",
@@ -23,9 +23,19 @@ var _default = () => {
23
23
  content: "var(--colorsSemanticCautionYin090)"
24
24
  },
25
25
  positive: {
26
- varietyColor: "var(--colorsSemanticPositive500)",
27
- buttonFocus: "var(--colorsSemanticPositive600)",
28
- content: "var(--colorsSemanticPositiveYang100)"
26
+ varietyColor: isDarkBackground ? "var(--colorsSemanticPositive400)" : "var(--colorsSemanticPositive500)",
27
+ buttonFocus: isDarkBackground ? "var(--colorsSemanticPositive500)" : "var(--colorsSemanticPositive600)",
28
+ content: isDarkBackground ? "var(--colorsSemanticPositiveYin090)" : "var(--colorsSemanticPositiveYang100)"
29
+ },
30
+ information: {
31
+ varietyColor: isDarkBackground ? "var(--colorsSemanticInfo400)" : "var(--colorsSemanticInfo500)",
32
+ buttonFocus: isDarkBackground ? "var(--colorsSemanticInfo500)" : "var(--colorsSemanticInfo600)",
33
+ content: isDarkBackground ? "var(--colorsSemanticInfoYin090)" : "var(--colorsSemanticInfoYang100)"
34
+ },
35
+ neutralWhite: {
36
+ varietyColor: "var(--colorsSemanticNeutralYang100)",
37
+ buttonFocus: "var(--colorsSemanticNeutralYin030)",
38
+ content: "var(--colorsSemanticNeutral500)"
29
39
  }
30
40
  },
31
41
  tag: {
package/lib/components/pill/pill.style.d.ts CHANGED
@@ -15,7 +15,8 @@ export interface StyledPillProps extends MarginProps {
15
15
  interface AllStyledPillProps extends StyledPillProps {
16
16
  inFill?: boolean;
17
17
  isDeletable: boolean;
18
- colorVariant: "neutral" | "negative" | "positive" | "warning";
18
+ isDarkBackground: boolean;
19
+ colorVariant: "neutral" | "negative" | "positive" | "warning" | "information" | "neutralWhite";
19
20
  pillRole: "tag" | "status";
20
21
  }
21
22
  declare const StyledPill: import("styled-components").StyledComponent<"span", any, AllStyledPillProps, never>;
package/lib/components/pill/pill.style.js CHANGED
@@ -30,6 +30,7 @@ const StyledPill = _styledComponents.default.span`
30
30
  wrapText,
31
31
  borderColor,
32
32
  colorVariant,
33
+ isDarkBackground,
33
34
  isDeletable,
34
35
  inFill,
35
36
  maxWidth,
@@ -50,7 +51,7 @@ const StyledPill = _styledComponents.default.span`
50
51
  const {
51
52
  status,
52
53
  tag
53
- } = (0, _pillStyle.default)();
54
+ } = (0, _pillStyle.default)(isDarkBackground);
54
55
  const {
55
56
  varietyColor,
56
57
  buttonFocus,
@@ -92,7 +93,7 @@ const StyledPill = _styledComponents.default.span`
92
93
  `}
93
94
 
94
95
  ${!inFill && (0, _styledComponents.css)`
95
- color: var(--colorsUtilityYin090);
96
+ color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
96
97
  `}
97
98
 
98
99
  ${size === "S" && (0, _styledComponents.css)`
@@ -213,7 +214,7 @@ const StyledPill = _styledComponents.default.span`
213
214
 
214
215
  ${!inFill && (0, _styledComponents.css)`
215
216
  ${_icon.default} {
216
- color: var(--colorsUtilityYin090);
217
+ color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
217
218
  }
218
219
  `}
219
220
  }
package/lib/style/design-tokens/debug-theme.util.d.ts CHANGED
@@ -52,6 +52,7 @@ declare const _default: {
52
52
  colorsActionMinor500: string;
53
53
  colorsActionMinor550: string;
54
54
  colorsActionMinor600: string;
55
+ colorsActionMinor700: string;
55
56
  colorsActionMinor850: string;
56
57
  colorsActionMinor900: string;
57
58
  colorsActionMinor025: string;
@@ -62,6 +63,7 @@ declare const _default: {
62
63
  colorsActionMinorYin065: string;
63
64
  colorsActionMinorYin090: string;
64
65
  colorsActionMinorYang100: string;
66
+ colorsActionMinorGray700: string;
65
67
  colorsActionDisabled400: string;
66
68
  colorsActionDisabled500: string;
67
69
  colorsActionDisabled600: string;
@@ -81,6 +83,7 @@ declare const _default: {
81
83
  colorsSemanticFocus250: string;
82
84
  colorsSemanticFocus500: string;
83
85
  colorsSemanticFocusTransparent: string;
86
+ colorsSemanticPositive400: string;
84
87
  colorsSemanticPositive500: string;
85
88
  colorsSemanticPositive600: string;
86
89
  colorsSemanticPositiveTransparent: string;
@@ -144,6 +147,8 @@ declare const _default: {
144
147
  colorsReadOnly500: string;
145
148
  colorsReadOnly600: string;
146
149
  colorsComponentsLeftnavWinterStandardBackground: string;
150
+ colorsComponentsLeftnavWinterStandardBackgroundChild: string;
151
+ colorsComponentsLeftnavWinterStandardDividerOnDark: string;
147
152
  colorsComponentsLeftnavWinterStandardHover: string;
148
153
  colorsComponentsLeftnavWinterStandardSelected: string;
149
154
  colorsComponentsLeftnavWinterStandardContent: string;
@@ -237,14 +242,21 @@ declare const _default: {
237
242
  sizing450: string;
238
243
  sizing500: string;
239
244
  sizing525: string;
245
+ sizing550: string;
240
246
  sizing600: string;
241
247
  sizing700: string;
242
248
  sizing800: string;
243
249
  sizing900: string;
244
250
  sizing1000: string;
251
+ sizing1100: string;
245
252
  sizing1200: string;
246
253
  sizing1300: string;
254
+ sizing1500: string;
247
255
  sizing1600: string;
256
+ sizing2000: string;
257
+ sizing2500: string;
258
+ sizing3000: string;
259
+ sizing7000: string;
248
260
  sizing010: string;
249
261
  sizing025: string;
250
262
  sizing050: string;
@@ -268,6 +280,7 @@ declare const _default: {
268
280
  spacing000: string;
269
281
  spacing010: string;
270
282
  spacing025: string;
283
+ spacing035: string;
271
284
  spacing050: string;
272
285
  spacing060: string;
273
286
  spacing075: string;
@@ -275,6 +288,7 @@ declare const _default: {
275
288
  spacingNeg025: string;
276
289
  spacingNeg050: string;
277
290
  spacingNeg075: string;
291
+ spacingNeg100: string;
278
292
  borderWidth100: string;
279
293
  borderWidth200: string;
280
294
  borderWidth300: string;
@@ -403,6 +417,11 @@ declare const _default: {
403
417
  typographyLinkTextFocusS: string;
404
418
  typographyLinkTextFocusM: string;
405
419
  typographyLinkTextFocusL: string;
420
+ typographyLoaderMessageXs: string;
421
+ typographyLoaderMessageS: string;
422
+ typographyLoaderMessageM: string;
423
+ typographyLoaderMessageL: string;
424
+ typographyLoaderMessageXl: string;
406
425
  typographyMenuLabelM: string;
407
426
  typographyMenuLabelL: string;
408
427
  typographyMenuSegmentTitleM: string;
@@ -410,6 +429,11 @@ declare const _default: {
410
429
  typographyMessageHeadingL: string;
411
430
  typographyMessageTextM: string;
412
431
  typographyMessageTextL: string;
432
+ typographyNoteEditorNameM: string;
433
+ typographyNoteDateM: string;
434
+ typographyNoteParagraphM: string;
435
+ typographyNoteParagraphListM: string;
436
+ typographyNoteTitleM: string;
413
437
  typographyPageStateTitleM: string;
414
438
  typographyPageStateSubtitleM: string;
415
439
  typographyPageStateParagraphM: string;
@@ -481,11 +505,6 @@ declare const _default: {
481
505
  typographyTileSubscriptionPriceM: string;
482
506
  typographyTooltipTextM: string;
483
507
  typographyTooltipTextL: string;
484
- typographyNoteEditorNameM: string;
485
- typographyNoteDateM: string;
486
- typographyNoteParagraphM: string;
487
- typographyNoteParagraphListM: string;
488
- typographyNoteTitleM: string;
489
508
  opacity300: string;
490
509
  opacity600: string;
491
510
  opacity800: string;
package/lib/style/themes/sage/index.d.ts CHANGED
@@ -52,6 +52,7 @@ declare const _default: {
52
52
  colorsActionMinor500: string;
53
53
  colorsActionMinor550: string;
54
54
  colorsActionMinor600: string;
55
+ colorsActionMinor700: string;
55
56
  colorsActionMinor850: string;
56
57
  colorsActionMinor900: string;
57
58
  colorsActionMinor025: string;
@@ -62,6 +63,7 @@ declare const _default: {
62
63
  colorsActionMinorYin065: string;
63
64
  colorsActionMinorYin090: string;
64
65
  colorsActionMinorYang100: string;
66
+ colorsActionMinorGray700: string;
65
67
  colorsActionDisabled400: string;
66
68
  colorsActionDisabled500: string;
67
69
  colorsActionDisabled600: string;
@@ -81,6 +83,7 @@ declare const _default: {
81
83
  colorsSemanticFocus250: string;
82
84
  colorsSemanticFocus500: string;
83
85
  colorsSemanticFocusTransparent: string;
86
+ colorsSemanticPositive400: string;
84
87
  colorsSemanticPositive500: string;
85
88
  colorsSemanticPositive600: string;
86
89
  colorsSemanticPositiveTransparent: string;
@@ -144,6 +147,8 @@ declare const _default: {
144
147
  colorsReadOnly500: string;
145
148
  colorsReadOnly600: string;
146
149
  colorsComponentsLeftnavWinterStandardBackground: string;
150
+ colorsComponentsLeftnavWinterStandardBackgroundChild: string;
151
+ colorsComponentsLeftnavWinterStandardDividerOnDark: string;
147
152
  colorsComponentsLeftnavWinterStandardHover: string;
148
153
  colorsComponentsLeftnavWinterStandardSelected: string;
149
154
  colorsComponentsLeftnavWinterStandardContent: string;
@@ -237,14 +242,21 @@ declare const _default: {
237
242
  sizing450: string;
238
243
  sizing500: string;
239
244
  sizing525: string;
245
+ sizing550: string;
240
246
  sizing600: string;
241
247
  sizing700: string;
242
248
  sizing800: string;
243
249
  sizing900: string;
244
250
  sizing1000: string;
251
+ sizing1100: string;
245
252
  sizing1200: string;
246
253
  sizing1300: string;
254
+ sizing1500: string;
247
255
  sizing1600: string;
256
+ sizing2000: string;
257
+ sizing2500: string;
258
+ sizing3000: string;
259
+ sizing7000: string;
248
260
  sizing010: string;
249
261
  sizing025: string;
250
262
  sizing050: string;
@@ -268,6 +280,7 @@ declare const _default: {
268
280
  spacing000: string;
269
281
  spacing010: string;
270
282
  spacing025: string;
283
+ spacing035: string;
271
284
  spacing050: string;
272
285
  spacing060: string;
273
286
  spacing075: string;
@@ -275,6 +288,7 @@ declare const _default: {
275
288
  spacingNeg025: string;
276
289
  spacingNeg050: string;
277
290
  spacingNeg075: string;
291
+ spacingNeg100: string;
278
292
  borderWidth100: string;
279
293
  borderWidth200: string;
280
294
  borderWidth300: string;
@@ -403,6 +417,11 @@ declare const _default: {
403
417
  typographyLinkTextFocusS: string;
404
418
  typographyLinkTextFocusM: string;
405
419
  typographyLinkTextFocusL: string;
420
+ typographyLoaderMessageXs: string;
421
+ typographyLoaderMessageS: string;
422
+ typographyLoaderMessageM: string;
423
+ typographyLoaderMessageL: string;
424
+ typographyLoaderMessageXl: string;
406
425
  typographyMenuLabelM: string;
407
426
  typographyMenuLabelL: string;
408
427
  typographyMenuSegmentTitleM: string;
@@ -410,6 +429,11 @@ declare const _default: {
410
429
  typographyMessageHeadingL: string;
411
430
  typographyMessageTextM: string;
412
431
  typographyMessageTextL: string;
432
+ typographyNoteEditorNameM: string;
433
+ typographyNoteDateM: string;
434
+ typographyNoteParagraphM: string;
435
+ typographyNoteParagraphListM: string;
436
+ typographyNoteTitleM: string;
413
437
  typographyPageStateTitleM: string;
414
438
  typographyPageStateSubtitleM: string;
415
439
  typographyPageStateParagraphM: string;
@@ -481,11 +505,6 @@ declare const _default: {
481
505
  typographyTileSubscriptionPriceM: string;
482
506
  typographyTooltipTextM: string;
483
507
  typographyTooltipTextL: string;
484
- typographyNoteEditorNameM: string;
485
- typographyNoteDateM: string;
486
- typographyNoteParagraphM: string;
487
- typographyNoteParagraphListM: string;
488
- typographyNoteTitleM: string;
489
508
  opacity300: string;
490
509
  opacity600: string;
491
510
  opacity800: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "125.9.2",
3
+ "version": "125.10.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
@@ -74,7 +74,7 @@
74
74
  "@dlgshi/cypress-plugin-designtokens": "^0.0.1-development",
75
75
  "@playwright/experimental-ct-react17": "~1.36.2",
76
76
  "@playwright/test": "~1.36.2",
77
- "@sage/design-tokens": "~4.17.0",
77
+ "@sage/design-tokens": "~4.29.0",
78
78
  "@semantic-release/changelog": "^6.0.3",
79
79
  "@semantic-release/exec": "^6.0.3",
80
80
  "@semantic-release/git": "^10.0.1",
@@ -126,10 +126,8 @@
126
126
  "cypress": "~12.13.0",
127
127
  "cypress-axe": "^1.5.0",
128
128
  "cypress-each": "^1.13.3",
129
- "cypress-mochawesome-reporter": "^3.7.0",
130
129
  "cypress-plugin-tab": "^1.0.5",
131
130
  "cypress-real-events": "^1.11.0",
132
- "cypress-split": "^1.17.1",
133
131
  "cz-conventional-changelog": "^3.3.0",
134
132
  "date-fns-tz": "^1.3.8",
135
133
  "draft-js": "^0.11.7",