mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-25 01:34:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Allow passing a chroma color as a start/mid/end color

Browse source
This commit is contained in:
Nate Butler 2023-02-11 21:10:47 -05:00
parent 0acb820f04
commit 187fac1579
3 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
styles/src/system/algorithm.ts
View file

@ -38,9 +38,9 @@ export function generateColors(props: ColorProps, inverted: boolean) {
const { start, middle, end } = props.color; const { start, middle, end } = props.color;
const startColor = validColor(start); const startColor = typeof start === "string" ? validColor(start) : start;
const middleColor = validColor(middle); const middleColor = typeof middle === "string" ? validColor(middle) : middle;
const endColor = validColor(end); const endColor = typeof end === "string" ? validColor(end) : end;
// TODO: Use curve when generating colors // TODO: Use curve when generating colors

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

@ -7,6 +7,9 @@ import { ColorFamily } from "../types";
// As it will generate thousands of lines of code. // As it will generate thousands of lines of code.
// Instead, use the outputs from the reference palette which exports a smaller subset of colors. // Instead, use the outputs from the reference palette which exports a smaller subset of colors.
// Token or user-facing colors should use short, clear names
// and a 100-900 scale to match the font weight scale.
// Colors should use the LCH color space. // Colors should use the LCH color space.
// https://www.w3.org/TR/css-color-4/#lch-colors // https://www.w3.org/TR/css-color-4/#lch-colors

8
styles/src/system/types.ts
View file

@ -1,3 +1,5 @@
import { Color as ChromaColor } from "chroma-js";
export type Color = { export type Color = {
step: number; step: number;
hex: string; hex: string;
@ -18,8 +20,8 @@ export type ColorFamily = {
export interface ColorProps { export interface ColorProps {
name: string; name: string;
color: { color: {
start: string; start: string | ChromaColor;
middle: string; middle: string | ChromaColor;
end: string; end: string | ChromaColor;
}; };
} }