@devtools-ds/themes - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/cjs/AutoThemeProvider.js

@@ -1,2 +0,81 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.AutoThemeProvider=exports.isFirefox=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _themes=require("./themes");var _utils=require("./utils");const isWindowDefined=typeof window!=="undefined";const isFirefox=()=>{var _window,_window$navigator;if(isWindowDefined&&(_window=window)!==null&&_window!==void 0&&(_window$navigator=_window.navigator)!==null&&_window$navigator!==void 0&&_window$navigator.userAgent){if(window.navigator.userAgent.toLowerCase().includes("firefox")){return true}}return false};exports.isFirefox=isFirefox;const useDarkMode=()=>{const[darkMode,setDarkMode]=_react.default.useState(isWindowDefined&&window?window.matchMedia("(prefers-color-scheme: dark)").matches:false);_react.default.useEffect(()=>{if(!isWindowDefined){return}const mediaQuery=window.matchMedia("(prefers-color-scheme: dark)");const changeDarkMode=()=>setDarkMode(!darkMode);mediaQuery.addListener(changeDarkMode);return()=>{mediaQuery.removeListener(changeDarkMode)}},[darkMode]);return darkMode};const AutoThemeProvider=(_ref)=>{let{theme:propsTheme,colorScheme:propsColorScheme,autoStyle,children}=_ref,html=(0,_objectWithoutProperties2.default)(_ref,["theme","colorScheme","autoStyle","children"]);const isDark=useDarkMode();const colorScheme=propsColorScheme||(isDark?"dark":"light");const theme=propsTheme||(isFirefox()?"firefox":"chrome");const style={backgroundColor:_themes.all[theme][colorScheme].backgroundColor,color:_themes.all[theme][colorScheme].textColor,minHeight:"100%",width:"100%"};return _react.default.createElement(_utils.ThemeContext.Provider,{value:{theme,colorScheme}},_react.default.createElement("div",(0,_extends2.default)({style:autoStyle?style:undefined},html),children))};exports.AutoThemeProvider=AutoThemeProvider;
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFirefox = exports.AutoThemeProvider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _themes = require("./themes");
+var _utils = require("./utils");
+const _excluded = ["theme", "colorScheme", "autoStyle", "children"];
+const isWindowDefined = typeof window !== "undefined";
+
+/** Determine if the current browser is FireFox */
+const isFirefox = () => {
+  var _window, _window$navigator;
+  if (isWindowDefined && (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent) {
+    if (window.navigator.userAgent.toLowerCase().includes("firefox")) {
+      return true;
+    }
+  }
+  return false;
+};
+exports.isFirefox = isFirefox;
+/**
+ * Determine if the user has a "prefers-color-scheme" mode enabled in their browser.
+ * This is helpful for detecting if a user prefers dark mode.
+ */
+const useDarkMode = () => {
+  const [darkMode, setDarkMode] = _react.default.useState(isWindowDefined && window ? window.matchMedia("(prefers-color-scheme: dark)").matches : false);
+  _react.default.useEffect(() => {
+    if (!isWindowDefined) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    /** Run when the user changes this setting. */
+    const changeDarkMode = () => setDarkMode(!darkMode);
+    mediaQuery.addListener(changeDarkMode);
+    return () => {
+      mediaQuery.removeListener(changeDarkMode);
+    };
+  }, [darkMode]);
+  return darkMode;
+};
+
+/**
+ * A theme provider that automatically detects a users browser and colorScheme.
+ * Themes are set for each component using React Context.
+ * It also sets the background color and text color to the correct color.
+ */
+const AutoThemeProvider = _ref => {
+  let {
+      theme: propsTheme,
+      colorScheme: propsColorScheme,
+      autoStyle,
+      children
+    } = _ref,
+    html = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const isDark = useDarkMode();
+  const colorScheme = propsColorScheme || (isDark ? "dark" : "light");
+  const theme = propsTheme || (isFirefox() ? "firefox" : "chrome");
+  const style = {
+    backgroundColor: _themes.all[theme][colorScheme].backgroundColor,
+    color: _themes.all[theme][colorScheme].textColor,
+    minHeight: "100%",
+    width: "100%"
+  };
+  return /*#__PURE__*/_react.default.createElement(_utils.ThemeContext.Provider, {
+    value: {
+      theme,
+      colorScheme
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    style: autoStyle ? style : undefined
+  }, html), children));
+};
+exports.AutoThemeProvider = AutoThemeProvider;
 //# sourceMappingURL=AutoThemeProvider.js.map

