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

Task/colors 12 (reorganize theme files again) #7212

Merged
merged 1 commit into from
Nov 29, 2021
Merged

Task/colors 12 (reorganize theme files again) #7212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
118 changes: 60 additions & 58 deletions res/themes/dark/css/_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
// ********************
$accent: #0DBD8B;
$alert: #FF5B55;
$links: #0086e6;
$primary-content: #ffffff;
$secondary-content: #A9B2BC;
$tertiary-content: #8E99A4;
$quaternary-content: #6F7882;
$quinary-content: #394049;

$system: #21262C;
$background: #15191E;
$panels: rgba($system, 0.9);

$panel-base: #8D97A5; // This color is not intended for use in the app
$panels: rgba($system, 0.9);
$panel-selected: rgba($panel-base, 0.3);
$panel-hover: rgba($panel-base, 0.1);
$panel-actions: rgba($panel-base, 0.2);
Expand All @@ -29,27 +28,48 @@ $header-panel-bg-color: #20252B;
$icon-button-color: $tertiary-content;
// ********************

// Colors that aren't in Figma - we need to get rid of these
// Colors that aren't in Figma and are theme specific - we need to get rid of these
// ********************
$header-panel-text-primary-color: #B9BEC6;
$text-secondary-color: $header-panel-text-primary-color;
$header-panel-text-secondary-color: #c8c8cd;
$room-highlight-color: #343a46;
$event-highlight-bg-color: #25271F;
$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
$text-secondary-color: #B9BEC6;
// ********************

// Colors that aren't in Figma - we need to get rid of these
// ********************
$dark-panel-bg-color: $header-panel-bg-color;
$muted-fg-color: $header-panel-text-primary-color;
$light-fg-color: $header-panel-text-secondary-color;
$focus-bg-color: $room-highlight-color;
$info-plinth-bg-color: $header-panel-bg-color;
$event-selected-color: $system;
$progressbar-bg-color: $system;
$topleftmenu-color: $primary-content;
$roomheader-addroom-fg-color: $primary-content;
$h3-color: $primary-content;
$focus-bg-color: $room-highlight-color;
$roomtopic-color: $text-secondary-color;
$light-fg-color: $header-panel-text-secondary-color;
$muted-fg-color: $header-panel-text-primary-color;
$info-plinth-bg-color: $header-panel-bg-color;
$dark-panel-bg-color: $header-panel-bg-color;
$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
$h3-color: $primary-content;
$event-highlight-bg-color: #25271F;
$header-panel-text-primary-color: $text-secondary-color;
// ********************

// Tooltip
// ********************
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
$tooltip-timeline-fg-color: $primary-content;
// ********************

// Widget
// ********************
$widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: $panel-actions;
// ********************

// Menu
// ********************
$menu-border-color: #000000;
$menu-bg-color: $header-panel-bg-color;
$menu-box-shadow-color: $background;
$menu-selected-color: $room-highlight-color;
// ********************

// Settings
Expand All @@ -60,9 +80,15 @@ $settings-profile-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: $text-secondary-color;
// ********************

// Rich-text editor
// RoomHeader
// ********************
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
$roomheader-addroom-fg-color: $primary-content;
// ********************
// Rich-text-editor
// ********************
$rte-room-pill-color: $room-highlight-color;
$other-user-pill-bg-color: $room-highlight-color;
// ********************

// Inputs
Expand All @@ -73,41 +99,20 @@ $input-darker-fg-color: #61708b;
$input-lighter-bg-color: #f2f5f8;
// ********************

// Menu
// ********************
$menu-border-color: #000000;
$menu-bg-color: $header-panel-bg-color;
$menu-box-shadow-color: $background;
$menu-selected-color: $room-highlight-color;
// ********************

// Dialogs
// Dialog
// ********************
$dialog-title-fg-color: $primary-content;
$dialog-backdrop-color: $menu-border-color;
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
// ********************

// Lightbox
// ********************
$lightbox-background-bg-color: $menu-border-color;
$lightbox-background-bg-opacity: 0.85;
// ********************

