@patternfly/quickstarts 5.3.0-prerelease.1 → 6.0.0-alpha.1

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 (66) hide show
  1. package/dist/catalog/QuickStartTile.d.ts +0 -3
  2. package/dist/catalog/QuickStartTileHeader.d.ts +0 -12
  3. package/dist/catalog/index.d.ts +1 -1
  4. package/dist/index.es.js +64 -101
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.js +63 -103
  7. package/dist/index.js.map +1 -1
  8. package/dist/patternfly-global.css +773 -846
  9. package/dist/patternfly-nested.css +12814 -9632
  10. package/dist/quickstarts-base.css +155 -787
  11. package/dist/quickstarts-full.es.js +3689 -3599
  12. package/dist/quickstarts-full.es.js.map +1 -1
  13. package/dist/quickstarts-standalone.css +165 -546
  14. package/dist/quickstarts-standalone.min.css +8 -4
  15. package/dist/quickstarts-vendor.css +37 -134
  16. package/dist/quickstarts.css +192 -921
  17. package/dist/quickstarts.min.css +1 -1
  18. package/package.json +20 -19
  19. package/src/ConsoleInternal/components/_icon-and-text.scss +2 -2
  20. package/src/ConsoleInternal/components/catalog/_catalog.scss +20 -20
  21. package/src/ConsoleInternal/components/markdown-view.tsx +2 -2
  22. package/src/ConsoleInternal/components/utils/_status-box.scss +1 -1
  23. package/src/ConsoleShared/src/components/layout/PageLayout.scss +10 -10
  24. package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx +6 -4
  25. package/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx +2 -2
  26. package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx +5 -5
  27. package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx +8 -8
  28. package/src/ConsoleShared/src/components/markdown-extensions/showdown-extension.scss +5 -5
  29. package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx +1 -1
  30. package/src/ConsoleShared/src/components/spotlight/spotlight.scss +4 -4
  31. package/src/ConsoleShared/src/components/status/icons.tsx +6 -8
  32. package/src/HelpTopicDrawer.tsx +1 -1
  33. package/src/HelpTopicPanelContent.tsx +1 -1
  34. package/src/QuickStartCatalogPage.tsx +1 -8
  35. package/src/QuickStartController.tsx +1 -1
  36. package/src/QuickStartDrawer.scss +1 -1
  37. package/src/QuickStartDrawer.tsx +1 -1
  38. package/src/QuickStartMarkdownView.tsx +1 -1
  39. package/src/QuickStartPanelContent.scss +10 -10
  40. package/src/QuickStartPanelContent.tsx +1 -1
  41. package/src/catalog/QuickStartCatalog.scss +1 -1
  42. package/src/catalog/QuickStartTile.tsx +11 -20
  43. package/src/catalog/QuickStartTileDescription.scss +4 -4
  44. package/src/catalog/QuickStartTileHeader.scss +5 -9
  45. package/src/catalog/QuickStartTileHeader.tsx +4 -31
  46. package/src/catalog/Toolbar/QuickStartCatalogFilter.scss +9 -9
  47. package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx +1 -1
  48. package/src/catalog/index.ts +1 -1
  49. package/src/controller/QuickStartConclusion.tsx +1 -1
  50. package/src/controller/QuickStartContent.scss +2 -2
  51. package/src/controller/QuickStartFooter.scss +3 -3
  52. package/src/controller/QuickStartIntroduction.scss +7 -7
  53. package/src/controller/QuickStartIntroduction.tsx +1 -1
  54. package/src/controller/QuickStartTaskHeader.scss +15 -15
  55. package/src/controller/QuickStartTaskHeader.tsx +17 -17
  56. package/src/controller/QuickStartTaskHeaderList.scss +1 -1
  57. package/src/controller/QuickStartTaskHeaderList.tsx +1 -1
  58. package/src/controller/QuickStartTaskReview.scss +8 -8
  59. package/src/controller/QuickStartTasks.scss +14 -13
  60. package/src/styles/_base.scss +3 -6
  61. package/src/styles/_dark-custom-override.scss +16 -31
  62. package/src/styles/legacy-bootstrap/_variables.scss +8 -8
  63. package/src/styles/patternfly-global.scss +8 -8
  64. package/src/styles/patternfly-nested.scss +5 -5
  65. package/src/styles/style.scss +6 -6
  66. package/src/styles/vendor.scss +2 -2
