@patternfly/patternfly 6.0.0-alpha.45 → 6.0.0-alpha.46

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 (27) hide show
  1. package/components/Check/check.css +17 -16
  2. package/components/Check/check.scss +17 -20
  3. package/components/Form/form.css +68 -87
  4. package/components/Form/form.scss +67 -98
  5. package/components/FormControl/form-control.css +86 -111
  6. package/components/FormControl/form-control.scss +88 -92
  7. package/components/NotificationDrawer/notification-drawer.css +104 -115
  8. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  9. package/components/Radio/radio.css +15 -11
  10. package/components/Radio/radio.scss +15 -15
  11. package/components/SimpleList/simple-list.css +1 -1
  12. package/components/SimpleList/simple-list.scss +1 -1
  13. package/docs/components/Form/examples/Form.md +23 -11
  14. package/docs/demos/Alert/examples/Alert.md +24 -0
  15. package/docs/demos/Form/examples/BasicForms.md +31 -10
  16. package/docs/demos/Modal/examples/Modal.md +3 -3
  17. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  18. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  19. package/package.json +1 -1
  20. package/patternfly-no-globals.css +292 -342
  21. package/patternfly-theme-dark-unversioned.css +292 -342
  22. package/patternfly.css +292 -342
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
  25. package/components/Form/themes/dark/form.scss +0 -7
  26. package/components/FormControl/themes/dark/form-control.scss +0 -24
  27. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
package/components/Check/check.css CHANGED
@@ -1,22 +1,25 @@
1
+ :root,
1
2
  .pf-v5-c-check {
2
- --pf-v5-c-check--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
3
- --pf-v5-c-check__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
4
- --pf-v5-c-check__label--Color: var(--pf-v5-global--Color--100);
5
- --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
6
- --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
7
- --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
3
+ --pf-v5-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-check--AccentColor: var(--pf-t--global--color--brand--default);
5
+ --pf-v5-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
6
+ --pf-v5-c-check__label--Color: var(--pf-t--global--text--color--regular);
7
+ --pf-v5-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
8
+ --pf-v5-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
9
+ --pf-v5-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
8
10
  --pf-v5-c-check__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%);
9
- --pf-v5-c-check__input--TranslateY--moz: var(--pf-v5-c-check__input--TranslateY);
10
- --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
11
- --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
12
- --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
13
- --pf-v5-c-check__label-required--MarginLeft: var(--pf-v5-global--spacer--xs);
14
- --pf-v5-c-check__label-required--FontSize: var(--pf-v5-global--FontSize--sm);
15
- --pf-v5-c-check__label-required--Color: var(--pf-v5-global--danger-color--100);
11
+ --pf-v5-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
12
+ --pf-v5-c-check__description--Color: var(--pf-t--global--text--color--subtle);
13
+ --pf-v5-c-check__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
14
+ --pf-v5-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
15
+ --pf-v5-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
16
+ }
17
+
18
+ .pf-v5-c-check {
16
19
  display: grid;
17
20
  grid-template-columns: auto 1fr;
18
21
  grid-gap: var(--pf-v5-c-check--GridGap);
19
- align-items: baseline;
22
+ accent-color: var(--pf-v5-c-check--AccentColor);
20
23
  }
