Change to suggested colors

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
matrix-org · Apr 23, 2021 · b975906 · b975906
1 parent 9ffef8f
commit b975906
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 41 deletions.
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
@@ -1,14 +1,14 @@
 // unified palette
 // try to use these colors when possible
-$bg-color: #15191E;
+$bg-color: #15191e;
 $base-color: $bg-color;
 $base-text-color: #ffffff;
-$header-panel-bg-color: #20252B;
+$header-panel-bg-color: #20252b;
 $header-panel-border-color: #000000;
-$header-panel-text-primary-color: #B9BEC6;
+$header-panel-text-primary-color: #b9bec6;
 $header-panel-text-secondary-color: #c8c8cd;
 $text-primary-color: #ffffff;
-$text-secondary-color: #B9BEC6;
+$text-secondary-color: #b9bec6;
 $search-bg-color: #181b21;
 $search-placeholder-color: #61708b;
 $room-highlight-color: #343a46;
@@ -19,8 +19,8 @@ $primary-bg-color: $bg-color;
 $muted-fg-color: $header-panel-text-primary-color;
 
 // additional text colors
-$secondary-fg-color: #A9B2BC;
-$tertiary-fg-color: #8E99A4;
+$secondary-fg-color: #a9b2bc;
+$tertiary-fg-color: #8e99a4;
 
 // used for dialog box text
 $light-fg-color: $header-panel-text-secondary-color;
@@ -101,15 +101,15 @@ $roomheader-addroom-fg-color: $text-primary-color;
 $groupFilterPanel-button-color: $header-panel-text-primary-color;
 $groupheader-button-color: $header-panel-text-primary-color;
 $rightpanel-button-color: $header-panel-text-primary-color;
-$icon-button-color: #8E99A4;
+$icon-button-color: #8e99a4;
 $roomtopic-color: $text-secondary-color;
 $eventtile-meta-color: $roomtopic-color;
 
 $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #24292f;
+$voipcall-plinth-color: #394049;
 
 // ********************
 
@@ -145,7 +145,7 @@ $event-redacted-fg-color: #606060;
 $event-redacted-border-color: #000000;
 
 $event-highlight-fg-color: $warning-color;
-$event-highlight-bg-color: #25271F;
+$event-highlight-bg-color: #25271f;
 
 // event timestamp
 $event-timestamp-color: $text-secondary-color;
@@ -238,7 +238,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }

diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -106,13 +106,13 @@ $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #f2f5f8;
+$voipcall-plinth-color: #394049;
 
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
 
-$roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-button-bg-color: #1a1d23; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
 $roomlist-bg-color: $header-panel-bg-color;
 
@@ -123,14 +123,14 @@ $groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
-$roomtile-selected-bg-color: #1A1D23;
+$roomtile-selected-bg-color: #1a1d23;
 
 // ********************
 
 $panel-divider-color: $header-panel-border-color;
 
 $widget-menu-bar-bg-color: $header-panel-bg-color;
-$widget-body-bg-color: #1A1D23;
+$widget-body-bg-color: #1a1d23;
 
 // event tile lifecycle
 $event-sending-color: $text-secondary-color;
@@ -140,7 +140,7 @@ $event-redacted-fg-color: #606060;
 $event-redacted-border-color: #000000;
 
 $event-highlight-fg-color: $warning-color;
-$event-highlight-bg-color: #25271F;
+$event-highlight-bg-color: #25271f;
 
 // event timestamp
 $event-timestamp-color: $text-secondary-color;
@@ -229,7 +229,7 @@ $composer-shadow-color: tranparent;
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }

diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
@@ -8,9 +8,9 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji';
+$font-family: nunito, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', arial, helvetica, sans-serif, 'Noto Color Emoji';
 
-$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji';
+$monospace-font-family: inconsolata, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', courier, monospace, 'Noto Color Emoji';
 
 // unified palette
 // try to use these colors when possible
@@ -173,7 +173,7 @@ $composer-e2e-icon-color: #91a1c0;
 $header-divider-color: #91a1c0;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #f2f5f8;
+$voipcall-plinth-color: #f4f6fa;
 
 // ********************
 
@@ -362,7 +362,7 @@ $composer-shadow-color: tranparent;
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }

diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
@@ -8,19 +8,19 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: Inter, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji';
+$font-family: inter, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', arial, helvetica, sans-serif, 'Noto Color Emoji';
 
-$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji';
+$monospace-font-family: inconsolata, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', courier, monospace, 'Noto Color Emoji';
 
 // unified palette
 // try to use these colors when possible
-$accent-color: #0DBD8B;
+$accent-color: #0dbd8b;
 $accent-bg-color: rgba(3, 179, 129, 0.16);
 $notice-primary-color: #ff4b55;
 $notice-primary-bg-color: rgba(255, 75, 85, 0.16);
 $primary-fg-color: #2e2f32;
-$secondary-fg-color: #737D8C;
-$tertiary-fg-color: #8D99A5;
+$secondary-fg-color: #737d8c;
+$tertiary-fg-color: #8d99a5;
 $header-panel-bg-color: #f3f8fd;
 
 // typical text (dark-on-white in light skin)
@@ -37,7 +37,7 @@ $focus-bg-color: #dddddd;
 $accent-fg-color: #ffffff;
 $accent-color-50pct: rgba($accent-color, 0.5);
 $accent-color-darker: #92caad;
-$accent-color-alt: #238CF5;
+$accent-color-alt: #238cf5;
 
 $selection-fg-color: $primary-bg-color;
 
@@ -47,8 +47,8 @@ $focus-brightness: 105%;
 $warning-color: $notice-primary-color; // red
 $orange-warning-color: #ff8d13; // used for true warnings
 // background colour for warnings
-$warning-bg-color: #DF2A8B;
-$info-bg-color: #2A9EDF;
+$warning-bg-color: #df2a8b;
+$info-bg-color: #2a9edf;
 $mention-user-pill-bg-color: $warning-color;
 $other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
 
@@ -68,7 +68,7 @@ $groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
 $plinth-bg-color: $secondary-accent-color;
 
 // used by RoomDropTarget
-$droptarget-bg-color: rgba(255,255,255,0.5);
+$droptarget-bg-color: rgba(255, 255, 255, 0.5);
 
 // used by AddressSelector
 $selected-color: $secondary-accent-color;
@@ -156,18 +156,18 @@ $roomheader-color: #45474a;
 $roomheader-bg-color: $primary-bg-color;
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
 $roomheader-addroom-fg-color: #5c6470;
-$groupFilterPanel-button-color: #91A1C0;
-$groupheader-button-color: #91A1C0;
-$rightpanel-button-color: #91A1C0;
-$icon-button-color: #C1C6CD;
+$groupFilterPanel-button-color: #91a1c0;
+$groupheader-button-color: #91a1c0;
+$rightpanel-button-color: #91a1c0;
+$icon-button-color: #c1c6cd;
 $roomtopic-color: #9e9e9e;
 $eventtile-meta-color: $roomtopic-color;
 
-$composer-e2e-icon-color: #91A1C0;
-$header-divider-color: #91A1C0;
+$composer-e2e-icon-color: #91a1c0;
+$header-divider-color: #91a1c0;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #dddfe2;
+$voipcall-plinth-color: #f4f6fa;
 
 // ********************
 
@@ -184,17 +184,17 @@ $groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
-$roomtile-selected-bg-color: #FFF;
+$roomtile-selected-bg-color: #fff;
 
 $presence-online: $accent-color;
 $presence-away: #d9b072;
-$presence-offline: #E3E8F0;
+$presence-offline: #e3e8f0;
 
 // ********************
 
 $username-variant1-color: #368bd6;
 $username-variant2-color: #ac3ba8;
-$username-variant3-color: #0DBD8B;
+$username-variant3-color: #0dbd8b;
 $username-variant4-color: #e64f7a;
 $username-variant5-color: #ff812d;
 $username-variant6-color: #2dc2c5;
@@ -212,7 +212,7 @@ $pinned-color: $notice-secondary-color;
 // ********************
 
 $widget-menu-bar-bg-color: $secondary-accent-color;
-$widget-body-bg-color: #FFF;
+$widget-body-bg-color: #fff;
 
 // ********************
 
@@ -367,7 +367,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04);
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }