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