@patternfly/patternfly 5.2.0-prerelease.3 → 6.0.0-alpha.10

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 (97) hide show
  1. package/CODE_OF_CONDUCT.md +2 -1
  2. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  3. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  4. package/base/_globals.scss +13 -13
  5. package/base/_variables.scss +5 -0
  6. package/base/patternfly-globals.css +12 -13
  7. package/base/patternfly-variables.css +860 -0
  8. package/base/tokens/_tokens-dark.scss +331 -0
  9. package/base/tokens/_tokens-default.scss +379 -0
  10. package/base/tokens/_tokens-font.scss +96 -0
  11. package/base/tokens/_tokens-palette.scss +75 -0
  12. package/components/Alert/alert-group.css +20 -16
  13. package/components/Alert/alert-group.scss +20 -16
  14. package/components/Alert/alert.css +57 -84
  15. package/components/Alert/alert.scss +60 -78
  16. package/components/Button/button.css +142 -179
  17. package/components/Button/button.scss +161 -141
  18. package/components/Check/check.css +8 -10
  19. package/components/Check/check.scss +10 -15
  20. package/components/Content/content.css +67 -67
  21. package/components/Content/content.scss +68 -68
  22. package/components/Dropdown/dropdown.css +3 -1
  23. package/components/Dropdown/dropdown.scss +6 -2
  24. package/components/Masthead/masthead.css +49 -103
  25. package/components/Masthead/masthead.scss +105 -132
  26. package/components/Menu/menu.css +0 -3
  27. package/components/Menu/menu.scss +3 -7
  28. package/components/MenuToggle/menu-toggle.css +59 -80
  29. package/components/MenuToggle/menu-toggle.scss +65 -89
  30. package/components/Nav/nav.css +42 -40
  31. package/components/Nav/nav.scss +42 -42
  32. package/components/NotificationBadge/notification-badge.css +56 -81
  33. package/components/NotificationBadge/notification-badge.scss +60 -97
  34. package/components/Page/page.css +80 -70
  35. package/components/Page/page.scss +80 -68
  36. package/components/Radio/radio.css +10 -13
  37. package/components/Radio/radio.scss +11 -17
  38. package/components/Switch/switch.css +1 -1
  39. package/components/Switch/switch.scss +1 -1
  40. package/components/Table/table-grid.css +8 -8
  41. package/components/Table/table-grid.scss +8 -8
  42. package/components/Table/table.css +92 -95
  43. package/components/Table/table.scss +94 -103
  44. package/components/Toolbar/toolbar.css +5 -11
  45. package/components/Toolbar/toolbar.scss +7 -19
  46. package/docs/components/Alert/examples/Alert.md +1 -1
  47. package/docs/components/Brand/examples/Brand.md +32 -75
  48. package/docs/components/Card/examples/Card.md +2 -110
  49. package/docs/components/Masthead/examples/masthead.md +7 -54
  50. package/docs/components/MenuToggle/examples/MenuToggle.md +42 -42
  51. package/docs/components/Nav/examples/Navigation.css +2 -1
  52. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  53. package/docs/components/Toolbar/examples/Toolbar.md +9 -11
  54. package/docs/demos/AboutModal/examples/AboutModal.md +83 -8
  55. package/docs/demos/Alert/examples/Alert.md +249 -24
  56. package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
  57. package/docs/demos/Banner/examples/Banner.md +168 -16
  58. package/docs/demos/CardView/examples/CardView.md +83 -8
  59. package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
  60. package/docs/demos/Dashboard/examples/Dashboard.md +83 -8
  61. package/docs/demos/DataList/examples/DataList.md +332 -32
  62. package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
  63. package/docs/demos/Drawer/examples/Drawer.md +415 -40
  64. package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
  65. package/docs/demos/Masthead/examples/Masthead.md +742 -67
  66. package/docs/demos/Modal/examples/Modal.md +498 -48
  67. package/docs/demos/Nav/examples/Nav.md +664 -64
  68. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +415 -40
  69. package/docs/demos/Page/examples/Page.md +747 -72
  70. package/docs/demos/Page/examples/Penta.md +746 -0
  71. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +581 -56
  72. package/docs/demos/Skeleton/examples/Skeleton.md +83 -8
  73. package/docs/demos/Table/examples/Table.md +1245 -120
  74. package/docs/demos/Tabs/examples/Tabs.md +498 -48
  75. package/docs/demos/Toolbar/examples/Toolbar.md +166 -16
  76. package/docs/demos/Wizard/examples/Wizard.md +747 -72
  77. package/package.json +4 -3
  78. package/patternfly-base-no-globals-theme-dark-unversioned.css +860 -0
  79. package/patternfly-base-no-globals.css +860 -0
  80. package/patternfly-base-theme-dark-unversioned.css +872 -13
  81. package/patternfly-base.css +872 -13
  82. package/patternfly-no-globals.css +1609 -897
  83. package/patternfly-theme-dark-unversioned.css +1621 -910
  84. package/patternfly.css +1621 -910
  85. package/patternfly.min.css +1 -1
  86. package/patternfly.min.css.map +1 -1
  87. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  88. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  89. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  90. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  91. package/assets/images/pf_logo_white.hbs +0 -35
  92. package/assets/images/pf_logo_white.svg +0 -38
  93. package/components/Alert/themes/dark/alert.scss +0 -17
  94. package/components/Masthead/themes/dark/masthead.scss +0 -14
  95. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  96. package/docs/components/Brand/examples/Brand.css +0 -12
  97. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/components/Button/button.css CHANGED
