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
Colors
How to import colors into your project.
Font Size
How to import font sizes into your project.
Shadows
How to import shadows into your project.
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
}
}