Revert "Refine menu, toast, and popover colors (#12247)" (#12263)

This reverts commit 0856c76.

Co-authored-by: David Langley <[email protected]>

res/css/structures/_ContextualMenu.pcss

@@ -30,10 +30,9 @@ limitations under the License.
 }
 
 .mx_ContextualMenu {
-    border-radius: 12px;
-    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
-    background-color: var(--cpd-color-bg-canvas-default);
-    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+    border-radius: 8px;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+    background-color: $menu-bg-color;
     color: $primary-content;
     position: absolute;
     z-index: 5001;

res/css/structures/_QuickSettingsButton.pcss

@@ -62,7 +62,7 @@ limitations under the License.
         font-weight: var(--cpd-font-weight-semibold);
         font-size: $font-15px;
         line-height: $font-24px;
-        color: var(--cpd-color-text-secondary);
+        color: $primary-content;
         margin: 0 0 16px;
     }
 
@@ -76,7 +76,7 @@ limitations under the License.
         font-size: $font-12px;
         line-height: $font-15px;
         text-transform: uppercase;
-        color: var(--cpd-color-text-secondary);
+        color: $tertiary-content;
         margin: 20px 0 12px;
     }
 
@@ -97,7 +97,7 @@ limitations under the License.
             margin-left: 6px;
             font-size: $font-15px;
             line-height: $font-24px;
-            color: var(--cpd-color-text-primary);
+            color: $secondary-content;
         }
     }
 
@@ -106,7 +106,7 @@ limitations under the License.
         margin-left: 22px;
         font-size: $font-15px;
         line-height: $font-24px;
-        color: var(--cpd-color-text-primary);
+        color: $secondary-content;
         position: relative;
         margin-bottom: 16px;
     }

res/css/structures/_ToastContainer.pcss

@@ -36,17 +36,16 @@ limitations under the License.
     .mx_Toast_toast {
         grid-row: 1 / 3;
         grid-column: 1;
-        background-color: var(--cpd-color-bg-canvas-default);
+        background-color: $system;
         color: $primary-content;
-        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
-        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-        border-radius: 12px;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
         overflow: hidden;
         display: grid;
         grid-template-columns: 22px 1fr;
         column-gap: 8px;
         row-gap: 4px;
-        padding: var(--cpd-space-3x);
+        padding: 8px;
 
         &.mx_Toast_hasIcon {
             &::before,

res/css/views/context_menus/_IconizedContextMenu.pcss

@@ -36,7 +36,26 @@ limitations under the License.
         /* the notFirst class is for cases where the optionList might be under a header of sorts. */
         &:nth-child(n + 2),
         .mx_IconizedContextMenu_optionList_notFirst {
-            border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+            /* This is a bit of a hack when we could just use a simple border-top property, */
+            /* however we have a (kinda) good reason for doing it this way: we need opacity. */
+            /* To get the right color, we need an opacity modifier which means we have to work */
+            /* around the problem. PostCSS doesn't support the opacity() function, and if we */
+            /* use something like postcss-functions we quickly run into an issue where the */
+            /* function we would define gets passed a CSS variable for custom themes, which */
+            /* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
+            //
+            /* Therefore, we just hack in a line and border the thing ourselves */
+            &::before {
+                border-top: 1px solid $primary-content;
+                opacity: 0.1;
+                content: "";
+
+                /* Counteract the padding problems (width: 100% ignores the 40px padding, */
+                /* unless we position it absolutely then it does the right thing). */
+                width: 100%;
+                position: absolute;
+                left: 0;
+            }
         }
 
         /* round the top corners of the top button for the hover effect to be bounded */
@@ -68,7 +87,7 @@ limitations under the License.
 
             &:hover,
             &:focus-visible {
-                background-color: var(--cpd-color-bg-action-secondary-hovered);
+                background-color: $menu-selected-color;
             }
 
             &.mx_AccessibleButton_disabled {
@@ -118,7 +137,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background-color: var(--cpd-color-icon-primary);
+            background-color: $icon-button-color;
         }
     }
 
@@ -128,7 +147,7 @@ limitations under the License.
         }
 
         .mx_IconizedContextMenu_icon::before {
-            background-color: var(--cpd-color-icon-critical-primary);
+            background-color: $alert;
         }
     }
 
@@ -153,7 +172,7 @@ limitations under the License.
 
     &.mx_IconizedContextMenu_compact {
         .mx_IconizedContextMenu_optionList > * {
-            padding: 8px 16px 8px 12px;
+            padding: 8px 16px 8px 11px;
         }
     }
 

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -29,6 +29,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
+            background: $icon-button-color;
         }
     }
 

res/css/views/elements/_AccessibleButton.pcss