@@ -1,173 +1,178 @@
1
1
  .pf-v5-c-button {
2
- --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
3
- --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
5
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md);
6
- --pf-v5-c-button--LineHeight: var(--pf-v5-global--LineHeight--md);
7
- --pf-v5-c-button--FontWeight: var(--pf-v5-global--FontWeight--normal);
8
- --pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--md);
2
+ --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
3
+ --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
4
+ --pf-v5-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
5
+ --pf-v5-c-button--PaddingLeft: var(--pf-t--global--spacer--lg);
6
+ --pf-v5-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
7
+ --pf-v5-c-button--FontWeight: var(--pf-t--global--font--weight--body);
8
+ --pf-v5-c-button--FontSize: var(--pf-t--global--font--size--body--md);
9
9
  --pf-v5-c-button--BackgroundColor: transparent;
10
- --pf-v5-c-button--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
11
- --pf-v5-c-button--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
10
+ --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
12
11
  --pf-v5-c-button--after--BorderColor: transparent;
13
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
14
- --pf-v5-c-button--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
15
- --pf-v5-c-button--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
16
- --pf-v5-c-button--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
17
- --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--100);
18
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
12
+ --pf-v5-c-button--after--BorderWidth: var(--pf-t--global--border--width--button--default);
13
+ --pf-v5-c-button--hover--after--BorderWidth: var(--pf-t--global--border--width--button--hover);
14
+ --pf-v5-c-button--focus--after--BorderWidth: var(--pf-t--global--border--width--button--active);
15
+ --pf-v5-c-button--active--after--BorderWidth: var(--pf-t--global--border--width--button--active);
16
+ --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--disabled--default);
17
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
19
18
  --pf-v5-c-button--disabled--after--BorderColor: transparent;
20
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
21
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--Color--light-100);
22
- --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
23
- --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--Color--light-100);
24
- --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
25
- --pf-v5-c-button--m-primary--focus--Color: var(--pf-v5-global--Color--light-100);
26
- --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
27
- --pf-v5-c-button--m-primary--active--Color: var(--pf-v5-global--Color--light-100);
19
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
20
+ --pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
21
+ --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
22
+ --pf-v5-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
23
+ --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-t--global--color--brand--active);
24
+ --pf-v5-c-button--m-primary--focus--Color: var(--pf-t--global--text--color--on-brand--active);
25
+ --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--active);
26
+ --pf-v5-c-button--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--active);
28
27
  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
29
- --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-v5-global--primary-color--100);
30
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100);
28
+ --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-t--global--border--color--brand--default);
29
+ --pf-v5-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
31
30
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
32
- --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-v5-global--primary-color--100);
33
- --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--primary-color--100);
31
+ --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-t--global--border--color--brand--hover);
32
+ --pf-v5-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
34
33
  --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
35
- --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-v5-global--primary-color--100);
36
- --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--primary-color--100);
34
+ --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-t--global--border--color--brand--active);
35
+ --pf-v5-c-button--m-secondary--focus--Color: var(--pf-t--global--text--color--brand--active);
37
36
  --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
38
- --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-v5-global--primary-color--100);
39
- --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--primary-color--100);
37
+ --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-t--global--border--color--brand--active);
38
+ --pf-v5-c-button--m-secondary--active--Color: var(--pf-t--global--text--color--brand--active);
40
39
  --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
