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}