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

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 (9) hide show
  1. package/components/TabContent/tab-content.css +17 -11
  2. package/components/TabContent/tab-content.scss +18 -14
  3. package/docs/components/TabContent/examples/TabContent.md +10 -10
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +17 -11
  6. package/patternfly-theme-dark-unversioned.css +17 -11
  7. package/patternfly.css +17 -11
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
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/TabContent/examples/TabContent.md CHANGED
@@ -86,20 +86,20 @@ cssPrefix: pf-v5-c-tab-content
86
86
 
87
87
  ```
88
88
 
89
- ### Light 300 background
89
+ ### Secondary
90
90
 
91
91
  ```html
92
92
  <section
93
- class="pf-v5-c-tab-content pf-m-light-300"
94
- id="light-300-tab1-panel"
93
+ class="pf-v5-c-tab-content pf-m-secondary"
94
+ id="secondary-tab1-panel"
95
95
  role="tabpanel"
96
96
  tabindex="0"
97
97
  >
98
98
  <div class="pf-v5-c-tab-content__body">Panel 1</div>
99
99
  </section>
100
100
  <section
101
- class="pf-v5-c-tab-content pf-m-light-300"
102
- id="light-300-tab2-panel"
101
+ class="pf-v5-c-tab-content pf-m-secondary"
102
+ id="secondary-tab2-panel"
103
103
  role="tabpanel"
104
104
  tabindex="0"
105
105
  hidden
@@ -107,8 +107,8 @@ cssPrefix: pf-v5-c-tab-content
107
107
  <div class="pf-v5-c-tab-content__body">Panel 2</div>
108
108
  </section>
109
109
  <section
110
- class="pf-v5-c-tab-content pf-m-light-300"
111
- id="light-300-tab3-panel"
110
+ class="pf-v5-c-tab-content pf-m-secondary"
111
+ id="secondary-tab3-panel"
112
112
  role="tabpanel"
113
113
  tabindex="0"
114
114
  hidden
@@ -116,8 +116,8 @@ cssPrefix: pf-v5-c-tab-content
116
116
  <div class="pf-v5-c-tab-content__body">Panel 3</div>
117
117
  </section>
118
118
  <section
119
- class="pf-v5-c-tab-content pf-m-light-300"
120
- id="light-300-tab4-panel"
119
+ class="pf-v5-c-tab-content pf-m-secondary"
120
+ id="secondary-tab4-panel"
121
121
  role="tabpanel"
122
122
  tabindex="0"
123
123
  hidden
@@ -150,4 +150,4 @@ Tab content should be used with the [tabs component](/components/tabs).
150
150
  | `.pf-v5-c-tab-content` | `<section>` | Initiates the tab content component. **Required** |
151
151
  | `.pf-v5-c-tab-content__body` | `<div>` | Initiates the tab content body component. |
152
152
  | `.pf-m-padding` | `.pf-v5-c-tab-content__body` | Modifies the tab content body component padding. |
153
- | `.pf-m-light-300` | `.pf-v5-c-tab-content` | Modifies the tab content component background color. |
153
+ | `.pf-m-secondary` | `.pf-v5-c-tab-content` | Modifies the tab content component for secondary styles. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.41",
4
+ "version": "6.0.0-alpha.42",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -25365,20 +25365,26 @@ svg.pf-v5-c-spinner.pf-m-xl {
25365
25365
  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25366
25366
  }
25367
25367
 
25368
+ :root,
25368
25369
  .pf-v5-c-tab-content {
25369
25370
  --pf-v5-c-tab-content__body--PaddingTop: 0;
25370
25371
  --pf-v5-c-tab-content__body--PaddingRight: 0;
25371
25372
  --pf-v5-c-tab-content__body--PaddingBottom: 0;
25372
25373
  --pf-v5-c-tab-content__body--PaddingLeft: 0;
25373
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
25374
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
25375
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
25376
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
25377
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
25378
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
25379
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
25380
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
25381
- --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
25374
+ --pf-v5-c-tab-content--BackgroundColor: transparent;
25375
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
25376
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
25377
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
25378
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
25379
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
25380
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
25381
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
25382
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
25383
+ --pf-v5-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25384
+ }
25385
+
25386
+ .pf-v5-c-tab-content {
25387
+ background-color: var(--pf-v5-c-tab-content--BackgroundColor);
25382
25388
  }
