@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (123) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +1 -1
  3. package/css/assets/images/PF-Backdrop.svg +1 -0
  4. package/css/assets/images/PF-IconLogo-Reverse.svg +14 -0
  5. package/css/assets/images/PF-IconLogo.svg +17 -0
  6. package/css/assets/images/logo__pf--reverse-on-md.svg +1 -1
  7. package/css/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  8. package/css/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  9. package/css/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  10. package/css/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  11. package/css/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  12. package/css/assets/images/pf_logo_white.hbs +35 -0
  13. package/css/assets/images/pf_logo_white.svg +38 -0
  14. package/css/components/AboutModalBox/about-modal-box.css +59 -98
  15. package/css/components/AboutModalBox/about-modal-box.d.ts +1 -2
  16. package/css/components/AboutModalBox/about-modal-box.js +1 -2
  17. package/css/components/AboutModalBox/about-modal-box.mjs +1 -2
  18. package/css/components/Accordion/accordion.css +85 -177
  19. package/css/components/Accordion/accordion.d.ts +3 -2
  20. package/css/components/Accordion/accordion.js +3 -2
  21. package/css/components/Accordion/accordion.mjs +3 -2
  22. package/css/components/Alert/alert-group.css +20 -16
  23. package/css/components/Alert/alert.css +57 -84
  24. package/css/components/Alert/alert.d.ts +1 -2
  25. package/css/components/Alert/alert.js +1 -2
  26. package/css/components/Alert/alert.mjs +1 -2
  27. package/css/components/BackToTop/back-to-top.css +17 -15
  28. package/css/components/Badge/badge.css +23 -15
  29. package/css/components/Badge/badge.d.ts +2 -2
  30. package/css/components/Badge/badge.js +2 -2
  31. package/css/components/Badge/badge.mjs +2 -2
  32. package/css/components/Banner/banner.css +86 -64
  33. package/css/components/Banner/banner.d.ts +11 -4
  34. package/css/components/Banner/banner.js +11 -4
  35. package/css/components/Banner/banner.mjs +11 -4
  36. package/css/components/Button/button.css +142 -179
  37. package/css/components/Button/button.d.ts +1 -2
  38. package/css/components/Button/button.js +1 -2
  39. package/css/components/Button/button.mjs +1 -2
  40. package/css/components/Check/check.css +10 -8
  41. package/css/components/Content/content.css +67 -67
  42. package/css/components/Drawer/drawer.css +0 -1
  43. package/css/components/Dropdown/dropdown.css +1 -3
  44. package/css/components/Dropdown/dropdown.d.ts +0 -1
  45. package/css/components/Dropdown/dropdown.js +0 -1
  46. package/css/components/Dropdown/dropdown.mjs +0 -1
  47. package/css/components/ExpandableSection/expandable-section.css +64 -55
  48. package/css/components/ExpandableSection/expandable-section.d.ts +1 -3
  49. package/css/components/ExpandableSection/expandable-section.js +1 -3
  50. package/css/components/ExpandableSection/expandable-section.mjs +1 -3
  51. package/css/components/Hint/hint.css +28 -21
  52. package/css/components/Hint/hint.d.ts +1 -2
  53. package/css/components/Hint/hint.js +1 -2
  54. package/css/components/Hint/hint.mjs +1 -2
  55. package/css/components/List/list.css +16 -16
  56. package/css/components/Login/login.css +70 -97
  57. package/css/components/Login/login.d.ts +0 -2
  58. package/css/components/Login/login.js +0 -2
  59. package/css/components/Login/login.mjs +0 -2
  60. package/css/components/Masthead/masthead.css +49 -103
  61. package/css/components/Masthead/masthead.d.ts +1 -6
  62. package/css/components/Masthead/masthead.js +1 -6
  63. package/css/components/Masthead/masthead.mjs +1 -6
  64. package/css/components/Menu/menu.css +3 -0
  65. package/css/components/Menu/menu.d.ts +1 -0
  66. package/css/components/Menu/menu.js +1 -0
  67. package/css/components/Menu/menu.mjs +1 -0
  68. package/css/components/MenuToggle/menu-toggle.css +57 -80
  69. package/css/components/ModalBox/modal-box.css +59 -52
  70. package/css/components/ModalBox/modal-box.d.ts +1 -2
  71. package/css/components/ModalBox/modal-box.js +1 -2
  72. package/css/components/ModalBox/modal-box.mjs +1 -2
  73. package/css/components/Nav/nav.css +42 -40
  74. package/css/components/NotificationBadge/notification-badge.css +56 -81
  75. package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
  76. package/css/components/NotificationBadge/notification-badge.js +1 -5
  77. package/css/components/NotificationBadge/notification-badge.mjs +1 -5
  78. package/css/components/Page/page.css +112 -209
  79. package/css/components/Page/page.d.ts +5 -12
  80. package/css/components/Page/page.js +5 -12
  81. package/css/components/Page/page.mjs +5 -12
  82. package/css/components/Popover/popover.css +42 -51
  83. package/css/components/Popover/popover.d.ts +1 -2
  84. package/css/components/Popover/popover.js +1 -2
  85. package/css/components/Popover/popover.mjs +1 -2
  86. package/css/components/Radio/radio.css +13 -10
  87. package/css/components/SkipToContent/skip-to-content.css +6 -3
  88. package/css/components/Switch/switch.css +1 -1
  89. package/css/components/Table/table-grid.css +8 -8
  90. package/css/components/Table/table.css +85 -90
  91. package/css/components/Table/table.d.ts +2 -0
  92. package/css/components/Table/table.js +2 -0
  93. package/css/components/Table/table.mjs +2 -0
  94. package/css/components/Title/title.css +70 -19
  95. package/css/components/Title/title.d.ts +7 -1
  96. package/css/components/Title/title.js +7 -1
  97. package/css/components/Title/title.mjs +7 -1
  98. package/css/components/Toolbar/toolbar.css +13 -3
  99. package/css/components/Toolbar/toolbar.d.ts +1 -0
  100. package/css/components/Toolbar/toolbar.js +1 -0
  101. package/css/components/Toolbar/toolbar.mjs +1 -0
  102. package/css/components/Tooltip/tooltip.css +16 -16
  103. package/css/components/Tooltip/tooltip.d.ts +0 -1
  104. package/css/components/Tooltip/tooltip.js +0 -1
  105. package/css/components/Tooltip/tooltip.mjs +0 -1
  106. package/css/docs/components/Brand/examples/Brand.css +12 -0
  107. package/css/docs/components/Brand/examples/Brand.d.ts +10 -0
  108. package/css/docs/components/Brand/examples/Brand.js +11 -0
  109. package/css/docs/components/Brand/examples/Brand.mjs +9 -0
  110. package/css/docs/components/Nav/examples/Navigation.css +2 -1
  111. package/css/docs/components/Page/examples/Page.css +0 -8
  112. package/css/docs/components/Page/examples/Page.d.ts +0 -7
  113. package/css/docs/components/Page/examples/Page.js +0 -7
  114. package/css/docs/components/Page/examples/Page.mjs +0 -7
  115. package/css/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  116. package/css/docs/demos/Toolbar/examples/Toolbar.d.ts +6 -1
  117. package/css/docs/demos/Toolbar/examples/Toolbar.js +6 -1
  118. package/css/docs/demos/Toolbar/examples/Toolbar.mjs +6 -1
  119. package/package.json +3 -3
  120. package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
  121. package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
  122. package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
  123. package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
