@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/Progress/progress.scss CHANGED
@@ -1,40 +1,40 @@
1
1
  // @debug $progress; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$progress} {
4
5
  // Component variables
5
- --#{$progress}--GridGap: var(--#{$pf-global}--spacer--md);
6
-
6
+ --#{$progress}--GridGap: var(--pf-t--global--spacer--md);
7
+
7
8
  // Element variables
8
- --#{$progress}__bar--before--BackgroundColor: var(--#{$pf-global}--primary-color--100);
9
- --#{$progress}__bar--Height: var(--#{$pf-global}--spacer--md);
10
- --#{$progress}__bar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100); // the bar always needs white under it so that the semi-transparent color shows correctly
9
+ --#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
10
+ --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
11
11
  --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
12
- --#{$progress}__status--Gap: var(--#{$pf-global}--spacer--sm);
13
- --#{$progress}__status-icon--Color: var(--#{$pf-global}--Color--100); // the status icon default color is the default text color
14
- --#{$progress}__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
12
+ --#{$progress}__status--Gap: var(--pf-t--global--spacer--sm);
13
+ --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
15
14
  --#{$progress}__indicator--Height: var(--#{$progress}__bar--Height);
16
- --#{$progress}__indicator--BackgroundColor: var(--#{$progress}__bar--before--BackgroundColor);
17
- --#{$progress}__helper-text--MarginTop: calc(var(--#{$pf-global}--spacer--xs) - var(--#{$progress}--GridGap));
18
-
15
+ --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
16
+ --#{$progress}__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
17
+
19
18
  // Modifier variables
20
- --#{$progress}--m-success__bar--BackgroundColor: var(--#{$pf-global}--success-color--100);
21
- --#{$progress}--m-warning__bar--BackgroundColor: var(--#{$pf-global}--warning-color--100);
22
- --#{$progress}--m-danger__bar--BackgroundColor: var(--#{$pf-global}--danger-color--100);
23
- --#{$progress}--m-success__status-icon--Color: var(--#{$pf-global}--success-color--100);
24
- --#{$progress}--m-warning__status-icon--Color: var(--#{$pf-global}--warning-color--100);
25
- --#{$progress}--m-danger__status-icon--Color: var(--#{$pf-global}--danger-color--100);
26
- --#{$progress}--m-inside__indicator--MinWidth: var(--#{$pf-global}--spacer--xl);
27
- --#{$progress}--m-inside__measure--Color: var(--#{$pf-global}--Color--light-100); // the measure needs to be white when moved inside the progress bar indicator
28
- --#{$progress}--m-success--m-inside__measure--Color: var(--#{$pf-global}--Color--light-100); // remove at breaking change
29
- --#{$progress}--m-warning--m-inside__measure--Color: var(--#{$pf-global}--Color--dark-100); // the measure still needs to be dark when in warning state
30
- --#{$progress}--m-inside__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
31
- --#{$progress}--m-outside__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
32
- --#{$progress}--m-sm__bar--Height: var(--#{$pf-global}--spacer--sm);
33
- --#{$progress}--m-sm__description--FontSize: var(--#{$pf-global}--FontSize--sm);
34
- --#{$progress}--m-sm__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
35
- --#{$progress}--m-lg__bar--Height: var(--#{$pf-global}--spacer--lg);
36
-
37
- // Component styles
19
+ --#{$progress}--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
20
+ --#{$progress}--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
21
+ --#{$progress}--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
22
+ --#{$progress}--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
23
+ --#{$progress}--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
24
+ --#{$progress}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
25
+ --#{$progress}--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
26
+ --#{$progress}--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
27
+ --#{$progress}--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
28
+ --#{$progress}--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
29
+ --#{$progress}--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
30
+ --#{$progress}--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
31
+ --#{$progress}--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
32
+ --#{$progress}--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
33
+ --#{$progress}--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
34
+ --#{$progress}--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
35
+ }
36
+
37
+ .#{$progress} {
38
38
  display: grid;
39
39
  grid-template-rows: 1fr auto;
40
40
  grid-template-columns: auto auto;
@@ -44,11 +44,7 @@
44
44
  // Modifiers
