oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Generate color meta, document functions and tidy.

Browse Source
This commit is contained in:
Nate Butler
2023-02-12 19:45:16 -05:00
parent addfcdc1f4
commit 1fcfa5d272
11 changed files with 613 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/system/ref/color.ts
+308 -268
View File
@@ -1,336 +1,376 @@
import chroma from "chroma-js";
import {
generateColors2,
generateColorSet,
generateColorsUsingCurve,
} from "../algorithm";
import { curve } from "../curves";
import { ColorFamily } from "../types";
import { generateColorFamily } from "../lib/generate";
import { curve } from "./curves";
// These are the source colors for the color scales in the system.
// This should never directly be used in the system, or exported to be used in a component or theme
// As it will generate thousands of lines of code.
// These should never directly be used directly in components or themes as they generate thousands of lines of code.
// 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.
// Token or user-facing colors should use short, clear names and a 100-900 scale to match the font weight scale.
// Red ======================================== //
export const red = generateColors2(
{
start: 0,
end: 0,
curve: curve.linear,
export const red = generateColorFamily({
name: "red",
color: {
hue: {
start: 0,
end: 0,
curve: curve.linear,
},
saturation: {
start: 95,
end: 75,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 25,
curve: curve.lightness,
},
},
{
start: 95,
end: 75,
curve: curve.saturation,
},
{
start: 97,
end: 25,
curve: curve.lightness,
}
);
});
// Sunset ======================================== //
export const sunset = generateColors2(
{
start: 12,
end: 12,
curve: curve.linear,
export const sunset = generateColorFamily({
name: "sunset",
color: {
hue: {
start: 12,
end: 12,
curve: curve.linear,
},
saturation: {
start: 100,
end: 80,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 25,
curve: curve.lightness,
},
},
{
start: 100,
end: 80,
curve: curve.saturation,
},
{
start: 97,
end: 25,
curve: curve.lightness,
}
);
});
// Orange ======================================== //
export const orange = generateColors2(
{
start: 25,
end: 25,
curve: curve.linear,
export const orange = generateColorFamily({
name: "orange",
color: {
hue: {
start: 25,
end: 25,
curve: curve.linear,
},
saturation: {
start: 100,
end: 100,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 25,
curve: curve.lightness,
},
},
{
start: 100,
end: 100,
curve: curve.saturation,
},
{
start: 97,
end: 25,
curve: curve.lightness,
}
);
});
// Amber ======================================== //
export const amber = generateColors2(
{
start: 34,
end: 34,
curve: curve.linear,
export const amber = generateColorFamily({
name: "amber",
color: {
hue: {
start: 34,
end: 34,
curve: curve.linear,
},
saturation: {
start: 100,
end: 100,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 25,
curve: curve.lightness,
},
},
{
start: 100,
end: 100,
curve: curve.saturation,
},
{
start: 97,
end: 25,
curve: curve.lightness,
}
);
});
// Yellow ======================================== //
export const yellow = generateColors2(
{
start: 48,
end: 48,
curve: curve.linear,
export const yellow = generateColorFamily({
name: "yellow",
color: {
hue: {
start: 48,
end: 48,
curve: curve.linear,
},
saturation: {
start: 90,
end: 100,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 28,
curve: curve.lightness,
},
},
{
start: 90,
end: 100,
curve: curve.saturation,
},
{
start: 97,
end: 32,
curve: curve.lightness,
}
);
});
// Citron ======================================== //
export const citron = generateColors2(
{
start: 65,
end: 65,
curve: curve.linear,
export const citron = generateColorFamily({
name: "citron",
color: {
hue: {
start: 65,
end: 65,
curve: curve.linear,
},
saturation: {
start: 85,
end: 70,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 25,
curve: curve.lightness,
},
},
{
start: 85,
end: 70,
curve: curve.saturation,
},
{
start: 97,
end: 25,
curve: curve.lightness,
}
);
});
// Lime ======================================== //
export const lime = generateColors2(
{
start: 85,
end: 85,
curve: curve.linear,
export const lime = generateColorFamily({
name: "lime",
color: {
hue: {
start: 85,
end: 85,
curve: curve.linear,
},
saturation: {
start: 85,
end: 70,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 25,
curve: curve.lightness,
},
},
{
start: 85,
end: 70,
curve: curve.saturation,
},
{
start: 97,
end: 25,
curve: curve.lightness,
}
);
});
// Green ======================================== //
export const green = generateColors2(
{
start: 108,
end: 108,
curve: curve.linear,
export const green = generateColorFamily({
name: "green",
color: {
hue: {
start: 108,
end: 108,
curve: curve.linear,
},
saturation: {
start: 60,
end: 50,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 25,
curve: curve.lightness,
},
},
{
start: 60,
end: 50,
curve: curve.saturation,
},
{
start: 97,
end: 25,
curve: curve.lightness,
}
);
});
// Mint ======================================== //
export const mint = generateColors2(
{
start: 142,
end: 142,
curve: curve.linear,
export const mint = generateColorFamily({
name: "mint",
color: {
hue: {
start: 142,
end: 142,
curve: curve.linear,
},
saturation: {
start: 60,
end: 50,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 20,
curve: curve.lightness,
},
},
{
start: 60,
end: 50,
curve: curve.saturation,
},
{
start: 97,
end: 20,
curve: curve.lightness,
}
);
});
// Cyan ======================================== //
export const cyan = generateColors2(
{
start: 179,
end: 179,
curve: curve.linear,
export const cyan = generateColorFamily({
name: "cyan",
color: {
hue: {
start: 179,
end: 179,
curve: curve.linear,
},
saturation: {
start: 70,
end: 60,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 20,
curve: curve.lightness,
},
},
{
start: 70,
end: 60,
curve: curve.saturation,
},
{
start: 97,
end: 20,
curve: curve.lightness,
}
);
});
// Sky ======================================== //
export const sky = generateColors2(
{
start: 190,
end: 190,
curve: curve.linear,
export const sky = generateColorFamily({
name: "sky",
color: {
hue: {
start: 195,
end: 195,
curve: curve.linear,
},
saturation: {
start: 85,
end: 75,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 20,
curve: curve.lightness,
},
},
{
start: 85,
end: 75,
curve: curve.saturation,
},
{
start: 97,
end: 20,
curve: curve.lightness,
}
);
});
// Blue ======================================== //
export const blue = generateColors2(
{
start: 210,
end: 210,
curve: curve.linear,
export const blue = generateColorFamily({
name: "blue",
color: {
hue: {
start: 210,
end: 210,
curve: curve.linear,
},
saturation: {
start: 90,
end: 75,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 20,
curve: curve.lightness,
},
},
{
start: 90,
end: 60,
curve: curve.saturation,
},
{
start: 97,
end: 20,
curve: curve.lightness,
}
);
});
// Indigo ======================================== //
export const indigo = generateColors2(
{
start: 240,
end: 240,
curve: curve.linear,
export const indigo = generateColorFamily({
name: "indigo",
color: {
hue: {
start: 230,
end: 230,
curve: curve.linear,
},
saturation: {
start: 80,
end: 50,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 20,
curve: curve.lightness,
},
},
{
start: 80,
end: 40,
curve: curve.saturation,
},
{
start: 97,
end: 20,
curve: curve.lightness,
}
);
});
// Purple ======================================== //
export const purple = generateColors2(
{
start: 260,
end: 265,
curve: curve.linear,
export const purple = generateColorFamily({
name: "purple",
color: {
hue: {
start: 260,
end: 265,
curve: curve.linear,
},
saturation: {
start: 80,
end: 50,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 20,
curve: curve.lightness,
},
},
{
start: 80,
end: 50,
curve: curve.saturation,
},
{
start: 97,
end: 20,
curve: curve.lightness,
}
);
});
// Pink ======================================== //
export const pink = generateColors2(
{
start: 310,
end: 310,
curve: curve.linear,
export const pink = generateColorFamily({
name: "pink",
color: {
hue: {
start: 310,
end: 310,
curve: curve.linear,
},
saturation: {
start: 80,
end: 75,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 20,
curve: curve.lightness,
},
},
{
start: 80,
end: 70,
curve: curve.saturation,
},
{
start: 97,
end: 20,
curve: curve.lightness,
}
);
});
// Rose ======================================== //
export const rose = generateColors2(
{
start: 345,
end: 345,
curve: curve.linear,
export const rose = generateColorFamily({
name: "rose",
color: {
hue: {
start: 345,
end: 345,
curve: curve.linear,
},
saturation: {
start: 90,
end: 65,
curve: curve.saturation,
},
lightness: {
start: 97,
end: 20,
curve: curve.lightness,
},
},
{
start: 90,
end: 65,
curve: curve.saturation,
},
{
start: 97,
end: 20,
curve: curve.lightness,
}
);
});
styles/src/system/ref/curves.ts
+25
View File
@@ -0,0 +1,25 @@
export interface Curve {
name: string;
value: number[];
}
export interface Curves {
lightness: Curve;
saturation: Curve;
linear: Curve;
}
export const curve: Curves = {
lightness: {
name: "lightnessCurve",
value: [0.2, 0, 0.85, 1.0],
},
saturation: {
name: "saturationCurve",
value: [0.67, 0.6, 0.55, 1.0],
},
linear: {
name: "linear",
value: [0.5, 0.5, 0.5, 0.5],
},
};