Skip to content

Commit

Permalink
irefactor based on feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@imolorhe
imolorhe committed Nov 9, 2024
1 parent 6ba847e commit 987d2bb
Showing 1 changed file with 86 additions and 71 deletions.
157 changes: 86 additions & 71 deletions packages/altair-core/src/theme/css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, (t: ITheme) => 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)}
}
`;
};
Expand Down

0 comments on commit 987d2bb

Please sign in to comment.