THEMES COLOR SCIENCE

Themes

Every token maps to one CSS variable — --fp-<type> — and one class, .fp__token--<type>. A theme is a block of declarations you drop in.

Read detailed documentation at Github.

01 /

Comfortable by default

Sveltekit · dark

interface User { name: string; admin: boolean }const greet = (u: User) => {  // welcome message  return `Hi ${u.name}`}const re = /^[a-z]+$/iconst App = () => <b className="tag">ok</b>

02 /

Copy the CSS

Set the light palette on :root, and the dark palette under :root[data-theme='dark'] (or a prefers-color-scheme block).

:root {  --fp-class: #DE2D00;  --fp-identifier: #414141;  --fp-sign: #FF4500;  --fp-string: #FA3701;  --fp-keyword: #FA3701;  --fp-comment: #6e6d6d;  --fp-jsxliterals: #FA3701;  --fp-entity: #313131;  --fp-property: #787676;}

:root[data-theme='dark'] {  --fp-class: #DE2D00;  --fp-identifier: #7a7878;  --fp-sign: #FF4500;  --fp-string: #FA3701;  --fp-keyword: #FA3701;  --fp-comment: #6e6d6d;  --fp-jsxliterals: #FA3701;  --fp-entity: #fff8f8;  --fp-property: #e1dfdf;}

Tailwind

Prefer utilities? Point the variables at your Tailwind colours, then use cx for per-token emphasis.

/* Map fractalpop tokens to your Tailwind palette */@layer base {  :root {    --fp-keyword: theme(colors.pink.600);    --fp-string: theme(colors.emerald.600);    --fp-property: theme(colors.sky.600);    --fp-comment: theme(colors.gray.400);  }}

03 /

Indented Sass

fractalpop's headline feature: brace-less, semicolon-less Sass, coloured by indentation. The same theme variables style it — here is how Sass constructs map to tokens.

// theme tokens$brand: hsl(212, 90%, 55%)@mixin card($radius: 0.5rem)  border-radius: $radius.card  color: $brand  &:hover    background: darken($brand, 8%) !important

$variable → property

@mixin / @include / @if → keyword

mixin & function names → entity

.selector / %placeholder → class

!default / !important → keyword

// and /* */ → comment