From 61ce2f9e3d1a408d8c8f6b0494d5b0e0687d0beb Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 3 Mar 2022 15:36:25 +0530
Subject: [PATCH 01/85] Add observeNavigation in ViewModel

---
 src/domain/ViewModel.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/domain/ViewModel.ts b/src/domain/ViewModel.ts
index cfe22326..04fec86e 100644
--- a/src/domain/ViewModel.ts
+++ b/src/domain/ViewModel.ts
@@ -58,6 +58,14 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
         return this._options[name];
     }
 
+    observeNavigation(type: string, onChange: (value: true | string, type: string) => void) {
+      const segmentObservable = this.navigation.observe(type);
+      const unsubscribe = segmentObservable.subscribe((value: true | string) => {
+        onChange(value, type);
+      })
+      this.track(unsubscribe);
+    }
+
     track<D extends Disposable>(disposable: D): D {
         if (!this.disposables) {
             this.disposables = new Disposables();

From e07abfa02a543f1ddc9515d039f3fe56f81b5b88 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 7 Mar 2022 11:33:51 +0530
Subject: [PATCH 02/85] Add missing type

---
 src/domain/ViewModel.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/domain/ViewModel.ts b/src/domain/ViewModel.ts
index 04fec86e..8b8581ae 100644
--- a/src/domain/ViewModel.ts
+++ b/src/domain/ViewModel.ts
@@ -58,9 +58,9 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
         return this._options[name];
     }
 
-    observeNavigation(type: string, onChange: (value: true | string, type: string) => void) {
+    observeNavigation(type: string, onChange: (value: string | true | undefined, type: string) => void) {
       const segmentObservable = this.navigation.observe(type);
-      const unsubscribe = segmentObservable.subscribe((value: true | string) => {
+      const unsubscribe = segmentObservable.subscribe((value: string | true | undefined) => {
         onChange(value, type);
       })
       this.track(unsubscribe);

From e8bd1f33900851e972c06f8f0e01caa8f5b81caf Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 27 Mar 2022 20:06:26 +0530
Subject: [PATCH 03/85] Pass result as message

---
 scripts/postcss/css-compile-variables.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index 3ed34513..b48fc8fa 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -112,7 +112,7 @@ module.exports = (opts = {}) => {
     return {
         postcssPlugin: "postcss-compile-variables",
 
-        Once(root, {Rule, Declaration}) {
+        Once(root, {Rule, Declaration, result}) {
             /*
             Go through the CSS file once to extract all aliases and base variables.
             We use these when resolving derived variables later.
@@ -120,6 +120,13 @@ module.exports = (opts = {}) => {
             root.walkDecls(decl => extract(decl));
             root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive));
             addResolvedVariablesToRootSelector(root, {Rule, Declaration});
+            // Publish both the base-variables and derived-variables to the other postcss-plugins
+            const combinedMap = new Map([...baseVariables, ...resolvedMap]);
+            result.messages.push({
+                type: "resolved-variable-map",
+                plugin: "postcss-compile-variables",
+                colorMap: combinedMap,
+            })
         },
     };
 };

From 2015fa2d7a892777991f8326ca56d1d6e15534a1 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 27 Mar 2022 20:18:42 +0530
Subject: [PATCH 04/85] Move postcss-value-parser to dev dependency

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 12c73994..d506d872 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "node-html-parser": "^4.0.0",
     "postcss-css-variables": "^0.18.0",
     "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-value-parser": "^4.2.0",
     "regenerator-runtime": "^0.13.7",
     "text-encoding": "^0.7.0",
     "typescript": "^4.3.5",
@@ -54,7 +55,6 @@
     "another-json": "^0.2.0",
     "base64-arraybuffer": "^0.2.0",
     "dompurify": "^2.3.0",
-    "off-color": "^2.0.0",
-    "postcss-value-parser": "^4.2.0"
+    "off-color": "^2.0.0"
   }
 }

From 4350d2f264927bf655793a178e37ecdff8213494 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 1 Apr 2022 16:20:58 +0530
Subject: [PATCH 05/85] Don't derive variables for runtime theme

---
 scripts/postcss/css-compile-variables.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index b48fc8fa..f7d63fab 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -113,6 +113,11 @@ module.exports = (opts = {}) => {
         postcssPlugin: "postcss-compile-variables",
 
         Once(root, {Rule, Declaration, result}) {
+            const cssFileLocation = root.source.input.from;
+            if (cssFileLocation.includes("type=runtime")) {
+                // If this is a runtime theme, don't derive variables.
+                return;
+            }
             /*
             Go through the CSS file once to extract all aliases and base variables.
             We use these when resolving derived variables later.

From 918a3e42b1cf809af11bf6f6feb076f48700fd73 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 1 Apr 2022 16:23:33 +0530
Subject: [PATCH 06/85] Populate compiled variables map

---
 scripts/postcss/css-compile-variables.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index f7d63fab..263fbe36 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -94,6 +94,23 @@ function addResolvedVariablesToRootSelector(root, {Rule, Declaration}) {
     root.append(newRule);
 }
 
+function populateMapWithDerivedVariables(map, cssFileLocation) {
+    const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
+    if (map.has(location)) {
+        /**
+         * This postcss plugin is going to run on all theme variants of a single theme.
+         * But we only really need to populate the map once since theme variants only differ
+         * by the values of the base-variables and we don't care about values here.
+         */
+        return;
+    }
+    const derivedVariables = new Set([
+        ...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))),
+        ...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`))
+    ]);
+    map.set(location, { "derived-variables": derivedVariables });
+}
+
 /**
  * @callback derive
  * @param {string} value - The base value on which an operation is applied
@@ -104,6 +121,7 @@ function addResolvedVariablesToRootSelector(root, {Rule, Declaration}) {
  * 
  * @param {Object} opts - Options for the plugin
  * @param {derive} opts.derive - The callback which contains the logic for resolving derived variables
+ * @param {Map} opts.compiledVariables - A map that stores derived variables so that manifest source sections can be produced
  */
 module.exports = (opts = {}) => {
     aliasMap = new Map();
@@ -125,13 +143,16 @@ module.exports = (opts = {}) => {
             root.walkDecls(decl => extract(decl));
             root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive));
             addResolvedVariablesToRootSelector(root, {Rule, Declaration});
+            if (opts.compiledVariables){
+                populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
+            }
             // Publish both the base-variables and derived-variables to the other postcss-plugins
             const combinedMap = new Map([...baseVariables, ...resolvedMap]);
             result.messages.push({
                 type: "resolved-variable-map",
                 plugin: "postcss-compile-variables",
                 colorMap: combinedMap,
-            })
+            });
         },
     };
 };

From 859449ed60bd7ce7476d0fedac958fd1a62c3a17 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 1 Apr 2022 16:41:00 +0530
Subject: [PATCH 07/85] Write test for map population

---
 scripts/postcss/test.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/scripts/postcss/test.js b/scripts/postcss/test.js
index 36ff9282..d07f07e4 100644
--- a/scripts/postcss/test.js
+++ b/scripts/postcss/test.js
@@ -96,6 +96,7 @@ module.exports.tests = function tests() {
             `;
             await run( inputCSS, outputCSS, { }, assert);
         },
+
         "multiple aliased-derived variable in single declaration is parsed correctly": async (assert) => {
             const inputCSS = `
             :root {
@@ -116,6 +117,23 @@ module.exports.tests = function tests() {
             }
             `;
             await run( inputCSS, outputCSS, { }, assert);
+        },
+
+        "compiledVariables map is populated": async (assert) => {
+            const compiledVariables = new Map();
+            const inputCSS = `
+            :root {
+                --icon-color: #fff;
+            }
+            div {
+                background: var(--icon-color--darker-20);
+                --my-alias: var(--icon-color--darker-20);
+                color: var(--my-alias--lighter-15);
+            }`;
+            await postcss([plugin({ derive, compiledVariables })]).process(inputCSS, { from: "/foo/bar/test.css", });
+            const actualSet = compiledVariables.get("/foo/bar")["derived-variables"];
+            const expectedSet = new Set(["icon-color--darker-20", "my-alias=icon-color--darker-20", "my-alias--lighter-15"]);
+            assert.deepEqual(actualSet, expectedSet);
         }
     };
 };

From 76789eacf154a7e172bd3572480b94a8604cdf16 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 1 Apr 2022 20:43:42 +0530
Subject: [PATCH 08/85] Use array instead of Set

---
 scripts/postcss/css-compile-variables.js | 4 ++--
 scripts/postcss/test.js                  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index 263fbe36..7152535e 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -104,10 +104,10 @@ function populateMapWithDerivedVariables(map, cssFileLocation) {
          */
         return;
     }
-    const derivedVariables = new Set([
+    const derivedVariables = [
         ...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))),
         ...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`))
-    ]);
+    ];
     map.set(location, { "derived-variables": derivedVariables });
 }
 
diff --git a/scripts/postcss/test.js b/scripts/postcss/test.js
index d07f07e4..8d1412ea 100644
--- a/scripts/postcss/test.js
+++ b/scripts/postcss/test.js
@@ -131,9 +131,9 @@ module.exports.tests = function tests() {
                 color: var(--my-alias--lighter-15);
             }`;
             await postcss([plugin({ derive, compiledVariables })]).process(inputCSS, { from: "/foo/bar/test.css", });
-            const actualSet = compiledVariables.get("/foo/bar")["derived-variables"];
-            const expectedSet = new Set(["icon-color--darker-20", "my-alias=icon-color--darker-20", "my-alias--lighter-15"]);
-            assert.deepEqual(actualSet, expectedSet);
+            const actualArray = compiledVariables.get("/foo/bar")["derived-variables"];
+            const expectedArray = ["icon-color--darker-20", "my-alias=icon-color--darker-20", "my-alias--lighter-15"];
+            assert.deepStrictEqual(actualArray.sort(), expectedArray.sort());
         }
     };
 };

From 454345c9b2bb9e3e965cd9e36374da95973164fb Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 5 Apr 2022 15:08:35 +0530
Subject: [PATCH 09/85] Always set map

---
 scripts/postcss/css-compile-variables.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index 7152535e..7302f8d4 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -96,14 +96,6 @@ function addResolvedVariablesToRootSelector(root, {Rule, Declaration}) {
 
 function populateMapWithDerivedVariables(map, cssFileLocation) {
     const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
-    if (map.has(location)) {
-        /**
-         * This postcss plugin is going to run on all theme variants of a single theme.
-         * But we only really need to populate the map once since theme variants only differ
-         * by the values of the base-variables and we don't care about values here.
-         */
-        return;
-    }
     const derivedVariables = [
         ...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))),
         ...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`))

From 48d0242c80fe63073277f47ab36fc7a14dfb256b Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 6 Apr 2022 12:23:55 +0530
Subject: [PATCH 10/85] Also derive variables in URLs

---
 scripts/postcss/css-compile-variables.js | 23 ++++++++++++++++++----
 scripts/postcss/test.js                  | 25 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index 7302f8d4..fa584caa 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -43,17 +43,32 @@ function parseDeclarationValue(value) {
     const parsed = valueParser(value);
     const variables = [];
     parsed.walk(node => {
-        if (node.type !== "function" && node.value !== "var") {
+        if (node.type !== "function") {
             return;
         }
-        const variable = node.nodes[0];
-        variables.push(variable.value);
+        switch (node.value) {
+            case "var": {
+                const variable = node.nodes[0];
+                variables.push(variable.value);
+                break;
+            }
+            case "url": {
+                const url = node.nodes[0].value;
+                // resolve url with some absolute url so that we get the query params without using regex
+                const params = new URL(url, "file://foo/bar/").searchParams;
+                const primary = params.get("primary");
+                const secondary = params.get("secondary");
+                if (primary) { variables.push(primary); }
+                if (secondary) { variables.push(secondary); }
+                break;
+            }
+        }
     });
     return variables;
 }
 
 function resolveDerivedVariable(decl, derive) {
-    const RE_VARIABLE_VALUE = /--((.+)--(.+)-(.+))/;
+    const RE_VARIABLE_VALUE = /(?:--)?((.+)--(.+)-(.+))/;
     const variableCollection = parseDeclarationValue(decl.value);
     for (const variable of variableCollection) {
         const matches = variable.match(RE_VARIABLE_VALUE);
diff --git a/scripts/postcss/test.js b/scripts/postcss/test.js
index 8d1412ea..cccb3ea7 100644
--- a/scripts/postcss/test.js
+++ b/scripts/postcss/test.js
@@ -134,6 +134,31 @@ module.exports.tests = function tests() {
             const actualArray = compiledVariables.get("/foo/bar")["derived-variables"];
             const expectedArray = ["icon-color--darker-20", "my-alias=icon-color--darker-20", "my-alias--lighter-15"];
             assert.deepStrictEqual(actualArray.sort(), expectedArray.sort());
+        },
+
+        "derived variable are supported in urls": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                background-color: var(--foo-color--lighter-50);
+                background: url("./foo/bar/icon.svg?primary=foo-color--darker-5");
+            }
+            a {
+                background: url("foo/bar/icon.svg");
+            }`;
+            const transformedColorLighter = offColor("#ff0").lighten(0.5);
+            const transformedColorDarker = offColor("#ff0").darken(0.05);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color--lighter-50: ${transformedColorLighter.hex()};
+                --foo-color--darker-5: ${transformedColorDarker.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {}, assert);
         }
     };
 };

From 1f6efb4db3faa62cdf499c77c42db2d8fd86f5f0 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 11:35:27 +0530
Subject: [PATCH 11/85] Write plugin code

---
 .../rollup-plugin-build-themes.js             | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 scripts/build-plugins/rollup-plugin-build-themes.js

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
new file mode 100644
index 00000000..dd52ef77
--- /dev/null
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -0,0 +1,64 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+async function readCSSSource(location) {
+    const fs = require("fs").promises;
+    const path = require("path");
+    const resolvedLocation = path.resolve(__dirname, "../../",  `${location}/theme.css`);
+    const data = await fs.readFile(resolvedLocation);
+    return data;
+}
+
+async function appendVariablesToCSS(variables, cssSource) {
+    return cssSource + `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
+}
+
+module.exports = function buildThemes(options) {
+    let manifest, variants;
+
+    return {
+        name: "build-themes",
+        enforce: "pre",
+
+        async buildStart() {
+            const { manifestLocations } = options;
+            for (const location of manifestLocations) {
+                manifest = require(`${location}/manifest.json`);
+                variants = manifest.values.variants;
+                for (const [variant] of Object.entries(variants)) {
+                    const themeName = manifest.name;
+                    // emit the css as built theme bundle
+                    this.emitFile({
+                        type: "chunk",
+                        id: `${location}/theme.css?variant=${variant}`,
+                        fileName: `theme-${themeName}-${variant}.css`,
+                    });
+                }
+            }
+        },
+
+        async load(id) {
+            const result = id.match(/(.+)\/theme.css\?variant=(.+)/);
+            if (result) {
+                const [, location, variant] = result;
+                const cssSource = await readCSSSource(location);
+                const config = variants[variant];
+                return await appendVariablesToCSS(config.variables, cssSource);
+            }
+            return null;
+        },
+    }
+}

From 32eb95734a6ca17241fda7bf577eaf9c2641cb69 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 28 Mar 2022 18:02:53 +0530
Subject: [PATCH 12/85] Add default themes to index html

---
 .../rollup-plugin-build-themes.js             | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index dd52ef77..770f48b7 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -27,7 +27,7 @@ async function appendVariablesToCSS(variables, cssSource) {
 }
 
 module.exports = function buildThemes(options) {
-    let manifest, variants;
+    let manifest, variants, defaultDark, defaultLight;
 
     return {
         name: "build-themes",
@@ -38,13 +38,23 @@ module.exports = function buildThemes(options) {
             for (const location of manifestLocations) {
                 manifest = require(`${location}/manifest.json`);
                 variants = manifest.values.variants;
-                for (const [variant] of Object.entries(variants)) {
+                for (const [variant, details] of Object.entries(variants)) {
                     const themeName = manifest.name;
+                    const fileName = `theme-${themeName}-${variant}.css`;
+                    if (details.default) {
+                        // This theme is the default for when Hydrogen launches for the first time
+                        if (details.dark) {
+                            defaultDark = fileName;
+                        }
+                        else {
+                            defaultLight = fileName;
+                        }
+                    }
                     // emit the css as built theme bundle
                     this.emitFile({
                         type: "chunk",
                         id: `${location}/theme.css?variant=${variant}`,
-                        fileName: `theme-${themeName}-${variant}.css`,
+                        fileName,
                     });
                 }
             }
@@ -60,5 +70,37 @@ module.exports = function buildThemes(options) {
             }
             return null;
         },
+
+        transformIndexHtml(_, ctx) {
+            let darkThemeLocation, lightThemeLocation;
+            for (const [, bundle] of Object.entries(ctx.bundle)) {
+                if (bundle.name === defaultDark) {
+                    darkThemeLocation = bundle.fileName;
+                }
+                if (bundle.name === defaultLight) {
+                    lightThemeLocation = bundle.fileName;
+                }
+            }
+            return [
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        type: "text/css",
+                        media: "(prefers-color-scheme: dark)",
+                        href: `./${darkThemeLocation}`,
+                    }
+                },
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        type: "text/css",
+                        media: "(prefers-color-scheme: light)",
+                        href: `./${lightThemeLocation}`,
+                    }
+                },
+            ];
+        }
     }
 }

From 86c45b5b998685febc6f444e78b6e1da70937308 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 29 Mar 2022 11:46:06 +0530
Subject: [PATCH 13/85] Emit runtime bundle

---
 scripts/build-plugins/rollup-plugin-build-themes.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index 770f48b7..0b9ec4bf 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -38,8 +38,8 @@ module.exports = function buildThemes(options) {
             for (const location of manifestLocations) {
                 manifest = require(`${location}/manifest.json`);
                 variants = manifest.values.variants;
+                const themeName = manifest.name;
                 for (const [variant, details] of Object.entries(variants)) {
-                    const themeName = manifest.name;
                     const fileName = `theme-${themeName}-${variant}.css`;
                     if (details.default) {
                         // This theme is the default for when Hydrogen launches for the first time
@@ -57,6 +57,12 @@ module.exports = function buildThemes(options) {
                         fileName,
                     });
                 }
+                // emit the css as runtime theme bundle
+                this.emitFile({
+                    type: "chunk",
+                    id: `${location}/theme.css`,
+                    fileName: `theme-${themeName}-runtime.css`,
+                });
             }
         },
 

From d5b5e10230cd8d9c5272d9ef67c7bd0f7e0285b6 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 1 Apr 2022 14:27:24 +0530
Subject: [PATCH 14/85] Produce manifest.jsom

---
 .../rollup-plugin-build-themes.js             | 59 ++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index 0b9ec4bf..cd4dc495 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -26,6 +26,46 @@ async function appendVariablesToCSS(variables, cssSource) {
     return cssSource + `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
 }
 
+function parseBundle(bundle) {
+    const chunkMap = new Map();
+    const assetMap = new Map();
+    let runtimeThemeChunk;
+    for (const [fileName, info] of Object.entries(bundle)) {
+        if (!fileName.endsWith(".css")) {
+            continue;
+        }
+        if (info.type === "asset") {
+            /**
+             * So this is the css assetInfo that contains the asset hashed file name.
+             * We'll store it in a separate map indexed via fileName (unhashed) to avoid
+             * searching through the bundle array later.
+             */
+            assetMap.set(info.name, info);
+            continue;
+        }
+        if (info.facadeModuleId?.includes("type=runtime")) {
+            /**
+             * We have a separate field in manifest.source just for the runtime theme,
+             * so store this separately.
+             */
+            runtimeThemeChunk = info;
+            continue;
+        }
+        const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1];
+        if (!location) {
+            throw new Error("Cannot find location of css chunk!");
+        }
+        const array = chunkMap.get(location);
+        if (!array) {
+            chunkMap.set(location, [info]);
+        }
+        else {
+            array.push(info);
+        }
+    }
+    return { chunkMap, assetMap, runtimeThemeChunk };
+}
+
 module.exports = function buildThemes(options) {
     let manifest, variants, defaultDark, defaultLight;
 
@@ -60,7 +100,7 @@ module.exports = function buildThemes(options) {
                 // emit the css as runtime theme bundle
                 this.emitFile({
                     type: "chunk",
-                    id: `${location}/theme.css`,
+                    id: `${location}/theme.css?type=runtime`,
                     fileName: `theme-${themeName}-runtime.css`,
                 });
             }
@@ -107,6 +147,23 @@ module.exports = function buildThemes(options) {
                     }
                 },
             ];
+        },
+
+        generateBundle(_, bundle) {
+            const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
+            for (const [location, chunkArray] of chunkMap) {
+                const manifest = require(`${location}/manifest.json`);
+                manifest.source = {
+                    "built-asset": chunkArray.map(chunk => assetMap.get(chunk.fileName).fileName),
+                    "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
+                };
+                const name = `theme-${manifest.name}.json`;
+                this.emitFile({
+                    type: "asset",
+                    name,
+                    source: JSON.stringify(manifest),
+                });
+            }
         }
     }
 }

From b0f082e81f555c8ba2faeefb565eb6098ea261a6 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 1 Apr 2022 20:27:33 +0530
Subject: [PATCH 15/85] Add derived variables to source section

---
 scripts/build-plugins/rollup-plugin-build-themes.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index cd4dc495..b5768e8c 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -153,9 +153,11 @@ module.exports = function buildThemes(options) {
             const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
             for (const [location, chunkArray] of chunkMap) {
                 const manifest = require(`${location}/manifest.json`);
+                const derivedVariables = options.compiledVariables.get(location)["derived-variables"];
                 manifest.source = {
                     "built-asset": chunkArray.map(chunk => assetMap.get(chunk.fileName).fileName),
                     "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
+                    "derived-variables": derivedVariables,
                 };
                 const name = `theme-${manifest.name}.json`;
                 this.emitFile({

From 7f9af5b5fa0ff932231c09247a043914e733890b Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 3 Apr 2022 16:30:35 +0530
Subject: [PATCH 16/85] Add icon to manifest

---
 scripts/build-plugins/rollup-plugin-build-themes.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index b5768e8c..2355a136 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -153,11 +153,14 @@ module.exports = function buildThemes(options) {
             const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
             for (const [location, chunkArray] of chunkMap) {
                 const manifest = require(`${location}/manifest.json`);
-                const derivedVariables = options.compiledVariables.get(location)["derived-variables"];
+                const compiledVariables = options.compiledVariables.get(location);
+                const derivedVariables = compiledVariables["derived-variables"];
+                const icon = compiledVariables["icon"];
                 manifest.source = {
                     "built-asset": chunkArray.map(chunk => assetMap.get(chunk.fileName).fileName),
                     "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
                     "derived-variables": derivedVariables,
+                    "icon": icon
                 };
                 const name = `theme-${manifest.name}.json`;
                 this.emitFile({

From f75ee86c0e30288aa5af9cf1906fe76a0ccfbd2c Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 5 Apr 2022 16:27:23 +0530
Subject: [PATCH 17/85] Change comment

---
 scripts/build-plugins/rollup-plugin-build-themes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index 2355a136..74fe4daf 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -82,7 +82,7 @@ module.exports = function buildThemes(options) {
                 for (const [variant, details] of Object.entries(variants)) {
                     const fileName = `theme-${themeName}-${variant}.css`;
                     if (details.default) {
-                        // This theme is the default for when Hydrogen launches for the first time
+                        // This is one of the default variants for this theme.
                         if (details.dark) {
                             defaultDark = fileName;
                         }

From f897e5132c29532034d7fe3d59a1dc53e02c62a3 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 14 Mar 2022 12:11:46 +0530
Subject: [PATCH 18/85] Implement url to variables plugin

---
 package.json                                  |  2 +-
 scripts/postcss/css-url-to-variables.js       | 54 +++++++++++++++++++
 .../css-compile-variables.test.js}            |  4 +-
 .../tests/css-url-to-variables.test.js        | 48 +++++++++++++++++
 4 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 scripts/postcss/css-url-to-variables.js
 rename scripts/postcss/{test.js => tests/css-compile-variables.test.js} (98%)
 create mode 100644 scripts/postcss/tests/css-url-to-variables.test.js

diff --git a/package.json b/package.json
index d506d872..af863ced 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts",
     "lint-ci": "eslint src/",
     "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/",
-    "test:postcss": "impunity --entry-point  scripts/postcss/test.js ",
+    "test:postcss": "impunity --entry-point  scripts/postcss/tests/css-compile-variables.test.js scripts/postcss/tests/css-url-to-variables.test.js",
     "start": "vite --port 3000",
     "build": "vite build",
     "build:sdk": "./scripts/sdk/build.sh"
diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
new file mode 100644
index 00000000..a9370117
--- /dev/null
+++ b/scripts/postcss/css-url-to-variables.js
@@ -0,0 +1,54 @@
+const valueParser = require("postcss-value-parser");
+let counter = 0;
+const variableMap = new Map();
+const format = "icon-url"
+
+function extractUrl(decl) {
+    const value = decl.value;
+    const parsed = valueParser(value);
+    const variables = [];
+    parsed.walk(node => {
+        if (node.type !== "function" || node.value !== "url") {
+            return;
+        }
+        const urlStringNode = node.nodes[0];
+        const variableName = `--${format}-${counter++}`;
+        variableMap.set(variableName, `"${urlStringNode.value}"`);
+        const varNode = {
+            type: "function",
+            value: "var",
+            nodes: [{ type: "word", value: variableName }],
+        };
+        //replace the url-string node with this var-node
+        node.nodes[0] = varNode;
+    });
+    decl.assign({prop: decl.prop, value: parsed.toString()})
+    return variables;
+}
+
+function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
+    const newRule = new Rule({ selector: ":root", source: root.source });
+    // Add derived css variables to :root
+    variableMap.forEach((value, key) => {
+        const declaration = new Declaration({ prop: key, value });
+        newRule.append(declaration);
+    });
+    root.append(newRule);
+}
+
+/* *
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = (opts = {}) => {
+    return {
+        postcssPlugin: "postcss-url-to-variable",
+
+        Once(root, { Rule, Declaration }) {
+            root.walkDecls(decl => extractUrl(decl));
+            addResolvedVariablesToRootSelector(root, { Rule, Declaration });
+        },
+    };
+};
+
+module.exports.postcss = true;
+
diff --git a/scripts/postcss/test.js b/scripts/postcss/tests/css-compile-variables.test.js
similarity index 98%
rename from scripts/postcss/test.js
rename to scripts/postcss/tests/css-compile-variables.test.js
index cccb3ea7..945d5d4d 100644
--- a/scripts/postcss/test.js
+++ b/scripts/postcss/tests/css-compile-variables.test.js
@@ -16,8 +16,8 @@ limitations under the License.
 
 const offColor = require("off-color").offColor;
 const postcss = require("postcss");
-const plugin = require("./css-compile-variables");
-const derive = require("./color").derive;
+const plugin = require("../css-compile-variables");
+const derive = require("../color").derive;
 
 async function run(input, output, opts = {}, assert) {
     let result = await postcss([plugin({ ...opts, derive })]).process(input, { from: undefined, });
diff --git a/scripts/postcss/tests/css-url-to-variables.test.js b/scripts/postcss/tests/css-url-to-variables.test.js
new file mode 100644
index 00000000..36a38345
--- /dev/null
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@@ -0,0 +1,48 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const postcss = require("postcss");
+const plugin = require("../css-url-to-variables");
+
+async function run(input, output, opts = {}, assert) {
+    let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
+    assert.strictEqual(
+        result.css.replaceAll(/\s/g, ""),
+        output.replaceAll(/\s/g, "")
+    );
+    assert.strictEqual(result.warnings().length, 0);
+}
+
+module.exports.tests = function tests() {
+    return {
+        "url is replaced with variable": async (assert) => {
+            const inputCSS = `div {
+                background: no-repeat center/80% url("../img/image.png");
+            }`;
+            const outputCSS =
+            `div {
+                background: no-repeat center/80% url(var(--icon-url-0));
+            }`+
+                `
+            :root {
+                --icon-url-0: "../img/image.png";
+            }
+            `;
+            await run( inputCSS, outputCSS, { }, assert);
+        },
+    };
+};
+

From 3ae2b4dab4d2fe1a2cba37f1832541fb938909f3 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Thu, 24 Mar 2022 16:34:15 +0530
Subject: [PATCH 19/85] Use two url() in test

---
 scripts/postcss/tests/css-url-to-variables.test.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/scripts/postcss/tests/css-url-to-variables.test.js b/scripts/postcss/tests/css-url-to-variables.test.js
index 36a38345..645b1775 100644
--- a/scripts/postcss/tests/css-url-to-variables.test.js
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@@ -31,14 +31,21 @@ module.exports.tests = function tests() {
         "url is replaced with variable": async (assert) => {
             const inputCSS = `div {
                 background: no-repeat center/80% url("../img/image.png");
+            }
+            button {
+                background: url("/home/foo/bar/cool.jpg");
             }`;
             const outputCSS =
             `div {
                 background: no-repeat center/80% url(var(--icon-url-0));
+            }
+            button {
+                background: url(var(--icon-url-1));
             }`+
                 `
             :root {
                 --icon-url-0: "../img/image.png";
+                --icon-url-1: "/home/foo/bar/cool.jpg";
             }
             `;
             await run( inputCSS, outputCSS, { }, assert);

From cbff912476c19d9395bfd86f935bc9df80708fb4 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Thu, 24 Mar 2022 16:36:01 +0530
Subject: [PATCH 20/85] Improve code quality

---
 scripts/postcss/css-url-to-variables.js | 35 ++++++++++++++++++-------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index a9370117..a1a47971 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -1,7 +1,23 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 const valueParser = require("postcss-value-parser");
-let counter = 0;
-const variableMap = new Map();
-const format = "icon-url"
+let counter;
+const urlVariables = new Map();
+const idToPrepend = "icon-url";
 
 function extractUrl(decl) {
     const value = decl.value;
@@ -12,14 +28,14 @@ function extractUrl(decl) {
             return;
         }
         const urlStringNode = node.nodes[0];
-        const variableName = `--${format}-${counter++}`;
-        variableMap.set(variableName, `"${urlStringNode.value}"`);
+        const variableName = `${idToPrepend}-${counter++}`;
+        urlVariables.set(variableName, `"${urlStringNode.value}"`);
         const varNode = {
             type: "function",
             value: "var",
-            nodes: [{ type: "word", value: variableName }],
+            nodes: [{ type: "word", value: `--${variableName}` }],
         };
-        //replace the url-string node with this var-node
+        // replace the url-string node with this var-node
         node.nodes[0] = varNode;
     });
     decl.assign({prop: decl.prop, value: parsed.toString()})
@@ -29,8 +45,8 @@ function extractUrl(decl) {
 function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
     const newRule = new Rule({ selector: ":root", source: root.source });
     // Add derived css variables to :root
-    variableMap.forEach((value, key) => {
-        const declaration = new Declaration({ prop: key, value });
+    urlVariables.forEach((value, key) => {
+        const declaration = new Declaration({ prop: `--${key}`, value });
         newRule.append(declaration);
     });
     root.append(newRule);
@@ -40,6 +56,7 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
  * @type {import('postcss').PluginCreator}
  */
 module.exports = (opts = {}) => {
+    counter = 0;
     return {
         postcssPlugin: "postcss-url-to-variable",
 

From b59d6970fcdc91359097e07cc51df1f91ca02514 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Thu, 24 Mar 2022 16:52:26 +0530
Subject: [PATCH 21/85] Fix code duplication in tests

---
 scripts/postcss/tests/common.js               | 30 +++++++++++++++++++
 .../tests/css-compile-variables.test.js       | 16 +++-------
 .../tests/css-url-to-variables.test.js        | 11 +------
 3 files changed, 35 insertions(+), 22 deletions(-)
 create mode 100644 scripts/postcss/tests/common.js

diff --git a/scripts/postcss/tests/common.js b/scripts/postcss/tests/common.js
new file mode 100644
index 00000000..78ae847e
--- /dev/null
+++ b/scripts/postcss/tests/common.js
@@ -0,0 +1,30 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const postcss = require("postcss");
+
+module.exports.createTestRunner = function (plugin) {
+    return async function run(input, output, opts = {}, assert) {
+        let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
+        assert.strictEqual(
+            result.css.replaceAll(/\s/g, ""),
+            output.replaceAll(/\s/g, "")
+        );
+        assert.strictEqual(result.warnings().length, 0);
+    };
+}
+
+
diff --git a/scripts/postcss/tests/css-compile-variables.test.js b/scripts/postcss/tests/css-compile-variables.test.js
index 945d5d4d..e20e195f 100644
--- a/scripts/postcss/tests/css-compile-variables.test.js
+++ b/scripts/postcss/tests/css-compile-variables.test.js
@@ -18,15 +18,7 @@ const offColor = require("off-color").offColor;
 const postcss = require("postcss");
 const plugin = require("../css-compile-variables");
 const derive = require("../color").derive;
-
-async function run(input, output, opts = {}, assert) {
-    let result = await postcss([plugin({ ...opts, derive })]).process(input, { from: undefined, });
-    assert.strictEqual(
-        result.css.replaceAll(/\s/g, ""),
-        output.replaceAll(/\s/g, "")
-    );
-    assert.strictEqual(result.warnings().length, 0);
-}
+const run = require("./common").createTestRunner(plugin);
 
 module.exports.tests = function tests() {
     return {
@@ -46,7 +38,7 @@ module.exports.tests = function tests() {
                 --foo-color--lighter-50: ${transformedColor.hex()};
             }
             `;
-            await run( inputCSS, outputCSS, {}, assert);
+            await run( inputCSS, outputCSS, {derive}, assert);
         },
 
         "derived variables work with alias": async (assert) => {
@@ -66,7 +58,7 @@ module.exports.tests = function tests() {
                 --my-alias--lighter-15: ${aliasLighter};
             }
             `;
-            await run(inputCSS, outputCSS, { }, assert);
+            await run(inputCSS, outputCSS, {derive}, assert);
         },
 
         "derived variable throws if base not present in config": async (assert) => {
@@ -94,7 +86,7 @@ module.exports.tests = function tests() {
                 --foo-color--darker-20: ${transformedColor2.hex()};
             }
             `;
-            await run( inputCSS, outputCSS, { }, assert);
+            await run( inputCSS, outputCSS, {derive}, assert);
         },
 
         "multiple aliased-derived variable in single declaration is parsed correctly": async (assert) => {
diff --git a/scripts/postcss/tests/css-url-to-variables.test.js b/scripts/postcss/tests/css-url-to-variables.test.js
index 645b1775..0369995b 100644
--- a/scripts/postcss/tests/css-url-to-variables.test.js
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@@ -14,17 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const postcss = require("postcss");
 const plugin = require("../css-url-to-variables");
-
-async function run(input, output, opts = {}, assert) {
-    let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
-    assert.strictEqual(
-        result.css.replaceAll(/\s/g, ""),
-        output.replaceAll(/\s/g, "")
-    );
-    assert.strictEqual(result.warnings().length, 0);
-}
+const run = require("./common").createTestRunner(plugin);
 
 module.exports.tests = function tests() {
     return {

From 97ade0659cdcad78514c5dc42deacb11170ba3ca Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 11:40:21 +0530
Subject: [PATCH 22/85] Add explaining comment

---
 scripts/postcss/css-url-to-variables.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index a1a47971..07d524c9 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -15,6 +15,10 @@ limitations under the License.
 */
 
 const valueParser = require("postcss-value-parser");
+/**
+ * This plugin extracts content inside url() into css variables.
+ * The extracted css variables are added to the :root section.
+ */
 let counter;
 const urlVariables = new Map();
 const idToPrepend = "icon-url";

From 6b4bb762aa830b19e69b6160ec57169d73484cf2 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 11:40:35 +0530
Subject: [PATCH 23/85] Remove unused variable

---
 scripts/postcss/css-url-to-variables.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 07d524c9..79814cb2 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -26,7 +26,6 @@ const idToPrepend = "icon-url";
 function extractUrl(decl) {
     const value = decl.value;
     const parsed = valueParser(value);
-    const variables = [];
     parsed.walk(node => {
         if (node.type !== "function" || node.value !== "url") {
             return;
@@ -43,7 +42,6 @@ function extractUrl(decl) {
         node.nodes[0] = varNode;
     });
     decl.assign({prop: decl.prop, value: parsed.toString()})
-    return variables;
 }
 
 function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {

From 2d4ec5380e9cf578e2d0f186e0e895f50b130bf3 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 11:46:48 +0530
Subject: [PATCH 24/85] Initialize variables later

---
 scripts/postcss/css-url-to-variables.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 79814cb2..902e3e9d 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -15,12 +15,13 @@ limitations under the License.
 */
 
 const valueParser = require("postcss-value-parser");
+
 /**
  * This plugin extracts content inside url() into css variables.
  * The extracted css variables are added to the :root section.
  */
 let counter;
-const urlVariables = new Map();
+let urlVariables;
 const idToPrepend = "icon-url";
 
 function extractUrl(decl) {
@@ -58,6 +59,7 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
  * @type {import('postcss').PluginCreator}
  */
 module.exports = (opts = {}) => {
+    urlVariables = new Map();
     counter = 0;
     return {
         postcssPlugin: "postcss-url-to-variable",

From f07a3ea5b5b05ca6afd9ee4df6ecbb457f60127d Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 15:48:32 +0530
Subject: [PATCH 25/85] Remove css specific syntax from map

---
 scripts/postcss/css-url-to-variables.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 902e3e9d..dff72264 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -33,7 +33,7 @@ function extractUrl(decl) {
         }
         const urlStringNode = node.nodes[0];
         const variableName = `${idToPrepend}-${counter++}`;
-        urlVariables.set(variableName, `"${urlStringNode.value}"`);
+        urlVariables.set(variableName, urlStringNode.value);
         const varNode = {
             type: "function",
             value: "var",
@@ -49,7 +49,7 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
     const newRule = new Rule({ selector: ":root", source: root.source });
     // Add derived css variables to :root
     urlVariables.forEach((value, key) => {
-        const declaration = new Declaration({ prop: `--${key}`, value });
+        const declaration = new Declaration({ prop: `--${key}`, value: `"${value}"`});
         newRule.append(declaration);
     });
     root.append(newRule);

From 0a186dd11bc8fb7d14a76d7ad4a4efb753eb345b Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 16:06:40 +0530
Subject: [PATCH 26/85] Fix css logic

---
 scripts/postcss/css-url-to-variables.js            | 11 +++--------
 scripts/postcss/tests/css-url-to-variables.test.js |  8 ++++----
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index dff72264..34d21bcc 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -34,13 +34,8 @@ function extractUrl(decl) {
         const urlStringNode = node.nodes[0];
         const variableName = `${idToPrepend}-${counter++}`;
         urlVariables.set(variableName, urlStringNode.value);
-        const varNode = {
-            type: "function",
-            value: "var",
-            nodes: [{ type: "word", value: `--${variableName}` }],
-        };
-        // replace the url-string node with this var-node
-        node.nodes[0] = varNode;
+        node.value = "var";
+        node.nodes = [{ type: "word", value: `--${variableName}` }];
     });
     decl.assign({prop: decl.prop, value: parsed.toString()})
 }
@@ -49,7 +44,7 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
     const newRule = new Rule({ selector: ":root", source: root.source });
     // Add derived css variables to :root
     urlVariables.forEach((value, key) => {
-        const declaration = new Declaration({ prop: `--${key}`, value: `"${value}"`});
+        const declaration = new Declaration({ prop: `--${key}`, value: `url("${value}")`});
         newRule.append(declaration);
     });
     root.append(newRule);
diff --git a/scripts/postcss/tests/css-url-to-variables.test.js b/scripts/postcss/tests/css-url-to-variables.test.js
index 0369995b..fe4d4865 100644
--- a/scripts/postcss/tests/css-url-to-variables.test.js
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@@ -28,15 +28,15 @@ module.exports.tests = function tests() {
             }`;
             const outputCSS =
             `div {
-                background: no-repeat center/80% url(var(--icon-url-0));
+                background: no-repeat center/80% var(--icon-url-0);
             }
             button {
-                background: url(var(--icon-url-1));
+                background: var(--icon-url-1);
             }`+
                 `
             :root {
-                --icon-url-0: "../img/image.png";
-                --icon-url-1: "/home/foo/bar/cool.jpg";
+                --icon-url-0: url("../img/image.png");
+                --icon-url-1: url("/home/foo/bar/cool.jpg");
             }
             `;
             await run( inputCSS, outputCSS, { }, assert);

From b7a47ae901c148ced1f166aba0becda5bf7db596 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 16:08:15 +0530
Subject: [PATCH 27/85] Give function better name

---
 scripts/postcss/css-url-to-variables.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 34d21bcc..aff8eef9 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -24,7 +24,7 @@ let counter;
 let urlVariables;
 const idToPrepend = "icon-url";
 
-function extractUrl(decl) {
+function findAndReplaceUrl(decl) {
     const value = decl.value;
     const parsed = valueParser(value);
     parsed.walk(node => {
@@ -60,7 +60,7 @@ module.exports = (opts = {}) => {
         postcssPlugin: "postcss-url-to-variable",
 
         Once(root, { Rule, Declaration }) {
-            root.walkDecls(decl => extractUrl(decl));
+            root.walkDecls(decl => findAndReplaceUrl(decl));
             addResolvedVariablesToRootSelector(root, { Rule, Declaration });
         },
     };

From 1a50effd861fdf773578f231e3ee668a01fb1744 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 18:21:03 +0530
Subject: [PATCH 28/85] Only extract into variables if file is svg

---
 scripts/postcss/css-url-to-variables.js          | 11 ++++++++---
 .../postcss/tests/css-url-to-variables.test.js   | 16 +++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index aff8eef9..2a2937c0 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -31,9 +31,12 @@ function findAndReplaceUrl(decl) {
         if (node.type !== "function" || node.value !== "url") {
             return;
         }
-        const urlStringNode = node.nodes[0];
+        const url = node.nodes[0].value;
+        if (!url.match(/\.svg\?primary=.+/)) {
+            return;
+        }
         const variableName = `${idToPrepend}-${counter++}`;
-        urlVariables.set(variableName, urlStringNode.value);
+        urlVariables.set(variableName, url);
         node.value = "var";
         node.nodes = [{ type: "word", value: `--${variableName}` }];
     });
@@ -61,7 +64,9 @@ module.exports = (opts = {}) => {
 
         Once(root, { Rule, Declaration }) {
             root.walkDecls(decl => findAndReplaceUrl(decl));
-            addResolvedVariablesToRootSelector(root, { Rule, Declaration });
+            if (urlVariables.size) {
+                addResolvedVariablesToRootSelector(root, { Rule, Declaration });
+            }
         },
     };
 };
diff --git a/scripts/postcss/tests/css-url-to-variables.test.js b/scripts/postcss/tests/css-url-to-variables.test.js
index fe4d4865..cc7d9cd2 100644
--- a/scripts/postcss/tests/css-url-to-variables.test.js
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@@ -21,10 +21,10 @@ module.exports.tests = function tests() {
     return {
         "url is replaced with variable": async (assert) => {
             const inputCSS = `div {
-                background: no-repeat center/80% url("../img/image.png");
+                background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
             }
             button {
-                background: url("/home/foo/bar/cool.jpg");
+                background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
             }`;
             const outputCSS =
             `div {
@@ -35,12 +35,18 @@ module.exports.tests = function tests() {
             }`+
                 `
             :root {
-                --icon-url-0: url("../img/image.png");
-                --icon-url-1: url("/home/foo/bar/cool.jpg");
+                --icon-url-0: url("../img/image.svg?primary=main-color--darker-20");
+                --icon-url-1: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
             }
             `;
-            await run( inputCSS, outputCSS, { }, assert);
+            await run(inputCSS, outputCSS, { }, assert);
         },
+        "non svg urls without query params are not replaced": async (assert) => {
+            const inputCSS = `div {
+                background: no-repeat url("./img/foo/bar/image.png");
+            }`;
+            await run(inputCSS, inputCSS, {}, assert);
+        }
     };
 };
 

From cd4fce0c6ff94b53b58d820f16c8b46597535fe3 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sat, 2 Apr 2022 23:09:20 +0530
Subject: [PATCH 29/85] Populate shared map with collected icons

---
 scripts/postcss/css-url-to-variables.js        | 18 ++++++++++++++++++
 .../postcss/tests/css-url-to-variables.test.js | 16 ++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 2a2937c0..ddc65bed 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -53,6 +53,19 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
     root.append(newRule);
 }
 
+function populateMapWithDerivedVariables(map, cssFileLocation) {
+    const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
+    if (map.has(location)) {
+        /**
+         * This postcss plugin is going to run on all theme variants of a single theme.
+         * But we only really need to populate the map once since theme variants only differ
+         * by the values of the base-variables and we don't care about values here.
+         */
+        return;
+    }
+    map.set(location, { "icon": Object.fromEntries(urlVariables) });
+}
+
 /* *
  * @type {import('postcss').PluginCreator}
  */
@@ -67,6 +80,11 @@ module.exports = (opts = {}) => {
             if (urlVariables.size) {
                 addResolvedVariablesToRootSelector(root, { Rule, Declaration });
             }
+            if (opts.compiledVariables){
+                const cssFileLocation = root.source.input.from;
+                populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
+            }
+            console.log(opts.compiledVariables);
         },
     };
 };
diff --git a/scripts/postcss/tests/css-url-to-variables.test.js b/scripts/postcss/tests/css-url-to-variables.test.js
index cc7d9cd2..e298599d 100644
--- a/scripts/postcss/tests/css-url-to-variables.test.js
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 const plugin = require("../css-url-to-variables");
 const run = require("./common").createTestRunner(plugin);
+const postcss = require("postcss");
 
 module.exports.tests = function tests() {
     return {
@@ -46,6 +47,21 @@ module.exports.tests = function tests() {
                 background: no-repeat url("./img/foo/bar/image.png");
             }`;
             await run(inputCSS, inputCSS, {}, assert);
+        },
+        "map is populated with icons": async (assert) => {
+            const compiledVariables = new Map();
+            const inputCSS = `div {
+                background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
+            }
+            button {
+                background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
+            }`;
+            const expectedObject = {
+                "icon-url-0": "../img/image.svg?primary=main-color--darker-20",
+                "icon-url-1": "/home/foo/bar/cool.svg?primary=blue&secondary=green",
+            };
+            await postcss([plugin({compiledVariables})]).process(inputCSS, { from: "/foo/bar/test.css", });
+            assert.deepEqual(expectedObject, compiledVariables.get("/foo/bar")["icon"]);
         }
     };
 };

From 5e702171cebb11737a0128747bf855e3fe190b5f Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 3 Apr 2022 16:44:50 +0530
Subject: [PATCH 30/85] Remove console.log

---
 scripts/postcss/css-url-to-variables.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index ddc65bed..6c58b093 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -84,7 +84,6 @@ module.exports = (opts = {}) => {
                 const cssFileLocation = root.source.input.from;
                 populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
             }
-            console.log(opts.compiledVariables);
         },
     };
 };

From 545ff2ec32f8cd654f7676fe1c7052700dbbd3af Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 3 Apr 2022 16:46:26 +0530
Subject: [PATCH 31/85] Add explaining comment

---
 scripts/postcss/css-url-to-variables.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 6c58b093..7e9f5759 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -17,8 +17,8 @@ limitations under the License.
 const valueParser = require("postcss-value-parser");
 
 /**
- * This plugin extracts content inside url() into css variables.
- * The extracted css variables are added to the :root section.
+ * This plugin extracts content inside url() into css variables and adds the variables to the root section.
+ * This plugin is used in conjunction with css-url-processor plugin to colorize svg icons.
  */
 let counter;
 let urlVariables;

From 9a96112146a86655a04f2b3ba9b695870ce3984d Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 4 Apr 2022 12:02:59 +0530
Subject: [PATCH 32/85] Rename function name

---
 scripts/postcss/css-url-to-variables.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 7e9f5759..598ac973 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -53,7 +53,7 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
     root.append(newRule);
 }
 
-function populateMapWithDerivedVariables(map, cssFileLocation) {
+function populateMapWithIcons(map, cssFileLocation) {
     const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
     if (map.has(location)) {
         /**
@@ -82,7 +82,7 @@ module.exports = (opts = {}) => {
             }
             if (opts.compiledVariables){
                 const cssFileLocation = root.source.input.from;
-                populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
+                populateMapWithIcons(opts.compiledVariables, cssFileLocation);
             }
         },
     };

From 2dd655cd9ab9b4aef111061eff6ca1a3270b839b Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 4 Apr 2022 12:10:54 +0530
Subject: [PATCH 33/85] Check if icon is in shared var

---
 scripts/postcss/css-url-to-variables.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 598ac973..4480a2b8 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -55,7 +55,8 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
 
 function populateMapWithIcons(map, cssFileLocation) {
     const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
-    if (map.has(location)) {
+    const sharedObject = map.get(location);
+    if (sharedObject?.["icon"]) {
         /**
          * This postcss plugin is going to run on all theme variants of a single theme.
          * But we only really need to populate the map once since theme variants only differ
@@ -63,7 +64,7 @@ function populateMapWithIcons(map, cssFileLocation) {
          */
         return;
     }
-    map.set(location, { "icon": Object.fromEntries(urlVariables) });
+    map.set(location, { ...sharedObject, "icon": Object.fromEntries(urlVariables) });
 }
 
 /* *

From 6d724e27e70cd547e5d87cde06a8165d77765ad9 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 5 Apr 2022 15:26:00 +0530
Subject: [PATCH 34/85] No need to check if icons are already written

---
 scripts/postcss/css-url-to-variables.js            | 10 +---------
 scripts/postcss/tests/css-url-to-variables.test.js |  5 ++++-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index 4480a2b8..1d4666f4 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -56,15 +56,7 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
 function populateMapWithIcons(map, cssFileLocation) {
     const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
     const sharedObject = map.get(location);
-    if (sharedObject?.["icon"]) {
-        /**
-         * This postcss plugin is going to run on all theme variants of a single theme.
-         * But we only really need to populate the map once since theme variants only differ
-         * by the values of the base-variables and we don't care about values here.
-         */
-        return;
-    }
-    map.set(location, { ...sharedObject, "icon": Object.fromEntries(urlVariables) });
+    sharedObject["icon"] = Object.fromEntries(urlVariables);
 }
 
 /* *
diff --git a/scripts/postcss/tests/css-url-to-variables.test.js b/scripts/postcss/tests/css-url-to-variables.test.js
index e298599d..f406a38a 100644
--- a/scripts/postcss/tests/css-url-to-variables.test.js
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@@ -50,6 +50,7 @@ module.exports.tests = function tests() {
         },
         "map is populated with icons": async (assert) => {
             const compiledVariables = new Map();
+            compiledVariables.set("/foo/bar", { "derived-variables": ["background-color--darker-20", "accent-color--lighter-15"] });
             const inputCSS = `div {
                 background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
             }
@@ -61,7 +62,9 @@ module.exports.tests = function tests() {
                 "icon-url-1": "/home/foo/bar/cool.svg?primary=blue&secondary=green",
             };
             await postcss([plugin({compiledVariables})]).process(inputCSS, { from: "/foo/bar/test.css", });
-            assert.deepEqual(expectedObject, compiledVariables.get("/foo/bar")["icon"]);
+            const sharedVariable = compiledVariables.get("/foo/bar");
+            assert.deepEqual(["background-color--darker-20", "accent-color--lighter-15"], sharedVariable["derived-variables"]);
+            assert.deepEqual(expectedObject, sharedVariable["icon"]);
         }
     };
 };

From bfd73ae52a9b6cad00d7b9b4e34343495ede798d Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Thu, 7 Apr 2022 11:37:20 +0530
Subject: [PATCH 35/85] Pass derive function as argument

---
 scripts/postcss/tests/css-compile-variables.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/postcss/tests/css-compile-variables.test.js b/scripts/postcss/tests/css-compile-variables.test.js
index e20e195f..e40751db 100644
--- a/scripts/postcss/tests/css-compile-variables.test.js
+++ b/scripts/postcss/tests/css-compile-variables.test.js
@@ -108,7 +108,7 @@ module.exports.tests = function tests() {
                 --my-alias--darker-20: ${transformedColor2.hex()};
             }
             `;
-            await run( inputCSS, outputCSS, { }, assert);
+            await run( inputCSS, outputCSS, {derive}, assert);
         },
 
         "compiledVariables map is populated": async (assert) => {
@@ -150,7 +150,7 @@ module.exports.tests = function tests() {
                 --foo-color--darker-5: ${transformedColorDarker.hex()};
             }
             `;
-            await run( inputCSS, outputCSS, {}, assert);
+            await run( inputCSS, outputCSS, {derive}, assert);
         }
     };
 };

From 5d5eb93baac2d413e562f193a94304ffa6ae1c2f Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 13:35:21 +0530
Subject: [PATCH 36/85] Implement plugin

---
 .gitignore                           |  3 +-
 scripts/postcss/css-url-processor.js | 81 ++++++++++++++++++++++++++++
 scripts/postcss/svg-colorizer.js     | 42 +++++++++++++++
 3 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 scripts/postcss/css-url-processor.js
 create mode 100644 scripts/postcss/svg-colorizer.js

diff --git a/.gitignore b/.gitignore
index 7f6220cf..089600eb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,5 @@ bundle.js
 target
 lib
 *.tar.gz
-.eslintcache
\ No newline at end of file
+.eslintcache
+.tmp
diff --git a/scripts/postcss/css-url-processor.js b/scripts/postcss/css-url-processor.js
new file mode 100644
index 00000000..854b549f
--- /dev/null
+++ b/scripts/postcss/css-url-processor.js
@@ -0,0 +1,81 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const valueParser = require("postcss-value-parser");
+const  resolve = require("path").resolve;
+
+function colorsFromURL(url, colorVariables) {
+    const params = new URL(`file://${url}`).searchParams;
+    const primary = params.get("primary");
+    if (!primary) {
+        return null;
+    }
+    const secondary = params.get("secondary");
+    const primaryColor = colorVariables[primary];
+    const secondaryColor = colorVariables[secondary];
+    if (!primaryColor) {
+        throw new Error(`Variable ${primary} not found in resolved color variables!`);
+    }
+    if (!secondaryColor) {
+        throw new Error(`Variable ${secondary} not found in resolved color variables!`);
+    }
+    return [primaryColor, secondaryColor];
+}
+
+function processURL(decl, replacer, colorVariables) {
+    const value = decl.value;
+    const parsed = valueParser(value);
+    parsed.walk(async node => {
+        if (node.type !== "function" || node.value !== "url") {
+            return;
+        }
+        const urlStringNode = node.nodes[0];
+        const oldURL = urlStringNode.value;
+        const cssPath = decl.source?.input.file.replace(/[^/]*$/, "");
+        const oldURLAbsolute = resolve(cssPath, oldURL);
+        const colors  = colorsFromURL(oldURLAbsolute, colorVariables);
+        if (!colors) {
+            // If no primary color is provided via url params, then this url need not be handled.
+            return;
+        }
+        const newURL = replacer(oldURLAbsolute.replace(/\?.+/, ""), ...colors);
+        if (!newURL) {
+            throw new Error("Replacer failed to produce a replacement URL!");
+        }
+        urlStringNode.value = newURL;
+    });
+    decl.assign({prop: decl.prop, value: parsed.toString()})
+}
+
+/* *
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = (opts = {}) => {
+    return {
+        postcssPlugin: "postcss-url-to-variable",
+
+        Once(root) {
+            /*
+            Go through each declaration and if it contains an URL, replace the url with the result
+            of running replacer(url)
+            */
+            root.walkDecls(decl => processURL(decl, opts.replacer, opts.colors));
+        },
+    };
+};
+
+module.exports.postcss = true;
+
diff --git a/scripts/postcss/svg-colorizer.js b/scripts/postcss/svg-colorizer.js
new file mode 100644
index 00000000..1a659e6a
--- /dev/null
+++ b/scripts/postcss/svg-colorizer.js
@@ -0,0 +1,42 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const fs = require("fs");
+const path = require("path");
+/**
+ * Builds a new svg with the colors replaced and returns its location.
+ * @param {string} svgLocation The location of the input svg file
+ * @param {string} primaryColor Primary color for the new svg
+ * @param {string} secondaryColor Secondary color for the new svg
+ */
+module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondaryColor) {
+    const svgCode = fs.readFileSync(svgLocation, { encoding: "utf-8"});
+    let coloredSVGCode = svgCode.replaceAll("#ff00ff", primaryColor);
+    coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
+    const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1];
+    const outputPath = path.resolve(__dirname, "../../.tmp");
+    try {
+       fs.mkdirSync(outputPath);
+    }
+    catch (e) {
+        if (e.code !== "EEXIST") {
+            throw e;
+        }
+    }
+    const outputFile = `${outputPath}/${fileName}`;
+    fs.writeFileSync(outputFile, coloredSVGCode);
+    return outputFile;
+}

From 8c6400ab2c16c232223c21e471213863a8622376 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 14:11:09 +0530
Subject: [PATCH 37/85] utf-8 --> utf8

---
 scripts/postcss/svg-colorizer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/postcss/svg-colorizer.js b/scripts/postcss/svg-colorizer.js
index 1a659e6a..1895cfa0 100644
--- a/scripts/postcss/svg-colorizer.js
+++ b/scripts/postcss/svg-colorizer.js
@@ -23,7 +23,7 @@ const path = require("path");
  * @param {string} secondaryColor Secondary color for the new svg
  */
 module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondaryColor) {
-    const svgCode = fs.readFileSync(svgLocation, { encoding: "utf-8"});
+    const svgCode = fs.readFileSync(svgLocation, { encoding: "utf8"});
     let coloredSVGCode = svgCode.replaceAll("#ff00ff", primaryColor);
     coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
     const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1];

From 7046fcc7c74aef65256db3549cf4145c266cd077 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 27 Mar 2022 20:00:43 +0530
Subject: [PATCH 38/85] Find list of resolved colors from result

and also throw only if secondary color was provided
---
 scripts/postcss/css-url-processor.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/scripts/postcss/css-url-processor.js b/scripts/postcss/css-url-processor.js
index 854b549f..d663ed0a 100644
--- a/scripts/postcss/css-url-processor.js
+++ b/scripts/postcss/css-url-processor.js
@@ -17,25 +17,25 @@ limitations under the License.
 const valueParser = require("postcss-value-parser");
 const  resolve = require("path").resolve;
 
-function colorsFromURL(url, colorVariables) {
+function colorsFromURL(url, colorMap) {
     const params = new URL(`file://${url}`).searchParams;
     const primary = params.get("primary");
     if (!primary) {
         return null;
     }
     const secondary = params.get("secondary");
-    const primaryColor = colorVariables[primary];
-    const secondaryColor = colorVariables[secondary];
+    const primaryColor = colorMap.get(primary);
+    const secondaryColor = colorMap.get(secondary);
     if (!primaryColor) {
         throw new Error(`Variable ${primary} not found in resolved color variables!`);
     }
-    if (!secondaryColor) {
+    if (secondary && !secondaryColor) {
         throw new Error(`Variable ${secondary} not found in resolved color variables!`);
     }
     return [primaryColor, secondaryColor];
 }
 
-function processURL(decl, replacer, colorVariables) {
+function processURL(decl, replacer, colorMap) {
     const value = decl.value;
     const parsed = valueParser(value);
     parsed.walk(async node => {
@@ -46,7 +46,7 @@ function processURL(decl, replacer, colorVariables) {
         const oldURL = urlStringNode.value;
         const cssPath = decl.source?.input.file.replace(/[^/]*$/, "");
         const oldURLAbsolute = resolve(cssPath, oldURL);
-        const colors  = colorsFromURL(oldURLAbsolute, colorVariables);
+        const colors  = colorsFromURL(oldURLAbsolute, colorMap);
         if (!colors) {
             // If no primary color is provided via url params, then this url need not be handled.
             return;
@@ -67,15 +67,22 @@ module.exports = (opts = {}) => {
     return {
         postcssPlugin: "postcss-url-to-variable",
 
-        Once(root) {
+        Once(root, {result}) {
+            /*
+            postcss-compile-variables should have sent the list of resolved colours down via results
+            */
+            const {colorMap} = result.messages.find(m => m.type === "resolved-variable-map");
+            if (!colorMap) {
+                throw new Error("Postcss results do not contain resolved colors!");
+            }
             /*
             Go through each declaration and if it contains an URL, replace the url with the result
             of running replacer(url)
             */
-            root.walkDecls(decl => processURL(decl, opts.replacer, opts.colors));
+            root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
+            console.log("result", colorMap);
         },
     };
 };
 
 module.exports.postcss = true;
-

From f2b4f2e069096a10cc487ff55eb43c4323e4d8c4 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 27 Mar 2022 20:35:10 +0530
Subject: [PATCH 39/85] Remove console.log

---
 scripts/postcss/css-url-processor.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/postcss/css-url-processor.js b/scripts/postcss/css-url-processor.js
index d663ed0a..1a0e4fdf 100644
--- a/scripts/postcss/css-url-processor.js
+++ b/scripts/postcss/css-url-processor.js
@@ -80,7 +80,6 @@ module.exports = (opts = {}) => {
             of running replacer(url)
             */
             root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
-            console.log("result", colorMap);
         },
     };
 };

From c0fb8a2c77bd0d446b796c0632210730b915ffb3 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 6 Apr 2022 11:02:09 +0530
Subject: [PATCH 40/85] Throw error if no replacements were made

---
 scripts/postcss/svg-colorizer.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/postcss/svg-colorizer.js b/scripts/postcss/svg-colorizer.js
index 1895cfa0..7d527ddb 100644
--- a/scripts/postcss/svg-colorizer.js
+++ b/scripts/postcss/svg-colorizer.js
@@ -26,6 +26,9 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
     const svgCode = fs.readFileSync(svgLocation, { encoding: "utf8"});
     let coloredSVGCode = svgCode.replaceAll("#ff00ff", primaryColor);
     coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
+    if (svgCode === coloredSVGCode) {
+        throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
+    }
     const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1];
     const outputPath = path.resolve(__dirname, "../../.tmp");
     try {

From 9755062563fb4697812ee5a55b99181615ecf3bf Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Thu, 7 Apr 2022 10:33:12 +0200
Subject: [PATCH 41/85] fix error thrown during request when response code is
 not used

---
 src/matrix/net/RequestScheduler.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/matrix/net/RequestScheduler.ts b/src/matrix/net/RequestScheduler.ts
index dc5c501b..c6e546a1 100644
--- a/src/matrix/net/RequestScheduler.ts
+++ b/src/matrix/net/RequestScheduler.ts
@@ -27,8 +27,8 @@ class Request implements IHomeServerRequest {
     public readonly args: any[];
     private responseResolve: (result: any) => void;
     public responseReject: (error: Error) => void;
-    private responseCodeResolve: (result: any) => void;
-    private responseCodeReject: (result: any) => void;
+    private responseCodeResolve?: (result: any) => void;
+    private responseCodeReject?: (result: any) => void;
     private _requestResult?: IHomeServerRequest;
     private readonly _responsePromise: Promise<any>;
     private _responseCodePromise: Promise<any>;
@@ -73,7 +73,7 @@ class Request implements IHomeServerRequest {
         const response = await this._requestResult?.response();
         this.responseResolve(response);
         const responseCode = await this._requestResult?.responseCode();
-        this.responseCodeResolve(responseCode);
+        this.responseCodeResolve?.(responseCode);
     }
 
     get requestResult() {

From 6aa79cf6e22d6c465fc2c9a1644d33c38ebed948 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Thu, 7 Apr 2022 17:19:43 +0200
Subject: [PATCH 42/85] allow to inject custom tile view creator fn into
 timeline view

---
 src/lib.ts                                    |  2 ++
 src/platform/web/ui/session/room/RoomView.js  |  3 ++-
 .../web/ui/session/room/TimelineView.ts       | 23 ++++++++++++-------
 src/platform/web/ui/session/room/common.ts    | 12 ++++------
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/lib.ts b/src/lib.ts
index a0ada84f..2634b0c0 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -27,6 +27,8 @@ export {RoomViewModel} from "./domain/session/room/RoomViewModel.js";
 export {RoomView} from "./platform/web/ui/session/room/RoomView.js";
 export {TimelineViewModel} from "./domain/session/room/timeline/TimelineViewModel.js";
 export {TimelineView} from "./platform/web/ui/session/room/TimelineView";
+export {viewClassForEntry} from "./platform/web/ui/session/room/common";
+export type {TileViewConstructor, ViewClassForEntryFn} from "./platform/web/ui/session/room/TimelineView";
 export {Navigation} from "./domain/navigation/Navigation.js";
 export {ComposerViewModel} from "./domain/session/room/ComposerViewModel.js";
 export {MessageComposer} from "./platform/web/ui/session/room/MessageComposer.js";
diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js
index c172766a..2190f1f1 100644
--- a/src/platform/web/ui/session/room/RoomView.js
+++ b/src/platform/web/ui/session/room/RoomView.js
@@ -23,6 +23,7 @@ import {TimelineLoadingView} from "./TimelineLoadingView.js";
 import {MessageComposer} from "./MessageComposer.js";
 import {RoomArchivedView} from "./RoomArchivedView.js";
 import {AvatarView} from "../../AvatarView.js";
+import {viewClassForEntry} from "./common";
 
 export class RoomView extends TemplateView {
     constructor(options) {
@@ -54,7 +55,7 @@ export class RoomView extends TemplateView {
                 t.div({className: "RoomView_error"}, vm => vm.error),
                 t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
                     return timelineViewModel ?
-                        new TimelineView(timelineViewModel) :
+                        new TimelineView(timelineViewModel, viewClassForEntry) :
                         new TimelineLoadingView(vm);    // vm is just needed for i18n
                 }),
                 t.view(bottomView),
diff --git a/src/platform/web/ui/session/room/TimelineView.ts b/src/platform/web/ui/session/room/TimelineView.ts
index 936b8c7c..91ff59d5 100644
--- a/src/platform/web/ui/session/room/TimelineView.ts
+++ b/src/platform/web/ui/session/room/TimelineView.ts
@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type {TileView} from "./common";
-import {viewClassForEntry} from "./common";
 import {ListView} from "../../general/ListView";
+import type {IView} from "../../general/types";
 import {TemplateView, Builder} from "../../general/TemplateView";
 import {IObservableValue} from "../../general/BaseUpdateView";
 import {MissingAttachmentView} from "./timeline/MissingAttachmentView.js";
@@ -25,6 +24,12 @@ import {RedactedView} from "./timeline/RedactedView.js";
 import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js";
 import {BaseObservableList as ObservableList} from "../../../../../observable/list/BaseObservableList";
 
+export interface TileView extends IView {
+    readonly value: SimpleTile;
+} 
+export type TileViewConstructor = new (tile: SimpleTile) => TileView;
+export type ViewClassForEntryFn = (tile: SimpleTile) => TileViewConstructor;
+
 //import {TimelineViewModel} from "../../../../../domain/session/room/timeline/TimelineViewModel.js";
 export interface TimelineViewModel extends IObservableValue {
     showJumpDown: boolean;
@@ -55,13 +60,17 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
     private tilesView?: TilesListView;
     private resizeObserver?: ResizeObserver;
 
+    constructor(vm: TimelineViewModel, private readonly viewClassForEntry: ViewClassForEntryFn) {
+        super(vm);
+    }
+
     render(t: Builder<TimelineViewModel>, vm: TimelineViewModel) {
         // assume this view will be mounted in the parent DOM straight away
         requestAnimationFrame(() => {
             // do initial scroll positioning
             this.restoreScrollPosition();
         });
-        this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition());
+        this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition(), this.viewClassForEntry);
         const root = t.div({className: "Timeline"}, [
             t.div({
                 className: "Timeline_scroller bottom-aligned-scroll",
@@ -174,16 +183,14 @@ class TilesListView extends ListView<SimpleTile, TileView> {
 
     private onChanged: () => void;
 
-    constructor(tiles: ObservableList<SimpleTile>, onChanged: () => void) {
+    constructor(tiles: ObservableList<SimpleTile>, onChanged: () => void, private readonly viewClassForEntry: ViewClassForEntryFn) {
         const options = {
             list: tiles,
             onItemClick: (tileView, evt) => tileView.onClick(evt),
         };
         super(options, entry => {
             const View = viewClassForEntry(entry);
-            if (View) {
-                return new View(entry);
-            }
+            return new View(entry);
         });
         this.onChanged = onChanged;
     }
@@ -195,7 +202,7 @@ class TilesListView extends ListView<SimpleTile, TileView> {
 
     onUpdate(index: number, value: SimpleTile, param: any) {
         if (param === "shape") {
-            const ExpectedClass = viewClassForEntry(value);
+            const ExpectedClass = this.viewClassForEntry(value);
             const child = this.getChildInstanceByIndex(index);
             if (!ExpectedClass || !(child instanceof ExpectedClass)) {
                 // shape was updated, so we need to recreate the tile view,
diff --git a/src/platform/web/ui/session/room/common.ts b/src/platform/web/ui/session/room/common.ts
index 5048211a..87997cc4 100644
--- a/src/platform/web/ui/session/room/common.ts
+++ b/src/platform/web/ui/session/room/common.ts
@@ -24,14 +24,10 @@ import {AnnouncementView} from "./timeline/AnnouncementView.js";
 import {RedactedView} from "./timeline/RedactedView.js";
 import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js";
 import {GapView} from "./timeline/GapView.js";
+import type {TileViewConstructor, ViewClassForEntryFn} from "./TimelineView";
 
-export type TileView = GapView | AnnouncementView | TextMessageView |
-    ImageView | VideoView | FileView | LocationView | MissingAttachmentView | RedactedView;
-
-// TODO: this is what works for a ctor but doesn't actually check we constrain the returned ctors to the types above
-type TileViewConstructor = (this: TileView, SimpleTile) => void;
-export function viewClassForEntry(entry: SimpleTile): TileViewConstructor | undefined {
-    switch (entry.shape) {
+export function viewClassForEntry(vm: SimpleTile): TileViewConstructor {
+    switch (vm.shape) {
         case "gap":
             return GapView;
         case "announcement":
@@ -51,5 +47,7 @@ export function viewClassForEntry(entry: SimpleTile): TileViewConstructor | unde
             return MissingAttachmentView;
         case "redacted":
             return RedactedView;
+        default:
+            throw new Error(`Tiles of shape "${vm.shape}" are not supported, check the tilesCreator function in the view model`);
     }
 }

From 220f35ae039bc9392391c5228dfb43fb4f803a9f Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 11:52:21 +0200
Subject: [PATCH 43/85] fix typescript error

---
 src/platform/web/ui/session/room/TimelineView.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/platform/web/ui/session/room/TimelineView.ts b/src/platform/web/ui/session/room/TimelineView.ts
index 91ff59d5..0c893847 100644
--- a/src/platform/web/ui/session/room/TimelineView.ts
+++ b/src/platform/web/ui/session/room/TimelineView.ts
@@ -26,6 +26,7 @@ import {BaseObservableList as ObservableList} from "../../../../../observable/li
 
 export interface TileView extends IView {
     readonly value: SimpleTile;
+    onClick(event: UIEvent);
 } 
 export type TileViewConstructor = new (tile: SimpleTile) => TileView;
 export type ViewClassForEntryFn = (tile: SimpleTile) => TileViewConstructor;
@@ -184,11 +185,10 @@ class TilesListView extends ListView<SimpleTile, TileView> {
     private onChanged: () => void;
 
     constructor(tiles: ObservableList<SimpleTile>, onChanged: () => void, private readonly viewClassForEntry: ViewClassForEntryFn) {
-        const options = {
+        super({
             list: tiles,
             onItemClick: (tileView, evt) => tileView.onClick(evt),
-        };
-        super(options, entry => {
+        }, entry => {
             const View = viewClassForEntry(entry);
             return new View(entry);
         });

From 5445db2a42719d809f65d49f74ecb923dbfdad0d Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 12:52:30 +0200
Subject: [PATCH 44/85] allow injecting the tilesCreator from the
 Root/Session/RoomViewModel

this changes the API slightly to be more future-proof,
as we'll expose it in the SDK now.

The function now returns a SimpleTile constructor, rather than an
instance. This allows us to test if an entry would render in the
timeline without creating a tile, which is something we might want in
the matrix layer later on.

The function is now called tileClassForEntry, analogue to what we
do in TimelineView.
---
 src/domain/session/room/RoomViewModel.js      | 20 ++--
 .../room/timeline/ReactionsViewModel.js       |  2 +-
 .../session/room/timeline/TilesCollection.js  | 31 ++++--
 .../room/timeline/TimelineViewModel.js        |  4 +-
 .../room/timeline/tiles/BaseMediaTile.js      |  4 +-
 .../room/timeline/tiles/BaseMessageTile.js    | 22 +++--
 .../room/timeline/tiles/BaseTextTile.js       |  4 +-
 .../room/timeline/tiles/EncryptedEventTile.js |  4 +-
 .../session/room/timeline/tiles/FileTile.js   |  4 +-
 .../session/room/timeline/tiles/GapTile.js    | 10 +-
 .../session/room/timeline/tiles/ImageTile.js  |  4 +-
 .../room/timeline/tiles/RoomMemberTile.js     | 14 +--
 .../session/room/timeline/tiles/SimpleTile.js |  4 +-
 .../session/room/timeline/tiles/index.ts      | 94 +++++++++++++++++++
 .../session/room/timeline/tilesCreator.js     | 81 ----------------
 src/platform/web/main.js                      |  3 +
 src/platform/web/ui/session/room/common.ts    |  2 +-
 17 files changed, 174 insertions(+), 133 deletions(-)
 create mode 100644 src/domain/session/room/timeline/tiles/index.ts
 delete mode 100644 src/domain/session/room/timeline/tilesCreator.js

diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js
index 71060728..9c3f468e 100644
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@@ -18,17 +18,17 @@ limitations under the License.
 import {TimelineViewModel} from "./timeline/TimelineViewModel.js";
 import {ComposerViewModel} from "./ComposerViewModel.js"
 import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
-import {tilesCreator} from "./timeline/tilesCreator.js";
 import {ViewModel} from "../../ViewModel";
 import {imageToInfo} from "../common.js";
 
 export class RoomViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {room} = options;
+        const {room, tileClassForEntry} = options;
         this._room = room;
         this._timelineVM = null;
-        this._tilesCreator = null;
+        this._tileClassForEntry = tileClassForEntry;
+        this._tileOptions = undefined;
         this._onRoomChange = this._onRoomChange.bind(this);
         this._timelineError = null;
         this._sendError = null;
@@ -46,12 +46,13 @@ export class RoomViewModel extends ViewModel {
         this._room.on("change", this._onRoomChange);
         try {
             const timeline = await this._room.openTimeline();
-            this._tilesCreator = tilesCreator(this.childOptions({
+            this._tileOptions = this.childOptions({
                 roomVM: this,
                 timeline,
-            }));
+                tileClassForEntry: this._tileClassForEntry,
+            });
             this._timelineVM = this.track(new TimelineViewModel(this.childOptions({
-                tilesCreator: this._tilesCreator,
+                tileOptions: this._tileOptions,
                 timeline,
             })));
             this.emitChange("timelineViewModel");
@@ -161,7 +162,12 @@ export class RoomViewModel extends ViewModel {
     }
 
     _createTile(entry) {
-        return this._tilesCreator(entry);
+        if (this._tileOptions) {
+            const Tile = this._tileOptions.tileClassForEntry(entry);
+            if (Tile) {
+                return new Tile(entry, this._tileOptions);
+            }
+        }
     }
     
     async _sendMessage(message, replyingTo) {
diff --git a/src/domain/session/room/timeline/ReactionsViewModel.js b/src/domain/session/room/timeline/ReactionsViewModel.js
index 4f366af0..1977b6f4 100644
--- a/src/domain/session/room/timeline/ReactionsViewModel.js
+++ b/src/domain/session/room/timeline/ReactionsViewModel.js
@@ -222,7 +222,7 @@ export function tests() {
         };
         const tiles = new MappedList(timeline.entries, entry => {
             if (entry.eventType === "m.room.message") {
-                return new BaseMessageTile({entry, roomVM: {room}, timeline, platform: {logger}});
+                return new BaseMessageTile(entry, {roomVM: {room}, timeline, platform: {logger}});
             }
             return null;
         }, (tile, params, entry) => tile?.updateEntry(entry, params, function () {}));
diff --git a/src/domain/session/room/timeline/TilesCollection.js b/src/domain/session/room/timeline/TilesCollection.js
index 33ae4472..75af5b09 100644
--- a/src/domain/session/room/timeline/TilesCollection.js
+++ b/src/domain/session/room/timeline/TilesCollection.js
@@ -18,20 +18,27 @@ import {BaseObservableList} from "../../../../observable/list/BaseObservableList
 import {sortedIndex} from "../../../../utils/sortedIndex";
 
 // maps 1..n entries to 0..1 tile. Entries are what is stored in the timeline, either an event or fragmentboundary
-// for now, tileCreator should be stable in whether it returns a tile or not.
+// for now, tileClassForEntry should be stable in whether it returns a tile or not.
 // e.g. the decision to create a tile or not should be based on properties
 // not updated later on (e.g. event type)
 // also see big comment in onUpdate
 export class TilesCollection extends BaseObservableList {
-    constructor(entries, tileCreator) {
+    constructor(entries, tileOptions) {
         super();
         this._entries = entries;
         this._tiles = null;
         this._entrySubscription = null;
-        this._tileCreator = tileCreator;
+        this._tileOptions = tileOptions;
         this._emitSpontanousUpdate = this._emitSpontanousUpdate.bind(this);
     }
 
+    _createTile(entry) {
+        const Tile = this._tileOptions.tileClassForEntry(entry);
+        if (Tile) {
+            return new Tile(entry, this._tileOptions);
+        }
+    }
+
     _emitSpontanousUpdate(tile, params) {
         const entry = tile.lowerEntry;
         const tileIdx = this._findTileIdx(entry);
@@ -48,7 +55,7 @@ export class TilesCollection extends BaseObservableList {
         let currentTile = null;
         for (let entry of this._entries) {
             if (!currentTile || !currentTile.tryIncludeEntry(entry)) {
-                currentTile = this._tileCreator(entry);
+                currentTile = this._createTile(entry);
                 if (currentTile) {
                     this._tiles.push(currentTile);
                 }
@@ -121,7 +128,7 @@ export class TilesCollection extends BaseObservableList {
             return;
         }
 
-        const newTile = this._tileCreator(entry);
+        const newTile = this._createTile(entry);
         if (newTile) {
             if (prevTile) {
                 prevTile.updateNextSibling(newTile);
@@ -150,9 +157,9 @@ export class TilesCollection extends BaseObservableList {
         const tileIdx = this._findTileIdx(entry);
         const tile = this._findTileAtIdx(entry, tileIdx);
         if (tile) {
-            const action = tile.updateEntry(entry, params, this._tileCreator);
+            const action = tile.updateEntry(entry, params);
             if (action.shouldReplace) {
-                const newTile = this._tileCreator(entry);
+                const newTile = this._createTile(entry);
                 if (newTile) {
                     this._replaceTile(tileIdx, tile, newTile, action.updateParams);
                     newTile.setUpdateEmit(this._emitSpontanousUpdate);
@@ -303,7 +310,10 @@ export function tests() {
                 }
             }
             const entries = new ObservableArray([{n: 5}, {n: 10}]);
-            const tiles = new TilesCollection(entries, entry => new UpdateOnSiblingTile(entry));
+            const tileOptions = {
+                tileClassForEntry: entry => UpdateOnSiblingTile,
+            };
+            const tiles = new TilesCollection(entries, tileOptions);
             let receivedAdd = false;
             tiles.subscribe({
                 onAdd(idx, tile) {
@@ -326,7 +336,10 @@ export function tests() {
                 }
             }
             const entries = new ObservableArray([{n: 5}, {n: 10}, {n: 15}]);
-            const tiles = new TilesCollection(entries, entry => new UpdateOnSiblingTile(entry));
+            const tileOptions = {
+                tileClassForEntry: entry => UpdateOnSiblingTile,
+            };
+            const tiles = new TilesCollection(entries, tileOptions);
             const events = [];
             tiles.subscribe({
                 onUpdate(idx, tile) {
diff --git a/src/domain/session/room/timeline/TimelineViewModel.js b/src/domain/session/room/timeline/TimelineViewModel.js
index 2408146d..cf36fce4 100644
--- a/src/domain/session/room/timeline/TimelineViewModel.js
+++ b/src/domain/session/room/timeline/TimelineViewModel.js
@@ -37,9 +37,9 @@ import {ViewModel} from "../../../ViewModel";
 export class TimelineViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {timeline, tilesCreator} = options;
+        const {timeline, tileOptions} = options;
         this._timeline = this.track(timeline);
-        this._tiles = new TilesCollection(timeline.entries, tilesCreator);
+        this._tiles = new TilesCollection(timeline.entries, tileOptions);
         this._startTile = null;
         this._endTile = null;
         this._topLoadingPromise = null;
diff --git a/src/domain/session/room/timeline/tiles/BaseMediaTile.js b/src/domain/session/room/timeline/tiles/BaseMediaTile.js
index a927d766..0ba5b9a9 100644
--- a/src/domain/session/room/timeline/tiles/BaseMediaTile.js
+++ b/src/domain/session/room/timeline/tiles/BaseMediaTile.js
@@ -21,8 +21,8 @@ const MAX_HEIGHT = 300;
 const MAX_WIDTH = 400;
 
 export class BaseMediaTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._decryptedThumbnail = null;
         this._decryptedFile = null;
         this._isVisible = false;
diff --git a/src/domain/session/room/timeline/tiles/BaseMessageTile.js b/src/domain/session/room/timeline/tiles/BaseMessageTile.js
index 3385a587..03cc16ba 100644
--- a/src/domain/session/room/timeline/tiles/BaseMessageTile.js
+++ b/src/domain/session/room/timeline/tiles/BaseMessageTile.js
@@ -19,8 +19,8 @@ import {ReactionsViewModel} from "../ReactionsViewModel.js";
 import {getIdentifierColorNumber, avatarInitials, getAvatarHttpUrl} from "../../../../avatar";
 
 export class BaseMessageTile extends SimpleTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : null;
         this._isContinuation = false;
         this._reactions = null;
@@ -28,7 +28,7 @@ export class BaseMessageTile extends SimpleTile {
         if (this._entry.annotations || this._entry.pendingAnnotations) {
             this._updateReactions();
         }
-        this._updateReplyTileIfNeeded(options.tilesCreator, undefined);
+        this._updateReplyTileIfNeeded(undefined);
     }
 
     notifyVisible() {
@@ -122,23 +122,27 @@ export class BaseMessageTile extends SimpleTile {
         }
     }
 
-    updateEntry(entry, param, tilesCreator) {
-        const action = super.updateEntry(entry, param, tilesCreator);
+    updateEntry(entry, param) {
+        const action = super.updateEntry(entry, param);
         if (action.shouldUpdate) {
             this._updateReactions();
         }
-        this._updateReplyTileIfNeeded(tilesCreator, param);
+        this._updateReplyTileIfNeeded(param);
         return action;
     }
 
-    _updateReplyTileIfNeeded(tilesCreator, param) {
+    _updateReplyTileIfNeeded(param) {
         const replyEntry = this._entry.contextEntry;
         if (replyEntry) {
             // this is an update to contextEntry used for replyPreview
-            const action = this._replyTile?.updateEntry(replyEntry, param, tilesCreator);
+            const action = this._replyTile?.updateEntry(replyEntry, param);
             if (action?.shouldReplace || !this._replyTile) {
                 this.disposeTracked(this._replyTile);
-                this._replyTile = tilesCreator(replyEntry);
+                const tileClassForEntry = this._options.tileClassForEntry;
+                const ReplyTile = tileClassForEntry(replyEntry);
+                if (ReplyTile) {
+                    this._replyTile = new ReplyTile(replyEntry, this._options);
+                }
             }
             if(action?.shouldUpdate) {
                 this._replyTile?.emitChange();
diff --git a/src/domain/session/room/timeline/tiles/BaseTextTile.js b/src/domain/session/room/timeline/tiles/BaseTextTile.js
index 164443e3..8e78c95f 100644
--- a/src/domain/session/room/timeline/tiles/BaseTextTile.js
+++ b/src/domain/session/room/timeline/tiles/BaseTextTile.js
@@ -21,8 +21,8 @@ import {createEnum} from "../../../../../utils/enum";
 export const BodyFormat = createEnum("Plain", "Html");
 
 export class BaseTextTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._messageBody = null;
         this._format = null
     }
diff --git a/src/domain/session/room/timeline/tiles/EncryptedEventTile.js b/src/domain/session/room/timeline/tiles/EncryptedEventTile.js
index 50f507eb..b96e2d85 100644
--- a/src/domain/session/room/timeline/tiles/EncryptedEventTile.js
+++ b/src/domain/session/room/timeline/tiles/EncryptedEventTile.js
@@ -18,8 +18,8 @@ import {BaseTextTile} from "./BaseTextTile.js";
 import {UpdateAction} from "../UpdateAction.js";
 
 export class EncryptedEventTile extends BaseTextTile {
-    updateEntry(entry, params, tilesCreator) {
-        const parentResult = super.updateEntry(entry, params, tilesCreator);
+    updateEntry(entry, params) {
+        const parentResult = super.updateEntry(entry, params);
         // event got decrypted, recreate the tile and replace this one with it
         if (entry.eventType !== "m.room.encrypted") {
             // the "shape" parameter trigger tile recreation in TimelineView
diff --git a/src/domain/session/room/timeline/tiles/FileTile.js b/src/domain/session/room/timeline/tiles/FileTile.js
index 1007d28c..3f7b539b 100644
--- a/src/domain/session/room/timeline/tiles/FileTile.js
+++ b/src/domain/session/room/timeline/tiles/FileTile.js
@@ -20,8 +20,8 @@ import {formatSize} from "../../../../../utils/formatSize";
 import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";
 
 export class FileTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._downloadError = null;
         this._downloading = false;
     }
diff --git a/src/domain/session/room/timeline/tiles/GapTile.js b/src/domain/session/room/timeline/tiles/GapTile.js
index df0cedd9..6caa4b9b 100644
--- a/src/domain/session/room/timeline/tiles/GapTile.js
+++ b/src/domain/session/room/timeline/tiles/GapTile.js
@@ -18,8 +18,8 @@ import {SimpleTile} from "./SimpleTile.js";
 import {UpdateAction} from "../UpdateAction.js";
 
 export class GapTile extends SimpleTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._loading = false;
         this._error = null;
         this._isAtTop = true;
@@ -81,8 +81,8 @@ export class GapTile extends SimpleTile {
         this._siblingChanged = true;
     }
 
-    updateEntry(entry, params, tilesCreator) {
-        super.updateEntry(entry, params, tilesCreator);
+    updateEntry(entry, params) {
+        super.updateEntry(entry, params);
         if (!entry.isGap) {
             return UpdateAction.Remove();
         } else {
@@ -125,7 +125,7 @@ export function tests() {
                     tile.updateEntry(newEntry);
                 }
             };
-            const tile = new GapTile({entry: new FragmentBoundaryEntry(fragment, true), roomVM: {room}});
+            const tile = new GapTile(new FragmentBoundaryEntry(fragment, true), {roomVM: {room}});
             await tile.fill();
             await tile.fill();
             await tile.fill();
diff --git a/src/domain/session/room/timeline/tiles/ImageTile.js b/src/domain/session/room/timeline/tiles/ImageTile.js
index eae2b926..dd959b28 100644
--- a/src/domain/session/room/timeline/tiles/ImageTile.js
+++ b/src/domain/session/room/timeline/tiles/ImageTile.js
@@ -18,8 +18,8 @@ limitations under the License.
 import {BaseMediaTile} from "./BaseMediaTile.js";
 
 export class ImageTile extends BaseMediaTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._lightboxUrl = this.urlCreator.urlForSegments([
             // ensure the right room is active if in grid view
             this.navigation.segment("room", this._room.id),
diff --git a/src/domain/session/room/timeline/tiles/RoomMemberTile.js b/src/domain/session/room/timeline/tiles/RoomMemberTile.js
index ce41f031..ca9cd9b7 100644
--- a/src/domain/session/room/timeline/tiles/RoomMemberTile.js
+++ b/src/domain/session/room/timeline/tiles/RoomMemberTile.js
@@ -66,23 +66,25 @@ export class RoomMemberTile extends SimpleTile {
 export function tests() {
     return {
         "user removes display name": (assert) => {
-            const tile = new RoomMemberTile({
-                entry: {
+            const tile = new RoomMemberTile(
+                {
                     prevContent: {displayname: "foo", membership: "join"},
                     content: {membership: "join"},
                     stateKey: "foo@bar.com",
                 },
-            });
+                {}
+            );
             assert.strictEqual(tile.announcement, "foo@bar.com removed their name (foo)");
         },
         "user without display name sets a new display name": (assert) => {
-            const tile = new RoomMemberTile({
-                entry: {
+            const tile = new RoomMemberTile(
+                {
                     prevContent: {membership: "join"},
                     content: {displayname: "foo", membership: "join" },
                     stateKey: "foo@bar.com",
                 },
-            });
+                {}
+            );
             assert.strictEqual(tile.announcement, "foo@bar.com changed their name to foo");
         },
     };
diff --git a/src/domain/session/room/timeline/tiles/SimpleTile.js b/src/domain/session/room/timeline/tiles/SimpleTile.js
index af2b0e12..b8a7121e 100644
--- a/src/domain/session/room/timeline/tiles/SimpleTile.js
+++ b/src/domain/session/room/timeline/tiles/SimpleTile.js
@@ -19,9 +19,9 @@ import {ViewModel} from "../../../../ViewModel";
 import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";
 
 export class SimpleTile extends ViewModel {
-    constructor(options) {
+    constructor(entry, options) {
         super(options);
-        this._entry = options.entry;
+        this._entry = entry;
     }
     // view model props for all subclasses
     // hmmm, could also do instanceof ... ?
diff --git a/src/domain/session/room/timeline/tiles/index.ts b/src/domain/session/room/timeline/tiles/index.ts
new file mode 100644
index 00000000..242bea2f
--- /dev/null
+++ b/src/domain/session/room/timeline/tiles/index.ts
@@ -0,0 +1,94 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {GapTile} from "./GapTile.js";
+import {TextTile} from "./TextTile.js";
+import {RedactedTile} from "./RedactedTile.js";
+import {ImageTile} from "./ImageTile.js";
+import {VideoTile} from "./VideoTile.js";
+import {FileTile} from "./FileTile.js";
+import {LocationTile} from "./LocationTile.js";
+import {RoomNameTile} from "./RoomNameTile.js";
+import {RoomMemberTile} from "./RoomMemberTile.js";
+import {EncryptedEventTile} from "./EncryptedEventTile.js";
+import {EncryptionEnabledTile} from "./EncryptionEnabledTile.js";
+import {MissingAttachmentTile} from "./MissingAttachmentTile.js";
+
+import type {SimpleTile} from "./SimpleTile.js";
+import type {Room} from "../../../../../matrix/room/Room";
+import type {Timeline} from "../../../../../matrix/room/timeline/Timeline";
+import type {FragmentBoundaryEntry} from "../../../../../matrix/room/timeline/entries/FragmentBoundaryEntry";
+import type {EventEntry} from "../../../../../matrix/room/timeline/entries/EventEntry";
+import type {PendingEventEntry} from "../../../../../matrix/room/timeline/entries/PendingEventEntry";
+import type {Options as ViewModelOptions} from "../../../../ViewModel";
+
+export type TimelineEntry = FragmentBoundaryEntry | EventEntry | PendingEventEntry;
+export type TileClassForEntryFn = (entry: TimelineEntry) => TileConstructor | undefined;
+export type Options = ViewModelOptions & {
+    room: Room,
+    timeline: Timeline
+    tileClassForEntry: TileClassForEntryFn;
+};
+export type TileConstructor = new (entry: TimelineEntry, options: Options) => SimpleTile;
+
+export function tileClassForEntry(entry: TimelineEntry): TileConstructor | undefined {
+    if (entry.isGap) {
+        return GapTile;
+    } else if (entry.isPending && entry.pendingEvent.isMissingAttachments) {
+        return MissingAttachmentTile;
+    } else if (entry.eventType) {
+        switch (entry.eventType) {
+            case "m.room.message": {
+                if (entry.isRedacted) {
+                    return RedactedTile;
+                }
+                const content = entry.content;
+                const msgtype = content && content.msgtype;
+                switch (msgtype) {
+                    case "m.text":
+                    case "m.notice":
+                    case "m.emote":
+                        return TextTile;
+                    case "m.image":
+                        return ImageTile;
+                    case "m.video":
+                        return VideoTile;
+                    case "m.file":
+                        return FileTile;
+                    case "m.location":
+                        return LocationTile;
+                    default:
+                        // unknown msgtype not rendered
+                        return undefined;
+                }
+            }
+            case "m.room.name":
+                return RoomNameTile;
+            case "m.room.member":
+                return RoomMemberTile;
+            case "m.room.encrypted":
+                if (entry.isRedacted) {
+                    return RedactedTile;
+                }
+                return EncryptedEventTile;
+            case "m.room.encryption":
+                return EncryptionEnabledTile;
+            default:
+                // unknown type not rendered
+                return undefined;
+        }
+    }
+}
diff --git a/src/domain/session/room/timeline/tilesCreator.js b/src/domain/session/room/timeline/tilesCreator.js
deleted file mode 100644
index dc9a850e..00000000
--- a/src/domain/session/room/timeline/tilesCreator.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-Copyright 2020 Bruno Windels <bruno@windels.cloud>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {GapTile} from "./tiles/GapTile.js";
-import {TextTile} from "./tiles/TextTile.js";
-import {RedactedTile} from "./tiles/RedactedTile.js";
-import {ImageTile} from "./tiles/ImageTile.js";
-import {VideoTile} from "./tiles/VideoTile.js";
-import {FileTile} from "./tiles/FileTile.js";
-import {LocationTile} from "./tiles/LocationTile.js";
-import {RoomNameTile} from "./tiles/RoomNameTile.js";
-import {RoomMemberTile} from "./tiles/RoomMemberTile.js";
-import {EncryptedEventTile} from "./tiles/EncryptedEventTile.js";
-import {EncryptionEnabledTile} from "./tiles/EncryptionEnabledTile.js";
-import {MissingAttachmentTile} from "./tiles/MissingAttachmentTile.js";
-
-export function tilesCreator(baseOptions) {
-    const tilesCreator = function tilesCreator(entry, emitUpdate) {
-        const options = Object.assign({entry, emitUpdate, tilesCreator}, baseOptions);
-        if (entry.isGap) {
-            return new GapTile(options);
-        } else if (entry.isPending && entry.pendingEvent.isMissingAttachments) {
-            return new MissingAttachmentTile(options);
-        } else if (entry.eventType) {
-            switch (entry.eventType) {
-                case "m.room.message": {
-                    if (entry.isRedacted) {
-                        return new RedactedTile(options);
-                    }
-                    const content = entry.content;
-                    const msgtype = content && content.msgtype;
-                    switch (msgtype) {
-                        case "m.text":
-                        case "m.notice":
-                        case "m.emote":
-                            return new TextTile(options);
-                        case "m.image":
-                            return new ImageTile(options);
-                        case "m.video":
-                            return new VideoTile(options);
-                        case "m.file":
-                            return new FileTile(options);
-                        case "m.location":
-                            return new LocationTile(options);
-                        default:
-                            // unknown msgtype not rendered
-                            return null;
-                    }
-                }
-                case "m.room.name":
-                    return new RoomNameTile(options);
-                case "m.room.member":
-                    return new RoomMemberTile(options);
-                case "m.room.encrypted":
-                    if (entry.isRedacted) {
-                        return new RedactedTile(options);
-                    }
-                    return new EncryptedEventTile(options);
-                case "m.room.encryption":
-                    return new EncryptionEnabledTile(options);
-                default:
-                    // unknown type not rendered
-                    return null;
-            }
-        }
-    };
-    return tilesCreator;
-}
diff --git a/src/platform/web/main.js b/src/platform/web/main.js
index 1729c17c..9e1ca85e 100644
--- a/src/platform/web/main.js
+++ b/src/platform/web/main.js
@@ -18,6 +18,7 @@ limitations under the License.
 // import {RecordRequester, ReplayRequester} from "./matrix/net/request/replay";
 import {RootViewModel} from "../../domain/RootViewModel.js";
 import {createNavigation, createRouter} from "../../domain/navigation/index.js";
+import {tileClassForEntry} from "../../domain/session/room/timeline/tiles/index";
 // Don't use a default export here, as we use multiple entries during legacy build,
 // which does not support default exports,
 // see https://github.com/rollup/plugins/tree/master/packages/multi-entry
@@ -42,6 +43,8 @@ export async function main(platform) {
             // so we call it that in the view models
             urlCreator: urlRouter,
             navigation,
+            // which tiles are supported by the timeline
+            tileClassForEntry
         });
         await vm.load();
         platform.createAndMountRootView(vm);
diff --git a/src/platform/web/ui/session/room/common.ts b/src/platform/web/ui/session/room/common.ts
index 87997cc4..201f14d0 100644
--- a/src/platform/web/ui/session/room/common.ts
+++ b/src/platform/web/ui/session/room/common.ts
@@ -48,6 +48,6 @@ export function viewClassForEntry(vm: SimpleTile): TileViewConstructor {
         case "redacted":
             return RedactedView;
         default:
-            throw new Error(`Tiles of shape "${vm.shape}" are not supported, check the tilesCreator function in the view model`);
+            throw new Error(`Tiles of shape "${vm.shape}" are not supported, check the tileClassForEntry function in the view model`);
     }
 }

From a913671f0c93a1760dee5d12669b3cc13737a9d4 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 14:19:34 +0200
Subject: [PATCH 45/85] make tileClassForEntry optional, as otherwise it is a
 breaking change

---
 src/domain/session/room/RoomViewModel.js | 5 ++++-
 src/platform/web/main.js                 | 3 ---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js
index 9c3f468e..66042ae5 100644
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@@ -20,6 +20,9 @@ import {ComposerViewModel} from "./ComposerViewModel.js"
 import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
 import {ViewModel} from "../../ViewModel";
 import {imageToInfo} from "../common.js";
+// TODO: remove fallback so default isn't included in bundle for SDK users that have their custom tileClassForEntry
+// this is a breaking SDK change though to make this option mandatory
+import {tileClassForEntry as defaultTileClassForEntry} from "./timeline/tiles/index";
 
 export class RoomViewModel extends ViewModel {
     constructor(options) {
@@ -27,7 +30,7 @@ export class RoomViewModel extends ViewModel {
         const {room, tileClassForEntry} = options;
         this._room = room;
         this._timelineVM = null;
-        this._tileClassForEntry = tileClassForEntry;
+        this._tileClassForEntry = tileClassForEntry ?? defaultTileClassForEntry;
         this._tileOptions = undefined;
         this._onRoomChange = this._onRoomChange.bind(this);
         this._timelineError = null;
diff --git a/src/platform/web/main.js b/src/platform/web/main.js
index 9e1ca85e..1729c17c 100644
--- a/src/platform/web/main.js
+++ b/src/platform/web/main.js
@@ -18,7 +18,6 @@ limitations under the License.
 // import {RecordRequester, ReplayRequester} from "./matrix/net/request/replay";
 import {RootViewModel} from "../../domain/RootViewModel.js";
 import {createNavigation, createRouter} from "../../domain/navigation/index.js";
-import {tileClassForEntry} from "../../domain/session/room/timeline/tiles/index";
 // Don't use a default export here, as we use multiple entries during legacy build,
 // which does not support default exports,
 // see https://github.com/rollup/plugins/tree/master/packages/multi-entry
@@ -43,8 +42,6 @@ export async function main(platform) {
             // so we call it that in the view models
             urlCreator: urlRouter,
             navigation,
-            // which tiles are supported by the timeline
-            tileClassForEntry
         });
         await vm.load();
         platform.createAndMountRootView(vm);

From ac4bb8ca159fb8d353b78307df28c98fa24edcb3 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 14:27:08 +0200
Subject: [PATCH 46/85] export tile view & view models from SDK

---
 src/lib.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/lib.ts b/src/lib.ts
index 2634b0c0..7f4e5316 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -26,9 +26,41 @@ export {SessionView} from "./platform/web/ui/session/SessionView.js";
 export {RoomViewModel} from "./domain/session/room/RoomViewModel.js";
 export {RoomView} from "./platform/web/ui/session/room/RoomView.js";
 export {TimelineViewModel} from "./domain/session/room/timeline/TimelineViewModel.js";
+export {tileClassForEntry} from "./domain/session/room/timeline/tiles/index";
+export type {TimelineEntry, TileClassForEntryFn, Options, TileConstructor} from "./domain/session/room/timeline/tiles/index";
+// export timeline tile view models
+export {GapTile} from "./domain/session/room/timeline/tiles/GapTile.js";
+export {TextTile} from "./domain/session/room/timeline/tiles/TextTile.js";
+export {RedactedTile} from "./domain/session/room/timeline/tiles/RedactedTile.js";
+export {ImageTile} from "./domain/session/room/timeline/tiles/ImageTile.js";
+export {VideoTile} from "./domain/session/room/timeline/tiles/VideoTile.js";
+export {FileTile} from "./domain/session/room/timeline/tiles/FileTile.js";
+export {LocationTile} from "./domain/session/room/timeline/tiles/LocationTile.js";
+export {RoomNameTile} from "./domain/session/room/timeline/tiles/RoomNameTile.js";
+export {RoomMemberTile} from "./domain/session/room/timeline/tiles/RoomMemberTile.js";
+export {EncryptedEventTile} from "./domain/session/room/timeline/tiles/EncryptedEventTile.js";
+export {EncryptionEnabledTile} from "./domain/session/room/timeline/tiles/EncryptionEnabledTile.js";
+export {MissingAttachmentTile} from "./domain/session/room/timeline/tiles/MissingAttachmentTile.js";
+export {SimpleTile} from "./domain/session/room/timeline/tiles/SimpleTile.js";
+
 export {TimelineView} from "./platform/web/ui/session/room/TimelineView";
 export {viewClassForEntry} from "./platform/web/ui/session/room/common";
 export type {TileViewConstructor, ViewClassForEntryFn} from "./platform/web/ui/session/room/TimelineView";
+// export timeline tile views
+export {AnnouncementView} from "./platform/web/ui/session/room/timeline/AnnouncementView.js";
+export {BaseMediaView} from "./platform/web/ui/session/room/timeline/BaseMediaView.js";
+export {BaseMessageView} from "./platform/web/ui/session/room/timeline/BaseMessageView.js";
+export {FileView} from "./platform/web/ui/session/room/timeline/FileView.js";
+export {GapView} from "./platform/web/ui/session/room/timeline/GapView.js";
+export {ImageView} from "./platform/web/ui/session/room/timeline/ImageView.js";
+export {LocationView} from "./platform/web/ui/session/room/timeline/LocationView.js";
+export {MissingAttachmentView} from "./platform/web/ui/session/room/timeline/MissingAttachmentView.js";
+export {ReactionsView} from "./platform/web/ui/session/room/timeline/ReactionsView.js";
+export {RedactedView} from "./platform/web/ui/session/room/timeline/RedactedView.js";
+export {ReplyPreviewView} from "./platform/web/ui/session/room/timeline/ReplyPreviewView.js";
+export {TextMessageView} from "./platform/web/ui/session/room/timeline/TextMessageView.js";
+export {VideoView} from "./platform/web/ui/session/room/timeline/VideoView.js";
+
 export {Navigation} from "./domain/navigation/Navigation.js";
 export {ComposerViewModel} from "./domain/session/room/ComposerViewModel.js";
 export {MessageComposer} from "./platform/web/ui/session/room/MessageComposer.js";

From cda96a35eebe2158d4d9627281fd00ebedc66715 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 15:01:06 +0200
Subject: [PATCH 47/85] rename viewClassForEntry to viewClassForTile

---
 src/lib.ts                                             |  2 +-
 src/platform/web/ui/session/room/MessageComposer.js    |  4 ++--
 src/platform/web/ui/session/room/RoomView.js           |  4 ++--
 src/platform/web/ui/session/room/TimelineView.ts       | 10 +++++-----
 src/platform/web/ui/session/room/common.ts             |  2 +-
 .../web/ui/session/room/timeline/ReplyPreviewView.js   |  4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib.ts b/src/lib.ts
index 7f4e5316..90bf597c 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -44,7 +44,7 @@ export {MissingAttachmentTile} from "./domain/session/room/timeline/tiles/Missin
 export {SimpleTile} from "./domain/session/room/timeline/tiles/SimpleTile.js";
 
 export {TimelineView} from "./platform/web/ui/session/room/TimelineView";
-export {viewClassForEntry} from "./platform/web/ui/session/room/common";
+export {viewClassForTile} from "./platform/web/ui/session/room/common";
 export type {TileViewConstructor, ViewClassForEntryFn} from "./platform/web/ui/session/room/TimelineView";
 // export timeline tile views
 export {AnnouncementView} from "./platform/web/ui/session/room/timeline/AnnouncementView.js";
diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js
index 9c67fa9f..7f822d37 100644
--- a/src/platform/web/ui/session/room/MessageComposer.js
+++ b/src/platform/web/ui/session/room/MessageComposer.js
@@ -17,7 +17,7 @@ limitations under the License.
 import {TemplateView} from "../../general/TemplateView";
 import {Popup} from "../../general/Popup.js";
 import {Menu} from "../../general/Menu.js";
-import {viewClassForEntry} from "./common"
+import {viewClassForTile} from "./common"
 
 export class MessageComposer extends TemplateView {
     constructor(viewModel) {
@@ -45,7 +45,7 @@ export class MessageComposer extends TemplateView {
         this._focusInput = () => this._input.focus();
         this.value.on("focus", this._focusInput);
         const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => {
-            const View = rvm && viewClassForEntry(rvm);
+            const View = rvm && viewClassForTile(rvm);
             if (!View) { return null; }
             return t.div({
                     className: "MessageComposer_replyPreview"
diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js
index 2190f1f1..961be704 100644
--- a/src/platform/web/ui/session/room/RoomView.js
+++ b/src/platform/web/ui/session/room/RoomView.js
@@ -23,7 +23,7 @@ import {TimelineLoadingView} from "./TimelineLoadingView.js";
 import {MessageComposer} from "./MessageComposer.js";
 import {RoomArchivedView} from "./RoomArchivedView.js";
 import {AvatarView} from "../../AvatarView.js";
-import {viewClassForEntry} from "./common";
+import {viewClassForTile} from "./common";
 
 export class RoomView extends TemplateView {
     constructor(options) {
@@ -55,7 +55,7 @@ export class RoomView extends TemplateView {
                 t.div({className: "RoomView_error"}, vm => vm.error),
                 t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
                     return timelineViewModel ?
-                        new TimelineView(timelineViewModel, viewClassForEntry) :
+                        new TimelineView(timelineViewModel, viewClassForTile) :
                         new TimelineLoadingView(vm);    // vm is just needed for i18n
                 }),
                 t.view(bottomView),
diff --git a/src/platform/web/ui/session/room/TimelineView.ts b/src/platform/web/ui/session/room/TimelineView.ts
index 0c893847..6dd52466 100644
--- a/src/platform/web/ui/session/room/TimelineView.ts
+++ b/src/platform/web/ui/session/room/TimelineView.ts
@@ -61,7 +61,7 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
     private tilesView?: TilesListView;
     private resizeObserver?: ResizeObserver;
 
-    constructor(vm: TimelineViewModel, private readonly viewClassForEntry: ViewClassForEntryFn) {
+    constructor(vm: TimelineViewModel, private readonly viewClassForTile: ViewClassForEntryFn) {
         super(vm);
     }
 
@@ -71,7 +71,7 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
             // do initial scroll positioning
             this.restoreScrollPosition();
         });
-        this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition(), this.viewClassForEntry);
+        this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition(), this.viewClassForTile);
         const root = t.div({className: "Timeline"}, [
             t.div({
                 className: "Timeline_scroller bottom-aligned-scroll",
@@ -184,12 +184,12 @@ class TilesListView extends ListView<SimpleTile, TileView> {
 
     private onChanged: () => void;
 
-    constructor(tiles: ObservableList<SimpleTile>, onChanged: () => void, private readonly viewClassForEntry: ViewClassForEntryFn) {
+    constructor(tiles: ObservableList<SimpleTile>, onChanged: () => void, private readonly viewClassForTile: ViewClassForEntryFn) {
         super({
             list: tiles,
             onItemClick: (tileView, evt) => tileView.onClick(evt),
         }, entry => {
-            const View = viewClassForEntry(entry);
+            const View = viewClassForTile(entry);
             return new View(entry);
         });
         this.onChanged = onChanged;
@@ -202,7 +202,7 @@ class TilesListView extends ListView<SimpleTile, TileView> {
 
     onUpdate(index: number, value: SimpleTile, param: any) {
         if (param === "shape") {
-            const ExpectedClass = this.viewClassForEntry(value);
+            const ExpectedClass = this.viewClassForTile(value);
             const child = this.getChildInstanceByIndex(index);
             if (!ExpectedClass || !(child instanceof ExpectedClass)) {
                 // shape was updated, so we need to recreate the tile view,
diff --git a/src/platform/web/ui/session/room/common.ts b/src/platform/web/ui/session/room/common.ts
index 201f14d0..7b62630f 100644
--- a/src/platform/web/ui/session/room/common.ts
+++ b/src/platform/web/ui/session/room/common.ts
@@ -26,7 +26,7 @@ import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/Simp
 import {GapView} from "./timeline/GapView.js";
 import type {TileViewConstructor, ViewClassForEntryFn} from "./TimelineView";
 
-export function viewClassForEntry(vm: SimpleTile): TileViewConstructor {
+export function viewClassForTile(vm: SimpleTile): TileViewConstructor {
     switch (vm.shape) {
         case "gap":
             return GapView;
diff --git a/src/platform/web/ui/session/room/timeline/ReplyPreviewView.js b/src/platform/web/ui/session/room/timeline/ReplyPreviewView.js
index 3c52fc71..bddcc8fe 100644
--- a/src/platform/web/ui/session/room/timeline/ReplyPreviewView.js
+++ b/src/platform/web/ui/session/room/timeline/ReplyPreviewView.js
@@ -16,11 +16,11 @@ limitations under the License.
 
 import {renderStaticAvatar} from "../../../avatar";
 import {TemplateView} from "../../../general/TemplateView";
-import {viewClassForEntry} from "../common";
+import {viewClassForTile} from "../common";
 
 export class ReplyPreviewView extends TemplateView {
     render(t, vm) {
-        const viewClass = viewClassForEntry(vm);
+        const viewClass = viewClassForTile(vm);
         if (!viewClass) {
             throw new Error(`Shape ${vm.shape} is unrecognized.`)
         }

From 57f50cc4160a7e35b4cb2df1c9299166fff6cf53 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 15:01:27 +0200
Subject: [PATCH 48/85] fix lint warnings

---
 src/domain/session/room/timeline/TilesCollection.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/domain/session/room/timeline/TilesCollection.js b/src/domain/session/room/timeline/TilesCollection.js
index 75af5b09..173b0cf6 100644
--- a/src/domain/session/room/timeline/TilesCollection.js
+++ b/src/domain/session/room/timeline/TilesCollection.js
@@ -311,7 +311,7 @@ export function tests() {
             }
             const entries = new ObservableArray([{n: 5}, {n: 10}]);
             const tileOptions = {
-                tileClassForEntry: entry => UpdateOnSiblingTile,
+                tileClassForEntry: () => UpdateOnSiblingTile,
             };
             const tiles = new TilesCollection(entries, tileOptions);
             let receivedAdd = false;
@@ -337,7 +337,7 @@ export function tests() {
             }
             const entries = new ObservableArray([{n: 5}, {n: 10}, {n: 15}]);
             const tileOptions = {
-                tileClassForEntry: entry => UpdateOnSiblingTile,
+                tileClassForEntry: () => UpdateOnSiblingTile,
             };
             const tiles = new TilesCollection(entries, tileOptions);
             const events = [];

From 1f0cb542c88e53831424155f282b01315aef88e4 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 15:02:07 +0200
Subject: [PATCH 49/85] pass viewClassForTile to tile views, so they can create
 reply view with correct subtile

---
 src/platform/web/ui/session/room/TimelineView.ts     | 12 ++++++++----
 .../web/ui/session/room/timeline/BaseMessageView.js  |  3 ++-
 .../web/ui/session/room/timeline/ReplyPreviewView.js | 11 +++++++----
 .../web/ui/session/room/timeline/TextMessageView.js  |  2 +-
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/platform/web/ui/session/room/TimelineView.ts b/src/platform/web/ui/session/room/TimelineView.ts
index 6dd52466..5a04991f 100644
--- a/src/platform/web/ui/session/room/TimelineView.ts
+++ b/src/platform/web/ui/session/room/TimelineView.ts
@@ -28,7 +28,11 @@ export interface TileView extends IView {
     readonly value: SimpleTile;
     onClick(event: UIEvent);
 } 
-export type TileViewConstructor = new (tile: SimpleTile) => TileView;
+export type TileViewConstructor = new (
+    tile: SimpleTile,
+    viewClassForTile: ViewClassForEntryFn,
+    renderFlags?: { reply?: boolean, interactive?: boolean }
+) => TileView;
 export type ViewClassForEntryFn = (tile: SimpleTile) => TileViewConstructor;
 
 //import {TimelineViewModel} from "../../../../../domain/session/room/timeline/TimelineViewModel.js";
@@ -188,9 +192,9 @@ class TilesListView extends ListView<SimpleTile, TileView> {
         super({
             list: tiles,
             onItemClick: (tileView, evt) => tileView.onClick(evt),
-        }, entry => {
-            const View = viewClassForTile(entry);
-            return new View(entry);
+        }, tile => {
+            const TileView = viewClassForTile(tile);
+            return new TileView(tile, viewClassForTile);
         });
         this.onChanged = onChanged;
     }
diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js
index 7356cd2b..74b96ecf 100644
--- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js
+++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js
@@ -24,10 +24,11 @@ import {Menu} from "../../../general/Menu.js";
 import {ReactionsView} from "./ReactionsView.js";
 
 export class BaseMessageView extends TemplateView {
-    constructor(value, renderFlags, tagName = "li") {
+    constructor(value, viewClassForTile, renderFlags, tagName = "li") {
         super(value);
         this._menuPopup = null;
         this._tagName = tagName;
+        this._viewClassForTile = viewClassForTile;
         // TODO An enum could be nice to make code easier to read at call sites.
         this._renderFlags = renderFlags;
     }
diff --git a/src/platform/web/ui/session/room/timeline/ReplyPreviewView.js b/src/platform/web/ui/session/room/timeline/ReplyPreviewView.js
index bddcc8fe..219e4357 100644
--- a/src/platform/web/ui/session/room/timeline/ReplyPreviewView.js
+++ b/src/platform/web/ui/session/room/timeline/ReplyPreviewView.js
@@ -16,15 +16,18 @@ limitations under the License.
 
 import {renderStaticAvatar} from "../../../avatar";
 import {TemplateView} from "../../../general/TemplateView";
-import {viewClassForTile} from "../common";
 
 export class ReplyPreviewView extends TemplateView {
+    constructor(vm, viewClassForTile) {
+        super(vm);
+        this._viewClassForTile = viewClassForTile;
+    }
     render(t, vm) {
-        const viewClass = viewClassForTile(vm);
-        if (!viewClass) {
+        const TileView = this._viewClassForTile(vm);
+        if (!TileView) {
             throw new Error(`Shape ${vm.shape} is unrecognized.`)
         }
-        const view = new viewClass(vm, { reply: true, interactive: false });
+        const view = new TileView(vm, this._viewClassForTile, { reply: true, interactive: false });
         return t.div(
             { className: "ReplyPreviewView" },
             t.blockquote([
diff --git a/src/platform/web/ui/session/room/timeline/TextMessageView.js b/src/platform/web/ui/session/room/timeline/TextMessageView.js
index c0c0cfb0..8d6cb4dc 100644
--- a/src/platform/web/ui/session/room/timeline/TextMessageView.js
+++ b/src/platform/web/ui/session/room/timeline/TextMessageView.js
@@ -35,7 +35,7 @@ export class TextMessageView extends BaseMessageView {
                 return new ReplyPreviewError();
             }
             else if (replyTile) {
-                return new ReplyPreviewView(replyTile);
+                return new ReplyPreviewView(replyTile, this._viewClassForTile);
             }
             else {
                 return null;

From 1fea14dd10a1b830cc9be35d0077c478b2cb5a5e Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 15:04:38 +0200
Subject: [PATCH 50/85] ensure other parameters don't get passed to
 TemplateView parent ctors

---
 .../web/ui/session/room/timeline/AnnouncementView.js         | 5 +++++
 src/platform/web/ui/session/room/timeline/GapView.js         | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/platform/web/ui/session/room/timeline/AnnouncementView.js b/src/platform/web/ui/session/room/timeline/AnnouncementView.js
index 268bf0fa..5ae92daa 100644
--- a/src/platform/web/ui/session/room/timeline/AnnouncementView.js
+++ b/src/platform/web/ui/session/room/timeline/AnnouncementView.js
@@ -17,6 +17,11 @@ limitations under the License.
 import {TemplateView} from "../../../general/TemplateView";
 
 export class AnnouncementView extends TemplateView {
+    // ignore other arguments
+    constructor(vm) {
+        super(vm);
+    }
+
     render(t) {
         return t.li({className: "AnnouncementView"}, t.div(vm => vm.announcement));
     }
diff --git a/src/platform/web/ui/session/room/timeline/GapView.js b/src/platform/web/ui/session/room/timeline/GapView.js
index 2d3bd6e8..db6cda59 100644
--- a/src/platform/web/ui/session/room/timeline/GapView.js
+++ b/src/platform/web/ui/session/room/timeline/GapView.js
@@ -18,6 +18,11 @@ import {TemplateView} from "../../../general/TemplateView";
 import {spinner} from "../../../common.js";
 
 export class GapView extends TemplateView {
+    // ignore other argument
+    constructor(vm) {
+        super(vm);
+    }
+
     render(t) {
         const className = {
             GapView: true,

From d21d10e4f25afa82c7ff41658d6fc7f79e8b42fa Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 15:15:21 +0200
Subject: [PATCH 51/85] pass in viewClassForTile from SessionView

so you can also use custom tiles when using the grid view
---
 src/platform/web/ui/session/RoomGridView.js  | 7 ++++++-
 src/platform/web/ui/session/SessionView.js   | 5 +++--
 src/platform/web/ui/session/room/RoomView.js | 8 ++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/platform/web/ui/session/RoomGridView.js b/src/platform/web/ui/session/RoomGridView.js
index 79fc3d21..65289bea 100644
--- a/src/platform/web/ui/session/RoomGridView.js
+++ b/src/platform/web/ui/session/RoomGridView.js
@@ -21,6 +21,11 @@ import {TemplateView} from "../general/TemplateView";
 import {StaticView} from "../general/StaticView.js";
 
 export class RoomGridView extends TemplateView {
+    constructor(vm, viewClassForTile) {
+        super(vm);
+        this._viewClassForTile = viewClassForTile;
+    }
+
     render(t, vm) {
         const children = [];
         for (let i = 0; i < (vm.height * vm.width); i+=1) {
@@ -39,7 +44,7 @@ export class RoomGridView extends TemplateView {
                     } else if (roomVM.kind === "invite") {
                         return new InviteView(roomVM);
                     } else {
-                        return new RoomView(roomVM);
+                        return new RoomView(roomVM, this._viewClassForTile);
                     }
                 } else {
                     return new StaticView(t => t.div({className: "room-placeholder"}, [
diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js
index e7cc406a..ef63b29b 100644
--- a/src/platform/web/ui/session/SessionView.js
+++ b/src/platform/web/ui/session/SessionView.js
@@ -28,6 +28,7 @@ import {RoomGridView} from "./RoomGridView.js";
 import {SettingsView} from "./settings/SettingsView.js";
 import {CreateRoomView} from "./CreateRoomView.js";
 import {RightPanelView} from "./rightpanel/RightPanelView.js";
+import {viewClassForTile} from "./room/common";
 
 export class SessionView extends TemplateView {
     render(t, vm) {
@@ -42,7 +43,7 @@ export class SessionView extends TemplateView {
             t.view(new LeftPanelView(vm.leftPanelViewModel)),
             t.mapView(vm => vm.activeMiddleViewModel, () => {
                 if (vm.roomGridViewModel) {
-                    return new RoomGridView(vm.roomGridViewModel);
+                    return new RoomGridView(vm.roomGridViewModel, viewClassForTile);
                 } else if (vm.settingsViewModel) {
                     return new SettingsView(vm.settingsViewModel);
                 } else if (vm.createRoomViewModel) {
@@ -51,7 +52,7 @@ export class SessionView extends TemplateView {
                     if (vm.currentRoomViewModel.kind === "invite") {
                         return new InviteView(vm.currentRoomViewModel);
                     } else if (vm.currentRoomViewModel.kind === "room") {
-                        return new RoomView(vm.currentRoomViewModel);
+                        return new RoomView(vm.currentRoomViewModel, viewClassForTile);
                     } else if (vm.currentRoomViewModel.kind === "roomBeingCreated") {
                         return new RoomBeingCreatedView(vm.currentRoomViewModel);
                     } else {
diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js
index 961be704..0bc85e83 100644
--- a/src/platform/web/ui/session/room/RoomView.js
+++ b/src/platform/web/ui/session/room/RoomView.js
@@ -23,11 +23,11 @@ import {TimelineLoadingView} from "./TimelineLoadingView.js";
 import {MessageComposer} from "./MessageComposer.js";
 import {RoomArchivedView} from "./RoomArchivedView.js";
 import {AvatarView} from "../../AvatarView.js";
-import {viewClassForTile} from "./common";
 
 export class RoomView extends TemplateView {
-    constructor(options) {
-        super(options);
+    constructor(vm, viewClassForTile) {
+        super(vm);
+        this._viewClassForTile = viewClassForTile;
         this._optionsPopup = null;
     }
 
@@ -55,7 +55,7 @@ export class RoomView extends TemplateView {
                 t.div({className: "RoomView_error"}, vm => vm.error),
                 t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
                     return timelineViewModel ?
-                        new TimelineView(timelineViewModel, viewClassForTile) :
+                        new TimelineView(timelineViewModel, this._viewClassForTile) :
                         new TimelineLoadingView(vm);    // vm is just needed for i18n
                 }),
                 t.view(bottomView),

From cf780ce259bdcf7a6c74b759bc513a0f3f45e8c3 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 15:16:22 +0200
Subject: [PATCH 52/85] also apply custom tiles in reply preview in composer

---
 src/platform/web/ui/session/room/MessageComposer.js | 12 ++++++------
 src/platform/web/ui/session/room/RoomView.js        |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js
index 7f822d37..6ce8148f 100644
--- a/src/platform/web/ui/session/room/MessageComposer.js
+++ b/src/platform/web/ui/session/room/MessageComposer.js
@@ -17,11 +17,11 @@ limitations under the License.
 import {TemplateView} from "../../general/TemplateView";
 import {Popup} from "../../general/Popup.js";
 import {Menu} from "../../general/Menu.js";
-import {viewClassForTile} from "./common"
 
 export class MessageComposer extends TemplateView {
-    constructor(viewModel) {
+    constructor(viewModel, viewClassForTile) {
         super(viewModel);
+        this._viewClassForTile = viewClassForTile;
         this._input = null;
         this._attachmentPopup = null;
         this._focusInput = null;
@@ -45,8 +45,8 @@ export class MessageComposer extends TemplateView {
         this._focusInput = () => this._input.focus();
         this.value.on("focus", this._focusInput);
         const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => {
-            const View = rvm && viewClassForTile(rvm);
-            if (!View) { return null; }
+            const TileView = rvm && this._viewClassForTile(rvm);
+            if (!TileView) { return null; }
             return t.div({
                     className: "MessageComposer_replyPreview"
                 }, [
@@ -55,8 +55,8 @@ export class MessageComposer extends TemplateView {
                         className: "cancel",
                         onClick: () => this._clearReplyingTo()
                     }, "Close"),
-                t.view(new View(rvm, { interactive: false }, "div"))
-                ])
+                t.view(new TileView(rvm, this._viewClassForTile, { interactive: false }, "div"))
+            ]);
         });
         const input = t.div({className: "MessageComposer_input"}, [
             this._input,
diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js
index 0bc85e83..76e26eab 100644
--- a/src/platform/web/ui/session/room/RoomView.js
+++ b/src/platform/web/ui/session/room/RoomView.js
@@ -34,7 +34,7 @@ export class RoomView extends TemplateView {
     render(t, vm) {
         let bottomView;
         if (vm.composerViewModel.kind === "composer") {
-            bottomView = new MessageComposer(vm.composerViewModel);
+            bottomView = new MessageComposer(vm.composerViewModel, this._viewClassForTile);
         } else if (vm.composerViewModel.kind === "archived") {
             bottomView = new RoomArchivedView(vm.composerViewModel);
         }

From a6b6fef6d2cd73a8141556308ad496a1ee7006bf Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 8 Apr 2022 17:48:20 +0200
Subject: [PATCH 53/85] sdk release 0.0.10

---
 scripts/sdk/base-manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/sdk/base-manifest.json b/scripts/sdk/base-manifest.json
index ba0e1f4f..7730bbac 100644
--- a/scripts/sdk/base-manifest.json
+++ b/scripts/sdk/base-manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "hydrogen-view-sdk",
     "description": "Embeddable matrix client library, including view components",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "main": "./hydrogen.es.js",
     "type": "module"
 }

From ff98ef44655f4c0c7dbf74c0537b289e0979ef36 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 10 Apr 2022 14:49:19 +0530
Subject: [PATCH 54/85] Support theming in dev server

---
 .../rollup-plugin-build-themes.js             | 198 ++++++++++++------
 1 file changed, 137 insertions(+), 61 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index 74fe4daf..29fd91e1 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -13,17 +13,45 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+const path = require('path');
 
 async function readCSSSource(location) {
     const fs = require("fs").promises;
     const path = require("path");
-    const resolvedLocation = path.resolve(__dirname, "../../",  `${location}/theme.css`);
+    const resolvedLocation = path.resolve(__dirname, "../../", `${location}/theme.css`);
     const data = await fs.readFile(resolvedLocation);
     return data;
 }
 
-async function appendVariablesToCSS(variables, cssSource) {
-    return cssSource + `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
+function getRootSectionWithVariables(variables) {
+    return `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
+}
+
+function appendVariablesToCSS(variables, cssSource) {
+    return cssSource + getRootSectionWithVariables(variables);
+}
+
+function findLocationFromThemeName(name, locations) {
+    const themeLocation = locations.find(location => {
+        const manifest = require(`${location}/manifest.json`);
+        if (manifest.name === name) {
+            return true;
+        }
+    });
+    if (!themeLocation) {
+        throw new Error(`Cannot find location from theme name "${name}"`);
+    }
+    return themeLocation;
+}
+
+function findManifestFromThemeName(name, locations) {
+    for (const location of locations) {
+        const manifest = require(`${location}/manifest.json`);
+        if (manifest.name === name) {
+            return manifest;
+        }
+    }
+    throw new Error(`Cannot find manifest from theme name "${name}"`);
 }
 
 function parseBundle(bundle) {
@@ -68,11 +96,20 @@ function parseBundle(bundle) {
 
 module.exports = function buildThemes(options) {
     let manifest, variants, defaultDark, defaultLight;
+    let isDevelopment = false;
+    const virtualModuleId = '@theme/'
+    const resolvedVirtualModuleId = '\0' + virtualModuleId;
 
     return {
         name: "build-themes",
         enforce: "pre",
 
+        configResolved(config) {
+            if (config.command === "serve") {
+                isDevelopment = true;
+            }
+        },
+
         async buildStart() {
             const { manifestLocations } = options;
             for (const location of manifestLocations) {
@@ -106,69 +143,108 @@ module.exports = function buildThemes(options) {
             }
         },
 
+        resolveId(id) {
+            if (id.startsWith(virtualModuleId)) {
+                return isDevelopment? '\0' + id: false;
+            }
+        },
+
         async load(id) {
-            const result = id.match(/(.+)\/theme.css\?variant=(.+)/);
-            if (result) {
-                const [, location, variant] = result;
-                const cssSource = await readCSSSource(location);
-                const config = variants[variant];
-                return await appendVariablesToCSS(config.variables, cssSource);
-            }
-            return null;
-        },
-
-        transformIndexHtml(_, ctx) {
-            let darkThemeLocation, lightThemeLocation;
-            for (const [, bundle] of Object.entries(ctx.bundle)) {
-                if (bundle.name === defaultDark) {
-                    darkThemeLocation = bundle.fileName;
-                }
-                if (bundle.name === defaultLight) {
-                    lightThemeLocation = bundle.fileName;
+            if (isDevelopment) {
+                if (id.startsWith(resolvedVirtualModuleId)) {
+                    let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
+                    if (theme === "default") {
+                        theme = "Element";
+                    }
+                    if (!variant || variant === "default") {
+                        variant = "light";
+                    }
+                    if (!file) {
+                        file = "index.js";
+                    }
+                    switch (file) {
+                        case "index.js": {
+                            const location = findLocationFromThemeName(theme, options.manifestLocations);
+                            return `import "${path.resolve(`${location}/theme.css`)}";` +
+                                `import "@theme/${theme}/${variant}/variables.css"`;
+                        }
+                        case "variables.css": { 
+                            const manifest = findManifestFromThemeName(theme, options.manifestLocations);
+                            const variables = manifest.values.variants[variant].variables;
+                            const css =  getRootSectionWithVariables(variables);
+                            return css;
+                        }
+                    }
                 }
             }
-            return [
-                {
-                    tag: "link",
-                    attrs: {
-                        rel: "stylesheet",
-                        type: "text/css",
-                        media: "(prefers-color-scheme: dark)",
-                        href: `./${darkThemeLocation}`,
-                    }
-                },
-                {
-                    tag: "link",
-                    attrs: {
-                        rel: "stylesheet",
-                        type: "text/css",
-                        media: "(prefers-color-scheme: light)",
-                        href: `./${lightThemeLocation}`,
-                    }
-                },
-            ];
-        },
+            else {
+                const result = id.match(/(.+)\/theme.css\?variant=(.+)/);
+                if (result) {
+                    const [, location, variant] = result;
+                    const cssSource = await readCSSSource(location);
+                    const config = variants[variant];
+                    return await appendVariablesToCSS(config.variables, cssSource);
+                }
+                return null;
+            }
+},
 
-        generateBundle(_, bundle) {
-            const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
-            for (const [location, chunkArray] of chunkMap) {
-                const manifest = require(`${location}/manifest.json`);
-                const compiledVariables = options.compiledVariables.get(location);
-                const derivedVariables = compiledVariables["derived-variables"];
-                const icon = compiledVariables["icon"];
-                manifest.source = {
-                    "built-asset": chunkArray.map(chunk => assetMap.get(chunk.fileName).fileName),
-                    "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
-                    "derived-variables": derivedVariables,
-                    "icon": icon
-                };
-                const name = `theme-${manifest.name}.json`;
-                this.emitFile({
-                    type: "asset",
-                    name,
-                    source: JSON.stringify(manifest),
-                });
+    transformIndexHtml(_, ctx) {
+        if (isDevelopment) {
+            // Don't add default stylesheets to index.html on dev
+            return;
+        } 
+        let darkThemeLocation, lightThemeLocation;
+        for (const [, bundle] of Object.entries(ctx.bundle)) {
+            if (bundle.name === defaultDark) {
+                darkThemeLocation = bundle.fileName;
+            }
+            if (bundle.name === defaultLight) {
+                lightThemeLocation = bundle.fileName;
             }
         }
+        return [
+            {
+                tag: "link",
+                attrs: {
+                    rel: "stylesheet",
+                    type: "text/css",
+                    media: "(prefers-color-scheme: dark)",
+                    href: `./${darkThemeLocation}`,
+                }
+            },
+            {
+                tag: "link",
+                attrs: {
+                    rel: "stylesheet",
+                    type: "text/css",
+                    media: "(prefers-color-scheme: light)",
+                    href: `./${lightThemeLocation}`,
+                }
+            },
+        ];
+},
+
+generateBundle(_, bundle) {
+    const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
+    for (const [location, chunkArray] of chunkMap) {
+        const manifest = require(`${location}/manifest.json`);
+        const compiledVariables = options.compiledVariables.get(location);
+        const derivedVariables = compiledVariables["derived-variables"];
+        const icon = compiledVariables["icon"];
+        manifest.source = {
+            "built-asset": chunkArray.map(chunk => assetMap.get(chunk.fileName).fileName),
+            "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
+            "derived-variables": derivedVariables,
+            "icon": icon
+        };
+        const name = `theme-${manifest.name}.json`;
+        this.emitFile({
+            type: "asset",
+            name,
+            source: JSON.stringify(manifest),
+        });
+    }
+}
     }
 }

From 0a95eb09405816c0cbd73883eb8b06e8c5d48e9f Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 10 Apr 2022 14:52:26 +0530
Subject: [PATCH 55/85] Fix formatting

---
 .../rollup-plugin-build-themes.js             | 110 +++++++++---------
 1 file changed, 55 insertions(+), 55 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index 29fd91e1..eb063c72 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -187,64 +187,64 @@ module.exports = function buildThemes(options) {
                 }
                 return null;
             }
-},
+        },
 
-    transformIndexHtml(_, ctx) {
-        if (isDevelopment) {
-            // Don't add default stylesheets to index.html on dev
-            return;
-        } 
-        let darkThemeLocation, lightThemeLocation;
-        for (const [, bundle] of Object.entries(ctx.bundle)) {
-            if (bundle.name === defaultDark) {
-                darkThemeLocation = bundle.fileName;
-            }
-            if (bundle.name === defaultLight) {
-                lightThemeLocation = bundle.fileName;
-            }
-        }
-        return [
-            {
-                tag: "link",
-                attrs: {
-                    rel: "stylesheet",
-                    type: "text/css",
-                    media: "(prefers-color-scheme: dark)",
-                    href: `./${darkThemeLocation}`,
+        transformIndexHtml(_, ctx) {
+            if (isDevelopment) {
+                // Don't add default stylesheets to index.html on dev
+                return;
+            } 
+            let darkThemeLocation, lightThemeLocation;
+            for (const [, bundle] of Object.entries(ctx.bundle)) {
+                if (bundle.name === defaultDark) {
+                    darkThemeLocation = bundle.fileName;
                 }
-            },
-            {
-                tag: "link",
-                attrs: {
-                    rel: "stylesheet",
-                    type: "text/css",
-                    media: "(prefers-color-scheme: light)",
-                    href: `./${lightThemeLocation}`,
+                if (bundle.name === defaultLight) {
+                    lightThemeLocation = bundle.fileName;
                 }
-            },
-        ];
-},
+            }
+            return [
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        type: "text/css",
+                        media: "(prefers-color-scheme: dark)",
+                        href: `./${darkThemeLocation}`,
+                    }
+                },
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        type: "text/css",
+                        media: "(prefers-color-scheme: light)",
+                        href: `./${lightThemeLocation}`,
+                    }
+                },
+            ];
+        },
 
-generateBundle(_, bundle) {
-    const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
-    for (const [location, chunkArray] of chunkMap) {
-        const manifest = require(`${location}/manifest.json`);
-        const compiledVariables = options.compiledVariables.get(location);
-        const derivedVariables = compiledVariables["derived-variables"];
-        const icon = compiledVariables["icon"];
-        manifest.source = {
-            "built-asset": chunkArray.map(chunk => assetMap.get(chunk.fileName).fileName),
-            "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
-            "derived-variables": derivedVariables,
-            "icon": icon
-        };
-        const name = `theme-${manifest.name}.json`;
-        this.emitFile({
-            type: "asset",
-            name,
-            source: JSON.stringify(manifest),
-        });
-    }
-}
+        generateBundle(_, bundle) {
+            const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
+            for (const [location, chunkArray] of chunkMap) {
+                const manifest = require(`${location}/manifest.json`);
+                const compiledVariables = options.compiledVariables.get(location);
+                const derivedVariables = compiledVariables["derived-variables"];
+                const icon = compiledVariables["icon"];
+                manifest.source = {
+                    "built-asset": chunkArray.map(chunk => assetMap.get(chunk.fileName).fileName),
+                    "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
+                    "derived-variables": derivedVariables,
+                    "icon": icon
+                };
+                const name = `theme-${manifest.name}.json`;
+                this.emitFile({
+                    type: "asset",
+                    name,
+                    source: JSON.stringify(manifest),
+                });
+            }
+        },
     }
 }

From 49535807bf1b60c3e8d4dbabacd6108c80e98d04 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 10 Apr 2022 14:59:08 +0530
Subject: [PATCH 56/85] Do not run plugin on runtime theme

---
 scripts/postcss/css-url-processor.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scripts/postcss/css-url-processor.js b/scripts/postcss/css-url-processor.js
index 1a0e4fdf..c050a898 100644
--- a/scripts/postcss/css-url-processor.js
+++ b/scripts/postcss/css-url-processor.js
@@ -68,6 +68,11 @@ module.exports = (opts = {}) => {
         postcssPlugin: "postcss-url-to-variable",
 
         Once(root, {result}) {
+            const cssFileLocation = root.source.input.from;
+            if (cssFileLocation.includes("type=runtime")) {
+                // If this is a runtime theme, don't process urls.
+                return;
+            }
             /*
             postcss-compile-variables should have sent the list of resolved colours down via results
             */

From 6456d4ef7627ec51f1a8e3bdce618e0e9ffc21d3 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Sun, 10 Apr 2022 14:59:42 +0530
Subject: [PATCH 57/85] Cache cssPath

---
 scripts/postcss/css-url-processor.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/postcss/css-url-processor.js b/scripts/postcss/css-url-processor.js
index c050a898..3ae7c60d 100644
--- a/scripts/postcss/css-url-processor.js
+++ b/scripts/postcss/css-url-processor.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 const valueParser = require("postcss-value-parser");
 const  resolve = require("path").resolve;
+let cssPath;
 
 function colorsFromURL(url, colorMap) {
     const params = new URL(`file://${url}`).searchParams;
@@ -44,7 +45,6 @@ function processURL(decl, replacer, colorMap) {
         }
         const urlStringNode = node.nodes[0];
         const oldURL = urlStringNode.value;
-        const cssPath = decl.source?.input.file.replace(/[^/]*$/, "");
         const oldURLAbsolute = resolve(cssPath, oldURL);
         const colors  = colorsFromURL(oldURLAbsolute, colorMap);
         if (!colors) {
@@ -84,6 +84,7 @@ module.exports = (opts = {}) => {
             Go through each declaration and if it contains an URL, replace the url with the result
             of running replacer(url)
             */
+            cssPath = root.source?.input.file.replace(/[^/]*$/, "");
             root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
         },
     };

From 36782fb4feb83d31f57567f12eb175325608ee7f Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 12 Apr 2022 19:44:29 +0530
Subject: [PATCH 58/85] Use unique filenames

Otherwise newly produced svgs will replace other svgs produced earlier
in the build.
---
 scripts/postcss/svg-colorizer.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/scripts/postcss/svg-colorizer.js b/scripts/postcss/svg-colorizer.js
index 7d527ddb..a3110693 100644
--- a/scripts/postcss/svg-colorizer.js
+++ b/scripts/postcss/svg-colorizer.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 const fs = require("fs");
 const path = require("path");
+const {randomUUID} = require('crypto');
 /**
  * Builds a new svg with the colors replaced and returns its location.
  * @param {string} svgLocation The location of the input svg file
@@ -30,6 +31,8 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
         throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
     }
     const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1];
+    // give unique names so that this svg does not replace other versions of the same svg
+    const outputName = `${fileName.substring(0, fileName.length - 4)}-${randomUUID()}.svg`;
     const outputPath = path.resolve(__dirname, "../../.tmp");
     try {
        fs.mkdirSync(outputPath);
@@ -39,7 +42,7 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
             throw e;
         }
     }
-    const outputFile = `${outputPath}/${fileName}`;
+    const outputFile = `${outputPath}/${outputName}`;
     fs.writeFileSync(outputFile, coloredSVGCode);
     return outputFile;
 }

From 25a8521efcd7751db4ae8b01c60a21b5f5bf70ea Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 12 Apr 2022 20:15:14 +0530
Subject: [PATCH 59/85] Use hash instead of UUID

---
 scripts/postcss/svg-colorizer.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/scripts/postcss/svg-colorizer.js b/scripts/postcss/svg-colorizer.js
index a3110693..95355ea8 100644
--- a/scripts/postcss/svg-colorizer.js
+++ b/scripts/postcss/svg-colorizer.js
@@ -16,7 +16,14 @@ limitations under the License.
 
 const fs = require("fs");
 const path = require("path");
-const {randomUUID} = require('crypto');
+const xxhash = require('xxhashjs');
+
+function createHash(content) {
+    const hasher = new xxhash.h32(0);
+    hasher.update(content);
+    return hasher.digest();
+}
+
 /**
  * Builds a new svg with the colors replaced and returns its location.
  * @param {string} svgLocation The location of the input svg file
@@ -31,8 +38,7 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
         throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
     }
     const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1];
-    // give unique names so that this svg does not replace other versions of the same svg
-    const outputName = `${fileName.substring(0, fileName.length - 4)}-${randomUUID()}.svg`;
+    const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`;
     const outputPath = path.resolve(__dirname, "../../.tmp");
     try {
        fs.mkdirSync(outputPath);

From 743bd0db1c6496e359561630230d62fd64305046 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 12 Apr 2022 20:39:04 +0530
Subject: [PATCH 60/85] Support dark mode and remove dev script tag

---
 .../rollup-plugin-build-themes.js             | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index eb063c72..14d306e8 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -111,6 +111,7 @@ module.exports = function buildThemes(options) {
         },
 
         async buildStart() {
+            if (isDevelopment) { return; }
             const { manifestLocations } = options;
             for (const location of manifestLocations) {
                 manifest = require(`${location}/manifest.json`);
@@ -130,7 +131,7 @@ module.exports = function buildThemes(options) {
                     // emit the css as built theme bundle
                     this.emitFile({
                         type: "chunk",
-                        id: `${location}/theme.css?variant=${variant}`,
+                        id: `${location}/theme.css?variant=${variant}${details.dark? "&dark=true": ""}`,
                         fileName,
                     });
                 }
@@ -145,7 +146,7 @@ module.exports = function buildThemes(options) {
 
         resolveId(id) {
             if (id.startsWith(virtualModuleId)) {
-                return isDevelopment? '\0' + id: false;
+                return '\0' + id;
             }
         },
 
@@ -165,7 +166,9 @@ module.exports = function buildThemes(options) {
                     switch (file) {
                         case "index.js": {
                             const location = findLocationFromThemeName(theme, options.manifestLocations);
-                            return `import "${path.resolve(`${location}/theme.css`)}";` +
+                            const manifest = findManifestFromThemeName(theme, options.manifestLocations);
+                            const isDark = manifest.values.variants[variant].dark;
+                            return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` +
                                 `import "@theme/${theme}/${variant}/variables.css"`;
                         }
                         case "variables.css": { 
@@ -178,7 +181,7 @@ module.exports = function buildThemes(options) {
                 }
             }
             else {
-                const result = id.match(/(.+)\/theme.css\?variant=(.+)/);
+                const result = id.match(/(.+)\/theme.css\?variant=([^&]+)/);
                 if (result) {
                     const [, location, variant] = result;
                     const cssSource = await readCSSSource(location);
@@ -189,6 +192,18 @@ module.exports = function buildThemes(options) {
             }
         },
 
+        transform(code, id) {
+            if (isDevelopment) {
+                return;
+            }
+            // Removes develop-only script tag; this cannot be done in transformIndexHtml hook.
+            const devScriptTag = /<script type="module"> import "@theme\/.+"; <\/script>/;
+            if (id.endsWith("index.html")) {
+                const htmlWithoutDevScript = code.replace(devScriptTag, "");
+                return htmlWithoutDevScript
+            }
+        },
+
         transformIndexHtml(_, ctx) {
             if (isDevelopment) {
                 // Don't add default stylesheets to index.html on dev
@@ -223,7 +238,7 @@ module.exports = function buildThemes(options) {
                     }
                 },
             ];
-        },
+},
 
         generateBundle(_, bundle) {
             const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);

From 0b241db058d143a022269213c1d8494a36eb9e32 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 12 Apr 2022 20:57:03 +0530
Subject: [PATCH 61/85] Produce a mapping of aliases to resolved colors

---
 scripts/postcss/css-compile-variables.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index fa584caa..654f1193 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -153,8 +153,13 @@ module.exports = (opts = {}) => {
             if (opts.compiledVariables){
                 populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
             }
-            // Publish both the base-variables and derived-variables to the other postcss-plugins
-            const combinedMap = new Map([...baseVariables, ...resolvedMap]);
+            // Also produce a mapping from alias to completely resolved color
+            const resolvedAliasMap = new Map();
+            aliasMap.forEach((value, key) => {
+                resolvedAliasMap.set(key, resolvedMap.get(value));
+            });
+            // Publish the base-variables, derived-variables and resolved aliases to the other postcss-plugins
+            const combinedMap = new Map([...baseVariables, ...resolvedMap, ...resolvedAliasMap]);
             result.messages.push({
                 type: "resolved-variable-map",
                 plugin: "postcss-compile-variables",

From bb9954a36c0fb0fd2c0d0427c135e79556c818a7 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 12 Apr 2022 20:57:43 +0530
Subject: [PATCH 62/85] Let derive function know if theme is dark

---
 scripts/postcss/css-compile-variables.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index 654f1193..cc822517 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -33,6 +33,7 @@ const valueParser = require("postcss-value-parser");
 let aliasMap;
 let resolvedMap;
 let baseVariables;
+let isDark;
 
 function getValueFromAlias(alias) {
     const derivedVariable = aliasMap.get(alias);
@@ -78,7 +79,7 @@ function resolveDerivedVariable(decl, derive) {
             if (!value) {
                 throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`);
             }
-            const derivedValue = derive(value, operation, argument);
+            const derivedValue = derive(value, operation, argument, isDark);
             resolvedMap.set(wholeVariable, derivedValue);
         }
     }
@@ -134,6 +135,8 @@ module.exports = (opts = {}) => {
     aliasMap = new Map();
     resolvedMap = new Map();
     baseVariables = new Map();
+    isDark = false;
+
     return {
         postcssPlugin: "postcss-compile-variables",
 
@@ -143,6 +146,7 @@ module.exports = (opts = {}) => {
                 // If this is a runtime theme, don't derive variables.
                 return;
             }
+            isDark = cssFileLocation.includes("dark=true");
             /*
             Go through the CSS file once to extract all aliases and base variables.
             We use these when resolving derived variables later.

From 39bc827aaf095145aa973289e2f79a6355f1b168 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 12 Apr 2022 20:58:14 +0530
Subject: [PATCH 63/85] Invert operation for dark theme

---
 scripts/postcss/color.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/scripts/postcss/color.js b/scripts/postcss/color.js
index f61dac1e..b1ef7073 100644
--- a/scripts/postcss/color.js
+++ b/scripts/postcss/color.js
@@ -16,8 +16,17 @@ limitations under the License.
 
 const offColor = require("off-color").offColor;
 
-module.exports.derive = function (value, operation, argument) {
+module.exports.derive = function (value, operation, argument, isDark) {
     const argumentAsNumber = parseInt(argument);
+    if (isDark) {
+        // For dark themes, invert the operation
+        if (operation === 'darker') {
+            operation = "lighter";
+        }
+        else if (operation === 'lighter') {
+            operation = "darker";
+        }
+    }
     switch (operation) {
         case "darker": {
             const newColorString = offColor(value).darken(argumentAsNumber / 100).hex();

From efef7147afe50a4ce84f305bdf833481270ef129 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 12 Apr 2022 21:02:30 +0530
Subject: [PATCH 64/85] Modify jsdoc comment

---
 scripts/postcss/css-compile-variables.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js
index cc822517..0f58a635 100644
--- a/scripts/postcss/css-compile-variables.js
+++ b/scripts/postcss/css-compile-variables.js
@@ -124,6 +124,7 @@ function populateMapWithDerivedVariables(map, cssFileLocation) {
  * @param {string} value - The base value on which an operation is applied
  * @param {string} operation - The operation to be applied (eg: darker, lighter...)
  * @param {string} argument - The argument for this operation
+ * @param {boolean} isDark - Indicates whether this theme is dark
  */
 /**
  * 

From 14523ecc5d444a9cd3784f4190249e4fc0aef10a Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 12:40:49 +0530
Subject: [PATCH 65/85] Use new theme option in vite-config

---
 .../rollup-plugin-build-themes.js             | 45 +++++--------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index 14d306e8..34dae562 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -31,29 +31,6 @@ function appendVariablesToCSS(variables, cssSource) {
     return cssSource + getRootSectionWithVariables(variables);
 }
 
-function findLocationFromThemeName(name, locations) {
-    const themeLocation = locations.find(location => {
-        const manifest = require(`${location}/manifest.json`);
-        if (manifest.name === name) {
-            return true;
-        }
-    });
-    if (!themeLocation) {
-        throw new Error(`Cannot find location from theme name "${name}"`);
-    }
-    return themeLocation;
-}
-
-function findManifestFromThemeName(name, locations) {
-    for (const location of locations) {
-        const manifest = require(`${location}/manifest.json`);
-        if (manifest.name === name) {
-            return manifest;
-        }
-    }
-    throw new Error(`Cannot find manifest from theme name "${name}"`);
-}
-
 function parseBundle(bundle) {
     const chunkMap = new Map();
     const assetMap = new Map();
@@ -112,15 +89,14 @@ module.exports = function buildThemes(options) {
 
         async buildStart() {
             if (isDevelopment) { return; }
-            const { manifestLocations } = options;
-            for (const location of manifestLocations) {
+            const { themeConfig } = options;
+            for (const [name, location] of Object.entries(themeConfig.themes)) {
                 manifest = require(`${location}/manifest.json`);
                 variants = manifest.values.variants;
-                const themeName = manifest.name;
                 for (const [variant, details] of Object.entries(variants)) {
-                    const fileName = `theme-${themeName}-${variant}.css`;
-                    if (details.default) {
-                        // This is one of the default variants for this theme.
+                    const fileName = `theme-${name}-${variant}.css`;
+                    if (name === themeConfig.default && details.default) {
+                        // This is the default theme, stash  the file name for later
                         if (details.dark) {
                             defaultDark = fileName;
                         }
@@ -139,7 +115,7 @@ module.exports = function buildThemes(options) {
                 this.emitFile({
                     type: "chunk",
                     id: `${location}/theme.css?type=runtime`,
-                    fileName: `theme-${themeName}-runtime.css`,
+                    fileName: `theme-${name}-runtime.css`,
                 });
             }
         },
@@ -155,7 +131,7 @@ module.exports = function buildThemes(options) {
                 if (id.startsWith(resolvedVirtualModuleId)) {
                     let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
                     if (theme === "default") {
-                        theme = "Element";
+                        theme = "element";
                     }
                     if (!variant || variant === "default") {
                         variant = "light";
@@ -163,16 +139,15 @@ module.exports = function buildThemes(options) {
                     if (!file) {
                         file = "index.js";
                     }
+                    const location = options.themeConfig.themes[theme];
+                    const manifest = require(`${location}/manifest.json`);
                     switch (file) {
                         case "index.js": {
-                            const location = findLocationFromThemeName(theme, options.manifestLocations);
-                            const manifest = findManifestFromThemeName(theme, options.manifestLocations);
                             const isDark = manifest.values.variants[variant].dark;
                             return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` +
                                 `import "@theme/${theme}/${variant}/variables.css"`;
                         }
                         case "variables.css": { 
-                            const manifest = findManifestFromThemeName(theme, options.manifestLocations);
                             const variables = manifest.values.variants[variant].variables;
                             const css =  getRootSectionWithVariables(variables);
                             return css;
@@ -238,7 +213,7 @@ module.exports = function buildThemes(options) {
                     }
                 },
             ];
-},
+        },
 
         generateBundle(_, bundle) {
             const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);

From 825c9847fe756351f4662146968fcb78cb32d6c3 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 12:56:14 +0530
Subject: [PATCH 66/85] Don't hardcode theme/variant names

---
 .../rollup-plugin-build-themes.js             | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index 34dae562..ef1eb78b 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -131,24 +131,27 @@ module.exports = function buildThemes(options) {
                 if (id.startsWith(resolvedVirtualModuleId)) {
                     let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
                     if (theme === "default") {
-                        theme = "element";
+                        theme = options.themeConfig.default;
                     }
+                    const location = options.themeConfig.themes[theme];
+                    const manifest = require(`${location}/manifest.json`);
+                    const variants = manifest.values.variants;
                     if (!variant || variant === "default") {
-                        variant = "light";
+                        // choose the first default variant for now
+                        // this will need to support light/dark variants as well
+                        variant = Object.keys(variants).find(variantName => variants[variantName].default);
                     }
                     if (!file) {
                         file = "index.js";
                     }
-                    const location = options.themeConfig.themes[theme];
-                    const manifest = require(`${location}/manifest.json`);
                     switch (file) {
                         case "index.js": {
-                            const isDark = manifest.values.variants[variant].dark;
+                            const isDark = variants[variant].dark;
                             return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` +
                                 `import "@theme/${theme}/${variant}/variables.css"`;
                         }
                         case "variables.css": { 
-                            const variables = manifest.values.variants[variant].variables;
+                            const variables = variants[variant].variables;
                             const css =  getRootSectionWithVariables(variables);
                             return css;
                         }
@@ -161,7 +164,7 @@ module.exports = function buildThemes(options) {
                     const [, location, variant] = result;
                     const cssSource = await readCSSSource(location);
                     const config = variants[variant];
-                    return await appendVariablesToCSS(config.variables, cssSource);
+                    return appendVariablesToCSS(config.variables, cssSource);
                 }
                 return null;
             }
@@ -213,7 +216,7 @@ module.exports = function buildThemes(options) {
                     }
                 },
             ];
-        },
+},
 
         generateBundle(_, bundle) {
             const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);

From bf0cdcd3f1b1d536f5c231b11b3d97f6290268f1 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 13:39:20 +0530
Subject: [PATCH 67/85] Add explaining comment

---
 .../build-plugins/rollup-plugin-build-themes.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index ef1eb78b..e7a2bb2b 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -128,6 +128,11 @@ module.exports = function buildThemes(options) {
 
         async load(id) {
             if (isDevelopment) {
+                /**
+                 * To load the theme during dev, we need to take a different approach because emitFile is not supported in dev.
+                 * We solve this by resolving virtual file "@theme/name/variant" into the necessary css import.
+                 * This virtual file import is removed when hydrogen is built (see transform hook).
+                 */
                 if (id.startsWith(resolvedVirtualModuleId)) {
                     let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
                     if (theme === "default") {
@@ -174,11 +179,17 @@ module.exports = function buildThemes(options) {
             if (isDevelopment) {
                 return;
             }
-            // Removes develop-only script tag; this cannot be done in transformIndexHtml hook.
-            const devScriptTag = /<script type="module"> import "@theme\/.+"; <\/script>/;
+            /**
+             * Removes develop-only script tag; this cannot be done in transformIndexHtml hook because
+             * by the time that hook runs, the import is added to the bundled js file which would
+             * result in a runtime error.
+             */
+
+            const devScriptTag =
+                /<script type="module"> import "@theme\/.+"; <\/script>/;
             if (id.endsWith("index.html")) {
                 const htmlWithoutDevScript = code.replace(devScriptTag, "");
-                return htmlWithoutDevScript
+                return htmlWithoutDevScript;
             }
         },
 

From 061dc5f82480c0e16f41734f840ffd25b9663473 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 6 Apr 2022 15:17:52 +0530
Subject: [PATCH 68/85] 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 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.28 2.88C17.28 1.28942 18.5694 0 20.16 0C30.7639 0 39.36 8.59613 39.36 19.2C39.36 20.7906 38.0706 22.08 36.48 22.08C34.8894 22.08 33.6 20.7906 33.6 19.2C33.6 11.7773 27.5827 5.76 20.16 5.76C18.5694 5.76 17.28 4.47058 17.28 2.88Z" fill="#0DBD8B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M30.72 45.12C30.72 46.7106 29.4306 48 27.84 48C17.2361 48 8.64 39.4039 8.64 28.8C8.64 27.2094 9.92942 25.92 11.52 25.92C13.1106 25.92 14.4 27.2094 14.4 28.8C14.4 36.2227 20.4173 42.24 27.84 42.24C29.4306 42.24 30.72 43.5294 30.72 45.12Z" fill="#0DBD8B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.88 30.72C1.28942 30.72 -5.63623e-08 29.4306 -1.25889e-07 27.84C-5.89399e-07 17.2361 8.59613 8.63997 19.2 8.63997C20.7906 8.63997 22.08 9.92939 22.08 11.52C22.08 13.1106 20.7906 14.4 19.2 14.4C11.7773 14.4 5.76 20.4173 5.76 27.84C5.76 29.4306 4.47058 30.72 2.88 30.72Z" fill="#0DBD8B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M45.12 17.28C46.7106 17.28 48 18.5694 48 20.16C48 30.7639 39.4039 39.36 28.8 39.36C27.2094 39.36 25.92 38.0706 25.92 36.48C25.92 34.8894 27.2094 33.6 28.8 33.6C36.2227 33.6 42.24 27.5827 42.24 20.16C42.24 18.5694 43.5294 17.28 45.12 17.28Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.28 2.88C17.28 1.28942 18.5694 0 20.16 0C30.7639 0 39.36 8.59613 39.36 19.2C39.36 20.7906 38.0706 22.08 36.48 22.08C34.8894 22.08 33.6 20.7906 33.6 19.2C33.6 11.7773 27.5827 5.76 20.16 5.76C18.5694 5.76 17.28 4.47058 17.28 2.88Z" fill="#ff00ff"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.72 45.12C30.72 46.7106 29.4306 48 27.84 48C17.2361 48 8.64 39.4039 8.64 28.8C8.64 27.2094 9.92942 25.92 11.52 25.92C13.1106 25.92 14.4 27.2094 14.4 28.8C14.4 36.2227 20.4173 42.24 27.84 42.24C29.4306 42.24 30.72 43.5294 30.72 45.12Z" fill="#ff00ff"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.88 30.72C1.28942 30.72 -5.63623e-08 29.4306 -1.25889e-07 27.84C-5.89399e-07 17.2361 8.59613 8.63997 19.2 8.63997C20.7906 8.63997 22.08 9.92939 22.08 11.52C22.08 13.1106 20.7906 14.4 19.2 14.4C11.7773 14.4 5.76 20.4173 5.76 27.84C5.76 29.4306 4.47058 30.72 2.88 30.72Z" fill="#ff00ff"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.12 17.28C46.7106 17.28 48 18.5694 48 20.16C48 30.7639 39.4039 39.36 28.8 39.36C27.2094 39.36 25.92 38.0706 25.92 36.48C25.92 34.8894 27.2094 33.6 28.8 33.6C36.2227 33.6 42.24 27.5827 42.24 20.16C42.24 18.5694 43.5294 17.28 45.12 17.28Z" fill="#ff00ff"/>
 </svg>
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" />
   </g>
   <defs
diff --git a/src/platform/web/ui/css/themes/element/icons/chevron-left.svg b/src/platform/web/ui/css/themes/element/icons/chevron-left.svg
index c686cf88..9aaed37f 100644
--- a/src/platform/web/ui/css/themes/element/icons/chevron-left.svg
+++ b/src/platform/web/ui/css/themes/element/icons/chevron-left.svg
@@ -1,6 +1,6 @@
 <svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#ff00ff"/>
 </g>
 <defs>
 <clipPath id="clip0">
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 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 18L15 12L9 6" stroke="#8D99A5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 18L15 12L9 6" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
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 @@
 <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.96967 10.7197C0.676777 10.4268 0.676007 9.95117 0.967952 9.65733L4.66823 5.93303L0.955922 2.22072C0.663029 1.92782 0.662259 1.45218 0.954204 1.15834C1.24615 0.864504 1.72025 0.863737 2.01315 1.15663L6.25579 5.39927C6.54868 5.69216 6.54945 6.1678 6.2575 6.46164L2.02861 10.718C1.73667 11.0118 1.26256 11.0126 0.96967 10.7197Z" fill="#737D8C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.96967 10.7197C0.676777 10.4268 0.676007 9.95117 0.967952 9.65733L4.66823 5.93303L0.955922 2.22072C0.663029 1.92782 0.662259 1.45218 0.954204 1.15834C1.24615 0.864504 1.72025 0.863737 2.01315 1.15663L6.25579 5.39927C6.54868 5.69216 6.54945 6.1678 6.2575 6.46164L2.02861 10.718C1.73667 11.0118 1.26256 11.0126 0.96967 10.7197Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5 6L7.5 9L10.5 12" stroke="#8D99A5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 6L7.5 9L10.5 12" stroke="#ff00ff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
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 @@
 <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round"/>
 </svg>
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 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4ZM1.5 4.75C1.5 4.19772 1.94772 3.75 2.5 3.75H3.5C4.05228 3.75 4.5 4.19772 4.5 4.75V11.25C4.5 11.8023 4.05228 12.25 3.5 12.25H2.5C1.94772 12.25 1.5 11.8023 1.5 11.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V11.25C6 11.8023 6.44772 12.25 7 12.25H13.5C14.0523 12.25 14.5 11.8023 14.5 11.25V4.75C14.5 4.19772 14.0523 3.75 13.5 3.75H7Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4ZM1.5 4.75C1.5 4.19772 1.94772 3.75 2.5 3.75H3.5C4.05228 3.75 4.5 4.19772 4.5 4.75V11.25C4.5 11.8023 4.05228 12.25 3.5 12.25H2.5C1.94772 12.25 1.5 11.8023 1.5 11.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V11.25C6 11.8023 6.44772 12.25 7 12.25H13.5C14.0523 12.25 14.5 11.8023 14.5 11.25V4.75C14.5 4.19772 14.0523 3.75 13.5 3.75H7Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round"/>
 </svg>
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 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.38 12.27C15.76 11.42 16 10.43 16 9.27V3.05L8.99997 1L5.21997 2.11L15.38 12.27Z" fill="white"/>
-<path d="M2.21 2.98999L2 3.04999V9.26999C2 15.63 9 17 9 17C9 17 11.71 16.47 13.76 14.53L2.21 2.98999Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L16.7203 15.6597C17.0132 15.9526 17.0132 16.4274 16.7203 16.7203C16.4274 17.0132 15.9526 17.0132 15.6597 16.7203L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="white"/>
+<path d="M15.38 12.27C15.76 11.42 16 10.43 16 9.27V3.05L8.99997 1L5.21997 2.11L15.38 12.27Z" fill="#ff00ff"/>
+<path d="M2.21 2.98999L2 3.04999V9.26999C2 15.63 9 17 9 17C9 17 11.71 16.47 13.76 14.53L2.21 2.98999Z" fill="#ff00ff"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L16.7203 15.6597C17.0132 15.9526 17.0132 16.4274 16.7203 16.7203C16.4274 17.0132 15.9526 17.0132 15.6597 16.7203L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2 9.27V3.05L9 1L16 3.05V9.27C16 15.63 9 17 9 17C9 17 2 15.63 2 9.27Z" fill="white"/>
+    <path d="M2 9.27V3.05L9 1L16 3.05V9.27C16 15.63 9 17 9 17C9 17 2 15.63 2 9.27Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4ZM2.5 3.75C1.94772 3.75 1.5 4.19772 1.5 4.75V11.25C1.5 11.8023 1.94772 12.25 2.5 12.25H3.5C4.05228 12.25 4.5 11.8023 4.5 11.25V4.75C4.5 4.19772 4.05228 3.75 3.5 3.75H2.5ZM11 9.75C11 9.19771 11.4477 8.75 12 8.75H13.5C14.0523 8.75 14.5 9.19772 14.5 9.75V11.25C14.5 11.8023 14.0523 12.25 13.5 12.25H12C11.4477 12.25 11 11.8023 11 11.25V9.75ZM7 8.75C6.44772 8.75 6 9.19771 6 9.75V11.25C6 11.8023 6.44772 12.25 7 12.25H8.5C9.05228 12.25 9.5 11.8023 9.5 11.25V9.75C9.5 9.19772 9.05229 8.75 8.5 8.75H7ZM11 4.75C11 4.19772 11.4477 3.75 12 3.75H13.5C14.0523 3.75 14.5 4.19772 14.5 4.75V6.25C14.5 6.80228 14.0523 7.25 13.5 7.25H12C11.4477 7.25 11 6.80228 11 6.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V6.25C6 6.80228 6.44772 7.25 7 7.25H8.5C9.05228 7.25 9.5 6.80228 9.5 6.25V4.75C9.5 4.19772 9.05229 3.75 8.5 3.75H7Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4ZM2.5 3.75C1.94772 3.75 1.5 4.19772 1.5 4.75V11.25C1.5 11.8023 1.94772 12.25 2.5 12.25H3.5C4.05228 12.25 4.5 11.8023 4.5 11.25V4.75C4.5 4.19772 4.05228 3.75 3.5 3.75H2.5ZM11 9.75C11 9.19771 11.4477 8.75 12 8.75H13.5C14.0523 8.75 14.5 9.19772 14.5 9.75V11.25C14.5 11.8023 14.0523 12.25 13.5 12.25H12C11.4477 12.25 11 11.8023 11 11.25V9.75ZM7 8.75C6.44772 8.75 6 9.19771 6 9.75V11.25C6 11.8023 6.44772 12.25 7 12.25H8.5C9.05228 12.25 9.5 11.8023 9.5 11.25V9.75C9.5 9.19772 9.05229 8.75 8.5 8.75H7ZM11 4.75C11 4.19772 11.4477 3.75 12 3.75H13.5C14.0523 3.75 14.5 4.19772 14.5 4.75V6.25C14.5 6.80228 14.0523 7.25 13.5 7.25H12C11.4477 7.25 11 6.80228 11 6.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V6.25C6 6.80228 6.44772 7.25 7 7.25H8.5C9.05228 7.25 9.5 6.80228 9.5 6.25V4.75C9.5 4.19772 9.05229 3.75 8.5 3.75H7Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="25" height="24" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 19C9 19 18 15.2 18 9.50002V2.85001L9 1.52588e-05L0 2.85001L0 9.50002C0 15.2 9 19 9 19Z" fill="#C1C6CD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 19C9 19 18 15.2 18 9.50002V2.85001L9 1.52588e-05L0 2.85001L0 9.50002C0 15.2 9 19 9 19Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10ZM11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15.5H13.5C14.0523 15.5 14.5 15.9477 14.5 16.5C14.5 17.0523 14.0523 17.5 13.5 17.5H12C11.4477 17.5 11 17.0523 11 16.5L11 13Z" fill="#8d99a5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10ZM11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15.5H13.5C14.0523 15.5 14.5 15.9477 14.5 16.5C14.5 17.0523 14.0523 17.5 13.5 17.5H12C11.4477 17.5 11 17.0523 11 16.5L11 13Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.099 9.51084L10.4407 17.1692C8.48696 19.1229 5.31938 19.1229 3.36567 17.1692C1.41196 15.2155 1.41196 12.0479 3.36567 10.0942L11.024 2.43584C12.3265 1.13337 14.4382 1.13337 15.7407 2.43584C17.0431 3.73831 17.0431 5.85003 15.7407 7.1525L8.074 14.8108C7.42277 15.4621 6.36691 15.4621 5.71567 14.8108C5.06444 14.1596 5.06444 13.1037 5.71567 12.4525L12.7907 5.38584" stroke="#61708B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.099 9.51084L10.4407 17.1692C8.48696 19.1229 5.31938 19.1229 3.36567 17.1692C1.41196 15.2155 1.41196 12.0479 3.36567 10.0942L11.024 2.43584C12.3265 1.13337 14.4382 1.13337 15.7407 2.43584C17.0431 3.73831 17.0431 5.85003 15.7407 7.1525L8.074 14.8108C7.42277 15.4621 6.36691 15.4621 5.71567 14.8108C5.06444 14.1596 5.06444 13.1037 5.71567 12.4525L12.7907 5.38584" stroke="#ff00ff" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
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 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.74986 3.55554C8.74986 3.14133 8.41408 2.80554 7.99986 2.80554C7.58565 2.80554 7.24986 3.14133 7.24986 3.55554V7.24999L3.55542 7.24999C3.14121 7.24999 2.80542 7.58577 2.80542 7.99999C2.80542 8.4142 3.14121 8.74999 3.55542 8.74999L7.24987 8.74999V12.4444C7.24987 12.8586 7.58565 13.1944 7.99987 13.1944C8.41408 13.1944 8.74987 12.8586 8.74987 12.4444V8.74999L12.4443 8.74999C12.8585 8.74999 13.1943 8.4142 13.1943 7.99999C13.1943 7.58577 12.8585 7.24999 12.4443 7.24999L8.74986 7.24999V3.55554Z" fill="#8E99A4"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.74986 3.55554C8.74986 3.14133 8.41408 2.80554 7.99986 2.80554C7.58565 2.80554 7.24986 3.14133 7.24986 3.55554V7.24999L3.55542 7.24999C3.14121 7.24999 2.80542 7.58577 2.80542 7.99999C2.80542 8.4142 3.14121 8.74999 3.55542 8.74999L7.24987 8.74999V12.4444C7.24987 12.8586 7.58565 13.1944 7.99987 13.1944C8.41408 13.1944 8.74987 12.8586 8.74987 12.4444V8.74999L12.4443 8.74999C12.8585 8.74999 13.1943 8.4142 13.1943 7.99999C13.1943 7.58577 12.8585 7.24999 12.4443 7.24999L8.74986 7.24999V3.55554Z" fill="#ff00ff"/>
 </svg>
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 @@
 <mask id="path-1-inside-1" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M18.1502 21.1214C16.3946 22.3074 14.2782 23 12 23C9.52367 23 7.23845 22.1817 5.4 20.8008C2.72821 18.794 1 15.5988 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 15.797 21.0762 19.1446 18.1502 21.1214ZM12 12.55C13.8225 12.55 15.3 10.9494 15.3 8.975C15.3 7.00058 13.8225 5.4 12 5.4C10.1775 5.4 8.7 7.00058 8.7 8.975C8.7 10.9494 10.1775 12.55 12 12.55ZM12 20.8C14.3782 20.8 16.536 19.8566 18.1197 18.3237C17.1403 15.9056 14.7693 14.2 12 14.2C9.23066 14.2 6.85969 15.9056 5.88028 18.3237C7.46399 19.8566 9.62183 20.8 12 20.8Z"/>
 </mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1502 21.1214C16.3946 22.3074 14.2782 23 12 23C9.52367 23 7.23845 22.1817 5.4 20.8008C2.72821 18.794 1 15.5988 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 15.797 21.0762 19.1446 18.1502 21.1214ZM12 12.55C13.8225 12.55 15.3 10.9494 15.3 8.975C15.3 7.00058 13.8225 5.4 12 5.4C10.1775 5.4 8.7 7.00058 8.7 8.975C8.7 10.9494 10.1775 12.55 12 12.55ZM12 20.8C14.3782 20.8 16.536 19.8566 18.1197 18.3237C17.1403 15.9056 14.7693 14.2 12 14.2C9.23066 14.2 6.85969 15.9056 5.88028 18.3237C7.46399 19.8566 9.62183 20.8 12 20.8Z" fill="#C1C6CD"/>
-<path d="M18.1502 21.1214L18.9339 22.2814L18.1502 21.1214ZM5.4 20.8008L4.55919 21.9202H4.55919L5.4 20.8008ZM18.1197 18.3237L19.0934 19.3296L19.7717 18.6731L19.4173 17.7981L18.1197 18.3237ZM5.88028 18.3237L4.58268 17.7981L4.22829 18.6731L4.90659 19.3296L5.88028 18.3237ZM12 24.4C14.5662 24.4 16.9541 23.619 18.9339 22.2814L17.3665 19.9613C15.835 20.9959 13.9902 21.6 12 21.6V24.4ZM4.55919 21.9202C6.63176 23.477 9.21011 24.4 12 24.4V21.6C9.83723 21.6 7.84514 20.8865 6.24081 19.6814L4.55919 21.9202ZM-0.399998 12C-0.399998 16.0577 1.55052 19.6603 4.55919 21.9202L6.24081 19.6814C3.90591 17.9276 2.4 15.1399 2.4 12H-0.399998ZM12 -0.399998C5.15167 -0.399998 -0.399998 5.15167 -0.399998 12H2.4C2.4 6.69807 6.69807 2.4 12 2.4V-0.399998ZM24.4 12C24.4 5.15167 18.8483 -0.399998 12 -0.399998V2.4C17.3019 2.4 21.6 6.69807 21.6 12H24.4ZM18.9339 22.2814C22.2288 20.0554 24.4 16.2815 24.4 12H21.6C21.6 15.3124 19.9236 18.2337 17.3665 19.9613L18.9339 22.2814ZM13.9 8.975C13.9 10.2838 12.9459 11.15 12 11.15V13.95C14.6991 13.95 16.7 11.615 16.7 8.975H13.9ZM12 6.8C12.9459 6.8 13.9 7.66616 13.9 8.975H16.7C16.7 6.335 14.6991 4 12 4V6.8ZM10.1 8.975C10.1 7.66616 11.0541 6.8 12 6.8V4C9.30086 4 7.3 6.335 7.3 8.975H10.1ZM12 11.15C11.0541 11.15 10.1 10.2838 10.1 8.975H7.3C7.3 11.615 9.30086 13.95 12 13.95V11.15ZM17.146 17.3178C15.8129 18.6081 14.0004 19.4 12 19.4V22.2C14.756 22.2 17.2591 21.1051 19.0934 19.3296L17.146 17.3178ZM12 15.6C14.1797 15.6 16.0494 16.9415 16.8221 18.8493L19.4173 17.7981C18.2312 14.8697 15.359 12.8 12 12.8V15.6ZM7.17788 18.8493C7.95058 16.9415 9.8203 15.6 12 15.6V12.8C8.64102 12.8 5.7688 14.8697 4.58268 17.7981L7.17788 18.8493ZM12 19.4C9.99963 19.4 8.18709 18.6081 6.85397 17.3178L4.90659 19.3296C6.74088 21.1051 9.24402 22.2 12 22.2V19.4Z" fill="#C1C6CD" mask="url(#path-1-inside-1)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1502 21.1214C16.3946 22.3074 14.2782 23 12 23C9.52367 23 7.23845 22.1817 5.4 20.8008C2.72821 18.794 1 15.5988 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 15.797 21.0762 19.1446 18.1502 21.1214ZM12 12.55C13.8225 12.55 15.3 10.9494 15.3 8.975C15.3 7.00058 13.8225 5.4 12 5.4C10.1775 5.4 8.7 7.00058 8.7 8.975C8.7 10.9494 10.1775 12.55 12 12.55ZM12 20.8C14.3782 20.8 16.536 19.8566 18.1197 18.3237C17.1403 15.9056 14.7693 14.2 12 14.2C9.23066 14.2 6.85969 15.9056 5.88028 18.3237C7.46399 19.8566 9.62183 20.8 12 20.8Z" fill="#ff00ff"/>
+<path d="M18.1502 21.1214L18.9339 22.2814L18.1502 21.1214ZM5.4 20.8008L4.55919 21.9202H4.55919L5.4 20.8008ZM18.1197 18.3237L19.0934 19.3296L19.7717 18.6731L19.4173 17.7981L18.1197 18.3237ZM5.88028 18.3237L4.58268 17.7981L4.22829 18.6731L4.90659 19.3296L5.88028 18.3237ZM12 24.4C14.5662 24.4 16.9541 23.619 18.9339 22.2814L17.3665 19.9613C15.835 20.9959 13.9902 21.6 12 21.6V24.4ZM4.55919 21.9202C6.63176 23.477 9.21011 24.4 12 24.4V21.6C9.83723 21.6 7.84514 20.8865 6.24081 19.6814L4.55919 21.9202ZM-0.399998 12C-0.399998 16.0577 1.55052 19.6603 4.55919 21.9202L6.24081 19.6814C3.90591 17.9276 2.4 15.1399 2.4 12H-0.399998ZM12 -0.399998C5.15167 -0.399998 -0.399998 5.15167 -0.399998 12H2.4C2.4 6.69807 6.69807 2.4 12 2.4V-0.399998ZM24.4 12C24.4 5.15167 18.8483 -0.399998 12 -0.399998V2.4C17.3019 2.4 21.6 6.69807 21.6 12H24.4ZM18.9339 22.2814C22.2288 20.0554 24.4 16.2815 24.4 12H21.6C21.6 15.3124 19.9236 18.2337 17.3665 19.9613L18.9339 22.2814ZM13.9 8.975C13.9 10.2838 12.9459 11.15 12 11.15V13.95C14.6991 13.95 16.7 11.615 16.7 8.975H13.9ZM12 6.8C12.9459 6.8 13.9 7.66616 13.9 8.975H16.7C16.7 6.335 14.6991 4 12 4V6.8ZM10.1 8.975C10.1 7.66616 11.0541 6.8 12 6.8V4C9.30086 4 7.3 6.335 7.3 8.975H10.1ZM12 11.15C11.0541 11.15 10.1 10.2838 10.1 8.975H7.3C7.3 11.615 9.30086 13.95 12 13.95V11.15ZM17.146 17.3178C15.8129 18.6081 14.0004 19.4 12 19.4V22.2C14.756 22.2 17.2591 21.1051 19.0934 19.3296L17.146 17.3178ZM12 15.6C14.1797 15.6 16.0494 16.9415 16.8221 18.8493L19.4173 17.7981C18.2312 14.8697 15.359 12.8 12 12.8V15.6ZM7.17788 18.8493C7.95058 16.9415 9.8203 15.6 12 15.6V12.8C8.64102 12.8 5.7688 14.8697 4.58268 17.7981L7.17788 18.8493ZM12 19.4C9.99963 19.4 8.18709 18.6081 6.85397 17.3178L4.90659 19.3296C6.74088 21.1051 9.24402 22.2 12 22.2V19.4Z" fill="#ff00ff" mask="url(#path-1-inside-1)"/>
 </svg>
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 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7372 8.96458L1.89656 15.8816C0.963879 16.3478 -0.00645849 15.3477 0.449387 14.4353C0.449387 14.4353 2.16481 10.9711 2.63665 10.0637C3.10849 9.15633 3.64864 8.99926 8.6646 8.35098C8.85021 8.32697 9.00215 8.1869 9.00215 7.99982C9.00215 7.81307 8.85021 7.67301 8.6646 7.649C3.64864 7.00071 3.10849 6.84364 2.63665 5.93624C2.16481 5.02918 0.449387 1.56465 0.449387 1.56465C-0.00645849 0.65258 0.963879 -0.347862 1.89656 0.118344L15.7372 7.03573C16.5319 7.43257 16.5319 8.5674 15.7372 8.96458Z" fill="white"/>
+<path d="M15.7372 8.96458L1.89656 15.8816C0.963879 16.3478 -0.00645849 15.3477 0.449387 14.4353C0.449387 14.4353 2.16481 10.9711 2.63665 10.0637C3.10849 9.15633 3.64864 8.99926 8.6646 8.35098C8.85021 8.32697 9.00215 8.1869 9.00215 7.99982C9.00215 7.81307 8.85021 7.67301 8.6646 7.649C3.64864 7.00071 3.10849 6.84364 2.63665 5.93624C2.16481 5.02918 0.449387 1.56465 0.449387 1.56465C-0.00645849 0.65258 0.963879 -0.347862 1.89656 0.118344L15.7372 7.03573C16.5319 7.43257 16.5319 8.5674 15.7372 8.96458Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3625 9.2875C19.5625 9.8125 20.075 10.1625 20.6375 10.1625C21.3875 10.1625 22 10.775 22 11.525V12.475C22 13.225 21.3875 13.8375 20.6375 13.8375C20.075 13.8375 19.5625 14.1875 19.3625 14.7125C19.346 14.7538 19.3294 14.7958 19.3128 14.838C19.2538 14.9876 19.1932 15.1413 19.125 15.2875C18.8875 15.8 19 16.4 19.4 16.8C19.9375 17.325 19.9375 18.1875 19.4 18.725L18.725 19.4C18.2 19.9375 17.3375 19.9375 16.8 19.4C16.4125 19 15.8 18.8875 15.2875 19.125C15.1 19.2125 14.9125 19.2875 14.7125 19.3625C14.1875 19.5625 13.8375 20.075 13.8375 20.6375C13.8375 21.3875 13.225 22 12.475 22H11.525C10.775 22 10.1625 21.3875 10.1625 20.6375C10.1625 20.075 9.8125 19.5625 9.2875 19.3625C9.24617 19.346 9.20423 19.3294 9.16195 19.3128C9.01243 19.2538 8.85867 19.1932 8.7125 19.125C8.2 18.8875 7.6 19 7.2 19.4C6.675 19.9375 5.8125 19.9375 5.275 19.4L4.6 18.725C4.0625 18.2 4.0625 17.3375 4.6 16.8C5 16.4125 5.1125 15.8 4.875 15.2875C4.7875 15.1 4.7125 14.9125 4.6375 14.7125C4.4375 14.1875 3.925 13.8375 3.3625 13.8375C2.6125 13.8375 2 13.225 2 12.475V11.525C2 10.775 2.6125 10.1625 3.3625 10.1625C3.925 10.1625 4.4375 9.8125 4.6375 9.2875C4.67694 9.16129 4.72634 9.04005 4.77627 8.91751C4.80546 8.84587 4.83483 8.77379 4.8625 8.7C5.1 8.1875 4.9875 7.5875 4.5875 7.1875C4.05 6.6625 4.05 5.8 4.5875 5.2625L5.275 4.6C5.8 4.0625 6.6625 4.0625 7.2 4.6C7.5875 5 8.2 5.1125 8.7125 4.875C8.9 4.7875 9.0875 4.7 9.2875 4.6375C9.8125 4.4375 10.1625 3.925 10.1625 3.3625C10.1625 2.6125 10.775 2 11.525 2H12.475C13.225 2 13.8375 2.6125 13.8375 3.3625C13.8375 3.9375 14.1875 4.4375 14.7125 4.6375C14.7538 4.65403 14.7958 4.67056 14.838 4.68723C14.9876 4.74617 15.1413 4.80679 15.2875 4.875C15.8 5.1125 16.4 5 16.8 4.6C17.325 4.0625 18.1875 4.0625 18.725 4.6L19.4 5.275C19.9375 5.8 19.9375 6.6625 19.4 7.2C19 7.5875 18.8875 8.2 19.125 8.7125C19.2125 8.9 19.2875 9.0875 19.3625 9.2875ZM12 17C9.2375 17 7 14.7625 7 12C7 9.2375 9.2375 7 12 7C14.7625 7 17 9.2375 17 12C17 14.7625 14.7625 17 12 17Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3625 9.2875C19.5625 9.8125 20.075 10.1625 20.6375 10.1625C21.3875 10.1625 22 10.775 22 11.525V12.475C22 13.225 21.3875 13.8375 20.6375 13.8375C20.075 13.8375 19.5625 14.1875 19.3625 14.7125C19.346 14.7538 19.3294 14.7958 19.3128 14.838C19.2538 14.9876 19.1932 15.1413 19.125 15.2875C18.8875 15.8 19 16.4 19.4 16.8C19.9375 17.325 19.9375 18.1875 19.4 18.725L18.725 19.4C18.2 19.9375 17.3375 19.9375 16.8 19.4C16.4125 19 15.8 18.8875 15.2875 19.125C15.1 19.2125 14.9125 19.2875 14.7125 19.3625C14.1875 19.5625 13.8375 20.075 13.8375 20.6375C13.8375 21.3875 13.225 22 12.475 22H11.525C10.775 22 10.1625 21.3875 10.1625 20.6375C10.1625 20.075 9.8125 19.5625 9.2875 19.3625C9.24617 19.346 9.20423 19.3294 9.16195 19.3128C9.01243 19.2538 8.85867 19.1932 8.7125 19.125C8.2 18.8875 7.6 19 7.2 19.4C6.675 19.9375 5.8125 19.9375 5.275 19.4L4.6 18.725C4.0625 18.2 4.0625 17.3375 4.6 16.8C5 16.4125 5.1125 15.8 4.875 15.2875C4.7875 15.1 4.7125 14.9125 4.6375 14.7125C4.4375 14.1875 3.925 13.8375 3.3625 13.8375C2.6125 13.8375 2 13.225 2 12.475V11.525C2 10.775 2.6125 10.1625 3.3625 10.1625C3.925 10.1625 4.4375 9.8125 4.6375 9.2875C4.67694 9.16129 4.72634 9.04005 4.77627 8.91751C4.80546 8.84587 4.83483 8.77379 4.8625 8.7C5.1 8.1875 4.9875 7.5875 4.5875 7.1875C4.05 6.6625 4.05 5.8 4.5875 5.2625L5.275 4.6C5.8 4.0625 6.6625 4.0625 7.2 4.6C7.5875 5 8.2 5.1125 8.7125 4.875C8.9 4.7875 9.0875 4.7 9.2875 4.6375C9.8125 4.4375 10.1625 3.925 10.1625 3.3625C10.1625 2.6125 10.775 2 11.525 2H12.475C13.225 2 13.8375 2.6125 13.8375 3.3625C13.8375 3.9375 14.1875 4.4375 14.7125 4.6375C14.7538 4.65403 14.7958 4.67056 14.838 4.68723C14.9876 4.74617 15.1413 4.80679 15.2875 4.875C15.8 5.1125 16.4 5 16.8 4.6C17.325 4.0625 18.1875 4.0625 18.725 4.6L19.4 5.275C19.9375 5.8 19.9375 6.6625 19.4 7.2C19 7.5875 18.8875 8.2 19.125 8.7125C19.2125 8.9 19.2875 9.0875 19.3625 9.2875ZM12 17C9.2375 17 7 14.7625 7 12C7 9.2375 9.2375 7 12 7C14.7625 7 17 9.2375 17 12C17 14.7625 14.7625 17 12 17Z" fill="#ff00ff"/>
 </svg>
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 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.154 16.662C13.154 16.158 12.776 15.836 12.272 15.836C11.754 15.836 11.39 16.158 11.39 16.662C11.39 17.152 11.754 17.488 12.272 17.488C12.776 17.502 13.154 17.152 13.154 16.662ZM13.154 12C13.154 11.496 12.776 11.16 12.272 11.16C11.754 11.174 11.39 11.496 11.39 11.986C11.39 12.476 11.754 12.826 12.272 12.826C12.776 12.84 13.154 12.49 13.154 12ZM13.154 7.338C13.154 6.82 12.776 6.498 12.272 6.498C11.754 6.498 11.39 6.834 11.39 7.324C11.39 7.814 11.754 8.164 12.272 8.164C12.776 8.164 13.154 7.828 13.154 7.338Z" fill="#454545"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.154 16.662C13.154 16.158 12.776 15.836 12.272 15.836C11.754 15.836 11.39 16.158 11.39 16.662C11.39 17.152 11.754 17.488 12.272 17.488C12.776 17.502 13.154 17.152 13.154 16.662ZM13.154 12C13.154 11.496 12.776 11.16 12.272 11.16C11.754 11.174 11.39 11.496 11.39 11.986C11.39 12.476 11.754 12.826 12.272 12.826C12.776 12.84 13.154 12.49 13.154 12ZM13.154 7.338C13.154 6.82 12.776 6.498 12.272 6.498C11.754 6.498 11.39 6.834 11.39 7.324C11.39 7.814 11.754 8.164 12.272 8.164C12.776 8.164 13.154 7.828 13.154 7.338Z" fill="#ff00ff"/>
 </svg>

From 3e2a2b79423a4a7cfe29b54bb240b2524e978dba Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 11 Apr 2022 16:23:11 +0530
Subject: [PATCH 69/85] 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 <hi@midhun.dev>
Date: Mon, 11 Apr 2022 16:25:28 +0530
Subject: [PATCH 70/85] 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 <hi@midhun.dev>
Date: Mon, 11 Apr 2022 16:45:55 +0530
Subject: [PATCH 71/85] 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 <hi@midhun.dev>
Date: Tue, 12 Apr 2022 14:52:19 +0530
Subject: [PATCH 72/85] 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 <hi@midhun.dev>
Date: Tue, 12 Apr 2022 15:12:31 +0530
Subject: [PATCH 73/85] 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 <hi@midhun.dev>
Date: Tue, 12 Apr 2022 16:12:43 +0530
Subject: [PATCH 74/85] 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 <hi@midhun.dev>
Date: Tue, 12 Apr 2022 21:05:14 +0530
Subject: [PATCH 75/85] 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 <hi@midhun.dev>
Date: Tue, 12 Apr 2022 21:06:09 +0530
Subject: [PATCH 76/85] 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 @@
         <meta name="description" content="A matrix chat application">
         <link rel="apple-touch-icon" href="./assets/icon-maskable.png">
         <link rel="icon" type="image/png" href="assets/icon-maskable.png">
-        <link rel="stylesheet" type="text/css" href="./ui/css/main.css">
-        <link rel="stylesheet" type="text/css" href="./ui/css/themes/element/theme.css">
+        <script type="module"> import "@theme/default"; </script>
     </head>
     <body class="hydrogen">
         <script id="main" type="module">

From 23aac5cb45703db9841c3ab1a9ab8077e630d8f0 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 14:24:13 +0530
Subject: [PATCH 77/85] Make theme-name lowercase in manifest

---
 src/platform/web/ui/css/themes/element/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/web/ui/css/themes/element/manifest.json b/src/platform/web/ui/css/themes/element/manifest.json
index f27254e5..ec1852cb 100644
--- a/src/platform/web/ui/css/themes/element/manifest.json
+++ b/src/platform/web/ui/css/themes/element/manifest.json
@@ -1,6 +1,6 @@
 {
 	"version": 1,
-	"name": "Element",
+	"name": "element",
 	"values": {
 		"font-faces": [
 			{

From 83dffef47d7c373cab4b34085d61b2e13795c40b Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 14:24:50 +0530
Subject: [PATCH 78/85] Use new theme config

---
 vite.config.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/vite.config.js b/vite.config.js
index 8cc16d26..4dd35af2 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -16,7 +16,13 @@ export default defineConfig(({mode}) => {
             sourcemap: true,
         },
         plugins: [
-            themeBuilder({manifestLocations: ["./src/platform/web/ui/css/themes/element"], compiledVariables}),
+            themeBuilder({
+                themeConfig: {
+                    themes: {"element": "./src/platform/web/ui/css/themes/element"},
+                    default: "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 2d8a3d9f9b82630be266813414551c3f13a896f7 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 17:12:38 +0530
Subject: [PATCH 79/85] Fix SDK build

---
 scripts/sdk/build.sh      |  2 +-
 src/index.html            |  2 --
 vite.sdk-assets-config.js | 12 +++++++++++-
 vite.sdk-lib-config.js    |  3 ++-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh
index 5534601e..4b3127fc 100755
--- a/scripts/sdk/build.sh
+++ b/scripts/sdk/build.sh
@@ -11,7 +11,7 @@ cp doc/SDK.md target/README.md
 pushd target
 pushd asset-build/assets
 mv main.*.js ../../main.js
-mv index.*.css ../../style.css
+mv *light.*.css ../../style.css
 mv download-sandbox.*.html ../../download-sandbox.html
 rm *.js *.wasm
 mv ./* ../../
diff --git a/src/index.html b/src/index.html
index 456f095a..428da222 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,8 +2,6 @@
 <!-- this file contains all references to include in the SDK asset build (using vite.sdk-assets-config.js) -->
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="./platform/web/ui/css/main.css">
-    <link rel="stylesheet" type="text/css" href="./platform/web/ui/css/themes/element/theme.css">
 </head>
 <body>
     <script type="module">
diff --git a/vite.sdk-assets-config.js b/vite.sdk-assets-config.js
index 90720966..5fb9c82f 100644
--- a/vite.sdk-assets-config.js
+++ b/vite.sdk-assets-config.js
@@ -1,6 +1,7 @@
 const path = require("path");
 const mergeOptions = require('merge-options');
-const commonOptions = require("./vite.common-config.js");
+const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes");
+const {commonOptions, compiledVariables} = require("./vite.common-config.js");
 
 export default mergeOptions(commonOptions, {
     root: "src/",
@@ -8,4 +9,13 @@ export default mergeOptions(commonOptions, {
     build: {
         outDir: "../target/asset-build/",
     },
+    plugins: [
+        themeBuilder({
+            themeConfig: {
+                themes: { element: "./src/platform/web/ui/css/themes/element" },
+                default: "element",
+            },
+            compiledVariables,
+        }),
+    ],
 });
diff --git a/vite.sdk-lib-config.js b/vite.sdk-lib-config.js
index c1678d8b..fa084035 100644
--- a/vite.sdk-lib-config.js
+++ b/vite.sdk-lib-config.js
@@ -1,6 +1,7 @@
 const path = require("path");
 const mergeOptions = require('merge-options');
-const commonOptions = require("./vite.common-config.js");
+const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes");
+const {commonOptions, compiledVariables} = require("./vite.common-config.js");
 const manifest = require("./package.json");
 
 const externalDependencies = Object.keys(manifest.dependencies)

From 5170329c79284ad09078bb06b31ab1547511648e Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 17:44:07 +0530
Subject: [PATCH 80/85] Remove unsued imports

---
 vite.sdk-lib-config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/vite.sdk-lib-config.js b/vite.sdk-lib-config.js
index fa084035..a5f11a53 100644
--- a/vite.sdk-lib-config.js
+++ b/vite.sdk-lib-config.js
@@ -1,7 +1,6 @@
 const path = require("path");
 const mergeOptions = require('merge-options');
-const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes");
-const {commonOptions, compiledVariables} = require("./vite.common-config.js");
+const {commonOptions} = require("./vite.common-config.js");
 const manifest = require("./package.json");
 
 const externalDependencies = Object.keys(manifest.dependencies)

From 3f4dddc0048981f3ce955bce9e3e1bf9357e88db Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 17:49:38 +0530
Subject: [PATCH 81/85] Add backwards compatibility

---
 scripts/sdk/build.sh | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh
index 4b3127fc..2ac4be3a 100755
--- a/scripts/sdk/build.sh
+++ b/scripts/sdk/build.sh
@@ -11,7 +11,11 @@ cp doc/SDK.md target/README.md
 pushd target
 pushd asset-build/assets
 mv main.*.js ../../main.js
-mv *light.*.css ../../style.css
+# Create a copy of light theme for backwards compatibility 
+cp theme-element-light.*.css ../../style.css
+# Remove asset hash from css files
+mv theme-element-light.*.css ../../theme-element-light.css
+mv theme-element-dark.*.css ../../theme-element-dark.css
 mv download-sandbox.*.html ../../download-sandbox.html
 rm *.js *.wasm
 mv ./* ../../

From cbdd7548da7c5d89779d41b88855993d4b915662 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Thu, 14 Apr 2022 09:53:21 +0200
Subject: [PATCH 82/85] release v0.2.27

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index af863ced..0d97b8d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hydrogen-web",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
   "directories": {
     "doc": "doc"

From 78f352b839f3837a55850ce95bb28c2d15149a20 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Thu, 14 Apr 2022 10:38:08 +0200
Subject: [PATCH 83/85] avoid white ring around avatars in dark theme

---
 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 688554aa..113ea254 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -51,7 +51,7 @@ limitations under the License.
 
 .avatar {
     border-radius: 100%;
-    background: var(--fixed-white);
+    background: var(--background-color-primary);
     color: var(--fixed-white);
 }
 

From 2d6cbcfce0ff5b802696bee2348de1767f9fbcf9 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Thu, 14 Apr 2022 10:38:17 +0200
Subject: [PATCH 84/85] release v0.2.28

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0d97b8d6..5b53790e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hydrogen-web",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
   "directories": {
     "doc": "doc"

From 480c5c1584c43c0f2d1ad82054e33b62a442a730 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Thu, 14 Apr 2022 13:49:54 +0200
Subject: [PATCH 85/85] update SDK docs with new style location

---
 doc/SDK.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/doc/SDK.md b/doc/SDK.md
index 8ce0b304..54e37cca 100644
--- a/doc/SDK.md
+++ b/doc/SDK.md
@@ -47,7 +47,8 @@ const assetPaths = {
         wasmBundle: olmJsPath
     }
 };
-import "hydrogen-view-sdk/style.css";
+import "hydrogen-view-sdk/theme-element-light.css";
+// OR import "hydrogen-view-sdk/theme-element-dark.css";
 
 async function main() {
     const app = document.querySelector<HTMLDivElement>('#app')!