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
 89  if (typeof styleSetStyleOrProperties === "object") {
 90    properties = styleSetStyleOrProperties;
 91  }
 92  if (typeof styleOrProperties === "object") {
 93    properties = styleOrProperties;
 94  }
 95
 96  return {
 97    family: fontFamilies[fontFamily],
 98    color: style.foreground,
 99    ...properties,
100    size,
101  };
102}
103
104
105export interface Border {
106  color: string,
107  width: number,
108  top?: boolean;
109  bottom?: boolean;
110  left?: boolean;
111  right?: boolean;
112  overlay?: boolean;
113}
114
115export interface BorderProperties {
116  width?: number;
117  top?: boolean;
118  bottom?: boolean;
119  left?: boolean;
120  right?: boolean;
121  overlay?: boolean;
122}
123
124export function border(
125  layer: Layer,
126  styleSet: StyleSets,
127  style: Styles,
128  properties?: BorderProperties
129): Border;
130export function border(
131  layer: Layer,
132  styleSet: StyleSets,
133  properties?: BorderProperties
134): Border;
135export function border(
136  layer: Layer,
137  style: Styles,
138  properties?: BorderProperties
139): Border;
140export function border(
141  layer: Layer,
142  properties?: BorderProperties
143): Border;
144export function border(
145  layer: Layer,
146  styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
147  styleOrProperties?: Styles | BorderProperties,
148  properties?: BorderProperties
149): Border {
150  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
151
152  if (typeof styleSetStyleOrProperties === "object") {
153    properties = styleSetStyleOrProperties;
154  }
155  if (typeof styleOrProperties === "object") {
156    properties = styleOrProperties;
157  }
158
159  return {
160    color: style.border,
161    width: 1,
162    ...properties,
163  };
164}