From 66889cc2fc4868cdd025e6e274d21810c78a61c8 Mon Sep 17 00:00:00 2001
From: Kimberly Baldauf <107082171+k-baldauf@users.noreply.github.com>
Date: Thu, 6 Jun 2024 18:14:59 +0900
Subject: [PATCH] fix(tablekit-react-select): update various visuals

---
 system/core/src/components/MenuItem.ts  | 2 +-
 system/core/src/components/MenuList.ts  | 4 ++++
 system/core/src/themeVariables/theme.ts | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/system/core/src/components/MenuItem.ts b/system/core/src/components/MenuItem.ts
index 06601ca6c..ee1da30bd 100644
--- a/system/core/src/components/MenuItem.ts
+++ b/system/core/src/components/MenuItem.ts
@@ -35,7 +35,7 @@ export const fullStylesObject: CSSObject = {
   '&, &:any-link, &:hover': {
     color: 'var(--text)'
   },
-  padding: 'var(--spacing-l3)',
+  padding: 'var(--spacing-l2)',
   borderRadius: 'var(--border-radius-small)',
   display: 'grid',
   gridGap: 'var(--spacing-l2)',
diff --git a/system/core/src/components/MenuList.ts b/system/core/src/components/MenuList.ts
index e4da4a8ae..0b69bfe8b 100644
--- a/system/core/src/components/MenuList.ts
+++ b/system/core/src/components/MenuList.ts
@@ -18,6 +18,10 @@ export const fullStylesObject: CSSObject = {
   gridGap: 'var(--spacing-l1)',
   listStyle: 'none',
   alignItems: 'stretch',
+  borderColor: 'var(--border-transparent)',
+  borderRadius: 'var(--border-radius-small)',
+  borderStyle: 'solid',
+  borderWidth: '1px',
   '& > li': {
     display: 'flex',
     justifyContent: 'stretch'
diff --git a/system/core/src/themeVariables/theme.ts b/system/core/src/themeVariables/theme.ts
index 9032ae1b5..c5ea01c85 100644
--- a/system/core/src/themeVariables/theme.ts
+++ b/system/core/src/themeVariables/theme.ts
@@ -206,7 +206,7 @@ export const darkColors = css`
   --surface-disabled: rgba(75, 75, 75, 1);
   --surface-hover: rgba(41, 41, 41, 1);
   --surface-hover-transparent: rgba(255, 255, 255, 0.05);
-  --surface-low: rgba(18, 18, 18, 1);
+  --surface-low: rgba(26, 26, 26, 1);
   --surface-low-active: rgba(76, 68, 92, 1);
   --surface-low-hover: rgba(41, 41, 41, 1);
   --surface-low-hover-transparent: rgba(255, 255, 255, 0.05);
@@ -277,7 +277,7 @@ export const darkColorsObject = {
   'surface-disabled': 'rgba(75, 75, 75, 1)',
   'surface-hover': 'rgba(41, 41, 41, 1)',
   'surface-hover-transparent': 'rgba(255, 255, 255, 0.05)',
-  'surface-low': 'rgba(18, 18, 18, 1)',
+  'surface-low': 'rgba(26, 26, 26, 1)',
   'surface-low-active': 'rgba(76, 68, 92, 1)',
   'surface-low-hover': 'rgba(41, 41, 41, 1)',
   'surface-low-hover-transparent': 'rgba(255, 255, 255, 0.05)',