// RoomList
// ********************
$roomlist-bg-color: rgba($system, 0.90);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$roomtile-default-badge-bg-color: $input-darker-fg-color;
// ********************

// Widgets
// ********************
$widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: $panel-actions;
// ********************

// Tabbed views
// ********************
$tab-label-fg-color: $primary-content;
Expand All @@ -120,7 +125,6 @@ $button-primary-fg-color: $primary-content;
$button-secondary-bg-color: transparent;
$button-danger-fg-color: $primary-content;
$button-danger-disabled-fg-color: $primary-content;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
// ********************

// Toggle switch
Expand Down Expand Up @@ -148,12 +152,6 @@ $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-selected-bg-color: #1f6954;
// ********************

// Tooltips
// ********************
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
$tooltip-timeline-fg-color: $primary-content;
// ********************

// Voice messages
// ********************
$voice-record-stop-border-color: $quaternary-content;
Expand All @@ -168,6 +166,12 @@ $eventbubble-bg-hover: #1C2026;
$eventbubble-reply-color: #C1C6CD;
// ********************

// Lightbox
// ********************
$lightbox-background-bg-color: $menu-border-color;
$lightbox-background-bg-opacity: 0.85;
// ********************

// VoIP
// ********************
$call-view-button-on-foreground: $primary-content;
Expand All @@ -180,21 +184,19 @@ $video-feed-secondary-background: $system;

// One-off colors
// ********************
$progressbar-bg-color: $system;
$kbd-border-color: $menu-border-color;
$visual-bell-bg-color: #800;
$avatar-initial-color: $primary-content;
$event-timestamp-color: $text-secondary-color;
$slider-background-color: $quinary-content;
$appearance-tab-border-color: $room-highlight-color;
$composer-shadow-color: rgba(0, 0, 0, 0.28);
$breadcrumb-placeholder-bg-color: #272c35;
$theme-button-bg-color: #e3e8f0;
$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74);
$codeblock-background-color: #2a3039;
$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74); // muted-text with a 0.74 opacity.
$breadcrumb-placeholder-bg-color: #272c35;
$composer-shadow-color: rgba(0, 0, 0, 0.28);
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$primary-hairline-color: transparent;
$slider-background-color: $quinary-content;
$event-timestamp-color: $text-secondary-color;
$selected-color: $room-highlight-color;
$other-user-pill-bg-color: $room-highlight-color;
$appearance-tab-border-color: $room-highlight-color;
// ********************

// blur amounts for left left panel (only for element theme)
Expand Down
77 changes: 42 additions & 35 deletions res/themes/light/css/_light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,25 @@ $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI

// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
// ********************
$accent: #0DBD8B;
$alert: #FF5B55;
$links: #0086e6;
$primary-content: #17191C;
$secondary-content: #737D8C;
$tertiary-content: #8D97A5;
$quaternary-content: #c1c6cd;
$quinary-content: #E3E8F0;

$system: #F4F6FA;
$background: #ffffff;

$panels: rgba($system, 0.9);
$panel-selected: rgba($tertiary-content, 0.3);
$panel-hover: rgba($tertiary-content, 0.1);
$panel-actions: rgba($tertiary-content, 0.2);
$space-nav: rgba($tertiary-content, 0.15);

$accent: #0DBD8B;
$alert: #FF5B55;
$links: #0086e6;

$username-variant1-color: #368bd6;
$username-variant2-color: #ac3ba8;
$username-variant3-color: #0DBD8B;
Expand All @@ -51,32 +54,35 @@ $header-panel-bg-color: #f3f8fd;
$icon-button-color: $quaternary-content;
// ********************

// Colors that aren't in Figma and are theme specific - we need to get rid of these
// ********************
$selection-fg-color: $background;
$yellow-background: #fff8e3;
$secondary-accent-color: #f2f5f8;
$button-fg-color: $background;
$neutral-badge-color: #dbdbdb;
$strong-input-border-color: #c7c7c7;
$preview-widget-bar-color: #dddddd;
$accent-fg-color: $background;
$accent-alt: #238CF5;
$info-plinth-fg-color: #888;
// ********************

