carbon-react 118.3.0 → 118.3.2

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/link/link.style.js +1 -1
  2. package/esm/components/menu/__internal__/submenu/submenu.style.js +1 -1
  3. package/esm/hooks/__internal__/useFloating/useFloating.js +6 -2
  4. package/esm/style/design-tokens/debug-theme.util.d.ts +17 -0
  5. package/esm/style/themes/sage/index.d.ts +17 -0
  6. package/lib/components/link/link.style.js +1 -1
  7. package/lib/components/menu/__internal__/submenu/submenu.style.js +1 -1
  8. package/lib/hooks/__internal__/useFloating/useFloating.js +6 -2
  9. package/lib/style/design-tokens/debug-theme.util.d.ts +17 -0
  10. package/lib/style/themes/sage/index.d.ts +17 -0
  11. package/package.json +3 -3
package/esm/components/link/link.style.js CHANGED
@@ -128,7 +128,7 @@ const StyledLink = styled.span`
128
128
  text-decoration: underline;
129
129
  ${isMenuItem && "display: inline-block;"}
130
130
 
131
- ${StyledIcon} {
131
+ > ${StyledIcon} {
132
132
  display: inline-block;
133
133
  position: relative;
134
134
  vertical-align: middle;
package/esm/components/menu/__internal__/submenu/submenu.style.js CHANGED
@@ -112,7 +112,7 @@ const StyledSubmenu = styled.ul`
112
112
  text-decoration: none;
113
113
  }
114
114
 