@@ -1,298 +1,7 @@
1
- @charset "UTF-8";
2
- .pfext-quick-start__base {
3
- /**
4
- Patternfly React Extensions Partials
5
- */
6
- }
7
- .pfext-quick-start__base .pfext-quick-start-panel-content__body dl {
8
- margin: 0px;
9
- }
10
- .pfext-quick-start__base .pfext-quick-start-panel-content__body dt {
11
- font-weight: var(--pf-v5-global--FontWeight--bold);
12
- }
13
- .pfext-quick-start__base .pfext-quick-start-panel-content__body dd {
14
- margin-bottom: 20px;
15
- }
16
- .pfext-quick-start__base .pfext-quick-start-panel-content__body dd:last-child {
17
- margin-bottom: 0px;
18
- }
19
- .pfext-quick-start__base .pfext-quick-start-panel-content__body input[type=number] {
20
- -webkit-appearance: textfield;
21
- appearance: textfield;
22
- max-width: 100px;
23
- }
24
- .pfext-quick-start__base .pfext-quick-start-panel-content__body input[type=number]::-webkit-inner-spin-button, .pfext-quick-start__base .pfext-quick-start-panel-content__body input[type=number]::-webkit-outer-spin-button {
25
- -webkit-appearance: none;
26
- }
27
- .pfext-quick-start__base .pfext-quick-start-panel-content__body input[type=radio] {
28
- margin-right: 7px;
29
- }
30
- .pfext-quick-start__base .pfext-quick-start-panel-content__body .pf-v5-c-list {
31
- --pf-v5-c-list--PaddingLeft: 20px;
32
- }
33
- .pfext-quick-start__base .pfext-quick-start-panel-content__header,
34
- .pfext-quick-start__base .pfext-quick-start-panel-content__body,
35
- .pfext-quick-start__base .pfext-page-layout__content,
36
- .pfext-quick-start__base .pfext-popover__base {
37
- --pf-v5-global--FontSize--md: 14px;
38
- --pf-v5-global--FontSize--sm: 13px;
39
- }
40
- .pfext-quick-start__base .pfext-quick-start-panel-content__header ul,
41
- .pfext-quick-start__base .pfext-quick-start-panel-content__body ul,
42
- .pfext-quick-start__base .pfext-page-layout__content ul,
43
- .pfext-quick-start__base .pfext-popover__base ul {
44
- list-style-type: disc;
45
- }
46
- .pfext-quick-start__base .pfext-quick-start-panel-content__header input[type=radio],
47
- .pfext-quick-start__base .pfext-quick-start-panel-content__header input[type=checkbox],
48
- .pfext-quick-start__base .pfext-quick-start-panel-content__body input[type=radio],
49
- .pfext-quick-start__base .pfext-quick-start-panel-content__body input[type=checkbox],
50
- .pfext-quick-start__base .pfext-page-layout__content input[type=radio],
51
- .pfext-quick-start__base .pfext-page-layout__content input[type=checkbox],
52
- .pfext-quick-start__base .pfext-popover__base input[type=radio],
53
- .pfext-quick-start__base .pfext-popover__base input[type=checkbox] {
54
- margin-top: 1px !important;
55
- }
56
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-catalog-item-icon__img--large {
57
- filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
58
- }
59
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
60
- color: var(--pf-v5-global--Color--light-100);
61
- }
62
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-quick-start-task-header__subtitle {
63
- color: var(--pf-v5-global--palette--black-200) !important;
64
- }
65
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-quick-start-task-header__task-icon-init {
66
- background-color: var(--pf-v5-global--primary-color--300);
67
- }
68
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-quick-start-task-header__tryagain {
69
- color: var(--pf-v5-global--palette--black-200) !important;
70
- }
71
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-markdown-view pre:not(.pfext-code-block__pre) {
72
- background-color: var(--pf-v5-global--BackgroundColor--100);
73
- border-color: var(--pf-v5-global--BorderColor--100);
74
- }
75
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-markdown-view .pf-v5-c-code-block__code {
76
- color: var(--pf-v5-global--Color--100);
77
- background-color: var(--pf-v5-global--palette--black-600);
78
- }
79
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-markdown-view .pf-v5-c-code-block,
80
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-markdown-view .pf-v5-c-code-block code {
81
- background-color: var(--pf-v5-global--BackgroundColor--400);
82
- }
83
- .pfext-quick-start__base .pf-v5-theme-dark :where(.pfext-markdown-view) .pf-v5-c-clipboard-copy.pf-m-inline {
84
- --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
85
- }
86
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-page-layout__content {
87
- background-color: var(--pf-v5-global--BackgroundColor--200);
88
- }
89
- .pfext-quick-start__base .pf-v5-theme-dark .pfext-quick-start-catalog__gallery-item .pf-v5-c-card {
90
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
91
- }
92
- .pfext-quick-start__base .pf-v5-theme-dark .pf-v5-c-alert {
93
- --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--palette--black-700);
94
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-global--palette--black-700);
95
- --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--palette--black-700);
96
- --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--palette--black-700);
97
- --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--palette--black-700);
98
- --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--palette--black-700);
99
- }
100
- .pfext-quick-start__base .pfext-icon-and-text {
101
- align-items: baseline;
102
- display: flex;
103
- }
104
- .pf-v5-c-label__icon .pfext-quick-start__base .pfext-icon-and-text {
105
- display: block;
106
- }
107
- .pfext-quick-start__base .pfext-icon-and-text__icon {
108
- flex-shrink: 0;
109
- margin-right: 5px;
110
- }
111
- .pfext-quick-start__base .pfext-markdown-view.is-empty {
112
- color: #999;
113
- }
114
- .pfext-quick-start__base .pfext-markdown-view table {
115
- display: block;
116
- margin-bottom: 11.5px;
117
- overflow-x: auto;
118
- }
119
- .pfext-quick-start__base .pfext-markdown-view td,
120
- .pfext-quick-start__base .pfext-markdown-view th {
121
- border-bottom: 1px solid #ededed;
122
- padding: 10px;
123
- vertical-align: top;
124
- }
125
- .pfext-quick-start__base .pfext-markdown-view th {
126
- padding-top: 0;
127
- }
128
- .pfext-quick-start__base .catalog-tile-pf-body .catalog-tile-pf-subtitle {
129
- font-size: 13px;
130
- }
131
- .pfext-quick-start__base .pfext-catalog-item-icon__img--large {
132
- max-height: 40px;
133
- max-width: 40px;
134
- }
135
- .pfext-quick-start__base .pfext-status-box {
136
- padding: 40px 20px;
137
- }
138
- .pfext-quick-start__base .pfext-status-box__loading-message {
139
- margin-top: var(--pf-v5-global--spacer--sm);
140
- }
141
- .pfext-quick-start__base .pfext-status-box--loading {
142
- align-items: center;
143
- display: flex;
144
- height: 100%;
145
- justify-content: center;
146
- min-height: 50px;
147
- width: 100%;
148
- flex-direction: column;
149
- }
150
- .pfext-quick-start__base .pfext-m-loader {
151
- min-width: 18px;
152
- }
153
- .pfext-quick-start__base .pfext-m-loader-dot__one,
154
- .pfext-quick-start__base .pfext-m-loader-dot__two,
155
- .pfext-quick-start__base .pfext-m-loader-dot__three {
156
- animation-delay: 0;
157
- animation-direction: normal;
158
- animation-duration: 1s;
159
- animation-fill-mode: forwards;
160
- animation-iteration-count: infinite;
161
- animation-name: bouncedelay;
162
- animation-play-state: running;
163
- animation-timing-function: ease-in-out;
164
- background: #419eda;
165
- border-radius: 100%;
166
- display: inline-block;
167
- height: 6px;
168
- width: 6px;
169
- }
170
- .pfext-quick-start__base .pfext-m-loader-dot__one {
171
- animation-delay: -0.32s;
172
- }
173
- .pfext-quick-start__base .pfext-m-loader-dot__two {
174
- animation-delay: -0.16s;
175
- }
176
- @keyframes bouncedelay {
177
- 0%, 80%, 100% {
178
- transform: scale(0.25, 0.25);
179
- }
180
- 40% {
181
- transform: scale(1, 1);
182
- }
183
- }
184
- .pfext-quick-start__base .pfext-page-layout__content {
185
- padding: var(--pf-v5-global--spacer--lg);
186
- flex: 1;
187
- }
188
- .pfext-quick-start__base .pfext-page-layout__header {
189
- padding-top: 1px;
190
- background-color: var(--pf-v5-global--BackgroundColor--light-100);
191
- }
192
- .pfext-quick-start__base .pfext-page-layout__hint {
193
- padding-left: var(--pf-v5-global--spacer--lg);
194
- padding-right: var(--pf-v5-global--spacer--lg);
195
- padding-bottom: var(--pf-v5-global--spacer--md);
196
- font-size: 14px;
197
- }
198
- .pfext-quick-start__base .pfext-page-layout__title {
199
- padding-left: var(--pf-v5-global--spacer--lg);
200
- padding-right: var(--pf-v5-global--spacer--lg);
201
- font-size: var(--pf-v5-global--FontSize--2xl);
202
- margin-top: 23px;
203
- margin-bottom: 11.5px;
204
- font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
205
- font-weight: var(--pf-v5-global--FontWeight--normal);
206
- line-height: 1.1;
207
- }
208
- .pfext-quick-start__base .pfext-markdown-view .pfext-code-block__pre {
209
- /* override the styles applied by showdown while parsing <pre /> */
210
- display: flex;
211
- border: none;
212
- border-radius: none;
213
- background-color: transparent;
214
- margin: 0;
215
- padding: 0;
216
- }
217
- .pfext-quick-start__base .pfext-markdown-view .pfext-markdown-admonition.pf-v5-c-alert {
218
- margin: var(--pf-v5-global--spacer--md) 0;
219
- }
220
- .pfext-quick-start__base .pfext-markdown-view .pfext-markdown-admonition.pf-v5-c-alert .pf-v5-c-alert__title {
221
- margin-top: 0;
222
- margin-bottom: 0;
223
- font-weight: var(--pf-v5-c-alert__title--FontWeight);
224
- font-family: inherit;
225
- line-height: inherit;
226
- color: var(--pf-v5-c-alert__title--Color);
227
- word-break: break-word;
228
- }
229
- .pfext-quick-start__base .pfext-modal {
230
- position: absolute !important;
231
- }
232
- @keyframes pfext-spotlight-expand {
233
- 0% {
234
- outline-offset: -4px;
235
- outline-width: 4px;
236
- opacity: 1;
237
- }
238
- 100% {
239
- outline-offset: 21px;
240
- outline-width: 12px;
241
- opacity: 0;
242
- }
243
- }
244
- @keyframes pfext-spotlight-fade-in {
245
- 0% {
246
- opacity: 0;
247
- }
248
- 100% {
249
- opacity: 1;
250
- }
251
- }
252
- @keyframes pfext-spotlight-fade-out {
253
- 0% {
254
- opacity: 1;
255
- }
256
- 100% {
257
- opacity: 0;
258
- }
259
- }
260
- .pfext-quick-start__base .pfext-spotlight {
261
- pointer-events: none;
262
- position: absolute;
263
- }
264
- .pfext-quick-start__base .pfext-spotlight__with-backdrop {
265
- mix-blend-mode: hard-light;
266
- }
267
- .pfext-quick-start__base .pfext-spotlight__element-highlight-noanimate {
268
- border: var(--pf-v5-global--BorderWidth--xl) solid var(--pf-v5-global--palette--blue-200);
269
- background-color: var(--pf-v5-global--palette--black-500);
270
- z-index: 9999;
271
- }
272
- .pfext-quick-start__base .pfext-spotlight__element-highlight-animate {
273
- pointer-events: none;
274
- position: absolute;
275
- box-shadow: inset 0px 0px 0px 4px var(--pf-v5-global--palette--blue-200);
276
- opacity: 0;
277
- animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
278
- animation-fill-mode: forwards;
279
- }
280
- .pfext-quick-start__base .pfext-spotlight__element-highlight-animate::after {
281
- content: "";
282
- position: absolute;
283
- left: 0;
284
- right: 0;
285
- top: 0;
286
- bottom: 0;
287
- animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
288
- animation-fill-mode: forwards;
289
- outline: 4px solid var(--pf-v5-global--palette--blue-200);
290
- outline-offset: -4px;
291
- }
292
1
  .pfext-quick-start__base .pfext-markdown-view h1, .pfext-quick-start__base .pfext-markdown-view h2, .pfext-quick-start__base .pfext-markdown-view h3, .pfext-quick-start__base .pfext-markdown-view h4, .pfext-quick-start__base .pfext-markdown-view h5, .pfext-quick-start__base .pfext-markdown-view h6,
