@patternfly/patternfly 6.0.0-alpha.14 → 6.0.0-alpha.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/Hint/hint.css +28 -21
  2. package/components/Hint/hint.scss +28 -24
  3. package/package.json +1 -1
  4. package/patternfly-no-globals.css +28 -26
  5. package/patternfly-theme-dark-unversioned.css +28 -26
  6. package/patternfly.css +28 -26
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
  9. package/components/Hint/themes/dark/hint.scss +0 -8
package/components/Hint/hint.css CHANGED
@@ -1,19 +1,26 @@
1
- .pf-v5-c-hint {
2
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
3
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
4
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
5
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
6
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
7
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
8
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
9
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
10
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
11
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
12
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
13
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
14
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
15
- --pf-v5-c-hint__actions--MarginLeft: var(--pf-v5-global--spacer--2xl);
1
+ :root {
2
+ --pf-v5-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
3
+ --pf-v5-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
4
+ --pf-v5-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
5
+ --pf-v5-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
6
+ --pf-v5-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
7
+ --pf-v5-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8
+ --pf-v5-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
9
+ --pf-v5-c-hint--BorderWidth: var(--pf-t--global--border--width--200);
10
+ --pf-v5-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
11
+ --pf-v5-c-hint--Color: var(--pf-t--global--text--color--regular);
12
+ --pf-v5-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
13
+ --pf-v5-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
14
+ --pf-v5-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
15
+ --pf-v5-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16
+ --pf-v5-c-hint__body--FontSize: var(--pf-t--global--font--size--body--md);
17
+ --pf-v5-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
18
+ --pf-v5-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
19
+ --pf-v5-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
16
20
  --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
21
+ }
22
+
23
+ .pf-v5-c-hint {
17
24
  display: grid;
18
25
  grid-template-columns: 1fr auto;
19
26
  grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
@@ -24,7 +31,7 @@
24
31
  color: var(--pf-v5-c-hint--Color);
25
32
  background-color: var(--pf-v5-c-hint--BackgroundColor);
26
33
  border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
27
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
34
+ border-radius: var(--pf-v5-c-hint--BorderRadius);
28
35
  }
29
36
  .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
30
37
  text-align: start;
@@ -47,7 +54,11 @@
47
54
  }
48
55
 
49
56
  .pf-v5-c-hint__title {
57
+ align-self: center;
58
+ font-family: var(--pf-v5-c-hint__title--FontFamily);
50
59
  font-size: var(--pf-v5-c-hint__title--FontSize);
60
+ font-weight: var(--pf-v5-c-hint__title--FontWeight);
61
+ line-height: var(--pf-v5-c-hint__title--LineHeight);
51
62
  }
52
63
 
