components.ts

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