@patternfly/patternfly 6.0.0-alpha.134 → 6.0.0-alpha.136

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 (24) hide show
  1. package/base/patternfly-variables.css +49 -1
  2. package/base/tokens/tokens-charts-dark.scss +6 -2
  3. package/base/tokens/tokens-charts.scss +6 -2
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +50 -2
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Page/page.css +2 -1
  8. package/components/Page/page.scss +2 -1
  9. package/components/Toolbar/toolbar.css +108 -54
  10. package/components/Toolbar/toolbar.scss +2 -1
  11. package/components/Wizard/wizard.css +1 -21
  12. package/components/Wizard/wizard.scss +2 -27
  13. package/components/_index.css +111 -76
  14. package/docs/components/Toolbar/examples/Toolbar.md +6 -3
  15. package/docs/components/Wizard/examples/Wizard.md +115 -32
  16. package/docs/demos/Wizard/examples/Wizard.md +195 -54
  17. package/package.json +1 -1
  18. package/patternfly-base-no-globals.css +49 -1
  19. package/patternfly-base.css +49 -1
  20. package/patternfly-charts.css +10 -2
  21. package/patternfly-no-globals.css +160 -77
  22. package/patternfly.css +160 -77
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/patternfly-base-no-globals.css CHANGED
@@ -5013,13 +5013,30 @@
5013
5013
  --pf-t--color--gray--20: #e0e0e0;
5014
5014
  --pf-t--color--gray--10: #f2f2f2;
5015
5015
  --pf-t--color--white: #fff;
5016
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
5017
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
5018
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
5019
+ --pf-t--global--delay--400: 7000ms;
5020
+ --pf-t--global--delay--300: 100ms;
5021
+ --pf-t--global--delay--200: 50ms;
5022
+ --pf-t--global--delay--100: 0ms;
5023
+ --pf-t--global--duration--600: 600ms;
5024
+ --pf-t--global--duration--500: 500ms;
5025
+ --pf-t--global--duration--400: 400ms;
5026
+ --pf-t--global--duration--300: 300ms;
5027
+ --pf-t--global--duration--200: 200ms;
5028
+ --pf-t--global--duration--100: 100ms;
5029
+ --pf-t--global--duration--50: 50ms;
5016
5030
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
5017
5031
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
5018
5032
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
5019
5033
  --pf-t--global--breakpoint--600: 1450px;
5034
+ --pf-t--global--breakpoint--550: 1280px;
5020
5035
  --pf-t--global--breakpoint--500: 1200px;
5021
5036
  --pf-t--global--breakpoint--400: 992px;
5037
+ --pf-t--global--breakpoint--350: 960px;
5022
5038
  --pf-t--global--breakpoint--300: 768px;
5039
+ --pf-t--global--breakpoint--250: 640px;
5023
5040
  --pf-t--global--breakpoint--200: 576px;
5024
5041
  --pf-t--global--breakpoint--100: 0px;
5025
5042
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
@@ -5079,6 +5096,20 @@
5079
5096
  --pf-t--global--spacer--300: 16px;
5080
5097
  --pf-t--global--spacer--200: 8px;
5081
5098
  --pf-t--global--spacer--100: 4px;
5099
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
5100
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
5101
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
5102
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
5103
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
5104
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
5105
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
5106
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
5107
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
5108
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
5109
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
5110
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
5111
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
5112
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
5082
5113
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
5083
5114
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
5084
5115
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
@@ -5148,6 +5179,11 @@
5148
5179
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
5149
5180
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
5150
5181
  --pf-t--global--background--color--100: var(--pf-t--color--white);
5182
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
5183
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
5184
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
5185
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
5186
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
5151
5187
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
5152
5188
  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
5153
5189
  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
@@ -5229,10 +5265,10 @@
5229
5265
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
5230
5266
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
5231
5267
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
5232
- --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
5233
5268
  --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