293
2
  .pfext-quick-start__base .pfext-markdown-view .h1, .pfext-quick-start__base .pfext-markdown-view .h2, .pfext-quick-start__base .pfext-markdown-view .h3, .pfext-quick-start__base .pfext-markdown-view .h4, .pfext-quick-start__base .pfext-markdown-view .h5, .pfext-quick-start__base .pfext-markdown-view .h6 {
294
- font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
295
- font-weight: var(--pf-v5-global--FontWeight--normal);
3
+ font-family: var(--pf-t--global--font--family--heading);
4
+ font-weight: var(--pf-t--global--font--weight--heading);
296
5
  line-height: 1.1;
297
6
  color: inherit;
298
7
  }
@@ -309,22 +18,22 @@
309
18
  margin-bottom: 11.5px;
310
19
  }
311
20
  .pfext-quick-start__base .pfext-markdown-view h1, .pfext-quick-start__base .pfext-markdown-view .h1 {
312
- font-size: var(--pf-v5-global--FontSize--2xl);
21
+ font-size: var(--pf-t--global--font--size--heading--h1);
313
22
  }
314
23
  .pfext-quick-start__base .pfext-markdown-view h2, .pfext-quick-start__base .pfext-markdown-view .h2 {
315
- font-size: 20px;
24
+ font-size: var(--pf-t--global--font--size--heading--h2);
316
25
  }
