@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/tile/_tile.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  @use '../../config' as *;
9
9
  @use '../../motion' as *;
10
10
  @use '../../spacing' as *;
11
- @use '../../compat/theme' as *;
11
+ @use '../../theme' as *;
12
12
  @use '../../type' as *;
13
13
  @use '../button/tokens' as button;
14
14
  @use '../../utilities/focus-outline' as *;
@@ -40,7 +40,7 @@
40
40
 
41
41
  // V11: Possibly deprecate
42
42
  .#{$prefix}--tile--light {
43
- background-color: $ui-02;
43
+ background-color: $layer-02;
44
44
  }
45
45
 
46
46
  .#{$prefix}--tile--clickable,
@@ -162,6 +162,7 @@
162
162
  }
163
163
 
164
164
  .#{$prefix}--tile--expandable {
165
+ position: relative;
165
166
  overflow: hidden;
166
167
  width: 100%;
167
168
  border: 0;
@@ -249,7 +250,7 @@
249
250
 
250
251
  // V11: Possibly deprecate
251
252
  .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light {
252
- background-color: $ui-02;
253
+ background-color: $layer-02;
253
254
  }
254
255
 
255
256
  .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
package/scss/components/toggle/_toggle.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  //3
7
7
 
8
8
  @use '../../config' as *;
9
- @use '../../feature-flags' as *;
9
+ @use '../../feature-flags';
10
10
  @use '../../motion' as *;
11
11
  @use '../../spacing' as *;
12
12
  @use '../../theme' as *;
@@ -15,12 +15,13 @@
15
15
  @use '../../utilities/convert' as *;
16
16
  @use '../../utilities/high-contrast-mode' as *;
17
17
  @use '../../utilities/visually-hidden' as *;
18
+ @use '../../utilities/skeleton' as *;
18
19
 
19
20
  /// Toggle styles
20
21
  /// @access public
21
22
  /// @group toggle
22
23
  @mixin toggle {
23
- @if enabled('enable-v11-release') {
24
+ @if feature-flags.enabled('enable-v11-release') {
24
25
  .#{$prefix}--toggle__label-text {
25
26
  @include type-style('label-01');
26
27
 
@@ -586,30 +587,91 @@
586
587
  //----------------------------------------------
587
588
  // Skeleton
588
589
  // ---------------------------------------------
590
+ //md toggle input
591
+ .#{$prefix}--toggle.#{$prefix}--skeleton
592
+ + .#{$prefix}--toggle-input__label
593
+ .#{$prefix}--toggle__switch {
594
+ @include skeleton;
589
595
 
590
- .#{$prefix}--toggle__label.#{$prefix}--skeleton {
591
- flex-direction: column;
592
- align-items: flex-start;
596
+ width: 3rem;
597
+ margin-top: 0.5rem;
598
+ }
593
599
 
594
- .#{$prefix}--toggle__label-text {
595
- margin-bottom: $spacing-03;
596
- }
600
+ //md skeleton label text
601
+ .#{$prefix}--toggle.#{$prefix}--skeleton
602
+ + .#{$prefix}--toggle-input__label
603
+ > div {
604
+ overflow: hidden;
605
+ width: 1.5rem;
606
+ height: 0.5rem;
607
+ //hides text
608
+ font-size: 0%;
609
+ line-height: 0;
610
+
611
+ @include skeleton;
597
612
  }
598
613
 
599
- // Windows HCM fix
600
- .#{$prefix}--toggle__switch::after,
601
- .#{$prefix}--toggle__switch::before {
602
- @include high-contrast-mode('outline');
614
+ //small toggle input
615
+ .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
616
+ + .#{$prefix}--toggle-input__label
617
+ .#{$prefix}--toggle__switch {
618
+ @include skeleton;
619
+
620
+ width: 2rem;
621
+ margin-top: 0.5rem;
603
622
  }
604
623
 
605
- // stylelint-disable-next-line no-duplicate-selectors
606
- .#{$prefix}--toggle-input:focus
624
+ //sm skeleton label text
625
+ .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
607
626
  + .#{$prefix}--toggle-input__label
608
- > .#{$prefix}--toggle__switch::before,
609
- .#{$prefix}--toggle-input:active
627
+ > div {
628
+ overflow: hidden;
629
+ width: 1rem;
630
+ height: 0.5rem;
631
+ //hides text
632
+ font-size: 0%;
633
+ line-height: 0;
634
+
635
+ @include skeleton;
636
+ }
637
+
638
+ // on/off text skeleton
639
+ .#{$prefix}--toggle.#{$prefix}--skeleton
610
640
  + .#{$prefix}--toggle-input__label
611
- > .#{$prefix}--toggle__switch::before {
612
- @include high-contrast-mode('focus');
641
+ .#{$prefix}--toggle__switch
642
+ .#{$prefix}--toggle__text--left {
643
+ @include skeleton;
644
+
645
+ position: absolute;
646
+ width: 1rem;
647
+ height: 0.5rem;
648
+ }
649
+
650
+ .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
651
+ + .#{$prefix}--toggle-input__label
652
+ .#{$prefix}--toggle__switch
653
+ .#{$prefix}--toggle__text--left {
654
+ left: 2rem;
655
+ }
656
+
657
+ //pseudo "toggle" button
658
+ .#{$prefix}--toggle.#{$prefix}--skeleton
659
+ + .#{$prefix}--toggle-input__label
660
+ .#{$prefix}--toggle__switch::after,
661
+ .#{$prefix}--toggle.#{$prefix}--skeleton
662
+ + .#{$prefix}--toggle-input__label
663
+ .#{$prefix}--toggle__appearance::after,
664
+ .#{$prefix}--toggle.#{$prefix}--skeleton
665
+ + .#{$prefix}--toggle-input__label
666
+ .#{$prefix}--toggle__appearance::before {
667
+ display: none;
668
+ }
669
+
670
+ //make it square
671
+ .#{$prefix}--toggle.#{$prefix}--skeleton
672
+ + .#{$prefix}--toggle-input__label
673
+ .#{$prefix}--toggle__switch::before {
674
+ border-radius: 0;
613
675
  }
614
676
  }
615
677
  }
package/scss/components/tooltip/_index.scss CHANGED
@@ -9,3 +9,4 @@
9
9
  @use 'tooltip';
10
10
 
11
11
  @include tooltip.tooltip;
12
+ @include tooltip.icon-tooltip;