fix: adjust foreground color based on background color (#58)

* fix: adjust foreground color based on background color

* chore: build

Co-authored-by: Johnny Almonte <[email protected]>

app/components/AuthEntry.js

@@ -4,6 +4,7 @@ import { totp } from '@Lib/otp';
 import CountdownPie from '@Components/CountdownPie';
 import AuthMenu from '@Components/AuthMenu';
 import DragIndicator from '@Components/DragIndicator';
+import { getVarColorForContrast, hexColorToRGB } from '@Lib/utils';
 
 export default class AuthEntry extends React.Component {
   constructor(props) {
@@ -75,7 +76,14 @@ export default class AuthEntry extends React.Component {
 
     const entryStyle = {};
     if (color) {
+      // The background color for the entry.
       entryStyle.backgroundColor = color;
+
+      const rgbColor = hexColorToRGB(color);
+      const varColor = getVarColorForContrast(rgbColor);
+
+      // The foreground color for the entry.
+      entryStyle.color = `var(${varColor})`;
     }
 
     delete divProps.onCopyValue;
@@ -121,7 +129,13 @@ export default class AuthEntry extends React.Component {
                 <div>{token.substr(3, 3)}</div>
               </div>
               <div className="auth-countdown">
-                <CountdownPie token={token} timeLeft={timeLeft} total={30} bgColor={color} />
+                <CountdownPie
+                  token={token}
+                  timeLeft={timeLeft}
+                  total={30}
+                  bgColor={entryStyle.backgroundColor}
+                  fgColor={entryStyle.color}
+                />
               </div>
             </div>
           </div>
@@ -130,6 +144,7 @@ export default class AuthEntry extends React.Component {
               <AuthMenu
                 onEdit={onEdit.bind(this, id)}
                 onRemove={onRemove.bind(this, id)}
+                buttonColor={entryStyle.color}
               />
             </div>
           )}

app/components/AuthMenu.js

@@ -27,9 +27,16 @@ export default class AuthMenu extends React.Component {
   }
 
   render() {
+    const { buttonColor } = this.props;
+
+    const buttonStyle = {};
+    if (buttonColor) {
+      buttonStyle.color = buttonColor;
+    }
+
     return (
       <div className="auth-menu">
-        <div className="sk-button" onClick={this.onToggle}>
+        <div className="sk-button" onClick={this.onToggle} style={buttonStyle}>
           <div className="sk-label">•••</div>
         </div>
         {this.state.show && (
@@ -50,5 +57,6 @@ export default class AuthMenu extends React.Component {
 
 AuthMenu.propTypes = {
   onEdit: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired
+  onRemove: PropTypes.func.isRequired,
+  buttonColor: PropTypes.string
 };

app/components/CountdownPie.js

@@ -93,7 +93,7 @@ function useRotateAnimation(token, timeLeft, total) {
   );
 }
 
-const CountdownPie = ({ token, timeLeft, total, bgColor }) => {
+const CountdownPie = ({ token, timeLeft, total, bgColor, fgColor }) => {
   useRotateAnimation(token, timeLeft, total);
 
   return (
@@ -104,13 +104,17 @@ const CountdownPie = ({ token, timeLeft, total, bgColor }) => {
         className="pie spinner"
         style={{
           animation: `rota_${animationName(token)} ${timeLeft}s linear`,
+          backgroundColor: fgColor
         }}
       />
-      <div className="pie background" />
+      <div className="pie background" style={{
+        backgroundColor: fgColor
+      }} />
       <div
         className="pie filler"
         style={{
           animation: `opa_r_${animationName(token)} ${timeLeft}s steps(1, end)`,
+          backgroundColor: fgColor
         }}
       />
       <div
@@ -127,7 +131,8 @@ CountdownPie.propTypes = {
   token: PropTypes.string.isRequired,
   timeLeft: PropTypes.number.isRequired,
   total: PropTypes.number.isRequired,
-  bgColor: PropTypes.string
+  bgColor: PropTypes.string,
+  fgColor: PropTypes.string
 };
 
 export default CountdownPie;

app/lib/utils.js

@@ -116,3 +116,35 @@ export function parseKeyUri(uri) {
   // Returned the parsed parts of the URI
   return { type: type.toLowerCase(), label, query };
 }
+
+/**
+ * Converts a hex color string to an object containing RGB values.
+ */
+export function hexColorToRGB(hexColor) {
+  // Expand the shorthand form (e.g. "0AB") to full form (e.g. "00AABB")
+  const shortHandFormRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hexColor = hexColor.replace(shortHandFormRegex, function(m, red, green, blue) {
+    return red + red + green + green + blue + blue;
+  });
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
+  return result ? {
+    red: parseInt(result[1], 16),
+    green: parseInt(result[2], 16),
+    blue: parseInt(result[3], 16)
+  } : null;
+}
+
+/**
+ * Gets the color variable to be used based on the calculated constrast of a color.
+ */
+export function getVarColorForContrast(backgroundColor) {
+  const styleKitColors = {
+    foreground: '--sn-stylekit-contrast-foreground-color',
+    background: '--sn-stylekit-contrast-background-color'
+  };
+  if (!backgroundColor) {
+    return styleKitColors.foreground;
+  }
+  const colorContrast = Math.round(((parseInt(backgroundColor.red) * 299) + (parseInt(backgroundColor.green) * 587) + (parseInt(backgroundColor.blue) * 114)) / 1000);
+  return (colorContrast > 125) ? styleKitColors.background : styleKitColors.foreground;
+}

app/stylesheets/main.scss

@@ -177,7 +177,6 @@ html {
         font-size: 2rem;
         align-self: center;
         font-weight: bold;
-        color: var(--sn-stylekit-info-color);
         display: flex;
         justify-content: space-between;
         width: 8.2rem;
@@ -221,7 +220,7 @@ html {
   }
 
   .auth-drag-indicator-container {
-    color: var(--sn-stylekit-contrast-foreground-color);
+    color: inherit;
     overflow: visible;
     margin-bottom: 8px;
     align-self: center;
@@ -262,7 +261,7 @@ html {
   border-radius: 50%;
   width: 100%;
   z-index: 40;
-  color: var(--sn-stylekit-info-color);
+  color: inherit;
   opacity: 0.4;
 }