feat: #142

devtool/src/_shared/components/Slices/Components/Detail/index.tsx

@@ -16,7 +16,7 @@ export const Detail = () => {
   const { devtoolConfig } = meta || {};
   const [defaultStyleActive, setDefaultStyleActive] = useState(true);
 
-  const currentThemeName = morfeo.getCurrent();
+  const currentThemeName = morfeo.getCurrentTheme();
 
   const computedBackground = useMemo(() => {
     if (typeof devtoolConfig?.background === 'object') {

devtool/src/_shared/components/Slices/Components/Preview.tsx

@@ -43,7 +43,7 @@ export const Preview: React.FC<Props> = ({ name, variant }) => {
   const { navigate } = useRouter();
   const { meta } =
   component(name, variant).get() || {};
-  const currentThemeName = morfeo.getCurrent();
+  const currentThemeName = morfeo.getCurrentTheme();
   const { devtoolConfig } = meta || {};
   const onClick = useCallback(() => {
     navigate(RouteName.COMPONENT, {

devtool/src/_shared/template/Header/index.tsx

@@ -9,7 +9,7 @@ import { RouteName } from '../../contexts';
 export const Header: React.FC = () => {
   const { history, navigate, navigateBack } = useRouter();
   const theme = useTheme();
-  const [currentTheme, setCurrentTheme] = useState(morfeo.getCurrent());
+  const [currentTheme, setCurrentTheme] = useState(morfeo.getCurrentTheme());
   const canGoBack = history.length > 0;
   const themes = useMemo(() => (theme ? morfeo.getThemes() : {}), [theme]);
   const backButton = useMemo(() => {
@@ -34,7 +34,7 @@ export const Header: React.FC = () => {
           value={currentTheme}
           placeholder={t('headerMyThemesPlaceholder')}
           onChange={value => {
-            morfeo.useTheme(value as ThemeName);
+            morfeo.setCurrentTheme(value as ThemeName);
             setCurrentTheme(value as ThemeName);
           }}
           options={Object.keys(themes).map(themeName => ({

devtool/src/_shared/utils/getThemeFromApp.ts

@@ -25,7 +25,7 @@ function onMessageReceived(message: MorfeoDevToolAction) {
     themeNames.forEach(themeName => {
       morfeo.setTheme(themeName, themes[themeName] || {});
     });
-    morfeo.useTheme(current);
+    morfeo.setCurrentTheme(current);
 
     appendFonts(message);
   }

docs/blog/2021-08-08-cli-and.presets.md

@@ -1,6 +1,6 @@
 ---
 slug: cli-and-presets
-title: 🎉 Introducing CLI and Preset 🎉
+title: 🎉 Introducing CLI (Beta) and Preset 🎉
 author: Mauro Erta
 author_title: Front End Engineer @ VLK STUDIO
 author_url: https://github.com/mauroerta
@@ -10,7 +10,7 @@ tags: [cli, morfeo, design, system, preset]
 
 Today we are going to release 2 new features:
 
-- a CLI that generates static CSS based on the theme
+- a CLI that generates static CSS based on the theme (Beta version)
 - a theme preset to easily start using morfeo in 30 seconds (Many thanks to [Andrea](https://github.com/andreaSimonePorceddu) who made it possible)
 
 ### CLI

docs/docs/Features/easy-to-test.mdx

@@ -52,7 +52,7 @@ test('should have the style defined inside the theme', () => {
 });
 ```
 
-## Example 2
+## Example #2
 
 The following component is used to switch the theme from light to dark and vice-versa:
 
@@ -62,10 +62,10 @@ import { Theme, morfeo } from '@morfeo/react';
 import { Button } from './Button';
 
 export const ThemeToggle: React.FC = () => {
-  const [isLight, setIsLight] = useState(morfeo.getCurrent() === 'light');
+  const [isLight, setIsLight] = useState(morfeo.getCurrentTheme() === 'light');
 
   const onClick = useCallback(() => {
-    morfeo.useTheme(isLight ? 'dark' : 'light');
+    morfeo.setCurrentTheme(isLight ? 'dark' : 'light');
     setIsLight(!isLight);
   }, [isLight, light, dark]);
 
@@ -98,7 +98,7 @@ beforeAll(() => {
 });
 
 beforeEach(() => {
-  morfeo.useTheme('light', dark);
+  morfeo.setCurrentTheme('light', dark);
 });
 
 test('should be light by default', () => {

docs/docs/Features/multi-theming.mdx

@@ -24,17 +24,17 @@ After the themes are added, you can easily change the current theme by calling t
 ```typescript
 import { morfeo } from '@morfeo/core';
 
-morfeo.useTheme('light');
+morfeo.setCurrentTheme('light');
 
-console.log(morfeo.getCurrent()); // light;
+console.log(morfeo.getCurrentTheme()); // light;
 
-const style = morfeo.resove({ color: 'background' }); // {color: "#ffffff"};
+const style = morfeo.resolve({ color: 'background' }); // {color: "#ffffff"};
 
-morfeo.useTheme('dark');
+morfeo.setCurrentTheme('dark');
 
-console.log(morfeo.getCurrent()); // dark;
+console.log(morfeo.getCurrentTheme()); // dark;
 
-const style = morfeo.resove({ color: 'background' }); // {color: "#000000"};
+const style = morfeo.resolve({ color: 'background' }); // {color: "#000000"};
 ```
 
 ## Typescript

docs/docs/Introduction/advantages.mdx

@@ -30,7 +30,7 @@ const dangerButtonStyle = morfeo.resolve({
   corner: 'l',
   borderWidth: '2xs',
   // highlight-end
-  borderColor: 'errror.darkest',
+  borderColor: 'error.darkest',
 });
 ```
 

docs/docs/Introduction/base-api.mdx

@@ -21,7 +21,7 @@ morfeo.setTheme('dark', darkTheme);
 /**
  * Set the theme to use (default is the first added)
  */
-morfeo.useTheme('dark');
+morfeo.setCurrentTheme('dark');
 
 /**
  * Get the theme current theme
@@ -35,7 +35,7 @@ morfeo.getTheme('light');
 /**
  * Get the current theme name
  */
-const currentThemeName = morfeo.getCurrent(); // dark
+const currentThemeName = morfeo.getCurrentTheme(); // dark
 
 /**
  * Get all the added themes

docs/docs/Packages/core.mdx

@@ -26,19 +26,19 @@ yarn add @morfeo/core
 With the function **morfeo** you can handle the theme object and resolve a [morfeo style object](../ThemeSpecification/overview.mdx#morfeo-style-object) info a valid css-in-js object.
 
 :::note
-[Here](https://github.com/VLK-STUDIO/morfeo/tree/main/packages/spec) you can find an explanation of the morfeo's theme specification; check it out to understand in deep all the properties your theme should have.
+[Here](../ThemeSpecification/overview.mdx) you can find an explanation of the morfeo's theme specification; check it out to understand in deep all the properties your theme should have.
 :::
 
 :::caution Warning
 
-You'll probably never use _directly_ `@morfeo/core`, instead, you'll more likely to use [@morfeo/react](https://github.com/VLK-STUDIO/morfeo/tree/main/packages/react), [@morfeo/svelte](https://github.com/VLK-STUDIO/morfeo/tree/main/packages/svelte), [@morfeo/jss](https://github.com/VLK-STUDIO/morfeo/tree/main/packages/jss), or other packages that offer better integration of the morfeo eco-system in your framework of choice.
+You'll probably never use _directly_ `@morfeo/core`, instead, you'll more likely to use [@morfeo/react](./react.mdx), [@morfeo/svelte](./svelte.mdx), [@morfeo/jss](./jss.mdx), or other packages that offer better integration of the morfeo eco-system in your framework of choice.
 In this particular case, it's important to know that you cannot define media queries as inline-style, that's why you need some other tool like JSS or Styled Components to handle this behavior. Likely, we already thought about it, so feel free to check out our packages.
 
 :::
 
 ### handling the theme: set, use and get.
 
-The `theme` handler is a singleton that will share across all your application/website the theme, so you can use it to refer colors, spacing, shadow (and [more..](https://github.com/VLK-STUDIO/morfeo/tree/main/packages/spec)), and most importantly the styles of your **components**.
+The `theme` handler is a singleton that will share across all your application/website the theme, so you can use it to refer colors, spacing, shadow (and [more..](./ThemeSpecification/overview.mdx), and most importantly the styles of your **components**.
 
 This singleton is exported by `@morfeo` but, 99% of the time, you don't need to use it directly, `morfeo` exposes a set of methods that cover most
 of the common scenarios like `setting` one or more themes, `getting` the current theme, `using` a theme instead of another one.
@@ -103,7 +103,7 @@ morfeo.setTheme('default', defaultTheme);
 /**
  * from now on your design language will be available across all your application
  */
-morfeo.useTheme('default');
+morfeo.setCurrentTheme('default');
 ```
 
 To use the theme in your application just use the `getTheme` method of the morfeo singleton:

docs/docs/Packages/preset-default.mdx

@@ -52,9 +52,9 @@ If you like our themes, you can easily use them in your app with the `initPreset
 ```typescript
 import { initPreset } from '@morfeo/preset-default';
 
-morfeo.useTheme('light'); // Used by default
+morfeo.setCurrentTheme('light'); // Used by default
 // OR
-morfeo.useTheme('dark');
+morfeo.setCurrentTheme('dark');
 ```
 
 You can use these themes as they are or customize theme to fit your design:

docs/sidebars.js

@@ -20,6 +20,8 @@ module.exports = {
         'Features/single-source-of-truth',
         'Features/multi-theming',
         'Features/web-extension',
+        'Features/extendible',
+        'Features/easy-to-test',
         {
           type: 'category',
           label: '🔨 CLI (Beta)',
@@ -30,8 +32,6 @@ module.exports = {
             'Features/CLI/morfeo-cli-compose',
           ],
         },
-        'Features/extendible',
-        'Features/easy-to-test',
       ],
     },
   ],
@@ -111,10 +111,4 @@ module.exports = {
       dirName: 'ThemeSpecification',
     },
   ],
-  reactSidebar: [
-    {
-      type: 'autogenerated',
-      dirName: 'React',
-    },
-  ],
 };

docs/src/components/CodeExample/CodeExample.jsx

@@ -23,8 +23,8 @@ export function CodeExample() {
   });
 
   const onClick = () => {
-    const current = morfeo.getCurrent();
-    morfeo.useTheme(current === 'light' ? 'dark' : 'light')
+    const current = morfeo.getCurrentTheme();
+    morfeo.setCurrentTheme(current === 'light' ? 'dark' : 'light')
   }
 
   return (

docs/src/components/ThemeSelect/ThemeSelect.jsx

@@ -48,7 +48,7 @@ export function ThemeSelect({ style: baseStyle }) {
   });
   const applyTheme = name => {
     return () => {
-      morfeo.useTheme(name);
+      morfeo.setCurrentTheme(name);
       setSelected(name);
     };
   };

examples/react/src/App.tsx

@@ -42,9 +42,9 @@ const Comps = () => {
   const [themeSymbol, setThemeSymbol] = useState('☽');
 
   const toggleTheme = () => {
-    const current: any = morfeo.getCurrent();
+    const current: any = morfeo.getCurrentTheme();
     setThemeSymbol(current === 'light' ? '☼' : '☽');
-    morfeo.useTheme(current === 'light' ? 'dark' : 'light');
+    morfeo.setCurrentTheme(current === 'light' ? 'dark' : 'light');
   };
 
   return (

examples/react/src/index.tsx

@@ -10,7 +10,7 @@ resetCss();
 
 initPreset();
 
-morfeo.useTheme('light');
+morfeo.setCurrentTheme('light');
 
 loadFont(
   {

examples/svelte/src/components/ToggleTheme.svelte

@@ -5,7 +5,7 @@
   let darkMode = false;
 
   function handleClick() {
-    morfeo.useTheme(darkMode ? 'light' : 'dark');
+    morfeo.setCurrentTheme(darkMode ? 'light' : 'dark');
     darkMode = !darkMode;
   }
 </script>

examples/svelte/src/main.js

@@ -21,7 +21,7 @@ loadFont({
 morfeo.setTheme('light', { ...lightTheme, components });
 morfeo.setTheme('dark', { ...darkTheme, components });
 
-morfeo.useTheme('light');
+morfeo.setCurrentTheme('light');
 
 const app = new App({
   target: document.body,

packages/core/README.md

@@ -118,7 +118,7 @@ morfeo.setTheme('default', defaultTheme);
 /**
  * from now on your design language will be available across all your application
  */
-morfeo.useTheme('default');
+morfeo.setCurrentTheme('default');
 ```
 
 To use the theme in your application just use the `getTheme` method of the morfeo singleton:

packages/core/src/morfeo.ts

@@ -12,9 +12,9 @@ function createMorfeo() {
    * Get the current theme name
    * @example
    *
-   * const current = morfeo.getCurrent(); // "light"
+   * const current = morfeo.getCurrentTheme(); // "light"
    */
-  function getCurrent(): ThemeName {
+  function getCurrentTheme(): ThemeName {
     return current;
   }
 
@@ -41,9 +41,9 @@ function createMorfeo() {
    *
    * const button = document.querySelector("#theme-dark-switcher");
    *
-   * button.addEventListener("click", () => morfeo.useTheme("dark"));
+   * button.addEventListener("click", () => morfeo.setCurrentTheme("dark"));
    */
-  function useTheme(themeName: ThemeName) {
+  function setCurrentTheme(themeName: ThemeName) {
     const themeToBeUsed = themes[themeName];
     if (!themeToBeUsed) {
       return false;
@@ -65,21 +65,21 @@ function createMorfeo() {
    * morfeo.setTheme("light", { colors: { primary: "#DDFCAD" }, ...rest});
    * morfeo.setTheme("dark", { colors: { primary: "#304F03" }, ...rest});
    *
-   * morfeo.useTheme("light");
+   * morfeo.setCurrentTheme("light");
    *
    * console.log(morfeo.getTheme().colors.primary); // #DDFCAD
    *
-   * morfeo.useTheme("dark");
+   * morfeo.setCurrentTheme("dark");
    *
-   * console.log(morfeo.get().colors.primary); // #304F03
+   * console.log(morfeo.getTheme().colors.primary); // #304F03
    */
   function setTheme(
     themeName: ThemeName,
     newTheme: Parameters<typeof theme.set>[0],
   ) {
     themes[themeName] = deepMerge(themes[themeName] || {}, newTheme) as Theme;
     if (!current || current === themeName) {
-      useTheme(themeName);
+      setCurrentTheme(themeName);
     }
   }
 
@@ -128,11 +128,11 @@ function createMorfeo() {
 
   const instance = Object.freeze({
     resolve,
-    useTheme,
     setTheme,
     getTheme,
     getThemes,
-    getCurrent,
+    getCurrentTheme,
+    setCurrentTheme,
     __dangerousReset,
   });
 
@@ -153,7 +153,7 @@ export type Morfeo = ReturnType<typeof createMorfeo>;
  *
  * morfeo.setTheme("light", lightTheme);
  *
- * morfeo.useTheme("light")
+ * morfeo.setCurrentTheme("light")
  *
  * const style = morfeo.resolve({
  *   py: "m",