@patternfly/patternfly 6.0.0-alpha.47 → 6.0.0-alpha.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/components/DataList/data-list.css +101 -158
  2. package/components/DataList/data-list.scss +95 -154
  3. package/components/Form/form.css +2 -35
  4. package/components/Form/form.scss +2 -35
  5. package/components/Progress/progress.css +31 -45
  6. package/components/Progress/progress.scss +36 -55
  7. package/components/Slider/slider.css +34 -30
  8. package/components/Slider/slider.scss +46 -43
  9. package/docs/components/Form/examples/Form.md +122 -89
  10. package/docs/demos/Form/examples/BasicForms.md +110 -80
  11. package/docs/demos/Modal/examples/Modal.md +33 -24
  12. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -8
  13. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  14. package/package.json +1 -1
  15. package/patternfly-no-globals.css +169 -265
  16. package/patternfly-theme-dark-unversioned.css +169 -265
  17. package/patternfly.css +169 -265
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
  20. package/components/DataList/themes/dark/data-list.scss +0 -10
  21. package/components/Progress/themes/dark/progress.scss +0 -9
package/components/DataList/data-list.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
  @import "./data-list-grid";
3
3
 
4
- .#{$data-list} {
5
- --#{$data-list}--FontSize: 1em; // inherit font-size, update this to global variable at breaking change
6
- --#{$data-list}--LineHeight: var(--#{$pf-global}--LineHeight--md);
7
- --#{$data-list}--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
8
- --#{$data-list}--BorderTopWidth: var(--#{$pf-global}--spacer--sm);
9
- --#{$data-list}--sm--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
10
- --#{$data-list}--sm--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
11
- --#{$data-list}--MarginLeft: var(--#{$pf-global}--spacer--md);
4
+ :root, .#{$data-list} {
5
+ --#{$data-list}--FontSize: var( --pf-t--global--font--size--body);
6
+ --#{$data-list}--LineHeight: var(--pf-t--global--font--line-height--body);
7
+ --#{$data-list}--BorderTopColor: var(--pf-t--global--border--color--default);
8
+ --#{$data-list}--BorderTopWidth: var(--pf-t--global--spacer--sm);
9
+ --#{$data-list}--sm--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
10
+ --#{$data-list}--sm--BorderTopColor: var(--pf-t--global--border--color--default);
11
+ --#{$data-list}--MarginLeft: var(--pf-t--global--spacer--md);
12
12
 
13
13
  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
14
14
  --#{$data-list}--BorderTopColor: var(--#{$data-list}--sm--BorderTopColor);
@@ -16,57 +16,38 @@
16
16
  }
17
17
 
18
18
  // item
19
- --#{$data-list}__item--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
20
- --#{$data-list}__item--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
21
- --#{$data-list}__item--m-expanded--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
22
- --#{$data-list}__item--m-selected--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
23
- --#{$data-list}__item--m-selected--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top), var(--#{$pf-global}--BoxShadow--sm-bottom);
24
- --#{$data-list}__item--m-clickable--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
25
- --#{$data-list}__item--m-clickable--hover--ZIndex: calc(var(--#{$data-list}__item--m-selected--ZIndex) + 1);
26
- --#{$data-list}__item--m-clickable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top), var(--#{$pf-global}--BoxShadow--sm-bottom);
27
- --#{$data-list}__item--m-clickable--focus--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top), var(--#{$pf-global}--BoxShadow--sm-bottom);
28
- --#{$data-list}__item--m-clickable--active--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top), var(--#{$pf-global}--BoxShadow--sm-bottom);
29
- --#{$data-list}__item--BorderBottomColor: var(--#{$pf-global}--BorderColor--300);
30
- --#{$data-list}__item--BorderBottomWidth: #{pf-size-prem(8px)};
31
- --#{$data-list}__item--m-clickable--hover--item--BorderTopColor: var(--#{$data-list}__item--BorderBottomColor);
32
- --#{$data-list}__item--m-clickable--hover--item--BorderTopWidth: var(--#{$data-list}__item--BorderBottomWidth);
33
- --#{$data-list}__item--sm--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
34
- --#{$data-list}__item--sm--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
19
+ --#{$data-list}__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
20
+ --#{$data-list}__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
21
+ --#{$data-list}__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
22
+ --#{$data-list}__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
23
+ --#{$data-list}__item--BorderBottomColor: var(--pf-t--global--border--color--default);
24
+ --#{$data-list}__item--BorderBottomWidth: var(--pf-t--global--spacer--sm);
25
+ --#{$data-list}__item--sm--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
26
+ --#{$data-list}__item--sm--BorderBottomColor: var(--pf-t--global--border--color--default);
35
27
 
36
28
  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
37
29
  --#{$data-list}__item--BorderBottomWidth: var(--#{$data-list}__item--sm--BorderBottomWidth);
