From b975906c0d1ee2121f7cb34cbf4294058d627446 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 23 Apr 2021 13:52:02 +0200 Subject: [PATCH] Change to suggested colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/themes/dark/css/_dark.scss | 20 ++++----- res/themes/legacy-dark/css/_legacy-dark.scss | 12 +++--- .../legacy-light/css/_legacy-light.scss | 8 ++-- res/themes/light/css/_light.scss | 42 +++++++++---------- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 0ad4ba7c5835..cf64cac0339b 100644 --- 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,7 +101,7 @@ $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; @@ -109,7 +109,7 @@ $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 index 3e3c299af95b..30dcb0d34e37 100644 --- 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 index a740ba155cbb..e766c0c65cf8 100644 --- 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 index bb673c28c9a9..e9efdba1cd5b 100644 --- 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; }