@cloudflare/style-const - npm Package Compare versions

Comparing version 5.3.14 to 5.4.0

dist/index.d.ts

 import variables from './variables';
-import lightModeColors from './lightModeColors';
-import darkModeColors from './darkModeColors';
+import lightModeColors from './colors/lightScalesV1';
+import darkModeColors from './colors/darkScalesV1';
 import { focusBoxShadow } from './mixins';
@@ -5,0 +5,0 @@ import { isDarkMode, toggleDarkMode, setDarkMode, observeDarkMode, getDarkModeSetting, DarkModeSettings } from './utils';

dist/mixins.d.ts

@@ -35,2 +35,3 @@ declare type FocusBoxShadowProps = {
         outline?: string | undefined;
+        transition?: string | undefined;
         boxShadow?: string | undefined;
@@ -37,0 +38,0 @@ };

dist/variables.d.ts

 import { ValueOfArray } from '@cloudflare/types';
-import lightModeColors from './lightModeColors';
-import darkModeColors from './darkModeColors';
+import lightColors from './colors/light';
+import darkColors from './colors/dark';
 declare const colorScales: readonly ["red", "orange", "gold", "green", "cyan", "blue", "indigo", "violet", "pink", "gray"];
 export declare type ColorOnScale = typeof colorScales[number];
 export declare type ThemeColor = {
-    [K in ColorOnScale]: ValueOfArray<typeof lightModeColors[K]>;
+    [K in ColorOnScale]: ValueOfArray<typeof lightColors[K]>;
 }[ColorOnScale];
@@ -32,4 +32,4 @@ declare const colors: {
 };
-declare type CommonColors = keyof typeof lightModeColors & keyof typeof darkModeColors;
-declare type OnlyCommonColors = Pick<typeof lightModeColors, CommonColors> | Pick<typeof darkModeColors, CommonColors>;
+declare type CommonColors = keyof typeof lightColors & keyof typeof darkColors;
+declare type OnlyCommonColors = Pick<typeof lightColors, CommonColors> | Pick<typeof darkColors, CommonColors>;
 declare type MergedColors = typeof colors & OnlyCommonColors;
@@ -90,2 +90,3 @@ export declare const setColorOverride: (color: string, index: number, value?: string | undefined) => void;
             outline?: string | undefined;
+            transition?: string | undefined;
             boxShadow?: string | undefined;
@@ -92,0 +93,0 @@ };

es/index.js

 import variables from './variables';
-import lightModeColors from './lightModeColors';
-import darkModeColors from './darkModeColors';
+import lightModeColors from './colors/lightScalesV1';
+import darkModeColors from './colors/darkScalesV1';
 import { focusBoxShadow } from './mixins';
@@ -5,0 +5,0 @@ import { isDarkMode, toggleDarkMode, setDarkMode, observeDarkMode, getDarkModeSetting, DarkModeSettings } from './utils';

es/mixins.js

@@ -1,3 +0,7 @@
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+var _excluded = ["border", "invalid", "focused", "disabled", "within"];
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -11,22 +15,27 @@
 import theme, { fontSizes } from './variables';