317
26
  .pfext-quick-start__base .pfext-markdown-view h3, .pfext-quick-start__base .pfext-markdown-view .h3 {
318
- font-size: var(--pf-v5-global--FontSize--lg);
27
+ font-size: var(--pf-t--global--font--size--heading--h3);
319
28
  }
320
29
  .pfext-quick-start__base .pfext-markdown-view h4, .pfext-quick-start__base .pfext-markdown-view .h4 {
321
- font-size: var(--pf-v5-global--FontSize--md);
30
+ font-size: var(--pf-t--global--font--size--heading--h4);
322
31
  }
323
32
  .pfext-quick-start__base .pfext-markdown-view h5, .pfext-quick-start__base .pfext-markdown-view .h5 {
324
- font-size: var(--pf-v5-global--FontSize--md);
33
+ font-size: var(--pf-t--global--font--size--heading--h5);
325
34
  }
326
35
  .pfext-quick-start__base .pfext-markdown-view h6, .pfext-quick-start__base .pfext-markdown-view .h6 {
327
- font-size: var(--pf-v5-global--FontSize--md);
36
+ font-size: var(--pf-t--global--font--size--heading--h6);
328
37
  }
329
38
  .pfext-quick-start__base .pfext-markdown-view p {
330
39
  margin: 0 0 11.5px;
@@ -409,29 +118,29 @@
409
118
  z-index: 0;
410
119
  position: relative;
411
120
  }
412
- .pfext-quick-start__base .pfext-quick-start-drawer__modal > .pf-v5-c-modal-box__footer {
121
+ .pfext-quick-start__base .pfext-quick-start-drawer__modal > .pf-v6-c-modal-box__footer {
413
122
  display: block;
414
123
  }
415
124
  .pfext-quick-start__base .pfext-quick-start-panel-content__header {
416
125
  position: sticky;
417
126
  top: 0px;
418
127
  background: inherit;
419
- z-index: var(--pf-v5-global--ZIndex--xs);
128
+ z-index: var(--pf-t--global--z-index--xs);
420
129
  }
421
130
  .pfext-quick-start__base .pfext-quick-start-panel-content__header__shadow {
422
- box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom);
131
+ box-shadow: var(--pf-t--global--box-shadow--sm--bottom);
423
132
  }
424
133
  .pfext-quick-start__base .pfext-quick-start-panel-content__header--blue-white {
425
- background-color: var(--pf-v5-global--palette--blue-400);
134
+ background-color: var(--pf-t--global--color--brand--default);
426
135
  }
427
136
  .pfext-quick-start__base .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title {
428
- color: var(--pf-v5-global--Color--light-100);
137
+ color: var(--pf-t--global--text--color--on-brand--default);
429
138
  }
430
139
  .pfext-quick-start__base .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
431
- color: var(--pf-v5-global--Color--light-200);
140
+ color: var(--pf-t--global--text--color--on-brand--default);
432
141
  }
433
142
  .pfext-quick-start__base .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button {
434
- color: var(--pf-v5-global--Color--light-100) !important;
143
+ color: var(--pf-t--global--text--color--on-brand--default) !important;
435
144
  }
436
145
  .pfext-quick-start__base .pfext-quick-start-panel-content__body {
437
146
  display: flex;
@@ -444,16 +153,16 @@
444
153
  }
445
154
  .pfext-quick-start__base .pfext-quick-start-panel-content__duration {
446
155
  display: inline-block;
447
- font-size: var(--pf-v5-global--FontSize--md);
448
- font-weight: 400;
156
+ font-size: var(--pf-t--global--font--size--body--default);
157
+ font-weight: var(--pf-t--global--font--weight--body);
449
158
  line-height: 1;
450
- color: #9c9c9c;
159
+ color: var(--pf-t--global--text--color--subtle);
451
160
  }
452
161
  .pfext-quick-start__base .pfext-quick-start-panel-content__footer__shadow {
453
- box-shadow: var(--pf-v5-global--BoxShadow--sm-top);
162
+ box-shadow: var(--pf-t--global--box-shadow--sm--top);
454
163
  }
455
164
  .pfext-quick-start__base .pfext-quick-start-catalog__gallery {
456
- --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
165
+ --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
457
166
  }
458
167
  .pfext-quick-start__base .pfext-quick-start-catalog__gallery-item {
459
168
  display: inherit !important;
@@ -481,32 +190,29 @@
481
190
  display: inline-flex;
482
191
  }
483
192
  .pfext-quick-start__base .pfext-quick-start-tile-prerequisites__text {
484
- margin-right: var(--pf-v5-global--spacer--sm);
485
- font-size: var(--pf-v5-global--FontSize--md);
193
+ margin-right: var(--pf-t--global--spacer--sm);
194
+ font-size: var(--pf-t--global--font--size--md);
486
195
  margin-top: 11.5px;
487
196
  margin-bottom: 11.5px;
488
- font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
489
- font-weight: var(--pf-v5-global--FontWeight--normal);
197
+ font-family: var(--pf-t--global--font--family--heading);
198
+ font-weight: var(--pf-t--global--font--weight--heading);
490
199
  line-height: 1.1;
491
200
  }
492
201
  .pfext-quick-start__base .pfext-quick-start-tile-prerequisites-list {
493
202
  padding-left: 20px;
494
203
  }
495
204
  .pfext-quick-start__base .pfext-quick-start-tile-header__status {
496
- margin: var(--pf-v5-global--spacer--sm) 0;
205
+ margin: var(--pf-t--global--spacer--sm) 0;
497
206
  }
498
207
  .pfext-quick-start__base .pfext-quick-start-tile-header--margin {
499
- margin-right: var(--pf-v5-global--spacer--sm);
500
- margin-bottom: var(--pf-v5-global--spacer--sm);
208
+ margin-right: var(--pf-t--global--spacer--sm);
209
+ margin-bottom: var(--pf-t--global--spacer--sm);
501
210
  }
