@patternfly/patternfly 6.0.0-alpha.222 → 6.0.0-alpha.224

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 (18) hide show
  1. package/components/Banner/banner.css +2 -11
  2. package/components/Banner/banner.scss +2 -15
  3. package/components/Content/content.css +5 -3
  4. package/components/Content/content.scss +5 -3
  5. package/components/ExpandableSection/expandable-section.css +25 -84
  6. package/components/ExpandableSection/expandable-section.scss +24 -90
  7. package/components/Timestamp/timestamp.css +3 -1
  8. package/components/Timestamp/timestamp.scss +4 -1
  9. package/components/_index.css +35 -99
  10. package/docs/components/CodeBlock/examples/CodeBlock.md +33 -22
  11. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  12. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +62 -54
  13. package/docs/components/Timestamp/examples/Timestamp.md +7 -0
  14. package/package.json +5 -5
  15. package/patternfly-no-globals.css +35 -99
  16. package/patternfly.css +35 -99
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/Banner/banner.css CHANGED
@@ -11,9 +11,7 @@
11
11
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
12
12
  --pf-v6-c-banner--link--TextDecoration: underline;
13
13
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
14
- --pf-v6-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
15
- --pf-v6-c-banner--link--disabled--Color: var(--pf-v6-c-banner--Color);
16
- --pf-v6-c-banner--link--disabled--TextDecoration: none;
14
+ --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
17
15
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
18
16
  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
19
17
  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -125,24 +123,17 @@
125
123
  }
126
124
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
127
125
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
128
- font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
129
126
  }
130
127
  .pf-v6-c-banner a.pf-m-disabled {
131
128
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--disabled--Color);
132
- --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
133
129
  cursor: not-allowed;
134
130
  }
135
131
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
136
132
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
137
- --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
133
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
138
134
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
139
135
  text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
140
136
  }
141
- .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:hover {
142
- --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
143
- font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
144
- }
145
137
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
146
- --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
147
138
  cursor: not-allowed;
148
139
  }
package/components/Banner/banner.scss CHANGED
@@ -20,9 +20,7 @@
20
20
  --#{$banner}--link--Color: var(--#{$banner}--Color);
21
21
  --#{$banner}--link--TextDecoration: underline;
22
22
  --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
23
- --#{$banner}--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
24
- --#{$banner}--link--disabled--Color: var(--#{$banner}--Color);
25
- --#{$banner}--link--disabled--TextDecoration: none;
23
+ --#{$banner}--link--disabled--Color: var(--pf-t--global--text--color--disabled);
26
24
 
27
25
  // modifier variables
28
26
  --#{$banner}--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -148,14 +146,11 @@
148
146
 
