@patternfly/patternfly 6.0.0-alpha.57 → 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 (22) hide show
  1. package/components/CodeBlock/code-block.css +18 -9
  2. package/components/CodeBlock/code-block.scss +18 -10
  3. package/components/DescriptionList/description-list.css +9 -9
  4. package/components/DescriptionList/description-list.scss +3 -3
  5. package/components/FileUpload/file-upload.css +28 -34
  6. package/components/FileUpload/file-upload.scss +30 -42
  7. package/components/Icon/icon.css +154 -18
  8. package/components/Icon/icon.scss +187 -20
  9. package/components/Sidebar/sidebar.css +20 -9
  10. package/components/Sidebar/sidebar.scss +23 -11
  11. package/components/ToggleGroup/toggle-group.css +34 -47
  12. package/components/ToggleGroup/toggle-group.scss +34 -45
  13. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  14. package/docs/components/Icon/examples/Icon.md +82 -11
  15. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  16. package/package.json +1 -1
  17. package/patternfly-no-globals.css +263 -130
  18. package/patternfly-theme-dark-unversioned.css +263 -130
  19. package/patternfly.css +263 -130
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
  22. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
package/components/CodeBlock/code-block.css CHANGED
@@ -1,18 +1,27 @@
1
+ :root, :where(.pf-v5-c-code-block) {
2
+ --pf-v5-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3
+ --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
4
+ --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
5
+ --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
6
+ --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
9
+ --pf-v5-c-code-block__content--PaddingRight: var(--pf-t--global--spacer--md);
10
+ --pf-v5-c-code-block__content--PaddingBottom: var(--pf-t--global--spacer--md);
11
+ --pf-v5-c-code-block__content--PaddingLeft: var(--pf-t--global--spacer--md);
12
+ --pf-v5-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
13
+ --pf-v5-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
14
+ }
15
+
1
16
  .pf-v5-c-code-block {
2
- --pf-v5-c-code-block--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
3
- --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
4
- --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
5
- --pf-v5-c-code-block__content--PaddingTop: var(--pf-v5-global--spacer--md);
6
- --pf-v5-c-code-block__content--PaddingRight: var(--pf-v5-global--spacer--md);
7
- --pf-v5-c-code-block__content--PaddingBottom: var(--pf-v5-global--spacer--md);
8
- --pf-v5-c-code-block__content--PaddingLeft: var(--pf-v5-global--spacer--md);
9
- --pf-v5-c-code-block__pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
10
- --pf-v5-c-code-block__pre--FontSize: var(--pf-v5-global--FontSize--sm);
11
17
  background-color: var(--pf-v5-c-code-block--BackgroundColor);
18
+ border-radius: var(--pf-v5-c-code-block--BorderRadius);
12
19
  }
13
20
 
14
21
  .pf-v5-c-code-block__header {
15
22
  display: flex;
23
+ padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
24
+ padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
16
25
  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
17
26
  }
18
27
 
package/components/CodeBlock/code-block.scss CHANGED
@@ -1,21 +1,29 @@
1
1
  // @debug $code-block; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$code-block} {
4
- --#{$code-block}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
5
- --#{$code-block}__header--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
6
- --#{$code-block}__header--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
7
- --#{$code-block}__content--PaddingTop: var(--#{$pf-global}--spacer--md);
8
- --#{$code-block}__content--PaddingRight: var(--#{$pf-global}--spacer--md);
9
- --#{$code-block}__content--PaddingBottom: var(--#{$pf-global}--spacer--md);
10
- --#{$code-block}__content--PaddingLeft: var(--#{$pf-global}--spacer--md);
11
- --#{$code-block}__pre--FontFamily: var(--#{$pf-global}--FontFamily--monospace);
12
- --#{$code-block}__pre--FontSize: var(--#{$pf-global}--FontSize--sm);
3
+ :root, :where(.#{$code-block}) {
4
+ --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
+ --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
6
+ --#{$code-block}__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
7
+ --#{$code-block}__header--BorderBottomColor: var(--pf-t--global--border--color--default);
8
+ --#{$code-block}__header--PaddingRight: var(--pf-t--global--spacer--sm);
9
+ --#{$code-block}__header--PaddingLeft: var(--pf-t--global--spacer--sm);
10
+ --#{$code-block}__content--PaddingTop: var(--pf-t--global--spacer--md);
11
+ --#{$code-block}__content--PaddingRight: var(--pf-t--global--spacer--md);
12
+ --#{$code-block}__content--PaddingBottom: var(--pf-t--global--spacer--md);
13
+ --#{$code-block}__content--PaddingLeft: var(--pf-t--global--spacer--md);
14
+ --#{$code-block}__pre--FontFamily: var(--pf-t--global--font--family--mono);
15
+ --#{$code-block}__pre--FontSize: var(--pf-t--global--font--size--xs);
16
+ }
13
17
 
