imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge matrix-react-sdk into element-web

Browse source 
Merge remote-tracking branch 'repomerge/t3chguy/repomerge' into t3chguy/repo-merge

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-15 14:57:26 +01:00
commit f0ee7f7905
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
3265 changed files with 484599 additions and 699 deletions
Download patch file Download diff file Expand all files Collapse all files

8
res/themes/dark-custom/css/dark-custom.pcss Normal file
View file

@ -0,0 +1,8 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../legacy-light/css/_paths.pcss";
@import "../../legacy-light/css/_fonts.pcss";
@import "../../legacy-light/css/_legacy-light.pcss";
@import "../../legacy-dark/css/_legacy-dark.pcss";
@import "../../light-custom/css/_custom.pcss";
@import "../../../../res/css/_components.pcss";
@import url("github-markdown-css/github-markdown-dark.css");

325
res/themes/dark/css/_dark.pcss Normal file
View file

@ -0,0 +1,325 @@
/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
/* ******************** */
$primary-content: var(--cpd-color-text-primary);
$secondary-content: var(--cpd-color-text-secondary);
$tertiary-content: var(--cpd-color-gray-800);
$quaternary-content: var(--cpd-color-gray-600);
$quinary-content: var(--cpd-color-gray-400);
$system: var(--cpd-color-bg-subtle-primary);
$system-transparent: #e1e6ec00;
$background: var(--cpd-color-bg-canvas-default);
$overlay-background: var(--cpd-color-alpha-gray-1300);
$panels: var(--cpd-color-bg-subtle-secondary);
$panel-actions: var(--cpd-color-alpha-gray-300);
$separator: var(--cpd-color-gray-400);
/* ******************** */
/* RoomList */
/* ******************** */
$roomlist-bg-color: rgba(38, 40, 45, 0.9);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */
/**
* Creating a `semantic` color scale. This will not be needed with the new
* visual language, but necessary during the transition period
* This abstract the `green` away from where accent shades are used
* Take: `background: rgba($accent, 0.1);`
* would be transformed to: `background: $accent-300;`
*
* To use under very rare circumstances, always prefer the semantics defined
* in https://compound.element.io/?path=/docs /tokens-semantic-colors--docs
*/
$accent-100: var(--cpd-color-green-100);
$accent-200: var(--cpd-color-green-200);
$accent-300: var(--cpd-color-green-300);
$accent-400: var(--cpd-color-green-400);
$accent-500: var(--cpd-color-green-500);
$accent-600: var(--cpd-color-green-600);
$accent-700: var(--cpd-color-green-700);
$accent-800: var(--cpd-color-green-800);
$accent-900: var(--cpd-color-green-900);
$accent-1000: var(--cpd-color-green-1000);
$accent-1100: var(--cpd-color-green-1100);
$accent-1200: var(--cpd-color-green-1200);
$accent-1300: var(--cpd-color-green-1300);
$accent-1400: var(--cpd-color-green-1400);
/* Reused Figma non-compound colors */
/* ******************** */
$inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
$header-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
$header-panel-bg-hover: var(--cpd-color-gray-200);
/* ******************** */
/* Theme specific colors */
/* ******************** */
$icon-button-color: var(--cpd-color-icon-tertiary);
/* ******************** */
/* Colors that aren't in Figma and are theme specific - we need to get rid of these */
/* ******************** */
$header-panel-text-secondary-color: #c8c8cd;
$room-highlight-color: #343a46;
$text-secondary-color: #b9bec6;
/* ******************** */
/* Colors that aren't in Figma - we need to get rid of these */
/* ******************** */
$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
$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: var(--cpd-color-bg-subtle-secondary);
$topleftmenu-color: $primary-content;
$roomtopic-color: $text-secondary-color;
$spacePanel-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: $spacePanel-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 */
/* ******************** */
$settings-profile-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: $text-secondary-color;
/* ******************** */
/* Room */
/* ******************** */
$room-icon-unread-color: var(--cpd-color-icon-tertiary);
/* ******************** */
/* RoomHeader */
/* ******************** */
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
$roomheader-addroom-fg-color: $primary-content;
/* ******************** */
/* Rich-text-editor */
/* ******************** */
$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
/* ******************** */
/* Inputs */
/* ******************** */
$input-border-color: rgba(231, 231, 231, 0.2);
$input-darker-bg-color: #181b21;
$input-darker-fg-color: #61708b;
$input-lighter-bg-color: #f2f5f8;
$input-placeholder: var(--cpd-color-text-placeholder);
/* ******************** */
/* Dialog */
/* ******************** */
$dialog-title-fg-color: $primary-content;
$dialog-backdrop-color: #00000080;
$dialog-close-fg-color: $icon-button-color;
$dialog-close-external-color: $primary-content;
/* ******************** */
/* RoomList */
/* ******************** */
$system: var(--cpd-color-bg-subtle-secondary);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */
/* Tabbed views */
/* ******************** */
$tab-label-fg-color: $secondary-content;
$tab-label-active-fg-color: $primary-content;
/* ******************** */
/* Buttons */
/* ******************** */
$button-primary-fg-color: $primary-content;
$button-secondary-bg-color: transparent;
$button-danger-fg-color: $primary-content;
$button-danger-disabled-fg-color: $primary-content;
/* ******************** */
/* Toggle switch */
/* ******************** */
$togglesw-off-color: $room-highlight-color;
/* ******************** */
/* Authpage */
/* ******************** */
$authpage-primary-color: $primary-content;
/* ******************** */
/* Message action bar */
/* ******************** */
$message-action-bar-bg-color: $header-panel-bg-color;
$message-action-bar-fg-color: $header-panel-text-primary-color;
$message-action-bar-border-color: #616b7f;
$message-action-bar-hover-border-color: $header-panel-text-primary-color;
/* ******************** */
/* Reaction row */
/* ******************** */
$reaction-row-button-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-selected-bg-color: #1f6954;
/* ******************** */
/* Voice messages */
/* ******************** */
$voice-record-stop-border-color: $quaternary-content;
$voice-record-icon-color: $quaternary-content;
/* ******************** */
/* Bubble tiles */
/* ******************** */
$eventbubble-self-bg: var(--cpd-color-green-300);
$eventbubble-others-bg: var(--cpd-color-gray-300);
$eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary);
/* ******************** */
/* Lightbox */
/* ******************** */
$lightbox-background-bg-color: $menu-border-color;
$lightbox-background-bg-opacity: 0.85;
/* ******************** */
/* VoIP */
/* ******************** */
$call-view-button-on-foreground: $primary-content;
$call-view-button-on-background: $system;
$call-view-button-off-foreground: $system;
$call-view-button-off-background: $primary-content;
$call-view-content-background: $quinary-content;
$video-feed-secondary-background: $system;
$call-system: $system;
$call-background: $background;
$call-primary-content: $primary-content;
$call-light-quaternary-content: #c1c6cd;
/* ******************** */
/* Location sharing */
/* ******************** */
$location-live-color: #5c56f5;
$location-live-secondary-color: #deddfd;
/* ******************** */
/* Location sharing */
/* ******************** */
.maplibregl-ctrl-attrib-button {
color: $background;
}
/* ******************** */
/* Voice Broadcast */
/* ******************** */
$live-badge-color: #ffffff;
/* ******************** */
/* One-off colors */
/* ******************** */
$progressbar-bg-color: var(--cpd-color-gray-200);
$kbd-border-color: $strong-input-border-color;
$visual-bell-bg-color: #800;
$event-timestamp-color: var(--cpd-color-text-secondary);
$composer-shadow-color: rgba(0, 0, 0, 0.28);
$breadcrumb-placeholder-bg-color: #272c35;
$theme-button-bg-color: #e3e8f0;
$resend-button-divider-color: var(--cpd-color-gray-700);
$inlinecode-border-color: $quinary-content;
$inlinecode-background-color: $system;
$codeblock-background-color: #2a3039;
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$selected-color: $room-highlight-color;
/* ******************** */
/* blur amounts for left left panel (only for element theme) */
/* ******************** */
:root {
--lp-background-blur: 45px;
}
/* ******************** */
body {
color-scheme: dark;
}
/* Nasty hacks to apply a filter to arbitrary monochrome artwork to make it */
/* better match the theme. Typically applied to dark grey 'off' buttons or */
/* light grey 'on' buttons. */
/* ******************** */
.mx_filterFlipColor {
filter: invert(1);
}
/* ******************** */
/* markdown overrides */
/* ******************** */
.mx_EventTile_content .markdown-body {
table {
tr {
background-color: $menu-border-color;
}
tr:nth-child(2n) {
background-color: #080808;
}
}
}
/* ******************** */
/* diff highlight colors */
/* ******************** */
.hljs-tag {
color: inherit; /* Without this they'd be weirdly blue which doesn't match the theme */
}
.hljs-addition {
background: #1a4b59;
}
.hljs-deletion {
background: #53232a;
}
/* ******************** */
/* Splash Page Gradient */
.mx_SplashPage::before {
background-image: radial-gradient(
53.85% 66.75% at 87.55% 0%,
hsla(0deg, 0%, 11%, 0.15) 0%,
hsla(250deg, 100%, 88%, 0) 100%
),
radial-gradient(41.93% 41.93% at 0% 0%, hsla(0deg, 0%, 38%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%),
radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.3) 0%, hsla(0deg, 100%, 86%, 0) 100%),
radial-gradient(106.35% 96.26% at 100% 0%, hsla(25deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%) !important;
}

