@patternfly/patternfly 6.0.0-alpha.55 → 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 (26) 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/JumpLinks/jump-links.css +34 -34
  6. package/components/JumpLinks/jump-links.scss +35 -36
  7. package/components/Label/label-group.css +39 -44
  8. package/components/Label/label-group.scss +39 -45
  9. package/components/Label/label.css +258 -355
  10. package/components/Label/label.scss +297 -347
  11. package/components/SimpleList/simple-list.css +1 -1
  12. package/components/SimpleList/simple-list.scss +1 -1
  13. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  14. package/docs/components/Label/examples/Label.css +4 -0
  15. package/docs/components/Label/examples/Label.md +999 -223
  16. package/docs/demos/Drawer/examples/Drawer.md +100 -80
  17. package/docs/demos/Form/examples/BasicForms.md +2 -2
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +275 -185
  19. package/package.json +1 -1
  20. package/patternfly-no-globals.css +481 -483
  21. package/patternfly-theme-dark-unversioned.css +481 -483
  22. package/patternfly.css +481 -483
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
  25. package/sass-utilities/mixins.scss +18 -0
  26. 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/JumpLinks/jump-links.css CHANGED
@@ -1,60 +1,63 @@
1
- .pf-v5-c-jump-links {
1
+ :where(:root),
2
+ :where(.pf-v5-c-jump-links) {
2
3
  --pf-v5-c-jump-links__list--Display: flex;
3
4
  --pf-v5-c-jump-links__list--PaddingTop: 0;
4
- --pf-v5-c-jump-links__list--PaddingRight: var(--pf-v5-global--spacer--md);
5
+ --pf-v5-c-jump-links__list--PaddingRight: var(--pf-t--global--spacer--md);
5
6
  --pf-v5-c-jump-links__list--PaddingBottom: 0;
6
- --pf-v5-c-jump-links__list--PaddingLeft: var(--pf-v5-global--spacer--md);
7
- --pf-v5-c-jump-links--m-vertical__list--PaddingTop: var(--pf-v5-global--spacer--md);
7
+ --pf-v5-c-jump-links__list--PaddingLeft: var(--pf-t--global--spacer--md);
8
+ --pf-v5-c-jump-links--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
8
9
  --pf-v5-c-jump-links--m-vertical__list--PaddingRight: 0;
9
- --pf-v5-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-v5-global--spacer--md);
10
+ --pf-v5-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
10
11
  --pf-v5-c-jump-links--m-vertical__list--PaddingLeft: 0;
11
12
  --pf-v5-c-jump-links__list--FlexDirection: row;
12
13
  --pf-v5-c-jump-links--m-vertical__list--FlexDirection: column;
13
- --pf-v5-c-jump-links__list--before--BorderColor: var(--pf-v5-global--BorderColor--100);
14
- --pf-v5-c-jump-links__list--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
14
+ --pf-v5-c-jump-links__list--before--BorderColor: var(--pf-t--global--border--color--default);
15
+ --pf-v5-c-jump-links__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
15
16
  --pf-v5-c-jump-links__list--before--BorderRightWidth: 0;
16
17
  --pf-v5-c-jump-links__list--before--BorderBottomWidth: 0;
17
18
  --pf-v5-c-jump-links__list--before--BorderLeftWidth: 0;
18
- --pf-v5-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
19
+ --pf-v5-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
19
20
  --pf-v5-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
20
- --pf-v5-c-jump-links__list__list--MarginTop: calc(var(--pf-v5-global--spacer--sm) * -1);
21
- --pf-v5-c-jump-links__link--PaddingTop: var(--pf-v5-global--spacer--md);
22
- --pf-v5-c-jump-links__link--PaddingRight: var(--pf-v5-global--spacer--md);
23
- --pf-v5-c-jump-links__link--PaddingBottom: var(--pf-v5-global--spacer--md);
24
- --pf-v5-c-jump-links__link--PaddingLeft: var(--pf-v5-global--spacer--md);
25
- --pf-v5-c-jump-links__list__list__link--PaddingTop: var(--pf-v5-global--spacer--sm);
26
- --pf-v5-c-jump-links__list__list__link--PaddingLeft: var(--pf-v5-global--spacer--lg);
27
- --pf-v5-c-jump-links__list__list__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
28
- --pf-v5-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--sm));
21
+ --pf-v5-c-jump-links__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
22
+ --pf-v5-c-jump-links__link--PaddingTop: var(--pf-t--global--spacer--sm);
23
+ --pf-v5-c-jump-links__link--PaddingRight: var(--pf-t--global--spacer--sm);
24
+ --pf-v5-c-jump-links__link--PaddingBottom: var(--pf-t--global--spacer--sm);
25
+ --pf-v5-c-jump-links__link--PaddingLeft: var(--pf-t--global--spacer--sm);
26
+ --pf-v5-c-jump-links__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
27
+ --pf-v5-c-jump-links__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
28
+ --pf-v5-c-jump-links__list__list__link--PaddingBottom: var(--pf-t--global--spacer--sm);
29
+ --pf-v5-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
29
30
  --pf-v5-c-jump-links__link--before--BorderTopWidth: 0;
