@amsterdam/design-system-tokens/dist/compact.mjs

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 const amsBorderWidthS = "0.0625rem";
export const amsBorderWidthM = "0.0625rem";
export const amsBorderWidthL = "0.125rem";
export const amsBorderWidthXl = "0.1875rem";
export const amsBorderWidthNegativeM = "-0.0625rem";
export const amsBorderWidthNegativeXl = "-0.1875rem";
export const amsColorBackgroundBody = "#e8e8e8";
export const amsColorBackground = "#ffffff";
export const amsSpaceXs = "0.25rem";
export const amsSpaceS = "0.5rem";
export const amsSpaceM = "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
export const amsSpaceL = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
export const amsSpaceXl = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
export const amsSpace_2xl = "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)";
export const amsTypographyBodyTextFontSize = "1rem";
export const amsTypographyBodyTextLineHeight = 1.5;
export const amsTypographyBodyTextSmallFontSize = "0.875rem";
export const amsTypographyBodyTextSmallLineHeight = 1.4;
export const amsTypographyBodyTextLargeFontSize =
  "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)";
export const amsTypographyBodyTextLargeLineHeight = 1.4;
export const amsTypographyBodyTextXLargeFontSize =
  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
export const amsTypographyBodyTextXLargeLineHeight = 1.3;
export const amsTypographyHeading_1FontSize =
  "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)";
export const amsTypographyHeading_1LineHeight = 1.2;
export const amsTypographyHeading_2FontSize =
  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
export const amsTypographyHeading_2LineHeight = 1.3;
export const amsTypographyHeading_3FontSize =
  "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)";
export const amsTypographyHeading_3LineHeight = 1.3;
export const amsTypographyHeading_4FontSize = "1rem";
export const amsTypographyHeading_4LineHeight = 1.4;
export const amsTypographyHeading_5FontSize = "0.875rem";
export const amsTypographyHeading_5LineHeight = 1.4;
export const amsBodyBackgroundColor = "#e8e8e8";
export const amsGridPaddingInline =
  "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
export const amsGridViMediumPaddingInline =
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
export const amsGridViWidePaddingInline =
  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
export const amsGridCellBackgroundColor = "#ffffff";
export const amsGridCellPaddingBlock =
  "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
export const amsGridCellPaddingInline =
  "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
export const amsPageHeaderBrandNameFontSize =
  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
export const amsPageHeaderBrandNameLineHeight = 1.3;
export const amsPageHeaderMegaMenuPaddingBlock = "0";
export const amsPageBackgroundColor = "#e8e8e8";