@patternfly/react-styles 6.0.0-alpha.11 → 6.0.0-alpha.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Alert/alert.css +2 -0
  3. package/css/components/Breadcrumb/breadcrumb.css +9 -1
  4. package/css/components/Button/button.css +44 -24
  5. package/css/components/CalendarMonth/calendar-month.css +61 -92
  6. package/css/components/CalendarMonth/calendar-month.d.ts +2 -4
  7. package/css/components/CalendarMonth/calendar-month.js +2 -4
  8. package/css/components/CalendarMonth/calendar-month.mjs +2 -4
  9. package/css/components/CodeBlock/code-block.css +4 -0
  10. package/css/components/CodeEditor/code-editor.css +94 -72
  11. package/css/components/CodeEditor/code-editor.d.ts +4 -4
  12. package/css/components/CodeEditor/code-editor.js +4 -4
  13. package/css/components/CodeEditor/code-editor.mjs +4 -4
  14. package/css/components/DatePicker/date-picker.css +13 -14
  15. package/css/components/DatePicker/date-picker.d.ts +1 -2
  16. package/css/components/DatePicker/date-picker.js +1 -2
  17. package/css/components/DatePicker/date-picker.mjs +1 -2
  18. package/css/components/Divider/divider.css +8 -6
  19. package/css/components/DualListSelector/dual-list-selector.css +56 -48
  20. package/css/components/DualListSelector/dual-list-selector.d.ts +1 -2
  21. package/css/components/DualListSelector/dual-list-selector.js +1 -2
  22. package/css/components/DualListSelector/dual-list-selector.mjs +1 -2
  23. package/css/components/FormControl/form-control.css +3 -3
  24. package/css/components/Icon/icon.css +27 -27
  25. package/css/components/Label/label-group.css +1 -1
  26. package/css/components/Label/label.css +13 -7
  27. package/css/components/Menu/menu.css +388 -419
  28. package/css/components/Menu/menu.d.ts +5 -8
  29. package/css/components/Menu/menu.js +5 -8
  30. package/css/components/Menu/menu.mjs +5 -8
  31. package/css/components/MenuToggle/menu-toggle.css +229 -265
  32. package/css/components/MenuToggle/menu-toggle.d.ts +7 -8
  33. package/css/components/MenuToggle/menu-toggle.js +7 -8
  34. package/css/components/MenuToggle/menu-toggle.mjs +7 -8
  35. package/css/components/Pagination/pagination.css +2 -12
  36. package/css/components/ProgressStepper/progress-stepper.css +72 -69
  37. package/css/components/ProgressStepper/progress-stepper.d.ts +1 -0
  38. package/css/components/ProgressStepper/progress-stepper.js +1 -0
  39. package/css/components/ProgressStepper/progress-stepper.mjs +1 -0
  40. package/css/components/Table/table-grid.css +29 -45
  41. package/css/components/Table/table-scrollable.css +6 -6
  42. package/css/components/Table/table-tree-view.css +76 -74
  43. package/css/components/Table/table.css +54 -74
  44. package/css/components/TextInputGroup/text-input-group.css +0 -14
  45. package/css/components/TextInputGroup/text-input-group.d.ts +1 -3
  46. package/css/components/TextInputGroup/text-input-group.js +1 -3
  47. package/css/components/TextInputGroup/text-input-group.mjs +1 -3
  48. package/css/components/Tile/tile.css +1 -1
  49. package/css/components/TreeView/tree-view.css +76 -97
  50. package/css/components/TreeView/tree-view.d.ts +0 -4
  51. package/css/components/TreeView/tree-view.js +0 -4
  52. package/css/components/TreeView/tree-view.mjs +0 -4
  53. package/css/components/Wizard/wizard.css +128 -205
  54. package/css/components/Wizard/wizard.d.ts +0 -3
  55. package/css/components/Wizard/wizard.js +0 -3
  56. package/css/components/Wizard/wizard.mjs +0 -3
  57. package/css/docs/components/Menu/examples/Menu.css +7 -11
  58. package/css/docs/components/Menu/examples/Menu.d.ts +2 -1
  59. package/css/docs/components/Menu/examples/Menu.js +2 -1
  60. package/css/docs/components/Menu/examples/Menu.mjs +2 -1
  61. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 6.0.0-alpha.12 (2024-02-16)
