@carbon/styles 1.85.0 → 1.86.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.
- package/css/styles.css +12 -1
- package/css/styles.min.css +1 -1
- package/package.json +9 -9
- package/scss/_feature-flags.scss +1 -0
- package/scss/components/accordion/_accordion.scss +1 -0
- package/scss/components/button/_button.scss +8 -2
- package/scss/components/tile/_tile.scss +3 -0
- package/scss/components/toggle/_toggle.scss +8 -1
- package/scss/components/tooltip/_tooltip.scss +4 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/styles",
|
|
3
3
|
"description": "Styles for the Carbon Design System",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.86.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@carbon/colors": "^11.
|
|
44
|
-
"@carbon/feature-flags": "^0.
|
|
45
|
-
"@carbon/grid": "^11.
|
|
46
|
-
"@carbon/layout": "^11.
|
|
47
|
-
"@carbon/motion": "^11.
|
|
48
|
-
"@carbon/themes": "^11.
|
|
49
|
-
"@carbon/type": "^11.
|
|
43
|
+
"@carbon/colors": "^11.36.0",
|
|
44
|
+
"@carbon/feature-flags": "^0.28.0",
|
|
45
|
+
"@carbon/grid": "^11.39.0",
|
|
46
|
+
"@carbon/layout": "^11.37.0",
|
|
47
|
+
"@carbon/motion": "^11.31.0",
|
|
48
|
+
"@carbon/themes": "^11.56.0",
|
|
49
|
+
"@carbon/type": "^11.43.0",
|
|
50
50
|
"@ibm/plex": "6.0.0-next.6",
|
|
51
51
|
"@ibm/plex-mono": "0.0.3-alpha.0",
|
|
52
52
|
"@ibm/plex-sans": "0.0.3-alpha.0",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"scss/**/*.css",
|
|
76
76
|
"css/**/*.css"
|
|
77
77
|
],
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "cb7123ed19a2c216e5b9774e58c12af68407abd3"
|
|
79
79
|
}
|
package/scss/_feature-flags.scss
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
@mixin button {
|
|
25
25
|
.#{$prefix}--btn {
|
|
26
|
-
@include layout.use('size', $min: '
|
|
26
|
+
@include layout.use('size', $min: 'xs', $default: 'lg', $max: '2xl');
|
|
27
27
|
@include layout.use('density', $default: 'normal');
|
|
28
28
|
|
|
29
29
|
@include button-base;
|
|
@@ -182,7 +182,13 @@
|
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
|
|
185
|
-
// Adjust
|
|
185
|
+
// Adjust text positioning in extra small variant only
|
|
186
|
+
.#{$prefix}--btn--xs:not(.#{$prefix}--btn--icon-only) {
|
|
187
|
+
padding-block-start: 1.5px;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// Adjust icon positioning in extra small, small, medium variants only
|
|
191
|
+
.#{$prefix}--btn--xs:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon,
|
|
186
192
|
.#{$prefix}--btn--sm:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon,
|
|
187
193
|
.#{$prefix}--btn--md:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon {
|
|
188
194
|
margin-block-start: 0;
|
|
@@ -475,6 +475,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
|
|
|
475
475
|
.#{$prefix}--tile--decorator:has(
|
|
476
476
|
.#{$prefix}--ai-label
|
|
477
477
|
).#{$prefix}--tile--clickable::before,
|
|
478
|
+
.#{$prefix}--tile--decorator:has(
|
|
479
|
+
.#{$prefix}--tile--ai-label-icon
|
|
480
|
+
).#{$prefix}--tile--clickable::before,
|
|
478
481
|
.#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
|
|
479
482
|
.#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
|
|
480
483
|
@include ai-popover-gradient('hover', 0, 'layer');
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
//3
|
|
7
7
|
|
|
8
8
|
@use '../../config' as *;
|
|
9
|
+
@use '../../feature-flags' as *;
|
|
9
10
|
@use '../../motion' as *;
|
|
10
11
|
@use '../../spacing' as *;
|
|
11
12
|
@use '../../theme' as *;
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
/// Toggle styles
|
|
20
21
|
/// @access public
|
|
21
22
|
/// @group toggle
|
|
22
|
-
@mixin toggle {
|
|
23
|
+
@mixin toggle($enable-v12-toggle-reduced-label-spacing: false) {
|
|
23
24
|
.#{$prefix}--toggle {
|
|
24
25
|
display: inline-block;
|
|
25
26
|
user-select: none;
|
|
@@ -31,6 +32,12 @@
|
|
|
31
32
|
display: block;
|
|
32
33
|
color: $text-secondary;
|
|
33
34
|
margin-block-end: $spacing-05;
|
|
35
|
+
@if (
|
|
36
|
+
enabled('enable-v12-toggle-reduced-label-spacing') or
|
|
37
|
+
$enable-v12-toggle-reduced-label-spacing
|
|
38
|
+
) {
|
|
39
|
+
margin-block-end: $spacing-03;
|
|
40
|
+
}
|
|
34
41
|
}
|
|
35
42
|
|
|
36
43
|
.#{$prefix}--toggle__button {
|
|
@@ -38,6 +38,10 @@ $tooltip-padding-inline: custom-property.get-var(
|
|
|
38
38
|
max-inline-size: convert.to-rem(288px);
|
|
39
39
|
overflow-wrap: break-word;
|
|
40
40
|
}
|
|
41
|
+
|
|
42
|
+
.#{$prefix}--tooltip-content--multiline {
|
|
43
|
+
padding: $tooltip-padding-inline;
|
|
44
|
+
}
|
|
41
45
|
}
|
|
42
46
|
|
|
43
47
|
@mixin definition-tooltip {
|