dist/cjs/index.js

@@ -1,2 +0,39 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _themes=require("./themes");Object.keys(_themes).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_themes[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _themes[key]}})});var _utils=require("./utils");Object.keys(_utils).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_utils[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _utils[key]}})});var _AutoThemeProvider=require("./AutoThemeProvider");Object.keys(_AutoThemeProvider).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_AutoThemeProvider[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _AutoThemeProvider[key]}})});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _themes = require("./themes");
+Object.keys(_themes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _themes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _themes[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
+    }
+  });
+});
+var _AutoThemeProvider = require("./AutoThemeProvider");
+Object.keys(_AutoThemeProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AutoThemeProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutoThemeProvider[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

dist/cjs/themes.js

@@ -1,2 +0,131 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.all=exports.firefox=exports.chrome=void 0;const chrome={light:{backgroundColor:"#FFFFFF",textColor:"#303942",error:"#EC3941",errorBorder:"#FED7D6",errorBackground:"#FEF1F0",errorText:"#FF0000",warning:"#F5BD00",warningBorder:"#FFF5C2",warningBackground:"#FFFBE5",warningText:"#5C3D00",gray01:"#F3F3F3",gray02:"#E9E9E9",gray03:"#CDCDCD",gray04:"#C0C0C0",gray05:"#8E8E8E",gray06:"#444444",blue01:"#EDF2FC",blue02:"#CFE8FC",blue03:"#1A73E8",blue04:"#3646B6",blue05:"#2D0BC9",green01:"#317632",red01:"#CF4B49",purple01:"#AE97BB",purple02:"#BD84C2",purple03:"#881280",brown01:"#994400"},dark:{backgroundColor:"#252525",textColor:"#EDEEEE",error:"#EC3941",errorBorder:"#5C0100",errorBackground:"#290000",errorText:"#FD7E7E",warning:"#F5BD00",warningBorder:"#665500",warningBackground:"#332B00",warningText:"#FDFCF8",gray01:"#C8C8C8",gray02:"#B7B7B7",gray03:"#848484",gray04:"#3C3D3C",gray05:"#2A2A2D",gray06:"#202020",blue01:"#9ABBDB",blue02:"#59A6C9",blue03:"#0E639C",blue04:"#093D69",blue05:"#192538",orange01:"#F29766",orange02:"#EE8953",pink01:"#F6D9F8",pink02:"#AB98AC",purple01:"#D0D6FB",purple02:"#987FFD"}};exports.chrome=chrome;const firefox={light:{backgroundColor:"#FFFFFF",textColor:"#47474C",error:"#EA000E",errorBorder:"#FFD3DB",errorBackground:"#FFF1F5",errorText:"#B30000",warning:"#C5A500",warningBorder:"#F5EBA4",warningBackground:"#FFFCDB",warningText:"#7C5B00",gray01:"#FAFAFA",gray02:"#E9E9E9",gray03:"#BEBEC0",gray04:"#6A6A6A",gray05:"#575757",gray06:"#181818",blue01:"#F2FAFE",blue02:"#DFEFFF",blue03:"#007FEB",blue04:"#0A66E6",blue05:"#034AB4",green01:"#049600",green02:"#117C04",pink01:"#E51EBB",purple01:"#8304d7"},dark:{backgroundColor:"#232327",textColor:"#BABABB",error:"#FF0768",errorBorder:"#7C3A4C",errorBackground:"#502D36",errorText:"#FFAED3",warning:"#DCBE00",warningBorder:"#616134",warningBackground:"#4B4022",warningText:"#ECD79E",gray01:"#9D9D9E",gray02:"#404046",gray03:"#343439",gray04:"#27272C",gray05:"#18181A",gray06:"#0C0C0D",blue01:"#80C6FF",blue02:"#6FB9FF",blue03:"#5DC0FF",blue04:"#0A84FF",blue05:"#235895",green01:"#91E27F",green02:"#81DF6C",pink01:"#FF88EC",pink02:"#EB7ED9",purple01:"#C288FF"}};exports.firefox=firefox;const all={chrome,firefox};exports.all=all;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.firefox = exports.chrome = exports.all = void 0;
+const chrome = {
+  light: {
+    backgroundColor: "#FFFFFF",
+    textColor: "#303942",
+    error: "#EC3941",
+    errorBorder: "#FED7D6",
+    errorBackground: "#FEF1F0",
+    errorText: "#FF0000",
+    warning: "#F5BD00",
+    warningBorder: "#FFF5C2",
+    warningBackground: "#FFFBE5",
+    warningText: "#5C3D00",
+    gray01: "#F3F3F3",
+    gray02: "#E9E9E9",
+    gray03: "#CDCDCD",
+    gray04: "#C0C0C0",
+    gray05: "#8E8E8E",
+    gray06: "#444444",
+    blue01: "#EDF2FC",
+    blue02: "#CFE8FC",
+    blue03: "#1A73E8",
+    blue04: "#3646B6",
+    blue05: "#2D0BC9",
+    green01: "#317632",
+    red01: "#CF4B49",
+    purple01: "#AE97BB",
+    purple02: "#BD84C2",
+    purple03: "#881280",
+    brown01: "#994400"
+  },
+  dark: {
+    backgroundColor: "#252525",
+    textColor: "#EDEEEE",
+    error: "#EC3941",
+    errorBorder: "#5C0100",
+    errorBackground: "#290000",
+    errorText: "#FD7E7E",
+    warning: "#F5BD00",
+    warningBorder: "#665500",
+    warningBackground: "#332B00",
+    warningText: "#FDFCF8",
+    gray01: "#C8C8C8",
+    gray02: "#B7B7B7",
+    gray03: "#848484",
+    gray04: "#3C3D3C",
+    gray05: "#2A2A2D",
+    gray06: "#202020",
+    blue01: "#9ABBDB",
+    blue02: "#59A6C9",
+    blue03: "#0E639C",
+    blue04: "#093D69",
+    blue05: "#192538",
+    orange01: "#F29766",
+    orange02: "#EE8953",
+    pink01: "#F6D9F8",
+    pink02: "#AB98AC",
+    purple01: "#D0D6FB",
+    purple02: "#987FFD"
+  }
+};
+exports.chrome = chrome;
+const firefox = {
+  light: {
+    backgroundColor: "#FFFFFF",
+    textColor: "#47474C",
+    error: "#EA000E",
+    errorBorder: "#FFD3DB",
+    errorBackground: "#FFF1F5",
+    errorText: "#B30000",
+    warning: "#C5A500",
+    warningBorder: "#F5EBA4",
+    warningBackground: "#FFFCDB",
+    warningText: "#7C5B00",
+    gray01: "#FAFAFA",
+    gray02: "#E9E9E9",
+    gray03: "#BEBEC0",
+    gray04: "#6A6A6A",
+    gray05: "#575757",
+    gray06: "#181818",
+    blue01: "#F2FAFE",
+    blue02: "#DFEFFF",
+    blue03: "#007FEB",
+    blue04: "#0A66E6",
+    blue05: "#034AB4",
+    green01: "#049600",
+    green02: "#117C04",
+    pink01: "#E51EBB",
+    purple01: "#8304d7"
+  },
+  dark: {
+    backgroundColor: "#232327",
+    textColor: "#BABABB",
+    error: "#FF0768",
+    errorBorder: "#7C3A4C",
+    errorBackground: "#502D36",
+    errorText: "#FFAED3",
+    warning: "#DCBE00",
+    warningBorder: "#616134",
+    warningBackground: "#4B4022",
+    warningText: "#ECD79E",
+    gray01: "#9D9D9E",
+    gray02: "#404046",
+    gray03: "#343439",
+    gray04: "#27272C",
+    gray05: "#18181A",
+    gray06: "#0C0C0D",
+    blue01: "#80C6FF",
+    blue02: "#6FB9FF",
+    blue03: "#5DC0FF",
+    blue04: "#0A84FF",
+    blue05: "#235895",
+    green01: "#91E27F",
+    green02: "#81DF6C",
+    pink01: "#FF88EC",
+    pink02: "#EB7ED9",
+    purple01: "#C288FF"
+  }
+};
+exports.firefox = firefox;
+const all = {
+  chrome,
+  firefox
+};
+exports.all = all;
 //# sourceMappingURL=themes.js.map

dist/cjs/utils.js

@@ -1,2 +0,92 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useTheme=exports.ThemeProvider=exports.useDarkMode=exports.ThemeContext=exports.themes=exports.colorSchemes=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _clsx=_interopRequireDefault(require("clsx"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}const colorSchemes=["light","dark"];exports.colorSchemes=colorSchemes;const themes=["chrome","firefox"];exports.themes=themes;const isWindowDefined=typeof window!=="undefined";const ThemeContext=_react.default.createContext({theme:"chrome",colorScheme:"light"});exports.ThemeContext=ThemeContext;const useDarkMode=()=>{const[darkMode,setDarkMode]=_react.default.useState(isWindowDefined&&window?window.matchMedia("(prefers-color-scheme: dark)").matches:false);_react.default.useEffect(()=>{if(!isWindowDefined){return}const mediaQuery=window.matchMedia("(prefers-color-scheme: dark)");const changeDarkMode=()=>setDarkMode(!darkMode);mediaQuery.addListener(changeDarkMode);return()=>{mediaQuery.removeListener(changeDarkMode)}},[darkMode]);return darkMode};exports.useDarkMode=useDarkMode;const ThemeProvider=(_ref)=>{let{children}=_ref,value=(0,_objectWithoutProperties2.default)(_ref,["children"]);const wrappedTheme=_react.default.useContext(ThemeContext);return _react.default.createElement(ThemeContext.Provider,{value:_objectSpread(_objectSpread({},wrappedTheme),value)},children)};exports.ThemeProvider=ThemeProvider;const useTheme=(props,styles={})=>{const themeContext=_react.default.useContext(ThemeContext);const currentTheme=props.theme||themeContext.theme||"chrome";const currentColorScheme=props.colorScheme||themeContext.colorScheme||"light";const themeClass=(0,_clsx.default)(styles[currentTheme],styles[currentColorScheme]);return{currentColorScheme,currentTheme,themeClass}};exports.useTheme=useTheme;
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = exports.useDarkMode = exports.themes = exports.colorSchemes = exports.ThemeProvider = exports.ThemeContext = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+const _excluded = ["children"];
+const colorSchemes = ["light", "dark"];
+exports.colorSchemes = colorSchemes;
+const themes = ["chrome", "firefox"];
+exports.themes = themes;
+const isWindowDefined = typeof window !== "undefined";
+
+/**
+ * Get all of the props for an HTML element + add the theme props.
+ * Used to easily type the rest props of a component and add theming.
+ *
+ * @example
+ * export interface ButtonProps extends ThemeableElement<'button'> {
+ *   size?: Sizes;
+ * }
+ */
+
+const ThemeContext = /*#__PURE__*/_react.default.createContext({
+  theme: "chrome",
+  colorScheme: "light"
+});
+
+/**
+ * Determine if the user has a "prefers-color-scheme" mode enabled in their browser.
+ * This is helpful for detecting if a user prefers dark mode.
+ */
+exports.ThemeContext = ThemeContext;
+const useDarkMode = () => {
+  const [darkMode, setDarkMode] = _react.default.useState(isWindowDefined && window ? window.matchMedia("(prefers-color-scheme: dark)").matches : false);
+  _react.default.useEffect(() => {
+    if (!isWindowDefined) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    /** Run when the user changes this setting. */
+    const changeDarkMode = () => setDarkMode(!darkMode);
+    mediaQuery.addListener(changeDarkMode);
+    return () => {
+      mediaQuery.removeListener(changeDarkMode);
+    };
+  }, [darkMode]);
+  return darkMode;
+};
+
+/** A React Context provider for devtools-ds themes */
+exports.useDarkMode = useDarkMode;
+const ThemeProvider = _ref => {
+  let {
+      children
+    } = _ref,
+    value = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const wrappedTheme = _react.default.useContext(ThemeContext);
+  return /*#__PURE__*/_react.default.createElement(ThemeContext.Provider, {
+    value: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, wrappedTheme), value)
+  }, children);
+};
+
+/**
+ * A hook to use the closest theme context.
+ *
+ * @param props - Current component props
+ * @param styles - The css modules for the component
+ *
+ * @example
+ * const { themeClass } = useTheme({ colorScheme, theme }, styles);
+ */
+exports.ThemeProvider = ThemeProvider;
+const useTheme = (props, styles = {}) => {
+  const themeContext = _react.default.useContext(ThemeContext);
+  const currentTheme = props.theme || themeContext.theme || "chrome";
+  const currentColorScheme = props.colorScheme || themeContext.colorScheme || "light";
+  const themeClass = (0, _clsx.default)(styles[currentTheme], styles[currentColorScheme]);
+  return {
+    currentColorScheme,
+    currentTheme,
+    themeClass
+  };
+};
+exports.useTheme = useTheme;
 //# sourceMappingURL=utils.js.map

dist/esm/AutoThemeProvider.js

@@ -1,2 +0,72 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React from"react";import{all}from"./themes";import{ThemeContext}from"./utils";const isWindowDefined=typeof window!=="undefined";export const isFirefox=()=>{var _window,_window$navigator;if(isWindowDefined&&(_window=window)!==null&&_window!==void 0&&(_window$navigator=_window.navigator)!==null&&_window$navigator!==void 0&&_window$navigator.userAgent){if(window.navigator.userAgent.toLowerCase().includes("firefox")){return true}}return false};const useDarkMode=()=>{const[darkMode,setDarkMode]=React.useState(isWindowDefined&&window?window.matchMedia("(prefers-color-scheme: dark)").matches:false);React.useEffect(()=>{if(!isWindowDefined){return}const mediaQuery=window.matchMedia("(prefers-color-scheme: dark)");const changeDarkMode=()=>setDarkMode(!darkMode);mediaQuery.addListener(changeDarkMode);return()=>{mediaQuery.removeListener(changeDarkMode)}},[darkMode]);return darkMode};export const AutoThemeProvider=(_ref)=>{let{theme:propsTheme,colorScheme:propsColorScheme,autoStyle,children}=_ref,html=_objectWithoutProperties(_ref,["theme","colorScheme","autoStyle","children"]);const isDark=useDarkMode();const colorScheme=propsColorScheme||(isDark?"dark":"light");const theme=propsTheme||(isFirefox()?"firefox":"chrome");const style={backgroundColor:all[theme][colorScheme].backgroundColor,color:all[theme][colorScheme].textColor,minHeight:"100%",width:"100%"};return React.createElement(ThemeContext.Provider,{value:{theme,colorScheme}},React.createElement("div",_extends({style:autoStyle?style:undefined},html),children))};
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["theme", "colorScheme", "autoStyle", "children"];
+import React from "react";
+import { all } from "./themes";
+import { ThemeContext } from "./utils";
+const isWindowDefined = typeof window !== "undefined";
+
+/** Determine if the current browser is FireFox */
+export const isFirefox = () => {
+  var _window, _window$navigator;
+  if (isWindowDefined && (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent) {
+    if (window.navigator.userAgent.toLowerCase().includes("firefox")) {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Determine if the user has a "prefers-color-scheme" mode enabled in their browser.
+ * This is helpful for detecting if a user prefers dark mode.
+ */
+const useDarkMode = () => {
+  const [darkMode, setDarkMode] = React.useState(isWindowDefined && window ? window.matchMedia("(prefers-color-scheme: dark)").matches : false);
+  React.useEffect(() => {
+    if (!isWindowDefined) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    /** Run when the user changes this setting. */
+    const changeDarkMode = () => setDarkMode(!darkMode);
+    mediaQuery.addListener(changeDarkMode);
+    return () => {
+      mediaQuery.removeListener(changeDarkMode);
+    };
+  }, [darkMode]);
+  return darkMode;
+};
+
+/**
+ * A theme provider that automatically detects a users browser and colorScheme.
+ * Themes are set for each component using React Context.
+ * It also sets the background color and text color to the correct color.
+ */
+export const AutoThemeProvider = _ref => {
+  let {
+      theme: propsTheme,
+      colorScheme: propsColorScheme,
+      autoStyle,
+      children
+    } = _ref,
+    html = _objectWithoutProperties(_ref, _excluded);
+  const isDark = useDarkMode();
+  const colorScheme = propsColorScheme || (isDark ? "dark" : "light");
+  const theme = propsTheme || (isFirefox() ? "firefox" : "chrome");
+  const style = {
+    backgroundColor: all[theme][colorScheme].backgroundColor,
+    color: all[theme][colorScheme].textColor,
+    minHeight: "100%",
+    width: "100%"
+  };
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: {
+      theme,
+      colorScheme
+    }
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    style: autoStyle ? style : undefined
+  }, html), children));
+};
 //# sourceMappingURL=AutoThemeProvider.js.map

dist/esm/index.js

@@ -1,2 +0,4 @@
-export*from"./themes";export*from"./utils";export*from"./AutoThemeProvider";
+export * from "./themes";
+export * from "./utils";
+export * from "./AutoThemeProvider";
 //# sourceMappingURL=index.js.map

dist/esm/themes.js

@@ -1,2 +0,122 @@
-export const chrome={light:{backgroundColor:"#FFFFFF",textColor:"#303942",error:"#EC3941",errorBorder:"#FED7D6",errorBackground:"#FEF1F0",errorText:"#FF0000",warning:"#F5BD00",warningBorder:"#FFF5C2",warningBackground:"#FFFBE5",warningText:"#5C3D00",gray01:"#F3F3F3",gray02:"#E9E9E9",gray03:"#CDCDCD",gray04:"#C0C0C0",gray05:"#8E8E8E",gray06:"#444444",blue01:"#EDF2FC",blue02:"#CFE8FC",blue03:"#1A73E8",blue04:"#3646B6",blue05:"#2D0BC9",green01:"#317632",red01:"#CF4B49",purple01:"#AE97BB",purple02:"#BD84C2",purple03:"#881280",brown01:"#994400"},dark:{backgroundColor:"#252525",textColor:"#EDEEEE",error:"#EC3941",errorBorder:"#5C0100",errorBackground:"#290000",errorText:"#FD7E7E",warning:"#F5BD00",warningBorder:"#665500",warningBackground:"#332B00",warningText:"#FDFCF8",gray01:"#C8C8C8",gray02:"#B7B7B7",gray03:"#848484",gray04:"#3C3D3C",gray05:"#2A2A2D",gray06:"#202020",blue01:"#9ABBDB",blue02:"#59A6C9",blue03:"#0E639C",blue04:"#093D69",blue05:"#192538",orange01:"#F29766",orange02:"#EE8953",pink01:"#F6D9F8",pink02:"#AB98AC",purple01:"#D0D6FB",purple02:"#987FFD"}};export const firefox={light:{backgroundColor:"#FFFFFF",textColor:"#47474C",error:"#EA000E",errorBorder:"#FFD3DB",errorBackground:"#FFF1F5",errorText:"#B30000",warning:"#C5A500",warningBorder:"#F5EBA4",warningBackground:"#FFFCDB",warningText:"#7C5B00",gray01:"#FAFAFA",gray02:"#E9E9E9",gray03:"#BEBEC0",gray04:"#6A6A6A",gray05:"#575757",gray06:"#181818",blue01:"#F2FAFE",blue02:"#DFEFFF",blue03:"#007FEB",blue04:"#0A66E6",blue05:"#034AB4",green01:"#049600",green02:"#117C04",pink01:"#E51EBB",purple01:"#8304d7"},dark:{backgroundColor:"#232327",textColor:"#BABABB",error:"#FF0768",errorBorder:"#7C3A4C",errorBackground:"#502D36",errorText:"#FFAED3",warning:"#DCBE00",warningBorder:"#616134",warningBackground:"#4B4022",warningText:"#ECD79E",gray01:"#9D9D9E",gray02:"#404046",gray03:"#343439",gray04:"#27272C",gray05:"#18181A",gray06:"#0C0C0D",blue01:"#80C6FF",blue02:"#6FB9FF",blue03:"#5DC0FF",blue04:"#0A84FF",blue05:"#235895",green01:"#91E27F",green02:"#81DF6C",pink01:"#FF88EC",pink02:"#EB7ED9",purple01:"#C288FF"}};export const all={chrome,firefox};
+export const chrome = {
+  light: {
+    backgroundColor: "#FFFFFF",
+    textColor: "#303942",
+    error: "#EC3941",
+    errorBorder: "#FED7D6",
+    errorBackground: "#FEF1F0",
+    errorText: "#FF0000",
+    warning: "#F5BD00",
+    warningBorder: "#FFF5C2",
+    warningBackground: "#FFFBE5",
+    warningText: "#5C3D00",
+    gray01: "#F3F3F3",
+    gray02: "#E9E9E9",
+    gray03: "#CDCDCD",
+    gray04: "#C0C0C0",
+    gray05: "#8E8E8E",
+    gray06: "#444444",
+    blue01: "#EDF2FC",
+    blue02: "#CFE8FC",
+    blue03: "#1A73E8",
+    blue04: "#3646B6",
+    blue05: "#2D0BC9",
+    green01: "#317632",
+    red01: "#CF4B49",
+    purple01: "#AE97BB",
+    purple02: "#BD84C2",
+    purple03: "#881280",
+    brown01: "#994400"
+  },
+  dark: {
+    backgroundColor: "#252525",
+    textColor: "#EDEEEE",
+    error: "#EC3941",
+    errorBorder: "#5C0100",
+    errorBackground: "#290000",
+    errorText: "#FD7E7E",
+    warning: "#F5BD00",
+    warningBorder: "#665500",
+    warningBackground: "#332B00",
+    warningText: "#FDFCF8",
+    gray01: "#C8C8C8",
+    gray02: "#B7B7B7",
+    gray03: "#848484",
+    gray04: "#3C3D3C",
+    gray05: "#2A2A2D",
+    gray06: "#202020",
+    blue01: "#9ABBDB",
+    blue02: "#59A6C9",
+    blue03: "#0E639C",
+    blue04: "#093D69",
+    blue05: "#192538",
+    orange01: "#F29766",
+    orange02: "#EE8953",
+    pink01: "#F6D9F8",
+    pink02: "#AB98AC",
+    purple01: "#D0D6FB",
+    purple02: "#987FFD"
+  }
+};
+export const firefox = {
+  light: {
+    backgroundColor: "#FFFFFF",
+    textColor: "#47474C",
+    error: "#EA000E",
+    errorBorder: "#FFD3DB",
+    errorBackground: "#FFF1F5",
+    errorText: "#B30000",
+    warning: "#C5A500",
+    warningBorder: "#F5EBA4",
+    warningBackground: "#FFFCDB",
+    warningText: "#7C5B00",
+    gray01: "#FAFAFA",
+    gray02: "#E9E9E9",
+    gray03: "#BEBEC0",
+    gray04: "#6A6A6A",
+    gray05: "#575757",
+    gray06: "#181818",
+    blue01: "#F2FAFE",
+    blue02: "#DFEFFF",
+    blue03: "#007FEB",
+    blue04: "#0A66E6",
+    blue05: "#034AB4",
+    green01: "#049600",
+    green02: "#117C04",
+    pink01: "#E51EBB",
+    purple01: "#8304d7"
+  },
+  dark: {
+    backgroundColor: "#232327",
+    textColor: "#BABABB",
+    error: "#FF0768",
+    errorBorder: "#7C3A4C",
+    errorBackground: "#502D36",
+    errorText: "#FFAED3",
+    warning: "#DCBE00",
+    warningBorder: "#616134",
+    warningBackground: "#4B4022",
+    warningText: "#ECD79E",
+    gray01: "#9D9D9E",
+    gray02: "#404046",
+    gray03: "#343439",
+    gray04: "#27272C",
+    gray05: "#18181A",
+    gray06: "#0C0C0D",
+    blue01: "#80C6FF",
+    blue02: "#6FB9FF",
+    blue03: "#5DC0FF",
+    blue04: "#0A84FF",
+    blue05: "#235895",
+    green01: "#91E27F",
+    green02: "#81DF6C",
+    pink01: "#FF88EC",
+    pink02: "#EB7ED9",
+    purple01: "#C288FF"
+  }
+};
+export const all = {
+  chrome,
+  firefox
+};
 //# sourceMappingURL=themes.js.map

dist/esm/utils.js

@@ -1,2 +0,79 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){_defineProperty(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}import React from"react";import makeClass from"clsx";export const colorSchemes=["light","dark"];export const themes=["chrome","firefox"];const isWindowDefined=typeof window!=="undefined";export const ThemeContext=React.createContext({theme:"chrome",colorScheme:"light"});export const useDarkMode=()=>{const[darkMode,setDarkMode]=React.useState(isWindowDefined&&window?window.matchMedia("(prefers-color-scheme: dark)").matches:false);React.useEffect(()=>{if(!isWindowDefined){return}const mediaQuery=window.matchMedia("(prefers-color-scheme: dark)");const changeDarkMode=()=>setDarkMode(!darkMode);mediaQuery.addListener(changeDarkMode);return()=>{mediaQuery.removeListener(changeDarkMode)}},[darkMode]);return darkMode};export const ThemeProvider=(_ref)=>{let{children}=_ref,value=_objectWithoutProperties(_ref,["children"]);const wrappedTheme=React.useContext(ThemeContext);return React.createElement(ThemeContext.Provider,{value:_objectSpread(_objectSpread({},wrappedTheme),value)},children)};export const useTheme=(props,styles={})=>{const themeContext=React.useContext(ThemeContext);const currentTheme=props.theme||themeContext.theme||"chrome";const currentColorScheme=props.colorScheme||themeContext.colorScheme||"light";const themeClass=makeClass(styles[currentTheme],styles[currentColorScheme]);return{currentColorScheme,currentTheme,themeClass}};
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["children"];
+import React from "react";
+import makeClass from "clsx";
+export const colorSchemes = ["light", "dark"];
+export const themes = ["chrome", "firefox"];
+const isWindowDefined = typeof window !== "undefined";
+
+/**
+ * Get all of the props for an HTML element + add the theme props.
+ * Used to easily type the rest props of a component and add theming.
+ *
+ * @example
+ * export interface ButtonProps extends ThemeableElement<'button'> {
+ *   size?: Sizes;
+ * }
+ */
+
+export const ThemeContext = /*#__PURE__*/React.createContext({
+  theme: "chrome",
+  colorScheme: "light"
+});
+
+/**
+ * Determine if the user has a "prefers-color-scheme" mode enabled in their browser.
+ * This is helpful for detecting if a user prefers dark mode.
+ */
+export const useDarkMode = () => {
+  const [darkMode, setDarkMode] = React.useState(isWindowDefined && window ? window.matchMedia("(prefers-color-scheme: dark)").matches : false);
+  React.useEffect(() => {
+    if (!isWindowDefined) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    /** Run when the user changes this setting. */
+    const changeDarkMode = () => setDarkMode(!darkMode);
+    mediaQuery.addListener(changeDarkMode);
+    return () => {
+      mediaQuery.removeListener(changeDarkMode);
+    };
+  }, [darkMode]);
+  return darkMode;
+};
+
+/** A React Context provider for devtools-ds themes */
+export const ThemeProvider = _ref => {
+  let {
+      children
+    } = _ref,
+    value = _objectWithoutProperties(_ref, _excluded);
+  const wrappedTheme = React.useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: _objectSpread(_objectSpread({}, wrappedTheme), value)
+  }, children);
+};
+
+/**
+ * A hook to use the closest theme context.
+ *
+ * @param props - Current component props
+ * @param styles - The css modules for the component
+ *
+ * @example
+ * const { themeClass } = useTheme({ colorScheme, theme }, styles);
+ */
+export const useTheme = (props, styles = {}) => {
+  const themeContext = React.useContext(ThemeContext);
+  const currentTheme = props.theme || themeContext.theme || "chrome";
+  const currentColorScheme = props.colorScheme || themeContext.colorScheme || "light";
+  const themeClass = makeClass(styles[currentTheme], styles[currentColorScheme]);
+  return {
+    currentColorScheme,
+    currentTheme,
+    themeClass
+  };
+};
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@devtools-ds/themes",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "./dist/cjs/index.js",
@@ -43,3 +43,3 @@ "module": "./dist/esm/index.js",
   },
-  "gitHead": "66f7d45baeabc9552acb25e3b3ebe28c8bb20d4f"
+  "gitHead": "53e5c67af2fa62f8044be93fb6e2af8573988aa4"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

84263

increased by5.44%

Lines of code

1335

increased by65.84%

Number of low quality alerts

1

decreased by-75%

No dependency changes