@patternfly/patternfly 6.0.0-alpha.79 → 6.0.0-alpha.80

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 (16) hide show
  1. package/components/CalendarMonth/calendar-month.css +61 -92
  2. package/components/CalendarMonth/calendar-month.scss +68 -63
  3. package/components/CodeEditor/code-editor.css +4 -0
  4. package/components/CodeEditor/code-editor.scss +5 -0
  5. package/components/DatePicker/date-picker.css +13 -14
  6. package/components/DatePicker/date-picker.scss +12 -16
  7. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  8. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +80 -104
  11. package/patternfly-theme-dark-unversioned.css +80 -104
  12. package/patternfly.css +80 -104
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
  15. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  16. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
package/components/CalendarMonth/calendar-month.css CHANGED
@@ -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
  }
package/components/CalendarMonth/calendar-month.scss CHANGED
@@ -1,70 +1,76 @@
1
- .#{$calendar-month} {
2
- --#{$calendar-month}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
3
- --#{$calendar-month}--PaddingTop: var(--#{$pf-global}--spacer--lg);
4
- --#{$calendar-month}--PaddingRight: var(--#{$pf-global}--spacer--lg);
5
- --#{$calendar-month}--PaddingBottom: var(--#{$pf-global}--spacer--md);
6
- --#{$calendar-month}--PaddingLeft: var(--#{$pf-global}--spacer--lg);
7
- --#{$calendar-month}--FontSize: var(--#{$pf-global}--FontSize--sm);
1
+ :where(:root),
2
+ :where(.#{$calendar-month}) {
3
+ --#{$calendar-month}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4
+ --#{$calendar-month}--PaddingTop: var(--pf-t--global--spacer--lg);
5
+ --#{$calendar-month}--PaddingRight: var(--pf-t--global--spacer--lg);
6
+ --#{$calendar-month}--PaddingBottom: var(--pf-t--global--spacer--md);
7
+ --#{$calendar-month}--PaddingLeft: var(--pf-t--global--spacer--lg);
8
+ --#{$calendar-month}--FontSize: var(--pf-t--global--font--size--sm);
8
9
 
9
10
  // header
10
- --#{$calendar-month}__header--MarginBottom: var(--#{$pf-global}--spacer--md);
11
- --#{$calendar-month}__header-year--Width: 8.5ch;
11
+ --#{$calendar-month}__header--MarginBottom: var(--pf-t--global--spacer--md);
12
+ --#{$calendar-month}__header--Gap: var(--pf-t--global--spacer--xs);
13
+ --#{$calendar-month}__header-year--Width: 9ch;
12
14
  --#{$calendar-month}__header-nav-control--MarginRight: 0;
13
15
  --#{$calendar-month}__header-nav-control--MarginLeft: 0;
14
- --#{$calendar-month}__header-nav-control--m-prev-month--MarginRight: 0; // remove in breaking change
15
- --#{$calendar-month}__header-nav-control--m-prev-month--MarginLeft: 0; // remove in breaking change
16
- --#{$calendar-month}__header-nav-control--m-next-month--MarginRight: 0; // remove in breaking change
17
- --#{$calendar-month}__header-nav-control--m-next-month--MarginLeft: 0; // remove in breaking change
18
16
 
19
17
  // week days thead
20
- --#{$calendar-month}__days--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
21
- --#{$calendar-month}__days--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
18
+ --#{$calendar-month}__days--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
19
+ --#{$calendar-month}__days--BorderBottomColor: var(--pf-t--global--border--color--default);
22
20
 
23
21
  // day th
24
- --#{$calendar-month}__day--PaddingBottom: var(--#{$pf-global}--spacer--md);
25
- --#{$calendar-month}__day--FontWeight: var(--#{$pf-global}--FontWeight--normal);
22
+ --#{$calendar-month}__day--PaddingBottom: var(--pf-t--global--spacer--md);
23
+ --#{$calendar-month}__day--FontWeight: var(--pf-t--global--font--weight--body);
24
+ --#{$calendar-month}__day--Color: var(--pf-t--global--text--color--regular);
25
+
26
26
 
27
27
  // dates td
28
28
  --#{$calendar-month}__dates-cell--PaddingTop: #{pf-size-prem(2px)};
29
29
  --#{$calendar-month}__dates-cell--PaddingRight: #{pf-size-prem(2px)};
30
30
  --#{$calendar-month}__dates-cell--PaddingBottom: #{pf-size-prem(2px)};
31
31
  --#{$calendar-month}__dates-cell--PaddingLeft: #{pf-size-prem(2px)};
32
- --#{$calendar-month}__dates-row--first-child__dates-cell--PaddingTop: var(--#{$pf-global}--spacer--sm);
33
- --#{$calendar-month}__dates-cell--m-current__date--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
34
- --#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor: var(--#{$pf-global}--active-color--100);
35
- --#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor: var(--#{$pf-global}--active-color--100);
36
- --#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor: var(--#{$pf-global}--primary-color--200);
37
- --#{$calendar-month}__dates-cell--m-selected__date--focus--after--BorderColor: var(--#{$pf-global}--primary-color--200);
38
- --#{$calendar-month}__dates-cell--m-selected__date--focus--BoxShadow: 0 0 #{pf-size-prem(5px)} var(--#{$pf-global}--primary-color--100);
39
- --#{$calendar-month}__dates-cell--m-selected__date--Color: var(--#{$pf-global}--Color--light-100);
32
+ --#{$calendar-month}__dates-row--first-child__dates-cell--PaddingTop: var(--pf-t--global--spacer--sm);
33
+ --#{$calendar-month}__dates-cell--m-current__date--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
34
+ --#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor: var(--pf-t--global--color--brand--default);
35
+ --#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-t--global--color--brand--default);
36
+ --#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
37
+ --#{$calendar-month}__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-t--global--border--color--brand--default);
38
+ --#{$calendar-month}__dates-cell--m-selected__date--Color: var(--pf-t--global--text--color--on-brand--default);
40
39
  --#{$calendar-month}__dates-cell--before--BackgroundColor: transparent;
41
40
  --#{$calendar-month}__dates-cell--before--Top: 0;
42
41
  --#{$calendar-month}__dates-cell--before--Right: 0;
43
42
  --#{$calendar-month}__dates-cell--before--Bottom: var(--#{$calendar-month}__dates-cell--PaddingBottom);
44
43
  --#{$calendar-month}__dates-cell--before--Left: 0;
45
- --#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
44
+ --#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
46
45
  --#{$calendar-month}__dates-cell--m-in-range--m-start-range--before--Left: 50%;
47
46
  --#{$calendar-month}__dates-cell--m-in-range--m-end-range--before--Right: 50%;
48
- --#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor: var(--#{$pf-global}--palette--blue-100);
49
- --#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-100);
50
- --#{$calendar-month}__dates-cell--m-adjacent-month__date--Color: var(--#{$pf-global}--Color--200);
47
+ --#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
48
+ --#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
49
+ --#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
50
+ --#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
51
+ --#{$calendar-month}__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
51
52
 
52
53
  // date button
53
54
  --#{$calendar-month}__date--Width: 4ch;
54
55
  --#{$calendar-month}__date--Height: 4ch;
55
- --#{$calendar-month}__date--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
56
- --#{$calendar-month}__date--Color: var(--#{$pf-global}--Color--100);
56
+ --#{$calendar-month}__date--BorderRadius: var(--pf-t--global--border--radius--large);
57
+ --#{$calendar-month}__date--Color: var(--pf-t--global--text--color--regular);
57
58
  --#{$calendar-month}__date--BackgroundColor: transparent;
58
- --#{$calendar-month}__date--disabled--Color: var(--#{$pf-global}--disabled-color--200);
59
- --#{$calendar-month}__date--after--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
59
+ --#{$calendar-month}__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
60
+ --#{$calendar-month}__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
61
+ --#{$calendar-month}__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
60
62
  --#{$calendar-month}__date--after--BorderColor: transparent;
61
- --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
62
- --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
63
- --#{$calendar-month}__date--focus--after--BorderColor: var(--#{$pf-global}--active-color--100);
64
- --#{$calendar-month}__date--focus--BoxShadow: none;
65
-
66
- @include pf-v5-t-light;
63
+ --#{$calendar-month}__date--after--OutlineOffset: 0;
64
+ --#{$calendar-month}__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
65
+ --#{$calendar-month}__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
66
+ --#{$calendar-month}__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
67
+ --#{$calendar-month}__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
68
+ --#{$calendar-month}__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
69
+ --#{$calendar-month}__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
70
+ --#{$calendar-month}__date--after--focus--OutlineOffset: -2px;
71
+ }
67
72
 