9
res/themes/dark/css/dark.pcss Normal file
View file

@ -0,0 +1,9 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../light/css/_paths.pcss";
@import "../../light/css/_fonts.pcss";
@import "../../light/css/_light.pcss";
@import "_dark.pcss";
@import "../../light/css/_mods.pcss";
@import "../../../../res/css/_components.pcss";
@import url("highlight.js/styles/atom-one-dark.min.css");
@import url("github-markdown-css/github-markdown-dark.css");

261
res/themes/legacy-dark/css/_legacy-dark.pcss Normal file
View file

@ -0,0 +1,261 @@
/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
$system: #21262c;
$system-transparent: #e1e6ec00;
/* unified palette */
/* try to use these colors when possible */
$bg-color: #181b21;
$base-color: #15171b;
$base-text-color: #edf3ff;
$header-panel-bg-color: #22262e;
$header-panel-bg-hover: var(--cpd-color-gray-200);
$header-panel-text-primary-color: #a1b2d1;
$header-panel-text-secondary-color: #c8c8cd;
$text-primary-color: #edf3ff;
$text-secondary-color: #a1b2d1;
$room-highlight-color: #343a46;
/* typical text (dark-on-white in light skin) */
$primary-fg-color: $text-primary-color;
$secondary-fg-color: $primary-fg-color;
$tertiary-fg-color: $primary-fg-color;
$primary-bg-color: $bg-color;
$muted-fg-color: $header-panel-text-primary-color;
/* used for dialog box text */
$light-fg-color: $header-panel-text-secondary-color;
/* used for focusing form controls */
$focus-bg-color: $room-highlight-color;
$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
/* informational plinth */
$info-plinth-bg-color: $header-panel-bg-color;
$info-plinth-fg-color: #888;
$spacePanel-bg-color: $base-color;
$inverted-bg-color: $spacePanel-bg-color;
/* used by Autocomplete */
$selected-color: $room-highlight-color;
/* selected for hoverover & selected event tiles */
$event-selected-color: $header-panel-bg-color;
/* used for the hairline dividers in RoomView */
$primary-hairline-color: #000000;
$secondary-hairline-color: var(--cpd-color-gray-300);
/* used for the border of input text fields */
$input-border-color: #e7e7e7;
$input-darker-bg-color: #181b21;
$input-darker-fg-color: #61708b;
$input-lighter-bg-color: #f2f5f8;
$input-placeholder: var(--cpd-color-text-placeholder);
$resend-button-divider-color: $muted-fg-color;
/* scrollbars */
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
/* context menus */
$menu-border-color: #000000;
$menu-bg-color: $header-panel-bg-color;
$menu-box-shadow-color: $bg-color;
$menu-selected-color: $room-highlight-color;
$avatar-initial-color: #ffffff;
$h3-color: $primary-fg-color;
$icon-button-color: var(--cpd-color-icon-tertiary);
$dialog-title-fg-color: $base-text-color;
$dialog-backdrop-color: #00000080;
$dialog-close-fg-color: $icon-button-color;
$dialog-close-external-color: $text-primary-color;
$lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.85;
$settings-grey-fg-color: #a2a2a2;
$settings-subsection-fg-color: $text-secondary-color;
$topleftmenu-color: $text-primary-color;
$roomheader-addroom-bg-color: #3c4556;
$roomheader-addroom-fg-color: $text-primary-color;
$roomtopic-color: $text-secondary-color;
$room-icon-unread-color: var(--cpd-color-icon-tertiary);
/* Legacy theme backports */
$accent: #0dbd8b;
$alert: #ff5b55;
$links: #0086e6;
$link-external: #0467dd;
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6f7882;
$quinary-content: $quaternary-content;
$background: $primary-bg-color;
$overlay-background: rgba($background, 0.85);
$panels: rgba($system, 0.9);
$panel-actions: $roomtile-selected-bg-color;
$separator: var(--cpd-color-gray-400);
/**
* Creating a `semantic` color scale. This will not be needed with the new
* visual language, but necessary during the transition period
* This abstract the `green` away from where accent shades are used
* Take: `background: rgba($accent, 0.1);`
* would be transformed to: `background: $accent-300;`
*
* To use under very rare circumstances, always prefer the semantics defined
* in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
*/
$accent-100: var(--cpd-color-green-100);
$accent-200: var(--cpd-color-green-200);
$accent-300: var(--cpd-color-green-300);
$accent-400: var(--cpd-color-green-400);
$accent-500: var(--cpd-color-green-500);
$accent-600: var(--cpd-color-green-600);
$accent-700: var(--cpd-color-green-700);
$accent-800: var(--cpd-color-green-800);
$accent-900: var(--cpd-color-green-900);
$accent-1000: var(--cpd-color-green-1000);
$accent-1100: var(--cpd-color-green-1100);
$accent-1200: var(--cpd-color-green-1200);
$accent-1300: var(--cpd-color-green-1300);
$accent-1400: var(--cpd-color-green-1400);
/* Legacy theme backports */
/* ******************** */
$call-view-button-on-foreground: $primary-content;
$call-view-button-on-background: $system;
$call-view-button-off-foreground: $system;
$call-view-button-off-background: $primary-content;
$call-view-content-background: $quinary-content;
$video-feed-secondary-background: $system;
$call-system: $system;
$call-background: $background;
$call-primary-content: $primary-content;
$call-light-quaternary-content: #c1c6cd;
$roomlist-filter-active-bg-color: $panel-actions;
$roomlist-bg-color: rgba(38, 40, 45, 0.9);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$spacePanel-divider-color: $tertiary-content;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #1a1d23;
/* ******************** */
$widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: #1a1d23;
$event-highlight-bg-color: #25271f;
/* event timestamp */
$event-timestamp-color: $text-secondary-color;
/* Tabbed views */
$tab-label-fg-color: $text-primary-color;
$tab-label-active-fg-color: $text-primary-color;
/* Buttons */
$button-primary-fg-color: #ffffff;
$button-secondary-bg-color: transparent;
$button-danger-fg-color: #ffffff;
$button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */
/* Toggle switch */
$togglesw-off-color: $room-highlight-color;
$progressbar-bg-color: #21262c;
$visual-bell-bg-color: #800;
$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
$message-action-bar-bg-color: $header-panel-bg-color;
$message-action-bar-fg-color: $header-panel-text-primary-color;
$message-action-bar-border-color: #616b7f;
$message-action-bar-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-selected-bg-color: #1f6954;
$kbd-border-color: $strong-input-border-color;
$tooltip-timeline-bg-color: $spacePanel-bg-color;
$tooltip-timeline-fg-color: #ffffff;
$breadcrumb-placeholder-bg-color: #272c35;
/* See non-legacy dark for variable information */
$voice-record-stop-border-color: #6f7882;
$voice-record-icon-color: #6f7882;
$composer-shadow-color: tranparent;
$codeblock-background-color: #2a3039;
$inlinecode-border-color: #2a3039;
$inlinecode-background-color: #2a3039;
/* Bubble tiles */
$eventbubble-self-bg: #14322e;
$eventbubble-others-bg: $event-selected-color;
$eventbubble-bg-hover: #1c2026;
/* Location sharing */
/* ******************** */
$location-marker-color: #ffffff;
$location-live-color: #5c56f5;
$location-live-secondary-color: #deddfd;
/* ******************** */
/* Voice Broadcast */
/* ******************** */
$live-badge-color: #ffffff;
/* ******************** */
body {
color-scheme: dark;
}
/* Nasty hacks to apply a filter to arbitrary monochrome artwork to make it */
/* better match the theme. Typically applied to dark grey 'off' buttons or */
/* light grey 'on' buttons. */
.mx_filterFlipColor {
filter: invert(1);
}
/* markdown overrides: */
.mx_EventTile_content .markdown-body {
table {
tr {
background-color: #000000;
}
tr:nth-child(2n) {
background-color: #080808;
}
}
}
/* highlight.js overrides: */
.hljs-tag {
color: inherit; /* Without this they'd be weirdly blue which doesn't match the theme */
}

