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 [
  6    "base",
  7    "variant",
  8    "on",
  9    "accent",
 10    "positive",
 11    "warning",
 12    "negative",
 13  ].includes(key);
 14}
 15
 16function isStyle(key: any): key is Styles {
 17  return [
 18    "default",
 19    "active",
 20    "disabled",
 21    "hovered",
 22    "pressed",
 23    "inverted",
 24  ].includes(key);
 25}
 26function getStyle(
 27  layer: Layer,
 28  possibleStyleSetOrStyle?: any,
 29  possibleStyle?: any
 30): Style {
 31  let styleSet: StyleSets = "base";
 32  let style: Styles = "default";
 33  if (isStyleSet(possibleStyleSetOrStyle)) {
 34    styleSet = possibleStyleSetOrStyle;
 35  } else if (isStyle(possibleStyleSetOrStyle)) {
 36    style = possibleStyleSetOrStyle;
 37  }
 38
 39  if (isStyle(possibleStyle)) {
 40    style = possibleStyle;
 41  }
 42
 43  return layer[styleSet][style];
 44}
 45
 46export function background(layer: Layer, style?: Styles): string;
 47export function background(
 48  layer: Layer,
 49  styleSet?: StyleSets,
 50  style?: Styles
 51): string;
 52export function background(
 53  layer: Layer,
 54  styleSetOrStyles?: StyleSets | Styles,
 55  style?: Styles
 56): string {
 57  return getStyle(layer, styleSetOrStyles, style).background;
 58}
 59
 60export function borderColor(layer: Layer, style?: Styles): string;
 61export function borderColor(
 62  layer: Layer,
 63  styleSet?: StyleSets,
 64  style?: Styles
 65): string;
 66export function borderColor(
 67  layer: Layer,
 68  styleSetOrStyles?: StyleSets | Styles,
 69  style?: Styles
 70): string {
 71  return getStyle(layer, styleSetOrStyles, style).border;
 72}
 73
 74export function foreground(layer: Layer, style?: Styles): string;
 75export function foreground(
 76  layer: Layer,
 77  styleSet?: StyleSets,
 78  style?: Styles
 79): string;
 80export function foreground(
 81  layer: Layer,
 82  styleSetOrStyles?: StyleSets | Styles,
 83  style?: Styles
 84): string {
 85  return getStyle(layer, styleSetOrStyles, style).foreground;
 86}
 87
 88interface Text {
 89  family: keyof typeof fontFamilies;
 90  color: string;
 91  size: number;
 92  weight?: FontWeight;
 93  underline?: boolean;
 94}
 95
 96interface TextProperties {
 97  size?: keyof typeof fontSizes;
 98  weight?: FontWeight;
 99  underline?: boolean;
100  color?: string;
101}
102
103export function text(
104  layer: Layer,
105  fontFamily: keyof typeof fontFamilies,
106  styleSet: StyleSets,
107  style: Styles,
108  properties?: TextProperties
109): Text;
110export function text(
111  layer: Layer,
112  fontFamily: keyof typeof fontFamilies,
113  styleSet: StyleSets,
114  properties?: TextProperties
115): Text;
116export function text(
117  layer: Layer,
118  fontFamily: keyof typeof fontFamilies,
119  style: Styles,
120  properties?: TextProperties
121): Text;
122export function text(
123  layer: Layer,
124  fontFamily: keyof typeof fontFamilies,
125  properties?: TextProperties
126): Text;
127export function text(
128  layer: Layer,
129  fontFamily: keyof typeof fontFamilies,
130  styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
131  styleOrProperties?: Styles | TextProperties,
132  properties?: TextProperties
133) {
134  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
135
136  if (typeof styleSetStyleOrProperties === "object") {
137    properties = styleSetStyleOrProperties;
138  }
139  if (typeof styleOrProperties === "object") {
140    properties = styleOrProperties;
141  }
142
143  let size = fontSizes[properties?.size || "sm"];
144  let color = properties?.color || style.foreground;
145
146  return {
147    family: fontFamilies[fontFamily],
148    ...properties,
149    color,
150    size,
151  };
152}
153
154export interface Border {
155  color: string;
156  width: number;
157  top?: boolean;
158  bottom?: boolean;
159  left?: boolean;
160  right?: boolean;
161  overlay?: boolean;
162}
163
164export interface BorderProperties {
165  width?: number;
166  top?: boolean;
167  bottom?: boolean;
168  left?: boolean;
169  right?: boolean;
170  overlay?: boolean;
171}
172
173export function border(
174  layer: Layer,
175  styleSet: StyleSets,
176  style: Styles,
177  properties?: BorderProperties
178): Border;
179export function border(
180  layer: Layer,
181  styleSet: StyleSets,
182  properties?: BorderProperties
183): Border;
184export function border(
185  layer: Layer,
186  style: Styles,
187  properties?: BorderProperties
188): Border;
189export function border(layer: Layer, properties?: BorderProperties): Border;
190export function border(
191  layer: Layer,
192  styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
193  styleOrProperties?: Styles | BorderProperties,
194  properties?: BorderProperties
195): Border {
196  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
197
198  if (typeof styleSetStyleOrProperties === "object") {
199    properties = styleSetStyleOrProperties;
200  }
201  if (typeof styleOrProperties === "object") {
202    properties = styleOrProperties;
203  }
204
205  return {
206    color: style.border,
207    width: 1,
208    ...properties,
209  };
210}