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

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/Compass/compass.css +7 -4
  2. package/components/Compass/compass.scss +11 -4
  3. package/components/_index.css +7 -4
  4. package/docs/components/Compass/examples/Compass.md +1 -0
  5. package/package.json +5 -2
  6. package/patternfly-no-globals.css +7 -4
  7. package/patternfly.css +7 -4
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Compass/compass.css CHANGED
@@ -9,14 +9,14 @@
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
11
  --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
12
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
12
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .85;
13
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: 0,0,0;
14
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 29,29,29;
15
15
  --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
16
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
17
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
18
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
19
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
18
+ --pf-v6-c-compass__panel--BackdropFilter--light: blur(12.5px);
19
+ --pf-v6-c-compass__panel--BackdropFilter--dark: blur(12.5px);
20
20
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
21
21
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
22
22
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -56,6 +56,9 @@
56
56
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
57
57
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
58
58
  }
59
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
60
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
61
+ }
59
62
 
60
63
  .pf-v6-c-compass__header {
61
64
  display: grid;
package/components/Compass/compass.scss CHANGED
@@ -11,14 +11,14 @@
11
11
  --#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
12
12
  --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
13
13
  --#{$compass}__panel--BackgroundColor--rgb--light: 255,255,255;
14
- --#{$compass}__panel--BackgroundColor--opacity--light: .8;
14
+ --#{$compass}__panel--BackgroundColor--opacity--light: .85;
15
15
  --#{$compass}__panel--BackgroundColor--light: rgba(var(--#{$compass}__panel--BackgroundColor--rgb--light), var(--#{$compass}__panel--BackgroundColor--opacity--light));
16
- --#{$compass}__panel--BackgroundColor--rgb--dark: 0,0,0;
16
+ --#{$compass}__panel--BackgroundColor--rgb--dark: 29,29,29;
17
17
  --#{$compass}__panel--BackgroundColor--opacity--dark: .8;
18
18
  --#{$compass}__panel--BackgroundColor--dark: rgba(var(--#{$compass}__panel--BackgroundColor--rgb--dark), var(--#{$compass}__panel--BackgroundColor--opacity--dark));
19
19
  --#{$compass}__panel--BackdropFilter: var(--#{$compass}__panel--BackdropFilter--light);
20
- --#{$compass}__panel--BackdropFilter--light: blur(75px);
21
- --#{$compass}__panel--BackdropFilter--dark: blur(75px);
20
+ --#{$compass}__panel--BackdropFilter--light: blur(12.5px);
21
+ --#{$compass}__panel--BackdropFilter--dark: blur(12.5px);
22
22
  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
23
23
  --#{$compass}__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
24
24
  --#{$compass}__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -61,6 +61,13 @@
61
61
  :root:where(.pf-v6-theme-dark) & {
62
62
  --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
63
63
  }
64
+
65
+ @at-root .#{$compass}__panel,
66
+ & {
67
+ &.pf-m-no-glass {
68
+ --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
69
+ }
70
+ }
64
71
  }
65
72
 
66
73
  .#{$compass}__header {
package/components/_index.css CHANGED
@@ -3518,14 +3518,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
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
3520
  --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
3521
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
3521
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .85;
3522
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: 0,0,0;
3523
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 29,29,29;
3524
3524
  --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
3525
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
3526
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
3527
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
3528
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
3527
+ --pf-v6-c-compass__panel--BackdropFilter--light: blur(12.5px);
3528
+ --pf-v6-c-compass__panel--BackdropFilter--dark: blur(12.5px);
3529
3529
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3530
3530
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3531
3531
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -3565,6 +3565,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3565
3565
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3566
3566
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3567
3567
  }
3568
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
3569
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3570
+ }
3568
3571
 
3569
3572
  .pf-v6-c-compass__header {
3570
3573
  display: grid;
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -56,6 +56,7 @@ cssPrefix: pf-v6-c-compass
56
56
  | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
57
57
  | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. **Required** |
58
58
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
59
+ | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
59
60
  | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for start styles. **Required** |
60
61
  | `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for end styles. **Required** |
61
62
  | `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a compass panel to remove the border. |
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.13",
4
+ "version": "6.5.0-prerelease.15",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -48,11 +48,14 @@
48
48
  "@commitlint/config-conventional": "^19.1.0",
49
49
  "@fortawesome/fontawesome": "^1.1.8",
50
50
  "@octokit/rest": "^20.1.0",
51
- "@patternfly/documentation-framework": "6.28.10",
51
+ "@patternfly/documentation-framework": "6.29.0",
52
52
  "@patternfly/patternfly-a11y": "5.1.0",
53
53
  "@patternfly/react-code-editor": "6.4.0",
54
54
  "@patternfly/react-core": "6.4.0",
55
55
  "@patternfly/react-table": "6.4.0",
56
+ "@rspack/cli": "^1.6.0",
57
+ "@rspack/core": "^1.6.0",
58
+ "@rspack/dev-server": "^1.1.4",
56
59
  "@starptech/prettyhtml": "^0.10.0",
57
60
  "backstopjs": "^6.3.25",
58
61
  "cheerio": "^1.0.0-rc.12",
package/patternfly-no-globals.css CHANGED
@@ -12236,14 +12236,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12236
12236
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12237
12237
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12238
12238
  --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
12239
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
12239
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .85;
12240
12240
  --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));
12241
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 0,0,0;
12241
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 29,29,29;
12242
12242
  --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
12243
12243
  --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));
12244
12244
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
12245
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
12246
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
12245
+ --pf-v6-c-compass__panel--BackdropFilter--light: blur(12.5px);
12246
+ --pf-v6-c-compass__panel--BackdropFilter--dark: blur(12.5px);
12247
12247
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12248
12248
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12249
12249
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -12283,6 +12283,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12283
12283
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12284
12284
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12285
12285
  }
12286
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
12287
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12288
+ }
12286
12289
 
12287
12290
  .pf-v6-c-compass__header {
12288
12291
  display: grid;
package/patternfly.css CHANGED
@@ -12383,14 +12383,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12383
12383
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12384
12384
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12385
12385
  --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
12386
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
12386
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .85;
12387
12387
  --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));
12388
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 0,0,0;
12388
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 29,29,29;
12389
12389
  --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
12390
12390
  --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));
12391
12391
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
12392
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
12393
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
12392
+ --pf-v6-c-compass__panel--BackdropFilter--light: blur(12.5px);
12393
+ --pf-v6-c-compass__panel--BackdropFilter--dark: blur(12.5px);
12394
12394
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12395
12395
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12396
12396
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -12430,6 +12430,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12430
12430
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12431
12431
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12432
12432
  }
12433
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
12434
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12435
+ }
12433
12436
 
12434
12437
  .pf-v6-c-compass__header {
12435
12438
  display: grid;