45
45
  // size modifiers
46
46
  &.pf-m-sm {
47
- --#{$progress}__bar--Height: var(--#{$progress}--m-sm__bar--Height); // set height to the small height
48
-
49
- .#{$progress}__description {
50
- font-size: var(--#{$progress}--m-sm__description--FontSize);
51
- }
47
+ --#{$progress}__bar--Height: var(--#{$progress}--m-sm__bar--Height);
52
48
 
53
49
  .#{$progress}__measure {
54
50
  font-size: var(--#{$progress}--m-sm__measure--FontSize);
@@ -56,7 +52,7 @@
56
52
  }
57
53
 
58
54
  &.pf-m-lg {
59
- --#{$progress}__bar--Height: var(--#{$progress}--m-lg__bar--Height); // set height to the large height
55
+ --#{$progress}__bar--Height: var(--#{$progress}--m-lg__bar--Height);
60
56
  }
61
57
 
62
58
  // an inside-style progress component shows the measure inside the indicator
@@ -129,20 +125,21 @@
129
125
 
130
126
  // status modifiers
131
127
  &.pf-m-success {
132
- --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-success__bar--BackgroundColor);
128
+ --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-success__indicator--BackgroundColor);
133
129
  --#{$progress}__status-icon--Color: var(--#{$progress}--m-success__status-icon--Color);
134
130
  --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-success--m-inside__measure--Color);
135
131
  }
136
132
 
137
133
  &.pf-m-warning {
138
- --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-warning__bar--BackgroundColor);
134
+ --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-warning__indicator--BackgroundColor);
139
135
  --#{$progress}__status-icon--Color: var(--#{$progress}--m-warning__status-icon--Color);
140
136
  --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-warning--m-inside__measure--Color);
141
137
  }
142
-
138
+
143
139
  &.pf-m-danger {
144
- --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-danger__bar--BackgroundColor);
140
+ --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__indicator--BackgroundColor);
145
141
  --#{$progress}__status-icon--Color: var(--#{$progress}--m-danger__status-icon--Color);
142
+ --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-danger--m-inside__measure--Color);
146
143
  }
147
144
  }
148
145
 
@@ -192,15 +189,6 @@
192
189
  align-self: center;
193
190
  height: var(--#{$progress}__bar--Height);
194
191
  background-color: var(--#{$progress}__bar--BackgroundColor);
195
-
196
- &::before {
197
- position: absolute;
198
- width: 100%;
199
- height: 100%;
200
- content: "";
201
- background-color: var(--#{$progress}__bar--before--BackgroundColor);
202
- opacity: var(--#{$progress}__bar--before--Opacity);
203
- }
204
192
  }
205
193
 
206
194
  // the progress__indicator is the part that advances (widens) as progress is made
@@ -216,10 +204,3 @@
216
204
  grid-column: 1 / 3;
217
205
  margin-block-start: var(--#{$progress}__helper-text--MarginTop);
218
206
  }
219
-
220
- // stylelint-disable no-invalid-position-at-import-rule
221
- @import "themes/dark/progress";
222
-
223
- @include pf-v5-theme-dark {
224
- @include pf-v5-theme-dark-progress;
225
- }
package/components/Slider/slider.css CHANGED
@@ -1,63 +1,67 @@
1
+ :root,
1
2
  .pf-v5-c-slider {
2
3
  --pf-v5-c-slider--value: 0;
3
4
  --pf-v5-c-slider__step--Left: 0;
4
- --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
5
- --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
5
+ --pf-v5-c-slider__rail--PaddingTop: var(--pf-t--global--spacer--md);
6
+ --pf-v5-c-slider__rail--PaddingBottom: var(--pf-t--global--spacer--md);
6
7
  --pf-v5-c-slider__rail-track--Height: 0.25rem;
7
- --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-v5-global--BorderColor--100);
8
- --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
9
- --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
8
+ --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
9
+ --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
10
+ --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
10
11
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
11
- --pf-v5-c-slider__rail-track--before--fill--direction: right;
12
- --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
12
+ --pf-v5-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
13
13
  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
14
- --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
14
+ --pf-v5-c-slider__step-tick--Top: var(--pf-t--global--spacer--md);
15
15
  --pf-v5-c-slider__step-tick--Width: 0.25rem;
16
16
  --pf-v5-c-slider__step-tick--Height: 0.25rem;
17
- --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-v5-global--BorderColor--200);
17
+ --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
18
18
  --pf-v5-c-slider__step-tick--TranslateX: -50%;
19
- --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
20
- --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--primary-color--100);
19
+ --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
20
+ --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
21
21
  --pf-v5-c-slider__step--first-child__step-tick--TranslateX: 0;
22
22
  --pf-v5-c-slider__step--last-child__step-tick--TranslateX: -100%;
23
23
  --pf-v5-c-slider__step-label--TranslateX: -50%;
24
- --pf-v5-c-slider__step-label--Top: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
24
+ --pf-v5-c-slider__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
25
25
  --pf-v5-c-slider__step--first-child__step-label--TranslateX: 0;
26
26
  --pf-v5-c-slider__step--last-child__step-label--TranslateX: -100%;
27
- --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-v5-global--spacer--md));
27
+ --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
28
28
  --pf-v5-c-slider__thumb--Width: 1rem;
