@activecollab/components/dist/esm/utils/themes.swatch.test.js

ActiveCollab Components

import { readFileSync } from "fs";
import { join } from "path";
import { THEMES } from "./themes";
const GLOBAL_STYLE = readFileSync(join(__dirname, "../components/GlobalStyle.ts"), "utf-8");
const SWATCH_VARS = ["color-secondary", "color-primary", "body-bg-main"];
const collectBlocks = selector => {
  const re = new RegExp(selector + "\\s*\\{([^}]*)\\}", "g");
  let declarations = "";
  let match;
  while (match = re.exec(GLOBAL_STYLE)) declarations += match[1] + ";";
  return declarations;
};
const readVar = (block, name) => {
  var _block$match;
  return (_block$match = block.match(new RegExp("--" + name + "\\s*:\\s*([^;}]+)"))) == null ? void 0 : _block$match[1].trim();
};
const toHex = value => {
  const rgb = value.match(/rgb\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)\s*\)/);
  if (!rgb) return value.toLowerCase();
  return "#" + rgb.slice(1).map(channel => Number(channel).toString(16).padStart(2, "0")).join("");
};

// indigo has no class block of its own — it is the :root default every other theme overrides.
const declarationsFor = name => (name === "indigo" ? "" : collectBlocks("\\." + name)) + collectBlocks(":root");
describe("theme swatches", () => {
  it("should match the colours GlobalStyle defines for each theme", () => {
    const fromStylesheet = THEMES.map(_ref => {
      let name = _ref.name;
      const block = declarationsFor(name);
      return [name, SWATCH_VARS.map(cssVar => toHex(readVar(block, cssVar)))];
    });
    expect(fromStylesheet).toEqual(THEMES.map(_ref2 => {
      let name = _ref2.name,
        swatch = _ref2.swatch;
      return [name, swatch];
    }));
  });
});
//# sourceMappingURL=themes.swatch.test.js.map