diff --git a/web/roles/community-roles-modal.css b/web/roles/community-roles-modal.css
--- a/web/roles/community-roles-modal.css
+++ b/web/roles/community-roles-modal.css
@@ -1,5 +1,5 @@
 .modalDescription {
-  color: var(--modal-fg);
+  color: var(--text-background-secondary-default);
   padding: 16px 32px 0 32px;
   font-size: var(--m-font-16);
 }
@@ -12,7 +12,7 @@
 }
 
 .rolePanelTitle {
-  color: var(--community-roles-text-color);
+  color: var(--text-background-primary-default);
   font-size: var(--l-font-18);
 }
 
@@ -27,7 +27,7 @@
   align-self: center;
   height: 2px;
   border: none;
-  border-top: var(--modal-separator) solid 1px;
+  border-top: var(--separator-background-primary-default) solid 1px;
 }
 
 .rolePanelList {
diff --git a/web/roles/role-actions-menu.css b/web/roles/role-actions-menu.css
--- a/web/roles/role-actions-menu.css
+++ b/web/roles/role-actions-menu.css
@@ -1,4 +1,4 @@
 .menuContainer {
-  color: var(--menu-color-light);
+  color: var(--text-background-secondary-default);
   width: 10px;
 }
diff --git a/web/roles/role-panel-entry.css b/web/roles/role-panel-entry.css
--- a/web/roles/role-panel-entry.css
+++ b/web/roles/role-panel-entry.css
@@ -2,7 +2,7 @@
   display: grid;
   align-items: center;
   padding: 12px;
-  color: var(--community-roles-text-color);
+  color: var(--text-background-primary-default);
   font-weight: 500;
 }
 
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -230,7 +230,6 @@
   --change-member-role-modal-disabled-background: var(--shades-black-75);
   --unsaved-changes-modal-text-color: var(--shades-white-60);
   --modal-secondary-label: var(--shades-black-50);
-  --community-roles-text-color: var(--shades-white-100);
   --modal-separator: var(--shades-black-75);
   --create-roles-text-color: var(--shades-white-100);
 }