Reference

Editing a generated globals.css safely

Which parts of the file are yours, which are overwritten on every save, and where to put an addition so it survives.

The file is generated, and it will be generated again. That is fine as long as you know which half is which.

The two kinds of block

/* ══ FEWD:SECTION:START ══ */    generated — overwritten on every save
   …
/* ══ FEWD:SECTION:END ══ */
/* ══ USER:SECTION:START ══ */    yours — preserved, always
   …
/* ══ USER:SECTION:END ══ */

Every section of the file has both. Anything you add goes in the USER half.

Wrap USER additions in :root

A custom property added inside a USER block needs a :root { } around it if there is not one already. It is easy to miss because the file is full of declarations that already sit inside one.

The config comments are the source of truth

Each generated section opens with a comment holding the inputs it was built from:

/* fewd-config: enabled=primary,secondary,… primary=#2d7fbe secondary=#389951 … */

That comment is authoritative, not the CSS underneath it. Change --primary: oklch(…) and leave the comment alone, and the next save will recompute from the old hex and erase your edit.

The cheap change, first

Most design changes are not a palette change at all. They are a Layer 2 remap:

/* Wanting the call to action to be the secondary colour is one line. */
--color-cta: var(--secondary);

No maths, no recomputation, and every shade and transparency already exists.

Reach for that before anything else.

What is calculated, and must not be freelanced

Colour shades, tints and transparencies
Tonal scales
Fluid clamp() values for type and spacing

All of these are derived from a small set of inputs. Change the input and let them regenerate; do not adjust the output.

Utilities

Anything in the generated utilities section is rewritten on every save. To change how a utility behaves, override it in the USER block below rather than editing the rule itself.