Skip to content

Commit

Permalink
move remaining token styles to tsx file
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenny-s51
jenny-s51 committed Aug 12, 2024
1 parent 9dba8a3 commit db7f817
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 75 deletions.
38 changes: 0 additions & 38 deletions frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,6 @@
--mui-alert-warning-font-weight: 400;

--mui-button-font-weight: 500;

--pf-t--global--border--width--box--status--default: 1px;
--pf-t--global--border--radius--pill: 4px;
--pf-t--global--border--radius--medium: 4px;
}


Expand Down Expand Up @@ -97,47 +93,14 @@
transform: rotate(180deg);
}

.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);
}

.pf-v6-c-tabs {
--pf-v6-c-tabs__link--hover--BackgroundColor: transparent;
--pf-v6-c-tabs__item--PaddingBlockStart: 0;
--pf-v6-c-tabs__item--PaddingBlockEnd: 0;
--pf-v6-c-tabs__item--PaddingInlineStart: 0;
--pf-v6-c-tabs__item--PaddingInlineEnd: 0;
--pf-v6-c-tabs__link--PaddingBlockStart: 12px;
--pf-v6-c-tabs__link--PaddingBlockEnd: 12px;
--pf-v6-c-tabs__link--PaddingInlineStart: 16px;
--pf-v6-c-tabs__link--PaddingInlineEnd: 16px;
--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: 2px;
--pf-v6-c-tabs__link--FontSize: 0.875rem;
}

.pf-v6-c-tabs__link {
text-transform: uppercase;
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.02857em;
}

.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);
}

.pf-v6-c-label {
--pf-v6-c-label--BorderRadius: 16px;
--pf-v6-c-label--FontSize: 0.8125rem;
--pf-v6-c-label--PaddingInlineStart: 0;
--pf-v6-c-label--PaddingInlineEnd: 0;
height: 24px;
}

Expand All @@ -159,7 +122,6 @@
}

.pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
--pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
text-transform: none;
}

Expand Down
140 changes: 103 additions & 37 deletions frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,38 @@ export const muiTheme = () => {
// console.log (theme);
// console.log (theme.palette.action.active);


console.log(theme);

Check failure on line 14 in frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Unexpected console statement

Check failure on line 14 in frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Unexpected console statement
console.log("spacing", theme.spacing(6));
console.log("columnGap", theme.unstable_sxConfig.columnGap);
console.log('spacing', theme.spacing(6));

Check failure on line 15 in frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Unexpected console statement

Check failure on line 15 in frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Unexpected console statement
console.log('columnGap', theme.unstable_sxConfig.columnGap);

Check failure on line 16 in frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Unexpected console statement

Check failure on line 16 in frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Unexpected console statement
return theme;
// console.log (window.theme);
};
getTheme();

// Global vars
html.style.setProperty('--pf-t--color--blue--500', theme.palette.primary.main);
html.style.setProperty('--pf-t--global--border--width--box--status--default', '1px');
html.style.setProperty('--pf-t--global--border--radius--pill', '4px');
html.style.setProperty('--pf-t--global--border--radius--medium', '4px');

// Alert
// html.style.setProperty('--pf-v6-c-alert--m-warning__title--Color', '--pf-t--global--text--color--status--warning--default');
html.style.setProperty(
'--pf-v6-c-alert--m-warning__title--Color',
'--pf-t--global--text--color--status--warning--default',
);
html.style.setProperty('--pf-v6-c-alert__icon--MarginInlineEnd', '12');
// html.style.setProperty('--pf-v6-c-alert__title--FontWeight', 'var(--mui-alert-warning-font-weight)');
// html.style.setProperty('--pf-v6-c-alert__icon--MarginInlineEnd', '12px');
// html.style.setProperty('--pf-v6-c-alert__icon--MarginBlockStart', '7px');
// html.style.setProperty('--pf-v6-c-alert__icon--FontSize', '22px');
// html.style.setProperty('--pf-v6-c-alert--BoxShadow', 'none');
// html.style.setProperty('--pf-v6-c-alert--PaddingBlockStart', '6px');
// html.style.setProperty('--pf-v6-c-alert--PaddingBlockEnd', '6px');
// html.style.setProperty('--pf-v6-c-alert--PaddingInlineStart', '16px');
// html.style.setProperty('--pf-v6-c-alert--PaddingInlineStart', '16px');
html.style.setProperty(
'--pf-v6-c-alert__title--FontWeight',
'var(--mui-alert-warning-font-weight)',
);
html.style.setProperty('--pf-v6-c-alert__icon--MarginInlineEnd', '12px');
html.style.setProperty('--pf-v6-c-alert__icon--MarginBlockStart', '7px');
html.style.setProperty('--pf-v6-c-alert__icon--FontSize', '22px');
html.style.setProperty('--pf-v6-c-alert--BoxShadow', 'none');
html.style.setProperty('--pf-v6-c-alert--PaddingBlockStart', '6px');
html.style.setProperty('--pf-v6-c-alert--PaddingBlockEnd', '6px');
html.style.setProperty('--pf-v6-c-alert--PaddingInlineStart', '16px');
html.style.setProperty('--pf-v6-c-alert--PaddingInlineStart', '16px');

