adyen-shared-web

Shared utilities for the Adyen npm libraries.

Usage

Install the package and create a ThemeGenerator to generate and inject semantic CSS color variables for your application:

import { ThemeGenerator } from "@adyen/adyen-shared-web";

const themeGenerator = new ThemeGenerator();

themeGenerator.create({
  primary: "#0066ff",
  background: "#ffffff",
  neutral: "#f2f4f7",
  label: "#101828",
  outline: "#98a2b3",
  roundness: "medium",
});

Set roundness to "small", "medium", or "large" to apply a 4px, 8px, or 12px radius to Bento's xs through xl radius tokens. Pass dark: true when generating a dark theme. Call themeGenerator.destroy() when the theme is no longer needed to remove the generated styles.

To generate CSS without accessing or modifying the DOM, use generateCSS(). It targets :root by default and accepts a custom selector for scoped themes:

const css = themeGenerator.generateCSS(
  {
    primary: "#0066ff",
    dark: true,
  },
  {
    selector: "[data-adyen-pe-theme-root='core-id']",
  },
);

generateCSS() returns null when no supplied theme input produces CSS variables.

Publishing a new release on npm

1. Tag the main branch with the new semantic version: git tag vX.Y.Z and git push origin vX.Y.Z
2. Create a new release on GitHub (GitHub will automatically populate this with a changelog based on merged PRs).
3. (Optional) If you want this to be a pre-release, check the "Set as pre-release" option.
4. Publish the release!

Staged publishing is intentionally disabled at the moment.