mod-arch-kubeflow 1.2.2 → 1.5.0
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.
- package/README.md +1 -1
- package/dist/style/MUI-theme.scss +470 -136
- package/package.json +3 -5
package/README.md
CHANGED
|
@@ -1,4 +1,151 @@
|
|
|
1
1
|
.mui-theme:root {
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
╔════════════════════════════════════════════════════════════════════════════╗
|
|
5
|
+
║ PATTERNFLY GLOBAL TOKEN TRANSLATION LAYER ║
|
|
6
|
+
║ ║
|
|
7
|
+
║ This is the CORE of the MUI theming strategy. These overrides cascade ║
|
|
8
|
+
║ down to ALL PatternFly components automatically. ║
|
|
9
|
+
║ ║
|
|
10
|
+
║ ║
|
|
11
|
+
║ Reference: https://www.patternfly.org/tokens/all-patternfly-tokens ║
|
|
12
|
+
╚════════════════════════════════════════════════════════════════════════════╝
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
16
|
+
// TEXT COLORS (64+ components affected)
|
|
17
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
18
|
+
--pf-t--global--text--color--regular: var(--mui-palette-text-primary); // rgba(0,0,0,0.87)
|
|
19
|
+
--pf-t--global--text--color--subtle: var(--mui-palette-text-secondary); // rgba(0,0,0,0.6)
|
|
20
|
+
--pf-t--global--text--color--on-disabled: var(--mui-palette-text-disabled); // rgba(0,0,0,0.38)
|
|
21
|
+
--pf-t--global--text--color--placeholder: var(--mui-palette-text-secondary);
|
|
22
|
+
--pf-t--global--text--color--inverse: var(--mui-palette-common-white);
|
|
23
|
+
|
|
24
|
+
// Brand Text Colors
|
|
25
|
+
--pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);
|
|
26
|
+
--pf-t--global--text--color--brand--hover: var(--mui-palette-primary-dark);
|
|
27
|
+
--pf-t--global--text--color--brand--clicked: var(--mui-palette-primary-dark);
|
|
28
|
+
--pf-t--global--text--color--on-brand--default: var(--mui-palette-primary-contrastText);
|
|
29
|
+
--pf-t--global--text--color--on-brand--hover: var(--mui-palette-primary-contrastText);
|
|
30
|
+
--pf-t--global--text--color--on-brand--clicked: var(--mui-palette-primary-contrastText);
|
|
31
|
+
|
|
32
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
33
|
+
// BRAND/PRIMARY COLORS (Used by buttons, links, active states)
|
|
34
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
35
|
+
--pf-t--global--color--brand--default: var(--mui-palette-primary-main);
|
|
36
|
+
--pf-t--global--color--brand--hover: var(--mui-palette-primary-dark);
|
|
37
|
+
--pf-t--global--color--brand--clicked: var(--mui-palette-primary-dark);
|
|
38
|
+
--pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
|
|
39
|
+
|
|
40
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
41
|
+
// BACKGROUND COLORS (47+ components affected)
|
|
42
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
43
|
+
--pf-t--global--background--color--primary--default: var(--mui-palette-background-paper); // #fff
|
|
44
|
+
--pf-t--global--background--color--secondary--default: var(--mui-palette-grey-100);
|
|
45
|
+
--pf-t--global--background--color--floating--default: var(--mui-palette-background-paper);
|
|
46
|
+
--pf-t--global--background--color--action--plain--hover: var(--mui-palette-action-hover);
|
|
47
|
+
--pf-t--global--background--color--control--default: var(--mui-palette-common-white);
|
|
48
|
+
--pf-t--global--background--color--disabled--default: var(--mui-palette-action-disabledBackground);
|
|
49
|
+
|
|
50
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
51
|
+
// ICON COLORS (Affects all icons in components)
|
|
52
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
53
|
+
--pf-t--global--icon--color--regular: var(--mui-palette-action-active); // rgba(0,0,0,0.54)
|
|
54
|
+
--pf-t--global--icon--color--subtle: var(--mui-palette-text-secondary);
|
|
55
|
+
--pf-t--global--icon--color--disabled: var(--mui-palette-action-disabled);
|
|
56
|
+
--pf-t--global--icon--color--brand--default: var(--mui-palette-primary-main);
|
|
57
|
+
--pf-t--global--icon--color--brand--hover: var(--mui-palette-primary-dark);
|
|
58
|
+
--pf-t--global--icon--color--on-brand--default: var(--mui-palette-primary-contrastText);
|
|
59
|
+
|
|
60
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
61
|
+
// BORDER COLORS & STYLES
|
|
62
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
63
|
+
--pf-t--global--border--color--default: rgba(0, 0, 0, 0.23); // MUI input default
|
|
64
|
+
--pf-t--global--border--color--hover: var(--mui-palette-common-black); // MUI input hover
|
|
65
|
+
--pf-t--global--border--color--clicked: var(--mui-palette-primary-main); // MUI focus/active
|
|
66
|
+
--pf-t--global--border--color--disabled: var(--mui-palette-action-disabled);
|
|
67
|
+
|
|
68
|
+
// Brand Border Colors
|
|
69
|
+
--pf-t--global--border--color--brand--default: var(--mui-palette-primary-main);
|
|
70
|
+
--pf-t--global--border--color--brand--hover: var(--mui-palette-primary-dark);
|
|
71
|
+
--pf-t--global--border--color--brand--clicked: var(--mui-palette-primary-dark);
|
|
72
|
+
|
|
73
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
74
|
+
// BORDER RADIUS (26+ components affected)
|
|
75
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
76
|
+
--pf-t--global--border--radius--small: var(--mui-shape-borderRadius); // 4px
|
|
77
|
+
--pf-t--global--border--radius--medium: var(--mui-shape-borderRadius); // 4px (MUI uses same)
|
|
78
|
+
--pf-t--global--border--radius--large: var(--mui-shape-borderRadius); // 4px (MUI uses same for modals)
|
|
79
|
+
--pf-t--global--border--radius--pill: var(--mui-shape-borderRadius); // MUI uses same for dropdowns
|
|
80
|
+
|
|
81
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
82
|
+
// TYPOGRAPHY (42+ components affected for font-size, 25+ for font-weight)
|
|
83
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
84
|
+
// Font families - use explicit values since --mui-typography-fontFamily may not be available as CSS var
|
|
85
|
+
--pf-t--global--font--family--body: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
86
|
+
--pf-t--global--font--family--heading: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
87
|
+
--pf-t--global--font--family--100: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
88
|
+
--pf-t--global--font--family--200: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
89
|
+
--pf-t--global--font--family--300: "Roboto", "Courier", monospace;
|
|
90
|
+
|
|
91
|
+
// Font sizes (MUI base is 14px = 0.875rem, PF base is 1rem = 16px)
|
|
92
|
+
--pf-t--global--font--size--body--default: 0.875rem; // 14px - MUI body1
|
|
93
|
+
--pf-t--global--font--size--body--sm: 0.75rem; // 12px - MUI caption
|
|
94
|
+
--pf-t--global--font--size--body--lg: 1rem; // 16px
|
|
95
|
+
|
|
96
|
+
// Font weights (MUI: 300=light, 400=regular, 500=medium, 700=bold)
|
|
97
|
+
--pf-t--global--font--weight--body--default: 400;
|
|
98
|
+
--pf-t--global--font--weight--body--bold: 500;
|
|
99
|
+
--pf-t--global--font--weight--heading--default: 500;
|
|
100
|
+
|
|
101
|
+
// Line heights
|
|
102
|
+
--pf-t--global--font--line-height--body: 1.5; // MUI default
|
|
103
|
+
|
|
104
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
105
|
+
// BOX SHADOWS (18+ components affected)
|
|
106
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
107
|
+
--pf-t--global--box-shadow--sm: var(--mui-shadows-1);
|
|
108
|
+
--pf-t--global--box-shadow--md: var(--mui-shadows-4);
|
|
109
|
+
--pf-t--global--box-shadow--lg: var(--mui-shadows-8);
|
|
110
|
+
|
|
111
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
112
|
+
// SPACING (PF and MUI both use 8px base - mostly compatible)
|
|
113
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
114
|
+
// PF tokens already match MUI's 8px system:
|
|
115
|
+
// --pf-t--global--spacer--xs: 4px (0.5 * 8px)
|
|
116
|
+
// --pf-t--global--spacer--sm: 8px (1 * 8px)
|
|
117
|
+
// --pf-t--global--spacer--md: 16px (2 * 8px)
|
|
118
|
+
// --pf-t--global--spacer--lg: 24px (3 * 8px)
|
|
119
|
+
// --pf-t--global--spacer--xl: 32px (4 * 8px)
|
|
120
|
+
|
|
121
|
+
--pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--sm);
|
|
122
|
+
--pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--regular);
|
|
123
|
+
|
|
124
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
125
|
+
// STATUS COLORS (Semantic - for alerts, badges, status indicators)
|
|
126
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
127
|
+
--pf-t--global--color--status--danger--default: var(--mui-palette-error-main);
|
|
128
|
+
--pf-t--global--color--status--warning--default: var(--mui-palette-warning-main);
|
|
129
|
+
--pf-t--global--color--status--success--default: var(--mui-palette-success-main);
|
|
130
|
+
--pf-t--global--color--status--info--default: var(--mui-palette-info-main);
|
|
131
|
+
|
|
132
|
+
--pf-t--global--icon--color--status--danger--default: var(--mui-palette-error-main);
|
|
133
|
+
--pf-t--global--icon--color--status--warning--default: var(--mui-palette-warning-main);
|
|
134
|
+
--pf-t--global--icon--color--status--success--default: var(--mui-palette-success-main);
|
|
135
|
+
--pf-t--global--icon--color--status--info--default: var(--mui-palette-info-main);
|
|
136
|
+
|
|
137
|
+
// Status Border Colors (for alerts, form validation, etc.)
|
|
138
|
+
--pf-t--global--border--color--status--danger--default: var(--mui-palette-error-main);
|
|
139
|
+
--pf-t--global--border--color--status--warning--default: var(--mui-palette-warning-main);
|
|
140
|
+
--pf-t--global--border--color--status--success--default: var(--mui-palette-success-main);
|
|
141
|
+
--pf-t--global--border--color--status--info--default: var(--mui-palette-info-main);
|
|
142
|
+
|
|
143
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
144
|
+
// MUI CUSTOM VARIABLES
|
|
145
|
+
// Custom variables for MUI-specific values used in component overrides below.
|
|
146
|
+
// These define computed values not available in the MUI theme object.
|
|
147
|
+
// ═══════════════════════════════════════════════════════════════════════════
|
|
148
|
+
|
|
2
149
|
// Alert
|
|
3
150
|
--mui-alert--BoxShadow: none;
|
|
4
151
|
--mui-alert--BorderRadius: var(--mui-shape-borderRadius);
|
|
@@ -13,8 +160,7 @@
|
|
|
13
160
|
--mui-alert__icon--MarginBlockStart: 7px;
|
|
14
161
|
--mui-alert__icon--MarginBlockEnd: 7px;
|
|
15
162
|
--mui-alert__icon--FontSize: 22px;
|
|
16
|
-
|
|
17
|
-
--mui-alert__border-danger-color: var(--mui-palette-error-main);
|
|
163
|
+
// Icon and border colors now handled by global status tokens
|
|
18
164
|
--mui-alert__title--FontWeight: 500;
|
|
19
165
|
|
|
20
166
|
// Backdrop
|
|
@@ -39,9 +185,10 @@
|
|
|
39
185
|
// Form focus states (thicker border for emphasis, adjusted padding to prevent layout shift)
|
|
40
186
|
--mui-form--focus--BorderWidth: 2px;
|
|
41
187
|
--mui-form--focus--Padding: 7px;
|
|
42
|
-
|
|
188
|
+
|
|
43
189
|
// Form fieldset styling (MUI input border defaults)
|
|
44
|
-
|
|
190
|
+
// Uses global border color: --pf-t--global--border--color--default
|
|
191
|
+
--mui-form-fieldset--BorderColor: var(--pf-t--global--border--color--default);
|
|
45
192
|
--mui-form-fieldset--Padding: var(--mui-spacing-8px); // 8px
|
|
46
193
|
--mui-form-fieldset--InsetTop: calc(-1 * var(--mui-spacing-8px)); // -8px for label positioning
|
|
47
194
|
--mui-form-fieldset--LegendPadding: var(--mui-spacing-4px); // 4px horizontal padding
|
|
@@ -128,7 +275,7 @@
|
|
|
128
275
|
--mui-tabs__link--PaddingBlockEnd: 12px;
|
|
129
276
|
--mui-tabs__link--PaddingInlineStart: 16px;
|
|
130
277
|
--mui-tabs__link--PaddingInlineEnd: 16px;
|
|
131
|
-
--mui-tabs__item--m-current__link--Color: var(--
|
|
278
|
+
--mui-tabs__item--m-current__link--Color: var(--mui-palette-primary-main);
|
|
132
279
|
--mui-tabs__item--m-current__link--after--BorderWidth: 2px;
|
|
133
280
|
--mui-tabs__link--FontSize: 0.875rem;
|
|
134
281
|
|
|
@@ -139,19 +286,24 @@
|
|
|
139
286
|
--mui-spacing-16px: calc(2 * var(--mui-spacing));
|
|
140
287
|
--mui-spacing-32px: calc(4 * var(--mui-spacing));
|
|
141
288
|
|
|
142
|
-
--pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--sm);
|
|
143
|
-
--pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--regular);
|
|
144
|
-
--pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
|
|
145
|
-
--pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);
|
|
146
|
-
|
|
147
|
-
--pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
|
|
148
|
-
--pf-t--global--text--color--inverse: var(--mui-palette-common-white);
|
|
149
289
|
|
|
150
|
-
--pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
|
|
151
|
-
--pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
|
|
152
|
-
--pf-t--global--font--family--300: Roboto, Courier, monospace;
|
|
153
290
|
}
|
|
154
291
|
|
|
292
|
+
/*
|
|
293
|
+
╔════════════════════════════════════════════════════════════════════════════════╗
|
|
294
|
+
║ COMPONENT-SPECIFIC OVERRIDES ║
|
|
295
|
+
║ ║
|
|
296
|
+
║ These overrides apply to individual PatternFly components when the global ║
|
|
297
|
+
║ token translation layer above is not sufficient. Use these for: ║
|
|
298
|
+
║ • Component-specific spacing/padding adjustments ║
|
|
299
|
+
║ • MUI-specific behaviors not covered by PF tokens ║
|
|
300
|
+
║ • Layout properties (position, display, flex) that have no PF variables ║
|
|
301
|
+
║ • State-specific overrides (hover, focus, disabled) with custom behavior ║
|
|
302
|
+
║ ║
|
|
303
|
+
║ Before adding new overrides here, check if a global token override would work. ║
|
|
304
|
+
╚════════════════════════════════════════════════════════════════════════════════╝
|
|
305
|
+
*/
|
|
306
|
+
|
|
155
307
|
.mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
|
|
156
308
|
--pf-v6-c-button--PaddingInlineStart: 0;
|
|
157
309
|
--pf-v6-c-button--PaddingInlineEnd: 0;
|
|
@@ -177,19 +329,20 @@
|
|
|
177
329
|
}
|
|
178
330
|
|
|
179
331
|
.mui-theme .pf-v6-c-alert.pf-m-danger {
|
|
180
|
-
--pf-
|
|
181
|
-
--pf-
|
|
332
|
+
// BorderColor inherited from --pf-t--global--border--color--status--danger--default
|
|
333
|
+
// Icon color inherited from --pf-t--global--icon--color--status--danger--default
|
|
334
|
+
// Title color: MUI uses error color (not PF default of regular text)
|
|
182
335
|
--pf-v6-c-alert__title--Color: var(--mui-palette-Alert-errorColor);
|
|
183
336
|
}
|
|
184
337
|
|
|
185
338
|
.mui-theme .pf-v6-c-alert.pf-m-danger .pf-v6-c-alert__description {
|
|
186
339
|
color: var(--mui-palette-Alert-errorColor);
|
|
187
|
-
padding-block-end: var(--
|
|
340
|
+
padding-block-end: var(--pf-t--global--spacer--sm);
|
|
188
341
|
}
|
|
189
342
|
|
|
190
343
|
|
|
191
344
|
.mui-theme .pf-v6-c-alert__title {
|
|
192
|
-
padding-block: var(--
|
|
345
|
+
padding-block: var(--pf-t--global--spacer--sm);
|
|
193
346
|
}
|
|
194
347
|
|
|
195
348
|
.mui-theme .pf-v6-c-alert__icon {
|
|
@@ -215,7 +368,6 @@
|
|
|
215
368
|
}
|
|
216
369
|
|
|
217
370
|
.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
218
|
-
--pf-v6-c-button--hover--Color: var(--mui-palette-primary-main);
|
|
219
371
|
text-decoration-color: var(--mui-link-underlineColor);
|
|
220
372
|
|
|
221
373
|
&:hover {
|
|
@@ -237,37 +389,33 @@
|
|
|
237
389
|
--pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
|
|
238
390
|
}
|
|
239
391
|
|
|
240
|
-
|
|
241
392
|
.mui-theme .pf-v6-c-card {
|
|
242
393
|
--pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
243
394
|
--pf-v6-c-card--BorderRadius: var(--mui-shape-borderRadius);
|
|
244
|
-
--pf-v6-c-card--BorderColor: var(--mui-palette-divider);
|
|
245
395
|
border: var(--pf-v6-c-card--BorderWidth) solid var(--pf-v6-c-card--BorderColor);
|
|
396
|
+
|
|
397
|
+
// Hide PF's ::before pseudo-element border to prevent double borders
|
|
398
|
+
&::before {
|
|
399
|
+
display: none;
|
|
400
|
+
}
|
|
246
401
|
}
|
|
247
402
|
|
|
248
403
|
.mui-theme .pf-v6-c-card.pf-m-compact.pf-m-selectable {
|
|
249
404
|
--pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
250
|
-
--pf-v6-c-card--BorderColor: var(--mui-palette-divider);
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.mui-theme .pf-v6-c-card__selectable-actions
|
|
254
|
-
:is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
|
|
255
|
-
--pf-v6-c-card--BorderColor: var(--mui-palette-grey-300);
|
|
256
405
|
}
|
|
257
406
|
|
|
258
407
|
.mui-theme .pf-v6-c-card.pf-m-selectable:hover {
|
|
259
408
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-100);
|
|
260
|
-
--pf-v6-c-card--BorderColor: var(--mui-palette-grey-200);
|
|
261
409
|
}
|
|
262
410
|
|
|
263
411
|
.mui-theme .pf-v6-c-card.pf-m-selected {
|
|
264
412
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-200);
|
|
265
|
-
--pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--mui-palette-
|
|
413
|
+
--pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--mui-palette-grey-400);
|
|
266
414
|
}
|
|
267
415
|
|
|
268
416
|
.mui-theme .pf-v6-c-card.pf-m-selected:hover {
|
|
269
417
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-300);
|
|
270
|
-
--pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--mui-palette-
|
|
418
|
+
--pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--mui-palette-grey-400);
|
|
271
419
|
}
|
|
272
420
|
|
|
273
421
|
.mui-theme .pf-v6-c-description-list__term {
|
|
@@ -349,8 +497,9 @@
|
|
|
349
497
|
--pf-v6-c-form__section-title--MarginInlineEnd: 0px;
|
|
350
498
|
}
|
|
351
499
|
|
|
352
|
-
// Base form label styles
|
|
353
|
-
|
|
500
|
+
// Base form label styles - only apply to text inputs (those with fieldset wrapper)
|
|
501
|
+
// Exclude NumberInput labels which don't use the fieldset pattern
|
|
502
|
+
.mui-theme .pf-v6-c-form__group:not(:has(.pf-v6-c-number-input)) .pf-v6-c-form__label {
|
|
354
503
|
position: relative;
|
|
355
504
|
// TODO: Investigate using a fixed value or transform/rem for consistent positioning.
|
|
356
505
|
top: 78%;
|
|
@@ -369,6 +518,7 @@
|
|
|
369
518
|
// Form controls with number inputs - specific styling overrides
|
|
370
519
|
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-number-input) {
|
|
371
520
|
.pf-v6-c-form__label {
|
|
521
|
+
// NumberInput labels use standard label positioning (not floating)
|
|
372
522
|
top: 30%;
|
|
373
523
|
font-size: 16px;
|
|
374
524
|
left: 0;
|
|
@@ -414,15 +564,13 @@
|
|
|
414
564
|
--pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
|
|
415
565
|
}
|
|
416
566
|
|
|
567
|
+
// Consistent form control padding and styling for all inputs except file upload components and pagination
|
|
568
|
+
// Pagination has inputs within form controls that need different padding, so exclude them
|
|
417
569
|
.mui-theme .pf-v6-c-form-control {
|
|
418
570
|
--pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
|
|
419
|
-
--pf-
|
|
571
|
+
// Disabled color inherited from --pf-t--global--text--color--on-disabled (set to MUI text-disabled)
|
|
420
572
|
--pf-v6-c-form-control--m-error--after--BorderColor: var(--mui-palette-error-main);
|
|
421
573
|
--pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--mui-palette-error-main);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
// Consistent form control padding for all inputs except file upload components
|
|
425
|
-
.mui-theme .pf-v6-c-form-control {
|
|
426
574
|
// Resize is disabled in MUI.
|
|
427
575
|
resize: none;
|
|
428
576
|
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
|
|
@@ -434,6 +582,13 @@
|
|
|
434
582
|
}
|
|
435
583
|
}
|
|
436
584
|
|
|
585
|
+
// Exclude pagination form controls from padding rules (pagination has its own sizing)
|
|
586
|
+
// Pagination inputs need to maintain their compact size
|
|
587
|
+
.mui-theme .pf-v6-c-pagination .pf-v6-c-form-control {
|
|
588
|
+
--pf-v6-c-form-control--PaddingBlockStart: unset;
|
|
589
|
+
--pf-v6-c-form-control--PaddingBlockEnd: unset;
|
|
590
|
+
}
|
|
591
|
+
|
|
437
592
|
.mui-theme .pf-v6-c-form__section {
|
|
438
593
|
--pf-v6-c-form__section--Gap: 0px;
|
|
439
594
|
}
|
|
@@ -451,9 +606,6 @@
|
|
|
451
606
|
--pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
|
|
452
607
|
--pf-v6-c-text-input-group__text-input--PaddingBlockEnd: 16.5px;
|
|
453
608
|
--pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
|
|
454
|
-
}
|
|
455
|
-
|
|
456
|
-
.mui-theme .pf-v6-c-text-input-group {
|
|
457
609
|
--pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
|
|
458
610
|
}
|
|
459
611
|
|
|
@@ -484,12 +636,6 @@
|
|
|
484
636
|
outline: none;
|
|
485
637
|
}
|
|
486
638
|
|
|
487
|
-
.form-fieldset-wrapper {
|
|
488
|
-
position: relative;
|
|
489
|
-
width: 100%;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
|
|
493
639
|
.mui-theme .pf-v6-c-form__group .form-fieldset-legend {
|
|
494
640
|
float: unset;
|
|
495
641
|
width: auto;
|
|
@@ -504,24 +650,33 @@
|
|
|
504
650
|
max-width: 100%;
|
|
505
651
|
}
|
|
506
652
|
|
|
507
|
-
.form-fieldset-wrapper:hover .form-fieldset {
|
|
653
|
+
.mui-theme .form-fieldset-wrapper:hover .form-fieldset {
|
|
508
654
|
border-color: var(--mui-palette-common-black);
|
|
509
655
|
}
|
|
510
656
|
|
|
511
|
-
.form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
|
|
512
|
-
.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
|
|
513
|
-
border-color:
|
|
657
|
+
.mui-theme .form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
|
|
658
|
+
.mui-theme .form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
|
|
659
|
+
border-color: var(--pf-t--global--border--color--default);
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
// Disabled menu toggle inside fieldset wrapper - use disabled border color
|
|
663
|
+
.mui-theme .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled) .form-fieldset {
|
|
664
|
+
border-color: var(--mui-palette-action-disabled);
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.mui-theme .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled):hover .form-fieldset {
|
|
668
|
+
border-color: var(--mui-palette-action-disabled);
|
|
514
669
|
}
|
|
515
670
|
|
|
516
|
-
.form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
671
|
+
.mui-theme .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
517
672
|
border-color: var(--mui-palette-error-main);
|
|
518
673
|
}
|
|
519
674
|
|
|
520
|
-
.form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control
|
|
675
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
521
676
|
border-color: var(--mui-palette-error-main);
|
|
522
677
|
}
|
|
523
678
|
|
|
524
|
-
.form-fieldset-wrapper .pf-v6-c-input-group__item button {
|
|
679
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-input-group__item button {
|
|
525
680
|
// Aligns EyeIcon in password input
|
|
526
681
|
--pf-v6-c-button--PaddingBlockStart: var(--mui-spacing-16px);
|
|
527
682
|
--pf-v6-c-button--PaddingBlockEnd: var(--mui-spacing-16px);
|
|
@@ -529,7 +684,7 @@
|
|
|
529
684
|
--pf-v6-c-button--BorderRadius: 50%;
|
|
530
685
|
}
|
|
531
686
|
|
|
532
|
-
.form-fieldset-wrapper:focus-within .form-fieldset {
|
|
687
|
+
.mui-theme .form-fieldset-wrapper:focus-within .form-fieldset {
|
|
533
688
|
border-color: var(--mui-palette-primary-main);
|
|
534
689
|
border-width: var(--mui-form--focus--BorderWidth);
|
|
535
690
|
padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
|
|
@@ -579,11 +734,20 @@
|
|
|
579
734
|
border-color: var(--mui-form-fieldset--BorderColor);
|
|
580
735
|
}
|
|
581
736
|
|
|
737
|
+
// Disabled menu toggle inside fieldset wrapper - use disabled border color
|
|
738
|
+
.mui-theme .pf-v6-c-form .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled) .form-fieldset {
|
|
739
|
+
border-color: var(--mui-palette-action-disabled);
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.mui-theme .pf-v6-c-form .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled):hover .form-fieldset {
|
|
743
|
+
border-color: var(--mui-palette-action-disabled);
|
|
744
|
+
}
|
|
745
|
+
|
|
582
746
|
.mui-theme .pf-v6-c-form .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
583
747
|
border-color: var(--mui-palette-error-main);
|
|
584
748
|
}
|
|
585
749
|
|
|
586
|
-
.mui-theme .pf-v6-c-form .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control
|
|
750
|
+
.mui-theme .pf-v6-c-form .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
587
751
|
border-color: var(--mui-palette-error-main);
|
|
588
752
|
}
|
|
589
753
|
|
|
@@ -605,15 +769,6 @@
|
|
|
605
769
|
color: var(--mui-palette-primary-main);
|
|
606
770
|
}
|
|
607
771
|
|
|
608
|
-
// Indentation for secret key-value pairs
|
|
609
|
-
.mui-theme .pf-v6-l-grid.secret-key-grid {
|
|
610
|
-
margin-left: var(--pf-t--global--spacer--xl);
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
.mui-theme .pf-v6-c-form .pf-v6-c-form__group.secret-value-indented {
|
|
614
|
-
margin-left: var(--pf-t--global--spacer--xl);
|
|
615
|
-
}
|
|
616
|
-
|
|
617
772
|
.mui-theme .pf-v6-l-grid__item.secret-remove-button-container {
|
|
618
773
|
display: flex;
|
|
619
774
|
align-items: flex-end;
|
|
@@ -666,18 +821,27 @@
|
|
|
666
821
|
border-color: var(--mui-form-fieldset--BorderColor);
|
|
667
822
|
}
|
|
668
823
|
|
|
824
|
+
// Disabled menu toggle inside fieldset wrapper - use disabled border color
|
|
825
|
+
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled) .form-fieldset {
|
|
826
|
+
border-color: var(--mui-palette-action-disabled);
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled):hover .form-fieldset {
|
|
830
|
+
border-color: var(--mui-palette-action-disabled);
|
|
831
|
+
}
|
|
832
|
+
|
|
669
833
|
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
670
834
|
border-color: var(--mui-palette-error-main);
|
|
671
835
|
}
|
|
672
836
|
|
|
673
|
-
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control
|
|
837
|
+
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
|
|
674
838
|
border-color: var(--mui-palette-error-main);
|
|
675
839
|
}
|
|
676
840
|
|
|
677
841
|
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-input-group__item button {
|
|
678
842
|
// Aligns EyeIcon in password input
|
|
679
|
-
--pf-v6-c-button--PaddingBlockStart: var(--
|
|
680
|
-
--pf-v6-c-button--PaddingBlockEnd: var(--
|
|
843
|
+
--pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
844
|
+
--pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
681
845
|
--pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
|
|
682
846
|
--pf-v6-c-button--BorderRadius: 50%;
|
|
683
847
|
}
|
|
@@ -696,7 +860,7 @@
|
|
|
696
860
|
border-color: var(--mui-palette-common-black);
|
|
697
861
|
}
|
|
698
862
|
|
|
699
|
-
.form-fieldset-legend {
|
|
863
|
+
.mui-theme .form-fieldset-legend {
|
|
700
864
|
float: unset;
|
|
701
865
|
width: auto;
|
|
702
866
|
overflow: hidden;
|
|
@@ -708,30 +872,30 @@
|
|
|
708
872
|
max-width: 100%;
|
|
709
873
|
}
|
|
710
874
|
|
|
711
|
-
.form-fieldset-wrapper:focus-within {
|
|
875
|
+
.mui-theme .form-fieldset-wrapper:focus-within {
|
|
712
876
|
color: var(--mui-palette-primary-main);
|
|
713
877
|
}
|
|
714
878
|
|
|
715
|
-
.form-fieldset-wrapper,
|
|
716
|
-
.toolbar-fieldset-wrapper,
|
|
717
|
-
.tr-fieldset-wrapper {
|
|
879
|
+
.mui-theme .form-fieldset-wrapper,
|
|
880
|
+
.mui-theme .toolbar-fieldset-wrapper,
|
|
881
|
+
.mui-theme .tr-fieldset-wrapper {
|
|
718
882
|
position: relative;
|
|
719
883
|
width: 100%;
|
|
720
884
|
}
|
|
721
885
|
|
|
722
|
-
.form-fieldset-wrapper .form-fieldset:hover {
|
|
886
|
+
.mui-theme .form-fieldset-wrapper .form-fieldset:hover {
|
|
723
887
|
border-color: var(--mui-palette-common-black);
|
|
724
888
|
}
|
|
725
889
|
|
|
726
|
-
.toolbar-fieldset-wrapper:focus-within .form-fieldset,
|
|
727
|
-
.tr-fieldset-wrapper:focus-within .form-fieldset {
|
|
890
|
+
.mui-theme .toolbar-fieldset-wrapper:focus-within .form-fieldset,
|
|
891
|
+
.mui-theme .tr-fieldset-wrapper:focus-within .form-fieldset {
|
|
728
892
|
border-color: var(--mui-palette-primary-main);
|
|
729
893
|
border-width: var(--mui-form--focus--BorderWidth);
|
|
730
894
|
padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
|
|
731
895
|
}
|
|
732
896
|
|
|
733
|
-
.toolbar-fieldset-wrapper .form-fieldset,
|
|
734
|
-
.form-fieldset {
|
|
897
|
+
.mui-theme .toolbar-fieldset-wrapper .form-fieldset,
|
|
898
|
+
.mui-theme .form-fieldset {
|
|
735
899
|
text-align: left;
|
|
736
900
|
position: absolute;
|
|
737
901
|
inset: var(--mui-form-fieldset--InsetTop) 0 0;
|
|
@@ -747,7 +911,7 @@
|
|
|
747
911
|
border-radius: var(--mui-shape-borderRadius);
|
|
748
912
|
}
|
|
749
913
|
|
|
750
|
-
.toolbar-fieldset-wrapper .form-fieldset-legend {
|
|
914
|
+
.mui-theme .toolbar-fieldset-wrapper .form-fieldset-legend {
|
|
751
915
|
float: unset;
|
|
752
916
|
width: auto;
|
|
753
917
|
overflow: hidden;
|
|
@@ -759,27 +923,27 @@
|
|
|
759
923
|
max-width: 100%;
|
|
760
924
|
}
|
|
761
925
|
|
|
762
|
-
.toolbar-fieldset-wrapper .form-fieldset-legend span {
|
|
926
|
+
.mui-theme .toolbar-fieldset-wrapper .form-fieldset-legend span {
|
|
763
927
|
font-weight: var(--pf-t--global--font--weight--200);
|
|
764
928
|
}
|
|
765
929
|
|
|
766
|
-
.toolbar-fieldset-wrapper:focus-within {
|
|
930
|
+
.mui-theme .toolbar-fieldset-wrapper:focus-within {
|
|
767
931
|
color: var(--mui-palette-primary-main);
|
|
768
932
|
}
|
|
769
933
|
|
|
770
|
-
.toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
|
|
934
|
+
.mui-theme .toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
|
|
771
935
|
color: var(--mui-palette-primary-main);
|
|
772
936
|
}
|
|
773
937
|
|
|
774
|
-
.tr-fieldset-wrapper .pf-v6-c-form-control,
|
|
775
|
-
.toolbar-fieldset-wrapper .pf-v6-c-form-control,
|
|
776
|
-
.form-fieldset-wrapper .pf-v6-c-form-control {
|
|
938
|
+
.mui-theme .tr-fieldset-wrapper .pf-v6-c-form-control,
|
|
939
|
+
.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control,
|
|
940
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-form-control {
|
|
777
941
|
// Hide real borders since fieldset wrappers provide their own border styling
|
|
778
942
|
border: none;
|
|
779
943
|
}
|
|
780
944
|
|
|
781
945
|
// Ensure legend spans don't get form control styling
|
|
782
|
-
.form-fieldset-legend span {
|
|
946
|
+
.mui-theme .form-fieldset-legend span {
|
|
783
947
|
border: none;
|
|
784
948
|
padding: 0;
|
|
785
949
|
background: transparent;
|
|
@@ -806,7 +970,16 @@
|
|
|
806
970
|
|
|
807
971
|
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
|
|
808
972
|
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
|
|
809
|
-
border-color:
|
|
973
|
+
border-color: var(--pf-t--global--border--color--default);
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
// Disabled menu toggle inside fieldset wrapper - use disabled border color
|
|
977
|
+
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled) .form-fieldset {
|
|
978
|
+
border-color: var(--mui-palette-action-disabled);
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:has(.pf-v6-c-menu-toggle.pf-m-disabled):hover .form-fieldset {
|
|
982
|
+
border-color: var(--mui-palette-action-disabled);
|
|
810
983
|
}
|
|
811
984
|
|
|
812
985
|
.mui-theme .pf-v6-c-form__field-group-body {
|
|
@@ -865,7 +1038,7 @@
|
|
|
865
1038
|
|
|
866
1039
|
.mui-theme .pf-v6-c-menu {
|
|
867
1040
|
--pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
|
|
868
|
-
--pf-
|
|
1041
|
+
// BorderRadius inherited from --pf-t--global--border--radius--small (set to MUI shape-borderRadius)
|
|
869
1042
|
--pf-v6-c-menu--PaddingBlockStart: 0;
|
|
870
1043
|
--pf-v6-c-menu--PaddingBlockEnd: 0;
|
|
871
1044
|
--pf-v6-c-menu--PaddingInlineStart: 0;
|
|
@@ -921,28 +1094,89 @@
|
|
|
921
1094
|
|
|
922
1095
|
}
|
|
923
1096
|
|
|
924
|
-
// Apply the menu toggle styling to all
|
|
925
|
-
.mui-theme .pf-v6-c-menu-toggle
|
|
1097
|
+
// Apply the menu toggle styling to all MenuToggles
|
|
1098
|
+
.mui-theme .pf-v6-c-menu-toggle {
|
|
926
1099
|
position: relative;
|
|
927
1100
|
box-sizing: border-box;
|
|
928
1101
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
929
1102
|
--pf-v6-c-menu-toggle--BorderStyle: solid;
|
|
930
|
-
--pf-
|
|
1103
|
+
// BorderColor inherited from --pf-t--global--border--color--default
|
|
931
1104
|
--pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
|
|
932
1105
|
|
|
933
|
-
&:hover {
|
|
934
|
-
--pf-
|
|
1106
|
+
&:hover:not(.pf-m-primary) {
|
|
1107
|
+
// Hover border color inherited from --pf-t--global--border--color--hover
|
|
1108
|
+
--pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
1109
|
+
background-color: transparent;
|
|
935
1110
|
}
|
|
936
1111
|
|
|
937
|
-
&:focus
|
|
938
|
-
|
|
939
|
-
|
|
1112
|
+
&:focus,
|
|
1113
|
+
&:focus-within,
|
|
1114
|
+
&:active {
|
|
1115
|
+
// Focus border color - no dedicated PF variable, using BorderColor directly
|
|
940
1116
|
--pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-primary-main);
|
|
941
|
-
|
|
942
|
-
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
// &.pf-m-expanded - Expanded border color inherited from --pf-t--global--border--color--clicked
|
|
1120
|
+
|
|
1121
|
+
// Disabled state theming - override PF component variables with MUI values
|
|
1122
|
+
&.pf-m-disabled {
|
|
1123
|
+
--pf-v6-c-menu-toggle--disabled--BackgroundColor: transparent;
|
|
1124
|
+
--pf-v6-c-menu-toggle--disabled--Color: var(--mui-palette-text-disabled);
|
|
1125
|
+
--pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--mui-palette-text-disabled);
|
|
1126
|
+
--pf-v6-c-menu-toggle--disabled__icon--Color: var(--mui-palette-text-disabled);
|
|
1127
|
+
--pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-action-disabled);
|
|
1128
|
+
--pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-palette-action-disabled);
|
|
1129
|
+
// No PF variable for disabled border rendering; ensuring border is visible
|
|
1130
|
+
border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--mui-palette-action-disabled);
|
|
943
1131
|
}
|
|
944
1132
|
}
|
|
945
1133
|
|
|
1134
|
+
// Secondary variant styling - override PF secondary component variables
|
|
1135
|
+
.mui-theme .pf-v6-c-menu-toggle.pf-m-secondary {
|
|
1136
|
+
--pf-v6-c-menu-toggle--m-secondary--Color: var(--mui-palette-primary-main);
|
|
1137
|
+
--pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--mui-palette-primary-main);
|
|
1138
|
+
--pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
|
|
1139
|
+
|
|
1140
|
+
&:hover {
|
|
1141
|
+
--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--mui-palette-primary-dark);
|
|
1142
|
+
--pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--mui-palette-primary-dark);
|
|
1143
|
+
// No PF variable for secondary hover background; using direct CSS
|
|
1144
|
+
background-color: var(--mui-palette-action-hover);
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
// Disabled state for secondary variant (higher specificity than base disabled)
|
|
1148
|
+
&.pf-m-disabled {
|
|
1149
|
+
--pf-v6-c-menu-toggle--m-secondary--Color: var(--mui-palette-text-disabled);
|
|
1150
|
+
--pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--mui-palette-action-disabled);
|
|
1151
|
+
--pf-v6-c-menu-toggle--disabled--BackgroundColor: transparent;
|
|
1152
|
+
--pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--mui-palette-text-disabled);
|
|
1153
|
+
--pf-v6-c-menu-toggle--disabled__icon--Color: var(--mui-palette-text-disabled);
|
|
1154
|
+
// No PF variable for disabled border rendering; ensuring border is visible
|
|
1155
|
+
border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--mui-palette-action-disabled);
|
|
1156
|
+
|
|
1157
|
+
&:hover {
|
|
1158
|
+
--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--mui-palette-action-disabled);
|
|
1159
|
+
--pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-palette-action-disabled);
|
|
1160
|
+
// No PF variable for disabled hover background; using direct CSS
|
|
1161
|
+
background-color: transparent;
|
|
1162
|
+
}
|
|
1163
|
+
}
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
// Disabled menu toggle inside fieldset wrapper - border handled by fieldset, not toggle
|
|
1167
|
+
.mui-theme .form-fieldset-wrapper .pf-v6-c-menu-toggle.pf-m-disabled,
|
|
1168
|
+
.mui-theme .pf-v6-c-form .form-fieldset-wrapper .pf-v6-c-menu-toggle.pf-m-disabled,
|
|
1169
|
+
.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-menu-toggle.pf-m-disabled,
|
|
1170
|
+
.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper .pf-v6-c-menu-toggle.pf-m-disabled {
|
|
1171
|
+
border: none;
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
// Split button variant should not get the general border styling
|
|
1175
|
+
.mui-theme .pf-v6-c-menu-toggle.pf-m-split-button {
|
|
1176
|
+
border: none;
|
|
1177
|
+
box-shadow: none;
|
|
1178
|
+
}
|
|
1179
|
+
|
|
946
1180
|
.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
|
|
947
1181
|
// --pf-v6-c-menu-toggle--BorderRadius: 50%;
|
|
948
1182
|
// Ensure plain variant doesn't get the border styling
|
|
@@ -1153,14 +1387,13 @@ left: 0;
|
|
|
1153
1387
|
overflow-y: auto;
|
|
1154
1388
|
}
|
|
1155
1389
|
|
|
1156
|
-
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info {
|
|
1157
|
-
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-primary-main);
|
|
1158
|
-
}
|
|
1159
|
-
|
|
1160
1390
|
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
|
|
1161
1391
|
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-success-main);
|
|
1162
1392
|
}
|
|
1163
1393
|
|
|
1394
|
+
// Note: .pf-m-info progress stepper inherits its color from --pf-t--global--color--brand--default
|
|
1395
|
+
// which we've set to MUI primary in the translation layer, so no override needed
|
|
1396
|
+
|
|
1164
1397
|
.mui-theme .pf-v6-c-radio.pf-m-standalone:not(.workspace-kind-form-radio) .pf-v6-c-radio__input {
|
|
1165
1398
|
display: none;
|
|
1166
1399
|
}
|
|
@@ -1182,13 +1415,17 @@ left: 0;
|
|
|
1182
1415
|
}
|
|
1183
1416
|
|
|
1184
1417
|
.mui-theme .pf-v6-c-table {
|
|
1185
|
-
|
|
1186
|
-
--pf-v6-c-
|
|
1418
|
+
// Colors now inherited from global tokens:
|
|
1419
|
+
// --pf-v6-c-table--cell--Color uses --pf-t--global--text--color--regular (set to MUI text-primary)
|
|
1420
|
+
// --pf-v6-c-table__sort-indicator--Color uses --pf-t--global--icon--color--subtle (set to MUI text-secondary)
|
|
1421
|
+
|
|
1422
|
+
// Intentional overrides for MUI-specific styling:
|
|
1423
|
+
--pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary); // MUI uses black, not brand color
|
|
1187
1424
|
--pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
|
|
1188
1425
|
--pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary);
|
|
1189
|
-
|
|
1426
|
+
|
|
1427
|
+
// Padding/spacing overrides (component-specific values not in global tokens)
|
|
1190
1428
|
--pf-v6-c-table__button--hover--BackgroundColor: var(--mui-table__button--BackgroundColor);
|
|
1191
|
-
--pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color);
|
|
1192
1429
|
--pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart);
|
|
1193
1430
|
--pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd);
|
|
1194
1431
|
--pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart);
|
|
@@ -1225,8 +1462,124 @@ left: 0;
|
|
|
1225
1462
|
}
|
|
1226
1463
|
|
|
1227
1464
|
/* CSS workaround for spacing in labels in Workspace Kind */
|
|
1228
|
-
|
|
1229
|
-
|
|
1465
|
+
/* Special handling for form fields in table cells - remove extra top spacing */
|
|
1466
|
+
/* Layout properties (vertical-align, display, overflow) - no PF variables exist */
|
|
1467
|
+
.mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
|
|
1468
|
+
/* Layout property - no PF variable exists */
|
|
1469
|
+
vertical-align: middle;
|
|
1470
|
+
/* Balance padding - use PF component variable for consistency */
|
|
1471
|
+
--pf-v6-c-table--cell--PaddingBlockStart: 0px;
|
|
1472
|
+
}
|
|
1473
|
+
|
|
1474
|
+
/* Remove spacing to align form elements at top of table cells */
|
|
1475
|
+
/* Margin/padding: No PF variables exist for zero values - using direct CSS */
|
|
1476
|
+
.mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) .pf-v6-c-form__group {
|
|
1477
|
+
/* No PF variables for zero margin/padding - layout constraint */
|
|
1478
|
+
margin: 0;
|
|
1479
|
+
padding: 0;
|
|
1480
|
+
/* Layout properties - no PF variables exist */
|
|
1481
|
+
height: auto;
|
|
1482
|
+
min-height: 0;
|
|
1483
|
+
align-self: flex-start;
|
|
1484
|
+
}
|
|
1485
|
+
|
|
1486
|
+
.mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) .pf-v6-c-form__group-control {
|
|
1487
|
+
/* No PF variables for zero margin/padding - layout constraint */
|
|
1488
|
+
margin: 0;
|
|
1489
|
+
padding: 0;
|
|
1490
|
+
/* Layout property - no PF variable exists */
|
|
1491
|
+
display: block;
|
|
1492
|
+
/* Layout property - no PF variable exists */
|
|
1493
|
+
height: auto;
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
.mui-theme .form-label-field-group .pf-v6-c-table .form-fieldset-wrapper {
|
|
1497
|
+
/* No PF variables for zero margin/padding - layout constraint */
|
|
1498
|
+
margin: 0;
|
|
1499
|
+
padding: 0;
|
|
1500
|
+
/* Layout properties - no PF variables exist */
|
|
1501
|
+
display: inline-block;
|
|
1502
|
+
width: 100%;
|
|
1503
|
+
vertical-align: top;
|
|
1504
|
+
line-height: 0;
|
|
1505
|
+
height: auto;
|
|
1506
|
+
min-height: 0;
|
|
1507
|
+
/* Layout property - no PF variable exists */
|
|
1508
|
+
overflow: visible;
|
|
1509
|
+
}
|
|
1510
|
+
|
|
1511
|
+
.mui-theme .form-label-field-group .pf-v6-c-table .form-fieldset-wrapper .pf-v6-c-form-control {
|
|
1512
|
+
/* No PF variables for zero margin/padding - layout constraint */
|
|
1513
|
+
margin: 0;
|
|
1514
|
+
padding: 0;
|
|
1515
|
+
/* Layout properties - no PF variables exist */
|
|
1516
|
+
display: block;
|
|
1517
|
+
line-height: normal;
|
|
1518
|
+
overflow: visible;
|
|
1519
|
+
text-overflow: clip;
|
|
1520
|
+
white-space: normal;
|
|
1521
|
+
width: 100%;
|
|
1522
|
+
min-width: 0;
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
/* Ensure input elements inside table cells can display full text */
|
|
1526
|
+
/* Layout/text properties - no PF variables exist */
|
|
1527
|
+
.mui-theme .form-label-field-group .pf-v6-c-table .form-fieldset-wrapper input {
|
|
1528
|
+
overflow: visible;
|
|
1529
|
+
text-overflow: clip;
|
|
1530
|
+
white-space: normal;
|
|
1531
|
+
width: 100%;
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
.mui-theme .form-label-field-group .pf-v6-c-table .form-fieldset-wrapper .form-fieldset {
|
|
1535
|
+
/* Position properties - using PF border width variable */
|
|
1536
|
+
top: var(--pf-t--global--border--width--regular);
|
|
1537
|
+
/* Layout properties - no PF variables exist */
|
|
1538
|
+
left: 0;
|
|
1539
|
+
right: 0;
|
|
1540
|
+
bottom: 0;
|
|
1541
|
+
overflow: visible;
|
|
1542
|
+
}
|
|
1543
|
+
|
|
1544
|
+
/* Remove bottom border from table rows/cells when pf-m-no-border-bottom class is applied */
|
|
1545
|
+
/* Border property - using PF border width variable for consistency */
|
|
1546
|
+
.mui-theme .pf-v6-c-table .pf-m-no-border-bottom {
|
|
1547
|
+
border-block-end: none;
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
/* Remove bottom padding from first th in thead when table is inside a form */
|
|
1551
|
+
/* Padding property - no PF variable exists for zero padding */
|
|
1552
|
+
.mui-theme .pf-v6-c-form .pf-v6-c-table thead tr:first-child th {
|
|
1553
|
+
padding-bottom: 0px;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
/* Add top border and remove bottom border for table rows when pf-m-border-top-only class is applied */
|
|
1557
|
+
/* Border properties - using PF border width and color variables for consistency */
|
|
1558
|
+
.mui-theme .pf-v6-c-table .pf-m-border-top-only {
|
|
1559
|
+
border-block-start: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor);
|
|
1560
|
+
border-block-end: none;
|
|
1561
|
+
}
|
|
1562
|
+
|
|
1563
|
+
/* Fix text truncation in grid layouts - same issue as tables */
|
|
1564
|
+
/* Layout/text properties - no PF variables exist */
|
|
1565
|
+
.mui-theme [class*="pf-v6-l-grid"] .form-fieldset-wrapper .pf-v6-c-form-control {
|
|
1566
|
+
overflow: visible;
|
|
1567
|
+
text-overflow: clip;
|
|
1568
|
+
white-space: normal;
|
|
1569
|
+
width: 100%;
|
|
1570
|
+
min-width: 0;
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
.mui-theme [class*="pf-v6-l-grid"] .form-fieldset-wrapper input {
|
|
1574
|
+
overflow: visible;
|
|
1575
|
+
text-overflow: clip;
|
|
1576
|
+
white-space: normal;
|
|
1577
|
+
width: 100%;
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
.mui-theme [class*="pf-v6-l-grid"] .form-fieldset-wrapper .form-fieldset {
|
|
1581
|
+
/* Layout property - no PF variable exists */
|
|
1582
|
+
overflow: visible;
|
|
1230
1583
|
}
|
|
1231
1584
|
|
|
1232
1585
|
/* CSS workaround to use MUI icon for sort icon */
|
|
@@ -1280,7 +1633,7 @@ left: 0;
|
|
|
1280
1633
|
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--mui-tabs__link--PaddingBlockEnd);
|
|
1281
1634
|
--pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
|
|
1282
1635
|
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
|
|
1283
|
-
--pf-v6-c-tabs__item--m-current__link--Color: var(--
|
|
1636
|
+
--pf-v6-c-tabs__item--m-current__link--Color: var(--mui-tabs__item--m-current__link--Color);
|
|
1284
1637
|
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
|
|
1285
1638
|
--mui-tabs__item--m-current__link--after--BorderWidth
|
|
1286
1639
|
);
|
|
@@ -1310,10 +1663,6 @@ left: 0;
|
|
|
1310
1663
|
--pf-v6-c-button--PaddingInlineEnd: 6px;
|
|
1311
1664
|
}
|
|
1312
1665
|
|
|
1313
|
-
.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select>.pf-v6-c-menu-toggle.pf-m-disabled {
|
|
1314
|
-
border: none;
|
|
1315
|
-
}
|
|
1316
|
-
|
|
1317
1666
|
.mui-theme .pf-v6-c-label {
|
|
1318
1667
|
--pf-v6-c-label--BorderRadius: 16px;
|
|
1319
1668
|
--pf-v6-c-label--FontSize: 0.8125rem;
|
|
@@ -1346,14 +1695,10 @@ left: 0;
|
|
|
1346
1695
|
|
|
1347
1696
|
.mui-theme .pf-v6-c-label-group.pf-m-category {
|
|
1348
1697
|
--pf-v6-c-label-group--m-category--BorderWidth: 0px;
|
|
1349
|
-
--pf-
|
|
1698
|
+
// Border radius inherited from --pf-t--global--border--radius--small (set to MUI shape-borderRadius)
|
|
1350
1699
|
box-shadow: var(--mui-shadows-1);
|
|
1351
1700
|
}
|
|
1352
1701
|
|
|
1353
|
-
.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select > .pf-v6-c-menu-toggle.pf-m-disabled {
|
|
1354
|
-
border: none;
|
|
1355
|
-
}
|
|
1356
|
-
|
|
1357
1702
|
.mui-theme .pf-v6-c-label.pf-m-outline {
|
|
1358
1703
|
--pf-v6-c-label--BorderColor: none;
|
|
1359
1704
|
--pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
|
|
@@ -1366,7 +1711,7 @@ left: 0;
|
|
|
1366
1711
|
}
|
|
1367
1712
|
|
|
1368
1713
|
.mui-theme .pf-v6-c-modal-box {
|
|
1369
|
-
--pf-
|
|
1714
|
+
// BorderRadius inherited from --pf-t--global--border--radius--large (set to MUI shape-borderRadius)
|
|
1370
1715
|
--pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24);
|
|
1371
1716
|
}
|
|
1372
1717
|
|
|
@@ -1389,7 +1734,6 @@ left: 0;
|
|
|
1389
1734
|
.mui-theme .pf-v6-c-page__main {
|
|
1390
1735
|
--pf-v6-c-page__main--PaddingRight: 0;
|
|
1391
1736
|
overflow-y: auto; // Allow main content to scroll instead of outer container
|
|
1392
|
-
margin-right: 2px;
|
|
1393
1737
|
height: calc(100vh - var(--kf-central-app-bar-height));
|
|
1394
1738
|
min-height: calc(100vh - var(--kf-central-app-bar-height));
|
|
1395
1739
|
display: flex;
|
|
@@ -1407,7 +1751,7 @@ left: 0;
|
|
|
1407
1751
|
}
|
|
1408
1752
|
|
|
1409
1753
|
.mui-theme .pf-v6-c-page__main-body {
|
|
1410
|
-
margin-left: var(--
|
|
1754
|
+
margin-left: var(--pf-t--global--spacer--xs);
|
|
1411
1755
|
flex-grow: 1;
|
|
1412
1756
|
display: flex;
|
|
1413
1757
|
flex-direction: column;
|
|
@@ -1418,7 +1762,7 @@ left: 0;
|
|
|
1418
1762
|
flex-grow: 1;
|
|
1419
1763
|
display: flex;
|
|
1420
1764
|
flex-direction: column;
|
|
1421
|
-
margin-right:
|
|
1765
|
+
margin-right: 0px;
|
|
1422
1766
|
}
|
|
1423
1767
|
|
|
1424
1768
|
.mui-theme .pf-v6-c-page__main-group.pf-m-sticky-top {
|
|
@@ -1426,7 +1770,7 @@ left: 0;
|
|
|
1426
1770
|
}
|
|
1427
1771
|
|
|
1428
1772
|
// TODO: Remove when https://github.com/patternfly/patternfly-react/issues/11826 is resolved.
|
|
1429
|
-
.pf-v6-c-page__main-section .pf-v6-c-page__main-body {
|
|
1773
|
+
.mui-theme .pf-v6-c-page__main-section .pf-v6-c-page__main-body {
|
|
1430
1774
|
height: 100%;
|
|
1431
1775
|
--pf-v6-c-page__main-section--PaddingInlineStart: 0px;
|
|
1432
1776
|
}
|
|
@@ -1541,13 +1885,13 @@ left: 0;
|
|
|
1541
1885
|
position: relative;
|
|
1542
1886
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
1543
1887
|
--pf-v6-c-menu-toggle--BorderStyle: solid;
|
|
1544
|
-
--pf-
|
|
1545
|
-
--pf-
|
|
1888
|
+
// BorderColor inherited from --pf-t--global--border--color--default
|
|
1889
|
+
// BorderRadius inherited from --pf-t--global--border--radius--small
|
|
1546
1890
|
--pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
|
|
1547
1891
|
height: 54px;
|
|
1548
1892
|
|
|
1549
1893
|
&:hover {
|
|
1550
|
-
--pf-
|
|
1894
|
+
// Hover border color inherited from --pf-t--global--border--color--hover
|
|
1551
1895
|
--pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-common-white);
|
|
1552
1896
|
}
|
|
1553
1897
|
|
|
@@ -1646,16 +1990,6 @@ left: 0;
|
|
|
1646
1990
|
color: var(--pf-t--color--black);
|
|
1647
1991
|
}
|
|
1648
1992
|
|
|
1649
|
-
|
|
1650
|
-
.mui-theme button.pf-v6-c-menu-toggle {
|
|
1651
|
-
// Use box-shadow to create a border effect without affecting the layout
|
|
1652
|
-
&.pf-m-expanded,
|
|
1653
|
-
&:focus {
|
|
1654
|
-
box-shadow: 0 0 0 2px var(--mui-palette-primary-main);
|
|
1655
|
-
outline: none; // Remove default browser outline
|
|
1656
|
-
}
|
|
1657
|
-
}
|
|
1658
|
-
|
|
1659
1993
|
// Grid view: Position action cell (Actions kebab) on the right
|
|
1660
1994
|
// The Connect button is a regular cell and will appear with other row content on the left
|
|
1661
1995
|
.mui-theme .pf-v6-c-table.pf-m-grid .pf-v6-c-table__tbody .pf-v6-c-table__tr {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mod-arch-kubeflow",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "Kubeflow-specific theme and UI components for modular architecture micro-frontend projects",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -53,14 +53,12 @@
|
|
|
53
53
|
"access": "public"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
|
-
"@mui/material": "^7.
|
|
56
|
+
"@mui/material": "^7.3.4",
|
|
57
57
|
"react": ">=18.2.0",
|
|
58
58
|
"react-dom": ">=18.2.0"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
|
-
"@
|
|
62
|
-
"@emotion/styled": "^11.13.0",
|
|
63
|
-
"@mui/material": "^7.0.0",
|
|
61
|
+
"@mui/material": "^7.3.4",
|
|
64
62
|
"@types/react": "^18.3.1",
|
|
65
63
|
"npm-run-all2": "^7.0.1",
|
|
66
64
|
"react": "^18.3.1",
|