App styling

Applications should import the public CSS entry points once at the app boundary.

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

Component-level static styles should use vanilla-extract. Prefer sprinkles and vars from @plumile/ui before introducing one-off values.

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',
      },
    },
  },
]);

Keep business logic out of UI styles. Styles should encode layout, state, and visual semantics, not application rules.

For the full application shell that imports these styles once, see Full app shell.