kyv-tokens v2.13.0

kyv-tokens

Installation

npm install kyv-tokens
// or
yarn add kyv-tokens
// or
bun install kyv-tokens
// or
pnpm install kyv-tokens

Usage

CSS files

To use the CSS files generated for either SafeSeaNet or Kystverket, import the respective css files and add it to the global scope of the project:

/* safeseanet */
@import 'kyv-tokens/dist/safeseanet/styles.css';

/* kystverket */
@import 'kyv-tokens/dist/kystverket/styles.css';

Style objects / Tailwind

The package also exposes objects that can be used to generate tailwind configs.

Example usage with tailwind

// tailwindUtils.ts
import { SafeseanetStyleTokens as tokens } from 'kyv-tokens'
import lodash from 'lodash'

type DesignToken = {
  value: string
  type: string
  filePath: string
  isSource: boolean
  original: {
    value: string
    type: string
  }
  name: string
  attributes: {
    category: string
    type: string
    item: string
  }
  path: string[]
}

export const colors = Object.fromEntries(
  Object.entries(tokens.color as Record<string, Record<string, DesignToken>>).map(
    ([key, value]) => [
      key,
      !value.value
        ? Object.fromEntries(Object.entries(value).map((k) => [k[0], k[1].value]))
        : value.value,
    ]
  )
) as unknown as Record<string, Record<string, string>>


// tailwind.config.ts
...
import { colors } from './tailwind_utils'
...

const config: Config = {
theme: {
  colors: colors,
  ...
},
...
}

export default config