Nate ButlerandKeith Simmons
425473d296
- Use syntax tokens instead of manually adding token content - Add solarized to output - Add ramp step value to the token description in Figma Tokens Co-Authored-By: Keith Simmons <keith@the-simmons.net>
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import chroma, { Scale } from "chroma-js";
|
|
import { ColorToken } from "../tokens";
|
|
|
|
export type Color = string;
|
|
export type ColorRampStep = { value: Color; type: "color"; description: string };
|
|
export type ColorRamp = {
|
|
[index: number]: ColorRampStep;
|
|
};
|
|
|
|
export function colorRamp(
|
|
color: Color | [Color, Color],
|
|
options?: { steps?: number; increment?: number; }
|
|
): ColorRamp {
|
|
let scale: Scale;
|
|
if (Array.isArray(color)) {
|
|
const [startColor, endColor] = color;
|
|
scale = chroma.scale([startColor, endColor]);
|
|
} else {
|
|
let hue = Math.round(chroma(color).hsl()[0]);
|
|
let startColor = chroma.hsl(hue, 0.88, 0.96);
|
|
let endColor = chroma.hsl(hue, 0.68, 0.12);
|
|
scale = chroma
|
|
.scale([startColor, color, endColor])
|
|
.domain([0, 0.5, 1])
|
|
.mode("hsl")
|
|
.gamma(1)
|
|
// .correctLightness(true)
|
|
.padding([0, 0]);
|
|
}
|
|
|
|
const ramp: ColorRamp = {};
|
|
const steps = options?.steps || 10;
|
|
const increment = options?.increment || 100;
|
|
|
|
scale.colors(steps, "hex").forEach((color, ix) => {
|
|
const step = ix * increment;
|
|
ramp[step] = {
|
|
value: color,
|
|
description: `Step: ${step}`,
|
|
type: "color",
|
|
};
|
|
});
|
|
|
|
return ramp;
|
|
}
|
|
|
|
export function withOpacity(color: ColorToken, opacity: number): ColorToken {
|
|
return {
|
|
...color,
|
|
value: chroma(color.value).alpha(opacity).hex()
|
|
};
|
|
}
|