21
24
  .pf-v5-c-check.pf-m-standalone {
22
25
  --pf-v5-c-check--GridGap: 0;
@@ -26,7 +29,6 @@
26
29
 
27
30
  .pf-v5-c-check__input {
28
31
  align-self: start;
29
- -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
30
32
  transform: translateY(var(--pf-v5-c-check__input--TranslateY));
31
33
  }
32
34
 
@@ -45,7 +47,6 @@
45
47
 
46
48
  .pf-v5-c-check__body {
47
49
  grid-column: 2;
48
- margin-block-start: var(--pf-v5-c-check__body--MarginTop);
49
50
  }
50
51
 
51
52
  .pf-v5-c-check__label,
package/components/Check/check.scss CHANGED
@@ -1,27 +1,29 @@
1
1
  // @debug $check; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$check} {
4
- --#{$check}--GridGap: var(--#{$pf-global}--spacer--xs) var(--#{$pf-global}--spacer--sm);
5
- --#{$check}__label--disabled--Color: var(--#{$pf-global}--disabled-color--100);
6
- --#{$check}__label--Color: var(--#{$pf-global}--Color--100);
7
- --#{$check}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
8
- --#{$check}__label--FontSize: var(--#{$pf-global}--FontSize--md);
9
- --#{$check}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
10
- --#{$check}__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
11
- --#{$check}__input--TranslateY--moz: var(--#{$check}__input--TranslateY); // remove at breaking change
12
- --#{$check}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
13
- --#{$check}__description--Color: var(--#{$pf-global}--Color--200);
14
- --#{$check}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
5
+ --#{$check}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
6
+ --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
7
+ --#{$check}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
8
+ --#{$check}__label--Color: var(--pf-t--global--text--color--regular);
9
+ --#{$check}__label--FontWeight: var(--pf-t--global--font--weight--body);
10
+ --#{$check}__label--FontSize: var(--pf-t--global--font--size--body--default);
11
+ --#{$check}__label--LineHeight: var(--pf-t--global--font--line-height--body);
12
+ --#{$check}__input--TranslateY: calc((var(--#{$check}__label--LineHeight) * var(--#{$check}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
13
+ --#{$check}__description--FontSize: var(--pf-t--global--font--size--body--sm);
14
+ --#{$check}__description--Color: var(--pf-t--global--text--color--subtle);
15
15
 
16
16
  // Required checkbox
17
- --#{$check}__label-required--MarginLeft: var(--#{$pf-global}--spacer--xs);
18
- --#{$check}__label-required--FontSize: var(--#{$pf-global}--FontSize--sm);
19
- --#{$check}__label-required--Color: var(--#{$pf-global}--danger-color--100);
17
+ --#{$check}__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
18
+ --#{$check}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
+ --#{$check}__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
+ }
20
21
 
22
+ .#{$check} {
21
23
  display: grid;
22
24
  grid-template-columns: auto 1fr;
23
25
  grid-gap: var(--#{$check}--GridGap);
24
- align-items: baseline;
26
+ accent-color: var(--#{$check}--AccentColor);
25
27
 
26
28
  &.pf-m-standalone {
27
29
  --#{$check}--GridGap: 0;
@@ -34,10 +36,6 @@
34
36
  .#{$check}__input {
35
37
  align-self: start;
36
38
 
37
- // stylelint-disable property-no-vendor-prefix
38
- -moz-transform: translateY(var(--#{$check}__input--TranslateY--moz)); // remove at breaking change - no longer needed
39
- // stylelint-enable
40
-
41
39
  // find height of single label, divide by two, offset by 50% of own height
42
40
  transform: translateY(var(--#{$check}__input--TranslateY));
43
41
  }
@@ -57,7 +55,6 @@
57
55
 
58
56
  .#{$check}__body {
59
57
  grid-column: 2;
60
- margin-block-start: var(--#{$check}__body--MarginTop);
61
58
  }
62
59
 
63
60
  .#{$check}__label,
package/components/Form/form.css CHANGED
@@ -1,102 +1,101 @@
1
+ :root,
1
2
  .pf-v5-c-form {
2
- --pf-v5-c-form--GridGap: var(--pf-v5-global--gutter--md);
3
- --pf-v5-c-form__group--m-action--MarginTop: var(--pf-v5-global--spacer--xl);
3
+ --pf-v5-c-form--GridGap: var(--pf-t--global--spacer--lg);
4
+ --pf-v5-c-form__group--Gap: var(--pf-t--global--spacer--sm);
5
+ --pf-v5-c-form__group--m-action--MarginTop: var(--pf-t--global--spacer--xl);
4
6
  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
5
- --pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-v5-global--spacer--md);
7
+ --pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--md);
6
8
  --pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
7
9
  --pf-v5-c-form--m-limit-width--MaxWidth: 55rem;
8
- --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md)) + (2 * var(--pf-v5-global--BorderWidth--sm))) - var(--pf-v5-global--FontSize--md)) / 2) + var(--pf-v5-global--FontSize--md)) - ((((var(--pf-v5-global--FontSize--sm) * var(--pf-v5-global--LineHeight--sm)) - var(--pf-v5-global--FontSize--sm)) / 2) + var(--pf-v5-global--FontSize--sm)) + var(--pf-v5-global--BorderWidth--sm));
9
- --pf-v5-c-form__group-label--PaddingBottom: var(--pf-v5-global--spacer--sm);
10
+ --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) + (2 * var(--pf-t--global--border--width--control--default))) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)) - ((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) + var(--pf-t--global--border--width--control--default));
11
+ --pf-v5-c-form__group-label--PaddingBottom: var(--pf-t--global--spacer--sm);
10
12
  --pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