7
+
8
+ ### Features
9
+
10
+ - **CodeEditor,Divider:** consume penta & update core version ([#10081](https://github.com/patternfly/patternfly-react/issues/10081)) ([addda04](https://github.com/patternfly/patternfly-react/commit/addda044d7f6d91f3511c7a769b2707140df86d4))
11
+
6
12
  # 6.0.0-alpha.11 (2024-01-31)
7
13
 
8
14
  ### Features
@@ -23,6 +23,7 @@
23
23
  --pf-v5-c-alert__icon--MarginTop: 0.25rem;
24
24
  --pf-v5-c-alert__icon--MarginRight: var(--pf-t--global--spacer--sm);
25
25
  --pf-v5-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
26
+ --pf-v5-c-alert__title--FontFamily: var(--pf-t--global--font--family--heading);
26
27
  --pf-v5-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
27
28
  --pf-v5-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading);
28
29
  --pf-v5-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -159,6 +160,7 @@
159
160
 
160
161
  .pf-v5-c-alert__title {
161
162
  grid-area: title;
163
+ font-family: var(--pf-v5-c-alert__title--FontFamily);
162
164
  font-size: var(--pf-v5-c-alert__title--FontSize);
163
165
  font-weight: var(--pf-v5-c-alert__title--FontWeight);
164
166
  line-height: var(--pf-v5-c-alert__title--LineHeight);
@@ -1,10 +1,13 @@
1
- :root, .pf-v5-c-breadcrumb {
1
+ :where(:root),
2
+ :where(.pf-v5-c-breadcrumb) {
2
3
  --pf-v5-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3
4
  --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
4
5
  --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);
5
6
  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
6
7
  --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
7
8
  --pf-v5-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
9
+ --pf-v5-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10
+ --pf-v5-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
8
11
  --pf-v5-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
9
12
  --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
10
13
  --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
@@ -38,6 +41,9 @@
38
41
  white-space: nowrap;
39
42
  list-style: none;
40
43
  }
44
+ .pf-v5-c-breadcrumb__item:first-child:has(.pf-v5-c-breadcrumb__link) {
45
+ --pf-v5-c-breadcrumb__link--PaddingInlineStart: 0;
46
+ }
41
47
  .pf-v5-c-breadcrumb__item:not(:last-child) {
42
48
  margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
43
49
  }
@@ -53,6 +59,8 @@
53
59
  }
54
60
 
55
61
  .pf-v5-c-breadcrumb__link {
62
+ padding-inline-start: var(--pf-v5-c-breadcrumb__link--PaddingInlineStart);
63
+ padding-inline-end: var(--pf-v5-c-breadcrumb__link--PaddingInlineEnd);
56
64
  font-size: inherit;
57
65
  font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
58
66
  line-height: inherit;
@@ -21,7 +21,7 @@
21
21
  --pf-v5-c-button--hover--TextDecoration: none;
22
22
  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
23
23
  --pf-v5-c-button--m-clicked--BorderColor: transparent;
24
- --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--active);
24
+ --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--clicked);
25
25
  --pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
26
26
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
27
27
  --pf-v5-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
@@ -63,7 +63,8 @@
63
63
  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
64
64
  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
65
65
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
66
- --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
66
+ --pf-v5-c-button--m-link--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
67
+ --pf-v5-c-button--m-link--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
67
68
  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
68
69
  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
69
70
  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -72,19 +73,24 @@
72
73
  --pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
73
74
  --pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
74
75
  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
76
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
77
  --pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
76
78
  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
79
+ --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
77
80
  --pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
78
81
  --pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
82
+ --pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
79
83
  --pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
