zed/styles/src/styleTree/components.ts

import { fontFamilies, fontSizes, FontWeight } from "../common";
import { Layer, Styles, StyleSets, Style } from "../themes/common/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 {
  family: keyof typeof fontFamilies;
  color: string;
  size: number;
  weight?: FontWeight;
  underline?: boolean;
}

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

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,
  };
}