Task/colors 11

res/css/_common.scss

@@ -248,10 +248,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     color: $secondary-accent-color;
 }
 
-#mx_theme_tertiaryAccentColor {
-    color: $tertiary-accent-color;
-}
-
 /* Expected z-indexes for dialogs:
     4000 - Default wrapper index
     4009 - Static dialog background

res/css/structures/_GroupView.scss

@@ -244,7 +244,7 @@ limitations under the License.
 }
 
 .mx_GroupView_membershipSection {
-    color: $greyed-fg-color;
+    color: $info-plinth-fg-color;
     margin-top: 10px;
 }
 

res/css/structures/_LeftPanel.scss

@@ -129,7 +129,7 @@ $roomListCollapsedWidth: 68px;
                 width: 32px;
                 height: 32px;
                 border-radius: 8px;
-                background-color: $roomlist-button-bg-color;
+                background-color: $panel-actions;
                 position: relative;
                 margin-left: 8px;
 
@@ -152,7 +152,7 @@ $roomListCollapsedWidth: 68px;
                 width: 32px;
                 height: 32px;
                 border-radius: 8px;
-                background-color: $roomlist-button-bg-color;
+                background-color: $panel-actions;
                 position: relative;
                 margin-left: 8px;
 

res/css/structures/_RoomSearch.scss

@@ -18,7 +18,7 @@ limitations under the License.
 .mx_RoomSearch {
     flex: 1;
     border-radius: 8px;
-    background-color: $roomlist-button-bg-color;
+    background-color: $panel-actions;
     // keep border thickness consistent to prevent movement
     border: 1px solid transparent;
     height: 28px;

res/css/structures/_RoomView.scss

@@ -132,7 +132,7 @@ limitations under the License.
 }
 
 .mx_RoomView_messagePanelSearchSpinner::before {
-    background-color: $greyed-fg-color;
+    background-color: $info-plinth-fg-color;
     mask: url('$(res)/img/feather-customised/search-input.svg');
     mask-repeat: no-repeat;
     mask-position: center;

res/css/structures/_SpacePanel.scss

@@ -218,7 +218,7 @@ $activeBorderColor: $secondary-content;
         }
 
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
-            background-color: $roomlist-button-bg-color;
+            background-color: $panel-actions;
 
             &::before {
                 background-color: $primary-content;

res/css/views/context_menus/_StatusMessageContextMenu.scss

@@ -33,7 +33,7 @@ input.mx_StatusMessageContextMenu_message {
 }
 
 .mx_StatusMessageContextMenu_message::placeholder {
-    color: $memberstatus-placeholder-color;
+    color: $tertiary-content;
 }
 
 .mx_StatusMessageContextMenu_actionContainer {

res/css/views/dialogs/_ExportDialog.scss

@@ -35,7 +35,7 @@ limitations under the License.
         }
 
         .mx_StyledRadioButton input[type="radio"]:checked + div > div {
-            background: $greyed-fg-color;
+            background: $info-plinth-fg-color;
         }
 
         .mx_StyledRadioButton input[type=radio]:checked + div {
@@ -52,8 +52,8 @@ limitations under the License.
         }
 
         .mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
-            background: $greyed-fg-color;
-            border-color: $greyed-fg-color;
+            background: $info-plinth-fg-color;
+            border-color: $info-plinth-fg-color;
         }
     }
 

res/css/views/elements/_Dropdown.scss

@@ -38,7 +38,7 @@ limitations under the License.
 }
 
 .mx_Dropdown_input:focus {
-    border-color: $input-focused-border-color;
+    border-color: $accent-alt;
 }
 
 /* Disable dropdown highlight on focus */
@@ -110,7 +110,7 @@ input.mx_Dropdown_option:focus {
     margin: 0;
     padding: 0px;
     border-radius: 4px;
-    border: 1px solid $input-focused-border-color;
+    border: 1px solid $accent-alt;
     background-color: $background;
     max-height: 200px;
     overflow-y: auto;

res/css/views/elements/_Field.scss

@@ -73,7 +73,7 @@ limitations under the License.
 }
 
 .mx_Field:focus-within {
-    border-color: $input-focused-border-color;
+    border-color: $accent-alt;
 }
 
 .mx_Field input:focus,
