Colors

Brand Color Light

$brand-color-light

Cyber Grape

#65457d

Brand Color Dark

$brand-color-dark

Dark Purple

#321c3d

Brand Color Orange

$brand-color-orange
$vivid-gamboge

Vivid Gamboge

#f90

Primary color

$primary
$jungle-green

Jungle Green

#18b48e

Bg, Inverse Text

$white

White

#fff

Bg Context

$catskill-white

Catskill White

#f4f8f9

Links, Text

$link-color

Cerulean Blue

#284ba6

Button Alternative

$alternative
$blue-violet

Blue Violet

#655eb9

Bg Stars

$athens-gray

Athens Gray

#f5f6f8

Title

$title
$dark-gray

Athens Gray

#364650

Text

$body-color

Limed Spruce Light

#45545d

Secondary Text

$secondary

Gray Chateau

#99a0a6

Discount Text, Error

$danger

French Rose

#f45978

Rating, Warning

$jaffa
$warning

Jaffa

#f48853

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Etiam porta sem malesuada ultricies vehicula.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

import React from 'react';

const Example = () => (
    <div>
        <p className="text-brand-dark">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p className="text-brand-light">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p className="text-brand-orange">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p className="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p className="text-alternative">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p className="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
        <p className="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <p className="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
        <p className="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p className="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
        <p className="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
        <p className="text-title">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    </div>
);

export default Example;

Background Colors

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

.bg-brand-light

.bg-brand-dark

.bg-brand-orange

.bg-primary

.bg-alternative

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-content

.bg-dark

.bg-white

import React from 'react';

const Example = () => (
    <div>
        <div className="p-6 mb-4 bg-brand-light text-white">.bg-brand-light</div>
        <div className="p-6 mb-4 bg-brand-dark text-white">.bg-brand-dark</div>
        <div className="p-6 mb-4 bg-brand-orange text-white">.bg-brand-orange</div>
        <div className="p-6 mb-4 bg-primary text-white">.bg-primary</div>
        <div className="p-6 mb-4 bg-alternative text-white">.bg-alternative</div>
        <div className="p-6 mb-4 bg-secondary text-white">.bg-secondary</div>
        <div className="p-6 mb-4 bg-success text-white">.bg-success</div>
        <div className="p-6 mb-4 bg-danger text-white">.bg-danger</div>
        <div className="p-6 mb-4 bg-warning text-dark">.bg-warning</div>
        <div className="p-6 mb-4 bg-info text-white">.bg-info</div>
        <div className="p-6 mb-4 bg-light text-dark">.bg-light</div>
        <div className="p-6 mb-4 bg-content text-dark">.bg-content</div>
        <div className="p-6 mb-4 bg-dark text-white">.bg-dark</div>
        <div className="p-6 mb-4 bg-white text-dark">.bg-white</div>
    </div>
);

export default Example;

Icon Colors

You can use all colors of the Theme and some custom

.icon-brand-dark

.icon-brand-light

.icon-brand-orange

.icon-primary

.icon-alternative

.icon-success

.icon-info

.icon-warning

.icon-danger

.icon-muted

.icon-dark

.icon-light

.icon-white

import React, { Fragment } from 'react';
import { Row, Col, SvgIcon } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <Fragment>
                <Row>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-brand-dark" /> .icon-brand-dark
                    </Col>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-brand-light" /> .icon-brand-light
                    </Col>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-brand-orange" /> .icon-brand-orange
                    </Col>
                </Row>
                <Row>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-primary" /> .icon-primary
                    </Col>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-alternative" /> .icon-alternative
                    </Col>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-success" /> .icon-success
                    </Col>
                </Row>
                <Row>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-info" /> .icon-info
                    </Col>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-warning" /> .icon-warning
                    </Col>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-danger" /> .icon-danger
                    </Col>
                </Row>
                <Row>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-muted" /> .icon-muted
                    </Col>
                    <Col sm={4}>
                        <SvgIcon kind="Smile" className="icon icon-dark" /> .icon-dark
                    </Col>
                </Row>
                <Row>
                    <Col sm={4} className="bg-brand-dark text-white">
                        <SvgIcon kind="Smile" className="icon icon-light" /> .icon-light
                    </Col>
                    <Col className="bg-brand-dark text-white">
                        <SvgIcon kind="Smile" className="icon icon-white" /> .icon-white
                    </Col>
                </Row>
            </Fragment>
        );
    }
}

Background Partial Colors

Can be used as partial background to connect it with next container with same background.

.bg-partial-brand-light

.bg-partial-brand-dark

.bg-partial-brand-orange

.bg-partial-primary

.bg-partial-alternative

.bg-partial-secondary

.bg-partial-success

.bg-partial-danger

.bg-partial-warning

.bg-partial-info

.bg-partial-light

.bg-partial-content

.bg-partial-dark

import React from 'react';

const Example = () => (
    <div>
        <div className="p-6 mb-4 bg-partial-brand-light text-dark shadow-uniform">.bg-partial-brand-light</div>
        <div className="p-6 mb-4 bg-partial-brand-dark text-dark shadow-uniform">.bg-partial-brand-dark</div>
        <div className="p-6 mb-4 bg-partial-brand-orange text-dark shadow-uniform">.bg-partial-brand-orange</div>
        <div className="p-6 mb-4 bg-partial-primary text-dark shadow-uniform">.bg-partial-primary</div>
        <div className="p-6 mb-4 bg-partial-alternative text-dark shadow-uniform">.bg-partial-alternative</div>
        <div className="p-6 mb-4 bg-partial-secondary text-dark shadow-uniform">.bg-partial-secondary</div>
        <div className="p-6 mb-4 bg-partial-success text-dark shadow-uniform">.bg-partial-success</div>
        <div className="p-6 mb-4 bg-partial-danger text-dark shadow-uniform">.bg-partial-danger</div>
        <div className="p-6 mb-4 bg-partial-warning text-dark shadow-uniform">.bg-partial-warning</div>
        <div className="p-6 mb-4 bg-partial-info text-dark shadow-uniform">.bg-partial-info</div>
        <div className="p-6 mb-4 bg-partial-light text-dark shadow-uniform">.bg-partial-light</div>
        <div className="p-6 mb-4 bg-partial-content text-dark shadow-uniform">.bg-partial-content</div>
        <div className="p-6 mb-4 bg-partial-dark text-dark shadow-uniform">.bg-partial-dark</div>
    </div>
);

export default Example;

Header menu

Utilities

Colors

$brand-color-light

$brand-color-dark

$brand-color-orange
$vivid-gamboge

$primary
$jungle-green

$white

$catskill-white

$link-color

$alternative
$blue-violet

$athens-gray

$title
$dark-gray

$body-color

$secondary

$danger

$jaffa
$warning

Background Colors

Icon Colors

Background Partial Colors

Utilities

Colors

$brand-color-light

$brand-color-dark

$brand-color-orange$vivid-gamboge

$primary$jungle-green

$white

$catskill-white

$link-color

$alternative$blue-violet

$athens-gray

$title$dark-gray

$body-color

$secondary

$danger

$jaffa$warning

Background Colors

Icon Colors

Background Partial Colors

$brand-color-orange
$vivid-gamboge

$primary
$jungle-green

$alternative
$blue-violet

$title
$dark-gray

$jaffa
$warning