C&C Docs
Log in
Theming

Theme

A theme is a few brand colours declared in cnc.json. The gale engine compiles them into CSS variables (--color-primary-500 …) and matching utility classes (bg-primary-500, text-primary-600), plus status colours and a dark variant. Nothing on this page is a hand-written hex.

The manifest — cnc.json 
// cnc.json
{
  "theme": {
    "colors": {
      "primary":   "#0095a9",
      "secondary": "#346195",
      "neutral":   "slate"
    },
    "vars": { "spacing": "0.25em" },
    "extraStyles": {
      "colors": { "tw-prose-links": "var(--color-primary-600)" }
    }
  }
}
Result
primary
secondary
neutral (slate)

Each declared colour becomes a 50–950 ramp (below). Flip light and dark to see the dark: variants take over:

Colour ramps

Two brand colours plus the built-in status colours, each an 11-step ramp gale generated from the manifest.

Primary
50
100
200
300
400
500
600
700
800
900
950
Secondary
50
100
200
300
400
500
600
700
800
900
950
Success
50
100
200
300
400
500
600
700
800
900
950
Warning
50
100
200
300
400
500
600
700
800
900
950
Danger
50
100
200
300
400
500
600
700
800
900
950

Utilities

Primary Action
Navigation, selection, and emphasis.
Success State
Completion, confirmation, and healthy flow.
Warning State
Needs attention without implying failure.
Danger State
Destructive actions, blocking errors, and risk.

Prose — class="prose"

Raw HTML (an article, a help page, text from a database) carries no utility classes. Put prose on its container and the headings, lists, quotes, code and tables inside are typeset with the theme's colours. A size class from prose-xs to prose-2xl scales the whole ramp:

A lead paragraph is a size up — the standfirst that opens an article.

Typography that reads itself

Nothing inside this card carries a class of its own. Strong, italics, a themed link, Ctrl+K and inline_code() all follow the ramp.

Lists stay on the grid

  • Unordered items keep their marker and rhythm.
  • Nested lists tighten:
    1. First ordered child
    2. Second ordered child

A blockquote gets an accent border, for pulling a sentence out of the flow.

Class Effect
prose Typesets the HTML inside
prose-lg One step up the font and spacing ramp
dark:prose-invert Light text on a dark surface

Restyling from a parent — x-class

x-class:<sel> lets a parent restyle its descendants, matched by a --marker class or a tag name. It swaps only the utilities that conflict: bg-primary-600 replaces bg-neutral-200 and leaves rounded-full and px-3 alone.

x-class:<sel> restyles descendants
<div x-class:--chip="bg-primary-600 text-white hover:bg-primary-700">
  <span class="">
    The parent restyles every --chip descendant &mdash;
  </span>
  <span class="">
    swapping bg + text utilities, keeping the rest.
  </span>
</div>
Result
The parent restyles every --chip descendant — swapping bg + text utilities, keeping the rest.