29
29
  --pf-v5-c-slider__thumb--Height: 1rem;
30
30
  --pf-v5-c-slider__thumb--Left: var(--pf-v5-c-slider--value);
31
- --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-v5-global--primary-color--100);
31
+ --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
32
32
  --pf-v5-c-slider__thumb--TranslateX: -50%;
33
33
  --pf-v5-c-slider__thumb--TranslateY: -50%;
34
- --pf-v5-c-slider__thumb--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
34
+ --pf-v5-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
35
35
  --pf-v5-c-slider__thumb--BoxShadow--base:
36
- 0 0 0 2px var(--pf-v5-global--BackgroundColor--100),
37
- 0 0 0 3px var(--pf-v5-global--primary-color--100);
36
+ 0 0 0 2px var(--pf-t--global--background--color--primary--default),
37
+ 0 0 0 3px var(--pf-t--global--color--brand--default);
38
38
  --pf-v5-c-slider__thumb--hover--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
39
39
  --pf-v5-c-slider__thumb--focus--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
40
40
  --pf-v5-c-slider__thumb--active--BoxShadow:
41
41
  var(--pf-v5-c-slider__thumb--BoxShadow--base),
42
- 0 0 2px 5px var(--pf-v5-global--active-color--200);
43
- --pf-v5-c-slider__thumb--before--Width: var(--pf-v5-global--target-size--MinWidth);
44
- --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-global--target-size--MinHeight);
45
- --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
42
+ 0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
43
+ --pf-v5-c-slider__thumb--before--Width: 44px;
44
+ --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-c-slider__thumb--before--Width);
45
+ --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
46
46
  --pf-v5-c-slider__thumb--before--TranslateX: -50%;
47
47
  --pf-v5-c-slider__thumb--before--TranslateY: -50%;
48
- --pf-v5-c-slider__value--MarginLeft: var(--pf-v5-global--spacer--md);
49
- --pf-v5-c-slider__value--c-form-control--width-base: 3.5ch;
48
+ --pf-v5-c-slider__value--MarginLeft: var(--pf-t--global--spacer--md);
49
+ --pf-v5-c-slider__value--c-form-control--width-base: calc(var(--pf-v5-c-form-control--PaddingLeft) + var(--pf-v5-c-form-control--PaddingRight) + 1.25rem);
50
50
  --pf-v5-c-slider__value--c-form-control--width-chars: 3;
51
- --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + (var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch));
51
+ --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch);
52
52
  --pf-v5-c-slider__value--m-floating--TranslateX: -50%;
53
53
  --pf-v5-c-slider__value--m-floating--TranslateY: -100%;
54
54
  --pf-v5-c-slider__value--m-floating--Left: var(--pf-v5-c-slider--value);
