@redocly/theme/src/core/utils/theme-helpers.ts

Shared UI components lib

import { css } from 'styled-components';

import type { FlattenSimpleInterpolation } from 'styled-components';

enum Token {
  Comment = 'comment',
  Prolog = 'prolog',
  Doctype = 'doctype',
  Cdata = 'cdata',
  Punctuation = 'punctuation',
  Property = 'property',
  Tag = 'tag',
  Number = 'number',
  Constant = 'constant',
  Symbol = 'symbol',
  Boolean = 'boolean',
  Selector = 'selector',
  String = 'string',
  Char = 'char',
  Builtin = 'builtin',
  Inserted = 'inserted',
  Operator = 'operator',
  Entity = 'entity',
  Url = 'url',
  Variable = 'variable',
  Atrule = 'atrule',
  AttrValue = 'attr-value',
  AttrName = 'attr-name',
  Keyword = 'keyword',
  Regex = 'regex',
  Important = 'important',
  Bold = 'bold',
  Italic = 'italic',
  Deleted = 'deleted',
  ClassName = 'class-name',
  Function = 'function',
}

const typographyProperties = Object.entries({
  fontSize: 'font-size',
  fontWeight: 'font-weight',
  fontFamily: 'font-family',
  lineHeight: 'line-height',
  color: 'text-color',
  textTransform: 'text-transform',
});

export function getTypographyCssRulesByComponentName(
  componentName: string,
  fallbackName?: string,
): Record<string, string> {
  const result = {} as Record<string, string>;
  for (const [styledPropertyName, cssPropertyName] of typographyProperties) {
    const cssVariable = `--${componentName}-${cssPropertyName}`;
    const fallbackVariable = fallbackName ? `,var(--${fallbackName}-${cssPropertyName})` : '';

    result[styledPropertyName] = `var(${cssVariable}${fallbackVariable})`;
  }
  return result;
}

export function typography(
  componentName: string,
  fallbackName?: string,
): FlattenSimpleInterpolation {
  return css`
    ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
  `;
}

export function generateCodeBlockTokens(): FlattenSimpleInterpolation | string {
  let res = '';

  for (const token of Object.values(Token)) {
    const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
    res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
  }

  return css`
    pre& {
      color: var(--code-block-tokens-default-color);
    }
    ${res}
  `;
}