Merge pull request #432 from material-components/add/rgb-color-genera…

…tion-client

Add RGB css var generation on client side

.eslintrc.json

@@ -35,7 +35,8 @@
     "jsx-a11y/click-events-have-key-events": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "import/no-extraneous-dependencies": "off"
+    "import/no-extraneous-dependencies": "off",
+    "jsdoc/valid-types": "warn"
   },
   "env": {
     "jest/globals": true,

plugin/assets/src/customizer/customize-preview.js

@@ -38,8 +38,9 @@ import {
 /**
  * Internal dependencies
  */
-import { STYLES } from '../customizer/components/google-fonts-control/styles';
+import { STYLES } from './components/google-fonts-control/styles';
 import { setConfig } from '../block-editor/utils/get-config';
+import { applyRgbValue } from '../../../../theme/assets/src/helper/apply-rgb-value';
 
 const getIconFontName = iconStyle => {
 	return iconStyle === 'filled'
@@ -100,6 +101,11 @@ export const COLOR_MODES = {
 						target: document.body,
 						dark: isDarkMode,
 					} );
+
+					applyRgbValue( colorPallete, {
+						target: document.body,
+						dark: isDarkMode,
+					} );
 				}
 			);
 		} );

theme/assets/src/front-end/components/dark-mode-switch.js

@@ -23,6 +23,7 @@ import {
 	themeFromSourceColor,
 	applyTheme,
 } from '@material/material-color-utilities';
+import { applyRgbValue } from '../../helper/apply-rgb-value';
 
 const body = document.body;
 export const ICONS = {
@@ -54,14 +55,21 @@ const maybeToggleDarkMode = event => {
 			target: document.body,
 			dark: true,
 		} );
+		applyRgbValue( colorPallete, {
+			target: document.body,
+			dark: true,
+		} );
 		body.setAttribute( 'data-color-scheme', 'dark' );
 		switcherIcon.textContent = ICONS.LIGHT_MODE;
 	} else {
 		applyTheme( colorPallete, {
 			target: document.body,
 			dark: false,
 		} );
-
+		applyRgbValue( colorPallete, {
+			target: document.body,
+			dark: false,
+		} );
 		body.setAttribute( 'data-color-scheme', 'light' );
 		switcherIcon.textContent = ICONS.DARK_MODE;
 	}

theme/assets/src/helper/apply-rgb-value.js

@@ -0,0 +1,56 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import {
+	blueFromArgb,
+	greenFromArgb,
+	redFromArgb,
+} from '@material/material-color-utilities';
+
+/**
+ * @typedef {Object} Option
+ * @property {boolean?}     dark   Dark mode.
+ * @property {HTMLElement?} target HTML target element.
+ */
+
+/** @typedef {import('@material/material-color-utilities').Theme} Theme Theme. */
+
+/**
+ * Apply RGB variable to given element.
+ *
+ * @param {Theme}  theme   generated from material library.
+ * @param {Option} options theme options
+ */
+export const applyRgbValue = ( theme, options ) => {
+	let _temp;
+	const target =
+		( options === null || options === void 0 ? void 0 : options.target ) ||
+		document.body;
+	const isDark =
+		( _temp =
+			options === null || options === void 0 ? void 0 : options.dark ) !==
+			null && _temp !== void 0
+			? _temp
+			: false;
+	const scheme = isDark ? theme.schemes.dark : theme.schemes.light;
+	for ( const [ key, value ] of Object.entries( scheme.toJSON() ) ) {
+		const token = key.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
+		const color = `${ redFromArgb( value ) },${ greenFromArgb(
+			value
+		) },${ blueFromArgb( value ) }`;
+		target.style.setProperty( `--md-sys-color-${ token }-rgb`, color );
+	}
+};