ZIm/styles/src/styleTree/components.ts

import { fontFamilies, fontSizes, FontWeight } from "../common"
import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"

function isStyleSet(key: any): key is StyleSets {
    return [
        "base",
        "variant",
        "on",
        "accent",
        "positive",
        "warning",
        "negative",
    ].includes(key)
}

function isStyle(key: any): key is Styles {
    return [
        "default",
        "active",
        "disabled",
        "hovered",
        "pressed",
        "inverted",
    ].includes(key)
}
function getStyle(
    layer: Layer,
    possibleStyleSetOrStyle?: any,
    possibleStyle?: any
): Style {
    let styleSet: StyleSets = "base"
    let style: Styles = "default"
    if (isStyleSet(possibleStyleSetOrStyle)) {
        styleSet = possibleStyleSetOrStyle
    } else if (isStyle(possibleStyleSetOrStyle)) {
        style = possibleStyleSetOrStyle
    }

    if (isStyle(possibleStyle)) {
        style = possibleStyle
    }

    return layer[styleSet][style]
}

export function background(layer: Layer, style?: Styles): string
export function background(
    layer: Layer,
    styleSet?: StyleSets,
    style?: Styles
): string
export function background(
    layer: Layer,
    styleSetOrStyles?: StyleSets | Styles,
    style?: Styles
): string {
    return getStyle(layer, styleSetOrStyles, style).background
}

export function borderColor(layer: Layer, style?: Styles): string
export function borderColor(
    layer: Layer,
    styleSet?: StyleSets,
    style?: Styles
): string
export function borderColor(
    layer: Layer,
    styleSetOrStyles?: StyleSets | Styles,
    style?: Styles
): string {
    return getStyle(layer, styleSetOrStyles, style).border
}

export function foreground(layer: Layer, style?: Styles): string
export function foreground(
    layer: Layer,
    styleSet?: StyleSets,
    style?: Styles
): string
export function foreground(
    layer: Layer,
    styleSetOrStyles?: StyleSets | Styles,
    style?: Styles
): string {
    return getStyle(layer, styleSetOrStyles, style).foreground
}

interface Text extends Object {
    family: keyof typeof fontFamilies
    color: string
    size: number
    weight?: FontWeight
    underline?: boolean
}

export interface TextProperties {
    size?: keyof typeof fontSizes
    weight?: FontWeight
    underline?: boolean
    color?: string
    features?: FontFeatures
}

interface FontFeatures {
    /** Contextual Alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns */
    calt?: boolean
    /** Case-Sensitive Forms: Shifts various punctuation marks up to a position that works better with all-capital sequences */
    case?: boolean
    /** Capital Spacing: Adjusts inter-glyph spacing for all-capital text */
    cpsp?: boolean
    /** Fractions: Replaces figures separated by a slash with diagonal fractions */
    frac?: boolean
    /** Standard Ligatures: Replaces a sequence of glyphs with a single glyph which is preferred for typographic purposes */
    liga?: boolean
    /** Oldstyle Figures: Changes selected figures from the default or lining style to oldstyle form. */
    onum?: boolean
    /** Ordinals: Replaces default alphabetic glyphs with the corresponding ordinal forms for use after figures */
    ordn?: boolean
    /** Proportional Figures: Replaces figure glyphs set on uniform (tabular) widths with corresponding glyphs set on proportional widths */
    pnum?: boolean
    /** Stylistic set 01 */
    ss01?: boolean
    /** Stylistic set 02 */
    ss02?: boolean
    /** Stylistic set 03 */
    ss03?: boolean
    /** Stylistic set 04 */
    ss04?: boolean
    /** Stylistic set 05 */
    ss05?: boolean
    /** Stylistic set 06 */
    ss06?: boolean
    /** Stylistic set 07 */
    ss07?: boolean
    /** Stylistic set 08 */
    ss08?: boolean
    /** Stylistic set 09 */
    ss09?: boolean
    /** Stylistic set 10 */
    ss10?: boolean
    /** Stylistic set 11 */
    ss11?: boolean
    /** Stylistic set 12 */
    ss12?: boolean
    /** Stylistic set 13 */
    ss13?: boolean
    /** Stylistic set 14 */
    ss14?: boolean
    /** Stylistic set 15 */
    ss15?: boolean
    /** Stylistic set 16 */
    ss16?: boolean
    /** Stylistic set 17 */
    ss17?: boolean
    /** Stylistic set 18 */
    ss18?: boolean
    /** Stylistic set 19 */
    ss19?: boolean
    /** Stylistic set 20 */
    ss20?: boolean
    /** Subscript: Replaces default glyphs with subscript glyphs */
    subs?: boolean
    /** Superscript: Replaces default glyphs with superscript glyphs */
    sups?: boolean
    /** Swash: Replaces default glyphs with swash glyphs for stylistic purposes */
    swsh?: boolean
    /** Titling: Replaces default glyphs with titling glyphs for use in large-size settings */
    titl?: boolean
    /** Tabular Figures: Replaces figure glyphs set on proportional widths with corresponding glyphs set on uniform (tabular) widths */
    tnum?: boolean
    /** Slashed Zero: Replaces default zero with a slashed zero for better distinction between "0" and "O" */
    zero?: boolean
}

