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}
 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
127  if (typeof styleSetStyleOrProperties === "object") {
128    properties = styleSetStyleOrProperties;
129  }
130  if (typeof styleOrProperties === "object") {
131    properties = styleOrProperties;
132  }
133
134  let size = fontSizes[properties?.size || "sm"];
135
136  return {
137    family: fontFamilies[fontFamily],
138    color: style.foreground,
139    ...properties,
140    size,
141  };
142}
143
144export interface Border {
145  color: string;
146  width: number;
147  top?: boolean;
148  bottom?: boolean;
149  left?: boolean;
150  right?: boolean;
151  overlay?: boolean;
152}
153
154export interface BorderProperties {
155  width?: number;
156  top?: boolean;
157  bottom?: boolean;
158  left?: boolean;
159  right?: boolean;
160  overlay?: boolean;
161}
162
163export function border(
164  layer: Layer,
165  styleSet: StyleSets,
166  style: Styles,
167  properties?: BorderProperties
168): Border;
169export function border(
170  layer: Layer,
171  styleSet: StyleSets,
172  properties?: BorderProperties
173): Border;
174export function border(
175  layer: Layer,
176  style: Styles,
177  properties?: BorderProperties
178): Border;
179export function border(layer: Layer, properties?: BorderProperties): Border;
180export function border(
181  layer: Layer,
182  styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
183  styleOrProperties?: Styles | BorderProperties,
184  properties?: BorderProperties
185): Border {
186  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
187
188  if (typeof styleSetStyleOrProperties === "object") {
189    properties = styleSetStyleOrProperties;
190  }
191  if (typeof styleOrProperties === "object") {
192    properties = styleOrProperties;
193  }
194
195  return {
196    color: style.border,
197    width: 1,
198    ...properties,
199  };
200}