feat: add theme removal

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',

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 });

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);
 

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');
 

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');

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');
 

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;
-  }
 }

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.
 :::
 

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
+```

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 (

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:

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",

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 (

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>}
     </>
   );
 }

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 (

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);
     });
   });
 

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: