@devtools-ds/themes - npm Package Compare versions

Comparing version 0.133.0 to 1.0.0

CHANGELOG.md

@@ -0,1 +1,17 @@
+# v1.0.0 (Tue Feb 02 2021)
+
+#### 💥 Breaking Change
+
+- Initial release [#8](https://github.com/intuit/devtools-ds/pull/8) ([@tylerkrupicka](https://github.com/tylerkrupicka))
+
+#### 🐛 Bug Fix
+
+- make chrome default theme ([@tylerkrupicka](https://github.com/tylerkrupicka))
+
+#### Authors: 1
+
+- Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka))
+
+---
+
 # v0.130.5 (Sun Jan 24 2021)
@@ -2,0 +18,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.AutoThemeProvider=exports.ThemeProvider=exports.ThemeContext=exports.themes=exports.colorSchemes=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));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"));var _reactDeviceDetect=require("react-device-detect");var _themes=require("./themes");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:"firefox",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 AutoThemeProvider=(_ref2)=>{let{theme:propsTheme,colorScheme:propsColorScheme,autoStyle,children}=_ref2,html=(0,_objectWithoutProperties2.default)(_ref2,["theme","colorScheme","autoStyle","children"]);const isDark=useDarkMode();const colorScheme=propsColorScheme||(isDark?"dark":"light");const theme=propsTheme||(_reactDeviceDetect.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(ThemeContext.Provider,{value:{theme,colorScheme}},_react.default.createElement("div",(0,_extends2.default)({style:autoStyle?style:undefined},html),children))};exports.AutoThemeProvider=AutoThemeProvider;const useTheme=(props,styles={})=>{const themeContext=_react.default.useContext(ThemeContext);const currentTheme=props.theme||themeContext.theme||"firefox";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.AutoThemeProvider=exports.ThemeProvider=exports.ThemeContext=exports.themes=exports.colorSchemes=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));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"));var _reactDeviceDetect=require("react-device-detect");var _themes=require("./themes");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 AutoThemeProvider=(_ref2)=>{let{theme:propsTheme,colorScheme:propsColorScheme,autoStyle,children}=_ref2,html=(0,_objectWithoutProperties2.default)(_ref2,["theme","colorScheme","autoStyle","children"]);const isDark=useDarkMode();const colorScheme=propsColorScheme||(isDark?"dark":"light");const theme=propsTheme||(_reactDeviceDetect.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(ThemeContext.Provider,{value:{theme,colorScheme}},_react.default.createElement("div",(0,_extends2.default)({style:autoStyle?style:undefined},html),children))};exports.AutoThemeProvider=AutoThemeProvider;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 _extends from"@babel/runtime/helpers/extends";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";import{isFirefox}from"react-device-detect";import{all}from"./themes";export const colorSchemes=["light","dark"];export const themes=["chrome","firefox"];export const ThemeContext=React.createContext({theme:"firefox",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 AutoThemeProvider=(_ref2)=>{let{theme:propsTheme,colorScheme:propsColorScheme,autoStyle,children}=_ref2,html=_objectWithoutProperties(_ref2,["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))};export const useTheme=(props,styles={})=>{const themeContext=React.useContext(ThemeContext);const currentTheme=props.theme||themeContext.theme||"firefox";const currentColorScheme=props.colorScheme||themeContext.colorScheme||"light";const themeClass=makeClass(styles[currentTheme],styles[currentColorScheme]);return{currentColorScheme,currentTheme,themeClass}};
+import _extends from"@babel/runtime/helpers/extends";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";import{isFirefox}from"react-device-detect";import{all}from"./themes";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 AutoThemeProvider=(_ref2)=>{let{theme:propsTheme,colorScheme:propsColorScheme,autoStyle,children}=_ref2,html=_objectWithoutProperties(_ref2,["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))};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

@@ -62,4 +62,4 @@ import React from "react";
 declare type CustomTheme = BasicTheme | LightDarkTheme;
-export declare type ComponentTheme = Required<Record<"firefox", CustomTheme>> & Partial<Record<Theme, CustomTheme>>;
+export declare type ComponentTheme = Required<Record<"chrome", CustomTheme>> & Partial<Record<Theme, CustomTheme>>;
 export {};
 //# sourceMappingURL=utils.d.ts.map

package.json

 {
   "name": "@devtools-ds/themes",
-  "version": "0.133.0",
+  "version": "1.0.0",
   "main": "./dist/cjs/index.js",
@@ -43,3 +43,3 @@ "module": "./dist/esm/index.js",
   },
-  "gitHead": "520991a076d46a94932724872185cf3b22f1ca6a"
+  "gitHead": "dfae2ecdb49ae56689342309b977d3fa2b52ff1a"
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67948

increased by0.53%

Number of low quality alerts

3

decreased by-25%

No dependency changes