From 2efc1fb3729dc93651b1f98925a3713fd9d3dcc5 Mon Sep 17 00:00:00 2001
From: Jordan Frankfurt <jordanwfrankfurt@gmail.com>
Date: Mon, 7 Feb 2022 18:15:24 -0500
Subject: [PATCH] fix(widgets): convert widget colors from hex to hsl (#3239)

* convert widget colors from hex to hsl

* nits
---
 src/lib/theme/dynamic.tsx |  4 +--
 src/lib/theme/index.tsx   | 59 ++++++++++++++++++++-------------------
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/lib/theme/dynamic.tsx b/src/lib/theme/dynamic.tsx
index fc832f55b4..47b295ae7c 100644
--- a/src/lib/theme/dynamic.tsx
+++ b/src/lib/theme/dynamic.tsx
@@ -8,8 +8,8 @@ import { Colors, ComputedTheme } from './theme'
 
 type DynamicColors = Pick<Colors, 'interactive' | 'outline' | 'primary' | 'secondary' | 'onInteractive'>
 
-const black = '#000000'
-const white = '#FFFFFF'
+const black = 'hsl(0, 0%, 0%)'
+const white = 'hsl(0, 0%, 100%)'
 
 const light: DynamicColors = {
   // surface
diff --git a/src/lib/theme/index.tsx b/src/lib/theme/index.tsx
index f317badcd6..ebdc676b23 100644
--- a/src/lib/theme/index.tsx
+++ b/src/lib/theme/index.tsx
@@ -14,56 +14,57 @@ export * from './layer'
 export * from './styled'
 export * as ThemedText from './type'
 
-export const brand = '#FF007A'
+export const brand = 'hsl(331.3, 100%, 50%)'
+
+const stateColors = {
+  active: 'hsl(215, 79%, 51.4%)',
+  success: 'hsl(145, 63.4%, 41.8%)',
+  warning: 'hsl(43, 89.9%, 53.5%)',
+  error: 'hsl(0, 98%, 62.2%)',
+}
 
 export const lightTheme: Colors = {
   // surface
   accent: brand,
-  container: '#F7F8FA',
-  module: '#E2E3E9',
-  interactive: '#CED0D9',
-  outline: '#C3C5CB',
-  dialog: '#FFFFFF',
+  container: 'hsl(220, 23%, 97.5%)',
+  module: 'hsl(231, 14%, 90%)',
+  interactive: 'hsl(229, 13%, 83%)',
+  outline: 'hsl(225, 7%, 78%)',
+  dialog: 'hsl(0, 0%, 100%)',
 
   // text
-  onAccent: '#ffffff',
-  primary: '#000000',
-  secondary: '#565A69',
-  hint: '#888D9B',
-  onInteractive: '#000000',
+  onAccent: 'hsl(0, 0%, 100%)',
+  primary: 'hsl(0, 0%, 0%)',
+  secondary: 'hsl(227, 10%, 37.5%)',
+  hint: 'hsl(224, 9%, 57%)',
+  onInteractive: 'hsl(0, 0%, 0%)',
 
   // state
-  active: '#2172E5',
-  success: '#27AE60',
-  warning: '#F3B71E',
-  error: '#FD4040',
+  ...stateColors,
 
   currentColor: 'currentColor',
 }
 
-const darkThemeAccent = '#2172E5'
+const darkThemeAccent = 'hsl(215, 79%, 51.4%)'
 
 export const darkTheme: Colors = {
   // surface
   accent: darkThemeAccent,
-  container: '#191B1F',
-  module: '#2C2F36',
-  interactive: '#40444F',
-  outline: '#565A69',
-  dialog: '#000000',
+  container: 'hsl(220, 10.7%, 11%)',
+  module: 'hsl(222, 10.2%, 19.2%)',
+  interactive: 'hsl(224, 10.5%, 281%)',
+  outline: 'hsl(227, 10%, 37.5%)',
+  dialog: 'hsl(0, 0%, 0%)',
 
   // text
   onAccent: readableColor(darkThemeAccent),
-  primary: '#FFFFFF',
-  secondary: '#888D9B',
-  hint: '#6C7284',
-  onInteractive: '#FFFFFF',
+  primary: 'hsl(0, 0%, 100%)',
+  secondary: 'hsl(224, 8.7%, 57.1%)',
+  hint: 'hsl(225, 10%, 47.1%)',
+  onInteractive: 'hsl(0, 0%, 100%)',
 
   // state
-  active: '#2172E5',
-  success: '#27AE60',
-  warning: '#F3B71E',
-  error: '#FD4040',
+  ...stateColors,
 
   currentColor: 'currentColor',
 }