Compound color pass

res/css/_common.pcss

@@ -18,6 +18,7 @@ limitations under the License.
 */
 
 @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
+@import "./_theme.pcss";
 @import "./_font-sizes.pcss";
 @import "./_font-weights.pcss";
 @import "./_animations.pcss";
@@ -237,7 +238,7 @@ legend {
         background-color: transparent;
         color: $input-darker-fg-color;
         border-radius: 4px;
-        border: 1px solid rgba($primary-content, 0.1);
+        border: 1px solid var(--cpd-color-gray-300);
         /* these things should probably not be defined globally */
         margin: 9px;
     }
@@ -250,7 +251,7 @@ legend {
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
     .mx_textinput input::placeholder {
-        color: rgba($input-darker-fg-color, 0.75);
+        color: var(--cpd-color-text-placeholder);
     }
 }
 
@@ -799,7 +800,8 @@ legend {
 }
 
 @define-mixin composerButtonHighLight {
-    background: rgba($accent, 0.25);
+    /* TODO: Refactor as this will break for apps that override the accent color */
+    background: var(--cpd-color-green-300);
     /* make the icon the accent color too */
     &::before {
         background-color: $accent !important;
@@ -842,7 +844,7 @@ legend {
 
     &:hover {
         &::after {
-            background: rgba($hover-color, 0.1);
+            background: var(--cpd-color-bg-action-secondary-hovered);
         }
 
         &::before {

res/css/compound/_Icon.pcss

@@ -29,7 +29,7 @@ limitations under the License.
 }
 
 .mx_Icon_bg-accent-light {
-    background-color: rgba($accent, 0.1);
+    background-color: $accent-300;
 }
 
 .mx_Icon_alert {

res/css/structures/_LeftPanel.pcss

@@ -14,13 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MatrixChat--with-avatar {
-    .mx_LeftPanel,
-    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
-        background-color: transparent;
-    }
-}
-
 .mx_LeftPanel_outerWrapper {
     display: flex;
     flex-direction: column;

res/css/structures/_RoomView.pcss

@@ -258,8 +258,8 @@ limitations under the License.
     height: var(--RoomHeader-indicator-dot-size);
     border-radius: 50%;
     transform: scale(1);
-    background: rgba(var(--RoomHeader-indicator-pulseColor), 1);
-    box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1);
+    background: var(--RoomHeader-indicator-pulseColor);
+    box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
     animation: mx_Indicator_pulse 2s infinite;
     animation-iteration-count: 1;
 

res/css/structures/_SpacePanel.pcss

@@ -369,7 +369,7 @@ limitations under the License.
 
     .mx_UserMenu {
         padding: 0 2px 8px;
-        border-bottom: 1px solid $quinary-content;
+        border-bottom: 1px solid var(--cpd-color-gray-700);
         margin: 12px 14px 4px 18px;
     }
 }

res/css/views/beta/_BetaCard.pcss

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_BetaCard {
     padding: $spacing-24;
-    background-color: $system;
+    background-color: var(--cpd-color-bg-subtle-secondary);
     border-radius: 8px;
     box-sizing: border-box;
     color: $secondary-content;

res/css/views/dialogs/_PollCreateDialog.pcss

@@ -18,7 +18,7 @@ limitations under the License.
     .mx_PollCreateDialog_busy {
         position: absolute;
         inset: 0;
-        background-color: rgba($background, 0.6);
+        background-color: var(--cpd-color-alpha-gray-800);
         z-index: 1;
     }
 

res/css/views/elements/_SSOButtons.pcss

@@ -46,7 +46,7 @@ limitations under the License.
     }
 
     .mx_SSOButton:hover {
-        background-color: $panel-hover;
+        background-color: var(--cpd-color-alpha-gray-300);
     }
 
     .mx_SSOButton_default {

res/css/views/elements/_StyledCheckbox.pcss

@@ -44,7 +44,7 @@ limitations under the License.
             width: $size;
             size: 0.5rem;
 
-            border: $border-size solid rgba($muted-fg-color, 0.5);
+            border: $border-size solid var(--cpd-color-border-interactive-primary);
             box-sizing: border-box;
             border-radius: $border-radius;
 

res/css/views/elements/_Tooltip.pcss

@@ -72,7 +72,7 @@ limitations under the License.
     word-break: break-word;
 
     background-color: #21262c; /* Same on both themes */
-    color: $accent-fg-color;
+    color: $secondary-content;
     border: 0;
     text-align: center;
 

res/css/views/right_panel/_UserInfo.pcss

@@ -69,7 +69,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_separator {
-        border-bottom: 1px solid rgba($primary-content, 0.1);
+        border-bottom: 1px solid var(--cpd-color-gray-600);
     }
 
     .mx_UserInfo_memberDetailsContainer {

res/css/views/rooms/_EditMessageComposer.pcss

@@ -33,7 +33,7 @@ limitations under the License.
         padding: 3px 6px;
 
         &:focus {
-            border-color: rgba($accent, 0.5); /* Only ever used here */
+            border-color: $accent-500;
         }
     }
 

res/css/views/rooms/_MessageComposer.pcss

@@ -197,11 +197,12 @@ limitations under the License.
 
     &.mx_MessageComposer_closeButtonMenu {
         &::after {
-            background: rgba($accent, 0.1);
+            background: $accent-300;
         }
 
         &::before {
             background-color: $accent;
+            z-index: 2;
         }
     }
 
@@ -235,11 +236,12 @@ limitations under the License.
 
         &.mx_MessageComposer_closeButtonMenu {
             &::after {
-                background: rgba($accent, 0.1);
+                background: $accent-300;
             }
 
             &::before {
                 background-color: $accent;
+                z-index: 2;
             }
         }
 

res/css/views/rooms/_RecentlyViewedButton.pcss

@@ -19,7 +19,7 @@ limitations under the License.
     width: max-content;
     max-width: 240px;
     max-height: 400px;
-    border: 1px solid rgba($primary-content, 0.1);
+    border: 1px solid var(--cpd-color-gray-300);
     border-radius: 8px;
     box-shadow: 0 8px 4px rgba(0, 0, 0, 0.08);
     display: flex;

res/css/views/rooms/_RoomHeader.pcss

@@ -56,7 +56,7 @@ limitations under the License.
     min-width: 0;
     margin: 0 20px 0 16px;
     padding-top: 6px;
-    border-bottom: 1px solid $system;
+    border-bottom: 1px solid var(--cpd-color-gray-500);
 
     .mx_InviteOnlyIcon_large {
         margin: 0;
@@ -112,7 +112,7 @@ limitations under the License.
     }
 
     &[aria-expanded="true"] {
-        background-color: $quinary-content;
+        background-color: var(--cpd-color-gray-400);
 
         .mx_RoomHeader_chevron {
             transform: rotate(180deg);
@@ -191,7 +191,7 @@ limitations under the License.
     }
 
     &:hover {
-        background: rgba($accent, 0.1);
+        background: $accent-300;
 
         &::before {
             background-color: $accent;
@@ -209,7 +209,7 @@ limitations under the License.
     border-radius: 50%;
     transform: scale(1.6);
     transform-origin: center center;
-    background: rgba($background, 1);
+    background: $background;
 }
 
 .mx_RoomHeader_button_unreadIndicator {
@@ -219,18 +219,18 @@ limitations under the License.
     margin: 4px;
 
     &.mx_Indicator_red {
-        background: rgba($alert, 1);
-        box-shadow: rgba($alert, 1);
+        background: $alert;
+        box-shadow: $alert;
     }
 
     &.mx_Indicator_gray {
-        background: rgba($room-icon-unread-color, 1);
-        box-shadow: rgba($room-icon-unread-color, 1);
+        background: $room-icon-unread-color;
+        box-shadow: $room-icon-unread-color;
     }
 
     &.mx_Indicator_bold {
-        background: rgba($primary-content, 1);
-        box-shadow: rgba($primary-content, 1);
+        background: $primary-content;
+        box-shadow: $primary-content;
     }
 }
 

res/css/views/rooms/_ThreadSummary.pcss

@@ -55,8 +55,8 @@ limitations under the License.
         bottom: 0;
         width: 60px;
         box-sizing: border-box;
-        /* XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug */
-        background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
+        /* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */
+        background: linear-gradient(270deg, $system 50%, #e1e6ec00 100%);
 
         opacity: 0;
         transform: translateX(60px);

res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss

@@ -32,7 +32,7 @@ limitations under the License.
         padding: 3px 6px;
 
         &:focus {
-            border-color: rgba($accent, 0.5); /* Only ever used here */
+            border-color: $accent-400;
         }
     }
 

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -34,7 +34,7 @@ limitations under the License.
 
     .mx_FormattingButtons_Button_hover {
         &:hover {
-            background: rgba($secondary-content, 0.1);
+            background: var(--cpd-color-bg-subtle-secondary);
 
             .mx_FormattingButtons_Icon {
                 color: $secondary-content;
@@ -43,7 +43,7 @@ limitations under the License.
     }
 
     .mx_FormattingButtons_active {
-        background: rgba($accent, 0.1);
+        background: $accent-300;
 
         .mx_FormattingButtons_Icon {
             color: $accent;

res/css/views/settings/_FontScalingPanel.pcss

@@ -40,7 +40,7 @@ limitations under the License.
     display: flex;
     align-items: center;
     padding: 15px $spacing-20 35px;
-    background: rgba($quinary-content, 0.2);
+    background: var(--cpd-color-bg-subtle-secondary);
     border-radius: 10px;
     font-size: $font-10px;
 

res/css/views/settings/_LayoutSwitcher.pcss

@@ -28,6 +28,7 @@ limitations under the License.
         flex-shrink: 1;
         display: flex;
         flex-direction: column;
+        overflow: hidden;
 
         flex-basis: 33%;
         min-width: 0;
@@ -71,7 +72,7 @@ limitations under the License.
     }
 
     .mx_StyledRadioButton_checked {
-        background-color: rgba($accent, 0.08);
+        background-color: $accent-200;
     }
 
     .mx_EventTile {

res/css/views/voip/_CallView.pcss

@@ -104,7 +104,7 @@ limitations under the License.
                 left: 0;
                 right: 0;
 
-                background-color: rgba($call-background, 0.9);
+                background-color: var(--cpd-color-gray-1100);
 
                 display: flex;
                 justify-content: center;