@patternfly/patternfly 6.0.0-alpha.56 → 6.0.0-alpha.58

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 (35) hide show
  1. package/components/Button/button.css +26 -11
  2. package/components/Button/button.scss +27 -12
  3. package/components/CodeBlock/code-block.css +18 -9
  4. package/components/CodeBlock/code-block.scss +18 -10
  5. package/components/DescriptionList/description-list.css +39 -34
  6. package/components/DescriptionList/description-list.scss +25 -25
  7. package/components/FileUpload/file-upload.css +28 -34
  8. package/components/FileUpload/file-upload.scss +30 -42
  9. package/components/Icon/icon.css +154 -18
  10. package/components/Icon/icon.scss +187 -20
  11. package/components/Label/label-group.css +39 -44
  12. package/components/Label/label-group.scss +39 -45
  13. package/components/Label/label.css +258 -355
  14. package/components/Label/label.scss +297 -347
  15. package/components/Sidebar/sidebar.css +20 -9
  16. package/components/Sidebar/sidebar.scss +23 -11
  17. package/components/SimpleList/simple-list.css +1 -1
  18. package/components/SimpleList/simple-list.scss +1 -1
  19. package/components/ToggleGroup/toggle-group.css +34 -47
  20. package/components/ToggleGroup/toggle-group.scss +34 -45
  21. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  22. package/docs/components/Icon/examples/Icon.md +82 -11
  23. package/docs/components/Label/examples/Label.css +4 -0
  24. package/docs/components/Label/examples/Label.md +999 -223
  25. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  26. package/docs/demos/Form/examples/BasicForms.md +2 -2
  27. package/package.json +1 -1
  28. package/patternfly-no-globals.css +701 -570
  29. package/patternfly-theme-dark-unversioned.css +701 -570
  30. package/patternfly.css +701 -570
  31. package/patternfly.min.css +1 -1
  32. package/patternfly.min.css.map +1 -1
  33. package/sass-utilities/mixins.scss +18 -0
  34. package/components/Label/themes/dark/label.scss +0 -53
  35. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
package/sass-utilities/mixins.scss CHANGED
@@ -295,6 +295,24 @@
295
295
  }
296
296
  }
297
297
 
298
+ // Build variable stack
299
+ @mixin pf-v5-output-root-variables($css-var, $breakpoint-map: $pf-v5-global--breakpoint-map) {
300
+ $list: ();
301
+
302
+ @each $breakpoint, $breakpoint-value in $breakpoint-map {
303
+ // Build variable list
304
+ // stylelint-disable scss/at-if-no-null
305
+ @if $breakpoint-value {
306
+ $list: append($list, $css-var + "-on-" + $breakpoint);
307
+ }
308
+ // stylelint-enable
309
+ }
310
+
311
+ @each $item in $list {
312
+ #{$item}: inherit;
313
+ }
314
+ }
315
+
298
316
  // Dark theme style block