5234
5269
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
5235
5270
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
5271
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
5236
5272
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
5237
5273
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
5238
5274
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -5262,6 +5298,18 @@
5262
5298
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
5263
5299
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
5264
5300
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
5301
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
5302
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
5303
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
5304
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
5305
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
5306
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
5307
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
5308
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
5309
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
5310
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
5311
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
5312
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
5265
5313
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5266
5314
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5267
5315
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/patternfly-base.css CHANGED
@@ -5130,13 +5130,30 @@ h6) {
5130
5130
  --pf-t--color--gray--20: #e0e0e0;
5131
5131
  --pf-t--color--gray--10: #f2f2f2;
5132
5132
  --pf-t--color--white: #fff;
5133
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
5134
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
5135
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
5136
+ --pf-t--global--delay--400: 7000ms;
5137
+ --pf-t--global--delay--300: 100ms;
5138
+ --pf-t--global--delay--200: 50ms;
5139
+ --pf-t--global--delay--100: 0ms;
5140
+ --pf-t--global--duration--600: 600ms;
5141
+ --pf-t--global--duration--500: 500ms;
5142
+ --pf-t--global--duration--400: 400ms;
5143
+ --pf-t--global--duration--300: 300ms;
5144
+ --pf-t--global--duration--200: 200ms;
5145
+ --pf-t--global--duration--100: 100ms;
5146
+ --pf-t--global--duration--50: 50ms;
5133
5147
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
5134
5148
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
5135
5149
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
5136
5150
  --pf-t--global--breakpoint--600: 1450px;
5151
+ --pf-t--global--breakpoint--550: 1280px;
5137
5152
  --pf-t--global--breakpoint--500: 1200px;
5138
5153
  --pf-t--global--breakpoint--400: 992px;
5154
+ --pf-t--global--breakpoint--350: 960px;
5139
5155
  --pf-t--global--breakpoint--300: 768px;
5156
+ --pf-t--global--breakpoint--250: 640px;
5140
5157
  --pf-t--global--breakpoint--200: 576px;
5141
5158
  --pf-t--global--breakpoint--100: 0px;
5142
5159
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
@@ -5196,6 +5213,20 @@ h6) {
5196
5213
  --pf-t--global--spacer--300: 16px;
5197
5214
  --pf-t--global--spacer--200: 8px;
5198
5215
  --pf-t--global--spacer--100: 4px;
5216
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
5217
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
5218
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
5219
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
5220
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
5221
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
5222
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
5223
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
5224
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
5225
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
5226
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
5227
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
5228
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
5229
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
5199
5230
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
5200
5231
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
5201
5232
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
@@ -5265,6 +5296,11 @@ h6) {
5265
5296
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
5266
5297
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
5267
5298
  --pf-t--global--background--color--100: var(--pf-t--color--white);
5299
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
5300
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
5301
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
5302
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
5303
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
5268
5304
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
5269
5305
  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
5270
5306
  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
@@ -5346,10 +5382,10 @@ h6) {
5346
5382
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
5347
5383
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
5348
5384
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
5349
- --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
5350
5385
  --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
5351
5386
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
5352
5387
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
5388
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
5353
5389
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
5354
5390
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
5355
5391
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -5379,6 +5415,18 @@ h6) {
5379
5415
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
5380
5416
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
5381
5417
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
5418
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
5419
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
5420
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
5421
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
5422
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
5423
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
5424
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
5425
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
5426
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
5427
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
5428
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
5429
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
5382
5430
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5383
5431
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5384
5432
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/patternfly-charts.css CHANGED
@@ -3,12 +3,16 @@
3
3
  }
4
4
 
5
5
  :where(:root) {
6
+ --pf-t--chart--global--stroke-line-join: round;
6
7
  --pf-t--chart--global--layout--width: 450;
7
8
  --pf-t--chart--global--layout--height: 300;
8
9
  --pf-t--chart--global--layout--padding: 50;
9
- --pf-t--chart--global--label--stroke--width: 0;
10
+ --pf-t--chart--global--label--text-anchor: middle;
11
+ --pf-t--chart--global--label--stroke: transparent;
10
12
  --pf-t--chart--global--label--margin: 8;
11
13
  --pf-t--chart--global--label--padding: 10;
14
+ --pf-t--chart--global--stroke-line-cap: round;
15
+ --pf-t--chart--global--letter-spacing: normal;
12
16
  --pf-t--chart--global--FontSize--2xl: 22;
13
17
  --pf-t--chart--global--FontSize--lg: 18;
14
18
  --pf-t--chart--global--FontSize--sm: 14;
@@ -169,12 +173,16 @@
169
173
  }
170
174
 
171
175
  :where(.pf-v6-theme-dark) {
176
+ --pf-t--chart--global--stroke-line-join: round;
172
177
  --pf-t--chart--global--layout--width: 450;
173
178
  --pf-t--chart--global--layout--height: 300;
174
179
  --pf-t--chart--global--layout--padding: 50;
175
- --pf-t--chart--global--label--stroke--width: 0;
180
+ --pf-t--chart--global--label--text-anchor: middle;
181
+ --pf-t--chart--global--label--stroke: transparent;
176
182
  --pf-t--chart--global--label--margin: 8;
177
183
  --pf-t--chart--global--label--padding: 10;
184
+ --pf-t--chart--global--stroke-line-cap: round;
185
+ --pf-t--chart--global--letter-spacing: normal;
178
186
  --pf-t--chart--global--FontSize--2xl: 22;
179
187
  --pf-t--chart--global--FontSize--lg: 18;
180
188
  --pf-t--chart--global--FontSize--sm: 14;