Color

The Color component builds on Container components. On the theme possible to set up colors, with mainColor, contrastColor, backgroundColor.

In the paper variant the backgroundColor is the background, there is no container background color, and the contrastColor is the text color, so the contrastColor there is on the backgroundColor
In the text variant the backgroundColor is the background, there is no container background color and the mainColor is the text color, so the mainColor there is on the backgroundColor.
In the contained variant the backgroundColor is the background (if it is specified), and the mainColor is the container background, and the contrastColor is the text color.
in the outlined variant same as the text variant just with border

In text and outlined variant works properly if the mainColor the backgroundColor, that's why there is a variable what change text color from mainColor to contrastColor. So if the mainColor is lighter like contrastColor need to add to theme color in scss: textForceContrastColor: true.

In the paper variation, it is the other way around: it works properly if the contrastColor darker like the backgroundColor, if this fails because you want to use a color setting where mainColor is dark - and therefore contrastColor is light, and everything is on a light background, then the textForceContrastColor: true variable changes the color of the text from contrastColor to mainColor.

APCA

There is a high-contrast mode for texts, where according to the APCA standard, the theme generator searches for the text color with the appropriate contrast based on the set colors and typography.

Props

Props of the Container component are also available.

Name	Type	Default	Description
children	node		The content of the component.
color	string - default, primary, secondary, ... theme colors	colorContext.color, default	The color to use from presets of the theme
variant	string - inherit, paper, text, contained, outlined	paper	The variant to use.
disabled	bool	false	If true, the component use colors of disabled preset.

The ref is forwarded to the root Container element.

Examples

For the example below is the ColorCard component

function ColorCard(props) {

    const {label = '', ...rest} = props;

    return (
        <Paper {...rest}>
            <div>
                <div>
                    <Typography label={'label 2'} variant={'label-label2'} />
                    <Typography label={'label 1'} variant={'label-label1'} />
                    <Typography label={'button small'} variant={'button-small'} />
                    <Typography label={'button default'} variant={'button-default'} />
                    <Typography label={'button large'} variant={'button-large'} />
                    <Typography label={'body'} variant={'body'} />
                    <Typography label={'subtitle 2'} variant={'subtitle2'} />
                    <Typography label={'subtitle 1'} variant={'subtitle1'} />
                    <Typography label={'h6'} variant={'h6'} />
                    <Typography label={'h5'} variant={'h5'} />
                    <Typography label={'h4'} variant={'h4'} />
                    <Typography label={'h3'} variant={'h3'} />
                    <Typography label={'h2'} variant={'h2'} />
                    <Typography label={'h1'} variant={'h1'} />
                </div>
            </div>
            <div>
                <Typography variant={'body'}>
                    {label}
                </Typography>
            </div>
        </Paper>
    )
    
}

Typography and colors with 'paper' variant

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Default

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 1

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 2

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 3

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Primary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Secondary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Tertiary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Error

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Info

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Success

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Featured

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 1

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 2

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 3

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 4

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 5

Typography and colors with 'outlined' variant

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Default

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 1

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 2

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 3

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Primary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Secondary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Tertiary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Error

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Info

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Success

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Featured

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 1

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 2

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 3

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 4

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 5

Typography and colors with 'contained' variant

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Default

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 1

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 2

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Paper 3

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Primary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Secondary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Tertiary

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Error

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Info

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Success

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Featured

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 1

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 2

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 3

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 4

label 2

label 1

button small

button default

button large

body

subtitle 2

subtitle 1

h6

h5

h4

h3

h2

h1

Category 5

A React based UI kit for DIGBY Design