@byggforsk/fundament-theme
v0.0.8
Published
Design tokens for Fundament - Byggforskserien
Readme
Fundament - Et designsystem for Byggforskserien
Design Tokens for Designsystemet.
Installasjon
Installer pakken via npm:
npm install @byggforsk/fundament-themeeller med Yarn:
yarn add @byggforsk/fundament-themeImport
Denne pakken inneholder tema til Byggforskserien og Certification.
Importer temafil som et React-komponent.
For Byggforskserien, importer
import "@byggforsk/fundament-theme/fundament.css";For SINTEF Certification, importer
import "@byggforsk/fundament-theme/certification.css";Bruk
Når du skal sette farge på en komponent, er det to data-attributter som kan brukes:
data-color-schemesom endrer fargemodusdata-colorsom 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
Grunntema: primary, accent, neutral
Byggforskserien har i tillegg: bfsblaa, bfsgul, bfsgronn
I tillegg har vi semantiske farger for: success, warning, danger og info
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.