@patternfly/patternfly 6.0.0-alpha.100 → 6.0.0-alpha.101

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 (52) hide show
  1. package/components/Table/table-scrollable.css +12 -15
  2. package/components/Table/table-scrollable.scss +33 -30
  3. package/components/Table/table-tree-view.css +0 -2
  4. package/components/Table/table-tree-view.scss +9 -11
  5. package/components/Table/table.css +118 -55
  6. package/components/Table/table.scss +182 -100
  7. package/docs/components/Table/examples/Table.css +6 -8
  8. package/docs/components/Table/examples/Table.md +79 -92
  9. package/docs/demos/Table/examples/Table.md +28 -28
  10. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  11. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  12. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  13. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +24 -24
  14. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  15. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  16. package/docs/utilities/Display/examples/Display.css +8 -8
  17. package/docs/utilities/Display/examples/Display.md +7 -7
  18. package/docs/utilities/Flex/examples/Flex.css +5 -5
  19. package/docs/utilities/Flex/examples/Flex.md +82 -40
  20. package/docs/utilities/Float/examples/Float.css +2 -2
  21. package/docs/utilities/Float/examples/Float.md +6 -6
  22. package/docs/utilities/Sizing/examples/Sizing.css +4 -4
  23. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  24. package/docs/utilities/Spacing/examples/Spacing.css +1 -1
  25. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  26. package/docs/utilities/Text/examples/Text.md +53 -53
  27. package/package.json +1 -1
  28. package/patternfly-addons.css +91 -371
  29. package/patternfly-no-globals.css +130 -72
  30. package/patternfly-theme-dark-unversioned.css +130 -72
  31. package/patternfly.css +130 -72
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
  34. package/sass-utilities/mixins.scss +2 -2
  35. package/utilities/Alignment/alignment.css +24 -24
  36. package/utilities/Alignment/alignment.scss +4 -4
  37. package/utilities/BackgroundColor/BackgroundColor.css +0 -100
  38. package/utilities/BackgroundColor/BackgroundColor.scss +2 -8
  39. package/utilities/BoxShadow/box-shadow.css +15 -39
  40. package/utilities/BoxShadow/box-shadow.scss +17 -27
  41. package/utilities/Display/display.scss +2 -2
  42. package/utilities/Flex/flex.scss +18 -18
  43. package/utilities/Float/float.css +24 -24
  44. package/utilities/Float/float.scss +4 -4
  45. package/utilities/Sizing/sizing.css +28 -28
  46. package/utilities/Sizing/sizing.scss +17 -17
  47. package/utilities/Text/text.css +0 -155
  48. package/utilities/Text/text.scss +10 -16
  49. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  50. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  51. package/utilities/Text/themes/dark/text.css +0 -0
  52. package/utilities/Text/themes/dark/text.scss +0 -33
package/sass-utilities/mixins.scss CHANGED
@@ -151,8 +151,8 @@
151
151
 