41
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-global--danger-color--100);
42
- --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-v5-global--danger-color--100);
40
+ --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
41
+ --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
43
42
  --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
44
- --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
45
- --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-v5-global--danger-color--100);
43
+ --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
44
+ --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
46
45
  --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
47
- --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
48
- --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-v5-global--danger-color--100);
46
+ --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
47
+ --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
49
48
  --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
50
- --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
51
- --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-v5-global--danger-color--100);
49
+ --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
50
+ --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
52
51
  --pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
53
- --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--Color--100);
54
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--Color--100);
52
+ --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-t--global--border--color--default);
53
+ --pf-v5-c-button--m-tertiary--Color: var(--pf-t--global--text--color--regular);
55
54
  --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
56
- --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--Color--100);
57
- --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--Color--100);
55
+ --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
56
+ --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--regular);
58
57
  --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
59
- --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--Color--100);
60
- --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--Color--100);
58
+ --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-t--global--border--color--active);
59
+ --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-t--global--text--color--regular);
61
60
  --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
62
- --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--Color--100);
63
- --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--Color--100);
64
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-global--warning-color--100);
65
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--Color--dark-100);
66
- --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--palette--gold-500);
67
- --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--Color--dark-100);
68
- --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--palette--gold-500);
69
- --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--Color--dark-100);
70
- --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--palette--gold-500);
71
- --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--Color--dark-100);
72
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-global--danger-color--100);
73
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--Color--light-100);
74
- --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-global--danger-color--200);
75
- --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--Color--light-100);
76
- --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-v5-global--danger-color--200);
77
- --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--Color--light-100);
78
- --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-v5-global--danger-color--200);
79
- --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--Color--light-100);
61
+ --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-t--global--border--color--active);
62
+ --pf-v5-c-button--m-tertiary--active--Color: var(--pf-t--global--text--color--regular);
63
+ --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
64
+ --pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
65
+ --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
66
+ --pf-v5-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
67
+ --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-t--global--color--status--warning--active);
68
+ --pf-v5-c-button--m-warning--focus--Color: var(--pf-t--global--text--color--status--on-warning--hover);
69
+ --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-t--global--color--status--warning--active);
70
+ --pf-v5-c-button--m-warning--active--Color: var(--pf-t--global--text--color--status--on-warning--hover);
71
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
72
+ --pf-v5-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
73
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
74
+ --pf-v5-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
75
+ --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-t--global--color--status--danger--active);
76
+ --pf-v5-c-button--m-danger--focus--Color: var(--pf-t--global--text--color--status--on-danger--hover);
77
+ --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-t--global--color--status--danger--active);
78
+ --pf-v5-c-button--m-danger--active--Color: var(--pf-t--global--text--color--status--on-danger--hover);
80
79
  --pf-v5-c-button--m-link--BackgroundColor: transparent;
81
- --pf-v5-c-button--m-link--Color: var(--pf-v5-global--link--Color);
80
+ --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--link--default);
82
81
  --pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
83
- --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--link--Color--hover);
82
+ --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
84
83
  --pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
85
- --pf-v5-c-button--m-link--focus--Color: var(--pf-v5-global--link--Color--hover);
84
+ --pf-v5-c-button--m-link--focus--Color: var(--pf-t--global--text--color--link--hover);
86
85
  --pf-v5-c-button--m-link--active--BackgroundColor: transparent;
87
- --pf-v5-c-button--m-link--active--Color: var(--pf-v5-global--link--Color--hover);
86
+ --pf-v5-c-button--m-link--active--Color: var(--pf-t--global--text--color--link--hover);
88
87
  --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
89
- --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
88
+ --pf-v5-c-button--m-link--disabled--Color: var(--pf-t--global--text--color--disabled--light);
89
+ --pf-v5-c-button--m-link--not--m-inline--TextDecoration: none;
90
90
  --pf-v5-c-button--m-link--m-inline--FontSize: inherit;
91
- --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
92
- --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-global--link--Color--hover);
91
+ --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
92
+ --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--link--hover);
93
93
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
94
94
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
95
95
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
96
96
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
97
- --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-v5-global--spacer--xs);
98
- --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-v5-global--spacer--sm));
97
+ --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
98
+ --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
99
99
  --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
100
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-global--danger-color--100);
100
+ --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
101
101
  --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
102
- --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
102
+ --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
103
103
  --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
104
- --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
104
+ --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
105
105
  --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
