Variable color`Const`

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

Readonlyblack: "#000000"
Readonlyblue: "#2F7EDA"
Readonlygold: "#FFD200"
Readonlygray: {
    dark: "#454545";
    darker: "#242424";
    light: "#E6E6E6";
    lighter: "#F1F1F1";
    lightest: "#FAFAFA";
    medium: "#7F7F7F";
    mediumAA: "#757575";
}
Readonlygreen: "#008000"
Readonlyred: "#E21833"
ReadonlyredDark: "#A90007"
Readonlywhite: "#FFFFFF"

Returns

Color tokens with semantic naming.

Example

import { color } from '@universityofmaryland/web-token-library';
console.log(color.red); // '#E21833'

Since

1.0.0

Variable color`Const`

Type Declaration

`Readonly`black: "#000000"

`Readonly`blue: "#2F7EDA"

`Readonly`gold: "#FFD200"

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

`Readonly`green: "#008000"

`Readonly`red: "#E21833"

`Readonly`redDark: "#A90007"

`Readonly`white: "#FFFFFF"

Returns

Example

Since

Settings

Variable colorConst

Type Declaration

Readonlyblack: "#000000"

Readonlyblue: "#2F7EDA"

Readonlygold: "#FFD200"

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

Readonlygreen: "#008000"

Readonlyred: "#E21833"

ReadonlyredDark: "#A90007"

Readonlywhite: "#FFFFFF"

Returns

Example

Since

Settings

Variable color`Const`

`Readonly`black: "#000000"

`Readonly`blue: "#2F7EDA"

`Readonly`gold: "#FFD200"

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

`Readonly`green: "#008000"

`Readonly`red: "#E21833"

`Readonly`redDark: "#A90007"

`Readonly`white: "#FFFFFF"