Reference · Panelith 0.1.0 · plain HTML edition; the interactive edition has search and live examples

Tokens

Every CSS custom property the shell defines, with its value in both schemes, from the stylesheet this build ships. Theme(tokens={...}) overrides any of them by the name without the --pl- prefix.

Theme(tokens={"accent": "#ff7a59", "pane-bg": "#18212b"})   # the Open button shows an override set

Open ↗

Token	Dark	Light
`bg`	`#000`	`#e6e6ea`
`pane-bg`	`#262626`	`#fff`
`pane-border`	`#3a3a3a`	`#cdcdd3`
`divider`	`#474747`	`#bfbfc6`
`divider-hover`	`#4f8cff`	same
`drop`	`#4f8cff`	same
`focus`	`#8f8f8f`	`#cfdffb`
`focus-outline`	`#5a5a5a`	`#9a9aa2`
`text`	`#d8d8d8`	`#1e1e23`
`text-dim`	`#8a8a8a`	`#6a6a72`
`white`	`#fff`	`#111`
`accent`	`#4f8cff`	`#2f6fe0`
`collected`	`#e8c83d`	`#a8860a`
`danger`	`#b4423a`	`#c0392f`
`ok`	`#4ade80`	`#15803d`
`warn`	`#e8c83d`	`#a16207`
`bad`	`#ff6b6b`	`#c62828`
`family-independent`	`#4f8cff`	same
`family-problem`	`#e8a33d`	same
`family-author`	`#a78bfa`	same
`family-assessment`	`#2dd4bf`	same
`author-purple`	`var(--pl-family-author)`	same
`assessment`	`var(--pl-family-assessment)`	same
`collapsed-px`	`40px`	same
`pane-gap`	`6px`	same
`topbar-h`	`64px`	same
`cmdbar-width`	`min(560px, calc(100vw - 420px))`	same
`cmdbar-trigger-h`	`34px`	same
`cmdbar-top`	`calc((var(--pl-topbar-h) - var(--pl-cmdbar-trigger-h)) / 2)`	same
`wash-rgb`	`255, 255, 255`	`0, 0, 0`
`shadow-rgb`	`0, 0, 0`	`20, 20, 30`
`backdrop`	`#00000080`	`#2828344d`
`sans`	`system-ui, "Segoe UI", Roboto, sans-serif`	same
`mono`	`ui-monospace, Consolas, monospace`	same
`code-bg`	`color-mix(in srgb, var(--pl-pane-bg) 85%, black)`	`#f6f6f8`
`code-bar`	`rgba(var(--pl-wash-rgb), .05)`	`rgba(var(--pl-wash-rgb), .04)`
`code-comment`	`#7f8c8d`	`#6f7a85`
`code-keyword`	`#c792ea`	`#8a3fbf`
`code-string`	`#a5d6a7`	`#1f7a3a`
`code-number`	`#f6a860`	`#b45309`
`code-function`	`#82aaff`	`#2251b8`
`code-class`	`#ffcb6b`	`#9a6700`
`code-operator`	`#89ddff`	`#0e7490`
`code-punct`	`#9aa5b1`	`#5a6470`
`code-decorator`	`#e8a33d`	`#a16207`