8
res/themes/legacy-dark/css/legacy-dark.pcss Normal file
View file

@ -0,0 +1,8 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../legacy-light/css/_paths.pcss";
@import "../../legacy-light/css/_fonts.pcss";
@import "../../legacy-light/css/_legacy-light.pcss";
@import "_legacy-dark.pcss";
@import "../../../../res/css/_components.pcss";
@import url("highlight.js/styles/atom-one-dark.min.css");
@import url("github-markdown-css/github-markdown-dark.css");

39
res/themes/legacy-light/css/_fonts.pcss Normal file
View file

@ -0,0 +1,39 @@
/*
* Nunito.
* Includes extended Latin and Vietnamese character sets
* Current URLs are taken from
* https://github.com/alexeiva/NunitoFont/releases/tag/v3.500
* ...in order to include cyrillic.
*
* Previously, they were
* https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese
*
* We explicitly do not include Nunito's italic variants, as they are not italic enough
* and it's better to rely on the browser's built-in obliquing behaviour.
*/
/* Grab the other fonts from the current theme, so we can override to Inter */
/* in custom fonts if needed. */
@import "../../light/css/_fonts.pcss";
/* Nunito as the default, for old time's sake on legacy themes. */
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: url("$(res)/fonts/Nunito/Nunito-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 600;
src: url("$(res)/fonts/Nunito/Nunito-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 700;
src: url("$(res)/fonts/Nunito/Nunito-Bold.ttf") format("truetype");
}

344
res/themes/legacy-light/css/_legacy-light.pcss Normal file
View file

@ -0,0 +1,344 @@
:root {
/* This is set to Twemoji when the user opts into the bundled emoji font */
--emoji-font-family: "";
}
/* Nunito lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics sometimes do not combine
nicely (on OSX, at least) and result in a huge horizontal mess.
Arial empirically gets it right, hence prioritising Arial here. */
/* 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", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica",
sans-serif, "Noto Color Emoji";
$monospace-font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier",
monospace, "Noto Color Emoji";
/* unified palette */
/* try to use these colors when possible */
$header-panel-bg-color: #f3f8fd;
$header-panel-bg-hover: var(--cpd-color-gray-200);
/* typical text (dark-on-white in light skin) */
$primary-fg-color: #2e2f32;
$secondary-fg-color: $primary-fg-color;
$tertiary-fg-color: $primary-fg-color;
$primary-bg-color: #ffffff;
$muted-fg-color: #61708b; /* Commonly used in headings and relevant alt text */
/* used for dialog box text */
$light-fg-color: #747474;
/* used for focusing form controls */
$focus-bg-color: #dddddd;
/* button UI (white-on-green in light skin) */
$accent-fg-color: #ffffff;
$accent-alt: #238cf5;
$selection-fg-color: $primary-bg-color;
$focus-brightness: 105%;
/* informational plinth */
$info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888;
/* left-panel style muted accent color */
$secondary-accent-color: #f2f5f8;
$spacePanel-bg-color: #27303a;
$inverted-bg-color: $spacePanel-bg-color;
/* used by RoomDropTarget */
$droptarget-bg-color: rgba(255, 255, 255, 0.5);
/* used by Autocomplete */
$selected-color: $secondary-accent-color;
/* selected for hoverover & selected event tiles */
$event-selected-color: $header-panel-bg-color;
/* used for the hairline dividers in RoomView */
$primary-hairline-color: #e5e5e5;
$secondary-hairline-color: var(--cpd-color-gray-300);
/* used for the border of input text fields */
$input-border-color: #e7e7e7;
$input-darker-bg-color: #e3e8f0;
$input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8;
$resend-button-divider-color: $input-darker-bg-color;
$button-fg-color: white;
/* apart from login forms, which have stronger border */
$strong-input-border-color: #c7c7c7;
/* used for UserSettings EditableText */
$input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9);
$input-placeholder: var(--cpd-color-text-placeholder);
/* scrollbars */
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
/* context menus */
$menu-border-color: #e7e7e7;
$menu-bg-color: #fff;
$menu-box-shadow-color: rgba(118, 131, 156, 0.6);
$menu-selected-color: #f5f8fa;
$avatar-initial-color: #ffffff;
$h3-color: #3d3b39;
$icon-button-color: var(--cpd-color-icon-tertiary);
$dialog-title-fg-color: #45474a;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-close-fg-color: $icon-button-color;
$dialog-close-external-color: $primary-bg-color;
$lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.95;
$imagebody-giflabel: rgba(0, 0, 0, 0.7);
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
$imagebody-giflabel-color: rgba(255, 255, 255, 1);
$info-plinth-fg-color: #888;
$neutral-badge-color: #dbdbdb;
$preview-widget-bar-color: #ddd;
$blockquote-bar-color: var(--cpd-color-border-interactive-primary);
$settings-grey-fg-color: #a2a2a2;
$settings-subsection-fg-color: #61708b;
$rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
$header-panel-text-primary-color: #91a1c0;
$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
$topleftmenu-color: #212121;
$roomheader-bg-color: $primary-bg-color;
$roomheader-addroom-bg-color: #91a1c0;
$roomheader-addroom-fg-color: $accent-fg-color;
$roomtopic-color: #9e9e9e;
$room-icon-unread-color: var(--cpd-color-icon-tertiary);
/* ******************** */
$theme-button-bg-color: #e3e8f0;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #fff;
$presence-away: #d9b072;
$presence-offline: #e3e8f0;
$presence-busy: #ff5b55;
/* Legacy theme backports */
$accent: #0dbd8b;
$alert: #ff5b55;
$links: #0086e6;
$link-external: #0467dd;
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6f7882;
$quinary-content: $quaternary-content;
$system: #f4f6fa;
$system-transparent: #e1e6ec00;
$background: $primary-bg-color;
$overlay-background: rgba($background, 0.85);
$panels: rgba($system, 0.9);
$panel-actions: $roomtile-selected-bg-color;
$separator: var(--cpd-color-gray-400);
/* Legacy theme backports */
/* ******************** */
$roomlist-filter-active-bg-color: $panel-actions;
$roomlist-bg-color: rgba(245, 245, 245, 0.9);
$roomlist-header-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$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;
$call-view-content-background: #21262c;
$video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
/* All of these are from dark theme */
$call-system: #21262c;
$call-background: #15191e;
$call-primary-content: #ffffff;
$call-light-quaternary-content: #c1c6cd;
$username-variant1-color: var(--cpd-color-text-decorative-1);
$username-variant2-color: var(--cpd-color-text-decorative-2);
$username-variant3-color: var(--cpd-color-text-decorative-3);
$username-variant4-color: var(--cpd-color-text-decorative-4);
$username-variant5-color: var(--cpd-color-text-decorative-5);
$username-variant6-color: var(--cpd-color-text-decorative-6);
/**
* Creating a `semantic` color scale. This will not be needed with the new
* visual language, but necessary during the transition period
* This abstract the `green` away from where accent shades are used
* Take: `background: rgba($accent, 0.1);`
* would be transformed to: `background: $accent-300;`
*
* To use under very rare circumstances, always prefer the semantics defined
* in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
*/
$accent-100: var(--cpd-color-green-100);
$accent-200: var(--cpd-color-green-200);
$accent-300: var(--cpd-color-green-300);
$accent-400: var(--cpd-color-green-400);
$accent-500: var(--cpd-color-green-500);
$accent-600: var(--cpd-color-green-600);
$accent-700: var(--cpd-color-green-700);
$accent-800: var(--cpd-color-green-800);
$accent-900: var(--cpd-color-green-900);
$accent-1000: var(--cpd-color-green-1000);
$accent-1100: var(--cpd-color-green-1100);
$accent-1200: var(--cpd-color-green-1200);
$accent-1300: var(--cpd-color-green-1300);
$accent-1400: var(--cpd-color-green-1400);
/* ******************** */
$widget-menu-bar-bg-color: $secondary-accent-color;
$widget-body-bg-color: #fff;
/* ******************** */
/* $event-highlight-bg-color shares this value, */
/* so to not make their order dependent on who depends on who, have a shared value */
/* defined before both */
$yellow-background: #fff8e3;
$event-highlight-bg-color: $yellow-background;
/* event timestamp */
$event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/element-icons/copy.svg";
/* e2e */
$e2e-verified-color: #0dbd8b;
$e2e-warning-color: #ff5b55;
$e2e-verified-color-light: var(--cpd-color-green-300);
$e2e-warning-color-light: var(--cpd-color-red-300);
/*** ImageView ***/
$lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff;
/* Tabbed views */
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
/* Buttons */
$button-primary-fg-color: #ffffff;
$button-secondary-bg-color: $accent-fg-color;
$button-danger-fg-color: #ffffff;
$button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */
$visual-bell-bg-color: #faa;
/* Toggle switch */
$togglesw-off-color: #c1c9d6;
$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
$progressbar-bg-color: rgba(141, 151, 165, 0.2);
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-focus-bg-color: #dddddd;
$authpage-lang-color: $secondary-content;
$authpage-primary-color: $primary-content;
$authpage-secondary-color: $secondary-content;
$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$message-action-bar-bg-color: $primary-bg-color;
$message-action-bar-fg-color: $primary-fg-color;
$message-action-bar-border-color: #e9edf1;
$message-action-bar-hover-border-color: $focus-bg-color;
$reaction-row-button-hover-border-color: $focus-bg-color;
$reaction-row-button-selected-bg-color: #e9fff9;
$kbd-border-color: $strong-input-border-color;
$tooltip-timeline-bg-color: $spacePanel-bg-color;
$tooltip-timeline-fg-color: #ffffff;
$breadcrumb-placeholder-bg-color: #e8eef5;
/* See non-legacy _light for variable information */
$voice-record-stop-symbol-color: #ff4b55;
$voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: #e3e8f0;
$voice-record-icon-color: $tertiary-fg-color;
$composer-shadow-color: tranparent;
$codeblock-background-color: $header-panel-bg-color;
$inlinecode-border-color: $header-panel-bg-color;
$inlinecode-background-color: $header-panel-bg-color;
/* Bubble tiles */
$eventbubble-self-bg: #f0fbf8;
$eventbubble-others-bg: $system;
$eventbubble-bg-hover: #fafbfd;
/* pinned events indicator */
$pinned-color: $tertiary-content;
$spacePanel-divider-color: $tertiary-content;
/* Location sharing */
/* ******************** */
$location-marker-color: #ffffff;
$location-live-color: #5c56f5;
$location-live-secondary-color: #deddfd;
/* ******************** */
/* Voice Broadcast */
/* ******************** */
$live-badge-color: #ffffff;
/* ******************** */
body {
color-scheme: light;
}
/* diff highlight colors */
.hljs-addition {
background: #dfd;
}
.hljs-deletion {
background: #fdd;
}