80
84
  --pf-v5-c-button--m-link--m-inline--FontSize: initial;
81
85
  --pf-v5-c-button--m-link--m-inline--LineHeight: initial;
82
86
  --pf-v5-c-button--m-link--m-inline--FontWeight: initial;
83
- --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
84
87
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
85
88
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
86
89
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
87
90
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
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--MixBlendMode: normal;
93
+ --pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode: normal;
88
94
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
89
95
  --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));
90
96
  --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -96,18 +102,21 @@
96
102
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
97
103
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
98
104
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
99
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
105
+ --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
106
+ --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
100
107
  --pf-v5-c-button--m-plain--MinWidth: calc(1em * var(--pf-v5-c-button--LineHeight) + var(--pf-v5-c-button--m-plain--PaddingTop) + var(--pf-v5-c-button--m-plain--PaddingBottom));
101
108
  --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
102
109
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
103
110
  --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
104
111
  --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
105
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
112
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
113
+ --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
106
114
  --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
107
115
  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
108
116
  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
109
117
  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
110
- --pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
118
+ --pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode: normal;
119
+ --pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode: normal;
111
120
  --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
112
121
  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
113
122
  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
@@ -133,7 +142,7 @@
133
142
  --pf-v5-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
134
143
  --pf-v5-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
135
144
  --pf-v5-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
136
- --pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--active);
145
+ --pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
137
146
  --pf-v5-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
138
147
  --pf-v5-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
139
148
  --pf-v5-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
@@ -191,9 +200,10 @@
191
200
  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
192
201
  --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
193
202
  --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
194
- --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
203
+ --pf-v5-c-button--disabled--MixBlendMode: normal;
195
204
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
196
205
  --pf-v5-c-button--disabled--BorderColor: transparent;
206
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
197
207
  --pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
198
208
  --pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
199
209
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -247,6 +257,7 @@
247
257
  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
248
258
  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
249
259
  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
260
+ mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
250
261
  }
251
262
  .pf-v5-c-button::after {
252
263
  position: absolute;
@@ -313,13 +324,14 @@
313
324
  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
314
325
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
315
326
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
316
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
317
327
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
328
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--hover--MixBlendMode);
318
329
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
319
330
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
320
331
  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
321
332
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
322
333
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
334
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-clicked--MixBlendMode);
323
335
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
324
336
  }
325
337
  .pf-v5-c-button.pf-m-link.pf-m-inline {
@@ -334,7 +346,9 @@
334
346
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
335
347
  --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
336
348
  --pf-v5-c-button--hover--BackgroundColor: transparent;
349
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--hover--MixBlendMode);
337
350
  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
351
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode);
338
352
  --pf-v5-c-button--disabled--BackgroundColor: transparent;
339
353
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
340
354
  --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
@@ -343,16 +357,16 @@
343
357
  white-space: normal;
344
358
  outline-offset: 0.125rem;
345
359
  }
346
- .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
360
+ .pf-v5-c-button.pf-m-link.pf-m-danger {
347
361
  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
362
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
348
363
  --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
349
364
  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
365
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
350
366
  --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
351
367
  --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
368
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor);
352
369
  --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
353
- --pf-v5-c-button--m-danger--BackgroundColor: transparent;
354
- --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
355
- --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
356
370
  }
357
371
  .pf-v5-c-button.pf-m-link.pf-m-display-lg {
358
372
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
@@ -397,7 +411,7 @@
397
411
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
398
412
  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
399
413
  --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
400
- --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
414
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
401
415
  }
402
416
  .pf-v5-c-button.pf-m-stateful {
403
417
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
@@ -435,24 +449,26 @@
435
449
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
436
450
  }
437
451
  .pf-v5-c-button.pf-m-plain {
452
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
453
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
454
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
438
455
  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
439
456
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
440
457
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
441
458
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
442
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
443
- --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
444
- --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
445
- --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
446
- --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
447
- --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
448
- --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
449
- --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
459
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
450
460
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
451
461
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
462
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--hover--MixBlendMode);
452
463
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
453
464
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
465
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-clicked--MixBlendMode);
454
466
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
455
- --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
467
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
468
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
469
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
470
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
471
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
456
472
  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
