@alveole/theme

Thème partagé (tokens, typographies, helpers) pour les apps React Native / web.

Installation

npm i @alveole/theme

Peer deps requis : react, react-native, expo-font, expo-system-ui, @tamagui/core.

Utilisation rapide

import { ThemeProvider, useTheme, makeStyles } from '@alveole/theme';

export default function App() {
  return (
    <ThemeProvider>
      <Screen />
    </ThemeProvider>
  );
}

function Screen() {
  const { spacing } = useTheme();
  return <Box style={{ margin: spacing('100') }}>Contenu</Box>;
}

Générer des styles

// Exemple.styles.tsx
import { makeStyles } from '@alveole/theme';

export const useStyles = makeStyles(({ spacing }) => ({
  container: { padding: spacing('150') },
}));

// Exemple.tsx
import { useStyles } from './Exemple.styles';

function Exemple() {
  const styles = useStyles();
  return <Box style={styles.container} />;
}

Personnaliser la palette

<ThemeProvider
  color={{
    Neutre: { 100: '#F7F7F7' },
    Mandarine: { 50: '#FFF3EA' },
  }}
>
  <App />
</ThemeProvider>

(Recommandé) Vous pouvez définir un fichier de configuration à la racine de votre projet alveole.config.js afin de surcharger les tokens du thème.

const { Colors } = require('@alveole/theme');

/** @type {import('@alveole/theme').Palette} */
const palette = {
  primary: Colors.VertPrairie['sun-475'],

  background: {
    button: {
      primary: {
        default: Colors.VertPrairie['sun-475'],
        hover: Colors.VertPrairie['sun-475-hover'],
      },
    },
  },
};

module.exports = { palette };

// Utiliser dans le provider :
// import config from '@/alveole.config.js';
// ...
// <ThemeProvider color={config.palette}>

Variables CSS (web)

Sur le web, les variables CSS sont injectées automatiquement si besoin par une lib web.

/* Spacing */
var(--spacing-050)
var(--spacing-150)

/* Colors */
var(--color-Neutre-200)
var(--color-Mandarine-50)

Références

• Typage du thème : src/type/Theme.ts
• Palette : src/constants/Palette.ts
• Typographies : src/constants/Typography.ts