502
- .pfext-quick-start__base .pfext-quick-start-tile-header .pf-v5-c-badge:not(:last-of-type) {
503
- margin-right: var(--pf-v5-global--spacer--sm);
504
- }
505
- .pfext-quick-start__base .pfext-quick-start-tile-header h3 {
506
- flex: 1;
211
+ .pfext-quick-start__base .pfext-quick-start-tile-header .pf-v6-c-badge:not(:last-of-type) {
212
+ margin-right: var(--pf-t--global--spacer--sm);
507
213
  }
508
214
  .pfext-quick-start__base .pfext-quick-start-catalog__gallery {
509
- --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
215
+ --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
510
216
  }
511
217
  .pfext-quick-start__base .pfext-quick-start-catalog__gallery-item {
512
218
  display: inherit !important;
@@ -534,84 +240,81 @@
534
240
  display: inline-flex;
535
241
  }
536
242
  .pfext-quick-start__base .pfext-quick-start-tile-prerequisites__text {
537
- margin-right: var(--pf-v5-global--spacer--sm);
538
- font-size: var(--pf-v5-global--FontSize--md);
243
+ margin-right: var(--pf-t--global--spacer--sm);
244
+ font-size: var(--pf-t--global--font--size--md);
539
245
  margin-top: 11.5px;
540
246
  margin-bottom: 11.5px;
541
- font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
542
- font-weight: var(--pf-v5-global--FontWeight--normal);
247
+ font-family: var(--pf-t--global--font--family--heading);
248
+ font-weight: var(--pf-t--global--font--weight--heading);
543
249
  line-height: 1.1;
544
250
  }
545
251
  .pfext-quick-start__base .pfext-quick-start-tile-prerequisites-list {
546
252
  padding-left: 20px;
547
253
  }
548
254
  .pfext-quick-start__base .pfext-quick-start-tile-header__status {
549
- margin: var(--pf-v5-global--spacer--sm) 0;
255
+ margin: var(--pf-t--global--spacer--sm) 0;
550
256
  }
551
257
  .pfext-quick-start__base .pfext-quick-start-tile-header--margin {
552
- margin-right: var(--pf-v5-global--spacer--sm);
553
- margin-bottom: var(--pf-v5-global--spacer--sm);
554
- }
555
- .pfext-quick-start__base .pfext-quick-start-tile-header .pf-v5-c-badge:not(:last-of-type) {
556
- margin-right: var(--pf-v5-global--spacer--sm);
258
+ margin-right: var(--pf-t--global--spacer--sm);
259
+ margin-bottom: var(--pf-t--global--spacer--sm);
557
260
  }
558
- .pfext-quick-start__base .pfext-quick-start-tile-header h3 {
559
- flex: 1;
261
+ .pfext-quick-start__base .pfext-quick-start-tile-header .pf-v6-c-badge:not(:last-of-type) {
262
+ margin-right: var(--pf-t--global--spacer--sm);
560
263
  }
561
264
  .pfext-quick-start__base .pfext-quick-start-catalog-filter__input {
562
265
  flex-grow: 1;
563
266
  max-width: 500px;
564
267
  }
565
268
  .pfext-quick-start__base .pfext-quick-start-catalog-filter__count {
566
- font-weight: var(--pf-v5-global--FontWeight--bold);
269
+ font-weight: var(--pf-t--global--font--weight--body--bold);
567
270
  }
568
- .pfext-quick-start__base .pf-v5-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
569
- --pf-v5-c-toolbar--PaddingBottom: var(--pf-v5-global--spacer--sm);
570
- --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--sm);
571
- --pf-v5-c-toolbar--RowGap: 0;
271
+ .pfext-quick-start__base .pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
272
+ --pf-v6-c-toolbar--PaddingBottom: var(--pf-t--global--spacer--sm);
273
+ --pf-v6-c-toolbar--PaddingTop: var(--pf-t--global--spacer--sm);
274
+ --pf-v6-c-toolbar--RowGap: 0;
572
275
  font-size: 14px;
573
276
  }
