components.ts

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