From a32c0d1c9b128c00efe2cd3e5ff4389dbe709b97 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sun, 12 Feb 2023 21:04:31 -0500 Subject: [PATCH] Update colors. --- 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(-) diff --git a/styles/src/system/lib/generate.ts b/styles/src/system/lib/generate.ts index c77d93fff8..b0e6d1effa 100644 --- a/styles/src/system/lib/generate.ts +++ b/styles/src/system/lib/generate.ts @@ -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, diff --git a/styles/src/system/ref/color.ts b/styles/src/system/ref/color.ts index 5cd0f69fd3..f115c9cb05 100644 --- a/styles/src/system/ref/color.ts +++ b/styles/src/system/ref/color.ts @@ -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, }, }, diff --git a/styles/src/system/ref/curves.ts b/styles/src/system/ref/curves.ts index 0eaa3d1678..608ca5a007 100644 --- a/styles/src/system/ref/curves.ts +++ b/styles/src/system/ref/curves.ts @@ -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", diff --git a/styles/src/system/system.ts b/styles/src/system/system.ts index fee82cfc8b..86953ad44d 100644 --- a/styles/src/system/system.ts +++ b/styles/src/system/system.ts @@ -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), diff --git a/styles/theme-tool/app/page.tsx b/styles/theme-tool/app/page.tsx index 1852d3238f..356b51c5f4 100644 --- a/styles/theme-tool/app/page.tsx +++ b/styles/theme-tool/app/page.tsx @@ -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 (
- {colors.map((c) => ( -
- {c} -
- ))} +
+ {colorFamily.name} +
+ {colorFamily.scale.colors.map( + (c) => + familySubset.includes(c.step) && ( +
+ {c.hex} +
+ ), + )}
); } @@ -34,24 +52,25 @@ export default function Home() { return (
- - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
);