@patternfly/patternfly 6.5.0-prerelease.15 → 6.5.0-prerelease.17

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.
@@ -923,6 +923,22 @@
923
923
  var(--pf-t--global--box-shadow--color--lg--directional);
924
924
  --pf-t--global--list-style: disc outside;
925
925
  --pf-t--temp--dev--tbd: #BC11E0;
926
+ --pf-t--global--background--color--glass--filter: blur(12.5px);
927
+ --pf-t--global--background--color--glass--opacity: .85;
928
+ --pf-t--global--background--color--glass--default: rgba(255, 255, 255, var(--pf-t--global--background--color--glass--opacity));
929
+ --pf-t--global--dark--background--color--glass--filter: blur(12.5px);
930
+ --pf-t--global--dark--background--color--glass--opacity: .85;
931
+ --pf-t--global--dark--background--color--glass--default: rgba(29, 29, 29, var(--pf-t--global--background--color--glass--opacity));
932
+ }
933
+ :root:where(.pf-v6-theme-dark) {
934
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
935
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
936
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
937
+ }
938
+ :root:root:where(.pf-m-no-glass) {
939
+ --pf-t--global--background--color--glass--filter: none;
940
+ --pf-t--global--background--color--glass--opacity: 1;
941
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--primary--default);
926
942
  }
927
943
 
928
944
  :root:where(.pf-v6-theme-dark) {
@@ -133,5 +133,27 @@
133
133
 
134
134
  // stylelint-disable custom-property-pattern
135
135
  --pf-t--temp--dev--tbd: #BC11E0;
136
+ // stylelint-enable
136
137
 
138
+ // Compass/glass tokens
139
+ --pf-t--global--background--color--glass--filter: blur(12.5px);
140
+ --pf-t--global--background--color--glass--opacity: .85;
141
+ --pf-t--global--background--color--glass--default: rgba(255, 255, 255, var(--pf-t--global--background--color--glass--opacity));
142
+ --pf-t--global--dark--background--color--glass--filter: blur(12.5px);
143
+ --pf-t--global--dark--background--color--glass--opacity: .85;
144
+ --pf-t--global--dark--background--color--glass--default: rgba(29, 29, 29, var(--pf-t--global--background--color--glass--opacity));
145
+
146
+ // Compass/glass dark tokens
147
+ &:where(.pf-v6-theme-dark) {
148
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
149
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
150
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
151
+ }
152
+
153
+ // no glass theme
154
+ &:root:where(.pf-m-no-glass) {
155
+ --pf-t--global--background--color--glass--filter: none;
156
+ --pf-t--global--background--color--glass--opacity: 1;
157
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--primary--default);
158
+ }
137
159
  }
@@ -8,15 +8,8 @@
8
8
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9
9
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
11
- --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
12
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .85;
13
- --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
14
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 29,29,29;
15
- --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
16
- --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
17
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
18
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(12.5px);
19
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(12.5px);
11
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
20
13
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
21
14
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
22
15
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -129,16 +122,12 @@
129
122
 
130
123
  .pf-v6-c-compass__panel {
131
124
  padding: var(--pf-v6-c-compass__panel--Padding);
132
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
133
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
125
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
126
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
134
127
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
135
128
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
136
129
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
137
130
  }
138
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
139
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
140
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
141
- }
142
131
  .pf-v6-c-compass__panel.pf-m-no-border {
143
132
  border-width: 0;
144
133
  }
@@ -178,13 +167,6 @@
178
167
  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
179
168
  }
180
169
 
181
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
182
- --pf-v6-c-compass--glass--opacity: 100%;
183
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
184
- --pf-v6-c-compass--glass--blend-mode: none;
185
- --pf-v6-c-compass--glass--blend-mode--dark: none;
186
- }
187
-
188
170
  /* stylelint-disable */
