Add new Theme Sketch (CKGrafico#70)

* add fonts to theme

* Add stripped to buttons

* Add avatar styles

* Add other element styles

* Export all themes in all platforms

* init theme switcher

* add importer function to switch

* cancel theme switcher

* fix index

* add better explanation for themes

* Update container.css

* Fix CKGrafico#74

* update version

.storybook/components/Customization.tsx

@@ -46,6 +46,11 @@ export function Customization(props: CustomizationProps) {
       name: 'Papanasi',
       value: 'papanasi',
       css: `/papanasi.css?${performance.now()}`
+    },
+    {
+      name: 'Sketch',
+      value: 'sketch',
+      css: `/sketch.css?${performance.now()}`
     }
   ];
 

compiler/compiler.tasks.js

@@ -71,7 +71,7 @@ const optionDefinitions = [
         })
     },
     {
-      title: `Compile Mitosis components: ${cliConfig.elements?.join(', ') || 'all'}`,
+      title: `Compile Mitosis Elements: ${cliConfig.elements?.join(', ') || 'all'}`,
       task: () => {
         return new Listr(
           cliConfig.platforms.map((platform) => ({

compiler/themes.tasks.js

@@ -2,7 +2,7 @@ const { Listr } = require('listr2');
 
 (async () => {
   const execa = (await import('execa')).command;
-  const themes = ['papanasi'];
+  const themes = ['papanasi', 'sketch'];
 
   const tasks = new Listr([
     {

docs/customization.stories.mdx

@@ -46,11 +46,22 @@ Our configured **Responsive Suffixes** are the same as our default breakpoints:
 --pa-breakpoint-xxl: 1920px; // @xxs`}
 ></Code>
 
+## Themes
+
+To create a custom theme for your application is easy as create a `.css` file and override the `custom properties` or just add new css values to the `BEM Classes` explained above.
+
+To help the user by default we are exporting our library without themes but there are also some default ones that you can use as base for your custom one, those are `papanasi.css`, `sketch.css`.
+
+Import them as any other file in your project, for example in a `react` project you can import like this:
+
+<Code language="javascript" code={`import "@papanasi/react/sketch.css";`}></Code>
+
+
 ## CSS Custom Properties
 
 We have defined a list of custom properties that we use to customize the components. You can easily override them in your project.
 
-For example if we want to modify the **variants**, there are 3 different groups of properties and those are the ones from the basi theme called `papanasi.css`:
+For example if we want to modify the **variants**, there are 3 different groups of properties and those are the ones from the basic theme called `papanasi.css`:
 
 <Code
   language="css"

hooks/post-install.hook.js

@@ -4,7 +4,7 @@ const mainPackageJson = require('../package.json');
 const dependencies = mainPackageJson.dependencies;
 const packagesJson = glob.sync(`./packages/**/package.json`);
 
-function copyMainPackageJsonDependencies(packageJson) {
+function copyMainDependencies(packageJson) {
   const data = fs.readFileSync(packageJson, 'utf8');
   const rawDependencies = Object.entries(dependencies)
     .map(([key, value]) => `\n    "${key}": "${value}"`)
@@ -14,4 +14,17 @@ function copyMainPackageJsonDependencies(packageJson) {
   fs.writeFileSync(packageJson, result, 'utf8');
 }
 
-packagesJson.forEach(copyMainPackageJsonDependencies);
+function copyThemes(packageJson) {
+  const data = fs.readFileSync(packageJson, 'utf8');
+  const rawDependencies = Object.entries(dependencies)
+    .map(([key, value]) => `\n    "${key}": "${value}"`)
+    .join(',');
+  const result = data.replace(/("dependencies": {)(.*)(  },\r?\n?  "peerDependencies)/gs, `$1${rawDependencies}\n$3`);
+
+  fs.writeFileSync(packageJson, result, 'utf8');
+}
+
+packagesJson.forEach((packagesJson) => {
+  copyMainDependencies(packagesJson);
+  copyThemes(packagesJson);
+});

package.json

@@ -2,7 +2,7 @@
   "name": "papanasi",
   "private": true,
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "compile": "node ./compiler",
     "dev": "node ./compiler/dev.tasks",

packages/angular/README.md

@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
       <strong>Code</strong> <br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
-      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
+      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

packages/angular/package.json

@@ -12,9 +12,9 @@
       "import": "./dist/papanasi-angular.es.js",
       "require": "./dist/papanasi-angular.umd.js"
     },
-    "./papanasi.css": {
-      "import": "./dist/papanasi.css",
-      "require": "./dist/papanasi.css"
+    "./*.css": {
+      "import": "./dist/themes/*.css",
+      "require": "./dist/themes/*.css"
     }
   },
   "dependencies": {
@@ -32,7 +32,7 @@
   ],
   "scripts": {
     "build": "rollup -c",
-    "postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
+    "postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
   },
   "publishConfig": {
     "access": "public"

packages/preact/README.md

@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
       <strong>Code</strong> <br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
-      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
+      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

packages/preact/package.json

@@ -12,9 +12,9 @@
       "import": "./dist/papanasi-preact.es.js",
       "require": "./dist/papanasi-preact.umd.js"
     },
-    "./papanasi.css": {
-      "import": "./dist/papanasi.css",
-      "require": "./dist/papanasi.css"
+    "./*.css": {
+      "import": "./dist/themes/*.css",
+      "require": "./dist/themes/*.css"
     }
   },
   "dependencies": {
@@ -33,7 +33,7 @@
   "scripts": {
     "prebuild": "yarn install",
     "build": "rollup -c",
-    "postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
+    "postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
   },
   "publishConfig": {
     "access": "public"

packages/qwik/README.md

@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
       <strong>Code</strong> <br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
-      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
+      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

packages/qwik/package.json

@@ -19,9 +19,9 @@
       "import": "./lib/style.css",
       "require": "./lib/style.css"
     },
-    "./papanasi.css": {
-      "import": "./lib/papanasi.css",
-      "require": "./lib/papanasi.css"
+    "./*.css": {
+      "import": "./lib/themes/*.css",
+      "require": "./lib/themes/*.css"
     }
   },
   "dependencies": {
@@ -43,7 +43,7 @@
     "build": "qwik build",
     "build.lib": "vite build --mode lib",
     "build.types": "tsc --emitDeclarationOnly",
-    "postbuild": "copyfiles ../../.themes/** ./lib/ --flat"
+    "postbuild": "copyfiles ../../.themes/** ./lib/themes --flat"
   },
   "publishConfig": {
     "access": "public"

packages/react/README.md

@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
       <strong>Code</strong> <br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
-      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
+      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

packages/react/package.json

@@ -12,9 +12,9 @@
       "import": "./dist/papanasi-react.es.js",
       "require": "./dist/papanasi-react.umd.js"
     },
-    "./papanasi.css": {
-      "import": "./dist/papanasi.css",
-      "require": "./dist/papanasi.css"
+    "./*.css": {
+      "import": "./dist/themes/*.css",
+      "require": "./dist/themes/*.css"
     }
   },
   "dependencies": {
@@ -34,7 +34,7 @@
   "scripts": {
     "prebuild": "yarn install",
     "build": "rollup -c",
-    "postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
+    "postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
   },
   "publishConfig": {
     "access": "public"

packages/solid/README.md

@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
       <strong>Code</strong> <br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
-      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
+      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

packages/solid/copy-css.js

@@ -13,5 +13,5 @@ const themesFiles = glob.sync(`../../.themes/**.css`);
 themesFiles.forEach((fileName) => {
   const file = path.parse(fileName);
 
-  fs.copySync(fileName, `./dist/${file.base}`);
+  fs.copySync(fileName, `./dist/themes/${file.base}`);
 });

packages/solid/package.json

@@ -16,9 +16,9 @@
       "require": "./dist/cjs/papanasi.js",
       "node": "./dist/cjs/papanasi.js"
     },
-    "./papanasi.css": {
-      "import": "./dist/papanasi.css",
-      "require": "./dist/papanasi.css"
+    "./*.css": {
+      "import": "./dist/themes/*.css",
+      "require": "./dist/themes/*.css"
     }
   },
   "dependencies": {

packages/svelte/README.md

@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
       <strong>Code</strong> <br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
-      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
+      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

packages/svelte/package.json

@@ -14,9 +14,9 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
-    "./papanasi.css": {
-      "import": "./papanasi.css",
-      "require": "./papanasi.css"
+    "./*.css": {
+      "import": "./dist/themes/*.css",
+      "require": "./dist/themes/*.css"
     }
   },
   "dependencies": {
@@ -36,7 +36,7 @@
   ],
   "scripts": {
     "build": "svelte-kit sync && svelte-package",
-    "postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
+    "postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
   },
   "publishConfig": {
     "access": "public"

packages/vue/README.md

@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
       <strong>Code</strong> <br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
-      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
+      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

packages/vue/package.json

@@ -12,9 +12,9 @@
       "import": "./dist/papanasi-vue.es.js",
       "require": "./dist/papanasi-vue.umd.js"
     },
-    "./papanasi.css": {
-      "import": "./dist/papanasi.css",
-      "require": "./dist/papanasi.css"
+    "./*.css": {
+      "import": "./dist/themes/*.css",
+      "require": "./dist/themes/*.css"
     }
   },
   "dependencies": {
@@ -32,7 +32,7 @@
   ],
   "scripts": {
     "build": "rollup -c",
-    "postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
+    "postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
   },
   "publishConfig": {
     "access": "public"

packages/webcomponents/README.md

@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
       <strong>Code</strong> <br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
-      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
+      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
       <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

packages/webcomponents/package.json

@@ -12,9 +12,9 @@
       "import": "./dist/papanasi-webcomponents.es.js",
       "require": "./dist/papanasi-webcomponents.umd.js"
     },
-    "./papanasi.css": {
-      "import": "./dist/papanasi.css",
-      "require": "./dist/papanasi.css"
+    "./*.css": {
+      "import": "./dist/themes/*.css",
+      "require": "./dist/themes/*.css"
     },
     "./custom-elements.json": {
       "import": "./custom-elements.json",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "scripts": {
-    "prebuild": "copyfiles ../../.themes/** ./dist/ --flat",
+    "prebuild": "copyfiles ../../.themes/** ./dist/themes --flat",
     "build": "run-s build:**",
     "build:code": "rollup -c",
     "build:styles": "replace \"\\.pa-(.*?)((--|__).*?)?((\\.pa|\\.is|\\.has).*?)?(,|:|{)\" \"pa-$1::part(pa-$1$2 $4)$6\" ./dist -r --include=\"*.es.js,*.umd.js,*.css\"",

rollup.themes.config.js

@@ -21,7 +21,7 @@ module.exports = () => {
           sourcemap: 'inline'
         }
       ],
-      plugins: [postcss({ ...postcssConfig, inject: false, extract: 'papanasi.css' })]
+      plugins: [postcss({ ...postcssConfig, inject: false, extract: `${cliConfig.theme}.css` })]
     }
   ];
 };

src/elements/components/avatar/avatar.css

@@ -4,6 +4,8 @@
   display: inline-flex;
 
   &__container {
+    background-color: var(--pa-avatar-background);
+    color: var(--pa-avatar-foreground);
     display: inline-flex;
     justify-content: center;
     align-items: center;

src/elements/components/avatar/avatar.service.ts

@@ -47,8 +47,8 @@ class AvatarService {
     debug(`AvatarService getColor: color: ${JSON.stringify(color)}`);
 
     return {
-      color: color.foreground,
-      'background-color': color.background
+      '--pa-avatar-foreground': color.foreground,
+      '--pa-avatar-background': color.background
     };
   }
 

src/elements/layout/container/container.css

@@ -2,7 +2,7 @@
 
 .pa-container {
   width: 100%;
-  max-width: var(--pa-grid-container-max-width);
+  max-width: var(--pa-grid-max-width);
 
   &--fluid {
     max-width: 100%;

src/styles/themes/papanasi/avatar.css

@@ -11,6 +11,7 @@
   &__container {
     border-radius: var(--pa-avatar-radius);
     box-sizing: border-box;
+    font-family: var(--pa-font-family);
     font-weight: var(--pa-avatar-initials-weight);
     height: var(--pa-avatar-size);
     padding: var(--pa-avatar-padding);
@@ -19,8 +20,8 @@
 
   @each $variant in primary, secondary, tertiary {
     &--$(variant) &__container {
-      background-color: var(--pa-color-$(variant)-normal);
-      color: var(--pa-color-basic-brightest);
+      --pa-avatar-background: var(--pa-color-$(variant)-normal);
+      --pa-avatar-foreground: var(--pa-color-basic-brightest);
     }
   }