Add gray color families

Nate Butler created 2 years ago

Change summary

styles/src/system/ref/color.ts | 46 ++++++++++++++++++++++++++++++++++++
styles/src/system/system.ts    |  8 ++++++
styles/theme-tool/app/page.tsx |  2 +
3 files changed, 56 insertions(+)

Detailed changes

styles/src/system/ref/color.ts

@@ -7,6 +7,52 @@ import { curve } from "./curves";
 
 // Token or user-facing colors should use short, clear names and a 100-900 scale to match the font weight scale.
 
+// Light Gray ======================================== //
+
+export const lightgray = generateColorFamily({
+  name: "lightgray",
+  color: {
+    hue: {
+      start: 210,
+      end: 210,
+      curve: curve.linear,
+    },
+    saturation: {
+      start: 10,
+      end: 15,
+      curve: curve.saturation,
+    },
+    lightness: {
+      start: 97,
+      end: 50,
+      curve: curve.linear,
+    },
+  },
+});
+
+// Light Dark ======================================== //
+
+export const darkgray = generateColorFamily({
+  name: "darkgray",
+  color: {
+    hue: {
+      start: 210,
+      end: 210,
+      curve: curve.linear,
+    },
+    saturation: {
+      start: 15,
+      end: 20,
+      curve: curve.saturation,
+    },
+    lightness: {
+      start: 55,
+      end: 8,
+      curve: curve.linear,
+    },
+  },
+});
+
 // Red ======================================== //
 
 export const red = generateColorFamily({

styles/src/system/system.ts

@@ -2,6 +2,14 @@ import chroma from "chroma-js";
 import * as colorFamily from "./ref/color";
 
 const color = {
+  lightgray: chroma
+    .scale(colorFamily.lightgray.scale.values)
+    .mode("lch")
+    .colors(9),
+  darkgray: chroma
+    .scale(colorFamily.darkgray.scale.values)
+    .mode("lch")
+    .colors(9),
   red: chroma.scale(colorFamily.red.scale.values).mode("lch").colors(9),
   sunset: chroma.scale(colorFamily.sunset.scale.values).mode("lch").colors(9),
   orange: chroma.scale(colorFamily.orange.scale.values).mode("lch").colors(9),

styles/theme-tool/app/page.tsx

@@ -34,6 +34,8 @@ export default function Home() {
     return (
         <main>
             <div style={{ display: 'flex', gap: '1px' }}>
+                <ColorChips colors={color.lightgray} />
+                <ColorChips colors={color.darkgray} />
                 <ColorChips colors={color.red} />
                 <ColorChips colors={color.sunset} />
                 <ColorChips colors={color.orange} />