Integrate compound design tokens (#11091)

* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* lintfix

* Use correct SpyInstance import

* Using npm build of 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": "^0.0.3",
  "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

@@ -22,6 +22,7 @@ describe("theme", () => {
  let darkTheme: HTMLStyleElement;
 
  let spyQuerySelectorAll: jest.MockInstance<NodeListOf<Element>, [selectors: string]>;
+ let spyClassList: jest.SpyInstance<void, string[], any>;
 
  beforeEach(() => {
  const styles = [
@@ -47,6 +48,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 +68,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", () => {