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

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 (12) hide show
  1. package/components/Button/button.css +3 -1
  2. package/components/Button/button.scss +3 -1
  3. package/components/Switch/switch.css +41 -37
  4. package/components/Switch/switch.scss +47 -42
  5. package/docs/components/Button/examples/Button.md +29 -2
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +44 -42
  8. package/patternfly-theme-dark-unversioned.css +44 -42
  9. package/patternfly.css +44 -42
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/Switch/themes/dark/switch.scss +0 -11
package/components/Button/button.css CHANGED
@@ -224,6 +224,7 @@
224
224
  text-align: center;
225
225
  text-decoration: var(--pf-v5-c-button--TextDecoration);
226
226
  white-space: nowrap;
227
+ cursor: pointer;
227
228
  user-select: none;
228
229
  background-color: var(--pf-v5-c-button--BackgroundColor);
229
230
  border: 0;
@@ -321,7 +322,6 @@
321
322
  display: inline;
322
323
  text-align: start;
323
324
  white-space: normal;
324
- cursor: pointer;
325
325
  outline-offset: 0.125rem;
326
326
  }
327
327
  .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
@@ -437,7 +437,9 @@
437
437
  mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
438
438
  }
439
439
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
440
+ min-width: auto;
440
441
  padding: 0;
442
+ background-color: transparent;
441
443
  }
442
444
  .pf-v5-c-button.pf-m-block {
443
445
  display: block;
package/components/Button/button.scss CHANGED
@@ -267,6 +267,7 @@
267
267
  text-align: center;
268
268
  text-decoration: var(--#{$button}--TextDecoration);
269
269
  white-space: nowrap;
270
+ cursor: pointer; // needed for when a button does not use <button> - eg, <span>
270
271
  user-select: none;
271
272
  background-color: var(--#{$button}--BackgroundColor);
272
273
  border: 0;
@@ -375,7 +376,6 @@
375
376
  display: inline;
376
377
  text-align: start;
377
378
  white-space: normal;
378
- cursor: pointer;
379
379
  outline-offset: #{pf-size-prem(2px)};
380
380
  }
381
381
 
@@ -508,7 +508,9 @@
508
508
  --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
509
509
 
510
510
  &.pf-m-no-padding {
511
+ min-width: auto;
511
512
  padding: 0;
513
+ background-color: transparent;
512
514
  }
513
515
 
514
516
  min-width: var(--#{$button}--m-plain--MinWidth);
package/components/Switch/switch.css CHANGED
@@ -1,37 +1,41 @@
1
+ :root,
1
2
  .pf-v5-c-switch {
2
- --pf-v5-c-switch--FontSize: var(--pf-v5-global--FontSize--md);
3
- --pf-v5-c-switch__label--PaddingLeft: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-switch--ColumnGap: var(--pf-v5-c-switch__label--PaddingLeft);
3
+ --pf-v5-c-switch--FontSize: var(--pf-t--global--font--size--sm);
4
+ --pf-v5-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
5
5
  --pf-v5-c-switch__toggle-icon--FontSize: calc(var(--pf-v5-c-switch--FontSize) * .625);
6
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
6
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7
7
  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
8
8
  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
9
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
10
- --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
9
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
10
+ --pf-v5-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
11
11
  --pf-v5-c-switch--Height: auto;
12
- --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
12
+ --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
13
13
  --pf-v5-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset));
14
- --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--dark-100);
15
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--disabled-color--100);
16
- --pf-v5-c-switch__input--disabled__label--Color: var(--pf-v5-global--disabled-color--100);
17
- --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--palette--black-150);
19
- --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-v5-global--BorderWidth--md);
20
- --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-v5-global--spacer--sm);
21
- --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-v5-global--primary-color--100);
14
+ --pf-v5-c-switch__input--checked__toggle--BorderWidth: 0;
15
+ --pf-v5-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
16
+ --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
17
+ --pf-v5-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
18
+ --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
19
+ --pf-v5-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
20
+ --pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
21
+ --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
22
+ --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
23
+ --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
24
+ --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
22
25
  --pf-v5-c-switch__toggle--Height: calc(var(--pf-v5-c-switch--FontSize) * var(--pf-v5-c-switch--LineHeight));
23
- --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-v5-global--palette--black-500);
24
- --pf-v5-c-switch__toggle--BorderRadius: var(--pf-v5-c-switch__toggle--Height);
26
+ --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
27
+ --pf-v5-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
28
+ --pf-v5-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
29
+ --pf-v5-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
25
30
  --pf-v5-c-switch__toggle--before--Width: calc(var(--pf-v5-c-switch--FontSize) - var(--pf-v5-c-switch__toggle-icon--Offset));
26
31
  --pf-v5-c-switch__toggle--before--Height: var(--pf-v5-c-switch__toggle--before--Width);
27
- --pf-v5-c-switch__toggle--before--Top: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
28
- --pf-v5-c-switch__toggle--before--Left: var(--pf-v5-c-switch__toggle--before--Top);
29
- --pf-v5-c-switch__toggle--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
30
- --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
31
- --pf-v5-c-switch__toggle--before--BoxShadow: var(--pf-v5-global--BoxShadow--md);
32
+ --pf-v5-c-switch__toggle--before--Left: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
33
+ --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
32
34
  --pf-v5-c-switch__toggle--before--Transition: transform .25s ease 0s;
33
35
  --pf-v5-c-switch__toggle--Width: calc(var(--pf-v5-c-switch__toggle--Height) + var(--pf-v5-c-switch__toggle-icon--Offset) + var(--pf-v5-c-switch__toggle--before--Width));
34
- --pf-v5-c-switch__label--Color: var(--pf-v5-global--Color--dark-100);
36
+ }
37
+
38
+ .pf-v5-c-switch {
35
39
  position: relative;
36
40
  display: inline-grid;
37
41
  grid-template-columns: auto;
@@ -64,13 +68,15 @@
64
68
  color: var(--pf-v5-c-switch__input--checked__label--Color);
65
69
  }
66
70
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
71
+ --pf-v5-c-switch__toggle--BorderWidth: var(--pf-v5-c-switch__input--checked__toggle--BorderWidth);
67
72
  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
68
73
  }
69
74
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
70
- transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
75
+ transform: translate(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX), -50%);
76
+ background-color: var(--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor);
71
77
  }
72
78
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
73
- transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
79
+ transform: translate(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), -50%);
74
80
  }
75
81
 
76
82
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
@@ -111,16 +117,23 @@
111
117
  }
112
118
  .pf-v5-c-switch__toggle::before {
113
119
  position: absolute;
114
- inset-block-start: var(--pf-v5-c-switch__toggle--before--Top);
120
+ inset-block-start: 50%;
115
121
  inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
116
122
  display: block;
117
123
  width: var(--pf-v5-c-switch__toggle--before--Width);
118
124
  height: var(--pf-v5-c-switch__toggle--before--Height);
119
125
  content: "";
120
- background-color: var(--pf-v5-c-switch__toggle--before--BackgroundColor);
126
+ background-color: var(--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor);
121
127
  border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
122
- box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
123
128
  transition: var(--pf-v5-c-switch__toggle--before--Transition);
129
+ transform: translateY(-50%);
130
+ }
131
+ .pf-v5-c-switch__toggle::after {
132
+ position: absolute;
133
+ inset: 0;
134
+ content: "";
135
+ border: var(--pf-v5-c-switch__toggle--BorderWidth) solid var(--pf-v5-c-switch__toggle--BorderColor);
136
+ border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
124
137
  }
125
138
 
