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}