38
30
  --#{$data-list}__item--BorderBottomColor: var(--#{$data-list}__item--sm--BorderBottomColor);
39
31
  }
40
32
 
41
- // list item border left
42
- --#{$data-list}__item--before--BackgroundColor: transparent;
43
- --#{$data-list}__item--before--Width: calc(2 * var(--#{$pf-global}--BorderWidth--lg));
44
- --#{$data-list}__item--before--Transition: var(--#{$pf-global}--Transition);
45
- --#{$data-list}__item--before--Top: 0;
46
- --#{$data-list}__item--before--sm--Top: calc(var(--#{$data-list}__item--BorderBottomWidth) * -1);
47
-
48
- @media (min-width: $pf-v5-global--breakpoint--sm) {
49
- --#{$data-list}__item--before--Top: var(--#{$data-list}__item--before--sm--Top);
50
- }
51
-
52
33
  // data list item row
53
- --#{$data-list}__item-row--PaddingRight: var(--#{$pf-global}--spacer--md);
54
- --#{$data-list}__item-row--PaddingLeft: var(--#{$pf-global}--spacer--md);
55
- --#{$data-list}__item-row--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
56
- --#{$data-list}__item-row--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
34
+ --#{$data-list}__item-row--PaddingRight: var(--pf-t--global--spacer--md);
35
+ --#{$data-list}__item-row--PaddingLeft: var(--pf-t--global--spacer--md);
36
+ --#{$data-list}__item-row--xl--PaddingRight: var(--pf-t--global--spacer--lg);
37
+ --#{$data-list}__item-row--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
57
38
 
58
39
  // data list item content
59
- --#{$data-list}__item-content--md--PaddingBottom: var(--#{$pf-global}--spacer--lg);
40
+ --#{$data-list}__item-content--md--PaddingBottom: var(--pf-t--global--spacer--lg);
60
41
 
61
42
  // cell
62
- --#{$data-list}__cell--PaddingTop: var(--#{$pf-global}--spacer--lg);
63
- --#{$data-list}__cell--PaddingBottom: var(--#{$pf-global}--spacer--lg);
64
- --#{$data-list}__cell--MarginRight: var(--#{$pf-global}--spacer--xl);
43
+ --#{$data-list}__cell--PaddingTop: var(--pf-t--global--spacer--lg);
44
+ --#{$data-list}__cell--PaddingBottom: var(--pf-t--global--spacer--lg);
45
+ --#{$data-list}__cell--MarginRight: var(--pf-t--global--spacer--xl);
65
46
  --#{$data-list}__cell--md--PaddingBottom: 0;
66
- --#{$data-list}__cell--m-icon--MarginRight: var(--#{$pf-global}--spacer--md);
47
+ --#{$data-list}__cell--m-icon--MarginRight: var(--pf-t--global--spacer--md);
67
48
  --#{$data-list}__cell--cell--PaddingTop: 0;
68
- --#{$data-list}__cell--cell--md--PaddingTop: var(--#{$pf-global}--spacer--lg);
69
- --#{$data-list}__cell--m-icon--cell--PaddingTop: var(--#{$pf-global}--spacer--lg);
49
+ --#{$data-list}__cell--cell--md--PaddingTop: var(--pf-t--global--spacer--lg);
50
+ --#{$data-list}__cell--m-icon--cell--PaddingTop: var(--pf-t--global--spacer--lg);
70
51
  --#{$data-list}--cell--MinWidth: initial;
71
52
  --#{$data-list}--cell--Overflow: visible;
72
53
  --#{$data-list}--cell--TextOverflow: clip;
@@ -75,9 +56,9 @@
75
56
  --#{$data-list}--cell--m-truncate--MinWidth: 5ch;
76
57
 
77
58
  // toggle
78
- --#{$data-list}__toggle--MarginLeft: calc(var(--#{$pf-global}--spacer--sm) * -1); // offset toggle to align left
79
- --#{$data-list}__toggle--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
80
- --#{$data-list}__toggle--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
59
+ --#{$data-list}__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1); // offset toggle to align left
60
+ --#{$data-list}__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // updating to spacer--sm (8x) as spacer--form-element (6px) doesn't exist
61
+ --#{$data-list}__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
81
62
  --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
82
63
  --#{$data-list}__toggle-icon--Transition: .2s ease-in 0s;
83
64
  --#{$data-list}__toggle-icon--Rotate: 0;
@@ -85,26 +66,26 @@
85
66
 
86
67
  // draggable button/icon
87
68
  --#{$data-list}__item-draggable-button--BackgroundColor: transparent;
88
- --#{$data-list}__item-draggable-button--PaddingLeft: var(--#{$pf-global}--spacer--md);
89
- --#{$data-list}__item-draggable-button--PaddingRight: var(--#{$pf-global}--spacer--md);
90
- --#{$data-list}__item-draggable-button--MarginTop: calc(var(--#{$pf-global}--spacer--lg) * -1);
91
- --#{$data-list}__item-draggable-button--MarginBottom: calc(var(--#{$pf-global}--spacer--lg) * -1);
92
- --#{$data-list}__item-draggable-button--PaddingTop: var(--#{$pf-global}--spacer--lg);
93
- --#{$data-list}__item-draggable-button--PaddingBottom: var(--#{$pf-global}--spacer--lg);
94
- --#{$data-list}__item-draggable-button--MarginLeft: calc(var(--#{$pf-global}--spacer--md) * -1);
95
- --#{$data-list}__item-draggable-button-icon--Color: var(--#{$pf-global}--icon--Color--light);
96
- --#{$data-list}__item-draggable-button--m-disabled__draggable-icon--Color: var(--#{$pf-global}--disabled-color--200);
97
- --#{$data-list}__item-draggable-button--hover__draggable-icon--Color: var(--#{$pf-global}--icon--Color--dark);
98
- --#{$data-list}__item-draggable-button--focus__draggable-icon--Color: var(--#{$pf-global}--icon--Color--dark);
99
- --#{$data-list}__item--m-ghost-row--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
69
+ --#{$data-list}__item-draggable-button--PaddingLeft: var(--pf-t--global--spacer--md);
70
+ --#{$data-list}__item-draggable-button--PaddingRight: var(--pf-t--global--spacer--md);
71
+ --#{$data-list}__item-draggable-button--MarginTop: calc(var(--pf-t--global--spacer--lg) * -1);
72
+ --#{$data-list}__item-draggable-button--MarginBottom: calc(var(--pf-t--global--spacer--lg) * -1);
73
+ --#{$data-list}__item-draggable-button--PaddingTop: var(--pf-t--global--spacer--lg);
74
+ --#{$data-list}__item-draggable-button--PaddingBottom: var(--pf-t--global--spacer--lg);
75
+ --#{$data-list}__item-draggable-button--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
76
+ --#{$data-list}__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
77
+ --#{$data-list}__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-t--global--icon--color--disabled);
78
+ --#{$data-list}__item-draggable-button--hover__draggable-icon--Color: var(--pf-t--global--icon--color--regular);
79
+ --#{$data-list}__item-draggable-button--focus__draggable-icon--Color: var(--pf-t--global--icon--color--regular);
80
+ --#{$data-list}__item--m-ghost-row--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
100
81
  --#{$data-list}__item--m-ghost-row--after--Opacity: .6;
101
82
 
102
83
  // controls
103
- --#{$data-list}__item-control--PaddingTop: var(--#{$pf-global}--spacer--lg);
104
- --#{$data-list}__item-control--PaddingBottom: var(--#{$pf-global}--spacer--lg);
105
- --#{$data-list}__item-control--MarginRight: var(--#{$pf-global}--spacer--md);
106
- --#{$data-list}__item-control--md--MarginRight: var(--#{$pf-global}--spacer--xl);
107
- --#{$data-list}__item-control--not-last-child--MarginRight: var(--#{$pf-global}--spacer--md);
84
+ --#{$data-list}__item-control--PaddingTop: var(--pf-t--global--spacer--lg);
85
+ --#{$data-list}__item-control--PaddingBottom: var(--pf-t--global--spacer--lg);
86
+ --#{$data-list}__item-control--MarginRight: var(--pf-t--global--spacer--md);
87
+ --#{$data-list}__item-control--md--MarginRight: var(--pf-t--global--spacer--xl);
88
+ --#{$data-list}__item-control--not-last-child--MarginRight: var(--pf-t--global--spacer--md);
108
89
 
109
90
  // check
110
91
  --#{$data-list}__check--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
@@ -113,57 +94,59 @@
113
94
 
114
95
  // actions
115
96
  --#{$data-list}__item-action--Display: flex;
116
- --#{$data-list}__item-action--PaddingTop: var(--#{$pf-global}--spacer--lg);
117
- --#{$data-list}__item-action--PaddingBottom: var(--#{$pf-global}--spacer--lg);
118
- --#{$data-list}__item-action--MarginLeft: var(--#{$pf-global}--spacer--md);
119
- --#{$data-list}__item-action--md--MarginLeft: var(--#{$pf-global}--spacer--xl);
120
- --#{$data-list}__item-action--not-last-child--MarginRight: var(--#{$pf-global}--spacer--md);
121
- --#{$data-list}__item-action__action--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
97
+ --#{$data-list}__item-action--PaddingTop: var(--pf-t--global--spacer--lg);
98
+ --#{$data-list}__item-action--PaddingBottom: var(--pf-t--global--spacer--lg);
99
+ --#{$data-list}__item-action--MarginLeft: var(--pf-t--global--spacer--md);
100
+ --#{$data-list}__item-action--md--MarginLeft: var(--pf-t--global--spacer--xl);
101
+ --#{$data-list}__item-action--not-last-child--MarginRight: var(--pf-t--global--spacer--md);
102
+ --#{$data-list}__item-action__action--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
122
103
  --#{$data-list}__action--MarginTop: var(--#{$data-list}__item-action__action--MarginTop); // update at breaking change
