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(
64  theme: Theme,
65  playerNumber: PlayerIndex,
66): Player {
67  return {
68    selection: {
69      cursor: theme.player[playerNumber].cursorColor,
70      selection: theme.player[playerNumber].selectionColor,
71    },
72  };
73}
74
75export type BackgroundColor = keyof Theme["backgroundColor"];
76export type BackgroundState = keyof BackgroundColorSet;
77export function backgroundColor(
78  theme: Theme,
79  name: BackgroundColor,
80  state?: BackgroundState,
81): string {
82  return theme.backgroundColor[name][state || "base"];
83}
84
85export function modalShadow(theme: Theme) {
86  return {
87    blur: 16,
88    color: theme.shadow,
89    offset: [0, 2],
90  };
91}
92
93export function popoverShadow(theme: Theme) {
94  return {
95    blur: 4,
96    color: theme.shadow,
97    offset: [1, 2],
98  };
99}