3
res/themes/legacy-light/css/_paths.pcss Normal file
View file

@ -0,0 +1,3 @@
/* Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree */
/* This value is overridden by external themes in `element-web`. */
$res: ../../..;

7
res/themes/legacy-light/css/legacy-light.pcss Normal file
View file

@ -0,0 +1,7 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "_paths.pcss";
@import "_fonts.pcss";
@import "_legacy-light.pcss";
@import "../../../../res/css/_components.pcss";
@import url("highlight.js/styles/atom-one-light.min.css");
@import url("github-markdown-css/github-markdown-light.css");

144
res/themes/light-custom/css/_custom.pcss Normal file
View file

@ -0,0 +1,144 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
$font-family: var(--font-family, $font-family);
$monospace-font-family: var(--font-family-monospace, $monospace-font-family);
/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
$accent: var(--accent-color, $accent);
$alert: var(--alert, $alert);
$links: var(--links, $links);
$primary-content: var(--primary-content, $primary-content);
$secondary-content: var(--secondary-content, $secondary-content);
$tertiary-content: var(--tertiary-content, $tertiary-content);
$quaternary-content: var(--quaternary-content, $quaternary-content);
$quinary-content: var(--quinary-content, $quinary-content);
$system: var(--system, $system);
$system-transparent: var(--system-transparent, #e1e6ec00);
$background: var(--background, $background);
$panels: var(--panels, var(--cpd-color-gray-600));
$panel-actions: var(--panels-actions, var(--cpd-color-gray-300));
/* --timeline-background-color */
$button-secondary-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color);
$menu-bg-color: var(--timeline-background-color);
$message-action-bar-bg-color: var(--timeline-background-color);
$background: var(--timeline-background-color);
$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
$togglesw-off-color: var(--togglesw-off-color);
$droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */
$authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */
$roomheader-bg-color: var(--timeline-background-color);
/* --roomlist-highlights-color */
$panel-actions: var(--roomlist-highlights-color);
/* --sidebar-color */
$spacePanel-bg-color: var(--sidebar-color);
$tooltip-timeline-bg-color: var(--sidebar-color);
$dialog-backdrop-color: var(--sidebar-color-50pct);
/* --roomlist-background-color */
$header-panel-bg-color: var(--roomlist-background-color);
$header-panel-bg-hover: var(--cpd-color-gray-200);
$panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
/* these were #f2f5f8 instead of #f3f8fd, but close enough */
$dark-panel-bg-color: var(--roomlist-background-color);
$input-lighter-bg-color: var(--roomlist-background-color);
$secondary-accent-color: var(--roomlist-background-color);
$selected-color: var(--roomlist-background-color);
$widget-menu-bar-bg-color: var(--roomlist-background-color);
$roomlist-bg-color: var(--roomlist-background-color);
/* --timeline-text-color */
$message-action-bar-fg-color: var(--timeline-text-color);
$primary-content: var(--timeline-text-color);
$roomtopic-color: var(--timeline-text-color-50pct);
/* was #212121 */
$topleftmenu-color: var(--timeline-text-color);
/* was #45474a */
$dialog-title-fg-color: var(--timeline-text-color);
/* was #4e5054 */
$authpage-lang-color: var(--timeline-text-color);
/* was #232f32 */
$authpage-primary-color: var(--timeline-text-color);
/* --roomlist-text-secondary-color */
$roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
/* --roomlist-separator-color */
$input-darker-bg-color: var(--roomlist-separator-color);
$primary-hairline-color: var(--roomlist-separator-color); /* originally #e5e5e5, but close enough */
$secondary-hairline-color: var(--secondary-hairline-color);
/* --timeline-text-secondary-color */
$authpage-secondary-color: var(--timeline-text-secondary-color);
$pinned-color: var(--timeline-text-secondary-color);
$settings-subsection-fg-color: var(--timeline-text-secondary-color);
$roomheader-addroom-bg-color: var(--timeline-text-secondary-color);
/* was #747474 */
$light-fg-color: var(--timeline-text-secondary-color);
$focus-bg-color: var(--focus-bg-color, $focus-bg-color);
$room-highlight-color: var(--room-highlight-color);
$rte-room-pill-color: $room-highlight-color;
/* was #888888 */
$info-plinth-fg-color: var(--timeline-text-secondary-color);
/* --primary-color */
$accent-alt: var(--primary-color);
/* --warning-color */
$button-danger-disabled-bg-color: var(--warning-color-50pct); /* still needs alpha at 0.5 */
/* --timeline-highlights-color */
$event-selected-color: var(--timeline-highlights-color);
$event-highlight-bg-color: var(--timeline-highlights-color);
/* redirect some variables away from their hardcoded values in the light theme */
$settings-grey-fg-color: $primary-content;
/* --eventbubble colors */
$eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg);
$eventbubble-others-bg: var(--eventbubble-others-bg, $eventbubble-others-bg);
$eventbubble-bg-hover: var(--eventbubble-bg-hover, $eventbubble-bg-hover);
$reaction-row-button-selected-bg-color: var(
--reaction-row-button-selected-bg-color,
$reaction-row-button-selected-bg-color
);
$menu-selected-color: var(--menu-selected-color, $menu-selected-color);
$pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
$pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
$pill-press-bg-color: var(--other-user-pill-bg-color, $pill-press-bg-color);
$icon-button-color: var(--icon-button-color, $icon-button-color);
$strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color);
$inverted-bg-color: var(--strong-input-border-color, $inverted-bg-color);
/**
* Variation of the accent color.
* Generate this colour scale using LeonardoColor
* TODO: Add link
*/
$accent-100: var(--accent-color-100);
$accent-200: var(--accent-color-200);
$accent-300: var(--accent-color-300);
$accent-400: var(--accent-color-400);
$accent-500: var(--accent-color-500);
$accent-600: var(--accent-color-600);
$accent-700: var(--accent-color-700);
$accent-800: var(--accent-color-800);
$accent-900: var(--accent-color-900);
$accent-1000: var(--accent-color-1000);
$accent-1100: var(--accent-color-1100);
$accent-1200: var(--accent-color-1200);
$accent-1300: var(--accent-color-1300);
$accent-1400: var(--accent-color-1400);

