Mattilsynet Design

Designsystem ​

Mattilsynets designsystem bygger oppå designsystemet.no, men utvider med egenart, visuelle identitet og interne behov. Designsystemet fungerer som et felles språk mellom team og fagfelt, slik at vi lettere kan skape gode og gjenkjennbare brukeropplevelser som er tilgjengelig for alle.

💚 Bidra og delta:

Kom i gang for utviklere ​

Designsystemet tilbyr først og fremst en rekke CSS klassenavn som hjelper deg bygge responsive, fleksible og tilgjengelige grensesnitt. I tillegg får du tilgang til logoer, ikoner, illustasjoner og en rekke tokens/CSS custom properties for enkel bygging av egne komponenter i Mattilsynet-drakt. Slik bruker du pakken:

  1. Installer @mattilsynet/design fra Mattilsynets NPM organsiasjon:

    bash
    npm install @mattilsynet/design --save
    bash
    pnpm add @mattilsynet/design
    bash
    yarn add @mattilsynet/design
    bash
    bun add @mattilsynet/design

  2. Importer JavaScript støttefunksjonalitet (popover, field, etc.):

    js
    import "@mattilsynet/design";
    html
    <!-- Only use if you have no build step: -->
<script src="node_modules/@mattilsynet/design/mtds/index.iife.js"></script>

  3. Importer stiler enten via JavaScript, CSS eller med TailwindCSS:

    js
    import "@mattilsynet/design/styles.css";
    css
    @import url("@mattilsynet/design/styles.css");
    css
    /**
 * Fix Tailwind Preflight specificity by using @layer:
 * See https://css-tricks.com/?p=372576
 */
@layer tailwind-base, ds, mt;
@import url('@mattilsynet/design/styles.css');

@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

    Merk: background, color og font blir satt på <body> 🤓

    body { background: …; color: …; font: … } og b, strong, th { font-weight: 600 } blir automatisk definert, slik at vi ivaretar universell utforming og får samme font og farge på tvers. Dette er super lett å overstyre ved behov: din CSS vil alltid ha første prioritert - takket være teknikken CSS @layer 💚

  4. Ta i bruk klassenavn ved å importere styles objektet:

    jsx
    import { styles } from "@mattilsynet/design";

<button class={styles.button}></button>
    jsx
    import styles from "@mattilsynet/design/styles.json";

<button class={styles.button}></button>

    Hvorfor ikke bare skrive class="button"?

    Det skal være trygt å importere designsystemet i eksisterende prosjekt, eller bruke flere versjoner samtidig. Ved å bruke CSS-moduler får vi hashede klassenavn, som hindrer konflikt og gjør at du slipper å tenke på versjonering 🥳

  5. Ta i bruk illustrasjoner og ikoner - egen dokumentasjon kommer

Kom i gang for designere ​

Kommer