126
139
  .pf-v5-c-switch__toggle-icon {
@@ -137,14 +150,5 @@
137
150
  .pf-v5-c-switch__label {
138
151
  display: inline-block;
139
152
  grid-column: 2;
140
- color: var(--pf-v5-c-switch__label--Color);
141
153
  vertical-align: top;
142
- }
143
-
144
- :where(.pf-v5-theme-dark) .pf-v5-c-switch {
145
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
146
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
147
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
148
- --pf-v5-c-switch__toggle--before--BoxShadow: none;
149
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
150
154
  }
package/components/Switch/switch.scss CHANGED
@@ -1,51 +1,52 @@
1
1
  // @debug $switch; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$switch} {
4
5
  // Switch - the vars for this file don't follow our normal order so that the IE11 script can convert the vars correctly
5
- --#{$switch}--FontSize: var(--#{$pf-global}--FontSize--md);
6
- --#{$switch}__label--PaddingLeft: var(--#{$pf-global}--spacer--md); // remove at breaking change
7
- --#{$switch}--ColumnGap: var(--#{$switch}__label--PaddingLeft); // update at breaking change
6
+ --#{$switch}--FontSize: var(--pf-t--global--font--size--sm);
7
+ --#{$switch}--ColumnGap: var(--pf-t--global--spacer--sm);
8
8
 
9
9
  // Switch icon
10
10
  --#{$switch}__toggle-icon--FontSize: calc(var(--#{$switch}--FontSize) * .625); // We don't use an icon font-size here because this value allows the icon to scale relative to the switch's font-size.
11
- --#{$switch}__toggle-icon--Color: var(--#{$pf-global}--Color--light-100);
11
+ --#{$switch}__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
12
12
  --#{$switch}__toggle-icon--Left: calc(var(--#{$switch}--FontSize) * .4);
13
13
  --#{$switch}__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.
14
- --#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--palette--black-150);
14
+ --#{$switch}__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
15
15
 
16
16
  // Switch
17
- --#{$switch}--LineHeight: var(--#{$pf-global}--LineHeight--md);
17
+ --#{$switch}--LineHeight: var(--pf-t--global--font--line-height--body);
18
18
  --#{$switch}--Height: auto;
19
19
 
20
20
  // Switch input
21
- --#{$switch}__input--checked__toggle--BackgroundColor: var(--#{$pf-global}--primary-color--100);
21
+ --#{$switch}__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
22
22
  --#{$switch}__input--checked__toggle--before--TranslateX: calc(100% + var(--#{$switch}__toggle-icon--Offset));
23
- --#{$switch}__input--checked__label--Color: var(--#{$pf-global}--Color--dark-100);
24
- --#{$switch}__input--not-checked__label--Color: var(--#{$pf-global}--disabled-color--100);
25
- --#{$switch}__input--disabled__label--Color: var(--#{$pf-global}--disabled-color--100);
26
- --#{$switch}__input--disabled__toggle--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
27
- --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--#{$pf-global}--palette--black-150);
28
- --#{$switch}__input--focus__toggle--OutlineWidth: var(--#{$pf-global}--BorderWidth--md);
29
- --#{$switch}__input--focus__toggle--OutlineOffset: var(--#{$pf-global}--spacer--sm);
30
- --#{$switch}__input--focus__toggle--OutlineColor: var(--#{$pf-global}--primary-color--100);
23
+ --#{$switch}__input--checked__toggle--BorderWidth: 0;
24
+ --#{$switch}__input--checked__label--Color: var(--pf-t--global--text--color--regular);
25
+ --#{$switch}__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
26
+ --#{$switch}__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
27
+ --#{$switch}__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
28
+ --#{$switch}__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
29
+ --#{$switch}__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
30
+ --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
31
+ --#{$switch}__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
32
+ --#{$switch}__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
33
+ --#{$switch}__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
31
34
 
32
35
  // Switch toggle
33
36
  --#{$switch}__toggle--Height: calc(var(--#{$switch}--FontSize) * var(--#{$switch}--LineHeight));
34
- --#{$switch}__toggle--BackgroundColor: var(--#{$pf-global}--palette--black-500);
35
- --#{$switch}__toggle--BorderRadius: var(--#{$switch}__toggle--Height);
37
+ --#{$switch}__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
38
+ --#{$switch}__toggle--BorderColor: var(--pf-t--global--border--color--default);
39
+ --#{$switch}__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
40
+ --#{$switch}__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
36
41
  --#{$switch}__toggle--before--Width: calc(var(--#{$switch}--FontSize) - var(--#{$switch}__toggle-icon--Offset));
37
42
  --#{$switch}__toggle--before--Height: var(--#{$switch}__toggle--before--Width);
38
- --#{$switch}__toggle--before--Top: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
39
- --#{$switch}__toggle--before--Left: var(--#{$switch}__toggle--before--Top);
40
- --#{$switch}__toggle--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
41
- --#{$switch}__toggle--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
42
- --#{$switch}__toggle--before--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
43
+ --#{$switch}__toggle--before--Left: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
44
+ --#{$switch}__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
43
45
  --#{$switch}__toggle--before--Transition: transform .25s ease 0s;
44
46
  --#{$switch}__toggle--Width: calc(var(--#{$switch}__toggle--Height) + var(--#{$switch}__toggle-icon--Offset) + var(--#{$switch}__toggle--before--Width));
47
+ }
45
48
 
46
- // Switch label
47
- --#{$switch}__label--Color: var(--#{$pf-global}--Color--dark-100);
48
-
49
+ .#{$switch} {
49
50
  position: relative;
