Theme properties

Generated from @contraagent/elements’ src/themes/tokens-list.ts and src/themes/data.ts: each property, its meaning and its value in each built-in theme. data-ca-theme sets each property that has a value per theme on its element, so a page’s own CSS reads it with the same name (var(--ca-text-secondary)). A property with no value per theme has one default for every theme, computed from the others or a fixed size, inside the elements only, unless it is set.

Property	Meaning	`contraagent-dark`	`contraagent-light`	`github-dark`	`github-light`	`one-dark`	`nord`	`high-contrast`
`--ca-backdrop`	the monitor's page, behind the panels (a colour or a gradient)	`gradient`	`gradient`	`#010409`	`#f6f8fa`	`#21252b`	`#2e3440`	`#010409`
`--ca-bg`	the page	`#060a11`	`#eef2f8`	`#010409`	`#f6f8fa`	`#21252b`	`#242933`	`#010409`
`--ca-card`	a card or a graph node	`#0f1724`	`#ffffff`	`#0d1117`	`#ffffff`	`#282c34`	`#2e3440`	`#0a0c10`
`--ca-panel`	a panel (bottom of its gradient)	`#0f1724`	`#ffffff`	`#0d1117`	`#ffffff`	`#282c34`	`#2e3440`	`#0a0c10`
`--ca-panel2`	a panel (top of its gradient), a sticky header	`#142034`	`#f7f9fc`	`#151b23`	`#ffffff`	`#2c313a`	`#323946`	`#0a0c10`
`--ca-raise`	a raised surface: a neutral chip, a hovered row	`#1a2740`	`#e6ecf5`	`#212830`	`#eff2f5`	`#2c313a`	`#3b4252`	`#1c2128`
`--ca-well`	a sunken surface: code, a graph's frame	`#0a111c`	`#f3f6fa`	`#010409`	`#f6f8fa`	`#21252b`	`#272c36`	`#010409`
`--ca-track`	the empty part of a bar	`#1b273b`	`#e1e7f0`	`#262c36`	`#e6eaef`	`#3a3f4b`	`#3b4252`	`#272b33`
`--ca-line`	a border	`#1d2940`	`#d6dde8`	`#262c36`	`#d1d9e0`	`#181a1f`	`#3b4252`	`#7a828e`
`--ca-line2`	a stronger border, a graph's edge	`#2b3c58`	`#b6c2d3`	`#3d444d`	`#b7c0ca`	`#4b5263`	`#4c566a`	`#9ea7b3`
`--ca-shadow`	the colour of a shadow under a panel, a menu or a notice	`#060a11`	`#0f172438`	`#010409`	`#1f232833`	`#0e1013`	`#1d2129`	`#000000`
`--ca-text`	text, and every number that is not a problem count	`#e7edf5`	`#0f1724`	`#f0f6fc`	`#1f2328`	`#d7dae0`	`#eceff4`	`#ffffff`
`--ca-text-secondary`	secondary text	`#bcc7d6`	`#34415a`	`#d1d7e0`	`#393f46`	`#abb2bf`	`#d8dee9`	`#f0f3f6`
`--ca-text-muted`	labels, captions, units	`#909db2`	`#556279`	`#9299a2`	`#59636e`	`#a7afbe`	`#adbcd9`	`#bdc4cc`
`--ca-accent`	links, the selected tab or item	`#7aa2ff`	`#2f58d4`	`#4796fb`	`#0165d6`	`#64b2f2`	`#9dbedf`	`#7abbfe`
`--ca-accent-bg`	a selected row or item	Every theme, inside the elements: `color-mix(in srgb, var(--accent) calc(var(--tint) + 1%), transparent)`
`--ca-focus`	the focus ring	`#7aa2ff`	`#2f58d4`	`#1f6feb`	`#0165d6`	`#528bff`	`#88c0d0`	`#7abbfe`
`--ca-focus-width`	the width of the focus ring	`2px`	`2px`	`2px`	`2px`	`2px`	`2px`	`3px`
`--ca-selection`	selected text	`#7aa2ff4d`	`#2f58d42e`	`#388bfd4d`	`#0969da33`	`#3e4451`	`#4c566a`	`#409eff66`
`--ca-status-failed`	failed: a task, an attempt, a check (with ✕)	`#f87171`	`#b8132d`	`#fc554d`	`#cd1e2b`	`#fc858d`	`#fe9aa1`	`#ffacb8`
`--ca-status-failed-bg`	the tint behind a failed pill or chip	Every theme, inside the elements: `color-mix(in srgb, var(--status-failed) var(--tint), transparent)`
`--ca-status-attention`	not failed, needs a look: not started (with ◌), a limit near	`#fbbf24`	`#6c4801`	`#d29922`	`#916103`	`#e5c07b`	`#ebcb8b`	`#fad209`
`--ca-status-attention-bg`	the tint behind an attention pill or chip	Every theme, inside the elements: `color-mix(in srgb, var(--status-attention) var(--tint), transparent)`
`--ca-status-done`	done or passed: marks (✓) and small chips only	`#34d399`	`#026b49`	`#3fb950`	`#147b33`	`#98c379`	`#a5c18e`	`#0ef38e`
`--ca-status-done-bg`	the tint behind a done pill or chip	Every theme, inside the elements: `color-mix(in srgb, var(--status-done) var(--tint), transparent)`
`--ca-status-running`	running, live	`#22d3ee`	`#01525f`	`#39c5cf`	`#10767d`	`#57b7c3`	`#89c1d1`	`#62ceff`
`--ca-status-running-bg`	the tint behind a running pill or chip	Every theme, inside the elements: `color-mix(in srgb, var(--status-running) var(--tint), transparent)`
`--ca-status-muted`	skipped, waiting, not run	`#94a3b8`	`#56637a`	`#9198a1`	`#59636e`	`#a7afbe`	`#adbcd9`	`#bdc4cc`
`--ca-status-muted-bg`	the tint behind a muted pill or chip	Every theme, inside the elements: `color-mix(in srgb, var(--status-muted) calc(var(--tint) - 1%), transparent)`
`--ca-tint`	how strong a tint is: the share of its colour in a status, agent or selected background	`13%`	`11%`	`15%`	`8%`	`12%`	`13%`	`12%`
`--ca-agent`	identity: an agent task's icon and edge	`#b597fb`	`#6f45c0`	`#ab7df8`	`#804ddc`	`#d788ee`	`#d0a9c9`	`#c299fe`
`--ca-agent-bg`	the tint behind an agent task's icon	Every theme, inside the elements: `color-mix(in srgb, var(--agent) calc(var(--tint) + 2%), transparent)`
`--ca-meter`	a bar that measures, not judges: time, usage, progress	`#7d8ba3`	`#8a97ab`	`#656c76`	`#818b98`	`#5c6370`	`#7b88a1`	`#9ea7b3`
`--ca-tok-input`	tokens: input	`#7c86f5`	`#4d4cc8`	`#58a6ff`	`#54aeff`	`#61afef`	`#5e81ac`	`#409eff`
`--ca-tok-cache-read`	tokens: cache read	`#3f4d63`	`#cdd6e3`	`#2f3742`	`#d1d9e0`	`#3e4451`	`#4c566a`	`#525964`
`--ca-tok-cache-write`	tokens: cache write	`#8796ad`	`#7d8aa0`	`#656c76`	`#818b98`	`#5c6370`	`#7b88a1`	`#9ea7b3`
`--ca-tok-output`	tokens: output	`#d6b8ff`	`#a07ad9`	`#d2a8ff`	`#a475f9`	`#c678dd`	`#b48ead`	`#dbb7ff`
`--ca-series-1`	the first of the colours that tell series apart (a model in a share of use), in this order; never a status	`#3987e5`	`#2a78d6`	`#3987e5`	`#2a78d6`	`#3987e5`	`#3987e5`	`#3987e5`
`--ca-series-2`	the second series colour	`#d95926`	`#eb6834`	`#d95926`	`#eb6834`	`#d95926`	`#d95926`	`#d95926`
`--ca-series-3`	the third series colour	`#199e70`	`#1baf7a`	`#199e70`	`#1baf7a`	`#199e70`	`#199e70`	`#199e70`
`--ca-series-4`	the fourth series colour	`#c98500`	`#eda100`	`#c98500`	`#eda100`	`#c98500`	`#c98500`	`#c98500`
`--ca-series-5`	the fifth series colour	`#d55181`	`#e87ba4`	`#d55181`	`#e87ba4`	`#d55181`	`#d55181`	`#d55181`
`--ca-series-6`	the sixth series colour	`#008300`	`#008300`	`#008300`	`#008300`	`#008300`	`#008300`	`#008300`
`--ca-code-keyword`	code: keywords	`#c4a5ff`	`#6f49a8`	`#ff7b72`	`#cf222e`	`#c678dd`	`#81a1c1`	`#ff9492`
`--ca-code-string`	code and JSON: strings	`#7ee2a8`	`#076b40`	`#a5d6ff`	`#0a3069`	`#98c379`	`#a3be8c`	`#addcff`
`--ca-code-number`	code and JSON: numbers	`#f5c26b`	`#7b5605`	`#79c0ff`	`#0550ae`	`#d19a66`	`#b790b0`	`#91cbff`
`--ca-code-constant`	code: constants, template placeholders	`#ff9e64`	`#964605`	`#79c0ff`	`#0550ae`	`#d19a66`	`#d38972`	`#91cbff`
`--ca-code-comment`	code: comments	`#74839a`	`#5d6b80`	`#9198a1`	`#59636e`	`#8f949e`	`#8f9db8`	`#bdc4cc`
`--ca-code-function`	code: functions, decorators	`#7dd3fc`	`#086586`	`#d2a8ff`	`#6639ba`	`#61afef`	`#88c0d0`	`#dbb7ff`
`--ca-code-type`	code: classes and types	`#ffd479`	`#785902`	`#ffa657`	`#953800`	`#e5c07b`	`#8fbcbb`	`#ffb757`
`--ca-code-name`	code: built-ins; JSON: keys	`#79b8ff`	`#095ea8`	`#7ee787`	`#116329`	`#e36e77`	`#8fbcbb`	`#72f088`
`--ca-font-size-xs`	type: the smallest text, a key or a tag	Every theme, inside the elements: `10px`
`--ca-font-size-sm`	type: a chip, a pill, a caption	Every theme, inside the elements: `11px`
`--ca-font-size-md`	type: a section heading, a row of facts	Every theme, inside the elements: `12px`
`--ca-font-size-lg`	type: the monitor's text	Every theme, inside the elements: `13px`
`--ca-font-size-xl`	type: a title	Every theme, inside the elements: `15px`
`--ca-font-size-2xl`	type: a tile's number	Every theme, inside the elements: `28px`
`--ca-radius-sm`	corners: a key, a code span	Every theme, inside the elements: `4px`
`--ca-radius-md`	corners: a row, a code block	Every theme, inside the elements: `8px`
`--ca-radius-lg`	corners: a panel	Every theme, inside the elements: `12px`
`--ca-radius-pill`	corners: a pill or a chip	Every theme, inside the elements: `999px`