@@ -136,7 +136,7 @@ limitations under the License.
     &.mx_AccessibleButton_kind_danger_outline {
         color: var(--cpd-color-text-critical-primary);
         background-color: transparent;
-        border: 1px solid var(--cpd-color-border-critical-subtle);
+        border: 1px solid var(--cpd-color-border-critical-primary);
 
         &.mx_AccessibleButton_disabled {
             color: var(--cpd-color-text-disabled);

res/css/views/messages/_MessageActionBar.pcss

@@ -18,7 +18,7 @@ limitations under the License.
 .mx_MessageActionBar {
     --MessageActionBar-size-button: 28px;
     --MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
-    --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
+    --MessageActionBar-item-hover-background: $panel-actions;
     --MessageActionBar-item-hover-borderRadius: 6px;
     --MessageActionBar-item-hover-zIndex: 1;
 
@@ -30,7 +30,7 @@ limitations under the License.
     line-height: $font-24px;
     border-radius: 8px;
     background: $background;
-    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
+    border: 1px solid $input-border-color;
     top: -32px;
     right: 8px;
     user-select: none;
@@ -96,7 +96,7 @@ limitations under the License.
         --MessageActionBar-icon-size: 18px;
         width: var(--MessageActionBar-size-button);
         height: var(--MessageActionBar-size-button);
-        color: var(--cpd-color-icon-secondary);
+        color: $secondary-content;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -114,7 +114,7 @@ limitations under the License.
         }
 
         &:hover {
-            color: var(--cpd-color-icon-primary);
+            color: $primary-content;
         }
 
         &.mx_MessageActionBar_downloadButton {

res/css/views/right_panel/_BaseCard.pcss

@@ -214,19 +214,19 @@ limitations under the License.
         padding-top: 10px;
         padding-bottom: 10px;
 
-        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+        border: 1px solid $quinary-content;
+        box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
     }
 
     .mx_ContextualMenu_chevron_top {
         left: auto;
         right: 22px;
-        border-bottom-color: var(--cpd-color-border-interactive-secondary);
+        border-bottom-color: $quinary-content;
 
         &::after {
             content: "";
             border: inherit;
-            border-bottom-color: var(--cpd-color-bg-canvas-default);
+            border-bottom-color: $menu-bg-color;
             position: absolute;
             top: 1px;
             left: -8px;

res/css/views/right_panel/_PinnedMessagesCard.pcss

@@ -42,7 +42,7 @@ limitations under the License.
                     background: var(--MessageActionBar-item-hover-background);
                     border-radius: var(--MessageActionBar-item-hover-borderRadius);
                     z-index: var(--MessageActionBar-item-hover-zIndex);
-                    color: var(--cpd-color-icon-primary);
+                    color: $primary-content;
                 }
             }
 

res/css/views/rooms/_MessageComposer.pcss

@@ -314,6 +314,74 @@ limitations under the License.
     }
 }
 
+.mx_MessageComposer_formatting {
+    cursor: pointer;
+    margin: 0 11px;
+    width: 24px;
+    height: 18px;
+}
+
+.mx_MessageComposer_formatbar_wrapper {
+    width: 100%;
+    background-color: $menu-bg-color;
+    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+}
+
+.mx_MessageComposer_formatbar {
+    margin: auto;
+    display: flex;
+
+    height: 30px;
+
+    box-sizing: border-box;
+    padding-left: 62px;
+
+    flex-direction: row;
+    align-items: center;
+    font-size: $font-10px;
+    color: $info-plinth-fg-color;
+
+    * {
+        margin-right: 4px;
+    }
+}
+
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
+    cursor: pointer;
+}
+
+.mx_MessageComposer_formatbar_cancel {
+    margin-right: 22px;
+}
+
+.mx_MessageComposer_formatbar_markdown {
+    height: 17px;
+    width: 30px;
+    margin-right: 64px;
+}
+
+.mx_MessageComposer_input_markdownIndicator {
+    height: 10px;
+    width: 12px;
+    padding: 4px 4px 4px 0;
+}
+
+.mx_MessageComposer_formatbar_markdown,
+.mx_MessageComposer_input_markdownIndicator {
+    cursor: pointer;
+    mask-image: url("$(res)/img/markdown.svg");
+    mask-size: contain;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    background-color: $icon-button-color;
+
+    &.mx_MessageComposer_markdownDisabled {
+        opacity: 0.2;
+    }
+}
+
 .mx_MatrixChat_useCompactLayout {
     .mx_MessageComposer_input {
         min-height: 50px;

res/css/views/rooms/_MessageComposerFormatBar.pcss

@@ -22,7 +22,7 @@ limitations under the License.
     cursor: pointer;
     border-radius: 8px;
     background-color: $background;
-    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
+    border: 1px solid $input-border-color;
     user-select: none;
     /* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
     /* but as it appears after them in the DOM, will appear on top. */
@@ -48,7 +48,7 @@ limitations under the License.
         border: none;
 
         &:hover {
-            background: var(--cpd-color-bg-subtle-secondary);
+            background: $panel-actions;
             border-radius: 6px;
             z-index: 1;
         }
@@ -63,11 +63,11 @@ limitations under the License.
         width: 100%;
         mask-repeat: no-repeat;
         mask-position: center;
-        background-color: var(--cpd-color-icon-secondary);
+        background-color: $secondary-content;
     }
 
     .mx_MessageComposerFormatBar_button:hover::after {
-        background-color: var(--cpd-color-icon-primary);
+        background-color: $primary-content;
     }
 
     .mx_MessageComposerFormatBar_buttonIconBold::after {