mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-26 03:59:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Update colors.

Browse source
This commit is contained in:
Nate Butler 2023-02-12 21:04:31 -05:00
parent e65c0810ba
commit a32c0d1c9b
5 changed files with 121 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
styles/src/system/lib/generate.ts
View file

@ -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,

105
styles/src/system/ref/color.ts
View file

@ -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,
},
},

2
styles/src/system/ref/curves.ts
View file

@ -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",

1
styles/src/system/system.ts
View file

@ -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),

85
styles/theme-tool/app/page.tsx
View file

@ -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>
);