106
- --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
107
- --pf-v5-c-button--m-plain--BackgroundColor: transparent;
108
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--Color--200);
109
- --pf-v5-c-button--m-plain--hover--BackgroundColor: transparent;
110
- --pf-v5-c-button--m-plain--hover--Color: var(--pf-v5-global--Color--100);
106
+ --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
107
+ --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
108
+ --pf-v5-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
109
+ --pf-v5-c-button--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
110
+ --pf-v5-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
111
+ --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
112
+ --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
113
+ --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
114
+ --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
115
+ --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
111
116
  --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
112
- --pf-v5-c-button--m-plain--focus--Color: var(--pf-v5-global--Color--100);
117
+ --pf-v5-c-button--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
113
118
  --pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
114
- --pf-v5-c-button--m-plain--active--Color: var(--pf-v5-global--Color--100);
115
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
119
+ --pf-v5-c-button--m-plain--active--Color: var(--pf-t--global--text--color--regular);
120
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
116
121
  --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
117
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
118
- --pf-v5-c-button--m-control--Color: var(--pf-v5-global--Color--100);
119
- --pf-v5-c-button--m-control--BorderRadius: 0;
120
- --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
121
- --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-v5-global--BorderColor--300);
122
- --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-v5-global--BorderColor--300);
123
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
124
- --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
125
- --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
126
- --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
127
- --pf-v5-c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
128
- --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
129
- --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
130
- --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
131
- --pf-v5-c-button--m-control--active--Color: var(--pf-v5-global--Color--100);
132
- --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
133
- --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
134
- --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
135
- --pf-v5-c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
136
- --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
137
- --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
138
- --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
139
- --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-v5-global--Color--100);
140
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
141
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
122
+ --pf-v5-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
123
+ --pf-v5-c-button--m-control--Color: var(--pf-t--global--text--color--subtle);
124
+ --pf-v5-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
125
+ --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
126
+ --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
127
+ --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
128
+ --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-t--global--border--color--default);
129
+ --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-t--global--border--color--default);
130
+ --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
131
+ --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
132
+ --pf-v5-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
133
+ --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
134
+ --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-t--global--background--color--secondary--hover);
135
+ --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
136
+ --pf-v5-c-button--m-control--active--Color: var(--pf-t--global--text--color--regular);
137
+ --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
138
+ --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-t--global--color--brand--active);
139
+ --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-t--global--background--color--brand--active);
140
+ --pf-v5-c-button--m-control--focus--Color: var(--pf-t--global--text--color--regular);
141
+ --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
142
+ --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
143
+ --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--default);
144
+ --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-t--global--text--color--inverse);
145
+ --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--200);
146
+ --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
142
147
  --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
143
- --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-v5-global--spacer--md);
144
- --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-v5-global--spacer--xl);
145
- --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-v5-global--spacer--md);
146
- --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-v5-global--spacer--xl);
147
- --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-v5-global--FontWeight--bold);
148
- --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-v5-global--FontSize--lg);
149
- --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-v5-global--spacer--xs);
150
- --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-v5-global--spacer--xs);
148
+ --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
149
+ --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
150
+ --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
151
+ --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-t--global--spacer--xl);
152
+ --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
153
+ --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
154
+ --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
155
+ --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
151
156
  --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
152
157
  --pf-v5-c-button__progress--Opacity: 0;
153
158
  --pf-v5-c-button__progress--TranslateY: -50%;
154
159
  --pf-v5-c-button__progress--TranslateX: 0;
155
160
  --pf-v5-c-button__progress--Top: 50%;
156
- --pf-v5-c-button__progress--Left: var(--pf-v5-global--spacer--md);
161
+ --pf-v5-c-button__progress--Left: var(--pf-t--global--spacer--md);
157
162
  --pf-v5-c-button--m-progress--TransitionProperty: padding;
158
163
  --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
159
- --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
160
- --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
161
- --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-v5-global--spacer--md);
162
- --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width));
163
- --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-global--primary-color--100);
164
+ --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
165
+ --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
166
+ --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
167
+ --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width));
168
+ --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--color--brand--default);
164
169
  --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
165
170
  --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
166
171
  --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
167
- --pf-v5-c-button--disabled__c-badge--Color: var(--pf-v5-global--Color--dark-100);
168
- --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
169
- --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--BorderColor--300);
170
- --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
172
+ --pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
173
+ --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
174
+ --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
175
+ --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--300);
171
176
  position: relative;
