@patternfly/patternfly 6.0.0-alpha.56 → 6.0.0-alpha.57

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 (21) hide show
  1. package/components/Button/button.css +26 -11
  2. package/components/Button/button.scss +27 -12
  3. package/components/DescriptionList/description-list.css +39 -34
  4. package/components/DescriptionList/description-list.scss +25 -25
  5. package/components/Label/label-group.css +39 -44
  6. package/components/Label/label-group.scss +39 -45
  7. package/components/Label/label.css +258 -355
  8. package/components/Label/label.scss +297 -347
  9. package/components/SimpleList/simple-list.css +1 -1
  10. package/components/SimpleList/simple-list.scss +1 -1
  11. package/docs/components/Label/examples/Label.css +4 -0
  12. package/docs/components/Label/examples/Label.md +999 -223
  13. package/docs/demos/Form/examples/BasicForms.md +2 -2
  14. package/package.json +1 -1
  15. package/patternfly-no-globals.css +447 -449
  16. package/patternfly-theme-dark-unversioned.css +447 -449
  17. package/patternfly.css +447 -449
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
  20. package/sass-utilities/mixins.scss +18 -0
  21. package/components/Label/themes/dark/label.scss +0 -53
package/components/Button/button.css CHANGED
@@ -1,5 +1,5 @@
1
- :root,
2
- .pf-v5-c-button {
1
+ :where(:root),
2
+ :where(.pf-v5-c-button) {
3
3
  --pf-v5-c-button--Display: inline-block;
4
4
  --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
5
5
  --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
@@ -98,20 +98,29 @@
98
98
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
99
99
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
100
100
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
101
- --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
102
- --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
103
- --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
104
- --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
105
101
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
106
102
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
103
+ --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
104
+ --pf-v5-c-button--m-plain--MinWidth: calc(1em * var(--pf-v5-c-button--LineHeight) + var(--pf-v5-c-button--m-plain--PaddingTop) + var(--pf-v5-c-button--m-plain--PaddingBottom));
107
105
  --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
108
106
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
109
107
  --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
110
108
  --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
111
109
  --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
110
+ --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
111
+ --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
112
+ --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
113
+ --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
114
+ --pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
115
+ --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
116
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
117
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
118
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingBottom: 0;
119
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingLeft: 0;
120
+ --pf-v5-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
121
+ --pf-v5-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
122
+ --pf-v5-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
112
123
  --pf-v5-c-button__progress--Color: var(--pf-v5-c-button__icon--Color);
113
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
114
- --pf-v5-c-button--m-plain--MinWidth: calc(1em * var(--pf-v5-c-button--LineHeight) + var(--pf-v5-c-button--m-plain--PaddingTop) + var(--pf-v5-c-button--m-plain--PaddingBottom));
115
124
  --pf-v5-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
116
125
  --pf-v5-c-button--m-control--PaddingLeft: var(--pf-t--global--spacer--md);
117
126
  --pf-v5-c-button--m-control--PaddingRight: var(--pf-t--global--spacer--md);
@@ -452,9 +461,15 @@
452
461
  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
453
462
  }
454
463
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
455
- min-width: auto;
456
- padding: 0;
457
- background-color: transparent;
464
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--BackgroundColor);
465
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--hover--BackgroundColor);
466
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
467
+ --pf-v5-c-button--m-plain--PaddingTop: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingTop);
468
+ --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
469
+ --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
470
+ --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
471
+ --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
472
+ min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
458
473
  }
