mod-arch-kubeflow 1.2.0 → 1.2.2

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.
@@ -0,0 +1,453 @@
1
+ {
2
+ "_meta": {
3
+ "generated": "2025-11-04T19:41:26.381Z",
4
+ "description": "Auto-generated MUI default theme object for reference"
5
+ },
6
+ "breakpoints": {
7
+ "keys": [
8
+ "xs",
9
+ "sm",
10
+ "md",
11
+ "lg",
12
+ "xl"
13
+ ],
14
+ "values": {
15
+ "xs": 0,
16
+ "sm": 600,
17
+ "md": 900,
18
+ "lg": 1200,
19
+ "xl": 1536
20
+ },
21
+ "unit": "px"
22
+ },
23
+ "direction": "ltr",
24
+ "components": {},
25
+ "palette": {
26
+ "mode": "light",
27
+ "common": {
28
+ "black": "#000",
29
+ "white": "#fff"
30
+ },
31
+ "primary": {
32
+ "main": "#1976d2",
33
+ "light": "#42a5f5",
34
+ "dark": "#1565c0",
35
+ "contrastText": "#fff"
36
+ },
37
+ "secondary": {
38
+ "main": "#9c27b0",
39
+ "light": "#ba68c8",
40
+ "dark": "#7b1fa2",
41
+ "contrastText": "#fff"
42
+ },
43
+ "error": {
44
+ "main": "#d32f2f",
45
+ "light": "#ef5350",
46
+ "dark": "#c62828",
47
+ "contrastText": "#fff"
48
+ },
49
+ "warning": {
50
+ "main": "#ed6c02",
51
+ "light": "#ff9800",
52
+ "dark": "#e65100",
53
+ "contrastText": "#fff"
54
+ },
55
+ "info": {
56
+ "main": "#0288d1",
57
+ "light": "#03a9f4",
58
+ "dark": "#01579b",
59
+ "contrastText": "#fff"
60
+ },
61
+ "success": {
62
+ "main": "#2e7d32",
63
+ "light": "#4caf50",
64
+ "dark": "#1b5e20",
65
+ "contrastText": "#fff"
66
+ },
67
+ "grey": {
68
+ "50": "#fafafa",
69
+ "100": "#f5f5f5",
70
+ "200": "#eeeeee",
71
+ "300": "#e0e0e0",
72
+ "400": "#bdbdbd",
73
+ "500": "#9e9e9e",
74
+ "600": "#757575",
75
+ "700": "#616161",
76
+ "800": "#424242",
77
+ "900": "#212121",
78
+ "A100": "#f5f5f5",
79
+ "A200": "#eeeeee",
80
+ "A400": "#bdbdbd",
81
+ "A700": "#616161"
82
+ },
83
+ "contrastThreshold": 3,
84
+ "tonalOffset": 0.2,
85
+ "text": {
86
+ "primary": "rgba(0, 0, 0, 0.87)",
87
+ "secondary": "rgba(0, 0, 0, 0.6)",
88
+ "disabled": "rgba(0, 0, 0, 0.38)"
89
+ },
90
+ "divider": "rgba(0, 0, 0, 0.12)",
91
+ "background": {
92
+ "paper": "#fff",
93
+ "default": "#fff"
94
+ },
95
+ "action": {
96
+ "active": "rgba(0, 0, 0, 0.54)",
97
+ "hover": "rgba(0, 0, 0, 0.04)",
98
+ "hoverOpacity": 0.04,
99
+ "selected": "rgba(0, 0, 0, 0.08)",
100
+ "selectedOpacity": 0.08,
101
+ "disabled": "rgba(0, 0, 0, 0.26)",
102
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
103
+ "disabledOpacity": 0.38,
104
+ "focus": "rgba(0, 0, 0, 0.12)",
105
+ "focusOpacity": 0.12,
106
+ "activatedOpacity": 0.12
107
+ }
108
+ },
109
+ "shape": {
110
+ "borderRadius": 4
111
+ },
112
+ "unstable_sxConfig": {
113
+ "border": {
114
+ "themeKey": "borders"
115
+ },
116
+ "borderTop": {
117
+ "themeKey": "borders"
118
+ },
119
+ "borderRight": {
120
+ "themeKey": "borders"
121
+ },
122
+ "borderBottom": {
123
+ "themeKey": "borders"
124
+ },
125
+ "borderLeft": {
126
+ "themeKey": "borders"
127
+ },
128
+ "borderColor": {
129
+ "themeKey": "palette"
130
+ },
131
+ "borderTopColor": {
132
+ "themeKey": "palette"
133
+ },
134
+ "borderRightColor": {
135
+ "themeKey": "palette"
136
+ },
137
+ "borderBottomColor": {
138
+ "themeKey": "palette"
139
+ },
140
+ "borderLeftColor": {
141
+ "themeKey": "palette"
142
+ },
143
+ "outline": {
144
+ "themeKey": "borders"
145
+ },
146
+ "outlineColor": {
147
+ "themeKey": "palette"
148
+ },
149
+ "borderRadius": {
150
+ "themeKey": "shape.borderRadius"
151
+ },
152
+ "color": {
153
+ "themeKey": "palette"
154
+ },
155
+ "bgcolor": {
156
+ "themeKey": "palette",
157
+ "cssProperty": "backgroundColor"
158
+ },
159
+ "backgroundColor": {
160
+ "themeKey": "palette"
161
+ },
162
+ "p": {},
163
+ "pt": {},
164
+ "pr": {},
165
+ "pb": {},
166
+ "pl": {},
167
+ "px": {},
168
+ "py": {},
169
+ "padding": {},
170
+ "paddingTop": {},
171
+ "paddingRight": {},
172
+ "paddingBottom": {},
173
+ "paddingLeft": {},
174
+ "paddingX": {},
175
+ "paddingY": {},
176
+ "paddingInline": {},
177
+ "paddingInlineStart": {},
178
+ "paddingInlineEnd": {},
179
+ "paddingBlock": {},
180
+ "paddingBlockStart": {},
181
+ "paddingBlockEnd": {},
182
+ "m": {},
183
+ "mt": {},
184
+ "mr": {},
185
+ "mb": {},
186
+ "ml": {},
187
+ "mx": {},
188
+ "my": {},
189
+ "margin": {},
190
+ "marginTop": {},
191
+ "marginRight": {},
192
+ "marginBottom": {},
193
+ "marginLeft": {},
194
+ "marginX": {},
195
+ "marginY": {},
196
+ "marginInline": {},
197
+ "marginInlineStart": {},
198
+ "marginInlineEnd": {},
199
+ "marginBlock": {},
200
+ "marginBlockStart": {},
201
+ "marginBlockEnd": {},
202
+ "displayPrint": {
203
+ "cssProperty": false
204
+ },
205
+ "display": {},
206
+ "overflow": {},
207
+ "textOverflow": {},
208
+ "visibility": {},
209
+ "whiteSpace": {},
210
+ "flexBasis": {},
211
+ "flexDirection": {},
212
+ "flexWrap": {},
213
+ "justifyContent": {},
214
+ "alignItems": {},
215
+ "alignContent": {},
216
+ "order": {},
217
+ "flex": {},
218
+ "flexGrow": {},
219
+ "flexShrink": {},
220
+ "alignSelf": {},
221
+ "justifyItems": {},
222
+ "justifySelf": {},
223
+ "gap": {},
224
+ "rowGap": {},
225
+ "columnGap": {},
226
+ "gridColumn": {},
227
+ "gridRow": {},
228
+ "gridAutoFlow": {},
229
+ "gridAutoColumns": {},
230
+ "gridAutoRows": {},
231
+ "gridTemplateColumns": {},
232
+ "gridTemplateRows": {},
233
+ "gridTemplateAreas": {},
234
+ "gridArea": {},
235
+ "position": {},
236
+ "zIndex": {
237
+ "themeKey": "zIndex"
238
+ },
239
+ "top": {},
240
+ "right": {},
241
+ "bottom": {},
242
+ "left": {},
243
+ "boxShadow": {
244
+ "themeKey": "shadows"
245
+ },
246
+ "width": {},
247
+ "maxWidth": {},
248
+ "minWidth": {},
249
+ "height": {},
250
+ "maxHeight": {},
251
+ "minHeight": {},
252
+ "boxSizing": {},
253
+ "font": {
254
+ "themeKey": "font"
255
+ },
256
+ "fontFamily": {
257
+ "themeKey": "typography"
258
+ },
259
+ "fontSize": {
260
+ "themeKey": "typography"
261
+ },
262
+ "fontStyle": {
263
+ "themeKey": "typography"
264
+ },
265
+ "fontWeight": {
266
+ "themeKey": "typography"
267
+ },
268
+ "letterSpacing": {},
269
+ "textTransform": {},
270
+ "lineHeight": {},
271
+ "textAlign": {},
272
+ "typography": {
273
+ "cssProperty": false,
274
+ "themeKey": "typography"
275
+ }
276
+ },
277
+ "mixins": {
278
+ "toolbar": {
279
+ "minHeight": 56,
280
+ "@media (min-width:0px)": {
281
+ "@media (orientation: landscape)": {
282
+ "minHeight": 48
283
+ }
284
+ },
285
+ "@media (min-width:600px)": {
286
+ "minHeight": 64
287
+ }
288
+ }
289
+ },
290
+ "shadows": [
291
+ "none",
292
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
293
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
294
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
295
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
296
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
297
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
298
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
299
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
300
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
301
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
302
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
303
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
304
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
305
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
306
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
307
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
308
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
309
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
310
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
311
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
312
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
313
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
314
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
315
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)"
316
+ ],
317
+ "typography": {
318
+ "htmlFontSize": 16,
319
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
320
+ "fontSize": 14,
321
+ "fontWeightLight": 300,
322
+ "fontWeightRegular": 400,
323
+ "fontWeightMedium": 500,
324
+ "fontWeightBold": 700,
325
+ "h1": {
326
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
327
+ "fontWeight": 300,
328
+ "fontSize": "6rem",
329
+ "lineHeight": 1.167,
330
+ "letterSpacing": "-0.01562em"
331
+ },
332
+ "h2": {
333
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
334
+ "fontWeight": 300,
335
+ "fontSize": "3.75rem",
336
+ "lineHeight": 1.2,
337
+ "letterSpacing": "-0.00833em"
338
+ },
339
+ "h3": {
340
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
341
+ "fontWeight": 400,
342
+ "fontSize": "3rem",
343
+ "lineHeight": 1.167,
344
+ "letterSpacing": "0em"
345
+ },
346
+ "h4": {
347
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
348
+ "fontWeight": 400,
349
+ "fontSize": "2.125rem",
350
+ "lineHeight": 1.235,
351
+ "letterSpacing": "0.00735em"
352
+ },
353
+ "h5": {
354
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
355
+ "fontWeight": 400,
356
+ "fontSize": "1.5rem",
357
+ "lineHeight": 1.334,
358
+ "letterSpacing": "0em"
359
+ },
360
+ "h6": {
361
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
362
+ "fontWeight": 500,
363
+ "fontSize": "1.25rem",
364
+ "lineHeight": 1.6,
365
+ "letterSpacing": "0.0075em"
366
+ },
367
+ "subtitle1": {
368
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
369
+ "fontWeight": 400,
370
+ "fontSize": "1rem",
371
+ "lineHeight": 1.75,
372
+ "letterSpacing": "0.00938em"
373
+ },
374
+ "subtitle2": {
375
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
376
+ "fontWeight": 500,
377
+ "fontSize": "0.875rem",
378
+ "lineHeight": 1.57,
379
+ "letterSpacing": "0.00714em"
380
+ },
381
+ "body1": {
382
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
383
+ "fontWeight": 400,
384
+ "fontSize": "1rem",
385
+ "lineHeight": 1.5,
386
+ "letterSpacing": "0.00938em"
387
+ },
388
+ "body2": {
389
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
390
+ "fontWeight": 400,
391
+ "fontSize": "0.875rem",
392
+ "lineHeight": 1.43,
393
+ "letterSpacing": "0.01071em"
394
+ },
395
+ "button": {
396
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
397
+ "fontWeight": 500,
398
+ "fontSize": "0.875rem",
399
+ "lineHeight": 1.75,
400
+ "letterSpacing": "0.02857em",
401
+ "textTransform": "uppercase"
402
+ },
403
+ "caption": {
404
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
405
+ "fontWeight": 400,
406
+ "fontSize": "0.75rem",
407
+ "lineHeight": 1.66,
408
+ "letterSpacing": "0.03333em"
409
+ },
410
+ "overline": {
411
+ "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
412
+ "fontWeight": 400,
413
+ "fontSize": "0.75rem",
414
+ "lineHeight": 2.66,
415
+ "letterSpacing": "0.08333em",
416
+ "textTransform": "uppercase"
417
+ },
418
+ "inherit": {
419
+ "fontFamily": "inherit",
420
+ "fontWeight": "inherit",
421
+ "fontSize": "inherit",
422
+ "lineHeight": "inherit",
423
+ "letterSpacing": "inherit"
424
+ }
425
+ },
426
+ "transitions": {
427
+ "easing": {
428
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
429
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
430
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
431
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
432
+ },
433
+ "duration": {
434
+ "shortest": 150,
435
+ "shorter": 200,
436
+ "short": 250,
437
+ "standard": 300,
438
+ "complex": 375,
439
+ "enteringScreen": 225,
440
+ "leavingScreen": 195
441
+ }
442
+ },
443
+ "zIndex": {
444
+ "mobileStepper": 1000,
445
+ "fab": 1050,
446
+ "speedDial": 1050,
447
+ "appBar": 1100,
448
+ "drawer": 1200,
449
+ "modal": 1300,
450
+ "snackbar": 1400,
451
+ "tooltip": 1500
452
+ }
453
+ }
@@ -1,6 +1,7 @@
1
1
  .mui-theme:root {
2
2
  // Alert
3
3
  --mui-alert--BoxShadow: none;
4
+ --mui-alert--BorderRadius: var(--mui-shape-borderRadius);
4
5
  --mui-alert-warning-text: #663c00;
5
6
  --mui-alert-warning-FontWeight: 400;
6
7
  --mui-alert--PaddingBlockStart: 6px;
@@ -12,6 +13,9 @@
12
13
  --mui-alert__icon--MarginBlockStart: 7px;
13
14
  --mui-alert__icon--MarginBlockEnd: 7px;
14
15
  --mui-alert__icon--FontSize: 22px;
16
+ --mui-alert__icon--Color: var(--mui-palette-error-main);
17
+ --mui-alert__border-danger-color: var(--mui-palette-error-main);
18
+ --mui-alert__title--FontWeight: 500;
15
19
 
16
20
  // Backdrop
17
21
  --mui-backdrop-BackgroundColor: rgba(0, 0, 0, 0.5);
@@ -35,6 +39,13 @@
35
39
  // Form focus states (thicker border for emphasis, adjusted padding to prevent layout shift)
36
40
  --mui-form--focus--BorderWidth: 2px;
37
41
  --mui-form--focus--Padding: 7px;
42
+
43
+ // Form fieldset styling (MUI input border defaults)
44
+ --mui-form-fieldset--BorderColor: rgba(0, 0, 0, 0.23); // MUI default input border
45
+ --mui-form-fieldset--Padding: var(--mui-spacing-8px); // 8px
46
+ --mui-form-fieldset--InsetTop: calc(-1 * var(--mui-spacing-8px)); // -8px for label positioning
47
+ --mui-form-fieldset--LegendPadding: var(--mui-spacing-4px); // 4px horizontal padding
48
+ --mui-form-fieldset--LegendFontSize: var(--pf-t--global--font--size--body--sm); // 0.75rem
38
49
 
39
50
  // Helper text
40
51
  --mui-helper-text__item--FontWeight: 400;
@@ -151,7 +162,7 @@
151
162
  --pf-t--global--text--color--status--warning--default
152
163
  );