11
- --pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-v5-global--FontSize--sm) * var(--pf-v5-global--LineHeight--sm)) - var(--pf-v5-global--FontSize--sm)) / 2) + var(--pf-v5-global--FontSize--sm)) - ((((var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--sm)) - var(--pf-v5-global--FontSize--md)) / 2) + var(--pf-v5-global--FontSize--md)));
12
- --pf-v5-c-form__label--FontSize: var(--pf-v5-global--FontSize--sm);
13
- --pf-v5-c-form__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
14
- --pf-v5-c-form__label--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
13
+ --pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
14
+ --pf-v5-c-form__label--FontSize: var(--pf-t--global--font--size--body--sm);
15
+ --pf-v5-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
16
+ --pf-v5-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
15
17
  --pf-v5-c-form__label--hover--Cursor: pointer;
16
18
  --pf-v5-c-form__label--m-disabled--hover--Cursor: not-allowed;
17
- --pf-v5-c-form__label-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
18
- --pf-v5-c-form__label-required--MarginLeft: var(--pf-v5-global--spacer--xs);
19
- --pf-v5-c-form__label-required--FontSize: var(--pf-v5-global--FontSize--sm);
20
- --pf-v5-c-form__label-required--Color: var(--pf-v5-global--danger-color--100);
19
+ --pf-v5-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
20
+ --pf-v5-c-form__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
21
+ --pf-v5-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
22
+ --pf-v5-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
21
23
  --pf-v5-c-form__group-label-help--BackgroundColor: transparent;
22
- --pf-v5-c-form__group-label-help--PaddingTop: var(--pf-v5-global--spacer--xs);
23
- --pf-v5-c-form__group-label-help--PaddingRight: var(--pf-v5-global--spacer--xs);
24
- --pf-v5-c-form__group-label-help--PaddingBottom: var(--pf-v5-global--spacer--xs);
25
- --pf-v5-c-form__group-label-help--PaddingLeft: var(--pf-v5-global--spacer--xs);
24
+ --pf-v5-c-form__group-label-help--PaddingTop: var(--pf-t--global--spacer--xs);
25
+ --pf-v5-c-form__group-label-help--PaddingRight: var(--pf-t--global--spacer--xs);
26
+ --pf-v5-c-form__group-label-help--PaddingBottom: var(--pf-t--global--spacer--xs);
27
+ --pf-v5-c-form__group-label-help--PaddingLeft: var(--pf-t--global--spacer--xs);
26
28
  --pf-v5-c-form__group-label-help--MarginTop: calc(var(--pf-v5-c-form__group-label-help--PaddingTop) * -1);
27
29
  --pf-v5-c-form__group-label-help--MarginRight: calc(var(--pf-v5-c-form__group-label-help--PaddingRight) * -1);
28
30
  --pf-v5-c-form__group-label-help--MarginBottom: calc(var(--pf-v5-c-form__group-label-help--PaddingBottom) * -1);
29
- --pf-v5-c-form__group-label-help--MarginLeft: calc(var(--pf-v5-c-form__group-label-help--PaddingLeft) * -1 + var(--pf-v5-global--spacer--xs));
30
- --pf-v5-c-form__group-label-help--FontSize: var(--pf-v5-global--FontSize--sm);
31
+ --pf-v5-c-form__group-label-help--MarginLeft: calc(var(--pf-v5-c-form__group-label-help--PaddingLeft) * -1 + var(--pf-t--global--spacer--xs));
32
+ --pf-v5-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
31
33
  --pf-v5-c-form__group-label-help--TranslateY: 0.125rem;
