From 0ba44c6dc4deb23c1c9260aa794c9b572be91efe Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Thu, 9 Feb 2023 00:09:52 -0500
Subject: [PATCH] Start on system colors

---
 styles/src/system/ref/color.ts | 29 +++++++++++++++++++++++++++++
 styles/src/system/reference.ts |  8 ++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 styles/src/system/ref/color.ts
 create mode 100644 styles/src/system/reference.ts

diff --git a/styles/src/system/ref/color.ts b/styles/src/system/ref/color.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bcf15157f55dc4622c3781930d4651b08f09aac8
--- /dev/null
+++ b/styles/src/system/ref/color.ts
@@ -0,0 +1,29 @@
+import * as chroma from "chroma-js";
+
+// Colors should use the LCH color space.
+// https://www.w3.org/TR/css-color-4/#lch-colors
+
+const base = {
+  black: chroma.lch(0, 0, 0),
+  white: chroma.lch(150, 0, 0),
+  gray: {
+    light: chroma.lch(96, 0, 0),
+    mid: chroma.lch(55, 0, 0),
+    dark: chroma.lch(10, 0, 0),
+  },
+  red: {
+    light: chroma.lch(96, 4, 31),
+    mid: chroma.lch(55, 77, 31),
+    dark: chroma.lch(10, 24, 31),
+  },
+};
+
+export const black = base.black;
+export const white = base.white;
+
+export const gray = chroma.scale([
+  base.gray.light,
+  base.gray.mid,
+  base.gray.dark,
+]);
+export const red = chroma.scale([base.red.light, base.red.mid, base.red.dark]);
diff --git a/styles/src/system/reference.ts b/styles/src/system/reference.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b7b96bef2fd26f494373309d79171a32290796b6
--- /dev/null
+++ b/styles/src/system/reference.ts
@@ -0,0 +1,8 @@
+import { black, gray, red, white } from "./ref/color";
+
+export const color = {
+  white,
+  black,
+  gray,
+  red,
+};