PHPackages                             groton-school/colors - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. groton-school/colors

ActiveLibrary[Utility & Helpers](/categories/utility)

groton-school/colors
====================

Standard colors for Groton School apps

0.4.2(6mo ago)02MITTypeScriptCI passing

Since May 7Pushed 4mo ago1 watchersCompare

[ Source](https://github.com/groton-school/colors)[ Packagist](https://packagist.org/packages/groton-school/colors)[ RSS](/packages/groton-school-colors/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (9)Used By (0)

@groton/colors
==============

[](#grotoncolors)

Standard colors for Groton School apps

[![npm version](https://camo.githubusercontent.com/ef102d5b6fac5f01e59f783c586858cdf0fd9a563a42d7e240ea0b0c79801773/68747470733a2f2f62616467652e667572792e696f2f6a732f4067726f746f6e253246636f6c6f72732e737667)](https://badge.fury.io/js/@groton%2Fcolors)[![Packagist Version](https://camo.githubusercontent.com/e314c7aebb0877278491b23224283481c23b2e0cd17acd12bfb47305480ec519/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f67726f746f6e2d7363686f6f6c2f636f6c6f72732e737667)](https://packagist.org/packages/groton-school/colors)

Install
-------

[](#install)

### Node `npm`

[](#node-npm)

```
npm i @groton/colors
```

### PHP `composer`

[](#php-composer)

```
composer require groton-school/colors
```

Color Constants
---------------

[](#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:

LanguageCaseExampleTypeScript, JavaScriptPascalCase`Colors.NoColor`, `Colors.Red`, `Colors.RD`Sass/SCSSkebab-case`map.get(colors.$variants, 'no-color')`, `map.get(colors.$variants, 'red')`, `map.get(colors.$variants,'RD')`CSSkebab-case variable names`var(--no-color)`, `var(--red)`, `var(--RD)`PHPCONSTANT\_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.)

### Color Components

[](#color-components)

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.

LanguageExamplesTypeScript, 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`### Variants

[](#variants)

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

VariantTS/JSSCSSCSSPHPText 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
-----

[](#usage)

### TypeScript or JavasScript ESM modules

[](#typescript-or-javasscript-esm-modules)

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

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

### JavaScript CommonJS module

[](#javascript-commonjs-module)

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

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

### PHP

[](#php)

```
use GrotonSchool\Colors;

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

### Sass/SCSS

[](#sassscss)

```
// 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')};
}
```

### CSS

[](#css)

Add the CSS variables to a TypeScript module:

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

Use a CDN to get the variables:

```

```

Use the variables:

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

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

<iframe src="./preview.html" style="border: 0; height: 600px; width: 100%"></iframe>

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance75

Regular maintenance activity

Popularity2

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity32

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~22 days

Recently: every ~6 days

Total

8

Last Release

209d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d0554a28104c65004c6de4d335ada25cf2763c8a9691dc5611314486d461fa4c?d=identicon)[battis](/maintainers/battis)

---

Top Contributors

[![battis](https://avatars.githubusercontent.com/u/419619?v=4)](https://github.com/battis "battis (24 commits)")

###  Code Quality

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/groton-school-colors/health.svg)

```
[![Health](https://phpackages.com/badges/groton-school-colors/health.svg)](https://phpackages.com/packages/groton-school-colors)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)