@amsterdam/design-system-tokens 1.0.1 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v1.0.1...design-system-tokens-v2.0.0) (2025-09-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* Decreased font sizes and line heights of Headings. You should not need the `size` prop very often anymore. Try removing instances, but verify the visual result. See the [example pages in Storybook](https://designsystem.amsterdam/?path=/docs/pages-introduction--docs) for the approach we recommend. ([#2173](https://github.com/Amsterdam/design-system/issues/2173))
+
+### Deprecations
+
+The following tokens will be removed in the next major release. If you use them in your code, please delete them.
+
+* `ams.accordion.panel.*` and some tokens in `ams.accordion.button`
+* `ams.checkbox.hover.text-decoration-thickness` and `ams.checkbox.rectangle.*`
+* `ams.color.interactive.secondary`
+* `ams.icon.heading-0.*`
+* `ams.page-heading.*`
+* `ams.standalone-link.with-icon.*`, `ams.standalone-link.hover.text-decoration-thickness`  and `ams.standalone-link.hover.text-underline-offset` 
+* `ams.table-of-contents.*`
+* `ams.typography.heading.0.*` and `ams.typography.heading.6.*`
+
+### Features
+
+* **Accordion:** Display Headings in the size that matches their levels ([#2193](https://github.com/Amsterdam/design-system/issues/2193)) ([a3e373f](https://github.com/Amsterdam/design-system/commit/a3e373f5351fcd3a45227506a438d3a4d9ba2d54))
+* Add Call to Action Link component ([#2132](https://github.com/Amsterdam/design-system/issues/2132)) ([908fc5d](https://github.com/Amsterdam/design-system/commit/908fc5d107ded55c344d9d8c40feeb8c2071a1c7))
+* Add Menu component for applications ([#2129](https://github.com/Amsterdam/design-system/issues/2129)) ([886c052](https://github.com/Amsterdam/design-system/commit/886c052164be28a6cea9ed029465a81604841aec))
+* Allow pairing an Icon with Headings 0–2 ([#2131](https://github.com/Amsterdam/design-system/issues/2131)) ([922ded9](https://github.com/Amsterdam/design-system/commit/922ded95c5e18ffeff4cee48e1d27b9bde4b1bf1))
+* **Breadcrumb:** Use regular text size instead of small ([#2121](https://github.com/Amsterdam/design-system/issues/2121)) ([e25a5ea](https://github.com/Amsterdam/design-system/commit/e25a5ea76d4d7a88097dfeb95e1aa51caa550e4e))
+* **Checkbox, Radio:** Make the size of controls fluid like text ([#2128](https://github.com/Amsterdam/design-system/issues/2128)) ([8f176a9](https://github.com/Amsterdam/design-system/commit/8f176a9f1b7310c4955ad7f2f5cfde82593a168a))
+* Decrease font sizes and grid width in Spacious Mode, and increase Heading sizes in Compact Mode ([#2119](https://github.com/Amsterdam/design-system/issues/2119)) ([d60f487](https://github.com/Amsterdam/design-system/commit/d60f4873e7b2e198a8abae14c67fbc13cc98f7a0))
+* Decrease font sizes and line heights of Headings ([#2173](https://github.com/Amsterdam/design-system/issues/2173)) ([a70e945](https://github.com/Amsterdam/design-system/commit/a70e94503a524e97493ecffd4d3b005308307d3e))
+* Decrease offset between link underlines and text baseline ([#2134](https://github.com/Amsterdam/design-system/issues/2134)) ([bf5a69c](https://github.com/Amsterdam/design-system/commit/bf5a69cd9f6a8fe01c651edab73029a43f37999c))
+* **Error Message:** Use regular text size instead of small ([#2163](https://github.com/Amsterdam/design-system/issues/2163)) ([c5045a0](https://github.com/Amsterdam/design-system/commit/c5045a068980a1e4614ba5bc627b05e1fa4e7813))
+* **Field Set:** Make space below legend smaller ([#2171](https://github.com/Amsterdam/design-system/issues/2171)) ([9287e4c](https://github.com/Amsterdam/design-system/commit/9287e4c9c6f5a07d5a3f4853537ab1735c742330))
+* **Heading:** Make sizing consistent in various components and examples ([#2160](https://github.com/Amsterdam/design-system/issues/2160)) ([82184bf](https://github.com/Amsterdam/design-system/commit/82184bfc4b317cb2f219ba5975250b23c7dc8fa9))
+* **Inputs, Text Area, Select, Button:** Improve line height of entered text ([#2161](https://github.com/Amsterdam/design-system/issues/2161)) ([18d9a7d](https://github.com/Amsterdam/design-system/commit/18d9a7d5010a54a6e08893dfbf72f1e7b9434e69))
+* **Ordered List, Unordered List:** Use small gap between items instead of medium ([#2123](https://github.com/Amsterdam/design-system/issues/2123)) ([b11f77b](https://github.com/Amsterdam/design-system/commit/b11f77b20c6c03c3c0be999d70a03debcac01519))
+* **Ordered List, Unordered List:** Visually group nested list with parent item ([#2133](https://github.com/Amsterdam/design-system/issues/2133)) ([cf6a28f](https://github.com/Amsterdam/design-system/commit/cf6a28f1e9a340e4cf3b3e9a442d470c7f9e4f61))
+* **Page Footer:** Use regular text size instead of small ([#2122](https://github.com/Amsterdam/design-system/issues/2122)) ([4130f5a](https://github.com/Amsterdam/design-system/commit/4130f5a1ecce406b2230e8cc67900e06df03a601))
+* **Skip Link:** Use regular text size instead of small ([#2164](https://github.com/Amsterdam/design-system/issues/2164)) ([5580571](https://github.com/Amsterdam/design-system/commit/5580571090a64550b379ed8bbfa1a04b01953a5f))
+* **Standalone Link:** Deprecate the variation with only an underline ([#2136](https://github.com/Amsterdam/design-system/issues/2136)) ([d5059da](https://github.com/Amsterdam/design-system/commit/d5059da21009d608346e68526d7b468e693fbc60))
+* Use thinner borders in Compact Mode ([#2170](https://github.com/Amsterdam/design-system/issues/2170)) ([d6d30e0](https://github.com/Amsterdam/design-system/commit/d6d30e0892e1f19fa1d72db59ae34b882158e92f))
+
+
+### Bug Fixes
+
+* **Checkbox:** Refactor CSS, reorder tokens, add input state documentation ([#2058](https://github.com/Amsterdam/design-system/issues/2058)) ([a13ea6d](https://github.com/Amsterdam/design-system/commit/a13ea6d65a54b06120ce4d43ea4b1dd67d562496))
+* Correct shade of black for interactive contrast colour ([#2130](https://github.com/Amsterdam/design-system/issues/2130)) ([c87214d](https://github.com/Amsterdam/design-system/commit/c87214d650c77bc9f841be82c556e32fc716434c))
+* **Table of Contents:** Deprecate unused tokens and class name ([#2190](https://github.com/Amsterdam/design-system/issues/2190)) ([4bb9977](https://github.com/Amsterdam/design-system/commit/4bb997779112f48ca88b6bb9c501f4913a49c501))
+* Use correct underline width for Standalone Link with icon ([#2096](https://github.com/Amsterdam/design-system/issues/2096)) ([a87b5a8](https://github.com/Amsterdam/design-system/commit/a87b5a82636bed3c4e20fa0a7113f7cfca20efe0))
+
 ## [1.0.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v1.0.0...design-system-tokens-v1.0.1) (2025-06-06)
 
 

package/README.md

@@ -6,6 +6,10 @@ This package provides all design tokens from the [Amsterdam Design System](https
 Use it to apply its visual design to your website or application.
 The tokens are exported in multiple formats, including CSS custom properties and JSON, making them compatible with most, if not all, technology stacks.
 
+**Note** that the values of the tokens in this package implement the branding of the City of Amsterdam.
+If your project is not affiliated with the City of Amsterdam, you should not use this package.
+You are allowed to copy the token files if you change the values to your own branding.
+
 ## Introduction
 
 Every design token is a variable representing a single visual design choice.

package/dist/compact.css

@@ -3,25 +3,37 @@
  */
 
 :root {
-  --ams-space-xs: clamp(0.1875rem, 0.1719rem + 0.0781vw, 0.25rem);
-  --ams-space-s: clamp(0.375rem, 0.3438rem + 0.1563vw, 0.5rem);
-  --ams-space-m: clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem);
-  --ams-space-l: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
-  --ams-space-xl: clamp(1.25rem, 1rem + 1.25vw, 2.25rem);
-  --ams-space-2xl: clamp(1.5rem, 1.125rem + 1.875vw, 3rem);
+  --ams-border-width-s: 0.0625rem;
+  --ams-border-width-m: 0.0625rem;
+  --ams-border-width-l: 0.125rem;
+  --ams-border-width-xl: 0.1875rem;
+  --ams-space-xs: 0.25rem;
+  --ams-space-s: 0.5rem;
+  --ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);
+  --ams-space-l: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
+  --ams-space-xl: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
+  --ams-space-2xl: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
   --ams-typography-body-text-font-size: 1rem;
-  --ams-typography-body-text-small-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
-  --ams-typography-body-text-large-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-  --ams-typography-body-text-x-large-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-  --ams-typography-heading-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
-  --ams-typography-heading-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
-  --ams-typography-heading-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
-  --ams-typography-heading-2-line-height: 1.2133;
-  --ams-typography-heading-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-  --ams-typography-heading-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-  --ams-typography-heading-5-font-size: 1rem;
-  --ams-typography-heading-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
+  --ams-typography-body-text-line-height: 1.5;
+  --ams-typography-body-text-small-font-size: 0.875rem;
+  --ams-typography-body-text-small-line-height: 1.4;
+  --ams-typography-body-text-large-font-size: clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem);
+  --ams-typography-body-text-large-line-height: 1.4;
+  --ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
+  --ams-typography-body-text-x-large-line-height: 1.3;
+  --ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem); /** Use Heading size 1 instead. */
+  --ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
+  --ams-typography-heading-1-line-height: 1.2;
+  --ams-typography-heading-2-line-height: 1.3;
+  --ams-typography-heading-3-line-height: 1.3;
+  --ams-typography-heading-4-line-height: 1.4;
+  --ams-typography-heading-5-line-height: 1.4;
+  --ams-typography-heading-2-font-size: var(--ams-typography-body-text-x-large-font-size);
+  --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);
+  --ams-typography-heading-4-font-size: var(--ams-typography-body-text-font-size);
+  --ams-typography-heading-5-font-size: var(--ams-typography-body-text-small-font-size);
+  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size); /** Use Heading size 5 instead. */
   --ams-grid-padding-inline: var(--ams-space-xl);
-  --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
+  --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
 }

package/dist/compact.d.ts

@@ -16,6 +16,14 @@ declare interface DesignToken {
 
 declare const tokens: {
   ams: {
+    border: {
+      width: {
+        s: DesignToken;
+        m: DesignToken;
+        l: DesignToken;
+        xl: DesignToken;
+      };
+    };
     space: {
       xs: DesignToken;
       s: DesignToken;
@@ -27,14 +35,18 @@ declare const tokens: {
     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: {
@@ -43,6 +55,7 @@ declare const tokens: {
         };
         "1": {
           "font-size": DesignToken;
+          "line-height": DesignToken;
         };
         "2": {
           "font-size": DesignToken;
@@ -50,12 +63,15 @@ declare const tokens: {
         };
         "3": {
           "font-size": DesignToken;
+          "line-height": DesignToken;
         };
         "4": {
           "font-size": DesignToken;
+          "line-height": DesignToken;
         };
         "5": {
           "font-size": DesignToken;
+          "line-height": DesignToken;
         };
         "6": {
           "font-size": DesignToken;

package/dist/compact.json

@@ -1,58 +1,74 @@
 {
   "ams": {
+    "border": {
+      "width": {
+        "s": "0.0625rem",
+        "m": "0.0625rem",
+        "l": "0.125rem",
+        "xl": "0.1875rem"
+      }
+    },
     "space": {
-      "xs": "clamp(0.1875rem, 0.1719rem + 0.0781vw, 0.25rem)",
-      "s": "clamp(0.375rem, 0.3438rem + 0.1563vw, 0.5rem)",
-      "m": "clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem)",
-      "l": "clamp(1rem, 0.875rem + 0.625vw, 1.5rem)",
-      "xl": "clamp(1.25rem, 1rem + 1.25vw, 2.25rem)",
-      "2xl": "clamp(1.5rem, 1.125rem + 1.875vw, 3rem)"
+      "xs": "0.25rem",
+      "s": "0.5rem",
+      "m": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
+      "l": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+      "xl": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
+      "2xl": "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)"
     },
     "typography": {
       "body-text": {
         "font-size": "1rem",
+        "line-height": "1.5",
         "small": {
-          "font-size": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)"
+          "font-size": "0.875rem",
+          "line-height": "1.4"
         },
         "large": {
-          "font-size": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)"
+          "font-size": "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)",
+          "line-height": "1.4"
         },
         "x-large": {
-          "font-size": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)"
+          "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
+          "line-height": "1.3"
         }
       },
       "heading": {
         "0": {
-          "font-size": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)"
+          "font-size": "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)"
         },
         "1": {
-          "font-size": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)"
+          "font-size": "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)",
+          "line-height": "1.2"
         },
         "2": {
-          "font-size": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)",
-          "line-height": "1.2133"
+          "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
+          "line-height": "1.3"
         },
         "3": {
-          "font-size": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)"
+          "font-size": "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)",
+          "line-height": "1.3"
         },
         "4": {
-          "font-size": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)"
+          "font-size": "1rem",
+          "line-height": "1.4"
         },
         "5": {
-          "font-size": "1rem"
+          "font-size": "0.875rem",
+          "line-height": "1.4"
         },
         "6": {
-          "font-size": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)"
+          "font-size": "0.875rem"
         }
       }
     },
     "grid": {
-      "padding-inline": "clamp(1.25rem, 1rem + 1.25vw, 2.25rem)"
+      "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
     },
     "page-header": {
       "brand-name": {
-        "font-size": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)",
-        "line-height": "1.2133"
+        "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
+        "line-height": "1.3"
       }
     }
   }

package/dist/compact.mjs

@@ -2,34 +2,44 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const amsSpaceXs = "clamp(0.1875rem, 0.1719rem + 0.0781vw, 0.25rem)";
-export const amsSpaceS = "clamp(0.375rem, 0.3438rem + 0.1563vw, 0.5rem)";
-export const amsSpaceM = "clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem)";
-export const amsSpaceL = "clamp(1rem, 0.875rem + 0.625vw, 1.5rem)";
-export const amsSpaceXl = "clamp(1.25rem, 1rem + 1.25vw, 2.25rem)";
-export const amsSpace_2xl = "clamp(1.5rem, 1.125rem + 1.875vw, 3rem)";
+export const amsBorderWidthS = "0.0625rem";
+export const amsBorderWidthM = "0.0625rem";
+export const amsBorderWidthL = "0.125rem";
+export const amsBorderWidthXl = "0.1875rem";
+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 amsTypographyBodyTextSmallFontSize =
-  "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)";
+export const amsTypographyBodyTextLineHeight = "1.5";
+export const amsTypographyBodyTextSmallFontSize = "0.875rem";
+export const amsTypographyBodyTextSmallLineHeight = "1.4";
 export const amsTypographyBodyTextLargeFontSize =
-  "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)";
+  "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)";
+export const amsTypographyBodyTextLargeLineHeight = "1.4";
 export const amsTypographyBodyTextXLargeFontSize =
-  "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)";
+  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
+export const amsTypographyBodyTextXLargeLineHeight = "1.3";
 export const amsTypographyHeading_0FontSize =
-  "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)";
+  "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)"; // Use Heading size 1 instead.
 export const amsTypographyHeading_1FontSize =
-  "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)";
+  "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)";
+export const amsTypographyHeading_1LineHeight = "1.2";
 export const amsTypographyHeading_2FontSize =
-  "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
-export const amsTypographyHeading_2LineHeight = "1.2133";
+  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
+export const amsTypographyHeading_2LineHeight = "1.3";
 export const amsTypographyHeading_3FontSize =
-  "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)";
-export const amsTypographyHeading_4FontSize =
-  "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)";
-export const amsTypographyHeading_5FontSize = "1rem";
-export const amsTypographyHeading_6FontSize =
-  "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)";
-export const amsGridPaddingInline = "clamp(1.25rem, 1rem + 1.25vw, 2.25rem)";
+  "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 amsTypographyHeading_6FontSize = "0.875rem"; // Use Heading size 5 instead.
+export const amsGridPaddingInline =
+  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPageHeaderBrandNameFontSize =
-  "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
-export const amsPageHeaderBrandNameLineHeight = "1.2133";
+  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
+export const amsPageHeaderBrandNameLineHeight = "1.3";

package/dist/compact.scss

@@ -1,24 +1,36 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$ams-space-xs: clamp(0.1875rem, 0.1719rem + 0.0781vw, 0.25rem);
-$ams-space-s: clamp(0.375rem, 0.3438rem + 0.1563vw, 0.5rem);
-$ams-space-m: clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem);
-$ams-space-l: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
-$ams-space-xl: clamp(1.25rem, 1rem + 1.25vw, 2.25rem);
-$ams-space-2xl: clamp(1.5rem, 1.125rem + 1.875vw, 3rem);
+$ams-border-width-s: 0.0625rem;
+$ams-border-width-m: 0.0625rem;
+$ams-border-width-l: 0.125rem;
+$ams-border-width-xl: 0.1875rem;
+$ams-space-xs: 0.25rem;
+$ams-space-s: 0.5rem;
+$ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);
+$ams-space-l: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
+$ams-space-xl: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
+$ams-space-2xl: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
 $ams-typography-body-text-font-size: 1rem;
-$ams-typography-body-text-small-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
-$ams-typography-body-text-large-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-$ams-typography-body-text-x-large-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-$ams-typography-heading-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
-$ams-typography-heading-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
-$ams-typography-heading-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
-$ams-typography-heading-2-line-height: 1.2133;
-$ams-typography-heading-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-$ams-typography-heading-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-$ams-typography-heading-5-font-size: 1rem;
-$ams-typography-heading-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
+$ams-typography-body-text-line-height: 1.5;
+$ams-typography-body-text-small-font-size: 0.875rem;
+$ams-typography-body-text-small-line-height: 1.4;
+$ams-typography-body-text-large-font-size: clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem);
+$ams-typography-body-text-large-line-height: 1.4;
+$ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
+$ams-typography-body-text-x-large-line-height: 1.3;
+$ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem); // Use Heading size 1 instead.
+$ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
+$ams-typography-heading-1-line-height: 1.2;
+$ams-typography-heading-2-line-height: 1.3;
+$ams-typography-heading-3-line-height: 1.3;
+$ams-typography-heading-4-line-height: 1.4;
+$ams-typography-heading-5-line-height: 1.4;
+$ams-typography-heading-2-font-size: $ams-typography-body-text-x-large-font-size;
+$ams-typography-heading-3-font-size: $ams-typography-body-text-large-font-size;
+$ams-typography-heading-4-font-size: $ams-typography-body-text-font-size;
+$ams-typography-heading-5-font-size: $ams-typography-body-text-small-font-size;
+$ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size; // Use Heading size 5 instead.
 $ams-grid-padding-inline: $ams-space-xl;
-$ams-page-header-brand-name-font-size: $ams-typography-heading-2-font-size;
 $ams-page-header-brand-name-line-height: $ams-typography-heading-2-line-height;
+$ams-page-header-brand-name-font-size: $ams-typography-heading-2-font-size;

package/dist/compact.theme.css

@@ -3,25 +3,37 @@
  */
 
 .ams-theme--compact {
-  --ams-space-xs: clamp(0.1875rem, 0.1719rem + 0.0781vw, 0.25rem);
-  --ams-space-s: clamp(0.375rem, 0.3438rem + 0.1563vw, 0.5rem);
-  --ams-space-m: clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem);
-  --ams-space-l: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
-  --ams-space-xl: clamp(1.25rem, 1rem + 1.25vw, 2.25rem);
-  --ams-space-2xl: clamp(1.5rem, 1.125rem + 1.875vw, 3rem);
+  --ams-border-width-s: 0.0625rem;
+  --ams-border-width-m: 0.0625rem;
+  --ams-border-width-l: 0.125rem;
+  --ams-border-width-xl: 0.1875rem;
+  --ams-space-xs: 0.25rem;
+  --ams-space-s: 0.5rem;
+  --ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);
+  --ams-space-l: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
+  --ams-space-xl: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
+  --ams-space-2xl: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
   --ams-typography-body-text-font-size: 1rem;
-  --ams-typography-body-text-small-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
-  --ams-typography-body-text-large-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-  --ams-typography-body-text-x-large-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-  --ams-typography-heading-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
-  --ams-typography-heading-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
-  --ams-typography-heading-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
-  --ams-typography-heading-2-line-height: 1.2133;
-  --ams-typography-heading-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-  --ams-typography-heading-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-  --ams-typography-heading-5-font-size: 1rem;
-  --ams-typography-heading-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
+  --ams-typography-body-text-line-height: 1.5;
+  --ams-typography-body-text-small-font-size: 0.875rem;
+  --ams-typography-body-text-small-line-height: 1.4;
+  --ams-typography-body-text-large-font-size: clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem);
+  --ams-typography-body-text-large-line-height: 1.4;
+  --ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
+  --ams-typography-body-text-x-large-line-height: 1.3;
+  --ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem); /** Use Heading size 1 instead. */
+  --ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
+  --ams-typography-heading-1-line-height: 1.2;
+  --ams-typography-heading-2-line-height: 1.3;
+  --ams-typography-heading-3-line-height: 1.3;
+  --ams-typography-heading-4-line-height: 1.4;
+  --ams-typography-heading-5-line-height: 1.4;
+  --ams-typography-heading-2-font-size: var(--ams-typography-body-text-x-large-font-size);
+  --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);
+  --ams-typography-heading-4-font-size: var(--ams-typography-body-text-font-size);
+  --ams-typography-heading-5-font-size: var(--ams-typography-body-text-small-font-size);
+  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size); /** Use Heading size 5 instead. */
   --ams-grid-padding-inline: var(--ams-space-xl);
-  --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
+  --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
 }