7
res/themes/light-custom/css/light-custom.pcss Normal file
View file

@ -0,0 +1,7 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../legacy-light/css/_paths.pcss";
@import "../../legacy-light/css/_fonts.pcss";
@import "../../legacy-light/css/_legacy-light.pcss";
@import "_custom.pcss";
@import "../../../../res/css/_components.pcss";
@import url("github-markdown-css/github-markdown-light.css");

232
res/themes/light-high-contrast/css/_light-high-contrast.pcss Normal file
View file

@ -0,0 +1,232 @@
/* Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847 */
$accent: var(--cpd-color-text-action-accent);
$alert: var(--cpd-color-text-critical-primary);
$links: var(--cpd-color-text-link-external);
$primary-content: var(--cpd-color-text-primary);
$secondary-content: var(--cpd-color-text-secondary);
$tertiary-content: var(--cpd-color-gray-800);
$quaternary-content: var(--cpd-color-gray-600);
$quinary-content: var(--cpd-color-gray-400);
$username-variant1-color: var(--cpd-color-text-decorative-1);
$username-variant2-color: var(--cpd-color-text-decorative-2);
$username-variant3-color: var(--cpd-color-text-decorative-3);
$username-variant4-color: var(--cpd-color-text-decorative-4);
$username-variant5-color: var(--cpd-color-text-decorative-5);
$username-variant6-color: var(--cpd-color-text-decorative-6);
$accent-alt: $links;
$input-border-color: $secondary-content;
$input-darker-bg-color: $quinary-content;
$input-darker-fg-color: $secondary-content;
$resend-button-divider-color: $input-darker-bg-color;
$icon-button-color: var(--cpd-color-icon-tertiary);
$theme-button-bg-color: $quinary-content;
/* not using a compound color here for now as we want to have the same color in
light and dark theme. Until we have a non-symetrical token for it, let's keep
it hardcoded to the following value */
$presence-offline: #e3e8f0;
$pinned-color: $tertiary-content;
$button-secondary-bg-color: $accent-fg-color;
$message-action-bar-fg-color: $primary-content;
$voice-record-stop-border-color: $quinary-content;
$voice-record-icon-color: $tertiary-content;
$roomtopic-color: $secondary-content;
/**
* Creating a `semantic` color scale. This will not be needed with the new
* visual language, but necessary during the transition period
* This abstract the `green` away from where accent shades are used
* Take: `background: rgba($accent, 0.1);`
* would be transformed to: `background: $accent-300;`
*
* To use under very rare circumstances, always prefer the semantics defined
* in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
*/
$accent-100: var(--cpd-color-green-100);
$accent-200: var(--cpd-color-green-200);
$accent-300: var(--cpd-color-green-300);
$accent-400: var(--cpd-color-green-400);
$accent-500: var(--cpd-color-green-500);
$accent-600: var(--cpd-color-green-600);
$accent-700: var(--cpd-color-green-700);
$accent-800: var(--cpd-color-green-800);
$accent-900: var(--cpd-color-green-900);
$accent-1000: var(--cpd-color-green-1000);
$accent-1100: var(--cpd-color-green-1100);
$accent-1200: var(--cpd-color-green-1200);
$accent-1300: var(--cpd-color-green-1300);
$accent-1400: var(--cpd-color-green-1400);
/* Draw an outline on buttons with focus */
.mx_AccessibleButton:focus {
outline: 2px solid $accent;
outline-offset: 2px;
}
.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before {
color: $secondary-content;
opacity: 1 !important;
}
.mx_TextualEvent {
color: $secondary-content;
opacity: 1 !important;
}
.mx_Dialog,
.mx_MatrixChat_wrapper {
: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: $input-darker-fg-color !important;
}
}
.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton {
background-color: $panel-actions !important;
}
.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
border-color: $primary-content;
}
.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
color: $primary-content;
}
.mx_RoomSearch {
&.mx_RoomSearch_focused,
&.mx_RoomSearch_hasQuery {
.mx_RoomSearch_clearButton {
&::before {
background-color: $background !important;
}
}
}
}
.mx_PollCreateDialog {
.mx_PollCreateDialog_option {
.mx_PollCreateDialog_removeOption {
&::before {
background-color: $background !important;
}
}
}
}
.mx_Dialog_buttons button.mx_LocationPicker_cancelButton::before {
background-color: $background !important;
}
.mx_SpotlightDialog_wrapper .mx_Dialog {
#mx_SpotlightDialog_keyboardPrompt {
kbd {
color: $background !important;
}
}
}
.mx_SpotlightDialog {
.mx_SpotlightDialog_searchBox {
> .mx_SpotlightDialog_filter {
color: $background !important;
&::before {
background-color: $background !important;
}
}
}
#mx_SpotlightDialog_content {
.mx_SpotlightDialog_recentlyViewed {
.mx_SpotlightDialog_option {
&:hover,
&[aria-selected="true"] {
color: $background !important;
.mx_DecoratedRoomAvatar_icon::before {
background-color: $background !important;
}
}
}
}
.mx_SpotlightDialog_results,
.mx_SpotlightDialog_recentSearches,
.mx_SpotlightDialog_otherSearches,
.mx_SpotlightDialog_hiddenResults {
.mx_SpotlightDialog_option {
&:hover,
&[aria-selected="true"] {
background-color: $quinary-content !important;
color: $background !important;
&.mx_SpotlightDialog_startChat::before,
&.mx_SpotlightDialog_joinRoomAlias::before,
&.mx_SpotlightDialog_explorePublicRooms::before,
&.mx_SpotlightDialog_startGroupChat::before {
background-color: $background !important;
}
.mx_DecoratedRoomAvatar_icon::before {
background-color: $background !important;
}
.mx_SpotlightDialog_result_publicRoomDetails {
.mx_SpotlightDialog_result_publicRoomHeader {
.mx_SpotlightDialog_result_publicRoomName {
color: $background;
}
.mx_SpotlightDialog_result_publicRoomAlias {
color: $background;
}
}
.mx_SpotlightDialog_result_publicRoomDescription {
color: $background;
}
}
.mx_NotificationBadge {
background-color: $background !important;
}
.mx_SpotlightDialog_result_details {
color: $background !important;
}
}
}
}
.mx_SpotlightDialog_enterPrompt {
background-color: $background !important;
}
}
}
.mx_GenericDropdownMenu_button:hover,
.mx_GenericDropdownMenu_button[aria-expanded="true"] {
color: $background !important;
}
.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper {
.mx_GenericDropdownMenu_Option {
&.mx_GenericDropdownMenu_Option--item {
&:hover {
background-color: $quinary-content !important;
color: $background !important;
&[aria-checked="true"]::before {
background-color: $background !important;
}
> .mx_GenericDropdownMenu_Option--label {
span:first-child {
color: $background !important;
}
}
}
}
}
}
.mx_NetworkDropdown_removeServer::before {
background-color: $background !important;
}

