@maps-ui/tokens v1.4.2

Inside the tokens, there are default parameters for:

Click here to see all tokens.

To install:

npm install @maps-ui/tokens

To use:

import { styled } from '../styles'
import { colors, radii, space } from '@maps-ui/tokens'

export const Text = styled('p', {
  fontFamily: fonts.default,
  lineHeight: lineHeights.base,
  color: colors.gray100,
  fontSize: fontSizes.md,
})

OBS: In this case, it was used with Stitches, but it is also possible to use with other CSS in JS libraries.

There is a way to set the tokens as the default for each given category:

Folder structure

root
 └── src
      ├── components
      │    └── Text.jsx
      └── styles
           └── index.js

Stitches configuration file

The src/styles/index.js

import * as Tokens from '@maps-ui/tokens'

import { createStitches, defaultThemeMap } from '@stitches/react'

export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
  themeMap: {
    ...defaultThemeMap,
    height: 'space',
    width: 'space',
  },

  theme: {
    ...Tokens, //Maps-ui tokens
  },
})

Component

The src/components/Text.jsx

import { styled } from '../styles'

export const Text = styled('p', {
  fontFamily: '$default',
  lineHeight: '$base',
  color: '$gray100',
  fontSize: '$md',
})

To better understand how to use Stitches, go to: stitches.dev/docs/introduction