50
51
  display: inline-grid;
51
52
  grid-template-columns: auto;
@@ -85,14 +86,18 @@
85
86
  }
86
87
 
87
88
  ~ .#{$switch}__toggle {
89
+ --#{$switch}__toggle--BorderWidth: var(--#{$switch}__input--checked__toggle--BorderWidth);
90
+
88
91
  background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
89
92
 
90
93
  &::before {
91
94
  @include pf-v5-bidirectional-style(
92
95
  $prop: transform,
93
- $ltr-val: translateX(var(--#{$switch}__input--checked__toggle--before--TranslateX)),
94
- $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))})
96
+ $ltr-val: translate(var(--#{$switch}__input--checked__toggle--before--TranslateX), -50%),
97
+ $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))}, -50%)
95
98
  );
99
+
100
+ background-color: var(--#{$switch}__input--checked__toggle--before--BackgroundColor);
96
101
  }
97
102
  }
98
103
 
@@ -148,24 +153,32 @@
148
153
 
149
154
  &::before {
150
155
  position: absolute;
151
- inset-block-start: var(--#{$switch}__toggle--before--Top);
152
- inset-inline-start: var(--#{$switch}__toggle--before--Left);
156
+ inset-block-start: 50%;
157
+ inset-inline-start: var(--#{$switch}__toggle--before--Left);
153
158
  display: block;
154
159
  width: var(--#{$switch}__toggle--before--Width);
155
160
  height: var(--#{$switch}__toggle--before--Height);
156
161
  content: "";
157
- background-color: var(--#{$switch}__toggle--before--BackgroundColor);
162
+ background-color: var(--#{$switch}__input--not-checked__toggle--before--BackgroundColor);
158
163
  border-radius: var(--#{$switch}__toggle--before--BorderRadius);
159
- box-shadow: var(--#{$switch}__toggle--before--BoxShadow);
160
164
  transition: var(--#{$switch}__toggle--before--Transition);
165
+ transform: translateY(-50%);
166
+ }
167
+
168
+ &::after {
169
+ position: absolute;
170
+ inset: 0;
171
+ content: "";
172
+ border: var(--#{$switch}__toggle--BorderWidth) solid var(--#{$switch}__toggle--BorderColor);
173
+ border-radius: var(--#{$switch}__toggle--BorderRadius);
161
174
  }
162
175
  }
163
176
 
164
177
  .#{$switch}__toggle-icon {
165
178
  position: absolute;
166
- inset-block-start: 0;
167
- inset-block-end: 0;
168
- inset-inline-start: var(--#{$switch}__toggle-icon--Left);
179
+ inset-block-start: 0;
180
+ inset-block-end: 0;
181
+ inset-inline-start: var(--#{$switch}__toggle-icon--Left);
169
182
  display: flex;
170
183
  align-items: center;
171
184
  font-size: var(--#{$switch}__toggle-icon--FontSize);
@@ -175,13 +188,5 @@
175
188
  .#{$switch}__label {
176
189
  display: inline-block;
177
190
  grid-column: 2;
178
- color: var(--#{$switch}__label--Color);
179
191
  vertical-align: top;
180
192
  }
181
-
182
- // stylelint-disable no-invalid-position-at-import-rule
183
- @import "themes/dark/switch";
184
-
185
- @include pf-v5-theme-dark {
186
- @include pf-v5-theme-dark-switch;
187
- }
package/docs/components/Button/examples/Button.md CHANGED
@@ -1439,7 +1439,34 @@ cssPrefix: pf-v5-c-button
1439
1439
  ### Inline link as span
1440
1440
 
1441
1441
  ```html
1442
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1442
+ <strong>Plain</strong>
1443
+ <br />
1444
+ <span
1445
+ class="pf-v5-c-button pf-m-plain"
1446
+ type="button"
1447
+ role="button"
1448
+ tabindex="0"
1449
+ aria-label="Remove"
1450
+ >
1451
+ <i class="fas fa-times" aria-hidden="true"></i>
1452
+ </span>
1453
+ <br />
1454
+ <br />
1455
+ <strong>Plain no padding</strong>
1456
+ <br />
1457
+ <span
1458
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
1459
+ type="button"
1460
+ role="button"
1461
+ tabindex="0"
1462
+ aria-label="Remove"
1463
+ >
1464
+ <i class="fas fa-times" aria-hidden="true"></i>
1465
+ </span>
1466
+ <br />
1467
+ <br />
1468
+ <strong>Inline link</strong>
1469
+ <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1443
1470
  <span
1444
1471
  class="pf-v5-c-button pf-m-link pf-m-inline"
1445
1472
  type="button"
@@ -1831,7 +1858,7 @@ Semantic buttons and links are important for usability as well as accessibility.
1831
1858
 
1832
1859
  | Class | Applied to | Outcome |
1833
1860
  | -- | -- | -- |
1834
- | `.pf-v5-c-button` | `<button>` | Initiates a button. Always use it with a modifier class. **Required** |
1861
+ | `.pf-v5-c-button` | `<button>, <span>` | Initiates a button. Always use it with a modifier class. **Required** |
1835
1862
  | `.pf-v5-c-button__icon` | `<span>` | Initiates a button icon. |
1836
1863
  | `.pf-v5-c-button__progress` | `<span>` | Initiates a button progress container. |
1837
1864
  | `.pf-v5-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.46",
4
+ "version": "6.0.0-alpha.47",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -8012,6 +8012,7 @@ button.pf-v5-c-breadcrumb__link {
8012
8012
  text-align: center;
8013
8013
  text-decoration: var(--pf-v5-c-button--TextDecoration);
8014
8014
  white-space: nowrap;
8015
+ cursor: pointer;
8015
8016
  user-select: none;
8016
8017
  background-color: var(--pf-v5-c-button--BackgroundColor);
8017
8018
  border: 0;
@@ -8109,7 +8110,6 @@ button.pf-v5-c-breadcrumb__link {
8109
8110
  display: inline;
8110
8111
  text-align: start;
8111
8112
  white-space: normal;
8112
- cursor: pointer;
8113
8113
  outline-offset: 0.125rem;
8114
8114
  }
8115
8115
  .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
@@ -8225,7 +8225,9 @@ button.pf-v5-c-breadcrumb__link {
8225
8225
  mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8226
8226
  }
8227
8227
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
8228
+ min-width: auto;
8228
8229
  padding: 0;
8230
+ background-color: transparent;
8229
8231
  }
8230
8232
  .pf-v5-c-button.pf-m-block {
8231
8233
  display: block;
@@ -25162,40 +25164,44 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25162
25164
  transform: rotate(720deg);
25163
25165
  }
25164
25166
  }
25167
+ :root,
25165
25168
  .pf-v5-c-switch {
25166
- --pf-v5-c-switch--FontSize: var(--pf-v5-global--FontSize--md);
25167
- --pf-v5-c-switch__label--PaddingLeft: var(--pf-v5-global--spacer--md);
25168
- --pf-v5-c-switch--ColumnGap: var(--pf-v5-c-switch__label--PaddingLeft);
25169
+ --pf-v5-c-switch--FontSize: var(--pf-t--global--font--size--sm);
25170
+ --pf-v5-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
25169
25171
  --pf-v5-c-switch__toggle-icon--FontSize: calc(var(--pf-v5-c-switch--FontSize) * .625);
25170
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
25172
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
25171
25173
  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
25172
25174
  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
25173
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
25174
- --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
25175
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
25176
+ --pf-v5-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
25175
25177
  --pf-v5-c-switch--Height: auto;
25176
- --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
25178
+ --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
25177
25179
  --pf-v5-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset));
25178
- --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--dark-100);
25179
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--disabled-color--100);
25180
- --pf-v5-c-switch__input--disabled__label--Color: var(--pf-v5-global--disabled-color--100);
25181
- --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-v5-global--disabled-color--200);
25182
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--palette--black-150);
25183
- --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-v5-global--BorderWidth--md);
25184
- --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-v5-global--spacer--sm);
25185
- --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-v5-global--primary-color--100);
25180
+ --pf-v5-c-switch__input--checked__toggle--BorderWidth: 0;
25181
+ --pf-v5-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
25182
+ --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
25183
+ --pf-v5-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
25184
+ --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
25185
+ --pf-v5-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
25186
+ --pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
25187
+ --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
25188
+ --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
25189
+ --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
25190
+ --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
25186
25191
  --pf-v5-c-switch__toggle--Height: calc(var(--pf-v5-c-switch--FontSize) * var(--pf-v5-c-switch--LineHeight));
25187
- --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-v5-global--palette--black-500);
25188
- --pf-v5-c-switch__toggle--BorderRadius: var(--pf-v5-c-switch__toggle--Height);
25192
+ --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
25193
+ --pf-v5-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
25194
+ --pf-v5-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
25195
+ --pf-v5-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
25189
25196
  --pf-v5-c-switch__toggle--before--Width: calc(var(--pf-v5-c-switch--FontSize) - var(--pf-v5-c-switch__toggle-icon--Offset));
25190
25197
  --pf-v5-c-switch__toggle--before--Height: var(--pf-v5-c-switch__toggle--before--Width);
25191
- --pf-v5-c-switch__toggle--before--Top: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
25192
- --pf-v5-c-switch__toggle--before--Left: var(--pf-v5-c-switch__toggle--before--Top);
25193
- --pf-v5-c-switch__toggle--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
25194
- --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
25195
- --pf-v5-c-switch__toggle--before--BoxShadow: var(--pf-v5-global--BoxShadow--md);
25198
+ --pf-v5-c-switch__toggle--before--Left: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
25199
+ --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
25196
25200
  --pf-v5-c-switch__toggle--before--Transition: transform .25s ease 0s;
25197
25201
  --pf-v5-c-switch__toggle--Width: calc(var(--pf-v5-c-switch__toggle--Height) + var(--pf-v5-c-switch__toggle-icon--Offset) + var(--pf-v5-c-switch__toggle--before--Width));
25198
- --pf-v5-c-switch__label--Color: var(--pf-v5-global--Color--dark-100);
25202
+ }
25203
+
25204
+ .pf-v5-c-switch {
25199
25205
  position: relative;
25200
25206
  display: inline-grid;
25201
25207
  grid-template-columns: auto;
@@ -25228,13 +25234,15 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25228
25234
  color: var(--pf-v5-c-switch__input--checked__label--Color);
25229
25235
  }
25230
25236
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
25237
+ --pf-v5-c-switch__toggle--BorderWidth: var(--pf-v5-c-switch__input--checked__toggle--BorderWidth);
25231
25238
  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
25232
25239
  }
25233
25240
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
25234
- transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
25241
+ transform: translate(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX), -50%);
25242
+ background-color: var(--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor);
25235
25243
  }
