@zendeskgarden/react-theming 9.5.0 → 9.5.2

package/dist/esm/elements/ColorSchemeProvider.js

@@ -4,12 +4,12 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import React, { createContext, useMemo, useCallback, useState, useEffect } from 'react';
+import React, { createContext, useMemo, useEffect, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
 
-const useColorScheme = function (initialState) {
-  let colorSchemeKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'color-scheme';
+const mediaQuery = typeof window === 'undefined' ? undefined : window.matchMedia('(prefers-color-scheme: dark)');
+const useColorScheme = (initialState, colorSchemeKey) => {
   const localStorage = typeof window === 'undefined' ? undefined : window.localStorage;
-  const mediaQuery = typeof window === 'undefined' ? undefined : window.matchMedia('(prefers-color-scheme: dark)');
   const getState = useCallback(_state => {
     const isSystem = _state === 'system' || _state === undefined || _state === null;
     let colorScheme;
@@ -22,21 +22,8 @@ const useColorScheme = function (initialState) {
       isSystem,
       colorScheme
     };
-  }, [mediaQuery?.matches]);
+  }, []);
   const [state, setState] = useState(getState(localStorage?.getItem(colorSchemeKey) || initialState));
-  useEffect(() => {
-    const eventListener = () => {
-      setState(getState('system'));
-    };
-    if (state.isSystem) {
-      mediaQuery?.addEventListener('change', eventListener);
-    } else {
-      mediaQuery?.removeEventListener('change', eventListener);
-    }
-    return () => {
-      mediaQuery?.removeEventListener('change', eventListener);
-    };
-  }, [getState, state.isSystem, mediaQuery]);
   return {
     isSystem: state.isSystem,
     colorScheme: state.colorScheme,
@@ -50,8 +37,8 @@ const ColorSchemeContext = createContext(undefined);
 const ColorSchemeProvider = _ref => {
   let {
     children,
-    colorSchemeKey,
-    initialColorScheme
+    colorSchemeKey = 'color-scheme',
+    initialColorScheme = 'system'
   } = _ref;
   const {
     isSystem,
@@ -63,9 +50,26 @@ const ColorSchemeProvider = _ref => {
     isSystem,
     setColorScheme
   }), [isSystem, colorScheme, setColorScheme]);
+  useEffect(() => {
+    const eventListener = () => {
+      setColorScheme('system');
+    };
+    if (isSystem) {
+      mediaQuery?.addEventListener('change', eventListener);
+    } else {
+      mediaQuery?.removeEventListener('change', eventListener);
+    }
+    return () => {
+      mediaQuery?.removeEventListener('change', eventListener);
+    };
+  }, [isSystem, setColorScheme]);
   return React.createElement(ColorSchemeContext.Provider, {
     value: contextValue
   }, children);
 };
+ColorSchemeProvider.propTypes = {
+  colorSchemeKey: PropTypes.string,
+  initialColorScheme: PropTypes.oneOf(['light', 'dark', 'system'])
+};
 
 export { ColorSchemeContext, ColorSchemeProvider };

package/dist/esm/utils/getColor.js

@@ -4,7 +4,7 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import { getScale, parseToRgba } from 'color2k';
+import { getScale, toHex as toHex$1, parseToRgba } from 'color2k';
 import { getContrast, rgba, darken, lighten } from 'polished';
 import get from 'lodash.get';
 import memoize from 'lodash.memoize';
@@ -97,7 +97,7 @@ const generateColorScale = memoize(color => {
   const colors = [];
   const contrastRatios = [];
   for (let i = 0; i <= scaleSize; i++) {
-    const _color = scale(i);
+    const _color = toHex$1(scale(i));
     colors.push(_color);
     contrastRatios.push(getContrast('#FFF', _color));
   }

package/dist/index.cjs.js

@@ -7,6 +7,7 @@
 'use strict';
 
 var React = require('react');
+var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var color2k = require('color2k');
 var polished = require('polished');
@@ -16,19 +17,19 @@ var memoize = require('lodash.memoize');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var get__default = /*#__PURE__*/_interopDefault(get);
 var memoize__default = /*#__PURE__*/_interopDefault(memoize);
 
-const useColorScheme$1 = function (initialState) {
-  let colorSchemeKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'color-scheme';
+const mediaQuery$1 = typeof window === 'undefined' ? undefined : window.matchMedia('(prefers-color-scheme: dark)');
+const useColorScheme$1 = (initialState, colorSchemeKey) => {
   const localStorage = typeof window === 'undefined' ? undefined : window.localStorage;
-  const mediaQuery = typeof window === 'undefined' ? undefined : window.matchMedia('(prefers-color-scheme: dark)');
   const getState = React.useCallback(_state => {
     const isSystem = _state === 'system' || _state === undefined || _state === null;
     let colorScheme;
     if (isSystem) {
-      colorScheme = mediaQuery?.matches ? 'dark' : 'light';
+      colorScheme = mediaQuery$1?.matches ? 'dark' : 'light';
     } else {
       colorScheme = _state;
     }
@@ -36,21 +37,8 @@ const useColorScheme$1 = function (initialState) {
       isSystem,
       colorScheme
     };
-  }, [mediaQuery?.matches]);
+  }, []);
   const [state, setState] = React.useState(getState(localStorage?.getItem(colorSchemeKey) || initialState));
-  React.useEffect(() => {
-    const eventListener = () => {
-      setState(getState('system'));
-    };
-    if (state.isSystem) {
-      mediaQuery?.addEventListener('change', eventListener);
-    } else {
-      mediaQuery?.removeEventListener('change', eventListener);
-    }
-    return () => {
-      mediaQuery?.removeEventListener('change', eventListener);
-    };
-  }, [getState, state.isSystem, mediaQuery]);
   return {
     isSystem: state.isSystem,
     colorScheme: state.colorScheme,
@@ -64,8 +52,8 @@ const ColorSchemeContext = React.createContext(undefined);
 const ColorSchemeProvider = _ref => {
   let {
     children,
-    colorSchemeKey,
-    initialColorScheme
+    colorSchemeKey = 'color-scheme',
+    initialColorScheme = 'system'
   } = _ref;
   const {
     isSystem,
@@ -77,10 +65,27 @@ const ColorSchemeProvider = _ref => {
     isSystem,
     setColorScheme
   }), [isSystem, colorScheme, setColorScheme]);
+  React.useEffect(() => {
+    const eventListener = () => {
+      setColorScheme('system');
+    };
+    if (isSystem) {
+      mediaQuery$1?.addEventListener('change', eventListener);
+    } else {
+      mediaQuery$1?.removeEventListener('change', eventListener);
+    }
+    return () => {
+      mediaQuery$1?.removeEventListener('change', eventListener);
+    };
+  }, [isSystem, setColorScheme]);
   return React__default.default.createElement(ColorSchemeContext.Provider, {
     value: contextValue
   }, children);
 };
+ColorSchemeProvider.propTypes = {
+  colorSchemeKey: PropTypes__default.default.string,
+  initialColorScheme: PropTypes__default.default.oneOf(['light', 'dark', 'system'])
+};
 
 const PALETTE = {
   black: '#000',
@@ -714,7 +719,7 @@ const generateColorScale = memoize__default.default(color => {
   const colors = [];
   const contrastRatios = [];
   for (let i = 0; i <= scaleSize; i++) {
-    const _color = scale(i);
+    const _color = color2k.toHex(scale(i));
     colors.push(_color);
     contrastRatios.push(polished.getContrast('#FFF', _color));
   }

package/dist/typings/elements/ColorSchemeProvider.d.ts

@@ -5,6 +5,13 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
 import { IColorSchemeContext, IColorSchemeProviderProps } from '../types';
 export declare const ColorSchemeContext: React.Context<IColorSchemeContext | undefined>;
-export declare const ColorSchemeProvider: ({ children, colorSchemeKey, initialColorScheme }: PropsWithChildren<IColorSchemeProviderProps>) => React.JSX.Element;
+export declare const ColorSchemeProvider: {
+    ({ children, colorSchemeKey, initialColorScheme }: PropsWithChildren<IColorSchemeProviderProps>): React.JSX.Element;
+    propTypes: {
+        colorSchemeKey: PropTypes.Requireable<string>;
+        initialColorScheme: PropTypes.Requireable<string>;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.5.0",
+  "version": "9.5.2",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "43546784a9aa985332ddcc6dd09209a11e2c03ff"
+  "gitHead": "8810b8dc249ca752f9adfa8972a72860cc18c77b"
 }