components.ts

 1import chroma from "chroma-js";
 2import Theme, { BackgroundColorSet } from "../themes/theme";
 3import { fontFamilies, fontSizes, FontWeight } from "../tokens";
 4import { Color } from "../utils/color";
 5
 6export type TextColor = keyof Theme["textColor"];
 7export function text(
 8    theme: Theme,
 9    fontFamily: keyof typeof fontFamilies,
10    color: TextColor,
11    properties?: {
12        size?: keyof typeof fontSizes;
13        weight?: FontWeight;
14        underline?: boolean;
15    }
16) {
17    let size = fontSizes[properties?.size || "sm"].value;
18    return {
19        family: fontFamilies[fontFamily].value,
20        color: theme.textColor[color].value,
21        ...properties,
22        size,
23    };
24}
25export function textColor(theme: Theme, color: TextColor) {
26    return theme.textColor[color].value;
27}
28
29export type BorderColor = keyof Theme["borderColor"];
30export interface BorderOptions {
31    width?: number;
32    top?: boolean;
33    bottom?: boolean;
34    left?: boolean;
35    right?: boolean;
36    overlay?: boolean;
37}
38export function border(
39    theme: Theme,
40    color: BorderColor,
41    options?: BorderOptions
42) {
43    return {
44        color: borderColor(theme, color),
45        width: 1,
46        ...options,
47    };
48}
49export function borderColor(theme: Theme, color: BorderColor) {
50    return theme.borderColor[color].value;
51}
52
53export type IconColor = keyof Theme["iconColor"];
54export function iconColor(theme: Theme, color: IconColor) {
55    return theme.iconColor[color].value;
56}
57
58export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
59export interface Player {
60    selection: {
61        cursor: Color;
62        selection: Color;
63    };
64}
65export function player(
66    theme: Theme,
67    playerNumber: PlayerIndex,
68): Player {
69    return {
70        selection: {
71            cursor: theme.player[playerNumber].cursorColor.value,
72            selection: theme.player[playerNumber].selectionColor.value,
73        },
74    };
75}
76
77export type BackgroundColor = keyof Theme["backgroundColor"];
78export type BackgroundState = keyof BackgroundColorSet;
79export function backgroundColor(
80    theme: Theme,
81    name: BackgroundColor,
82    state?: BackgroundState,
83): Color {
84    return theme.backgroundColor[name][state || "base"].value;
85}
86
87export function shadow(theme: Theme) {
88    return {
89        blur: 16,
90        color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
91        offset: [0, 2],
92    };
93}