Basic Design System

Reactodia defines a basic design system inspired by Infima styling framework to support both light and dark color schemes and easy customization via CSS custom properties.

This page documents base (common) styles for used as defaults for all UI components. Component-specific CSS properties are documented on the corresponding component pages.

See Reactodia theme styling source for the complete list of CSS properties to customize and their defaults for both light and dark color schemes.

Colors

tip

Toggle active color scheme at the top to see how the default colors are defined for either light or dark themes.

Grays

Color-scheme independent gray colors gradient from 0 (white) to 1000 (black) in increments of 100:

--reactodia-color-gray-{i}

Emphasis

Color-scheme specific gray colors gradient from 0 (same as schema color) to 1000 (opposite to schema color) in increments of 100:

--reactodia-color-emphasis-{i}

Content and Background

Color-scheme specific color for a text-like content, pure inverse for the background, and a contrast (which is suitable for content on top of a background of the named color):

--reactodia-color-content
--reactodia-color-content-inverse
--reactodia-color-content-contrast

Color-scheme specific color for a background-like layers, and a surface one which can be used for layers placed on top of the main background:

--reactodia-background-color
--reactodia-background-color-surface

Named colors

Named colors can be used to show specific action types for buttons, importance for statuses, etc. The primary color can be specifically used to highlight the "main" action or give a color accent to a UI element:

--reactodia-color-{color}-lightest
--reactodia-color-{color}-lighter
--reactodia-color-{color}-light
--reactodia-color-{color}
--reactodia-color-{color}-dark
--reactodia-color-{color}-darker
--reactodia-color-{color}-darkest

Additionally, each color has a contrast foreground (to put on the named color) and a contrast background (to put the named color on):

--reactodia-color-{color}-contrast-background
--reactodia-color-{color}-contrast-foreground

primary color

secondary color

success color

info color

warning color

danger color

Text

The following properties allow to customize font family, base size and color:

--reactodia-font-family-base
--reactodia-font-family-monospace
--reactodia-font-size-base
--reactodia-line-height-base
--reactodia-font-color-base
--reactodia-font-color-base-inverse

Result

Loading...

Live Editor

function Text() {
    return (
        <Reactodia.WorkspaceRoot>
            <p>
                Normal: The quick brown fox jumps over the lazy dog.
            </p>
            <p style={{fontFamily: 'var(--reactodia-font-family-monospace)'}}>
                Monospace: The quick brown fox jumps over the lazy dog.
            </p>
            <p style={{
                color: 'var(--reactodia-font-color-base-inverse)',
                backgroundColor: 'var(--reactodia-color-gray-800)',
            }}>
                Inverse: The quick brown fox jumps over the lazy dog.
            </p>
        </Reactodia.WorkspaceRoot>
    );
}

Borders

The following properties allow to customize base border styling, including default border radius for UI elements such as buttons, inputs, panels, etc:

--reactodia-border-width-base
--reactodia-border-radius-base
--reactodia-border-color-base

Result

Loading...

Live Editor

function Borders() {
    return <Reactodia.WorkspaceRoot style={{
        maxWidth: 300,
        gap: 5,
        '--reactodia-border-width-base': undefined,
        '--reactodia-border-radius-base': undefined,
    }}>
        <div style={{
            display: 'grid',
            padding: 10,
            justifyContent: 'center',
            borderStyle: 'solid',
            borderWidth: 'var(--reactodia-border-width-base)',
            borderRadius: 'var(--reactodia-border-radius-base)',
            borderColor: 'var(--reactodia-border-color-base)',
        }}>
            Panel
        </div>
        <button type='button'
            className='reactodia-btn reactodia-btn-default'>
            Button
        </button>
        <input type='text'
            className='reactodia-form-control'
            placeholder='Input text here...'
        />
    </Reactodia.WorkspaceRoot>
}

Spacing

The following properties allow to customize default spacing between UI elements:

--reactodia-spacing-base
--reactodia-spacing-vertical
--reactodia-spacing-horizontal

Result

Loading...

Live Editor

function Spacing() {
    return <Reactodia.WorkspaceRoot>
        <div style={{
            display: 'grid',
            gridTemplateRows: 'repeat(3, min-content)',
            gridTemplateColumns: 'repeat(3, min-content)',
        }}>
            {Array.from({length: 9}, (_, i) =>
                <div key={i} style={{
                    width: 50,
                    height: 50,
                    marginRight: 'var(--reactodia-spacing-horizontal)',
                    marginBottom: 'var(--reactodia-spacing-vertical)',
                    backgroundColor: 'var(--reactodia-color-primary)',
                }} />
            )}
        </div>
    </Reactodia.WorkspaceRoot>
}

Controls

Buttons

There are specific CSS properties to define the style of various buttons:

Result

Loading...

Live Editor

function Button() {
    return <Reactodia.WorkspaceRoot>
        <div style={{
            '--reactodia-button-border-radius': 'inherit',
            '--reactodia-button-border-width': 'inherit',
            '--reactodia-button-default-background-color': 'inherit',
            '--reactodia-button-default-background-color-active': 'inherit',
            '--reactodia-button-default-background-color-focus': 'inherit',
            '--reactodia-button-default-border-color': 'inherit',
            '--reactodia-button-default-color': 'inherit',
            '--reactodia-button-default-color-focus': 'inherit',
        }}>
            <button type='button'
                className='reactodia-btn reactodia-btn-default'>
                Button
            </button>
        </div>
    </Reactodia.WorkspaceRoot>
}

Inputs

There are specific CSS properties to define the style of various inputs, including <input type="text"> and <select>:

Result

Loading...

Live Editor

function Inputs() {
    return (
        <Reactodia.WorkspaceRoot>
            <div style={{
                display: 'flex',
                gap: 5,
                '--reactodia-input-color': 'inherit',
                '--reactodia-input-color-placeholder': 'inherit',
                '--reactodia-input-background-color': 'inherit',
                '--reactodia-input-background-color-disabled': 'inherit',
                '--reactodia-input-border-color': 'inherit',
                '--reactodia-input-border-color-focus': 'inherit',
                '--reactodia-input-border-radius': 'inherit',
                '--reactodia-input-border-width': 'inherit',
            }}>
                <input type='text'
                    className='reactodia-form-control'
                    placeholder='Input text here...'
                />
                <select className='reactodia-form-control'>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </style>
        </Reactodia.WorkspaceRoot>
    );
}