From fb20b501e877e2137831f9e86629e213007b88b7 Mon Sep 17 00:00:00 2001
From: mauroerta <mauro.erta@gmail.com>
Date: Tue, 3 Aug 2021 00:28:39 +0200
Subject: [PATCH] feat: add theme removal

---
 apps/benchmarks/src/core/index.js             |  2 +-
 apps/benchmarks/src/morfeo-vs/index.js        |  2 +-
 apps/native-sandbox/src/App.tsx               |  2 +-
 apps/svelte-sandbox/src/main.js               |  4 +-
 .../src/components/ThemeToggle.test.tsx       |  4 +-
 apps/web-sandbox/src/index.tsx                |  8 +--
 apps/web-sandbox/src/types.d.ts               |  5 --
 docs/docs/Packages/hooks.mdx                  |  4 +-
 docs/docs/Packages/preset-default.mdx         | 20 +++++++
 docs/docs/Packages/styled-components.mdx      |  6 +-
 docs/docs/Packages/web.mdx                    |  8 +--
 docs/package.json                             |  1 +
 .../HomepageFeatures/HomepageFeatures.js      |  6 +-
 .../components/ThemeSelect/ThemeSelect.jsx    | 28 ++++-----
 docs/src/theme/Root.js                        |  8 +--
 packages/cli/src/utils/getCSSClasses.ts       | 18 ++++--
 packages/core/README.md                       |  4 +-
 packages/core/src/morfeo.ts                   | 58 ++++++++-----------
 packages/core/tests/morfeo.test.ts            | 24 ++++----
 packages/dev-tools/README.md                  |  4 +-
 packages/hooks/README.md                      |  6 +-
 packages/preset-default/package.json          |  8 ++-
 .../preset-default/src/base/lightTheme.ts     |  3 -
 packages/preset-default/src/index.ts          | 17 +++++-
 packages/preset-default/tests/default.test.ts | 13 +++++
 packages/spec/README.md                       |  8 +--
 packages/styled-components-web/README.md      |  4 +-
 packages/svelte/README.md                     | 16 ++---
 packages/svelte/tests/morfeo.test.ts          |  2 +-
 packages/web/README.md                        |  4 +-
 packages/web/src/utils/resetCss.ts            |  2 +-
 31 files changed, 173 insertions(+), 126 deletions(-)
 create mode 100644 docs/docs/Packages/preset-default.mdx
 delete mode 100644 packages/preset-default/src/base/lightTheme.ts
 create mode 100644 packages/preset-default/tests/default.test.ts

diff --git a/apps/benchmarks/src/core/index.js b/apps/benchmarks/src/core/index.js
index a7be4f9c..9d9dcbe5 100755
--- a/apps/benchmarks/src/core/index.js
+++ b/apps/benchmarks/src/core/index.js
@@ -5,7 +5,7 @@ const singleComplexPropertySuite = require('./singleComplexProperty');
 const componentSuite = require('./componentStyle');
 const completeStyleSuite = require('./completeStyle');
 
-morfeo.setTheme({
+morfeo.setTheme('default', {
   colors: {
     primary: 'black',
     secondary: 'white',
diff --git a/apps/benchmarks/src/morfeo-vs/index.js b/apps/benchmarks/src/morfeo-vs/index.js
index 0736e197..0b442d9e 100644
--- a/apps/benchmarks/src/morfeo-vs/index.js
+++ b/apps/benchmarks/src/morfeo-vs/index.js
@@ -2,6 +2,6 @@ const { morfeo } = require('@morfeo/core');
 const defaultTheme = require('./theme');
 const styledSystemSuite = require('./styled-system');
 
-morfeo.setTheme(defaultTheme);
+morfeo.setTheme('default', defaultTheme);
 
 styledSystemSuite.run({ async: false });
diff --git a/apps/native-sandbox/src/App.tsx b/apps/native-sandbox/src/App.tsx
index bac5d0e4..db76c294 100644
--- a/apps/native-sandbox/src/App.tsx
+++ b/apps/native-sandbox/src/App.tsx
@@ -8,7 +8,7 @@ import { Button } from './components';
 
 LogBox.ignoreAllLogs();
 
-morfeo.setTheme(defaultTheme as any);
+morfeo.setTheme('default', defaultTheme as any);
 
 const Box = styled.View<Style>(style => morfeo.resolve(style) as any);
 
diff --git a/apps/svelte-sandbox/src/main.js b/apps/svelte-sandbox/src/main.js
index 7151629c..75525a42 100644
--- a/apps/svelte-sandbox/src/main.js
+++ b/apps/svelte-sandbox/src/main.js
@@ -18,8 +18,8 @@ loadFont({
   family: 'Roboto',
 });
 
-morfeo.addTheme('light', { ...lightTheme, components });
-morfeo.addTheme('dark', { ...darkTheme, components });
+morfeo.setTheme('light', { ...lightTheme, components });
+morfeo.setTheme('dark', { ...darkTheme, components });
 
 morfeo.useTheme('light');
 
diff --git a/apps/web-sandbox/src/components/ThemeToggle.test.tsx b/apps/web-sandbox/src/components/ThemeToggle.test.tsx
index 1ac7d8de..5ad0838b 100644
--- a/apps/web-sandbox/src/components/ThemeToggle.test.tsx
+++ b/apps/web-sandbox/src/components/ThemeToggle.test.tsx
@@ -14,8 +14,8 @@ const light = {
   },
 } as any;
 
-morfeo.addTheme('light', light);
-morfeo.addTheme('dark', dark);
+morfeo.setTheme('light', light);
+morfeo.setTheme('dark', dark);
 
 beforeEach(() => {
   morfeo.useTheme('light');
diff --git a/apps/web-sandbox/src/index.tsx b/apps/web-sandbox/src/index.tsx
index e02987c8..f544038a 100644
--- a/apps/web-sandbox/src/index.tsx
+++ b/apps/web-sandbox/src/index.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
+import '@morfeo/preset-default';
 import { morfeo, resetCss, loadFont } from '@morfeo/react';
+import { enableMorfeoDevTool } from '@morfeo/dev-tools';
 import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { enableMorfeoDevTool } from '@morfeo/dev-tools';
-import { lightTheme, darkTheme } from '@morfeo/preset-default';
 import { components } from './theme';
 
 enableMorfeoDevTool();
 resetCss();
 
-morfeo.addTheme('light', { ...lightTheme, components } as any);
-morfeo.addTheme('dark', { ...darkTheme, components } as any);
+morfeo.setTheme('light', { components } as any);
+morfeo.setTheme('dark', { components } as any);
 
 morfeo.useTheme('light');
 
diff --git a/apps/web-sandbox/src/types.d.ts b/apps/web-sandbox/src/types.d.ts
index e84b86c1..2e836bac 100644
--- a/apps/web-sandbox/src/types.d.ts
+++ b/apps/web-sandbox/src/types.d.ts
@@ -1,12 +1,7 @@
-import { Theme } from '@morfeo/core';
 import { components } from './theme';
 
 type LocalComponents = typeof components;
 
 declare module '@morfeo/react' {
   export interface Components extends LocalComponents {}
-  export interface Themes {
-    light: Theme;
-    dark: Theme;
-  }
 }
diff --git a/docs/docs/Packages/hooks.mdx b/docs/docs/Packages/hooks.mdx
index 21ab6345..86ac9e2e 100644
--- a/docs/docs/Packages/hooks.mdx
+++ b/docs/docs/Packages/hooks.mdx
@@ -46,7 +46,7 @@ const MyComponent: React.FC = () => {
 ```
 
 :::note
-If you already know the [core API](./core) useTheme is the equivalent of `theme.get()`, the main difference is that useTheme react
+If you already know the [core API](./core) useTheme is the equivalent of `morfeo.getTheme()`, the main difference is that useTheme react
 to theme changes and force a re-render of the component.
 :::
 
@@ -119,7 +119,7 @@ const AgreeButton: React.FC = ({ children }) => {
 ```
 
 :::note
-Just like useTheme, **useStyles** and **useStyle** are the equivalent of the [core API's](./core) `parsers.resove(style)`
+Just like useTheme, **useStyles** and **useStyle** are the equivalent of the [core API's](./core) `morfeo.resolve(style)`
 but they force a re-render when the theme changes.
 :::
 
diff --git a/docs/docs/Packages/preset-default.mdx b/docs/docs/Packages/preset-default.mdx
new file mode 100644
index 00000000..4dc922ba
--- /dev/null
+++ b/docs/docs/Packages/preset-default.mdx
@@ -0,0 +1,20 @@
+---
+sidebar_position: 5
+id: preset-default
+title: preset-default
+description: morfeo's default theme
+---
+
+## Installation
+
+with [npm](https://www.npmjs.com/package/@morfeo/preset-default):
+
+```bash
+npm install @morfeo/preset-default
+```
+
+or [yarn](https://yarn.pm/@morfeo/preset-default):
+
+```bash
+yarn add @morfeo/preset-default
+```
diff --git a/docs/docs/Packages/styled-components.mdx b/docs/docs/Packages/styled-components.mdx
index afdc3d65..1c1a619c 100644
--- a/docs/docs/Packages/styled-components.mdx
+++ b/docs/docs/Packages/styled-components.mdx
@@ -94,7 +94,7 @@ It's the same as defining it in this way:
 export const Button = styled.button({ componentName: 'Button' });
 ```
 
-In fact, under the hood morfeo will find the component "Button" inside your theme and its specification will use the right [tag](#custom-tag), style, and [properties](#custom-props)
+In fact, under the hood morfeo will find the component "Button" inside your theme and its specification will use the right [tag](#custom-tag), style, and [properties](#custom-props). (If the component tag is not specified the default will be `div`).
 
 ---
 
@@ -110,10 +110,10 @@ To set your own Theme use the **@morfeo/web theme API** instead.
 // App.js
 
 import { ThemeProvider } from '@morfeo/styled-components-web';
-import { theme } from '@morfeo/web';
+import { morfeo } from '@morfeo/web';
 import { myTheme } from './myTheme';
 
-theme.set(myTheme);
+morfeo.setTheme('default', myTheme);
 
 export const App = () => {
   return (
diff --git a/docs/docs/Packages/web.mdx b/docs/docs/Packages/web.mdx
index 32bd9f10..707e33e1 100644
--- a/docs/docs/Packages/web.mdx
+++ b/docs/docs/Packages/web.mdx
@@ -32,9 +32,9 @@ In addition to the core library, the web package adds the parsers to handle **ps
 You can pass to the `resolve` method any pseudo class with the format '&:{pseudo}', for example:
 
 ```typescript
-import { parsers } from '@morfeo/web';
+import { morfeo } from '@morfeo/web';
 
-const style = parsers.resolve({
+const style = morfeo.resolve({
   bg: 'primary',
   '&:hover': {
     bg: 'secondary',
@@ -133,8 +133,8 @@ const myTheme = {
 An example of usage is:
 
 ```typescript
-const buttonStyle = button.resolve({ gradient: 'primary' });
-const textStyle = button.resolve({ textGradient: 'primary' });
+const buttonStyle = morfeo.resolve({ gradient: 'primary' });
+const textStyle = morfeo.resolve({ textGradient: 'primary' });
 ```
 
 with the results:
diff --git a/docs/package.json b/docs/package.json
index c2fe517d..e7daa3cd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -21,6 +21,7 @@
     "@mdx-js/react": "^1.6.21",
     "@morfeo/dev-tools": "^0.1.8",
     "@morfeo/react": "^0.1.8",
+    "@morfeo/preset-default": "^0.1.8",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
diff --git a/docs/src/components/HomepageFeatures/HomepageFeatures.js b/docs/src/components/HomepageFeatures/HomepageFeatures.js
index 3d1f4813..2af89cd7 100644
--- a/docs/src/components/HomepageFeatures/HomepageFeatures.js
+++ b/docs/src/components/HomepageFeatures/HomepageFeatures.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
-import { theme, parsers } from '@morfeo/react';
+import { morfeo } from '@morfeo/react';
 import styles from './HomepageFeatures.module.css';
 
 const exampleStyle = {
@@ -19,8 +19,8 @@ const exampleTheme = {
   },
 };
 
-theme.set(exampleTheme);
-const resultStyle = parsers.resolve(exampleStyle);
+morfeo.setTheme(morfeo.getCurrent(), exampleTheme);
+const resultStyle = morfeo.resolve(exampleStyle);
 
 export function HomepageFeatures() {
   return (
diff --git a/docs/src/components/ThemeSelect/ThemeSelect.jsx b/docs/src/components/ThemeSelect/ThemeSelect.jsx
index dcea0bed..f686b637 100644
--- a/docs/src/components/ThemeSelect/ThemeSelect.jsx
+++ b/docs/src/components/ThemeSelect/ThemeSelect.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { theme, parsers } from '@morfeo/react';
+import { morfeo } from '@morfeo/react';
 
 const themes = {
   theme1: {
     colors: {
-      'primary.300': '#16a085',
+      primary: '#16a085',
     },
     radii: {
       m: '30px',
@@ -15,7 +15,7 @@ const themes = {
   },
   theme2: {
     colors: {
-      'primary.300': '#e67e22',
+      primary: '#e67e22',
     },
     radii: {
       m: '30px',
@@ -26,7 +26,7 @@ const themes = {
   },
   theme3: {
     colors: {
-      'primary.300': '#8e44ad',
+      primary: '#8e44ad',
     },
     radii: {
       m: '30px',
@@ -37,15 +37,17 @@ const themes = {
   },
 };
 
+Object.keys(themes).forEach(name => morfeo.setTheme(name, themes[name]));
+
 export function ThemeSelect({ style: baseStyle }) {
   const [selected, setSelected] = useState();
-  const style = parsers.resolve({
+  const style = morfeo.resolve({
     ...baseStyle,
     transition: 'all 0.5s',
   });
   const applyTheme = name => {
     return () => {
-      theme.set(themes[name]);
+      morfeo.useTheme(name);
       setSelected(name);
     };
   };
@@ -55,8 +57,8 @@ export function ThemeSelect({ style: baseStyle }) {
         className="button button--primary button--lg margin--sm"
         onClick={applyTheme('theme1')}
         style={{
-          backgroundColor: themes['theme1'].colors['primary.300'],
-          borderColor: themes['theme1'].colors['primary.300'],
+          backgroundColor: themes['theme1'].colors['primary'],
+          borderColor: themes['theme1'].colors['primary'],
         }}
       >
         Apply theme #1
@@ -65,8 +67,8 @@ export function ThemeSelect({ style: baseStyle }) {
         className="button button--primary button--lg margin--sm"
         onClick={applyTheme('theme2')}
         style={{
-          backgroundColor: themes['theme2'].colors['primary.300'],
-          borderColor: themes['theme2'].colors['primary.300'],
+          backgroundColor: themes['theme2'].colors['primary'],
+          borderColor: themes['theme2'].colors['primary'],
         }}
       >
         Apply theme #2
@@ -75,13 +77,13 @@ export function ThemeSelect({ style: baseStyle }) {
         className="button button--primary button--lg margin--sm"
         onClick={applyTheme('theme3')}
         style={{
-          backgroundColor: themes['theme3'].colors['primary.300'],
-          borderColor: themes['theme3'].colors['primary.300'],
+          backgroundColor: themes['theme3'].colors['primary'],
+          borderColor: themes['theme3'].colors['primary'],
         }}
       >
         Apply theme #3
       </button>
-      {selected && <div style={parsers.resolve(style)}></div>}
+      {selected && <div style={morfeo.resolve(style)}></div>}
     </>
   );
 }
diff --git a/docs/src/theme/Root.js b/docs/src/theme/Root.js
index 0efd9e54..936f6450 100644
--- a/docs/src/theme/Root.js
+++ b/docs/src/theme/Root.js
@@ -1,15 +1,13 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
-import { parsers, theme } from '@morfeo/react';
+import { morfeo } from '@morfeo/react';
 import { enableMorfeoDevTool } from '@morfeo/dev-tools';
+import '@morfeo/preset-default';
 import CookieConsent from 'react-cookie-consent';
-import { lightTheme } from './theme';
 
 enableMorfeoDevTool();
 
-theme.set(lightTheme);
-
-const buttonStyle = parsers.resolve({ borderRadius: 'm' });
+const buttonStyle = morfeo.resolve({ corner: 'm' });
 
 function Root({ children }) {
   return (
diff --git a/packages/cli/src/utils/getCSSClasses.ts b/packages/cli/src/utils/getCSSClasses.ts
index 3c4f9d66..a237d2be 100644
--- a/packages/cli/src/utils/getCSSClasses.ts
+++ b/packages/cli/src/utils/getCSSClasses.ts
@@ -1,11 +1,15 @@
 import { theme, getStyles, Component } from '@morfeo/web';
 import { paramCase } from 'param-case';
 
-function getComponentCSS(componentName: Component, variant?: string) {
-  let componentId = `morfeo-${componentName.toLowerCase()}`;
+function getComponentCSS(
+  themeName: string,
+  componentName: Component,
+  variant?: string,
+) {
+  let componentId = `morfeo-${paramCase(componentName)}`;
 
   if (variant) {
-    componentId += `-${variant.toLowerCase()}`;
+    componentId += `-${paramCase(variant)}`;
   }
 
   const { sheet } = getStyles(
@@ -15,7 +19,9 @@ function getComponentCSS(componentName: Component, variant?: string) {
     },
   );
 
-  const componentCss = sheet.toString();
+  const componentCss = sheet
+    .toString()
+    .replace(/\.morfeo-/g, `html[data-morfeo-theme="${themeName}"] .morfeo-`);
 
   return `\n${componentCss}\n`;
 }
@@ -29,10 +35,10 @@ export function getCSSClasses(themeName: string) {
   componentNames.forEach(componentName => {
     const { variants } = components[componentName];
     const variantKeys = Object.keys(variants || {});
-    css += getComponentCSS(componentName);
+    css += getComponentCSS(themeName, componentName);
 
     variantKeys.forEach(variant => {
-      css += getComponentCSS(componentName, variant);
+      css += getComponentCSS(themeName, componentName, variant);
     });
   });
 
diff --git a/packages/core/README.md b/packages/core/README.md
index 1416c7cf..34923c26 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -102,13 +102,13 @@ export const defaultTheme: Theme = {
 Once you set your design language you can start to use it by using the theme handler:
 
 ```typescript
-import { theme } from '@morfeo/core';
+import { morfeo } from '@morfeo/core';
 import { defaultTheme } from './my-theme';
 
 /**
  * from now on your design language will be available across all your application
  */
-theme.set(defaultTheme);
+morfeo.setTheme("default", defaultTheme);
 ```
 
 To use the theme in your application just use the `get`, `getSlice` or `getValue` method of the theme singleton:
diff --git a/packages/core/src/morfeo.ts b/packages/core/src/morfeo.ts
index 03fb9b11..3c733a26 100644
--- a/packages/core/src/morfeo.ts
+++ b/packages/core/src/morfeo.ts
@@ -22,8 +22,8 @@ function createMorfeo() {
    * Get the themes added to morfeo:
    * @example
    *
-   * morfeo.addTheme("light", lightTheme);
-   * morfeo.addTheme("dark", darkTheme);
+   * morfeo.setTheme("light", lightTheme);
+   * morfeo.setTheme("dark", darkTheme);
    *
    * const themes = morfeo.getThemes();
    * // {
@@ -35,26 +35,6 @@ function createMorfeo() {
     return themes;
   }
 
-  /**
-   * It adds a new theme the can be used with the `useTheme` method:
-   * @example
-   *
-   * morfeo.addTheme("light", { colors: { primary: "#DDFCAD" }, ...rest});
-   * morfeo.addTheme("dark", { colors: { primary: "#304F03" }, ...rest});
-   *
-   * morfeo.useTheme("light");
-   *
-   * console.log(morfeo.getTheme().colors.primary); // #DDFCAD
-   *
-   * morfeo.useTheme("dark");
-   *
-   * console.log(morfeo.get().colors.primary); // #304F03
-   */
-  function addTheme(themeName: ThemeName, newTheme: Theme) {
-    themes[themeName] = deepMerge(themes[themeName] || {}, newTheme) as Theme;
-    current = current || themeName;
-  }
-
   /**
    * Use one of the added themes, this method should be used in case of multi-theme application, for example:
    * @example
@@ -69,25 +49,38 @@ function createMorfeo() {
       return false;
     }
 
-    theme.reset();
+    if (current !== themeName) {
+      theme.reset();
+      current = themeName;
+    }
     theme.set(themeToBeUsed);
-    current = themeName;
 
     return true;
   }
 
   /**
-   * It updated the current theme with new values:
+   * It adds or update a new theme the can be used with the `useTheme` method:
    * @example
    *
-   * morfeo.setTheme({ colors: { primary: "#06f" }});
-   * const theme = morfeo.getTheme();
+   * morfeo.setTheme("light", { colors: { primary: "#DDFCAD" }, ...rest});
+   * morfeo.setTheme("dark", { colors: { primary: "#304F03" }, ...rest});
    *
-   * console.log(theme.colors.primary); // #06f
+   * morfeo.useTheme("light");
+   *
+   * console.log(morfeo.getTheme().colors.primary); // #DDFCAD
+   *
+   * morfeo.useTheme("dark");
+   *
+   * console.log(morfeo.get().colors.primary); // #304F03
    */
-  function setTheme(...params: Parameters<typeof theme.set>) {
-    theme.set(...params);
-    themes[current || 'default'] = theme.get();
+  function setTheme(
+    themeName: ThemeName,
+    newTheme: Parameters<typeof theme.set>[0],
+  ) {
+    themes[themeName] = deepMerge(themes[themeName] || {}, newTheme) as Theme;
+    if (!current) {
+      useTheme(themeName);
+    }
   }
 
   /**
@@ -136,7 +129,6 @@ function createMorfeo() {
   return Object.freeze({
     resolve,
     useTheme,
-    addTheme,
     setTheme,
     getTheme,
     getThemes,
@@ -155,7 +147,7 @@ export type Morfeo = ReturnType<typeof createMorfeo>;
  *
  * import { lightTheme } from "./themes";
  *
- * morfeo.addTheme("light", lightTheme);
+ * morfeo.setTheme("light", lightTheme);
  *
  * morfeo.useTheme("light")
  *
diff --git a/packages/core/tests/morfeo.test.ts b/packages/core/tests/morfeo.test.ts
index 27c9dda1..40d957f7 100644
--- a/packages/core/tests/morfeo.test.ts
+++ b/packages/core/tests/morfeo.test.ts
@@ -17,8 +17,10 @@ describe('morfeo', () => {
     morfeo.__dangerousReset();
   });
 
-  it('should add a theme as default if `setTheme` is called without calling `useTheme` before', () => {
-    morfeo.setTheme(LIGHT_THEME);
+  it('should automatically use the first theme set by `setTheme` without calling `useTheme`', () => {
+    morfeo.setTheme('default', LIGHT_THEME);
+    morfeo.setTheme('light' as ThemeName, LIGHT_THEME);
+    morfeo.setTheme('dark' as ThemeName, DARK_THEME);
 
     expect(morfeo.getTheme('default').colors.primary).toBe(
       LIGHT_THEME.colors.primary,
@@ -26,15 +28,15 @@ describe('morfeo', () => {
   });
 
   it('should return the current theme if no arguments are passed to `getTheme` method', () => {
-    morfeo.addTheme('light' as ThemeName, LIGHT_THEME as any);
+    morfeo.setTheme('light' as ThemeName, LIGHT_THEME as any);
     morfeo.useTheme('light' as ThemeName);
 
     expect(morfeo.getTheme().colors.primary).toBe(LIGHT_THEME.colors.primary);
   });
 
   it('should use another theme after calling `useTheme` method', () => {
-    morfeo.addTheme('light' as ThemeName, LIGHT_THEME as any);
-    morfeo.addTheme('dark' as ThemeName, DARK_THEME as any);
+    morfeo.setTheme('light' as ThemeName, LIGHT_THEME as any);
+    morfeo.setTheme('dark' as ThemeName, DARK_THEME as any);
 
     morfeo.useTheme('light' as ThemeName);
 
@@ -45,13 +47,13 @@ describe('morfeo', () => {
     expect(morfeo.getTheme().colors.primary).toBe(DARK_THEME.colors.primary);
   });
 
-  it("should return false the theme name passed to `useTheme` it's not a valid theme", () => {
+  it("should return false if the theme name passed to `useTheme` it's not a valid theme name", () => {
     expect(morfeo.useTheme('not a valid theme nme' as ThemeName)).toBe(false);
   });
 
   it('should parse the style object based on the current theme', () => {
-    morfeo.addTheme('light' as ThemeName, LIGHT_THEME as any);
-    morfeo.addTheme('dark' as ThemeName, DARK_THEME as any);
+    morfeo.setTheme('light' as ThemeName, LIGHT_THEME as any);
+    morfeo.setTheme('dark' as ThemeName, DARK_THEME as any);
 
     morfeo.useTheme('light' as ThemeName);
 
@@ -67,15 +69,15 @@ describe('morfeo', () => {
   });
 
   it('should get the current theme name', () => {
-    morfeo.addTheme('light' as ThemeName, LIGHT_THEME as any);
+    morfeo.setTheme('light' as ThemeName, LIGHT_THEME as any);
     morfeo.useTheme('light' as ThemeName);
 
     expect(morfeo.getCurrent()).toBe('light');
   });
 
   it('should get all the added themes', () => {
-    morfeo.addTheme('light' as ThemeName, LIGHT_THEME as any);
-    morfeo.addTheme('dark' as ThemeName, DARK_THEME as any);
+    morfeo.setTheme('light' as ThemeName, LIGHT_THEME as any);
+    morfeo.setTheme('dark' as ThemeName, DARK_THEME as any);
 
     const themes = morfeo.getThemes();
 
diff --git a/packages/dev-tools/README.md b/packages/dev-tools/README.md
index 97495f73..8dca5072 100644
--- a/packages/dev-tools/README.md
+++ b/packages/dev-tools/README.md
@@ -44,11 +44,11 @@ the in your app, before setting the theme, just add:
 
 ```typescript
 import { enableMorfeoDevTool } from '@morfeo/dev-tools';
-import { myTheme } from './myTheme';
+import { morfeo } from './myTheme';
 
 enableMorfeoDevTool();
 
-theme.set(myTheme);
+morfeo.setTheme("default", myTheme);
 ```
 
 >In a future release the dev tool will probably be always enabled by default
diff --git a/packages/hooks/README.md b/packages/hooks/README.md
index 50fbf4e1..6a5368ec 100644
--- a/packages/hooks/README.md
+++ b/packages/hooks/README.md
@@ -50,7 +50,7 @@ const MyComponent: React.FC = () => {
 };
 ```
 
-> If you already know the [core API](./core) useTheme is the equivalent of `theme.get()`, the main difference is that useTheme react
+> If you already know the [core API](./core) useTheme is the equivalent of `morfeo.getTheme()`, the main difference is that useTheme react
 > to theme changes and force a re-render of the component.
 
 Most of the time you don't need all theme, but just a slice or single value, in this cases [useThemeSlice](#useThemeSlice) and [useThemeValue](#useThemeValue) can will give you only the part of the theme you want:
@@ -121,12 +121,12 @@ const AgreeButton: React.FC = ({ children }) => {
 };
 ```
 
-> Just like useTheme, **useStyles** and **useStyle** are the equivalent of the [core API's](./core) `parsers.resove(style)`
+> Just like useTheme, **useStyles** and **useStyle** are the equivalent of the [core API's](./core) `morfeo.resolve(style)`
 > but they force a re-render when the theme changes.
 
 ## useProps
 
-Use it to get the default props of a components, a common use is to merge the defaut props with the current props:
+Use it to get the default props of a components, a common use is to merge the default props with the current props:
 
 ```jsx
 function MyButton(props) {
diff --git a/packages/preset-default/package.json b/packages/preset-default/package.json
index 171e6e30..67b58df3 100644
--- a/packages/preset-default/package.json
+++ b/packages/preset-default/package.json
@@ -23,7 +23,13 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@morfeo/spec": "^0.1.6"
+    "@morfeo/spec": "^0.1.8"
+  },
+  "peerDependencies": {
+    "@morfeo/core": "^0.1.8"
+  },
+  "devDependencies": {
+    "@morfeo/core": "^0.1.8"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/preset-default/src/base/lightTheme.ts b/packages/preset-default/src/base/lightTheme.ts
deleted file mode 100644
index c088cd8f..00000000
--- a/packages/preset-default/src/base/lightTheme.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { lightTheme } from '.';
-
-export default lightTheme;
diff --git a/packages/preset-default/src/index.ts b/packages/preset-default/src/index.ts
index bfeeaf5c..f4fe4825 100644
--- a/packages/preset-default/src/index.ts
+++ b/packages/preset-default/src/index.ts
@@ -1 +1,16 @@
-export { darkTheme, lightTheme } from './base';
+import { morfeo } from '@morfeo/core';
+import { Theme } from '@morfeo/spec';
+import { loadFontsParams } from './loadFontsParams';
+import { darkTheme, lightTheme } from './base';
+
+morfeo.setTheme('light', lightTheme);
+morfeo.setTheme('dark', darkTheme);
+
+declare module '@morfeo/core' {
+  export interface Themes {
+    light: Theme;
+    dark: Theme;
+  }
+}
+
+export { darkTheme, lightTheme, loadFontsParams };
diff --git a/packages/preset-default/tests/default.test.ts b/packages/preset-default/tests/default.test.ts
new file mode 100644
index 00000000..61ff9d16
--- /dev/null
+++ b/packages/preset-default/tests/default.test.ts
@@ -0,0 +1,13 @@
+import { morfeo } from '@morfeo/core';
+import '../src';
+
+describe('preset-default', () => {
+  it('should set the current theme equals to light', () => {
+    expect(morfeo.getCurrent()).toEqual('light');
+  });
+
+  it('should have set 2 themes, dark and light', () => {
+    const themes = morfeo.getThemes();
+    expect(Object.keys(themes)).toEqual(['light', 'dark']);
+  });
+});
diff --git a/packages/spec/README.md b/packages/spec/README.md
index 882a068f..b099f4da 100644
--- a/packages/spec/README.md
+++ b/packages/spec/README.md
@@ -103,19 +103,19 @@ This table will clarify better:
 ### example
 
 ```typescript
-theme.set({
+morfeo.setTheme("light", {
   colors: { primary: '#fefefe', ... },
   spacings: { xxs: '8px', xs: '16px', ... },
-	...
+  ...rest
 });
 // @morfeo/core
-const style = parsers.resolve({ bg: 'primary', px: 'xs' });
+const style = morfeo.resolve({ bg: 'primary', px: 'xs' });
 // @morfeo/styled-components-web
 const Button = styled.button({ bg: 'primary', px: 'xs' });
 // @morfeo/react
 const style = useStyle({ bg: 'primary', px: 'xs' });
 // @morfeo/svelte
-<button use:morfeo={{ bg: 'primary', px: 'xs' }} />
+<button use:morfeoStyle={{ bg: 'primary', px: 'xs' }} />
 ```
 
 In this case the style `{ bg: 'primary', px: 'xs' }` will be resolved in:
diff --git a/packages/styled-components-web/README.md b/packages/styled-components-web/README.md
index a1b99877..eb2c0e72 100644
--- a/packages/styled-components-web/README.md
+++ b/packages/styled-components-web/README.md
@@ -115,10 +115,10 @@ To set your own Theme use the **@morfeo/web theme API** instead.
 // App.js
 
 import { ThemeProvider } from '@morfeo/styled-components-web';
-import { theme } from '@morfeo/web';
+import { morfeo } from '@morfeo/web';
 import { myTheme } from './myTheme';
 
-theme.set(myTheme);
+morfeo.setTheme('default', myTheme);
 
 export const App = () => {
   return (
diff --git a/packages/svelte/README.md b/packages/svelte/README.md
index e285475b..2575adce 100644
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@@ -30,23 +30,23 @@ yarn add @morfeo/web @morfeo/svelte
 
 ```html
 <script>
-	import { morfeo } from "@morfeo/svelte";
+  import { morfeoStyle } from "@morfeo/svelte";
 </script>
 
-<button use:morfeo={{...$$restProps, componentName: 'Button' }}>
+<button use:morfeoStyle={{...$$restProps, componentName: 'Button' }}>
   <slot></slot>
 </button>
 ```
 
 This component can now be stylized referring to the theme with inline style.
 
-```html
+```jsx
 <script>
   import Button from './Button.svelte';
 </script>
 
 <div>
-  <button bg="dark" borerRadius="m" px="xs" py="xxs">Click me</button>
+  <Button bg="dark" borerRadius="m" px="xs" py="xxs">Click me</Button>
 </div>
 ```
 
@@ -88,15 +88,15 @@ const myTheme = {
 };
 ```
 
-```html
+```jsx
 <script>
   import Button from './Button.svelte';
 </script>
 
 <div>
-  <button>Regular button</button>
-  <button variant="primary">Primary button</button>
+  <Button>Regular button</Button>
+  <Button variant="primary">Primary button</Button>
   <!-- This will be rendered with the attribute type="submit" -->
-  <button variant="submit">Submit button</button>
+  <Button variant="submit">Submit button</Button>
 </div>
 ```
diff --git a/packages/svelte/tests/morfeo.test.ts b/packages/svelte/tests/morfeo.test.ts
index fe9762bf..88ba34a9 100644
--- a/packages/svelte/tests/morfeo.test.ts
+++ b/packages/svelte/tests/morfeo.test.ts
@@ -25,7 +25,7 @@ const THEME: Theme = {
 
 describe('morfeo', () => {
   beforeAll(() => {
-    morfeo.setTheme(THEME);
+    morfeo.setTheme('default', THEME);
   });
 
   test('should add default className to the element', () => {
diff --git a/packages/web/README.md b/packages/web/README.md
index 4ba4bbc0..641ed198 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -48,9 +48,9 @@ In addition to the core library, the web package adds the parsers to handle **ps
 You can pass to the `resolve` method any pseudo class with the format '&:{pseudo}', for example:
 
 ```typescript
-import { parsers } from '@morfeo/web';
+import { morfeo } from '@morfeo/web';
 
-const style = parsers.resolve({
+const style = morfeo.resolve({
   bg: 'primary',
   '&:hover': {
     bg: 'secondary',
diff --git a/packages/web/src/utils/resetCss.ts b/packages/web/src/utils/resetCss.ts
index ac895c1e..39fc3058 100644
--- a/packages/web/src/utils/resetCss.ts
+++ b/packages/web/src/utils/resetCss.ts
@@ -262,7 +262,7 @@ textarea {
  * import { myTheme } from './myTheme';
  *
  * resetCss();
- * morfeo.setTheme(myTheme);
+ * morfeo.setTheme('themeName', myTheme);
  * ```
  */
 export function resetCss() {