@cloudflare/style-const - npm Package Compare versions

Comparing version 5.1.21 to 5.2.0

dist/darkModeColors.d.ts

@@ -5,2 +5,3 @@ declare const _default: {
     error: string;
+    focus: string;
     white: string;
@@ -7,0 +8,0 @@ black: string;

dist/lightModeColors.d.ts

@@ -5,2 +5,3 @@ declare const _default: {
     error: string;
+    focus: string;
     white: string;
@@ -7,0 +8,0 @@ black: string;

dist/mixins.d.ts

@@ -8,3 +8,6 @@ declare type FocusBoxShadowProps = {
 declare type FocusProps = {
-    borderRadius?: number;
+    border?: boolean;
+    focused?: boolean;
+    within?: boolean;
+    disabled?: boolean;
 } & FocusBoxShadowProps;
@@ -21,12 +24,14 @@ declare type LinkProps = {
 };
+declare type InputProps = {
+    invalid?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    radius?: any;
+    color?: string;
+};
 declare const _default: {
-    focus: ({ borderRadius, ...boxShadowProps }?: FocusProps) => {
-        '&:focus': {
-            outline: string;
-        };
-        '&:focus-within': {
-            outline: string;
-            boxShadow: string;
-            borderRadius: string;
-        };
+    focus: ({ border, invalid, focused, disabled, within, ...boxShadowProps }?: FocusProps) => {
+        borderColor?: string | undefined;
+        outline?: string | undefined;
+        boxShadow?: string | undefined;
     };
@@ -68,3 +73,25 @@ error: () => {
     };
+    input: ({ invalid, disabled, radius, color }: InputProps) => {
+        fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\",  Arial, sans-serif";
+        fontSize: number;
+        outline: string;
+        color: string;
+        opacity: number;
+        backgroundColor: string;
+        borderWidth: string;
+        borderStyle: string;
+        borderColor: string;
+        borderRadius: any;
+        transition: string;
+        '&:hover': {
+            borderColor?: string | undefined;
+        };
+        '&:active': {
+            borderColor?: string | undefined;
+        };
+        '&::placeholder': {
+            color: string;
+        };
+    };
 };
 export default _default;

dist/variables.d.ts

@@ -76,4 +76,7 @@ import { ValueOfArray } from '@cloudflare/types';
     readonly mixins: {
-        focus: ({ borderRadius, ...boxShadowProps }?: {
-            borderRadius?: number | undefined;
+        focus: ({ border, invalid, focused, disabled, within, ...boxShadowProps }?: {
+            border?: boolean | undefined;
+            focused?: boolean | undefined;
+            within?: boolean | undefined;
+            disabled?: boolean | undefined;
         } & {
@@ -85,10 +88,5 @@ invalid?: boolean | undefined;
         }) => {
-            '&:focus': {
-                outline: string;
-            };
-            '&:focus-within': {
-                outline: string;
-                boxShadow: string;
-                borderRadius: string;
-            };
+            borderColor?: string | undefined;
+            outline?: string | undefined;
+            boxShadow?: string | undefined;
         };
@@ -138,2 +136,30 @@ error: () => {
         };
+        input: ({ invalid, disabled, radius, color }: {
+            invalid?: boolean | undefined;
+            disabled?: boolean | undefined;
+            loading?: boolean | undefined;
+            radius?: any;
+            color?: string | undefined;
+        }) => {
+            fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\",  Arial, sans-serif";
+            fontSize: number;
+            outline: string;
+            color: string;
+            opacity: number;
+            backgroundColor: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            borderRadius: any;
+            transition: string;
+            '&:hover': {
+                borderColor?: string | undefined;
+            };
+            '&:active': {
+                borderColor?: string | undefined;
+            };
+            '&::placeholder': {
+                color: string;
+            };
+        };
     };
@@ -140,0 +166,0 @@ readonly fontSize: "15px";

es/darkModeColors.js

@@ -23,3 +23,4 @@ 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; }
   text: colors.gray[1],
-  error: colors.red[4]
+  error: colors.red[3],
+  focus: colors.blue[3]
 });

es/lightModeColors.js

@@ -23,3 +23,4 @@ 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; }
   text: colors.gray[1],
-  error: colors.red[4]
+  error: colors.red[4],
+  focus: colors.blue[4]
 });

es/mixins.js

@@ -0,1 +1,5 @@
+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 _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; }
+
 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; }
@@ -15,21 +19,26 @@
 } = {}) => {
-  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'}`;
+  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' : ''}`;
 };
 
 const focusMixin = (_ref = {}) => {
-  let _ref$borderRadius = _ref.borderRadius,
-      borderRadius = _ref$borderRadius === void 0 ? 4 : _ref$borderRadius,
-      boxShadowProps = _objectWithoutProperties(_ref, ["borderRadius"]);
+  let border = _ref.border,
+      invalid = _ref.invalid,
+      focused = _ref.focused,
+      disabled = _ref.disabled,
+      within = _ref.within,
+      boxShadowProps = _objectWithoutProperties(_ref, ["border", "invalid", "focused", "disabled", "within"]);
 
-  return {
-    '&:focus': {
-      outline: 'none'
-    },
-    '&:focus-within': {
-      outline: 'none',
-      boxShadow: focusBoxShadow(boxShadowProps),
-      borderRadius: `${borderRadius}px`
-    }
-  };
+  const focusedProperties = _objectSpread({
+    outline: 'none',
+    boxShadow: focusBoxShadow(_objectSpread({
+      invalid
+    }, boxShadowProps))
+  }, border && !disabled ? {
+    borderColor: invalid ? theme.colors.error : theme.colors.focus
+  } : {});
+
+  return _objectSpread({}, focused ? focusedProperties : {}, {
+    [`&:focus${within ? '-within' : ''}`]: _objectSpread({}, focusedProperties)
+  });
 };
@@ -46,3 +55,3 @@
   display: 'inline-block',
-  color: disabled ? theme.colors.gray[4] : isDarkMode() ? theme.colors.blue[3] : theme.colors.blue[4],
+  color: disabled ? theme.colors.gray[4] : theme.colors.focus,
   textDecoration: 'none',
@@ -90,2 +99,34 @@ transition: 'all 150ms ease',
 
+const inputMixin = ({
+  invalid,
+  disabled,
+  radius,
+  color
+}) => {
+  var _radius;
+
+  return {
+    fontFamily: theme.fontFamily,
+    fontSize: 2,
+    outline: 'none',
+    color: color || theme.colors.gray[1],
+    opacity: disabled ? 0.5 : 1,
+    backgroundColor: disabled ? theme.colors.gray[8] : theme.colors.white,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: invalid && !disabled ? theme.colors.error : theme.colors.gray[isDarkMode() ? 4 : 5],
+    borderRadius: (_radius = radius) !== null && _radius !== void 0 ? _radius : theme.radii[2],
+    transition: 'border-color 0.2s ease',
+    '&:hover': _objectSpread({}, disabled ? {} : {
+      borderColor: invalid ? theme.colors.error : theme.colors.focus
+    }),
+    '&:active': _objectSpread({}, disabled ? {} : {
+      borderColor: invalid ? theme.colors.error : theme.colors.focus
+    }),
+    '&::placeholder': {
+      color: theme.colors.gray[isDarkMode() ? 4 : 3]
+    }
+  };
+};
+
 export default {
@@ -95,3 +136,4 @@ focus: focusMixin,
   shadow: shadowMixin,
-  link: linkMixin
+  link: linkMixin,
+  input: inputMixin
 };

lib/darkModeColors.js

@@ -31,5 +31,6 @@ "use strict";
   text: colors.gray[1],
-  error: colors.red[4]
+  error: colors.red[3],
+  focus: colors.blue[3]
 });
 
 exports.default = _default;

lib/lightModeColors.js

@@ -31,5 +31,6 @@ "use strict";
   text: colors.gray[1],
-  error: colors.red[4]
+  error: colors.red[4],
+  focus: colors.blue[4]
 });
 
 exports.default = _default;

lib/mixins.js

@@ -18,2 +18,6 @@ "use strict";
 
+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 _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; }
+
 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,4 +37,4 @@
 