149
147
  &:hover:not(.pf-m-disabled) {
150
148
  --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
151
-
152
- font-weight: var(--#{$banner}--link--hover--FontWeight);
153
149
  }
154
150
 
155
151
  // stylelint-disable selector-no-qualifying-type
156
152
  &.pf-m-disabled {
157
153
  --#{$banner}--link--Color: var(--#{$banner}--link--disabled--Color);
158
- --#{$banner}--link--TextDecoration: var(--#{$banner}--link--disabled--TextDecoration);
159
154
 
160
155
  cursor: not-allowed;
161
156
  }
@@ -164,21 +159,13 @@
164
159
 
165
160
  .#{$button}.pf-m-inline {
166
161
  --#{$button}--m-link--Color: var(--#{$banner}--link--Color);
167
- --#{$button}--m-link--m-inline--hover--Color: var(--#{$banner}--link--hover--Color);
162
+ --#{$button}--m-link--hover--Color: var(--#{$banner}--link--hover--Color);
168
163
  --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
169
164
 
170
165
  text-decoration: var(--#{$banner}--link--TextDecoration);
171
166
 
172
- &:hover {
173
- --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
174
-
175
- font-weight: var(--#{$banner}--link--hover--FontWeight);
176
- }
177
-
178
167
  &:disabled,
179
168
  &.pf-m-disabled {
180
- --#{$banner}--link--TextDecoration: var(--#{$banner}--link--disabled--TextDecoration);
181
-
182
169
  cursor: not-allowed;
183
170
  }
184
171
  }
package/components/Content/content.css CHANGED
@@ -59,8 +59,10 @@
59
59
  --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
60
60
  --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
61
61
  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
62
- --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
63
- --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
62
+ --pf-v6-c-content--dl--GridTemplateColumns--dt: 12ch;
63
+ --pf-v6-c-content--dl--GridTemplateColumns--dd: 1fr;
64
+ --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
65
+ --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
64
66
  --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
65
67
  --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
66
68
  --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
@@ -237,7 +239,7 @@ ul) {
237
239
  }
238
240
  @media screen and (min-width: 36rem) {
239
241
  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
240
- grid-template: auto/auto 1fr;
242
+ grid-template: auto/var(--pf-v6-c-content--dl--GridTemplateColumns--dt) var(--pf-v6-c-content--dl--GridTemplateColumns--dd);
241
243
  grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
242
244
  grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
243
245
  }
package/components/Content/content.scss CHANGED
@@ -86,8 +86,10 @@
86
86
  --#{$content}--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
87
87
  --#{$content}--list--nested--MarginBlockStart: var(--#{$content}--list--Gap);
88
88
  --#{$content}--ul--ListStyle: var(--pf-t--global--list-style);
89
- --#{$content}--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
90
- --#{$content}--dl--RowGap: var(--pf-t--global--spacer--md);
89
+ --#{$content}--dl--GridTemplateColumns--dt: 12ch;
90
+ --#{$content}--dl--GridTemplateColumns--dd: 1fr;
91
+ --#{$content}--dl--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
92
+ --#{$content}--dl--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
91
93
  --#{$content}--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
92
94
  --#{$content}--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
93
95
  --#{$content}--dt--sm--MarginBlockStart: 0;
@@ -336,7 +338,7 @@
336
338
  grid-template-columns: 1fr;
337
339
 
338
340
  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
339
- grid-template: auto / auto 1fr;
341
+ grid-template: auto / var(--#{$content}--dl--GridTemplateColumns--dt) var(--#{$content}--dl--GridTemplateColumns--dd);
340
342
  grid-row-gap: var(--#{$content}--dl--RowGap);
341
343
  grid-column-gap: var(--#{$content}--dl--ColumnGap);
342
344
  }
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -1,10 +1,5 @@
1
1
  :where(:root, .pf-v6-c-expandable-section) {
2
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-expandable-section__toggle--BackgroundColor: transparent;
7
- --pf-v6-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
2
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
8
3
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
9
4
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
10
5
  --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
@@ -12,82 +7,50 @@
12
7
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
13
8
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
14
9
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
16
- --pf-v6-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
17
- --pf-v6-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
18
- --pf-v6-c-expandable-section__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
20
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
21
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22
10
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
23
11
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
12
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
15
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
16
+ --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
24
17
  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18
+ --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
25
19
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
26
20
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
27
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
28
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
29
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
30
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
32
- --pf-v6-c-expandable-section--m-display-lg__toggle--Width: 100%;
33
- --pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
34
- --pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
35
- --pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
36
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
37
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
38
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart: var(--pf-t--global--spacer--lg);
39
- --pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
40
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base: calc(var(--pf-v6-c-expandable-section__toggle--ColumnGap) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
41
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart));
42
- --pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart));
43
- --pf-v6-c-expandable-section--m-truncate--PaddingBlockStart: var(--pf-t--global--spacer--sm);
44
- --pf-v6-c-expandable-section--m-truncate--PaddingInlineEnd: var(--pf-t--global--spacer--md);
45
- --pf-v6-c-expandable-section--m-truncate--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
46
- --pf-v6-c-expandable-section--m-truncate--PaddingInlineStart: var(--pf-t--global--spacer--md);
47
- --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
21
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
48
22
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
23
+ --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
49
24
  }
50
25
 
26
+ .pf-v6-c-expandable-section {
27
+ display: flex;
28
+ flex-direction: column;
29
+ gap: var(--pf-v6-c-expandable-section--Gap);
30
+ align-items: start;
31
+ }
51
32
  .pf-v6-c-expandable-section.pf-m-expanded {
52
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section--m-expanded__toggle-text--Color);
53
33
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
54
34
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
55
- --pf-v6-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
56
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
35
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
57
36
  }
58
37
  .pf-v6-c-expandable-section.pf-m-limit-width {
59
38
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
60
39
  }
61
40
  .pf-v6-c-expandable-section.pf-m-display-lg {
62
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart);
63
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd);
64
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd);
65
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart);
66
- --pf-v6-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
67
- --pf-v6-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
68
- --pf-v6-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
69
- --pf-v6-c-expandable-section__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius);
70
- --pf-v6-c-expandable-section__toggle--Width: var(--pf-v6-c-expandable-section--m-display-lg__toggle--Width);
71
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd);
72
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd);
73
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart);
74
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart);
41
+ padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
42
+ padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
43
+ padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
44
+ padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
75
45
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
76
- border: solid 1px var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
46
+ border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
77
47
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
78
48
  }
