From 061dc5f82480c0e16f41734f840ffd25b9663473 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 6 Apr 2022 15:17:52 +0530 Subject: [PATCH 01/14] Replace icon colors with predefined color --- src/platform/web/ui/css/themes/element/element-logo.svg | 8 ++++---- .../web/ui/css/themes/element/icons/chevron-down.svg | 2 +- .../web/ui/css/themes/element/icons/chevron-left.svg | 2 +- .../web/ui/css/themes/element/icons/chevron-right.svg | 2 +- .../web/ui/css/themes/element/icons/chevron-small.svg | 2 +- .../web/ui/css/themes/element/icons/chevron-thin-left.svg | 2 +- src/platform/web/ui/css/themes/element/icons/clear.svg | 4 ++-- .../web/ui/css/themes/element/icons/disable-grid.svg | 2 +- src/platform/web/ui/css/themes/element/icons/dismiss.svg | 4 ++-- .../web/ui/css/themes/element/icons/e2ee-disabled.svg | 6 +++--- .../web/ui/css/themes/element/icons/e2ee-normal.svg | 2 +- .../web/ui/css/themes/element/icons/enable-grid.svg | 2 +- .../web/ui/css/themes/element/icons/encryption-status.svg | 2 +- src/platform/web/ui/css/themes/element/icons/info.svg | 2 +- .../web/ui/css/themes/element/icons/paperclip.svg | 2 +- src/platform/web/ui/css/themes/element/icons/plus.svg | 2 +- .../web/ui/css/themes/element/icons/room-members.svg | 4 ++-- src/platform/web/ui/css/themes/element/icons/search.svg | 2 +- src/platform/web/ui/css/themes/element/icons/send.svg | 2 +- src/platform/web/ui/css/themes/element/icons/settings.svg | 2 +- .../web/ui/css/themes/element/icons/vertical-ellipsis.svg | 2 +- 21 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/element-logo.svg b/src/platform/web/ui/css/themes/element/element-logo.svg index 7e6c50fb..c0a94f34 100644 --- a/src/platform/web/ui/css/themes/element/element-logo.svg +++ b/src/platform/web/ui/css/themes/element/element-logo.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/src/platform/web/ui/css/themes/element/icons/chevron-down.svg b/src/platform/web/ui/css/themes/element/icons/chevron-down.svg index 6db33a25..d515ccd8 100644 --- a/src/platform/web/ui/css/themes/element/icons/chevron-down.svg +++ b/src/platform/web/ui/css/themes/element/icons/chevron-down.svg @@ -16,7 +16,7 @@ fill-rule="evenodd" clip-rule="evenodd" d="M 8.20723,2.70711 C 8.59775,3.09763 8.59878,3.73182 8.20952,4.1236 L 3.27581,9.08934 8.22556,14.0391 c 0.39052,0.3905 0.39155,1.0247 0.00229,1.4165 -0.38926,0.3918 -1.0214,0.3928 -1.41192,0.0023 L 1.15907,9.80101 C 0.768549,9.41049 0.767523,8.7763 1.15678,8.38452 L 6.79531,2.70939 C 7.18457,2.31761 7.8167,2.31658 8.20723,2.70711 Z" - fill="#8d99a5" + fill="#ff00ff" id="path830" /> - + diff --git a/src/platform/web/ui/css/themes/element/icons/chevron-right.svg b/src/platform/web/ui/css/themes/element/icons/chevron-right.svg index a7b862aa..64cd32e5 100644 --- a/src/platform/web/ui/css/themes/element/icons/chevron-right.svg +++ b/src/platform/web/ui/css/themes/element/icons/chevron-right.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/chevron-small.svg b/src/platform/web/ui/css/themes/element/icons/chevron-small.svg index 741e6be0..2f738557 100644 --- a/src/platform/web/ui/css/themes/element/icons/chevron-small.svg +++ b/src/platform/web/ui/css/themes/element/icons/chevron-small.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/chevron-thin-left.svg b/src/platform/web/ui/css/themes/element/icons/chevron-thin-left.svg index 092bf4fb..a32dbdec 100644 --- a/src/platform/web/ui/css/themes/element/icons/chevron-thin-left.svg +++ b/src/platform/web/ui/css/themes/element/icons/chevron-thin-left.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/clear.svg b/src/platform/web/ui/css/themes/element/icons/clear.svg index 9227cf4d..2f4cea3e 100644 --- a/src/platform/web/ui/css/themes/element/icons/clear.svg +++ b/src/platform/web/ui/css/themes/element/icons/clear.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/platform/web/ui/css/themes/element/icons/disable-grid.svg b/src/platform/web/ui/css/themes/element/icons/disable-grid.svg index db870fcd..0870f4dc 100644 --- a/src/platform/web/ui/css/themes/element/icons/disable-grid.svg +++ b/src/platform/web/ui/css/themes/element/icons/disable-grid.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/dismiss.svg b/src/platform/web/ui/css/themes/element/icons/dismiss.svg index 1b9cea04..2f4cea3e 100644 --- a/src/platform/web/ui/css/themes/element/icons/dismiss.svg +++ b/src/platform/web/ui/css/themes/element/icons/dismiss.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg b/src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg index 26e669fc..9dc7e09e 100644 --- a/src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg +++ b/src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg b/src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg index 9d981ee7..b2ef4226 100644 --- a/src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg +++ b/src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/enable-grid.svg b/src/platform/web/ui/css/themes/element/icons/enable-grid.svg index 1e06f9b7..1a28f655 100644 --- a/src/platform/web/ui/css/themes/element/icons/enable-grid.svg +++ b/src/platform/web/ui/css/themes/element/icons/enable-grid.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/encryption-status.svg b/src/platform/web/ui/css/themes/element/icons/encryption-status.svg index 8c81d4cd..b18fd782 100644 --- a/src/platform/web/ui/css/themes/element/icons/encryption-status.svg +++ b/src/platform/web/ui/css/themes/element/icons/encryption-status.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/info.svg b/src/platform/web/ui/css/themes/element/icons/info.svg index d55e9356..e2f8472c 100644 --- a/src/platform/web/ui/css/themes/element/icons/info.svg +++ b/src/platform/web/ui/css/themes/element/icons/info.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/paperclip.svg b/src/platform/web/ui/css/themes/element/icons/paperclip.svg index 81a8bf06..314dda27 100644 --- a/src/platform/web/ui/css/themes/element/icons/paperclip.svg +++ b/src/platform/web/ui/css/themes/element/icons/paperclip.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/plus.svg b/src/platform/web/ui/css/themes/element/icons/plus.svg index ea197223..3800b982 100644 --- a/src/platform/web/ui/css/themes/element/icons/plus.svg +++ b/src/platform/web/ui/css/themes/element/icons/plus.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/room-members.svg b/src/platform/web/ui/css/themes/element/icons/room-members.svg index bc03be13..6d797052 100644 --- a/src/platform/web/ui/css/themes/element/icons/room-members.svg +++ b/src/platform/web/ui/css/themes/element/icons/room-members.svg @@ -2,6 +2,6 @@ - - + + diff --git a/src/platform/web/ui/css/themes/element/icons/search.svg b/src/platform/web/ui/css/themes/element/icons/search.svg index 1531c7ac..14f227be 100644 --- a/src/platform/web/ui/css/themes/element/icons/search.svg +++ b/src/platform/web/ui/css/themes/element/icons/search.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/send.svg b/src/platform/web/ui/css/themes/element/icons/send.svg index b47ab8ea..566a09ea 100644 --- a/src/platform/web/ui/css/themes/element/icons/send.svg +++ b/src/platform/web/ui/css/themes/element/icons/send.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/settings.svg b/src/platform/web/ui/css/themes/element/icons/settings.svg index 9d1fbc78..8d05e39c 100644 --- a/src/platform/web/ui/css/themes/element/icons/settings.svg +++ b/src/platform/web/ui/css/themes/element/icons/settings.svg @@ -1,3 +1,3 @@ - + diff --git a/src/platform/web/ui/css/themes/element/icons/vertical-ellipsis.svg b/src/platform/web/ui/css/themes/element/icons/vertical-ellipsis.svg index 48a531e0..f3b1f3d0 100644 --- a/src/platform/web/ui/css/themes/element/icons/vertical-ellipsis.svg +++ b/src/platform/web/ui/css/themes/element/icons/vertical-ellipsis.svg @@ -1,3 +1,3 @@ - + From 3e2a2b79423a4a7cfe29b54bb240b2524e978dba Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 11 Apr 2022 16:23:11 +0530 Subject: [PATCH 02/14] Add theme manifest --- .../web/ui/css/themes/element/manifest.json | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/platform/web/ui/css/themes/element/manifest.json diff --git a/src/platform/web/ui/css/themes/element/manifest.json b/src/platform/web/ui/css/themes/element/manifest.json new file mode 100644 index 00000000..f67187bf --- /dev/null +++ b/src/platform/web/ui/css/themes/element/manifest.json @@ -0,0 +1,43 @@ +{ + "version": 1, + "name": "Element", + "values": { + "font-faces": [ + { + "font-family": "Inter", + "src": [{"asset": "/fonts/Inter.ttf", "format": "ttf"}] + } + ], + "variants": { + "light": { + "base": true, + "default": true, + "name": "Light", + "variables": { + "background-color-primary": "#fff", + "background-color-secondary": "#f6f6f6", + "text-color": "#2E2F32", + "accent-color": "#03b381", + "error-color": "#FF4B55", + "fixed-white": "#fff", + "room-badge": "#61708b" + } + }, + "dark": { + "dark": true, + "default": true, + "name": "Dark", + "variables": { + "background-color-primary": "#21262b", + "background-color-secondary": "#2D3239", + "text-color": "#fff", + "accent-color": "#03B381", + "error-color": "#FF4B55", + "fixed-white": "#fff", + "room-badge": "#61708b" + } + } + } + } +} + From 698d47e2219833af5dd9e6976b66e17c86d40498 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 11 Apr 2022 16:25:28 +0530 Subject: [PATCH 03/14] Enable plugins in config --- vite.common-config.js | 21 +++++++++++++++------ vite.config.js | 4 +++- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/vite.common-config.js b/vite.common-config.js index 44c884bd..f5a90154 100644 --- a/vite.common-config.js +++ b/vite.common-config.js @@ -1,9 +1,15 @@ const cssvariables = require("postcss-css-variables"); const flexbugsFixes = require("postcss-flexbugs-fixes"); +const compileVariables = require("./scripts/postcss/css-compile-variables"); +const urlVariables = require("./scripts/postcss/css-url-to-variables"); +const urlProcessor = require("./scripts/postcss/css-url-processor"); const fs = require("fs"); const path = require("path"); const manifest = require("./package.json"); const version = manifest.version; +const compiledVariables = new Map(); +const derive = require("./scripts/postcss/color").derive; +const replacer = require("./scripts/postcss/svg-colorizer").buildColorizedSVG; const commonOptions = { logLevel: "warn", @@ -32,11 +38,14 @@ const commonOptions = { css: { postcss: { plugins: [ - cssvariables({ - preserve: (declaration) => { - return declaration.value.indexOf("var(--ios-") == 0; - } - }), + compileVariables({derive, compiledVariables}), + urlVariables({compileVariables}), + urlProcessor({replacer}), + // cssvariables({ + // preserve: (declaration) => { + // return declaration.value.indexOf("var(--ios-") == 0; + // } + // }), // the grid option creates some source fragment that causes the vite warning reporter to crash because // it wants to log a warning on a line that does not exist in the source fragment. // autoprefixer({overrideBrowserslist: ["IE 11"], grid: "no-autoplace"}), @@ -46,4 +55,4 @@ const commonOptions = { } }; -module.exports = commonOptions; +module.exports = { commonOptions, compiledVariables }; diff --git a/vite.config.js b/vite.config.js index b6ec597d..8cc16d26 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,8 +1,9 @@ const injectWebManifest = require("./scripts/build-plugins/manifest"); const {injectServiceWorker, createPlaceholderValues} = require("./scripts/build-plugins/service-worker"); +const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes"); const {defineConfig} = require('vite'); const mergeOptions = require('merge-options').bind({concatArrays: true}); -const commonOptions = require("./vite.common-config.js"); +const {commonOptions, compiledVariables} = require("./vite.common-config.js"); export default defineConfig(({mode}) => { const definePlaceholders = createPlaceholderValues(mode); @@ -15,6 +16,7 @@ export default defineConfig(({mode}) => { sourcemap: true, }, plugins: [ + themeBuilder({manifestLocations: ["./src/platform/web/ui/css/themes/element"], compiledVariables}), // important this comes before service worker // otherwise the manifest and the icons it refers to won't be cached injectWebManifest("assets/manifest.json"), From 3d304be21195ffcbc6d319f7a2e4c08ba7c845be Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 11 Apr 2022 16:45:55 +0530 Subject: [PATCH 04/14] Convert theme.css - Use color variables - Use colorized icons --- .../web/ui/css/themes/element/theme.css | 181 ++++++++++-------- 1 file changed, 96 insertions(+), 85 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 383feeae..70bbd39d 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -15,17 +15,25 @@ See the License for the specific language governing permissions and limitations under the License. */ +@import url('../../main.css'); @import url('inter.css'); @import url('timeline.css'); :root { font-size: 10px; + /* Theme aliases */ + --icon-color: var(--background-color-secondary--darker-40); + --light-border: var(--background-color-secondary--darker-5); + --light-text-color: var(--background-color-secondary--darker-55); + --timeline-time-text-color: var(--background-color-secondary--darker-35); + --icon-background: var(--background-color-secondary--darker-7); + --right-panel-text-color: var(--background-color-secondary--darker-35); } .hydrogen { font-family: 'Inter', sans-serif, 'emoji'; - background-color: white; - color: #2e2f32; + background-color: var(--background-color-primary); + color: var(--text-color); font-size: 1.4rem; --usercolor1: #368BD6; --usercolor2: #AC3BA8; @@ -43,8 +51,8 @@ limitations under the License. .avatar { border-radius: 100%; - background: #fff; - color: white; + background: var(--fixed-white); + color: var(--fixed-white); } .hydrogen .avatar.usercolor1 { background-color: var(--usercolor1); } @@ -59,7 +67,7 @@ limitations under the License. .logo { height: 48px; min-width: 48px; - background-image: url('element-logo.svg'); + background-image: url('element-logo.svg?primary=accent-color'); background-repeat: no-repeat; background-position: center; } @@ -94,7 +102,7 @@ limitations under the License. .form-row.text > input, .form-row.text > textarea { padding: 12px; - border: 1px solid rgba(141, 151, 165, 0.15); + border: 1px solid var(--light-border); border-radius: 8px; margin-top: 5px; font-size: 1em; @@ -113,7 +121,7 @@ limitations under the License. .form-row .form-row-description { font-size: 1rem; - color: #777; + color: var(--light-text-color); margin: 8px 0 0 0; } @@ -129,26 +137,26 @@ a.button-action { .button-action.secondary { - color: #03B381; + color: var(--accent-color); } .button-action.primary { - background-color: #03B381; + background-color: var(--accent-color); border-radius: 8px; - color: white; + color: var(--fixed-white); font-weight: bold; } .button-action.primary:disabled { - color: #fffa; + color: var(--fixed-white--darker-10); } .button-action.primary.destructive { - background-color: #FF4B55; + background-color: var(--error-color); } .button-action.secondary.destructive { - color: #FF4B55; + color: var(--error-color); } .button-action { @@ -163,7 +171,7 @@ a.button-action { width: 32px; height: 32px; background-position: center; - background-color: #e1e3e6; + background-color: var(--icon-background); background-repeat: no-repeat; border: none; border-radius: 100%; @@ -171,26 +179,26 @@ a.button-action { } .button-utility.grid { - background-image: url('icons/enable-grid.svg'); + background-image: url('icons/enable-grid.svg?primary=icon-color'); } .button-utility.settings { - background-image: url('icons/settings.svg'); + background-image: url('icons/settings.svg?primary=icon-color'); } .button-utility.create { - background-image: url('icons/plus.svg'); + background-image: url('icons/plus.svg?primary=icon-color'); } .button-utility.grid.on { - background-image: url('icons/disable-grid.svg'); + background-image: url('icons/disable-grid.svg?primary=icon-color'); } .FilterField { - background-image: url('icons/search.svg'); + background-image: url('icons/search.svg?primary=icon-color'); background-repeat: no-repeat; background-position: 8px center; - background-color: #e1e3e6; + background-color: var(--icon-background); /* to prevent jumps when adding a border on focus */ border: 1px solid transparent; border-radius: 16px; @@ -201,11 +209,12 @@ a.button-action { } .FilterField:focus-within { - border: 1px #e1e3e6 solid; - background-color: white; + border: 1px var(--icon-background) solid; + background-color: var(--background-color-primary); } + .FilterField:focus-within button { - border-color: white; + border-color: var(--background-color-primary); } /*.FilterField:not(:focus-within) button { @@ -221,15 +230,16 @@ a.button-action { border: none; background-color: transparent; height: 100%; + color: var(--text-color); } .FilterField button { width: 30px; /* 32 - 1 (top) - 1 (bottom) */ height: 30px; /* 32 - 1 (top) - 1 (bottom) */ background-position: center; - background-color: #e1e3e6; + background-color: var(--icon-background); background-repeat: no-repeat; - background-image: url('icons/clear.svg'); + background-image: url('icons/clear.svg?primary=icon-color'); border: 7px solid transparent; /* 8 - 1 */ border-radius: 100%; box-sizing: border-box; @@ -249,12 +259,12 @@ a.button-action { } .StartSSOLoginView_button { - border: 1px solid #03B381; + border: 1px solid var(--accent-color); border-radius: 8px; } .LoginView_back { - background-image: url("./icons/chevron-left.svg"); + background-image: url("./icons/chevron-left.svg?primary=icon-color"); background-color: transparent; } @@ -266,7 +276,7 @@ a.button-action { .LoginView_forwardInfo { font-size: 0.9em; margin-left: 1em; - color: #777; + color: var(--light-text-color); } .CompleteSSOView_title { @@ -286,7 +296,7 @@ a.button-action { } .LeftPanel { - background: rgba(245, 245, 245, 0.90); + background: var(--background-color-secondary); font-size: 1.5rem; padding: 12px 8px 0 8px; } @@ -300,7 +310,7 @@ a.button-action { } .LeftPanel .filter { - border-bottom: 1px solid rgba(245, 245, 245, 0.90); + border-bottom: 1px solid var(--background-color-secondary); } .LeftPanel .filter input { @@ -357,8 +367,8 @@ a.button-action { border-radius: 1.6rem; box-sizing: border-box; padding: 0.1rem 0.3rem; - background-color: #61708b; - color: white; + background-color: var(--room-badge); + color: var(--background-color-primary); font-weight: bold; font-size: 1rem; line-height: 1.4rem; @@ -366,7 +376,7 @@ a.button-action { } .RoomList .badge.highlighted { - background-color: #ff4b55; + background-color: var(--error-color); } a { @@ -376,8 +386,8 @@ a { .SessionStatusView { padding: 4px; min-height: 22px; - background-color: #03B381; - color: white; + background-color: var(--accent-color); + color: var(--background-color-primary); align-items: center; } @@ -386,7 +396,7 @@ a { text-align: left; } -.SessionStatusView > .end { +.SessionStatusView>.end { flex: 1; display: flex; justify-content: flex-end; @@ -397,7 +407,7 @@ a { .SessionStatusView .dismiss { border: none; background: none; - background-image: url('icons/dismiss.svg'); + background-image: url('icons/dismiss.svg?primary=background-color-primary'); background-position: center; background-repeat: no-repeat; width: 32px; @@ -418,9 +428,9 @@ a { .SessionPickerView .session-info { text-decoration: none; padding: 12px; - border: 1px solid rgba(141, 151, 165, 0.15); + border: 1px solid var(--light-border); border-radius: 8px; - background-image: url('icons/chevron-right.svg'); + background-image: url('./icons/chevron-right.svg?primary=icon-color'); background-position: center right 30px; background-repeat: no-repeat; font-weight: 500; @@ -445,12 +455,12 @@ a { } .SessionPickerView button.destructive { - color: #FF4B55; + color: var(--error-color); } .RoomGridView > div.container { - border-right: 1px solid rgba(245, 245, 245, 0.90); - border-bottom: 1px solid rgba(245, 245, 245, 0.90); + border-right: 1px solid var(--background-color-secondary); + border-bottom: 1px solid var(--background-color-secondary); } .RoomGridView > .focused > .room-placeholder .unfocused { @@ -462,7 +472,7 @@ a { } .room-placeholder .unfocused { - color: #8D99A5; + color: var(--right-panel-text-color); } @@ -474,9 +484,9 @@ a { .middle-header { box-sizing: border-box; flex: 0 0 56px; /* 12 + 32 + 12 to align with filter field + margin */ - background: white; + background: var(--background-color-primary); padding: 0 16px; - border-bottom: 1px solid rgba(245, 245, 245, 0.90); + border-bottom: 1px solid var(--background-color-secondary); } .middle-header h2 { @@ -492,7 +502,7 @@ a { } .close-middle, .close-session { - background-image: url('icons/chevron-left.svg'); + background-image: url('icons/chevron-left.svg?primary=icon-color'); background-position-x: 10px; } @@ -501,15 +511,11 @@ a { } .RoomHeader .room-options { - background-image: url("./icons/vertical-ellipsis.svg"); -} - -.RoomHeader .room-info { - background-image: url("./icons/info.svg"); + background-image: url("./icons/vertical-ellipsis.svg?primary=icon-color"); } .RoomView_error { - color: red; + color: var(--error-color); } .MessageComposer_replyPreview .Timeline_message { @@ -520,9 +526,9 @@ a { } .MessageComposer_replyPreview { - background: rgba(245, 245, 245, 0.90); + background: var(--background-color-secondary); margin: 0px 10px 10px 10px; - box-shadow: 0px 0px 5px #91919169; + box-shadow: 0px 0px 5px var(--background-color-secondary--darker-15); border-radius: 5px; } @@ -546,7 +552,7 @@ a { white-space: nowrap; overflow: hidden; background-color: transparent; - background-image: url('icons/clear.svg'); + background-image: url('icons/clear.svg?primary=icon-color'); background-repeat: no-repeat; background-position: center; background-size: 18px; @@ -554,7 +560,7 @@ a { } .MessageComposer_input:first-child { - border-top: 1px solid rgba(245, 245, 245, 0.90); + border-top: 1px solid var(--background-color-secondary); } .MessageComposer_input > :not(:first-child) { @@ -564,7 +570,8 @@ a { .MessageComposer_input > textarea { border: none; border-radius: 24px; - background: #F6F6F6; + background: var(--background-color-secondary); + color: inherit; font-size: 14px; font-family: "Inter", sans-serif; resize: none; @@ -586,8 +593,8 @@ a { text-indent: 200%; overflow: hidden; - background-color: #03B381; - background-image: url('icons/send.svg'); + background-color: var(--accent-color); + background-image: url('icons/send.svg?primary=background-color-primary'); background-repeat: no-repeat; background-position: center; align-self: end; @@ -603,7 +610,7 @@ a { white-space: nowrap; overflow: hidden; background-color: transparent; - background-image: url('icons/paperclip.svg'); + background-image: url('icons/paperclip.svg?primary=icon-color'); background-repeat: no-repeat; background-position: center; } @@ -682,7 +689,7 @@ a { } .error { - color: red; + color: var(--error-color); font-weight: 600; } @@ -697,18 +704,18 @@ button.link { } .Settings a, .Settings .link { - color: #03B381; + color: var(--accent-color); font-weight: 600; } .lightbox { - background-color: rgba(0,0,0,0.75); + background-color: rgba(0, 0, 0, 0.75); display: grid; grid-template: "content close" auto "content details" 1fr / 1fr auto; - color: white; + color: var(--background-color-primary); padding: 4px; } @@ -752,7 +759,7 @@ button.link { display: block; grid-area: close; justify-self: end; - background-image: url('icons/dismiss.svg'); + background-image: url('icons/dismiss.svg?primary=background-color-primary'); background-position: center; background-size: 16px; background-repeat: no-repeat; @@ -772,7 +779,7 @@ button.link { border-radius: 8px; box-shadow: 2px 2px 10px rgba(0,0,0,0.5); padding: 4px; - background-color: white; + background-color: var(--background-color-primary); list-style: none; margin: 0; } @@ -781,6 +788,10 @@ button.link { margin-bottom: 10px; } +.menu .menu-item { + color: var(--text-color); +} + .menu button { border-radius: 4px; border: none; @@ -793,7 +804,7 @@ button.link { } .menu .destructive button { - color: #FF4B55; + color: var(--error-color); } .menu .quick-reactions { @@ -842,7 +853,7 @@ button.link { grid-area: description; font-size: 1.2rem; margin: 0; - color: #777; + color: var(--light-text-color); } .InviteView_roomAvatar { @@ -877,7 +888,7 @@ button.link { .RoomArchivedView { padding: 12px; - background-color: rgba(245, 245, 245, 0.90); + background-color: var(--background-color-secondary); } .RoomArchivedView h3 { @@ -914,7 +925,7 @@ button.link { /* Right Panel */ .RightPanelView { - background: rgba(245, 245, 245, 0.90); + background: var(--background-color-secondary); } .RoomDetailsView { @@ -923,7 +934,7 @@ button.link { } .RoomDetailsView_id, .MemberDetailsView_id { - color: #737D8C; + color: var(--right-panel-text-color); font-size: 12px; } @@ -952,7 +963,7 @@ button.RoomDetailsView_row { } button.RoomDetailsView_row::after { - content: url("./icons/chevron-small.svg"); + content: url("./icons/chevron-small.svg?primary=icon-color"); margin-left: 12px; } @@ -972,16 +983,16 @@ button.RoomDetailsView_row::after { } .RoomDetailsView_value { - color: #737D8C; + color: var(--right-panel-text-color); flex: 1; } .MemberCount::before { - content: url("./icons/room-members.svg"); + content: url("./icons/room-members.svg?primary=icon-color"); } .EncryptionStatus::before { - content: url("./icons/encryption-status.svg"); + content: url("./icons/encryption-status.svg?primary=icon-color"); } /* Encryption icon next to avatar */ @@ -990,8 +1001,8 @@ button.RoomDetailsView_row::after { width: 52px; height: 52px; border-radius: 100%; - background: #737D8C; - border: 3px solid #F2F5F8; + background: var(--right-panel-text-color); + border: 3px solid var(--background-color-secondary); margin-left: -16px; } @@ -1001,11 +1012,11 @@ button.RoomDetailsView_row::after { } .EncryptionIconView_encrypted { - content: url("./icons/e2ee-normal.svg"); + content: url("./icons/e2ee-normal.svg?primary=fixed-white"); } .EncryptionIconView_unencrypted { - content: url("./icons/e2ee-disabled.svg"); + content: url("./icons/e2ee-disabled.svg?primary=fixed-white"); } .RightPanelView_buttons .button-utility { @@ -1014,11 +1025,11 @@ button.RoomDetailsView_row::after { } .RightPanelView_buttons .close { - background-image: url("./icons/clear.svg"); + background-image: url("./icons/clear.svg?primary=icon-color"); } .RightPanelView_buttons .back { - background-image: url("./icons/chevron-thin-left.svg"); + background-image: url("./icons/chevron-thin-left.svg?primary=icon-color"); } /* Memberlist Panel */ @@ -1059,7 +1070,7 @@ button.RoomDetailsView_row::after { .MemberDetailsView_label { font-size: 12px; font-weight: 600; - color: #8d99a5; + color: var(--right-panel-text-color); text-transform: uppercase; } @@ -1075,7 +1086,7 @@ button.RoomDetailsView_row::after { } .MemberDetailsView_options a, .MemberDetailsView_options button { - color: #0dbd8b; + color: var(--accent-color); text-decoration: none; margin: 0 0 3px 0; padding: 0; @@ -1130,8 +1141,8 @@ button.RoomDetailsView_row::after { width: 64px; height: 64px; border-radius: 100%; - background-color: #e1e3e6; - background-image: url('icons/plus.svg'); + background-color: var(--icon-background); + background-image: url('icons/plus.svg?primary=icon-color'); background-repeat: no-repeat; background-position: center; background-size: 36px; From bf74c3c67b83da5e958f296e32b266da8465f2da Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 12 Apr 2022 14:52:19 +0530 Subject: [PATCH 05/14] Add more colors to manifest --- src/platform/web/ui/css/themes/element/manifest.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/manifest.json b/src/platform/web/ui/css/themes/element/manifest.json index f67187bf..f27254e5 100644 --- a/src/platform/web/ui/css/themes/element/manifest.json +++ b/src/platform/web/ui/css/themes/element/manifest.json @@ -20,7 +20,8 @@ "accent-color": "#03b381", "error-color": "#FF4B55", "fixed-white": "#fff", - "room-badge": "#61708b" + "room-badge": "#61708b", + "link-color": "#238cf5" } }, "dark": { @@ -34,7 +35,8 @@ "accent-color": "#03B381", "error-color": "#FF4B55", "fixed-white": "#fff", - "room-badge": "#61708b" + "room-badge": "#61708b", + "link-color": "#238cf5" } } } From f26b51e5dae9056fd751a8a4b873e17de9049385 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 12 Apr 2022 15:12:31 +0530 Subject: [PATCH 06/14] Change colors in more css files --- src/platform/web/ui/css/right-panel.css | 1 + .../web/ui/css/themes/element/theme.css | 7 +- .../web/ui/css/themes/element/timeline.css | 67 +++++++++++-------- 3 files changed, 45 insertions(+), 30 deletions(-) diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index 95fd9cae..92a89c0a 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -22,6 +22,7 @@ .RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .MemberDetailsView, .EncryptionIconView { display: flex; align-items: center; + color: var(--text-color); } .RoomDetailsView_value { diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 70bbd39d..c97eec6d 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -285,6 +285,7 @@ a.button-action { @media screen and (min-width: 600px) { .PreSessionScreen { + /* needs transparency support */ box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1); border-radius: 8px; } @@ -345,7 +346,7 @@ a.button-action { } .RoomList li.active { - background: rgba(141, 151, 165, 0.1); + background: var(--background-color-secondary--darker-7); border-radius: 5px; } @@ -477,7 +478,7 @@ a { .RoomGridView > div.focus-ring { - border: 2px solid rgba(134, 193, 165, 1); + border: 2px solid var(--accent-color--darker-5); border-radius: 12px; } @@ -709,6 +710,7 @@ button.link { } .lightbox { + /* needs transparency support */ background-color: rgba(0, 0, 0, 0.75); display: grid; grid-template: @@ -777,6 +779,7 @@ button.link { .menu { border-radius: 8px; + /* needs transparency support */ box-shadow: 2px 2px 10px rgba(0,0,0,0.5); padding: 4px; background-color: var(--background-color-primary); diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css index 90fee243..eed93df6 100644 --- a/src/platform/web/ui/css/themes/element/timeline.css +++ b/src/platform/web/ui/css/themes/element/timeline.css @@ -21,8 +21,8 @@ limitations under the License. bottom: 16px; right: 32px; border-radius: 100%; - border: 1px solid #8d99a5; - background-image: url("./icons/chevron-down.svg"); + border: 1px solid var(--background-color-secondary--darker-7); + background-image: url("./icons/chevron-down.svg?primary=icon-color"); background-position: center; background-color: white; background-repeat: no-repeat; @@ -77,6 +77,7 @@ limitations under the License. } .Timeline_message:hover:not(.disabled), .Timeline_message.selected, .Timeline_message.menuOpen { + /* needs transparency support */ background-color: rgba(141, 151, 165, 0.1); border-radius: 4px; } @@ -119,10 +120,11 @@ limitations under the License. margin-top: -12px; margin-right: 4px; /* button visuals */ - border: #ccc 1px solid; + border: var(--background-color-primary--darker-10) 1px solid; height: 24px; width: 24px; - background-color: #fff; + background-color: var(--background-color-primary); + color: inherit; border-radius: 4px; padding: 0; text-align: center; @@ -142,12 +144,12 @@ limitations under the License. .Timeline_messageBody time, .Timeline_messageTime { font-size: 0.8em; line-height: normal; - color: #aaa; + color: var(--timeline-time-text-color); } .Timeline_messageBody.statusMessage { font-style: italic; - color: #777; + color: var(--light-text-color); } .Timeline_messageBody { @@ -190,7 +192,7 @@ limitations under the License. } .Timeline_messageBody a.link { - color: #238cf5; + color: var(--link-color); text-decoration: none; } @@ -221,6 +223,7 @@ so the timeline doesn't jump when the image loads */ border-radius: 4px; display: block; } + /* stretch the image (to the spacer) on platforms where we can trust the spacer to always have the correct height, otherwise the image starts with height 0 and with loading=lazy @@ -249,21 +252,24 @@ only loads when the top comes into view*/ .Timeline_messageBody .media > time, .Timeline_messageBody .media > .sendStatus { - color: #2e2f32; + color: var(--text-color); display: block; padding: 2px; margin: 4px; + /* needs transparency support */ background-color: rgba(255, 255, 255, 0.75); border-radius: 4px; } + .Timeline_messageBody .media > .spacer { /* TODO: can we implement this with a pseudo element? or perhaps they are not grid items? */ width: 100%; /* don't stretch height as it is a spacer, just in case it doesn't match with image height */ align-self: start; } + .Timeline_messageBody code, .Timeline_messageBody pre { - background-color: #f8f8f8; + background-color: var(--background-color-secondary); font-family: monospace; font-size: 0.9em; } @@ -275,13 +281,13 @@ only loads when the top comes into view*/ } .Timeline_messageBody pre { - border: 1px solid rgb(229, 229, 229); + border: 1px solid var(--light-border); padding: 0.5em; max-height: 30em; overflow: auto; } -.Timeline_messageBody pre > code { +.Timeline_messageBody pre>code { background-color: unset; border-radius: unset; display: block; @@ -291,17 +297,17 @@ only loads when the top comes into view*/ .Timeline_messageBody blockquote { margin-left: 0; padding-left: 20px; - border-left: 4px solid rgb(229, 229, 229); + border-left: 4px solid var(--light-border); } .Timeline_messageBody table { - border: 1px solid rgb(206, 206, 206); + border: 1px solid var(--background-color-secondary--darker-15); border-radius: 2px; border-spacing: 0; } .Timeline_messageBody thead th { - border-bottom: 1px solid rgb(206, 206, 206); + border-bottom: 1px solid var(--background-color-secondary--darker-15); } .Timeline_messageBody td, .Timeline_messageBody th { @@ -309,14 +315,14 @@ only loads when the top comes into view*/ } .Timeline_messageBody tbody tr:nth-child(2n) { - background-color: #f6f6f6; + background-color: var(--background-color-secondary); } .Timeline_messageBody .pill { padding: 0px 5px; border-radius: 15px; - background-color: #f6f6f6; - border: 1px solid rgb(206, 206, 206); + background-color: var(--background-color-secondary); + border: 1px solid var(--background-color-secondary--darker-10); text-decoration: none; display: inline-flex; align-items: center; @@ -331,11 +337,11 @@ only loads when the top comes into view*/ } .Timeline_message.unsent .Timeline_messageBody { - color: #ccc; + color: var(--light-text-color); } .Timeline_message.unverified .Timeline_messageBody { - color: #ff4b55; + color: var(--error-color); } .Timeline_messageReactions { @@ -348,22 +354,27 @@ only loads when the top comes into view*/ line-height: 2.0rem; margin-right: 6px; padding: 1px 6px; - border: 1px solid #e9edf1; + border: 1px solid var(--light-border); border-radius: 10px; - background-color: #f3f8fd; + background-color: var(--background-color-secondary); cursor: pointer; user-select: none; vertical-align: middle; } .Timeline_messageReactions button.active { - background-color: #e9fff9; - border-color: #0DBD8B; + background-color: var(--accent-color--lighter-60); + border-color: var(--accent-color); } @keyframes glow-reaction-border { - 0% { border-color: #e9edf1; } - 100% { border-color: #0DBD8B; } + 0% { + border-color: var(--background-color-secondary); + } + + 100% { + border-color: var(--accent-color); + } } .Timeline_messageReactions button.active.pending { @@ -377,8 +388,8 @@ only loads when the top comes into view*/ .Timeline_locationLink { padding: 0px 8px; border-radius: 16px; - border: 1px solid #e9edf1; - background-color: #f3f8fd; + border: 1px solid var(--light-border); + background-color: var(--background-color-secondary); text-decoration: none; display: inline-block; line-height: 2rem; @@ -394,7 +405,7 @@ only loads when the top comes into view*/ .AnnouncementView > div { margin: 0 auto; padding: 10px 20px; - background-color: rgba(245, 245, 245, 0.90); + background-color: var(--background-color-secondary); text-align: center; border-radius: 10px; } From 2de0450e970e0635c018f7c1ed2a5c8aadb7ccce Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 12 Apr 2022 16:12:43 +0530 Subject: [PATCH 07/14] Make colors better looking for dark variant --- src/platform/web/ui/css/themes/element/theme.css | 9 +++++++-- src/platform/web/ui/css/themes/element/timeline.css | 5 +++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index c97eec6d..b1d36af1 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -90,6 +90,8 @@ limitations under the License. .form-row.text textarea { font-family: "Inter", sans-serif; + background-color: var(--background-color-secondary); + color: inherit; } .form-group { @@ -107,6 +109,8 @@ limitations under the License. margin-top: 5px; font-size: 1em; resize: vertical; + background-color: var(--background-color-secondary); + color: inherit; } .form-row.check { @@ -388,7 +392,7 @@ a { padding: 4px; min-height: 22px; background-color: var(--accent-color); - color: var(--background-color-primary); + color: var(--fixed-white); align-items: center; } @@ -702,6 +706,7 @@ button.link { cursor: pointer; margin: -12px; padding: 12px; + color: inherit; } .Settings a, .Settings .link { @@ -761,7 +766,7 @@ button.link { display: block; grid-area: close; justify-self: end; - background-image: url('icons/dismiss.svg?primary=background-color-primary'); + background-image: url('icons/dismiss.svg?primary=fixed-white'); background-position: center; background-size: 16px; background-repeat: no-repeat; diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css index eed93df6..bac4b4a5 100644 --- a/src/platform/web/ui/css/themes/element/timeline.css +++ b/src/platform/web/ui/css/themes/element/timeline.css @@ -24,7 +24,7 @@ limitations under the License. border: 1px solid var(--background-color-secondary--darker-7); background-image: url("./icons/chevron-down.svg?primary=icon-color"); background-position: center; - background-color: white; + background-color: var(--background-color-primary--darker-10); background-repeat: no-repeat; cursor: pointer; } @@ -357,13 +357,14 @@ only loads when the top comes into view*/ border: 1px solid var(--light-border); border-radius: 10px; background-color: var(--background-color-secondary); + color: inherit; cursor: pointer; user-select: none; vertical-align: middle; } .Timeline_messageReactions button.active { - background-color: var(--accent-color--lighter-60); + background-color: var(--background-color-secondary); border-color: var(--accent-color); } From 5e7432b5de2c0ce46189034b9d3af37485794e1b Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 12 Apr 2022 21:05:14 +0530 Subject: [PATCH 08/14] Make badge font color always white --- src/platform/web/ui/css/themes/element/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index b1d36af1..688554aa 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -373,7 +373,7 @@ a.button-action { box-sizing: border-box; padding: 0.1rem 0.3rem; background-color: var(--room-badge); - color: var(--background-color-primary); + color: var(--fixed-white); font-weight: bold; font-size: 1rem; line-height: 1.4rem; From f7bfab6e08a3a7b97456ef041554464950ead3c8 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 12 Apr 2022 21:06:09 +0530 Subject: [PATCH 09/14] Add develop only script tag to index.html --- src/platform/web/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/platform/web/index.html b/src/platform/web/index.html index 0e993992..5950d89f 100644 --- a/src/platform/web/index.html +++ b/src/platform/web/index.html @@ -11,8 +11,7 @@ - - +