Integrate compound design tokens

package.json

@@ -66,6 +66,7 @@
         "@sentry/browser": "^7.0.0",
         "@sentry/tracing": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
+        "@vector-im/compound-design-tokens": "https://github.com/vector-im/compound-design-tokens#develop",
         "await-lock": "^2.1.0",
         "blurhash": "^1.1.3",
         "classnames": "^2.2.6",

res/css/_common.pcss

@@ -17,6 +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 "./_font-sizes.pcss";
 @import "./_font-weights.pcss";
 @import "./_animations.pcss";

src/theme.ts

@@ -269,6 +269,24 @@ export async function setTheme(theme?: string): Promise<void> {
     const styleSheet = styleElements.get(stylesheetName)!;
     styleSheet.disabled = false;
 
+    /**
+     * 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");
+
+    let compoundThemeClassName = `cpd-theme-` + (stylesheetName.includes("light") ? "light" : "dark");
+    // Always respect user OS preference!
+    if (isHighContrastTheme(theme) || window.matchMedia("(prefers-contrast: more)").matches) {
+        compoundThemeClassName += "-hc";
+    }
+
+    document.body.classList.add(compoundThemeClassName);
+
     return new Promise((resolve, reject) => {
         const switchTheme = function (): void {
             // we re-enable our theme here just in case we raced with another

test/theme-test.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { SpyInstance } from "jest-mock";
 import { setTheme } from "../src/theme";
 
 describe("theme", () => {
@@ -22,6 +23,7 @@ describe("theme", () => {
         let darkTheme: HTMLStyleElement;
 
         let spyQuerySelectorAll: jest.MockInstance<NodeListOf<Element>, [selectors: string]>;
+        let spyClassList: SpyInstance<void, string[], any>;
 
         beforeEach(() => {
             const styles = [
@@ -47,6 +49,7 @@ describe("theme", () => {
 
             jest.spyOn(document.body, "style", "get").mockReturnValue([] as any);
             spyQuerySelectorAll = jest.spyOn(document, "querySelectorAll").mockReturnValue(styles as any);
+            spyClassList = jest.spyOn(document.body.classList, "add");
         });
 
         afterEach(() => {
@@ -66,6 +69,18 @@ describe("theme", () => {
             expect(spyQuerySelectorAll).toHaveBeenCalledTimes(1);
             expect(lightTheme.disabled).toBe(false);
             expect(darkTheme.disabled).toBe(true);
+            expect(spyClassList).toHaveBeenCalledWith("cpd-theme-light");
+        });
+
+        it("should switch to dark", async () => {
+            // When
+            await new Promise((resolve) => {
+                setTheme("dark").then(resolve);
+                darkTheme.onload!({} as Event);
+            });
+
+            // Then
+            expect(spyClassList).toHaveBeenCalledWith("cpd-theme-dark");
         });
 
         it("should reject promise on onerror call", () => {