master-co / css

The CSS Language and Framework
https://css.master.co
MIT License
1.78k stars 41 forks source link

✨ Resolve config color values which may depend on the current theme #178

Open creart-jetsai opened 1 year ago

creart-jetsai commented 1 year ago

Description

MasterCSS v2's configuration enables us to create color tokens and use them in class names.

However, certain third-party libraries like ApexCharts only accept color values as chart options, not class names.

Maybe we can have an official API to resolve color values and some other values if available too.

creart-jetsai commented 1 year ago

Here is what I can do with current Master CSS instance.

const config: Config = {...}

const resolveColor = (colorName: string) => {
  const theme = document.documentElement.className;
  const color = css.colorThemesMap[colorName];
  const themeColor = color?.[theme];
  const defaultColor = color?.[''];
  return themeColor ?? defaultColor;
};

type CustomMasterCSS = MasterCSS & {
  resolveColor: typeof resolveColor;
};

export const css = new MasterCSS(config) as CustomMasterCSS;
css.resolveColor = resolveColor;
1aron commented 1 year ago

@creart-jetsai The latest version of css.theme has been deprecated, which means that theme switching is not built into the class MasterCSS, it's separated into a class Theme so that non-JIT users can import it locally.

The future could be:

import MasterCSS from '@master/css'
import ThemeService from 'theme-service'

const css = new MasterCSS()
const themeService = new ThemeService({ default: 'dark' }) 

...

css.resolveThemeColors(themeService.current)

You've played pretty deep, and theme-related documentation is coming soon.

creart-jetsai commented 1 year ago

It's been like over one or two months since the last time I dug into MasterCSS. I was busy with other projects then. Now I come back and realize a few things has changed. I tried to upgrade from beta-101 to beta-127 and it broke haha. Perhaps I should stick to beta-101 and wait for the official release. Anyway, glad to see you still working on this great library.

1aron commented 1 year ago

It's been like over one or two months since the last time I dug into MasterCSS. I was busy with other projects then. Now I come back and realize a few things has changed. I tried to upgrade from beta-101 to beta-127 and it broke haha. Perhaps I should stick to beta-101 and wait for the official release. Anyway, glad to see you still working on this great library.

Yes, as mentioned above, I am doing some core code refactoring and renaming; these tasks are related to more complete, reliable, and reasonable configuration APIs.

I got a lot of constructive feedback during the Beta, which led to some inevitable breaking changes. I will have a second-stage beta announcement after these tasks, so stay tuned!

Thanks for your support; you won't be disappointed!