diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 40e7476962c8..eac56c606ef1 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -108,6 +108,7 @@ export const activeTertiary = blue80;
 export const hoverUI = '#e5e5e5';
 export const activeUI = gray30;
 export const selectedUI = gray20;
+export const selectedLightUI = gray20;
 export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#cacaca';
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index 30adbd8653db..192e4313e1f9 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -107,6 +107,7 @@ export const activeTertiary = gray30;
 export const hoverUI = '#353535';
 export const activeUI = gray70;
 export const selectedUI = gray80;
+export const selectedLightUI = gray70;
 export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#4c4c4c';
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index f73d1cb3f48c..8b8c0b23c5c2 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -109,6 +109,7 @@ export const activeTertiary = gray30;
 export const hoverUI = '#4c4c4c';
 export const activeUI = gray60;
 export const selectedUI = gray70;
+export const selectedLightUI = gray60;
 export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#656565';
diff --git a/packages/themes/src/tokens.js b/packages/themes/src/tokens.js
index 840120952ec3..42669a48e768 100644
--- a/packages/themes/src/tokens.js
+++ b/packages/themes/src/tokens.js
@@ -78,6 +78,7 @@ const colors = [
   'activeUI',
 
   'selectedUI',
+  'selectedLightUI',
   'hoverSelectedUI',
   'inverseHoverUI',
 
@@ -217,6 +218,7 @@ export const unstable__meta = {
         'activeUI',
         'activeDanger',
         'selectedUI',
+        'selectedLightUI',
         'highlight',
         'skeleton01',
         'skeleton02',
diff --git a/packages/themes/src/v9.js b/packages/themes/src/v9.js
index 15c2c391e337..6d93e7a66bb6 100644
--- a/packages/themes/src/v9.js
+++ b/packages/themes/src/v9.js
@@ -72,6 +72,7 @@ export const activeTertiary = '#414f59';
 export const hoverUI = '#EEF4FC';
 export const activeUI = '#DFEAFA';
 export const selectedUI = '#EEF4FC';
+export const selectedLightUI = '#EEF4FC';
 export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#DFEAFA';
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index 3befc6eeaa6a..8bfa7c2c3ffe 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -108,6 +108,7 @@ export const activeTertiary = blue80;
 export const hoverUI = '#e5e5e5';
 export const activeUI = gray30;
 export const selectedUI = gray20;
+export const selectedLightUI = gray20;
 export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#cacaca';