Skip to content

design-system.mdx

Latest commit

 

History

History
433 lines (374 loc) · 13.1 KB

design-system.mdx

File metadata and controls

433 lines (374 loc) · 13.1 KB
sidebar_position 12
title Design System

import BrowserOnly from '@docusaurus/BrowserOnly'; import * as React from 'react'; import { ButtonToggle } from '@site/src/components/ButtonToggle'; import { ColorBoxes } from '@site/src/components/ColorBoxes'; import { WithReactodiaStyles } from '@site/src/components/WithReactodiaStyles';

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-grays}

`var(--reactodia-color-gray-${i * 100})`) } />

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

--reactodia-color-gray-{i}

Emphasis {#color-emphasis}

`var(--reactodia-color-emphasis-${i * 100})`) } />

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

export const NamedColorBoxes = ({color}) => ( <> <ColorBoxes colors={[ var(--reactodia-color-${color}-lightest), var(--reactodia-color-${color}-lighter), var(--reactodia-color-${color}-light), var(--reactodia-color-${color}), var(--reactodia-color-${color}-dark), var(--reactodia-color-${color}-darker), var(--reactodia-color-${color}-darkest), ]} /> <ColorBoxes colors={[ var(--reactodia-color-${color}-contrast-background), var(--reactodia-color-${color}-contrast-foreground), ]} /> </> );

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
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-radius-s
--reactodia-border-color-base
function Borders() {
    return <Reactodia.WorkspaceRoot style={{
        maxWidth: 300,
        gap: 5,
        '--reactodia-border-width-base': undefined,
        '--reactodia-border-radius-base': undefined,
        '--reactodia-border-radius-s': undefined,
    }}>
        <div style={{
            display: 'grid',
            padding: 10,
            justifyContent: 'center',
            border: 'var(--reactodia-border-width-base) solid var(--reactodia-border-color-base)',
            borderRadius: 'var(--reactodia-border-radius-base)',
        }}>
            Panel
        </div>
        <div style={{
            display: 'grid',
            padding: 10,
            justifyContent: 'center',
            border: 'var(--reactodia-border-width-base) solid var(--reactodia-border-color-base)',
            borderRadius: 'var(--reactodia-border-radius-s)',
        }}>
            Panel with border-radius-s
        </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
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>
}

Z-index

The following properties allow to override base z-index level for workspace components with a set z-index value:

--reactodia-z-index-base

Controls

Buttons

export const Button = ({kind, state}) => { const active = state === 'active' ? 'active' : ''; return ( <button type='button' className={reactodia-btn reactodia-btn-${kind} ${active}} disabled={state === 'disabled'}> <span style={{textTransform: 'capitalize'}}>{kind} ); };

export const Buttons = () => { const [state, setState] = React.useState('default'); return ( <div style={{ display: 'flex', flexDirection: 'column', gap: 10, }}>

Button state: <ButtonToggle states={['default', 'active', 'disabled']} value={state} onChange={setState} />
<div style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: 5}}> ); };

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

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

export const Inputs = () => { const [state, setState] = React.useState('default'); return ( <div style={{ display: 'flex', flexDirection: 'column', gap: 10, }}>

Input state: <ButtonToggle states={['default', 'disabled']} value={state} onChange={setState} />
<div style={{display: 'flex', flexDirection: 'column', gap: 5, maxWidth: 300}}> <input type='text' className='reactodia-form-control' placeholder='Input text here...' disabled={state === 'disabled'} /> <select className='reactodia-form-control' disabled={state === 'disabled'}> Option 1 Option 2 Option 3 ); };

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

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>
    );
}