@carbon/styles 0.8.0-rc.0 → 0.10.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/package.json +9 -9
- package/scss/_feature-flags.scss +8 -1
- package/scss/components/button/_button.scss +2 -112
- package/scss/components/button/_tokens.scss +2 -2
- package/scss/components/checkbox/_checkbox.scss +3 -0
- package/scss/components/code-snippet/_code-snippet.scss +3 -3
- package/scss/components/data-table/_data-table.scss +1 -0
- package/scss/components/data-table/expandable/_data-table-expandable.scss +2 -2
- package/scss/components/date-picker/_date-picker.scss +1 -1
- package/scss/components/date-picker/_flatpickr.scss +39 -38
- package/scss/components/dropdown/_dropdown.scss +4 -4
- package/scss/components/form/_form.scss +7 -4
- package/scss/components/list-box/_list-box.scss +4 -4
- package/scss/components/notification/_inline-notification.scss +2 -2
- package/scss/components/notification/_toast-notification.scss +3 -3
- package/scss/components/number-input/_number-input.scss +3 -3
- package/scss/components/overflow-menu/_overflow-menu.scss +5 -4
- package/scss/components/popover/_popover.scss +241 -199
- package/scss/components/radio-button/_radio-button.scss +11 -9
- package/scss/components/search/_search.scss +7 -7
- package/scss/components/structured-list/_structured-list.scss +3 -3
- package/scss/components/tabs/_tabs.scss +111 -551
- package/scss/components/tile/_tile.scss +4 -3
- package/scss/components/toggle/_toggle.scss +80 -18
- package/scss/components/tooltip/_index.scss +1 -0
- package/scss/components/tooltip/_tooltip.scss +38 -725
- package/scss/components/treeview/_treeview.scss +17 -17
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
@use '../../config' as *;
|
|
9
9
|
@use '../../motion' as *;
|
|
10
10
|
@use '../../spacing' as *;
|
|
11
|
-
@use '../../
|
|
11
|
+
@use '../../theme' as *;
|
|
12
12
|
@use '../../type' as *;
|
|
13
13
|
@use '../../utilities/convert' as *;
|
|
14
14
|
@use '../../utilities/focus-outline' as *;
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
|
|
24
24
|
.#{$prefix}--tree-node {
|
|
25
25
|
padding-left: $spacing-05;
|
|
26
|
-
background-color: $
|
|
27
|
-
color: $text-
|
|
26
|
+
background-color: $layer-01;
|
|
27
|
+
color: $text-secondary;
|
|
28
28
|
|
|
29
29
|
&:focus {
|
|
30
30
|
outline: none;
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
.#{$prefix}--tree-node--disabled
|
|
45
45
|
.#{$prefix}--tree-node__label:hover
|
|
46
46
|
.#{$prefix}--tree-node__label__details {
|
|
47
|
-
background-color: $
|
|
48
|
-
color: $disabled
|
|
47
|
+
background-color: $field-01;
|
|
48
|
+
color: $text-disabled;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
.#{$prefix}--tree-node--disabled
|
|
57
57
|
.#{$prefix}--tree-node__label:hover
|
|
58
58
|
.#{$prefix}--tree-node__icon {
|
|
59
|
-
fill: $disabled
|
|
59
|
+
fill: $icon-disabled;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.#{$prefix}--tree-node--disabled,
|
|
@@ -74,19 +74,19 @@
|
|
|
74
74
|
align-items: center;
|
|
75
75
|
|
|
76
76
|
&:hover {
|
|
77
|
-
background-color: $hover-
|
|
78
|
-
color: $text-
|
|
77
|
+
background-color: $layer-hover-01;
|
|
78
|
+
color: $text-primary;
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
|
|
83
|
-
color: $text-
|
|
83
|
+
color: $text-primary;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
.#{$prefix}--tree-node__label:hover
|
|
87
87
|
.#{$prefix}--tree-parent-node__toggle-icon,
|
|
88
88
|
.#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
|
|
89
|
-
fill: $icon-
|
|
89
|
+
fill: $icon-primary;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.#{$prefix}--tree-leaf-node {
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
.#{$prefix}--tree-parent-node__toggle-icon {
|
|
125
|
-
fill: $icon-
|
|
125
|
+
fill: $icon-secondary;
|
|
126
126
|
transform: rotate(-90deg);
|
|
127
127
|
transition: all $duration-fast-02 motion(standard, productive);
|
|
128
128
|
}
|
|
@@ -135,15 +135,15 @@
|
|
|
135
135
|
min-width: 1rem;
|
|
136
136
|
min-height: 1rem;
|
|
137
137
|
margin-right: $spacing-03;
|
|
138
|
-
fill: $icon-
|
|
138
|
+
fill: $icon-secondary;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
|
|
142
|
-
background-color: $selected-
|
|
143
|
-
color: $text-
|
|
142
|
+
background-color: $layer-selected-01;
|
|
143
|
+
color: $text-primary;
|
|
144
144
|
|
|
145
145
|
&:hover {
|
|
146
|
-
background-color: $
|
|
146
|
+
background-color: $layer-selected-hover-01;
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
.#{$prefix}--tree-node--selected
|
|
154
154
|
> .#{$prefix}--tree-node__label
|
|
155
155
|
.#{$prefix}--tree-node__icon {
|
|
156
|
-
fill: $icon-
|
|
156
|
+
fill: $icon-primary;
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
.#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
left: 0;
|
|
166
166
|
width: rem(4px);
|
|
167
167
|
height: 100%;
|
|
168
|
-
background-color: $interactive
|
|
168
|
+
background-color: $interactive;
|
|
169
169
|
content: '';
|
|
170
170
|
}
|
|
171
171
|
}
|