WIP

res/css/_common.pcss

@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
 @import url("@vector-im/compound-web/dist/style.css");
 @import "./_font-sizes.pcss";
 @import "./_animations.pcss";

res/css/views/rooms/_JumpToBottomButton.pcss

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@charset "utf-8";
-
 .mx_JumpToBottomButton {
     z-index: 1000;
     position: absolute;

res/css/views/rooms/_TopUnreadMessagesBar.pcss

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@charset "utf-8";
-
 .mx_TopUnreadMessagesBar {
     z-index: 1000;
     position: absolute;

res/themes/light/css/light.pcss

@@ -1,5 +1,3 @@
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
-
 @import "../../../../res/css/_font-sizes.pcss";
 @import "_paths.pcss";
 @import "_fonts.pcss";

src/theme.ts

@@ -35,17 +35,22 @@ interface IFontFaces extends Omit<Record<(typeof allowedFontFaceProps)[number],
     }[];
 }
 
+interface CompoundTheme {
+    [token: string]: string;
+}
+
 export type CustomTheme = {
     name: string;
-    colors: {
+    is_dark?: boolean; // eslint-disable-line camelcase
+    colors?: {
         [key: string]: string;
     };
-    fonts: {
+    fonts?: {
         faces: IFontFaces[];
         general: string;
         monospace: string;
     };
-    is_dark?: boolean; // eslint-disable-line camelcase
+    compound?: CompoundTheme;
 };
 
 /**
@@ -177,6 +182,15 @@ function generateCustomFontFaceCSS(faces: IFontFaces[]): string {
         .join("\n");
 }
 
+const COMPOUND_TOKEN = /^--cpd-[a-z0-9-]+$/;
+
+function generateCustomCompoundCSS(theme: CompoundTheme): string {
+    const properties: string[] = [];
+    for (const [token, value] of Object.entries(theme))
+        if (COMPOUND_TOKEN.test(token)) properties.push(`${token}: ${value};`);
+    return `@layer compound.custom { :root, [class*="cpd-theme-"] { ${properties.join()} } }`;
+}
+
 function setCustomThemeVars(customTheme: CustomTheme): void {
     const { style } = document.body;
 
@@ -218,6 +232,14 @@ function setCustomThemeVars(customTheme: CustomTheme): void {
             style.setProperty("--font-family-monospace", fonts.monospace);
         }
     }
+    if (customTheme.compound) {
+        const css = generateCustomCompoundCSS(customTheme.compound);
+        const style = document.createElement("style");
+        style.setAttribute("title", "custom-theme-compound");
+        style.setAttribute("type", "text/css");
+        style.appendChild(document.createTextNode(css));
+        document.head.appendChild(style);
+    }
 }
 
 export function getCustomTheme(themeName: string): CustomTheme {
@@ -284,9 +306,6 @@ export async function setTheme(theme?: string): Promise<void> {
      * Adds the Compound theme class to the top-most element in the document
      * This will automatically refresh the colour scales based on the OS or user
      * preferences
-     *
-     * Note: Theming through Compound is not yet established. Brand theming should
-     * be done in a similar manner as it used to be done.
      */
     document.body.classList.remove("cpd-theme-light", "cpd-theme-dark", "cpd-theme-light-hc", "cpd-theme-dark-hc");
 

yarn.lock

@@ -3123,9 +3123,9 @@
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
 "@vector-im/compound-design-tokens@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.0.0.tgz#4fe7744bbe0bd093b064d42ca8bb475862bb2ce7"
-  integrity sha512-/hKAxE/WsmnNZamlSmLoFeAhNDhRpFdJYuY8NrPLaS/dKS/QRnty6UYzs9yWOVNFeiBfkNsrb7wYIFMrYWSRJw==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.1.0.tgz#9b1a91317c404a1cd0d76d2fd5a7f2df5f1bf0a6"
+  integrity sha512-1HcCm6YsOda98rGXO4fg0WjEdrMnx/0tdtFmYIlnYkDYTbnfpFg+ffIDY7jgammWbOYwUZpZhM5q9ofb7/EgkA==
   dependencies:
     svg2vectordrawable "^2.9.1"