diff --git a/packages/ui/.changeset/pr-11138-upcoming-features-1730101798188.md b/packages/ui/.changeset/pr-11138-upcoming-features-1730101798188.md new file mode 100644 index 00000000000..bb0bd1164c4 --- /dev/null +++ b/packages/ui/.changeset/pr-11138-upcoming-features-1730101798188.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Upcoming Features +--- + +Add Alias tokens to theme ([#11138](https://github.com/linode/manager/pull/11138)) diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index e3b2f2daf9c..ed25a8f7e53 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -1,13 +1,19 @@ import { + Accent, Action, + Background, Badge, + Border, Button, Color, + Content, Dropdown, + Elevation, Interaction, NotificationToast, Select, TextField, + Typography, } from '@linode/design-language-system/themes/dark'; import { breakpoints } from '../breakpoints'; @@ -876,7 +882,14 @@ export const darkTheme: ThemeOptions = { textColors: customDarkModeOptions.textColors, tokens: { // No need to add global tokens here, as they will be inherited from light.ts + accent: Accent, + action: Action, + background: Background, + border: Border, + content: Content, + elevation: Elevation, interaction: Interaction, + typography: Typography, }, typography: { body1: { diff --git a/packages/ui/src/foundations/themes/index.ts b/packages/ui/src/foundations/themes/index.ts index 3d8467fb158..451870f6de2 100644 --- a/packages/ui/src/foundations/themes/index.ts +++ b/packages/ui/src/foundations/themes/index.ts @@ -6,13 +6,29 @@ import { darkTheme } from './dark'; import { lightTheme } from './light'; import type { + AccentTypes as AccentTypesLight, + ActionTypes as ActionTypesLight, + BackgroundTypes as BackgroundTypesLight, + BorderTypes as BorderTypesLight, ChartTypes, ColorTypes, + ContentTypes as ContentTypesLight, + ElevationTypes as ElevationTypesLight, FontTypes, InteractionTypes as InteractionTypesLight, + TypographyTypes, + RadiusTypes, SpacingTypes, } from '@linode/design-language-system'; -import type { InteractionTypes as InteractionTypesDark } from '@linode/design-language-system/themes/dark'; +import type { + AccentTypes as AccentTypesDark, + ActionTypes as ActionTypesDark, + BackgroundTypes as BackgroundTypesDark, + BorderTypes as BorderTypesDark, + ContentTypes as ContentTypesDark, + ElevationTypes as ElevationTypesDark, + InteractionTypes as InteractionTypesDark, +} from '@linode/design-language-system/themes/dark'; import type { latoWeb } from '../fonts'; // Types & Interfaces import type { @@ -29,6 +45,12 @@ import type { export type ThemeName = 'dark' | 'light'; +type AccentTypes = MergeTypes; +type ActionTypes = MergeTypes; +type BackgroundTypes = MergeTypes; +type BorderTypes = MergeTypes; +type ContentTypes = MergeTypes; +type ElevationTypes = MergeTypes; type InteractionTypes = MergeTypes; type Fonts = typeof latoWeb; @@ -83,16 +105,24 @@ declare module '@mui/material/styles/createTheme' { inputStyles: any; name: ThemeName; notificationToast: NotificationToast; - textColors: TextColors; tokens: { // ---- Global tokens: theme agnostic ---- color: ColorTypes; font: FontTypes; spacing: SpacingTypes; // ---------------------------------------- + accent: AccentTypes; + action: ActionTypes; + background: BackgroundTypes; + border: BorderTypes; chart: ChartTypes; + content: ContentTypes; + elevation: ElevationTypes; interaction: InteractionTypes; + radius: RadiusTypes; + typography: TypographyTypes; }; + textColors: TextColors; visually: any; } @@ -111,16 +141,24 @@ declare module '@mui/material/styles/createTheme' { inputStyles?: any; name: ThemeName; notificationToast?: NotificationToast; - textColors?: DarkModeTextColors | LightModeTextColors; tokens?: { // ---- Global tokens: theme agnostic ---- color?: ColorTypes; font?: FontTypes; spacing?: SpacingTypes; // ---------------------------------------- + accent?: AccentTypes; + action?: ActionTypes; + background?: BackgroundTypes; + border?: BorderTypes; chart?: ChartTypes; + content?: ContentTypes; + elevation?: ElevationTypes; interaction?: InteractionTypes; + radius?: RadiusTypes; + typography?: TypographyTypes; }; + textColors?: DarkModeTextColors | LightModeTextColors; visually?: any; } } diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 6082f5c2eab..c4b6a3e9bb0 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1,14 +1,20 @@ import { + Accent, Action, + Background, Border, Button, Chart, Color, + Content, Dropdown, + Elevation, Font, Interaction, NotificationToast, + Radius, Select, + Typography, Spacing, } from '@linode/design-language-system'; @@ -1632,11 +1638,19 @@ export const lightTheme: ThemeOptions = { spacing, textColors, tokens: { + accent: Accent, + action: Action, + background: Background, + border: Border, color: Color, - font: Font, - spacing: Spacing, chart: Chart, + content: Content, + elevation: Elevation, interaction: Interaction, + radius: Radius, + typography: Typography, + font: Font, + spacing: Spacing, }, typography: { body1: {