Introduction

We currently export to the following file types: .js, .ts, .css, .scss, .json. If you’re using tailwind, we also export to common js to work nicely with your tailwind config.

If you are currently using Mirrorful’s web editor, you will need to create the imported files yourself. You can do this by simply creating a file of your desired format (i.e. .js, .css, etc) and then copying the generated code into the file.

​

Exported Tokens

​

Using CSS

To get your tokens, simply import Mirrorful’s .css file into your project. If you are using Mirrorful Web, you will need to create this file yourself.

For example, in your main app:

/* Exact path will depend on your file structure */
import './.mirrorful/theme.css'

export default function Root() {
  return <App />
}

Then in any CSS file (or inline Javascript), you can reference CSS variables like so:

.primary-button {
  background-color: var(--color-primary);
}

<button style={{ backgroundColor: 'var(--color-primary)'}}>

​

Using SCSS

In addition to CSS variables, we also export to SCSS variables.

In order to access SCSS variables, you will need to import Mirrorful’s .scss file into each stylesheet you want to use the variables in.

For example,

/* Exact path will depend on your file structure */
import './.mirrorful/theme.scss' 
/* You can use the variables anywhere */
.primary-button {
  background-color: $color-primary;
}

​

Using Javascript / Typescript

If your project prefers inline styles, or want to use Mirrorful’s tokens in Javascript, we also export to Javascript and Typescript.

/* Exact path will depend on your file structure */
import { Tokens } from './mirrorful'

<button backgroundColor={{ Tokens.colors.primary  }}>Click here</button>

​

Tailwind

If you projects uses Tailwind you can extend the color theme using the Mirrorful generated tokens. Exact path will depend on your file structure

const mirrorful = require('./.mirrorful/theme_cjs.cjs')

theme: {
  extend: {
    colors: Tokens.colors,
    fontSize: Tokens.fontSizes,
    dropShadow: Tokens.boxShadows
  }
}