components.ts

  1import { fontFamilies, fontSizes, FontWeight } from "../common";
  2import { Layer, Styles, StyleSets } from "../themes/common/colorScheme";
  3
  4export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
  5  return layer[styleSet ?? "base"][style ?? "default"].background;
  6}
  7export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
  8  return layer[styleSet ?? "base"][style ?? "default"].border;
  9}
 10export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
 11  return layer[styleSet ?? "base"][style ?? "default"].foreground;
 12}
 13
 14
 15interface Text {
 16  family: keyof typeof fontFamilies,
 17  color: string,
 18  size: number,
 19  weight?: FontWeight,
 20  underline?: boolean,
 21}
 22
 23interface TextProperties {
 24  size?: keyof typeof fontSizes;
 25  weight?: FontWeight;
 26  underline?: boolean;
 27}
 28
 29export function text(
 30  layer: Layer,
 31  fontFamily: keyof typeof fontFamilies,
 32  styleSet: StyleSets,
 33  style: Styles,
 34  properties?: TextProperties
 35): Text;
 36export function text(
 37  layer: Layer,
 38  fontFamily: keyof typeof fontFamilies,
 39  styleSet: StyleSets,
 40  properties?: TextProperties): Text;
 41export function text(
 42  layer: Layer,
 43  fontFamily: keyof typeof fontFamilies,
 44  properties?: TextProperties): Text;
 45export function text(
 46  layer: Layer,
 47  fontFamily: keyof typeof fontFamilies,
 48  styleSetOrProperties?: StyleSets | TextProperties,
 49  styleOrProperties?: Styles | TextProperties,
 50  properties?: TextProperties
 51) {
 52  let styleSet: StyleSets = "base";
 53  let style: Styles = "default";
 54
 55  if (typeof styleSetOrProperties === "string") {
 56    styleSet = styleSetOrProperties
 57  } else if (styleSetOrProperties !== undefined) {
 58    properties = styleSetOrProperties;
 59  }
 60
 61  if (typeof styleOrProperties === "string") {
 62    style = styleOrProperties;
 63  } else if (styleOrProperties !== undefined) {
 64    properties = styleOrProperties;
 65  }
 66
 67  let size = fontSizes[properties?.size || "sm"];
 68  return {
 69    family: fontFamilies[fontFamily],
 70    color: layer[styleSet][style].foreground,
 71    ...properties,
 72    size,
 73  };
 74}
 75
 76
 77export interface Border {
 78  color: string,
 79  width: number,
 80  top?: boolean;
 81  bottom?: boolean;
 82  left?: boolean;
 83  right?: boolean;
 84  overlay?: boolean;
 85}
 86
 87export interface BorderOptions {
 88  width?: number;
 89  top?: boolean;
 90  bottom?: boolean;
 91  left?: boolean;
 92  right?: boolean;
 93  overlay?: boolean;
 94}
 95
 96export function border(
 97  layer: Layer,
 98  styleSet: StyleSets,
 99  style: Styles,
100  options?: BorderOptions
101): Border;
102export function border(
103  layer: Layer,
104  styleSet: StyleSets,
105  options?: BorderOptions
106): Border;
107export function border(
108  layer: Layer,
109  options?: BorderOptions
110): Border;
111export function border(
112  layer: Layer,
113  styleSetOrOptions?: StyleSets | BorderOptions,
114  styleOrOptions?: Styles | BorderOptions,
115  options?: BorderOptions
116): Border {
117  let styleSet: StyleSets = "base";
118  let style: Styles = "default";
119
120  if (typeof styleSetOrOptions === "string") {
121    styleSet = styleSetOrOptions
122  } else if (styleSetOrOptions !== undefined) {
123    options = styleSetOrOptions;
124  }
125
126  if (typeof styleOrOptions === "string") {
127    style = styleOrOptions;
128  } else if (styleOrOptions !== undefined) {
129    options = styleOrOptions;
130  }
131
132  return {
133    color: layer[styleSet][style].border,
134    width: 1,
135    ...options,
136  };
137}