@amsterdam/design-system-tokens 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.15.0...design-system-tokens-v0.16.0) (2025-04-25)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Screen:** Delete component (use Page instead) ([#2018](https://github.com/Amsterdam/design-system/issues/2018))
+* **Grid:** Match values for padding and gap with Space sizes ([#1993](https://github.com/Amsterdam/design-system/issues/1993))
+* **Link:** Remove ‘variant’ prop, make inline the default ([#1994](https://github.com/Amsterdam/design-system/issues/1994))
+* **Card:** Replace gap with margins and introduce subcomponents ([#1972](https://github.com/Amsterdam/design-system/issues/1972))
+* **Top Task Link:** Remove component ([#1988](https://github.com/Amsterdam/design-system/issues/1988))
+* **Footer:** Rename component to Page Footer ([#1971](https://github.com/Amsterdam/design-system/issues/1971))
+* **Header:** Rename component to Page Header ([#1970](https://github.com/Amsterdam/design-system/issues/1970))
+
+### Features
+
+* Add Standalone Link ([#1979](https://github.com/Amsterdam/design-system/issues/1979)) ([b5d57bb](https://github.com/Amsterdam/design-system/commit/b5d57bbd34c7817e436f7b28d5dc675213394bfb))
+* **Alert:** Increase horizontal spacing around icon ([#1974](https://github.com/Amsterdam/design-system/issues/1974)) ([a71e1ba](https://github.com/Amsterdam/design-system/commit/a71e1ba779590fb7d7c8bd6c60e69309f268824c))
+* **Avatar, Badge, Spotlight:** Use inverse text on azure background, add guidelines to pair colours ([#1965](https://github.com/Amsterdam/design-system/issues/1965)) ([772b0dd](https://github.com/Amsterdam/design-system/commit/772b0dd0828fc492108bd19ab9726da1d42b67d9))
+* Balance text wrapping in all kinds of Headings ([#1968](https://github.com/Amsterdam/design-system/issues/1968)) ([ecc87a0](https://github.com/Amsterdam/design-system/commit/ecc87a091b356aaffaa8d0a11f1e7014c4f48f41))
+* **Card:** Replace gap with margins and introduce subcomponents ([#1972](https://github.com/Amsterdam/design-system/issues/1972)) ([85e34d4](https://github.com/Amsterdam/design-system/commit/85e34d4ec3da1589c95925a677e5800fb071dc32))
+* **Dialog:** Decrease amounts of inner and outer whitespace ([#1975](https://github.com/Amsterdam/design-system/issues/1975)) ([b47526f](https://github.com/Amsterdam/design-system/commit/b47526f24e5c6c9ce94f8280f93e6273d16a8640))
+* **Footer:** Rename component to Page Footer ([#1971](https://github.com/Amsterdam/design-system/issues/1971)) ([d0f7edc](https://github.com/Amsterdam/design-system/commit/d0f7edc1bd3dcbba0973d4494fd6c9e90a158cd2))
+* **Grid:** Match values for padding and gap with Space sizes ([#1993](https://github.com/Amsterdam/design-system/issues/1993)) ([f161152](https://github.com/Amsterdam/design-system/commit/f161152292f86770ffda0d60c3448f8d20b7b775))
+* **Header:** Rename component to Page Header ([#1970](https://github.com/Amsterdam/design-system/issues/1970)) ([17172e4](https://github.com/Amsterdam/design-system/commit/17172e4fd89c630be6eb604d12058214a075a82b))
+* **Link:** Remove ‘variant’ prop, make inline the default ([#1994](https://github.com/Amsterdam/design-system/issues/1994)) ([75b07b8](https://github.com/Amsterdam/design-system/commit/75b07b8bbdc758da26ce0319e2b989d079744065))
+* **Page:** Add Page component ([#1982](https://github.com/Amsterdam/design-system/issues/1982)) ([813033c](https://github.com/Amsterdam/design-system/commit/813033c93be66dabccae3ff5f32484487dffc1aa))
+* **Screen:** Delete component (use Page instead) ([#2018](https://github.com/Amsterdam/design-system/issues/2018)) ([0c59f6d](https://github.com/Amsterdam/design-system/commit/0c59f6dccffa7eda745a3b34554c86b646d514ba))
+* **Top Task Link:** Remove component ([#1988](https://github.com/Amsterdam/design-system/issues/1988)) ([6da8a9b](https://github.com/Amsterdam/design-system/commit/6da8a9bdf47648a3ff0e18f89ed722092d0dad18))
+
+
+### Bug Fixes
+
+* **Page Footer:** Set correct inline padding ([#2004](https://github.com/Amsterdam/design-system/issues/2004)) ([cb2e70c](https://github.com/Amsterdam/design-system/commit/cb2e70ce04e05aed64299e1df8c40b9d8873ca83))
+* **Page Header:** Restore alignment with edges of Grid ([#1976](https://github.com/Amsterdam/design-system/issues/1976)) ([723a757](https://github.com/Amsterdam/design-system/commit/723a757511c921e8e5a4181c348ebd2077527a44))
+
+## [0.15.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.14.0...design-system-tokens-v0.15.0) (2025-03-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* Shorten size labels in prop values for Row and Column, tokens and utility classes ([#1940](https://github.com/Amsterdam/design-system/issues/1940), [#1951](https://github.com/Amsterdam/design-system/issues/1951))
+* Shorten size labels in border tokens ([#1941](https://github.com/Amsterdam/design-system/issues/1941))
+* Consolidate Grid Space and Component Space into one set of spacing tokens ([#1910](https://github.com/Amsterdam/design-system/issues/1910))
+* **Tabs:** Remove unnecessary token, reuse color value ([#1932](https://github.com/Amsterdam/design-system/issues/1932))
+* Update aspect ratio tokens and CSS utility classes ([#1913](https://github.com/Amsterdam/design-system/issues/1913))
+* Update and document focus tokens ([#1919](https://github.com/Amsterdam/design-system/issues/1919))
+* Update hyphenation tokens ([#1914](https://github.com/Amsterdam/design-system/issues/1914))
+* **Header:** Add responsive version of Amsterdam Logo, remove Heading level 1 ([#1880](https://github.com/Amsterdam/design-system/issues/1880))
+* Split typography tokens into ‘body text’ and ‘heading’ groups ([#1890](https://github.com/Amsterdam/design-system/issues/1890))
+* **Dialog:** Prevent a focus indicator from being cut off ([#1879](https://github.com/Amsterdam/design-system/issues/1879))
+* **Footer:** add FooterMenu component to replace PageMenu in Footer ([#1871](https://github.com/Amsterdam/design-system/issues/1871))
+* Rename and document common tokens for links ([#1870](https://github.com/Amsterdam/design-system/issues/1870))
+* **Avatar:** Use updated color names for azure, lime and green  ([#1867](https://github.com/Amsterdam/design-system/issues/1867))
+* **Badge:** Use updated color names for azure and lime ([#1866](https://github.com/Amsterdam/design-system/issues/1866))
+* **Spotlight:** Use updated color names for lime and green and remove purple as an explicit option ([#1865](https://github.com/Amsterdam/design-system/issues/1865))
+* Remove action tokens, add and implement cursor tokens ([#1860](https://github.com/Amsterdam/design-system/issues/1860))
+* Combine contrast and inverse color options into a single prop ([#1822](https://github.com/Amsterdam/design-system/issues/1822))
+* Change all brand colour tokens to use semantic names ([#1820](https://github.com/Amsterdam/design-system/issues/1820))
+* Rename Form Error List to Invalid Form Alert ([#1835](https://github.com/Amsterdam/design-system/issues/1835))
+* **Pagination:** Use links instead of buttons ([#1821](https://github.com/Amsterdam/design-system/issues/1821))
+* **Badge:** Remove some colour options ([#1826](https://github.com/Amsterdam/design-system/issues/1826))
+* **Avatar:** Remove some colour options and make purple the default ([#1825](https://github.com/Amsterdam/design-system/issues/1825))
+* Move alert icon into thick left border ([#1792](https://github.com/Amsterdam/design-system/issues/1792))
+
+### Features
+
+* **Accordion:** Increase text size for Heading to level 4 ([#1837](https://github.com/Amsterdam/design-system/issues/1837)) ([1e914c9](https://github.com/Amsterdam/design-system/commit/1e914c9efd9087a0855e3f03661b46f6b228740a))
+* **Avatar:** Remove some colour options and make purple the default ([#1825](https://github.com/Amsterdam/design-system/issues/1825)) ([52d8c64](https://github.com/Amsterdam/design-system/commit/52d8c64f653309cce34e222d250f56c7265078e0))
+* **Avatar:** Use updated color names for azure, lime and green  ([#1867](https://github.com/Amsterdam/design-system/issues/1867)) ([e8a2638](https://github.com/Amsterdam/design-system/commit/e8a2638882b95141c5e5e345bb7656f1f9968253))
+* **Badge:** Remove some colour options ([#1826](https://github.com/Amsterdam/design-system/issues/1826)) ([1325e1b](https://github.com/Amsterdam/design-system/commit/1325e1b213e4704fd738dada1a92b5362a1a5174))
+* **Badge:** Use updated color names for azure and lime ([#1866](https://github.com/Amsterdam/design-system/issues/1866)) ([fd25778](https://github.com/Amsterdam/design-system/commit/fd25778db56eeeecf2e716a72d25b91c49193fa1))
+* Change all brand colour tokens to use semantic names ([#1820](https://github.com/Amsterdam/design-system/issues/1820)) ([778222b](https://github.com/Amsterdam/design-system/commit/778222b5f7176648c647315287f2e2ceff3de491))
+* Combine contrast and inverse color options into a single prop ([#1822](https://github.com/Amsterdam/design-system/issues/1822)) ([51640be](https://github.com/Amsterdam/design-system/commit/51640bed21deee54d5dddcbaa22e2213155cd08a))
+* Consolidate Grid Space and Component Space into one set of spacing tokens ([#1910](https://github.com/Amsterdam/design-system/issues/1910)) ([f36e985](https://github.com/Amsterdam/design-system/commit/f36e9855c78f582df95fa0906f0849c2832c25a3))
+* **Description List:** Rename values for terms column widths ([#1942](https://github.com/Amsterdam/design-system/issues/1942)) ([e1a9669](https://github.com/Amsterdam/design-system/commit/e1a9669925927f1608433a4ae68676b925ba8bd2))
+* **Dialog:** Change background colour of backdrop and add token for it ([#1876](https://github.com/Amsterdam/design-system/issues/1876)) ([d071bb4](https://github.com/Amsterdam/design-system/commit/d071bb4149d2789d967abcdb84ccdfa4d5b7aecc))
+* **Footer:** add FooterMenu component to replace PageMenu in Footer ([#1871](https://github.com/Amsterdam/design-system/issues/1871)) ([85e0f0f](https://github.com/Amsterdam/design-system/commit/85e0f0f8c7fd9c281ba68155999e835921e4443d))
+* **Header:** Add responsive version of Amsterdam Logo, remove Heading level 1 ([#1880](https://github.com/Amsterdam/design-system/issues/1880)) ([7de8138](https://github.com/Amsterdam/design-system/commit/7de813861a565da89fee246731dc1525bc5d2643))
+* Move alert icon into thick left border ([#1792](https://github.com/Amsterdam/design-system/issues/1792)) ([ec53af7](https://github.com/Amsterdam/design-system/commit/ec53af73d05f22f5e077efdf3ce9a73ed4d7e235))
+* **Pagination:** Use links instead of buttons ([#1821](https://github.com/Amsterdam/design-system/issues/1821)) ([6980251](https://github.com/Amsterdam/design-system/commit/698025132af2c0b944e9cc99f9754b065127fb68))
+* Remove action tokens, add and implement cursor tokens ([#1860](https://github.com/Amsterdam/design-system/issues/1860)) ([40a04a8](https://github.com/Amsterdam/design-system/commit/40a04a88e8c5829df54eb3a6ca338557249aec5d))
+* Rename and document common tokens for links ([#1870](https://github.com/Amsterdam/design-system/issues/1870)) ([551743d](https://github.com/Amsterdam/design-system/commit/551743d11436ff2363f8dd1187afe166e6c4a02b))
+* Rename Form Error List to Invalid Form Alert ([#1835](https://github.com/Amsterdam/design-system/issues/1835)) ([e8d015a](https://github.com/Amsterdam/design-system/commit/e8d015ae6a1e785a29505c033f29cd67aaab3d66))
+* Shorten size labels in border tokens ([#1941](https://github.com/Amsterdam/design-system/issues/1941)) ([fa154a6](https://github.com/Amsterdam/design-system/commit/fa154a6c96a11a43623f959a51f782abae27449e))
+* Shorten size labels in prop values for Row and Column, space tokens and utility classes ([#1940](https://github.com/Amsterdam/design-system/issues/1940)) ([694987c](https://github.com/Amsterdam/design-system/commit/694987c88773983e4cd12d518cc957d34ec29d7e))
+* Split typography tokens into ‘body text’ and ‘heading’ groups ([#1890](https://github.com/Amsterdam/design-system/issues/1890)) ([3126aa2](https://github.com/Amsterdam/design-system/commit/3126aa29d5aebccfca272892d55f140783a94d43))
+* **Spotlight:** Use updated color names for lime and green and remove purple as an explicit option ([#1865](https://github.com/Amsterdam/design-system/issues/1865)) ([387ae45](https://github.com/Amsterdam/design-system/commit/387ae45ce263ae3b6a12fc9a3b22a37dc0aed997))
+* **typography:** Improve line heights for all body text and headings ([#1894](https://github.com/Amsterdam/design-system/issues/1894)) ([8a57198](https://github.com/Amsterdam/design-system/commit/8a571988a8f11fb5aa1dfe550ca8b74e9d8b3e55))
+* Update and document focus tokens ([#1919](https://github.com/Amsterdam/design-system/issues/1919)) ([4c85170](https://github.com/Amsterdam/design-system/commit/4c85170f2b8eec5ce956cecdbb41430ce2c37639))
+* Update aspect ratio tokens and CSS utility classes ([#1913](https://github.com/Amsterdam/design-system/issues/1913)) ([968ef2b](https://github.com/Amsterdam/design-system/commit/968ef2bf053803c356e36424836fd9934da123fd))
+* Update hyphenation tokens ([#1914](https://github.com/Amsterdam/design-system/issues/1914)) ([0c7f359](https://github.com/Amsterdam/design-system/commit/0c7f359ff094e281022441d171bd617047c660b2))
+
+
+### Bug Fixes
+
+* **Column, Row:** Do not use utility classes ([#1951](https://github.com/Amsterdam/design-system/issues/1951)) ([a5a74f8](https://github.com/Amsterdam/design-system/commit/a5a74f8bbb55ab54c7b179be29d4a804b088044a))
+* **Dialog:** Prevent a focus indicator from being cut off ([#1879](https://github.com/Amsterdam/design-system/issues/1879)) ([336ff55](https://github.com/Amsterdam/design-system/commit/336ff554d2a4a213c1f62bd32b02219ca41a802c))
+* **Dialog:** Update Dialog border to fix forced color mode ([#1893](https://github.com/Amsterdam/design-system/issues/1893)) ([8b83271](https://github.com/Amsterdam/design-system/commit/8b83271a06dbdef42600d82e92cd56f1ec7d5509))
+* **Tabs:** Remove unnecessary token, reuse color value ([#1932](https://github.com/Amsterdam/design-system/issues/1932)) ([cabfd59](https://github.com/Amsterdam/design-system/commit/cabfd5967a9c0cb17ab0bac627f19261f29bcf2e))
+
 ## [0.14.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.13.0...design-system-tokens-v0.14.0) (2025-01-10)
 
 ### ⚠ BREAKING CHANGES

package/LICENSE.md

@@ -2,6 +2,6 @@
 
 # License
 
-The open source license does NOT apply to files in this directory.
+The open-source licence does NOT apply to files in this directory.
 
-These are properietary assets to the City of Amsterdam.
+These are proprietary assets to the City of Amsterdam.

package/README.md

@@ -80,14 +80,21 @@ Examples:
 
 ```css
 :root {
-  --ams-color-primary-red: #ec0000;
-  --ams-space-md: 1rem;
+  --ams-color-feedback-error: #ec0000;
+  --ams-space-m: 1rem;
   --ams-aspect-ratio-wide: 4/3;
-  --ams-border-width-lg: 0.1875rem;
+  --ams-border-width-l: 0.1875rem;
 }
 ```
 
-Find the [list of brand tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/brand/ams) on GitHub.
+Find the [list of brand tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/brand/ams) on GitHub.
+
+##### Removing ‘default’ keys
+
+Some brand tokens include a ‘default’ key in JSON to allow for additional variants, such as `ams.color.interactive.default` and `ams.color.interactive.disabled`
+However, this key is not needed for collections of variables that are flat, like our CSS custom properties.
+Therefore, we remove this key in non-nested variables.
+For instance, `--ams-color-interactive` and `--ams-color-interactive-disabled`.
 
 #### Common tokens
 
@@ -104,12 +111,12 @@ The same goes for custom components that you may create in your application.
 
 ```css
 .my-input {
-  color: var(--ams-link-appearance-color);
-  text-underline-offset: var(--ams-link-appearance-text-underline-offset);
+  color: var(--ams-links-color);
+  text-underline-offset: var(--ams-links-text-underline-offset);
 }
 ```
 
-Find the [list of common tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/common/ams) on GitHub.
+Find the [list of common tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/common/ams) on GitHub.
 
 #### Component tokens
 
@@ -129,7 +136,7 @@ Do not apply these tokens to other components – components must be independent
 }
 ```
 
-Find the [list of component tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/component/ams) on GitHub.
+Find the [list of component tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/component/ams) on GitHub.
 
 ### Overriding tokens
 
@@ -160,7 +167,7 @@ Address these tokens through the `compact` namespace and do not use the spacious
 @use "@amsterdam/design-system-tokens/dist/compact.scss";
 
 .class {
-  padding-block: compact.$ams-space-md;
+  padding-block: compact.$ams-space-m;
 }
 ```
 
@@ -175,7 +182,7 @@ Use ‘dot notation’ or square brackets to access the tokens.
 import tokens from "@amsterdam/design-system-tokens/dist/index.json"
 
 const buttonBackgroundColor = tokens.ams.color["primary-blue"]
-const rowGap = tokens.ams.space.md
+const rowGap = tokens.ams.space.m
 ```
 
 Import and merge the compact tokens if you need them.
@@ -195,7 +202,7 @@ The tokens are used in our [Figma Library](https://www.figma.com/file/9IGm6IdPUY
 
 ## 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.
+We follow semantic versioning and publish a [change log](https://github.com/Amsterdam/design-system/blob/main/packages-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.
 

package/build.js

@@ -1,4 +1,30 @@
+import { camelCase, kebabCase } from 'change-case'
 import StyleDictionary from 'style-dictionary'
+import { transformTypes } from 'style-dictionary/enums'
+
+// Remove last key if it is 'default' when transforming to kebab-case
+// i.e. `ams.color.default` becomes `--ams-color`
+StyleDictionary.registerTransform({
+  name: 'name/customKebab',
+  transform: function (token) {
+    const filteredPath = token.path[token.path.length - 1] === 'default' ? token.path.slice(0, -1) : token.path
+
+    return kebabCase(filteredPath.join(' '))
+  },
+  type: transformTypes.name,
+})
+
+// Remove last key if it is 'default' when transforming to camelCase
+// i.e. `ams.color.default` becomes `amsColor`
+StyleDictionary.registerTransform({
+  name: 'name/customCamel',
+  transform: function (token) {
+    const filteredPath = token.path[token.path.length - 1] === 'default' ? token.path.slice(0, -1) : token.path
+
+    return camelCase(filteredPath.join(' '))
+  },
+  type: transformTypes.name,
+})
 
 const modes = ['compact']
 
@@ -7,8 +33,6 @@ function generateSharedConfig(mode) {
 
   return {
     css: {
-      transforms: ['attribute/cti', 'name/kebab', 'color/hsl-4'],
-      transformGroup: 'css',
       buildPath: 'dist/',
       files: [
         {
@@ -19,33 +43,34 @@ function generateSharedConfig(mode) {
           },
         },
       ],
+      transformGroup: 'css',
+      transforms: ['attribute/cti', 'name/customKebab', 'color/hsl-4'],
     },
     cssTheme: {
-      transforms: ['attribute/cti', 'name/kebab', 'color/hsl-4'],
       buildPath: 'dist/',
       files: [
         {
           destination: `${name}.theme.css`,
           format: 'css/variables',
           options: {
-            selector: `.ams-theme${name === 'index' ? '' : `--${name}`}`,
             outputReferences: true,
+            selector: `.ams-theme${name === 'index' ? '' : `--${name}`}`,
           },
         },
       ],
+      transforms: ['attribute/cti', 'name/customKebab', 'color/hsl-4'],
     },
     js: {
-      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
       buildPath: 'dist/',
       files: [
         {
-          format: 'javascript/es6',
           destination: `${name}.mjs`,
+          format: 'javascript/es6',
         },
       ],
+      transforms: ['attribute/cti', 'name/customCamel', 'color/hsl-4'],
     },
     json: {
-      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
       buildPath: 'dist/',
       files: [
         {
@@ -53,9 +78,9 @@ function generateSharedConfig(mode) {
           format: 'json/nested',
         },
       ],
+      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
     },
     scss: {
-      transforms: ['attribute/cti', 'name/kebab', 'color/hsl-4'],
       buildPath: 'dist/',
       files: [
         {
@@ -66,17 +91,18 @@ function generateSharedConfig(mode) {
           },
         },
       ],
+      transforms: ['attribute/cti', 'name/customKebab', 'color/hsl-4'],
     },
     typescript: {
-      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
-      transformGroup: 'js',
       buildPath: 'dist/',
       files: [
         {
-          format: 'typescript/module-declarations',
           destination: `${name}.d.ts`,
+          format: 'typescript/module-declarations',
         },
       ],
+      transformGroup: 'js',
+      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
     },
   }
 }
@@ -85,22 +111,19 @@ const defaultMode = new StyleDictionary({
   log: {
     verbosity: 'verbose',
   },
+  platforms: generateSharedConfig(),
   source: [
     // exclude non-default modes from source
     `./src/**/!(*.${modes.join(`|*.`)}).tokens.json`,
   ],
-  platforms: generateSharedConfig(),
 })
 
 defaultMode.buildAllPlatforms()
 
 modes.map((mode) => {
   const styleDictionary = new StyleDictionary({
-    log: {
-      verbosity: 'verbose',
-    },
-    source: [`./src/**/*.${mode}.tokens.json`],
     platforms: generateSharedConfig(mode),
+    source: [`./src/**/*.${mode}.tokens.json`],
   })
   return styleDictionary.buildAllPlatforms()
 })

package/dist/compact.css

@@ -3,22 +3,22 @@
  */
 
 :root {
-  --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);
+  --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-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-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-grid-padding-inline: var(--ams-space-xl);
 }

package/dist/compact.d.ts

@@ -18,20 +18,26 @@ declare const tokens: {
   ams: {
     space: {
       xs: DesignToken;
-      sm: DesignToken;
-      md: DesignToken;
-      lg: DesignToken;
+      s: DesignToken;
+      m: DesignToken;
+      l: DesignToken;
       xl: DesignToken;
-      grid: {
-        xs: DesignToken;
-        sm: DesignToken;
-        md: DesignToken;
-        lg: DesignToken;
-        xl: DesignToken;
-      };
+      "2xl": DesignToken;
     };
-    text: {
-      level: {
+    typography: {
+      "body-text": {
+        "font-size": DesignToken;
+        small: {
+          "font-size": DesignToken;
+        };
+        large: {
+          "font-size": DesignToken;
+        };
+        "x-large": {
+          "font-size": DesignToken;
+        };
+      };
+      heading: {
         "0": {
           "font-size": DesignToken;
         };

package/dist/compact.json

@@ -1,21 +1,27 @@
 {
   "ams": {
     "space": {
-      "xs": "0.25rem",
-      "sm": "0.5rem",
-      "md": "1rem",
-      "lg": "1.5rem",
-      "xl": "2rem",
-      "grid": {
-        "xs": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)",
-        "sm": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)",
-        "md": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-        "lg": "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)",
-        "xl": "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)"
-      }
+      "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)"
     },
-    "text": {
-      "level": {
+    "typography": {
+      "body-text": {
+        "font-size": "1rem",
+        "small": {
+          "font-size": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)"
+        },
+        "large": {
+          "font-size": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)"
+        },
+        "x-large": {
+          "font-size": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)"
+        }
+      },
+      "heading": {
         "0": {
           "font-size": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)"
         },
@@ -40,7 +46,7 @@
       }
     },
     "grid": {
-      "padding-inline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"
+      "padding-inline": "clamp(1.25rem, 1rem + 1.25vw, 2.25rem)"
     }
   }
 }

package/dist/compact.mjs

@@ -2,31 +2,30 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const amsSpaceXs = "0.25rem";
-export const amsSpaceSm = "0.5rem";
-export const amsSpaceMd = "1rem";
-export const amsSpaceLg = "1.5rem";
-export const amsSpaceXl = "2rem";
-export const amsSpaceGridXs =
-  "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)";
-export const amsSpaceGridSm =
-  "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)";
-export const amsSpaceGridMd = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
-export const amsSpaceGridLg =
-  "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)";
-export const amsSpaceGridXl = "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)";
-export const amsTextLevel0FontSize =
+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 amsTypographyBodyTextFontSize = "1rem";
+export const amsTypographyBodyTextSmallFontSize =
+  "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)";
+export const amsTypographyBodyTextLargeFontSize =
+  "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)";
+export const amsTypographyBodyTextXLargeFontSize =
+  "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)";
+export const amsTypographyHeading_0FontSize =
   "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)";
-export const amsTextLevel1FontSize =
+export const amsTypographyHeading_1FontSize =
   "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)";
-export const amsTextLevel2FontSize =
+export const amsTypographyHeading_2FontSize =
   "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
-export const amsTextLevel3FontSize =
+export const amsTypographyHeading_3FontSize =
   "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)";
-export const amsTextLevel4FontSize =
+export const amsTypographyHeading_4FontSize =
   "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)";
-export const amsTextLevel5FontSize = "1rem";
-export const amsTextLevel6FontSize =
+export const amsTypographyHeading_5FontSize = "1rem";
+export const amsTypographyHeading_6FontSize =
   "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)";
-export const amsGridPaddingInline =
-  "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)";
+export const amsGridPaddingInline = "clamp(1.25rem, 1rem + 1.25vw, 2.25rem)";

package/dist/compact.scss

@@ -1,21 +1,21 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$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;
+$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-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-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-grid-padding-inline: $ams-space-xl;

package/dist/compact.theme.css

@@ -3,22 +3,22 @@
  */
 
 .ams-theme--compact {
-  --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);
+  --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-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-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-grid-padding-inline: var(--ams-space-xl);
 }