Theme basic implementation with colors

mon-entreprise/source/App.tsx

@@ -9,7 +9,9 @@ import {
 	SituationProvider,
 } from 'Components/utils/EngineContext'
 import { SitePathsContext } from 'Components/utils/SitePathsContext'
+import { GlobalStyle } from 'DesignSystem/global-style'
 import { Container } from 'DesignSystem/layout'
+import { theme } from 'DesignSystem/theme'
 import 'iframe-resizer'
 import { useContext, useMemo } from 'react'
 import { Helmet } from 'react-helmet'
@@ -20,6 +22,7 @@ import {
 	configSituationSelector,
 	situationSelector,
 } from 'Selectors/simulationSelectors'
+import { ThemeProvider } from 'styled-components'
 import './App.css'
 import Accessibilité from './pages/Accessibilité'
 import Budget from './pages/Budget/Budget'
@@ -66,7 +69,10 @@ export default function Root({ basename, rules }: RootProps) {
 			}}
 		>
 			<EngineProvider value={engine}>
-				<Router />
+				<ThemeProvider theme={theme}>
+					<GlobalStyle />
+					<Router />
+				</ThemeProvider>
 			</EngineProvider>
 		</Provider>
 	)

mon-entreprise/source/design-system/global-style.ts

@@ -0,0 +1,7 @@
+import { createGlobalStyle } from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle`
+body {
+
+}
+`

mon-entreprise/source/design-system/index.ts

@@ -1 +1,3 @@
 export * as layout from './layout'
+
+export { GlobalStyle } from './global-style'

mon-entreprise/source/design-system/styled.d.ts

@@ -24,6 +24,10 @@ type SmallPalette = {
 
 type Spacing = string
 
+type Font = string
+
+type FontSize = string
+
 declare module 'styled-components' {
 	export interface DefaultTheme {
 		colors: {
@@ -59,5 +63,12 @@ declare module 'styled-components' {
 			xxl: Spacing
 			xxxl: Spacing
 		}
+
+		fonts: {
+			main: Font
+			heading: Font
+		}
+
+		baseFontSize: FontSize
 	}
 }

mon-entreprise/source/design-system/theme.ts

@@ -0,0 +1,146 @@
+import { DefaultTheme } from 'styled-components'
+
+export const theme: DefaultTheme = {
+	colors: {
+		bases: {
+			primary: {
+				100: '#EFF4FF',
+				200: '#DBE7FF',
+				300: '#B6CEFC',
+				400: '#9EBBF1',
+				500: '#6B93DA',
+				600: '#2E5FB6',
+				700: '#1D458C',
+				800: '#122F62',
+			},
+			seconday: {
+				100: '#E0FDFF',
+				200: '#AFFBFF',
+				300: '#7AEEF4',
+				400: '#56DFE7',
+				500: '#20BFC8',
+				600: '#008088',
+				700: '#0D5A5E',
+				800: '#093A3E',
+			},
+			tertiary: {
+				100: '#FFF4D2',
+				200: '#FFE38A',
+				300: '#FFD60C',
+				400: '#FFBB0C',
+				500: '#C2900D',
+				600: '#7D5B04',
+				700: '#5A4203',
+				800: '#402E01',
+			},
+		},
+
+		publics: {
+			employeur: {
+				100: '#E5F8EB',
+				200: '#C1F6FE',
+				300: '#91E4F2',
+				400: '#63D4E7',
+				500: '#21BFDC',
+				600: '#007B91',
+				700: '#015D6D',
+				800: '#023F4A',
+			},
+			particulier: {
+				100: '#FFF2ED',
+				200: '#FFDED1',
+				300: '#FFB79C',
+				400: '#FF9B75',
+				500: '#FF703A',
+				600: '#B53708',
+				700: '#8C2904',
+				800: '#5E1D01',
+			},
+			independant: {
+				100: '#FFF0F1',
+				200: '#FFDDE0',
+				300: '#FFB8C3',
+				400: '#FF99A3',
+				500: '#F66775',
+				600: '#CC2434',
+				700: '#A31927',
+				800: '#7D0713',
+			},
+			artisteAuteur: {
+				100: '#FAF0FB',
+				200: '#F8E0F8',
+				300: '#ECC0F0',
+				400: '#D7A4DC',
+				500: '#B880BD',
+				600: '#734278',
+				700: '#602F65',
+				800: '#4A184F',
+			},
+			marin: {
+				100: '#EAFEF8',
+				200: '#C1FFEC',
+				300: '#84FAD6',
+				400: '#52EABC',
+				500: '#16DCA1',
+				600: '#00875F',
+				700: '#066549',
+				800: '#02412F',
+			},
+		},
+
+		extended: {
+			grey: {
+				100: '#FFFFFF',
+				200: '#F8F9FA',
+				300: '#E6E9EC',
+				400: '#CDD3D9',
+				500: '#ADB5BD',
+				600: '#6C757D',
+				700: '#495057',
+				800: '#212529',
+			},
+			error: {
+				100: '#FDE8E9',
+				200: '#F9BCC0',
+				300: '#DB666E',
+				400: '#CB111D',
+				500: '#96050F',
+				600: '#52070C',
+			},
+			success: {
+				100: '#DCFCDE',
+				200: '#AAF0B1',
+				300: '#7DE38A',
+				400: '#53D769',
+				500: '#3CB053',
+				600: '#18632C',
+			},
+			info: {
+				100: '#FFFCE0',
+				200: '#FFF5B8',
+				300: '#FDDF64',
+				400: '#F0C100',
+				500: '#D3AA00',
+				600: '#6B5700',
+			},
+		},
+	},
+
+	spacings: {
+		xxs: '.25rem',
+		xs: '.5rem',
+		sm: '1rem',
+		md: '1.5rem',
+		lg: '2rem',
+		xl: '3rem',
+		xxl: '4rem',
+		xxxl: '8rem',
+	},
+
+	fonts: {
+		main: '',
+		heading: '',
+	},
+
+	baseFontSize: '16px',
+}