altair-graphql-core/build/theme/css.js

Several of the core logic for altair graphql client

import lightTheme from './defaults/light';
import darkTheme from './defaults/dark';
import { createTheme, hexToRgbStr } from './theme';
const COLOR_VARS = {
    // Base colors
    'black-color': (t) => t['color.black'],
    'dark-grey-color': (t) => t['color.darkGray'],
    'grey-color': (t) => t['color.gray'],
    'light-grey-color': (t) => t['color.lightGray'],
    'white-color': (t) => t['color.white'],
    'green-color': (t) => t['color.green'],
    'blue-color': (t) => t['color.blue'],
    'cerise-color': (t) => t['color.cerise'],
    'red-color': (t) => t['color.red'],
    'rose-color': (t) => t['color.rose'],
    'orange-color': (t) => t['color.orange'],
    'yellow-color': (t) => t['color.yellow'],
    'light-red-color': (t) => t['color.lightRed'],
    'dark-purple-color': (t) => t['color.darkPurple'],
    'primary-color': (t) => t['color.primary'],
    'secondary-color': (t) => t['color.secondary'],
    'tertiary-color': (t) => t['color.tertiary'],
    'theme-bg-color': (t) => t['color.bg'],
    'theme-off-bg-color': (t) => t['color.offBg'],
    'theme-font-color': (t) => t['color.font'],
    'theme-off-font-color': (t) => t['color.offFont'],
    'theme-border-color': (t) => t['color.border'],
    'theme-off-border-color': (t) => t['color.offBorder'],
    'header-bg-color': (t) => t['color.headerBg'] || t['color.offBg'],
    'editor-comment-color': (t) => t['color.editor.comment'],
    'editor-string-color': (t) => t['color.editor.string'],
    'editor-number-color': (t) => t['color.editor.number'],
    'editor-variable-color': (t) => t['color.editor.variable'],
    'editor-attribute-color': (t) => t['color.editor.attribute'],
    'editor-keyword-color': (t) => t['color.editor.keyword'],
    'editor-atom-color': (t) => t['color.editor.atom'],
    'editor-property-color': (t) => t['color.editor.property'],
    'editor-punctuation-color': (t) => t['color.editor.punctuation'],
    'editor-cursor-color': (t) => t['color.editor.cursor'],
    'editor-def-color': (t) => t['color.editor.definition'],
    'editor-builtin-color': (t) => t['color.editor.builtin'],
};
const RGB_VARS = {
    'rgb-black': (t) => hexToRgbStr(t['color.black']),
    'rgb-dark-grey': (t) => hexToRgbStr(t['color.darkGray']),
    'rgb-grey': (t) => hexToRgbStr(t['color.gray']),
    'rgb-light-grey': (t) => hexToRgbStr(t['color.lightGray']),
    'rgb-white': (t) => hexToRgbStr(t['color.white']),
    'rgb-green': (t) => hexToRgbStr(t['color.green']),
    'rgb-blue': (t) => hexToRgbStr(t['color.blue']),
    'rgb-cerise': (t) => hexToRgbStr(t['color.cerise']),
    'rgb-red': (t) => hexToRgbStr(t['color.red']),
    'rgb-rose': (t) => hexToRgbStr(t['color.rose']),
    'rgb-orange': (t) => hexToRgbStr(t['color.orange']),
    'rgb-yellow': (t) => hexToRgbStr(t['color.yellow']),
    'rgb-light-red': (t) => hexToRgbStr(t['color.lightRed']),
    'rgb-dark-purple': (t) => hexToRgbStr(t['color.darkPurple']),
    'rgb-primary': (t) => hexToRgbStr(t['color.primary']),
    'rgb-secondary': (t) => hexToRgbStr(t['color.secondary']),
    'rgb-tertiary': (t) => hexToRgbStr(t['color.tertiary']),
    'rgb-theme-bg': (t) => hexToRgbStr(t['color.bg']),
    'rgb-theme-off-bg': (t) => hexToRgbStr(t['color.offBg']),
    'rgb-theme-font': (t) => hexToRgbStr(t['color.font']),
    'rgb-theme-off-font': (t) => hexToRgbStr(t['color.offFont']),
    'rgb-theme-border': (t) => hexToRgbStr(t['color.border']),
    'rgb-theme-off-border': (t) => hexToRgbStr(t['color.offBorder']),
    'rgb-header-bg': (t) => hexToRgbStr(t['color.headerBg'] || t['color.offBg']),
    // ... other rgb values
};
const createVars = (mapping, theme) => Object.entries(mapping)
    .map(([key, getValue]) => `--${key}: ${getValue(theme)};`)
    .join('\n    ');
const asCSSVariablesString = (theme) => {
    return `
  :root {
    --shadow-bg: rgba(${hexToRgbStr(theme['shadow.color'])}, ${theme['shadow.opacity']});

    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 'Helvetica Neue', Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --editor-font-family: ${theme['fontFamily.code']};
    --editor-font-size: ${theme['fontSize.code']};

    --baseline-size: ${theme['fontSize.base']};
    --rem-base: ${theme['fontSize.remBase']};
    --body-font-size: ${theme['fontSize.body']};

    --app-easing: ${theme.easing};

    ${createVars(COLOR_VARS, theme)}
    ${createVars(RGB_VARS, theme)}
  }
  `;
};
export const getCSS = (appTheme, appDarkTheme, accentColor) => {
    const extraTheme = accentColor
        ? {
            'color.primary': accentColor,
        }
        : {};
    if (appTheme && appDarkTheme) {
        return `
      ${asCSSVariablesString(createTheme(appTheme, extraTheme))}
      @media (prefers-color-scheme: dark) {
        ${asCSSVariablesString(createTheme(appDarkTheme, extraTheme))}
      }
    `;
    }
    if (!appTheme || appTheme.isSystem) {
        return `
      ${asCSSVariablesString(createTheme(lightTheme, appTheme, extraTheme))}
      @media (prefers-color-scheme: dark) {
        ${asCSSVariablesString(createTheme(darkTheme, appTheme, extraTheme))}
      }
    `;
    }
    return asCSSVariablesString(createTheme(appTheme, extraTheme));
};
//# sourceMappingURL=css.js.map