components.ts

  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}