457
473
  }
458
474
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
@@ -463,7 +479,8 @@
463
479
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
464
480
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
465
481
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
466
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
482
+ --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode);
483
+ --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode);
467
484
  min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
468
485
  }
469
486
  .pf-v5-c-button.pf-m-block {
@@ -489,6 +506,7 @@
489
506
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
490
507
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
491
508
  --pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
509
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--hover--MixBlendMode);
492
510
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
493
511
  }
494
512
  .pf-v5-c-button.pf-m-clicked {
@@ -496,6 +514,7 @@
496
514
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
497
515
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
498
516
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
517
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-clicked--MixBlendMode);
499
518
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
500
519
  }
501
520
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
@@ -505,6 +524,7 @@
505
524
  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
506
525
  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
507
526
  --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
527
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--disabled--MixBlendMode);
508
528
  color: var(--pf-v5-c-button--disabled--Color);
509
529
  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
510
530
  }
@@ -1,70 +1,65 @@
1
- .pf-v5-c-calendar-month {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-calendar-month {
14
- --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15
- --pf-v5-c-calendar-month--PaddingTop: var(--pf-v5-global--spacer--lg);
16
- --pf-v5-c-calendar-month--PaddingRight: var(--pf-v5-global--spacer--lg);
17
- --pf-v5-c-calendar-month--PaddingBottom: var(--pf-v5-global--spacer--md);
18
- --pf-v5-c-calendar-month--PaddingLeft: var(--pf-v5-global--spacer--lg);
19
- --pf-v5-c-calendar-month--FontSize: var(--pf-v5-global--FontSize--sm);
20
- --pf-v5-c-calendar-month__header--MarginBottom: var(--pf-v5-global--spacer--md);
21
- --pf-v5-c-calendar-month__header-year--Width: 8.5ch;
1
+ :where(:root),
2
+ :where(.pf-v5-c-calendar-month) {
3
+ --pf-v5-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4
+ --pf-v5-c-calendar-month--PaddingTop: var(--pf-t--global--spacer--lg);
5
+ --pf-v5-c-calendar-month--PaddingRight: var(--pf-t--global--spacer--lg);
6
+ --pf-v5-c-calendar-month--PaddingBottom: var(--pf-t--global--spacer--md);
7
+ --pf-v5-c-calendar-month--PaddingLeft: var(--pf-t--global--spacer--lg);
8
+ --pf-v5-c-calendar-month--FontSize: var(--pf-t--global--font--size--sm);
9
+ --pf-v5-c-calendar-month__header--MarginBottom: var(--pf-t--global--spacer--md);
10
+ --pf-v5-c-calendar-month__header--Gap: var(--pf-t--global--spacer--xs);
11
+ --pf-v5-c-calendar-month__header-year--Width: 9ch;
22
12
  --pf-v5-c-calendar-month__header-nav-control--MarginRight: 0;
23
13
  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: 0;
24
- --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
25
- --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: 0;
26
- --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight: 0;
27
- --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft: 0;
28
- --pf-v5-c-calendar-month__days--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
29
- --pf-v5-c-calendar-month__days--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
30
- --pf-v5-c-calendar-month__day--PaddingBottom: var(--pf-v5-global--spacer--md);
31
- --pf-v5-c-calendar-month__day--FontWeight: var(--pf-v5-global--FontWeight--normal);
14
+ --pf-v5-c-calendar-month__days--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
15
+ --pf-v5-c-calendar-month__days--BorderBottomColor: var(--pf-t--global--border--color--default);
16
+ --pf-v5-c-calendar-month__day--PaddingBottom: var(--pf-t--global--spacer--md);
17
+ --pf-v5-c-calendar-month__day--FontWeight: var(--pf-t--global--font--weight--body);
18
+ --pf-v5-c-calendar-month__day--Color: var(--pf-t--global--text--color--regular);
32
19
  --pf-v5-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
33
20
  --pf-v5-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
34
21
  --pf-v5-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
35
22
  --pf-v5-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
36
- --pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-v5-global--spacer--sm);
37
- --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
38
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--active-color--100);
39
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-v5-global--active-color--100);
40
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
41
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-v5-global--primary-color--200);
42
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow: 0 0 0.3125rem var(--pf-v5-global--primary-color--100);
43
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--Color--light-100);
23
+ --pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-t--global--spacer--sm);
24
+ --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25
+ --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-t--global--color--brand--default);
26
+ --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-t--global--color--brand--default);
27
+ --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
28
+ --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-t--global--border--color--brand--default);
29
+ --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-t--global--text--color--on-brand--default);
44
30
  --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