-export const focusBoxShadow = ({
-  invalid,
-  space = 3,
-  outline = 2,
-  inset = false
-} = {}) => {
-  const outlineColor = invalid ? theme.colors.error : theme.colors.focus;
-  return `0 0 0 ${space}px ${theme.colors.background}, 0 0 0 ${space + outline}px ${outlineColor} ${inset ? 'inset' : ''}`;
+export var focusBoxShadow = function focusBoxShadow() {
+  var {
+    invalid,
+    space = 3,
+    outline = 2,
+    inset = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var outlineColor = invalid ? theme.colors.error : theme.colors.focus;
+  return "0 0 0 ".concat(space, "px ").concat(theme.colors.background, ", 0 0 0 ").concat(space + outline, "px ").concat(outlineColor, " ").concat(inset ? 'inset' : '');
 };
 
-const focusMixin = (_ref = {}) => {
-  let border = _ref.border,
-      invalid = _ref.invalid,
-      focused = _ref.focused,
-      disabled = _ref.disabled,
-      within = _ref.within,
-      boxShadowProps = _objectWithoutProperties(_ref, ["border", "invalid", "focused", "disabled", "within"]);
+var focusMixin = function focusMixin() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      {
+    border,
+    invalid,
+    focused,
+    disabled,
+    within
+  } = _ref,
+      boxShadowProps = _objectWithoutProperties(_ref, _excluded);
 
-  const focusedProperties = _objectSpread({
+  var focusedProperties = _objectSpread({
     outline: 'none',
+    transition: 'box-shadow 150ms ease',
     boxShadow: focusBoxShadow(_objectSpread({
@@ -39,8 +48,8 @@ invalid
 
-  return _objectSpread({}, focused ? focusedProperties : {}, {
-    [`&:focus${within ? '-within' : ''}`]: _objectSpread({}, focusedProperties)
+  return _objectSpread(_objectSpread({}, focused ? focusedProperties : {}), {}, {
+    ["&:focus".concat(within ? '-within' : '-visible')]: _objectSpread({}, focusedProperties)
   });
 };
 
-const errorMixin = () => ({
+var errorMixin = () => ({
   color: theme.colors.error,
@@ -50,54 +59,57 @@ fontSize: fontSizes[2]
 
-const linkMixin = ({
-  disabled
-}) => ({
-  display: 'inline-block',
-  color: disabled ? theme.colors.gray[4] : theme.colors.focus,
-  transition: 'all 150ms ease',
-  cursor: disabled ? 'default' : 'pointer',
-  '& svg': {
-    fill: 'currentColor'
-  },
-  '&:hover': {
-    color: disabled ? theme.colors.gray[4] : isDarkMode() ? theme.colors.orange[3] : theme.colors.blue[2],
+var linkMixin = _ref2 => {
+  var {
+    disabled
+  } = _ref2;
+  return {
+    display: 'inline-block',
+    color: disabled ? theme.colors.gray[4] : theme.colors.focus,
+    transition: 'all 150ms ease',
+    cursor: disabled ? 'default' : 'pointer',
     '& svg': {
       fill: 'currentColor'
+    },
+    '&:hover': {
+      color: disabled ? theme.colors.gray[4] : isDarkMode() ? theme.colors.orange[3] : theme.colors.blue[2],
+      '& svg': {
+        fill: 'currentColor'
+      }
+    },
+    '&:active': {
+      color: disabled ? theme.colors.gray[4] : isDarkMode() ? theme.colors.orange[3] : theme.colors.blue[2],
+      outline: 'none',
+      '& svg': {
+        fill: 'currentColor'
+      }
+    },
+    '&:focus': {
+      color: disabled ? theme.colors.gray[4] : theme.colors.blue[5]
     }
-  },
-  '&:active': {
-    color: disabled ? theme.colors.gray[4] : isDarkMode() ? theme.colors.orange[3] : theme.colors.blue[2],
-    outline: 'none',
-    '& svg': {
-      fill: 'currentColor'
-    }
-  },
-  '&:focus': {
-    color: disabled ? theme.colors.gray[4] : theme.colors.blue[5]
-  }
-});
+  };
+};
 
-const shadowMixin = ({
-  x = 2,
-  y = 4,
-  spread = 0,
-  blur,
-  opacity
-} = {}) => {
+var shadowMixin = function shadowMixin() {
   var _opacity, _blur;
 
+  var {
+    x = 2,
+    y = 4,
+    spread = 0,
+    blur,
+    opacity
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   opacity = (_opacity = opacity) !== null && _opacity !== void 0 ? _opacity : isDarkMode() ? 0.4 : 0.15;
   blur = (_blur = blur) !== null && _blur !== void 0 ? _blur : isDarkMode() ? 9 : 20;
   return {
-    boxShadow: `${x}px ${y}px ${blur}px ${spread} rgba(0,0,0,${opacity})`
+    boxShadow: "".concat(x, "px ").concat(y, "px ").concat(blur, "px ").concat(spread, " rgba(0,0,0,").concat(opacity, ")")
   };
 };
 
-const inputMixin = ({
-  invalid,
-  disabled,
-  radius,
-  color
-}) => {
-  var _radius;
-
+var inputMixin = _ref3 => {
+  var {
+    invalid,
+    disabled,
+    radius,
+    color
+  } = _ref3;
   return {
@@ -113,3 +125,3 @@ fontFamily: theme.fontFamily,
     borderColor: invalid && !disabled ? theme.colors.error : theme.colors.gray[isDarkMode() ? 4 : 5],
-    borderRadius: (_radius = radius) !== null && _radius !== void 0 ? _radius : theme.radii[2],
+    borderRadius: radius !== null && radius !== void 0 ? radius : theme.radii[2],
     transition: 'border-color 0.2s ease',
@@ -116,0 +128,0 @@ '&:hover': _objectSpread({}, disabled ? {} : {

es/utils.js

 var _window$matchMedia, _window, _darkModeMatch$addEve;
 
-export const modeTransitionTime = 500;
-const darkModeClassName = 'dark-mode';
-const noTransitionClassName = 'mode-transition';
-export let DarkModeSettings; // Defensive checks in case component library is used outside the browser
+export var modeTransitionTime = 500;
+var darkModeClassName = 'dark-mode';
+var noTransitionClassName = 'mode-transition';
+export var DarkModeSettings; // Defensive checks in case component library is used outside the browser
 // E.g. server side rendering
@@ -15,5 +15,5 @@
 
-const classList = typeof document !== 'undefined' && document.documentElement.classList;
-export const isDarkMode = () => classList && classList.contains(darkModeClassName);
-export const toggleDarkMode = condition => {
+var classList = typeof document !== 'undefined' && document.documentElement.classList;
+export var isDarkMode = () => classList && classList.contains(darkModeClassName);
+export var toggleDarkMode = condition => {
   if (classList) {
@@ -31,3 +31,3 @@ // mode-transition class prevents color transitions from taking place
 };
-const darkModeMatch = typeof window !== 'undefined' && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(prefers-color-scheme: dark)'));
+var darkModeMatch = typeof window !== 'undefined' && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(prefers-color-scheme: dark)'));
 darkModeMatch && ((_darkModeMatch$addEve = darkModeMatch.addEventListener) === null || _darkModeMatch$addEve === void 0 ? void 0 : _darkModeMatch$addEve.call(darkModeMatch, 'change', e => {
@@ -40,4 +40,5 @@ systemDarkMode = e.matches;
 }));
-let systemDarkMode = darkModeMatch ? darkModeMatch.matches : false;
-export const setDarkMode = (darkMode, updateStorage = true) => {
+var systemDarkMode = darkModeMatch ? darkModeMatch.matches : false;
+export var setDarkMode = function setDarkMode(darkMode) {
+  var updateStorage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   toggleDarkMode(darkMode === DarkModeSettings.ON || darkMode === DarkModeSettings.SYSTEM && systemDarkMode);
@@ -47,15 +48,15 @@ userDarkModeSetting = darkMode;
 };
-let userDarkModeSetting = typeof localStorage !== 'undefined' && localStorage[darkModeClassName] || DarkModeSettings.OFF;
+var userDarkModeSetting = typeof localStorage !== 'undefined' && localStorage[darkModeClassName] || DarkModeSettings.OFF;
 setDarkMode(userDarkModeSetting, false);
-export const getDarkModeSetting = () => userDarkModeSetting;
-export const observeDarkMode = fn => {
+export var getDarkModeSetting = () => userDarkModeSetting;
+export var observeDarkMode = fn => {
   var _observer;
 
-  let darkMode = isDarkMode();
-  const hasWindow = typeof window !== 'undefined';
-  let observer;
+  var darkMode = isDarkMode();
+  var hasWindow = typeof window !== 'undefined';
+  var observer;
 
   if (hasWindow) {
     observer = window.MutationObserver && new MutationObserver(() => {
-      const currentDarkMode = isDarkMode();
+      var currentDarkMode = isDarkMode();
 
@@ -62,0 +63,0 @@ if (darkMode !== currentDarkMode) {

es/variables.js

 import { isDarkMode, modeTransitionTime } from './utils';
-import lightModeColors from './lightModeColors';
-import darkModeColors from './darkModeColors';
+import lightColors from './colors/light';
+import darkColors from './colors/dark';
 import mixins from './mixins';
-const colorScales = ['red', 'orange', 'gold', 'green', 'cyan', 'blue', 'indigo', 'violet', 'pink', 'gray'];
-const colors = {
+var colorScales = ['red', 'orange', 'gold', 'green', 'cyan', 'blue', 'indigo', 'violet', 'pink', 'gray'];
+var colors = {
   cfOrange: '#F6821F',
@@ -31,20 +31,18 @@ marketing: {
 
-const lightColorOverrides = {};
-const darkColorOverrides = {}; // Create getters for the colors that will change between dark and light mode.
-// This assumes lightModeColors and darkModeColors will contain the same set of
+var lightColorOverrides = {};
+var darkColorOverrides = {}; // Create getters for the colors that will change between dark and light mode.
+// This assumes lightColors and darkColors will contain the same set of
 // properties.
 
-Object.keys(lightModeColors).forEach(key => {
-  const lightColors = lightModeColors[key];
-  const darkColors = darkModeColors[key];
+Object.keys(lightColors).forEach(key => {
   Object.defineProperty(colors, key, {
     get: function get() {
-      const darkMode = isDarkMode();
-      const colors = darkMode ? darkColors : lightColors;
-      const colorOverrides = darkMode ? darkColorOverrides : lightColorOverrides;
-      const overrides = colorOverrides === null || colorOverrides === void 0 ? void 0 : colorOverrides[key]; // TODO Make more efficient by caching the merged array rather than
+      var darkMode = isDarkMode();
+      var colors = darkMode ? darkColors[key] : lightColors[key];
+      var colorOverrides = darkMode ? darkColorOverrides : lightColorOverrides;
+      var overrides = colorOverrides === null || colorOverrides === void 0 ? void 0 : colorOverrides[key]; // TODO Make more efficient by caching the merged array rather than
       // continually recreating it
 
-      if (overrides === null || overrides === void 0 ? void 0 : overrides.length) {
-        const colorsWithOverrides = [...colors];
+      if (overrides !== null && overrides !== void 0 && overrides.length) {
+        var colorsWithOverrides = [...colors];
         overrides.forEach((color, index) => {
@@ -63,4 +61,4 @@ if (color) {
 });
-export const setColorOverride = (color, index, value) => {
-  const colorOverrides = isDarkMode() ? darkColorOverrides : lightColorOverrides;
+export var setColorOverride = (color, index, value) => {
+  var colorOverrides = isDarkMode() ? darkColorOverrides : lightColorOverrides;
 
@@ -76,11 +74,11 @@ if (value) {
 
-    (_colorOverrides$color = colorOverrides[color]) === null || _colorOverrides$color === void 0 ? void 0 : delete _colorOverrides$color[index];
+    (_colorOverrides$color = colorOverrides[color]) === null || _colorOverrides$color === void 0 ? true : delete _colorOverrides$color[index];
   }
 };
-export const revertColorOverrides = () => {
-  const colorOverrides = isDarkMode() ? darkColorOverrides : lightColorOverrides;
+export var revertColorOverrides = () => {
+  var colorOverrides = isDarkMode() ? darkColorOverrides : lightColorOverrides;
   Object.keys(colorOverrides).forEach(key => delete colorOverrides[key]);
 };
-export const fontSizes = [10, 12, 14, 16, 20, 24, 32, 48, 64, 80];
-const theme = {
+export var fontSizes = [10, 12, 14, 16, 20, 24, 32, 48, 64, 80];
+var theme = {
   modeTransitionTime,
@@ -138,3 +136,3 @@ breakpoints: {
   fontWeightLight: 300,
-  borderRadius: `2px`,
+  borderRadius: "2px",
   zIndexMax: 1000,
@@ -141,0 +139,0 @@ zIndexModal: 1400

lib/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -21,42 +21,42 @@ Object.defineProperty(exports, "__esModule", {
 };
-Object.defineProperty(exports, "variables", {
+Object.defineProperty(exports, "DarkModeSettings", {
   enumerable: true,
   get: function get() {
-    return _variables.default;
+    return _utils.DarkModeSettings;
   }
 });
-Object.defineProperty(exports, "theme", {
+Object.defineProperty(exports, "darkModeColors", {
   enumerable: true,
   get: function get() {
-    return _variables.default;
+    return _darkScalesV.default;
   }
 });
-Object.defineProperty(exports, "lightModeColors", {
+Object.defineProperty(exports, "focusBoxShadow", {
   enumerable: true,
   get: function get() {
-    return _lightModeColors.default;
+    return _mixins.focusBoxShadow;
   }
 });
-Object.defineProperty(exports, "darkModeColors", {
+Object.defineProperty(exports, "getDarkModeSetting", {
   enumerable: true,
   get: function get() {
-    return _darkModeColors.default;
+    return _utils.getDarkModeSetting;
   }
 });
-Object.defineProperty(exports, "focusBoxShadow", {
+Object.defineProperty(exports, "isDarkMode", {
   enumerable: true,
   get: function get() {
-    return _mixins.focusBoxShadow;
+    return _utils.isDarkMode;
   }
 });
-Object.defineProperty(exports, "isDarkMode", {
+Object.defineProperty(exports, "lightModeColors", {
   enumerable: true,
   get: function get() {
-    return _utils.isDarkMode;
+    return _lightScalesV.default;
   }
 });
-Object.defineProperty(exports, "toggleDarkMode", {
+Object.defineProperty(exports, "observeDarkMode", {
   enumerable: true,
   get: function get() {
-    return _utils.toggleDarkMode;
+    return _utils.observeDarkMode;
   }
@@ -70,18 +70,18 @@ });
 });
-Object.defineProperty(exports, "observeDarkMode", {
+Object.defineProperty(exports, "theme", {
   enumerable: true,
   get: function get() {
-    return _utils.observeDarkMode;
+    return _variables.default;
   }
 });
-Object.defineProperty(exports, "getDarkModeSetting", {
+Object.defineProperty(exports, "toggleDarkMode", {
   enumerable: true,
   get: function get() {
-    return _utils.getDarkModeSetting;
+    return _utils.toggleDarkMode;
   }
 });
-Object.defineProperty(exports, "DarkModeSettings", {
+Object.defineProperty(exports, "variables", {
   enumerable: true,
   get: function get() {
-    return _utils.DarkModeSettings;
+    return _variables.default;
   }
@@ -95,2 +95,3 @@ });
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _variables[key]) return;
   Object.defineProperty(exports, key, {
@@ -104,5 +105,5 @@ enumerable: true,
 
-var _lightModeColors = _interopRequireDefault(require("./lightModeColors"));
+var _lightScalesV = _interopRequireDefault(require("./colors/lightScalesV1"));
 
-var _darkModeColors = _interopRequireDefault(require("./darkModeColors"));
+var _darkScalesV = _interopRequireDefault(require("./colors/darkScalesV1"));
 
@@ -115,4 +116,4 @@ var _mixins = require("./mixins");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

lib/mixins.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -8,3 +8,3 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.default = exports.focusBoxShadow = void 0;
+exports.focusBoxShadow = exports.default = void 0;
 
@@ -15,8 +15,12 @@ var _utils = require("./utils");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _excluded = ["border", "invalid", "focused", "disabled", "within"];
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -45,5 +49,4 @@
 var focusMixin = function focusMixin() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var border = _ref2.border,
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      border = _ref2.border,
       invalid = _ref2.invalid,
@@ -53,6 +56,7 @@ focused = _ref2.focused,
       within = _ref2.within,
-      boxShadowProps = _objectWithoutProperties(_ref2, ["border", "invalid", "focused", "disabled", "within"]);
+      boxShadowProps = _objectWithoutProperties(_ref2, _excluded);
 
   var focusedProperties = _objectSpread({
     outline: 'none',
+    transition: 'box-shadow 150ms ease',
     boxShadow: focusBoxShadow(_objectSpread({
@@ -65,3 +69,3 @@ invalid: invalid
 
-  return _objectSpread({}, focused ? focusedProperties : {}, _defineProperty({}, "&:focus".concat(within ? '-within' : ''), _objectSpread({}, focusedProperties)));
+  return _objectSpread(_objectSpread({}, focused ? focusedProperties : {}), {}, _defineProperty({}, "&:focus".concat(within ? '-within' : '-visible'), _objectSpread({}, focusedProperties)));
 };
@@ -126,4 +130,2 @@
 var inputMixin = function inputMixin(_ref5) {
-  var _radius;
-
   var invalid = _ref5.invalid,
@@ -143,3 +145,3 @@ disabled = _ref5.disabled,
     borderColor: invalid && !disabled ? _variables.default.colors.error : _variables.default.colors.gray[(0, _utils.isDarkMode)() ? 4 : 5],
-    borderRadius: (_radius = radius) !== null && _radius !== void 0 ? _radius : _variables.default.radii[2],
+    borderRadius: radius !== null && radius !== void 0 ? radius : _variables.default.radii[2],
     transition: 'border-color 0.2s ease',
@@ -146,0 +148,0 @@ '&:hover': _objectSpread({}, disabled ? {} : {

lib/utils.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.observeDarkMode = exports.getDarkModeSetting = exports.setDarkMode = exports.toggleDarkMode = exports.isDarkMode = exports.DarkModeSettings = exports.modeTransitionTime = void 0;
+exports.toggleDarkMode = exports.setDarkMode = exports.observeDarkMode = exports.modeTransitionTime = exports.isDarkMode = exports.getDarkModeSetting = exports.DarkModeSettings = void 0;
 
@@ -9,0 +9,0 @@ var _window$matchMedia, _window, _darkModeMatch$addEve;

lib/variables.js

@@ -6,9 +6,9 @@ "use strict";
 });
-exports.default = exports.fontSizes = exports.revertColorOverrides = exports.setColorOverride = void 0;
+exports.setColorOverride = exports.revertColorOverrides = exports.fontSizes = exports.default = void 0;
 
 var _utils = require("./utils");
 
-var _lightModeColors = _interopRequireDefault(require("./lightModeColors"));
+var _light = _interopRequireDefault(require("./colors/light"));
 
-var _darkModeColors = _interopRequireDefault(require("./darkModeColors"));
+var _dark = _interopRequireDefault(require("./colors/dark"));
 
@@ -59,12 +59,10 @@ var _mixins = _interopRequireDefault(require("./mixins"));
 var darkColorOverrides = {}; // Create getters for the colors that will change between dark and light mode.
-// This assumes lightModeColors and darkModeColors will contain the same set of
+// This assumes lightColors and darkColors will contain the same set of
 // properties.
 
-Object.keys(_lightModeColors.default).forEach(function (key) {
-  var lightColors = _lightModeColors.default[key];
-  var darkColors = _darkModeColors.default[key];
+Object.keys(_light.default).forEach(function (key) {
   Object.defineProperty(colors, key, {
     get: function get() {
       var darkMode = (0, _utils.isDarkMode)();
-      var colors = darkMode ? darkColors : lightColors;
+      var colors = darkMode ? _dark.default[key] : _light.default[key];
       var colorOverrides = darkMode ? darkColorOverrides : lightColorOverrides;
@@ -74,3 +72,3 @@ var overrides = colorOverrides === null || colorOverrides === void 0 ? void 0 : colorOverrides[key]; // TODO Make more efficient by caching the merged array rather than
 
-      if (overrides === null || overrides === void 0 ? void 0 : overrides.length) {
+      if (overrides !== null && overrides !== void 0 && overrides.length) {
         var colorsWithOverrides = _toConsumableArray(colors);
@@ -104,3 +102,3 @@
 
-    (_colorOverrides$color = colorOverrides[color]) === null || _colorOverrides$color === void 0 ? void 0 : delete _colorOverrides$color[index];
+    (_colorOverrides$color = colorOverrides[color]) === null || _colorOverrides$color === void 0 ? true : delete _colorOverrides$color[index];
   }
@@ -107,0 +105,0 @@ };

package.json

 {
   "name": "@cloudflare/style-const",
   "description": "Cloudflare Style Constants",
-  "version": "5.3.14",
+  "version": "5.4.0",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "types": "./dist/index.d.ts",
   "author": "Vojtech Miksu <[e-mail]>",
   "license": "BSD-3-Clause",
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "types": "./dist/index.d.ts"
   },
@@ -28,3 +29,3 @@ "dependencies": {
   },
-  "gitHead": "db9637310d476ef91a50177d026526ca40cb9330"
-}
+  "types": "./dist/index.d.ts"
+}

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

Improved metrics

Total package byte prevSize

169163

increased by9.01%

Number of package files

33

increased by57.14%

Lines of code

1508

increased by22.7%

No dependency changes