Document ref/color further

Nate Butler created

Change summary

styles/src/system/algorithm.ts | 4 ++++
styles/src/system/ref/color.ts | 5 +++++
styles/src/system/types.ts     | 1 +
3 files changed, 10 insertions(+)

Detailed changes

styles/src/system/algorithm.ts 🔗 

@@ -17,11 +17,15 @@ function assignColor(scale: Scale, steps: number, step: number) {
   const rgbaArray = color.rgba();
   const hex = color.hex();
 
+  // Roughly  calculate if a color is dark or light
+  const isLight = lch[0] > 50;
+
   const result = {
     step,
     hex,
     lch,
     rgbaArray,
+    isLight,
   };
 
   return result;

styles/src/system/ref/color.ts 🔗 

@@ -2,6 +2,11 @@ import chroma from "chroma-js";
 import { generateColorSet } from "../algorithm";
 import { ColorFamily } from "../types";
 
+// These are the source colors for the color scales in the system.
+// This should never directly be used in the system, or exported to be used in a component or theme
+// As it will generate thousands of lines of code.
+// Instead, use the outputs from the reference palette which exports a smaller subset of colors.
+
 // Colors should use the LCH color space.
 // https://www.w3.org/TR/css-color-4/#lch-colors

styles/src/system/types.ts 🔗 

@@ -6,6 +6,7 @@ export type Color = {
 };
 
 export type ColorSet = Color[];
+
 export type ColorFamily = {
   name: string;
   colors: string[];