Tyylien käyttöohje

Design System tarjoaa Suomi.fi-identiteetin mukaisia tyylimäärittelyjä eli tokeneita. Design Systemiin kuuluvan komponenttikirjaston tyylit pohjautuvat näihin tokeneihin.

Suomi.fi design tokenit löytyvät erillisenä pakettina yhdestä npm-moduulista. Niitä voi käyttää joko Javascript-muodossa (CSS-in-JS) tai SCSS-muodossa. Tokeneiden tarkempi käyttöohjeistus löytyy GitHub-dokumentaatiosta.

GitHub

Tyylitokeneiden käyttö

Tokeneita hyödyntämällä voi oman sivustonsa tyylit pitää linjassa Suomi.fi-teeman kanssa. Tokeneita voi käyttää suoraan omasta npm-moduulistaan kuten seuraavassa koodiesimerkissä.

Tyylitelty elementti


import React from 'react';
import { suomifiDesignTokens } from 'suomifi-design-tokens';

export const Example = () => (
  <div
    style={{
      margin: suomifiDesignTokens.spacing.xl,
      padding: suomifiDesignTokens.spacing.s,
      background: suomifiDesignTokens.colors.highlightBase,
      fontSize:
        suomifiDesignTokens.values.typography.bodyText.fontSize.value +
        suomifiDesignTokens.values.typography.bodyText.fontSize.unit,
      color: suomifiDesignTokens.colors.whiteBase,
    }}
  >
    Example
  </div>
);

Vaihtoehtoisesti tokenit ovat käytettävissä myös komponenttikirjaston teemaobjektin kautta alla olevan esimerkin mukaisesti.


import React from 'react';
import { defaultSuomifiTheme } from 'suomifi-ui-components';

export const Example = () => (
  <div
    style={{
      margin: defaultSuomifiTheme.spacing.xl,
      padding: defaultSuomifiTheme.spacing.s,
      background: defaultSuomifiTheme.colors.highlightBase,
      boxShadow: defaultSuomifiTheme.shadows.panelShadow,
      fontSize:
        defaultSuomifiTheme.values.typography.bodyText.fontSize.value +
        defaultSuomifiTheme.values.typography.bodyText.fontSize.unit,
      color: defaultSuomifiTheme.colors.whiteBase,
    }}
  >
    Example
  </div>
);