@carbon/ibm-products 2.31.0 → 2.31.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +802 -517
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +48 -75
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +802 -517
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +731 -458
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Decorator/Decorator.d.ts +1 -1
- package/es/components/Decorator/Decorator.js +16 -253
- package/es/components/DecoratorBase/DecoratorBase.d.ts +7 -0
- package/es/components/DecoratorBase/DecoratorBase.js +233 -0
- package/es/components/DecoratorBase/index.d.ts +1 -0
- package/{lib/components/Decorator → es/components/DecoratorBase}/utils.d.ts +1 -1
- package/es/components/{Decorator → DecoratorBase}/utils.js +19 -19
- package/es/components/DecoratorDualButton/DecoratorDualButton.d.ts +5 -0
- package/es/components/DecoratorDualButton/DecoratorDualButton.js +135 -0
- package/es/components/DecoratorDualButton/index.d.ts +1 -0
- package/es/components/DecoratorLink/DecoratorLink.d.ts +5 -0
- package/es/components/DecoratorLink/DecoratorLink.js +125 -0
- package/es/components/DecoratorLink/index.d.ts +1 -0
- package/es/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +5 -0
- package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +125 -0
- package/es/components/DecoratorSingleButton/index.d.ts +1 -0
- package/es/components/index.d.ts +3 -0
- package/es/global/js/hooks/useFocus.js +2 -1
- package/es/global/js/package-settings.d.ts +3 -0
- package/es/global/js/package-settings.js +3 -0
- package/es/index.js +3 -0
- package/es/settings.d.ts +3 -0
- package/lib/components/Decorator/Decorator.d.ts +1 -1
- package/lib/components/Decorator/Decorator.js +15 -253
- package/lib/components/DecoratorBase/DecoratorBase.d.ts +7 -0
- package/lib/components/DecoratorBase/DecoratorBase.js +242 -0
- package/lib/components/DecoratorBase/index.d.ts +1 -0
- package/{es/components/Decorator → lib/components/DecoratorBase}/utils.d.ts +1 -1
- package/lib/components/{Decorator → DecoratorBase}/utils.js +19 -19
- package/lib/components/DecoratorDualButton/DecoratorDualButton.d.ts +5 -0
- package/lib/components/DecoratorDualButton/DecoratorDualButton.js +141 -0
- package/lib/components/DecoratorDualButton/index.d.ts +1 -0
- package/lib/components/DecoratorLink/DecoratorLink.d.ts +5 -0
- package/lib/components/DecoratorLink/DecoratorLink.js +131 -0
- package/lib/components/DecoratorLink/index.d.ts +1 -0
- package/lib/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +5 -0
- package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +131 -0
- package/lib/components/DecoratorSingleButton/index.d.ts +1 -0
- package/lib/components/index.d.ts +3 -0
- package/lib/global/js/hooks/useFocus.js +2 -1
- package/lib/global/js/package-settings.d.ts +3 -0
- package/lib/global/js/package-settings.js +3 -0
- package/lib/index.js +15 -0
- package/lib/settings.d.ts +3 -0
- package/package.json +9 -9
- package/scss/components/Card/_card.scss +2 -2
- package/scss/components/Decorator/_decorator.scss +3 -380
- package/scss/components/DecoratorBase/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorBase/_decorator-base-mixins.scss +41 -0
- package/scss/components/DecoratorBase/_decorator-base.scss +146 -0
- package/scss/components/DecoratorBase/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorBase/_index.scss +8 -0
- package/scss/components/DecoratorDualButton/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorDualButton/_decorator-dual-button.scss +112 -0
- package/scss/components/DecoratorDualButton/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorDualButton/_index.scss +8 -0
- package/scss/components/DecoratorLink/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorLink/_decorator-link.scss +53 -0
- package/scss/components/DecoratorLink/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorLink/_index.scss +8 -0
- package/scss/components/DecoratorSingleButton/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorSingleButton/_decorator-single-button.scss +117 -0
- package/scss/components/DecoratorSingleButton/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorSingleButton/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel.scss +1 -1
- package/scss/components/Tearsheet/_tearsheet.scss +1 -1
- package/scss/components/_index-with-carbon.scss +3 -0
- package/scss/components/_index.scss +3 -0
- /package/es/components/{Decorator → DecoratorBase}/DecoratorIcon.d.ts +0 -0
- /package/es/components/{Decorator → DecoratorBase}/DecoratorIcon.js +0 -0
- /package/lib/components/{Decorator → DecoratorBase}/DecoratorIcon.d.ts +0 -0
- /package/lib/components/{Decorator → DecoratorBase}/DecoratorIcon.js +0 -0
@@ -0,0 +1,112 @@
|
|
1
|
+
/* stylelint-disable carbon/theme-token-use */
|
2
|
+
/* stylelint-disable function-no-unknown */
|
3
|
+
|
4
|
+
//
|
5
|
+
// Copyright IBM Corp. 2024, 2024
|
6
|
+
//
|
7
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
8
|
+
// LICENSE file in the root directory of this source tree.
|
9
|
+
//
|
10
|
+
|
11
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
12
|
+
@use '../../global/styles/mixins';
|
13
|
+
|
14
|
+
@use '../DecoratorBase/decorator-base-mixins' as *;
|
15
|
+
@use '../DecoratorBase/decorator-base';
|
16
|
+
|
17
|
+
// DecoratorDualButton uses the following Carbon for IBM Products components:
|
18
|
+
@use '@carbon/layout/scss/convert' as *;
|
19
|
+
@use '@carbon/styles/scss/colors' as *;
|
20
|
+
@use '@carbon/styles/scss/theme' as *;
|
21
|
+
@use '@carbon/styles/scss/type';
|
22
|
+
|
23
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
24
|
+
$block-class: #{c4p-settings.$pkg-prefix}--decorator;
|
25
|
+
$buttons: '#{$block-class}--dual-button:not(.#{$block-class}-disabled)';
|
26
|
+
$buttons-disabled: '#{$block-class}--dual-button.#{$block-class}-disabled';
|
27
|
+
$icon: #{$block-class}-icon;
|
28
|
+
$label: #{$block-class}__label;
|
29
|
+
$value: #{$block-class}__value;
|
30
|
+
|
31
|
+
.#{$buttons} .#{$label} {
|
32
|
+
background-color: $layer-02;
|
33
|
+
cursor: pointer;
|
34
|
+
}
|
35
|
+
.#{$buttons}:not(:hover) .#{$value} {
|
36
|
+
@include value-divider();
|
37
|
+
}
|
38
|
+
.#{$buttons} .#{$value} {
|
39
|
+
background-color: $layer-02;
|
40
|
+
cursor: pointer;
|
41
|
+
}
|
42
|
+
.#{$buttons} .#{$label}:hover {
|
43
|
+
@include label-divider($color: $border-strong);
|
44
|
+
|
45
|
+
border-color: $border-strong;
|
46
|
+
background-color: $layer-hover-02;
|
47
|
+
}
|
48
|
+
.#{$buttons} .#{$value}:hover {
|
49
|
+
@include value-divider($color: $border-strong);
|
50
|
+
|
51
|
+
border-color: $border-strong;
|
52
|
+
background-color: $layer-hover-02;
|
53
|
+
}
|
54
|
+
.#{$buttons} .#{$label}:focus {
|
55
|
+
@include label-divider($color: $focus);
|
56
|
+
|
57
|
+
border-color: $focus;
|
58
|
+
// Disable browser's default "focus" style.
|
59
|
+
outline: none;
|
60
|
+
}
|
61
|
+
.#{$buttons} .#{$value}:focus {
|
62
|
+
@include value-divider($color: $focus);
|
63
|
+
|
64
|
+
border-color: $focus;
|
65
|
+
// Disable browser's default "focus" style.
|
66
|
+
outline: none;
|
67
|
+
}
|
68
|
+
.#{$buttons} .#{$label}:active {
|
69
|
+
background-color: $layer-hover-02;
|
70
|
+
}
|
71
|
+
.#{$buttons} .#{$value}:active {
|
72
|
+
background-color: $layer-hover-02;
|
73
|
+
}
|
74
|
+
.#{$buttons-disabled} .#{$label} {
|
75
|
+
background-color: $layer-02;
|
76
|
+
color: $icon-on-color-disabled;
|
77
|
+
}
|
78
|
+
.#{$buttons-disabled} .#{$value} {
|
79
|
+
@include value-divider();
|
80
|
+
|
81
|
+
background-color: $layer-02;
|
82
|
+
color: $icon-on-color-disabled;
|
83
|
+
}
|
84
|
+
|
85
|
+
// ICON ENHANCED ACCESSIBILITY
|
86
|
+
// Add a border to the icon on hover & active to increase contrast.
|
87
|
+
.#{$block-class}--light {
|
88
|
+
&.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-low,
|
89
|
+
&.#{$buttons} .#{$label}:active .#{$icon}__magnitude-low {
|
90
|
+
stroke: $yellow-60;
|
91
|
+
stroke-width: 1px;
|
92
|
+
}
|
93
|
+
// The "diamond-fill/medium" icon has an inner and outer path.
|
94
|
+
// Fill the outer path to simulate a 1px border.
|
95
|
+
&.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-medium path:first-child,
|
96
|
+
&.#{$buttons} .#{$label}:active .#{$icon}__magnitude-medium path:first-child {
|
97
|
+
fill: $orange-60;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
.#{$block-class}--dark {
|
101
|
+
// The "caution/high" icon has an inner and outer path.
|
102
|
+
// Fill the outer path to simulate a 1px border.
|
103
|
+
&.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-high path:first-child,
|
104
|
+
&.#{$buttons} .#{$label}:active .#{$icon}__magnitude-high path:first-child {
|
105
|
+
fill: $red-40;
|
106
|
+
}
|
107
|
+
&.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-critical,
|
108
|
+
&.#{$buttons} .#{$label}:active .#{$icon}__magnitude-critical {
|
109
|
+
stroke: $red-40;
|
110
|
+
stroke-width: to-rem(0.5px);
|
111
|
+
}
|
112
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from DecoratorLink in this file.
|
9
|
+
// DecoratorLink uses the following Carbon components:
|
@@ -0,0 +1,53 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Standard imports.
|
9
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
10
|
+
@use '../../global/styles/mixins';
|
11
|
+
|
12
|
+
@use '../DecoratorBase/decorator-base-mixins' as *;
|
13
|
+
@use '../DecoratorBase/decorator-base';
|
14
|
+
|
15
|
+
// DecoratorLink uses the following Carbon for IBM Products components:
|
16
|
+
@use '@carbon/styles/scss/colors' as *;
|
17
|
+
@use '@carbon/styles/scss/theme' as *;
|
18
|
+
@use '@carbon/styles/scss/type';
|
19
|
+
|
20
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
21
|
+
$block-class: #{c4p-settings.$pkg-prefix}--decorator;
|
22
|
+
$link: #{$block-class}--link;
|
23
|
+
$label: #{$block-class}__label;
|
24
|
+
$value: #{$block-class}__value;
|
25
|
+
|
26
|
+
.#{$link} {
|
27
|
+
cursor: pointer;
|
28
|
+
text-decoration: none;
|
29
|
+
}
|
30
|
+
.#{$link} .#{$label} {
|
31
|
+
background-color: $layer-02;
|
32
|
+
}
|
33
|
+
.#{$link} .#{$value} {
|
34
|
+
@include value-divider();
|
35
|
+
|
36
|
+
background-color: $layer-02;
|
37
|
+
color: $link-primary;
|
38
|
+
}
|
39
|
+
.#{$link}:hover .#{$value} {
|
40
|
+
color: $link-primary-hover;
|
41
|
+
text-decoration: underline;
|
42
|
+
}
|
43
|
+
.#{$link}:focus {
|
44
|
+
text-decoration: none;
|
45
|
+
}
|
46
|
+
.#{$link}:focus .#{$value} {
|
47
|
+
@include value-divider($color: $focus);
|
48
|
+
|
49
|
+
border-color: $focus;
|
50
|
+
}
|
51
|
+
.#{$link}:active .#{$value} {
|
52
|
+
color: $text-primary;
|
53
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from DecoratorSingleButton in this file.
|
9
|
+
// DecoratorSingleButton uses the following Carbon components:
|
@@ -0,0 +1,117 @@
|
|
1
|
+
/* stylelint-disable function-no-unknown */
|
2
|
+
/* stylelint-disable carbon/theme-token-use */
|
3
|
+
|
4
|
+
//
|
5
|
+
// Copyright IBM Corp. 2024, 2024
|
6
|
+
//
|
7
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
8
|
+
// LICENSE file in the root directory of this source tree.
|
9
|
+
//
|
10
|
+
|
11
|
+
// Standard imports.
|
12
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
13
|
+
@use '../../global/styles/mixins';
|
14
|
+
|
15
|
+
@use '../DecoratorBase/decorator-base-mixins' as *;
|
16
|
+
@use '../DecoratorBase/decorator-base';
|
17
|
+
|
18
|
+
// DecoratorSingleButton uses the following Carbon for IBM Products components:
|
19
|
+
@use '@carbon/layout/scss/convert' as *;
|
20
|
+
@use '@carbon/styles/scss/colors' as *;
|
21
|
+
@use '@carbon/styles/scss/theme' as *;
|
22
|
+
@use '@carbon/styles/scss/type';
|
23
|
+
|
24
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
25
|
+
$block-class: #{c4p-settings.$pkg-prefix}--decorator;
|
26
|
+
$button: '#{$block-class}--single-button:not(.#{$block-class}-disabled)';
|
27
|
+
$button-disabled: '#{$block-class}--single-button.#{$block-class}-disabled';
|
28
|
+
$icon: #{$block-class}-icon;
|
29
|
+
$label: #{$block-class}__label;
|
30
|
+
$value: #{$block-class}__value;
|
31
|
+
|
32
|
+
.#{$button} {
|
33
|
+
display: flex;
|
34
|
+
padding: 0;
|
35
|
+
border: 0;
|
36
|
+
cursor: pointer;
|
37
|
+
}
|
38
|
+
.#{$button} .#{$label} {
|
39
|
+
background-color: $layer-02;
|
40
|
+
}
|
41
|
+
.#{$button} .#{$value} {
|
42
|
+
@include value-divider();
|
43
|
+
|
44
|
+
background-color: $layer-02;
|
45
|
+
}
|
46
|
+
.#{$button}:hover .#{$label} {
|
47
|
+
border-color: $border-strong;
|
48
|
+
background-color: $layer-hover-02;
|
49
|
+
}
|
50
|
+
.#{$button}:hover .#{$value} {
|
51
|
+
@include value-divider($color: $border-strong);
|
52
|
+
|
53
|
+
border-color: $border-strong;
|
54
|
+
background-color: $layer-hover-02;
|
55
|
+
}
|
56
|
+
.#{$button}:focus {
|
57
|
+
// Disable browser's default "focus" style.
|
58
|
+
outline: none;
|
59
|
+
}
|
60
|
+
.#{$button}:focus .#{$label} {
|
61
|
+
border-color: $focus;
|
62
|
+
background-color: $layer-02;
|
63
|
+
}
|
64
|
+
.#{$button}:focus .#{$value} {
|
65
|
+
@include value-divider();
|
66
|
+
|
67
|
+
border-color: $focus;
|
68
|
+
background-color: $layer-02;
|
69
|
+
}
|
70
|
+
.#{$button}:active .#{$label} {
|
71
|
+
background-color: $layer-selected-02;
|
72
|
+
}
|
73
|
+
.#{$button}:active .#{$value} {
|
74
|
+
@include value-divider();
|
75
|
+
|
76
|
+
background-color: $layer-selected-02;
|
77
|
+
}
|
78
|
+
.#{$button-disabled} {
|
79
|
+
padding: 0;
|
80
|
+
border: 0;
|
81
|
+
cursor: not-allowed;
|
82
|
+
}
|
83
|
+
.#{$button-disabled} .#{$label} {
|
84
|
+
background-color: $layer-02;
|
85
|
+
color: $icon-on-color-disabled;
|
86
|
+
}
|
87
|
+
.#{$button-disabled} .#{$value} {
|
88
|
+
@include value-divider();
|
89
|
+
|
90
|
+
background-color: $layer-02;
|
91
|
+
color: $icon-on-color-disabled;
|
92
|
+
}
|
93
|
+
|
94
|
+
// ICON ENHANCED ACCESSIBILITY
|
95
|
+
// Add a border to the icon on hover & active to increase contrast.
|
96
|
+
.#{$block-class}--light {
|
97
|
+
&.#{$button}:hover .#{$icon}__magnitude-low,
|
98
|
+
&.#{$button}:active .#{$icon}__magnitude-low {
|
99
|
+
stroke: $yellow-60;
|
100
|
+
stroke-width: 1px;
|
101
|
+
}
|
102
|
+
&.#{$button}:hover .#{$icon}__magnitude-medium path:first-child,
|
103
|
+
&.#{$button}:active .#{$icon}__magnitude-medium path:first-child {
|
104
|
+
fill: $orange-60;
|
105
|
+
}
|
106
|
+
}
|
107
|
+
.#{$block-class}--dark {
|
108
|
+
&.#{$button}:hover .#{$icon}__magnitude-high path:first-child,
|
109
|
+
&.#{$button}:active .#{$icon}__magnitude-high path:first-child {
|
110
|
+
fill: $red-40;
|
111
|
+
}
|
112
|
+
&.#{$button}:hover .#{$icon}__magnitude-critical,
|
113
|
+
&.#{$button}:active .#{$icon}__magnitude-critical {
|
114
|
+
stroke: $red-40;
|
115
|
+
stroke-width: to-rem(0.5px);
|
116
|
+
}
|
117
|
+
}
|
@@ -305,7 +305,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
305
305
|
}
|
306
306
|
|
307
307
|
&.#{$block-class}--has-slug .#{$block-class}--scrolls {
|
308
|
-
@include utilities.
|
308
|
+
@include utilities.ai-popover-gradient('default', 0, 'layer');
|
309
309
|
|
310
310
|
box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
|
311
311
|
0 4px 10px 2px $ai-drop-shadow;
|
@@ -351,7 +351,7 @@ $motion-duration: $duration-moderate-02;
|
|
351
351
|
}
|
352
352
|
|
353
353
|
&.#{$block-class}--has-slug .#{$block-class}__content {
|
354
|
-
@include utilities.
|
354
|
+
@include utilities.ai-popover-gradient('default', 0);
|
355
355
|
|
356
356
|
box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
|
357
357
|
}
|
@@ -61,6 +61,9 @@
|
|
61
61
|
@use './CoachmarkStack/index-with-carbon' as *;
|
62
62
|
@use './DelimitedList/index-with-carbon' as *;
|
63
63
|
@use './Decorator/index-with-carbon' as *;
|
64
|
+
@use './DecoratorLink/index-with-carbon' as *;
|
65
|
+
@use './DecoratorSingleButton/index-with-carbon' as *;
|
66
|
+
@use './DecoratorDualButton/index-with-carbon' as *;
|
64
67
|
@use './DescriptionList/index-with-carbon' as *;
|
65
68
|
@use './FullPageError/index-with-carbon' as *;
|
66
69
|
@use './SearchBar/index-with-carbon' as *;
|
@@ -69,6 +69,9 @@
|
|
69
69
|
@use './InterstitialScreenViewModule';
|
70
70
|
@use './DelimitedList';
|
71
71
|
@use './Decorator';
|
72
|
+
@use './DecoratorLink';
|
73
|
+
@use './DecoratorSingleButton';
|
74
|
+
@use './DecoratorDualButton';
|
72
75
|
@use './DescriptionList';
|
73
76
|
@use './FullPageError';
|
74
77
|
@use './SearchBar';
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|