@amsterdam/design-system-tokens 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -3,8 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [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)
+## [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
+
+* Rename Form Field Character Counter to Character Count ([#1363](https://github.com/Amsterdam/design-system/issues/1363))
+* Improve sizing behaviour of Dialog ([#1329](https://github.com/Amsterdam/design-system/issues/1329))
+* Merge ‘stack’ and ‘inside’ space categories and update components ([#1267](https://github.com/Amsterdam/design-system/issues/1267))
+
+### Features
+
+* Add focus on initial render to Form Error List ([#1328](https://github.com/Amsterdam/design-system/issues/1328)) ([09387b7](https://github.com/Amsterdam/design-system/commit/09387b7b7d5f03a7422910314de4ae4d0ccbb983))
+* Apply default gap in Row and Column without extra class ([#1422](https://github.com/Amsterdam/design-system/issues/1422)) ([3af0b1f](https://github.com/Amsterdam/design-system/commit/3af0b1fb40ca941fd3966d08e6afe18995e6d02f))
+* Decrease space length in Compact Mode  ([#1307](https://github.com/Amsterdam/design-system/issues/1307)) ([27af2a6](https://github.com/Amsterdam/design-system/commit/27af2a62df5304bb5d80324b235463a4409071b5))
+* Decrease text size in Compact Mode ([#1306](https://github.com/Amsterdam/design-system/issues/1306)) ([991efda](https://github.com/Amsterdam/design-system/commit/991efdafe7a19fa32049687a700ae7a5a2806f98))
+* Improve sizing behaviour of Dialog ([#1329](https://github.com/Amsterdam/design-system/issues/1329)) ([a54d239](https://github.com/Amsterdam/design-system/commit/a54d239e2aff832bc15f8f90ea8880c02fa0d6ce))
+* Merge ‘stack’ and ‘inside’ space categories and update components ([#1267](https://github.com/Amsterdam/design-system/issues/1267)) ([a0de626](https://github.com/Amsterdam/design-system/commit/a0de626d4fbdc9e0eac71492d544d35ad4dc8769))
+* Remove fluidity from body text and spacing in Compact Mode ([#1389](https://github.com/Amsterdam/design-system/issues/1389)) ([050b063](https://github.com/Amsterdam/design-system/commit/050b063ba968d4c4657611293f3d3798f0fd02de))
+* Rename Form Field Character Counter to Character Count ([#1363](https://github.com/Amsterdam/design-system/issues/1363)) ([a5299db](https://github.com/Amsterdam/design-system/commit/a5299dbfb3659bada5565893be63f615b511c0ee))
+* Use flexbox and regular space in Column as we do in Row ([#1388](https://github.com/Amsterdam/design-system/issues/1388)) ([86d693c](https://github.com/Amsterdam/design-system/commit/86d693cf75be205cd096abe339cdd3f97e9b1a2f))
 
+## [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
 
@@ -18,7 +66,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))
@@ -42,7 +89,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))
@@ -50,7 +96,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))
@@ -70,27 +115,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))
@@ -101,7 +142,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))
@@ -109,7 +149,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))
@@ -135,21 +174,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/build.js

@@ -1,4 +1,4 @@
-const StyleDictionary = require('style-dictionary')
+import StyleDictionary from 'style-dictionary'
 
 const modes = ['compact']
 
@@ -7,7 +7,7 @@ function generateSharedConfig(mode) {
 
   return {
     css: {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      transforms: ['attribute/cti', 'name/kebab', 'color/hsl-4'],
       transformGroup: 'css',
       buildPath: 'dist/',
       files: [
@@ -21,7 +21,7 @@ function generateSharedConfig(mode) {
       ],
     },
     cssTheme: {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      transforms: ['attribute/cti', 'name/kebab', 'color/hsl-4'],
       buildPath: 'dist/',
       files: [
         {
@@ -35,7 +35,7 @@ function generateSharedConfig(mode) {
       ],
     },
     js: {
-      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
       buildPath: 'dist/',
       files: [
         {
@@ -45,7 +45,7 @@ function generateSharedConfig(mode) {
       ],
     },
     json: {
-      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
       buildPath: 'dist/',
       files: [
         {
@@ -55,7 +55,7 @@ function generateSharedConfig(mode) {
       ],
     },
     scss: {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      transforms: ['attribute/cti', 'name/kebab', 'color/hsl-4'],
       buildPath: 'dist/',
       files: [
         {
@@ -68,7 +68,7 @@ function generateSharedConfig(mode) {
       ],
     },
     typescript: {
-      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
       transformGroup: 'js',
       buildPath: 'dist/',
       files: [
@@ -81,19 +81,20 @@ function generateSharedConfig(mode) {
   }
 }
 
-console.log('Building default mode...')
-StyleDictionary.extend({
+const defaultMode = new StyleDictionary({
   source: [
     // exclude non-default modes from source
     `./src/**/!(*.${modes.join(`|*.`)}).tokens.json`,
   ],
   platforms: generateSharedConfig(),
-}).buildAllPlatforms()
+})
+
+defaultMode.buildAllPlatforms()
 
-modes.forEach((mode) => {
-  console.log(`\n\nBuilding ${mode} mode...`)
-  StyleDictionary.extend({
+modes.map((mode) => {
+  const styleDictionary = new StyleDictionary({
     source: [`./src/**/*.${mode}.tokens.json`],
     platforms: generateSharedConfig(mode),
-  }).buildAllPlatforms()
+  })
+  return styleDictionary.buildAllPlatforms()
 })

package/dist/compact.css

@@ -1,20 +1,24 @@
 /**
- * Do not edit directly
- * Generated on Fri, 28 Jun 2024 12:13:40 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root {
-  --ams-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
-  --ams-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
-  --ams-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
-  --ams-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
-  --ams-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
-  --ams-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
-  --ams-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
-  --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-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.d.ts

@@ -1,29 +1,27 @@
 /**
- * Do not edit directly
- * Generated on Fri, 28 Jun 2024 12:13:40 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 export default tokens;
 
 declare interface DesignToken {
-  value: any;
-  name?: string;
+  value?: any;
+  type?: string;
   comment?: string;
+  name?: string;
   themeable?: boolean;
-  attributes?: {
-    category?: string;
-    type?: string;
-    item?: string;
-    subitem?: string;
-    state?: string;
-    [key: string]: any;
-  };
+  attributes?: Record<string, unknown>;
   [key: string]: any;
 }
 
 declare const tokens: {
   "ams": {
     "space": {
+      "xs": DesignToken,
+      "sm": DesignToken,
+      "md": DesignToken,
+      "lg": DesignToken,
+      "xl": DesignToken,
       "grid": {
         "xs": DesignToken,
         "sm": DesignToken,

package/dist/compact.json

@@ -1,6 +1,11 @@
 {
   "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)",
@@ -12,25 +17,25 @@
     "text": {
       "level": {
         "0": {
-          "font-size": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)"
+          "font-size": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)"
         },
         "1": {
-          "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)"
+          "font-size": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)"
         },
         "2": {
-          "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)"
+          "font-size": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)"
         },
         "3": {
-          "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)"
+          "font-size": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)"
         },
         "4": {
-          "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)"
+          "font-size": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)"
         },
         "5": {
-          "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)"
+          "font-size": "1rem"
         },
         "6": {
-          "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)"
+          "font-size": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)"
         }
       }
     },

package/dist/compact.mjs

@@ -1,18 +1,22 @@
 /**
- * Do not edit directly
- * Generated on Fri, 28 Jun 2024 12:13:40 GMT
+ * 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.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
-export const amsTextLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
-export const amsTextLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
-export const amsTextLevel3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
-export const amsTextLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsTextLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
-export const amsTextLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+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)";

package/dist/compact.scss

@@ -1,17 +1,21 @@
 
-// Do not edit directly
-// Generated on Fri, 28 Jun 2024 12:13:40 GMT
+// Do not edit directly, this file was auto-generated.
 
-$ams-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
-$ams-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
-$ams-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
-$ams-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
-$ams-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
-$ams-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
-$ams-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
-$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-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;