export function text(
    layer: Layer,
    fontFamily: keyof typeof fontFamilies,
    styleSet: StyleSets,
    style: Styles,
    properties?: TextProperties
): Text
export function text(
    layer: Layer,
    fontFamily: keyof typeof fontFamilies,
    styleSet: StyleSets,
    properties?: TextProperties
): Text
export function text(
    layer: Layer,
    fontFamily: keyof typeof fontFamilies,
    style: Styles,
    properties?: TextProperties
): Text
export function text(
    layer: Layer,
    fontFamily: keyof typeof fontFamilies,
    properties?: TextProperties
): Text
export function text(
    layer: Layer,
    fontFamily: keyof typeof fontFamilies,
    styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
    styleOrProperties?: Styles | TextProperties,
    properties?: TextProperties
) {
    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)

    if (typeof styleSetStyleOrProperties === "object") {
        properties = styleSetStyleOrProperties
    }
    if (typeof styleOrProperties === "object") {
        properties = styleOrProperties
    }

    let size = fontSizes[properties?.size || "sm"]
    let color = properties?.color || style.foreground

    return {
        family: fontFamilies[fontFamily],
        ...properties,
        color,
        size,
    }
}

export interface Border {
    color: string
    width: number
    top?: boolean
    bottom?: boolean
    left?: boolean
    right?: boolean
    overlay?: boolean
}

export interface BorderProperties {
    width?: number
    top?: boolean
    bottom?: boolean
    left?: boolean
    right?: boolean
    overlay?: boolean
}

export function border(
    layer: Layer,
    styleSet: StyleSets,
    style: Styles,
    properties?: BorderProperties
): Border
export function border(
    layer: Layer,
    styleSet: StyleSets,
    properties?: BorderProperties
): Border
export function border(
    layer: Layer,
    style: Styles,
    properties?: BorderProperties
): Border
export function border(layer: Layer, properties?: BorderProperties): Border
export function border(
    layer: Layer,
    styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
    styleOrProperties?: Styles | BorderProperties,
    properties?: BorderProperties
): Border {
    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)

    if (typeof styleSetStyleOrProperties === "object") {
        properties = styleSetStyleOrProperties
    }
    if (typeof styleOrProperties === "object") {
        properties = styleOrProperties
    }

    return {
        color: style.border,
        width: 1,
        ...properties,
    }
}

export function svg(
    color: string,
    asset: String,
    width: Number,
    height: Number
) {
    return {
        color,
        asset,
        dimensions: {
            width,
            height,
        },
    }
}