@carbon/styles 1.4.0 → 1.5.0-rc.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/README.md +3 -3
- package/css/styles.css +55 -36
- package/css/styles.min.css +1 -1
- package/package.json +10 -10
- package/scss/_breakpoint.scss +2 -2
- package/scss/_config.scss +5 -6
- package/scss/_feature-flags.scss +2 -1
- package/scss/_spacing.scss +4 -20
- package/scss/components/notification/_actionable-notification.scss +0 -2
- package/scss/components/notification/_toast-notification.scss +1 -1
- package/scss/components/notification/_tokens.scss +1 -1
- package/scss/components/structured-list/_structured-list.scss +4 -4
- package/scss/components/treeview/_treeview.scss +118 -118
- package/scss/fonts/README.md +4 -4
- package/scss/grid/_index.scss +2 -6
- package/scss/theme/_theme.scss +2 -2
- package/scss/type/_index.scss +3 -1
- package/scss/utilities/_convert.scss +1 -1
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.5.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
"sass": "^1.33.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@carbon/colors": "^11.
|
|
36
|
-
"@carbon/feature-flags": "^0.
|
|
37
|
-
"@carbon/grid": "^11.
|
|
38
|
-
"@carbon/layout": "^11.
|
|
39
|
-
"@carbon/motion": "^11.
|
|
40
|
-
"@carbon/themes": "^11.
|
|
41
|
-
"@carbon/type": "^11.
|
|
35
|
+
"@carbon/colors": "^11.3.0-rc.0",
|
|
36
|
+
"@carbon/feature-flags": "^0.8.0-rc.0",
|
|
37
|
+
"@carbon/grid": "^11.3.0-rc.0",
|
|
38
|
+
"@carbon/layout": "^11.3.0-rc.0",
|
|
39
|
+
"@carbon/motion": "^11.2.0-rc.0",
|
|
40
|
+
"@carbon/themes": "^11.4.0-rc.0",
|
|
41
|
+
"@carbon/type": "^11.4.0-rc.0",
|
|
42
42
|
"@ibm/plex": "6.0.0-next.6"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@carbon/test-utils": "^10.
|
|
45
|
+
"@carbon/test-utils": "^10.25.0-rc.0",
|
|
46
46
|
"autoprefixer": "^10.4.7",
|
|
47
47
|
"browserslist-config-carbon": "^11.0.0",
|
|
48
48
|
"css": "^3.0.0",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"scss/**/*.scss",
|
|
58
58
|
"scss/**/*.css"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "a44075aa04612c5ddaf73953ca7ce14d1882a02c"
|
|
61
61
|
}
|
package/scss/_breakpoint.scss
CHANGED
package/scss/_config.scss
CHANGED
|
@@ -67,9 +67,8 @@ $flex-grid-columns: 16 !default;
|
|
|
67
67
|
/// @group config
|
|
68
68
|
$use-flexbox-grid: false !default;
|
|
69
69
|
|
|
70
|
-
@forward '@carbon/grid/scss/config'
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
);
|
|
70
|
+
@forward '@carbon/grid/scss/config' hide $prefix,
|
|
71
|
+
$flex-grid-columns with (
|
|
72
|
+
$prefix: $prefix,
|
|
73
|
+
$flex-grid-columns: $flex-grid-columns
|
|
74
|
+
);
|
package/scss/_feature-flags.scss
CHANGED
package/scss/_spacing.scss
CHANGED
|
@@ -5,23 +5,7 @@
|
|
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
|
6
6
|
//
|
|
7
7
|
|
|
8
|
-
@forward '@carbon/layout/scss/spacing'
|
|
9
|
-
|
|
10
|
-
$spacing,
|
|
11
|
-
$spacing-01,
|
|
12
|
-
$spacing-02,
|
|
13
|
-
$spacing-03,
|
|
14
|
-
$spacing-04,
|
|
15
|
-
$spacing-05,
|
|
16
|
-
$spacing-06,
|
|
17
|
-
$spacing-07,
|
|
18
|
-
$spacing-08,
|
|
19
|
-
$spacing-09,
|
|
20
|
-
$spacing-10,
|
|
21
|
-
$spacing-11,
|
|
22
|
-
$spacing-12,
|
|
23
|
-
$spacing-13,
|
|
24
|
-
$fluid-spacing-01,
|
|
25
|
-
$fluid-spacing-02,
|
|
26
|
-
$fluid-spacing-03,
|
|
27
|
-
$fluid-spacing-04;
|
|
8
|
+
@forward '@carbon/layout/scss/spacing' show $spacing, $spacing-01, $spacing-02,
|
|
9
|
+
$spacing-03, $spacing-04, $spacing-05, $spacing-06, $spacing-07, $spacing-08,
|
|
10
|
+
$spacing-09, $spacing-10, $spacing-11, $spacing-12, $spacing-13,
|
|
11
|
+
$fluid-spacing-01, $fluid-spacing-02, $fluid-spacing-03, $fluid-spacing-04;
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
|
|
8
8
|
@use '../../config' as *;
|
|
9
9
|
@use '../../feature-flags' as *;
|
|
10
|
-
@use
|
|
10
|
+
@use '../../type' as *;
|
|
11
11
|
@use '../../motion';
|
|
12
12
|
@use '../../theme' as *;
|
|
13
|
-
@use
|
|
14
|
-
@use
|
|
15
|
-
@use
|
|
13
|
+
@use '../../utilities/focus-outline' as *;
|
|
14
|
+
@use '../../utilities/skeleton' as *;
|
|
15
|
+
@use '../../utilities/high-contrast-mode' as *;
|
|
16
16
|
@use '../../utilities/convert' as *;
|
|
17
17
|
@use 'mixins' as *;
|
|
18
18
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
@use '../../type' as *;
|
|
13
13
|
@use '../../utilities/convert' as *;
|
|
14
14
|
@use '../../utilities/focus-outline' as *;
|
|
15
|
-
@use
|
|
15
|
+
@use '../../utilities/skeleton' as *;
|
|
16
16
|
|
|
17
17
|
/// Treeview styles
|
|
18
18
|
/// @access public
|
|
@@ -20,154 +20,154 @@
|
|
|
20
20
|
@mixin treeview {
|
|
21
21
|
.#{$prefix}--tree {
|
|
22
22
|
overflow: hidden;
|
|
23
|
+
}
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
&:focus {
|
|
30
|
-
outline: none;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
25
|
+
.#{$prefix}--tree-node {
|
|
26
|
+
padding-left: $spacing-05;
|
|
27
|
+
background-color: $layer-01;
|
|
28
|
+
color: $text-secondary;
|
|
33
29
|
|
|
34
|
-
|
|
35
|
-
@include focus-outline('outline');
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
|
|
30
|
+
&:focus {
|
|
39
31
|
outline: none;
|
|
40
32
|
}
|
|
33
|
+
}
|
|
41
34
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
.#{$prefix}--tree-node__label:hover
|
|
46
|
-
.#{$prefix}--tree-node__label__details {
|
|
47
|
-
background-color: $field-01;
|
|
48
|
-
color: $text-disabled;
|
|
49
|
-
}
|
|
35
|
+
.#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
|
|
36
|
+
@include focus-outline('outline');
|
|
37
|
+
}
|
|
50
38
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
.#{$prefix}--tree-node__label:hover
|
|
55
|
-
.#{$prefix}--tree-parent-node__toggle-icon,
|
|
56
|
-
.#{$prefix}--tree-node--disabled
|
|
57
|
-
.#{$prefix}--tree-node__label:hover
|
|
58
|
-
.#{$prefix}--tree-node__icon {
|
|
59
|
-
fill: $icon-disabled;
|
|
60
|
-
}
|
|
39
|
+
.#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
|
|
40
|
+
outline: none;
|
|
41
|
+
}
|
|
61
42
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
43
|
+
.#{$prefix}--tree-node--disabled,
|
|
44
|
+
.#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
|
|
45
|
+
.#{$prefix}--tree-node--disabled
|
|
46
|
+
.#{$prefix}--tree-node__label:hover
|
|
47
|
+
.#{$prefix}--tree-node__label__details {
|
|
48
|
+
background-color: $field-01;
|
|
49
|
+
color: $text-disabled;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
|
|
53
|
+
.#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon,
|
|
54
|
+
.#{$prefix}--tree-node--disabled
|
|
55
|
+
.#{$prefix}--tree-node__label:hover
|
|
56
|
+
.#{$prefix}--tree-parent-node__toggle-icon,
|
|
57
|
+
.#{$prefix}--tree-node--disabled
|
|
58
|
+
.#{$prefix}--tree-node__label:hover
|
|
59
|
+
.#{$prefix}--tree-node__icon {
|
|
60
|
+
fill: $icon-disabled;
|
|
61
|
+
}
|
|
67
62
|
|
|
68
|
-
|
|
69
|
-
|
|
63
|
+
.#{$prefix}--tree-node--disabled,
|
|
64
|
+
.#{$prefix}--tree-node--disabled
|
|
65
|
+
.#{$prefix}--tree-parent-node__toggle-icon:hover {
|
|
66
|
+
cursor: not-allowed;
|
|
67
|
+
}
|
|
70
68
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
flex: 1;
|
|
74
|
-
align-items: center;
|
|
69
|
+
.#{$prefix}--tree-node__label {
|
|
70
|
+
@include type-style('body-compact-01');
|
|
75
71
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
72
|
+
display: flex;
|
|
73
|
+
min-height: rem(32px);
|
|
74
|
+
flex: 1;
|
|
75
|
+
align-items: center;
|
|
81
76
|
|
|
82
|
-
|
|
77
|
+
&:hover {
|
|
78
|
+
background-color: $layer-hover-01;
|
|
83
79
|
color: $text-primary;
|
|
84
80
|
}
|
|
81
|
+
}
|
|
85
82
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
fill: $icon-primary;
|
|
90
|
-
}
|
|
83
|
+
.#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
|
|
84
|
+
color: $text-primary;
|
|
85
|
+
}
|
|
91
86
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
87
|
+
.#{$prefix}--tree-node__label:hover
|
|
88
|
+
.#{$prefix}--tree-parent-node__toggle-icon,
|
|
89
|
+
.#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
|
|
90
|
+
fill: $icon-primary;
|
|
91
|
+
}
|
|
96
92
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
93
|
+
.#{$prefix}--tree-leaf-node {
|
|
94
|
+
display: flex;
|
|
95
|
+
padding-left: $spacing-08;
|
|
96
|
+
}
|
|
100
97
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}
|
|
98
|
+
.#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon {
|
|
99
|
+
padding-left: $spacing-07;
|
|
100
|
+
}
|
|
105
101
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
102
|
+
.#{$prefix}--tree-node__label__details {
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
}
|
|
109
106
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
margin-right: $spacing-03;
|
|
107
|
+
.#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
|
|
108
|
+
margin-right: 0;
|
|
109
|
+
}
|
|
114
110
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
111
|
+
.#{$prefix}--tree-parent-node__toggle {
|
|
112
|
+
padding: 0;
|
|
113
|
+
border: 0;
|
|
114
|
+
margin-right: $spacing-03;
|
|
118
115
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
116
|
+
&:hover {
|
|
117
|
+
cursor: pointer;
|
|
122
118
|
}
|
|
123
119
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
transform: rotate(-90deg);
|
|
127
|
-
transition: all $duration-fast-02 motion(standard, productive);
|
|
120
|
+
&:focus {
|
|
121
|
+
outline: none;
|
|
128
122
|
}
|
|
123
|
+
}
|
|
129
124
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
125
|
+
.#{$prefix}--tree-parent-node__toggle-icon {
|
|
126
|
+
fill: $icon-secondary;
|
|
127
|
+
transform: rotate(-90deg);
|
|
128
|
+
transition: all $duration-fast-02 motion(standard, productive);
|
|
129
|
+
}
|
|
133
130
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
margin-right: $spacing-03;
|
|
138
|
-
fill: $icon-secondary;
|
|
139
|
-
}
|
|
131
|
+
.#{$prefix}--tree-parent-node__toggle-icon--expanded {
|
|
132
|
+
transform: rotate(0);
|
|
133
|
+
}
|
|
140
134
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
135
|
+
.#{$prefix}--tree-node__icon {
|
|
136
|
+
min-width: 1rem;
|
|
137
|
+
min-height: 1rem;
|
|
138
|
+
margin-right: $spacing-03;
|
|
139
|
+
fill: $icon-secondary;
|
|
140
|
+
}
|
|
144
141
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}
|
|
142
|
+
.#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
|
|
143
|
+
background-color: $layer-selected-01;
|
|
144
|
+
color: $text-primary;
|
|
149
145
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
.#{$prefix}--tree-parent-node__toggle-icon,
|
|
153
|
-
.#{$prefix}--tree-node--selected
|
|
154
|
-
> .#{$prefix}--tree-node__label
|
|
155
|
-
.#{$prefix}--tree-node__icon {
|
|
156
|
-
fill: $icon-primary;
|
|
146
|
+
&:hover {
|
|
147
|
+
background-color: $layer-selected-hover-01;
|
|
157
148
|
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.#{$prefix}--tree-node--selected
|
|
152
|
+
> .#{$prefix}--tree-node__label
|
|
153
|
+
.#{$prefix}--tree-parent-node__toggle-icon,
|
|
154
|
+
.#{$prefix}--tree-node--selected
|
|
155
|
+
> .#{$prefix}--tree-node__label
|
|
156
|
+
.#{$prefix}--tree-node__icon {
|
|
157
|
+
fill: $icon-primary;
|
|
158
|
+
}
|
|
158
159
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
}
|
|
160
|
+
.#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
|
|
161
|
+
position: relative;
|
|
162
|
+
|
|
163
|
+
&::before {
|
|
164
|
+
position: absolute;
|
|
165
|
+
top: 0;
|
|
166
|
+
left: 0;
|
|
167
|
+
width: rem(4px);
|
|
168
|
+
height: 100%;
|
|
169
|
+
background-color: $interactive;
|
|
170
|
+
content: '';
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
|
package/scss/fonts/README.md
CHANGED
|
@@ -25,7 +25,7 @@ Plex Sans, and IBM Plex Serif. To bring in additional fonts, you can include the
|
|
|
25
25
|
@use '@carbon/styles/scss/fonts' with (
|
|
26
26
|
$fonts: (
|
|
27
27
|
IBM-Plex-Sans-Arabic: true,
|
|
28
|
-
)
|
|
28
|
+
)
|
|
29
29
|
);
|
|
30
30
|
```
|
|
31
31
|
|
|
@@ -35,7 +35,7 @@ You can also configure it to disable specific fonts:
|
|
|
35
35
|
@use '@carbon/styles/scss/fonts' with (
|
|
36
36
|
$fonts: (
|
|
37
37
|
IBM-Plex-Sans: false,
|
|
38
|
-
)
|
|
38
|
+
)
|
|
39
39
|
);
|
|
40
40
|
```
|
|
41
41
|
|
|
@@ -44,7 +44,7 @@ in:
|
|
|
44
44
|
|
|
45
45
|
```scss
|
|
46
46
|
@use '@carbon/styles/scss/config' with (
|
|
47
|
-
$css--font-face: false
|
|
47
|
+
$css--font-face: false
|
|
48
48
|
);
|
|
49
49
|
```
|
|
50
50
|
|
|
@@ -88,7 +88,7 @@ The `$font-path` options is available in `scss/config`:
|
|
|
88
88
|
|
|
89
89
|
```scss
|
|
90
90
|
@use '@carbon/styles/scss/config' with (
|
|
91
|
-
$font-path: 'https://cdn.custom-font-path.com/fonts'
|
|
91
|
+
$font-path: 'https://cdn.custom-font-path.com/fonts'
|
|
92
92
|
);
|
|
93
93
|
```
|
|
94
94
|
|
package/scss/grid/_index.scss
CHANGED
|
@@ -6,12 +6,8 @@
|
|
|
6
6
|
//
|
|
7
7
|
|
|
8
8
|
@use '../config';
|
|
9
|
-
@forward '@carbon/grid' show
|
|
10
|
-
$grid-
|
|
11
|
-
$grid-gutter-condensed,
|
|
12
|
-
$grid-breakpoints,
|
|
13
|
-
flex-grid,
|
|
14
|
-
css-grid;
|
|
9
|
+
@forward '@carbon/grid' show $grid-gutter, $grid-gutter-condensed,
|
|
10
|
+
$grid-breakpoints, flex-grid, css-grid;
|
|
15
11
|
@use '@carbon/grid';
|
|
16
12
|
|
|
17
13
|
@if config.$use-flexbox-grid == true {
|
package/scss/theme/_theme.scss
CHANGED
|
@@ -7,14 +7,14 @@
|
|
|
7
7
|
|
|
8
8
|
@use '../config' as *;
|
|
9
9
|
@use '@carbon/themes/scss/config' with (
|
|
10
|
-
$prefix: $prefix
|
|
10
|
+
$prefix: $prefix
|
|
11
11
|
);
|
|
12
12
|
@use '../compat/themes' as compat;
|
|
13
13
|
@use '../themes';
|
|
14
14
|
|
|
15
15
|
@forward '@carbon/themes/scss/theme' with (
|
|
16
16
|
$fallback: themes.$white !default,
|
|
17
|
-
$theme: compat.$white !default
|
|
17
|
+
$theme: compat.$white !default
|
|
18
18
|
);
|
|
19
19
|
@forward '@carbon/themes/scss/tokens';
|
|
20
20
|
|
package/scss/type/_index.scss
CHANGED