172
177
  display: inline-block;
173
178
  padding-block-start: var(--pf-v5-c-button--PaddingTop);
@@ -193,7 +198,7 @@
193
198
  content: "";
194
199
  border: var(--pf-v5-c-button--after--BorderWidth) solid;
195
200
  border-color: var(--pf-v5-c-button--after--BorderColor);
196
- border-radius: var(--pf-v5-c-button--after--BorderRadius);
201
+ border-radius: var(--pf-v5-c-button--BorderRadius);
197
202
  }
198
203
  .pf-v5-c-button:hover {
199
204
  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth);
@@ -231,10 +236,6 @@
231
236
  --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--focus--Color);
232
237
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--focus--BackgroundColor);
233
238
  }
234
- .pf-v5-c-button.pf-m-primary:active, .pf-v5-c-button.pf-m-primary.pf-m-active {
235
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--active--Color);
236
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--active--BackgroundColor);
237
- }
238
239
  .pf-v5-c-button.pf-m-primary .pf-v5-c-badge.pf-m-unread {
239
240
  border: var(--pf-v5-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v5-c-button--m-primary__c-badge--BorderColor);
240
241
  }
@@ -284,6 +285,9 @@
284
285
  color: var(--pf-v5-c-button--m-link--Color);
285
286
  background-color: var(--pf-v5-c-button--m-link--BackgroundColor);
286
287
  }
288
+ .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover, .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus, .pf-v5-c-button.pf-m-link:not(.pf-m-inline):active {
289
+ text-decoration: var(--pf-t--global--link--text-decoration--hover);
290
+ }
287
291
  .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover {
288
292
  --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--hover--Color);
289
293
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
@@ -310,7 +314,6 @@
310
314
  }
311
315
  .pf-v5-c-button.pf-m-link.pf-m-inline:hover {
312
316
  --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--m-inline--hover--Color);
313
- text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
314
317
  }
315
318
  .pf-v5-c-button.pf-m-link.pf-m-display-lg {
316
319
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
@@ -429,15 +432,20 @@
429
432
  .pf-v5-c-button.pf-m-plain {
430
433
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
431
434
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
435
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
436
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
437
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
438
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
439
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
432
440
  color: var(--pf-v5-c-button--m-plain--Color);
433
441
  background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
434
442
  }
435
443
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
436
444
  padding: 0;
437
445
  }
438
- .pf-v5-c-button.pf-m-plain:hover {
439
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
446
+ .pf-v5-c-button.pf-m-plain:hover, .pf-v5-c-button.pf-m-plain:focus, .pf-v5-c-button.pf-m-plain:active {
440
447
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
448
+ mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
441
449
  }
442
450
  .pf-v5-c-button.pf-m-plain:active, .pf-v5-c-button.pf-m-plain.pf-m-active {
443
451
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--active--Color);
@@ -510,49 +518,4 @@
510
518
  display: inline-flex;
511
519
  align-items: center;
512
520
  margin-inline-start: var(--pf-v5-c-button__count--MarginLeft);
513
- }
514
-
515
- :where(.pf-v5-theme-dark) .pf-v5-c-button {
516
- --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--300);
517
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
518
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--primary-color--400);
519
- --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--BorderColor--100);
520
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--palette--black-100);
521
- --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--BorderColor--100);
522
- --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--palette--black-100);
523
- --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--BorderColor--100);
524
- --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--palette--black-100);
525
- --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--BorderColor--100);
526
- --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--palette--black-100);
527
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--palette--black-900);
528
- --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--palette--black-900);
529
- --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--palette--black-900);
530
- --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--palette--black-900);
531
- --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--warning-color--200);
532
- --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--warning-color--200);
533
- --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--warning-color--200);
534
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--palette--black-900);
535
- --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--palette--black-900);
536
- --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--palette--black-900);
537
- --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--palette--black-900);
538
- --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
539
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
540
- --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
541
- --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
542
- --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
543
- --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
544
- --pf-v5-c-button--m-control--after--BorderTopColor: transparent;
545
- --pf-v5-c-button--m-control--after--BorderRightColor: transparent;
546
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
547
- --pf-v5-c-button--m-control--after--BorderLeftColor: transparent;
548
- --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
549
- --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
550
- --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
551
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
552
- --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
553
- --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--Color--100);
554
- }
555
- :where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-control:disabled::after {
556
- border: 0;
557
- border-block-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
558
521
  }