459
474
  .pf-v5-c-button.pf-m-block {
460
475
  display: block;
package/components/Button/button.scss CHANGED
@@ -1,5 +1,5 @@
1
- :root,
2
- .#{$button} {
1
+ :where(:root),
2
+ :where(.#{$button}) {
3
3
  --#{$button}--Display: inline-block;
4
4
  --#{$button}--PaddingTop: var(--pf-t--global--spacer--sm);
5
5
  --#{$button}--PaddingRight: var(--pf-t--global--spacer--lg);
@@ -114,21 +114,29 @@
114
114
  --#{$button}--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
115
115
  --#{$button}--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
116
116
  --#{$button}--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
117
- --#{$button}--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
118
- --#{$button}--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
119
- --#{$button}--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
120
- --#{$button}--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
121
117
  --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
122
118
  --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
119
+ --#{$button}--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
120
+ --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--m-plain--PaddingTop) + var(--#{$button}--m-plain--PaddingBottom));
123
121
  --#{$button}--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
124
122
  --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
125
123
  --#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
126
124
  --#{$button}--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
127
125
  --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
126
+ --#{$button}--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
127
+ --#{$button}--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
128
+ --#{$button}--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
129
+ --#{$button}--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
130
+ --#{$button}--m-plain--m-no-padding--MixBlendMode: normal;
131
+ --#{$button}--m-plain--m-no-padding--MinWidth: auto;
132
+ --#{$button}--m-plain--m-no-padding--PaddingTop: 0;
133
+ --#{$button}--m-plain--m-no-padding--PaddingRight: 0;
134
+ --#{$button}--m-plain--m-no-padding--PaddingBottom: 0;
135
+ --#{$button}--m-plain--m-no-padding--PaddingLeft: 0;
136
+ --#{$button}--m-plain--m-no-padding--BackgroundColor: transparent;
137
+ --#{$button}--m-plain--m-no-padding--hover--BackgroundColor: transparent;
138
+ --#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
128
139
  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
129
- --#{$button}--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
130
- --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--m-plain--PaddingTop) + var(--#{$button}--m-plain--PaddingBottom));
131
-
132
140
 
133
141
  // Control
134
142
  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -524,9 +532,16 @@
524
532
  --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
525
533
 
526
534
  &.pf-m-no-padding {
527
- min-width: auto;
528
- padding: 0;
529
- background-color: transparent;
535
+ --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
536
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
537
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
538
+ --#{$button}--m-plain--PaddingTop: var(--#{$button}--m-plain--m-no-padding--PaddingTop);
539
+ --#{$button}--m-plain--PaddingRight: var(--#{$button}--m-plain--m-no-padding--PaddingRight);
540
+ --#{$button}--m-plain--PaddingBottom: var(--#{$button}--m-plain--m-no-padding--PaddingBottom);
541
+ --#{$button}--m-plain--PaddingLeft: var(--#{$button}--m-plain--m-no-padding--PaddingLeft);
542
+ --#{$button}--m-plain--MixBlendMode: var(--#{$button}--m-plain--m-no-padding--MixBlendMode);
543
+
544
+ min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
530
545
  }
531
546
 
532
547
  min-width: var(--#{$button}--m-plain--MinWidth);
package/components/DescriptionList/description-list.css CHANGED
@@ -1,25 +1,24 @@
1
- .pf-v5-c-description-list {
2
- --pf-v5-c-description-list--RowGap: var(--pf-v5-global--gutter--md);
3
- --pf-v5-c-description-list--ColumnGap: var(--pf-v5-global--spacer--lg);
1
+ :root, :where(.pf-v5-c-description-list) {
2
+ --pf-v5-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
3
+ --pf-v5-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
4
4
  --pf-v5-c-description-list--GridTemplateColumns--count: 1;
5
5
  --pf-v5-c-description-list--GridTemplateColumns--width: 1fr;
6
6
  --pf-v5-c-description-list--GridTemplateColumns--min: 0;
7
- --pf-v5-c-description-list--GridTemplateColumns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count), var(--pf-v5-c-description-list--GridTemplateColumns--width));
8
- --pf-v5-c-description-list__group--RowGap: var(--pf-v5-global--spacer--sm);
9
- --pf-v5-c-description-list__group--ColumnGap: var(--pf-v5-global--spacer--sm);
7
+ --pf-v5-c-description-list__group--RowGap: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--sm);
10
9
  --pf-v5-c-description-list__group--GridTemplateColumns: auto;
11
10
  --pf-v5-c-description-list__group--GridTemplateRows: auto 1fr;
12
11
  --pf-v5-c-description-list__group--GridColumn: auto;
13
- --pf-v5-c-description-list--m-compact--RowGap: var(--pf-v5-global--gutter);
14
- --pf-v5-c-description-list--m-compact--ColumnGap: var(--pf-v5-global--spacer--sm);
12
+ --pf-v5-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--md);
13
+ --pf-v5-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
15
14
  --pf-v5-c-description-list__term--Display: inline;
16
15
  --pf-v5-c-description-list__term--sm--Display: flex;
17
- --pf-v5-c-description-list__term--FontWeight: var(--pf-v5-global--FontWeight--bold);
18
- --pf-v5-c-description-list__term--FontSize: var(--pf-v5-global--FontSize--sm);
19
- --pf-v5-c-description-list__term--LineHeight: var(--pf-v5-global--LineHeight--sm);
20
- --pf-v5-c-description-list__term-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
21
- --pf-v5-c-description-list__term-icon--MarginRight: var(--pf-v5-global--spacer--sm);
22
- --pf-v5-c-description-list__term-icon--Color: var(--pf-v5-global--icon--Color--light);
16
+ --pf-v5-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
17
+ --pf-v5-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
18
+ --pf-v5-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
19
+ --pf-v5-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
20
+ --pf-v5-c-description-list__term-icon--MarginRight: var(--pf-t--global--spacer--sm);
21
+ --pf-v5-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
23
22
  --pf-v5-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count));