25383
25389
  @media screen and (min-width: 1200px) {
25384
25390
  .pf-v5-c-tab-content {
@@ -25388,8 +25394,8 @@ svg.pf-v5-c-spinner.pf-m-xl {
25388
25394
  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
25389
25395
  }
25390
25396
  }
25391
- .pf-v5-c-tab-content.pf-m-light-300 {
25392
- background-color: var(--pf-v5-c-tab-content--m-light-300);
25397
+ .pf-v5-c-tab-content.pf-m-secondary {
25398
+ --pf-v5-c-tab-content--BackgroundColor: var(--pf-v5-c-tab-content--m-secondary--BackgroundColor);
25393
25399
  }
25394
25400
 
25395
25401
  .pf-v5-c-tab-content__body {
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -25482,20 +25482,26 @@ svg.pf-v5-c-spinner.pf-m-xl {
25482
25482
  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25483
25483
  }
25484
25484
 
25485
+ :root,
25485
25486
  .pf-v5-c-tab-content {
25486
25487
  --pf-v5-c-tab-content__body--PaddingTop: 0;
25487
25488
  --pf-v5-c-tab-content__body--PaddingRight: 0;
25488
25489
  --pf-v5-c-tab-content__body--PaddingBottom: 0;
25489
25490
  --pf-v5-c-tab-content__body--PaddingLeft: 0;
25490
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
25491
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
25492
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
25493
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
25494
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
25495
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
25496
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
25497
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
25498
- --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
25491
+ --pf-v5-c-tab-content--BackgroundColor: transparent;
25492
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
25493
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
25494
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
25495
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
25496
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
25497
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
25498
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
25499
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
25500
+ --pf-v5-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25501
+ }
25502
+
25503
+ .pf-v5-c-tab-content {
25504
+ background-color: var(--pf-v5-c-tab-content--BackgroundColor);
25499
25505
  }
25500
25506
  @media screen and (min-width: 1200px) {
25501
25507
  .pf-v5-c-tab-content {
@@ -25505,8 +25511,8 @@ svg.pf-v5-c-spinner.pf-m-xl {
25505
25511
  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
25506
25512
  }
25507
25513
  }
25508
- .pf-v5-c-tab-content.pf-m-light-300 {
25509
- background-color: var(--pf-v5-c-tab-content--m-light-300);
25514
+ .pf-v5-c-tab-content.pf-m-secondary {
25515
+ --pf-v5-c-tab-content--BackgroundColor: var(--pf-v5-c-tab-content--m-secondary--BackgroundColor);
25510
25516
  }
25511
25517
 
25512
25518
  .pf-v5-c-tab-content__body {
package/patternfly.css CHANGED
@@ -25482,20 +25482,26 @@ svg.pf-v5-c-spinner.pf-m-xl {
25482
25482
  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25483
25483
  }
25484
25484
 
25485
+ :root,
25485
25486
  .pf-v5-c-tab-content {
25486
25487
  --pf-v5-c-tab-content__body--PaddingTop: 0;
25487
25488
  --pf-v5-c-tab-content__body--PaddingRight: 0;
25488
25489
  --pf-v5-c-tab-content__body--PaddingBottom: 0;
25489
25490
  --pf-v5-c-tab-content__body--PaddingLeft: 0;
25490
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
25491
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
25492
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
25493
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
25494
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
25495
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
25496
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
25497
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
25498
- --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
25491
+ --pf-v5-c-tab-content--BackgroundColor: transparent;
25492
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
25493
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
25494
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
25495
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
25496
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
25497
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
25498
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
25499
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
25500
+ --pf-v5-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25501
+ }
25502
+
25503
+ .pf-v5-c-tab-content {
25504
+ background-color: var(--pf-v5-c-tab-content--BackgroundColor);
25499
25505
  }
25500
25506
  @media screen and (min-width: 1200px) {
25501
25507
  .pf-v5-c-tab-content {
@@ -25505,8 +25511,8 @@ svg.pf-v5-c-spinner.pf-m-xl {
25505
25511
  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
25506
25512
  }
25507
25513
  }
25508
- .pf-v5-c-tab-content.pf-m-light-300 {
25509
- background-color: var(--pf-v5-c-tab-content--m-light-300);
25514
+ .pf-v5-c-tab-content.pf-m-secondary {
25515
+ --pf-v5-c-tab-content--BackgroundColor: var(--pf-v5-c-tab-content--m-secondary--BackgroundColor);
25510
25516
  }
25511
25517
 
25512
25518
  .pf-v5-c-tab-content__body {