@gyldendal/kobber-base
v0.3.43
Published
## ๐ ๏ธ Usage
Downloads
1,390
Keywords
Readme
Base
๐ ๏ธ Usage
Design tokens can be imported as json, css variables or sass variables:
import * as tokens from "~@gyldendal/kobber-base/themes/default/tokens";
export const Button = styled.button`
background-color: ${tokens.component.button.color.background};
`;
@import "~@gyldendal/kobber-base/themes/default/tokens.css";
.button {
background-color: var(--kobber-component-button-color-background);
}
@use "~@gyldendal/kobber-base/themes/default/tokens.scss" as tokens;
.button {
background-color: tokens.$component-button-color-background;
}
Typography can be applied directly to HTML using CSS classes or by using composes
in css modules:
<style>@import "~@gyldendal/kobber-base/themes/default/typography.css";</style>
<h1 class="kobber-typography-heading-xl">Heading</h1>
.my-heading {
composes: headingXxl from "~@gyldendal/kobber-base/themes/default/typography.module.css";
}
Also see the typography component from @gyldendal/kobber-components:
import { ThemeProvider, Typography } from "~@gyldendal/kobber-base/react";
<ThemeProvider variant="default">
<Typography component="h1" variant="headingXxl" />
</TheThemeProviderme>
โก Quick how to: update tokens
- In Figma, make sure "reference mode in variables" is enabled for the design tokens plugin
- Export json from Figma
- Replace json in
tokens-from-figma.json
- Run
yarn build
- Commit changes
๐งฑ Token folder structure
/
โโโ themes/
โ โโโ tokens.css
โ โโโ tokens.scss
โ โโโ token.json
โโโ build-tokens.ts
โโโ config.ts
โโโ tokens-from-figma.json
We use style-dictionary to transform and format the tokens in ./tokens-from-figma.json
.
In ./config.ts
we decide which formats we want (css, scss, js and more), and in ./build-tokens.ts
we can create formatters and use other utilities to change the output how we want.
The files in ./themes
are auto generated and should never be edited manually.