rio/frontend/code/cssUtils.ts

import { Color, AnyFill, TextStyle } from './dataModels';

export function colorToCssString(color: Color): string {
    const [r, g, b, a] = color;
    return `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`;
}

function gradientToCssString(
    angleDegrees: number,
    stops: [Color, number][]
): string {
    let stopStrings: string[] = [];

    for (let i = 0; i < stops.length; i++) {
        let color = stops[i][0];
        let position = stops[i][1];
        stopStrings.push(`${colorToCssString(color)} ${position * 100}%`);
    }

    return `linear-gradient(${90 - angleDegrees}deg, ${stopStrings.join(
        ', '
    )})`;
}

export function fillToCss(fill: AnyFill): {
    background: string;
    'backdrop-filter': string;
} {
    let background: string;
    let backdropFilter: string = 'none';

    switch (fill.type) {
        // Solid Color
        case 'solid':
            background = colorToCssString(fill.color);
            break;

        // Linear Gradient
        case 'linearGradient':
            if (fill.stops.length === 1) {
                background = colorToCssString(fill.stops[0][0]);
            } else {
                background = gradientToCssString(fill.angleDegrees, fill.stops);
            }
            break;

        // Image
        case 'image':
            const cssUrl = `url('${fill.imageUrl}')`;
            switch (fill.fillMode) {
                case 'fit':
                    background = `${cssUrl} center/contain no-repeat`;
                    break;
                case 'stretch':
                    background = `${cssUrl} top left / 100% 100%`;
                    break;
                case 'zoom':
                    background = `${cssUrl} center/cover no-repeat`;
                    break;
                default:
                    // Invalid fill mode
                    // @ts-ignore
                    throw `Invalid fill mode for image fill: ${fill.type}`;
            }
            break;

        // Frosted Glass
        case 'frostedGlass':
            background = colorToCssString(fill.color);
            backdropFilter = `blur(${fill.blurSize}rem)`;
            break;

        default:
            // Invalid fill type
            // @ts-ignore
            throw `Invalid fill type: ${fill.type}`;
    }

    return {
        background: background,
        'backdrop-filter': backdropFilter,
    };
}

export function textStyleToCss(
    style: 'heading1' | 'heading2' | 'heading3' | 'text' | 'dim' | TextStyle
): {
    'font-family': string;
    'font-size': string;
    'font-weight': string;
    'font-style': string;
    'text-decoration': string;
    'text-transform': string;
    color: string;
    background: string;
    '-webkit-background-clip': string;
    '-webkit-text-fill-color': string;
    opacity: string;
} {
    let fontFamily: string;
    let fontSize: string;
    let fontWeight: string;
    let fontStyle: string;
    let textDecoration: string;
    let textTransform: string;
    let color: string;
    let background: string;
    let backgroundClip: string;
    let textFillColor: string;
    let opacity: string;

    // `Dim` is the same as `text`, just with some opacity
    if (style === 'dim') {
        style = 'text';
        opacity = '0.4';
    } else {
        opacity = '1';
    }

    // Predefined style from theme
    if (typeof style === 'string') {
        let globalPrefix = `var(--rio-global-${style}-`;
        let localPrefix = `var(--rio-local-${style}-`;

        // Text fill
        color = localPrefix + 'color)';
        background = localPrefix + 'background)';
        backgroundClip = localPrefix + 'background-clip)';
        textFillColor = localPrefix + 'fill-color)';

        // Font weight. This is local so that buttons can make their label text
        // bold.
        fontWeight = localPrefix + 'font-weight)';

        // Others
        fontFamily = globalPrefix + 'font-name)';
        fontSize = globalPrefix + 'font-size)';
        fontStyle = globalPrefix + 'font-italic)';
        textDecoration = globalPrefix + 'underlined)';
        textTransform = globalPrefix + 'all-caps)';
    }

    // Explicitly defined style
    else {
        fontSize = style.fontSize + 'em';
        fontStyle = style.italic ? 'italic' : 'normal';
        fontWeight = style.fontWeight;
        textDecoration = style.underlined ? 'underline' : 'none';
        textTransform = style.allCaps ? 'uppercase' : 'none';

        // If no font family is provided, stick to the theme's.
        if (style.fontName === null) {
            fontFamily = 'inherit';
        } else {
            fontFamily = style.fontName;
        }

        // If no fill is provided, stick to the local text color. This allows
        // the user to have their text automatically adapt to different
        // themes/contexts.
        if (style.fill === null) {
            color = 'var(--rio-local-text-color)';
            background = 'var(--rio-local-text-background)';
            backgroundClip = 'var(--rio-local-text-background-clip)';
            textFillColor = 'var(--rio-local-text-fill-color)';
        }
        // Color?
        else if (Array.isArray(style.fill)) {
            color = colorToCssString(style.fill);
            background = 'none';
            backgroundClip = 'unset';
            textFillColor = 'unset';
        }
        // Solid fill, i.e. also a color
        else if (style.fill.type === 'solid') {
            color = colorToCssString(style.fill.color);
            background = 'none';
            backgroundClip = 'unset';
            textFillColor = 'unset';
        }
        // Anything else
        else {
            color = 'unset';
            const cssProps = fillToCss(style.fill);
            background = cssProps.background;
            // TODO: The `backdrop-filter` in `cssProps` is ignored because it
            // doesn't do what we want. (It isn't clipped to the text, it blurs
            // everything behind the element.) This means FrostedGlassFill
            // doesn't blur the background when used on text.
            backgroundClip = 'text';
            textFillColor = 'transparent';
        }
    }

    return {
        'font-family': fontFamily,
        'font-size': fontSize,
        'font-weight': fontWeight,
        'font-style': fontStyle,
        'text-decoration': textDecoration,
        'text-transform': textTransform,
        color: color,
        background: background,
        '-webkit-background-clip': backgroundClip,
        '-webkit-text-fill-color': textFillColor,
        opacity: opacity,
    };
}