0.3.46 • Published 9 months ago

@gyldendal/kobber-base v0.3.46

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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

  1. In Figma, make sure "reference mode in variables" is enabled for the design tokens plugin
  2. Export json from Figma
  3. Replace json in tokens-from-figma.json
  4. Run yarn build
  5. 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.

0.3.46

9 months ago

0.3.45

10 months ago

0.3.31

11 months ago

0.3.39

11 months ago

0.3.17

1 year ago

0.3.38

11 months ago

0.3.16

1 year ago

0.3.37

11 months ago

0.3.15

1 year ago

0.3.36

11 months ago

0.3.14

1 year ago

0.3.35

11 months ago

0.3.13

1 year ago

0.3.34

11 months ago

0.3.33

11 months ago

0.3.32

11 months ago

0.3.29

12 months ago

0.3.42

10 months ago

0.3.20

1 year ago

0.3.41

10 months ago

0.3.40

10 months ago

0.3.28

12 months ago

0.3.27

12 months ago

0.3.26

12 months ago

0.3.25

12 months ago

0.3.24

12 months ago

0.3.23

12 months ago

0.3.44

10 months ago

0.3.22

12 months ago

0.3.43

10 months ago

0.3.21

12 months ago

0.3.19

1 year ago

0.3.18

1 year ago

0.3.12

1 year ago

0.3.11

1 year ago

0.3.10

1 year ago

0.3.9

1 year ago

0.3.8

1 year ago

0.3.7

1 year ago

0.3.6

1 year ago

0.3.5

1 year ago

0.3.3

1 year ago

0.3.0

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.2.0

2 years ago

0.1.0

2 years ago

0.0.1

2 years ago