@cloudflare/style-const - npm Package Compare versions

Comparing version 5.0.11 to 5.1.0

dist/mixins.d.ts

@@ -10,2 +10,5 @@ declare type FocusBoxShadowProps = {
 } & FocusBoxShadowProps;
+declare type LinkProps = {
+    disabled?: boolean;
+};
 declare type ShadowProps = {
@@ -36,3 +39,31 @@ x?: number;
     };
+    link: ({ disabled }: LinkProps) => {
+        display: string;
+        color: string;
+        textDecoration: string;
+        transition: string;
+        cursor: string;
+        '& svg': {
+            fill: string;
+        };
+        '&:hover': {
+            color: string;
+            textDecoration: string;
+            '& svg': {
+                fill: string;
+            };
+        };
+        '&:active': {
+            color: string;
+            textDecoration: string;
+            outline: string;
+            '& svg': {
+                fill: string;
+            };
+        };
+        '&:focus': {
+            color: string;
+        };
+    };
 };
 export default _default;

dist/variables.d.ts

@@ -106,2 +106,32 @@ import { ValueOfArray } from '@cloudflare/types';
         };
+        link: ({ disabled }: {
+            disabled?: boolean | undefined;
+        }) => {
+            display: string;
+            color: string;
+            textDecoration: string;
+            transition: string;
+            cursor: string;
+            '& svg': {
+                fill: string;
+            };
+            '&:hover': {
+                color: string;
+                textDecoration: string;
+                '& svg': {
+                    fill: string;
+                };
+            };
+            '&:active': {
+                color: string;
+                textDecoration: string;
+                outline: string;
+                '& svg': {
+                    fill: string;
+                };
+            };
+            '&:focus': {
+                color: string;
+            };
+        };
     };
@@ -108,0 +138,0 @@ readonly fontSize: "15px";

es/mixins.js

@@ -6,4 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 import { isDarkMode } from './utils';
-import lightModeColors from './lightModeColors';
-import darkModeColors from './darkModeColors';
+import theme from './variables';
 import { fontSizes } from './variables';
@@ -17,5 +16,4 @@
 } = {}) => {
-  const colors = isDarkMode() ? darkModeColors : lightModeColors;
-  const outlineColor = invalid ? colors.red[3] : colors.blue[4];
-  return `0 0 0 ${space}px ${colors.background}, 0 0 0 ${space + outline}px ${outlineColor} ${inset ? 'inset' : 'outset'}`;
+  const outlineColor = invalid ? theme.colors.red[3] : theme.colors.blue[4];
+  return `0 0 0 ${space}px ${theme.colors.background}, 0 0 0 ${space + outline}px ${outlineColor} ${inset ? 'inset' : 'outset'}`;
 };
@@ -40,10 +38,38 @@
 
-const errorMixin = () => {
-  const colors = isDarkMode() ? darkModeColors : lightModeColors;
-  return {
-    color: colors.error,
-    fontSize: fontSizes[2]
-  };
-};
+const errorMixin = () => ({
+  color: theme.colors.error,
+  fontSize: fontSizes[2]
+});
 
+const linkMixin = ({
+  disabled
+}) => ({
+  display: 'inline-block',
+  color: disabled ? theme.colors.gray[4] : isDarkMode() ? theme.colors.blue[3] : theme.colors.blue[4],
+  textDecoration: 'none',
+  transition: 'all 150ms ease',
+  cursor: disabled ? 'default' : 'pointer',
+  '& svg': {
+    fill: 'currentColor'
+  },
+  '&:hover': {
+    color: disabled ? theme.colors.gray[4] : theme.colors.orange[isDarkMode() ? 3 : 6],
+    textDecoration: 'none',
+    '& svg': {
+      fill: 'currentColor'
+    }
+  },
+  '&:active': {
+    color: disabled ? theme.colors.gray[4] : theme.colors.orange[isDarkMode() ? 3 : 6],
+    textDecoration: 'none',
+    outline: 'none',
+    '& svg': {
+      fill: 'currentColor'
+    }
+  },
+  '&:focus': {
+    color: disabled ? theme.colors.gray[4] : theme.colors.blue[5]
+  }
+});
+
 const shadowMixin = ({
@@ -68,3 +94,4 @@ x = 2,
   error: errorMixin,
-  shadow: shadowMixin
+  shadow: shadowMixin,
+  link: linkMixin
 };

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); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -10,10 +12,8 @@ value: true
 
