@gyldendal/kobber-base v0.3.46
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.
9 months ago
10 months ago
11 months ago
11 months ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
10 months ago
1 year ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
10 months ago
12 months ago
10 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago