@patternfly/patternfly 6.0.0-alpha.13 → 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 (13) hide show
  1. package/components/Badge/badge.css +23 -15
  2. package/components/Badge/badge.scss +25 -17
  3. package/components/Hint/hint.css +28 -21
  4. package/components/Hint/hint.scss +28 -24
  5. package/docs/components/Badge/examples/Badge.md +21 -0
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +51 -46
  8. package/patternfly-theme-dark-unversioned.css +51 -46
  9. package/patternfly.css +51 -46
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/Badge/themes/dark/badge.scss +0 -9
  13. package/components/Hint/themes/dark/hint.scss +0 -8
package/components/Badge/badge.css CHANGED
@@ -1,15 +1,22 @@
1
+ :root {
2
+ --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
3
+ --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
4
+ --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
5
+ --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
8
+ --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
9
+ --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
10
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
11
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12
+ --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
13
+ --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
14
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
15
+ --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
16
+ --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
17
+ }
18
+
1
19
  .pf-v5-c-badge {
2
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
3
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
4
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
5
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
6
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
7
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
8
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
9
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
10
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
11
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
12
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
13
20
  display: inline-block;
14
21
  min-width: var(--pf-v5-c-badge--MinWidth);
15
22
  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -25,14 +32,15 @@
25
32
  .pf-v5-c-badge.pf-m-read {
26
33
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
27
34
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
35
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
28
36
  }
29
37
  .pf-v5-c-badge.pf-m-unread {
30
38
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
31
39
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
40
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
32
41
  }
33
42
 
34
- :where(.pf-v5-theme-dark) .pf-v5-c-badge {
35
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
36
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
37
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
43
+ .pf-v5-c-badge__toggle-icon {
44
+ margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
45
+ color: var(--pf-v5-c-badge__toggle-icon--Color);
38
46
  }
package/components/Badge/badge.scss CHANGED
@@ -1,21 +1,29 @@
1
1
  // @debug $badge; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$badge} {
3
+ :root {
4
4
  // Component
5
- --#{$badge}--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
6
- --#{$badge}--FontSize: var(--#{$pf-global}--FontSize--xs);
7
- --#{$badge}--FontWeight: var(--#{$pf-global}--FontWeight--bold);
8
- --#{$badge}--PaddingRight: var(--#{$pf-global}--spacer--sm);
9
- --#{$badge}--PaddingLeft: var(--#{$pf-global}--spacer--sm);
10
- --#{$badge}--Color: var(--#{$pf-global}--Color--dark-100);
11
- --#{$badge}--MinWidth: var(--#{$pf-global}--spacer--xl);
5
+ --#{$badge}--BorderRadius: var(--pf-t--global--border--radius--pill);
6
+ --#{$badge}--FontSize: var(--pf-t--global--font--size--body--sm);
7
+ --#{$badge}--FontWeight: var(--pf-t--global--font--weight--body--bold); // TODO - design calls for 500/semi-bold, do we need a token for that or is bold ok
8
+ --#{$badge}--PaddingRight: var(--pf-t--global--spacer--sm);
9
+ --#{$badge}--PaddingLeft: var(--pf-t--global--spacer--sm);
10
+ --#{$badge}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
11
+ --#{$badge}--MinWidth: var(--pf-t--global--spacer--xl);
12
+
13
+ // Toggle icon
14
+ --#{$badge}__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
15
+ --#{$badge}__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
12
16
 
13
17
  // Modifiers
14
- --#{$badge}--m-read--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
15
- --#{$badge}--m-read--Color: var(--#{$pf-global}--Color--dark-100);
16
- --#{$badge}--m-unread--BackgroundColor: var(--#{$pf-global}--primary-color--100);
17
- --#{$badge}--m-unread--Color: var(--#{$pf-global}--Color--light-100);
18
+ --#{$badge}--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
19
+ --#{$badge}--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
20
+ --#{$badge}--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
21
+ --#{$badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
22
+ --#{$badge}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
23
+ --#{$badge}--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
24
+ }
18
25
 
26
+ .#{$badge} {
19
27
  display: inline-block;
20
28
  min-width: var(--#{$badge}--MinWidth);
21
29
  padding-inline-start: var(--#{$badge}--PaddingLeft);
@@ -31,17 +39,17 @@
31
39
  &.pf-m-read {
32
40
  --#{$badge}--Color: var(--#{$badge}--m-read--Color);
33
41
  --#{$badge}--BackgroundColor: var(--#{$badge}--m-read--BackgroundColor);
42
+ --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-read__toggle-icon--Color);
34
43
  }
35
44
 
36
45
  &.pf-m-unread {
37
46
  --#{$badge}--Color: var(--#{$badge}--m-unread--Color);
38
47
  --#{$badge}--BackgroundColor: var(--#{$badge}--m-unread--BackgroundColor);
48
+ --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-unread__toggle-icon--Color);
39
49
  }
40
50
  }
41
51
 
42
- // stylelint-disable no-invalid-position-at-import-rule
43
- @import "themes/dark/badge";
44
-
45
- @include pf-v5-theme-dark {
46
- @include pf-v5-theme-dark-badge;
52
+ .#{$badge}__toggle-icon {
53
+ margin-inline-start: var(--#{$badge}__toggle-icon--MarginLeft);
54
+ color: var(--#{$badge}__toggle-icon--Color);
47
55
  }
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/docs/components/Badge/examples/Badge.md CHANGED
@@ -36,6 +36,26 @@ cssPrefix: pf-v5-c-badge
36
36
 
37
37
  ```
38
38
 
39
+ ### Badge as toggle
40
+
41
+ ```html
42
+ <span class="pf-v5-c-badge pf-m-read">
43
+ 7
44
+ <span class="pf-v5-c-badge__toggle-icon">
45
+ <i class="fas fa-caret-down"></i>
46
+ </span>
47
+ </span>
48
+ <span class="pf-v5-c-badge pf-m-unread">
49
+ 7
50
+ <span class="pf-v5-screen-reader">unread messages</span>
51
+
52
+ <span class="pf-v5-c-badge__toggle-icon">
53
+ <i class="fas fa-caret-down"></i>
54
+ </span>
55
+ </span>
56
+
57
+ ```
58
+
39
59
  ## Documentation
40
60
 
41
61
  ### Overview
@@ -47,5 +67,6 @@ Always add a modifier class. Never use the class `.pf-v5-c-badge` on its own.
47
67
  | Class | Applied to | Outcome |
48
68
  | -- | -- | -- |
49
69
  | `.pf-v5-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
70
+ | `.pf-v5-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
50
71
  | `.pf-m-read` | `.pf-v5-c-badge` | Applies read badge styling. |
51
72
  | `.pf-m-unread` | `.pf-v5-c-badge` | Applies unread badge styling. |
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.13",
4
+ "version": "6.0.0-alpha.15",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -7515,18 +7515,25 @@
7515
7515
  box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow);
7516
7516
  }
7517
7517
 
7518
+ :root {
7519
+ --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7520
+ --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7521
+ --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
7522
+ --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
7523
+ --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
7524
+ --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7525
+ --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
7526
+ --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
7527
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7528
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7529
+ --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7530
+ --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7531
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7532
+ --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7533
+ --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7534
+ }
7535
+
7518
7536
  .pf-v5-c-badge {
7519
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7520
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
7521
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
7522
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
7523
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
7524
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
7525
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
7526
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
7527
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
7528
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
7529
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
7530
7537
  display: inline-block;
7531
7538
  min-width: var(--pf-v5-c-badge--MinWidth);
7532
7539
  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -7542,21 +7549,17 @@
7542
7549
  .pf-v5-c-badge.pf-m-read {
7543
7550
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
7544
7551
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
7552
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
7545
7553
  }
7546
7554
  .pf-v5-c-badge.pf-m-unread {
7547
7555
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
7548
7556
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
7557
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
7549
7558
  }
7550
7559
 
7551
- :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,
7552
- :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-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
7553
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
7554
- }
7555
-
7556
- :where(.pf-v5-theme-dark) .pf-v5-c-badge {
7557
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
7558
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
7559
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
7560
+ .pf-v5-c-badge__toggle-icon {
7561
+ margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
7562
+ color: var(--pf-v5-c-badge__toggle-icon--Color);
7560
7563
  }
7561
7564
 
7562
7565
  .pf-v5-c-banner {
@@ -15967,22 +15970,29 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15967
15970
  filter: invert(1);
15968
15971
  }
15969
15972
 
15970
- .pf-v5-c-hint {
15971
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
15972
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
15973
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
15974
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
15975
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
15976
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
15977
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
15978
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
15979
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
15980
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
15981
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
15982
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
15983
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
15984
- --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);
15985
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 {
15986
15996
  display: grid;
15987
15997
  grid-template-columns: 1fr auto;
15988
15998
  grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
@@ -15993,7 +16003,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15993
16003
  color: var(--pf-v5-c-hint--Color);
15994
16004
  background-color: var(--pf-v5-c-hint--BackgroundColor);
15995
16005
  border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
15996
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
16006
+ border-radius: var(--pf-v5-c-hint--BorderRadius);
15997
16007
  }
15998
16008
  .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
15999
16009
  text-align: start;
@@ -16016,7 +16026,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16016
16026
  }
16017
16027
 
16018
16028
  .pf-v5-c-hint__title {
16029
+ align-self: center;
16030
+ font-family: var(--pf-v5-c-hint__title--FontFamily);
16019
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);
16020
16034
  }
16021
16035
 
16022
16036
  .pf-v5-c-hint__body {
@@ -16026,21 +16040,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16026
16040
 
16027
16041
  .pf-v5-c-hint__footer {
16028
16042
  grid-column: 1/-1;
16043
+ margin-block-start: var(--pf-v5-c-hint__footer--MarginTop);
16029
16044
  }
16030
16045
  .pf-v5-c-hint__footer > :not(:last-child) {
16031
16046
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
16032
16047
  }
16033
16048
 
16034
- :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,
16035
- :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 {
16036
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16037
- }
16038
-
16039
- :where(.pf-v5-theme-dark) .pf-v5-c-hint {
16040
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16041
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
16042
- }
16043
-
16044
16049
  .pf-v5-c-helper-text {
16045
16050
  --pf-v5-c-helper-text--Gap: var(--pf-v5-global--spacer--xs);
16046
16051
  --pf-v5-c-helper-text--FontSize: var(--pf-v5-global--FontSize--sm);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -7631,18 +7631,25 @@ button) {
7631
7631
  box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow);
7632
7632
  }
7633
7633
 
7634
+ :root {
7635
+ --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7636
+ --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7637
+ --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
7638
+ --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
7639
+ --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
7640
+ --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7641
+ --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
7642
+ --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
7643
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7644
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7645
+ --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7646
+ --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
7647
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7648
+ --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7649
+ --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7650
+ }
7651
+
7634
7652
  .pf-v5-c-badge {
7635
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7636
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
7637
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
7638
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
7639
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
7640
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
7641
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
7642
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
7643
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
7644
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
7645
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
7646
7653
  display: inline-block;
7647
7654
  min-width: var(--pf-v5-c-badge--MinWidth);
7648
7655
  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -7658,21 +7665,17 @@ button) {
7658
7665
  .pf-v5-c-badge.pf-m-read {
7659
7666
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
7660
7667
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
7668
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
7661
7669
  }
7662
7670
  .pf-v5-c-badge.pf-m-unread {
7663
7671
  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
7664
7672
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
7673
+ --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
7665
7674
  }
7666
7675
 
7667
- :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,
7668
- :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-banner .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
7669
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
7670
- }
7671
-
7672
- :where(.pf-theme-dark) .pf-v5-c-badge {
7673
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
7674
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
7675
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
7676
+ .pf-v5-c-badge__toggle-icon {
7677
+ margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
7678
+ color: var(--pf-v5-c-badge__toggle-icon--Color);
7676
7679
  }
7677
7680
 
7678
7681
  .pf-v5-c-banner {
@@ -16083,22 +16086,29 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16083
16086
  filter: invert(1);
16084
16087
  }
16085
16088
 
16086
- .pf-v5-c-hint {
16087
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
16088
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
16089
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
16090
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
16091
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
16092
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
16093
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
16094
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
16095
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
16096
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
16097
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
16098
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
16099
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
16100
- --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);
16101
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 {
16102
16112
  display: grid;
16103
16113
  grid-template-columns: 1fr auto;
16104
16114
  grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
@@ -16109,7 +16119,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16109
16119
  color: var(--pf-v5-c-hint--Color);
16110
16120
  background-color: var(--pf-v5-c-hint--BackgroundColor);
16111
16121
  border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
16112
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
16122
+ border-radius: var(--pf-v5-c-hint--BorderRadius);
16113
16123
  }
16114
16124
  .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
16115
16125
  text-align: start;
@@ -16132,7 +16142,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16132
16142
  }
16133
16143
 
16134
16144
  .pf-v5-c-hint__title {
16145
+ align-self: center;
16146
+ font-family: var(--pf-v5-c-hint__title--FontFamily);
16135
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);
16136
16150
  }
16137
16151
 
16138
16152
  .pf-v5-c-hint__body {
@@ -16142,21 +16156,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
16142
16156
 
16143
16157
  .pf-v5-c-hint__footer {
16144
16158
  grid-column: 1/-1;
16159
+ margin-block-start: var(--pf-v5-c-hint__footer--MarginTop);
16145
16160
  }
16146
16161
  .pf-v5-c-hint__footer > :not(:last-child) {
16147
16162
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
16148
16163
  }
16149
16164
 
16150
- :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,
16151
- :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 {
16152
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16153
- }
16154
-
16155
- :where(.pf-theme-dark) .pf-v5-c-hint {
16156
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16157
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
16158
- }
16159
-
16160
16165
  .pf-v5-c-helper-text {
16161
16166
  --pf-v5-c-helper-text--Gap: var(--pf-v5-global--spacer--xs);
16162
16167
  --pf-v5-c-helper-text--FontSize: var(--pf-v5-global--FontSize--sm);