@amsterdam/design-system-tokens 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,63 @@
 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)
+
+
+### Bug Fixes
+
+* **Button:** Restore missing border for secondary button ([#2087](https://github.com/Amsterdam/design-system/issues/2087)) ([18b7a70](https://github.com/Amsterdam/design-system/commit/18b7a70bebe368bba83ce492862ffca70cff11a0))
+
 ## [1.0.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.16.0...design-system-tokens-v1.0.0) (2025-05-28)
 
 

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.
@@ -27,7 +31,7 @@ npm install @amsterdam/design-system-tokens
 ## Usage in CSS
 
 Tokens are typically used as custom properties in CSS.
-Their name starts with a prefix of `--ams-`; that of a component token (see below) with the property that uses it, e.g. `-font-size`.
+Their names start with a prefix of `--ams-`.
 
 ### Main stylesheet
 
@@ -76,13 +80,15 @@ The tokens are organised in three layers: brand, common and component.
 
 These express the corporate identity of the City of Amsterdam.
 They are our fundamental selection from all possible colours, text characteristics, spacing lengths, border widths, etc.
+Their names begin with our prefix, followed by a design category such as ‘color’, ‘typography’, or ‘space’.
+
 Examples:
 
 ```css
 :root {
   --ams-color-feedback-error: #ec0000;
   --ams-space-m: 1rem;
-  --ams-aspect-ratio-wide: 4/3;
+  --ams-aspect-ratio-4-3: 4 / 3;
   --ams-border-width-l: 0.1875rem;
 }
 ```
@@ -101,6 +107,8 @@ For instance, `--ams-color-interactive` and `--ams-color-interactive-disabled`.
 Related components share visual design characteristics.
 For example, all links have the same colour, and the borders of various form inputs are equally thick.
 Common tokens express these relations and streamline future changes.
+Their names begin with our prefix, followed by the name of the group that uses them.
+This group name is plural to indicate that several components apply these tokens.
 
 Design system components use common tokens where possible.
 The same goes for custom components that you may create in your application.
@@ -125,6 +133,9 @@ Every design system component defines a token for every property that expresses
 Use these tokens when recreating an existing component to receive the correct values for them – now and in the future.
 Do not apply these tokens to other components – components must be independent.
 
+The name of a component token ends with the CSS property that uses it, e.g. `-font-size`.
+We follow [the NL Design System token naming guidelines](https://nldesignsystem.nl/handboek/design-tokens/#naamgeving) here.
+
 ```html
 <button class="my-button" type="button">Button label</button>
 ```
@@ -181,7 +192,7 @@ Use ‘dot notation’ or square brackets to access the tokens.
 ```tsx
 import tokens from "@amsterdam/design-system-tokens/dist/index.json"
 
-const buttonBackgroundColor = tokens.ams.color["primary-blue"]
+const buttonBackgroundColor = tokens.ams.color.interactive.default
 const rowGap = tokens.ams.space.m
 ```
 

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);
 }