@sikt/sds-tokens
v2.1.0
Published
## Consume
Downloads
27,385
Readme
@sikt/sds-tokens
Consume
npm i -s @sikt/sds-tokens
Stylesheet
@import url("@sikt/sds-tokens");
.prefix-custom-block__element--blue {
color: var(--sds-color-brand-primary-strong);
}
Note CSS tokens are best used by importing @sikt/sds-core
which will include them as CSS variables. But you can still make use of them directly from @sikt/sds-tokens
if need be.
React
import * as tokens from "@sikt/sds-tokens";
<Button style={{ color: tokens.default.color.brand.primary.strong.value }}>
Hello, World!
</Button>;
Sassy CSS
@use "@sikt/sds-tokens/scss/tokens";
.prefix-custom-block__element--blue {
color: tokens.$sds-color-brand-primary-strong;
}
Note SCSS tokens are currently only for showcase and will need a little love by the first one making use of them.
Design Tokens
Colors are available in light (default) and dark scheme.
Sizes are, in some cases, available for media mobile (default), tablet & desktop.
When there is no corresponding token in the non-default version the default should be used.
Tips
- Relative size tokens (
--sds-base-size-relative-<size>
) should be used on user font size setting scalable properties likefont-size
,line-height
, etc. These are calculated from the root font-size so that for example16px
is the same ascalc(16 * 1rem / 16)
. - Custom media queries are transformed to valid CSS during build step and need to be imported into the PostCSS file that uses them.
Note There is currently a bug in Figma that translates HSL to incorrect HEX color values. If you use the same name token you will get the correct HEX color value.
Contribute
Created using Style Dictionary and exported as CSS, SCSS & JavaScript variables.
Note Do not edit these directly in the /dist
output directory but rather in the /src
source directory.
Note Style Dictionary tokens follow a CTI (Category/Type/Item) naming pattern that may affect their outcome by what transforms are applied.
TODO: SCSS media query mixins.
TODO: JavaScript relative size variables. How are these used in non-CSS environments?