Styling applicatif

Les applications doivent importer les entry points CSS publics une seule fois a la frontiere applicative.

import '@plumile/ui/style.css';
import '@plumile/backoffice-react/style.css';

Les styles statiques de composants doivent utiliser vanilla-extract. Preferez sprinkles et vars depuis @plumile/ui avant d’introduire des valeurs ponctuelles.

import { keyframes, style } from '@vanilla-extract/css';
import { sprinkles, vars } from '@plumile/ui';

const riseIn = keyframes({
  '0%': { opacity: 0, transform: 'translateY(8px)' },
  '100%': { opacity: 1, transform: 'translateY(0)' },
});

export const list = sprinkles({
  display: 'flex',
  flexDirection: 'column',
  gap: 4,
});

export const item = style([
  sprinkles({
    display: 'grid',
    gap: 6,
    padding: 5,
    borderRadius: 'xl',
    borderWidth: 'px',
    borderStyle: 'solid',
    borderColor: 'borderSubtle',
    backgroundColor: 'surface',
  }),
  {
    gridTemplateColumns: 'minmax(0, 2fr) minmax(0, 1fr) auto',
    boxShadow: vars.boxShadow.sm,
    animation: `${riseIn} 420ms ease`,
    '@media': {
      'screen and (max-width: 900px)': {
        gridTemplateColumns: '1fr',
      },
    },
  },
]);

Gardez la logique metier hors des styles UI. Les styles encodent layout, etat et semantique visuelle, pas les regles applicatives.

Pour le shell applicatif qui importe ces styles une seule fois, voir Shell applicatif complet.