@patternfly/patternfly 6.5.0-prerelease.68 → 6.5.0-prerelease.69

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 (8) hide show
  1. package/components/Card/card.css +8 -8
  2. package/components/Card/card.scss +13 -11
  3. package/components/_index.css +8 -8
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +8 -8
  6. package/patternfly.css +8 -8
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -105,6 +105,13 @@
105
105
  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
106
106
  border-radius: inherit;
107
107
  }
108
+ :where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass {
109
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
110
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
111
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
112
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
113
+ backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
114
+ }
108
115
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
109
116
  gap: 0;
110
117
  }
@@ -187,6 +194,7 @@
187
194
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
188
195
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
189
196
  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
197
+ backdrop-filter: none;
190
198
  }
191
199
  .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
192
200
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
@@ -205,14 +213,6 @@
205
213
  .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
206
214
  padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
207
215
  }
208
- .pf-v6-c-card.pf-m-glass {
209
- --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
210
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
211
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
212
- --pf-v6-c-card--BorderStyle: solid;
213
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
214
- backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
215
- }
216
216
 
217
217
  .pf-v6-c-card__header {
218
218
  display: flex;
package/components/Card/card.scss CHANGED
@@ -143,6 +143,17 @@
143
143
  border-radius: inherit;
144
144
  }
145
145
 
146
+ :where(.pf-v6-theme-glass) & {
147
+ &.pf-m-glass {
148
+ --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
149
+ --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
150
+ --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
151
+ --#{$card}--BoxShadow: var(--#{$card}--m-glass--BoxShadow);
152
+
153
+ backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
154
+ }
155
+ }
156
+
146
157
  // SELECTABLE CARDS
147
158
  &.pf-m-selectable {
148
159
  // disables the gap since these have an empty label
@@ -267,6 +278,8 @@
267
278
  --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
268
279
  --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
269
280
 
281
+ backdrop-filter: none;
282
+
270
283
  // A clickable/selectable plain card should behave like a non-plain card in every way except the background color
271
284
  &.pf-m-selectable,
272
285
  &.pf-m-clickable {
@@ -278,7 +291,6 @@
278
291
  --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth);
279
292
  }
280
293
  }
281
-
282
294
  }
283
295
 
284
296
  &.pf-m-expanded {
@@ -299,16 +311,6 @@
299
311
  padding-block-start: var(--#{$card}--c-divider--child--PaddingBlockStart);
300
312
  }
301
313
  }
302
-
303
- &.pf-m-glass {
304
- --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
305
- --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
306
- --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
307
- --#{$card}--BorderStyle: solid;
308
- --#{$card}--BoxShadow: var(--#{$card}--m-glass--BoxShadow);
309
-
310
- backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
311
- }
312
314
  }
313
315
 
314
316
  .#{$card}__header {
package/components/_index.css CHANGED
@@ -2915,6 +2915,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2915
2915
  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
2916
2916
  border-radius: inherit;
2917
2917
  }
2918
+ :where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass {
2919
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
2920
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
2921
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
2922
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
2923
+ backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
2924
+ }
2918
2925
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
2919
2926
  gap: 0;
2920
2927
  }
@@ -2997,6 +3004,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2997
3004
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
2998
3005
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
2999
3006
  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
3007
+ backdrop-filter: none;
3000
3008
  }
3001
3009
  .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
3002
3010
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
@@ -3015,14 +3023,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3015
3023
  .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
3016
3024
  padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
3017
3025
  }
3018
- .pf-v6-c-card.pf-m-glass {
3019
- --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
3020
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
3021
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
3022
- --pf-v6-c-card--BorderStyle: solid;
3023
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
3024
- backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
3025
- }
3026
3026
 
3027
3027
  .pf-v6-c-card__header {
3028
3028
  display: flex;
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.5.0-prerelease.68",
4
+ "version": "6.5.0-prerelease.69",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -12062,6 +12062,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12062
12062
  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
12063
12063
  border-radius: inherit;
12064
12064
  }
12065
+ :where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass {
12066
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
12067
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
12068
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
12069
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
12070
+ backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
12071
+ }
12065
12072
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
12066
12073
  gap: 0;
12067
12074
  }
@@ -12144,6 +12151,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12144
12151
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
12145
12152
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
12146
12153
  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
12154
+ backdrop-filter: none;
12147
12155
  }
12148
12156
  .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
12149
12157
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
@@ -12162,14 +12170,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12162
12170
  .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
12163
12171
  padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
12164
12172
  }
12165
- .pf-v6-c-card.pf-m-glass {
12166
- --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
12167
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
12168
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
12169
- --pf-v6-c-card--BorderStyle: solid;
12170
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
12171
- backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
12172
- }
12173
12173
 
12174
12174
  .pf-v6-c-card__header {
12175
12175
  display: flex;
package/patternfly.css CHANGED
@@ -12209,6 +12209,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12209
12209
  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
12210
12210
  border-radius: inherit;
12211
12211
  }
12212
+ :where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass {
12213
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
12214
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
12215
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
12216
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
12217
+ backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
12218
+ }
12212
12219
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
12213
12220
  gap: 0;
12214
12221
  }
@@ -12291,6 +12298,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12291
12298
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
12292
12299
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
12293
12300
  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
12301
+ backdrop-filter: none;
12294
12302
  }
12295
12303
  .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
12296
12304
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
@@ -12309,14 +12317,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12309
12317
  .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
12310
12318
  padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
12311
12319
  }
12312
- .pf-v6-c-card.pf-m-glass {
12313
- --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
12314
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
12315
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
12316
- --pf-v6-c-card--BorderStyle: solid;
12317
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
12318
- backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
12319
- }
12320
12320
 
12321
12321
  .pf-v6-c-card__header {
12322
12322
  display: flex;