55
- --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-v5-global--ZIndex--sm);
56
- --pf-v5-c-slider__actions--MarginRight: var(--pf-v5-global--spacer--sm);
57
- --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-v5-global--spacer--sm);
58
- --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--palette--black-500);
59
- --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--palette--black-700);
60
- --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
55
+ --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
56
+ --pf-v5-c-slider__actions--MarginRight: var(--pf-t--global--spacer--sm);
57
+ --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
58
+ --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
59
+ --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
60
+ --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
61
+ }
62
+
63
+ .pf-v5-c-slider {
64
+ --pf-v5-c-slider__rail-track--before--fill--direction: right;
61
65
  display: flex;
62
66
  }
63
67
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
package/components/Slider/slider.scss CHANGED
@@ -1,87 +1,90 @@
1
1
  // @debug $slider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$slider} {
4
5
  --#{$slider}--value: 0; // should always be set inline
5
6
  --#{$slider}__step--Left: 0; // should always be set inline
6
-
7
+
7
8
  // rail
8
- --#{$slider}__rail--PaddingTop: var(--#{$pf-global}--spacer--md);
9
- --#{$slider}__rail--PaddingBottom: var(--#{$pf-global}--spacer--md);
9
+ --#{$slider}__rail--PaddingTop: var(--pf-t--global--spacer--md);
10
+ --#{$slider}__rail--PaddingBottom: var(--pf-t--global--spacer--md);
10
11
  --#{$slider}__rail-track--Height: #{pf-size-prem(4px)};
11
- --#{$slider}__rail-track--before--base--BackgroundColor: var(--#{$pf-global}--BorderColor--100);
12
- --#{$slider}__rail-track--before--fill--BackgroundColor: var(--#{$pf-global}--active-color--300);
13
- --#{$slider}__rail-track--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
12
+ --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
13
+ --#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
14
+ --#{$slider}__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
14
15
  --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
15
-
16
- @include pf-v5-bidirectional-style(
17
- $prop: --#{$slider}__rail-track--before--fill--direction,
18
- $ltr-val: right,
19
- $rtl-val: left
20
- );
21
-
16
+
22
17
  // steps
23
- --#{$slider}__steps--FontSize: var(--#{$pf-global}--FontSize--sm);
18
+ --#{$slider}__steps--FontSize: var(--pf-t--global--font--size--sm);
24
19
  --#{$slider}__steps--Height: var(--#{$slider}__steps--FontSize);
25
-
20
+
26
21
  // step tick
27
- --#{$slider}__step-tick--Top: var(--#{$pf-global}--spacer--md);
22
+ --#{$slider}__step-tick--Top: var(--pf-t--global--spacer--md);
28
23
  --#{$slider}__step-tick--Width: #{pf-size-prem(4px)};
29
24
  --#{$slider}__step-tick--Height: #{pf-size-prem(4px)};
30
- --#{$slider}__step-tick--BackgroundColor: var(--#{$pf-global}--BorderColor--200);
25
+ --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
31
26
  --#{$slider}__step-tick--TranslateX: -50%;
32
- --#{$slider}__step-tick--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
33
- --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--#{$pf-global}--primary-color--100);
27
+ --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
28
+ --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
34
29
  --#{$slider}__step--first-child__step-tick--TranslateX: 0;
35
30
  --#{$slider}__step--last-child__step-tick--TranslateX: -100%;
36
-
31
+
37
32
  // step label
38
33
  --#{$slider}__step-label--TranslateX: -50%;
39
- --#{$slider}__step-label--Top: calc(var(--#{$pf-global}--spacer--xl) + var(--#{$slider}__rail-track--Height));
34
+ --#{$slider}__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--#{$slider}__rail-track--Height));
40
35
  --#{$slider}__step--first-child__step-label--TranslateX: 0;
41
36
  --#{$slider}__step--last-child__step-label--TranslateX: -100%;
42
-
37
+
43
38
  // thumb
44
- --#{$slider}__thumb--Top: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--#{$pf-global}--spacer--md));
39
+ --#{$slider}__thumb--Top: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
45
40
  --#{$slider}__thumb--Width: #{pf-size-prem(16px)};
46
41
  --#{$slider}__thumb--Height: #{pf-size-prem(16px)};
47
42
  --#{$slider}__thumb--Left: var(--#{$slider}--value);
