upcoming: [M3-8754] - Add Alias Tokens to the Theme (#11138)

* refactor: [M3-6538] - Add Alias tokens to theme * refactor: [M3-6538] - seperated alias tokens * refactor: [M3-6538] - refactor tokens object in theme * Added changeset: Add Alias tokens to theme * repositioning tokens * added comments for dark.ts
linode · Nov 1, 2024 · 28ad446 · 28ad446
1 parent b1f2b24
commit 28ad446
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 5 deletions.
diff --git a/packages/ui/.changeset/pr-11138-upcoming-features-1730101798188.md 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
@@ -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
@@ -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<AccentTypesLight, AccentTypesDark>;
+type ActionTypes = MergeTypes<ActionTypesLight, ActionTypesDark>;
+type BackgroundTypes = MergeTypes<BackgroundTypesLight, BackgroundTypesDark>;
+type BorderTypes = MergeTypes<BorderTypesLight, BorderTypesDark>;
+type ContentTypes = MergeTypes<ContentTypesLight, ContentTypesDark>;
+type ElevationTypes = MergeTypes<ElevationTypesLight, ElevationTypesDark>;
 type InteractionTypes = MergeTypes<InteractionTypesLight, InteractionTypesDark>;
 
 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
@@ -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: {