153
164
  --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
154
- --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-FontWeight);
165
+ --pf-v6-c-alert__title--FontWeight: var(--mui-alert__title--FontWeight);
155
166
  --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
156
167
  --pf-v6-c-alert__icon--FontSize: var(--mui-alert__icon--FontSize);
157
168
  --pf-v6-c-alert--BoxShadow: var(--mui-alert--BoxShadow);
@@ -159,9 +170,24 @@
159
170
  --pf-v6-c-alert--PaddingBlockEnd: var(--mui-alert--PaddingBlockEnd);
160
171
  --pf-v6-c-alert--PaddingInlineStart: var(--mui-alert--PaddingInlineStart);
161
172
  --pf-v6-c-alert--PaddingInlineEnd: var(--mui-alert--PaddingInlineEnd);
173
+ border-radius: var(--mui-alert--BorderRadius);
174
+ color: var(--mui-palette-Alert-errorColor);
175
+
162
176
  margin-bottom: 16px;
163
177
  }
164
178
 
179
+ .mui-theme .pf-v6-c-alert.pf-m-danger {
180
+ --pf-v6-c-alert--BorderColor: var(--mui-alert__border-danger-color);
181
+ --pf-v6-c-alert__icon--Color: var(--mui-alert__icon--Color);
182
+ --pf-v6-c-alert__title--Color: var(--mui-palette-Alert-errorColor);
183
+ }
184
+
185
+ .mui-theme .pf-v6-c-alert.pf-m-danger .pf-v6-c-alert__description {
186
+ color: var(--mui-palette-Alert-errorColor);
187
+ padding-block-end: var(--mui-spacing);
188
+ }
189
+
190
+
165
191
  .mui-theme .pf-v6-c-alert__title {
166
192
  padding-block: var(--mui-spacing);
167
193
  }