45
31
  --pf-v5-c-calendar-month__dates-cell--before--Top: 0;
46
32
  --pf-v5-c-calendar-month__dates-cell--before--Right: 0;
47
33
  --pf-v5-c-calendar-month__dates-cell--before--Bottom: var(--pf-v5-c-calendar-month__dates-cell--PaddingBottom);
48
34
  --pf-v5-c-calendar-month__dates-cell--before--Left: 0;
49
- --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-v5-global--palette--blue-50);
35
+ --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
50
36
  --pf-v5-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
51
37
  --pf-v5-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
52
- --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-v5-global--palette--blue-100);
53
- --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-v5-global--palette--blue-100);
54
- --pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-v5-global--Color--200);
38
+ --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
39
+ --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
40
+ --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
41
+ --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
42
+ --pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
55
43
  --pf-v5-c-calendar-month__date--Width: 4ch;
56
44
  --pf-v5-c-calendar-month__date--Height: 4ch;
57
- --pf-v5-c-calendar-month__date--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
58
- --pf-v5-c-calendar-month__date--Color: var(--pf-v5-global--Color--100);
45
+ --pf-v5-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
46
+ --pf-v5-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
59
47
  --pf-v5-c-calendar-month__date--BackgroundColor: transparent;
60
- --pf-v5-c-calendar-month__date--disabled--Color: var(--pf-v5-global--disabled-color--200);
61
- --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
48
+ --pf-v5-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
49
+ --pf-v5-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
50
+ --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
62
51
  --pf-v5-c-calendar-month__date--after--BorderColor: transparent;
63
- --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-global--palette--blue-50);
64
- --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-global--palette--blue-50);
65
- --pf-v5-c-calendar-month__date--focus--after--BorderColor: var(--pf-v5-global--active-color--100);
66
- --pf-v5-c-calendar-month__date--focus--BoxShadow: none;
67
- color: var(--pf-v5-global--Color--100);
52
+ --pf-v5-c-calendar-month__date--after--OutlineOffset: 0;
53
+ --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
54
+ --pf-v5-c-calendar-month__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
55
+ --pf-v5-c-calendar-month__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
56
+ --pf-v5-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
57
+ --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
58
+ --pf-v5-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
59
+ --pf-v5-c-calendar-month__date--after--focus--OutlineOffset: -2px;
60
+ }
61
+
62
+ :where(.pf-v5-c-calendar-month) {
68
63
  display: inline-flex;
69
64
  flex-direction: column;
70
65
  padding-block-start: var(--pf-v5-c-calendar-month--PaddingTop);
@@ -77,6 +72,7 @@
77
72
 
78
73
  .pf-v5-c-calendar-month__header {
79
74
  display: flex;
75
+ gap: var(--pf-v5-c-calendar-month__header--Gap);
80
76
  margin-block-end: var(--pf-v5-c-calendar-month__header--MarginBottom);
81
77
  }
82
78
 
@@ -88,18 +84,12 @@
88
84
  scale: -1 1;
89
85
  }
90
86
 
