@amsterdam/design-system-tokens 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -3,8 +3,96 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [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)
+## [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
 
+* Add collapsible menu to Header ([#1784](https://github.com/Amsterdam/design-system/issues/1784))
+* Disallow blue Spotlight and make purple the default ([#1798](https://github.com/Amsterdam/design-system/issues/1798))
+* Make active Tab look less like a primary Button ([#1773](https://github.com/Amsterdam/design-system/issues/1773))
+* Replace Aspect Ratio component with utility classes and prop on Image ([#1593](https://github.com/Amsterdam/design-system/issues/1593))
+* Use new Button features for SearchField ([#1695](https://github.com/Amsterdam/design-system/issues/1695))
+
+### Features
+
+* Add collapsible menu to Header ([#1784](https://github.com/Amsterdam/design-system/issues/1784)) ([44ce6d8](https://github.com/Amsterdam/design-system/commit/44ce6d8ac5a3fc48fd7de258c48fbafdd9928b9f))
+* Add Figure component ([#1795](https://github.com/Amsterdam/design-system/issues/1795)) ([3505dcc](https://github.com/Amsterdam/design-system/commit/3505dcca183551dce318046f54ad4570cc6e6d2b))
+* Add File List component to display below a File Input ([#1751](https://github.com/Amsterdam/design-system/issues/1751)) ([0192404](https://github.com/Amsterdam/design-system/commit/01924048c53805eb1536d2aa9b5454bcd44375b8))
+* Add Icon to Error Message ([#1746](https://github.com/Amsterdam/design-system/issues/1746)) ([eca5fe4](https://github.com/Amsterdam/design-system/commit/eca5fe4ed0325b01860f816c70247c26e2158f9c))
+* Allow an icon to display with an inverse color ([#1787](https://github.com/Amsterdam/design-system/issues/1787)) ([1f5d166](https://github.com/Amsterdam/design-system/commit/1f5d16697a1b332b6c1bbd830cda1220010a78d6))
+* Disallow blue Spotlight and make purple the default ([#1798](https://github.com/Amsterdam/design-system/issues/1798)) ([8d1c266](https://github.com/Amsterdam/design-system/commit/8d1c266f3f7e90b02bcb240c41256578a80c7668))
+* Let Footer set its own background colour ([#1797](https://github.com/Amsterdam/design-system/issues/1797)) ([310f595](https://github.com/Amsterdam/design-system/commit/310f59553a9ad057f3fe80b23bfda5acf108906d))
+* Make active Tab look less like a primary Button ([#1773](https://github.com/Amsterdam/design-system/issues/1773)) ([2ec0102](https://github.com/Amsterdam/design-system/commit/2ec010286dd64ecebefa040a0ab18cf192542d0f))
+* Make border of Radio thicker when hovering ([#1696](https://github.com/Amsterdam/design-system/issues/1696)) ([8839012](https://github.com/Amsterdam/design-system/commit/88390124aa5197f6c784dae4fc2a7c3e18d75ca6))
+* Replace Aspect Ratio component with utility classes and prop on Image ([#1593](https://github.com/Amsterdam/design-system/issues/1593)) ([766efba](https://github.com/Amsterdam/design-system/commit/766efbac45e8831a19f3e99bd9d0550028d8d4fd))
+* Use new Button features for SearchField ([#1695](https://github.com/Amsterdam/design-system/issues/1695)) ([7b275d0](https://github.com/Amsterdam/design-system/commit/7b275d0c803b309095ba7c425bb6bf04630775a9))
+
+## [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
 

package/README.md

@@ -80,15 +80,22 @@ Examples:
 
 ```css
 :root {
-  --ams-color-primary-red: #ec0000;
-  --ams-space-md: 1rem;
-  --ams-proportion-wide: 4/3;
-  --ams-border-width-lg: 0.1875rem;
+  --ams-color-feedback-error: #ec0000;
+  --ams-space-m: 1rem;
+  --ams-aspect-ratio-wide: 4/3;
+  --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.
 
+##### 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
 
 Related components share visual design characteristics.
@@ -104,8 +111,8 @@ 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);
 }
 ```
 
@@ -146,16 +153,22 @@ Note that redefining the value of a token is a much better approach than redecla
 ## Usage in Sass
 
 The tokens can be imported as Sass variables as well.
+As they are already prefixed, the namespace that Sass would assign isn’t necessary.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/index.scss"
+@use "@amsterdam/design-system-tokens/dist/index.scss" as *;
 ```
 
-Import the compact tokens if you need them.
-Sass will override spacious values automatically.
+Import the compact tokens if needed.
+Note that Sass doesn't allow importing them alongside the default set due to naming conflicts.
+Address these tokens through the `compact` namespace and do not use the spacious tokens they replace.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/compact.scss"
+@use "@amsterdam/design-system-tokens/dist/compact.scss";
+
+.class {
+  padding-block: compact.$ams-space-m;
+}
 ```
 
 ## Usage in JavaScript
@@ -165,20 +178,20 @@ Here, tokens start their name with a prefix of `ams.`.
 Use ‘dot notation’ or square brackets to access the tokens.
 
 <!-- prettier-ignore -->
-```ts
+```tsx
 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.
 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"
+```tsx
 import compactTokens from "@amsterdam/design-system-tokens/dist/compact.json"
+import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json"
 
 const tokens = { ...spaciousTokens, ...compactTokens }
 ```

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,35 +91,39 @@ 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'],
     },
   }
 }
 
 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({
-    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

@@ -15,48 +15,54 @@ declare interface DesignToken {
 }
 
 declare const tokens: {
-  "ams": {
-    "space": {
-      "xs": DesignToken,
-      "sm": DesignToken,
-      "md": DesignToken,
-      "lg": DesignToken,
-      "xl": DesignToken,
-      "grid": {
-        "xs": DesignToken,
-        "sm": DesignToken,
-        "md": DesignToken,
-        "lg": DesignToken,
-        "xl": DesignToken
-      }
-    },
-    "text": {
-      "level": {
+  ams: {
+    space: {
+      xs: DesignToken;
+      s: DesignToken;
+      m: DesignToken;
+      l: DesignToken;
+      xl: DesignToken;
+      "2xl": DesignToken;
+    };
+    typography: {
+      "body-text": {
+        "font-size": DesignToken;
+        small: {
+          "font-size": DesignToken;
+        };
+        large: {
+          "font-size": DesignToken;
+        };
+        "x-large": {
+          "font-size": DesignToken;
+        };
+      };
+      heading: {
         "0": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "1": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "2": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "3": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "4": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "5": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "6": {
-          "font-size": DesignToken
-        }
-      }
-    },
-    "grid": {
-      "padding-inline": DesignToken
-    }
-  }
-}
+          "font-size": DesignToken;
+        };
+      };
+    };
+    grid: {
+      "padding-inline": 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,21 +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 = "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)";
-export const amsTextLevel1FontSize = "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)";
-export const amsTextLevel2FontSize = "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
-export const amsTextLevel3FontSize = "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)";
-export const amsTextLevel4FontSize = "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)";
-export const amsTextLevel5FontSize = "1rem";
-export const amsTextLevel6FontSize = "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)";
-export const amsGridPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)";
+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 amsTypographyHeading_1FontSize =
+  "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)";
+export const amsTypographyHeading_2FontSize =
+  "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
+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)";

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;