@devtools-ds/themes - npm Package Compare versions

Comparing version 1.0.4-canary.15.363.0 to 1.0.4-canary.18.378.0

dist/AutoThemeProvider.d.ts

		import React from "react";
		import { ThemeableElement } from "./utils";
		/** Determine if the current browser is FireFox */
		export declare const getBrowserTheme: () => "chrome" \| "firefox";
		export interface AutoThemeProviderProps extends ThemeableElement<"div"> {
		@@ -6,0 +4,0 @@ /** Whether to automatically change the font and background color */

dist/cjs/AutoThemeProvider.js

		@@ -1,2 +0,2 @@
		"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.AutoThemeProvider=exports.getBrowserTheme=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 getBrowserTheme=()=>{var _window,_window$navigator;if((_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"firefox"}}return"chrome"};exports.getBrowserTheme=getBrowserTheme;const useDarkMode=()=>{const[darkMode,setDarkMode]=_react.default.useState(window?window.matchMedia("(prefers-color-scheme: dark)").matches:false);_react.default.useEffect(()=>{if(!window){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\|\|getBrowserTheme();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.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 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};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;
		//# sourceMappingURL=AutoThemeProvider.js.map

dist/cjs/utils.js

		@@ -1,2 +0,2 @@
		"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useTheme=exports.ThemeProvider=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 ThemeContext=_react.default.createContext({theme:"chrome",colorScheme:"light"});exports.ThemeContext=ThemeContext;const useDarkMode=()=>{const[darkMode,setDarkMode]=_react.default.useState(window?window.matchMedia("(prefers-color-scheme: dark)").matches:false);_react.default.useEffect(()=>{if(!window){return}const mediaQuery=window.matchMedia("(prefers-color-scheme: dark)");const changeDarkMode=()=>setDarkMode(!darkMode);mediaQuery.addListener(changeDarkMode);return()=>{mediaQuery.removeListener(changeDarkMode)}},[darkMode]);return darkMode};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.ThemeProvider=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};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;
		//# sourceMappingURL=utils.js.map

dist/esm/AutoThemeProvider.js

		@@ -1,2 +0,2 @@
		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";export const getBrowserTheme=()=>{var _window,_window$navigator;if((_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"firefox"}}return"chrome"};const useDarkMode=()=>{const[darkMode,setDarkMode]=React.useState(window?window.matchMedia("(prefers-color-scheme: dark)").matches:false);React.useEffect(()=>{if(!window){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\|\|getBrowserTheme();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";import React from"react";import{all}from"./themes";import{ThemeContext}from"./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};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))};
		//# sourceMappingURL=AutoThemeProvider.js.map

dist/esm/utils.js

		@@ -1,2 +0,2 @@
		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"];export const ThemeContext=React.createContext({theme:"chrome",colorScheme:"light"});const useDarkMode=()=>{const[darkMode,setDarkMode]=React.useState(window?window.matchMedia("(prefers-color-scheme: dark)").matches:false);React.useEffect(()=>{if(!window){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 _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"});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}};
		//# sourceMappingURL=utils.js.map

package.json

		{
		"name": "@devtools-ds/themes",
		"version": "1.0.4-canary.15.363.0",
		"version": "1.0.4-canary.18.378.0",
		"main": "./dist/cjs/index.js",
		@@ -43,3 +43,3 @@ "module": "./dist/esm/index.js",
		},
		"gitHead": "5fafeabb33d280114640ce4171971ba3829164c0"
		"gitHead": "1669b7325150f94de6d6e3f442e3e54b45c27de2"
		}

dist/AutoThemeProvider.d.ts.map