About
Mirror is a library for building your own design system. It comes with an opinionated token set, auto-generated Tailwind utility classes, headless Vue components and a CLI to manage it all.
Vision
At Magic as a Service™ we tend to work on many different things at the same time, such as internal tools, open source libraries, service offerings and websites for internationally recognized brands, creative studios and start ups.
To continuously deliver quality software at speed, it became apparent that we needed to invest time into creating a design system that would fulfil the complex needs arising from these various projects.
Our initial version shipped a large set of design tokens, ready-to-use Vue components and a simple CLI to transform tokens into CSS and JavaScript.
While the system served us well for internal projects, we realized after a while that what we had was too rigid and opinionated to be used in a wider context.
We needed a system behind the system, a library that would provide the batteries, but leave everything else to the user.
Architecture
Our latest iteration of Mirror includes four parts, which can be used together or standalone. Simply put, use the parts you like, ignore the parts you don’t.
Design Tokens
Colours, radii, shadows and typography, authored according to the DTCG Design Token Spec.
While the token set is opinionated, every part of it can be extended or replaced with your own. It is authored in JSON, and can be compiled into CSS, JavaScript, TypeScript, Swift, and JSON.
Utility Classes
A set of utility classes that integrate with Tailwind. The utilities live in a single stylesheet, are auto-generated from those tokens and ready to be imported into Tailwind.
Headless Vue Components
An expansive set of accessible, unstyled, composable Vue components.
Command Line Interface (CLI)
A simple command line interface to manage everything. It can be used to clone a standard set of tokens into your project, compile them into the mentioned formats and generate the utility class stylesheet.
Features
Composable
Mirror and its parts are designed to be composable. You can use the components, tokens and utilities all together or pick and choose the parts you need.
The component API is designed with granularity and flexibilty in mind. Some parts are required to guarantee functionality and accesibility, while others are optional. You are free to combine, omit, wrap and replace parts.
We also include composables with every component to access and control component state and functionality from anywhere inside your app.
Headless
All components are unstyled. If you decide to omit the tokens and utilities, you retain complete control over your application’s styling layer. Mirror’s components are designed to be used with any styling solution, including Tailwind, CSS Modules, plain and pre-processed CSS and CSS-in-JS.
Accessible
We believe that poor accessibility not only affects users with disabilities but also degrades the overall user experience. Mirror is built with accessibility in mind, following best practices and adheres to WAI-ARIA design patterns.
Inspiration
The latest version of Mirror is in parts inspired by the philosophy behind Base UI. We wanted to bring the same flexible and composable approach to design systems to the Vue ecosystem, while also providing a more opinionated token set and utility class generation.
Further Reading
- Quick start: install, generate, and put a styled field on screen.
- Tokens: the two layers, and how to read a token path.
- Utilities: the generated class list, family by family.
- Styling: the whole styling API on one page.
- CLI: the three commands and the config file they read.