574
- .pfext-quick-start__base .pf-v5-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-v5-c-check {
575
- --pf-v5-c-check__label--FontSize: 14px;
277
+ .pfext-quick-start__base .pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-v6-c-check {
278
+ --pf-v6-c-check__label--FontSize: 14px;
576
279
  }
577
280
  .pfext-quick-start__base .pfext-quick-start-content {
578
281
  flex: 1 1 0;
579
282
  overflow: auto;
580
- padding: var(--pf-v5-global--spacer--lg);
283
+ padding: var(--pf-t--global--spacer--lg);
581
284
  font-size: 16px;
582
285
  }
583
- .pfext-quick-start__base .pfext-quick-start-content .pf-v5-c-alert__description p {
286
+ .pfext-quick-start__base .pfext-quick-start-content .pf-v6-c-alert__description p {
584
287
  font-size: 13px;
585
288
  }
586
289
  .pfext-quick-start__base .pfext-quick-start-footer {
587
- background-color: var(--pf-v5-global--BackgroundColor--100);
290
+ background-color: var(--pf-t--global--background--color--primary--default);
588
291
  flex: 0 0 auto;
589
- padding: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
292
+ padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg);
590
293
  }
591
294
  .pfext-quick-start__base .pfext-quick-start-footer__actionbtn {
592
- margin-right: var(--pf-v5-global--spacer--md);
295
+ margin-right: var(--pf-t--global--spacer--md);
593
296
  }
594
297
  .pfext-quick-start__base .pfext-quick-start-footer__restartbtn {
595
298
  float: right;
596
299
  }
597
300
  .pfext-quick-start__base .pfext-quick-start-intro__prereq {
598
- margin-bottom: var(--pf-v5-global--spacer--md);
301
+ margin-bottom: var(--pf-t--global--spacer--md);
599
302
  }
600
- .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__content {
601
- margin-top: var(--pf-v5-global--spacer--sm);
303
+ .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__content {
304
+ margin-top: var(--pf-t--global--spacer--sm);
602
305
  }
603
- .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle {
306
+ .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle {
604
307
  padding-top: 0;
605
308
  padding-bottom: 0;
606
309
  }
607
- .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-text {
608
- margin-left: var(--pf-v5-global--spacer--sm);
310
+ .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-text {
311
+ margin-left: var(--pf-t--global--spacer--sm);
609
312
  }
610
- .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon {
611
- color: var(--pf-v5-c-expandable-section__toggle--Color);
313
+ .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon {
314
+ color: var(--pf-v6-c-expandable-section__toggle--Color);
612
315
  }
613
- .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon:focus, .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon:hover {
614
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
316
+ .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon:focus, .pfext-quick-start__base .pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon:hover {
317
+ --pf-v6-c-expandable-section__toggle--Color: var(--pf-v6-c-expandable-section__toggle--focus--Color);
615
318
  }
616
319
  .pfext-quick-start__base .pfext-quick-start-intro__prereq-list {
617
320
  padding-left: 20px;
@@ -623,246 +326,162 @@
623
326
  position: relative;
624
327
  left: 2px;
625
328
  }
626
- .pfext-quick-start__base .pfext-quick-start-task-header {
627
- margin-bottom: var(--pf-v5-global--spacer--sm);
628
- display: grid;
629
- grid-template-columns: min-content auto;
630
- font-size: var(--pf-v5-global--FontSize--md);
631
- }
632
- .pfext-quick-start__base .pfext-quick-start-task-header button::before {
633
- content: none;
634
- }
635
329
  .pfext-quick-start__base .pfext-quick-start-task-header__title {
636
- color: var(--pf-v5-global--primary-color--100) !important;
637
- margin-right: var(--pf-v5-global--spacer--md) !important;
638
- }
639
- .pfext-quick-start__base .pfext-quick-start-task-header__subtitle {
640
- font-size: var(--pf-v5-global--FontSize--sm);
641
- color: var(--pf-v5-global--Color--dark-200) !important;
330
+ color: var(--pf-t--global--text--color--brand--default) !important;
331
+ margin-right: var(--pf-t--global--spacer--md) !important;
642
332
  }
643
333
  .pfext-quick-start__base .pfext-quick-start-task-header__tryagain {
644
334
  display: block;
645
- font-size: var(--pf-v5-global--FontSize--md);
646
- color: var(--pf-v5-global--Color--300) !important;
335
+ font-size: var(--pf-t--global--font--size--body--default);
336
+ color: var(--pf-t--global--text--color--subtle) !important;
647
337
  }
648
338
  .pfext-quick-start__base .pfext-quick-start-task-header__title-success {
649
- color: var(--pf-v5-global--success-color--100) !important;
339
+ color: var(--pf-t--global--text--color--status--success--default) !important;
650
340
  }
651
341
  .pfext-quick-start__base .pfext-quick-start-task-header__title-failed {
652
- color: var(--pf-v5-global--danger-color--100) !important;
653
- }
654
- .pfext-quick-start__base .pfext-quick-start-task-header__task-icon-init {
655
- background-color: var(--pf-v5-global--primary-color--100);
656
- border-radius: var(--pf-v5-global--BorderRadius--lg);
657
- color: var(--pf-v5-global--Color--light-100);
658
- display: inline-flex;
659
- justify-content: center;
660
- height: 1.5em;
661
- width: 1.5em;
662
- }
663
- .pfext-quick-start__base .pfext-quick-start-task-header__task-icon-success, .pfext-quick-start__base .pfext-quick-start-task-header__task-icon-failed {
664
- vertical-align: middle !important;
665
- }
666
- .pfext-quick-start__base .pfext-quick-start-task-header__task-icon-success {
667
- color: var(--pf-v5-global--success-color--100) !important;
668
- }
669
- .pfext-quick-start__base .pfext-quick-start-task-header__task-icon-failed {
670
- color: var(--pf-v5-global--danger-color--100) !important;
671
- }
672
- .pfext-quick-start__base .pfext-quick-start-task-header__list {
673
- padding: 0 !important;
674
- }
675
- .pfext-quick-start__base .pfext-quick-start-task-header__list button::before {
676
- content: none;
677
- }
678
- .pfext-quick-start__base .pfext-quick-start-task-header__list li {
679
- list-style-type: none;
680
- display: flex;
681
- flex-wrap: wrap;
682
- align-items: center;
683
- margin-bottom: var(--pf-v5-global--spacer--xs);
342
+ color: var(--pf-t--global--text--color--status--danger--default) !important;
684
343
  }
685
344
  .pfext-quick-start__base .pfext-quick-start-task-review-alert {
686
- margin: var(--pf-v5-global--spacer--lg) 0;
345
+ margin: var(--pf-t--global--spacer--lg) 0;
687
346
  }
688
347
  .pfext-quick-start__base .pfext-quick-start-task-review {
689
- font-size: var(--pf-v5-global--FontSize--md);
690
- line-height: var(--pf-v5-global--FontSize--xl);
691
- font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
348
+ font-size: var(--pf-t--global--font--size--md);
349
+ line-height: var(--pf-t--global--font--line-height--heading);
350
+ font-family: var(--pf-t--global--font--family--heading);
692
351
  }
693
352
  .pfext-quick-start__base .pfext-quick-start-task-review__actions {
694
353
  display: flex;
695
354
  align-items: flex-start;
696
- margin-bottom: var(--pf-v5-global--spacer--sm);
355
+ margin-bottom: var(--pf-t--global--spacer--sm);
697
356
  }
698
357
  .pfext-quick-start__base .pfext-quick-start-task-review__actions input[type=radio] {
699
358
  margin-top: 0;
700
359
  margin-right: 0;
701
360
  }
702
361
  .pfext-quick-start__base .pfext-quick-start-task-review__radio {
703
- margin-right: var(--pf-v5-global--spacer--xl) !important;
362
+ margin-right: var(--pf-t--global--spacer--xl) !important;
704
363
  }
705
364
  .pfext-quick-start__base .pfext-quick-start-task-review--success {
706
- color: var(--pf-v5-global--success-color--100) !important;
365
+ color: var(--pf-t--global--text--color--status--success--default) !important;
707
366
  }
708
367
  .pfext-quick-start__base .pfext-quick-start-task-review--failed {
709
- color: var(--pf-chart-global--danger--Color--100);
368
+ color: var(--pf-t--global--text--color--status--danger--default);
710
369
  }
711
370
  .pfext-quick-start__base .pfext-quick-start-tasks__list button::before {
712
371
  content: none;
713
372
  }
714
- .pfext-quick-start__base .pfext-quick-start-tasks__list li.pf-v5-c-wizard__nav-item {
373
+ .pfext-quick-start__base .pfext-quick-start-tasks__list li.pf-v6-c-wizard__nav-item {
715
374
  list-style-type: none;
716
375
  display: flex;
717
376
  flex-wrap: wrap;
718
377
  align-items: center;
719
- margin-bottom: var(--pf-v5-global--spacer--xs);
378
+ margin-bottom: var(--pf-t--global--spacer--xs);
720
379
  }
721
380
  .pfext-quick-start__base .pfext-quick-start-tasks__list .pfext-quick-start-task__content {
722
- margin-bottom: var(--pf-v5-global--spacer--md);
723
- }
724
- .pfext-quick-start__base :root {
725
- --vertical-tab-pf-color: var(--pf-v5-global--Color--100);
726
- --vertical-tab-pf-active-color: var(--pf-v5-global--active-color--100);
727
- }
728
- .pfext-quick-start__base .catalog-tile-pf.featured {
729
- border-top: 2px solid var(--pf-v5-global--active-color--100);
730
- }
731
- .pfext-quick-start__base .catalog-tile-pf:active, .pfext-quick-start__base .catalog-tile-pf:hover, .pfext-quick-start__base .catalog-tile-pf:focus, .pfext-quick-start__base .catalog-tile-pf:visited {
732
- color: inherit;
733
- text-decoration: none;
734
- }
735
- .pfext-quick-start__base .catalog-tile-pf .pf-v5-c-card__actions {
736
- padding-left: 5px;
737
- }
738
- .pfext-quick-start__base .catalog-tile-pf-header {
739
- font-size: 16px;
740
- font-weight: 400;
741
- padding-bottom: 16px;
742
- }
743
- .pfext-quick-start__base .catalog-tile-pf-header .catalog-tile-pf-title {
744
- font-size: 15px;
745
- font-weight: 400;
746
- }
747
- .pfext-quick-start__base .catalog-tile-pf-header .catalog-tile-pf-subtitle {
748
- color: var(--pf-v5-global--Color--200);
749
- font-size: 13px;
750
- font-weight: initial;
751
- }
752
- .pfext-quick-start__base .catalog-tile-pf-header .catalog-tile-pf-subtitle a,
753
- .pfext-quick-start__base .catalog-tile-pf-header .catalog-tile-pf-subtitle a:hover {
754
- text-decoration: none;
755
- }
756
- .pfext-quick-start__base .catalog-tile-pf-icon {
757
- font-size: 40px;
758
- height: 40px;
759
- max-width: 60px;
760
- min-width: 40px;
761
- }
762
- .pfext-quick-start__base .catalog-tile-pf-badge-container {
763
- display: flex;
764
- flex: 1;
765
- justify-content: flex-end;
766
- }
767
- .pfext-quick-start__base .catalog-tile-pf-description {
768
- margin-top: 0;
769
- }
770
- .pfext-quick-start__base .catalog-tile-pf-description span {
771
- display: -webkit-box;
772
- overflow: hidden;
773
- -webkit-box-orient: vertical;
774
- -webkit-line-clamp: 3;
775
- }
776
- .pfext-quick-start__base .catalog-tile-pf-description .has-footer {
777
- -webkit-line-clamp: 1;
778
- }
779
- .pfext-quick-start__base .pf-v5-c-clipboard-copy {
780
- --pf-v5-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
781
- --pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
782
- --pf-v5-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
783
- --pf-v5-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-v5-global--spacer--md);
784
- --pf-v5-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
785
- --pf-v5-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-v5-global--spacer--md);
786
- --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
787
- --pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
788
- --pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
789
- --pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
790
- --pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
791
- --pf-v5-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v5-global--BorderColor--100);
792
- --pf-v5-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
793
- --pf-v5-c-clipboard-copy--m-inline--PaddingTop: 0;
794
- --pf-v5-c-clipboard-copy--m-inline--PaddingBottom: 0;
795
- --pf-v5-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-v5-global--spacer--xs);
796
- --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
797
- --pf-v5-c-clipboard-copy__text--m-code--FontFamily: var(--pf-v5-global--FontFamily--monospace);
798
- --pf-v5-c-clipboard-copy__text--m-code--FontSize: var(--pf-v5-global--FontSize--sm);
799
- --pf-v5-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
800
- --pf-v5-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
801
- --pf-v5-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-v5-global--spacer--xs);
802
- --pf-v5-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-v5-global--spacer--sm);
803
- --pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-v5-global--spacer--xs);
804
- --pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-v5-global--spacer--sm);
805
- }
806
- .pfext-quick-start__base .pf-v5-c-clipboard-copy.pf-m-inline {
381
+ margin-bottom: var(--pf-t--global--spacer--md);
382
+ }
383
+ .pfext-quick-start__base :where(:root, .pf-v6-c-clipboard-copy) {
384
+ --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
385
+ --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
386
+ --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
387
+ --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
388
+ --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
389
+ --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
390
+ --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
391
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
392
+ --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
393
+ --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
394
+ --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
395
+ --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
396
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
397
+ --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
398
+ --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
399
+ --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
400
+ --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
401
+ --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
402
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
403
+ --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
404
+ --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
405
+ --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
406
+ --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
407
+ --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
408
+ --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
409
+ --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
410
+ --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
411
+ --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
412
+ }
413
+ .pfext-quick-start__base .pf-v6-c-clipboard-copy.pf-m-inline {
807
414
  display: inline;
808
- padding-top: var(--pf-v5-c-clipboard-copy--m-inline--PaddingTop);
809
- padding-bottom: var(--pf-v5-c-clipboard-copy--m-inline--PaddingBottom);
810
- padding-left: var(--pf-v5-c-clipboard-copy--m-inline--PaddingLeft);
415
+ padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
416
+ padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
417
+ padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
811
418
  white-space: nowrap;
812
- background-color: var(--pf-v5-c-clipboard-copy--m-inline--BackgroundColor);
419
+ background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
813
420
  }
