wrapper of parsers and theme

[mauroerta]

Problem

Morfeo is based in 2 singletons, theme and parsers, the first is used to handle and provide the theme and the second one to parse it and generate styles. Even if it's not hard to understand this concept, most of the times the only methods we need to use of these 2 singleton are:

• theme.get to get the current theme
• theme.set to update the theme
• parsers.resolve to parse the style object with the theme and generate valid css-in-js objects.

Solution

My idea is to create another singleton morfeo that exposes only these methods:

• getCurrent: to get the current used theme
• addTheme to add a new theme with a given name (for example "light" or "dark")
• useTheme to use one of the previously added themes
• setTheme same as theme.set
• getTheme same as theme.get
• getThemes to get all the added themes
• resolve same as parsers.resolve
  With this solution, the new singleton morfeowill have an easy way to handle multi-theming and, most importantly, will expose only the API that 99% of the time we need; theme and parsers singletons will still be available for advanced usage for example add new parsers or easily get single slices or values from the theme.

Example

import { morfeo } from "@morfeo/core";
import { lightTheme, darkTheme } from "./themes";
 
morfeo.addTheme("light", lightTheme);
morfeo.addTheme("dark", darkTheme);

morfeo.useTheme("light");

const style = morfeo.resolve({
    py: "m",
    gradient: "primary"
});

// will be the current theme, `lightTheme` in this case
const currentTheme = morfeo.getTheme();
// optionally you can pass the name of the theme you want to get
const otherTheme = morfeo.getTheme('dark');

Originally posted by @mauroerta in https://github.com/VLK-STUDIO/morfeo/discussions/59