@mifiel/ui-tokens

Tokens are used to create a single source of truth at Mifiel, Volabit and Vexbi.

Usage

Install:

$ yarn add @mifiel/ui-tokens

You can import tokens in a sass or js file

@import '/node_modules/@mifiel/ui-tokens/dist/web/tokens.scss';

.bg-mifiel {
  backgroud-color: $mi-core-color-brand-mifiel;
}

import { MI_CORE_COLOR_BRAND_VEXBI } from '@mifiel/ui-tokens/tokens.es6'
...

import tokens from '@mifiel/ui-tokens/dist/web/tokens.nested.json';

const {
  components: {
    button: {
      appearance: appearanceTokens,
      base: baseTokens,
      radius: radiusTokens,
      size: sizeTokens,
    },
  },
  core: {
    color: colorTokens,
  }
} = tokens;
...

If you are using TypeScript, you can use our String Literal Types

import {
  ButtonAppearance,
  ButtonBorderRadius,
  ButtonSize,
} from '@mifiel/ui-tokens/dist/web/button-types';

import {
  Color,
  ColorBase,
  ColorBlue,
  ColorGreen,
  ColorNeutral,
  ColorRed,
  ColorYellow,
} from '@mifiel/ui-tokens/dist/web/color-types';

import {
  MotionEasing,
  MotionSpeed,
} from '@mifiel/ui-tokens/dist/web/motion-types';

import {
  BorderRadius
} from '@mifiel/ui-tokens/dist/web/radius-types';

import {
  Breakpoint
} from '@mifiel/ui-tokens/dist/web/breakpoint-types';

...