32
- --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
33
- --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
34
- --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
35
- --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-v5-global--spacer--sm);
36
- --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
37
- --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
38
- --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
39
- --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
34
+ --pf-v5-c-form__group-label-help--Color: var(--pf-t--global--icon--color--regular);
35
+ --pf-v5-c-form__group-label-help--hover--Color: var(--pf-t--global--icon--color--regular);
36
+ --pf-v5-c-form__group-label-help--focus--Color: var(--pf-t--global--icon--color--brand--hover);
37
+ --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
38
+ --pf-v5-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
39
+ --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-t--global--spacer--lg);
40
+ --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-t--global--spacer--xs);
41
+ --pf-v5-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
42
+ --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-t--global--spacer--sm);
40
43
  --pf-v5-c-form__group-control--m-stack__helper-text--MarginTop: calc(var(--pf-v5-c-form__group-control--m-stack--Gap) * -1 + var(--pf-v5-c-form__helper-text--MarginTop--base));
41
- --pf-v5-c-form__actions--child--MarginTop: var(--pf-v5-global--spacer--sm);
42
- --pf-v5-c-form__actions--child--MarginRight: var(--pf-v5-global--spacer--sm);
43
- --pf-v5-c-form__actions--child--MarginBottom: var(--pf-v5-global--spacer--sm);
44
- --pf-v5-c-form__actions--child--MarginLeft: var(--pf-v5-global--spacer--sm);
44
+ --pf-v5-c-form__actions--child--MarginTop: var(--pf-t--global--spacer--sm);
45
+ --pf-v5-c-form__actions--child--MarginRight: var(--pf-t--global--spacer--sm);
46
+ --pf-v5-c-form__actions--child--MarginBottom: var(--pf-t--global--spacer--sm);
47
+ --pf-v5-c-form__actions--child--MarginLeft: var(--pf-t--global--spacer--sm);
45
48
  --pf-v5-c-form__actions--MarginTop: calc(var(--pf-v5-c-form__actions--child--MarginTop) * -1);
46
49
  --pf-v5-c-form__actions--MarginRight: calc(var(--pf-v5-c-form__actions--child--MarginRight) * -1);
47
50
  --pf-v5-c-form__actions--MarginBottom: calc(var(--pf-v5-c-form__actions--child--MarginBottom) * -1);
48
51
  --pf-v5-c-form__actions--MarginLeft: calc(var(--pf-v5-c-form__actions--child--MarginLeft) * -1);
49
- --pf-v5-c-form__helper-text--MarginTop--base: var(--pf-v5-global--spacer--xs);
52
+ --pf-v5-c-form__helper-text--MarginTop--base: var(--pf-t--global--spacer--xs);
50
53
  --pf-v5-c-form__helper-text--MarginTop: var(--pf-v5-c-form__helper-text--MarginTop--base);
51
- --pf-v5-c-form__helper-text--FontSize: var(--pf-v5-global--FontSize--sm);
52
- --pf-v5-c-form__helper-text--Color: var(--pf-v5-global--Color--100);
53
- --pf-v5-c-form__helper-text-icon--FontSize: var(--pf-v5-global--FontSize--md);
54
- --pf-v5-c-form__helper-text-icon--MarginRight: var(--pf-v5-global--spacer--xs);
55
- --pf-v5-c-form__helper-text--m-success--Color: var(--pf-v5-global--success-color--200);
56
- --pf-v5-c-form__helper-text--m-warning--Color: var(--pf-v5-global--warning-color--200);
57
- --pf-v5-c-form__helper-text--m-error--Color: var(--pf-v5-global--danger-color--100);
58
- --pf-v5-c-form__section--MarginTop: var(--pf-v5-global--spacer--xl);
59
- --pf-v5-c-form__section--Gap: var(--pf-v5-global--gutter--md);
60
- --pf-v5-c-form__section-title--FontSize: var(--pf-v5-global--FontSize--lg);
61
- --pf-v5-c-form__section-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
62
- --pf-v5-c-form__section-title--MarginBottom: calc(var(--pf-v5-global--spacer--sm) * -1);
63
- --pf-v5-c-form__field-group--border-width-base: var(--pf-v5-global--BorderWidth--sm);
54
+ --pf-v5-c-form__section--MarginTop: var(--pf-t--global--spacer--xl);
55
+ --pf-v5-c-form__section--Gap: var(--pf-t--global--spacer--md);
56
+ --pf-v5-c-form__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
57
+ --pf-v5-c-form__section-title--FontWeight: var(--pf-t--global--font--weight--heading);
58
+ --pf-v5-c-form__section-title--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
59
+ --pf-v5-c-form__field-group--border-width-base: var(--pf-t--global--border--width--divider--default);
64
60
  --pf-v5-c-form__field-group--BorderTopWidth: var(--pf-v5-c-form__field-group--border-width-base);
