components.ts

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