@patternfly/patternfly 6.0.0-alpha.23 → 6.0.0-alpha.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/components/BackToTop/back-to-top.css +17 -15
  2. package/components/BackToTop/back-to-top.scss +12 -11
  3. package/components/Popover/popover.css +42 -51
  4. package/components/Popover/popover.scss +44 -53
  5. package/components/Tooltip/tooltip.scss +1 -1
  6. package/docs/components/Popover/examples/Popover.md +1 -1
  7. package/package.json +2 -2
  8. package/patternfly-no-globals.css +59 -70
  9. package/patternfly-theme-dark-unversioned.css +59 -70
  10. package/patternfly.css +59 -70
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
  13. package/components/Popover/themes/dark/popover.scss +0 -11
package/components/BackToTop/back-to-top.css CHANGED
@@ -1,23 +1,25 @@
1
- .pf-v5-c-back-to-top {
2
- --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
3
- --pf-v5-c-back-to-top--Bottom: var(--pf-v5-global--spacer--lg);
4
- --pf-v5-c-back-to-top--md--Bottom: var(--pf-v5-global--spacer--2xl);
5
- --pf-v5-c-back-to-top--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
6
- --pf-v5-c-back-to-top--c-button--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
7
- --pf-v5-c-back-to-top--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
8
- --pf-v5-c-back-to-top--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
9
- --pf-v5-c-back-to-top--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
10
- --pf-v5-c-back-to-top--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
11
- --pf-v5-c-back-to-top--c-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg-bottom);
12
- position: absolute;
13
- inset-block-end: var(--pf-v5-c-back-to-top--Bottom);
14
- inset-inline-end: var(--pf-v5-c-back-to-top--Right);
1
+ :root {
2
+ --pf-v5-c-back-to-top--Right: var(--pf-t--global--spacer--2xl);
3
+ --pf-v5-c-back-to-top--Bottom: var(--pf-t--global--spacer--lg);
4
+ --pf-v5-c-back-to-top--md--Bottom: var(--pf-t--global--spacer--2xl);
5
+ --pf-v5-c-back-to-top--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
6
+ --pf-v5-c-back-to-top--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
7
+ --pf-v5-c-back-to-top--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-back-to-top--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
9
+ --pf-v5-c-back-to-top--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
10
+ --pf-v5-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
15
11
  }
