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