mod-arch-shared 0.1.0

package/style/MUI-theme.scss

@@ -0,0 +1,971 @@
+.mui-theme:root {
+  // Alert
+  --mui-alert--BoxShadow: none;
+  --mui-alert-warning-text: #663c00;
+  --mui-alert-warning-FontWeight: 400;
+  --mui-alert--PaddingBlockStart: 6px;
+  --mui-alert--PaddingBlockEnd: 6px;
+  --mui-alert--PaddingInlineStart: 16px;
+  --mui-alert--PaddingInlineEnd: 16px;
+  --mui-alert__icon--MarginInlineEnd: 12px;
+  --mui-alert__icon--MarginBlockStart: 7px;
+  --mui-alert__icon--MarginBlockStart: 7px;
+  --mui-alert__icon--MarginBlockEnd: 7px;
+  --mui-alert__icon--FontSize: 22px;
+
+  // Backdrop
+  --mui-backdrop-BackgroundColor: rgba(0, 0, 0, 0.5);
+
+  // Button
+  --mui-button-FontWeight: 500;
+  --mui-button--hover--BorderWidth: 1px;
+  --mui-button--PaddingBlockStart: 6px;
+  --mui-button--PaddingBlockEnd: 6px;
+  --mui-button--PaddingInlineStart: 16px;
+  --mui-button--PaddingInlineEnd: 16px;
+  --mui-button--LineHeight: 1.75;
+  --mui-link-underlineColor: rgba(33, 150, 243, 0.4);
+
+  // Helper text
+  --mui-helper-text__item--FontWeight: 400;
+
+  // Menu item
+  --mui-menu__item--PaddingBlockStart: 6px;
+  --mui-menu__item--PaddingBlockEnd: 6px;
+  --mui-menu__item--PaddingInlineStart: 16px;
+  --mui-menu__item--PaddingInlineEnd: 16px;
+  --mui-menu__item--FontSize: 1rem;
+  --mui-menu__item--selected--BackgroundColor: rgba(25, 118, 210, 0.08);
+
+  // Menu toggle
+  --mui-menu-toggle__toggle-icon--MinHeight: auto;
+  --mui-menu-toggle__controls--MinWidth: 0;
+  --mui-menu-toggle--expanded--BackgroundColor: none;
+  --mui-menu-toggle--expanded--BorderColor: none;
+  --mui-menu-toggle--LineHeight: 1.75;
+  --mui-menu-toggle--PaddingBlockStart: 6px;
+  --mui-menu-toggle--PaddingBlockEnd: 6px;
+  --mui-menu-toggle--PaddingInlineStart: 16px;
+  --mui-menu-toggle--PaddingInlineEnd: 16px;
+  --mui-menu-toggle--ColumnGap: 0;
+  --mui-menu-toggle--expanded--Color: black;
+  --mui-menu-toggle--hover--BorderColor: none;
+  --mui-menu-toggle--BorderColor: none;
+  --mui-menu-toggle--PaddingInlineStart: 10px;
+  --mui-menu-toggle--PaddingInlineEnd: 10px;
+
+  // Radio
+  --mui-radio--margin: 10px 0;
+  --mui-radio-PaddingLeft: 30px;
+  --mui-radio__label--Width: 20px;
+  --mui-radio__label--Height: 20px;
+  --mui-radio__input--Width: 10px;
+  --mui-radio__input--Height: 10px;
+
+  // Sidebar from https://github.com/kubeflow/kubeflow/blob/4275d99754ac91f6cf5654b03824a73825e9fe55/components/centraldashboard/public/components/main-page.css#L7C1-L13C51
+  --kf-central-primary-background-color: #0a3b71;
+  --kf-central-sidebar-default-color: #ffffff90;
+  --kf-central-app-drawer-width: 240px;
+  --kf-central-app-bar-height: 24px;
+
+  // Table
+  --mui-table__button--BackgroundColor: none;
+  --mui-table__button--hover--BackgroundColor: none;
+  --mui-table__button--Color: var(--pf-v6-c-table--cell--Color);
+  --mui-table__button--PaddingBlockStart: 0;
+  --mui-table__button--PaddingBlockEnd: 0;
+  --mui-table__button--PaddingInlineStart: 0;
+  --mui-table__button--PaddingInlineEnd: 0;
+  --mui-table--cell--PaddingInlineStart: 16px;
+  --mui-table--cell--PaddingInlineEnd: 16px;
+  --mui-table--cell--PaddingBlockStart: 16px;
+  --mui-table--cell--PaddingBlockEnd: 16px;
+  --mui-table--cell--first-last-child--PaddingInline: 0px;
+  --mui-table__thead--cell--FontSize: 14px;
+  --mui-table__sort-indicator--MarginInlineStart: 4px;
+
+  letter-spacing: 0.01071em;
+
+  // Tabs
+  --mui-tabs__link--hover--BackgroundColor: transparent;
+  --mui-tabs__item--PaddingBlockStart: 0;
+  --mui-tabs__item--PaddingBlockEnd: 0;
+  --mui-tabs__item--PaddingInlineStart: 0;
+  --mui-tabs__item--PaddingInlineEnd: 0;
+  --mui-tabs__link--PaddingBlockStart: 12px;
+  --mui-tabs__link--PaddingBlockEnd: 12px;
+  --mui-tabs__link--PaddingInlineStart: 16px;
+  --mui-tabs__link--PaddingInlineEnd: 16px;
+  --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
+  --mui-tabs__item--m-current__link--after--BorderWidth: 2px;
+  --mui-tabs__link--FontSize: 0.875rem;
+
+  --mui-text-transform: uppercase;
+
+  --mui-spacing-4px: calc(0.5 * var(--mui-spacing));
+  --mui-spacing-8px: var(--mui-spacing);
+  --mui-spacing-12px: calc(1.5 * var(--mui-spacing));
+  --mui-spacing-16px: calc(2 * var(--mui-spacing));
+
+  --pf-t--global--border--width--box--status--default: 1px;
+  --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
+  --pf-t--global--border--radius--medium: var(--mui-shape-borderRadius);
+  --pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);
+
+  --pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
+  --pf-t--global--text--color--inverse: var(--mui-palette-common-white);
+
+  --pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--300: Roboto, Courier, monospace;
+}
+
+.mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
+  border-radius: var(--mui-shape-borderRadius);
+}
+
+.mui-theme .pf-v6-c-alert {
+  --pf-v6-c-alert--m-warning__title--Color: var(
+    --pf-t--global--text--color--status--warning--default
+  );
+  --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
+  --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-FontWeight);
+  --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
+  --pf-v6-c-alert__icon--FontSize: var(--mui-alert__icon--FontSize);
+  --pf-v6-c-alert--BoxShadow: var(--mui-alert--BoxShadow);
+  --pf-v6-c-alert--PaddingBlockStart: var(--mui-alert--PaddingBlockStart);
+  --pf-v6-c-alert--PaddingBlockEnd: var(--mui-alert--PaddingBlockEnd);
+  --pf-v6-c-alert--PaddingInlineStart: var(--mui-alert--PaddingInlineStart);
+  --pf-v6-c-alert--PaddingInlineEnd: var(--mui-alert--PaddingInlineEnd);
+}
+
+.mui-theme .pf-v6-c-alert__title {
+  padding-block: var(--mui-spacing);
+}
+
+.mui-theme .pf-v6-c-alert__icon {
+  --pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd);
+}
+
+.mui-theme .pf-v6-c-backdrop {
+  --pf-v6-c-backdrop--BackgroundColor: var(--mui-backdrop-BackgroundColor);
+}
+
+.mui-theme .pf-v6-c-brand.kubeflow_brand {
+  padding: var(--pf-t--global--spacer--md);
+}
+
+.mui-theme .pf-v6-c-button {
+  --pf-v6-c-button--FontWeight: var(--mui-button-FontWeight);
+  --pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart);
+  --pf-v6-c-button--PaddingBlockEnd: var(--mui-button--PaddingBlockEnd);
+  --pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart);
+  --pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
+  --pf-v6-c-button--LineHeight: var(--mui-button--LineHeight);
+  --pf-v6-c-button--m-plain--BorderRadius: 50%;
+
+  text-transform: var(--mui-text-transform);
+  letter-spacing: 0.02857em;
+}
+
+.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--hover--Color: var(--mui-palette-primary-main);
+  text-decoration-color: var(--mui-link-underlineColor);
+
+  &:hover {
+    text-decoration-color: initial;
+  }
+}
+
+.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
+  // Keep icon color the same on hover
+  color: inherit;
+}
+
+.mui-theme .pf-v6-c-button.pf-m-secondary:hover {
+  --pf-v6-c-button--BorderWidth: var(--mui-button--hover--BorderWidth);
+  --pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
+}
+
+.mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
+  align-content: center;
+}
+
+.mui-theme .pf-v6-c-form {
+  --pf-v6-c-form--GridGap: none;
+}
+
+.mui-theme .pf-v6-c-form__group {
+  position: relative;
+}
+
+.mui-theme .pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
+.mui-theme .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label,
+.mui-theme .pf-v6-c-form__group.location-path {
+  padding-block-start: 10px;
+}
+
+.mui-theme .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
+  color: var(--mui-palette-text-disabled);
+}
+
+.mui-theme .pf-v6-c-form__group.form-group-error .pf-v6-c-form__label {
+  color: var(--mui-palette-error-main);
+}
+
+.mui-theme .pf-v6-c-form__helper-text.path-helper-text {
+  margin-inline-start: var(--pf-t--global--spacer--lg);
+}
+
+.mui-theme .pf-v6-c-helper-text .pf-v6-c-helper-text__item-icon {
+  display: none;
+}
+
+.mui-theme .pf-v6-c-form__section-title {
+  --pf-v6-c-form__section-title--MarginBlockStart: 0px;
+  --pf-v6-c-form__section-title--MarginInlineStart: 0px;
+  --pf-v6-c-form__section-title--MarginBlockEnd: 0.35em;
+  --pf-v6-c-form__section-title--MarginInlineEnd: 0px;
+}
+
+.mui-theme .pf-v6-c-form__label {
+  position: absolute;
+  top: 35%;
+  left: 12px;
+  font-size: 14px;
+  color: var(--mui-palette-grey-600);
+  pointer-events: none;
+  transition: all 0.2s ease;
+  transform-origin: left center;
+  transform: translateY(-50%) scale(0.75);
+  background-color: var(--mui-palette-common-white);
+  padding: 0 4px;
+  z-index: 1;
+  --pf-v6-c-form__label-required--Color: currentColor;
+}
+
+.mui-theme .pf-v6-c-form-control input::placeholder {
+  --pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600);
+}
+
+.mui-theme .pf-v6-c-form-control {
+  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
+  --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
+  --pf-v6-c-form-control--m-error--after--BorderColor: var(--mui-palette-error-main);
+  --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--mui-palette-error-main);
+}
+
+.mui-theme .pf-v6-c-form-control {
+  // Resize is disabled in MUI.
+  resize: none;
+  --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
+  --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px);
+}
+
+.mui-theme .pf-v6-c-form__section {
+  --pf-v6-c-form__section--Gap: 0px;
+}
+
+.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
+  padding: 8px 14px;
+}
+
+.mui-theme .tr-fieldset-wrapper .form-fieldset {
+  inset: 0px;
+}
+
+.mui-theme .pf-v6-c-form-control {
+  // Using CSS property here since PF vars for input padding do not exist.
+  // PF can add custom vars for padding on text input, text area, and form select
+
+  --pf-v6-c-form-control--PaddingBlockStart: 16.5px;
+  --pf-v6-c-form-control--PaddingBlockEnd: 16.5px;
+  --pf-v6-c-form-control--PaddingInlineStart: 14px;
+  --pf-v6-c-form-control--PaddingInlineEnd: 14px;
+}
+
+.mui-theme .pf-v6-c-text-input-group::before {
+  border: none;
+}
+
+.mui-theme .pf-v6-c-text-input-group {
+  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: 16.5px;
+  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
+  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: 14px;
+  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
+}
+
+.mui-theme .pf-v6-c-text-input-group {
+  --pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
+}
+
+.mui-theme .pf-v6-c-form__group-control textarea {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.mui-theme .pf-v6-c-form-control > :is(input, select, textarea):focus {
+  --pf-v6-c-form-control--OutlineOffset: none;
+  outline: none;
+}
+
+.mui-theme .pf-v6-c-text-input-group__text-input:focus {
+  --pf-v6-c-form-control--OutlineOffset: none;
+  outline: none;
+}
+
+.form-fieldset-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.pf-v6-c-form__group .form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.form-fieldset-wrapper:hover .form-fieldset {
+  border-color: black;
+}
+
+.form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
+  border-color: var(--mui-palette-error-main);
+}
+
+.form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control .pf-m-error ~ .form-fieldset {
+  border-color: var(--mui-palette-error-main);
+}
+
+.form-fieldset-wrapper .pf-v6-c-input-group__item button {
+  // Aligns EyeIcon in password input
+  --pf-v6-c-button--PaddingBlockStart: var(--mui-spacing-16px);
+  --pf-v6-c-button--PaddingBlockEnd: var(--mui-spacing-16px);
+  --pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
+  --pf-v6-c-button--BorderRadius: 50%;
+}
+
+.form-fieldset-wrapper:focus-within .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+  border-width: 2px;
+  padding: 7px 7px;
+}
+
+.form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0 5px 0 5px;
+  font-size: 0.75em;
+  max-width: 0.01px;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.form-fieldset-wrapper:focus-within {
+  color: var(--mui-palette-primary-main);
+}
+
+.form-fieldset-wrapper,
+.toolbar-fieldset-wrapper,
+.tr-fieldset-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.form-fieldset-wrapper .form-fieldset:hover {
+  border-color: var(--mui-palette-common-black);
+}
+
+.toolbar-fieldset-wrapper:focus-within .form-fieldset,
+.tr-fieldset-wrapper:focus-within .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+  border-width: 2px;
+  padding: 7px 7px;
+}
+
+.toolbar-fieldset-wrapper .form-fieldset,
+.form-fieldset {
+  text-align: left;
+  position: absolute;
+  inset: -5px 0px 0px;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+  border-radius: var(--mui-shape-borderRadius);
+}
+
+.toolbar-fieldset-wrapper .form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0 5px 0 5px;
+  font-size: 0.75em;
+  max-width: 0.01px;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.toolbar-fieldset-wrapper .form-fieldset-legend span {
+  font-weight: var(--pf-t--global--font--weight--200);
+}
+
+.toolbar-fieldset-wrapper:focus-within {
+  color: var(--mui-palette-primary-main);
+}
+
+.toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
+  color: var(--mui-palette-primary-main);
+}
+
+.tr-fieldset-wrapper .pf-v6-c-form-control,
+.toolbar-fieldset-wrapper .pf-v6-c-form-control,
+.form-fieldset-wrapper .pf-v6-c-form-control {
+  --pf-v6-c-form-control--before--BorderColor: transparent !important;
+  --pf-v6-c-form-control--after--BorderColor: transparent !important;
+}
+
+.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
+.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
+  color: var(--mui-palette-primary-main);
+}
+
+.pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
+  --pf-v6-c-form-control--after--BorderWidth: 2px;
+}
+
+.pf-v6-c-form-control.pf-m-error {
+  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-error-main);
+}
+
+.mui-theme .pf-v6-c-form-control__utilities {
+  display: none;
+}
+
+.pf-v6-c-helper-text__item.pf-m-error {
+  --pf-v6-c-helper-text__item-text--Color: var(--mui-palette-error-main);
+  --pf-v6-c-helper-text__item-text--FontWeight: var(--mui-helper-text__item--FontWeight);
+  margin-left: 14px;
+  margin-top: 3px;
+}
+
+.pf-v6-c-form__group.pf-m-error .pf-v6-c-form__label {
+  // Using CSS property here since --pf-v6-c-form__label--Color does not exist.
+
+  color: var(--mui-palette-error-main);
+}
+
+.mui-theme .pf-v6-c-form__group.pf-m-error fieldset.form-fieldset {
+  border-color: var(--mui-palette-error-main);
+}
+
+.pf-v6-c-form__group:not(.pf-m-error):focus-within .pf-v6-c-form__label {
+  // Using CSS property here since --pf-v6-c-form__label--Color does not exist.
+
+  /* Change color of the label when the input is focused */
+  color: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-menu {
+  --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
+  --pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius);
+  --pf-v6-c-menu--PaddingBlockStart: var(--mui-spacing);
+  --pf-v6-c-menu--PaddingBlockEnd: var(--mui-spacing);
+  --pf-v6-c-menu--PaddingInlineStart: var(--mui-spacing);
+  --pf-v6-c-menu--PaddingInlineEnd: var(--mui-spacing);
+  --pf-v6-c-menu__item--PaddingBlockStart: var(--mui-menu__item--PaddingBlockStart);
+  --pf-v6-c-menu__item--PaddingBlockEnd: var(--mui-menu__item--PaddingBlockEnd);
+  --pf-v6-c-menu__item--PaddingInlineStart: var(--mui-menu__item--PaddingInlineStart);
+  --pf-v6-c-menu__item--PaddingInlineEnd: var(--mui-menu__item--PaddingInlineEnd);
+  --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
+}
+.mui-theme .pf-v6-c-menu__item.pf-m-selected {
+  --pf-v6-c-menu__item--BackgroundColor: var(--mui-menu__item--selected--BackgroundColor);
+}
+
+.mui-theme .pf-v6-c-menu__item-select-icon {
+  display: none;
+}
+
+.mui-theme .pf-v6-c-menu-toggle {
+  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
+  --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
+    --mui-menu-toggle--expanded--BackgroundColor
+  );
+  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
+  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
+  --pf-v6-c-menu-toggle--ColumnGap: var(--mui-menu-toggle--ColumnGap);
+  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
+  --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
+  --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
+    --pf-t--global--background--color--action--plain--hover
+  );
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
+    --pf-t--global--color--brand--default
+  );
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
+    --mui-palette-primary-dark
+  );
+  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--mui-palette-common-white);
+  --pf-v6-c-menu-toggle--disabled--Color: var(--mui-palette-text-disabled);
+  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--mui-palette-action-disabled);
+
+  border-radius: var(--mui-shape-borderRadius);
+  text-transform: var(--mui-text-transform);
+  font-weight: var(--mui-button-FontWeight);
+  letter-spacing: 0.02857em;
+}
+
+.mui-theme .pf-v6-c-menu-toggle__button {
+  text-transform: var(--mui-text-transform);
+  font-weight: var(--mui-button-FontWeight);
+  letter-spacing: 0.02857em;
+  align-self: stretch;
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-disabled {
+  border: solid 1px var(--mui-palette-action-disabled);
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
+  --pf-v6-c-menu-toggle--BorderRadius: 50%;
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary {
+  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-white);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main);
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-primary-dark);
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button {
+  --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
+}
+
+.mui-theme
+  .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
+  .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
+    --mui-palette-primary-dark
+  );
+}
+
+.mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
+  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--mui-spacing-4);
+  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--mui-spacing-4);
+  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
+}
+
+.mui-theme .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg {
+  vertical-align: revert;
+}
+
+.mui-theme .pf-v6-c-menu-toggle__toggle-icon {
+  font-size: 20px;
+}
+
+.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon {
+  margin-right: calc(var(--mui-spacing) * -1 + 4px);
+  margin-left: var(--mui-spacing);
+}
+
+.mui-theme .pf-v6-c-menu-toggle__icon {
+  display: block;
+}
+
+.mui-theme .pf-v6-c-nav {
+  padding-block-start: 0;
+}
+
+.mui-theme .pf-v6-c-nav__link {
+  --pf-v6-c-nav__link--BorderRadius: 0px;
+  --pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
+  --pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
+  --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
+  --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
+
+  &.active {
+    border-left: 3px solid var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--hover--Color: var(--mui-palette-common-white);
+  }
+
+  &.pf-v6-c-brand {
+    --pf-v6-c-nav__link--hover--BackgroundColor: none;
+  }
+}
+
+.mui-theme .pf-v6-c-nav__link:focus {
+  --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
+}
+
+.mui-theme .pf-v6-c-nav__list {
+  row-gap: none;
+}
+
+.mui-theme .pf-v6-radio {
+  --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-radio {
+  display: flex;
+  align-items: center;
+  margin: var(--mui-radio--margin);
+}
+
+.mui-theme .pf-v6-c-radio__input {
+  /* Hide default radio button */
+  display: none;
+}
+
+.mui-theme .pf-v6-c-radio__label {
+  --pf-v6-c-radio__label--FontSize: 16px;
+  padding-left: var(--mui-radio-PaddingLeft);
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Custom radio circle */
+.mui-theme .pf-v6-c-radio__label::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--mui-radio__label--Width);
+  height: var(--mui-radio__label--Height);
+  border: 2px solid var(--mui-palette-primary-main);
+  border-radius: 50%;
+  background: var(--mui-palette-common-white);
+}
+
+/* When radio is checked */
+.mui-theme .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::before {
+  background: var(--mui-palette-common-white);
+  border-color: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-page__sidebar {
+  position: fixed;
+  --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
+  --pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
+  height: 100vh;
+  z-index: 300;
+  display: flex;
+  flex-direction: column;
+}
+
+.mui-theme .pf-v6-c-page__sidebar-body {
+  --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0px;
+  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Inner dot for checked state */
+.mui-theme .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  /* Center the dot */
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--mui-radio__input--Width);
+  /* Size of inner dot */
+  height: var(--mui-radio__input--Height);
+  border-radius: 50%;
+  background: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-table {
+  --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary);
+  --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table--cell--Color: var(--mui-palette-text-primary);
+  --pf-v6-c-table__button--hover--BackgroundColor: var(--mui-table__button--BackgroundColor);
+  --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color);
+  --pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart);
+  --pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd);
+  --pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart);
+  --pf-v6-c-table__button--PaddingInlineEnd: var(--mui-table__button--PaddingInlineEnd);
+  --pf-v6-c-table--cell--PaddingInlineStart: var(--mui-table--cell--PaddingInlineStart);
+  --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
+  --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
+  --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
+  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(
+    --mui-table--cell--first-last-child--PaddingInline
+  );
+  --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-FontWeight);
+  --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
+  --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(
+    --mui-table__sort-indicator--MarginInlineStart
+  );
+
+  letter-spacing: 0.01071em;
+}
+
+.mui-theme .pf-v6-c-table .pf-m-align-right {
+  text-align: right;
+}
+
+.mui-theme .pf-v6-c-table__sort-indicator {
+  font-size: 18px;
+  opacity: 0;
+  transition:
+    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform-origin: center center;
+  align-self: start;
+}
+
+/* CSS workaround to use MUI icon for sort icon */
+.mui-theme .pf-v6-c-table__sort-indicator::before {
+  display: block;
+  width: 1em;
+  height: 1em;
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='ArrowDownwardIcon'%3E%3Cpath d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+/* Hide PF's default icon for the CSS workaround to use MUI's icon */
+.mui-theme .pf-v6-c-table__sort-indicator svg {
+  display: none;
+}
+
+.mui-theme .pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator,
+.mui-theme .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator {
+  opacity: 0.6;
+}
+
+.mui-theme .pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
+  transform: rotate(180deg);
+  align-self: end;
+}
+
+.mui-theme .pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
+  align-self: start;
+}
+
+.mui-theme .pf-v6-c-tab-content {
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+}
+
+.mui-theme .pf-v6-c-tabs {
+  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
+  --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
+  --pf-v6-c-tabs__item--PaddingBlockEnd: var(--mui-tabs__item--PaddingBlockEnd);
+  --pf-v6-c-tabs__item--PaddingInlineStart: none;
+  --pf-v6-c-tabs__item--PaddingInlineEnd: var(--mui-tabs__item--PaddingInlineEnd);
+  --pf-v6-c-tabs__link--PaddingBlockStart: var(--mui-tabs__link--PaddingBlockStart);
+  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--mui-tabs__link--PaddingBlockEnd);
+  --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
+  --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
+  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
+  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
+    --mui-tabs__item--m-current__link--after--BorderWidth
+  );
+  --pf-v6-c-tabs__link--FontSize: 0.875rem;
+}
+
+.mui-theme .pf-v6-c-tabs__link {
+  text-transform: var(--mui-text-transform);
+  font-weight: var(--mui-button-FontWeight);
+  line-height: var(--mui-button-line-height);
+  letter-spacing: 0.02857em;
+}
+
+.mui-theme .pf-v6-c-tab-content {
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+}
+
+.mui-theme .pf-v6-c-table__td.pf-v6-c-table__action.pf-m-width-10 {
+  align-content: center;
+}
+
+.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select > .pf-v6-c-menu-toggle.pf-m-disabled {
+  border: none;
+}
+
+.mui-theme .pf-v6-c-label {
+  --pf-v6-c-label--BorderRadius: 16px;
+  --pf-v6-c-label--FontSize: 0.8125rem;
+  --pf-v6-c-label--PaddingInlineEnd: var(--mui-spacing-8px);
+  --pf-v6-c-label--PaddingInlineStart: var(--mui-spacing-8px);
+  --pf-v6-c-label--PaddingBlockStart: 0;
+  --pf-v6-c-label--PaddingBlockEnd: 0;
+  height: 24px;
+}
+
+.mui-theme .pf-v6-c-label.pf-m-overflow {
+  border: 1px solid var(--mui-palette-grey-400);
+
+  .pf-v6-c-label__text {
+    color: var(--mui-palette-common-black);
+  }
+}
+
+.mui-theme .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
+  --pf-v6-c-button__icon--Color: var(--mui-palette-common-white);
+  --pf-v6-c-button--PaddingInlineStart: var(--mui-spacing-4px);
+  --pf-v6-c-button--PaddingInlineEnd: var(--mui-spacing-4px);
+}
+
+.mui-theme .pf-v6-c-label {
+  --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--inverse);
+}
+
+.mui-theme .pf-v6-c-label-group.pf-m-category {
+  --pf-v6-c-label-group--m-category--BorderWidth: 0px;
+  --pf-v6-c-label-group--m-category--BorderRadius: var(--mui-shape-borderRadius);
+  box-shadow: var(--mui-shadows-1);
+}
+
+.mui-theme .pf-v6-c-label.pf-m-outline {
+  --pf-v6-c-label--BorderColor: none;
+  --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
+  padding: 4px;
+}
+
+.mui-theme .pf-v6-c-masthead {
+  --pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
+  box-shadow: var(--mui-shadows-1);
+  min-height: var(--kf-central-app-bar-height);
+}
+
+.mui-theme .pf-v6-c-modal-box {
+  --pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius);
+  --pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24)
+}
+
+.mui-theme .pf-v6-c-button.pf-m-plain {
+  --pf-v6-c-button--BorderRadius: 50%;
+  --pf-v6-c-button--PaddingInlineStart: none;
+  --pf-v6-c-button--PaddingInlineEnd: none;
+}
+
+.mui-theme .pf-v6-c-page {
+  --pf-v6-c-page--BackgroundColor: var(--mui-palette-common-white);
+}
+
+.mui-theme .pf-v6-c-page__main {
+  --pf-v6-c-page__main--PaddingRight: 0;
+  overflow: visible;
+  margin-right: 2px;
+}
+
+.mui-theme .pf-v6-c-page__main-section {
+  --pf-v6-c-page__main-section--PaddingRight: 0;
+  overflow: visible;
+  margin-right: 2px;
+}
+
+.mui-theme .pf-v6-c-page__main-container {
+  overflow: visible;
+  margin-right: 2px;
+}
+
+.mui-theme .pf-v6-c-pagination {
+  --pf-v6-c-pagination__total-items--Display: block;
+}
+
+.mui-theme .pf-v6-c-pagination__total-items b {
+  font-weight: normal;
+}
+
+.mui-theme .pf-v6-c-pagination__page-menu {
+  order: -1;
+}
+
+.mui-theme .pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: none;
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: none;
+  text-transform: none;
+}
+
+.mui-theme .pf-v6-c-pagination__page-menu::before {
+  content: 'Rows per page:';
+}
+
+/* Hide Masthead Toggle by default */
+.mui-theme .pf-v6-c-masthead__toggle {
+  display: none;
+}
+
+/* Show Masthead Toggle on viewports below 1270px */
+@media (max-width: 1200px) {
+  .mui-theme .pf-v6-c-masthead__toggle {
+    display: block;
+    padding-block-start: var(--mui-spacing-4px);
+  }
+
+  .mui-theme .pf-v6-c-page__main-container {
+    margin-left: 0;
+  }
+}
+
+.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
+.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer,
+.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-breadcrumb {
+  --pf-v6-c-page__main-container--MarginInlineStart: calc(-2 * var(--mui-spacing-16px));
+  --pf-v6-c-page__main-section--PaddingInlineStart: none;
+  --pf-v6-c-page__main-section--PaddingInlineEnd: none;
+  --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: none;
+}
+
+.pf-v6-c-page__sidebar.pf-m-collapsed+.pf-v6-c-page__main-container {
+  --pf-v6-c-page__main-container--MarginInlineStart: calc(-1 * var(--mui-spacing-8px));
+  --pf-v6-c-page__main-container--MarginInlineEnd: calc(-1 * var(--mui-spacing-8px));
+}
+
+.mui-theme .pf-v6-c-form__group-control .pf-v6-c-menu-toggle.pf-m-full-width.pf-m-typeahead {
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: var(--mui-shape-borderRadius);
+  background-color: var(--mui-palette-common-white);
+
+  &:hover {
+    border-color: var(--mui-palette-common-black);
+    background-color: var(--mui-palette-common-white);
+  }
+
+  &:focus-within {
+    border-color: var(--mui-palette-primary-main);
+    border-width: 2px;
+    background-color: var(--mui-palette-common-white);
+  }
+
+  .pf-v6-c-text-input-group__text-input {
+    padding-left: var(--mui-spacing-12px);
+  }
+}