16
12
  @media (min-width: 768px) {
17
- .pf-v5-c-back-to-top {
13
+ :root {
18
14
  --pf-v5-c-back-to-top--Bottom: var(--pf-v5-c-back-to-top--md--Bottom);
19
15
  }
20
16
  }
17
+
18
+ .pf-v5-c-back-to-top {
19
+ position: absolute;
20
+ inset-block-end: var(--pf-v5-c-back-to-top--Bottom);
21
+ inset-inline-end: var(--pf-v5-c-back-to-top--Right);
22
+ }
21
23
  .pf-v5-c-back-to-top.pf-m-hidden {
22
24
  display: none;
23
25
  }
package/components/BackToTop/back-to-top.scss CHANGED
@@ -1,21 +1,22 @@
1
1
  // @debug $back-to-top; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$back-to-top} {
4
- --#{$back-to-top}--Right: var(--#{$pf-global}--spacer--2xl);
5
- --#{$back-to-top}--Bottom: var(--#{$pf-global}--spacer--lg);
6
- --#{$back-to-top}--md--Bottom: var(--#{$pf-global}--spacer--2xl);
7
- --#{$back-to-top}--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
8
- --#{$back-to-top}--c-button--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
9
- --#{$back-to-top}--c-button--PaddingTop: var(--#{$pf-global}--spacer--xs);
10
- --#{$back-to-top}--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
11
- --#{$back-to-top}--c-button--PaddingBottom: var(--#{$pf-global}--spacer--xs);
12
- --#{$back-to-top}--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
13
- --#{$back-to-top}--c-button--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-bottom);
3
+ :root {
4
+ --#{$back-to-top}--Right: var(--pf-t--global--spacer--2xl);
5
+ --#{$back-to-top}--Bottom: var(--pf-t--global--spacer--lg);
6
+ --#{$back-to-top}--md--Bottom: var(--pf-t--global--spacer--2xl);
7
+ --#{$back-to-top}--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
8
+ --#{$back-to-top}--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
9
+ --#{$back-to-top}--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
10
+ --#{$back-to-top}--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
11
+ --#{$back-to-top}--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
12
+ --#{$back-to-top}--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
14
13
 
15
14
  @media (min-width: $pf-v5-global--breakpoint--md) {
16
15
  --#{$back-to-top}--Bottom: var(--#{$back-to-top}--md--Bottom);
17
16
  }
17
+ }
18
18
 
19
+ .#{$back-to-top} {
19
20
  position: absolute;
20
21
  inset-block-end: var(--#{$back-to-top}--Bottom);
21
22
  inset-inline-end: var(--#{$back-to-top}--Right);
package/components/Popover/popover.css CHANGED
@@ -1,27 +1,24 @@
1
1
  .pf-v5-c-popover {
2
- --pf-v5-c-popover--FontSize: var(--pf-v5-global--FontSize--sm);
2
+ --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
3
3
  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
4
4
  --pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
5
- --pf-v5-c-popover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
6
- --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
7
- --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
8
- --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
9
- --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
10
- --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
11
- --pf-v5-c-popover--m-danger__title-text--Color: var(--pf-v5-global--danger-color--200);
12
- --pf-v5-c-popover--m-warning__title-text--Color: var(--pf-v5-global--warning-color--200);
13
- --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--200);
14
- --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--200);
15
- --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--300);
16
- --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
17
- --pf-v5-c-popover__content--PaddingTop: var(--pf-v5-global--spacer--md);
18
- --pf-v5-c-popover__content--PaddingRight: var(--pf-v5-global--spacer--md);
19
- --pf-v5-c-popover__content--PaddingBottom: var(--pf-v5-global--spacer--md);
20
- --pf-v5-c-popover__content--PaddingLeft: var(--pf-v5-global--spacer--md);
21
- --pf-v5-c-popover__arrow--Width: var(--pf-v5-global--arrow--width-lg);
22
- --pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
23
- --pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
24
- --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5
+ --pf-v5-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
6
+ --pf-v5-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
7
+ --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
8
+ --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
9
+ --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
10
+ --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
11
+ --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
12
+ --pf-v5-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13
+ --pf-v5-c-popover__content--PaddingTop: var(--pf-t--global--spacer--md);
14
+ --pf-v5-c-popover__content--PaddingRight: var(--pf-t--global--spacer--md);
15
+ --pf-v5-c-popover__content--PaddingBottom: var(--pf-t--global--spacer--md);
16
+ --pf-v5-c-popover__content--PaddingLeft: var(--pf-t--global--spacer--md);
17
+ --pf-v5-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
18
+ --pf-v5-c-popover__arrow--Width: 0.9375rem;
19
+ --pf-v5-c-popover__arrow--Height: 0.9375rem;
20
+ --pf-v5-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
21
+ --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
25
22
  --pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
26
23
  --pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
27
24
  --pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
@@ -34,21 +31,27 @@
34
31
  --pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
35
32
  --pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
36
33
  --pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
37
- --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - var(--pf-v5-global--spacer--form-element));
38
- --pf-v5-c-popover__close--Right: calc(var(--pf-v5-c-popover__content--PaddingRight) - var(--pf-v5-global--spacer--md));
39
- --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
40
- --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
41
- --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
42
- --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
43
- --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
44
- --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
45
- --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
46
- --pf-v5-c-popover__title-icon--FontSize: var(--pf-v5-global--FontSize--md);
47
- --pf-v5-c-popover__footer--MarginTop: var(--pf-v5-global--spacer--md);
34
+ --pf-v5-c-popover__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
35
+ --pf-v5-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
36
+ --pf-v5-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
37
+ --pf-v5-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
38
+ --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
39
+ --pf-v5-c-popover__close--Right: var(--pf-v5-c-popover__content--PaddingRight);
40
+ --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
41
+ --pf-v5-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
42
+ --pf-v5-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
43
+ --pf-v5-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
44
+ --pf-v5-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
45
+ --pf-v5-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
46
+ --pf-v5-c-popover__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
47
+ --pf-v5-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
48
+ --pf-v5-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
49
+ --pf-v5-c-popover__footer--MarginTop: var(--pf-t--global--spacer--md);
48
50
  position: relative;
