@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.
Files changed (27) hide show
  1. package/package.json +9 -9
  2. package/scss/_feature-flags.scss +8 -1
  3. package/scss/components/button/_button.scss +2 -112
  4. package/scss/components/button/_tokens.scss +2 -2
  5. package/scss/components/checkbox/_checkbox.scss +3 -0
  6. package/scss/components/code-snippet/_code-snippet.scss +3 -3
  7. package/scss/components/data-table/_data-table.scss +1 -0
  8. package/scss/components/data-table/expandable/_data-table-expandable.scss +2 -2
  9. package/scss/components/date-picker/_date-picker.scss +1 -1
  10. package/scss/components/date-picker/_flatpickr.scss +39 -38
  11. package/scss/components/dropdown/_dropdown.scss +4 -4
  12. package/scss/components/form/_form.scss +7 -4
  13. package/scss/components/list-box/_list-box.scss +4 -4
  14. package/scss/components/notification/_inline-notification.scss +2 -2
  15. package/scss/components/notification/_toast-notification.scss +3 -3
  16. package/scss/components/number-input/_number-input.scss +3 -3
  17. package/scss/components/overflow-menu/_overflow-menu.scss +5 -4
  18. package/scss/components/popover/_popover.scss +241 -199
  19. package/scss/components/radio-button/_radio-button.scss +11 -9
  20. package/scss/components/search/_search.scss +7 -7
  21. package/scss/components/structured-list/_structured-list.scss +3 -3
  22. package/scss/components/tabs/_tabs.scss +111 -551
  23. package/scss/components/tile/_tile.scss +4 -3
  24. package/scss/components/toggle/_toggle.scss +80 -18
  25. package/scss/components/tooltip/_index.scss +1 -0
  26. package/scss/components/tooltip/_tooltip.scss +38 -725
  27. package/scss/components/treeview/_treeview.scss +17 -17
package/scss/components/radio-button/_radio-button.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  // Radio
10
10
  //-----------------------------
11
11
 
12
- @use '../../compat/theme' as *;
12
+ @use '../../theme' as *;
13
13
  @use '../../type';
14
14
  @use '../form';
15
15
  @use '../../utilities/focus-outline' as *;
@@ -20,6 +20,8 @@
20
20
  @use '../../config' as *;
21
21
  @use '../../spacing' as *;
22
22
 
23
+ @use '../button/tokens' as *;
24
+
23
25
  /// @type Number
24
26
  /// @access public
25
27
  /// @group radio-button
@@ -119,21 +121,21 @@ $radio-border-width: 1px !default;
119
121
  }
120
122
  }
121
123
 
122
- .#{$prefix}--radio-button:disabled-01 + .#{$prefix}--radio-button__label {
123
- color: $disabled-01;
124
+ .#{$prefix}--radio-button:button-disabled + .#{$prefix}--radio-button__label {
125
+ color: $button-disabled;
124
126
  cursor: not-allowed;
125
127
  }
126
128
 
127
- .#{$prefix}--radio-button:disabled-01
129
+ .#{$prefix}--radio-button:button-disabled
128
130
  + .#{$prefix}--radio-button__label
129
131
  .#{$prefix}--radio-button__appearance,
130
- .#{$prefix}--radio-button:disabled-01:checked
132
+ .#{$prefix}--radio-button:button-disabled:checked
131
133
  + .#{$prefix}--radio-button__label
132
134
  .#{$prefix}--radio-button__appearance {
133
- border-color: $disabled-01;
135
+ border-color: $border-disabled;
134
136
 
135
137
  &::before {
136
- background-color: $disabled-01;
138
+ background-color: $button-disabled;
137
139
  }
138
140
  }
139
141
 
@@ -142,8 +144,8 @@ $radio-border-width: 1px !default;
142
144
  .#{$prefix}--radio-button:focus
143
145
  + .#{$prefix}--radio-button__label
144
146
  .#{$prefix}--radio-button__appearance {
145
- box-shadow: 0 0 0 2px $focus;
146
- outline: 1px solid transparent;
147
+ outline: 2px solid $focus;
148
+ outline-offset: 1.5px;
147
149
  }
148
150
 
149
151
  // Skeleton State
package/scss/components/search/_search.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  // Search
10
10
  //-----------------------------
11
11
 
12
- @use '../../compat/theme' as *;
12
+ @use '../../theme' as *;
13
13
  @use '../../config' as *;
14
14
  @use '../../type';
15
15
  @use '../../motion' as *;
@@ -70,12 +70,12 @@
70
70
 
71
71
  .#{$prefix}--search-input[disabled] {
72
72
  border-bottom: 1px solid transparent;
73
- background-color: $field-disabled;
74
- color: $disabled-01;
73
+ background-color: $field;
74
+ color: $text-disabled;
75
75
  cursor: not-allowed;
76
76
 
77
77
  &::placeholder {
78
- color: $disabled-01;
78
+ color: $field;
79
79
  }
80
80
  }
81
81
  .#{$prefix}--search--light .#{$prefix}--search-input {
@@ -160,7 +160,7 @@
160
160
  border-bottom: 1px solid $border-strong;
161
161
 
162
162
  &::before {
163
- background-color: $hover-field;
163
+ background-color: $field-hover;
164
164
  }
165
165
  }
166
166
  }
@@ -200,7 +200,7 @@
200
200
  visibility: inherit;
201
201
 
202
202
  &:hover {
203
- background-color: $hover-field;
203
+ background-color: $field-hover;
204
204
  }
205
205
 
206
206
  &:focus {
@@ -231,7 +231,7 @@
231
231
  }
232
232
 
233
233
  .#{$prefix}--search--disabled svg {
234
- fill: $disabled-01;
234
+ fill: $icon-on-color-disabled;
235
235
  }
236
236
 
237
237
  .#{$prefix}--search-close:focus,
package/scss/components/structured-list/_structured-list.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  @use '../../feature-flags' as *;
10
10
  @use "../../type" as *;
11
11
  @use '../../motion';
12
- @use '../../compat/theme' as *;
12
+ @use '../../theme' as *;
13
13
  @use "../../utilities/focus-outline" as *;
14
14
  @use "../../utilities/skeleton" as *;
15
15
  @use "../../utilities/high-contrast-mode" as *;
@@ -89,8 +89,8 @@
89
89
 
90
90
  .#{$prefix}--structured-list--selection
91
91
  .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected) {
92
- border-bottom: 1px solid $hover-row;
93
- background-color: $hover-row;
92
+ border-bottom: 1px solid $background-hover;
93
+ background-color: $background-hover;
94
94
  cursor: pointer;
95
95
  }
96
96