@@ -286,9 +312,6 @@
286
312
  }
287
313
  }
288
314
 
289
- .mui-theme .pf-v6-c-form {
290
- --pf-v6-c-form--GridGap: 0;
291
- }
292
315
 
293
316
  .mui-theme .pf-v6-c-form__group {
294
317
  position: relative;
@@ -308,7 +331,7 @@
308
331
  }
309
332
 
310
333
  .mui-theme .pf-v6-c-form__label-required {
311
- color: var(--mui-palette-grey-600);
334
+ color: inherit; // inherit from parent
312
335
  }
313
336
 
314
337
  .mui-theme .pf-v6-c-form__helper-text.path-helper-text {
@@ -466,16 +489,17 @@
466
489
  width: 100%;
467
490
  }
468
491
 
492
+
469
493
  .mui-theme .pf-v6-c-form__group .form-fieldset-legend {
470
494
  float: unset;
471
495
  width: auto;
472
496
  overflow: hidden;
473
497
  display: block;
474
498
  padding: 0;
475
- height: 11px;
476
- font-size: 0.75em;
499
+ height: 11px; // Fixed height for animation - no PF variable exists
500
+ font-size: var(--mui-form-fieldset--LegendFontSize);
477
501
  visibility: hidden;
478
- max-width: 0.01px;
502
+ max-width: 0.01px; // Layout constraint for animation - no PF variable exists
479
503
  white-space: nowrap;
480
504
  max-width: 100%;
481
505
  }
