groton-school/colors

Standard colors for Groton School apps

0.1.0 2025-05-07 18:43 UTC

Requires (Dev)

• friendsofphp/php-cs-fixer: ^3.75

MIT

• Seth Battis

README

Standard colors for Groton School apps

Install

Node npm

npm i @groton/colors

PHP composer

composer require groton-school/colors

Color Constants

Color constants are defined in camelCase, PascalCase, CONSTANT_CASE, or kebab-case as is normal for their language context. For color blocks, their standard abbreviation is also included in every language (e.g. RED and RD in PHP, or --red and --RD in CSS).

• NoColor/noColor/NO_COLOR/no-color -- a gray for information not associated with a color block
• Red
• Orange
• Yellow
• Green
• LightBlue
• DarkBlue
• Purple
• GrotonRed -- the school color

The hex color is defined in every context. In contexts where it may also be helpful to have the RGB or HSL color definition (PHP, TypeScript, JavaScript) it is also provided with the matching suffix: RedRGB or RED_RGB, etc.

Usage

TypeScript or JavasScript ESM modules

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

console.log(Colors.GrotonRed);
console.log(Colors.DarkBlueHSL);
console.log(Colors.PurpleRGB);

JavaScript CommonJS module

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

console.log(Colors.GrotonRed);
console.log(Colors.DarkBlueHSL);
console.log(Colors.PR);

PHP

use GrotonSchool\Colors;

echo Colors.GROTON_RED;
echo Colors.DARK_BLUE_HSL;
echo Colors.PR;

Sass/SCSS

// Sass $variables
@use '../node_modules/@groton/colors/colors';

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

.my-style {
  background: colors.$groton-red;
}

.my-other-style {
  color: colors.$dark-blue;
  background: var(--PR);
}

// N.B. using the Sass variables to initialize CSS variables requires string interpolation
:root {
  --my-color: #{colors.$green};
}

CSS

Add the CSS variables to a TypeScript module:

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

Use a CDN to get the variables:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@groton/colors@0.1.0/vars.css"
/>