299
317
  @mixin pf-v5-theme-dark($theme-dark-class: $pf-v5--theme-dark--class, $theme-dark-target: $pf-v5--theme-dark--target) {
300
318
  #{$theme-dark-target}:where(#{$theme-dark-class}) {
package/components/Label/themes/dark/label.scss DELETED
@@ -1,53 +0,0 @@
1
- @import "../../../../sass-utilities/themes/dark/all";
2
-
3
- @mixin pf-v5-theme-dark-label() {
4
- .#{$label} {
5
- --#{$label}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
6
- --#{$label}--m-blue--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
7
- --#{$label}--m-green--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
8
- --#{$label}--m-orange--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
9
- --#{$label}--m-red--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
10
- --#{$label}--m-purple--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
11
- --#{$label}--m-cyan--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
12
- --#{$label}--m-gold--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
13
- --#{$label}__content--before--BorderWidth: 0;
14
- --#{$label}__content--before--BorderColor: transparent;
15
- --#{$label}__content--link--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
16
- --#{$label}__content--link--focus--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
17
- --#{$label}--m-blue__content--Color: var(--#{$pf-global}--primary-color--100);
18
- --#{$label}--m-outline--m-blue__content--before--BorderColor: var(--#{$pf-global}--active-color--200);
19
- --#{$label}--m-outline--m-blue__content--link--hover--before--BorderColor: var(--#{$pf-global}--active-color--200);
20
- --#{$label}--m-outline--m-blue__content--link--focus--before--BorderColor: var(--#{$pf-global}--active-color--200);
21
- --#{$label}--m-green__content--Color: var(--#{$pf-global}--success-color--100);
22
- --#{$label}--m-outline--m-green__content--before--BorderColor: var(--#{$pf-global}--palette--green-100);
23
- --#{$label}--m-outline--m-green__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--green-100);
24
- --#{$label}--m-outline--m-green__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--green-100);
25
- --#{$label}--m-orange__content--Color: var(--#{$pf-global}--palette--orange-300);
26
- --#{$label}--m-outline--m-orange__content--Color: var(--#{$pf-global}--palette--orange-300);
27
- --#{$label}--m-outline--m-orange__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
28
- --#{$label}--m-outline--m-orange__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
29
- --#{$label}--m-outline--m-orange__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
30
- --#{$label}--m-red__content--Color: var(--#{$pf-global}--danger-color--100);
31
- --#{$label}--m-outline--m-red__content--before--BorderColor: var(--#{$pf-global}--danger-color--100);
32
- --#{$label}--m-outline--m-red__content--link--hover--before--BorderColor: var(--#{$pf-global}--danger-color--100);
33
- --#{$label}--m-outline--m-red__content--link--focus--before--BorderColor: var(--#{$pf-global}--danger-color--100);
34
- --#{$label}--m-purple__content--Color: var(--#{$pf-global}--palette--purple-300);
35
- --#{$label}--m-purple__icon--Color: var(--#{$pf-global}--palette--purple-300);
36
- --#{$label}--m-purple__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--purple-300);
37
- --#{$label}--m-purple__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--purple-300);
38
- --#{$label}--m-outline--m-purple__content--before--BorderColor: var(--#{$pf-global}--palette--purple-100);
39
- --#{$label}--m-outline--m-purple__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--purple-100);
40
- --#{$label}--m-outline--m-purple__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--purple-100);
41
- --#{$label}--m-outline--m-purple__content--Color: var(--#{$pf-global}--palette--purple-300);
42
- --#{$label}--m-cyan__content--Color: var(--#{$pf-global}--custom-color--200);
43
- --#{$label}--m-outline--m-cyan__content--Color: var(--#{$pf-global}--custom-color--200);
44
- --#{$label}--m-outline--m-cyan__content--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
45
- --#{$label}--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
46
- --#{$label}--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
47
- --#{$label}--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
48
- --#{$label}--m-outline--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
49
- --#{$label}--m-outline--m-gold__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
50
- --#{$label}--m-outline--m-gold__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
51
- --#{$label}--m-outline--m-gold__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
52
- }
53
- }
package/components/ToggleGroup/themes/dark/toggle-group.scss DELETED
@@ -1,12 +0,0 @@
1
- @import "../../../../sass-utilities/themes/dark/all";
2
-
3
- @mixin pf-v5-theme-dark-toggle-group() {
4
- .#{$toggle-group} {
5
- --#{$toggle-group}__button--hover--BackgroundColor: var(--#{$pf-global}--palette--black-700);
6
- --#{$toggle-group}__button--focus--BackgroundColor: var(--#{$pf-global}--palette--black-700);
7
- --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-600);
8
- --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--palette--black-100);
9
- --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--primary-color--300);
10
- --#{$toggle-group}__button--m-selected--Color: var(--#{$pf-global}--primary-color--400);
11
- }
12
- }