30
31
  --pf-v5-c-jump-links__link--before--BorderRightWidth: 0;
31
32
  --pf-v5-c-jump-links__link--before--BorderBottomWidth: 0;
32
33
  --pf-v5-c-jump-links__link--before--BorderLeftWidth: 0;
33
34
  --pf-v5-c-jump-links__link--before--BorderColor: transparent;
34
- --pf-v5-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--lg);
35
+ --pf-v5-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
35
36
  --pf-v5-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
36
- --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-v5-global--primary-color--100);
37
+ --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
37
38
  --pf-v5-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
38
- --pf-v5-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--lg);
39
- --pf-v5-c-jump-links__link-text--Color: var(--pf-v5-global--Color--200);
40
- --pf-v5-c-jump-links__link--hover__link-text--Color: var(--pf-v5-global--Color--100);
41
- --pf-v5-c-jump-links__link--focus__link-text--Color: var(--pf-v5-global--Color--100);
42
- --pf-v5-c-jump-links__item--m-current__link-text--Color: var(--pf-v5-global--Color--100);
43
- --pf-v5-c-jump-links__label--MarginBottom: var(--pf-v5-global--spacer--md);
39
+ --pf-v5-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-t--global--border--width--extra-strong);
40
+ --pf-v5-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
41
+ --pf-v5-c-jump-links__link--hover__link-text--Color: var(--pf-t--global--text--color--subtle);
42
+ --pf-v5-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
43
+ --pf-v5-c-jump-links__label--MarginBottom: var(--pf-t--global--spacer--md);
44
44
  --pf-v5-c-jump-links__label--Display: block;
45
45
  --pf-v5-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
46
46
  --pf-v5-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-v5-global--spacer--form-element));
47
47
  --pf-v5-c-jump-links__toggle--MarginBottom: var(--pf-v5-c-jump-links__toggle--MarginBottom--base);
48
- --pf-v5-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v5-c-jump-links__toggle--MarginBottom--base) + var(--pf-v5-global--spacer--md));
49
- --pf-v5-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
48
+ --pf-v5-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v5-c-jump-links__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
49
+ --pf-v5-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
50
50
  --pf-v5-c-jump-links__toggle--Display: none;
51
51
  --pf-v5-c-jump-links__toggle-icon--Color: currentcolor;
52
52
  --pf-v5-c-jump-links__toggle-icon--Transition: var(--pf-v5-global--Transition);
53
53
  --pf-v5-c-jump-links__toggle-icon--Rotate: 0;
54
- --pf-v5-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
54
+ --pf-v5-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
55
55
  --pf-v5-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
56
- --pf-v5-c-jump-links__toggle-text--MarginLeft: var(--pf-v5-global--spacer--md);
57
- --pf-v5-c-jump-links__toggle-text--Color: var(--pf-v5-global--Color--100);
56
+ --pf-v5-c-jump-links__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
57
+ --pf-v5-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
58
+ }
59
+
60
+ .pf-v5-c-jump-links {
58
61
  display: flex;
59
62
  }
60
63
  .pf-v5-c-jump-links.pf-m-center {
@@ -192,12 +195,9 @@
192
195
  text-decoration: none;
193
196
  outline-offset: var(--pf-v5-c-jump-links__link--OutlineOffset);
194
197
  }