49
51
  min-width: var(--pf-v5-c-popover--MinWidth);
50
52
  max-width: var(--pf-v5-c-popover--MaxWidth);
51
53
  font-size: var(--pf-v5-c-popover--FontSize);
54
+ border-radius: var(--pf-v5-c-popover--BorderRadius);
52
55
  box-shadow: var(--pf-v5-c-popover--BoxShadow);
53
56
  }
54
57
  .pf-v5-c-popover.pf-m-no-padding {
@@ -99,43 +102,38 @@
99
102
  }
100
103
  .pf-v5-c-popover:is(.pf-m-left-top,
101
104
  .pf-m-right-top) {
102
- --pf-v5-c-popover__arrow--Top: 0;
105
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover__arrow--m-inline-top--Top);
103
106
  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
104
107
  }
105
108
  .pf-v5-c-popover:is(.pf-m-left-bottom,
106
109
  .pf-m-right-bottom) {
107
110
  --pf-v5-c-popover__arrow--Top: auto;
108
- --pf-v5-c-popover__arrow--Bottom: 0;
111
+ --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover__arrow--m-inline-bottom--Bottom);
109
112
  }
110
113
  .pf-v5-c-popover:is(.pf-m-top-left,
111
114
  .pf-m-bottom-left) {
112
- --pf-v5-c-popover__arrow--Left: 0;
115
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover__arrow--m-block-left--Left);
113
116
  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
114
117
  }
115
118
  .pf-v5-c-popover:is(.pf-m-top-right,
116
119
  .pf-m-bottom-right) {
117
- --pf-v5-c-popover__arrow--Right: 0;
120
+ --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover__arrow--m-block-right--Right);
118
121
  --pf-v5-c-popover__arrow--Left: auto;
119
122
  }
120
123
  .pf-v5-c-popover.pf-m-danger {
121
124
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
122
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
123
125
  }
124
126
  .pf-v5-c-popover.pf-m-warning {
125
127
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
126
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
127
128
  }
128
129
  .pf-v5-c-popover.pf-m-success {
129
130
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
130
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
131
131
  }
132
132
  .pf-v5-c-popover.pf-m-custom {
133
133
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
134
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
135
134
  }
136
135
  .pf-v5-c-popover.pf-m-info {
137
136
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
138
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
139
137
  }
140
138
 
141
139
  .pf-v5-c-popover__content {
@@ -145,6 +143,7 @@
145
143
  padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
146
144
  padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
147
145
  background-color: var(--pf-v5-c-popover__content--BackgroundColor);
146
+ border-radius: var(--pf-v5-c-popover__content--BorderRadius);
148
147
  }
149
148
 
