Styling

Lumi-widgeten er bygget med Aksel (Navs designsystem) og krever to CSS-importer for å fungere riktig.

CSS-import

Begge importene er påkrevd — uten dem vil layouten se ødelagt ut:

import "@navikt/ds-css";              // Aksel base-styles
import "@navikt/lumi-survey/styles.css"; // Lumi widget-styles

Mangler CSS?

Hvis widgeten vises uten styling (ingen farger, rar layout), sjekk at begge CSS-importene er med. Se også Feilsøking.

style-prop

Du kan justere posisjon, farger og legge til egne CSS-klasser via style-propen:

<LumiSurveyDock
  surveyId="min-flate"
  survey={survey}
  transport={transport}
  style={{
    position: "bottom-left",
    offset: 16,
    panelBackground: "surface-subtle",
    panelBorderColor: "neutral-subtle",
    containerClassName: "min-ekstra-klasse",
  }}
/>

Tilgjengelige style-properties

Se Props-referanse → style for komplett oversikt over alle style-properties.

Aksel-kompatibilitet

Widgeten bruker Aksel-komponenter og tokens internt. Det betyr at den automatisk følger Aksels:

• Typografi — @navikt/ds-css gir riktige fonter og tekststørrelser
• Spacing — space-*-tokens brukes for konsistent avstand
• Farger — tokens som surface-subtle, neutral-subtle osv.

Du kan bruke alle Aksel Box-kompatible background- og borderColor-tokens i panelBackground og panelBorderColor.

Storybook

For å se widgeten i ulike konfigurasjoner, bruk Storybook:

🔗 Lumi Storybook

Storybook inneholder eksempler med ulike presets, rating-varianter, styling-alternativer og branching-logikk.