79
49
  .pf-v6-c-expandable-section.pf-m-indented {
80
50
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
81
51
  }
82
52
  .pf-v6-c-expandable-section.pf-m-truncate {
83
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: 0;
84
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: 0;
85
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd);
86
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: 0;
87
- --pf-v6-c-expandable-section__content--PaddingBlockStart: 0;
88
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: 0;
89
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: 0;
90
- --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
53
+ --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
91
54
  }
92
55
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
93
56
  display: -webkit-box;
@@ -96,24 +59,8 @@
96
59
  overflow: hidden;
97
60
  }
98
61
 
99
- .pf-v6-c-expandable-section__toggle {
100
- display: flex;
101
- column-gap: var(--pf-v6-c-expandable-section__toggle--ColumnGap);
102
- width: var(--pf-v6-c-expandable-section__toggle--Width, initial);
103
- padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingBlockStart);
104
- padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBlockEnd);
105
- padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart);
106
- padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingInlineEnd);
107
- background-color: var(--pf-v6-c-expandable-section__toggle--BackgroundColor);
108
- border: none;
109
- border-radius: var(--pf-v6-c-expandable-section__toggle--BorderRadius, 0);
110
- }
111
- .pf-v6-c-expandable-section__toggle:is(:hover, :focus) {
112
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section__toggle-text--hover--Color);
113
- --pf-v6-c-expandable-section__toggle--BackgroundColor: var(--pf-v6-c-expandable-section__toggle--hover--BackgroundColor, initial);
114
- }
115
-
116
62
  .pf-v6-c-expandable-section__toggle-icon {
63
+ display: inline-block;
117
64
  min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
118
65
  color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
119
66
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
@@ -127,14 +74,8 @@
127
74
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
128
75
  }
129
76
 
130
- .pf-v6-c-expandable-section__toggle-text {
131
- color: var(--pf-v6-c-expandable-section__toggle-text--Color);
132
- }
133
-
134
77
  .pf-v6-c-expandable-section__content {
135
78
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
136
- padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingBlockStart);
137
- padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd);
138
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
139
- padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingInlineEnd);
79
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
80
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
140
81
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -1,13 +1,7 @@
1
1
  @use '../../sass-utilities' as *;
2
2
 
3
3
  :where(:root, .#{$expandable-section}) {
4
- // Toggle
5
- --#{$expandable-section}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6
- --#{$expandable-section}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
7
- --#{$expandable-section}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
8
- --#{$expandable-section}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9
- --#{$expandable-section}__toggle--BackgroundColor: transparent;
10
- --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
4
+ --#{$expandable-section}--Gap: var(--pf-t--global--spacer--sm);
11
5
 
12
6
  // Toggle icon
13
7
  --#{$expandable-section}__toggle-icon--MinWidth: 1em;
@@ -18,60 +12,41 @@
18
12
  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
19
13
  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
20
14
 
21
- // Toggle text
22
- --#{$expandable-section}__toggle-text--Color: var(--pf-t--global--color--brand--default);
23
- --#{$expandable-section}__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
24
- --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
25
-
26
15
  // Content
27
- --#{$expandable-section}__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
28
- --#{$expandable-section}__content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
29
- --#{$expandable-section}__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
30
- --#{$expandable-section}__content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31
16
  --#{$expandable-section}__content--MaxWidth: auto;
32
17
 
33
18
  // Limit Width
34
19
  --#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
35
20
 
36
21
  // Large / Disclosure
22
+ --#{$expandable-section}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
23
+ --#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24
+ --#{$expandable-section}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
25
+ --#{$expandable-section}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
26
+ --#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
37
27
  --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
28
+ --#{$expandable-section}--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
38
29
  --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
39
30
  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
40
- --#{$expandable-section}--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
41
- --#{$expandable-section}--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
42
- --#{$expandable-section}--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
43
- --#{$expandable-section}--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
44
- --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
45
- --#{$expandable-section}--m-display-lg__toggle--Width: 100%;
46
- --#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
47
- --#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
48
- --#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
49
- --#{$expandable-section}--m-display-lg__content--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
50
- --#{$expandable-section}--m-display-lg__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
51
- --#{$expandable-section}--m-display-lg__content--PaddingInlineStart: var(--pf-t--global--spacer--lg);
52
- --#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
53
31
 
54
32
  // Indented
55
- --#{$expandable-section}--m-indented__content--PaddingInlineStart--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
56
- --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--#{$expandable-section}--m-indented__content--PaddingInlineStart--base) + var(--#{$expandable-section}__toggle--PaddingInlineStart));
57
- --#{$expandable-section}--m-display-lg--m-indented__content--PaddingInlineStart: calc(var(--#{$expandable-section}--m-indented__content--PaddingInlineStart--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingInlineStart));
33
+ --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--#{$expandable-section}__toggle-icon--MinWidth));
58
34
 
59
35
  // Truncate
60
- --#{$expandable-section}--m-truncate--PaddingBlockStart: var(--pf-t--global--spacer--sm);
61
- --#{$expandable-section}--m-truncate--PaddingInlineEnd: var(--pf-t--global--spacer--md);
62
- --#{$expandable-section}--m-truncate--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
63
- --#{$expandable-section}--m-truncate--PaddingInlineStart: var(--pf-t--global--spacer--md);
64
- --#{$expandable-section}--m-truncate__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
65
36
  --#{$expandable-section}--m-truncate__content--LineClamp: 3;
37
+ --#{$expandable-section}--m-truncate--Gap: var(--pf-t--global--spacer--xs);
66
38
  }