195
- .pf-v5-c-jump-links__link:hover {
198
+ .pf-v5-c-jump-links__link:hover, .pf-v5-c-jump-links__link:focus {
196
199
  --pf-v5-c-jump-links__link-text--Color: var(--pf-v5-c-jump-links__link--hover__link-text--Color);
197
200
  }
198
- .pf-v5-c-jump-links__link:focus {
199
- --pf-v5-c-jump-links__link-text--Color: var(--pf-v5-c-jump-links__link--focus__link-text--Color);
200
- }
201
201
  .pf-v5-c-jump-links__link::before {
202
202
  position: absolute;
203
203
  inset: 0;
package/components/JumpLinks/jump-links.scss CHANGED
@@ -1,37 +1,38 @@
1
1
  // @debug $jump-links; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
  $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
3
3
 
4
- .#{$jump-links} {
4
+ :where(:root),
5
+ :where(.#{$jump-links}) {
5
6
  // list
6
7
  --#{$jump-links}__list--Display: flex;
7
8
  --#{$jump-links}__list--PaddingTop: 0;
8
- --#{$jump-links}__list--PaddingRight: var(--#{$pf-global}--spacer--md);
9
+ --#{$jump-links}__list--PaddingRight: var(--pf-t--global--spacer--md);
9
10
  --#{$jump-links}__list--PaddingBottom: 0;
10
- --#{$jump-links}__list--PaddingLeft: var(--#{$pf-global}--spacer--md);
11
- --#{$jump-links}--m-vertical__list--PaddingTop: var(--#{$pf-global}--spacer--md);
11
+ --#{$jump-links}__list--PaddingLeft: var(--pf-t--global--spacer--md);
12
+ --#{$jump-links}--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
12
13
  --#{$jump-links}--m-vertical__list--PaddingRight: 0;
13
- --#{$jump-links}--m-vertical__list--PaddingBottom: var(--#{$pf-global}--spacer--md);
14
+ --#{$jump-links}--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
14
15
  --#{$jump-links}--m-vertical__list--PaddingLeft: 0;
15
16
  --#{$jump-links}__list--FlexDirection: row;
16
17
  --#{$jump-links}--m-vertical__list--FlexDirection: column;
17
- --#{$jump-links}__list--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
18
- --#{$jump-links}__list--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
18
+ --#{$jump-links}__list--before--BorderColor: var(--pf-t--global--border--color--default);
19
+ --#{$jump-links}__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
19
20
  --#{$jump-links}__list--before--BorderRightWidth: 0;
20
21
  --#{$jump-links}__list--before--BorderBottomWidth: 0;
21
22
  --#{$jump-links}__list--before--BorderLeftWidth: 0;
22
- --#{$jump-links}--m-vertical__list--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
23
+ --#{$jump-links}--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
23
24
  --#{$jump-links}--m-vertical__list--before--BorderTopWidth: 0;
24
- --#{$jump-links}__list__list--MarginTop: calc(var(--#{$pf-global}--spacer--sm) * -1);
25
+ --#{$jump-links}__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
25
26
 
26
27
  // link
27
- --#{$jump-links}__link--PaddingTop: var(--#{$pf-global}--spacer--md);
28
- --#{$jump-links}__link--PaddingRight: var(--#{$pf-global}--spacer--md);
29
- --#{$jump-links}__link--PaddingBottom: var(--#{$pf-global}--spacer--md);
30
- --#{$jump-links}__link--PaddingLeft: var(--#{$pf-global}--spacer--md);
31
- --#{$jump-links}__list__list__link--PaddingTop: var(--#{$pf-global}--spacer--sm);
32
- --#{$jump-links}__list__list__link--PaddingLeft: var(--#{$pf-global}--spacer--lg);
33
- --#{$jump-links}__list__list__link--PaddingBottom: var(--#{$pf-global}--spacer--sm);
34
- --#{$jump-links}__link--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--sm));
28
+ --#{$jump-links}__link--PaddingTop: var(--pf-t--global--spacer--sm);
29
+ --#{$jump-links}__link--PaddingRight: var(--pf-t--global--spacer--sm);
30
+ --#{$jump-links}__link--PaddingBottom: var(--pf-t--global--spacer--sm);
31
+ --#{$jump-links}__link--PaddingLeft: var(--pf-t--global--spacer--sm);
32
+ --#{$jump-links}__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
33
+ --#{$jump-links}__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
34
+ --#{$jump-links}__list__list__link--PaddingBottom: var(--pf-t--global--spacer--sm);
35
+ --#{$jump-links}__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
35
36
 
36
37
  // before
37
38
  --#{$jump-links}__link--before--BorderTopWidth: 0;
@@ -39,41 +40,42 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
39
40
  --#{$jump-links}__link--before--BorderBottomWidth: 0;
40
41
  --#{$jump-links}__link--before--BorderLeftWidth: 0;
41
42
  --#{$jump-links}__link--before--BorderColor: transparent;
42
- --#{$jump-links}__item--m-current__link--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--lg);
43
+ --#{$jump-links}__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
43
44
  --#{$jump-links}__item--m-current__link--before--BorderLeftWidth: 0;
44
- --#{$jump-links}__item--m-current__link--before--BorderColor: var(--#{$pf-global}--primary-color--100);
45
+ --#{$jump-links}__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
45
46
  --#{$jump-links}--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
46
- --#{$jump-links}--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--lg);
47
+ --#{$jump-links}--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-t--global--border--width--extra-strong);
47
48
 
48
49
  // text
49
- --#{$jump-links}__link-text--Color: var(--#{$pf-global}--Color--200);
50
- --#{$jump-links}__link--hover__link-text--Color: var(--#{$pf-global}--Color--100);
51
- --#{$jump-links}__link--focus__link-text--Color: var(--#{$pf-global}--Color--100);
52
- --#{$jump-links}__item--m-current__link-text--Color: var(--#{$pf-global}--Color--100);
50
+ --#{$jump-links}__link-text--Color: var(--pf-t--global--text--color--subtle);
51
+ --#{$jump-links}__link--hover__link-text--Color: var(--pf-t--global--text--color--subtle);
52
+ --#{$jump-links}__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
53
53
 
54
54
  // label
55
- --#{$jump-links}__label--MarginBottom: var(--#{$pf-global}--spacer--md);
55
+ --#{$jump-links}__label--MarginBottom: var(--pf-t--global--spacer--md);
56
56
  --#{$jump-links}__label--Display: block;
57
57
 
58
58
  // toggle
59
59
  --#{$jump-links}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
60
60
  --#{$jump-links}__toggle--MarginBottom--base: calc(-1 * var(--#{$pf-global}--spacer--form-element));
61
61
  --#{$jump-links}__toggle--MarginBottom: var(--#{$jump-links}__toggle--MarginBottom--base);
62
- --#{$jump-links}--m-expanded__toggle--MarginBottom: calc(var(--#{$jump-links}__toggle--MarginBottom--base) + var(--#{$pf-global}--spacer--md));
63
- --#{$jump-links}__toggle--MarginLeft: calc(-1 * var(--#{$pf-global}--spacer--md));
62
+ --#{$jump-links}--m-expanded__toggle--MarginBottom: calc(var(--#{$jump-links}__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
63
+ --#{$jump-links}__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
64
64
  --#{$jump-links}__toggle--Display: none;
65
65
 
66
66
  // toggle icon
67
67
  --#{$jump-links}__toggle-icon--Color: currentcolor;
68
- --#{$jump-links}__toggle-icon--Transition: var(--#{$pf-global}--Transition);
68
+ --#{$jump-links}__toggle-icon--Transition: var(--#{$pf-global}--Transition); // TODO
69
69
  --#{$jump-links}__toggle-icon--Rotate: 0;
70
- --#{$jump-links}--m-expanded__toggle-icon--Color: var(--#{$pf-global}--Color--100);
70
+ --#{$jump-links}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
71
71
  --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
72
72
 
73
73
  // toggle text
74
- --#{$jump-links}__toggle-text--MarginLeft: var(--#{$pf-global}--spacer--md);
75
- --#{$jump-links}__toggle-text--Color: var(--#{$pf-global}--Color--100);
74
+ --#{$jump-links}__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
75
+ --#{$jump-links}__toggle-text--Color: var(--pf-t--global--text--color--regular);
76
+ }
76
77
 
78
+ .#{$jump-links} {
77
79
  display: flex;
78
80
 
79
81
  &.pf-m-center {
@@ -168,12 +170,9 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
168
170
  text-decoration: none;
169
171
  outline-offset: var(--#{$jump-links}__link--OutlineOffset);
170
172
 
171
- &:hover {
172
- --#{$jump-links}__link-text--Color: var(--#{$jump-links}__link--hover__link-text--Color);
173
- }
174
-
173
+ &:hover,
175
174
  &:focus {
176
- --#{$jump-links}__link-text--Color: var(--#{$jump-links}__link--focus__link-text--Color);
175
+ --#{$jump-links}__link-text--Color: var(--#{$jump-links}__link--hover__link-text--Color);
177
176
  }
178
177
 
179
178
  &::before {