@utrecht/design-tokens 2.1.1 → 2.3.0

package/dist/variables.cjs

@@ -80,7 +80,7 @@ module.exports = {
   "utrechtBlockquoteMarginInlineEnd": "1.6em",
   "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
   "utrechtBlockquoteContentFontSize": "1.125rem",
-  "utrechtBlockquoteCaptionFontSize": "0.75rem",
+  "utrechtBlockquoteCaptionFontSize": "0.875rem",
   "utrechtBlockquoteMarginBlockStart": "1.6em",
   "utrechtBlockquoteMarginBlockEnd": "1.6em",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
@@ -577,10 +577,10 @@ module.exports = {
   "utrechtListboxOptionActiveBackgroundColor": "hsl(0 0% 95%)",
   "utrechtListboxOptionActiveColor": "hsl(0 0% 0%)",
   "utrechtListboxOptionActiveFontWeight": "700",
+  "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
+  "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
   "utrechtListboxOptionSelectedBackgroundColor": "hsl(0 0% 95%)",
   "utrechtListboxOptionSelectedColor": "hsl(0 0% 0%)",
-  "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
-  "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
   "utrechtListboxOptionGroupMarginBlockEnd": "8px",
   "utrechtListboxOptionGroupTitleFontSize": "1rem",
   "utrechtListboxOptionGroupTitleFontWeight": "700",
@@ -928,8 +928,6 @@ module.exports = {
   "utrechtIconScale3xl": "36px",
   "utrechtIconScale4xl": "48px",
   "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
-  "utrechtTypographyScale2xsFontSize": "0.5rem",
-  "utrechtTypographyScaleXsFontSize": "0.75rem",
   "utrechtTypographyScaleSmFontSize": "0.875rem",
   "utrechtTypographyScaleMdFontSize": "1rem",
   "utrechtTypographyScaleLgFontSize": "1.125rem",

package/dist/variables.css

@@ -8,14 +8,12 @@
   --utrecht-unordered-list-item-margin-block-end: 0.25rem;
   --utrecht-typography-weight-scale-normal-font-weight: 400;
   --utrecht-typography-weight-scale-bold-font-weight: 700;
-  --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
   --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
   --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
   --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
   --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
   --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
   --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
-  --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
   --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
   --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-typography-line-height-xs: 1;
@@ -828,7 +826,7 @@
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
   --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
-  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
   --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
   --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);

package/dist/variables.d.ts

@@ -640,10 +640,10 @@ export const utrechtListboxOptionPaddingInlineStart : string;
 export const utrechtListboxOptionActiveBackgroundColor : string;
 export const utrechtListboxOptionActiveColor : string;
 export const utrechtListboxOptionActiveFontWeight : string;
+export const utrechtListboxOptionHoverBackgroundColor : string;
+export const utrechtListboxOptionHoverColor : string;
 export const utrechtListboxOptionSelectedBackgroundColor : string;
 export const utrechtListboxOptionSelectedColor : string;
-export const utrechtListboxOptionHoverColor : string;
-export const utrechtListboxOptionHoverBackgroundColor : string;
 export const utrechtListboxOptionGroupMarginBlockEnd : string;
 export const utrechtListboxOptionGroupTitleFontSize : string;
 export const utrechtListboxOptionGroupTitleFontWeight : string;
@@ -1041,10 +1041,6 @@ export const utrechtIconScale2xl : string;
 export const utrechtIconScale3xl : string;
 export const utrechtIconScale4xl : string;
 export const utrechtTypographySansSerifFontFamily : string;
-/** 8px */
-export const utrechtTypographyScale2xsFontSize : string;
-/** 12px */
-export const utrechtTypographyScaleXsFontSize : string;
 /** 14px */
 export const utrechtTypographyScaleSmFontSize : string;
 /** 16px */

package/dist/variables.json

@@ -127,7 +127,7 @@
   "utrechtBadgeListItemMarginInline": "12px",
   "utrechtBadgePaddingBlock": "8px",
   "utrechtBadgePaddingInline": "12px",
-  "utrechtBlockquoteCaptionFontSize": "0.75rem",
+  "utrechtBlockquoteCaptionFontSize": "0.875rem",
   "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
   "utrechtBlockquoteContentFontSize": "1.125rem",
   "utrechtBlockquoteMarginBlockEnd": "1.6em",
@@ -989,14 +989,12 @@
   "utrechtTypographyLineHeightXs": "1",
   "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
   "utrechtTypographyScale2xlFontSize": "1.375rem",
-  "utrechtTypographyScale2xsFontSize": "0.5rem",
   "utrechtTypographyScale3xlFontSize": "1.5rem",
   "utrechtTypographyScale4xlFontSize": "2rem",
   "utrechtTypographyScaleLgFontSize": "1.125rem",
   "utrechtTypographyScaleMdFontSize": "1rem",
   "utrechtTypographyScaleSmFontSize": "0.875rem",
   "utrechtTypographyScaleXlFontSize": "1.25rem",
-  "utrechtTypographyScaleXsFontSize": "0.75rem",
   "utrechtTypographyWeightScaleBoldFontWeight": "700",
   "utrechtTypographyWeightScaleNormalFontWeight": "400",
   "utrechtUnorderedListItemMarginBlockEnd": "0.25rem",

package/dist/variables.less

@@ -30,8 +30,6 @@
 @utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
 @utrecht-typography-scale-md-font-size: 1rem; // 16px
 @utrecht-typography-scale-sm-font-size: 0.875rem; // 14px
-@utrecht-typography-scale-xs-font-size: 0.75rem; // 12px
-@utrecht-typography-scale-2xs-font-size: 0.5rem; // 8px
 @utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
 @utrecht-icon-scale-4xl: 48px;
 @utrecht-icon-scale-3xl: 36px; // Formaat voor toptaks iconen
@@ -601,10 +599,10 @@
 @utrecht-listbox-option-group-title-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
 @utrecht-listbox-option-group-title-font-size: @utrecht-typography-scale-md-font-size;
 @utrecht-listbox-option-group-margin-block-end: @utrecht-space-inline-xs;
-@utrecht-listbox-option-hover-background-color: @utrecht-color-blue-90;
-@utrecht-listbox-option-hover-color: @utrecht-color-black;
 @utrecht-listbox-option-selected-color: @utrecht-color-black;
 @utrecht-listbox-option-selected-background-color: @utrecht-color-grey-95;
+@utrecht-listbox-option-hover-color: @utrecht-color-black;
+@utrecht-listbox-option-hover-background-color: @utrecht-color-blue-90;
 @utrecht-listbox-option-active-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
 @utrecht-listbox-option-active-color: @utrecht-color-black;
 @utrecht-listbox-option-active-background-color: @utrecht-color-grey-95;
@@ -864,7 +862,7 @@
 @utrecht-breadcrumb-nav-item-padding-block-end: @utrecht-space-block-xs;
 @utrecht-breadcrumb-nav-item-padding-block-start: @utrecht-space-block-xs;
 @utrecht-breadcrumb-nav-font-size: @utrecht-typography-scale-md-font-size;
-@utrecht-blockquote-caption-font-size: @utrecht-typography-scale-xs-font-size;
+@utrecht-blockquote-caption-font-size: @utrecht-typography-scale-sm-font-size;
 @utrecht-blockquote-content-font-size: @utrecht-typography-scale-lg-font-size;
 @utrecht-blockquote-content-color: @utrecht-color-red-40;
 @utrecht-badge-font-style: @utrecht-typography-font-style-normal;

package/dist/variables.mjs

@@ -79,7 +79,7 @@ export const utrechtBlockquoteMarginInlineStart = "1.6em";
 export const utrechtBlockquoteMarginInlineEnd = "1.6em";
 export const utrechtBlockquoteContentColor = "hsl(0 100% 40%)";
 export const utrechtBlockquoteContentFontSize = "1.125rem";
-export const utrechtBlockquoteCaptionFontSize = "0.75rem";
+export const utrechtBlockquoteCaptionFontSize = "0.875rem";
 export const utrechtBlockquoteMarginBlockStart = "1.6em";
 export const utrechtBlockquoteMarginBlockEnd = "1.6em";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
@@ -576,10 +576,10 @@ export const utrechtListboxOptionPaddingInlineStart = "8px";
 export const utrechtListboxOptionActiveBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtListboxOptionActiveColor = "hsl(0 0% 0%)";
 export const utrechtListboxOptionActiveFontWeight = "700";
+export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
+export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
 export const utrechtListboxOptionSelectedBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtListboxOptionSelectedColor = "hsl(0 0% 0%)";
-export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
-export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
 export const utrechtListboxOptionGroupMarginBlockEnd = "8px";
 export const utrechtListboxOptionGroupTitleFontSize = "1rem";
 export const utrechtListboxOptionGroupTitleFontWeight = "700";
@@ -927,8 +927,6 @@ export const utrechtIconScale2xl = "30px"; // Formaat voor marker iconen
 export const utrechtIconScale3xl = "36px"; // Formaat voor toptaks iconen
 export const utrechtIconScale4xl = "48px";
 export const utrechtTypographySansSerifFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
-export const utrechtTypographyScale2xsFontSize = "0.5rem"; // 8px
-export const utrechtTypographyScaleXsFontSize = "0.75rem"; // 12px
 export const utrechtTypographyScaleSmFontSize = "0.875rem"; // 14px
 export const utrechtTypographyScaleMdFontSize = "1rem"; // 16px
 export const utrechtTypographyScaleLgFontSize = "1.125rem"; // 18px

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.1",
+  "version": "2.3.0",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",

package/src/brand/utrecht/typography.tokens.json

@@ -5,8 +5,6 @@
         "font-family": { "value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif" }
       },
       "scale": {
-        "2xs": { "font-size": { "value": "8px", "comment": "8px" } },
-        "xs": { "font-size": { "value": "12px", "comment": "12px" } },
         "sm": { "font-size": { "value": "14px", "comment": "14px" } },
         "md": { "font-size": { "value": "16px", "comment": "16px" } },
         "lg": { "font-size": { "value": "18px", "comment": "18px" } },

package/src/component/utrecht/blockquote.tokens.json

@@ -14,7 +14,7 @@
       "font-size": {},
       "caption": {
         "color": {},
-        "font-size": { "value": "{utrecht.typography.scale.xs.font-size}" }
+        "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" }
       },
       "content": {
         "color": { "value": "{utrecht.color.red.40}" },

package/src/css-property-formatter.mjs

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 const stringSort = (a, b) => (a === b ? 0 : a > b ? 1 : -1);

package/src/index.scss

@@ -30,3 +30,82 @@
     @include utrecht-theme--dark;
   }
 }
