@cloudflare/style-const - npm Package Compare versions

Comparing version 5.4.1 to 5.5.0

dist/colors/dark.d.ts

@@ -21,2 +21,76 @@ declare const _default: {
     };
+    button: {
+        primary: {
+            normal: {
+                text: string;
+                background: string;
+            };
+            hover: {
+                text: string;
+                background: string;
+            };
+            focus: {
+                text: string;
+                background: string;
+            };
+            active: {
+                text: string;
+                background: string;
+            };
+        };
+        danger: {
+            normal: {
+                text: string;
+                background: string;
+            };
+            hover: {
+                text: string;
+                background: string;
+            };
+            focus: {
+                text: string;
+                background: string;
+            };
+            active: {
+                text: string;
+                background: string;
+            };
+        };
+        plain: {
+            normal: {
+                text: string;
+                background: string;
+            };
+            hover: {
+                text: string;
+                background: string;
+            };
+            active: {
+                text: string;
+                background: string;
+            };
+            focus: {
+                text: string;
+                background: string;
+            };
+        };
+        plainMono: {
+            normal: {
+                text: string;
+                background: string;
+            };
+            hover: {
+                text: string;
+                background: string;
+            };
+            active: {
+                text: string;
+                background: string;
+            };
+            focus: {
+                text: string;
+                background: string;
+            };
+        };
+    };
     white: string;
@@ -23,0 +97,0 @@ black: string;

dist/colors/light.d.ts

@@ -21,2 +21,76 @@ declare const _default: {
     };
+    button: {
+        primary: {
+            normal: {
+                text: string;
+                background: string;
+            };
+            hover: {
+                text: string;
+                background: string;
+            };
+            focus: {
+                text: string;
+                background: string;
+            };
+            active: {
+                text: string;
+                background: string;
+            };
+        };
+        danger: {
+            normal: {
+                text: string;
+                background: string;
+            };
+            hover: {
+                text: string;
+                background: string;
+            };
+            focus: {
+                text: string;
+                background: string;
+            };
+            active: {
+                text: string;
+                background: string;
+            };
+        };
+        plain: {
+            normal: {
+                text: string;
+                background: string;
+            };
+            hover: {
+                text: string;
+                background: string;
+            };
+            active: {
+                text: string;
+                background: string;
+            };
+            focus: {
+                text: string;
+                background: string;
+            };
+        };
+        plainMono: {
+            normal: {
+                text: string;
+                background: string;
+            };
+            hover: {
+                text: string;
+                background: string;
+            };
+            active: {
+                text: string;
+                background: string;
+            };
+            focus: {
+                text: string;
+                background: string;
+            };
+        };
+    };
     white: string;
@@ -23,0 +97,0 @@ black: string;

dist/mixins.d.ts

@@ -30,2 +30,3 @@ declare type FocusBoxShadowProps = {
     color?: string;
+    inline?: boolean;
 };
@@ -71,3 +72,3 @@ declare const _default: {
     };