@@ -511,14 +535,175 @@
511
535
  padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
512
536
  }
513
537
 
538
+ // Apply form-fieldset-wrapper styling to ANY descendant of .pf-v6-c-form (Form component)
539
+ // This ensures styling works regardless of nesting depth or wrapper divs
540
+ .mui-theme .pf-v6-c-form .form-fieldset {
541
+ text-align: left;
542
+ position: absolute;
543
+ inset: var(--mui-form-fieldset--InsetTop) 0 0;
544
+ margin: 0;
545
+ padding: 0 var(--mui-form-fieldset--Padding);
546
+ pointer-events: none;
547
+ border-radius: inherit;
548
+ border-style: solid;
549
+ border-width: var(--pf-t--global--border--width--regular);
550
+ overflow: hidden;
551
+ min-width: 0%;
552
+ border-color: var(--mui-form-fieldset--BorderColor);
553
+ border-radius: var(--mui-shape-borderRadius);
554
+ }
555
+
556
+ .mui-theme .pf-v6-c-form .form-fieldset-wrapper {
557
+ position: relative;
558
+ width: 100%;
559
+ }
560
+
561
+ .mui-theme .pf-v6-c-form .form-fieldset-legend {
562
+ float: unset;
563
+ width: auto;
564
+ overflow: hidden;
565
+ display: block;
566
+ padding: 0 var(--mui-form-fieldset--LegendPadding);
567
+ font-size: var(--mui-form-fieldset--LegendFontSize);
568
+ max-width: 0.01px; // Layout constraint for animation - no PF variable exists
569
+ white-space: nowrap;
570
+ max-width: 100%;
571
+ }
572
+
573
+ .mui-theme .pf-v6-c-form .form-fieldset-wrapper:hover .form-fieldset {
574
+ border-color: var(--mui-palette-common-black);
575
+ }
576
+
577
+ .mui-theme .pf-v6-c-form .form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
578
+ .mui-theme .pf-v6-c-form .form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
579
+ border-color: var(--mui-form-fieldset--BorderColor);
580
+ }
581
+
582
+ .mui-theme .pf-v6-c-form .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
583
+ border-color: var(--mui-palette-error-main);
584
+ }
585
+
586
+ .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
+ border-color: var(--mui-palette-error-main);
588
+ }
589
+
590
+ .mui-theme .pf-v6-c-form .form-fieldset-wrapper .pf-v6-c-input-group__item button {
591
+ // Aligns EyeIcon in password input
592
+ --pf-v6-c-button--PaddingBlockStart: var(--mui-spacing-16px);
593
+ --pf-v6-c-button--PaddingBlockEnd: var(--mui-spacing-16px);
594
+ --pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
595
+ --pf-v6-c-button--BorderRadius: 50%;
596
+ }
597
+
598
+ .mui-theme .pf-v6-c-form .form-fieldset-wrapper:focus-within .form-fieldset {
599
+ border-color: var(--mui-palette-primary-main);
600
+ border-width: var(--mui-form--focus--BorderWidth);
601
+ padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
602
+ }
603
+
604
+ .mui-theme .pf-v6-c-form .form-fieldset-wrapper:focus-within {
605
+ color: var(--mui-palette-primary-main);
606
+ }
607
+
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
+ .mui-theme .pf-v6-l-grid__item.secret-remove-button-container {
618
+ display: flex;
619
+ align-items: flex-end;
620
+ padding-bottom: var(--pf-t--global--spacer--sm);
621
+ }
622
+
623
+ // Apply all form-fieldset-wrapper styling to layouts (Grid, Stack, Split, and their items)
624
+ // Match any layout container or descendant
625
+
626
+ // First, ensure the base .form-fieldset styles apply inside layouts
627
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset {
628
+ text-align: left;
629
+ position: absolute;
630
+ inset: var(--mui-form-fieldset--InsetTop) 0 0;
631
+ margin: 0;
632
+ padding: 0 var(--mui-form-fieldset--Padding);
633
+ pointer-events: none;
634
+ border-radius: inherit;
635
+ border-style: solid;
636
+ border-width: var(--pf-t--global--border--width--regular);
637
+ overflow: hidden;
638
+ min-width: 0%;
639
+ border-color: var(--mui-form-fieldset--BorderColor);
640
+ border-radius: var(--mui-shape-borderRadius);
641
+ }
642
+
643
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper {
644
+ position: relative;
645
+ width: 100%;
646
+ }
647
+
648
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-legend {
649
+ float: unset;
650
+ width: auto;
651
+ overflow: hidden;
652
+ display: block;
653
+ padding: 0 var(--mui-form-fieldset--LegendPadding);
654
+ font-size: var(--mui-form-fieldset--LegendFontSize);
655
+ max-width: 0.01px; // Layout constraint for animation - no PF variable exists
656
+ white-space: nowrap;
657
+ max-width: 100%;
658
+ }
659
+
660
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:hover .form-fieldset {
661
+ border-color: var(--mui-palette-common-black);
662
+ }
663
+
664
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
665
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
666
+ border-color: var(--mui-form-fieldset--BorderColor);
667
+ }
668
+
669
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
670
+ border-color: var(--mui-palette-error-main);
671
+ }
672
+
673
+ .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
+ border-color: var(--mui-palette-error-main);
675
+ }
676
+
677
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-input-group__item button {
678
+ // Aligns EyeIcon in password input
679
+ --pf-v6-c-button--PaddingBlockStart: var(--mui-spacing-16px);
680
+ --pf-v6-c-button--PaddingBlockEnd: var(--mui-spacing-16px);
681
+ --pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
682
+ --pf-v6-c-button--BorderRadius: 50%;
683
+ }
684
+
685
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:focus-within .form-fieldset {
686
+ border-color: var(--mui-palette-primary-main);
687
+ border-width: var(--mui-form--focus--BorderWidth);
688
+ padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
689
+ }
690
+
691
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:focus-within {
692
+ color: var(--mui-palette-primary-main);
693
+ }
694
+
695
+ .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .form-fieldset:hover {
696
+ border-color: var(--mui-palette-common-black);
697
+ }
698
+
514
699
  .form-fieldset-legend {
515
700
  float: unset;
516
701
  width: auto;
517
702
  overflow: hidden;
518
703
  display: block;
519
- padding: 0 5px 0 5px;
520
- font-size: 0.75em;
521
- max-width: 0.01px;
704
+ padding: 0 var(--mui-form-fieldset--LegendPadding);
705
+ font-size: var(--mui-form-fieldset--LegendFontSize);
706
+ max-width: 0.01px; // Layout constraint for animation - no PF variable exists
522
707
  white-space: nowrap;
523
708
  max-width: 100%;
524
709
  }
@@ -549,16 +734,16 @@
549
734
  .form-fieldset {
550
735
  text-align: left;
551
736
  position: absolute;
552
- inset: -7px 0px 0px;
737
+ inset: var(--mui-form-fieldset--InsetTop) 0 0;
553
738
  margin: 0;
554
- padding: 0 8px;
739
+ padding: 0 var(--mui-form-fieldset--Padding);
555
740
  pointer-events: none;
556
741
  border-radius: inherit;
557
742
  border-style: solid;
558
743
  border-width: var(--pf-t--global--border--width--regular);
559
744
  overflow: hidden;
560
745
  min-width: 0%;
561
- border-color: rgba(0, 0, 0, 0.23);
746
+ border-color: var(--mui-form-fieldset--BorderColor);
562
747
  border-radius: var(--mui-shape-borderRadius);
563
748
  }
564
749
 
@@ -567,9 +752,9 @@
567
752
  width: auto;
568
753
  overflow: hidden;
569
754
  display: block;
570
- padding: 0 5px 0 5px;
571
- font-size: 0.75em;
572
- max-width: 0.01px;
755
+ padding: 0 var(--mui-form-fieldset--LegendPadding);
756
+ font-size: var(--mui-form-fieldset--LegendFontSize);
757
+ max-width: 0.01px; // Layout constraint for animation - no PF variable exists
573
758
  white-space: nowrap;
574
759
  max-width: 100%;
575
760
  }
@@ -667,13 +852,17 @@
667
852
  border-color: var(--mui-palette-error-main);
668
853
  }
669
854
 
670
- .pf-v6-c-form__group:not(.pf-m-error):focus-within .pf-v6-c-form__label {
855
+ .mui-theme .pf-v6-c-form__group:not(.pf-m-error):focus-within .pf-v6-c-form__label {
671
856
  // Using CSS property here since --pf-v6-c-form__label--Color does not exist.
672
857
 
673
858
  /* Change color of the label when the input is focused */
674
859
  color: var(--mui-palette-primary-main);
675
860
  }
676
861
 
862
+ .mui-theme .pf-v6-c-form__group:not(.pf-m-error):focus-within .pf-v6-c-form__label-required {
863
+ color: var(--mui-palette-primary-main);
864
+ }
865
+
677
866
  .mui-theme .pf-v6-c-menu {
678
867
  --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
679
868
  --pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius);
@@ -699,6 +888,10 @@
699
888
  }
700
889
  }
701
890
 
891
+ .mui-theme .pf-v6-c-menu__list-item.pf-m-focus {
892
+ --pf-v6-c-menu__item--BackgroundColor: var(--mui-palette-action-focus);
893
+ }
894
+
702
895
  .mui-theme .pf-v6-c-menu-toggle {
703
896
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
704
897
  --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
@@ -1340,7 +1533,8 @@ left: 0;
1340
1533
  }