// Colors that aren't in Figma - we need to get rid of these
// ********************
$header-panel-text-primary-color: #91A1C0;
$dark-panel-bg-color: $secondary-accent-color;
$muted-fg-color: #61708b;
$light-fg-color: #747474;
$focus-bg-color: #dddddd;
$focus-bg-color: $preview-widget-bar-color;
$info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888;
$secondary-accent-color: #f2f5f8;
$event-selected-color: #f6f7f8;
$button-fg-color: $background;
$h3-color: #3d3b39;
$yellow-background: #fff8e3;
$accent-alt: #238CF5;
$strong-input-border-color: #c7c7c7;
$neutral-badge-color: #dbdbdb;
$preview-widget-bar-color: $focus-bg-color;
$topleftmenu-color: #212121;
$roomtopic-color: #9e9e9e;
$groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
$progressbar-bg-color: $panel-actions;
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$accent-fg-color: $background;
$selection-fg-color: $background;
$dark-panel-bg-color: $secondary-accent-color;
$h3-color: #3d3b39;
$event-highlight-bg-color: $yellow-background;
$header-panel-text-primary-color: #91A1C0;
// ********************

// Blockquote
Expand Down Expand Up @@ -120,9 +126,10 @@ $roomheader-addroom-fg-color: #5c6470;

// Rich-text-editor
// ********************
$rte-room-pill-color: #aaa;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
$rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
$rte-room-pill-color: #aaa;
// ********************

// Presence
Expand All @@ -133,20 +140,20 @@ $presence-offline: $quinary-content;

// Inputs
// ********************
$input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9);
$input-border-color: $menu-border-color;
$input-darker-bg-color: $quinary-content;
$input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: $secondary-accent-color;
$input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9);
// ********************

// Dialog
// ********************
$dialog-title-fg-color: #45474a;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #c1c1c1;
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
// ********************

// ImageBody
Expand Down Expand Up @@ -194,11 +201,11 @@ $togglesw-ball-color: $background;

// Authpage
// ********************
$authpage-primary-color: #232f32;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: $roomlist-bg-color;
$authpage-focus-bg-color: $focus-bg-color;
$authpage-lang-color: #4e5054;
$authpage-primary-color: #232f32;
$authpage-secondary-color: $muted-fg-color;
// ********************

Expand Down Expand Up @@ -244,37 +251,37 @@ $lightbox-background-bg-opacity: 0.95;

// VoIP
// ********************
$voipcall-plinth-color: $system;

$call-view-button-on-foreground: $secondary-content;
$call-view-button-on-background: $background;
$call-view-button-off-foreground: $background;
$call-view-button-off-background: $secondary-content;

$video-feed-secondary-background: #394049; // XXX: Color from dark theme
$voipcall-plinth-color: $system;
// ********************

// One-off colors
// ********************
$progressbar-bg-color: $panel-actions;
$kbd-border-color: $reaction-row-button-border-color;
$visual-bell-bg-color: #faa;
$event-timestamp-color: #acacac;
$slider-background-color: $togglesw-off-color;
$breadcrumb-placeholder-bg-color: #e8eef5;
$primary-hairline-color: transparent;
$composer-shadow-color: rgba(0, 0, 0, 0.04);
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
$resend-button-divider-color: $input-darker-bg-color;
$appearance-tab-border-color: $input-darker-bg-color;
$pinned-color: $tertiary-content;
$avatar-initial-color: $background;
$composer-shadow-color: rgba(0, 0, 0, 0.04);
$breadcrumb-placeholder-bg-color: #e8eef5;
$theme-button-bg-color: $quinary-content;
$selected-color: $secondary-accent-color;
$resend-button-divider-color: $input-darker-bg-color;
$codeblock-background-color: $header-panel-bg-color;
$kbd-border-color: $reaction-row-button-border-color;
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
$selected-color: $secondary-accent-color;
// ********************

// One-off global colors - these apply to both themes
// ********************
$pinned-color: $tertiary-content;
$avatar-initial-color: $background;
$primary-hairline-color: transparent;
$focus-brightness: 105%;
// ********************

Expand Down