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    "info",
 10    "positive",
 11    "warning",
 12    "negative",
 13  ].includes(key);
 14}
 15function isStyle(key: any): key is Styles {
 16  return ["default", "active", "disabled", "hovered", "pressed"].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}
 93
 94export function text(
 95  layer: Layer,
 96  fontFamily: keyof typeof fontFamilies,
 97  styleSet: StyleSets,
 98  style: Styles,
 99  properties?: TextProperties
100): Text;
101export function text(
102  layer: Layer,
103  fontFamily: keyof typeof fontFamilies,
104  styleSet: StyleSets,
105  properties?: TextProperties
106): Text;
107export function text(
108  layer: Layer,
109  fontFamily: keyof typeof fontFamilies,
110  style: Styles,
111  properties?: TextProperties
112): Text;
113export function text(
114  layer: Layer,
115  fontFamily: keyof typeof fontFamilies,
116  properties?: TextProperties
117): Text;
118export function text(
119  layer: Layer,
120  fontFamily: keyof typeof fontFamilies,
121  styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
122  styleOrProperties?: Styles | TextProperties,
123  properties?: TextProperties
124) {
125  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
126  let size = fontSizes[properties?.size || "sm"];
127
128  if (typeof styleSetStyleOrProperties === "object") {
129    properties = styleSetStyleOrProperties;
130  }
131  if (typeof styleOrProperties === "object") {
132    properties = styleOrProperties;
133  }
134
135  return {
136    family: fontFamilies[fontFamily],
137    color: style.foreground,
138    ...properties,
139    size,
140  };
141}
142
143export interface Border {
144  color: string;
145  width: number;
146  top?: boolean;
147  bottom?: boolean;
148  left?: boolean;
149  right?: boolean;
150  overlay?: boolean;
151}
152
153export interface BorderProperties {
154  width?: number;
155  top?: boolean;
156  bottom?: boolean;
157  left?: boolean;
158  right?: boolean;
159  overlay?: boolean;
160}
161
162export function border(
163  layer: Layer,
164  styleSet: StyleSets,
165  style: Styles,
166  properties?: BorderProperties
167): Border;
168export function border(
169  layer: Layer,
170  styleSet: StyleSets,
171  properties?: BorderProperties
172): Border;
173export function border(
174  layer: Layer,
175  style: Styles,
176  properties?: BorderProperties
177): Border;
178export function border(layer: Layer, properties?: BorderProperties): Border;
179export function border(
180  layer: Layer,
181  styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
182  styleOrProperties?: Styles | BorderProperties,
183  properties?: BorderProperties
184): Border {
185  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
186
187  if (typeof styleSetStyleOrProperties === "object") {
188    properties = styleSetStyleOrProperties;
189  }
190  if (typeof styleOrProperties === "object") {
191    properties = styleOrProperties;
192  }
193
194  return {
195    color: style.border,
196    width: 1,
197    ...properties,
198  };
199}