91
- .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
92
- --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
93
- --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
94
- }
95
- .pf-v5-c-calendar-month__header-nav-control.pf-m-next-month {
96
- --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight);
97
- --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
98
- }
99
-
100
87
  .pf-v5-c-calendar-month__header-month {
101
88
  flex-grow: 1;
102
89
  }
90
+ .pf-v5-c-calendar-month__header-month > .pf-v5-c-menu-toggle {
91
+ width: 100%;
92
+ }
103
93
 
104
94
  .pf-v5-c-calendar-month__header-year {
105
95
  width: var(--pf-v5-c-calendar-month__header-year--Width);
@@ -110,6 +100,7 @@
110
100
  }
111
101
 
112
102
  .pf-v5-c-calendar-month__days {
103
+ color: var(--pf-v5-c-calendar-month__day--Color);
113
104
  border-block-end: var(--pf-v5-c-calendar-month__days--BorderBottomWidth) solid var(--pf-v5-c-calendar-month__days--BorderBottomColor);
114
105
  }
115
106
 
@@ -147,6 +138,8 @@
147
138
  .pf-v5-c-calendar-month__dates-cell.pf-m-in-range {
148
139
  --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
149
140
  --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
141
+ --pf-v5-c-calendar-month__date--hover--BorderWidth: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth);
142
+ --pf-v5-c-calendar-month__date--hover--BorderColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor);
150
143
  --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
151
144
  }
152
145
  .pf-v5-c-calendar-month__dates-cell.pf-m-start-range {
@@ -160,11 +153,12 @@
160
153
  }
161
154
  .pf-v5-c-calendar-month__dates-cell.pf-m-selected {
162
155
  --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
156
+ --pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color);
163
157
  --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
158
+ --pf-v5-c-calendar-month__date--hover--BorderWidth: 0;
164
159
  --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
165
160
  --pf-v5-c-calendar-month__date--focus--after--BorderColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
166
- --pf-v5-c-calendar-month__date--focus--BoxShadow: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow);
167
- --pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color);
161
+ --pf-v5-c-calendar-month__date--after--OutlineOffset: var(--pf-v5-c-calendar-month__date--after--focus--OutlineOffset);
168
162
  }
169
163
  .pf-v5-c-calendar-month__dates-cell.pf-m-disabled {
170
164
  --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
@@ -185,10 +179,10 @@
185
179
  }
186
180
  .pf-v5-c-calendar-month__date::after {
187
181
  position: absolute;
188
- inset-block-start: 0;
189
- inset-block-end: 0;
190
- inset-inline-start: 0;
191
- inset-inline-end: 0;
182
+ inset-block-start: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
183
+ inset-block-end: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
184
+ inset-inline-start: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
185
+ inset-inline-end: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
192
186
  content: "";
193
187
  border: var(--pf-v5-c-calendar-month__date--after--BorderWidth) solid var(--pf-v5-c-calendar-month__date--after--BorderColor);
194
188
  }
@@ -197,40 +191,15 @@
197
191
  }
198
192
  .pf-v5-c-calendar-month__date:hover, .pf-v5-c-calendar-month__date.pf-m-hover {
199
193
  --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--hover--BackgroundColor);
194
+ border: var(--pf-v5-c-calendar-month__date--hover--BorderColor) solid var(--pf-v5-c-calendar-month__date--hover--BorderWidth);
200
195
  }
201
196
  .pf-v5-c-calendar-month__date:focus, .pf-v5-c-calendar-month__date.pf-m-focus {
202
- --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--focus--BackgroundColor);
203
197
  --pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-c-calendar-month__date--focus--after--BorderColor);
204
198
  outline: 0;
205
- box-shadow: var(--pf-v5-c-calendar-month__date--focus--BoxShadow);
206
199
  }
207
200
  .pf-v5-c-calendar-month__date:disabled {
201
+ --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--disabled--BackgroundColor);
208
202
  --pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__date--disabled--Color);
209
203
  --pf-v5-c-calendar-month__date--hover--focus--BorderColor: transparent;
210
204
  pointer-events: none;