123
- --#{$data-list}__item-action__action--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
104
+ --#{$data-list}__item-action__action--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
124
105
 
125
106
  // expandable content
126
- --#{$data-list}__expandable-content--MarginRight: calc(var(--#{$data-list}__expandable-content-body--PaddingRight) * -1);
127
- --#{$data-list}__expandable-content--MarginLeft: calc(var(--#{$data-list}__expandable-content-body--PaddingLeft) * -1);
107
+ --#{$data-list}__expandable-content--BackgroundColor: var( --pf-t--global--background--color--primary--default);
108
+ --#{$data-list}__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
109
+ --#{$data-list}__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
110
+ --#{$data-list}__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
128
111
  --#{$data-list}__expandable-content--MaxHeight: #{pf-size-prem(600px)};
129
- --#{$data-list}__expandable-content--before--Top: calc(var(--#{$data-list}__item--BorderBottomWidth) * -1);
130
- --#{$data-list}__expandable-content-body--PaddingTop: var(--#{$pf-global}--spacer--md);
131
- --#{$data-list}__expandable-content-body--PaddingRight: var(--#{$pf-global}--spacer--md);
132
- --#{$data-list}__expandable-content-body--PaddingBottom: var(--#{$pf-global}--spacer--md);
133
- --#{$data-list}__expandable-content-body--PaddingLeft: var(--#{$pf-global}--spacer--md);
134
- --#{$data-list}__expandable-content-body--md--PaddingTop: var(--#{$pf-global}--spacer--lg);
135
- --#{$data-list}__expandable-content-body--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
136
- --#{$data-list}__expandable-content-body--md--PaddingBottom: var(--#{$pf-global}--spacer--lg);
137
- --#{$data-list}__expandable-content-body--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
112
+ --#{$data-list}__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--md);
113
+ --#{$data-list}__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--md);
114
+ --#{$data-list}__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--md);
115
+ --#{$data-list}__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--md);
116
+ --#{$data-list}__expandable-content-body--md--PaddingTop: var(--pf-t--global--spacer--lg);
117
+ --#{$data-list}__expandable-content-body--xl--PaddingRight: var(--pf-t--global--spacer--lg);
118
+ --#{$data-list}__expandable-content-body--md--PaddingBottom: var(--pf-t--global--spacer--lg);
119
+ --#{$data-list}__expandable-content-body--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
120
+ --#{$data-list}__expandable-content-body--BorderRadius: var(--pf-t--global--border--radius--small);
138
121
 
139
122
  // compact
140
- --#{$data-list}--m-compact--FontSize: var(--#{$pf-global}--FontSize--sm);
141
- --#{$data-list}--m-compact--LineHeight: var(--#{$pf-global}--LineHeight--sm);
142
- --#{$data-list}--m-compact__check--FontSize: var(--#{$pf-global}--FontSize--md);
143
- --#{$data-list}--m-compact__cell--PaddingTop: var(--#{$pf-global}--spacer--sm);
144
- --#{$data-list}--m-compact__cell--PaddingBottom: var(--#{$pf-global}--spacer--sm);
123
+ --#{$data-list}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
124
+ --#{$data-list}--m-compact--LineHeight: var(--pf-t--global--font--line-height--body);
125
+ --#{$data-list}--m-compact__check--FontSize: var(--pf-t--global--font--size--body--md);
126
+ --#{$data-list}--m-compact__cell--PaddingTop: var(--pf-t--global--spacer--sm);
127
+ --#{$data-list}--m-compact__cell--PaddingBottom: var(--pf-t--global--spacer--sm);
145
128
  --#{$data-list}--m-compact__cell--md--PaddingBottom: 0;
146
129
  --#{$data-list}--m-compact__cell-cell--PaddingTop: 0;
