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}
102
103export function text(
104    layer: Layer,
105    fontFamily: keyof typeof fontFamilies,
106    styleSet: StyleSets,
107    style: Styles,
108    properties?: TextProperties
109): Text
110export function text(
111    layer: Layer,
112    fontFamily: keyof typeof fontFamilies,
113    styleSet: StyleSets,
114    properties?: TextProperties
115): Text
116export function text(
117    layer: Layer,
118    fontFamily: keyof typeof fontFamilies,
119    style: Styles,
120    properties?: TextProperties
121): Text
122export function text(
123    layer: Layer,
124    fontFamily: keyof typeof fontFamilies,
125    properties?: TextProperties
126): Text
127export function text(
128    layer: Layer,
129    fontFamily: keyof typeof fontFamilies,
130    styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
131    styleOrProperties?: Styles | TextProperties,
132    properties?: TextProperties
133) {
134    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
135
136    if (typeof styleSetStyleOrProperties === "object") {
137        properties = styleSetStyleOrProperties
138    }
139    if (typeof styleOrProperties === "object") {
140        properties = styleOrProperties
141    }
142
143    let size = fontSizes[properties?.size || "sm"]
144    let color = properties?.color || style.foreground
145
146    return {
147        family: fontFamilies[fontFamily],
148        ...properties,
149        color,
150        size,
151    }
152}
153
154export interface Border {
155    color: string
156    width: number
157    top?: boolean
158    bottom?: boolean
159    left?: boolean
160    right?: boolean
161    overlay?: boolean
162}
163
164export interface BorderProperties {
165    width?: number
166    top?: boolean
167    bottom?: boolean
168    left?: boolean
169    right?: boolean
170    overlay?: boolean
171}
172
173export function border(
174    layer: Layer,
175    styleSet: StyleSets,
176    style: Styles,
177    properties?: BorderProperties
178): Border
179export function border(
180    layer: Layer,
181    styleSet: StyleSets,
182    properties?: BorderProperties
183): Border
184export function border(
185    layer: Layer,
186    style: Styles,
187    properties?: BorderProperties
188): Border
189export function border(layer: Layer, properties?: BorderProperties): Border
190export function border(
191    layer: Layer,
192    styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
193    styleOrProperties?: Styles | BorderProperties,
194    properties?: BorderProperties
195): Border {
196    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
197
198    if (typeof styleSetStyleOrProperties === "object") {
199        properties = styleSetStyleOrProperties
200    }
201    if (typeof styleOrProperties === "object") {
202        properties = styleOrProperties
203    }
204
205    return {
206        color: style.border,
207        width: 1,
208        ...properties,
209    }
210}