upcoming: [M3-6538] - Add Interaction Tokens, Minimally Cleanup Theme…

… Files (#11078)

* upcoming: [M3-6538] - Add Interaction Tokens, Minimally Cleanup Theme Files

* Add changeset

---------

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

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))

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,

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',
   },

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%',

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: {

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<ChartLightTypes, ChartDarkTypes>;
+type InteractionTypes = MergeTypes<InteractionTypesLight, InteractionTypesDark>;
 
 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;

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: {