152
152
  @mixin pf-v5-u-screen-reader {
153
153
  position: fixed;
154
- inset-block-start: 0;
155
- inset-inline-start: 0;
154
+ inset-block-start: 0;
155
+ inset-inline-start: 0;
156
156
  overflow: hidden;
157
157
  clip: rect(0, 0, 0, 0);
158
158
  white-space: nowrap;
package/utilities/Alignment/alignment.css CHANGED
@@ -1,13 +1,13 @@
1
- .pf-v6-u-text-align-left {
2
- text-align: left !important;
1
+ .pf-v6-u-text-align-start {
2
+ text-align: start !important;
3
3
  }
4
4
 
5
5
  .pf-v6-u-text-align-center {
6
6
  text-align: center !important;
7
7
  }
8
8
 
9
- .pf-v6-u-text-align-right {
10
- text-align: right !important;
9
+ .pf-v6-u-text-align-end {
10
+ text-align: end !important;
11
11
  }
12
12
 
13
13
  .pf-v6-u-text-align-justify {
@@ -15,70 +15,70 @@
15
15
  }
16
16
 
17
17
  @media screen and (min-width: 576px) {
18
- .pf-v6-u-text-align-left-on-sm {
19
- text-align: left !important;
18
+ .pf-v6-u-text-align-start-on-sm {
19
+ text-align: start !important;
20
20
  }
21
21
  .pf-v6-u-text-align-center-on-sm {
22
22
  text-align: center !important;
23
23
  }
24
- .pf-v6-u-text-align-right-on-sm {
25
- text-align: right !important;
24
+ .pf-v6-u-text-align-end-on-sm {
25
+ text-align: end !important;
26
26
  }
27
27
  .pf-v6-u-text-align-justify-on-sm {
28
28
  text-align: justify !important;
29
29
  }
30
30
  }
31
31
  @media screen and (min-width: 768px) {
32
- .pf-v6-u-text-align-left-on-md {
33
- text-align: left !important;
32
+ .pf-v6-u-text-align-start-on-md {
33
+ text-align: start !important;
34
34
  }
35
35
  .pf-v6-u-text-align-center-on-md {
36
36
  text-align: center !important;
37
37
  }
38
- .pf-v6-u-text-align-right-on-md {
39
- text-align: right !important;
38
+ .pf-v6-u-text-align-end-on-md {
39
+ text-align: end !important;
40
40
  }
41
41
  .pf-v6-u-text-align-justify-on-md {
42
42
  text-align: justify !important;
43
43
  }
44
44
  }
45
45
  @media screen and (min-width: 992px) {
46
- .pf-v6-u-text-align-left-on-lg {
47
- text-align: left !important;
46
+ .pf-v6-u-text-align-start-on-lg {
47
+ text-align: start !important;
48
48
  }
49
49
  .pf-v6-u-text-align-center-on-lg {
50
50
  text-align: center !important;
51
51
  }
52
- .pf-v6-u-text-align-right-on-lg {
53
- text-align: right !important;
52
+ .pf-v6-u-text-align-end-on-lg {
53
+ text-align: end !important;
54
54
  }
55
55
  .pf-v6-u-text-align-justify-on-lg {
56
56
  text-align: justify !important;
57
57
  }
58
58
  }
59
59
  @media screen and (min-width: 1200px) {
60
- .pf-v6-u-text-align-left-on-xl {
61
- text-align: left !important;
60
+ .pf-v6-u-text-align-start-on-xl {
61
+ text-align: start !important;
62
62
  }
63
63
  .pf-v6-u-text-align-center-on-xl {
64
64
  text-align: center !important;
65
65
  }
66
- .pf-v6-u-text-align-right-on-xl {
67
- text-align: right !important;
66
+ .pf-v6-u-text-align-end-on-xl {
67
+ text-align: end !important;
68
68
  }
69
69
  .pf-v6-u-text-align-justify-on-xl {
70
70
  text-align: justify !important;
71
71
  }
72
72
  }
73
73
  @media screen and (min-width: 1450px) {
74
- .pf-v6-u-text-align-left-on-2xl {
75
- text-align: left !important;
74
+ .pf-v6-u-text-align-start-on-2xl {
75
+ text-align: start !important;
76
76
  }
77
77
  .pf-v6-u-text-align-center-on-2xl {
78
78
  text-align: center !important;
79
79
  }
80
- .pf-v6-u-text-align-right-on-2xl {
81
- text-align: right !important;
80
+ .pf-v6-u-text-align-end-on-2xl {
81
+ text-align: end !important;
82
82
  }
83
83
  .pf-v6-u-text-align-justify-on-2xl {
84
84
  text-align: justify !important;
package/utilities/Alignment/alignment.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  // stylelint-disable
2
- $pf-v5-u-alignment-options: (
3
- text-align-left: (text-align left),
2
+ $pf-v6-u-alignment-options: (
3
+ text-align-start: (text-align start),
4
4
  text-align-center: (text-align center),
5
- text-align-right: (text-align right),
5
+ text-align-end: (text-align end),
6
6
  text-align-justify: (text-align justify)
7
7
  );
8
8
 
9
9
  // Text utilities
10
- @include pf-v5-utility-builder($pf-v5-u-alignment-options, $pf-v5-global--breakpoint-list);
10
+ @include pf-v5-utility-builder($pf-v6-u-alignment-options, $pf-v5-global--breakpoint-list);
11
11
 
12
12
  // stylelint-enable
package/utilities/BackgroundColor/BackgroundColor.css CHANGED
@@ -311,104 +311,4 @@
311
311
  .pf-v6-u-background-color-danger-on-2xl {
312
312
  background-color: var(--pf-v6-global--palette--red-50) !important;
313
313
  }
314
- }
315
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-default {
316
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
317
- }
318
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-success {
319
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
320
- }
321
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-info {
322
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
323
- }
324
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-warning {
325
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
326
- }
327
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-danger {
328
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
329
- }
330
- @media screen and (min-width: 576px) {
331
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-default-on-sm {
332
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
333
- }
334
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-success-on-sm {
335
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
336
- }
337
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-info-on-sm {
338
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
339
- }
340
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-warning-on-sm {
341
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
342
- }
343
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-danger-on-sm {
344
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
345
- }
346
- }
347
- @media screen and (min-width: 768px) {
348
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-default-on-md {
349
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
350
- }
351
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-success-on-md {
352
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
353
- }
354
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-info-on-md {
355
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
356
- }
357
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-warning-on-md {
358
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
359
- }
360
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-danger-on-md {
361
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
362
- }
363
- }
364
- @media screen and (min-width: 992px) {
365
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-default-on-lg {
366
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
367
- }
368
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-success-on-lg {
369
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
370
- }
371
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-info-on-lg {
372
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
373
- }
374
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-warning-on-lg {
375
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
376
- }
377
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-danger-on-lg {
378
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
379
- }
380
- }
381
- @media screen and (min-width: 1200px) {
382
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-default-on-xl {
383
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
384
- }
385
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-success-on-xl {
386
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
387
- }
388
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-info-on-xl {
389
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
390
- }
391
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-warning-on-xl {
392
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
393
- }
394
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-danger-on-xl {
395
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
396
- }
397
- }
398
- @media screen and (min-width: 1450px) {
399
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-default-on-2xl {
400
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
401
- }
402
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-success-on-2xl {
403
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
404
- }
405
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-info-on-2xl {
406
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
407
- }
408
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-warning-on-2xl {
409
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
410
- }
411
- :where(.pf-v6-theme-dark) .pf-v6-u-background-color-danger-on-2xl {
412
- background-color: var(--pf-v6-global--BackgroundColor--100) !important;
413
- }
414
314
  }
package/utilities/BackgroundColor/BackgroundColor.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // stylelint-disable
2
2
 
3
3
  // Background color options
4
- $pf-v5-u-background-color-options: (
4
+ $pf-v6-u-background-color-options: (
5
5
  background-color-100: (
6
6
  background-color var(--#{$pf-global}--BackgroundColor--100)
7
7
  ),
@@ -52,13 +52,7 @@ $pf-v5-u-background-color-options: (
52
52
  )
53
53
  );
54
54
 
55
- @include pf-v5-utility-builder($pf-v5-u-background-color-options, $pf-v5-global--breakpoint-list);
56
-
57
- @import "themes/dark/BackgroundColor";
58
-
59
- @include pf-v5-theme-dark {
60
- @include pf-v5-theme-dark-background-color;
61
- }
55
+ @include pf-v5-utility-builder($pf-v6-u-background-color-options, $pf-v5-global--breakpoint-list);
62
56
 
63
57
  // stylelint-enable
64
58
 
package/utilities/BoxShadow/box-shadow.css CHANGED
@@ -1,83 +1,59 @@
1
1
  .pf-v6-u-box-shadow-sm {
2
- box-shadow: var(--pf-v6-global--BoxShadow--sm) !important;
2
+ box-shadow: var(--pf-t--global--box-shadow--sm) !important;
3
3
  }
4
4
 
5
5
  .pf-v6-u-box-shadow-sm-top {
6
- box-shadow: var(--pf-v6-global--BoxShadow--sm-top) !important;
6
+ box-shadow: var(--pf-t--global--box-shadow--sm--top) !important;
7
7
  }
8
8
 
9
9
  .pf-v6-u-box-shadow-sm-right {
10
- box-shadow: var(--pf-v6-global--BoxShadow--sm-right) !important;
10
+ box-shadow: var(--pf-t--global--box-shadow--sm--right) !important;
11
11
  }
12
12
 
13
13
  .pf-v6-u-box-shadow-sm-bottom {
14
- box-shadow: var(--pf-v6-global--BoxShadow--sm-bottom) !important;
14
+ box-shadow: var(--pf-t--global--box-shadow--sm--bottom) !important;
15
15
  }
16
16
 
17
17
  .pf-v6-u-box-shadow-sm-left {
18
- box-shadow: var(--pf-v6-global--BoxShadow--sm-left) !important;
18
+ box-shadow: var(--pf-t--global--box-shadow--sm--left) !important;
19
19
  }
20
20
 
21
21
  .pf-v6-u-box-shadow-md {
22
- box-shadow: var(--pf-v6-global--BoxShadow--md) !important;
22
+ box-shadow: var(--pf-t--global--box-shadow--md) !important;
23
23
  }
24
24
 
25
25
  .pf-v6-u-box-shadow-md-top {
26
- box-shadow: var(--pf-v6-global--BoxShadow--md-top) !important;
26
+ box-shadow: var(--pf-t--global--box-shadow--md--top) !important;
27
27
  }
28
28
 
29
29
  .pf-v6-u-box-shadow-md-right {
30
- box-shadow: var(--pf-v6-global--BoxShadow--md-right) !important;
30
+ box-shadow: var(--pf-t--global--box-shadow--md--right) !important;
31
31
  }
32
32
 
33
33
  .pf-v6-u-box-shadow-md-bottom {
34
- box-shadow: var(--pf-v6-global--BoxShadow--md-bottom) !important;
34
+ box-shadow: var(--pf-t--global--box-shadow--md--bottom) !important;
35
35
  }
36
36
 
37
37
  .pf-v6-u-box-shadow-md-left {
38
- box-shadow: var(--pf-v6-global--BoxShadow--md-left) !important;
38
+ box-shadow: var(--pf-t--global--box-shadow--md--left) !important;
39
39
  }
40
40
 
41
41
  .pf-v6-u-box-shadow-lg {
42
- box-shadow: var(--pf-v6-global--BoxShadow--lg) !important;
42
+ box-shadow: var(--pf-t--global--box-shadow--lg) !important;
43
43
  }
44
44
 
45
45
  .pf-v6-u-box-shadow-lg-top {
46
- box-shadow: var(--pf-v6-global--BoxShadow--lg-top) !important;
46
+ box-shadow: var(--pf-t--global--box-shadow--lg--top) !important;
47
47
  }
48
48
 
49
49
  .pf-v6-u-box-shadow-lg-right {
50
- box-shadow: var(--pf-v6-global--BoxShadow--lg-right) !important;
50
+ box-shadow: var(--pf-t--global--box-shadow--lg--right) !important;
51
51
  }
52
52
 
53
53
  .pf-v6-u-box-shadow-lg-bottom {
54
- box-shadow: var(--pf-v6-global--BoxShadow--lg-bottom) !important;
54
+ box-shadow: var(--pf-t--global--box-shadow--lg--bottom) !important;
55
55
  }
56
56
 
57
57
  .pf-v6-u-box-shadow-lg-left {
58
- box-shadow: var(--pf-v6-global--BoxShadow--lg-left) !important;
59
- }
60
-
61
- .pf-v6-u-box-shadow-xl {
62
- box-shadow: var(--pf-v6-global--BoxShadow--xl) !important;
63
- }
64
-
65
- .pf-v6-u-box-shadow-xl-top {
66
- box-shadow: var(--pf-v6-global--BoxShadow--xl-top) !important;
67
- }
68
-
69
- .pf-v6-u-box-shadow-xl-right {
70
- box-shadow: var(--pf-v6-global--BoxShadow--xl-right) !important;
71
- }
72
-
73
- .pf-v6-u-box-shadow-xl-bottom {
74
- box-shadow: var(--pf-v6-global--BoxShadow--xl-bottom) !important;
75
- }
76
-
77
- .pf-v6-u-box-shadow-xl-left {
78
- box-shadow: var(--pf-v6-global--BoxShadow--xl-left) !important;
79
- }
80
-
81
- .pf-v6-u-box-shadow-inset {
82
- box-shadow: var(--pf-v6-global--BoxShadow--inset) !important;
58
+ box-shadow: var(--pf-t--global--box-shadow--lg--left) !important;
83
59
  }
package/utilities/BoxShadow/box-shadow.scss CHANGED
@@ -1,39 +1,29 @@
1
1
  // stylelint-disable
2
2
 
3
- $pf-v5-u-box-shadow-options: (
3
+ $pf-v6-u-box-shadow-options: (
4
4
  /* small */
5
- box-shadow-sm: (box-shadow var(--#{$pf-global}--BoxShadow--sm)),
6
- box-shadow-sm-top: (box-shadow var(--#{$pf-global}--BoxShadow--sm-top)),
7
- box-shadow-sm-right: (box-shadow var(--#{$pf-global}--BoxShadow--sm-right)),
8
- box-shadow-sm-bottom: (box-shadow var(--#{$pf-global}--BoxShadow--sm-bottom)),
9
- box-shadow-sm-left: (box-shadow var(--#{$pf-global}--BoxShadow--sm-left)),
5
+ box-shadow-sm: (box-shadow var(--pf-t--global--box-shadow--sm)),
6
+ box-shadow-sm-top: (box-shadow var(--pf-t--global--box-shadow--sm--top)),
7
+ box-shadow-sm-right: (box-shadow var(--pf-t--global--box-shadow--sm--right)),
8
+ box-shadow-sm-bottom: (box-shadow var(--pf-t--global--box-shadow--sm--bottom)),
9
+ box-shadow-sm-left: (box-shadow var(--pf-t--global--box-shadow--sm--left)),
10
10
 
11
11
  /* medium */
12
- box-shadow-md: (box-shadow var(--#{$pf-global}--BoxShadow--md)),
13
- box-shadow-md-top: (box-shadow var(--#{$pf-global}--BoxShadow--md-top)),
14
- box-shadow-md-right: (box-shadow var(--#{$pf-global}--BoxShadow--md-right)),
15
- box-shadow-md-bottom: (box-shadow var(--#{$pf-global}--BoxShadow--md-bottom)),
16
- box-shadow-md-left: (box-shadow var(--#{$pf-global}--BoxShadow--md-left)),
12
+ box-shadow-md: (box-shadow var(--pf-t--global--box-shadow--md)),
13
+ box-shadow-md-top: (box-shadow var(--pf-t--global--box-shadow--md--top)),
14
+ box-shadow-md-right: (box-shadow var(--pf-t--global--box-shadow--md--right)),
15
+ box-shadow-md-bottom: (box-shadow var(--pf-t--global--box-shadow--md--bottom)),
16
+ box-shadow-md-left: (box-shadow var(--pf-t--global--box-shadow--md--left)),
17
17
 
18
18
  /* large */
19
- box-shadow-lg: (box-shadow var(--#{$pf-global}--BoxShadow--lg)),
20
- box-shadow-lg-top: (box-shadow var(--#{$pf-global}--BoxShadow--lg-top)),
21
- box-shadow-lg-right: (box-shadow var(--#{$pf-global}--BoxShadow--lg-right)),
22
- box-shadow-lg-bottom: (box-shadow var(--#{$pf-global}--BoxShadow--lg-bottom)),
23
- box-shadow-lg-left: (box-shadow var(--#{$pf-global}--BoxShadow--lg-left)),
24
-
25
- /* x-large */
26
- box-shadow-xl: (box-shadow var(--#{$pf-global}--BoxShadow--xl)),
27
- box-shadow-xl-top: (box-shadow var(--#{$pf-global}--BoxShadow--xl-top)),
28
- box-shadow-xl-right: (box-shadow var(--#{$pf-global}--BoxShadow--xl-right)),
29
- box-shadow-xl-bottom: (box-shadow var(--#{$pf-global}--BoxShadow--xl-bottom)),
30
- box-shadow-xl-left: (box-shadow var(--#{$pf-global}--BoxShadow--xl-left)),
31
-
32
- /* inset */
33
- box-shadow-inset: (box-shadow var(--#{$pf-global}--BoxShadow--inset))
19
+ box-shadow-lg: (box-shadow var(--pf-t--global--box-shadow--lg)),
20
+ box-shadow-lg-top: (box-shadow var(--pf-t--global--box-shadow--lg--top)),
21
+ box-shadow-lg-right: (box-shadow var(--pf-t--global--box-shadow--lg--right)),
22
+ box-shadow-lg-bottom: (box-shadow var(--pf-t--global--box-shadow--lg--bottom)),
23
+ box-shadow-lg-left: (box-shadow var(--pf-t--global--box-shadow--lg--left)),
34
24
  );
35
25
 
36
26
  // Text utilities
37
- @include pf-v5-utility-builder($pf-v5-u-box-shadow-options);
27
+ @include pf-v5-utility-builder($pf-v6-u-box-shadow-options);
38
28
 
39
29
  // stylelint-enable
package/utilities/Display/display.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // stylelint-disable
2
2
 
3
3
  // Display options
4
- $pf-v5-u-display-options: (
4
+ $pf-v6-u-display-options: (
5
5
  display-none: (display none),
6
6
  display-inline-block: (display inline-block),
7
7
  display-block: (display block),
@@ -13,6 +13,6 @@ $pf-v5-u-display-options: (
13
13
  display-inline-flex: (display inline-flex)
14
14
  );
15
15
 
16
- @include pf-v5-utility-builder($pf-v5-u-display-options, $pf-v5-global--breakpoint-list);
16
+ @include pf-v5-utility-builder($pf-v6-u-display-options, $pf-v5-global--breakpoint-list);
17
17
 
18
18
  // stylelint-enable
package/utilities/Flex/flex.scss CHANGED
@@ -1,26 +1,26 @@
1
1
  // stylelint-disable
2
2
 
3
3
  // Flex direction options
4
- $pf-v5-u-flex-direction-options: (
4
+ $pf-v6-u-flex-direction-options: (
5
5
  flex-direction-column: (flex-direction column),
6
6
  flex-direction-column-reverse: (flex-direction column-reverse),
7
7
  flex-direction-row: (flex-direction row),
8
8
  flex-direction-row-reverse: (flex-direction row-reverse)
9
9
  );
10
10
 
11
- @include pf-v5-utility-builder($pf-v5-u-flex-direction-options, $pf-v5-global--breakpoint-list);
11
+ @include pf-v5-utility-builder($pf-v6-u-flex-direction-options, $pf-v5-global--breakpoint-list);
12
12
 
13
13
  // Flex wrap options
14
- $pf-v5-u-flex-wrap-options: (
14
+ $pf-v6-u-flex-wrap-options: (
15
15
  flex-wrap: (flex-wrap wrap),
16
16
  flex-nowrap: (flex-wrap nowrap),
17
17
  flex-wrap-reverse: (flex-wrap wrap-reverse)
18
18
  );
19
19
 
20
- @include pf-v5-utility-builder($pf-v5-u-flex-wrap-options, $pf-v5-global--breakpoint-list);
20
+ @include pf-v5-utility-builder($pf-v6-u-flex-wrap-options, $pf-v5-global--breakpoint-list);
21
21
 
22
22
  // Align item options
23
- $pf-v5-u-align-items-options: (
23
+ $pf-v6-u-align-items-options: (
24
24
  align-items-flex-start: (align-items flex-start),
25
25
  align-items-flex-end: (align-items flex-end),
26
26
  align-items-center: (align-items center),
@@ -28,10 +28,10 @@ $pf-v5-u-align-items-options: (
28
28
  align-items-stretch: (align-items stretch)
29
29
  );
30
30
 
31
- @include pf-v5-utility-builder($pf-v5-u-align-items-options, $pf-v5-global--breakpoint-list);
31
+ @include pf-v5-utility-builder($pf-v6-u-align-items-options, $pf-v5-global--breakpoint-list);
32
32
 
33
33
  // Align self options
34
- $pf-v5-u-align-self-options: (
34
+ $pf-v6-u-align-self-options: (
35
35
  align-self-flex-start: (align-self flex-start),
36
36
  align-self-flex-end: (align-self flex-end),
37
37
  align-self-center: (align-self center),
@@ -39,10 +39,10 @@ $pf-v5-u-align-self-options: (
39
39
  align-self-stretch: (align-self stretch)
40
40
  );
41
41
 
42
- @include pf-v5-utility-builder($pf-v5-u-align-self-options, $pf-v5-global--breakpoint-list);
42
+ @include pf-v5-utility-builder($pf-v6-u-align-self-options, $pf-v5-global--breakpoint-list);
43
43
 
44
44
  // Align content options
45
- $pf-v5-u-align-content-options: (
45
+ $pf-v6-u-align-content-options: (
46
46
  align-content-flex-start: (align-content flex-start),
47
47
  align-content-flex-end: (align-content flex-end),
48
48
  align-content-center: (align-content center),
@@ -51,10 +51,10 @@ $pf-v5-u-align-content-options: (
51
51
  align-content-stretch: (align-content stretch)
52
52
  );
53
53
 
54
- @include pf-v5-utility-builder($pf-v5-u-align-content-options, $pf-v5-global--breakpoint-list);
54
+ @include pf-v5-utility-builder($pf-v6-u-align-content-options, $pf-v5-global--breakpoint-list);
55
55
 
56
56
  // Justify content options
57
- $pf-v5-u-justify-content-options: (
57
+ $pf-v6-u-justify-content-options: (
58
58
  justify-content-flex-start: (justify-content flex-start),
59
59
  justify-content-flex-end: (justify-content flex-end),
60
60
  justify-content-center: (justify-content center),
@@ -63,33 +63,33 @@ $pf-v5-u-justify-content-options: (
63
63
  justify-content-stretch: (justify-content stretch)
64
64
  );
65
65
 
66
- @include pf-v5-utility-builder($pf-v5-u-justify-content-options, $pf-v5-global--breakpoint-list);
66
+ @include pf-v5-utility-builder($pf-v6-u-justify-content-options, $pf-v5-global--breakpoint-list);
67
67
 
68
68
  // Justify content options
69
- $pf-v5-u-flex-shrink-grow-options: (
69
+ $pf-v6-u-flex-shrink-grow-options: (
70
70
  flex-shrink-1: (flex-shrink 1),
71
71
  flex-grow-1: (flex-grow 1),
72
72
  flex-shrink-0: (flex-shrink 0),
73
73
  flex-grow-0: (flex-grow 0)
74
74
  );
75
75
 
76
- @include pf-v5-utility-builder($pf-v5-u-flex-shrink-grow-options, $pf-v5-global--breakpoint-list);
76
+ @include pf-v5-utility-builder($pf-v6-u-flex-shrink-grow-options, $pf-v5-global--breakpoint-list);
77
77
 
78
78
  // Flex basis options
79
- $pf-v5-u-flex-basis-options: (
79
+ $pf-v6-u-flex-basis-options: (
80
80
  flex-basis-0: (flex-basis 0),
81
81
  flex-basis-auto: (flex-basis auto)
82
82
  );
83
83
 
84
- @include pf-v5-utility-builder($pf-v5-u-flex-basis-options, $pf-v5-global--breakpoint-list);
84
+ @include pf-v5-utility-builder($pf-v6-u-flex-basis-options, $pf-v5-global--breakpoint-list);
85
85
 
86
86
  // Justify content options
87
- $pf-v5-u-flex-options: (
87
+ $pf-v6-u-flex-options: (
88
88
  flex-none: (flex none),
89
89
  flex-1: (flex 1)
90
90
  );
91
91
 
92
- @include pf-v5-utility-builder($pf-v5-u-flex-options, $pf-v5-global--breakpoint-list);
92
+ @include pf-v5-utility-builder($pf-v6-u-flex-options, $pf-v5-global--breakpoint-list);
93
93
 
94
94
  // Flex fill
95
95
  @include pf-v5-utility-builder(flex-fill flex "1 1 auto", $pf-v5-global--breakpoint-list);
package/utilities/Float/float.css CHANGED
@@ -1,48 +1,48 @@
1
- .pf-v6-u-float-left {
2
- float: left !important;
1
+ .pf-v6-u-float-inline-start {
2
+ float: inline-start !important;
3
3
  }
4
4
 
5
- .pf-v6-u-float-right {
6
- float: right !important;
5
+ .pf-v6-u-float-inline-end {
6
+ float: inline-end !important;
7
7
  }
8
8
 
9
9
  @media screen and (min-width: 576px) {
10
- .pf-v6-u-float-left-on-sm {
11
- float: left !important;
10
+ .pf-v6-u-float-inline-start-on-sm {
11
+ float: inline-start !important;
12
12
  }
13
- .pf-v6-u-float-right-on-sm {
14
- float: right !important;
13
+ .pf-v6-u-float-inline-end-on-sm {
14
+ float: inline-end !important;
15
15
  }
16
16
  }
17
17
  @media screen and (min-width: 768px) {
18
- .pf-v6-u-float-left-on-md {
19
- float: left !important;
18
+ .pf-v6-u-float-inline-start-on-md {
19
+ float: inline-start !important;
20
20
  }
21
- .pf-v6-u-float-right-on-md {
22
- float: right !important;
21
+ .pf-v6-u-float-inline-end-on-md {
22
+ float: inline-end !important;
23
23
  }
24
24
  }
25
25
  @media screen and (min-width: 992px) {
26
- .pf-v6-u-float-left-on-lg {
27
- float: left !important;
26
+ .pf-v6-u-float-inline-start-on-lg {
27
+ float: inline-start !important;
28
28
  }
29
- .pf-v6-u-float-right-on-lg {
30
- float: right !important;
29
+ .pf-v6-u-float-inline-end-on-lg {
30
+ float: inline-end !important;
31
31
  }
32
32
  }
33
33
  @media screen and (min-width: 1200px) {
34
- .pf-v6-u-float-left-on-xl {
35
- float: left !important;
34
+ .pf-v6-u-float-inline-start-on-xl {
35
+ float: inline-start !important;
36
36
  }
37
- .pf-v6-u-float-right-on-xl {
38
- float: right !important;
37
+ .pf-v6-u-float-inline-end-on-xl {
38
+ float: inline-end !important;
39
39
  }
40
40
  }
41
41
  @media screen and (min-width: 1450px) {
42
- .pf-v6-u-float-left-on-2xl {
43
- float: left !important;
42
+ .pf-v6-u-float-inline-start-on-2xl {
43
+ float: inline-start !important;
44
44
  }
45
- .pf-v6-u-float-right-on-2xl {
46
- float: right !important;
45
+ .pf-v6-u-float-inline-end-on-2xl {
46
+ float: inline-end !important;
47
47
  }
48
48
  }
package/utilities/Float/float.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  // stylelint-disable
2
2
 
3
- $pf-v5-u-alignment-options: (
4
- float-left: (float left),
5
- float-right: (float right)
3
+ $pf-v6-u-alignment-options: (
4
+ float-inline-start: (float inline-start),
5
+ float-inline-end: (float inline-end)
6
6
  );
7
7
 
8
8
  // Text utilities
9
- @include pf-v5-utility-builder($pf-v5-u-alignment-options, $pf-v5-global--breakpoint-list);
9
+ @include pf-v5-utility-builder($pf-v6-u-alignment-options, $pf-v5-global--breakpoint-list);
10
10
 
11
11
  // stylelint-enable