24
23
  --pf-v5-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
25
24
  --pf-v5-c-description-list--m-horizontal__term--width: 12ch;
@@ -31,52 +30,58 @@
31
30
  --pf-v5-c-description-list--m-3-col--GridTemplateColumns--count: 3;
32
31
  --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
33
32
  --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min);
34
- --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
35
- --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
33
+ --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-t--global--icon--color--regular);
34
+ --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--100);
36
35
  --pf-v5-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
37
- --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
38
- --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
39
- --pf-v5-c-description-list--m-display-lg__description--FontSize: var(--pf-v5-global--FontSize--lg);
40
- --pf-v5-c-description-list--m-display-2xl__description--FontSize: var(--pf-v5-global--FontSize--2xl);
41
- display: grid;
42
- grid-template-columns: var(--pf-v5-c-description-list--GridTemplateColumns);
43
- row-gap: var(--pf-v5-c-description-list--RowGap);
44
- column-gap: var(--pf-v5-c-description-list--ColumnGap);
45
- align-items: baseline;
36
+ --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
37
+ --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
38
+ --pf-v5-c-description-list--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg);
39
+ --pf-v5-c-description-list--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg);
40
+ --pf-v5-c-description-list--m-horizontal__term--width-on-sm: inherit;
41
+ --pf-v5-c-description-list--m-horizontal__term--width-on-md: inherit;
42
+ --pf-v5-c-description-list--m-horizontal__term--width-on-lg: inherit;
43
+ --pf-v5-c-description-list--m-horizontal__term--width-on-xl: inherit;
44
+ --pf-v5-c-description-list--m-horizontal__term--width-on-2xl: inherit;
45
+ --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
46
46
  }
47
47
  @media screen and (min-width: 576px) {
48
- .pf-v5-c-description-list {
48
+ :root, :where(.pf-v5-c-description-list) {
49
49
  --pf-v5-c-description-list__term--Display: var(--pf-v5-c-description-list__term--sm--Display);
50
50
  }
51
51
  }
52
- .pf-v5-c-description-list[class*=pf-m-horizontal] {
53
- --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
54
- }
55
52
  @media (min-width: 576px) {
56
- .pf-v5-c-description-list[class*=pf-m-horizontal] {
53
+ :root, :where(.pf-v5-c-description-list) {
57
54
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width));
58
55
  }
59
56
  }
60
57
  @media (min-width: 768px) {
61
- .pf-v5-c-description-list[class*=pf-m-horizontal] {
58
+ :root, :where(.pf-v5-c-description-list) {
62
59
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)));
63
60
  }
64
61
  }
65
62
  @media (min-width: 992px) {
66
- .pf-v5-c-description-list[class*=pf-m-horizontal] {
63
+ :root, :where(.pf-v5-c-description-list) {
67
64
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))));
68
65
  }
69
66
  }
70
67
  @media (min-width: 1200px) {
71
- .pf-v5-c-description-list[class*=pf-m-horizontal] {
68
+ :root, :where(.pf-v5-c-description-list) {
72
69
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)))));
73
70
  }
74
71
  }
75
72
  @media (min-width: 1450px) {
76
- .pf-v5-c-description-list[class*=pf-m-horizontal] {
73
+ :root, :where(.pf-v5-c-description-list) {
77
74
  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))))));
78
75
  }
79
76
  }
77
+
78
+ .pf-v5-c-description-list {
79
+ display: grid;
80
+ grid-template-columns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count), var(--pf-v5-c-description-list--GridTemplateColumns--width));
81
+ row-gap: var(--pf-v5-c-description-list--RowGap);
82
+ column-gap: var(--pf-v5-c-description-list--ColumnGap);
83
+ align-items: baseline;
84
+ }
80
85
  .pf-v5-c-description-list.pf-m-inline-grid {
81
86
  display: inline-grid;
82
87
  }
package/components/DescriptionList/description-list.scss CHANGED
@@ -1,40 +1,39 @@
1
1
  // @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
  $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
3
3
 