package/css/components/Popover/popover.css CHANGED
@@ -1,27 +1,24 @@
1
1
  .pf-v5-c-popover {
2
- --pf-v5-c-popover--FontSize: var(--pf-v5-global--FontSize--sm);
2
+ --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
3
3
  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
4
4
  --pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
5
- --pf-v5-c-popover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
6
- --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
7
- --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
8
- --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
9
- --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
10
- --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
11
- --pf-v5-c-popover--m-danger__title-text--Color: var(--pf-v5-global--danger-color--200);
12
- --pf-v5-c-popover--m-warning__title-text--Color: var(--pf-v5-global--warning-color--200);
13
- --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--200);
14
- --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--200);
15
- --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--300);
16
- --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
17
- --pf-v5-c-popover__content--PaddingTop: var(--pf-v5-global--spacer--md);
18
- --pf-v5-c-popover__content--PaddingRight: var(--pf-v5-global--spacer--md);
19
- --pf-v5-c-popover__content--PaddingBottom: var(--pf-v5-global--spacer--md);
20
- --pf-v5-c-popover__content--PaddingLeft: var(--pf-v5-global--spacer--md);
21
- --pf-v5-c-popover__arrow--Width: var(--pf-v5-global--arrow--width-lg);
22
- --pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
23
- --pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
24
- --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5
+ --pf-v5-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
6
+ --pf-v5-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
7
+ --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
8
+ --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
9
+ --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
10
+ --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
11
+ --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
12
+ --pf-v5-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13
+ --pf-v5-c-popover__content--PaddingTop: var(--pf-t--global--spacer--md);
14
+ --pf-v5-c-popover__content--PaddingRight: var(--pf-t--global--spacer--md);
15
+ --pf-v5-c-popover__content--PaddingBottom: var(--pf-t--global--spacer--md);
16
+ --pf-v5-c-popover__content--PaddingLeft: var(--pf-t--global--spacer--md);
17
+ --pf-v5-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
18
+ --pf-v5-c-popover__arrow--Width: 0.9375rem;
19
+ --pf-v5-c-popover__arrow--Height: 0.9375rem;
20
+ --pf-v5-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
21
+ --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
25
22
  --pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