@@ -92,7 +92,7 @@ limitations under the License.
 .mx_Field textarea:placeholder-shown:focus::placeholder,
 .mx_Field.mx_Field_placeholderIsHint input::placeholder {
     transition: color 0.25s ease-in 0.1s;
-    color: $greyed-fg-color;
+    color: $info-plinth-fg-color;
 }
 
 .mx_Field label {
@@ -136,7 +136,7 @@ limitations under the License.
 .mx_Field input:focus + label,
 .mx_Field select:focus + label,
 .mx_Field textarea:focus + label {
-    color: $input-focused-border-color;
+    color: $accent-alt;
 }
 
 .mx_Field select:disabled,
@@ -146,7 +146,7 @@ limitations under the License.
 .mx_Field textarea:disabled,
 .mx_Field textarea:disabled + label {
     background-color: $background;
-    color: $greyed-fg-color;
+    color: $info-plinth-fg-color;
 }
 
 .mx_Field_valid {

res/css/views/elements/_RichText.scss

@@ -32,7 +32,7 @@ a.mx_Pill {
 .mx_EventTile_content .markdown-body a.mx_GroupPill,
 .mx_GroupPill {
     color: $accent-fg-color;
-    background-color: $rte-group-pill-color;
+    background-color: $rte-room-pill-color;
 }
 
 /* More specific to override `.markdown-body a` text-decoration */

res/css/views/elements/_RoomAliasField.scss

@@ -30,12 +30,12 @@ limitations under the License.
     }
 
     input::placeholder {
-        color: $greyed-fg-color;
+        color: $info-plinth-fg-color;
         font-weight: normal;
     }
 
     .mx_Field_prefix, .mx_Field_postfix {
-        color: $greyed-fg-color;
+        color: $info-plinth-fg-color;
         border-left: none;
         border-right: none;
         font-weight: 600;

res/css/views/messages/_MessageActionBar.scss

@@ -55,7 +55,7 @@ limitations under the License.
         margin: 2px;
 
         &:hover {
-            background: $roomlist-button-bg-color;
+            background: $panel-actions;
             border-radius: 6px;
             z-index: 1;
         }

res/css/views/right_panel/_PinnedMessagesCard.scss

@@ -61,7 +61,7 @@ limitations under the License.
                 }
 
                 .mx_MessageActionBar_optionsButton {
-                    background: $roomlist-button-bg-color;
+                    background: $panel-actions;
                     border-radius: 6px;
                     z-index: 1;
 

res/css/views/rooms/_LinkPreviewWidget.scss

@@ -21,7 +21,7 @@ limitations under the License.
     display: flex;
     border-left: 2px solid $preview-widget-bar-color;
     border-radius: 2px;
-    color: $greyed-fg-color;
+    color: $info-plinth-fg-color;
 }
 
 .mx_LinkPreviewWidget_image {

res/css/views/rooms/_MemberList.scss

@@ -96,7 +96,7 @@ limitations under the License.
 }
 
 .mx_MemberList_invite.mx_AccessibleButton_disabled {
-    background-color: $greyed-fg-color;
+    background-color: $info-plinth-fg-color;
     cursor: not-allowed;
 }
 

res/css/views/rooms/_MessageComposer.scss

@@ -85,7 +85,7 @@ limitations under the License.
     width: 100%;
     height: 60px;
     font-style: italic;
-    color: $greyed-fg-color;
+    color: $info-plinth-fg-color;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -319,7 +319,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     font-size: $font-10px;
-    color: $greyed-fg-color;
+    color: $info-plinth-fg-color;
 }
 
 .mx_MessageComposer_formatbar * {

res/css/views/rooms/_MessageComposerFormatBar.scss

@@ -39,7 +39,7 @@ limitations under the License.
         margin: 2px;
 
         &:hover {
-            background: $roomlist-button-bg-color;
+            background: $panel-actions;
             border-radius: 6px;
             z-index: 1;
         }

res/css/views/rooms/_RoomList.scss

@@ -54,7 +54,7 @@ limitations under the License.
         margin-top: 12px;
         display: block;
         text-align: start;
-        background-color: $roomlist-button-bg-color;
+        background-color: $panel-actions;
         border-radius: 4px;
 
         &::before {

res/css/views/rooms/_RoomSublist.scss

@@ -120,7 +120,7 @@ limitations under the License.
 
         .mx_RoomSublist_auxButton:hover,
         .mx_RoomSublist_menuButton:hover {
-            background: $roomlist-button-bg-color;
+            background: $panel-actions;
         }
 
         // Hide the menu button by default
@@ -304,7 +304,7 @@ limitations under the License.
                 width: 32px !important; // !important to override hover styles
                 height: 32px !important; // !important to override hover styles
                 margin-left: 0 !important; // !important to override hover styles
-                background-color: $roomlist-button-bg-color;
+                background-color: $panel-actions;
                 margin-top: 8px;
 
                 &::before {

res/css/views/rooms/_RoomUpgradeWarningBar.scss

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_RoomUpgradeWarningBar {
     max-height: 235px;
-    background-color: $preview-bar-bg-color;
+    background-color: $info-plinth-bg-color;
     padding-left: 20px;
     padding-right: 20px;
     overflow: scroll;
@@ -48,6 +48,6 @@ limitations under the License.
 }
 
 .mx_RoomUpgradeWarningBar_small {
-    color: $greyed-fg-color;
+    color: $info-plinth-fg-color;
     font-size: 70%;
 }

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -65,7 +65,7 @@ $spacePanelWidth: 68px;
             width: 28px;
             height: 28px;
             position: relative;
-            background-color: $roomlist-button-bg-color;
+            background-color: $panel-actions;
             border-radius: 14px;
             margin-bottom: 12px;
 

res/themes/dark/css/_dark.scss

@@ -32,10 +32,9 @@ $icon-button-color: $tertiary-content;
 // Colors that aren't in Figma - we need to get rid of these
 // ********************
 $header-panel-text-primary-color: #B9BEC6;
-$text-secondary-color: #B9BEC6;
+$text-secondary-color: $header-panel-text-primary-color;
 $header-panel-text-secondary-color: #c8c8cd;
 $room-highlight-color: #343a46;
-$info-plinth-fg-color: #888;
 $event-highlight-bg-color: #25271F;
 $groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
@@ -51,7 +50,6 @@ $light-fg-color: $header-panel-text-secondary-color;
 $muted-fg-color: $header-panel-text-primary-color;
 $info-plinth-bg-color: $header-panel-bg-color;
 $dark-panel-bg-color: $header-panel-bg-color;
-$preview-bar-bg-color: $header-panel-bg-color;
 // ********************
 
 // Settings
@@ -65,7 +63,6 @@ $settings-subsection-fg-color: $text-secondary-color;
 // Rich-text editor
 // ********************
 $rte-room-pill-color: $room-highlight-color;
-$rte-group-pill-color: $room-highlight-color;
 // ********************
 
 // Inputs
@@ -87,29 +84,28 @@ $menu-selected-color: $room-highlight-color;
 // Dialogs
 // ********************
 $dialog-title-fg-color: $primary-content;
-$dialog-backdrop-color: #000;
+$dialog-backdrop-color: $menu-border-color;
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
 $dialog-close-fg-color: #9fa9ba;
 // ********************
 
 // Lightbox
 // ********************
-$lightbox-background-bg-color: #000;
+$lightbox-background-bg-color: $menu-border-color;
 $lightbox-background-bg-opacity: 0.85;
 // ********************
 
 // RoomList
 // ********************
-$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
-$roomlist-bg-color: rgba(33, 38, 44, 0.90);
+$roomlist-bg-color: rgba($system, 0.90);
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
-$roomtile-default-badge-bg-color: #61708b;
+$roomtile-default-badge-bg-color: $input-darker-fg-color;
 // ********************
 
 // Widgets
 // ********************
 $widget-menu-bar-bg-color: $header-panel-bg-color;
-$widget-body-bg-color: rgba(141, 151, 165, 0.2);
+$widget-body-bg-color: $panel-actions;
 // ********************
 
 // Tabbed views
@@ -147,7 +143,7 @@ $message-action-bar-hover-border-color: $header-panel-text-primary-color;
 
 // Reaction row
 // ********************
-$reaction-row-button-border-color: #616b7f;
+$reaction-row-button-border-color: $message-action-bar-border-color;
 $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
 $reaction-row-button-selected-bg-color: #1f6954;
 // ********************
@@ -184,12 +180,12 @@ $video-feed-secondary-background: $system;
 
 // One-off colors
 // ********************
-$kbd-border-color: #000000;
+$kbd-border-color: $menu-border-color;
 $visual-bell-bg-color: #800;
-$avatar-initial-color: #ffffff;
+$avatar-initial-color: $primary-content;
 $theme-button-bg-color: #e3e8f0;
 $codeblock-background-color: #2a3039;
-$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
+$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74); // muted-text with a 0.74 opacity.
 $breadcrumb-placeholder-bg-color: #272c35;
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
@@ -260,7 +256,7 @@ $appearance-tab-border-color: $room-highlight-color;
 .mx_EventTile_content .markdown-body {
     table {
         tr {
-            background-color: #000000;
+            background-color: $menu-border-color;
         }
 
         tr:nth-child(2n) {