Variable color

color: {
    black: "#000000";
    blue: "#2F7EDA";
    gold: "#FFD200";
    gray: {
        dark: "#454545";
        darker: "#242424";
        light: "#E6E6E6";
        lighter: "#F1F1F1";
        lightest: "#FAFAFA";
        medium: "#7F7F7F";
        mediumAA: "#757575";
    };
    green: "#008000";
    red: "#E21833";
    redDark: "#A90007";
    white: "#FFFFFF";
}

Default color tokens for the design system.

Type declaration

black: "#000000"
blue: "#2F7EDA"
gold: "#FFD200"
gray: {
    dark: "#454545";
    darker: "#242424";
    light: "#E6E6E6";
    lighter: "#F1F1F1";
    lightest: "#FAFAFA";
    medium: "#7F7F7F";
    mediumAA: "#757575";
}
green: "#008000"
red: "#E21833"
redDark: "#A90007"
white: "#FFFFFF"

Returns

Color tokens with semantic naming.

Example

import * as Styles from '@universityofmaryland/web-styles-library';
Styles.token.color.red

Since

1.1.0

Variable color

Type declaration

black: "#000000"

blue: "#2F7EDA"

gold: "#FFD200"

gray: { dark: "#454545"; darker: "#242424"; light: "#E6E6E6"; lighter: "#F1F1F1"; lightest: "#FAFAFA"; medium: "#7F7F7F"; mediumAA: "#757575";}

green: "#008000"

red: "#E21833"

redDark: "#A90007"

white: "#FFFFFF"

Returns

Example

Since

Settings

gray: {
dark: "#454545";
darker: "#242424";
light: "#E6E6E6";
lighter: "#F1F1F1";
lightest: "#FAFAFA";
medium: "#7F7F7F";
mediumAA: "#757575";
}