@patternfly/patternfly 6.0.0-alpha.41 → 6.0.0-alpha.43

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 (16) hide show
  1. package/components/Button/button.css +366 -347
  2. package/components/Button/button.scss +422 -471
  3. package/components/Spinner/spinner.css +4 -0
  4. package/components/Spinner/spinner.scss +3 -0
  5. package/components/TabContent/tab-content.css +17 -11
  6. package/components/TabContent/tab-content.scss +18 -14
  7. package/docs/components/Button/examples/Button.css +4 -0
  8. package/docs/components/Button/examples/Button.md +1380 -81
  9. package/docs/components/TabContent/examples/TabContent.md +10 -10
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +387 -358
  12. package/patternfly-theme-dark-unversioned.css +387 -358
  13. package/patternfly.css +387 -358
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/components/Button/themes/dark/button.scss +0 -51
package/components/Spinner/spinner.css CHANGED
@@ -1,3 +1,4 @@
1
+ :root,
1
2
  .pf-v5-c-spinner {
2
3
  --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
3
4
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
@@ -8,6 +9,9 @@
8
9
  --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
9
10
  --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
10
11
  --pf-v5-c-spinner--m-inline--diameter: 1em;
12
+ }
13
+
14
+ .pf-v5-c-spinner {
11
15
  width: var(--pf-v5-c-spinner--Width);
12
16
  height: var(--pf-v5-c-spinner--Height);
13
17
  overflow: hidden;
package/components/Spinner/spinner.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  // @debug $spinner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$spinner} {
4
5
  --#{$spinner}--diameter: var(--#{$pf-global}--icon--FontSize--xl);
5
6
  --#{$spinner}--Width: var(--#{$spinner}--diameter);
@@ -14,7 +15,9 @@
14
15
 
15
16
  // inline
16
17
  --#{$spinner}--m-inline--diameter: 1em;
18
+ }
17
19
 
20
+ .#{$spinner} {
18
21
  width: var(--#{$spinner}--Width);
19
22
  height: var(--#{$spinner}--Height);
20
23
  overflow: hidden;
package/components/TabContent/tab-content.css CHANGED
@@ -1,17 +1,23 @@
1
+ :root,
1
2
  .pf-v5-c-tab-content {
2
3
  --pf-v5-c-tab-content__body--PaddingTop: 0;
3
4
  --pf-v5-c-tab-content__body--PaddingRight: 0;
4
5
  --pf-v5-c-tab-content__body--PaddingBottom: 0;
5
6
  --pf-v5-c-tab-content__body--PaddingLeft: 0;
6
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
7
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
8
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
9
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
10
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
11
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
12
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
13
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
14
- --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
7
+ --pf-v5-c-tab-content--BackgroundColor: transparent;
8
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
9
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
10
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
11
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
12
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
13
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
14
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
15
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
16
+ --pf-v5-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
17
+ }
18
+
19
+ .pf-v5-c-tab-content {
20
+ background-color: var(--pf-v5-c-tab-content--BackgroundColor);
15
21
  }
16
22
  @media screen and (min-width: 1200px) {
17
23
  .pf-v5-c-tab-content {
@@ -21,8 +27,8 @@
21
27
  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
22
28
  }
23
29
  }
24
- .pf-v5-c-tab-content.pf-m-light-300 {
25
- background-color: var(--pf-v5-c-tab-content--m-light-300);
30
+ .pf-v5-c-tab-content.pf-m-secondary {
31
+ --pf-v5-c-tab-content--BackgroundColor: var(--pf-v5-c-tab-content--m-secondary--BackgroundColor);
26
32
  }
27
33
 
28
34
  .pf-v5-c-tab-content__body {
package/components/TabContent/tab-content.scss CHANGED
@@ -1,25 +1,30 @@
1
1
  // @debug $tab-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
-
2
+ :root,
3
3
  .#{$tab-content} {
4
4
  --#{$tab-content}__body--PaddingTop: 0;
5
5
  --#{$tab-content}__body--PaddingRight: 0;
6
6
  --#{$tab-content}__body--PaddingBottom: 0;
7
7
  --#{$tab-content}__body--PaddingLeft: 0;
8
+ --#{$tab-content}--BackgroundColor: transparent;
8
9
 
9
10
  // Padding
10
- --#{$tab-content}__body--m-padding--PaddingTop: var(--#{$pf-global}--spacer--md);
11
- --#{$tab-content}__body--m-padding--PaddingRight: var(--#{$pf-global}--spacer--md);
12
- --#{$tab-content}__body--m-padding--PaddingBottom: var(--#{$pf-global}--spacer--md);
13
- --#{$tab-content}__body--m-padding--PaddingLeft: var(--#{$pf-global}--spacer--md);
11
+ --#{$tab-content}__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
12
+ --#{$tab-content}__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
13
+ --#{$tab-content}__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
14
+ --#{$tab-content}__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
14
15
 
15
16
  // Match page padding
16
- --#{$tab-content}__body--m-padding--xl--PaddingTop: var(--#{$pf-global}--spacer--lg);
17
- --#{$tab-content}__body--m-padding--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
18
- --#{$tab-content}__body--m-padding--xl--PaddingBottom: var(--#{$pf-global}--spacer--lg);
19
- --#{$tab-content}__body--m-padding--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
17
+ --#{$tab-content}__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
18
+ --#{$tab-content}__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
19
+ --#{$tab-content}__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
20
+ --#{$tab-content}__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
20
21
 
21
- // Light
22
- --#{$tab-content}--m-light-300: var(--#{$pf-global}--BackgroundColor--light-300);
22
+ // Secondary modifier
23
+ --#{$tab-content}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24
+ }
25
+
26
+ .#{$tab-content} {
27
+ background-color: var(--#{$tab-content}--BackgroundColor);
23
28
 
24
29
  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
25
30
  --#{$tab-content}__body--m-padding--PaddingTop: var(--#{$tab-content}__body--m-padding--xl--PaddingTop);
@@ -28,9 +33,8 @@
28
33
  --#{$tab-content}__body--m-padding--PaddingLeft: var(--#{$tab-content}__body--m-padding--xl--PaddingLeft);
29
34
  }
30
35
 
31
-
32
- &.pf-m-light-300 {
33
- background-color: var(--#{$tab-content}--m-light-300);
36
+ &.pf-m-secondary {
37
+ --#{$tab-content}--BackgroundColor: var(--#{$tab-content}--m-secondary--BackgroundColor);
34
38
  }
35
39
  }
36
40
 
package/docs/components/Button/examples/Button.css CHANGED
@@ -2,3 +2,7 @@
2
2
  margin-inline-end: 6px;
3
3
  margin-block-end: 6px;
4
4
  }
5
+
6
+ #ws-core-c-button-plain-with-no-padding .pf-v5-c-button {
7
+ margin: 0;
8
+ }