How tokens work

Each token is declared twice. variables.css holds the value as a --margo-* property, and theme.css maps it to a Tailwind name, so you get regular utilities like bg-primary or rounded-margo-sm.

/* variables.css: the value */
:root {
  --margo-color-primary: #57e550;
}

/* theme.css: the Tailwind name */
@theme {
  --color-primary: var(--margo-color-primary);
}

Colours

Colours are named by role, not by hue: main is the page, on-main is what sits on it. Each one works with every colour utility: bg-main, text-on-main, border-border.

Typography

text-* utilities set only the font size. Line height comes from leading-*, a scale built on --margo-line-height: change the base and every step follows.

Border and radius

There is one border width. Radii are a scale that divides --margo-radius, so changing it moves every corner and keeps the proportions. Tailwind's own border-* and rounded-* utilities still work.

Shadows

Motion

Z-index

Breakpoints

Breakpoints are named after their width, so 768: applies from 768px up and max-768: below it. Tailwind's default sm: to 2xl: still work; pick one set and stick to it.

Grid

Light and dark

The light values are declared on :root, the dark ones on .dark. The theme is whether that class is on the html element, and the dark: variant follows the same class. The kit doesn't read prefers-color-scheme: deciding the theme is up to your app.

When you change a colour or a shadow, change it in both blocks:

/* after @import "margo-ui/css" */
:root {
  --margo-color-primary: #4f8cff;
  --margo-color-primary-darken: #2f6ad9;
}

.dark {
  --margo-color-primary: #7aa9ff;
  --margo-color-primary-darken: #4f8cff;
}

Adding your own

Declare a @theme block after the kit. Your tokens get utilities the same way the kit's do, and a new breakpoint works on the grid utilities too.

/* your own theme file, imported after the kit */
@theme {
  --spacing-navbar: 3.5rem;
  --z-index-navbar: 50;
  --breakpoint-1600: 1600px;
}