@unitedstatespowersquadrons/components 1.4.2-1 → 1.4.2-2

package/IconButton.tsx

@@ -1,24 +1,35 @@
 import React from "react";
 import { createUseStyles } from "react-jss";
 import classNames from "classnames";
-import { ButtonColorName } from "./Colors";
+import Colors, { ButtonColorName } from "./Colors";
 import FontAwesomeIcon, { FontAwesomeProps } from "./FontAwesomeIcon";
 import BaseActionButton from "./BaseActionButton";
 import { HrefProps, MethodProps, OnClickProps } from "./types";
-import Styles from "./Styles";
+
+// FA duotone uses `--fa-primary-color` / `--fa-secondary-color`. Their
+// out-of-the-box defaults are `inherit` (currentColor), but the kit can
+// override that with literal hexes, which freezes the duotone color
+// regardless of `color`. Re-pin both to `currentColor` so each layer
+// follows our `color` while `--fa-secondary-opacity` (default 0.4) keeps
+// the duotone contrast.
+const colorize = (hex: string) => ({
+  "--fa-primary-color": "currentColor",
+  "--fa-secondary-color": "currentColor",
+  color: hex,
+});
 
 const useStyles = createUseStyles({
-  blue: { ...Styles.blue },
-  darkGray: { ...Styles.darkGray },
-  gray: { ...Styles.gray },
-  green: { ...Styles.green },
+  blue: colorize(Colors.blue),
+  darkGray: colorize(Colors.darkGray),
+  gray: colorize(Colors.gray),
+  green: colorize(Colors.green),
   icon: {
     cursor: "pointer",
     fontSize: "1.1em",
   },
-  orange: { ...Styles.orange },
-  purple: { ...Styles.purple },
-  red: { ...Styles.red },
+  orange: colorize(Colors.orange),
+  purple: colorize(Colors.purple),
+  red: colorize(Colors.red),
   wrapperLink: {
     display: "inline-block",
     margin: "0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.4.2-1",
+  "version": "1.4.2-2",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {