Refacto theme types to go to the value with ctrl click instead of type

site/source/design-system/theme.ts

@@ -1,4 +1,4 @@
-import { DefaultTheme } from 'styled-components'
+import { Theme } from '@/types/styled'
 
 const baseTheme = {
 	colors: {
@@ -193,7 +193,7 @@ const breakpoints = Object.fromEntries(
 	])
 ) as Record<SpacingKey, number>
 
-const theme: DefaultTheme = {
+const theme = {
 	breakpoints: {
 		values: {
 			xs: 0,
@@ -203,6 +203,6 @@ const theme: DefaultTheme = {
 	spacing: Object.values(baseTheme.spacings),
 
 	...baseTheme,
-}
+} satisfies Theme
 
 export default theme

site/source/types/styled.d.ts

@@ -1,6 +1,6 @@
 import 'styled-components'
 
-import { SpacingKey } from '@/design-system/theme'
+import theme from '@/design-system/theme'
 
 type Color = string
 
@@ -33,81 +33,86 @@ type FontSize = Metric
 
 type ShadowDefinition = string
 
-declare module 'styled-components' {
-	export interface DefaultTheme {
-		colors: {
-			bases: {
-				primary: Palette
-				secondary: Palette
-				tertiary: Palette
-			}
-
-			publics: {
-				employeur: Palette
-				particulier: Palette
-				independant: Palette
-				artisteAuteur: Palette
-				marin: Palette
-			}
-
-			extended: {
-				grey: Palette
-				error: SmallPalette
-				success: SmallPalette
-				info: SmallPalette
-				dark: Palette
-			}
+export interface Theme {
+	colors: {
+		bases: {
+			primary: Palette
+			secondary: Palette
+			tertiary: Palette
 		}
 
-		spacings: {
-			xxs: Spacing
-			xs: Spacing
-			sm: Spacing
-			md: Spacing
-			lg: Spacing
-			xl: Spacing
-			xxl: Spacing
-			xxxl: Spacing
+		publics: {
+			employeur: Palette
+			particulier: Palette
+			independant: Palette
+			artisteAuteur: Palette
+			marin: Palette
 		}
 
-		fonts: {
-			main: Font
-			heading: Font
+		extended: {
+			grey: Palette
+			error: SmallPalette
+			success: SmallPalette
+			info: SmallPalette
+			dark: Palette
 		}
-
-		baseFontSize: FontSize
-
-		box: {
-			borderRadius: Metric
-			borderWidth: Metric
-		}
-
-		elevations: {
-			2: ShadowDefinition
-			3: ShadowDefinition
-			4: ShadowDefinition
-			5: ShadowDefinition
-			6: ShadowDefinition
-		}
-
-		elevationsDarkMode: {
-			2: ShadowDefinition
-			3: ShadowDefinition
-			4: ShadowDefinition
-			5: ShadowDefinition
-			6: ShadowDefinition
-		}
-
-		breakpointsWidth: {
-			xl: Metric
-			lg: Metric
-			md: Metric
-			sm: Metric
-		}
-
-		darkMode: boolean
-
-		breakpoints: { values: Record<SpacingKey | 'xs', number> }
-		spacing: Array<string>
 	}
+
+	spacings: {
+		xxs: Spacing
+		xs: Spacing
+		sm: Spacing
+		md: Spacing
+		lg: Spacing
+		xl: Spacing
+		xxl: Spacing
+		xxxl: Spacing
+	}
+
+	fonts: {
+		main: Font
+		heading: Font
+	}
+
+	baseFontSize: FontSize
+
+	box: {
+		borderRadius: Metric
+		borderWidth: Metric
+	}
+
+	elevations: {
+		2: ShadowDefinition
+		3: ShadowDefinition
+		4: ShadowDefinition
+		5: ShadowDefinition
+		6: ShadowDefinition
+	}
+
+	elevationsDarkMode: {
+		2: ShadowDefinition
+		3: ShadowDefinition
+		4: ShadowDefinition
+		5: ShadowDefinition
+		6: ShadowDefinition
+	}
+
+	breakpointsWidth: {
+		xl: Metric
+		lg: Metric
+		md: Metric
+		sm: Metric
+	}
+
+	darkMode: boolean
+
+	breakpoints: { values: Record<SpacingKey | 'xs', number> }
+	spacing: Array<string>
+}
+
+type CustomTheme = typeof theme
+
+declare module 'styled-components' {
+	// eslint-disable-next-line @typescript-eslint/no-empty-interface
+	export interface DefaultTheme extends CustomTheme {}
 }