colorScheme.ts

 1import { Scale } from "chroma-js";
 2
 3export interface ColorScheme {
 4  name: string;
 5  isLight: boolean;
 6
 7  lowest: Layer;
 8  middle: Layer;
 9  highest: Layer;
10
11  ramps: RampSet;
12
13  popoverShadow: Shadow;
14  modalShadow: Shadow;
15
16  players: Players;
17}
18
19export interface Player {
20  cursor: string;
21  selection: string;
22}
23
24export interface Players {
25  "0": Player;
26  "1": Player;
27  "2": Player;
28  "3": Player;
29  "4": Player;
30  "5": Player;
31  "6": Player;
32  "7": Player;
33}
34
35export interface Shadow {
36  blur: number;
37  color: string;
38  offset: number[];
39}
40
41export type StyleSets = keyof Layer;
42export interface Layer {
43  base: StyleSet;
44  variant: StyleSet;
45  on: StyleSet;
46  accent: StyleSet;
47  positive: StyleSet;
48  warning: StyleSet;
49  negative: StyleSet;
50}
51
52export interface RampSet {
53  neutral: Scale;
54  red: Scale;
55  orange: Scale;
56  yellow: Scale;
57  green: Scale;
58  cyan: Scale;
59  blue: Scale;
60  violet: Scale;
61  magenta: Scale;
62}
63
64export type Styles = keyof StyleSet;
65export interface StyleSet {
66  default: Style;
67  active: Style;
68  disabled: Style;
69  hovered: Style;
70  pressed: Style;
71  inverted: Style;
72}
73
74export interface Style {
75  background: string;
76  border: string;
77  foreground: string;
78}