147
- --#{$data-list}--m-compact__cell-cell--md--PaddingTop: var(--#{$pf-global}--spacer--sm);
148
- --#{$data-list}--m-compact__cell--cell--MarginRight: var(--#{$pf-global}--spacer--md);
149
- --#{$data-list}--m-compact__item-control--PaddingTop: var(--#{$pf-global}--spacer--sm);
150
- --#{$data-list}--m-compact__item-control--PaddingBottom: var(--#{$pf-global}--spacer--sm);
151
- --#{$data-list}--m-compact__item-control--MarginRight: var(--#{$pf-global}--spacer--md);
152
- --#{$data-list}--m-compact__item-action--PaddingTop: var(--#{$pf-global}--spacer--sm);
153
- --#{$data-list}--m-compact__item-action--PaddingBottom: var(--#{$pf-global}--spacer--sm);
154
- --#{$data-list}--m-compact__item-action--MarginLeft: var(--#{$pf-global}--spacer--md);
130
+ --#{$data-list}--m-compact__cell-cell--md--PaddingTop: var(--pf-t--global--spacer--sm);
131
+ --#{$data-list}--m-compact__cell--cell--MarginRight: var(--pf-t--global--spacer--md);
132
+ --#{$data-list}--m-compact__item-control--PaddingTop: var(--pf-t--global--spacer--sm);
133
+ --#{$data-list}--m-compact__item-control--PaddingBottom: var(--pf-t--global--spacer--sm);
134
+ --#{$data-list}--m-compact__item-control--MarginRight: var(--pf-t--global--spacer--md);
135
+ --#{$data-list}--m-compact__item-action--PaddingTop: var(--pf-t--global--spacer--sm);
136
+ --#{$data-list}--m-compact__item-action--PaddingBottom: var(--pf-t--global--spacer--sm);
137
+ --#{$data-list}--m-compact__item-action--MarginLeft: var(--pf-t--global--spacer--md);
155
138
  --#{$data-list}--m-compact__item-action__action--MarginTop: calc(var(--#{$data-list}--m-compact__item-action--PaddingTop) * -1);
156
139
  --#{$data-list}--m-compact__item-action__action--MarginBottom: calc(var(--#{$data-list}--m-compact__item-action--PaddingBottom) * -1);
157
140
  --#{$data-list}--m-compact__action--MarginTop: var(--#{$data-list}--m-compact__item-action__action--MarginTop);
158
- --#{$data-list}--m-compact__item-content--PaddingBottom: var(--#{$pf-global}--spacer--sm);
159
- --#{$data-list}--m-compact__item-draggable-button--MarginTop: calc(var(--#{$pf-global}--spacer--sm) * -1);
160
- --#{$data-list}--m-compact__item-draggable-button--MarginBottom: calc(var(--#{$pf-global}--spacer--sm) * -1);
161
- --#{$data-list}--m-compact__item-draggable-button--PaddingTop: var(--#{$pf-global}--spacer--sm);
162
- --#{$data-list}--m-compact__item-draggable-button--PaddingBottom: var(--#{$pf-global}--spacer--sm);
163
- --#{$data-list}--m-compact__cell--m-icon--cell--PaddingTop: var(--#{$pf-global}--spacer--sm);
164
-
165
- @include pf-v5-t-light;
141
+ --#{$data-list}--m-compact__item-content--PaddingBottom: var(--pf-t--global--spacer--sm);
142
+ --#{$data-list}--m-compact__item-draggable-button--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
143
+ --#{$data-list}--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
144
+ --#{$data-list}--m-compact__item-draggable-button--PaddingTop: var(--pf-t--global--spacer--sm);
145
+ --#{$data-list}--m-compact__item-draggable-button--PaddingBottom: var(--pf-t--global--spacer--sm);
146
+ --#{$data-list}--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-t--global--spacer--sm);
147
+ }
166
148
 