26
23
  --pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
27
24
  --pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
@@ -34,21 +31,27 @@
34
31
  --pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
35
32
  --pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
36
33
  --pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
37
- --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - var(--pf-v5-global--spacer--form-element));
38
- --pf-v5-c-popover__close--Right: calc(var(--pf-v5-c-popover__content--PaddingRight) - var(--pf-v5-global--spacer--md));
39
- --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
40
- --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
41
- --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
42
- --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
43
- --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
44
- --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
45
- --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
46
- --pf-v5-c-popover__title-icon--FontSize: var(--pf-v5-global--FontSize--md);
47
- --pf-v5-c-popover__footer--MarginTop: var(--pf-v5-global--spacer--md);
34
+ --pf-v5-c-popover__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
35
+ --pf-v5-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
36
+ --pf-v5-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
37
+ --pf-v5-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
38
+ --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
39
+ --pf-v5-c-popover__close--Right: var(--pf-v5-c-popover__content--PaddingRight);
40
+ --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
41
+ --pf-v5-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
42
+ --pf-v5-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
43
+ --pf-v5-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
44
+ --pf-v5-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
45
+ --pf-v5-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
46
+ --pf-v5-c-popover__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
47
+ --pf-v5-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
48
+ --pf-v5-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
49
+ --pf-v5-c-popover__footer--MarginTop: var(--pf-t--global--spacer--md);
48
50
  position: relative;
49
51
  min-width: var(--pf-v5-c-popover--MinWidth);
50
52
  max-width: var(--pf-v5-c-popover--MaxWidth);
51
53
  font-size: var(--pf-v5-c-popover--FontSize);
54
+ border-radius: var(--pf-v5-c-popover--BorderRadius);
52
55
  box-shadow: var(--pf-v5-c-popover--BoxShadow);
53
56
  }
54
57
  .pf-v5-c-popover.pf-m-no-padding {
@@ -99,43 +102,38 @@
99
102
  }
100
103
  .pf-v5-c-popover:is(.pf-m-left-top,
101
104
  .pf-m-right-top) {
102
- --pf-v5-c-popover__arrow--Top: 0;
105
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover__arrow--m-inline-top--Top);
103
106
  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
104
107
  }
105
108
  .pf-v5-c-popover:is(.pf-m-left-bottom,
106
109
  .pf-m-right-bottom) {
107
110
  --pf-v5-c-popover__arrow--Top: auto;
108
- --pf-v5-c-popover__arrow--Bottom: 0;
111
+ --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover__arrow--m-inline-bottom--Bottom);
109
112
  }
110
113
  .pf-v5-c-popover:is(.pf-m-top-left,
111
114
  .pf-m-bottom-left) {
112
- --pf-v5-c-popover__arrow--Left: 0;
115
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover__arrow--m-block-left--Left);
113
116
  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
114
117
  }
115
118
  .pf-v5-c-popover:is(.pf-m-top-right,
116
119
  .pf-m-bottom-right) {
117
- --pf-v5-c-popover__arrow--Right: 0;
120
+ --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover__arrow--m-block-right--Right);
118
121
  --pf-v5-c-popover__arrow--Left: auto;
119
122
  }
120
123
  .pf-v5-c-popover.pf-m-danger {
121
124
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
122
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
123
125
  }
124
126
  .pf-v5-c-popover.pf-m-warning {
125
127
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
126
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
127
128
  }
128
129
  .pf-v5-c-popover.pf-m-success {
129
130
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
130
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
131
131
  }
132
132
  .pf-v5-c-popover.pf-m-custom {
133
133
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
134
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
135
134
  }
136
135
  .pf-v5-c-popover.pf-m-info {
137
136
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
138
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
139
137
  }
140
138
 
141
139
  .pf-v5-c-popover__content {
@@ -145,6 +143,7 @@
145
143
  padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
146
144
  padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
147
145
  background-color: var(--pf-v5-c-popover__content--BackgroundColor);
146
+ border-radius: var(--pf-v5-c-popover__content--BorderRadius);
148
147
  }
149
148
 
150
149
  .pf-v5-c-popover__close {
@@ -190,8 +189,8 @@
190
189
  .pf-v5-c-popover__title-text {
191
190
  font-family: var(--pf-v5-c-popover__title-text--FontFamily);
192
191
  font-size: var(--pf-v5-c-popover__title-text--FontSize);
193
- line-height: var(--pf-v5-c-popover__title-text--LineHeight);
194
- color: var(--pf-v5-c-popover__title-text--Color, inherit);
192
+ font-weight: var(--pf-v5-c-popover__title-text--FontWeight);
193
+ color: var(--pf-v5-c-popover__title-text--Color);
195
194
  }
196
195
 
197
196
  .pf-v5-c-popover__body {
@@ -200,12 +199,4 @@
200
199
 
201
200
  .pf-v5-c-popover__footer {
202
201
  margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
203
- }
204
-
205
- :where(.pf-v5-theme-dark) .pf-v5-c-popover {
206
- --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
207
- --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
208
- --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
209
- --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
210
- --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
211
202
  }
package/css/components/Popover/popover.d.ts CHANGED
@@ -30,7 +30,6 @@ declare const _default: {
30
30
  "popoverHeader": "pf-v5-c-popover__header",
31
31
  "popoverTitle": "pf-v5-c-popover__title",
32
32
  "popoverTitleIcon": "pf-v5-c-popover__title-icon",
33
- "popoverTitleText": "pf-v5-c-popover__title-text",
34
- "themeDark": "pf-v5-theme-dark"
33
+ "popoverTitleText": "pf-v5-c-popover__title-text"
35
34
  };
36
35
  export default _default;
package/css/components/Popover/popover.js CHANGED
@@ -32,6 +32,5 @@ exports.default = {
32
32
  "popoverHeader": "pf-v5-c-popover__header",
33
33
  "popoverTitle": "pf-v5-c-popover__title",
34
34
  "popoverTitleIcon": "pf-v5-c-popover__title-icon",
35
- "popoverTitleText": "pf-v5-c-popover__title-text",
36
- "themeDark": "pf-v5-theme-dark"
35
+ "popoverTitleText": "pf-v5-c-popover__title-text"
37
36
  };
package/css/components/Popover/popover.mjs CHANGED
@@ -30,6 +30,5 @@ export default {
30
30
  "popoverHeader": "pf-v5-c-popover__header",
31
31
  "popoverTitle": "pf-v5-c-popover__title",
32
32
  "popoverTitleIcon": "pf-v5-c-popover__title-icon",
33
- "popoverTitleText": "pf-v5-c-popover__title-text",
34
- "themeDark": "pf-v5-theme-dark"
33
+ "popoverTitleText": "pf-v5-c-popover__title-text"
35
34
  };
package/css/components/Radio/radio.css CHANGED
@@ -5,7 +5,8 @@
5
5
  --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
6
6
  --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
7
7
  --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
8
- --pf-v5-c-radio__input--TranslateY--moz: 5px;
8
+ --pf-v5-c-radio__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%);
9
+ --pf-v5-c-radio__input--TranslateY--moz: var(--pf-v5-c-radio__input--TranslateY);
9
10
  --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
10
11
  --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
11
12
  --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -18,19 +19,14 @@
18
19
  }
19
20
  .pf-v5-c-radio.pf-m-standalone {
20
21
  --pf-v5-c-radio--GridGap: 0;
21
- --pf-v5-c-radio__input--TranslateY--moz: 0;
22
- width: auto;
23
- }
24
-
25
- .pf-v5-c-radio__label {
26
- font-size: var(--pf-v5-c-radio__label--FontSize);
27
- font-weight: var(--pf-v5-c-radio__label--FontWeight);
28
- line-height: var(--pf-v5-c-radio__label--LineHeight);
29
- color: var(--pf-v5-c-radio__label--Color);
22
+ --pf-v5-c-radio__input--TranslateY: none;
23
+ display: inline-grid;
30
24
  }
