@redocly/theme/lib/core/utils/theme-helpers.js

Shared UI components lib

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getTypographyCssRulesByComponentName = getTypographyCssRulesByComponentName;
exports.typography = typography;
exports.generateCodeBlockTokens = generateCodeBlockTokens;
const styled_components_1 = require("styled-components");
var Token;
(function (Token) {
    Token["Comment"] = "comment";
    Token["Prolog"] = "prolog";
    Token["Doctype"] = "doctype";
    Token["Cdata"] = "cdata";
    Token["Punctuation"] = "punctuation";
    Token["Property"] = "property";
    Token["Tag"] = "tag";
    Token["Number"] = "number";
    Token["Constant"] = "constant";
    Token["Symbol"] = "symbol";
    Token["Boolean"] = "boolean";
    Token["Selector"] = "selector";
    Token["String"] = "string";
    Token["Char"] = "char";
    Token["Builtin"] = "builtin";
    Token["Inserted"] = "inserted";
    Token["Operator"] = "operator";
    Token["Entity"] = "entity";
    Token["Url"] = "url";
    Token["Variable"] = "variable";
    Token["Atrule"] = "atrule";
    Token["AttrValue"] = "attr-value";
    Token["AttrName"] = "attr-name";
    Token["Keyword"] = "keyword";
    Token["Regex"] = "regex";
    Token["Important"] = "important";
    Token["Bold"] = "bold";
    Token["Italic"] = "italic";
    Token["Deleted"] = "deleted";
    Token["ClassName"] = "class-name";
    Token["Function"] = "function";
})(Token || (Token = {}));
const typographyProperties = Object.entries({
    fontSize: 'font-size',
    fontWeight: 'font-weight',
    fontFamily: 'font-family',
    lineHeight: 'line-height',
    color: 'text-color',
    textTransform: 'text-transform',
});
function getTypographyCssRulesByComponentName(componentName, fallbackName) {
    const result = {};
    for (const [styledPropertyName, cssPropertyName] of typographyProperties) {
        const cssVariable = `--${componentName}-${cssPropertyName}`;
        const fallbackVariable = fallbackName ? `,var(--${fallbackName}-${cssPropertyName})` : '';
        result[styledPropertyName] = `var(${cssVariable}${fallbackVariable})`;
    }
    return result;
}
function typography(componentName, fallbackName) {
    return (0, styled_components_1.css) `
    ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
  `;
}
function generateCodeBlockTokens() {
    let res = '';
    for (const token of Object.values(Token)) {
        const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
        res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
    }
    return (0, styled_components_1.css) `
    pre& {
      color: var(--code-block-tokens-default-color);
    }
    ${res}
  `;
}
//# sourceMappingURL=theme-helpers.js.map