types.ts

 1import { Color as ChromaColor } from "chroma-js";
 2import { Curve } from "./ref/curves";
 3
 4export interface ColorAccessiblityValue {
 5  value: number;
 6  aaPass: boolean;
 7  aaaPass: boolean;
 8}
 9
10/**
11 * Calculates the color contrast between a specified color and its corresponding background and foreground colors.
12 *
13 * @note This implementation is currently basic – Currently we only calculate contrasts against black and white, in the future will allow for dynamic color contrast calculation based on the colors present in a given palette.
14 * @note The goal is to align with WCAG3 accessibility standards as they become stabilized. See the [WCAG 3 Introduction](https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/) for more information.
15 */
16export interface ColorAccessiblity {
17  black: ColorAccessiblityValue;
18  white: ColorAccessiblityValue;
19}
20
21export type Color = {
22  step: number;
23  contrast: ColorAccessiblity;
24  hex: string;
25  lch: number[];
26  rgba: number[];
27  isLight: boolean;
28};
29
30export interface ColorScale {
31  colors: Color[];
32  // An array of hex values for each color in the scale
33  values: string[];
34}
35
36export type ColorFamily = {
37  name: string;
38  scale: ColorScale;
39  invertedScale: ColorScale;
40};
41
42export interface ColorFamilyHue {
43  start: number;
44  end: number;
45  curve: Curve;
46}
47
48export interface ColorFamilySaturation {
49  start: number;
50  end: number;
51  curve: Curve;
52}
53
54export interface ColorFamilyLightness {
55  start: number;
56  end: number;
57  curve: Curve;
58}
59
60export interface ColorFamilyConfig {
61  name: string;
62  color: {
63    hue: ColorFamilyHue;
64    saturation: ColorFamilySaturation;
65    lightness: ColorFamilyLightness;
66  };
67}