18
+ .#{$code-block} {
14
19
  background-color: var(--#{$code-block}--BackgroundColor);
20
+ border-radius: var(--#{$code-block}--BorderRadius);
15
21
  }
16
22
 
17
23
  .#{$code-block}__header {
18
24
  display: flex;
25
+ padding-inline-start: var(--#{$code-block}__header--PaddingLeft);
26
+ padding-inline-end: var(--#{$code-block}__header--PaddingRight);
19
27
  border-block-end: var(--#{$code-block}__header--BorderBottomWidth) solid var(--#{$code-block}__header--BorderBottomColor);
20
28
  }
21
29
 
package/components/DescriptionList/description-list.css CHANGED
@@ -1,4 +1,4 @@
1
- :root, :where(.pf-v5-c-description-list) {
1
+ :where(:root), :where(.pf-v5-c-description-list) {
2
2
  --pf-v5-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
3
3
  --pf-v5-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
4
4
  --pf-v5-c-description-list--GridTemplateColumns--count: 1;
@@ -30,8 +30,8 @@
30
30
  --pf-v5-c-description-list--m-3-col--GridTemplateColumns--count: 3;
31
31
  --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
32
32
  --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min);
33
- --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-t--global--icon--color--regular);
34
- --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--100);
33
+ --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: currentcolor;
34
+ --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
35
35
  --pf-v5-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
36
36
  --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
37
37
  --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
@@ -45,32 +45,32 @@
45
45
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
46
46
  }
47
47
  @media screen and (min-width: 576px) {
48
- :root, :where(.pf-v5-c-description-list) {
48
+ :where(:root), :where(.pf-v5-c-description-list) {
49
49
  --pf-v5-c-description-list__term--Display: var(--pf-v5-c-description-list__term--sm--Display);
50
50
  }
51
51
  }
52
52
  @media (min-width: 576px) {
53
- :root, :where(.pf-v5-c-description-list) {
53
+ :where(:root), :where(.pf-v5-c-description-list) {
54
54
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width));
55
55
  }
56
56
  }
57
57
  @media (min-width: 768px) {
58
- :root, :where(.pf-v5-c-description-list) {
58
+ :where(:root), :where(.pf-v5-c-description-list) {
59
59
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)));
60
60
  }
61
61
  }
62
62
  @media (min-width: 992px) {
63
- :root, :where(.pf-v5-c-description-list) {
63
+ :where(:root), :where(.pf-v5-c-description-list) {
64
64
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))));
65
65
  }
66
66
  }
67
67
  @media (min-width: 1200px) {
68
- :root, :where(.pf-v5-c-description-list) {
68
+ :where(:root), :where(.pf-v5-c-description-list) {
69
69
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)))));
70
70
  }
71
71
  }
72
72
  @media (min-width: 1450px) {
73
- :root, :where(.pf-v5-c-description-list) {
73
+ :where(:root), :where(.pf-v5-c-description-list) {
74
74
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))))));
75
75
  }
76
76
  }
package/components/DescriptionList/description-list.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
  $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
3
3
 
