From f9d35ee216b050b80678d6ab3855d466f815a30a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 22 Jun 2023 10:52:37 +0800
Subject: [PATCH] Fix light mode selected colour on the labels picker

---
 packages/web/components/elements/EditLabelChip.tsx     | 10 +++++++---
 .../web/components/elements/EditLabelChipStack.tsx     |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/elements/EditLabelChip.tsx b/packages/web/components/elements/EditLabelChip.tsx
index 586758031..930f9f739 100644
--- a/packages/web/components/elements/EditLabelChip.tsx
+++ b/packages/web/components/elements/EditLabelChip.tsx
@@ -2,6 +2,7 @@ import { Button } from './Button'
 import { SpanBox, HStack } from './LayoutPrimitives'
 import { Circle, X } from 'phosphor-react'
 import { isDarkTheme } from '../../lib/themeUpdater'
+import { theme } from '../tokens/stitches.config'
 
 type EditLabelChipProps = {
   text: string
@@ -13,9 +14,12 @@ type EditLabelChipProps = {
 export function EditLabelChip(props: EditLabelChipProps): JSX.Element {
   const isDark = isDarkTheme()
 
-  const selectedBorder = isDark ? '#FFEA9F' : '#D9D9D9'
+  const selectedBorder = isDark ? '#FFEA9F' : '$omnivoreGray'
   const unSelectedBorder = isDark ? 'transparent' : '#DEDEDE'
-  const xUnselectedColor = isDark ? '#6A6968' : '#DEDEDE'
+  const xSelectedColor = isDark
+    ? '#FFEA9F'
+    : theme.colors.omnivoreGray.toString()
+  const xUnselectedColor = isDark ? '#6A6968' : '#2A2A2A'
 
   return (
     <SpanBox
@@ -50,7 +54,7 @@ export function EditLabelChip(props: EditLabelChipProps): JSX.Element {
         >
           <X
             size={14}
-            color={props.isSelected ? '#FFEA9F' : xUnselectedColor}
+            color={props.isSelected ? xSelectedColor : xUnselectedColor}
           />
         </Button>
       </HStack>
diff --git a/packages/web/components/elements/EditLabelChipStack.tsx b/packages/web/components/elements/EditLabelChipStack.tsx
index d31d1496a..2844f2264 100644
--- a/packages/web/components/elements/EditLabelChipStack.tsx
+++ b/packages/web/components/elements/EditLabelChipStack.tsx
@@ -4,6 +4,7 @@ import { Circle, X } from 'phosphor-react'
 import { isDarkTheme } from '../../lib/themeUpdater'
 import { Label } from '../../lib/networking/fragments/labelFragment'
 import { useMemo } from 'react'
+import { theme } from '../tokens/stitches.config'
 
 type EditLabelChipStackProps = {
   labels: Label[]
@@ -16,7 +17,7 @@ export function EditLabelChipStack(
 ): JSX.Element {
   const isDark = isDarkTheme()
 
-  const selectedBorder = isDark ? '#FFEA9F' : '#D9D9D9'
+  const selectedBorder = isDark ? '#FFEA9F' : '$omnivoreGray'
   const unSelectedBorder = isDark ? 'transparent' : '#DEDEDE'
 
   const colors = useMemo(() => {