65
- --pf-v5-c-form__field-group--BorderTopColor: var(--pf-v5-global--BorderColor--100);
61
+ --pf-v5-c-form__field-group--BorderTopColor: var(--pf-t--global--border--color--default);
66
62
  --pf-v5-c-form__field-group--BorderBottomWidth: var(--pf-v5-c-form__field-group--border-width-base);
67
- --pf-v5-c-form__field-group--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
63
+ --pf-v5-c-form__field-group--BorderBottomColor: var(--pf-t--global--border--color--default);
68
64
  --pf-v5-c-form__field-group--field-group--MarginTop: calc(var(--pf-v5-c-form--GridGap) * -1);
69
- --pf-v5-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-v5-global--spacer--md) * 2 + var(--pf-v5-c-form__field-group-toggle-icon--MinWidth) + var(--pf-v5-global--spacer--xs));
70
- --pf-v5-c-form__field-group-toggle--PaddingTop: var(--pf-v5-global--spacer--md);
71
- --pf-v5-c-form__field-group-toggle--PaddingRight: var(--pf-v5-global--spacer--xs);
72
- --pf-v5-c-form__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-v5-global--spacer--lg);
73
- --pf-v5-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
65
+ --pf-v5-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v5-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs));
66
+ --pf-v5-c-form__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
67
+ --pf-v5-c-form__field-group-toggle--PaddingRight: var(--pf-t--global--spacer--xs);
68
+ --pf-v5-c-form__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
69
+ --pf-v5-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
74
70
  --pf-v5-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--pf-v5-c-form__field-group-header-toggle--BorderWidth--base);
75
- --pf-v5-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
76
- --pf-v5-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
71
+ --pf-v5-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
72
+ --pf-v5-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
77
73
  --pf-v5-c-form__field-group-toggle-icon--Transition: var(--pf-v5-global--Transition);
78
- --pf-v5-c-form__field-group-toggle-icon--MinWidth: var(--pf-v5-global--FontSize--md);
74
+ --pf-v5-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
79
75
  --pf-v5-c-form__field-group-toggle-icon--Rotate: 0;
80
76
  --pf-v5-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
81
- --pf-v5-c-form__field-group-header--PaddingTop: var(--pf-v5-global--spacer--md);
82
- --pf-v5-c-form__field-group-header--PaddingBottom: var(--pf-v5-global--spacer--md);
77
+ --pf-v5-c-form__field-group-header--PaddingTop: var(--pf-t--global--spacer--md);
78
+ --pf-v5-c-form__field-group-header--PaddingBottom: var(--pf-t--global--spacer--md);
83
79
  --pf-v5-c-form__field-group-header--GridColumn: 1 / 3;
84
- --pf-v5-c-form__field-group__field-group__field-group-header--PaddingTop: var(--pf-v5-global--spacer--lg);
85
- --pf-v5-c-form__field-group__field-group__field-group-header--PaddingBottom: var(--pf-v5-global--spacer--lg);
80
+ --pf-v5-c-form__field-group__field-group__field-group-header--PaddingTop: var(--pf-t--global--spacer--lg);
81
+ --pf-v5-c-form__field-group__field-group__field-group-header--PaddingBottom: var(--pf-t--global--spacer--lg);
86
82
  --pf-v5-c-form__field-group-toggle--field-group-header--GridColumn: 2 / 3;
87
83
  --pf-v5-c-form__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--pf-v5-c-form__field-group-header-toggle--BorderWidth--base);
