@amsterdam/design-system-tokens/dist/compact.d.ts

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

/**
 * Do not edit directly, this file was auto-generated.
 */

export default tokens;

declare interface DesignToken {
  $value?: any;
  $type?: string;
  $description?: string;
  name?: string;
  themeable?: boolean;
  attributes?: Record<string, unknown>;
  [key: string]: any;
}

declare const tokens: {
  ams: {
    border: {
      width: {
        s: DesignToken;
        m: DesignToken;
        l: DesignToken;
        xl: DesignToken;
        negative: {
          m: DesignToken;
          xl: DesignToken;
        };
      };
    };
    color: {
      background: {
        body: DesignToken;
        default: DesignToken;
      };
    };
    space: {
      xs: DesignToken;
      s: DesignToken;
      m: DesignToken;
      l: DesignToken;
      xl: DesignToken;
      "2xl": DesignToken;
    };
    typography: {
      "body-text": {
        "font-size": DesignToken;
        "line-height": DesignToken;
        small: {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        large: {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "x-large": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
      };
      heading: {
        "1": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "2": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "3": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "4": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "5": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
      };
    };
    body: {
      "background-color": DesignToken;
    };
    grid: {
      "padding-inline": DesignToken;
      "vi-medium": {
        "padding-inline": DesignToken;
      };
      "vi-wide": {
        "padding-inline": DesignToken;
      };
      cell: {
        "background-color": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
    };
    "page-header": {
      "brand-name": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "mega-menu": {
        "padding-block": DesignToken;
      };
    };
    page: {
      "background-color": DesignToken;
    };
  };
};