67
39
 
68
40
  .#{$expandable-section} {
41
+ display: flex;
42
+ flex-direction: column;
43
+ gap: var(--#{$expandable-section}--Gap);
44
+ align-items: start;
45
+
69
46
  &.pf-m-expanded {
70
- --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}--m-expanded__toggle-text--Color);
71
47
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
72
48
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
73
- --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
74
- --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius);
49
+ --#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd);
75
50
  }
76
51
 
77
52
  &.pf-m-limit-width {
@@ -79,22 +54,12 @@
79
54
  }
80
55
 
81
56
  &.pf-m-display-lg {
82
- --#{$expandable-section}__toggle--PaddingBlockStart: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBlockStart);
83
- --#{$expandable-section}__toggle--PaddingInlineEnd: var(--#{$expandable-section}--m-display-lg__toggle--PaddingInlineEnd);
84
- --#{$expandable-section}__toggle--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBlockEnd);
85
- --#{$expandable-section}__toggle--PaddingInlineStart: var(--#{$expandable-section}--m-display-lg__toggle--PaddingInlineStart);
86
- --#{$expandable-section}__toggle--hover--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor);
87
- --#{$expandable-section}__toggle--active--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor);
88
- --#{$expandable-section}__toggle--focus--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor);
89
- --#{$expandable-section}__toggle--BorderRadius: var(--#{$expandable-section}--m-display-lg__toggle--BorderRadius);
90
- --#{$expandable-section}__toggle--Width: var(--#{$expandable-section}--m-display-lg__toggle--Width);
91
- --#{$expandable-section}__content--PaddingInlineEnd: var(--#{$expandable-section}--m-display-lg__content--PaddingInlineEnd);
92
- --#{$expandable-section}__content--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg__content--PaddingBlockEnd);
93
- --#{$expandable-section}__content--PaddingInlineStart: var(--#{$expandable-section}--m-display-lg__content--PaddingInlineStart);
94
- --#{$expandable-section}--m-indented__content--PaddingInlineStart: var(--#{$expandable-section}--m-display-lg--m-indented__content--PaddingInlineStart);
95
-
57
+ padding-block-start: var(--#{$expandable-section}--m-display-lg--PaddingBlockStart);
58
+ padding-block-end: var(--#{$expandable-section}--m-display-lg--PaddingBlockEnd);
59
+ padding-inline-start: var(--#{$expandable-section}--m-display-lg--PaddingInlineStart);
60
+ padding-inline-end: var(--#{$expandable-section}--m-display-lg--PaddingInlineEnd);
96
61
  background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
97
- border: solid 1px var(--#{$expandable-section}--m-display-lg--BorderColor);
62
+ border: var(--#{$expandable-section}--m-display-lg--BorderWidth) solid var(--#{$expandable-section}--m-display-lg--BorderColor);
98
63
  border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
99
64
  }
100
65
 
@@ -103,15 +68,7 @@
103
68
  }
104
69
 
105
70
  &.pf-m-truncate {
106
- --#{$expandable-section}__toggle--PaddingBlockStart: 0;
107
- --#{$expandable-section}__toggle--PaddingInlineEnd: 0;
108
- --#{$expandable-section}__toggle--PaddingBlockEnd: var(--#{$expandable-section}--m-truncate__toggle--PaddingBlockEnd);
109
- --#{$expandable-section}__toggle--PaddingInlineStart: 0;
110
- --#{$expandable-section}__content--PaddingBlockStart: 0;
111
- --#{$expandable-section}__content--PaddingInlineEnd: 0;
112
- --#{$expandable-section}__content--PaddingBlockEnd: 0;
113
- --#{$expandable-section}__content--PaddingInlineStart: 0;
114
-
71
+ --#{$expandable-section}--Gap: var(--#{$expandable-section}--m-truncate--Gap);
115
72
  &:not(.pf-m-expanded) .#{$expandable-section}__content {
116
73
  // stylelint-disable
117
74
  display: -webkit-box;
@@ -123,27 +80,10 @@
123
80
  }
124
81
  }
125
82
 
126
- .#{$expandable-section}__toggle {
127
- display: flex;
128
- column-gap: var(--#{$expandable-section}__toggle--ColumnGap);
129
- width: var(--#{$expandable-section}__toggle--Width, initial);
130
- padding-block-start: var(--#{$expandable-section}__toggle--PaddingBlockStart);
131
- padding-block-end: var(--#{$expandable-section}__toggle--PaddingBlockEnd);
132
- padding-inline-start: var(--#{$expandable-section}__toggle--PaddingInlineStart);
133
- padding-inline-end: var(--#{$expandable-section}__toggle--PaddingInlineEnd);
134
- background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
135
- border: none;
136
- border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
137
-
138
- &:is(:hover, :focus) {
139
- --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}__toggle-text--hover--Color);
140
- --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
141
- }
142
- }
143
-
144
83
  .#{$expandable-section}__toggle-icon {
145
84
  @include pf-v6-mirror-inline-on-rtl;
146
85
 
86
+ display: inline-block;
147
87
  min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
148
88
  color: var(--#{$expandable-section}__toggle-icon--Color);
149
89
  transition: var(--#{$expandable-section}__toggle-icon--Transition);
@@ -154,14 +94,8 @@
154
94
  }
155
95
  }
156
96
 
157
- .#{$expandable-section}__toggle-text {
158
- color: var(--#{$expandable-section}__toggle-text--Color);
159
- }
160
-
161
97
  .#{$expandable-section}__content {
162
98
  max-width: var(--#{$expandable-section}__content--MaxWidth);
163
- padding-block-start: var(--#{$expandable-section}__content--PaddingBlockStart);
164
- padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd);
165
- padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart);
166
- padding-inline-end: var(--#{$expandable-section}__content--PaddingInlineEnd);
99
+ padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
100
+ padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
167
101
  }
package/components/Timestamp/timestamp.css CHANGED
@@ -1,10 +1,11 @@
1
1
  :where(:root, .pf-v6-c-timestamp) {
2
2
  --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
3
- --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--subtle);
3
+ --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
4
4
  --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;
5
5
  --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
6
6
  --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
7
7
  --pf-v6-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
8
+ --pf-v6-c-timestamp--m-help-text--Color: var(--pf-t--global--text--color--subtle);
8
9
  --pf-v6-c-timestamp--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
9
10
  --pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
10
11
  --pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
@@ -17,6 +18,7 @@
17
18
  outline-offset: var(--pf-v6-c-timestamp--OutlineOffset);
18
19
  }
19
20
  .pf-v6-c-timestamp.pf-m-help-text {
21
+ --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
20
22
  text-decoration: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine) var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
21
23
  text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
22
24
  cursor: pointer;
package/components/Timestamp/timestamp.scss CHANGED
@@ -2,13 +2,14 @@
2
2
 
3
3
  :where(:root, .#{$timestamp}) {
4
4
  --#{$timestamp}--FontSize: var(--pf-t--global--font--size--body--sm);
5
- --#{$timestamp}--Color: var(--pf-t--global--text--color--subtle);
5
+ --#{$timestamp}--Color: var(--pf-t--global--text--color--regular);
6
6
  --#{$timestamp}--OutlineOffset: #{pf-size-prem(3px)};
7
7
 
8
8
  // Help text variables for the timestamp
9
9
  --#{$timestamp}--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
10
10
  --#{$timestamp}--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
11
11
  --#{$timestamp}--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
12
+ --#{$timestamp}--m-help-text--Color: var(--pf-t--global--text--color--subtle);
12
13
  --#{$timestamp}--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
13
14
  --#{$timestamp}--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
14
15
  --#{$timestamp}--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
@@ -21,6 +22,8 @@
21
22
  outline-offset: var(--#{$timestamp}--OutlineOffset);
22
23
 
23
24
  &.pf-m-help-text {
25
+ --#{$timestamp}--Color: var(--#{$timestamp}--m-help-text--Color);
26
+
24
27
  text-decoration: var(--#{$timestamp}--m-help-text--TextDecorationLine) var(--#{$timestamp}--m-help-text--TextDecorationStyle);
25
28
  text-underline-offset: var(--#{$timestamp}--m-help-text--TextUnderlineOffset);
26
29
  cursor: pointer;