Customization

Configuration

Implement your design system using the configuration API.

npm create @master/css@rc

If you don't have a configuration file, create one first.

Options

`.animations`

Customizing animation animations for your design system.

export default {    animations: {        'slide-in-up': {            from: {                transform: 'translateY(100%)'            },            to: {                transform: 'translateY(0)'            }        }    }}

Apply the custom animation using animation syntax:

<div class="@slide-in-up|.5s"></div>

`.functions`

Customizing functions for your design system.

export default {    functions: {        translate: { unit: 'rem' }    }}

Apply your custom functions:

<div class="translate(2rem)">…</div> <div class="translate(32)">…</div>

`.at`

Customizing at-rules for your design system.

export default {    at: {        landscape: 'media (orientation:landscape)' /* @landscape */     }}

You wouldn't want to write full media queries within the markup.

<div class="aspect:2/1@media(orientation:landscape)">…</div>

Employ concise yet semantically meaningful markup.

<img class="aspect:2/1@landscape" … />

Generated CSS

@layer base, theme, preset, components, general;@layer general {    @media(orientation:landscape) {        .aspect\:2\/1\@landscape {            aspect-ratio: 2/1        }    }}

`.rules`

Customizing rules for your design system.

export default {    rules: {        foo: {            matcher: /^foo:./,            unit: 'rem',            declare(value, unit) {                return {                    width: value + unit                }            }        }    }}

Use your custom syntax:

<div class="foo:32"></div>

Generated CSS:

.foo\:32 {    width: 2rem;}

`.selectors`

Customizing selectors for your design system.

export default {    selectors: {        _headings: '_:where(h1,h2,h3,h4,h5,h6)'    }}

Simplify your existing markup in HTML:

<article class="font:bold_:where(h1,h2,h3,h4,h5,h6)">…</article> <article class="font:bold_headings">…</article>

`.utilities`

Customizing utility classes for your design system.

export default {    utilities: {        round: {            'border-radius': '50%',            'aspect-ratio': '1/1'        }    }}

Apply your custom utilities:

<div class="round">o</div>

`.components`

Customizing abstract components for your design system.

export default {    components: {        btn: '… inline-flex h:10x'     }}

Apply the btn style to the button element:

<button class="btn">Submit</button>

Generated CSS

@layer base, theme, preset, components, general;@layer components {    .btn {        display: inline-flex;        height: 2.5rem    }}

`.variables`

Customizing variables for your design tokens.

import { variables } from '@master/css'export default {    variables: {        'font-family': {            sans: 'Inter'         },        screen: { desktop: 1280 },        spacing: { sm: 10 },        primary: '#000000'    }}

Apply custom variables using ambiguous shorthand:

<div class="font:sans max-w:screen-desktop m:sm bg:primary">…</div>

`.extends`

Extend custom or external configuration.

Type	`any[]`

export default {    extends: [        require('@master/ui'),        require('./styles/btn.css'),        …    ]}

`.important`

Make all generated CSS declarations !important.

Default	`false`
Type	`boolean`

Using important: true should be considered as a last option, as it's a compromise.

export default {    important: true}

Generated CSS:

.hidden {    display: none !important;}.full {    width: 100% !important;    height: 100% !important;}

`.override`

Customize your configuration to override all default configuration, default false to extend.

Default	`false`
Type	`boolean`

export default {    override: true}

We've carefully preset some configurations to enhance the syntax; usually, you'll extend it.

`.rootSize`

Specify the conversion factor for rem and em.

Default	`16`
Type	`number`

Here's a common use case with rootSize: 10:

export default {    rootSize: 10}

Generated CSS rules:

.font\:16 {    font-size: 1rem;   /* rootSize: 16 */     font-size: 1.6rem; /* rootSize: 10 */ }

And you will set the font size of the root to 62.5%:

<html class="font:62.5%">

`.baseUnit`

This base unit determines the size scale and ensures visual consistency across products.

Default	`4`
Type	`number`

For example, with the default baseUnit: 4, the size scale 1x, 2x, … will be 4, 8, ….

<div class="m:4x"></div>

Generated CSS:

.m\:4x {    margin: 1rem; /* 4x = 4*4 = 16px, 16px / 16 = 1rem */}

`.scope`

Limit the generated CSS rules to a specific scope with CSS selectors.

Default	`''`
Type	`string`

Don't make it part of your coding style, but as a last resort to solve problems.

export default {    scope: '#app'}

All Master CSS syntax will only be applied if the <body id="app">.

<html><body id="app">    <div class="mt:1 text:center"></div></body></html>

Generated CSS:

#app .mt\:1 {    margin-top: 0.0625rem}#app .text\:center {    text-align: center}

`.defaultMode`

The mode is to be applied by default when no mode is specified.

Default	`'light'`
Type	`'light'` `'dark'` `string` `boolean`

Default light mode

export default {    defaultMode: 'light'}

Generated CSS:

.light, :root {    --primary: 0 0 0;}

No default mode

export default {    defaultMode: false}

Generated CSS:

.light {    --primary: 0 0 0;}

`.modes`

Sets how the theme should drive and generate CSS rules.

Default	`{ "dark": "class", "light": "class" }`
Type	`{ [key: string]: 'class' \| 'media' \| 'host' \| false }`

<div class="bg:black@dark">

Drive theme styles through CSS classes

export default {    modes: {        dark: 'class'    }}

Generated CSS:

.dark .bg\:#000000 { background-color: #000000 }

Drive theme styles through media queries

export default {    modes: {        dark: 'media'    }}

Generated CSS:

@media (prefers-color-scheme: dark) { .bg\:#000000 { background-color: #000000 } }

Drive theme styles through shadow DOM's host

export default {    modes: {        dark: 'host'    }}

Generated CSS:

:host(.dark) .bg\:#000000 { background-color: #000000 }