Styling

Use Ruimte's components and color tokens, so your extension follows the theme a person picked. Add your own CSS where they fall short.

Components

@ruimte/extension/ui gives you the components Ruimte itself is built from: Button, IconButton, Pill, Switch, Select, Input, Tooltip, Banner, ListRow, Spinner and more. They follow light and dark, the person's accent and every theme.

import { Button, Pill } from '@ruimte/extension/ui';

export default function Header() {
    return (
        <div>
            <Pill tone="accent">3 open</Pill>
            <Button variant="primary">Review</Button>
        </div>
    );
}

The module hands on everything @adecore/ui exports, and your editor completes each name and shows the props of each component. The reference has the module, not every component in it. Any other React library works too, but does not follow the theme.

Color tokens

Ruimte's colors are CSS variables on the page. Use them instead of fixed colors:

<div style={{ background: 'var(--surface-raised)', color: 'var(--text-muted)' }}>Two notes</div>

useTheme() tells you whether the page is light or dark, for the rare case a token is not enough, such as picking an image.

Your own CSS

Import a stylesheet from any file in client/:

import './panel.css';

export default function Panel() {
    return <div className="standup-panel">...</div>;
}

pack bundles every stylesheet you import, also those of lazy components, into one client/index.css. Ruimte links it before your code runs, and removes it when the extension is turned off.

Your CSS shares the page with Ruimte. Start every class name with your extension's name, and never style Ruimte's own elements; their classes can change in any release. To change how Ruimte itself looks, write a theme.

Ruimte's utility classes are not part of the API either.

Icons

Wherever a definition takes icon, give the name of a Lucide icon, such as 'calendar'. Inside your own components, import icons from any library you like.

In a frame

A frame surface is a page of its own. It gets none of the above, so it brings its own styles.