48
- --#{$slider}__thumb--BackgroundColor: var(--#{$pf-global}--primary-color--100);
43
+ --#{$slider}__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
49
44
  --#{$slider}__thumb--TranslateX: -50%;
50
45
  --#{$slider}__thumb--TranslateY: -50%;
51
- --#{$slider}__thumb--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
46
+ --#{$slider}__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
52
47
  --#{$slider}__thumb--BoxShadow--base:
53
- 0 0 0 2px var(--#{$pf-global}--BackgroundColor--100),
54
- 0 0 0 3px var(--#{$pf-global}--primary-color--100);
48
+ 0 0 0 2px var(--pf-t--global--background--color--primary--default),
49
+ 0 0 0 3px var(--pf-t--global--color--brand--default);
55
50
  --#{$slider}__thumb--hover--BoxShadow: var(--#{$slider}__thumb--BoxShadow--base);
56
51
  --#{$slider}__thumb--focus--BoxShadow: var(--#{$slider}__thumb--BoxShadow--base);
57
52
  --#{$slider}__thumb--active--BoxShadow:
58
53
  var(--#{$slider}__thumb--BoxShadow--base),
59
- 0 0 2px 5px var(--#{$pf-global}--active-color--200);
60
- --#{$slider}__thumb--before--Width: var(--#{$pf-global}--target-size--MinWidth);
61
- --#{$slider}__thumb--before--Height: var(--#{$pf-global}--target-size--MinHeight);
62
- --#{$slider}__thumb--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
54
+ 0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
55
+ --#{$slider}__thumb--before--Width: 44px;
56
+ --#{$slider}__thumb--before--Height: var(--#{$slider}__thumb--before--Width);
57
+ --#{$slider}__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
63
58
  --#{$slider}__thumb--before--TranslateX: -50%;
64
59
  --#{$slider}__thumb--before--TranslateY: -50%;
65
-
60
+
66
61
  // value
67
- --#{$slider}__value--MarginLeft: var(--#{$pf-global}--spacer--md);
68
- --#{$slider}__value--c-form-control--width-base: 3.5ch;
62
+ --#{$slider}__value--MarginLeft: var(--pf-t--global--spacer--md);
63
+ --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingLeft) + var(--#{$form-control}--PaddingRight) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
69
64
  --#{$slider}__value--c-form-control--width-chars: 3;
70
- --#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + (var(--#{$slider}__value--c-form-control--width-chars) * 1ch));
65
+ --#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + var(--#{$slider}__value--c-form-control--width-chars) * 1ch);
71
66
  --#{$slider}__value--m-floating--TranslateX: -50%;
72
67
  --#{$slider}__value--m-floating--TranslateY: -100%;
73
68
  --#{$slider}__value--m-floating--Left: var(--#{$slider}--value);
74
- --#{$slider}__value--m-floating--ZIndex: var(--#{$pf-global}--ZIndex--sm);
75
-
69
+ --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
70
+
76
71
  // actions
77
- --#{$slider}__actions--MarginRight: var(--#{$pf-global}--spacer--sm);
78
- --#{$slider}__main--actions--MarginLeft: var(--#{$pf-global}--spacer--sm);
79
-
72
+ --#{$slider}__actions--MarginRight: var(--pf-t--global--spacer--sm);
73
+ --#{$slider}__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
74
+
80
75
  // disabled
81
- --#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor: var(--#{$pf-global}--palette--black-500);
82
- --#{$slider}--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--#{$pf-global}--palette--black-700);
83
- --#{$slider}--m-disabled__thumb--BackgroundColor: var(--#{$pf-global}--palette--black-700);
76
+ --#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
77
+ --#{$slider}--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
78
+ --#{$slider}--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
79
+ }
84
80
 
81
+ .#{$slider} {
82
+ @include pf-v5-bidirectional-style(
83
+ $prop: --#{$slider}__rail-track--before--fill--direction,
84
+ $ltr-val: right,
85
+ $rtl-val: left
86
+ );
87
+
85
88
  display: flex;
86
89
 
87
90
  &.pf-m-disabled {