@byggforsk/fundament-theme

v0.0.13

Published

a day ago

Design tokens for Fundament - Byggforskserien

0High
0Medium
0Low

remy.eik

jargenr

Fundament - Designsystem for Byggforskserien

Design Tokens for Byggforskserien, Certification og Våtromsnormen.

Installasjon

Installer pakken via npm:

npm install @byggforsk/fundament-theme

eller med Yarn:

yarn add @byggforsk/fundament-theme

Import

Denne pakken inneholder tema til Byggforskserien, Certification og Våtromsnormen.

Egendefinert tema

Som standard bruker Fundament fundament.css som tema. Ønsker du å bruke et annet tema, f.eks. vaatromsnormen.css eller certification.css, opprett en wrapper-fil som sikrer riktig rekkefølge på CSS-importene.

Opprett filen src/themes/fundament.css:

@import "@byggforsk/fundament/styles.css";
@import "@byggforsk/fundament-theme/fundament.css";

For SINTEF Certification, opprett src/themes/certification.css:

@import "@byggforsk/fundament/styles.css";
@import "@byggforsk/fundament-theme/certification.css";

For Våtromsnormen, opprett src/themes/vaatromsnormen.css:

@import "@byggforsk/fundament/styles.css";
@import "@byggforsk/fundament-theme/vaatromsnormen.css";

Importer deretter wrapper-filen i applikasjonen din:

import "../themes/fundament.css";

Ikke importer både styles.css og temaet direkte, da dette kan forårsake kaskadekonflikter.

Bruk

Når du skal sette farge på en komponent, er det to data-attributter som kan brukes:

data-color-scheme som endrer fargemodus
data-color som endrer farge

data-color-scheme

Dette data-attributtet brukes for å veksle mellom lys, mørk eller andre fargemoduser. Innhold som er barn av et element med dette attributtet vil få modusen som er spesifisert av forelderen. Som standard brukes lys modus.

<body>
  <div>
    <!-- Innholdet her vil ha lys fargemodus -->
  </div>

  <div data-color-scheme="dark">
    <!-- Innholdet her vil ha mørk fargemodus -->
  </div>
</body>

Du kan endre data-color-scheme på hele eller deler av siden og bytte mellom ulike fargemoduser så ofte du vil. For eksempel kan forsiden være lys, men med en mørk bunnlinje (footer). Da kan du sette data-color-scheme="dark" på bunnlinjen.

data-color-scheme kan settes til light, dark eller auto. auto vil følge systeminnstillingene til brukeren.

data-color

Dette data-attributtet brukes for å endre fargen til en komponent. Du kan bruke alle fargene som finnes i temaet ditt.

<div data-color="neutral">
  <!-- Innholdet her vil ha nøytral farge -->
</div>

Farger i våre temaer

Alle temaer har grunntema: primary, accent, neutral

Byggforskserien har i tillegg: bfsblaa, bfsgul, bfsgronn, sintefblaa

Våtromsnormen har i tillegg: tertiary

Alle temaer har semantiske farger for: success, warning, danger, info, link og focus

Alle fargetokener kan brukes med data-color og tilpasser seg automatisk valgt data-color-scheme (lys/mørk)

Lisens

Dette prosjektet er lisensiert under MIT License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme