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