814
- .pfext-quick-start__base .pf-v5-c-clipboard-copy.pf-m-inline.pf-m-block {
421
+ .pfext-quick-start__base .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block {
815
422
  display: block;
816
423
  }
817
- .pfext-quick-start__base .pf-v5-c-clipboard-copy__text {
424
+ .pfext-quick-start__base .pf-v6-c-clipboard-copy__text {
818
425
  word-break: break-word;
819
426
  white-space: normal;
820
427
  }
821
- .pfext-quick-start__base .pf-v5-c-clipboard-copy__actions {
428
+ .pfext-quick-start__base .pf-v6-c-clipboard-copy__actions {
822
429
  display: inline-flex;
823
430
  }
824
- .pfext-quick-start__base .pf-v5-c-clipboard-copy__actions-item {
825
- margin-top: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop));
826
- margin-bottom: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom));
827
- }
828
- .pfext-quick-start__base .pf-v5-c-clipboard-copy__actions-item .pf-v5-c-button {
829
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop);
830
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingRight);
831
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom);
832
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft);
833
- }
834
- .pfext-quick-start__base :where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy {
835
- --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
836
- }
837
- .pfext-quick-start__base .pf-v5-c-code-block {
838
- --pf-v5-c-code-block--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
839
- --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
840
- --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
841
- --pf-v5-c-code-block__content--PaddingTop: var(--pf-v5-global--spacer--md);
842
- --pf-v5-c-code-block__content--PaddingRight: var(--pf-v5-global--spacer--md);
843
- --pf-v5-c-code-block__content--PaddingBottom: var(--pf-v5-global--spacer--md);
844
- --pf-v5-c-code-block__content--PaddingLeft: var(--pf-v5-global--spacer--md);
845
- --pf-v5-c-code-block__pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
846
- --pf-v5-c-code-block__pre--FontSize: var(--pf-v5-global--FontSize--sm);
847
- background-color: var(--pf-v5-c-code-block--BackgroundColor);
848
- }
849
- .pfext-quick-start__base .pf-v5-c-code-block__header {
431
+ .pfext-quick-start__base .pf-v6-c-clipboard-copy__actions-item {
432
+ margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
433
+ margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
434
+ }
435
+ .pfext-quick-start__base .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
436
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
437
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
438
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
439
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
440
+ }
441
+ .pfext-quick-start__base :where(:root, .pf-v6-c-code-block) {
442
+ --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
443
+ --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
444
+ --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
445
+ --pf-v6-c-code-block__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
446
+ --pf-v6-c-code-block__header--PaddingBlockStart: var(--pf-t--global--spacer--xs);
447
+ --pf-v6-c-code-block__header--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
448
+ --pf-v6-c-code-block__header--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
449
+ --pf-v6-c-code-block__header--PaddingInlineStart: var(--pf-t--global--spacer--sm);
450
+ --pf-v6-c-code-block__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
451
+ --pf-v6-c-code-block__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
452
+ --pf-v6-c-code-block__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
453
+ --pf-v6-c-code-block__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
454
+ --pf-v6-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
455
+ --pf-v6-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
456
+ }
457
+ .pfext-quick-start__base .pf-v6-c-code-block {
458
+ background-color: var(--pf-v6-c-code-block--BackgroundColor);
459
+ border-radius: var(--pf-v6-c-code-block--BorderRadius);
460
+ }
461
+ .pfext-quick-start__base .pf-v6-c-code-block__header {
850
462
  display: flex;
851
- border-bottom: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
463
+ padding-block-start: var(--pf-v6-c-code-block__header--PaddingBlockStart);
464
+ padding-block-end: var(--pf-v6-c-code-block__header--PaddingBlockEnd);
465
+ padding-inline-start: var(--pf-v6-c-code-block__header--PaddingInlineStart);
466
+ padding-inline-end: var(--pf-v6-c-code-block__header--PaddingInlineEnd);
467
+ border-block-end: var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor);
852
468
  }
