@patternfly/patternfly 6.5.0-prerelease.52 → 6.5.0-prerelease.53

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 (12) hide show
  1. package/components/Card/card.css +20 -8
  2. package/components/Card/card.scss +26 -7
  3. package/components/_index.css +20 -8
  4. package/docs/demos/Card/examples/Card.md +564 -86
  5. package/docs/demos/CardView/examples/CardView.md +15 -1
  6. package/docs/demos/Compass/examples/Compass.md +393 -82
  7. package/docs/demos/Dashboard/examples/Dashboard.md +434 -100
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +20 -8
  10. package/patternfly.css +20 -8
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
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.52",
4
+ "version": "6.5.0-prerelease.53",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11870,10 +11870,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11870
11870
 
11871
11871
  .pf-v6-c-card {
11872
11872
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11873
- --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
11873
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
11874
11874
  --pf-v6-c-card--BorderStyle: solid;
11875
11875
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
11876
11876
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
11877
+ --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
11877
11878
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11878
11879
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11879
11880
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -11903,7 +11904,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11903
11904
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
11904
11905
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11905
11906
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
11906
- --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
11907
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
11908
+ --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
11907
11909
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
11908
11910
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
11909
11911
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -11940,13 +11942,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11940
11942
  --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
11941
11943
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
11942
11944
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11943
- --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
11944
- --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11945
11945
  --pf-v6-c-card--m-full-height--Height: 100%;
11946
11946
  --pf-v6-c-card--m-plain--BorderColor: transparent;
11947
11947
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
11948
+ --pf-v6-c-card--m-plain--BoxShadow: none;
11948
11949
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
11949
11950
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
11951
+ --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
11952
+ --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
11950
11953
  }
11951
11954
 
11952
11955
  .pf-v6-c-card {
@@ -11957,6 +11960,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11957
11960
  background-color: var(--pf-v6-c-card--BackgroundColor);
11958
11961
  border: 0;
11959
11962
  border-radius: var(--pf-v6-c-card--BorderRadius);
11963
+ box-shadow: var(--pf-v6-c-card--BoxShadow);
11960
11964
  }
11961
11965
  .pf-v6-c-card::before {
11962
11966
  position: absolute;
@@ -11970,6 +11974,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11970
11974
  gap: 0;
11971
11975
  }
11972
11976
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
11977
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
11973
11978
  isolation: isolate;
11974
11979
  }
11975
11980
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -12004,12 +12009,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12004
12009
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
12005
12010
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
12006
12011
  }
12007
- .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
12012
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
12013
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
12014
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
12015
+ }
12016
+
12017
+ .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
12008
12018
  --pf-v6-c-card__actions--PaddingInlineStart: 0;
12009
12019
  --pf-v6-c-card__actions--MarginBlockStart: 0;
12010
12020
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
12011
12021
  }
12012
-
12013
12022
  .pf-v6-c-card.pf-m-compact {
12014
12023
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
12015
12024
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -12033,13 +12042,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12033
12042
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
12034
12043
  }
12035
12044
  .pf-v6-c-card.pf-m-secondary {
12036
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
12037
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
12038
12045
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
12039
12046
  }
12047
+ .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
12048
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
12049
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
12050
+ }
12040
12051
  .pf-v6-c-card.pf-m-plain {
12041
12052
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
12042
12053
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
12054
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
12043
12055
  }
12044
12056
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
12045
12057
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
package/patternfly.css CHANGED
@@ -12017,10 +12017,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12017
12017
 
12018
12018
  .pf-v6-c-card {
12019
12019
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12020
- --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
12020
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
12021
12021
  --pf-v6-c-card--BorderStyle: solid;
12022
12022
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
12023
12023
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
12024
+ --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
12024
12025
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
12025
12026
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12026
12027
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -12050,7 +12051,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12050
12051
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12051
12052
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
12052
12053
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
12053
- --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
12054
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
12055
+ --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
12054
12056
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
12055
12057
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
12056
12058
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -12087,13 +12089,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12087
12089
  --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
12088
12090
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
12089
12091
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12090
- --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
12091
- --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
12092
12092
  --pf-v6-c-card--m-full-height--Height: 100%;
12093
12093
  --pf-v6-c-card--m-plain--BorderColor: transparent;
12094
12094
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
12095
+ --pf-v6-c-card--m-plain--BoxShadow: none;
12095
12096
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
12096
12097
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
12098
+ --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
12099
+ --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
12097
12100
  }
12098
12101
 
12099
12102
  .pf-v6-c-card {
@@ -12104,6 +12107,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12104
12107
  background-color: var(--pf-v6-c-card--BackgroundColor);
12105
12108
  border: 0;
12106
12109
  border-radius: var(--pf-v6-c-card--BorderRadius);
12110
+ box-shadow: var(--pf-v6-c-card--BoxShadow);
12107
12111
  }
12108
12112
  .pf-v6-c-card::before {
12109
12113
  position: absolute;
@@ -12117,6 +12121,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12117
12121
  gap: 0;
12118
12122
  }
12119
12123
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
12124
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
12120
12125
  isolation: isolate;
12121
12126
  }
12122
12127
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -12151,12 +12156,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12151
12156
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
12152
12157
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
12153
12158
  }
12154
- .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
12159
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
12160
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
12161
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
12162
+ }
12163
+
12164
+ .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
12155
12165
  --pf-v6-c-card__actions--PaddingInlineStart: 0;
12156
12166
  --pf-v6-c-card__actions--MarginBlockStart: 0;
12157
12167
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
12158
12168
  }
12159
-
12160
12169
  .pf-v6-c-card.pf-m-compact {
12161
12170
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
12162
12171
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -12180,13 +12189,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12180
12189
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
12181
12190
  }
12182
12191
  .pf-v6-c-card.pf-m-secondary {
12183
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
12184
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
12185
12192
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
12186
12193
  }
12194
+ .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
12195
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
12196
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
12197
+ }
12187
12198
  .pf-v6-c-card.pf-m-plain {
12188
12199
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
12189
12200
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
12201
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
12190
12202
  }
12191
12203
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
12192
12204
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));