Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve bubble layout colors #6452

Merged
merged 5 commits into from
Aug 4, 2021
Merged

Improve bubble layout colors #6452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f53de5d
Make bubble layout background color less agressive
SimonBrandner Jul 22, 2021
8f3bdf7
Merge remote-tracking branch 'upstream/develop' into fix/bubble-bg-co…
SimonBrandner Aug 4, 2021
7fc632d
Put font names into "" so that stylelint shuts up about them
SimonBrandner Aug 4, 2021
050e260
Fix weird spacing
SimonBrandner Aug 4, 2021
ca94518
Improve bubble colors
SimonBrandner Aug 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 10 additions & 7 deletions res/themes/dark/css/_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
$system-dark: #21262C;

// unified palette
// try to use these colors when possible
$bg-color: #15191E;
Expand Down Expand Up @@ -47,7 +50,7 @@ $inverted-bg-color: $base-color;
$selected-color: $room-highlight-color;

// selected for hoverover & selected event tiles
$event-selected-color: #21262c;
$event-selected-color: $system-dark;

// used for the hairline dividers in RoomView
$primary-hairline-color: transparent;
Expand Down Expand Up @@ -91,7 +94,7 @@ $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.85;

$settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #21262c;
$settings-profile-placeholder-bg-color: $system-dark;
$settings-profile-overlay-placeholder-fg-color: #454545;
$settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
Expand Down Expand Up @@ -175,7 +178,7 @@ $button-link-bg-color: transparent;
$togglesw-off-color: $room-highlight-color;

$progressbar-fg-color: $accent-color;
$progressbar-bg-color: #21262c;
$progressbar-bg-color: $system-dark;

$visual-bell-bg-color: #800;

Expand Down Expand Up @@ -210,7 +213,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-bg-color: #394049; // "Dark Tile"
$message-body-panel-icon-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: #21262C; // "System Dark"
$message-body-panel-icon-bg-color: $system-dark; // "System Dark"

$voice-record-stop-border-color: $quaternary-fg-color;
$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
Expand All @@ -228,9 +231,9 @@ $groupFilterPanel-background-blur-amount: 30px;
$composer-shadow-color: rgba(0, 0, 0, 0.28);

// Bubble tiles
$eventbubble-self-bg: #143A34;
$eventbubble-others-bg: #394049;
$eventbubble-bg-hover: #433C23;
$eventbubble-self-bg: #14322E;
$eventbubble-others-bg: $event-selected-color;
$eventbubble-bg-hover: #1C2026;
$eventbubble-avatar-outline: $bg-color;
$eventbubble-reply-color: #C1C6CD;

Expand Down
19 changes: 11 additions & 8 deletions res/themes/legacy-light/css/_legacy-light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@
/* 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';

// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
$system-light: #F4F6FA;

// unified palette
// try to use these colors when possible
Expand Down Expand Up @@ -179,7 +182,7 @@ $composer-e2e-icon-color: #91a1c0;
$header-divider-color: #91a1c0;

// this probably shouldn't have it's own colour
$voipcall-plinth-color: #F4F6FA;
$voipcall-plinth-color: $system-light;

// ********************

Expand Down Expand Up @@ -331,7 +334,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-bg-color: #E3E8F0;
$message-body-panel-icon-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: #F4F6FA;
$message-body-panel-icon-bg-color: $system-light;

// See non-legacy _light for variable information
$voice-record-stop-symbol-color: #ff4b55;
Expand All @@ -348,9 +351,9 @@ $appearance-tab-border-color: $input-darker-bg-color;
$composer-shadow-color: tranparent;

// Bubble tiles
$eventbubble-self-bg: #F8FDFC;
$eventbubble-others-bg: #F7F8F9;
$eventbubble-bg-hover: rgb(242, 242, 242);
$eventbubble-self-bg: #F0FBF8;
$eventbubble-others-bg: $system-light;
$eventbubble-bg-hover: #FAFBFD;
$eventbubble-avatar-outline: #fff;
$eventbubble-reply-color: #C1C6CD;

Expand Down Expand Up @@ -390,7 +393,7 @@ $eventbubble-reply-color: #C1C6CD;
@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;
}
Expand Down
21 changes: 12 additions & 9 deletions res/themes/light/css/_light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@
/* 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';

// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
$system-light: #F4F6FA;

// unified palette
// try to use these colors when possible
Expand Down Expand Up @@ -138,7 +141,7 @@ $blockquote-bar-color: #ddd;
$blockquote-fg-color: #777;

$settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #f4f6fa;
$settings-profile-placeholder-bg-color: $system-light;
$settings-profile-overlay-placeholder-fg-color: #2e2f32;
$settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
Expand Down Expand Up @@ -168,7 +171,7 @@ $composer-e2e-icon-color: #91A1C0;
$header-divider-color: #91A1C0;

// this probably shouldn't have it's own colour
$voipcall-plinth-color: #F4F6FA;
$voipcall-plinth-color: $system-light;

// ********************

Expand Down Expand Up @@ -327,7 +330,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-bg-color: #E3E8F0; // "Separator"
$message-body-panel-icon-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: #F4F6FA;
$message-body-panel-icon-bg-color: $system-light;

// These two don't change between themes. They are the $warning-color, but we don't
// want custom themes to affect them by accident.
Expand All @@ -350,9 +353,9 @@ $groupFilterPanel-background-blur-amount: 20px;
$composer-shadow-color: rgba(0, 0, 0, 0.04);

// Bubble tiles
$eventbubble-self-bg: #F8FDFC;
$eventbubble-others-bg: #F7F8F9;
$eventbubble-bg-hover: #FEFCF5;
$eventbubble-self-bg: #F0FBF8;
$eventbubble-others-bg: $system-light;
$eventbubble-bg-hover: #FAFBFD;
$eventbubble-avatar-outline: $primary-bg-color;
$eventbubble-reply-color: #C1C6CD;

Expand Down Expand Up @@ -392,7 +395,7 @@ $eventbubble-reply-color: #C1C6CD;
@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;
}
Expand Down