853
- .pfext-quick-start__base .pf-v5-c-code-block__actions {
469
+ .pfext-quick-start__base .pf-v6-c-code-block__actions {
854
470
  display: flex;
855
- margin-left: auto;
471
+ margin-inline-start: auto;
856
472
  }
857
- .pfext-quick-start__base .pf-v5-c-code-block__content {
858
- padding: var(--pf-v5-c-code-block__content--PaddingTop) var(--pf-v5-c-code-block__content--PaddingRight) var(--pf-v5-c-code-block__content--PaddingBottom) var(--pf-v5-c-code-block__content--PaddingLeft);
473
+ .pfext-quick-start__base .pf-v6-c-code-block__content {
474
+ padding-block-start: var(--pf-v6-c-code-block__content--PaddingBlockStart);
475
+ padding-block-end: var(--pf-v6-c-code-block__content--PaddingBlockEnd);
476
+ padding-inline-start: var(--pf-v6-c-code-block__content--PaddingInlineStart);
477
+ padding-inline-end: var(--pf-v6-c-code-block__content--PaddingInlineEnd);
859
478
  }
860
- .pfext-quick-start__base .pf-v5-c-code-block__pre {
861
- font-family: var(--pf-v5-c-code-block__pre--FontFamily);
862
- font-size: var(--pf-v5-c-code-block__pre--FontSize);
479
+ .pfext-quick-start__base .pf-v6-c-code-block__pre {
480
+ font-family: var(--pf-v6-c-code-block__pre--FontFamily);
481
+ font-size: var(--pf-v6-c-code-block__pre--FontSize);
863
482
  overflow-wrap: break-word;
864
483
  white-space: pre-wrap;
865
484
  }
866
- .pfext-quick-start__base .pf-v5-c-code-block__code {
867
- font-family: var(--pf-v5-c-code-block__code--FontFamily, inherit);
485
+ .pfext-quick-start__base .pf-v6-c-code-block__code {
486
+ font-family: var(--pf-v6-c-code-block__code--FontFamily, inherit);
868
487
  }