Allow passing a chroma color as a start/mid/end color

Nate Butler created 2 years ago

Change summary

styles/src/system/algorithm.ts | 6 +++---
styles/src/system/ref/color.ts | 3 +++
styles/src/system/types.ts     | 8 +++++---
3 files changed, 11 insertions(+), 6 deletions(-)

Detailed changes

styles/src/system/algorithm.ts

@@ -38,9 +38,9 @@ export function generateColors(props: ColorProps, inverted: boolean) {
 
   const { start, middle, end } = props.color;
 
-  const startColor = validColor(start);
-  const middleColor = validColor(middle);
-  const endColor = validColor(end);
+  const startColor = typeof start === "string" ? validColor(start) : start;
+  const middleColor = typeof middle === "string" ? validColor(middle) : middle;
+  const endColor = typeof end === "string" ? validColor(end) : end;
 
   // TODO: Use curve when generating colors
 

styles/src/system/ref/color.ts

@@ -7,6 +7,9 @@ import { ColorFamily } from "../types";
 // As it will generate thousands of lines of code.
 // Instead, use the outputs from the reference palette which exports a smaller subset of colors.
 
+// Token or user-facing colors should use short, clear names
+// and a 100-900 scale to match the font weight scale.
+
 // Colors should use the LCH color space.
 // https://www.w3.org/TR/css-color-4/#lch-colors
 

styles/src/system/types.ts

@@ -1,3 +1,5 @@
+import { Color as ChromaColor } from "chroma-js";
+
 export type Color = {
   step: number;
   hex: string;
@@ -18,8 +20,8 @@ export type ColorFamily = {
 export interface ColorProps {
   name: string;
   color: {
-    start: string;
-    middle: string;
-    end: string;
+    start: string | ChromaColor;
+    middle: string | ChromaColor;
+    end: string | ChromaColor;
   };
 }