Color themes and definitions

Problem

We want it to be easy to use colors correctly in RadGrad pages. This means it should be easy to:

• Specify a color for a page (you shouldn't have to look up a hex string value).
• Use a color consistently ("grey" should be the same throughout the system).
• Change the "theme" (i.e. change the definition of "grey", and have that change reflected throughout the site).

Solution

Well, there are actually two solutions.

Semantic UI color definitions

We build a custom Semantic UI CSS file using our Fomantic UI repository.

In the semantic/src/site/globals/site.variables file, we define a palette in the following way:

/* Color Palette */

@radgrad-black : #000000;

@radgrad-blue : #53A78E;

@radgrad-blue-2 : #26407C;

@radgrad-brown : #AB6634;

@radgrad-green : #6FBE44;

@radgrad-green-darken : #38840F;

@radgrad-green-2 : #86CAB5;

@radgrad-green-2-darken : #53A78E;

@radgrad-green-2-darken-1 : #1B7F61;

@radgrad-green-3 : #80AD27;

@radgrad-grey : #696969;

@radgrad-grey-2 : #F7F7F7;

@radgrad-grey-3 : #EEEEEE;

@radgrad-olive : #38840F;

@radgrad-orange : #DA7F4E;

@radgrad-pink : #DDA1C3;

@radgrad-purple : #952263;

@radgrad-red : #CA4864;

@radgrad-teal : #00CCCB;

@radgrad-violet : #62487C;

@radgrad-white : #FFFFFF;

@radgrad-yellow : #CEB23F;

We then override the standard Semantic UI colors like this:

/* Inject the palette into the Semantic UI theme. */

@black : @radgrad-black;

@blue : @radgrad-blue;

@brown : @radgrad-brown;

@green : @radgrad-green;

@grey : @radgrad-grey;

@lightblue : @radgrad-green-2;

@lightgreen : lighten(@radgrad-green, 5);

@olive : @radgrad-olive;

@orange : @radgrad-orange;

@pink : @radgrad-pink;

@purple : @radgrad-purple;

@red : @radgrad-red;

@teal : @radgrad-teal;

@violet : @radgrad-violet;

@white : @radgrad-white;

@yellow : @radgrad-yellow;

As a result, for any Semantic UI React component that accepts a "color" parameter, you can supply, for example, "red", and you'll get the "radgrad-red" hex color value.

Colors.ts

Overriding the Semantic UI theme is a great first step, but we often want to use a color in a React component, and these "@radgrad-red" definitions are not available within our Meteor system.

To allow access to these colors within React Components, we make a duplicate of these definitions in the Colors.ts file. These definitions look like this:

/*

* Provide programmatic access to the colors defined in our Semantic UI Theme.

* These definitions should be in sync with those found in:

* https://github.com/radgrad/fomantic-ui/blob/main/semantic/src/site/globals/site.variables

*/

export const enum COLORS {

BLACK = '#000000',

BLUE = '#53A78E',

BLUE2 = '#26407C',

BROWN = '#AB6634',

GREEN = '#6FBE44',

GREENDARKEN = '#38840F',

GREEN2 = '#86CAB5',

GREEN2DARKEN = '#53A78E',

GREEN2DARKEN1 = '#1B7F61',

GREEN3 = '#80AD27',

GREY = '#696969',

GREY2 = '#F7F7F7',

GREY3 = '#EEEEEE',

OLIVE = '#38840F',

ORANGE = '#DA7F4E',

PINK = '#DDA1C3',

PURPLE = '#952263',

RED = '#CA4864',

TEAL = '#00CCCB',

VIOLET = '#62487C',

WHITE = '#FFFFFF',

YELLOW = '#CEB23F',

}

The Palette

Black (#000000)

Blue (#53A78E)

Blue2 (#26407C)

Brown (#AB6634)

Green (#6FBE44)

Green Darken (#38840F)

Green2 (#86CAB5)

Green2 Darken (#53A78E)

Green2 Darken 1 (#1B7F61)

Green3 (#80AD27)

Grey (#696969)

Grey2 (#F7F7F7)

Grey3 (#EEEEEE)

Olive (#38840F)

Orange (#DA7F4E)

Pink (#DDA1C3)

Purple (#952263)

Red (#CA4864)

Teal (#00CCCB)

Violet (#62487C)

Yellow (#CEB23F)

Managing the RadGrad color palette

The net of it is that if you want to define a new color for use in RadGrad, you usually need to update three files:

1. The Semantic UI site.variables file.
2. The Colors.ts file.
3. This file!

Finally, please avoid "one-off" colors, and please avoid using hex strings directly in the code. Use the Theme, Luke.