diff --git a/packages/manager/.changeset/pr-11078-upcoming-features-1728503718215.md b/packages/manager/.changeset/pr-11078-upcoming-features-1728503718215.md new file mode 100644 index 00000000000..b78f7edce7a --- /dev/null +++ b/packages/manager/.changeset/pr-11078-upcoming-features-1728503718215.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Add Interaction Tokens, Minimally Cleanup Theme Files ([#11078](https://github.com/linode/manager/pull/11078)) diff --git a/packages/manager/src/components/ColorPalette/ColorPalette.tsx b/packages/manager/src/components/ColorPalette/ColorPalette.tsx index 9404371eea9..f6e27c7c7a5 100644 --- a/packages/manager/src/components/ColorPalette/ColorPalette.tsx +++ b/packages/manager/src/components/ColorPalette/ColorPalette.tsx @@ -123,10 +123,6 @@ export const ColorPalette = () => { alias: 'theme.bg.bgPaper', color: theme.bg.bgPaper, }, - { - alias: 'theme.bg.bgAccessRow', - color: theme.bg.bgAccessRow, - }, { alias: 'theme.bg.bgAccessRowTransparentGradient', color: theme.bg.bgAccessRowTransparentGradient, diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx index ac0409e1b0a..17b54795979 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx @@ -61,7 +61,7 @@ const useStyles = makeStyles()((theme: Theme) => ({ '& span': { fontFamily: theme.font.bold, }, - background: theme.bg.bgAccessRow, + background: theme.interactionTokens.Background.Secondary, border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`, padding: '8px 15px', }, diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts index f59d4fb895c..4c7ec07a99e 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts @@ -157,7 +157,7 @@ export const StyledTableCell = styled(TableCell, { label: 'StyledTableCell' })( fontSize: 15, }, alignItems: 'center', - backgroundColor: theme.bg.bgAccessRow, + backgroundColor: theme.interactionTokens.Background.Secondary, color: theme.textColors.tableStatic, display: 'flex', fontFamily: '"UbuntuMono", monospace, sans-serif', @@ -180,7 +180,7 @@ export const StyledCopyTooltip = styled(CopyTooltip, { export const StyledGradientDiv = styled('div', { label: 'StyledGradientDiv' })( ({ theme }) => ({ '&:after': { - backgroundImage: `linear-gradient(to right, ${theme.bg.bgAccessRowTransparentGradient}, ${theme.bg.bgAccessRow});`, + backgroundImage: `linear-gradient(to right, ${theme.bg.bgAccessRowTransparentGradient}, ${theme.interactionTokens.Background.Secondary});`, bottom: 0, content: '""', height: '100%', diff --git a/packages/manager/src/foundations/themes/dark.ts b/packages/manager/src/foundations/themes/dark.ts index 8a2d45524c5..5386f2d7877 100644 --- a/packages/manager/src/foundations/themes/dark.ts +++ b/packages/manager/src/foundations/themes/dark.ts @@ -2,7 +2,6 @@ import { Action, Badge, Button, - Chart, Color, Dropdown, Interaction, @@ -38,7 +37,6 @@ export const customDarkModeOptions = { bg: { app: Color.Neutrals[100], appBar: tempReplacementforColorNeutralsBlack, - bgAccessRow: Color.Neutrals[80], bgAccessRowTransparentGradient: 'rgb(69, 75, 84, .001)', bgPaper: Color.Neutrals[90], interactionBgPrimary: Interaction.Background.Secondary, @@ -58,7 +56,6 @@ export const customDarkModeOptions = { borderTypography: Color.Neutrals[80], divider: Color.Neutrals[80], }, - charts: { ...Chart }, color: { black: Color.Neutrals.White, blueDTwhite: Color.Neutrals.White, @@ -199,7 +196,6 @@ export const darkTheme: ThemeOptions = { bg: customDarkModeOptions.bg, borderColors: customDarkModeOptions.borderColors, breakpoints, - charts: customDarkModeOptions.charts, color: customDarkModeOptions.color, components: { MuiAppBar: { @@ -856,6 +852,7 @@ export const darkTheme: ThemeOptions = { color: Select.Hover.Text, }, }, + interactionTokens: Interaction, name: 'dark', notificationToast, palette: { diff --git a/packages/manager/src/foundations/themes/index.ts b/packages/manager/src/foundations/themes/index.ts index ec0d31ce7f1..b9402e854ff 100644 --- a/packages/manager/src/foundations/themes/index.ts +++ b/packages/manager/src/foundations/themes/index.ts @@ -5,8 +5,11 @@ import { darkTheme } from 'src/foundations/themes/dark'; import { lightTheme } from 'src/foundations/themes/light'; import { deepMerge } from 'src/utilities/deepMerge'; -import type { Chart as ChartLight } from '@linode/design-language-system'; -import type { Chart as ChartDark } from '@linode/design-language-system/themes/dark'; +import type { + ChartTypes, + InteractionTypes as InteractionTypesLight, +} from '@linode/design-language-system'; +import type { InteractionTypes as InteractionTypesDark } from '@linode/design-language-system/themes/dark'; import type { latoWeb } from 'src/foundations/fonts'; // Types & Interfaces import type { @@ -23,9 +26,7 @@ import type { export type ThemeName = 'dark' | 'light'; -type ChartLightTypes = typeof ChartLight; -type ChartDarkTypes = typeof ChartDark; -type ChartTypes = MergeTypes; +type InteractionTypes = MergeTypes; type Fonts = typeof latoWeb; @@ -72,11 +73,12 @@ declare module '@mui/material/styles/createTheme' { applyTableHeaderStyles?: any; bg: BgColors; borderColors: BorderColors; - charts: ChartTypes; + chartTokens: ChartTypes; color: Colors; font: Fonts; graphs: any; inputStyles: any; + interactionTokens: InteractionTypes; name: ThemeName; notificationToast: NotificationToast; textColors: TextColors; @@ -91,11 +93,12 @@ declare module '@mui/material/styles/createTheme' { applyTableHeaderStyles?: any; bg?: DarkModeBgColors | LightModeBgColors; borderColors?: DarkModeBorderColors | LightModeBorderColors; - charts: ChartTypes; + chartTokens?: ChartTypes; color?: DarkModeColors | LightModeColors; font?: Fonts; graphs?: any; inputStyles?: any; + interactionTokens?: InteractionTypes; name: ThemeName; notificationToast?: NotificationToast; textColors?: DarkModeTextColors | LightModeTextColors; diff --git a/packages/manager/src/foundations/themes/light.ts b/packages/manager/src/foundations/themes/light.ts index e9cb069855c..9ca4057aa2c 100644 --- a/packages/manager/src/foundations/themes/light.ts +++ b/packages/manager/src/foundations/themes/light.ts @@ -17,12 +17,9 @@ import type { ThemeOptions } from '@mui/material/styles'; export const inputMaxWidth = 416; -export const charts = { ...Chart } as const; - export const bg = { app: Color.Neutrals[5], appBar: 'transparent', - bgAccessRow: Color.Neutrals[5], bgAccessRowTransparentGradient: 'rgb(255, 255, 255, .001)', bgPaper: Color.Neutrals.White, interactionBgPrimary: Interaction.Background.Secondary, @@ -242,7 +239,7 @@ export const lightTheme: ThemeOptions = { bg, borderColors, breakpoints, - charts, + chartTokens: Chart, color, components: { MuiAccordion: { @@ -1574,6 +1571,7 @@ export const lightTheme: ThemeOptions = { color: Select.Hover.Text, }, }, + interactionTokens: Interaction, name: 'light', // @todo remove this because we leverage pallete.mode now notificationToast, palette: {