-var _lightModeColors = _interopRequireDefault(require("./lightModeColors"));
+var _variables = _interopRequireWildcard(require("./variables"));
 
-var _darkModeColors = _interopRequireDefault(require("./darkModeColors"));
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _variables = require("./variables");
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -33,5 +33,4 @@
 
-  var colors = (0, _utils.isDarkMode)() ? _darkModeColors.default : _lightModeColors.default;
-  var outlineColor = invalid ? colors.red[3] : colors.blue[4];
-  return "0 0 0 ".concat(space, "px ").concat(colors.background, ", 0 0 0 ").concat(space + outline, "px ").concat(outlineColor, " ").concat(inset ? 'inset' : 'outset');
+  var outlineColor = invalid ? _variables.default.colors.red[3] : _variables.default.colors.blue[4];
+  return "0 0 0 ".concat(space, "px ").concat(_variables.default.colors.background, ", 0 0 0 ").concat(space + outline, "px ").concat(outlineColor, " ").concat(inset ? 'inset' : 'outset');
 };
@@ -59,5 +58,4 @@
 var errorMixin = function errorMixin() {
-  var colors = (0, _utils.isDarkMode)() ? _darkModeColors.default : _lightModeColors.default;
   return {
-    color: colors.error,
+    color: _variables.default.colors.error,
     fontSize: _variables.fontSizes[2]
@@ -67,14 +65,46 @@ };
 
+var linkMixin = function linkMixin(_ref3) {
+  var disabled = _ref3.disabled;
+  return {
+    display: 'inline-block',
+    color: disabled ? _variables.default.colors.gray[4] : (0, _utils.isDarkMode)() ? _variables.default.colors.blue[3] : _variables.default.colors.blue[4],
+    textDecoration: 'none',
+    transition: 'all 150ms ease',
+    cursor: disabled ? 'default' : 'pointer',
+    '& svg': {
+      fill: 'currentColor'
+    },
+    '&:hover': {
+      color: disabled ? _variables.default.colors.gray[4] : _variables.default.colors.orange[(0, _utils.isDarkMode)() ? 3 : 6],
+      textDecoration: 'none',
+      '& svg': {
+        fill: 'currentColor'
+      }
+    },
+    '&:active': {
+      color: disabled ? _variables.default.colors.gray[4] : _variables.default.colors.orange[(0, _utils.isDarkMode)() ? 3 : 6],
+      textDecoration: 'none',
+      outline: 'none',
+      '& svg': {
+        fill: 'currentColor'
+      }
+    },
+    '&:focus': {
+      color: disabled ? _variables.default.colors.gray[4] : _variables.default.colors.blue[5]
+    }
+  };
+};
+
 var shadowMixin = function shadowMixin() {
   var _opacity, _blur;
 
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 2 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 4 : _ref3$y,
-      _ref3$spread = _ref3.spread,
-      spread = _ref3$spread === void 0 ? 0 : _ref3$spread,
-      blur = _ref3.blur,
-      opacity = _ref3.opacity;
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref4$x = _ref4.x,
+      x = _ref4$x === void 0 ? 2 : _ref4$x,
+      _ref4$y = _ref4.y,
+      y = _ref4$y === void 0 ? 4 : _ref4$y,
+      _ref4$spread = _ref4.spread,
+      spread = _ref4$spread === void 0 ? 0 : _ref4$spread,
+      blur = _ref4.blur,
+      opacity = _ref4.opacity;
 
@@ -91,4 +121,5 @@ opacity = (_opacity = opacity) !== null && _opacity !== void 0 ? _opacity : (0, _utils.isDarkMode)() ? 0.4 : 0.15;
   error: errorMixin,
-  shadow: shadowMixin
+  shadow: shadowMixin,
+  link: linkMixin
 };
 exports.default = _default;

package.json

 {
   "name": "@cloudflare/style-const",
   "description": "Cloudflare Style Constants",
-  "version": "5.0.11",
+  "version": "5.1.0",
   "main": "lib/index.js",
@@ -28,3 +28,3 @@ "module": "es/index.js",
   },
-  "gitHead": "a1a7ca299c6676e5222e50aee57bc5beedb44882"
+  "gitHead": "6aca0d19de9e98ce2fd58663f14a19442df60334"
 }

No alert changes

Improved metrics

Total package byte prevSize

128320

increased by3.92%

Lines of code

1058

increased by12.79%

No dependency changes