211
- }
212
-
213
- :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month {
214
- --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
215
- --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--palette--black-500);
216
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
217
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--primary-color--400);
218
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-v5-global--palette--black-900);
219
- --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-v5-global--palette--blue-400);
220
- --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
221
- --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
222
- --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
223
- --pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
224
- --pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
225
- --pf-v5-c-calendar-month__date--focus--after--BorderColor: transparent;
226
- }
227
- :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:hover, :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-hover {
228
- --pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-global--BorderColor--100);
229
- --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
230
- }
231
- :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:focus, :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-focus {
232
- --pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-global--active-color--100);
233
- --pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
234
- --pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
235
- --pf-v5-c-calendar-month__date--Color: var(--pf-v5-global--primary-color--400);
236
205
  }
@@ -12,9 +12,8 @@ declare const _default: {
12
12
  "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
13
13
  "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
14
14
  "dirRtl": "pf-v5-m-dir-rtl",
15
+ "menuToggle": "pf-v5-c-menu-toggle",
15
16
  "modifiers": {
16
- "prevMonth": "pf-m-prev-month",
17
- "nextMonth": "pf-m-next-month",
18
17
  "current": "pf-m-current",
19
18
  "inRange": "pf-m-in-range",
20
19
  "startRange": "pf-m-start-range",
@@ -24,7 +23,6 @@ declare const _default: {
24
23
  "disabled": "pf-m-disabled",
25
24
  "hover": "pf-m-hover",
26
25
  "focus": "pf-m-focus"
27
- },
28
- "themeDark": "pf-v5-theme-dark"
26
+ }
29
27
  };
30
28
  export default _default;
@@ -14,9 +14,8 @@ exports.default = {
14
14
  "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
15
15
  "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
16
16
  "dirRtl": "pf-v5-m-dir-rtl",
17
+ "menuToggle": "pf-v5-c-menu-toggle",
17
18
  "modifiers": {
18
- "prevMonth": "pf-m-prev-month",
19
- "nextMonth": "pf-m-next-month",
20
19
  "current": "pf-m-current",
21
20
  "inRange": "pf-m-in-range",
22
21
  "startRange": "pf-m-start-range",
@@ -26,6 +25,5 @@ exports.default = {
26
25
  "disabled": "pf-m-disabled",
27
26
  "hover": "pf-m-hover",
28
27
  "focus": "pf-m-focus"
29
- },
30
- "themeDark": "pf-v5-theme-dark"
28
+ }
31
29
  };
@@ -12,9 +12,8 @@ export default {
12
12
  "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
13
13
  "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
14
14
  "dirRtl": "pf-v5-m-dir-rtl",
15
+ "menuToggle": "pf-v5-c-menu-toggle",
15
16
  "modifiers": {
16
- "prevMonth": "pf-m-prev-month",
17
- "nextMonth": "pf-m-next-month",
18
17
  "current": "pf-m-current",
19
18
  "inRange": "pf-m-in-range",
20
19
  "startRange": "pf-m-start-range",
@@ -24,6 +23,5 @@ export default {
24
23
  "disabled": "pf-m-disabled",
25
24
  "hover": "pf-m-hover",
26
25
  "focus": "pf-m-focus"
27
- },
28
- "themeDark": "pf-v5-theme-dark"
26
+ }
29
27
  };
@@ -3,6 +3,8 @@
3
3
  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
4
4
  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
5
5
  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
6
+ --pf-v5-c-code-block__header--PaddingTop: var(--pf-t--global--spacer--xs);
7
+ --pf-v5-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
6
8
  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
7
9
  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
8
10
  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -20,6 +22,8 @@
20
22
 
21
23
  .pf-v5-c-code-block__header {
22
24
  display: flex;
25
+ padding-block-start: var(--pf-v5-c-code-block__header--PaddingTop);
26
+ padding-block-end: var(--pf-v5-c-code-block__header--PaddingBottom);
23
27
  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
24
28
  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
25
29
  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);