73
+ :where(.#{$calendar-month}) {
68
74
  display: inline-flex;
69
75
  flex-direction: column;
70
76
  padding-block-start: var(--#{$calendar-month}--PaddingTop);
@@ -77,6 +83,7 @@
77
83
 
78
84
  .#{$calendar-month}__header {
79
85
  display: flex;
86
+ gap: var(--#{$calendar-month}__header--Gap);
80
87
  margin-block-end: var(--#{$calendar-month}__header--MarginBottom);
81
88
  }
82
89
 
@@ -86,19 +93,14 @@
86
93
  margin-inline-start: var(--#{$calendar-month}__header-nav-control--MarginLeft);
87
94
  margin-inline-end: var(--#{$calendar-month}__header-nav-control--MarginRight);
88
95
 
89
- &.pf-m-prev-month {
90
- --#{$calendar-month}__header-nav-control--MarginRight: var(--#{$calendar-month}__header-nav-control--m-prev-month--MarginRight);
91
- --#{$calendar-month}__header-nav-control--MarginLeft: var(--#{$calendar-month}__header-nav-control--m-prev-month--MarginLeft);
92
- }
93
-
94
- &.pf-m-next-month {
95
- --#{$calendar-month}__header-nav-control--MarginRight: var(--#{$calendar-month}__header-nav-control--m-next-month--MarginRight);
96
- --#{$calendar-month}__header-nav-control--MarginLeft: var(--#{$calendar-month}__header-nav-control--m-next-month--MarginLeft);
97
- }
98
96
  }
99
97
 
100
98
  .#{$calendar-month}__header-month {
101
99
  flex-grow: 1;
100
+
101
+ & > .#{$menu-toggle} {
102
+ width: 100%;
103
+ }
102
104
  }
103
105
 
104
106
  .#{$calendar-month}__header-year {
@@ -110,6 +112,7 @@
110
112
  }
111
113
 
112
114
  .#{$calendar-month}__days {
115
+ color: var(--#{$calendar-month}__day--Color);
113
116
  border-block-end: var(--#{$calendar-month}__days--BorderBottomWidth) solid var(--#{$calendar-month}__days--BorderBottomColor);
114
117
  }
115
118
 
@@ -150,7 +153,10 @@
150
153
  &.pf-m-in-range {
151
154
  --#{$calendar-month}__dates-cell--before--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor);
152
155
  --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor);
156
+ --#{$calendar-month}__date--hover--BorderWidth: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth);
157
+ --#{$calendar-month}__date--hover--BorderColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderColor);
153
158
  --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor);
159
+
154
160
  }
