Mirrorful home pagelight logo
  1. Home
  2. 💿 Export Formats

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.

​
From Web

If you are 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.

​
Using CSS

We export to CSS as CSS variables. CSS variables are the easiest way to create and set variables across CSS. They are supported in all modern browsers, and can be used in any CSS file.

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' .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.js'

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

​
Examples

We have example projects for reference.