-    input: ({ invalid, disabled, radius, color }: InputProps) => {
+    input: ({ invalid, disabled, radius, color, inline }: InputProps) => {
         fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\",  Arial, sans-serif";
@@ -74,0 +75,0 @@ fontSize: number;

dist/variables.d.ts

@@ -132,3 +132,3 @@ import { ValueOfArray } from '@cloudflare/types';
         };
-        input: ({ invalid, disabled, radius, color }: {
+        input: ({ invalid, disabled, radius, color, inline }: {
             invalid?: boolean | undefined;
@@ -139,2 +139,3 @@ disabled?: boolean | undefined;
             color?: string | undefined;
+            inline?: boolean | undefined;
         }) => {
@@ -141,0 +142,0 @@ fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\",  Arial, sans-serif";

es/colors/dark.js

@@ -12,2 +12,3 @@ 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; }
 var background = colorsV1.gray[9];
+var text = colorsV2.gray[0];
 export default _objectSpread(_objectSpread({}, colorsV1), {}, {
@@ -32,3 +33,77 @@ background,
     hover: colorsV2.gray[9]
+  },
+  button: {
+    primary: {
+      normal: {
+        text: colorsV2.white,
+        background: colorsV2.blue[5]
+      },
+      hover: {
+        text: colorsV2.white,
+        background: colorsV2.blue[3]
+      },
+      focus: {
+        text: colorsV2.white,
+        background: colorsV2.blue[3]
+      },
+      active: {
+        text: colorsV2.white,
+        background: colorsV2.blue[1]
+      }
+    },
+    danger: {
+      normal: {
+        text: colorsV2.white,
+        background: colorsV2.red[5]
+      },
+      hover: {
+        text: colorsV2.white,
+        background: colorsV2.red[3]
+      },
+      focus: {
+        text: colorsV2.white,
+        background: colorsV2.red[3]
+      },
+      active: {
+        text: colorsV2.white,
+        background: colorsV2.red[1]
+      }
+    },
+    plain: {
+      normal: {
+        text: colorsV2.blue[5],
+        background
+      },
+      hover: {
+        text: colorsV2.blue[3],
+        background: colorsV2.blue[9]
+      },
+      active: {
+        text: colorsV2.blue[1],
+        background: colorsV2.blue[7]
+      },
+      focus: {
+        text,
+        background
+      }
+    },
+    plainMono: {
+      normal: {
+        text,
+        background
+      },
+      hover: {
+        text,
+        background: colorsV2.gray[9]
+      },
+      active: {
+        text,
+        background: colorsV2.gray[8]
+      },
+      focus: {
+        text,
+        background: colorsV2.gray[9]
+      }
+    }
   }
 });

es/colors/light.js

@@ -12,2 +12,3 @@ 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; }
 var background = colorsV1.white;
+var text = colorsV2.gray[0];
 export default _objectSpread(_objectSpread({}, colorsV1), {}, {
@@ -32,3 +33,77 @@ background,
     hover: colorsV2.gray[9]
+  },
+  button: {
+    primary: {
+      normal: {
+        text: colorsV2.white,
+        background: colorsV2.blue[5]
+      },
+      hover: {
+        text: colorsV2.white,
+        background: colorsV2.blue[3]
+      },
+      focus: {
+        text: colorsV2.white,
+        background: colorsV2.blue[3]
+      },
+      active: {
+        text: colorsV2.white,
+        background: colorsV2.blue[1]
+      }
+    },
+    danger: {
+      normal: {
+        text: colorsV2.white,
+        background: colorsV2.red[5]
+      },
+      hover: {
+        text: colorsV2.white,
+        background: colorsV2.red[3]
+      },
+      focus: {
+        text: colorsV2.white,
+        background: colorsV2.red[3]
+      },
+      active: {
+        text: colorsV2.white,
+        background: colorsV2.red[1]
+      }
+    },
+    plain: {
+      normal: {
+        text: colorsV2.blue[5],
+        background
+      },
+      hover: {
+        text: colorsV2.blue[3],
+        background: colorsV2.blue[9]
+      },
+      active: {
+        text: colorsV2.blue[1],
+        background: colorsV2.blue[7]
+      },
+      focus: {
+        text: colorsV2.blue[5],
+        background: colorsV2.blue[9]
+      }
+    },
+    plainMono: {
+      normal: {
+        text,
+        background
+      },
+      hover: {
+        text,
+        background: colorsV2.gray[9]
+      },
+      active: {
+        text,
+        background: colorsV2.gray[8]
+      },
+      focus: {
+        text,
+        background: colorsV2.gray[9]
+      }
+    }
   }
 });

es/mixins.js

@@ -110,3 +110,4 @@ var _excluded = ["border", "invalid", "focused", "disabled", "within"];
     radius,
-    color
+    color,
+    inline
   } = _ref3;
@@ -119,5 +120,5 @@ return {
     opacity: disabled ? 0.5 : 1,
-    backgroundColor: disabled ? theme.colors.gray[8] : theme.colors.white,
+    backgroundColor: disabled ? theme.colors.gray[8] : inline ? 'transparent' : theme.colors.white,
     borderWidth: '1px',
-    borderStyle: 'solid',
+    borderStyle: inline ? 'none' : 'solid',
     borderColor: invalid && !disabled ? theme.colors.error : theme.colors.gray[isDarkMode() ? 4 : 5],
@@ -124,0 +125,0 @@ borderRadius: radius !== null && radius !== void 0 ? radius : theme.radii[2],

lib/colors/dark.js

@@ -21,2 +21,3 @@ "use strict";
 var background = _darkScalesV.default.gray[9];
+var text = _darkScalesV2.default.gray[0];
 
@@ -42,2 +43,76 @@ var _default = _objectSpread(_objectSpread({}, _darkScalesV.default), {}, {
     hover: _darkScalesV2.default.gray[9]
+  },
+  button: {
+    primary: {
+      normal: {
+        text: _darkScalesV2.default.white,
+        background: _darkScalesV2.default.blue[5]
+      },
+      hover: {
+        text: _darkScalesV2.default.white,
+        background: _darkScalesV2.default.blue[3]
+      },
+      focus: {
+        text: _darkScalesV2.default.white,
+        background: _darkScalesV2.default.blue[3]
+      },
+      active: {
+        text: _darkScalesV2.default.white,
+        background: _darkScalesV2.default.blue[1]
+      }
+    },
+    danger: {
+      normal: {
+        text: _darkScalesV2.default.white,
+        background: _darkScalesV2.default.red[5]
+      },
+      hover: {
+        text: _darkScalesV2.default.white,
+        background: _darkScalesV2.default.red[3]
+      },
+      focus: {
+        text: _darkScalesV2.default.white,
+        background: _darkScalesV2.default.red[3]
+      },
+      active: {
+        text: _darkScalesV2.default.white,
+        background: _darkScalesV2.default.red[1]
+      }
+    },
+    plain: {
+      normal: {
+        text: _darkScalesV2.default.blue[5],
+        background: background
+      },
+      hover: {
+        text: _darkScalesV2.default.blue[3],
+        background: _darkScalesV2.default.blue[9]
+      },
+      active: {
+        text: _darkScalesV2.default.blue[1],
+        background: _darkScalesV2.default.blue[7]
+      },
+      focus: {
+        text: text,
+        background: background
+      }
+    },
+    plainMono: {
+      normal: {
+        text: text,
+        background: background
+      },
+      hover: {
+        text: text,
+        background: _darkScalesV2.default.gray[9]
+      },
+      active: {
+        text: text,
+        background: _darkScalesV2.default.gray[8]
+      },
+      focus: {
+        text: text,
+        background: _darkScalesV2.default.gray[9]
+      }
+    }
   }
@@ -44,0 +119,0 @@ });