155
161
 
156
162
  &.pf-m-start-range {
@@ -167,11 +173,16 @@
167
173
 
168
174
  &.pf-m-selected {
169
175
  --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor);
176
+ --#{$calendar-month}__date--Color: var(--#{$calendar-month}__dates-cell--m-selected__date--Color);
177
+
178
+ // tweak the hover styling for a selected date
170
179
  --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor);
180
+ --#{$calendar-month}__date--hover--BorderWidth: 0;
181
+
182
+ // tweak the focus styling for a selected date
171
183
  --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor);
172
184
  --#{$calendar-month}__date--focus--after--BorderColor: var(--#{$calendar-month}__dates-cell--m-selected__date--focus--after--BorderColor);
173
- --#{$calendar-month}__date--focus--BoxShadow: var(--#{$calendar-month}__dates-cell--m-selected__date--focus--BoxShadow);
174
- --#{$calendar-month}__date--Color: var(--#{$calendar-month}__dates-cell--m-selected__date--Color);
185
+ --#{$calendar-month}__date--after--OutlineOffset: var(--#{$calendar-month}__date--after--focus--OutlineOffset);
175
186
  }
176
187
 
177
188
  &.pf-m-disabled {
@@ -194,10 +205,10 @@
194
205
 
195
206
  &::after {
196
207
  position: absolute;
197
- inset-block-start: 0;
198
- inset-block-end: 0;
199
- inset-inline-start: 0;
200
- inset-inline-end: 0;
208
+ inset-block-start: var(--#{$calendar-month}__date--after--OutlineOffset);
209
+ inset-block-end: var(--#{$calendar-month}__date--after--OutlineOffset);
210
+ inset-inline-start: var(--#{$calendar-month}__date--after--OutlineOffset);
211
+ inset-inline-end: var(--#{$calendar-month}__date--after--OutlineOffset);
201
212
  content: "";
202
213
  border: var(--#{$calendar-month}__date--after--BorderWidth) solid var(--#{$calendar-month}__date--after--BorderColor);
203
214
  }
@@ -210,28 +221,22 @@
210
221
  &:hover,
211
222
  &.pf-m-hover {
212
223
  --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--hover--BackgroundColor);
224
+
225
+ border: var(--#{$calendar-month}__date--hover--BorderColor) solid var(--#{$calendar-month}__date--hover--BorderWidth);
213
226
  }
214
227
 
215
228
  &:focus,
216
229
  &.pf-m-focus {
217
- --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--focus--BackgroundColor);
218
230
  --#{$calendar-month}__date--after--BorderColor: var(--#{$calendar-month}__date--focus--after--BorderColor);
219
231
 
220
232
  outline: 0;
221
- box-shadow: var(--#{$calendar-month}__date--focus--BoxShadow);
222
233
  }
223
234
 
224
235
  &:disabled {
236
+ --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--disabled--BackgroundColor);
225
237
  --#{$calendar-month}__date--Color: var(--#{$calendar-month}__date--disabled--Color);
226
238
  --#{$calendar-month}__date--hover--focus--BorderColor: transparent;
227
239
 
228
240
  pointer-events: none;
229
241
  }
230
242
  }
231
-
232
- // stylelint-disable no-invalid-position-at-import-rule
233
- @import "themes/dark/calendar-month";
234
-
235
- @include pf-v5-theme-dark {
236
- @include pf-v5-theme-dark-calendar-month;
237
- }
package/components/CodeEditor/code-editor.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --pf-v5-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11
11
  --pf-v5-c-code-editor__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12
12
  --pf-v5-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
13
+ --pf-v5-c-code-editor__header-content--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
13
14
  --pf-v5-c-code-editor__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
14
15
  --pf-v5-c-code-editor__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15
16
  --pf-v5-c-code-editor__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -82,6 +83,9 @@
82
83
  background-color: var(--pf-v5-c-code-editor__header-content--BackgroundColor);
83
84
  border-start-start-radius: var(--pf-v5-c-code-editor__header-content--BorderStartStartRadius);
84
85
  }
86
+ .pf-v5-c-code-editor__header-content:last-child {
87
+ border-start-end-radius: var(--pf-v5-c-code-editor__header-content--BorderStartEndRadius);
88
+ }
85
89
 
86
90
  .pf-v5-c-code-editor__controls {
87
91
  display: flex;
package/components/CodeEditor/code-editor.scss CHANGED
@@ -17,6 +17,7 @@
17
17
  --#{$code-editor}__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
18
18
  --#{$code-editor}__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19
19
  --#{$code-editor}__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
20
+ --#{$code-editor}__header-content--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
20
21
 
21
22
  // upload
22
23
  --#{$code-editor}__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -104,6 +105,10 @@
104
105
  padding-inline-end: var(--#{$code-editor}__header-content--PaddingInlineEnd);
105
106
  background-color: var(--#{$code-editor}__header-content--BackgroundColor);
106
107
  border-start-start-radius: var(--#{$code-editor}__header-content--BorderStartStartRadius);
108
+
109
+ &:last-child {
110
+ border-start-end-radius: var(--#{$code-editor}__header-content--BorderStartEndRadius);
111
+ }
107
112
  }
108
113
 
109
114
  .#{$code-editor}__controls {
package/components/DatePicker/date-picker.css CHANGED
@@ -1,18 +1,22 @@
1
- .pf-v5-c-date-picker {
1
+ :where(:root),
2
+ :where(.pf-v5-c-date-picker) {
2
3
  --pf-v5-c-date-picker--m-top__calendar--Top: 0;
3
- --pf-v5-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
4
- --pf-v5-c-date-picker__helper-text--MarginTop: var(--pf-v5-global--spacer--xs);
4
+ --pf-v5-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
5
+ --pf-v5-c-date-picker__helper-text--MarginTop: var(--pf-t--global--spacer--sm);
5
6
  --pf-v5-c-date-picker__input--c-form-control--Width: calc(var(--pf-v5-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v5-c-date-picker__input--c-form-control--width-base));
6
- --pf-v5-c-date-picker__input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
7
- --pf-v5-c-date-picker__input--c-form-control--width-chars: 10;
8
- --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-c-date-picker__calendar--BoxShadow: var(--pf-v5-global--BoxShadow--md);
10
- --pf-v5-c-date-picker__calendar--ZIndex: var(--pf-v5-global--ZIndex--sm);
11
- --pf-v5-c-date-picker__calendar--Top: calc(100% + var(--pf-v5-global--spacer--xs));
7
+ --pf-v5-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
8
+ --pf-v5-c-date-picker__input--c-form-control--width-chars: 11;
9
+ --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
10
+ --pf-v5-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
11
+ --pf-v5-c-date-picker__calendar--ZIndex: var(--pf-t--global--Zindex--sm);
12
+ --pf-v5-c-date-picker__calendar--Top: calc(100% + var(--pf-t--global--spacer--xs));
12
13
  --pf-v5-c-date-picker__calendar--Right: auto;
13
14
  --pf-v5-c-date-picker__calendar--Left: 0;
14
15
  --pf-v5-c-date-picker__calendar--m-align-right--Right: 0;
15
16
  --pf-v5-c-date-picker__calendar--m-align-right--Left: auto;
17
+ }
18
+
19
+ .pf-v5-c-date-picker {
16
20
  position: relative;
17
21
  display: inline-block;
18
22
  }
@@ -51,9 +55,4 @@
51
55
  inset-inline-end: auto;
52
56
  z-index: auto;
53
57
  min-width: min-content;
54
- }
55
-
56
- :where(.pf-v5-theme-dark) .pf-v5-c-date-picker {
57
- --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
58
- --pf-v5-c-date-picker__calendar--Top: 100%;
59
58
  }
package/components/DatePicker/date-picker.scss CHANGED
@@ -1,21 +1,24 @@
1
1
  // @debug $date-picker; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$date-picker} {
3
+ :where(:root),
4
+ :where(.#{$date-picker}) {
4
5
  --#{$date-picker}--m-top__calendar--Top: 0;
5
- --#{$date-picker}--m-top__calendar--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs));
6
- --#{$date-picker}__helper-text--MarginTop: var(--#{$pf-global}--spacer--xs);
6
+ --#{$date-picker}--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
7
+ --#{$date-picker}__helper-text--MarginTop: var(--pf-t--global--spacer--sm);
7
8
  --#{$date-picker}__input--c-form-control--Width: calc(var(--#{$date-picker}__input--c-form-control--width-chars) * 1ch + var(--#{$date-picker}__input--c-form-control--width-base));
8
- --#{$date-picker}__input--c-form-control--width-base: calc(var(--#{$pf-global}--spacer--xl) + var(--#{$pf-global}--spacer--sm)); // form control left/right padding + status icon width and spacer
9
- --#{$date-picker}__input--c-form-control--width-chars: 10;
10
- --#{$date-picker}__calendar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
11
- --#{$date-picker}__calendar--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
12
- --#{$date-picker}__calendar--ZIndex: var(--#{$pf-global}--ZIndex--sm);
13
- --#{$date-picker}__calendar--Top: calc(100% + var(--#{$pf-global}--spacer--xs));
9
+ --#{$date-picker}__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm)); // form control left/right padding + status icon width and spacer
10
+ --#{$date-picker}__input--c-form-control--width-chars: 11;
11
+ --#{$date-picker}__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
12
+ --#{$date-picker}__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
13
+ --#{$date-picker}__calendar--ZIndex: var(--pf-t--global--Zindex--sm);
14
+ --#{$date-picker}__calendar--Top: calc(100% + var(--pf-t--global--spacer--xs));
14
15
  --#{$date-picker}__calendar--Right: auto;
15
16
  --#{$date-picker}__calendar--Left: 0;
16
17
  --#{$date-picker}__calendar--m-align-right--Right: 0;
17
18
  --#{$date-picker}__calendar--m-align-right--Left: auto;
19
+ }
18
20
 
21
+ .#{$date-picker} {
19
22
  position: relative;
20
23
  display: inline-block;
21
24
  }
@@ -62,10 +65,3 @@
62
65
  min-width: min-content;
63
66
  }
64
67
  }
65
-
66
- // stylelint-disable no-invalid-position-at-import-rule
67
- @import "themes/dark/date-picker";
68
-
69
- @include pf-v5-theme-dark {
70
- @include pf-v5-theme-dark-date-picker;
71
- }