115
- ${StyledIcon} {
115
+ > ${StyledIcon} {
116
116
  width: 16px;
117
117
  height: 16px;
118
118
  margin-right: 5px;
package/esm/hooks/__internal__/useFloating/useFloating.js CHANGED
@@ -20,12 +20,16 @@ const useFloating = ({
20
20
  const {
21
21
  left,
22
22
  top,
23
- position
23
+ position,
24
+ width,
25
+ height
24
26
  } = floatingElement.style;
25
27
  originalValues.current = {
26
28
  left,
27
29
  top,
28
- position
30
+ position,
31
+ width,
32
+ height
29
33
  };
30
34
  Object.assign(floatingElement.style, {
31
35
  position: strategy,
package/esm/style/design-tokens/debug-theme.util.d.ts CHANGED
@@ -22,6 +22,7 @@ declare const _default: {
22
22
  colorsUtilityYin065: string;
23
23
  colorsUtilityYin090: string;
24
24
  colorsUtilityYang100: string;
25
+ colorsUtilityYang080: string;
25
26
  colorsUtilityDisabled400: string;
26
27
  colorsUtilityDisabled500: string;
27
28
  colorsUtilityDisabled600: string;
@@ -68,6 +69,7 @@ declare const _default: {
68
69
  colorsActionReadOnly500: string;
69
70
  colorsActionReadOnly600: string;
70
71
  colorsSemanticNeutral200: string;
72
+ colorsSemanticNeutral400: string;
71
73
  colorsSemanticNeutral500: string;
72
74
  colorsSemanticNeutral600: string;
73
75
  colorsSemanticNeutralTransparent: string;
@@ -108,6 +110,7 @@ declare const _default: {
108
110
  colorsSemanticCautionYin090: string;
109
111
  colorsSemanticCautionYang100: string;
110
112
  colorsSemanticInfo150: string;
113
+ colorsSemanticInfo400: string;
111
114
  colorsSemanticInfo500: string;
112
115
  colorsSemanticInfo600: string;
113
116
  colorsSemanticInfoTransparent: string;
@@ -224,6 +227,7 @@ declare const _default: {
224
227
  sizing150: string;
225
228
  sizing175: string;
226
229
  sizing200: string;
230
+ sizing225: string;
227
231
  sizing250: string;
228
232
  sizing275: string;
229
233
  sizing300: string;
@@ -275,6 +279,7 @@ declare const _default: {
275
279
  borderWidth200: string;
276
280
  borderWidth300: string;
277
281
  borderWidth400: string;
282
+ borderWidth600: string;
278
283
  borderWidth000: string;
279
284
  fontSizes100: string;
280
285
  fontSizes200: string;
@@ -395,6 +400,9 @@ declare const _default: {
395
400
  typographyLinkTextS: string;
396
401
  typographyLinkTextM: string;
397
402
  typographyLinkTextL: string;
403
+ typographyLinkTextFocusS: string;
404
+ typographyLinkTextFocusM: string;
405
+ typographyLinkTextFocusL: string;
398
406
  typographyMenuLabelM: string;
399
407
  typographyMenuLabelL: string;
400
408
  typographyMenuSegmentTitleM: string;
@@ -467,8 +475,17 @@ declare const _default: {
467
475
  typographyTableCellTextL: string;
468
476
  typographyTableCellTextXl: string;
469
477
  typographyTileParagraphM: string;
478
+ typographyTileSubscriptionTitleM: string;
479
+ typographyTileSubscriptionParagraphM: string;
480
+ typographyTileSubscriptionParagraphBoldM: string;
481
+ typographyTileSubscriptionPriceM: string;
470
482
  typographyTooltipTextM: string;
471
483
  typographyTooltipTextL: string;
484
+ typographyNoteEditorNameM: string;
485
+ typographyNoteDateM: string;
486
+ typographyNoteParagraphM: string;
487
+ typographyNoteParagraphListM: string;
488
+ typographyNoteTitleM: string;
472
489
  opacity300: string;
473
490
  opacity600: string;
474
491
  opacity800: string;
package/esm/style/themes/sage/index.d.ts CHANGED
@@ -22,6 +22,7 @@ declare var _default: {
22
22
  colorsUtilityYin065: string;
23
23
  colorsUtilityYin090: string;
24
24
  colorsUtilityYang100: string;
25
+ colorsUtilityYang080: string;
25
26
  colorsUtilityDisabled400: string;
26
27
  colorsUtilityDisabled500: string;
27
28
  colorsUtilityDisabled600: string;
@@ -68,6 +69,7 @@ declare var _default: {
68
69
  colorsActionReadOnly500: string;
69
70
  colorsActionReadOnly600: string;
70
71
  colorsSemanticNeutral200: string;
72
+ colorsSemanticNeutral400: string;
71
73
  colorsSemanticNeutral500: string;
72
74
  colorsSemanticNeutral600: string;
73
75
  colorsSemanticNeutralTransparent: string;
@@ -108,6 +110,7 @@ declare var _default: {
108
110
  colorsSemanticCautionYin090: string;
109
111
  colorsSemanticCautionYang100: string;
110
112
  colorsSemanticInfo150: string;
113
+ colorsSemanticInfo400: string;
111
114
  colorsSemanticInfo500: string;
112
115
  colorsSemanticInfo600: string;
113
116
  colorsSemanticInfoTransparent: string;
@@ -224,6 +227,7 @@ declare var _default: {
224
227
  sizing150: string;
225
228
  sizing175: string;
226
229
  sizing200: string;
230
+ sizing225: string;
227
231
  sizing250: string;
228
232
  sizing275: string;
229
233
  sizing300: string;
@@ -275,6 +279,7 @@ declare var _default: {
275
279
  borderWidth200: string;
276
280
  borderWidth300: string;
277
281
  borderWidth400: string;
282
+ borderWidth600: string;
278
283
  borderWidth000: string;
279
284
  fontSizes100: string;
280
285
  fontSizes200: string;
@@ -395,6 +400,9 @@ declare var _default: {
395
400
  typographyLinkTextS: string;
396
401
  typographyLinkTextM: string;
397
402
  typographyLinkTextL: string;
403
+ typographyLinkTextFocusS: string;
404
+ typographyLinkTextFocusM: string;
405
+ typographyLinkTextFocusL: string;
398
406
  typographyMenuLabelM: string;
399
407
  typographyMenuLabelL: string;
400
408
  typographyMenuSegmentTitleM: string;
@@ -467,8 +475,17 @@ declare var _default: {
467
475
  typographyTableCellTextL: string;
468
476
  typographyTableCellTextXl: string;
469
477
  typographyTileParagraphM: string;
478
+ typographyTileSubscriptionTitleM: string;
479
+ typographyTileSubscriptionParagraphM: string;
480
+ typographyTileSubscriptionParagraphBoldM: string;
481
+ typographyTileSubscriptionPriceM: string;
470
482
  typographyTooltipTextM: string;
471
483
  typographyTooltipTextL: string;
484
+ typographyNoteEditorNameM: string;
485
+ typographyNoteDateM: string;
486
+ typographyNoteParagraphM: string;
487
+ typographyNoteParagraphListM: string;
488
+ typographyNoteTitleM: string;
472
489
  opacity300: string;
473
490
  opacity600: string;
474
491
  opacity800: string;
package/lib/components/link/link.style.js CHANGED
@@ -144,7 +144,7 @@ const StyledLink = _styledComponents.default.span`
144
144
  text-decoration: underline;
145
145
  ${isMenuItem && "display: inline-block;"}
146
146
 
147
- ${_icon.default} {
147
+ > ${_icon.default} {
148
148
  display: inline-block;
149
149
  position: relative;
150
150
  vertical-align: middle;
package/lib/components/menu/__internal__/submenu/submenu.style.js CHANGED
@@ -134,7 +134,7 @@ const StyledSubmenu = _styledComponents.default.ul`
134
134
  text-decoration: none;
135
135
  }
136
136
 
137
- ${_icon.default} {
137
+ > ${_icon.default} {
138
138
  width: 16px;
139
139
  height: 16px;
140
140
  margin-right: 5px;
package/lib/hooks/__internal__/useFloating/useFloating.js CHANGED
@@ -28,12 +28,16 @@ const useFloating = ({
28
28
  const {
29
29
  left,
30
30
  top,
31
- position
31
+ position,
32
+ width,
33
+ height
32
34
  } = floatingElement.style;
33
35
  originalValues.current = {
34
36
  left,
35
37
  top,
36
- position
38
+ position,
39
+ width,
40
+ height
37
41
  };
38
42
  Object.assign(floatingElement.style, {
39
43
  position: strategy,
package/lib/style/design-tokens/debug-theme.util.d.ts CHANGED
@@ -22,6 +22,7 @@ declare const _default: {
22
22
  colorsUtilityYin065: string;
23
23
  colorsUtilityYin090: string;
24
24
  colorsUtilityYang100: string;
25
+ colorsUtilityYang080: string;
25
26
  colorsUtilityDisabled400: string;
26
27
  colorsUtilityDisabled500: string;
27
28
  colorsUtilityDisabled600: string;
@@ -68,6 +69,7 @@ declare const _default: {
68
69
  colorsActionReadOnly500: string;
69
70
  colorsActionReadOnly600: string;
70
71
  colorsSemanticNeutral200: string;
72
+ colorsSemanticNeutral400: string;
71
73
  colorsSemanticNeutral500: string;
72
74
  colorsSemanticNeutral600: string;
73
75
  colorsSemanticNeutralTransparent: string;
@@ -108,6 +110,7 @@ declare const _default: {
108
110
  colorsSemanticCautionYin090: string;
109
111
  colorsSemanticCautionYang100: string;
110
112
  colorsSemanticInfo150: string;
113
+ colorsSemanticInfo400: string;
111
114
  colorsSemanticInfo500: string;
112
115
  colorsSemanticInfo600: string;
113
116
  colorsSemanticInfoTransparent: string;
@@ -224,6 +227,7 @@ declare const _default: {
224
227
  sizing150: string;
225
228
  sizing175: string;
226
229
  sizing200: string;
230
+ sizing225: string;
227
231
  sizing250: string;
228
232
  sizing275: string;
229
233
  sizing300: string;
@@ -275,6 +279,7 @@ declare const _default: {
275
279
  borderWidth200: string;
276
280
  borderWidth300: string;
277
281
  borderWidth400: string;
282
+ borderWidth600: string;
278
283
  borderWidth000: string;
279
284
  fontSizes100: string;
280
285
  fontSizes200: string;
@@ -395,6 +400,9 @@ declare const _default: {
395
400
  typographyLinkTextS: string;
396
401
  typographyLinkTextM: string;
397
402
  typographyLinkTextL: string;
403
+ typographyLinkTextFocusS: string;
404
+ typographyLinkTextFocusM: string;
405
+ typographyLinkTextFocusL: string;
398
406
  typographyMenuLabelM: string;
399
407
  typographyMenuLabelL: string;
400
408
  typographyMenuSegmentTitleM: string;
@@ -467,8 +475,17 @@ declare const _default: {
467
475
  typographyTableCellTextL: string;
468
476
  typographyTableCellTextXl: string;
469
477
  typographyTileParagraphM: string;
478
+ typographyTileSubscriptionTitleM: string;
479
+ typographyTileSubscriptionParagraphM: string;
480
+ typographyTileSubscriptionParagraphBoldM: string;
481
+ typographyTileSubscriptionPriceM: string;
470
482
  typographyTooltipTextM: string;
471
483
  typographyTooltipTextL: string;
484
+ typographyNoteEditorNameM: string;
485
+ typographyNoteDateM: string;
486
+ typographyNoteParagraphM: string;
487
+ typographyNoteParagraphListM: string;
488
+ typographyNoteTitleM: string;
472
489
  opacity300: string;
473
490
  opacity600: string;
474
491
  opacity800: string;
package/lib/style/themes/sage/index.d.ts CHANGED
@@ -22,6 +22,7 @@ declare var _default: {
22
22
  colorsUtilityYin065: string;
23
23
  colorsUtilityYin090: string;
24
24
  colorsUtilityYang100: string;
25
+ colorsUtilityYang080: string;
25
26
  colorsUtilityDisabled400: string;
26
27
  colorsUtilityDisabled500: string;
27
28
  colorsUtilityDisabled600: string;
@@ -68,6 +69,7 @@ declare var _default: {
68
69
  colorsActionReadOnly500: string;
69
70
  colorsActionReadOnly600: string;
70
71
  colorsSemanticNeutral200: string;
72
+ colorsSemanticNeutral400: string;
71
73
  colorsSemanticNeutral500: string;
72
74
  colorsSemanticNeutral600: string;
73
75
  colorsSemanticNeutralTransparent: string;
@@ -108,6 +110,7 @@ declare var _default: {
108
110
  colorsSemanticCautionYin090: string;
109
111
  colorsSemanticCautionYang100: string;
110
112
  colorsSemanticInfo150: string;
113
+ colorsSemanticInfo400: string;
111
114
  colorsSemanticInfo500: string;
112
115
  colorsSemanticInfo600: string;
113
116
  colorsSemanticInfoTransparent: string;
@@ -224,6 +227,7 @@ declare var _default: {
224
227
  sizing150: string;
225
228
  sizing175: string;
226
229
  sizing200: string;
230
+ sizing225: string;
227
231
  sizing250: string;
228
232
  sizing275: string;
229
233
  sizing300: string;
@@ -275,6 +279,7 @@ declare var _default: {
275
279
  borderWidth200: string;
276
280
  borderWidth300: string;
277
281
  borderWidth400: string;
282
+ borderWidth600: string;
278
283
  borderWidth000: string;
279
284
  fontSizes100: string;
280
285
  fontSizes200: string;
@@ -395,6 +400,9 @@ declare var _default: {
395
400
  typographyLinkTextS: string;
396
401
  typographyLinkTextM: string;
397
402
  typographyLinkTextL: string;
403
+ typographyLinkTextFocusS: string;
404
+ typographyLinkTextFocusM: string;
405
+ typographyLinkTextFocusL: string;
398
406
  typographyMenuLabelM: string;
399
407
  typographyMenuLabelL: string;
400
408
  typographyMenuSegmentTitleM: string;
@@ -467,8 +475,17 @@ declare var _default: {
467
475
  typographyTableCellTextL: string;
468
476
  typographyTableCellTextXl: string;
469
477
  typographyTileParagraphM: string;
478
+ typographyTileSubscriptionTitleM: string;
479
+ typographyTileSubscriptionParagraphM: string;
480
+ typographyTileSubscriptionParagraphBoldM: string;
481
+ typographyTileSubscriptionPriceM: string;
470
482
  typographyTooltipTextM: string;
471
483
  typographyTooltipTextL: string;
484
+ typographyNoteEditorNameM: string;
485
+ typographyNoteDateM: string;
486
+ typographyNoteParagraphM: string;
487
+ typographyNoteParagraphListM: string;
488
+ typographyNoteTitleM: string;
472
489
  opacity300: string;
473
490
  opacity600: string;
474
491
  opacity800: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "118.3.0",
3
+ "version": "118.3.2",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
@@ -44,7 +44,7 @@
44
44
  },
45
45
  "homepage": "https://carbon.sage.com",
46
46
  "peerDependencies": {
47
- "@sage/design-tokens": "^2.65.0",
47
+ "@sage/design-tokens": "^4.17.0",
48
48
  "draft-js": "^0.11.5",
49
49
  "react": "^17.0.2",
50
50
  "react-dom": "^17.0.2",
@@ -63,7 +63,7 @@
63
63
  "@commitlint/cli": "^11.0.0",
64
64
  "@commitlint/config-conventional": "^11.0.0",
65
65
  "@dlgshi/cypress-plugin-designtokens": "^0.0.1-development",
66
- "@sage/design-tokens": "^2.65.0",
66
+ "@sage/design-tokens": "^4.17.0",
67
67
  "@semantic-release/changelog": "^6.0.1",
68
68
  "@semantic-release/exec": "^6.0.2",
69
69
  "@semantic-release/git": "^10.0.1",