149
+ .#{$data-list} {
167
150
  font-size: var(--#{$data-list}--FontSize);
168
151
  line-height: var(--#{$data-list}--LineHeight);
169
152
  overflow-wrap: break-word;
@@ -235,58 +218,18 @@
235
218
  background-color: var(--#{$data-list}__item--BackgroundColor);
236
219
  border-block-end: var(--#{$data-list}__item--BorderBottomWidth) solid var(--#{$data-list}__item--BorderBottomColor);
237
220
 
238
- &::before {
239
- position: absolute;
240
- inset-block-start: var(--#{$data-list}__item--before--Top);
241
- inset-block-end: 0;
242
- inset-inline-start: 0;
243
- width: var(--#{$data-list}__item--before--Width);
244
- content: "";
245
- background-color: var(--#{$data-list}__item--before--BackgroundColor);
246
- transition: var(--#{$data-list}__item--before--Transition);
247
- }
248
-
249
221
  &.pf-m-clickable {
250
222
  cursor: pointer;
251
223
  outline-offset: var(--#{$data-list}__item--m-clickable--OutlineOffset);
252
224
 
253
225
  &:hover,
254
226
  &:focus {
255
- position: relative;
256
- z-index: var(--#{$data-list}__item--m-clickable--hover--ZIndex);
257
-
258
- // stylelint-disable selector-not-notation
259
- // update to single :not() in breaking change
260
- &:not(.pf-m-selected):not(:last-child) {
261
- --#{$data-list}__item--BorderBottomWidth: 0;
262
-
263
- // stylelint-disable
264
- + .#{$data-list}__item {
265
- border-block-start: var(--#{$data-list}__item--m-clickable--hover--item--BorderTopWidth) solid var(--#{$data-list}__item--m-clickable--hover--item--BorderTopColor);
266
- }
267
- // stylelint-enable
268
- }
269
- }
270
-
271
- &:hover {
272
- box-shadow: var(--#{$data-list}__item--m-clickable--hover--BoxShadow);
273
- }
274
-
275
- &:focus {
276
- box-shadow: var(--#{$data-list}__item--m-clickable--focus--BoxShadow);
277
- }
278
-
279
- &:active {
280
- box-shadow: var(--#{$data-list}__item--m-clickable--active--BoxShadow);
227
+ background-color: var(--#{$data-list}__item--hover--BackgroundColor);
281
228
  }
282
229
  }
283
230
 
284
231
  &.pf-m-selected {
285
- --#{$data-list}__item--before--BackgroundColor: var(--#{$data-list}__item--m-selected--before--BackgroundColor);
286
-
287
- position: relative;
288
- z-index: var(--#{$data-list}__item--m-selected--ZIndex);
289
- box-shadow: var(--#{$data-list}__item--m-selected--BoxShadow);
232
+ background-color: var(--#{$data-list}__item--m-selected--BackgroundColor);
290
233
  }
291
234
 
292
235
  &.pf-m-ghost-row {
@@ -467,7 +410,12 @@
467
410
  // expandable content
468
411
  .#{$data-list}__expandable-content {
469
412
  max-height: var(--#{$data-list}__expandable-content--MaxHeight);
413
+ margin-block-end: var(--#{$data-list}__expandable-content--MarginBlockEnd);
414
+ margin-inline-start: var(--#{$data-list}__expandable-content--MarginInlineStart);
415
+ margin-inline-end: var(--#{$data-list}__expandable-content--MarginInlineEnd);
470
416
  overflow-y: auto;
417
+ background-color: var(--#{$data-list}__expandable-content--BackgroundColor);
418
+ border-radius: var(--#{$data-list}__expandable-content-body--BorderRadius);
471
419
 
472
420
  .#{$data-list}__expandable-content-body {
473
421
  padding-block-start: var(--#{$data-list}__expandable-content-body--PaddingTop);
@@ -496,10 +444,3 @@
496
444
  }
497
445
  }
498
446
  }
499
-
500
- // stylelint-disable no-invalid-position-at-import-rule
501
- @import "themes/dark/data-list";
502
-
503
- @include pf-v5-theme-dark {
504
- @include pf-v5-theme-dark-data-list;
505
- }
package/components/Form/form.css CHANGED
@@ -20,20 +20,7 @@
20
20
  --pf-v5-c-form__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
21
21
  --pf-v5-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
22
22
  --pf-v5-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
23
- --pf-v5-c-form__group-label-help--BackgroundColor: transparent;
24
- --pf-v5-c-form__group-label-help--PaddingTop: var(--pf-t--global--spacer--xs);
25
- --pf-v5-c-form__group-label-help--PaddingRight: var(--pf-t--global--spacer--xs);
26
- --pf-v5-c-form__group-label-help--PaddingBottom: var(--pf-t--global--spacer--xs);
27
- --pf-v5-c-form__group-label-help--PaddingLeft: var(--pf-t--global--spacer--xs);
28
- --pf-v5-c-form__group-label-help--MarginTop: calc(var(--pf-v5-c-form__group-label-help--PaddingTop) * -1);
29
- --pf-v5-c-form__group-label-help--MarginRight: calc(var(--pf-v5-c-form__group-label-help--PaddingRight) * -1);
30
- --pf-v5-c-form__group-label-help--MarginBottom: calc(var(--pf-v5-c-form__group-label-help--PaddingBottom) * -1);
31
- --pf-v5-c-form__group-label-help--MarginLeft: calc(var(--pf-v5-c-form__group-label-help--PaddingLeft) * -1 + var(--pf-t--global--spacer--xs));
32
23
  --pf-v5-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
33
- --pf-v5-c-form__group-label-help--TranslateY: 0.125rem;
34
- --pf-v5-c-form__group-label-help--Color: var(--pf-t--global--icon--color--regular);
35
- --pf-v5-c-form__group-label-help--hover--Color: var(--pf-t--global--icon--color--regular);
36
- --pf-v5-c-form__group-label-help--focus--Color: var(--pf-t--global--icon--color--brand--hover);
37
24
  --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
38
25
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
39
26
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-t--global--spacer--lg);
@@ -315,28 +302,8 @@
315
302
  color: var(--pf-v5-c-form__label-required--Color);
316
303
  }
317
304
 
318
- .pf-v5-c-form__group-label-help {
319
- padding-block-start: var(--pf-v5-c-form__group-label-help--PaddingTop);
320
- padding-block-end: var(--pf-v5-c-form__group-label-help--PaddingBottom);
321
- padding-inline-start: var(--pf-v5-c-form__group-label-help--PaddingLeft);
322
- padding-inline-end: var(--pf-v5-c-form__group-label-help--PaddingRight);
323
- margin-block-start: var(--pf-v5-c-form__group-label-help--MarginTop);
324
- margin-block-end: var(--pf-v5-c-form__group-label-help--MarginBottom);
325
- margin-inline-start: var(--pf-v5-c-form__group-label-help--MarginLeft);
326
- margin-inline-end: var(--pf-v5-c-form__group-label-help--MarginRight);
327
- font-size: var(--pf-v5-c-form__group-label-help--FontSize);
328
- line-height: 1;
329
- color: var(--pf-v5-c-form__group-label-help--Color);
330
- cursor: pointer;
331
- background-color: var(--pf-v5-c-form__group-label-help--BackgroundColor);
332
- border: 0;
333
- transform: translateY(var(--pf-v5-c-form__group-label-help--TranslateY));
334
- }
335
- .pf-v5-c-form__group-label-help:hover {
336
- --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--hover--Color);
337
- }
338
- .pf-v5-c-form__group-label-help:focus-within {
339
- --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
305
+ .pf-v5-c-form__group-label-help .pf-v5-c-button {
306
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-form__group-label-help--FontSize);
340
307
  }
341
308
 
342
309
  .pf-v5-c-form__group-control {
package/components/Form/form.scss CHANGED
@@ -82,20 +82,7 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
82
82
  --#{$form}__label-required--Color: var(--pf-t--global--color--status--danger--default);
83
83
 
84
84
  // Field level help
85
- --#{$form}__group-label-help--BackgroundColor: transparent;
86
- --#{$form}__group-label-help--PaddingTop: var(--pf-t--global--spacer--xs);
87
- --#{$form}__group-label-help--PaddingRight: var(--pf-t--global--spacer--xs);
88
- --#{$form}__group-label-help--PaddingBottom: var(--pf-t--global--spacer--xs);
89
- --#{$form}__group-label-help--PaddingLeft: var(--pf-t--global--spacer--xs);
90
- --#{$form}__group-label-help--MarginTop: calc(var(--#{$form}__group-label-help--PaddingTop) * -1);
91
- --#{$form}__group-label-help--MarginRight: calc(var(--#{$form}__group-label-help--PaddingRight) * -1);
92
- --#{$form}__group-label-help--MarginBottom: calc(var(--#{$form}__group-label-help--PaddingBottom) * -1);
93
- --#{$form}__group-label-help--MarginLeft: calc(var(--#{$form}__group-label-help--PaddingLeft) * -1 + var(--pf-t--global--spacer--xs));
94
85
  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
95
- --#{$form}__group-label-help--TranslateY: #{pf-size-prem(2px)};
96
- --#{$form}__group-label-help--Color: var(--pf-t--global--icon--color--regular);
97
- --#{$form}__group-label-help--hover--Color: var(--pf-t--global--icon--color--regular);
98
- --#{$form}__group-label-help--focus--Color: var(--pf-t--global--icon--color--brand--hover);
99
86
 
100
87
  // Form group label info
101
88
  --#{$form}__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
@@ -291,28 +278,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
291
278
  }
292
279
 
293
280
  .#{$form}__group-label-help {
294
- padding-block-start: var(--#{$form}__group-label-help--PaddingTop);
295
- padding-block-end: var(--#{$form}__group-label-help--PaddingBottom);
296
- padding-inline-start: var(--#{$form}__group-label-help--PaddingLeft);
297
- padding-inline-end: var(--#{$form}__group-label-help--PaddingRight);
298
- margin-block-start: var(--#{$form}__group-label-help--MarginTop);
299
- margin-block-end: var(--#{$form}__group-label-help--MarginBottom);
300
- margin-inline-start: var(--#{$form}__group-label-help--MarginLeft);
301
- margin-inline-end: var(--#{$form}__group-label-help--MarginRight);
302
- font-size: var(--#{$form}__group-label-help--FontSize);
303
- line-height: 1;
304
- color: var(--#{$form}__group-label-help--Color);
305
- cursor: pointer;
306
- background-color: var(--#{$form}__group-label-help--BackgroundColor);
307
- border: 0;
308
- transform: translateY(var(--#{$form}__group-label-help--TranslateY));
309
-
310
- &:hover {
311
- --#{$form}__group-label-help--Color: var(--#{$form}__group-label-help--hover--Color);
312
- }
313
-
314
- &:focus-within {
315
- --#{$form}__group-label-help--Color: var(--#{$form}__group-label-help--focus--Color);
281
+ .#{$button} {
282
+ --#{$button}--FontSize: var(--#{$form}__group-label-help--FontSize);
316
283
  }
317
284
  }
318
285
 
package/components/Progress/progress.css CHANGED
@@ -1,31 +1,33 @@
1
+ :root,
1
2
  .pf-v5-c-progress {
2
- --pf-v5-c-progress--GridGap: var(--pf-v5-global--spacer--md);
3
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--primary-color--100);
4
- --pf-v5-c-progress__bar--Height: var(--pf-v5-global--spacer--md);
5
- --pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
3
+ --pf-v5-c-progress--GridGap: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-progress__bar--Height: var(--pf-t--global--spacer--md);
5
+ --pf-v5-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
6
6
  --pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
7
- --pf-v5-c-progress__status--Gap: var(--pf-v5-global--spacer--sm);
8
- --pf-v5-c-progress__status-icon--Color: var(--pf-v5-global--Color--100);
9
- --pf-v5-c-progress__bar--before--Opacity: .2;
7
+ --pf-v5-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
10
9
  --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
11
- --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress__bar--before--BackgroundColor);
12
- --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-v5-global--spacer--xs) - var(--pf-v5-c-progress--GridGap));
13
- --pf-v5-c-progress--m-success__bar--BackgroundColor: var(--pf-v5-global--success-color--100);
14
- --pf-v5-c-progress--m-warning__bar--BackgroundColor: var(--pf-v5-global--warning-color--100);
15
- --pf-v5-c-progress--m-danger__bar--BackgroundColor: var(--pf-v5-global--danger-color--100);
16
- --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
17
- --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
18
- --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
19
- --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-v5-global--spacer--xl);
20
- --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
21
- --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
22
- --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--Color--dark-100);
23
- --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
24
- --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
25
- --pf-v5-c-progress--m-sm__bar--Height: var(--pf-v5-global--spacer--sm);
26
- --pf-v5-c-progress--m-sm__description--FontSize: var(--pf-v5-global--FontSize--sm);
27
- --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-v5-global--FontSize--sm);
28
- --pf-v5-c-progress--m-lg__bar--Height: var(--pf-v5-global--spacer--lg);
10
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
11
+ --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--pf-v5-c-progress--GridGap));
12
+ --pf-v5-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
13
+ --pf-v5-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
14
+ --pf-v5-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
15
+ --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
16
+ --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
17
+ --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
18
+ --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
19
+ --pf-v5-c-progress--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
20
+ --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
21
+ --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
22
+ --pf-v5-c-progress--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
23
+ --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
24
+ --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
25
+ --pf-v5-c-progress--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
26
+ --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
27
+ --pf-v5-c-progress--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
28
+ }
29
+
30
+ .pf-v5-c-progress {
29
31
  display: grid;
30
32
  grid-template-rows: 1fr auto;
31
33
  grid-template-columns: auto auto;
@@ -35,9 +37,6 @@
35
37
  .pf-v5-c-progress.pf-m-sm {
36
38
  --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
37
39
  }
38
- .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
39
- font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
40
- }
41
40
  .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
42
41
  font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
43
42
  }
@@ -93,18 +92,19 @@
93
92
  grid-template-columns: 1fr fit-content(50%);
94
93
  }
95
94
  .pf-v5-c-progress.pf-m-success {
96
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-success__bar--BackgroundColor);
95
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-success__indicator--BackgroundColor);
97
96
  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
98
97
  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
99
98
  }
100
99
  .pf-v5-c-progress.pf-m-warning {
101
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-warning__bar--BackgroundColor);
100
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-warning__indicator--BackgroundColor);
102
101
  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
103
102
  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
104
103
  }
105
104
  .pf-v5-c-progress.pf-m-danger {
106
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-danger__bar--BackgroundColor);
105
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-danger__indicator--BackgroundColor);
107
106
  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
107
+ --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-danger--m-inside__measure--Color);
108
108
  }
109
109
 
110
110
  .pf-v5-c-progress__description {
@@ -146,14 +146,6 @@
146
146
  height: var(--pf-v5-c-progress__bar--Height);
147
147
  background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
148
148
  }
149
- .pf-v5-c-progress__bar::before {
150
- position: absolute;
151
- width: 100%;
152
- height: 100%;
153
- content: "";
154
- background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
155
- opacity: var(--pf-v5-c-progress__bar--before--Opacity);
156
- }
157
149
 
158
150
  .pf-v5-c-progress__indicator {
159
151
  position: absolute;
@@ -165,10 +157,4 @@
165
157
  grid-row: 3/4;
166
158
  grid-column: 1/3;
167
159
  margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
168
- }
169
-
170
- :where(.pf-v5-theme-dark) .pf-v5-c-progress {
171
- --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
172
- --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
173
- --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
174
160
  }