4
- .#{$description-list} {
5
- --#{$description-list}--RowGap: var(--#{$pf-global}--gutter--md);
6
- --#{$description-list}--ColumnGap: var(--#{$pf-global}--spacer--lg);
4
+ :root, :where(.#{$description-list}) {
5
+ --#{$description-list}--RowGap: var(--pf-t--global--spacer--lg);
6
+ --#{$description-list}--ColumnGap: var(--pf-t--global--spacer--lg);
7
7
  --#{$description-list}--GridTemplateColumns--count: 1;
8
8
  --#{$description-list}--GridTemplateColumns--width: 1fr;
9
9
  --#{$description-list}--GridTemplateColumns--min: 0;
10
- --#{$description-list}--GridTemplateColumns: repeat(var(--#{$description-list}--GridTemplateColumns--count), var(--#{$description-list}--GridTemplateColumns--width));
11
10
 
12
11
  // group
13
- --#{$description-list}__group--RowGap: var(--#{$pf-global}--spacer--sm);
14
- --#{$description-list}__group--ColumnGap: var(--#{$pf-global}--spacer--sm);
12
+ --#{$description-list}__group--RowGap: var(--pf-t--global--spacer--sm);
13
+ --#{$description-list}__group--ColumnGap: var(--pf-t--global--spacer--sm);
15
14
  --#{$description-list}__group--GridTemplateColumns: auto;
16
15
  --#{$description-list}__group--GridTemplateRows: auto 1fr;
17
16
  --#{$description-list}__group--GridColumn: auto;
18
17
 
19
18
  // compact
20
- --#{$description-list}--m-compact--RowGap: var(--#{$pf-global}--gutter);
21
- --#{$description-list}--m-compact--ColumnGap: var(--#{$pf-global}--spacer--sm);
19
+ --#{$description-list}--m-compact--RowGap: var(--pf-t--global--spacer--md);
20
+ --#{$description-list}--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
22
21
 
23
22
  // term
24
23
  --#{$description-list}__term--Display: inline;
25
24
  --#{$description-list}__term--sm--Display: flex;
26
- --#{$description-list}__term--FontWeight: var(--#{$pf-global}--FontWeight--bold);
27
- --#{$description-list}__term--FontSize: var(--#{$pf-global}--FontSize--sm);
28
- --#{$description-list}__term--LineHeight: var(--#{$pf-global}--LineHeight--sm);
25
+ --#{$description-list}__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
26
+ --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
27
+ --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
29
28
 
30
29
  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
31
30
  --#{$description-list}__term--Display: var(--#{$description-list}__term--sm--Display);
32
31
  }
33
32
 
34
33
  // icon
35
- --#{$description-list}__term-icon--MinWidth: var(--#{$pf-global}--icon--FontSize--sm);
36
- --#{$description-list}__term-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
37
- --#{$description-list}__term-icon--Color: var(--#{$pf-global}--icon--Color--light);
34
+ --#{$description-list}__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
35
+ --#{$description-list}__term-icon--MarginRight: var(--pf-t--global--spacer--sm);
36
+ --#{$description-list}__term-icon--Color: var(--pf-t--global--icon--color--subtle);
38
37
 
39
38
  // vertical
40
39
  --#{$description-list}--m-vertical__group--GridTemplateColumns: repeat(var(--#{$description-list}--GridTemplateColumns--count));
@@ -54,26 +53,27 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
54
53
  --#{$description-list}--m-auto-fit--GridTemplateColumns--minmax--min: var(--#{$description-list}--m-auto-fit--GridTemplateColumns--min);
55
54
 
56
55
  // help text
57
- --#{$description-list}__text--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200);
58
- --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm);
56
+ --#{$description-list}__text--m-help-text--TextDecorationColor: var(--pf-t--global--icon--color--regular);
57
+ --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--100);
59
58
  --#{$description-list}__text--m-help-text--TextDecorationOffset: #{pf-size-prem(4px)};
60
- --#{$description-list}__text--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100);
61
- --#{$description-list}__text--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100);
59
+ --#{$description-list}__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
60
+ --#{$description-list}__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
62
61
 
63
62
  // Display modifiers
