@amsterdam/design-system-tokens 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064))
+
+### Features
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067)) ([e773434](https://github.com/Amsterdam/design-system/commit/e7734347a9e7205d510a16a543294bde69b9c6f0))
+* Hyphenate headings and other large text components ([#1056](https://github.com/Amsterdam/design-system/issues/1056)) ([f875171](https://github.com/Amsterdam/design-system/commit/f8751716018d4ed269a086e1764741ad29714fa0))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064)) ([b30784b](https://github.com/Amsterdam/design-system/commit/b30784b352b4a057069ceb397951b79a6e2547f2))
+
+## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.3.0...@amsterdam/design-system-tokens@0.4.0) (2024-01-31)
+
+### ⚠ BREAKING CHANGES
+
+* Change blue color names of Spotlight to match Badge API (#1061)
+* Remove unused grey-4 color token (#1059)
+* Add icon button (#1021)
+* Update alert appearance, make ‘warning’ the default and icon non-optional (#993)
+
+### Features
+
+* Add Badge component ([#1045](https://github.com/Amsterdam/design-system/issues/1045)) ([d346cdf](https://github.com/Amsterdam/design-system/commit/d346cdfd2b3c7fab08e6bae10314420f1fde8a5f))
+* Add icon button ([#1021](https://github.com/Amsterdam/design-system/issues/1021)) ([b6e1c26](https://github.com/Amsterdam/design-system/commit/b6e1c260878c09340c9fc89f8740ae033e206855))
+* Add MegaMenu component ([#992](https://github.com/Amsterdam/design-system/issues/992)) ([de9fcc6](https://github.com/Amsterdam/design-system/commit/de9fcc65cced79a07cf201613b8616193f86b810))
+* Add Table ([#1043](https://github.com/Amsterdam/design-system/issues/1043)) ([2175b22](https://github.com/Amsterdam/design-system/commit/2175b22dbab369fb5d7f817a09c7f0560d8d8195))
+* Change blue color names of Spotlight to match Badge API ([#1061](https://github.com/Amsterdam/design-system/issues/1061)) ([0e663bd](https://github.com/Amsterdam/design-system/commit/0e663bd1bcbc8c848d16962749d6113cd3aaaf20))
+* Introduce separate Link List component ([#1051](https://github.com/Amsterdam/design-system/issues/1051)) ([7ccf23d](https://github.com/Amsterdam/design-system/commit/7ccf23d1128a6cade34ec6846d0fee23335af525))
+
+### Bug Fixes
+
+* Remove unused grey-4 color token ([#1059](https://github.com/Amsterdam/design-system/issues/1059)) ([379560e](https://github.com/Amsterdam/design-system/commit/379560eafc48d3301439c4e40268b65beae59a56))
+* Update alert appearance, make ‘warning’ the default and icon non-optional ([#993](https://github.com/Amsterdam/design-system/issues/993)) ([df15253](https://github.com/Amsterdam/design-system/commit/df152538278a73c4aceb094fece70025ff35dc5f))
+
 ## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.2.0...@amsterdam/design-system-tokens@0.3.0) (2023-12-22)
 
 ### ⚠ BREAKING CHANGES

package/build.js

@@ -0,0 +1,99 @@
+const StyleDictionary = require('style-dictionary')
+
+const modes = ['compact']
+
+function generateSharedConfig(mode) {
+  const name = mode ? `${mode}` : 'index'
+
+  return {
+    css: {
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      transformGroup: 'css',
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `${name}.css`,
+          format: 'css/variables',
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    cssTheme: {
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `${name}.theme.css`,
+          format: 'css/variables',
+          options: {
+            selector: '.amsterdam-theme',
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    js: {
+      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      buildPath: 'dist/',
+      files: [
+        {
+          format: 'javascript/es6',
+          destination: `${name}.mjs`,
+        },
+      ],
+    },
+    json: {
+      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `${name}.json`,
+          format: 'json/nested',
+        },
+      ],
+    },
+    scss: {
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `${name}.scss`,
+          format: 'scss/variables',
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    typescript: {
+      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      transformGroup: 'js',
+      buildPath: 'dist/',
+      files: [
+        {
+          format: 'typescript/module-declarations',
+          destination: `${name}.d.ts`,
+        },
+      ],
+    },
+  }
+}
+
+console.log('Building default mode...')
+StyleDictionary.extend({
+  source: [
+    // exclude non-default modes from source
+    `./src/**/!(*.${modes.join(`|*.`)}).tokens.json`,
+  ],
+  platforms: generateSharedConfig(),
+}).buildAllPlatforms()
+
+modes.forEach((mode) => {
+  console.log(`\n\nBuilding ${mode} mode...`)
+  StyleDictionary.extend({
+    source: [`./src/**/*.${mode}.tokens.json`],
+    platforms: generateSharedConfig(mode),
+  }).buildAllPlatforms()
+})

package/dist/compact.css

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ */
+
+:root {
+  --amsterdam-grid-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
+  --amsterdam-grid-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
+  --amsterdam-typography-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
+  --amsterdam-typography-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
+  --amsterdam-typography-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
+  --amsterdam-typography-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
+  --amsterdam-typography-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
+  --amsterdam-typography-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
+  --amsterdam-typography-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
+}

package/dist/compact.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ */
+
+export default tokens;
+
+declare interface DesignToken {
+  value: any;
+  name?: string;
+  comment?: string;
+  themeable?: boolean;
+  attributes?: {
+    category?: string;
+    type?: string;
+    item?: string;
+    subitem?: string;
+    state?: string;
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+declare const tokens: {
+  "amsterdam": {
+    "typography": {
+      "text-level": {
+        "0": {
+          "font-size": DesignToken
+        },
+        "1": {
+          "font-size": DesignToken
+        },
+        "2": {
+          "font-size": DesignToken
+        },
+        "3": {
+          "font-size": DesignToken
+        },
+        "4": {
+          "font-size": DesignToken
+        },
+        "5": {
+          "font-size": DesignToken
+        },
+        "6": {
+          "font-size": DesignToken
+        }
+      }
+    },
+    "grid": {
+      "gap": DesignToken,
+      "padding-inline": DesignToken
+    }
+  }
+}

package/dist/compact.json

@@ -0,0 +1,33 @@
+{
+  "amsterdam": {
+    "typography": {
+      "text-level": {
+        "0": {
+          "font-size": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)"
+        },
+        "1": {
+          "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)"
+        },
+        "2": {
+          "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)"
+        },
+        "3": {
+          "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)"
+        },
+        "4": {
+          "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)"
+        },
+        "5": {
+          "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)"
+        },
+        "6": {
+          "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)"
+        }
+      }
+    },
+    "grid": {
+      "gap": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+      "padding-inline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"
+    }
+  }
+}

package/dist/compact.mjs

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ */
+
+export const amsterdamTypographyTextLevel0FontSize = "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
+export const amsterdamTypographyTextLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
+export const amsterdamTypographyTextLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
+export const amsterdamTypographyTextLevel3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
+export const amsterdamTypographyTextLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamTypographyTextLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamTypographyTextLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamGridGap = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
+export const amsterdamGridPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Equals the gap.

package/dist/compact.scss

@@ -0,0 +1,13 @@
+
+// Do not edit directly
+// Generated on Fri, 09 Feb 2024 16:26:11 GMT
+
+$amsterdam-grid-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Equals the gap.
+$amsterdam-grid-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
+$amsterdam-typography-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
+$amsterdam-typography-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
+$amsterdam-typography-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
+$amsterdam-typography-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
+$amsterdam-typography-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
+$amsterdam-typography-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
+$amsterdam-typography-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);

package/dist/compact.theme.css

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ */
+
+.amsterdam-theme {
+  --amsterdam-grid-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
+  --amsterdam-grid-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
+  --amsterdam-typography-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
+  --amsterdam-typography-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
+  --amsterdam-typography-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
+  --amsterdam-typography-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
+  --amsterdam-typography-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
+  --amsterdam-typography-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
+  --amsterdam-typography-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
+}