88
- --pf-v5-c-form__field-group-header-description--MarginTop: var(--pf-v5-global--spacer--xs);
89
- --pf-v5-c-form__field-group-header-description--Color: var(--pf-v5-global--Color--200);
90
- --pf-v5-c-form__field-group-header-actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
91
- --pf-v5-c-form__field-group-header-actions--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
92
- --pf-v5-c-form__field-group-header-actions--MarginLeft: var(--pf-v5-global--spacer--sm);
93
- --pf-v5-c-form__field-group-body--PaddingTop: var(--pf-v5-global--spacer--lg);
94
- --pf-v5-c-form__field-group-body--PaddingBottom: var(--pf-v5-global--spacer--lg);
84
+ --pf-v5-c-form__field-group-header-description--MarginTop: var(--pf-t--global--spacer--xs);
85
+ --pf-v5-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
86
+ --pf-v5-c-form__field-group-header-actions--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
87
+ --pf-v5-c-form__field-group-header-actions--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
88
+ --pf-v5-c-form__field-group-header-actions--MarginLeft: var(--pf-t--global--spacer--sm);
89
+ --pf-v5-c-form__field-group-body--PaddingTop: var(--pf-t--global--spacer--lg);
90
+ --pf-v5-c-form__field-group-body--PaddingBottom: var(--pf-t--global--spacer--lg);
95
91
  --pf-v5-c-form__field-group-body--Gap: var(--pf-v5-c-form--GridGap);
96
92
  --pf-v5-c-form__field-group-body--GridColumn: 2 / 3;
97
93
  --pf-v5-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
98
94
  --pf-v5-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
99
95
  --pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom: calc(var(--pf-v5-c-form__field-group-body--PaddingBottom) * -1);
96
+ }
97
+
98
+ .pf-v5-c-form {
100
99
  display: grid;
101
100
  gap: var(--pf-v5-c-form--GridGap);
102
101
  }
@@ -248,6 +247,9 @@
248
247
  }
249
248
 
250
249
  .pf-v5-c-form__group {
250
+ display: flex;
251
+ flex-direction: column;
252
+ gap: var(--pf-v5-c-form__group--Gap);
251
253
  min-width: 0;
252
254
  }
253
255
  .pf-v5-c-form__group.pf-m-action {
@@ -271,7 +273,6 @@
271
273
 
272
274
  .pf-v5-c-form__group-label {
273
275
  --pf-v5-c-form__helper-text--MarginTop: 0;
274
- padding-block-end: var(--pf-v5-c-form__group-label--PaddingBottom);
275
276
  }
276
277
  .pf-v5-c-form__group-label.pf-m-info {
277
278
  display: flex;
@@ -363,17 +364,6 @@
363
364
 
364
365
  .pf-v5-c-form__helper-text {
365
366
  margin-block-start: var(--pf-v5-c-form__helper-text--MarginTop);
366
- font-size: var(--pf-v5-c-form__helper-text--FontSize);
367
- color: var(--pf-v5-c-form__helper-text--Color);
368
- }
369
- .pf-v5-c-form__helper-text.pf-m-error {
370
- --pf-v5-c-form__helper-text--Color: var(--pf-v5-c-form__helper-text--m-error--Color);
371
- }
372
- .pf-v5-c-form__helper-text.pf-m-success {
373
- --pf-v5-c-form__helper-text--Color: var(--pf-v5-c-form__helper-text--m-success--Color);
374
- }
375
- .pf-v5-c-form__helper-text.pf-m-warning {
376
- --pf-v5-c-form__helper-text--Color: var(--pf-v5-c-form__helper-text--m-warning--Color);
377
367
  }
378
368
  .pf-v5-c-form__helper-text.pf-m-inactive {
379
369
  display: none;
@@ -383,11 +373,6 @@
383
373
  opacity: 0;
384
374
  }
385
375
 
386
- .pf-v5-c-form__helper-text-icon {
387
- margin-inline-end: var(--pf-v5-c-form__helper-text-icon--MarginRight);
388
- font-size: var(--pf-v5-c-form__helper-text-icon--FontSize);
389
- }
390
-
391
376
  .pf-v5-c-form__fieldset {
392
377
  border: 0;
393
378
  }
@@ -511,8 +496,4 @@
511
496
  }
512
497
  .pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:last-child {
513
498
  margin-block-end: var(--pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom);
514
- }
515
-
516
- :where(.pf-v5-theme-dark) .pf-v5-c-form {
517
- --pf-v5-c-form__helper-text--m-success--Color: var(--pf-v5-global--success-color--100);
518
499
  }