4
- :root, :where(.#{$description-list}) {
4
+ :where(:root), :where(.#{$description-list}) {
5
5
  --#{$description-list}--RowGap: var(--pf-t--global--spacer--lg);
6
6
  --#{$description-list}--ColumnGap: var(--pf-t--global--spacer--lg);
7
7
  --#{$description-list}--GridTemplateColumns--count: 1;
@@ -53,8 +53,8 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
53
53
  --#{$description-list}--m-auto-fit--GridTemplateColumns--minmax--min: var(--#{$description-list}--m-auto-fit--GridTemplateColumns--min);
54
54
 
55
55
  // help text
56
- --#{$description-list}__text--m-help-text--TextDecorationColor: var(--pf-t--global--icon--color--regular);
57
- --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--100);
56
+ --#{$description-list}__text--m-help-text--TextDecorationColor: currentcolor;
57
+ --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
58
58
  --#{$description-list}__text--m-help-text--TextDecorationOffset: #{pf-size-prem(4px)};
59
59
  --#{$description-list}__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
60
60
  --#{$description-list}__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
package/components/FileUpload/file-upload.css CHANGED
@@ -1,45 +1,39 @@
1
+ :where(:root),
2
+ :where(.pf-v5-c-file-upload) {
3
+ --pf-v5-c-file-upload--RowGap: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5
+ --pf-v5-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-file-upload--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-file-upload--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-file-upload--BorderRadius: var(--pf-t--global--border--radius--small);
9
+ --pf-v5-c-file-upload--BorderWidth: var(--pf-t--global--border--width--regular);
10
+ --pf-v5-c-file-upload--BorderColor: transparent;
11
+ --pf-v5-c-file-upload--BorderStyle: solid;
12
+ --pf-v5-c-file-upload--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
13
+ --pf-v5-c-file-upload--m-drag-hover--BorderStyle: dashed;
14
+ --pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
15
+ --pf-v5-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);
16
+ }
17
+
1
18
  .pf-v5-c-file-upload {
2
- --pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
3
- --pf-v5-c-file-upload--m-loading__file-details--before--Left: var(--pf-v5-global--BorderWidth--sm);
4
- --pf-v5-c-file-upload--m-loading__file-details--before--Right: var(--pf-v5-global--BorderWidth--sm);
5
- --pf-v5-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-v5-global--BorderWidth--sm);
6
- --pf-v5-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
7
- --pf-v5-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
8
- --pf-v5-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-v5-global--ZIndex--xs);
9
- --pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
10
- --pf-v5-c-file-upload--m-drag-hover--after--Opacity: .1;
11
- --pf-v5-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-v5-global--spacer--3xl) * 2);
12
- --pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
13
19
  position: relative;
14
20
  display: flex;
15
21
  flex-direction: column;
16
- }
17
- .pf-v5-c-file-upload.pf-m-drag-hover::before {
18
- position: absolute;
19
- inset: 0;
20
- z-index: var(--pf-v5-c-file-upload--m-drag-hover--before--ZIndex);
21
- content: "";
22
- border: var(--pf-v5-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-file-upload--m-drag-hover--before--BorderColor);
23
- }
24
- .pf-v5-c-file-upload.pf-m-drag-hover::after {
25
- position: absolute;
26
- inset: 0;
27
- content: "";
28
- background-color: var(--pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor);
29
- opacity: var(--pf-v5-c-file-upload--m-drag-hover--after--Opacity);
22
+ row-gap: var(--pf-v5-c-file-upload--RowGap);
23
+ padding-block-start: var(--pf-v5-c-file-upload--PaddingBlockStart);
24
+ padding-block-end: var(--pf-v5-c-file-upload--PaddingBlockEnd);
25
+ padding-inline-start: var(--pf-v5-c-file-upload--PaddingInlineStart);
26
+ padding-inline-end: var(--pf-v5-c-file-upload--PaddingInlineEnd);
27
+ border: var(--pf-v5-c-file-upload--BorderWidth) var(--pf-v5-c-file-upload--BorderStyle) var(--pf-v5-c-file-upload--BorderColor);
28
+ border-radius: var(--pf-v5-c-file-upload--BorderRadius);
29
+ }
30
+ .pf-v5-c-file-upload.pf-m-drag-hover {
31
+ --pf-v5-c-file-upload--BorderColor: var(--pf-v5-c-file-upload--m-drag-hover--BorderColor);
32
+ --pf-v5-c-file-upload--BorderStyle: var(--pf-v5-c-file-upload--m-drag-hover--BorderStyle);
30
33
  }
31
34
  .pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details {
32
35
  position: relative;
33
36
  }
34
- .pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details::before {
35
- position: absolute;
36
- inset-block-start: 0;
37
- inset-block-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
38
- inset-inline-start: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
39
- inset-inline-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
40
- content: "";
41
- background-color: var(--pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor);
42
- }
43
37
 