9
res/themes/light-high-contrast/css/light-high-contrast.pcss Normal file
View file

@ -0,0 +1,9 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../light/css/_paths.pcss";
@import "../../light/css/_fonts.pcss";
@import "../../light/css/_light.pcss";
@import "_light-high-contrast.pcss";
@import "../../light/css/_mods.pcss";
@import "../../../../res/css/_components.pcss";
@import url("highlight.js/styles/atom-one-light.min.css");
@import url("github-markdown-css/github-markdown-light.css");

145
res/themes/light/css/_fonts.pcss Normal file
View file

@ -0,0 +1,145 @@
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
/* Inter unexpectedly contains various codepoints which collide with emoji, even
when variation-16 is applied to request the emoji variant. From eyeballing
the emoji picker, these are: 20e3, 23cf, 24c2, 25a0-25c1, 2665, 2764, 2b06, 2b1c.
Therefore we define a unicode-range to load which excludes the glyphs
(to avoid having to maintain a fork of Inter). */
$inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05,
U+2b07-2b1b, U+2b1d-10FFFF;
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: $inter-unicode-range;
src:
url("$(res)/fonts/Inter/Inter-Regular.woff2?v=3.18") format("woff2"),
url("$(res)/fonts/Inter/Inter-Regular.woff?v=3.18") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 400;
font-display: swap;
unicode-range: $inter-unicode-range;
src:
url("$(res)/fonts/Inter/Inter-Italic.woff2?v=3.18") format("woff2"),
url("$(res)/fonts/Inter/Inter-Italic.woff?v=3.18") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
unicode-range: $inter-unicode-range;
src:
url("$(res)/fonts/Inter/Inter-Medium.woff2?v=3.18") format("woff2"),
url("$(res)/fonts/Inter/Inter-Medium.woff?v=3.18") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 500;
font-display: swap;
unicode-range: $inter-unicode-range;
src:
url("$(res)/fonts/Inter/Inter-MediumItalic.woff2?v=3.18") format("woff2"),
url("$(res)/fonts/Inter/Inter-MediumItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
unicode-range: $inter-unicode-range;
src:
url("$(res)/fonts/Inter/Inter-SemiBold.woff2?v=3.18") format("woff2"),
url("$(res)/fonts/Inter/Inter-SemiBold.woff?v=3.18") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 600;
font-display: swap;
unicode-range: $inter-unicode-range;
src:
url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff2?v=3.18") format("woff2"),
url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff?v=3.18") format("woff");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: $inter-unicode-range;
src:
url("$(res)/fonts/Inter/Inter-Bold.woff2?v=3.18") format("woff2"),
url("$(res)/fonts/Inter/Inter-Bold.woff?v=3.18") format("woff");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 700;
font-display: swap;
unicode-range: $inter-unicode-range;
src:
url("$(res)/fonts/Inter/Inter-BoldItalic.woff2?v=3.18") format("woff2"),
url("$(res)/fonts/Inter/Inter-BoldItalic.woff?v=3.18") format("woff");
}
/* latin-ext */
@font-face {
font-family: "Inconsolata";
font-style: normal;
font-weight: 400;
src:
local("Inconsolata Regular"),
local("Inconsolata-Regular"),
url("$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2") format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Inconsolata";
font-style: normal;
font-weight: 400;
font-display: swap;
src:
local("Inconsolata Regular"),
local("Inconsolata-Regular"),
url("$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Inconsolata";
font-style: normal;
font-weight: 700;
font-display: swap;
src:
local("Inconsolata Bold"),
local("Inconsolata-Bold"),
url("$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2") format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Inconsolata";
font-style: normal;
font-weight: 700;
font-display: swap;
src:
local("Inconsolata Bold"),
local("Inconsolata-Bold"),
url("$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

379
res/themes/light/css/_light.pcss Normal file
View file

@ -0,0 +1,379 @@
:root {
/* This is set to Twemoji when the user opts into the bundled emoji font */
--emoji-font-family: "";
}
/* Nunito and Inter lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics sometimes do not combine
nicely (on OSX, at least) and result in a huge horizontal mess.
Arial empirically gets it right, hence prioritising Arial here. */
/* 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", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
"Noto Color Emoji";
$monospace-font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier",
monospace, "Noto Color Emoji";
/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */
/* ******************** */
$primary-content: var(--cpd-color-text-primary);
$secondary-content: var(--cpd-color-text-secondary);
$tertiary-content: var(--cpd-color-gray-800);
$quaternary-content: var(--cpd-color-gray-600);
$quinary-content: var(--cpd-color-gray-400);
$system: var(--cpd-color-bg-subtle-primary);
$system-transparent: #e1e6ec00;
$background: var(--cpd-color-bg-canvas-default);
$overlay-background: var(--cpd-color-alpha-gray-1300);
$panels: var(--cpd-color-bg-subtle-secondary);
$panel-actions: var(--cpd-color-alpha-gray-300);
$separator: var(--cpd-color-gray-400);
$accent: var(--cpd-color-text-action-accent);
$alert: var(--cpd-color-text-critical-primary);
$links: var(--cpd-color-text-link-external);
$link-external: var(--cpd-color-text-link-external);
$username-variant1-color: var(--cpd-color-text-decorative-1);
$username-variant2-color: var(--cpd-color-text-decorative-2);
$username-variant3-color: var(--cpd-color-text-decorative-3);
$username-variant4-color: var(--cpd-color-text-decorative-4);
$username-variant5-color: var(--cpd-color-text-decorative-5);
$username-variant6-color: var(--cpd-color-text-decorative-6);
/* ******************** */
/**
* Creating a `semantic` color scale. This will not be needed with the new
* visual language, but necessary during the transition period
* This abstract the `green` away from where accent shades are used
* Take: `background: rgba($accent, 0.1);`
* would be transformed to: `background: $accent-300;`
*
* To use under very rare circumstances, always prefer the semantics defined
* in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
*/
$accent-100: var(--cpd-color-green-100);
$accent-200: var(--cpd-color-green-200);
$accent-300: var(--cpd-color-green-300);
$accent-400: var(--cpd-color-green-400);
$accent-500: var(--cpd-color-green-500);
$accent-600: var(--cpd-color-green-600);
$accent-700: var(--cpd-color-green-700);
$accent-800: var(--cpd-color-green-800);
$accent-900: var(--cpd-color-green-900);
$accent-1000: var(--cpd-color-green-1000);
$accent-1100: var(--cpd-color-green-1100);
$accent-1200: var(--cpd-color-green-1200);
$accent-1300: var(--cpd-color-green-1300);
$accent-1400: var(--cpd-color-green-1400);
/* Reused Figma non-compound colors */
/* ******************** */
$inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
$header-panel-bg-color: var(--cpd-color-bg-subtle-primary);
$header-panel-bg-hover: var(--cpd-color-gray-200);
/* ******************** */
/* Theme specific colors */
/* ******************** */
$icon-button-color: var(--cpd-color-icon-tertiary);
/* ******************** */
/* Colors that aren't in Figma and are theme specific - we need to get rid of these */
/* ******************** */
$selection-fg-color: $background;
$yellow-background: var(--cpd-color-yellow-200);
$secondary-accent-color: #f2f5f8;
$button-fg-color: $background;
$neutral-badge-color: #dbdbdb;
$strong-input-border-color: var(--cpd-color-border-interactive-primary);
$preview-widget-bar-color: var(--cpd-color-bg-subtle-primary);
$accent-fg-color: #f4f6fa;
$accent-alt: var(--cpd-color-text-link-external);
$info-plinth-fg-color: var(--cpd-color-gray-900);
/* ******************** */
/* Colors that aren't in Figma - we need to get rid of these */
/* ******************** */
$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
$muted-fg-color: #61708b;
$light-fg-color: #747474;
$focus-bg-color: $preview-widget-bar-color;
$info-plinth-bg-color: #f7f7f7;
$event-selected-color: var(--cpd-color-bg-subtle-secondary);
$topleftmenu-color: #212121;
$roomtopic-color: #9e9e9e;
$spacePanel-bg-color: rgba(232, 232, 232, 0.77);
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$h3-color: #3d3b39;
$event-highlight-bg-color: $yellow-background;
$header-panel-text-primary-color: #91a1c0;
/* ******************** */
/* Blockquote */
/* ******************** */
$blockquote-bar-color: var(--cpd-color-border-interactive-primary);
/* ******************** */
/* Tooltip */
/* ******************** */
$tooltip-timeline-bg-color: $inverted-bg-color;
$tooltip-timeline-fg-color: $background;
/* ******************** */
/* Widget */
/* ******************** */
$widget-menu-bar-bg-color: $secondary-accent-color;
$widget-body-bg-color: $background;
/* ******************** */
/* Menu */
/* ******************** */
$menu-border-color: #e7e7e7;
$menu-bg-color: $background;
$menu-box-shadow-color: rgba(118, 131, 156, 0.6);
$menu-selected-color: #f5f8fa;
/* ******************** */
/* Settings */
/* ******************** */
$settings-grey-fg-color: #a2a2a2;
$settings-subsection-fg-color: $muted-fg-color;
/* ******************** */
/* Room */
/* ******************** */
$room-icon-unread-color: var(--cpd-color-icon-tertiary);
/* ******************** */
/* RoomHeader */
/* ******************** */
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
$roomheader-addroom-fg-color: #5c6470;
/* ******************** */
/* Rich-text-editor */
/* ******************** */
$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
$rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
/* ******************** */
/* Presence */
/* ******************** */
$presence-away: #d9b072;
/* not using a compound color here for now as we want to have the same color in
light and dark theme. Until we have a non-symetrical token for it, let's keep
it hardcoded to the following value */
$presence-offline: #e3e8f0;
$presence-busy: $alert;
/* ******************** */
/* Inputs */
/* ******************** */
$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);
$input-placeholder: var(--cpd-color-text-placeholder);
/* ******************** */
/* Dialog */
/* ******************** */
$dialog-title-fg-color: var(--cpd-color-text-primary);
$dialog-backdrop-color: #030c1b4d;
$dialog-close-fg-color: $icon-button-color;
$dialog-close-external-color: $background;
/* ******************** */
/* ImageBody */
/* ******************** */
$imagebody-giflabel: rgba(0, 0, 0, 0.7);
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
$imagebody-giflabel-color: $accent-fg-color;
/* ******************** */
/* RoomList */
/* ******************** */
$roomlist-bg-color: rgba(245, 245, 245, 0.9);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */
/* e2e */
/* ******************** */
$e2e-verified-color: var(--cpd-color-icon-success-primary);
$e2e-warning-color: var(--cpd-color-icon-critical-primary);
$e2e-verified-color-light: var(--cpd-color-green-300);
$e2e-warning-color-light: var(--cpd-color-red-300);
/* ******************** */
/* Tabbed views */
/* ******************** */
$tab-label-fg-color: $secondary-content;
$tab-label-active-fg-color: $primary-content;
/* ******************** */
/* Buttons */
/* ******************** */
$button-primary-fg-color: $background;
$button-secondary-bg-color: $accent-fg-color;
$button-danger-fg-color: $background;
$button-danger-disabled-fg-color: $background;
$button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */
/* ******************** */
/* Toggle switch */
/* ******************** */
$togglesw-off-color: #c1c9d6;
$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
/* ******************** */
/* 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: $secondary-content;
$authpage-primary-color: $primary-content;
$authpage-secondary-color: $secondary-content;
/* ******************** */
/* Message action bar */
/* ******************** */
$message-action-bar-bg-color: $background;
$message-action-bar-fg-color: $primary-content;
$message-action-bar-border-color: #e9edf1;
$message-action-bar-hover-border-color: $focus-bg-color;
/* ******************** */
/* Reaction row */
/* ******************** */
$reaction-row-button-hover-border-color: $focus-bg-color;
$reaction-row-button-selected-bg-color: #e9fff9;
/* ******************** */
/* Voice messages */
/* ******************** */
/* These two don't change between themes. They are the $alert, but we don't want */
/* custom themes to affect them by accident. */
$voice-record-stop-symbol-color: #ff5b55;
$voice-record-live-circle-color: #ff5b55;
$voice-record-stop-border-color: $quinary-content;
$voice-record-icon-color: $tertiary-content;
/* ******************** */
/* Bubble tiles */
/* ******************** */
$eventbubble-self-bg: var(--cpd-color-green-300);
$eventbubble-others-bg: var(--cpd-color-gray-300);
$eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary);
/* ******************** */
/* Lightbox */
/* ******************** */
/* not using a compound color here for now as we want to have the same color in
light and dark theme. Until we have a non-symetrical token for it, let's keep
it hardcoded to the following value */
$lightbox-fg-color: #fff;
$lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.95;
/* ******************** */
/* VoIP */
/* ******************** */
$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;
$call-view-content-background: #21262c;
$video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
$voipcall-plinth-color: $system;
/* All of these are from dark theme */
$call-system: #21262c;
$call-background: #15191e;
$call-primary-content: #ffffff;
/* This one is from light theme */
$call-light-quaternary-content: #c1c6cd;
/* ******************** */
/* One-off colors */
/* ******************** */
$progressbar-bg-color: var(--cpd-color-gray-200);
$kbd-border-color: $strong-input-border-color;
$visual-bell-bg-color: #faa;
$event-timestamp-color: var(--cpd-color-text-secondary);
$composer-shadow-color: rgba(0, 0, 0, 0.04);
$breadcrumb-placeholder-bg-color: #e8eef5;
$theme-button-bg-color: $quinary-content;
$resend-button-divider-color: $input-darker-bg-color;
$inlinecode-border-color: $quinary-content;
$inlinecode-background-color: $system;
$codeblock-background-color: $header-panel-bg-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;
$secondary-hairline-color: var(--cpd-color-gray-300);
$focus-brightness: 105%;
/* ******************** */
/* blur amounts for left left panel (only for element theme) */
/* ******************** */
:root {
--lp-background-blur: 40px;
}
/* ******************** */
/* Icon URLs */
/* ******************** */
$copy-button-url: "$(res)/img/element-icons/copy.svg";
/* ******************** */
/* Location sharing */
/* ******************** */
$location-marker-color: var(--cpd-color-icon-on-solid-primary);
$location-live-color: var(--cpd-color-purple-900);
$location-live-secondary-color: var(--cpd-color-purple-600);
/* ******************** */
/* Voice Broadcast */
/* ******************** */
$live-badge-color: var(--cpd-color-icon-on-solid-primary);
/* ******************** */
body {
color-scheme: light;
}
/* ******************** */
/* diff highlight colors */
/* ******************** */
.hljs-addition {
background: var(--cpd-color-green-500);
}
.hljs-deletion {
background: var(--cpd-color-red-500);
}
/* ******************** */

15
res/themes/light/css/_mods.pcss Normal file
View file

@ -0,0 +1,15 @@
/* sidebar blurred avatar background */
//
/* if backdrop-filter is supported, */
/* set the user avatar (if any) as a background so */
/* it can be blurred by the tag panel and room list */
.mx_RoomSublist_showNButton {
background-color: transparent !important;
}
a:hover,
a:link,
a:visited {
text-decoration: none;
}

3
res/themes/light/css/_paths.pcss Normal file
View file

@ -0,0 +1,3 @@
/* Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree */
/* This value is overridden by external themes in `element-web`. */
$res: ../../..;

8
res/themes/light/css/light.pcss Normal file
View file

@ -0,0 +1,8 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "_paths.pcss";
@import "_fonts.pcss";
@import "_light.pcss";
@import "_mods.pcss";
@import "../../../../res/css/_components.pcss";
@import url("highlight.js/styles/atom-one-light.min.css");
@import url("github-markdown-css/github-markdown-light.css");