// Button
html.style.setProperty('--pf-v6-c-button--FontWeight', 'var(--mui-button-font-weight)');
Expand All @@ -57,39 +67,95 @@ export const muiTheme = () => {

// Menu toggle
html.style.setProperty('--pf-v6-c-menu-toggle__controls--MinWidth', '0');
html.style.setProperty('--pf-v6-c-menu-toggle--expanded--BackgroundColor', `${theme.palette.primary.main}`);
html.style.setProperty('--pf-v6-c-menu-toggle--LineHeight', `${theme.typography.button.lineHeight}`);
html.style.setProperty(
'--pf-v6-c-menu-toggle--expanded--BackgroundColor',
`${theme.palette.primary.main}`,
);
html.style.setProperty(
'--pf-v6-c-menu-toggle--LineHeight',
`${theme.typography.button.lineHeight}`,
);
html.style.setProperty('--pf-v6-c-menu-toggle--PaddingBlockStart', '6px');
html.style.setProperty('--pf-v6-c-menu-toggle--PaddingBlockEnd', '6px');
html.style.setProperty('--pf-v6-c-menu-toggle--PaddingInlineStart', '16px');
html.style.setProperty('--pf-v6-c-menu-toggle--PaddingInlineEnd', '16px');
html.style.setProperty('--pf-v6-c-menu-toggle--ColumnGap', '0');

// Table
// Table
html.style.setProperty(
'--pf-v6-c-table__sort--m-selected__button--Color',
`${theme.palette.common.black}`,
);
html.style.setProperty('--pf-v6-c-table__button--BackgroundColor', 'none');
html.style.setProperty('--pf-v6-c-table__button--hover--BackgroundColor', 'none');
html.style.setProperty('--pf-v6-c-table__sort-indicator--Color', '#666');
html.style.setProperty(
'--pf-v6-c-table__sort__button--hover__sort-indicator--Color',
'#00000050',
);
html.style.setProperty('--pf-v6-c-table__sort__button--hover__text--Color', '#00000099');
html.style.setProperty('--pf-v6-c-table--cell--Color', 'rgba(0, 0, 0, 0.87)');
html.style.setProperty('--pf-v6-c-table__button--Color', 'var(--pf-v6-c-table--cell--Color)');
html.style.setProperty('--pf-v6-c-table__button--PaddingBlockStart', '0');
html.style.setProperty('--pf-v6-c-table__button--PaddingBlockEnd', '0');
html.style.setProperty('--pf-v6-c-table__button--PaddingInlineStart', '0');
html.style.setProperty('--pf-v6-c-table__button--PaddingInlineEnd', '0');
html.style.setProperty('--pf-v6-c-table--cell--PaddingInlineStart', '16px');
html.style.setProperty('--pf-v6-c-table--cell--PaddingInlineEnd', '16px');
html.style.setProperty('--pf-v6-c-table--cell--PaddingBlockStart', '16px');
html.style.setProperty('--pf-v6-c-table--cell--PaddingBlockEnd', '16px');
html.style.setProperty('--pf-v6-c-table--cell--first-last-child--PaddingInline', '0px');
html.style.setProperty('--pf-v6-c-table__thead--cell--FontWeight', '500');
html.style.setProperty('--pf-v6-c-table__thead--cell--FontSize', '14px');
html.style.setProperty('--pf-v6-c-table__tr--BorderBlockEndColor', 'rgba(224, 224, 224, 1)');
html.style.setProperty('--pf-v6-c-table__sort-indicator--MarginInlineStart', '4px');

// Tabs
html.style.setProperty('--pf-v6-c-tabs__link--hover--BackgroundColor', 'transparent');
html.style.setProperty('--pf-v6-c-tabs__item--PaddingBlockStart', '0');
html.style.setProperty('--pf-v6-c-tabs__item--PaddingBlockEnd', '0');
html.style.setProperty('--pf-v6-c-tabs__item--PaddingInlineStart', '0');
html.style.setProperty('--pf-v6-c-tabs__link--PaddingInlineEnd', '0');
html.style.setProperty('--pf-v6-c-tabs__link--PaddingBlockStart', '12px');
html.style.setProperty('--pf-v6-c-tabs__link--PaddingBlockEnd', '12px');
html.style.setProperty('--pf-v6-c-tabs__link--PaddingInlineStart', '16px');
html.style.setProperty('--pf-v6-c-tabs__link--PaddingInlineEnd', '16px');
html.style.setProperty(
'--pf-v6-c-tabs__item--m-current__link--Color',
'var(--pf-t--global--text--color--brand--default)',
);
html.style.setProperty('--pf-v6-c-tabs__item--m-current__link--after--BorderWidth', '2px');
html.style.setProperty('--pf-v6-c-tabs__link--FontSize', '0.875rem');

html.style.setProperty('--pf-v6-c-table__sort--m-selected__button--Color',' #000000de');
html.style.setProperty('--pf-v6-c-table__button--BackgroundColor', 'none');
html.style.setProperty('--pf-v6-c-table__button--hover--BackgroundColor', 'none');
html.style.setProperty('--pf-v6-c-table__sort-indicator--Color', '#666');
html.style.setProperty('--pf-v6-c-table__sort__button--hover__sort-indicator--Color', '#00000050');
html.style.setProperty('--pf-v6-c-table__sort__button--hover__text--Color', '#00000099');
html.style.setProperty('--pf-v6-c-table--cell--Color', 'rgba(0, 0, 0, 0.87)');
html.style.setProperty('--pf-v6-c-table__button--Color', 'var(--pf-v6-c-table--cell--Color)');
html.style.setProperty('--pf-v6-c-table__button--PaddingBlockStart', '0');
html.style.setProperty('--pf-v6-c-table__button--PaddingBlockEnd', '0');
html.style.setProperty('--pf-v6-c-table__button--PaddingInlineStart', '0');
html.style.setProperty('--pf-v6-c-table__button--PaddingInlineEnd', '0');
html.style.setProperty('--pf-v6-c-table--cell--PaddingInlineStart', '16px');
html.style.setProperty('--pf-v6-c-table--cell--PaddingInlineEnd', '16px');
html.style.setProperty('--pf-v6-c-table--cell--PaddingBlockStart', '16px');
html.style.setProperty('--pf-v6-c-table--cell--PaddingBlockEnd', '16px');
html.style.setProperty('--pf-v6-c-table--cell--first-last-child--PaddingInline', '0px');
html.style.setProperty('--pf-v6-c-table__thead--cell--FontWeight', '500');
html.style.setProperty('--pf-v6-c-table__thead--cell--FontSize', '14px');
html.style.setProperty('--pf-v6-c-table__tr--BorderBlockEndColor', 'rgba(224, 224, 224, 1)');
html.style.setProperty('--pf-v6-c-table__sort-indicator--MarginInlineStart', '4px');
// Tab content
html.style.setProperty(
'--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd',
'var(--pf-t--global--spacer--lg)',
);
html.style.setProperty(
'--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart',
'var(--pf-t--global--spacer--lg)',
);
html.style.setProperty(
'--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd',
'var(--pf-t--global--spacer--lg)',
);
html.style.setProperty(
'--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart',
'var(--pf-t--global--spacer--lg)',
);

// Label
html.style.setProperty('--pf-v6-c-label--BorderRadius', '16px');
html.style.setProperty('--pf-v6-c-label--FontSize', '0.8125rem');
html.style.setProperty('--pf-v6-c-label--PaddingInlineStart', '0');
html.style.setProperty('--pf-v6-c-label--PaddingInlineEnd', '0');

// Pagination menu toggle
html.style.setProperty(
'--pf-v6-c-menu-toggle--expanded--BackgroundColor',
'var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor)',
);
};

// TODO: apply tokens like this next, investigate replacing CSS stylesheet with JS stylesheet

0 comments on commit db7f817

Please sign in to comment.