@devtools-ds/themes - npm Package Compare versions

Comparing version 1.1.3-canary.23.457.0 to 1.1.3-canary.23.465.0

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 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;
+"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;
 //# sourceMappingURL=utils.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"];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}};
+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}};
 //# sourceMappingURL=utils.js.map

dist/utils.d.ts

@@ -24,2 +24,7 @@ import React from "react";
 export declare const ThemeContext: React.Context<Themeable>;
+/**
+ * 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 declare const useDarkMode: () => boolean;
 /** A React Context provider for devtools-ds themes */
@@ -26,0 +31,0 @@ export declare const ThemeProvider: ({ children, ...value }: React.PropsWithChildren<Themeable>) => JSX.Element;

package.json

 {
   "name": "@devtools-ds/themes",
-  "version": "1.1.3-canary.23.457.0",
+  "version": "1.1.3-canary.23.465.0",
   "main": "./dist/cjs/index.js",
@@ -43,3 +43,3 @@ "module": "./dist/esm/index.js",
   },
-  "gitHead": "f3250b2ebc1166e56be7c6c9f18884ec7d62e542"
+  "gitHead": "563b1a1eb4d898ef8869344f68bfe94d71308b45"
 }

No alert changes

Improved metrics

Total package byte prevSize

79267

increased by0.42%

Lines of code

805

increased by0.75%

No dependency changes