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