-  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');
+  var outlineColor = invalid ? _variables.default.colors.error : _variables.default.colors.focus;
+  return "0 0 0 ".concat(space, "px ").concat(_variables.default.colors.background, ", 0 0 0 ").concat(space + outline, "px ").concat(outlineColor, " ").concat(inset ? 'inset' : '');
 };
@@ -41,16 +45,19 @@
 
-  var _ref2$borderRadius = _ref2.borderRadius,
-      borderRadius = _ref2$borderRadius === void 0 ? 4 : _ref2$borderRadius,
-      boxShadowProps = _objectWithoutProperties(_ref2, ["borderRadius"]);
+  var border = _ref2.border,
+      invalid = _ref2.invalid,
+      focused = _ref2.focused,
+      disabled = _ref2.disabled,
+      within = _ref2.within,
+      boxShadowProps = _objectWithoutProperties(_ref2, ["border", "invalid", "focused", "disabled", "within"]);
 
-  return {
-    '&:focus': {
-      outline: 'none'
-    },
-    '&:focus-within': {
-      outline: 'none',
-      boxShadow: focusBoxShadow(boxShadowProps),
-      borderRadius: "".concat(borderRadius, "px")
-    }
-  };
+  var focusedProperties = _objectSpread({
+    outline: 'none',
+    boxShadow: focusBoxShadow(_objectSpread({
+      invalid: invalid
+    }, boxShadowProps))
+  }, border && !disabled ? {
+    borderColor: invalid ? _variables.default.colors.error : _variables.default.colors.focus
+  } : {});
+
+  return _objectSpread({}, focused ? focusedProperties : {}, _defineProperty({}, "&:focus".concat(within ? '-within' : ''), _objectSpread({}, focusedProperties)));
 };
@@ -69,3 +76,3 @@
     display: 'inline-block',
-    color: disabled ? _variables.default.colors.gray[4] : (0, _utils.isDarkMode)() ? _variables.default.colors.blue[3] : _variables.default.colors.blue[4],
+    color: disabled ? _variables.default.colors.gray[4] : _variables.default.colors.focus,
     textDecoration: 'none',
@@ -118,2 +125,33 @@ transition: 'all 150ms ease',
 
+var inputMixin = function inputMixin(_ref5) {
+  var _radius;
+
+  var invalid = _ref5.invalid,
+      disabled = _ref5.disabled,
+      radius = _ref5.radius,
+      color = _ref5.color;
+  return {
+    fontFamily: _variables.default.fontFamily,
+    fontSize: 2,
+    outline: 'none',
+    color: color || _variables.default.colors.gray[1],
+    opacity: disabled ? 0.5 : 1,
+    backgroundColor: disabled ? _variables.default.colors.gray[8] : _variables.default.colors.white,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    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],
+    transition: 'border-color 0.2s ease',
+    '&:hover': _objectSpread({}, disabled ? {} : {
+      borderColor: invalid ? _variables.default.colors.error : _variables.default.colors.focus
+    }),
+    '&:active': _objectSpread({}, disabled ? {} : {
+      borderColor: invalid ? _variables.default.colors.error : _variables.default.colors.focus
+    }),
+    '&::placeholder': {
+      color: _variables.default.colors.gray[(0, _utils.isDarkMode)() ? 4 : 3]
+    }
+  };
+};
+
 var _default = {
@@ -123,4 +161,5 @@ focus: focusMixin,
   shadow: shadowMixin,
-  link: linkMixin
+  link: linkMixin,
+  input: inputMixin
 };
 exports.default = _default;

package.json

 {
   "name": "@cloudflare/style-const",
   "description": "Cloudflare Style Constants",
-  "version": "5.1.21",
+  "version": "5.2.0",
   "main": "lib/index.js",
@@ -28,3 +28,3 @@ "module": "es/index.js",
   },
-  "gitHead": "06e91364c74bda80d707d13e48c358c4c4a222e3"
+  "gitHead": "b7c207b9d1a4a78c3412f7ad4185e92ec36c4f5e"
 }

No alert changes

Improved metrics

Total package byte prevSize

139633

increased by4.94%

Lines of code

1190

increased by12.48%

No dependency changes