+
+.utrecht-theme--viewport-scale {
+  /* stylelint-disable number-max-precision */
+  --ams-text-level-6-line-height: 1.6;
+  --ams-text-level-6-font-size: clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem);
+  --ams-text-level-5-line-height: 1.6;
+  --ams-text-level-5-font-size: clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem);
+  --ams-text-level-4-line-height: 1.5;
+  --ams-text-level-4-font-size: clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem);
+  --ams-text-level-3-line-height: 1.3;
+  --ams-text-level-3-font-size: clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem);
+  --ams-text-level-2-line-height: 1.25;
+  --ams-text-level-2-font-size: clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem);
+  --ams-text-level-1-line-height: 1.2;
+  --ams-text-level-1-font-size: clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem);
+  --ams-text-level-0-line-height: 1.15;
+  --ams-text-level-0-font-size: clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem);
+  --ams-space-grid-xl: clamp(2rem, calc(0.75rem + 6.25vw), 7rem);
+  --ams-space-grid-lg: clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem);
+  --ams-space-grid-md: clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem);
+  --ams-space-grid-sm: clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem);
+  --ams-space-grid-xs: clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem);
+  --ams-space-xl: clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem);
+  --ams-space-lg: clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem);
+  --ams-space-md: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
+  --ams-space-sm: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
+  --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
+  --utrecht-typography-scale-4xl-font-size: var(--ams-text-level-0-font-size);
+  --utrecht-typography-scale-3xl-font-size: var(--ams-text-level-1-font-size);
+  --utrecht-typography-scale-2xl-font-size: var(--ams-text-level-2-font-size);
+  --utrecht-typography-scale-xl-font-size: var(--ams-text-level-3-font-size);
+  --utrecht-typography-scale-lg-font-size: var(--ams-text-level-4-font-size);
+  --utrecht-typography-scale-md-font-size: var(--ams-text-level-5-font-size);
+  --utrecht-typography-scale-sm-font-size: var(--ams-text-level-6-font-size);
+  --utrecht-space-column-5xl: calc(var(--ams-space-grid-xl) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-4xl: calc(var(--ams-space-grid-lg) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-3xl: calc(var(--ams-space-grid-md) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-2xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.75);
+  --utrecht-space-column-xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.5);
+  --utrecht-space-column-lg: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.25);
+  --utrecht-space-column-md: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-sm: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 0.75);
+  --utrecht-space-column-xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-2xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 2);
+  --utrecht-space-column-3xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 4);
+  --utrecht-space-column-4xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 8);
+  --utrecht-space-row-5xl: calc(var(--ams-space-grid-xl) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-4xl: calc(var(--ams-space-grid-lg) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-3xl: calc(var(--ams-space-grid-md) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-2xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.75);
+  --utrecht-space-row-xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.5);
+  --utrecht-space-row-lg: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.25);
+  --utrecht-space-row-md: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-sm: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 0.75);
+  --utrecht-space-row-xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-2xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 2);
+  --utrecht-space-row-3xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 4);
+  --utrecht-space-row-4xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 8);
+  --utrecht-space-inline-4xl: calc(var(--ams-space-xl) * var(--utrecht-space-inline-scale, 1) * 1.5);
+  --utrecht-space-inline-3xl: calc(var(--ams-space-xl) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-2xl: calc(var(--ams-space-lg) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-xl: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 1.33);
+  --utrecht-space-inline-lg: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 1.125);
+  --utrecht-space-inline-md: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 0.9);
+  --utrecht-space-inline-sm: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 0.75);
+  --utrecht-space-inline-xs: calc(var(--ams-space-sm) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-2xs: calc(var(--ams-space-xs) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-3xs: calc(var(--ams-space-xs) * var(--utrecht-space-inline-scale, 1) / 2);
+  --utrecht-space-block-4xl: calc(var(--ams-space-xl) * var(--utrecht-space-block-scale, 1) * 1.5);
+  --utrecht-space-block-3xl: calc(var(--ams-space-xl) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-2xl: calc(var(--ams-space-lg) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-xl: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 1.33);
+  --utrecht-space-block-lg: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 1.125);
+  --utrecht-space-block-md: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 0.9);
+  --utrecht-space-block-sm: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 0.75);
+  --utrecht-space-block-xs: calc(var(--ams-space-sm) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-2xs: calc(var(--ams-space-xs) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-3xs: calc(var(--ams-space-xs) * var(--utrecht-space-block-scale, 1) / 2);
+}

package/src/json-list-formatter.js

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 const stringSort = (a, b) => (a === b ? 0 : a > b ? 1 : -1);

package/style-dictionary-build.mjs

@@ -20,7 +20,9 @@ const build = async () => {
     ...createStyleDictionaryConfig({
       themeName: `${themeConfig.prefix}-theme`,
     }),
-    log: 'warn',
+    log: {
+      verbosity: 'verbose',
+    },
     preprocessors: ['tokens-studio', 'dtcg-delegate'],
     source: [
       '../../components/**/tokens.json',

package/style-dictionary-config.mjs

@@ -10,6 +10,25 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok
       'json/list': function ({ dictionary }) {
         return JSON.stringify(dictionary.allTokens.sort(sortByName), null, '  ');
       },
+      'javascript/es6-list': function ({ dictionary }) {
+        return `export default ${JSON.stringify(dictionary.allTokens.sort(sortByName), null, '  ')};\n`;
+      },
+      'typescript/list-declarations': function ({ dictionary }) {
+        return `
+declare interface DesignToken {
+  value?: any;
+  type?: string;
+  comment?: string;
+  name?: string;
+  themeable?: boolean;
+  attributes?: Record<string, unknown>;
+  [key: string]: any;
+}
+
+export default tokens;
+
+declare const tokens: DesignToken[];`;
+      },
     },
     transforms: {
       'fontSize/pxToRem': {
@@ -75,6 +94,10 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok
           destination: 'list.json',
           format: 'json/list',
         },
+        {
+          destination: 'list.mjs',
+          format: 'javascript/es6-list',
+        },
         {
           destination: 'variables.json',
           format: 'json/flat',
@@ -177,6 +200,10 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok
           format: 'typescript/module-declarations',
           destination: 'tokens.d.ts',
         },
+        {
+          format: 'typescript/list-declarations',
+          destination: 'list.d.ts',
+        },
       ],
     },
     'deprecated-js': {