@amsterdam/design-system-tokens 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.10.0...design-system-tokens-v0.11.0) (2024-07-25)
+
+
+### ⚠ 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
+
+* Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257))
+
+### Features
+
+* Add Table of Contents component ([#1248](https://github.com/Amsterdam/design-system/issues/1248)) ([1f4c09a](https://github.com/Amsterdam/design-system/commit/1f4c09a08d2aa96d1c584eceb498d33c31aa52ad))
+* Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257)) ([a1a3c8f](https://github.com/Amsterdam/design-system/commit/a1a3c8fc58f249f0cd9c7d8bd09cc46f3f48cb5c))
+* Change values for tall, wide, and extra wide aspect ratios ([#1254](https://github.com/Amsterdam/design-system/issues/1254)) ([478508a](https://github.com/Amsterdam/design-system/commit/478508a758f311b89dfb8214813b25e50d875ff0))
+
 ## [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)
 
 

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

package/dist/compact.d.ts

@@ -1,29 +1,27 @@
 /**
- * Do not edit directly
- * Generated on Wed, 05 Jun 2024 11:22:11 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 Wed, 05 Jun 2024 11:22:11 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 Wed, 05 Jun 2024 11:22:11 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-text-level-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
+$ams-text-level-5-font-size: 1rem;
+$ams-text-level-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
+$ams-text-level-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
+$ams-text-level-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
+$ams-text-level-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
+$ams-text-level-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
 $ams-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
 $ams-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
 $ams-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
 $ams-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
 $ams-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
+$ams-space-xl: 2rem;
+$ams-space-lg: 1.5rem;
+$ams-space-md: 1rem;
+$ams-space-sm: 0.5rem;
+$ams-space-xs: 0.25rem;
 $ams-grid-padding-inline: $ams-space-grid-md;

package/dist/compact.theme.css

@@ -1,20 +1,24 @@
 /**
- * Do not edit directly
- * Generated on Wed, 05 Jun 2024 11:22:11 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .ams-theme--compact {
-  --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-text-level-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
+  --ams-text-level-5-font-size: 1rem;
+  --ams-text-level-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
+  --ams-text-level-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
+  --ams-text-level-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
+  --ams-text-level-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
+  --ams-text-level-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
   --ams-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
   --ams-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
   --ams-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
   --ams-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
   --ams-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
+  --ams-space-xl: 2rem;
+  --ams-space-lg: 1.5rem;
+  --ams-space-md: 1rem;
+  --ams-space-sm: 0.5rem;
+  --ams-space-xs: 0.25rem;
   --ams-grid-padding-inline: var(--ams-space-grid-md);
 }