@amsterdam/design-system-tokens 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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))
+* Remove spacious and compact tokens from component level tokens ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
+* Remove deprecated `inList` 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))
+* Remove spacious and compact tokens from component level tokens ([#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 `inList` 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

package/build.js

@@ -0,0 +1,99 @@
+const StyleDictionary = require('style-dictionary')
+
+const modes = ['compact']
+
+function generateSharedConfig(mode) {
+  const name = 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${name === 'index' ? '' : `--${name}`}`,
+            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 Tue, 13 Feb 2024 11:27:27 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 Tue, 13 Feb 2024 11:27:27 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 Tue, 13 Feb 2024 11:27:27 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 Tue, 13 Feb 2024 11:27:27 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 Tue, 13 Feb 2024 11:27:27 GMT
+ */
+
+.amsterdam-theme--compact {
+  --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);
+}