lib/colors/light.js

@@ -21,2 +21,3 @@ "use strict";
 var background = _lightScalesV.default.white;
+var text = _lightScalesV2.default.gray[0];
 
@@ -42,2 +43,76 @@ var _default = _objectSpread(_objectSpread({}, _lightScalesV.default), {}, {
     hover: _lightScalesV2.default.gray[9]
+  },
+  button: {
+    primary: {
+      normal: {
+        text: _lightScalesV2.default.white,
+        background: _lightScalesV2.default.blue[5]
+      },
+      hover: {
+        text: _lightScalesV2.default.white,
+        background: _lightScalesV2.default.blue[3]
+      },
+      focus: {
+        text: _lightScalesV2.default.white,
+        background: _lightScalesV2.default.blue[3]
+      },
+      active: {
+        text: _lightScalesV2.default.white,
+        background: _lightScalesV2.default.blue[1]
+      }
+    },
+    danger: {
+      normal: {
+        text: _lightScalesV2.default.white,
+        background: _lightScalesV2.default.red[5]
+      },
+      hover: {
+        text: _lightScalesV2.default.white,
+        background: _lightScalesV2.default.red[3]
+      },
+      focus: {
+        text: _lightScalesV2.default.white,
+        background: _lightScalesV2.default.red[3]
+      },
+      active: {
+        text: _lightScalesV2.default.white,
+        background: _lightScalesV2.default.red[1]
+      }
+    },
+    plain: {
+      normal: {
+        text: _lightScalesV2.default.blue[5],
+        background: background
+      },
+      hover: {
+        text: _lightScalesV2.default.blue[3],
+        background: _lightScalesV2.default.blue[9]
+      },
+      active: {
+        text: _lightScalesV2.default.blue[1],
+        background: _lightScalesV2.default.blue[7]
+      },
+      focus: {
+        text: _lightScalesV2.default.blue[5],
+        background: _lightScalesV2.default.blue[9]
+      }
+    },
+    plainMono: {
+      normal: {
+        text: text,
+        background: background
+      },
+      hover: {
+        text: text,
+        background: _lightScalesV2.default.gray[9]
+      },
+      active: {
+        text: text,
+        background: _lightScalesV2.default.gray[8]
+      },
+      focus: {
+        text: text,
+        background: _lightScalesV2.default.gray[9]
+      }
+    }
   }
@@ -44,0 +119,0 @@ });

lib/mixins.js

@@ -128,3 +128,4 @@ "use strict";
       radius = _ref5.radius,
-      color = _ref5.color;
+      color = _ref5.color,
+      inline = _ref5.inline;
   return {
@@ -136,5 +137,5 @@ fontFamily: _variables.default.fontFamily,
     opacity: disabled ? 0.5 : 1,
-    backgroundColor: disabled ? _variables.default.colors.gray[8] : _variables.default.colors.white,
+    backgroundColor: disabled ? _variables.default.colors.gray[8] : inline ? 'transparent' : _variables.default.colors.white,
     borderWidth: '1px',
-    borderStyle: 'solid',
+    borderStyle: inline ? 'none' : 'solid',
     borderColor: invalid && !disabled ? _variables.default.colors.error : _variables.default.colors.gray[(0, _utils.isDarkMode)() ? 4 : 5],
@@ -141,0 +142,0 @@ borderRadius: radius !== null && radius !== void 0 ? radius : _variables.default.radii[2],

package.json

 {
   "name": "@cloudflare/style-const",
   "description": "Cloudflare Style Constants",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

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

180071

increased by6.29%

Lines of code

1970

increased by29.78%

No dependency changes