@groton/colors

Standard colors for Groton School apps


Install

$3

``sh
npm i @groton/colors
`

$3

`sh
composer require groton-school/colors
`

Color Constants

The following colors are defined:

- No Color -- a gray for information not associated with a color block
- Red / RD
- Orange / OR
- Yellow / YL
- Green / GR
- Light Blue / LB
- Dark Blue / DB
- Purple / PR
- Groton Red -- the school color

Color constants are defined in the following cases for each language:

| Language | Case | Example |
| ---------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------- |
| TypeScript, JavaScript | PascalCase | Colors.NoColor, Colors.Red, Colors.RD |
| Sass/SCSS | kebab-case | map.get(colors.$variants, 'no-color'), map.get(colors.$variants, 'red'), map.get(colors.$variants,'RD') |
| CSS | kebab-case variable names | var(--no-color), var(--red), var(--RD) |
| PHP | CONSTANT_CASE | Colors.NO_COLOR, Colors.RED, Colors.RD |

The hex color is defined in every context. The RGB and HSL components of the base color are also defined (RED_R, RED_G, RED_B in PHP, --red-h, --red-s, --red-l in CSS, etc.)

$3

For the base color, the red, green, and blue components of RGB and the hue, saturation, and lightness components of HSL are defined for convenience in creating ranges of transparency/lightness/saturation.

| Language | Examples |
| ---------------------- | -------------------------------------------------------------------------- |
| TypeScript, Javascript | Colors.RedR, Colors.RedH |
| SCSS/Sass | map.get(colors.$variants, 'red-r'), map.get(colors.$variants, 'red-h') |
| CSS | var(--red-r), var(--red-h) |
| PHP | Colors.RED_R, COLORS.RED_H |

$3

Three color variants are provided for each base color, for use as colored text or text on colored backgrounds.

| Variant | TS/JS | SCSS | CSS | PHP |
| ------------------------------------------------------------------------- | ------------------- | ------------------------------------------- | --------------------- | --------------------- |
| Text on the color (automatically choosing white or black for readability) | Colors.TextOnRed | map.get(colors.$variants, 'text-on-red') | var(--text-on-red) | Colors.TEXT_ON_RED |
| The color on white (automatically adjusted for readability) | Colors.RedOnWhite | map.get(colors.$variants, 'red-on-white') | var(--red-on-white) | Colors.RED_ON_WHITE |
| The color on black (automatically adjusted for readability) | Colors.RedOnBlack | map.get(colors.$variants, 'red-on-black') | var(--red-on-black) | Colors.RED_ON_BLACK |

Usage

$3

`ts
import * as Colors from '@groton/colors';

console.log(Colors.GrotonRed);
console.log(Colors.DarkBlueOnBlack);
console.log(Colors.TextOnPurple);
`

$3

`js
const Colors = require('@groton/colors');

console.log(Colors.GrotonRed);
console.log(Colors.DarkBlueOnBlack);
console.log(Colors.TextOnPurple);
`

$3

`php
use GrotonSchool\Colors;

echo Colors.GROTON_RED;
echo Colors.DARK_BLUE_ON_BLACK;
echo Colors.TEXT_ON_PURPLE;
`

$3

`scss
// Sass $variables
@use '@groton/colors';

// CSS --variables
@use '@groton/colors/vars.css';

.my-style {
background: map.get(colors.$variants, 'groton-red');
}

.my-other-style {
color: map.get(colors.$variant, 'dark-blue-on-black');
background: var(--text-on-purple);
}

// N.B. using the Sass variables to initialize CSS variables requires string interpolation
:root {
--my-color: #{map.get(colors.$variants, 'green')};
}
`

$3

Add the CSS variables to a TypeScript module:

`ts
import '@groton/colors/vars.css';
`

Use a CDN to get the variables:

`html
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@groton/colors@0.4.0/vars.css"
/>
`

Use the variables:

`css
.my-style {
background: var(--groton-red);
}

.my-other-style {
color: var(--dark-blue-on-black);
background: var(--text-on-purple);
}
``