Styling

Import the stylesheet once, anywhere in your app:

import "@tsquare-js/react/styles.css";

It styles everything around the board: the expand button, the problem lists, the viewer's bar, chips and zoom buttons, and the full-size dialog. The board itself is an image and looks the same everywhere, as tsquare draws it: grayscale, with the board's accent color.

Without the stylesheet the components still work, unstyled: <Wireframe>'s image still fits its container, but the viewer needs a height from you, and buttons look like the browser's defaults.

Your colors

The stylesheet reads these CSS variables. Set any of them, on :root or on a component, and leave the rest:

Point them at your own design tokens:

:root {
  --tsquare-accent: var(--brand-600);
  --tsquare-error: var(--danger);
  --tsquare-radius: 10px;
  --tsquare-font: var(--font-sans);
}

Light and dark

The components follow your page's color scheme:

• color-scheme: if your page sets color-scheme: dark (or light dark, to follow the system) on <html>, the components match it. This is the most reliable way, and most dark modes set it already.
• A class or attribute: a dark class or data-theme="dark" on any ancestor turns them dark; light / data-theme="light" turns them light. The nearest one wins, so a dark section inside a light page works. This covers Tailwind's dark class and most theme switchers.

A page that changes its colors only with @media (prefers-color-scheme: dark) and never declares a color scheme gets the light components. Add :root { color-scheme: light dark; } to fix that.

The editor's highlighting

The editor takes its background, text, gutter, popups, error color and fonts from the variables above. Its syntax colors have their own, each with a light and a dark default: --tsquare-syntax-component, --tsquare-syntax-string, --tsquare-syntax-prop, --tsquare-syntax-number, --tsquare-syntax-word, --tsquare-syntax-color, --tsquare-syntax-comment and --tsquare-syntax-punct. The active line and selection are --tsquare-editor-active-line and --tsquare-editor-selection.

:root {
  --tsquare-syntax-component: var(--brand-700);
  --tsquare-syntax-string: #0a7a42;
}

For different dark colors, set the variables inside your dark selector:

.dark {
  --tsquare-bg: #0b0c0e;
  --tsquare-stage: #16181b;
}

Class names

Every part has a class, so you can restyle it from your CSS. The stylesheet's rules all have the lowest possible priority (they're wrapped in :where()), so yours win without !important.

For example, a quieter problem list and square chips:

.tsquare-problems {
  border-left-width: 2px;
  font-size: 0.8rem;
}
.tsquare-chips button {
  border-radius: 0;
}

className and style on each component go on its root element.

@tsquare-js/react 0.5.0 · View this page on GitHub