@roadline/styles

The optional default theme for Roadline.

npm install @roadline/styles

import '@roadline/styles/roadline.css'

That is the whole theme in one file. It is assembled from one file per area, and each part is importable on its own — @roadline/styles/tokens.css for the palette alone, @roadline/styles/reset.css and root.css for the load-bearing layout rules, and so on per component.

Everything it paints is a CSS custom property, so restyling is a variable override rather than a selector war:

.rl-root {
  --rl-bar: #6366f1;
  --rl-accent: #f43f5e;
  --rl-radius: 8px;
}

Light and dark ship as one palette written with light-dark(), following the operating system out of the box. To pin a theme, set color-scheme from your app — .dark .rl-root { color-scheme: dark; } — which also brings native scrollbars along.

Skip this package entirely and the components still work, laid out but unpainted; nothing in the JavaScript knows what anything should look like. Two rules are load-bearing if you write your own stylesheet:

.rl-bars { pointer-events: none; }  /* dragging empty canvas pans */
.rl-bar  { pointer-events: auto; }

Full token and class reference: docs/theming.md in the repository.

MIT