189
171
  @media (max-width: 1200px) {
190
172
  .pf-v6-c-compass * {
@@ -10,15 +10,8 @@
10
10
  --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
11
11
  --#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
12
12
  --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
13
- --#{$compass}__panel--BackgroundColor--rgb--light: 255,255,255;
14
- --#{$compass}__panel--BackgroundColor--opacity--light: .85;
15
- --#{$compass}__panel--BackgroundColor--light: rgba(var(--#{$compass}__panel--BackgroundColor--rgb--light), var(--#{$compass}__panel--BackgroundColor--opacity--light));
16
- --#{$compass}__panel--BackgroundColor--rgb--dark: 29,29,29;
17
- --#{$compass}__panel--BackgroundColor--opacity--dark: .8;
18
- --#{$compass}__panel--BackgroundColor--dark: rgba(var(--#{$compass}__panel--BackgroundColor--rgb--dark), var(--#{$compass}__panel--BackgroundColor--opacity--dark));
19
- --#{$compass}__panel--BackdropFilter: var(--#{$compass}__panel--BackdropFilter--light);
20
- --#{$compass}__panel--BackdropFilter--light: blur(12.5px);
21
- --#{$compass}__panel--BackdropFilter--dark: blur(12.5px);
13
+ --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14
+ --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
22
15
  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
23
16
  --#{$compass}__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
24
17
  --#{$compass}__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -151,17 +144,12 @@
151
144
 
152
145
  .#{$compass}__panel {
153
146
  padding: var(--#{$compass}__panel--Padding);
154
- background-color: var(--#{$compass}__panel--BackgroundColor, var(--#{$compass}__panel--BackgroundColor--light));
155
- backdrop-filter: var(--#{$compass}__panel--BackdropFilter, var(--#{$compass}__panel--BackdropFilter--light));
147
+ background-color: var(--#{$compass}__panel--BackgroundColor);
148
+ backdrop-filter: var(--#{$compass}__panel--BackdropFilter);
156
149
  border: var(--#{$compass}__panel--BorderWidth) solid var(--#{$compass}__panel--BorderColor);
157
150
  border-radius: var(--#{$compass}__panel--BorderRadius);
158
151
  box-shadow: var(--#{$compass}__panel--BoxShadow);
159
152
 
160
- :root:where(.pf-v6-theme-dark) & {
161
- --#{$compass}__panel--BackdropFilter: var(--#{$compass}__panel--BackdropFilter--dark);
162
- --#{$compass}__panel--BackgroundColor: var(--#{$compass}__panel--BackgroundColor--dark);
163
- }
164
-
165
153
  &.pf-m-no-border {
166
154
  border-width: 0;
167
155
  }
@@ -213,13 +201,6 @@
213
201
  width: min(var(--#{$compass}__hero-body--Width), var(--#{$compass}__hero-body--MaxWidth));
214
202
  }
215
203
 
216
- :where(:root.pf-v6-theme-no-glass) .#{$compass} {
217
- --#{$compass}--glass--opacity: 100%;
218
- --#{$compass}--glass--border: var(--pf-t--global--border--color--default);
219
- --#{$compass}--glass--blend-mode: none;
220
- --#{$compass}--glass--blend-mode--dark: none;
221
- }
222
-
223
204
  :where(.pf-v6-theme-dark) .#{$compass} {
224
205
  // dark theme goes here
225
206
  }
@@ -53,6 +53,9 @@
53
53
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
54
54
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
55
55
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
56
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
57
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
58
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
56
59
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
57
60
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
58
61
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -313,6 +316,11 @@
313
316
  .pf-v6-c-drawer__panel.pf-m-no-background {
314
317
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
315
318
  }
319
+ .pf-v6-c-drawer__panel.pf-m-glass {
320
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
321
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
322
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
323
+ }
316
324
  @media screen and (min-width: 48rem) {
317
325
  .pf-v6-c-drawer__panel {
318
326
  --pf-v6-c-drawer__panel--FlexBasis:
@@ -67,6 +67,9 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
67
67
  --#{$drawer}--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
68
68
  --#{$drawer}--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
69
69
  --#{$drawer}--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
70
+ --#{$drawer}__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
71
+ --#{$drawer}__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
72
+ --#{$drawer}__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
70
73
 
71
74
  @media screen and (prefers-reduced-motion: no-preference) {
72
75
  --#{$drawer}__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
@@ -390,6 +393,13 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
390
393
  --#{$drawer}__panel--BackgroundColor: transparent;
391
394
  }
392
395
 
396
+ &.pf-m-glass {
397
+ --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-glass--BackgroundColor);
398
+ --#{$drawer}__panel--BorderColor: var(--#{$drawer}__panel--m-glass--BorderColor);
399
+
400
+ backdrop-filter: var(--#{$drawer}__panel--m-glass--BackdropFilter);
401
+ }
402
+
393
403
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
394
404
  --#{$drawer}__panel--FlexBasis:
395
405
  max(
@@ -449,7 +449,6 @@
449
449
  .pf-v6-c-tabs.pf-m-nav {
450
450
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
451
451
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
452
- --pf-v6-c-tabs__link--hover--BorderColor: transparent;
453
452
  --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
454
453
  }
455
454
  .pf-v6-c-tabs.pf-m-nav::before,
@@ -520,7 +520,6 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
520
520
  &.pf-m-nav {
521
521
  --#{$tabs}__link--disabled--BackgroundColor: transparent;
522
522
  --#{$tabs}__link--disabled--Color: var(--#{$tabs}--m-nav__link--disabled--Color);
523
- --#{$tabs}__link--hover--BorderColor: transparent;
524
523
  --#{$tabs}__link--BorderRadius: var(--#{$tabs}--m-nav__link--BorderRadius);
525
524
 
526
525
  &::before,
@@ -3517,15 +3517,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3517
3517
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3518
3518
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3519
3519
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3520
- --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
3521
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .85;
3522
- --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
3523
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 29,29,29;
3524
- --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
3525
- --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
3526
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
3527
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(12.5px);
3528
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(12.5px);
3520
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3521
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3529
3522
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3530
3523
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3531
3524
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -3638,16 +3631,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3638
3631
 
3639
3632
  .pf-v6-c-compass__panel {
3640
3633
  padding: var(--pf-v6-c-compass__panel--Padding);
3641
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
3642
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
3634
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3635
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3643
3636
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3644
3637
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3645
3638
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3646
3639
  }
3647
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
3648
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
3649
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
3650
- }
3651
3640
  .pf-v6-c-compass__panel.pf-m-no-border {
3652
3641
  border-width: 0;
3653
3642
  }
@@ -3687,13 +3676,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3687
3676
  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
3688
3677
  }
3689
3678
 
3690
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
3691
- --pf-v6-c-compass--glass--opacity: 100%;
3692
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
3693
- --pf-v6-c-compass--glass--blend-mode: none;
3694
- --pf-v6-c-compass--glass--blend-mode--dark: none;
3695
- }
3696
-
3697
3679
  /* stylelint-disable */
3698
3680
  @media (max-width: 1200px) {
3699
3681
  .pf-v6-c-compass * {
@@ -6035,6 +6017,9 @@ ul) {
6035
6017
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6036
6018
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6037
6019
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6020
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
6021
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
6022
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
6038
6023
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
6039
6024
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6040
6025
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -6295,6 +6280,11 @@ ul) {
6295
6280
  .pf-v6-c-drawer__panel.pf-m-no-background {
6296
6281
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
6297
6282
  }
6283
+ .pf-v6-c-drawer__panel.pf-m-glass {
6284
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6285
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6286
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6287
+ }
6298
6288
  @media screen and (min-width: 48rem) {
6299
6289
  .pf-v6-c-drawer__panel {
6300
6290
  --pf-v6-c-drawer__panel--FlexBasis:
@@ -20247,7 +20237,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20247
20237
  .pf-v6-c-tabs.pf-m-nav {
20248
20238
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20249
20239
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
20250
- --pf-v6-c-tabs__link--hover--BorderColor: transparent;
20251
20240
  --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
20252
20241
  }
20253
20242
  .pf-v6-c-tabs.pf-m-nav::before,