Extract colors to vars

onaio · May 24, 2024 · 497aaa5 · 497aaa5
1 parent e2387af
commit 497aaa5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/app/src/components/page/Sidebar/Sidebar.css b/app/src/components/page/Sidebar/Sidebar.css
@@ -12,7 +12,7 @@
   }
 
   .ant-btn-link:hover {
-    color: #fff;
+    color: var(--menu-item-text_hover__dark-theme__color);
   }
 }
 
@@ -32,7 +32,7 @@
 }
 
 .collapse-icon {
-  color: rgba(255, 255, 255, 0.65);
+  color: var(--menu-item-text__dark-theme__color);
   padding: 0 16px;
   margin-right: 19px;
   margin-left: auto;
@@ -45,11 +45,11 @@
 }
 
 .menu-dark ul:last-child {
-  background: #141414 !important;
+  background: var(--sub-menu-items__background) !important;
 }
 
 .ant-menu-dark.ant-menu-submenu > .ant-menu {
-  background: #141414 !important;
+  background: var(--sub-menu-items__background) !important;
 }
 
 .sidebar-icons {

diff --git a/packages/react-utils/src/components/CommonStyles/index.css b/packages/react-utils/src/components/CommonStyles/index.css
@@ -2,6 +2,11 @@
 
 /* common colors */
 :root {
+  /* side menu */
+  --menu-item-text__dark-theme__color: rgba(255, 255, 255, 0.7);
+  --menu-item-text_hover__dark-theme__color: #FFFFFF;
+  --sub-menu-items__background: #141414;
+
   /* detail page tab count badge colors */
   --tab-title-count-badge-active__color: #1676FE;
   --tab-title-count-badge-active__background: #EBF7FF;