From 987d2bbb4c3dafd13c253ddbb8bc88c97aec4fb0 Mon Sep 17 00:00:00 2001 From: Samuel Imolorhe Date: Sat, 9 Nov 2024 04:50:57 +0100 Subject: [PATCH] irefactor based on feedback --- packages/altair-core/src/theme/css.ts | 157 ++++++++++++++------------ 1 file changed, 86 insertions(+), 71 deletions(-) diff --git a/packages/altair-core/src/theme/css.ts b/packages/altair-core/src/theme/css.ts index 3095437152..76dd420278 100644 --- a/packages/altair-core/src/theme/css.ts +++ b/packages/altair-core/src/theme/css.ts @@ -2,87 +2,102 @@ import lightTheme from './defaults/light'; import darkTheme from './defaults/dark'; import { ICustomTheme, ITheme, createTheme, hexToRgbStr } from './theme'; -const asCSSVariablesString = (theme: ITheme) => { - return ` - :root { - --baseline-size: ${theme.type.fontSize.base}; - --rem-base: ${theme.type.fontSize.remBase}; - --body-font-size: ${theme.type.fontSize.body}; +const COLOR_VARS = { + // Base colors + 'black-color': (t: ITheme) => t.colors.black, + 'dark-grey-color': (t: ITheme) => t.colors.darkGray, + 'grey-color': (t: ITheme) => t.colors.gray, + 'light-grey-color': (t: ITheme) => t.colors.lightGray, + 'white-color': (t: ITheme) => t.colors.white, + 'green-color': (t: ITheme) => t.colors.green, + 'blue-color': (t: ITheme) => t.colors.blue, + 'cerise-color': (t: ITheme) => t.colors.cerise, + 'red-color': (t: ITheme) => t.colors.red, + 'rose-color': (t: ITheme) => t.colors.rose, + 'orange-color': (t: ITheme) => t.colors.orange, + 'yellow-color': (t: ITheme) => t.colors.yellow, + 'light-red-color': (t: ITheme) => t.colors.lightRed, + 'dark-purple-color': (t: ITheme) => t.colors.darkPurple, - --app-easing: ${theme.easing}; + 'primary-color': (t: ITheme) => t.colors.primary, + 'secondary-color': (t: ITheme) => t.colors.secondary, + 'tertiary-color': (t: ITheme) => t.colors.tertiary, + + 'theme-bg-color': (t: ITheme) => t.colors.bg, + 'theme-off-bg-color': (t: ITheme) => t.colors.offBg, + 'theme-font-color': (t: ITheme) => t.colors.font, + 'theme-off-font-color': (t: ITheme) => t.colors.offFont, + 'theme-border-color': (t: ITheme) => t.colors.border, + 'theme-off-border-color': (t: ITheme) => t.colors.offBorder, + 'header-bg-color': (t: ITheme) => t.colors.headerBg || t.colors.offBg, + + 'editor-comment-color': (t: ITheme) => t.editor.colors.comment, + 'editor-string-color': (t: ITheme) => t.editor.colors.string, + 'editor-number-color': (t: ITheme) => t.editor.colors.number, + 'editor-variable-color': (t: ITheme) => t.editor.colors.variable, + 'editor-attribute-color': (t: ITheme) => t.editor.colors.attribute, + 'editor-keyword-color': (t: ITheme) => t.editor.colors.keyword, + 'editor-atom-color': (t: ITheme) => t.editor.colors.atom, + 'editor-property-color': (t: ITheme) => t.editor.colors.property, + 'editor-punctuation-color': (t: ITheme) => t.editor.colors.punctuation, + 'editor-cursor-color': (t: ITheme) => t.editor.colors.cursor, + 'editor-def-color': (t: ITheme) => t.editor.colors.definition, + 'editor-builtin-color': (t: ITheme) => t.editor.colors.builtin, +} as const; + +const RGB_VARS = { + 'rgb-black': (t: ITheme) => hexToRgbStr(t.colors.black), + 'rgb-dark-grey': (t: ITheme) => hexToRgbStr(t.colors.darkGray), + 'rgb-grey': (t: ITheme) => hexToRgbStr(t.colors.gray), + 'rgb-light-grey': (t: ITheme) => hexToRgbStr(t.colors.lightGray), + 'rgb-white': (t: ITheme) => hexToRgbStr(t.colors.white), + 'rgb-green': (t: ITheme) => hexToRgbStr(t.colors.green), + 'rgb-blue': (t: ITheme) => hexToRgbStr(t.colors.blue), + 'rgb-cerise': (t: ITheme) => hexToRgbStr(t.colors.cerise), + 'rgb-red': (t: ITheme) => hexToRgbStr(t.colors.red), + 'rgb-rose': (t: ITheme) => hexToRgbStr(t.colors.rose), + 'rgb-orange': (t: ITheme) => hexToRgbStr(t.colors.orange), + 'rgb-yellow': (t: ITheme) => hexToRgbStr(t.colors.yellow), + 'rgb-light-red': (t: ITheme) => hexToRgbStr(t.colors.lightRed), + 'rgb-dark-purple': (t: ITheme) => hexToRgbStr(t.colors.darkPurple), + + 'rgb-primary': (t: ITheme) => hexToRgbStr(t.colors.primary), + 'rgb-secondary': (t: ITheme) => hexToRgbStr(t.colors.secondary), + 'rgb-tertiary': (t: ITheme) => hexToRgbStr(t.colors.tertiary), - --black-color: ${theme.colors.black}; - --dark-grey-color: ${theme.colors.darkGray}; - --grey-color: ${theme.colors.gray}; - --light-grey-color: ${theme.colors.lightGray}; - --white-color: ${theme.colors.white}; - --green-color: ${theme.colors.green}; - --blue-color: ${theme.colors.blue}; - --cerise-color: ${theme.colors.cerise}; - --red-color: ${theme.colors.red}; - --rose-color: ${theme.colors.rose}; - --orange-color: ${theme.colors.orange}; - --yellow-color: ${theme.colors.yellow}; - --light-red-color: ${theme.colors.lightRed}; - --dark-purple-color: ${theme.colors.darkPurple}; - - --primary-color: ${theme.colors.primary}; - --secondary-color: ${theme.colors.secondary}; - --tertiary-color: ${theme.colors.tertiary}; + 'rgb-theme-bg': (t: ITheme) => hexToRgbStr(t.colors.bg), + 'rgb-theme-off-bg': (t: ITheme) => hexToRgbStr(t.colors.offBg), + 'rgb-theme-font': (t: ITheme) => hexToRgbStr(t.colors.font), + 'rgb-theme-off-font': (t: ITheme) => hexToRgbStr(t.colors.offFont), + 'rgb-theme-border': (t: ITheme) => hexToRgbStr(t.colors.border), + 'rgb-theme-off-border': (t: ITheme) => hexToRgbStr(t.colors.offBorder), + 'rgb-header-bg': (t: ITheme) => hexToRgbStr(t.colors.headerBg || t.colors.offBg), + // ... other rgb values +} as const; +const createVars = (mapping: Record string>, theme: ITheme) => + Object.entries(mapping) + .map(([key, getValue]) => `--${key}: ${getValue(theme)};`) + .join('\n '); + +const asCSSVariablesString = (theme: ITheme) => { + 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"; - --rgb-black: ${hexToRgbStr(theme.colors.black)}; - --rgb-dark-grey: ${hexToRgbStr(theme.colors.darkGray)}; - --rgb-grey: ${hexToRgbStr(theme.colors.gray)}; - --rgb-light-grey: ${hexToRgbStr(theme.colors.lightGray)}; - --rgb-white: ${hexToRgbStr(theme.colors.white)}; - --rgb-green: ${hexToRgbStr(theme.colors.green)}; - --rgb-blue: ${hexToRgbStr(theme.colors.blue)}; - --rgb-cerise: ${hexToRgbStr(theme.colors.cerise)}; - --rgb-red: ${hexToRgbStr(theme.colors.red)}; - --rgb-orange: ${hexToRgbStr(theme.colors.orange)}; - --rgb-yellow: ${hexToRgbStr(theme.colors.yellow)}; - --rgb-light-red: ${hexToRgbStr(theme.colors.lightRed)}; - --rgb-dark-purple: ${hexToRgbStr(theme.colors.darkPurple)}; - --editor-font-family: ${theme.editor.fontFamily.default}; --editor-font-size: ${theme.editor.fontSize}; - --theme-bg-color: ${theme.colors.bg}; - --theme-off-bg-color: ${theme.colors.offBg}; - --theme-font-color: ${theme.colors.font}; - --theme-off-font-color: ${theme.colors.offFont}; - --theme-border-color: ${theme.colors.border}; - --theme-off-border-color: ${theme.colors.offBorder}; - --header-bg-color: ${theme.colors.headerBg || theme.colors.offBg}; - - --rgb-primary: ${hexToRgbStr(theme.colors.primary)}; - --rgb-secondary: ${hexToRgbStr(theme.colors.secondary)}; - --rgb-tertiary: ${hexToRgbStr(theme.colors.tertiary)}; - - --rgb-theme-bg: ${hexToRgbStr(theme.colors.bg)}; - --rgb-theme-off-bg: ${hexToRgbStr(theme.colors.offBg)}; - --rgb-theme-font: ${hexToRgbStr(theme.colors.font)}; - --rgb-theme-off-font: ${hexToRgbStr(theme.colors.offFont)}; - --rgb-theme-border: ${hexToRgbStr(theme.colors.border)}; - --rgb-theme-off-border: ${hexToRgbStr(theme.colors.offBorder)}; - --rgb-header-bg: ${hexToRgbStr(theme.colors.headerBg || theme.colors.offBg)}; - - --editor-comment-color: ${theme.editor.colors.comment}; - --editor-string-color: ${theme.editor.colors.string}; - --editor-number-color: ${theme.editor.colors.number}; - --editor-variable-color: ${theme.editor.colors.variable}; - --editor-attribute-color: ${theme.editor.colors.attribute}; - --editor-keyword-color: ${theme.editor.colors.keyword}; - --editor-atom-color: ${theme.editor.colors.atom}; - --editor-property-color: ${theme.editor.colors.property}; - --editor-punctuation-color: ${theme.editor.colors.punctuation}; - --editor-cursor-color: ${theme.editor.colors.cursor}; - --editor-def-color: ${theme.editor.colors.definition}; - --editor-builtin-color: ${theme.editor.colors.builtin}; + --baseline-size: ${theme.type.fontSize.base}; + --rem-base: ${theme.type.fontSize.remBase}; + --body-font-size: ${theme.type.fontSize.body}; + + --app-easing: ${theme.easing}; + + ${createVars(COLOR_VARS, theme)} + ${createVars(RGB_VARS, theme)} } `; };