diff --git a/mon-entreprise/source/App.tsx b/mon-entreprise/source/App.tsx index 2d4db3e82..b724674a8 100644 --- a/mon-entreprise/source/App.tsx +++ b/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) { }} > - + + + + ) diff --git a/mon-entreprise/source/design-system/global-style.ts b/mon-entreprise/source/design-system/global-style.ts new file mode 100644 index 000000000..33ee21284 --- /dev/null +++ b/mon-entreprise/source/design-system/global-style.ts @@ -0,0 +1,7 @@ +import { createGlobalStyle } from 'styled-components' + +export const GlobalStyle = createGlobalStyle` +body { + +} +` diff --git a/mon-entreprise/source/design-system/index.ts b/mon-entreprise/source/design-system/index.ts index 5dd4bb2c8..642a9f380 100644 --- a/mon-entreprise/source/design-system/index.ts +++ b/mon-entreprise/source/design-system/index.ts @@ -1 +1,3 @@ export * as layout from './layout' + +export { GlobalStyle } from './global-style' diff --git a/mon-entreprise/source/design-system/styled.d.ts b/mon-entreprise/source/design-system/styled.d.ts index b7e4e28c5..9bdd5e9f1 100644 --- a/mon-entreprise/source/design-system/styled.d.ts +++ b/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 } } diff --git a/mon-entreprise/source/design-system/theme.ts b/mon-entreprise/source/design-system/theme.ts new file mode 100644 index 000000000..4ac2ad3af --- /dev/null +++ b/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', +}