feat: new MD Color Schemes

Author: nolimits4web

.eslintignore

@@ -14,6 +14,7 @@ src/core/framework7-lite.js
 src/core/modules/demo-module.js
 src/core/modules/component/snabbdom
 src/core/shared/material-color-utils.js
+src/material-color-utilities
 woff2
 
 src/vue-temp

.prettierignore

@@ -12,5 +12,6 @@ kitchen-sink/svelte/dist
 kitchen-sink/**/*.json
 src/vue-temp
 src/core/shared/material-color-utils.js
+src/material-color-utilities
 .nova
 package.json

kitchen-sink/core/pages/color-themes.html

@@ -75,6 +75,41 @@
           `)}
         </div>
       </div>
+
+      <div class="block-title block-title-medium">Material Color Scheme</div>
+      <div class="list list-strong inset">
+        <ul>
+          <li>
+            <label class="item-content">
+              <div class="item-inner">
+                <div class="item-title">Monochrome</div>
+                <div class="item-after">
+                  <div class="toggle toggle-init">
+                    <input type="checkbox" checked=${monochrome} @change=${(e)=>
+                    setMdColorSchemeMonochrome(e.target.checked)} />
+                    <span class="toggle-icon"></span>
+                  </div>
+                </div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="item-content">
+              <div class="item-inner">
+                <div class="item-title">Vibrant</div>
+                <div class="item-after">
+                  <div class="toggle toggle-init">
+                    <input type="checkbox" checked=${vibrant} @change=${(e)=> setMdColorSchemeVibrant(e.target.checked)}
+                    />
+                    <span class="toggle-icon"></span>
+                  </div>
+                </div>
+              </div>
+            </label>
+          </li>
+        </ul>
+      </div>
+
       <div class="block-title block-title-medium">Custom Color Theme</div>
       <div class="list list-strong-ios list-outline-ios">
         <ul>
@@ -104,6 +139,8 @@
     const colors = Object.keys($f7.colors).filter((c) => c !== 'primary' && c !== 'white' && c !== 'black');
 
     let colorPicker;
+    let monochrome = false;
+    let vibrant = false;
 
     const setScheme = (newTheme) => {
       $f7.setDarkMode(newTheme === 'dark');
@@ -126,6 +163,28 @@
       $update();
     }
 
+    const setMdColorScheme = () => {
+      if (!vibrant && !monochrome) {
+        $f7.setMdColorScheme('default');
+      } else if (vibrant && !monochrome) {
+        $f7.setMdColorScheme('vibrant');
+      } else if (!vibrant && monochrome) {
+        $f7.setMdColorScheme('monochrome');
+      } else if (vibrant && monochrome) {
+        $f7.setMdColorScheme('vibrant-monochrome');
+      }
+      $update();
+    }
+
+    const setMdColorSchemeMonochrome = (value) => {
+      monochrome = value;
+      setMdColorScheme();
+    }
+    const setMdColorSchemeVibrant = (value) => {
+      vibrant = value;
+      setMdColorScheme();
+    }
+
     $on('pageInit', () => {
       let timeout;
       colorPicker = $f7.colorPicker.create({
@@ -152,4 +211,4 @@
     return $render;
   };
 
-</script>
+</script>

package-lock.json

@@ -78,7 +78,6 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
-    "@material/material-color-utilities": "^0.2.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^23.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",

package.json

@@ -3,20 +3,13 @@ const path = require('path');
 const { rollup } = require('rollup');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const commonjs = require('@rollup/plugin-commonjs');
-const virtual = require('@rollup/plugin-virtual');
 const { minify } = require('terser');
 
 async function build(cb) {
   const outputFile = path.resolve(__dirname, '../src/core/shared/material-color-utils.js');
   await rollup({
-    input: 'entry',
-    plugins: [
-      virtual({
-        entry: `export { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities';`,
-      }),
-      nodeResolve({ mainFields: ['module', 'main', 'jsnext'] }),
-      commonjs(),
-    ],
+    input: path.resolve(__dirname, '../src/material-color-utilities/source.js'),
+    plugins: [nodeResolve({ mainFields: ['module', 'main', 'jsnext'] }), commonjs()],
   })
     .then((bundle) => {
       return bundle.write({

scripts/build-material-color-utils.js

@@ -63,6 +63,8 @@ export interface Framework7Parameters {
   iosTranslucentModals?: boolean;
   /** Object with app colors where `primary` color (key) defines main app color theme */
   colors?: object;
+  /** Material color scheme. Can be `default`, `vibrant`, `monochrome` or `monochrome-vibrant` */
+  mdColorScheme?: string;
   /** userAgent string. Required for browser/device detection when rendered on server-side */
   userAgent?: string;
   /** Required for current route detection when rendered on server-side */

src/core/components/app/app-class.d.ts

@@ -51,6 +51,7 @@ class Framework7 extends Framework7Class {
       componentUrl: undefined,
       userAgent: null,
       url: null,
+      mdColorScheme: 'default',
       colors: {
         primary: '#007aff',
         red: '#ff3b30',
@@ -95,6 +96,7 @@ class Framework7 extends Framework7Class {
       passedParams,
       online: w.navigator.onLine,
       colors: app.params.colors,
+      mdColorScheme: app.params.mdColorScheme || 'default',
       darkMode: app.params.darkMode,
     });
 
@@ -126,10 +128,17 @@ class Framework7 extends Framework7Class {
     return app;
   }
 
-  setColorTheme(color) {
+  setColorTheme(color, mdColorScheme) {
     if (!color) return;
     const app = this;
     app.colors.primary = color;
+    app.mdColorScheme = mdColorScheme || app.mdColorScheme;
+    app.setColors();
+  }
+
+  setMdColorScheme(mdColorScheme) {
+    const app = this;
+    app.mdColorScheme = mdColorScheme || app.mdColorScheme;
     app.setColors();
   }
 
@@ -141,7 +150,7 @@ class Framework7 extends Framework7Class {
       document.head.prepend(app.colorsStyleEl);
     }
 
-    app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors);
+    app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors, app.mdColorScheme);
   }
 
   mount(rootEl) {