1341
1534
 
1342
1535
  .mui-theme .pf-v6-c-expandable-section .pf-v6-c-expandable-section__content {
1343
- margin-block-end: var(--mui-spacing-16px);
1536
+ margin-block-end: 0;
1537
+ padding-block-start: 0;
1344
1538
  }
1345
1539
 
1346
1540
  .mui-theme .pf-v6-c-form__group-control .pf-v6-c-menu-toggle.pf-m-full-width.pf-m-typeahead {
@@ -1362,6 +1556,11 @@ left: 0;
1362
1556
  border-width: var(--mui-form--focus--BorderWidth); // Thicker border for focus state (intentional for emphasis)
1363
1557
  --pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
1364
1558
  }
1559
+
1560
+ // Fix text input alignment in typeahead
1561
+ input.pf-v6-c-text-input-group__text-input {
1562
+ padding-left: var(--mui-spacing-16px);
1563
+ }
1365
1564
  }
1366
1565
 
1367
1566
  .mui-theme .workspacekind-file-upload {
@@ -1426,10 +1625,6 @@ left: 0;
1426
1625
  --pf-v6-c-content--list--PaddingInlineStart: 0;
1427
1626
  }
1428
1627
 
1429
- .mui-theme .pf-v6-c-expandable-section .pf-v6-c-expandable-section__content {
1430
- margin-block-end: var(--mui-spacing-16px);
1431
- }
1432
-
1433
1628
  .mui-theme .workspacekind-file-upload {
1434
1629
  height: 100%;
1435
1630
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mod-arch-kubeflow",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
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",
@@ -14,12 +14,14 @@
14
14
  },
