Theme

Theme par défaut de Reactic.

info

Cette partie dépend de la librairie styled-components.

Références

Le thème de base de Reactic est composé de plusieurs éléments :

• size : définition des tailles de base des fonts.
• zIndex : définition des z-index de base.
• weights : définition des poids de base des fonts.

Tailles de fonts

Le nommage des tailles est basé sur l'univers du Seigneur des Anneaux. Voir ici

const size = {
  silmaril: '0.625rem', // 10px
  ring: '0.75rem', // 12px
  palantir: '0.875rem', // 14px
  gollum: '1rem', // 16px
  hobbit: '1.125rem', // 18px
  anduril: '1.25rem', // 20px
  gimli: '1.375rem', // 22px
  gandalf: '1.5rem', // 24px
  nazgul: '1.625rem', // 26px
  legolas: '1.75rem', // 28px
  aragorn: '1.875rem', // 30px
  sauron: '2rem', // 32px
  shelob: '2.125rem', // 34px
  treebeard: '2.25rem', // 36px,
  troll: '2.375rem', // 38px,
  fellbeast: '2.5rem', // 40px
  balrog: '2.625rem', // 42px
  mumakil: '2.75rem', // 44px
  grond: '2.875rem', //46px
};

Z-index

const zIndex = {
  loader: 1000,
  notification: 600,
  modal: 400,
  fullscreenModal: 350,
  search: 300,
  sidebar: 200,
};

Poids de fonts

const weight = {
  thin: 100,
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700,
  black: 900,
};

Utilisation

Lors de l'initialisation d'une application, afin d'utiliser le thème par défaut de Reactic, il faut utiliser la composant ThemeProvider de styled-components :

import { theme } from '@creatic/reactic-styles';
import { ThemeProvider } from 'styled-components';

const App = () => (
  <ThemeProvider theme={theme}>
    <div>...</div>
  </ThemeProvider>
);

Extension du thème

Il est possible d'étendre le thème de base de Reactic en utilisant la fonction merge :

import { theme } from '@creatic/reactic-styles';
import { merge } from '@creatic/reactic-utils';

const newTheme = {
  color: {
    red50: '#ff0000',
  },
};

const myTheme = merge(theme, newTheme);

const App = () => (
  <ThemeProvider theme={myTheme}>
    <div>...</div>
  </ThemeProvider>
);

Typescript

Afin de définir implicitement le type du thème, il est possible de créer un fichier de déclaration de module styled.d.ts :

import 'styled-components';

import theme from './theme';

type TThemeType = typeof theme;

declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends TThemeType {}
}