25236
25244
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
25237
- transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
25245
+ transform: translate(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), -50%);
25238
25246
  }
25239
25247
 
25240
25248
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
@@ -25275,16 +25283,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25275
25283
  }
25276
25284
  .pf-v5-c-switch__toggle::before {
25277
25285
  position: absolute;
25278
- inset-block-start: var(--pf-v5-c-switch__toggle--before--Top);
25286
+ inset-block-start: 50%;
25279
25287
  inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
25280
25288
  display: block;
25281
25289
  width: var(--pf-v5-c-switch__toggle--before--Width);
25282
25290
  height: var(--pf-v5-c-switch__toggle--before--Height);
25283
25291
  content: "";
25284
- background-color: var(--pf-v5-c-switch__toggle--before--BackgroundColor);
25292
+ background-color: var(--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor);
25285
25293
  border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
25286
- box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
25287
25294
  transition: var(--pf-v5-c-switch__toggle--before--Transition);
25295
+ transform: translateY(-50%);
25296
+ }
25297
+ .pf-v5-c-switch__toggle::after {
25298
+ position: absolute;
25299
+ inset: 0;
25300
+ content: "";
25301
+ border: var(--pf-v5-c-switch__toggle--BorderWidth) solid var(--pf-v5-c-switch__toggle--BorderColor);
25302
+ border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
25288
25303
  }
25289
25304
 
25290
25305
  .pf-v5-c-switch__toggle-icon {
@@ -25301,22 +25316,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25301
25316
  .pf-v5-c-switch__label {
25302
25317
  display: inline-block;
25303
25318
  grid-column: 2;
25304
- color: var(--pf-v5-c-switch__label--Color);
25305
25319
  vertical-align: top;
25306
25320
  }
25307
25321
 
25308
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
25309
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
25310
- }
25311
-
25312
- :where(.pf-v5-theme-dark) .pf-v5-c-switch {
25313
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
25314
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
25315
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
25316
- --pf-v5-c-switch__toggle--before--BoxShadow: none;
25317
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25318
- }
25319
-
25320
25322
  :root,
25321
25323
  .pf-v5-c-tab-content {
25322
25324
  --pf-v5-c-tab-content__body--PaddingTop: 0;