15
15
  "files": [
16
16
  "dist",
17
+ "scripts",
17
18
  "README.md",
18
19
  "LICENSE"
19
20
  ],
20
21
  "scripts": {
21
22
  "build": "tsc && tsc-alias && npm run copy-assets",
22
23
  "copy-assets": "mkdir -p dist/style dist/images && cp -r style/* dist/style/ && cp -r images/* dist/images/",
24
+ "generate-mui-theme-object": "node scripts/generate-mui-theme.mjs",
23
25
  "test": "run-s test:lint test:unit test:type-check",
24
26
  "test:jest": "jest --passWithNoTests",
25
27
  "test:unit": "npm run test:jest -- --silent",
@@ -51,11 +53,13 @@
51
53
  "access": "public"
52
54
  },
53
55
  "peerDependencies": {
56
+ "@mui/material": "^7.0.0",
54
57
  "react": ">=18.2.0",
55
- "react-dom": ">=18.2.0",
56
- "@mui/material": "^7.0.0"
58
+ "react-dom": ">=18.2.0"
57
59
  },
58
60
  "devDependencies": {
61
+ "@emotion/react": "^11.13.3",
62
+ "@emotion/styled": "^11.13.0",
59
63
  "@mui/material": "^7.0.0",
60
64
  "@types/react": "^18.3.1",
61
65
  "npm-run-all2": "^7.0.1",
@@ -0,0 +1,70 @@
1
+ #!/usr/bin/env node
2
+
3
+ /**
4
+ * Generate MUI Theme JSON
5
+ *
6
+ * This script generates a JSON file containing the MUI default theme object.
7
+ * It removes all function references and creates a clean JSON representation
8
+ * for reference purposes.
9
+ *
10
+ * Usage: node scripts/generate-mui-theme.js
11
+ */
12
+
13
+ import { fileURLToPath } from 'url';
14
+ import { createRequire } from 'module';
15
+ import fs from 'fs';
16
+ import path from 'path';
17
+
18
+ // Use createRequire to import CommonJS modules in ESM
19
+ const require = createRequire(import.meta.url);
20
+ const { createTheme } = require('@mui/material/styles');
21
+
22
+ // Get __dirname equivalent in ESM
23
+ const filename = fileURLToPath(import.meta.url);
24
+ const dirname = path.dirname(filename);
25
+
26
+ // Serialize the theme object, removing all functions
27
+ const serializeTheme = (obj) => {
28
+ if (obj === null || obj === undefined) return obj;
29
+ if (typeof obj === 'function') return undefined;
30
+ if (Array.isArray(obj)) return obj.map(serializeTheme).filter(v => v !== undefined);
31
+ if (typeof obj === 'object') {
32
+ const serialized = {};
33
+ for (const key in obj) {
34
+ if (typeof obj[key] !== 'function') {
35
+ const value = serializeTheme(obj[key]);
36
+ if (value !== undefined) serialized[key] = value;
37
+ }
38
+ }
39
+ return serialized;
40
+ }
41
+ return obj;
42
+ };
43
+
44
+ try {
45
+ console.log('Creating MUI default theme...');
46
+ const theme = createTheme();
47
+
48
+ console.log('Serializing theme object...');
49
+ const serializedTheme = serializeTheme(theme);
50
+
51
+ const output = {
52
+ _meta: {
53
+ generated: new Date().toISOString(),
54
+ description: 'Auto-generated MUI default theme object for reference'
55
+ },
56
+ ...serializedTheme
57
+ };
58
+
59
+ const outputPath = path.join(dirname, '../style/MUI-default-theme-object.json');
60
+
61
+ console.log('Writing to file...');
62
+ fs.writeFileSync(outputPath, JSON.stringify(output, null, 2));
63
+
64
+ console.log('✅ Successfully generated MUI-default-theme-object.json');
65
+ console.log(` Location: ${outputPath}`);
66
+ } catch (error) {
67
+ console.error('❌ Error generating MUI theme JSON:');
68
+ console.error(error.message);
69
+ process.exit(1);
70
+ }