@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.
- package/base/patternfly-variables.css +49 -1
- package/base/tokens/tokens-charts-dark.scss +6 -2
- package/base/tokens/tokens-charts.scss +6 -2
- package/base/tokens/tokens-dark.scss +1 -1
- package/base/tokens/tokens-default.scss +50 -2
- package/base/tokens/tokens-palette.scss +1 -1
- package/components/Page/page.css +2 -1
- package/components/Page/page.scss +2 -1
- package/components/Toolbar/toolbar.css +108 -54
- package/components/Toolbar/toolbar.scss +2 -1
- package/components/Wizard/wizard.css +1 -21
- package/components/Wizard/wizard.scss +2 -27
- package/components/_index.css +111 -76
- package/docs/components/Toolbar/examples/Toolbar.md +6 -3
- package/docs/components/Wizard/examples/Wizard.md +115 -32
- package/docs/demos/Wizard/examples/Wizard.md +195 -54
- package/package.json +1 -1
- package/patternfly-base-no-globals.css +49 -1
- package/patternfly-base.css +49 -1
- package/patternfly-charts.css +10 -2
- package/patternfly-no-globals.css +160 -77
- package/patternfly.css +160 -77
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -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--
|
|
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--
|
|
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;
|