From 28bd52d9e9f221d66c9999baff40931085ae00a8 Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Fri, 24 Jun 2022 07:30:26 -0400
Subject: [PATCH] ux: color hex default to removeAlphaIfOpaque

---
 theatre/shared/src/utils/color.ts                  | 14 +++++++++++---
 .../propEditors/simpleEditors/RgbaPropEditor.tsx   |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/theatre/shared/src/utils/color.ts b/theatre/shared/src/utils/color.ts
index 048df90..d0c1b0a 100644
--- a/theatre/shared/src/utils/color.ts
+++ b/theatre/shared/src/utils/color.ts
@@ -42,12 +42,20 @@ export function parseRgbaFromHex(rgba: string) {
   }
 }
 
-export function rgba2hex(rgba: Rgba) {
+export function rgba2hex(
+  rgba: Rgba,
+  {
+    /** Alpha is usually an optional value for most hex inputs, so if it's opaque, we can omit its value. */
+    removeAlphaIfOpaque = false,
+  } = {},
+) {
+  const alpha = ((rgba.a * 255) | (1 << 8)).toString(16).slice(1)
+
   const hex =
     ((rgba.r * 255) | (1 << 8)).toString(16).slice(1) +
     ((rgba.g * 255) | (1 << 8)).toString(16).slice(1) +
     ((rgba.b * 255) | (1 << 8)).toString(16).slice(1) +
-    ((rgba.a * 255) | (1 << 8)).toString(16).slice(1)
+    (removeAlphaIfOpaque && alpha === 'ff' ? '' : alpha)
 
   return `#${hex}`
 }
@@ -59,7 +67,7 @@ export function decorateRgba(rgba: Rgba) {
   return {
     ...rgba,
     toString() {
-      return rgba2hex(this)
+      return rgba2hex(this, {removeAlphaIfOpaque: true})
     },
   }
 }
diff --git a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
index 39dbab2..ad98d9f 100644
--- a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
+++ b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
@@ -111,7 +111,7 @@ function RgbaPropEditor({
           }}
         />
         <HexInput
-          value={rgba2hex(value)}
+          value={rgba2hex(value, {removeAlphaIfOpaque: true})}
           temporarilySetValue={noop}
           discardTemporaryValue={noop}
           permanentlySetValue={onChange}