@amsterdam/design-system-tokens 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -3,8 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.10.0...design-system-tokens-v0.11.0) (2024-07-25)
+## [0.13.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.12.0...design-system-tokens-v0.13.0) (2024-10-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* Rename Description List ‘details’ to ’description’ ([#1703](https://github.com/Amsterdam/design-system/issues/1703))
+
+### Bug Fixes
+
+* Rename Description List ‘details’ to ’description’ ([#1703](https://github.com/Amsterdam/design-system/issues/1703)) ([139d8cb](https://github.com/Amsterdam/design-system/commit/139d8cb5c8fc4ffc93a2283abeabda6b8364b7cc))
 
+## [0.12.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.11.0...design-system-tokens-v0.12.0) (2024-10-25)
+
+### ⚠ BREAKING CHANGES
+
+* Support various column widths for Description List ([#1697](https://github.com/Amsterdam/design-system/issues/1697))
+* Make terms bold instead of descriptions in Description List ([#1693](https://github.com/Amsterdam/design-system/issues/1693))
+* Add Action Group component, e.g. to wrap Dialog buttons in ([#1592](https://github.com/Amsterdam/design-system/issues/1592))
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460))
+* Remove unnecessary Dialog wrapper ([#1591](https://github.com/Amsterdam/design-system/issues/1591))
+* Remove form from Dialog ([#1582](https://github.com/Amsterdam/design-system/issues/1582))
+* Replace ‘on background’ props with ‘inverseColor’ and ‘contrastColor’ for Link, Link List Link, and Icon Button ([#1448](https://github.com/Amsterdam/design-system/issues/1448))
+
+### Features
+
+* Add Action Group component, e.g. to wrap Dialog buttons in ([#1592](https://github.com/Amsterdam/design-system/issues/1592)) ([d0ea054](https://github.com/Amsterdam/design-system/commit/d0ea054b98a7f2ee41bd9a8434b76a85e9b8c9f2))
+* Add border to Avatar in forced colors mode ([#1578](https://github.com/Amsterdam/design-system/issues/1578)) ([1f29f35](https://github.com/Amsterdam/design-system/commit/1f29f358ab7b831c502e8fa2cbd284d1853ff6af))
+* Add Breakout component that lets a figure stick out of a Spotlight ([#1397](https://github.com/Amsterdam/design-system/issues/1397)) ([715f4d6](https://github.com/Amsterdam/design-system/commit/715f4d6241353b9b9f1f68dad7b7773b9c618492))
+* Add Hint as component and Label and FieldSet props ([#1499](https://github.com/Amsterdam/design-system/issues/1499)) ([3d86882](https://github.com/Amsterdam/design-system/commit/3d86882f22e4629a17a98cbbf96f03ad56620be9))
+* Add initial Password Input component ([#1449](https://github.com/Amsterdam/design-system/issues/1449)) ([3cc863e](https://github.com/Amsterdam/design-system/commit/3cc863ec8f1f2b50f79a426fd41676ab05838768))
+* Allow Button to display an icon without a label ([#1654](https://github.com/Amsterdam/design-system/issues/1654), [#1700](https://github.com/Amsterdam/design-system/issues/1700)) ([2d347b6](https://github.com/Amsterdam/design-system/commit/2d347b654b701cd6cce9182d5b6837960f41b551), [33c4c0e](https://github.com/Amsterdam/design-system/commit/33c4c0edefdf9c785bb828b0c61f0a120d697b02))
+* Image slider ([#1595](https://github.com/Amsterdam/design-system/issues/1595)) ([58e7766](https://github.com/Amsterdam/design-system/commit/58e77661ad99acb5d3f6e10cbfca981345dc8704))
+* Make terms bold instead of descriptions in Description List ([#1693](https://github.com/Amsterdam/design-system/issues/1693)) ([cc8f40e](https://github.com/Amsterdam/design-system/commit/cc8f40e631669a2f3423b7f55b8b129c025efcf9))
+* Remove form from Dialog ([#1582](https://github.com/Amsterdam/design-system/issues/1582)) ([4fb6e53](https://github.com/Amsterdam/design-system/commit/4fb6e53441f3bae914eb483da2f0537a65273fd2))
+* Remove unnecessary Dialog wrapper ([#1591](https://github.com/Amsterdam/design-system/issues/1591)) ([450b0c3](https://github.com/Amsterdam/design-system/commit/450b0c3e9adf5bdd9fb868400e17aaaea4b2c545))
+* Replace ‘on background’ props with ‘inverseColor’ and ‘contrastColor’ for Link, Link List Link, and Icon Button ([#1448](https://github.com/Amsterdam/design-system/issues/1448)) ([f5176b1](https://github.com/Amsterdam/design-system/commit/f5176b1e2c85c166fa2b6cb67d11ce0b1f9727a3))
+* Support various column widths for Description List ([#1697](https://github.com/Amsterdam/design-system/issues/1697)) ([5a98c07](https://github.com/Amsterdam/design-system/commit/5a98c07cad19eea38a2ff299378dc4dc5b80018c))
+* Update spacing in Ordered and Unordered List ([#1632](https://github.com/Amsterdam/design-system/issues/1632)) ([986e023](https://github.com/Amsterdam/design-system/commit/986e023b83007560911724e819f54fb18c97f1dc))
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460)) ([c19055b](https://github.com/Amsterdam/design-system/commit/c19055bd6453ce40ca43b31d599f14ec65d6037a))
+
+## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.10.0...design-system-tokens-v0.11.0) (2024-07-25)
 
 ### ⚠ BREAKING CHANGES
 
@@ -26,7 +65,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.10.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.9.0...design-system-tokens-v0.10.0) (2024-06-28)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257))
@@ -39,7 +77,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.8.0...design-system-tokens-v0.9.0) (2024-06-05)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245))
@@ -63,7 +100,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) ([9477186](https://github.com/Amsterdam/design-system/commit/9477186b8432d6d20991e93d92c64a4357d6f391))
 * Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226)) ([4471c7a](https://github.com/Amsterdam/design-system/commit/4471c7a154e9f1f31dd92298f932f4bbc134dbf9))
 
-
 ### Bug Fixes
 
 * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) ([8ab6f81](https://github.com/Amsterdam/design-system/commit/8ab6f81d4cbcdb75b7acb986a145d49ccd1895c8))
@@ -71,7 +107,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.1...design-system-tokens-v0.8.0) (2024-04-22)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Rename Form Label to Label ([#1201](https://github.com/Amsterdam/design-system/issues/1201))
@@ -91,27 +126,23 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Time input component ([#1202](https://github.com/Amsterdam/design-system/issues/1202)) ([ccec68e](https://github.com/Amsterdam/design-system/commit/ccec68efafa02d5f9ac9bd4abea6c5e7cb72d556))
 * Use fluid gaps in Page Menu ([#1146](https://github.com/Amsterdam/design-system/issues/1146)) ([848223b](https://github.com/Amsterdam/design-system/commit/848223bed7c0ad95de9ce1911c7313104a938f5b))
 
-
 ### Bug Fixes
 
 * Use correct text size in Text Input, Search Field, and Text Area ([#1150](https://github.com/Amsterdam/design-system/issues/1150)) ([d5462e4](https://github.com/Amsterdam/design-system/commit/d5462e4537cfb39d62d0cd31564cfff086238330))
 
 ## [0.7.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.0...design-system-tokens-v0.7.1) (2024-03-22)
 
-
 ### Features
 
 * Add Avatar component ([#1134](https://github.com/Amsterdam/design-system/issues/1134)) ([8dec2cf](https://github.com/Amsterdam/design-system/commit/8dec2cff8f7885ccb163774c0dc979fb2c781256))
 * Add Form Field Character Counter ([#1114](https://github.com/Amsterdam/design-system/issues/1114)) ([779ae8c](https://github.com/Amsterdam/design-system/commit/779ae8c9764b23508ffbfb38c6dc2f7a7c1cbd28))
 
-
 ### Bug Fixes
 
 * Use semantic Heading for the title of a Dialog ([#1123](https://github.com/Amsterdam/design-system/issues/1123)) ([0493fd8](https://github.com/Amsterdam/design-system/commit/0493fd87587d36a83bb7aa9cbb69b8debf5d66f0))
 
 ## [0.7.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.6.1...design-system-tokens-v0.7.0) (2024-03-12)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125))
@@ -122,7 +153,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.6.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.6.0...design-system-tokens-v0.6.1) (2024-03-11)
 
-
 ### Bug Fixes
 
 * Button fixes ([#1122](https://github.com/Amsterdam/design-system/issues/1122)) ([b5a9504](https://github.com/Amsterdam/design-system/commit/b5a950491f46710d92526ce6012f7d76992a569f))
@@ -130,7 +160,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.6.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.5.1...design-system-tokens-v0.6.0) (2024-03-08)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108))
@@ -156,21 +185,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108)) ([f87e834](https://github.com/Amsterdam/design-system/commit/f87e8345ec900ab08941d5d7ab40f8abd16a569a))
 * Use spacing tokens in Grid component ([#1089](https://github.com/Amsterdam/design-system/issues/1089)) ([b55f0a3](https://github.com/Amsterdam/design-system/commit/b55f0a3b64dcfb660a878ade75033a1dd835ac2d))
 
-
 ### Bug Fixes
 
 * Remove whitespace at the right end of dialog content ([#1091](https://github.com/Amsterdam/design-system/issues/1091)) ([23e1253](https://github.com/Amsterdam/design-system/commit/23e1253e38bba8ac85ebbd696af37742d1c1a02d))
 
 ## [0.5.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.5.0...design-system-tokens-v0.5.1) (2024-02-13)
 
-
 ### Features
 
 * Create unique token classes ([#1071](https://github.com/Amsterdam/design-system/issues/1071)) ([d53d0a9](https://github.com/Amsterdam/design-system/commit/d53d0a93f18238759d85bd897a7b6ee537cc78b0))
 
 ## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.4.0...design-system-tokens-v0.5.0) (2024-02-09)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))

package/README.md

@@ -1,3 +1,199 @@
 <!-- @license CC0-1.0 -->
 
-# TODO: write readme
+# Amsterdam Design System: Tokens
+
+This package provides all design tokens from the [Amsterdam Design System](https://designsystem.amsterdam).
+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.
+
+## Introduction
+
+Every design token is a variable representing a single visual design choice.
+Tokens exist for colours, various aspects of text, spacing lengths, border widths, the configuration of animations, and more.
+The value of every token is valid in CSS.
+All tokens together form a theme that encodes the entire branding of the City of Amsterdam.
+
+## Installation
+
+Install this package by itself if you want or need to reference tokens directly in your stylesheets.
+
+Note that our [CSS components](https://www.npmjs.com/package/@amsterdam/design-system-css) and [React components](https://www.npmjs.com/package/@amsterdam/design-system-react) provide more functionality and apply the tokens automatically.
+You should use those packages if your application uses React or if it allows you to apply our HTML classes.
+
+```sh
+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`.
+
+### Main stylesheet
+
+This package offers a main stylesheet containing all tokens.
+They are declared as global CSS variables through the `:root` selector.
+
+<!-- prettier-ignore -->
+```ts
+import "@amsterdam/design-system-tokens/dist/index.css"
+```
+
+If that doesn’t work for your project, use `index.theme.css` instead, which uses an `.ams-theme` selector.
+Add that class to a root element of your application.
+
+<!-- prettier-ignore -->
+```ts
+import "@amsterdam/design-system-tokens/dist/index.theme.css"
+```
+
+```html
+<body class="ams-theme">
+  …
+</body>
+```
+
+### Compact mode
+
+Our branding is rather spacious for websites.
+The main stylesheet implements this ‘spacious mode’ as the default.
+A compact stylesheet is available for applications that require less white space and smaller text.
+
+Note that the compact stylesheet is not independent – it only contains overrides.
+Import it after the main stylesheet for the correct result.
+
+<!-- prettier-ignore -->
+```ts
+import "@amsterdam/design-system-tokens/dist/index.css"
+import "@amsterdam/design-system-tokens/dist/compact.css"
+```
+
+### Three layers
+
+The tokens are organised in three layers: brand, common and component.
+
+#### Brand tokens
+
+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.
+Examples:
+
+```css
+:root {
+  --ams-color-primary-red: #ec0000;
+  --ams-space-md: 1rem;
+  --ams-proportion-wide: 4/3;
+  --ams-border-width-lg: 0.1875rem;
+}
+```
+
+Find the [list of brand tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/brand/ams) on GitHub.
+
+#### Common tokens
+
+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.
+
+Design system components use common tokens where possible.
+The same goes for custom components that you may create in your application.
+
+```html
+<a class="my-link" href="#">…</a>
+```
+
+```css
+.my-input {
+  color: var(--ams-link-appearance-color);
+  text-underline-offset: var(--ams-link-appearance-text-underline-offset);
+}
+```
+
+Find the [list of common tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/common/ams) on GitHub.
+
+#### Component tokens
+
+Every design system component defines a token for every property that expresses branding and uses it in its stylesheet.
+
+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.
+
+```html
+<button class="my-button" type="button">Button label</button>
+```
+
+```css
+.my-button {
+  font-family: var(--ams-button-font-family);
+  background-color: var(--ams-button-primary-background-color);
+}
+```
+
+Find the [list of component tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/component/ams) on GitHub.
+
+### Overriding tokens
+
+This package allows the creation of a theme to reuse our components for a different brand.
+This is a key feature of [NL Design System](https://nldesignsystem.nl/) of which we are part.
+
+However, websites and applications for the City of Amsterdam must follow the design system as closely as possible.
+We repeat: websites and applications for the City of Amsterdam must follow the design system as closely as possible.
+
+At the same time, we are aware that adopting a design system can pose challenges in practice.
+If there is a good reason to (temporarily) adapt a component, do so by overriding the values of its appropriate tokens in a separate stylesheet.
+Note that redefining the value of a token is a much better approach than redeclaring styles, adding class names or even inline styles.
+
+## Usage in Sass
+
+The tokens can be imported as Sass variables as well.
+
+```sass
+@import "@amsterdam/design-system-tokens/dist/index.scss"
+```
+
+Import the compact tokens if you need them.
+Sass will override spacious values automatically.
+
+```sass
+@import "@amsterdam/design-system-tokens/dist/compact.scss"
+```
+
+## Usage in JavaScript
+
+Import the JSON file to use the tokens in TypeScript or JavaScript.
+Here, tokens start their name with a prefix of `ams.`.
+Use ‘dot notation’ or square brackets to access the tokens.
+
+<!-- prettier-ignore -->
+```ts
+import tokens from "@amsterdam/design-system-tokens/dist/index.json"
+
+const buttonBackgroundColor = tokens.ams.color["primary-blue"]
+const rowGap = tokens.ams.space.md
+```
+
+Import and merge the compact tokens if you need them.
+Then you can use the tokens in scripting or css-in-js libraries.
+
+<!-- prettier-ignore -->
+```ts
+import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json"
+import compactTokens from "@amsterdam/design-system-tokens/dist/compact.json"
+
+const tokens = { ...spaciousTokens, ...compactTokens }
+```
+
+## Usage in Figma
+
+The tokens are used in our [Figma Library](https://www.figma.com/file/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?type=design&node-id=741-19633&mode=design&t=N8P3h3W67O0KNdga-0) as well.
+
+## Updating
+
+We follow semantic versioning and publish a [change log](https://github.com/Amsterdam/design-system/blob/main/proprietary/tokens/CHANGELOG.md) to guide you through updates.
+The tokens are a public API of the design system.
+Note that detecting changed or deleted tokens is still a manual process.
+
+## Support
+
+Contact us if you have a question, find an issue, or want to contribute.
+Find ways to reach us on [designsystem.amsterdam](https://designsystem.amsterdam/?path=/docs/docs-introduction--docs#send-a-message).

package/dist/compact.css

@@ -3,22 +3,22 @@
  */
 
 :root {
-  --ams-text-level-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
-  --ams-text-level-5-font-size: 1rem;
-  --ams-text-level-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-  --ams-text-level-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-  --ams-text-level-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
-  --ams-text-level-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
-  --ams-text-level-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
-  --ams-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
-  --ams-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
-  --ams-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
-  --ams-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
-  --ams-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
-  --ams-space-xl: 2rem;
-  --ams-space-lg: 1.5rem;
-  --ams-space-md: 1rem;
-  --ams-space-sm: 0.5rem;
   --ams-space-xs: 0.25rem;
+  --ams-space-sm: 0.5rem;
+  --ams-space-md: 1rem;
+  --ams-space-lg: 1.5rem;
+  --ams-space-xl: 2rem;
+  --ams-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
+  --ams-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
+  --ams-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
+  --ams-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
+  --ams-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
+  --ams-text-level-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
+  --ams-text-level-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
+  --ams-text-level-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
+  --ams-text-level-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
+  --ams-text-level-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
+  --ams-text-level-5-font-size: 1rem;
+  --ams-text-level-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
   --ams-grid-padding-inline: var(--ams-space-grid-md);
 }

package/dist/compact.scss

@@ -1,21 +1,21 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$ams-text-level-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
-$ams-text-level-5-font-size: 1rem;
-$ams-text-level-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-$ams-text-level-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-$ams-text-level-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
-$ams-text-level-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
-$ams-text-level-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
-$ams-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
-$ams-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
-$ams-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
-$ams-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
-$ams-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
-$ams-space-xl: 2rem;
-$ams-space-lg: 1.5rem;
-$ams-space-md: 1rem;
-$ams-space-sm: 0.5rem;
 $ams-space-xs: 0.25rem;
+$ams-space-sm: 0.5rem;
+$ams-space-md: 1rem;
+$ams-space-lg: 1.5rem;
+$ams-space-xl: 2rem;
+$ams-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
+$ams-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
+$ams-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
+$ams-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
+$ams-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
+$ams-text-level-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
+$ams-text-level-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
+$ams-text-level-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
+$ams-text-level-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
+$ams-text-level-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
+$ams-text-level-5-font-size: 1rem;
+$ams-text-level-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
 $ams-grid-padding-inline: $ams-space-grid-md;

package/dist/compact.theme.css

@@ -3,22 +3,22 @@
  */
 
 .ams-theme--compact {
-  --ams-text-level-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
-  --ams-text-level-5-font-size: 1rem;
-  --ams-text-level-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
-  --ams-text-level-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
-  --ams-text-level-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
-  --ams-text-level-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
-  --ams-text-level-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
-  --ams-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
-  --ams-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
-  --ams-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
-  --ams-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
-  --ams-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
-  --ams-space-xl: 2rem;
-  --ams-space-lg: 1.5rem;
-  --ams-space-md: 1rem;
-  --ams-space-sm: 0.5rem;
   --ams-space-xs: 0.25rem;
+  --ams-space-sm: 0.5rem;
+  --ams-space-md: 1rem;
+  --ams-space-lg: 1.5rem;
+  --ams-space-xl: 2rem;
+  --ams-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
+  --ams-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
+  --ams-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
+  --ams-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
+  --ams-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
+  --ams-text-level-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
+  --ams-text-level-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
+  --ams-text-level-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
+  --ams-text-level-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
+  --ams-text-level-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
+  --ams-text-level-5-font-size: 1rem;
+  --ams-text-level-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
   --ams-grid-padding-inline: var(--ams-space-grid-md);
 }