150
149
  .pf-v5-c-popover__close {
@@ -190,8 +189,8 @@
190
189
  .pf-v5-c-popover__title-text {
191
190
  font-family: var(--pf-v5-c-popover__title-text--FontFamily);
192
191
  font-size: var(--pf-v5-c-popover__title-text--FontSize);
193
- line-height: var(--pf-v5-c-popover__title-text--LineHeight);
194
- color: var(--pf-v5-c-popover__title-text--Color, inherit);
192
+ font-weight: var(--pf-v5-c-popover__title-text--FontWeight);
193
+ color: var(--pf-v5-c-popover__title-text--Color);
195
194
  }
196
195
 
197
196
  .pf-v5-c-popover__body {
@@ -200,12 +199,4 @@
200
199
 
201
200
  .pf-v5-c-popover__footer {
202
201
  margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
203
- }
204
-
205
- :where(.pf-v5-theme-dark) .pf-v5-c-popover {
206
- --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
207
- --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
208
- --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
209
- --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
210
- --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
211
202
  }
package/components/Popover/popover.scss CHANGED
@@ -2,37 +2,33 @@
2
2
 
3
3
  .#{$popover} {
4
4
  // Component
5
- --#{$popover}--FontSize: var(--#{$pf-global}--FontSize--sm);
5
+ --#{$popover}--FontSize: var(--pf-t--global--font--size--body--sm);
6
6
  --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingLeft) + var(--#{$popover}__content--PaddingRight) + #{pf-size-prem(300px)});
7
7
  --#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingLeft) + var(--#{$popover}__content--PaddingRight) + #{pf-size-prem(300px)});
8
- --#{$popover}--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
8
+ --#{$popover}--BoxShadow: var(--pf-t--global--box-shadow--md);
9
+ --#{$popover}--BorderRadius: var(--pf-t--global--border--radius--medium);
10
+
9
11
 
10
12
  // Title icon colors for states
11
- --#{$popover}--m-danger__title-icon--Color: var(--#{$pf-global}--danger-color--100);
12
- --#{$popover}--m-warning__title-icon--Color: var(--#{$pf-global}--warning-color--100);
13
- --#{$popover}--m-success__title-icon--Color: var(--#{$pf-global}--success-color--100);
14
- --#{$popover}--m-info__title-icon--Color: var(--#{$pf-global}--info-color--100);
15
- --#{$popover}--m-custom__title-icon--Color: var(--#{$pf-global}--custom-color--200);
16
-
17
- // Title text colors for states
18
- --#{$popover}--m-danger__title-text--Color: var(--#{$pf-global}--danger-color--200);
19
- --#{$popover}--m-warning__title-text--Color: var(--#{$pf-global}--warning-color--200);
20
- --#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--200);
21
- --#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--200);
22
- --#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--300);
13
+ --#{$popover}--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
14
+ --#{$popover}--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
15
+ --#{$popover}--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
16
+ --#{$popover}--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
17
+ --#{$popover}--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
23
18
 
24
19
  // Content
25
- --#{$popover}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
26
- --#{$popover}__content--PaddingTop: var(--#{$pf-global}--spacer--md);
27
- --#{$popover}__content--PaddingRight: var(--#{$pf-global}--spacer--md);
28
- --#{$popover}__content--PaddingBottom: var(--#{$pf-global}--spacer--md);
29
- --#{$popover}__content--PaddingLeft: var(--#{$pf-global}--spacer--md);
20
+ --#{$popover}__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
21
+ --#{$popover}__content--PaddingTop: var(--pf-t--global--spacer--md);
22
+ --#{$popover}__content--PaddingRight: var(--pf-t--global--spacer--md);
23
+ --#{$popover}__content--PaddingBottom: var(--pf-t--global--spacer--md);
24
+ --#{$popover}__content--PaddingLeft: var(--pf-t--global--spacer--md);
25
+ --#{$popover}__content--BorderRadius: var(--pf-t--global--border--radius--medium);
30
26
 
31
27
  // Arrow
32
- --#{$popover}__arrow--Width: var(--#{$pf-global}--arrow--width-lg);
33
- --#{$popover}__arrow--Height: var(--#{$pf-global}--arrow--width-lg);
34
- --#{$popover}__arrow--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
35
- --#{$popover}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
28
+ --#{$popover}__arrow--Width: #{pf-size-prem(15px)};
29
+ --#{$popover}__arrow--Height: #{pf-size-prem(15px)};
30
+ --#{$popover}__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
31
+ --#{$popover}__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
36
32
  --#{$popover}__arrow--m-top--TranslateX: -50%;
37
33
  --#{$popover}__arrow--m-top--TranslateY: 50%;
38
34
  --#{$popover}__arrow--m-top--Rotate: 45deg;
@@ -45,32 +41,38 @@
45
41
  --#{$popover}__arrow--m-left--TranslateX: 50%;
46
42
  --#{$popover}__arrow--m-left--TranslateY: -50%;
47
43
  --#{$popover}__arrow--m-left--Rotate: 45deg;
44
+ --#{$popover}__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
45
+ --#{$popover}__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
46
+ --#{$popover}__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
47
+ --#{$popover}__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
48
48
 
49
49
  // Close
50
- --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - var(--#{$pf-global}--spacer--form-element)); // align top of button with top of text
51
- --#{$popover}__close--Right: calc(var(--#{$popover}__content--PaddingRight) - var(--#{$pf-global}--spacer--md)); // align right of content
52
- --#{$popover}__close--sibling--PaddingRight: var(--#{$pf-global}--spacer--2xl);
50
+ --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5)); // align top of button with top of text - TODO: replace with form element token
51
+ --#{$popover}__close--Right: var(--#{$popover}__content--PaddingRight); // align right of content
52
+ --#{$popover}__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
53
53
 
54
54
  // Header
55
- --#{$popover}__header--MarginBottom: var(--#{$pf-global}--spacer--sm);
55
+ --#{$popover}__header--MarginBottom: var(--pf-t--global--spacer--sm);
56
56
 
57
57
  // Title text
58
- --#{$popover}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
59
- --#{$popover}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
60
- --#{$popover}__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
58
+ --#{$popover}__title-text--Color: var(--pf-t--global--text--color--regular);
59
+ --#{$popover}__title-text--FontFamily: var(--pf-t--global--font--family--body);
60
+ --#{$popover}__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
61
+ --#{$popover}__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
61
62
 
62
63
  // Title icon
63
- --#{$popover}__title-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
64
- --#{$popover}__title-icon--Color: var(--#{$pf-global}--Color--100);
65
- --#{$popover}__title-icon--FontSize: var(--#{$pf-global}--FontSize--md);
64
+ --#{$popover}__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
65
+ --#{$popover}__title-icon--Color: var(--pf-t--global--icon--color--regular);
66
+ --#{$popover}__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
66
67
 
67
68
  // Footer
68
- --#{$popover}__footer--MarginTop: var(--#{$pf-global}--spacer--md);
69
+ --#{$popover}__footer--MarginTop: var(--pf-t--global--spacer--md);
69
70
 
70
71
  position: relative;
71
72
  min-width: var(--#{$popover}--MinWidth);
72
73
  max-width: var(--#{$popover}--MaxWidth);
73
74
  font-size: var(--#{$popover}--FontSize);
75
+ border-radius: var(--#{$popover}--BorderRadius);
74
76
  box-shadow: var(--#{$popover}--BoxShadow);
75
77
 
76
78
  &.pf-m-no-padding {
@@ -104,7 +106,7 @@
104
106
  .pf-m-bottom,
105
107
  .pf-m-bottom-left,
106
108
  .pf-m-bottom-right
107
- ) {
109
+ ) {
108
110
  --#{$popover}__arrow--Top: var(--#{$popover}--m-bottom--Top, 0);
109
111
  --#{$popover}__arrow--Left: var(--#{$popover}--m-bottom--Left, 50%);
110
112
  --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-bottom--TranslateX);
@@ -140,7 +142,7 @@
140
142
  .pf-m-left-top,
141
143
  .pf-m-right-top
142
144
  ) {
143
- --#{$popover}__arrow--Top: 0;
145
+ --#{$popover}__arrow--Top: var(--#{$popover}__arrow--m-inline-top--Top);
144
146
  --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
145
147
  }
146
148
 
@@ -149,14 +151,14 @@
149
151
  .pf-m-right-bottom
150
152
  ) {
151
153
  --#{$popover}__arrow--Top: auto;
152
- --#{$popover}__arrow--Bottom: 0;
154
+ --#{$popover}__arrow--Bottom: var(--#{$popover}__arrow--m-inline-bottom--Bottom);
153
155
  }
154
156
 
155
157
  &:is(
156
158
  .pf-m-top-left,
157
159
  .pf-m-bottom-left
158
160
  ) {
159
- --#{$popover}__arrow--Left: 0;
161
+ --#{$popover}__arrow--Left: var(--#{$popover}__arrow--m-block-left--Left);
160
162
  --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
161
163
  }
162
164
 
@@ -164,33 +166,28 @@
164
166
  .pf-m-top-right,
165
167
  .pf-m-bottom-right
166
168
  ) {
167
- --#{$popover}__arrow--Right: 0;
169
+ --#{$popover}__arrow--Right: var(--#{$popover}__arrow--m-block-right--Right);
168
170
  --#{$popover}__arrow--Left: auto;
169
171
  }
170
172
 
171
173
  &.pf-m-danger {
172
174
  --#{$popover}__title-icon--Color: var(--#{$popover}--m-danger__title-icon--Color);
173
- --#{$popover}__title-text--Color: var(--#{$popover}--m-danger__title-text--Color);
174
175
  }
175
176
 
176
177
  &.pf-m-warning {
177
178
  --#{$popover}__title-icon--Color: var(--#{$popover}--m-warning__title-icon--Color);
178
- --#{$popover}__title-text--Color: var(--#{$popover}--m-warning__title-text--Color);
179
179
  }
180
180
 
181
181
  &.pf-m-success {
182
182
  --#{$popover}__title-icon--Color: var(--#{$popover}--m-success__title-icon--Color);
183
- --#{$popover}__title-text--Color: var(--#{$popover}--m-success__title-text--Color);
184
183
  }
185
184
 
186
185
  &.pf-m-custom {
187
186
  --#{$popover}__title-icon--Color: var(--#{$popover}--m-custom__title-icon--Color);
188
- --#{$popover}__title-text--Color: var(--#{$popover}--m-custom__title-text--Color);
189
187
  }
190
188
 
191
189
  &.pf-m-info {
192
190
  --#{$popover}__title-icon--Color: var(--#{$popover}--m-info__title-icon--Color);
193
- --#{$popover}__title-text--Color: var(--#{$popover}--m-info__title-text--Color);
194
191
  }
195
192
  }
196
193
 
@@ -201,6 +198,7 @@
201
198
  padding-inline-start: var(--#{$popover}__content--PaddingLeft);
202
199
  padding-inline-end: var(--#{$popover}__content--PaddingRight);
203
200
  background-color: var(--#{$popover}__content--BackgroundColor);
201
+ border-radius: var(--#{$popover}__content--BorderRadius);
204
202
  }
205
203
 
206
204
  // Close button
@@ -249,8 +247,8 @@
249
247
  .#{$popover}__title-text {
250
248
  font-family: var(--#{$popover}__title-text--FontFamily);
251
249
  font-size: var(--#{$popover}__title-text--FontSize);
252
- line-height: var(--#{$popover}__title-text--LineHeight);
253
- color: var(--#{$popover}__title-text--Color, inherit);
250
+ font-weight: var(--#{$popover}__title-text--FontWeight);
251
+ color: var(--#{$popover}__title-text--Color);
254
252
  }
255
253
 
256
254
  // Body
@@ -261,10 +259,3 @@
261
259
  .#{$popover}__footer {
262
260
  margin-block-start: var(--#{$popover}__footer--MarginTop);
263
261
  }
264
-
265
- // stylelint-disable no-invalid-position-at-import-rule
266
- @import "themes/dark/popover";
267
-
268
- @include pf-v5-theme-dark {
269
- @include pf-v5-theme-dark-popover;
270
- }
package/components/Tooltip/tooltip.scss CHANGED
@@ -54,7 +54,7 @@
54
54
  .pf-m-bottom,
55
55
  .pf-m-bottom-left,
56
56
  .pf-m-bottom-right
57
- ) {
57
+ ) {
58
58
  --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-bottom--Top, 0);
59
59
  --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-bottom--Left, 50%);
60
60
  --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-bottom--TranslateX);
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -339,7 +339,7 @@ cssPrefix: pf-v5-c-popover
339
339
  <div
340
340
  class="pf-v5-c-popover__body"
341
341
  id="popover-no-padding-body"
342
- >This popover has no padding and is intended for use with content that has its own spacing and should touch the edges of the popover container.</div>
342
+ >This popover has no padding itself. Instead it is intended for use with content that has its own padding that prevents it from touching the popover container's edges.</div>
343
343
  </div>
344
344
  </div>
345
345
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.23",
4
+ "version": "6.0.0-alpha.25",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -45,7 +45,7 @@
45
45
  "@commitlint/config-conventional": "^17.6.7",
46
46
  "@fortawesome/fontawesome": "^1.1.8",
47
47
  "@octokit/rest": "^20.0.1",
48
- "@patternfly/documentation-framework": "5.3.1",
48
+ "@patternfly/documentation-framework": "5.3.8",
49
49
  "@patternfly/patternfly-a11y": "4.3.1",
50
50
  "@patternfly/react-code-editor": "5.1.1",
51
51
  "@patternfly/react-core": "5.1.1",