@zendeskgarden/react-theming 9.4.0 → 9.5.1

package/README.md

@@ -42,7 +42,37 @@ complex, depending on your needs:
   behavior and RTL layout of Garden's tabs component with an alternate visual
   design (i.e. closer to the look of browser tabs).
 
-### RTL
+#### Color scheme
+
+The `ColorSchemeProvider` and `useColorScheme` hook add the capability for a
+user to persist a preferred system color scheme (`'light'`, `'dark'`, or
+`'system'`). See
+[Storybook](https://zendeskgarden.github.io/react-components/?path=/docs/packages-theming-colorschemeprovider--color-scheme-provider)
+for more details.
+
+```jsx
+import {
+  useColorScheme,
+  ColorSchemeProvider,
+  ThemeProvider,
+  DEFAULT_THEME
+} from '@zendeskgarden/react-theming';
+
+const ThemedApp = ({ children }) => {
+  const { colorScheme } = useColorScheme();
+  const theme = { ...DEFAULT_THEME, colors: { ...DEFAULT_THEME.colors, base: colorScheme } };
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+const App = ({ children }) => (
+  <ColorSchemeProvider>
+    <ThemedApp>{children}</ThemedApp>
+  </ColorSchemeProvider>
+);
+```
+
+#### RTL
 
 ```jsx
 import { ThemeProvider, DEFAULT_THEME } from '@zendeskgarden/react-theming';

package/dist/esm/elements/ColorSchemeProvider.js

@@ -0,0 +1,75 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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, useEffect, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+
+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 getState = useCallback(_state => {
+    const isSystem = _state === 'system' || _state === undefined || _state === null;
+    let colorScheme;
+    if (isSystem) {
+      colorScheme = mediaQuery?.matches ? 'dark' : 'light';
+    } else {
+      colorScheme = _state;
+    }
+    return {
+      isSystem,
+      colorScheme
+    };
+  }, []);
+  const [state, setState] = useState(getState(localStorage?.getItem(colorSchemeKey) || initialState));
+  return {
+    isSystem: state.isSystem,
+    colorScheme: state.colorScheme,
+    setColorScheme: colorScheme => {
+      setState(getState(colorScheme));
+      localStorage?.setItem(colorSchemeKey, colorScheme);
+    }
+  };
+};
+const ColorSchemeContext = createContext(undefined);
+const ColorSchemeProvider = _ref => {
+  let {
+    children,
+    colorSchemeKey = 'color-scheme',
+    initialColorScheme = 'system'
+  } = _ref;
+  const {
+    isSystem,
+    colorScheme,
+    setColorScheme
+  } = useColorScheme(initialColorScheme, colorSchemeKey);
+  const contextValue = useMemo(() => ({
+    colorScheme,
+    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/index.js

@@ -4,6 +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.
 */
+export { ColorSchemeProvider } from './elements/ColorSchemeProvider.js';
 export { ThemeProvider } from './elements/ThemeProvider.js';
 export { default as DEFAULT_THEME } from './elements/theme/index.js';
 export { default as PALETTE } from './elements/palette/index.js';
@@ -19,6 +20,7 @@ export { default as getLineHeight } from './utils/getLineHeight.js';
 export { getMenuPosition } from './utils/getMenuPosition.js';
 export { default as mediaQuery } from './utils/mediaQuery.js';
 export { default as arrowStyles } from './utils/arrowStyles.js';
+export { useColorScheme } from './utils/useColorScheme.js';
 export { useDocument } from './utils/useDocument.js';
 export { useWindow } from './utils/useWindow.js';
 export { useText } from './utils/useText.js';

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/esm/utils/useColorScheme.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 { useContext } from 'react';
+import { ColorSchemeContext } from '../elements/ColorSchemeProvider.js';
+
+const useColorScheme = () => {
+  const context = useContext(ColorSchemeContext);
+  if (!context) {
+    throw new Error('Error: this component must be rendered within a <ColorSchemeProvider>.');
+  }
+  return context;
+};
+
+export { useColorScheme };

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,10 +17,76 @@ 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 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 getState = React.useCallback(_state => {
+    const isSystem = _state === 'system' || _state === undefined || _state === null;
+    let colorScheme;
+    if (isSystem) {
+      colorScheme = mediaQuery$1?.matches ? 'dark' : 'light';
+    } else {
+      colorScheme = _state;
+    }
+    return {
+      isSystem,
+      colorScheme
+    };
+  }, []);
+  const [state, setState] = React.useState(getState(localStorage?.getItem(colorSchemeKey) || initialState));
+  return {
+    isSystem: state.isSystem,
+    colorScheme: state.colorScheme,
+    setColorScheme: colorScheme => {
+      setState(getState(colorScheme));
+      localStorage?.setItem(colorSchemeKey, colorScheme);
+    }
+  };
+};
+const ColorSchemeContext = React.createContext(undefined);
+const ColorSchemeProvider = _ref => {
+  let {
+    children,
+    colorSchemeKey = 'color-scheme',
+    initialColorScheme = 'system'
+  } = _ref;
+  const {
+    isSystem,
+    colorScheme,
+    setColorScheme
+  } = useColorScheme$1(initialColorScheme, colorSchemeKey);
+  const contextValue = React.useMemo(() => ({
+    colorScheme,
+    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',
   white: '#fff',
@@ -652,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));
   }
@@ -1333,6 +1400,14 @@ function arrowStyles(position) {
   return styled.css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;background-color:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSizePx, squareSizePx, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSizeRounded, inset, shift), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
+const useColorScheme = () => {
+  const context = React.useContext(ColorSchemeContext);
+  if (!context) {
+    throw new Error('Error: this component must be rendered within a <ColorSchemeProvider>.');
+  }
+  return context;
+};
+
 const useDocument = theme => {
   const [controlledDocument, setControlledDocument] = React.useState();
   React.useEffect(() => {
@@ -1486,6 +1561,7 @@ const MENU_POSITION = ['top', 'right', 'bottom', 'left'];
 const PLACEMENT = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
 
 exports.ARROW_POSITION = ARROW_POSITION;
+exports.ColorSchemeProvider = ColorSchemeProvider;
 exports.DEFAULT_THEME = DEFAULT_THEME;
 exports.MENU_POSITION = MENU_POSITION;
 exports.PALETTE = PALETTE;
@@ -1507,6 +1583,7 @@ exports.getMenuPosition = getMenuPosition;
 exports.mediaQuery = mediaQuery;
 exports.menuStyles = menuStyles;
 exports.retrieveComponentStyles = retrieveComponentStyles;
+exports.useColorScheme = useColorScheme;
 exports.useDocument = useDocument;
 exports.useText = useText;
 exports.useWindow = useWindow;

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

@@ -0,0 +1,17 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * 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, { 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;
+    propTypes: {
+        colorSchemeKey: PropTypes.Requireable<string>;
+        initialColorScheme: PropTypes.Requireable<string>;
+    };
+};

package/dist/typings/index.d.ts

@@ -4,6 +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.
  */
+export { ColorSchemeProvider } from './elements/ColorSchemeProvider';
 export { ThemeProvider } from './elements/ThemeProvider';
 export { default as DEFAULT_THEME } from './elements/theme';
 export { default as PALETTE } from './elements/palette';
@@ -19,10 +20,11 @@ export { default as getLineHeight } from './utils/getLineHeight';
 export { getMenuPosition } from './utils/getMenuPosition';
 export { default as mediaQuery } from './utils/mediaQuery';
 export { default as arrowStyles } from './utils/arrowStyles';
+export { useColorScheme } from './utils/useColorScheme';
 export { useDocument } from './utils/useDocument';
 export { useWindow } from './utils/useWindow';
 export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles';
 export { StyledBaseIcon } from './utils/StyledBaseIcon';
-export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IGardenTheme, type IStyledBaseIconProps, type IThemeProviderProps, type ArrowPosition, type CheckeredBackgroundParameters, type ColorParameters, type FocusBoxShadowParameters, type FocusStylesParameters, type MenuPosition, type Placement } from './types';
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IColorSchemeContext, type IColorSchemeProviderProps, type IGardenTheme, type IStyledBaseIconProps, type IThemeProviderProps, type ArrowPosition, type CheckeredBackgroundParameters, type ColorParameters, type ColorScheme, type FocusBoxShadowParameters, type FocusStylesParameters, type MenuPosition, type Placement } from './types';

package/dist/typings/types/index.d.ts

@@ -165,6 +165,28 @@ export interface IGardenTheme {
         xxl: string;
     };
 }
+export type ColorScheme = IGardenTheme['colors']['base'] | 'system';
+export interface IColorSchemeContext {
+    /** Returns the current color scheme */
+    colorScheme: IGardenTheme['colors']['base'];
+    /** Indicates whether the `colorScheme` is determined by the system */
+    isSystem: boolean;
+    /** Provides the mechanism for updating the current color scheme */
+    setColorScheme: (colorScheme: ColorScheme) => void;
+}
+export interface IColorSchemeProviderProps {
+    /**
+     * Sets the initial color scheme and provides `localStorage` persistence (see
+     * the `useColorScheme` hook). A user's stored preference overrides this
+     * value.
+     */
+    initialColorScheme?: ColorScheme;
+    /**
+     * Specifies the key used to store the user's preferred color scheme in
+     * `localStorage`
+     */
+    colorSchemeKey?: string;
+}
 export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenTheme>> {
     /**
      * Provides values for component styling. See styled-components

package/dist/typings/utils/useColorScheme.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+/**
+ * Provides the current color scheme for the context `ThemeProvider`.
+ *
+ * @returns {object} Current color scheme accessor and mutator.
+ */
+export declare const useColorScheme: () => import("..").IColorSchemeContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.4.0",
+  "version": "9.5.1",
   "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": "02e3f240b6f0c776fdae785254d6fe90cbfc37e4"
+  "gitHead": "2571d0225b784bb7c765316ed584d289d35d4605"
 }