44
38
  .pf-v5-c-file-upload__file-select .pf-v5-c-button.pf-m-control {
45
39
  outline-offset: var(--pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset);
package/components/FileUpload/file-upload.scss CHANGED
@@ -1,60 +1,48 @@
1
1
  // @debug $file-upload; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$file-upload} {
4
- // pf-m-loading
5
- --#{$file-upload}--m-loading__file-details--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
6
- --#{$file-upload}--m-loading__file-details--before--Left: var(--#{$pf-global}--BorderWidth--sm);
7
- --#{$file-upload}--m-loading__file-details--before--Right: var(--#{$pf-global}--BorderWidth--sm);
8
- --#{$file-upload}--m-loading__file-details--before--Bottom: var(--#{$pf-global}--BorderWidth--sm);
3
+ :where(:root),
4
+ :where(.#{$file-upload}) {
5
+ --#{$file-upload}--RowGap: var(--pf-t--global--spacer--sm);
6
+ --#{$file-upload}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7
+ --#{$file-upload}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
8
+ --#{$file-upload}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9
+ --#{$file-upload}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10
+ --#{$file-upload}--BorderRadius: var(--pf-t--global--border--radius--small);
11
+ --#{$file-upload}--BorderWidth: var(--pf-t--global--border--width--regular);
12
+ --#{$file-upload}--BorderColor: transparent;
13
+ --#{$file-upload}--BorderStyle: solid;
9
14
 
10
15
  // pf-m-drag-hover
11
- --#{$file-upload}--m-drag-hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
12
- --#{$file-upload}--m-drag-hover--before--BorderColor: var(--#{$pf-global}--primary-color--100);
13
- --#{$file-upload}--m-drag-hover--before--ZIndex: var(--#{$pf-global}--ZIndex--xs);
14
- --#{$file-upload}--m-drag-hover--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
15
- --#{$file-upload}--m-drag-hover--after--Opacity: .1;
16
+ --#{$file-upload}--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
17
+ --#{$file-upload}--m-drag-hover--BorderStyle: dashed;
16
18
 
17
- // Text area
18
- --#{$file-upload}__file-details__c-form-control--MinHeight: calc(var(--#{$pf-global}--spacer--3xl) * 2);
19
+ // File select > Button
20
+ --#{$file-upload}__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19
21
 
20
- // Button overrides
21
- --#{$file-upload}__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
22
+ // File details > Text area
23
+ --#{$file-upload}__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);
24
+ }
22
25
 
26
+ .#{$file-upload} {
23
27
  position: relative;
24
28
  display: flex;
25
29
  flex-direction: column;
30
+ row-gap: var(--#{$file-upload}--RowGap);
31
+ padding-block-start: var(--#{$file-upload}--PaddingBlockStart);
32
+ padding-block-end: var(--#{$file-upload}--PaddingBlockEnd);
33
+ padding-inline-start: var(--#{$file-upload}--PaddingInlineStart);
34
+ padding-inline-end: var(--#{$file-upload}--PaddingInlineEnd);
35
+ border: var(--#{$file-upload}--BorderWidth) var(--#{$file-upload}--BorderStyle) var(--#{$file-upload}--BorderColor);
36
+ border-radius: var(--#{$file-upload}--BorderRadius);
26
37
 
27
38
  &.pf-m-drag-hover {
28
- &::before {
29
- position: absolute;
30
- inset: 0;
31
- z-index: var(--#{$file-upload}--m-drag-hover--before--ZIndex);
32
- content: "";
33
- border: var(--#{$file-upload}--m-drag-hover--before--BorderWidth) solid var(--#{$file-upload}--m-drag-hover--before--BorderColor);
34
- }
35
-
36
- &::after {
37
- position: absolute;
38
- inset: 0;
39
- content: "";
40
- background-color: var(--#{$file-upload}--m-drag-hover--after--BackgroundColor);
41
- opacity: var(--#{$file-upload}--m-drag-hover--after--Opacity);
42
- }
39
+ --#{$file-upload}--BorderColor: var(--#{$file-upload}--m-drag-hover--BorderColor);
40
+ --#{$file-upload}--BorderStyle: var(--#{$file-upload}--m-drag-hover--BorderStyle);
43
41
  }
44
42
 
45
43
  &.pf-m-loading {
46
44
  .#{$file-upload}__file-details {
47
45
  position: relative;
48
-
49
- &::before {
50
- position: absolute;
51
- inset-block-start: 0;
52
- inset-block-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
53
- inset-inline-start: var(--#{$file-upload}--m-loading__file-details--before--Left);
54
- inset-inline-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
55
- content: "";
56
- background-color: var(--#{$file-upload}--m-loading__file-details--before--BackgroundColor);
57
- }
58
46
  }
59
47
  }
60
48
  }
@@ -78,7 +66,7 @@
78
66
 
79
67
  .#{$file-upload}__file-details-spinner {
80
68
  position: absolute;
81
- inset-block-start: 50%;
82
- inset-inline-start: 50%;
69
+ inset-block-start: 50%;
70
+ inset-inline-start: 50%;
83
71
  transform: translate(-50%, -50%);
84
72
  }
package/components/Icon/icon.css CHANGED
@@ -1,30 +1,67 @@
1
- .pf-v5-c-icon {
1
+ :root,
2
+ :where(.pf-v5-c-icon) {
2
3
  --pf-v5-c-icon--Width: 1em;
3
4
  --pf-v5-c-icon--Height: 1em;
4
- --pf-v5-c-icon--m-sm--Width: var(--pf-v5-global--icon--FontSize--sm);
5
- --pf-v5-c-icon--m-sm--Height: var(--pf-v5-global--icon--FontSize--sm);
6
- --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
7
- --pf-v5-c-icon--m-md--Height: var(--pf-v5-global--icon--FontSize--md);
8
- --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
9
- --pf-v5-c-icon--m-lg--Height: var(--pf-v5-global--icon--FontSize--lg);
10
- --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
11
- --pf-v5-c-icon--m-xl--Height: var(--pf-v5-global--icon--FontSize--xl);
5
+ --pf-v5-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
6
+ --pf-v5-c-icon--m-sm--Height: var(--pf-t--global--icon--size--sm);
7
+ --pf-v5-c-icon--m-md--Width: var(--pf-t--global--icon--size--md);
8
+ --pf-v5-c-icon--m-md--Height: var(--pf-t--global--icon--size--md);
9
+ --pf-v5-c-icon--m-lg--Width: var(--pf-t--global--icon--size--lg);
10
+ --pf-v5-c-icon--m-lg--Height: var(--pf-t--global--icon--size--lg);
11
+ --pf-v5-c-icon--m-xl--Width: var(--pf-t--global--icon--size--xl);
12
+ --pf-v5-c-icon--m-xl--Height: var(--pf-t--global--icon--size--xl);
13
+ --pf-v5-c-icon--m-2xl--Width: var(--pf-t--global--icon--size--2xl);
14
+ --pf-v5-c-icon--m-2xl--Height: var(--pf-t--global--icon--size--2xl);
15
+ --pf-v5-c-icon--m-3xl--Width: var(--pf-t--global--icon--size--3xl);
16
+ --pf-v5-c-icon--m-3xl--Height: var(--pf-t--global--icon--size--3xl);
17
+ --pf-v5-c-icon--m-body-sm--Width: var(--pf-t--global--icon--size--body--sm);
18
+ --pf-v5-c-icon--m-body-sm--Height: var(--pf-t--global--icon--size--body--sm);
19
+ --pf-v5-c-icon--m-body-default--Width: var(--pf-t--global--icon--size--body--default);
20
+ --pf-v5-c-icon--m-body-default--Height: var(--pf-t--global--icon--size--body--default);
21
+ --pf-v5-c-icon--m-body-lg--Width: var(--pf-t--global--icon--size--body--lg);
22
+ --pf-v5-c-icon--m-body-lg--Height: var(--pf-t--global--icon--size--body--lg);
23
+ --pf-v5-c-icon--m-heading-sm--Width: var(--pf-t--global--icon--size--heading--h6);
24
+ --pf-v5-c-icon--m-heading-sm--Height: var(--pf-t--global--icon--size--heading--h6);
25
+ --pf-v5-c-icon--m-heading-md--Width: var(--pf-t--global--icon--size--heading--h5);
26
+ --pf-v5-c-icon--m-heading-md--Height: var(--pf-t--global--icon--size--heading--h5);
27
+ --pf-v5-c-icon--m-heading-lg--Width: var(--pf-t--global--icon--size--heading--h4);
28
+ --pf-v5-c-icon--m-heading-lg--Height: var(--pf-t--global--icon--size--heading--h4);
29
+ --pf-v5-c-icon--m-heading-xl--Width: var(--pf-t--global--icon--size--heading--h3);
30
+ --pf-v5-c-icon--m-heading-xl--Height: var(--pf-t--global--icon--size--heading--h3);
31
+ --pf-v5-c-icon--m-heading-2xl--Width: var(--pf-t--global--icon--size--heading--h2);
32
+ --pf-v5-c-icon--m-heading-2xl--Height: var(--pf-t--global--icon--size--heading--h2);
33
+ --pf-v5-c-icon--m-heading-3xl--Width: var(--pf-t--global--icon--size--heading--h1);
34
+ --pf-v5-c-icon--m-heading-3xl--Height: var(--pf-t--global--icon--size--heading--h1);
12
35
  --pf-v5-c-icon--m-inline--Width: 1em;
13
36
  --pf-v5-c-icon--m-inline--Height: 1em;
14
37
  --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
15
38
  --pf-v5-c-icon__content--Color: initial;
16
- --pf-v5-c-icon__content--m-danger--Color: var(--pf-v5-global--danger-color--100);
17
- --pf-v5-c-icon__content--m-warning--Color: var(--pf-v5-global--warning-color--100);
18
- --pf-v5-c-icon__content--m-success--Color: var(--pf-v5-global--success-color--100);
19
- --pf-v5-c-icon__content--m-info--Color: var(--pf-v5-global--info-color--100);
20
- --pf-v5-c-icon__content--m-custom--Color: var(--pf-v5-global--custom-color--100);
39
+ --pf-v5-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
40
+ --pf-v5-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
41
+ --pf-v5-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
42
+ --pf-v5-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
43
+ --pf-v5-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
21
44
  --pf-v5-c-icon--m-inline__content--Color: initial;
22
45
  --pf-v5-c-icon__content--FontSize: 1em;
23
- --pf-v5-c-icon--m-sm__content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
24
- --pf-v5-c-icon--m-md__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
25
- --pf-v5-c-icon--m-lg__content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
26
- --pf-v5-c-icon--m-xl__content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
46
+ --pf-v5-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
47
+ --pf-v5-c-icon--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
48
+ --pf-v5-c-icon--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);
49
+ --pf-v5-c-icon--m-xl__content--FontSize: var(--pf-t--global--icon--size--xl);
50
+ --pf-v5-c-icon--m-2xl__content--FontSize: var(--pf-t--global--icon--size--2xl);
51
+ --pf-v5-c-icon--m-3xl__content--FontSize: var(--pf-t--global--icon--size--3xl);
52
+ --pf-v5-c-icon--m-body-sm__content--FontSize: var(--pf-t--global--icon--size--body--sm);
53
+ --pf-v5-c-icon--m-body-default__content--FontSize: var(--pf-t--global--icon--size--body--default);
54
+ --pf-v5-c-icon--m-body-lg__content--FontSize: var(--pf-t--global--icon--size--body--lg);
55
+ --pf-v5-c-icon--m-heading-sm__content--FontSize: var(--pf-t--global--icon--size--heading--h6);
56
+ --pf-v5-c-icon--m-heading-md__content--FontSize: var(--pf-t--global--icon--size--heading--h5);
57
+ --pf-v5-c-icon--m-heading-lg__content--FontSize: var(--pf-t--global--icon--size--heading--h4);
58
+ --pf-v5-c-icon--m-heading-xl__content--FontSize: var(--pf-t--global--icon--size--heading--h3);
59
+ --pf-v5-c-icon--m-heading-2xl__content--FontSize: var(--pf-t--global--icon--size--heading--h2);
60
+ --pf-v5-c-icon--m-heading-3xl__content--FontSize: var(--pf-t--global--icon--size--heading--h1);
27
61
  --pf-v5-c-icon--m-inline__content--FontSize: 1em;
62
+ }
63
+
64
+ .pf-v5-c-icon {
28
65
  position: relative;
29
66
  display: inline-flex;
30
67
  align-items: center;
@@ -62,6 +99,61 @@
62
99
  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-xl--Height);
63
100
  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
64
101
  }
102
+ .pf-v5-c-icon.pf-m-2xl {
103
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-2xl--Width);
104
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-2xl--Height);
105
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-2xl__content--FontSize);
106
+ }
107
+ .pf-v5-c-icon.pf-m-3xl {
108
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-3xl--Width);
109
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-3xl--Height);
110
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-3xl__content--FontSize);
111
+ }
112
+ .pf-v5-c-icon.pf-m-body-sm {
113
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-body-sm--Width);
114
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-body-sm--Height);
115
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-body-sm__content--FontSize);
116
+ }
117
+ .pf-v5-c-icon.pf-m-body-default {
118
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-body-default--Width);
119
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-body-default--Height);
120
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-body-default__content--FontSize);
121
+ }
122
+ .pf-v5-c-icon.pf-m-body-lg {
123
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-body-lg--Width);
124
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-body-lg--Height);
125
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
126
+ }
127
+ .pf-v5-c-icon.pf-m-heading-sm {
128
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-heading-sm--Width);
129
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-heading-sm--Height);
130
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-sm__content--FontSize);
131
+ }
132
+ .pf-v5-c-icon.pf-m-heading-md {
133
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-heading-md--Width);
134
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-heading-md--Height);
135
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-md__content--FontSize);
136
+ }
137
+ .pf-v5-c-icon.pf-m-heading-lg {
138
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-heading-lg--Width);
139
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-heading-lg--Height);
140
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-lg__content--FontSize);
141
+ }
142
+ .pf-v5-c-icon.pf-m-heading-xl {
143
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-heading-xl--Width);
144
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-heading-xl--Height);
145
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-xl__content--FontSize);
146
+ }
147
+ .pf-v5-c-icon.pf-m-heading-2xl {
148
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-heading-2xl--Width);
149
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-heading-2xl--Height);
150
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-2xl__content--FontSize);
151
+ }
152
+ .pf-v5-c-icon.pf-m-heading-3xl {
153
+ --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-heading-3xl--Width);
154
+ --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-heading-3xl--Height);
155
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-3xl__content--FontSize);
156
+ }
65
157
  .pf-v5-c-icon.pf-m-in-progress {
66
158
  --pf-v5-c-icon__content--Opacity: 0;
67
159
  --pf-v5-c-icon__progress--Opacity: 1;
@@ -91,6 +183,50 @@
91
183
  .pf-v5-c-icon__progress.pf-m-xl {
92
184
  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
93
185
  }
186
+ .pf-v5-c-icon__content.pf-m-2xl,
187
+ .pf-v5-c-icon__progress.pf-m-2xl {
188
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-2xl__content--FontSize);
189
+ }
190
+ .pf-v5-c-icon__content.pf-m-3xl,
191
+ .pf-v5-c-icon__progress.pf-m-3xl {
192
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-3xl__content--FontSize);
193
+ }
194
+ .pf-v5-c-icon__content.pf-m-body-sm,
195
+ .pf-v5-c-icon__progress.pf-m-body-sm {
196
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-body-sm__content--FontSize);
197
+ }
198
+ .pf-v5-c-icon__content.pf-m-body-default,
199
+ .pf-v5-c-icon__progress.pf-m-body-default {
200
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
201
+ }
202
+ .pf-v5-c-icon__content.pf-m-body-lg,
203
+ .pf-v5-c-icon__progress.pf-m-body-lg {
204
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
205
+ }
206
+ .pf-v5-c-icon__content.pf-m-heading-sm,
207
+ .pf-v5-c-icon__progress.pf-m-heading-sm {
208
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-sm__content--FontSize);
209
+ }
210
+ .pf-v5-c-icon__content.pf-m-heading-md,
211
+ .pf-v5-c-icon__progress.pf-m-heading-md {
212
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-md__content--FontSize);
213
+ }
214
+ .pf-v5-c-icon__content.pf-m-heading-lg,
215
+ .pf-v5-c-icon__progress.pf-m-heading-lg {
216
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-lg__content--FontSize);
217
+ }
218
+ .pf-v5-c-icon__content.pf-m-heading-xl,
219
+ .pf-v5-c-icon__progress.pf-m-heading-xl {
220
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-xl__content--FontSize);
221
+ }
222
+ .pf-v5-c-icon__content.pf-m-heading-2xl,
223
+ .pf-v5-c-icon__progress.pf-m-heading-2xl {
224
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-2xl__content--FontSize);
225
+ }
226
+ .pf-v5-c-icon__content.pf-m-heading-3xl,
227
+ .pf-v5-c-icon__progress.pf-m-heading-3xl {
228
+ --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-heading-3xl__content--FontSize);
229
+ }
94
230
 
95
231
  .pf-v5-c-icon__content {
96
232
  color: var(--pf-v5-c-icon__content--Color, inherit);