Nate Butler created
styles/src/system/lib/generate.ts | 4
styles/src/system/ref/color.ts | 105 ++++++++++++++++++++------------
styles/src/system/ref/curves.ts | 2
styles/src/system/system.ts | 1
styles/theme-tool/app/page.tsx | 85 ++++++++++++++++----------
5 files changed, 121 insertions(+), 76 deletions(-)
@@ -60,7 +60,9 @@ function generateColor(
const rgba = color.rgba();
const hex = color.hex();
- const isLight = lch[0] > 50;
+ // 55 is a magic number. It's the lightness value at which we consider a color to be "light".
+ // It was picked by eye with some testing. We might want to use a more scientific approach in the future.
+ const isLight = lch[0] > 55;
const result: Color = {
step,
@@ -82,13 +82,13 @@ export const sunset = generateColorFamily({
name: "sunset",
color: {
hue: {
- start: 12,
- end: 12,
+ start: 15,
+ end: 15,
curve: curve.linear,
},
saturation: {
start: 100,
- end: 80,
+ end: 90,
curve: curve.saturation,
},
lightness: {
@@ -111,12 +111,12 @@ export const orange = generateColorFamily({
},
saturation: {
start: 100,
- end: 100,
+ end: 95,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 25,
+ end: 20,
curve: curve.lightness,
},
},
@@ -128,8 +128,8 @@ export const amber = generateColorFamily({
name: "amber",
color: {
hue: {
- start: 34,
- end: 34,
+ start: 38,
+ end: 38,
curve: curve.linear,
},
saturation: {
@@ -139,7 +139,7 @@ export const amber = generateColorFamily({
},
lightness: {
start: 97,
- end: 25,
+ end: 18,
curve: curve.lightness,
},
},
@@ -162,7 +162,30 @@ export const yellow = generateColorFamily({
},
lightness: {
start: 97,
- end: 28,
+ end: 15,
+ curve: curve.lightness,
+ },
+ },
+});
+
+// Lemon ======================================== //
+
+export const lemon = generateColorFamily({
+ name: "lemon",
+ color: {
+ hue: {
+ start: 55,
+ end: 55,
+ curve: curve.linear,
+ },
+ saturation: {
+ start: 85,
+ end: 95,
+ curve: curve.saturation,
+ },
+ lightness: {
+ start: 97,
+ end: 15,
curve: curve.lightness,
},
},
@@ -174,18 +197,18 @@ export const citron = generateColorFamily({
name: "citron",
color: {
hue: {
- start: 65,
- end: 65,
+ start: 70,
+ end: 70,
curve: curve.linear,
},
saturation: {
start: 85,
- end: 70,
+ end: 90,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 25,
+ end: 15,
curve: curve.lightness,
},
},
@@ -203,12 +226,12 @@ export const lime = generateColorFamily({
},
saturation: {
start: 85,
- end: 70,
+ end: 80,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 25,
+ end: 18,
curve: curve.lightness,
},
},
@@ -226,12 +249,12 @@ export const green = generateColorFamily({
},
saturation: {
start: 60,
- end: 50,
+ end: 70,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 25,
+ end: 18,
curve: curve.lightness,
},
},
@@ -249,7 +272,7 @@ export const mint = generateColorFamily({
},
saturation: {
start: 60,
- end: 50,
+ end: 75,
curve: curve.saturation,
},
lightness: {
@@ -272,7 +295,7 @@ export const cyan = generateColorFamily({
},
saturation: {
start: 70,
- end: 60,
+ end: 80,
curve: curve.saturation,
},
lightness: {
@@ -290,17 +313,17 @@ export const sky = generateColorFamily({
color: {
hue: {
start: 195,
- end: 195,
+ end: 205,
curve: curve.linear,
},
saturation: {
start: 85,
- end: 75,
+ end: 90,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 20,
+ end: 15,
curve: curve.lightness,
},
},
@@ -312,18 +335,18 @@ export const blue = generateColorFamily({
name: "blue",
color: {
hue: {
- start: 210,
- end: 210,
+ start: 218,
+ end: 218,
curve: curve.linear,
},
saturation: {
- start: 90,
- end: 75,
+ start: 85,
+ end: 70,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 20,
+ end: 15,
curve: curve.lightness,
},
},
@@ -335,18 +358,18 @@ export const indigo = generateColorFamily({
name: "indigo",
color: {
hue: {
- start: 230,
- end: 230,
+ start: 245,
+ end: 245,
curve: curve.linear,
},
saturation: {
- start: 80,
+ start: 60,
end: 50,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 20,
+ end: 22,
curve: curve.lightness,
},
},
@@ -359,12 +382,12 @@ export const purple = generateColorFamily({
color: {
hue: {
start: 260,
- end: 265,
+ end: 270,
curve: curve.linear,
},
saturation: {
- start: 80,
- end: 50,
+ start: 65,
+ end: 55,
curve: curve.saturation,
},
lightness: {
@@ -381,18 +404,18 @@ export const pink = generateColorFamily({
name: "pink",
color: {
hue: {
- start: 310,
- end: 310,
+ start: 320,
+ end: 330,
curve: curve.linear,
},
saturation: {
- start: 80,
- end: 75,
+ start: 70,
+ end: 65,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 20,
+ end: 32,
curve: curve.lightness,
},
},
@@ -410,12 +433,12 @@ export const rose = generateColorFamily({
},
saturation: {
start: 90,
- end: 65,
+ end: 70,
curve: curve.saturation,
},
lightness: {
start: 97,
- end: 20,
+ end: 32,
curve: curve.lightness,
},
},
@@ -12,7 +12,7 @@ export interface Curves {
export const curve: Curves = {
lightness: {
name: "lightnessCurve",
- value: [0.2, 0, 0.85, 1.0],
+ value: [0.2, 0, 0.75, 1.0],
},
saturation: {
name: "saturationCurve",
@@ -15,6 +15,7 @@ const color = {
orange: chroma.scale(colorFamily.orange.scale.values).mode("lch").colors(9),
amber: chroma.scale(colorFamily.amber.scale.values).mode("lch").colors(9),
yellow: chroma.scale(colorFamily.yellow.scale.values).mode("lch").colors(9),
+ lemon: chroma.scale(colorFamily.lemon.scale.values).mode("lch").colors(9),
citron: chroma.scale(colorFamily.citron.scale.values).mode("lch").colors(9),
lime: chroma.scale(colorFamily.lime.scale.values).mode("lch").colors(9),
green: chroma.scale(colorFamily.green.scale.values).mode("lch").colors(9),
@@ -1,8 +1,12 @@
/* eslint-disable import/no-relative-packages */
-import { color } from '../../src/system/system';
+
+import * as color from '../../src/system/ref/color';
+import { ColorFamily } from '../../src/system/types';
import styles from './page.module.css';
-function ColorChips({ colors }: { colors: string[] }) {
+function ColorChips({ colorFamily }: { colorFamily: ColorFamily }) {
+ const familySubset = [0, 11, 22, 33, 44, 56, 67, 79, 90, 101];
+
return (
<div
style={{
@@ -13,19 +17,33 @@ function ColorChips({ colors }: { colors: string[] }) {
gap: '1px',
}}
>
- {colors.map((c) => (
- <div
- key={c}
- style={{
- backgroundColor: c,
- width: '80px',
- height: '40px',
- }}
- className={styles.chip}
- >
- {c}
- </div>
- ))}
+ <div
+ style={{
+ fontFamily: 'monospace',
+ fontSize: '12px',
+ fontWeight: 'bold',
+ padding: '16px 0',
+ }}
+ >
+ {colorFamily.name}
+ </div>
+ {colorFamily.scale.colors.map(
+ (c) =>
+ familySubset.includes(c.step) && (
+ <div
+ key={c.step}
+ style={{
+ backgroundColor: c.hex,
+ color: c.isLight ? 'black' : 'white',
+ width: '80px',
+ height: '40px',
+ }}
+ className={styles.chip}
+ >
+ {c.hex}
+ </div>
+ ),
+ )}
</div>
);
}
@@ -34,24 +52,25 @@ 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} />
- <ColorChips colors={color.amber} />
- <ColorChips colors={color.yellow} />
- <ColorChips colors={color.citron} />
- <ColorChips colors={color.lime} />
- <ColorChips colors={color.green} />
- <ColorChips colors={color.mint} />
- <ColorChips colors={color.cyan} />
- <ColorChips colors={color.sky} />
- <ColorChips colors={color.blue} />
- <ColorChips colors={color.indigo} />
- <ColorChips colors={color.purple} />
- <ColorChips colors={color.pink} />
- <ColorChips colors={color.rose} />
+ <ColorChips colorFamily={color.lightgray} />
+ <ColorChips colorFamily={color.darkgray} />
+ <ColorChips colorFamily={color.red} />
+ <ColorChips colorFamily={color.sunset} />
+ <ColorChips colorFamily={color.orange} />
+ <ColorChips colorFamily={color.amber} />
+ <ColorChips colorFamily={color.yellow} />
+ <ColorChips colorFamily={color.lemon} />
+ <ColorChips colorFamily={color.citron} />
+ <ColorChips colorFamily={color.lime} />
+ <ColorChips colorFamily={color.green} />
+ <ColorChips colorFamily={color.mint} />
+ <ColorChips colorFamily={color.cyan} />
+ <ColorChips colorFamily={color.sky} />
+ <ColorChips colorFamily={color.blue} />
+ <ColorChips colorFamily={color.indigo} />
+ <ColorChips colorFamily={color.purple} />
+ <ColorChips colorFamily={color.pink} />
+ <ColorChips colorFamily={color.rose} />
</div>
</main>
);