53
64
  .pf-v5-c-hint__body {
@@ -57,12 +68,8 @@
57
68
 
58
69
  .pf-v5-c-hint__footer {
59
70
  grid-column: 1/-1;
71
+ margin-block-start: var(--pf-v5-c-hint__footer--MarginTop);
60
72
  }
61
73
  .pf-v5-c-hint__footer > :not(:last-child) {
62
74
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
63
- }
64
-
65
- :where(.pf-v5-theme-dark) .pf-v5-c-hint {
66
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
67
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
68
75
  }
package/components/Hint/hint.scss CHANGED
@@ -1,30 +1,36 @@
1
1
  // @debug $hint; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$hint} {
4
- --#{$hint}--GridRowGap: var(--#{$pf-global}--spacer--md);
5
- --#{$hint}--PaddingTop: var(--#{$pf-global}--spacer--lg);
6
- --#{$hint}--PaddingRight: var(--#{$pf-global}--spacer--lg);
7
- --#{$hint}--PaddingBottom: var(--#{$pf-global}--spacer--lg);
8
- --#{$hint}--PaddingLeft: var(--#{$pf-global}--spacer--lg);
9
- --#{$hint}--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
10
- --#{$hint}--BorderColor: var(--#{$pf-global}--palette--blue-100);
11
- --#{$hint}--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
12
- --#{$hint}--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
13
- --#{$hint}--Color: var(--#{$pf-global}--Color--100);
3
+ :root {
4
+ --#{$hint}--GridRowGap: var(--pf-t--global--spacer--sm);
5
+ --#{$hint}--PaddingTop: var(--pf-t--global--spacer--lg);
6
+ --#{$hint}--PaddingRight: var(--pf-t--global--spacer--lg);
7
+ --#{$hint}--PaddingBottom: var(--pf-t--global--spacer--lg);
8
+ --#{$hint}--PaddingLeft: var(--pf-t--global--spacer--lg);
9
+ --#{$hint}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
10
+ --#{$hint}--BorderColor: var(--pf-t--global--border--color--status--info--default);
11
+ --#{$hint}--BorderWidth: var(--pf-t--global--border--width--200); // TODO - need semantic variable
12
+ --#{$hint}--BorderRadius: var(--pf-t--global--border--radius--medium);
13
+ --#{$hint}--Color: var(--pf-t--global--text--color--regular);
14
14
 
15
15
  // Hint Title
16
- --#{$hint}__title--FontSize: var(--#{$pf-global}--FontSize--lg);
16
+ --#{$hint}__title--FontFamily: var(--pf-t--global--font--family--heading);
17
+ --#{$hint}__title--FontSize: var(--pf-t--global--font--size--heading--xs);
18
+ --#{$hint}__title--FontWeight: var(--pf-t--global--font--weight--heading);
19
+ --#{$hint}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
17
20
 
18
21
  // Hint Body
19
- --#{$hint}__body--FontSize: var(--#{$pf-global}--FontSize--md);
22
+ --#{$hint}__body--FontSize: var(--pf-t--global--font--size--body--md);
20
23
 
21
24
  // Hint Footer
22
- --#{$hint}__footer--child--MarginRight: var(--#{$pf-global}--spacer--md);
25
+ --#{$hint}__footer--MarginTop: var(--pf-t--global--spacer--sm);
26
+ --#{$hint}__footer--child--MarginRight: var(--pf-t--global--spacer--md);
23
27
 
24
28
  // Hint Actions
25
- --#{$hint}__actions--MarginLeft: var(--#{$pf-global}--spacer--2xl);
26
- --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
29
+ --#{$hint}__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
30
+ --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO form element spacer
31
+ }
27
32
 
33
+ .#{$hint} {
28
34
  display: grid;
29
35
  grid-template-columns: 1fr auto;
30
36
  grid-row-gap: var(--#{$hint}--GridRowGap);
@@ -35,7 +41,7 @@
35
41
  color: var(--#{$hint}--Color);
36
42
  background-color: var(--#{$hint}--BackgroundColor);
37
43
  border: var(--#{$hint}--BorderWidth) solid var(--#{$hint}--BorderColor);
38
- box-shadow: var(--#{$hint}--BoxShadow);
44
+ border-radius: var(--#{$hint}--BorderRadius);
39
45
 
40
46
  // Remove this when the inline link button is updated
41
47
  .#{$button}.pf-m-link.pf-m-inline {
@@ -63,7 +69,11 @@
63
69
  }
64
70
 
65
71
  .#{$hint}__title {
72
+ align-self: center;
73
+ font-family: var(--#{$hint}__title--FontFamily);
66
74
  font-size: var(--#{$hint}__title--FontSize);
75
+ font-weight: var(--#{$hint}__title--FontWeight);
76
+ line-height: var(--#{$hint}__title--LineHeight);
67
77
  }
68
78
 
69
79
  .#{$hint}__body {
@@ -73,15 +83,9 @@
73
83
 
74
84
  .#{$hint}__footer {
75
85
  grid-column: 1 / -1;
86
+ margin-block-start: var(--#{$hint}__footer--MarginTop);
76
87
 
77
88
  > :not(:last-child) {
78
89
  margin-inline-end: var(--#{$hint}__footer--child--MarginRight);
79
90
  }
80
91
  }
81
-
82
- // stylelint-disable no-invalid-position-at-import-rule
83
- @import "themes/dark/hint";
84
-
85
- @include pf-v5-theme-dark {
86
- @include pf-v5-theme-dark-hint;
87
- }
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.14",
4
+ "version": "6.0.0-alpha.15",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -15970,22 +15970,29 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15970
15970
  filter: invert(1);
15971
15971
  }
15972
15972
 
15973
- .pf-v5-c-hint {
15974
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
15975
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
15976
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
15977
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
15978
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
15979
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
15980
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
15981
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
15982
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
15983
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
15984
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
15985
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
15986
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
15987
- --pf-v5-c-hint__actions--MarginLeft: var(--pf-v5-global--spacer--2xl);
15973
+ :root {
15974
+ --pf-v5-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
15975
+ --pf-v5-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
15976
+ --pf-v5-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
15977
+ --pf-v5-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
15978
+ --pf-v5-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
15979
+ --pf-v5-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15980
+ --pf-v5-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
15981
+ --pf-v5-c-hint--BorderWidth: var(--pf-t--global--border--width--200);
15982
+ --pf-v5-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
15983
+ --pf-v5-c-hint--Color: var(--pf-t--global--text--color--regular);
15984
+ --pf-v5-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
15985
+ --pf-v5-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
15986
+ --pf-v5-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
15987
+ --pf-v5-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
15988
+ --pf-v5-c-hint__body--FontSize: var(--pf-t--global--font--size--body--md);
15989
+ --pf-v5-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
15990
+ --pf-v5-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
15991
+ --pf-v5-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
15988
15992
  --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
15993
+ }
15994
+
15995
+ .pf-v5-c-hint {
15989
15996
  display: grid;
15990
15997
  grid-template-columns: 1fr auto;
15991
15998
  grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
@@ -15996,7 +16003,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15996
16003
  color: var(--pf-v5-c-hint--Color);
15997
16004
  background-color: var(--pf-v5-c-hint--BackgroundColor);
15998
16005
  border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
15999
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
16006
+ border-radius: var(--pf-v5-c-hint--BorderRadius);
16000
16007
  }
16001
16008
  .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
16002
16009
  text-align: start;
@@ -16019,7 +16026,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16019
16026
  }
16020
16027
 
16021
16028
  .pf-v5-c-hint__title {
16029
+ align-self: center;
16030
+ font-family: var(--pf-v5-c-hint__title--FontFamily);
16022
16031
  font-size: var(--pf-v5-c-hint__title--FontSize);
16032
+ font-weight: var(--pf-v5-c-hint__title--FontWeight);
16033
+ line-height: var(--pf-v5-c-hint__title--LineHeight);
16023
16034
  }
16024
16035
 
16025
16036
  .pf-v5-c-hint__body {
@@ -16029,21 +16040,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16029
16040
 
16030
16041
  .pf-v5-c-hint__footer {
16031
16042
  grid-column: 1/-1;
16043
+ margin-block-start: var(--pf-v5-c-hint__footer--MarginTop);
16032
16044
  }
16033
16045
  .pf-v5-c-hint__footer > :not(:last-child) {
16034
16046
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
16035
16047
  }
16036
16048
 
16037
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
16038
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
16039
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16040
- }
16041
-
16042
- :where(.pf-v5-theme-dark) .pf-v5-c-hint {
16043
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16044
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
16045
- }
16046
-
16047
16049
  .pf-v5-c-helper-text {
16048
16050
  --pf-v5-c-helper-text--Gap: var(--pf-v5-global--spacer--xs);
16049
16051
  --pf-v5-c-helper-text--FontSize: var(--pf-v5-global--FontSize--sm);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -16086,22 +16086,29 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16086
16086
  filter: invert(1);
16087
16087
  }
16088
16088
 
16089
- .pf-v5-c-hint {
16090
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
16091
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
16092
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
16093
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
16094
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
16095
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
16096
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
16097
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
16098
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
16099
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
16100
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
16101
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
16102
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
16103
- --pf-v5-c-hint__actions--MarginLeft: var(--pf-v5-global--spacer--2xl);
16089
+ :root {
16090
+ --pf-v5-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
16091
+ --pf-v5-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
16092
+ --pf-v5-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
16093
+ --pf-v5-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
16094
+ --pf-v5-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
16095
+ --pf-v5-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
16096
+ --pf-v5-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
16097
+ --pf-v5-c-hint--BorderWidth: var(--pf-t--global--border--width--200);
16098
+ --pf-v5-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
16099
+ --pf-v5-c-hint--Color: var(--pf-t--global--text--color--regular);
16100
+ --pf-v5-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
16101
+ --pf-v5-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
16102
+ --pf-v5-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
16103
+ --pf-v5-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16104
+ --pf-v5-c-hint__body--FontSize: var(--pf-t--global--font--size--body--md);
16105
+ --pf-v5-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
16106
+ --pf-v5-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
16107
+ --pf-v5-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
16104
16108
  --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
16109
+ }
16110
+
16111
+ .pf-v5-c-hint {
16105
16112
  display: grid;
16106
16113
  grid-template-columns: 1fr auto;
16107
16114
  grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
@@ -16112,7 +16119,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16112
16119
  color: var(--pf-v5-c-hint--Color);
16113
16120
  background-color: var(--pf-v5-c-hint--BackgroundColor);
16114
16121
  border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
16115
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
16122
+ border-radius: var(--pf-v5-c-hint--BorderRadius);
16116
16123
  }
16117
16124
  .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
16118
16125
  text-align: start;
@@ -16135,7 +16142,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16135
16142
  }
16136
16143
 
16137
16144
  .pf-v5-c-hint__title {
16145
+ align-self: center;
16146
+ font-family: var(--pf-v5-c-hint__title--FontFamily);
16138
16147
  font-size: var(--pf-v5-c-hint__title--FontSize);
16148
+ font-weight: var(--pf-v5-c-hint__title--FontWeight);
16149
+ line-height: var(--pf-v5-c-hint__title--LineHeight);
16139
16150
  }
16140
16151
 
16141
16152
  .pf-v5-c-hint__body {
@@ -16145,21 +16156,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16145
16156
 
16146
16157
  .pf-v5-c-hint__footer {
16147
16158
  grid-column: 1/-1;
16159
+ margin-block-start: var(--pf-v5-c-hint__footer--MarginTop);
16148
16160
  }
16149
16161
  .pf-v5-c-hint__footer > :not(:last-child) {
16150
16162
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
16151
16163
  }
16152
16164
 
16153
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
16154
- :where(.pf-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
16155
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16156
- }
16157
-
16158
- :where(.pf-theme-dark) .pf-v5-c-hint {
16159
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16160
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
16161
- }
16162
-
16163
16165
  .pf-v5-c-helper-text {
16164
16166
  --pf-v5-c-helper-text--Gap: var(--pf-v5-global--spacer--xs);
16165
16167
  --pf-v5-c-helper-text--FontSize: var(--pf-v5-global--FontSize--sm);
package/patternfly.css CHANGED
@@ -16086,22 +16086,29 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16086
16086
  filter: invert(1);
16087
16087
  }
16088
16088
 
16089
- .pf-v5-c-hint {
16090
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
16091
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
16092
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
16093
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
16094
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
16095
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
16096
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
16097
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
16098
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
16099
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
16100
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
16101
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
16102
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
16103
- --pf-v5-c-hint__actions--MarginLeft: var(--pf-v5-global--spacer--2xl);
16089
+ :root {
16090
+ --pf-v5-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
16091
+ --pf-v5-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
16092
+ --pf-v5-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
16093
+ --pf-v5-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
16094
+ --pf-v5-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
16095
+ --pf-v5-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
16096
+ --pf-v5-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
16097
+ --pf-v5-c-hint--BorderWidth: var(--pf-t--global--border--width--200);
16098
+ --pf-v5-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
16099
+ --pf-v5-c-hint--Color: var(--pf-t--global--text--color--regular);
16100
+ --pf-v5-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
16101
+ --pf-v5-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
16102
+ --pf-v5-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
16103
+ --pf-v5-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16104
+ --pf-v5-c-hint__body--FontSize: var(--pf-t--global--font--size--body--md);
16105
+ --pf-v5-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
16106
+ --pf-v5-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
16107
+ --pf-v5-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
16104
16108
  --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
16109
+ }
16110
+
16111
+ .pf-v5-c-hint {
16105
16112
  display: grid;
16106
16113
  grid-template-columns: 1fr auto;
16107
16114
  grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
@@ -16112,7 +16119,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16112
16119
  color: var(--pf-v5-c-hint--Color);
16113
16120
  background-color: var(--pf-v5-c-hint--BackgroundColor);
16114
16121
  border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
16115
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
16122
+ border-radius: var(--pf-v5-c-hint--BorderRadius);
16116
16123
  }
16117
16124
  .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
16118
16125
  text-align: start;
@@ -16135,7 +16142,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16135
16142
  }
16136
16143
 
16137
16144
  .pf-v5-c-hint__title {
16145
+ align-self: center;
16146
+ font-family: var(--pf-v5-c-hint__title--FontFamily);
16138
16147
  font-size: var(--pf-v5-c-hint__title--FontSize);
16148
+ font-weight: var(--pf-v5-c-hint__title--FontWeight);
16149
+ line-height: var(--pf-v5-c-hint__title--LineHeight);
16139
16150
  }
16140
16151
 
16141
16152
  .pf-v5-c-hint__body {
@@ -16145,21 +16156,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16145
16156
 
16146
16157
  .pf-v5-c-hint__footer {
16147
16158
  grid-column: 1/-1;
16159
+ margin-block-start: var(--pf-v5-c-hint__footer--MarginTop);
16148
16160
  }
16149
16161
  .pf-v5-c-hint__footer > :not(:last-child) {
16150
16162
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
16151
16163
  }
16152
16164
 
16153
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
16154
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
16155
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16156
- }
16157
-
16158
- :where(.pf-v5-theme-dark) .pf-v5-c-hint {
16159
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16160
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
16161
- }
16162
-
16163
16165
  .pf-v5-c-helper-text {
16164
16166
  --pf-v5-c-helper-text--Gap: var(--pf-v5-global--spacer--xs);
16165
16167
  --pf-v5-c-helper-text--FontSize: var(--pf-v5-global--FontSize--sm);