64
- --#{$description-list}--m-display-lg__description--FontSize: var(--#{$pf-global}--FontSize--lg);
65
- --#{$description-list}--m-display-2xl__description--FontSize: var(--#{$pf-global}--FontSize--2xl);
63
+ --#{$description-list}--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg); // TODO replace with new font tokens when available
64
+ --#{$description-list}--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg); // TODO replace with new font tokens when available
65
+
66
+ @include pf-v5-output-root-variables("--#{$description-list}--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
67
+ @include pf-v5-build-css-variable-stack("--pf-v5-c-description-list__term--width", "--pf-v5-c-description-list--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
68
+ }
66
69
 
70
+ .#{$description-list} {
67
71
  display: grid;
68
- grid-template-columns: var(--#{$description-list}--GridTemplateColumns);
72
+ grid-template-columns: repeat(var(--#{$description-list}--GridTemplateColumns--count), var(--#{$description-list}--GridTemplateColumns--width));
69
73
  row-gap: var(--#{$description-list}--RowGap);
70
74
  column-gap: var(--#{$description-list}--ColumnGap);
71
75
  align-items: baseline;
72
76
 
73
- &[class*="pf-m-horizontal"] {
74
- @include pf-v5-build-css-variable-stack("--pf-v5-c-description-list__term--width", "--pf-v5-c-description-list--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
75
- }
76
-
77
77
  &.pf-m-inline-grid {
78
78
  display: inline-grid;
79
79
  }
package/components/Label/label-group.css CHANGED
@@ -1,38 +1,39 @@
1
- .pf-v5-c-label-group {
2
- --pf-v5-c-label-group--RowGap: var(--pf-v5-global--spacer--sm);
3
- --pf-v5-c-label-group--ColumnGap: 0;
4
- --pf-v5-c-label-group--m-vertical--RowGap: var(--pf-v5-global--spacer--sm);
5
- --pf-v5-c-label-group--m-vertical--ColumnGap: var(--pf-v5-global--spacer--sm);
6
- --pf-v5-c-label-group__main--RowGap: var(--pf-v5-global--spacer--xs);
7
- --pf-v5-c-label-group__main--ColumnGap: var(--pf-v5-global--spacer--sm);
8
- --pf-v5-c-label-group--m-vertical__main--RowGap: var(--pf-v5-global--spacer--sm);
9
- --pf-v5-c-label-group--m-vertical__main--ColumnGap: var(--pf-v5-global--spacer--xs);
10
- --pf-v5-c-label-group__list--RowGap: var(--pf-v5-global--spacer--xs);
11
- --pf-v5-c-label-group__list--ColumnGap: var(--pf-v5-global--spacer--xs);
12
- --pf-v5-c-label-group--m-vertical__list--RowGap: var(--pf-v5-global--spacer--xs);
13
- --pf-v5-c-label-group--m-vertical__list--ColumnGap: var(--pf-v5-global--spacer--xs);
14
- --pf-v5-c-label-group--m-category--PaddingTop: var(--pf-v5-global--spacer--xs);
15
- --pf-v5-c-label-group--m-category--PaddingRight: var(--pf-v5-global--spacer--xs);
16
- --pf-v5-c-label-group--m-category--PaddingBottom: var(--pf-v5-global--spacer--xs);
17
- --pf-v5-c-label-group--m-category--PaddingLeft: var(--pf-v5-global--spacer--sm);
18
- --pf-v5-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-v5-global--spacer--sm);
19
- --pf-v5-c-label-group--m-category--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
20
- --pf-v5-c-label-group--m-category--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
21
- --pf-v5-c-label-group--m-category--BorderColor: var(--pf-v5-global--BorderColor--300);
22
- --pf-v5-c-label-group--m-category--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
23
- --pf-v5-c-label-group__label--FontSize: var(--pf-v5-global--FontSize--sm);
1
+ :where(:root),
2
+ :where(.pf-v5-c-label-group) {
3
+ --pf-v5-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
5
+ --pf-v5-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
8
+ --pf-v5-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
9
+ --pf-v5-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
10
+ --pf-v5-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
11
+ --pf-v5-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
12
+ --pf-v5-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
13
+ --pf-v5-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
14
+ --pf-v5-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
15
+ --pf-v5-c-label-group--m-category--PaddingTop: var(--pf-t--global--spacer--xs);
16
+ --pf-v5-c-label-group--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
17
+ --pf-v5-c-label-group--m-category--PaddingBottom: var(--pf-t--global--spacer--xs);
18
+ --pf-v5-c-label-group--m-category--PaddingLeft: var(--pf-t--global--spacer--sm);
19
+ --pf-v5-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
20
+ --pf-v5-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
21
+ --pf-v5-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
22
+ --pf-v5-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
24
23
  --pf-v5-c-label-group__label--MaxWidth: 18ch;
25
- --pf-v5-c-label-group__close--MarginTop: calc(var(--pf-v5-global--spacer--xs) * -1);
26
- --pf-v5-c-label-group__close--MarginBottom: calc(var(--pf-v5-global--spacer--xs) * -1);
27
- --pf-v5-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
28
- --pf-v5-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
29
- --pf-v5-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
30
- --pf-v5-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
24
+ --pf-v5-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
25
+ --pf-v5-c-label-group__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
26
+ --pf-v5-c-label-group__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
27
+ --pf-v5-c-label-group__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
28
+ --pf-v5-c-label-group__close--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
31
29
  --pf-v5-c-label-group__textarea--MinWidth: 12.5rem;
32
30
  --pf-v5-c-label-group__textarea--PaddingTop: 0.125rem;
33
- --pf-v5-c-label-group__textarea--PaddingRight: var(--pf-v5-global--spacer--xs);
31
+ --pf-v5-c-label-group__textarea--PaddingRight: var(--pf-t--global--spacer--xs);
34
32
  --pf-v5-c-label-group__textarea--PaddingBottom: 0;
35
- --pf-v5-c-label-group__textarea--PaddingLeft: var(--pf-v5-global--spacer--xs);
33
+ --pf-v5-c-label-group__textarea--PaddingLeft: var(--pf-t--global--spacer--xs);
34
+ }
35
+
36
+ .pf-v5-c-label-group {
36
37
  display: inline-flex;
37
38
  row-gap: var(--pf-v5-c-label-group--RowGap);
38
39
  column-gap: var(--pf-v5-c-label-group--ColumnGap);
@@ -54,10 +55,6 @@
54
55
  --pf-v5-c-label-group__main--ColumnGap: var(--pf-v5-c-label-group--m-vertical__main--ColumnGap);
55
56
  --pf-v5-c-label-group__list--RowGap: var(--pf-v5-c-label-group--m-vertical__list--RowGap);
56
57
  --pf-v5-c-label-group__list--ColumnGap: var(--pf-v5-c-label-group--m-vertical__list--ColumnGap);
57
- --pf-v5-c-label-group__close--MarginTop: var(--pf-v5-c-label-group--m-vertical__close--MarginTop);
58
- --pf-v5-c-label-group__close--MarginLeft: var(--pf-v5-c-label-group--m-vertical__close--MarginLeft);
59
- --pf-v5-c-label-group__close--MarginBottom: 0;
60
- --pf-v5-c-label-group__close--MarginRight: var(--pf-v5-c-label-group--m-vertical__close--MarginRight);
61
58
  --pf-v5-c-label-group--m-category--PaddingRight: var(--pf-v5-c-label-group--m-vertical--m-category--PaddingRight);
62
59
  }
63
60
  .pf-v5-c-label-group.pf-m-vertical.pf-v5-c-label-group {
@@ -70,10 +67,6 @@
70
67
  .pf-v5-c-label-group.pf-m-vertical .pf-v5-c-label-group__main {
71
68
  flex-direction: column;
72
69
  }
73
- .pf-v5-c-label-group.pf-m-vertical .pf-v5-c-label-group__close .pf-v5-c-button {
74
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-label-group--m-vertical__close--c-button--PaddingLeft);
75
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-label-group--m-vertical__close--c-button--PaddingRight);
76
- }
77
70
  .pf-v5-c-label-group.pf-m-editable,
78
71
  .pf-v5-c-label-group.pf-m-editable .pf-v5-c-label-group__main,
79
72
  .pf-v5-c-label-group.pf-m-editable .pf-v5-c-label-group__list {
@@ -111,16 +104,18 @@
111
104
  text-overflow: ellipsis;
112
105
  white-space: nowrap;
113
106
  max-width: var(--pf-v5-c-label-group__label--MaxWidth);
114
- font-size: var(--pf-v5-c-label-group__label--FontSize);
115
107
  }
116
108
 
117
109
  .pf-v5-c-label-group__close {
118
110
  display: flex;
119
111
  align-self: flex-start;
120
- margin-block-start: var(--pf-v5-c-label-group__close--MarginTop);
121
- margin-block-end: var(--pf-v5-c-label-group__close--MarginBottom);
122
- margin-inline-start: var(--pf-v5-c-label-group__close--MarginLeft);
123
- margin-inline-end: var(--pf-v5-c-label-group__close--MarginRight);
112
+ }
113
+ .pf-v5-c-label-group__close .pf-v5-c-button {
114
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-label-group__close--c-button--FontSize);
115
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: var(--pf-v5-c-label-group__close--c-button--PaddingTop);
116
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: var(--pf-v5-c-label-group__close--c-button--PaddingRight);
117
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingBottom: var(--pf-v5-c-label-group__close--c-button--PaddingBottom);
118
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingLeft: var(--pf-v5-c-label-group__close--c-button--PaddingLeft);
124
119
  }
125
120
 
126
121
  .pf-v5-c-label-group__textarea {
package/components/Label/label-group.scss CHANGED
@@ -1,54 +1,54 @@
1
1
  // @debug $label-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$label-group} {
3
+ :where(:root),
4
+ :where(.#{$label-group}) {
4
5
  // Label group - spaces main with the close button
5
- --#{$label-group}--RowGap: var(--#{$pf-global}--spacer--sm);
6
- --#{$label-group}--ColumnGap: 0;
7
- --#{$label-group}--m-vertical--RowGap: var(--#{$pf-global}--spacer--sm);
8
- --#{$label-group}--m-vertical--ColumnGap: var(--#{$pf-global}--spacer--sm);
6
+ --#{$label-group}--RowGap: var(--pf-t--global--spacer--sm);
7
+ --#{$label-group}--ColumnGap: var(--pf-t--global--spacer--xs);
8
+ --#{$label-group}--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
9
+ --#{$label-group}--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
9
10
 
10
11
  // Main - spaces the category label with the list
11
- --#{$label-group}__main--RowGap: var(--#{$pf-global}--spacer--xs);
12
- --#{$label-group}__main--ColumnGap: var(--#{$pf-global}--spacer--sm);
13
- --#{$label-group}--m-vertical__main--RowGap: var(--#{$pf-global}--spacer--sm);
14
- --#{$label-group}--m-vertical__main--ColumnGap: var(--#{$pf-global}--spacer--xs);
12
+ --#{$label-group}__main--RowGap: var(--pf-t--global--spacer--xs);
13
+ --#{$label-group}__main--ColumnGap: var(--pf-t--global--spacer--sm);
14
+ --#{$label-group}--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
15
+ --#{$label-group}--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
15
16
 
16
17
  // List - spaces the items
17
- --#{$label-group}__list--RowGap: var(--#{$pf-global}--spacer--xs);
18
- --#{$label-group}__list--ColumnGap: var(--#{$pf-global}--spacer--xs);
19
- --#{$label-group}--m-vertical__list--RowGap: var(--#{$pf-global}--spacer--xs);
20
- --#{$label-group}--m-vertical__list--ColumnGap: var(--#{$pf-global}--spacer--xs);
18
+ --#{$label-group}__list--RowGap: var(--pf-t--global--spacer--xs);
19
+ --#{$label-group}__list--ColumnGap: var(--pf-t--global--spacer--xs);
20
+ --#{$label-group}--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
21
+ --#{$label-group}--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
21
22
 
22
23
  // Category
23
- --#{$label-group}--m-category--PaddingTop: var(--#{$pf-global}--spacer--xs);
24
- --#{$label-group}--m-category--PaddingRight: var(--#{$pf-global}--spacer--xs);
25
- --#{$label-group}--m-category--PaddingBottom: var(--#{$pf-global}--spacer--xs);
26
- --#{$label-group}--m-category--PaddingLeft: var(--#{$pf-global}--spacer--sm);
27
- --#{$label-group}--m-vertical--m-category--PaddingRight: var(--#{$pf-global}--spacer--sm);
28
- --#{$label-group}--m-category--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
29
- --#{$label-group}--m-category--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
30
- --#{$label-group}--m-category--BorderColor: var(--#{$pf-global}--BorderColor--300);
31
- --#{$label-group}--m-category--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
24
+ --#{$label-group}--m-category--PaddingTop: var(--pf-t--global--spacer--xs);
25
+ --#{$label-group}--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
26
+ --#{$label-group}--m-category--PaddingBottom: var(--pf-t--global--spacer--xs);
27
+ --#{$label-group}--m-category--PaddingLeft: var(--pf-t--global--spacer--sm);
28
+ --#{$label-group}--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
29
+ --#{$label-group}--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
30
+ --#{$label-group}--m-category--BorderColor: var(--pf-t--global--border--color--default);
31
+ --#{$label-group}--m-vertical--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
32
32
 
33
33
  // Label
34
- --#{$label-group}__label--FontSize: var(--#{$pf-global}--FontSize--sm);
35
34
  --#{$label-group}__label--MaxWidth: 18ch;
36
35
 
37
36
  // Close
38
- --#{$label-group}__close--MarginTop: calc(var(--#{$pf-global}--spacer--xs) * -1);
39
- --#{$label-group}__close--MarginBottom: calc(var(--#{$pf-global}--spacer--xs) * -1);
40
- --#{$label-group}--m-vertical__close--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
41
- --#{$label-group}--m-vertical__close--MarginRight: calc(var(--#{$pf-global}--spacer--form-element) * -1);
42
- --#{$label-group}--m-vertical__close--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
43
- --#{$label-group}--m-vertical__close--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
37
+ --#{$label-group}__close--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
38
+ --#{$label-group}__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
39
+ --#{$label-group}__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
40
+ --#{$label-group}__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
41
+ --#{$label-group}__close--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
44
42
 
45
43
  // Textarea
46
44
  --#{$label-group}__textarea--MinWidth: #{pf-size-prem(200px)};
47
45
  --#{$label-group}__textarea--PaddingTop: #{pf-size-prem(2px)};
48
- --#{$label-group}__textarea--PaddingRight: var(--#{$pf-global}--spacer--xs);
46
+ --#{$label-group}__textarea--PaddingRight: var(--pf-t--global--spacer--xs);
49
47
  --#{$label-group}__textarea--PaddingBottom: 0;
50
- --#{$label-group}__textarea--PaddingLeft: var(--#{$pf-global}--spacer--xs);
48
+ --#{$label-group}__textarea--PaddingLeft: var(--pf-t--global--spacer--xs);
49
+ }
51
50
 
51
+ .#{$label-group} {
52
52
  display: inline-flex;
53
53
  row-gap: var(--#{$label-group}--RowGap);
54
54
  column-gap: var(--#{$label-group}--ColumnGap);
@@ -71,10 +71,6 @@
71
71
  --#{$label-group}__main--ColumnGap: var(--#{$label-group}--m-vertical__main--ColumnGap);
72
72
  --#{$label-group}__list--RowGap: var(--#{$label-group}--m-vertical__list--RowGap);
73
73
  --#{$label-group}__list--ColumnGap: var(--#{$label-group}--m-vertical__list--ColumnGap);
74
- --#{$label-group}__close--MarginTop: var(--#{$label-group}--m-vertical__close--MarginTop);
75
- --#{$label-group}__close--MarginLeft: var(--#{$label-group}--m-vertical__close--MarginLeft);
76
- --#{$label-group}__close--MarginBottom: 0;
77
- --#{$label-group}__close--MarginRight: var(--#{$label-group}--m-vertical__close--MarginRight);
78
74
  --#{$label-group}--m-category--PaddingRight: var(--#{$label-group}--m-vertical--m-category--PaddingRight);
79
75
 
80
76
  &.#{$label-group} {
@@ -89,11 +85,6 @@
89
85
  .#{$label-group}__main {
90
86
  flex-direction: column;
91
87
  }
92
-
93
- .#{$label-group}__close .#{$button} {
94
- --#{$button}--PaddingLeft: var(--#{$label-group}--m-vertical__close--c-button--PaddingLeft);
95
- --#{$button}--PaddingRight: var(--#{$label-group}--m-vertical__close--c-button--PaddingRight);
96
- }
97
88
  }
98
89
 
99
90
  &.pf-m-editable {
@@ -136,16 +127,19 @@
136
127
  @include pf-v5-text-overflow;
137
128
 
138
129
  max-width: var(--#{$label-group}__label--MaxWidth);
139
- font-size: var(--#{$label-group}__label--FontSize);
140
130
  }
141
131
 
142
132
  .#{$label-group}__close {
143
133
  display: flex;
144
134
  align-self: flex-start;
145
- margin-block-start: var(--#{$label-group}__close--MarginTop);
146
- margin-block-end: var(--#{$label-group}__close--MarginBottom);
147
- margin-inline-start: var(--#{$label-group}__close--MarginLeft);
148
- margin-inline-end: var(--#{$label-group}__close--MarginRight);
135
+
136
+ .#{$button} {
137
+ --#{$button}--FontSize: var(--#{$label-group}__close--c-button--FontSize);
138
+ --#{$button}--m-plain--m-no-padding--PaddingTop: var(--#{$label-group}__close--c-button--PaddingTop);
139
+ --#{$button}--m-plain--m-no-padding--PaddingRight: var(--#{$label-group}__close--c-button--PaddingRight);
140
+ --#{$button}--m-plain--m-no-padding--PaddingBottom: var(--#{$label-group}__close--c-button--PaddingBottom);
141
+ --#{$button}--m-plain--m-no-padding--PaddingLeft: var(--#{$label-group}__close--c-button--PaddingLeft);
142
+ }
149
143
  }
150
144
 
151
145
  .#{$label-group}__textarea {