31
25
 
32
26
  .pf-v5-c-radio__input {
27
+ align-self: start;
33
28
  -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
29
+ transform: translateY(var(--pf-v5-c-radio__input--TranslateY));
34
30
  }
35
31
  .pf-v5-c-radio__input:first-child {
36
32
  margin-inline-start: var(--pf-v5-c-radio__input--first-child--MarginLeft);
@@ -39,6 +35,13 @@
39
35
  margin-inline-end: var(--pf-v5-c-radio__input--last-child--MarginRight);
40
36
  }
41
37
 
38
+ .pf-v5-c-radio__label {
39
+ font-size: var(--pf-v5-c-radio__label--FontSize);
40
+ font-weight: var(--pf-v5-c-radio__label--FontWeight);
41
+ line-height: var(--pf-v5-c-radio__label--LineHeight);
42
+ color: var(--pf-v5-c-radio__label--Color);
43
+ }
44
+
42
45
  .pf-v5-c-radio__description {
43
46
  grid-column: 2;
44
47
  font-size: var(--pf-v5-c-radio__description--FontSize);
package/css/components/SkipToContent/skip-to-content.css CHANGED
@@ -1,7 +1,10 @@
1
- .pf-v5-c-skip-to-content {
2
- --pf-v5-c-skip-to-content--Top: var(--pf-v5-global--spacer--md);
1
+ :root {
2
+ --pf-v5-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
3
3
  --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
4
- --pf-v5-c-skip-to-content--focus--Left: var(--pf-v5-global--spacer--md);
4
+ --pf-v5-c-skip-to-content--focus--Left: var(--pf-t--global--spacer--md);
5
+ }
6
+
7
+ .pf-v5-c-skip-to-content {
5
8
  position: absolute;
6
9
  inset-block-start: var(--pf-v5-c-skip-to-content--Top);
7
10
  inset-inline-start: -300%;
package/css/components/Switch/switch.css CHANGED
@@ -56,7 +56,7 @@
56
56
  cursor: pointer;
57
57
  opacity: 0;
58
58
  }
59
- .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
59
+ .pf-v5-c-switch__input:focus-visible ~ .pf-v5-c-switch__toggle {
60
60
  outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor);
61
61
  outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset);
62
62
  }
package/css/components/Table/table-grid.css CHANGED
@@ -1,13 +1,13 @@
1
1
  .pf-v5-c-table[class*=pf-m-grid] {
2
- --pf-v5-c-table--responsive--BorderColor: var(--pf-v5-global--BorderColor--300);
3
- --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-v5-global--spacer--sm);
2
+ --pf-v5-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
3
+ --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
4
4
  --pf-v5-c-table__tbody--after--border-width--base: var(--pf-v5-global--BorderWidth--lg);
5
5
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
6
- --pf-v5-c-table__tbody--after--BorderColor: var(--pf-v5-global--active-color--100);
7
- --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-v5-global--spacer--sm);
6
+ --pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
7
+ --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
8
8
  --pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
9
9
  --pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-v5-global--spacer--md);
10
- --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-v5-global--spacer--sm);
10
+ --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
11
11
  --pf-v5-c-table__tr--responsive--PaddingTop: var(--pf-v5-global--spacer--md);
12
12
  --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-v5-global--spacer--lg);
13
13
  --pf-v5-c-table__tr--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -23,7 +23,7 @@
23
23
  --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
24
24
  --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-v5-global--active-color--400);
25
25
  --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
26
- --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-v5-global--active-color--100);
26
+ --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
27
27
  --pf-v5-c-table--m-grid--cell--hidden-visible--Display: grid;
28
28
  --pf-v5-c-table--m-grid--cell--PaddingTop: 0;
29
29
  --pf-v5-c-table--m-grid--cell--PaddingRight: 0;
@@ -47,8 +47,8 @@
47
47
  --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-v5-global--spacer--lg);
48
48
  --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
49
49
  --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
50
- --pf-v5-c-table__expandable-row-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
51
- --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-v5-global--spacer--sm);
50
+ --pf-v5-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
51
+ --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
52
52
  --pf-v5-c-table__check--responsive--MarginTop: 0.875rem;
53
53
  --pf-v5-c-table--m-grid__favorite--MarginTop: 0.5rem;
54
54
  --pf-v5-c-table--m-grid__check--favorite--MarginLeft: var(--pf-v5-global--spacer--xl);