@design-factory/tokens 21.0.0-next.0

package/LICENSE

@@ -0,0 +1,26 @@
+Copyright Amadeus SAS
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+this list of conditions and the following disclaimer in the documentation and/or
+other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+may be used to endorse or promote products derived from this software without
+specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,13 @@
+<h1 align="center">Amadeus Design Factory Tokens</h1>
+
+## Description
+
+Design Factory Tokens is the package containing the Design Tokens used by Amadeus Design System, Design Factory.
+
+## Exports
+
+The package `@design-factory/tokens` exports the following entry points to interact with tokens:
+
+- `@design-factory/tokens/figma/*.json` lists all tokens in a JSON format, by tier (t0, t1, t2 and t3)
+- `@design-factory/tokens/style-dictionary-config` exposes the style-dictionary utilities that can be used to customize the DF theme
+- `@design-factory/tokens/scss/*` exposes the sass vars, root css vars and bs mapping

package/config.cjs

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const StyleDictionary = require("style-dictionary");
+const enums = require("style-dictionary/enums");
+const utils = require("style-dictionary/utils");
+const os = require("os");
+const tier3ScopingMap = {
+  button: `.btn,${os.EOL}  .btn-close`,
+  //needing .btn-close because the alert uses it// TODO: remove when wrapping alert
+  badge: ".badge",
+  footer: ".df-app-footer",
+  navbar: ".navbar",
+  link: `a,${os.EOL}  .df-app-footer,${os.EOL}  button.df-collapse,${os.EOL}  .breadcrumb`
+  //collapse is a button styled as a link
+};
+const splitTokens = (allTokens) => {
+  const rootTokens = [];
+  const tier3Tokens = [];
+  allTokens.forEach((token) => {
+    if (token.path[1] && Object.keys(tier3ScopingMap).includes(token.path[1])) {
+      tier3Tokens.push(token);
+    } else {
+      rootTokens.push(token);
+    }
+  });
+  const groupedT3 = tier3Tokens.reduce(
+    (acc, token) => {
+      const key = token.path[1];
+      if (acc[key]) {
+        acc[key].push(token);
+      } else {
+        acc[key] = [token];
+      }
+      return acc;
+    },
+    {}
+  );
+  return { rootTokens, groupedT3 };
+};
+const FONT_WEIGHT_FIGMA2CSS = {
+  light: "300",
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+const transforms = {
+  /**
+   * Transform used to quote wrap font-family tokens.
+   * This is required as the font-family tokens exported from the Figma Plugin do not have the proper $type.
+   */
+  fontFamily: "@design-factory/font-family",
+  /**
+   * Transform used to map font-weight tokens into useable css values.
+   * This is required as the font-weight tokens exported from the Figma Plugin do not have the proper $type.
+   */
+  fontWeight: "@design-factory/font-weight",
+  /**
+   * Transform used to create token names based on DF token naming convention.
+   */
+  tokenName: "@design-factory/token-name"
+};
+const transformGroups = {
+  /**
+   * Transform group that applies standard scss transforms and custom Design Factory transforms.
+   */
+  designFactory: "@design-factory"
+};
+const filters = {
+  /**
+   * Filter removing invalid font-weight tokens. Should be used with {@link formats.scssVars}
+   */
+  scssVars: "@design-factory/scss-vars-filter",
+  /**
+   * Filter removing invalid font-weight tokens and t0 tokens. Should be used with {@link formats.cssRoot}
+   */
+  cssRoot: "@design-factory/root-filter"
+};
+const formats = {
+  /**
+   * Format to print a sass file containing tokens as sass variables. Should be used with {@link filters.scssVars}
+   */
+  scssVars: "@design-factory/scss-vars",
+  /**
+   * Format to print a css file printing tokens as css variables. Should be used with {@link filters.cssRoot}
+   */
+  cssRoot: "@design-factory/css-root"
+};
+const registerDf = () => {
+  StyleDictionary.registerTransform({
+    name: transforms.fontFamily,
+    type: enums.transformTypes.value,
+    filter: (token) => token.name.includes("-font-") && (token.name.includes("family") || token.name.includes("Family")),
+    transform: (token) => `'${token.$value}'`
+  });
+  StyleDictionary.registerTransform({
+    name: transforms.fontWeight,
+    type: enums.transformTypes.value,
+    filter: (token) => token.name.startsWith("df-typo-weight-"),
+    transform: (token) => FONT_WEIGHT_FIGMA2CSS[token.$value.trim().toLowerCase()] || token.$value
+  });
+  StyleDictionary.registerTransform({
+    name: transforms.tokenName,
+    type: enums.transformTypes.name,
+    transform: (token) => token.path.join("-")
+  });
+  StyleDictionary.registerTransformGroup({
+    name: transformGroups.designFactory,
+    transforms: [
+      enums.transforms.attributeCti,
+      transforms.tokenName,
+      enums.transforms.timeSeconds,
+      enums.transforms.htmlIcon,
+      enums.transforms.sizeRem,
+      enums.transforms.sizePxToRem,
+      enums.transforms.colorCss,
+      enums.transforms.assetUrl,
+      transforms.fontFamily,
+      transforms.fontWeight,
+      enums.transforms.cubicBezierCss,
+      // object-value tokens
+      enums.transforms.strokeStyleCssShorthand,
+      enums.transforms.borderCssShorthand,
+      enums.transforms.typographyCssShorthand,
+      enums.transforms.transitionCssShorthand,
+      enums.transforms.shadowCssShorthand
+    ]
+  });
+  StyleDictionary.registerFilter({
+    name: filters.scssVars,
+    filter: (token) => !token.name.endsWith("Italic")
+  });
+  StyleDictionary.registerFilter({
+    name: filters.cssRoot,
+    filter: (token) => !token.name.endsWith("Italic") && !token.name.startsWith("df-colorPalette")
+  });
+  StyleDictionary.registerFormat({
+    name: formats.scssVars,
+    format: async ({ dictionary, options, file }) => {
+      const { usesDtcg, withDefault, outputReferences } = options;
+      const header = await utils.fileHeader({
+        file,
+        formatting: { lineSeparator: os.EOL, header: `/**${os.EOL}`, footer: `${os.EOL} */${os.EOL}${os.EOL}` }
+      });
+      const tokens = dictionary.tokens;
+      let allTokens = dictionary.allTokens;
+      allTokens = [...allTokens].filter((token) => !token.name.startsWith("internal-")).sort(utils.sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg }));
+      return header + allTokens.reduce((acc, token) => {
+        let value = token.$value;
+        if (outputReferences && utils.usesReferences(token.original.$value)) {
+          let originalValue = token.original.$value;
+          while (originalValue.startsWith("{internal.df.")) {
+            originalValue = dictionary.tokenMap.get(originalValue).original.$value;
+          }
+          value = `var(--${originalValue.slice(1, -1).replace(/\./g, "-")})`;
+        }
+        return `${acc}$${token.name}: ${value}${withDefault ? " !default" : ""};${os.EOL}`;
+      }, "");
+    }
+  });
+  StyleDictionary.registerFormat({
+    name: formats.cssRoot,
+    format: async ({ dictionary, options, file }) => {
+      const { usesDtcg, outputReferences, selector = "html:root" } = options;
+      const header = await utils.fileHeader({
+        file,
+        formatting: { lineSeparator: os.EOL, header: `/**${os.EOL}`, footer: `${os.EOL} */${os.EOL}${os.EOL}` }
+      });
+      const tokens = dictionary.tokens;
+      let allTokens = dictionary.allTokens;
+      allTokens = [...allTokens].filter((token) => !token.name.startsWith("internal-")).sort(utils.sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg }));
+      const { rootTokens, groupedT3 } = splitTokens(allTokens);
+      const getValueName = (token) => {
+        let value = token.$value;
+        if (outputReferences && utils.usesReferences(token.original.$value)) {
+          let originalValue = token.original.$value;
+          while (originalValue.startsWith("{internal.df.")) {
+            originalValue = dictionary.tokenMap.get(originalValue).original.$value;
+          }
+          value = `var(--${originalValue.slice(1, -1).replace(/\./g, "-")})`;
+        }
+        return { value, name: token.name };
+      };
+      const colorScheme = dictionary.tokenMap.get("{internal.scheme}");
+      return `${header}${selector} {${os.EOL}` + (colorScheme?.$value ? `  color-scheme: ${colorScheme.$value};${os.EOL}${os.EOL}` : "") + rootTokens.reduce((acc, token) => {
+        const { value, name } = getValueName(token);
+        return `${acc}  --${name}: ${value};${os.EOL}`;
+      }, "") + (Object.keys(groupedT3).length ? `${os.EOL}  /* Tier 3 Scoped tokens */${os.EOL}` + Object.entries(groupedT3).reduce((acc, [key, tokens2]) => {
+        return `${acc}  ${tier3ScopingMap[key]} {${os.EOL}` + tokens2.reduce((innerAcc, token) => {
+          const { value, name } = getValueName(token);
+          return `${innerAcc}    --${name}: ${value};${os.EOL}`;
+        }, "") + `  }${os.EOL}`;
+      }, "") : "") + `}${os.EOL}`;
+    }
+  });
+};
+exports.filters = filters;
+exports.formats = formats;
+exports.registerDf = registerDf;
+exports.transformGroups = transformGroups;
+exports.transforms = transforms;

package/config.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Design Factory custom Style-Dictionary transforms
+ */
+export declare const transforms: {
+    /**
+     * Transform used to quote wrap font-family tokens.
+     * This is required as the font-family tokens exported from the Figma Plugin do not have the proper $type.
+     */
+    readonly fontFamily: "@design-factory/font-family";
+    /**
+     * Transform used to map font-weight tokens into useable css values.
+     * This is required as the font-weight tokens exported from the Figma Plugin do not have the proper $type.
+     */
+    readonly fontWeight: "@design-factory/font-weight";
+    /**
+     * Transform used to create token names based on DF token naming convention.
+     */
+    readonly tokenName: "@design-factory/token-name";
+};
+/**
+ * Design Factory custom Style-Dictionary transform group
+ */
+export declare const transformGroups: {
+    /**
+     * Transform group that applies standard scss transforms and custom Design Factory transforms.
+     */
+    readonly designFactory: "@design-factory";
+};
+/**
+ * Design Factory custom Style-Dictionary filters
+ */
+export declare const filters: {
+    /**
+     * Filter removing invalid font-weight tokens. Should be used with {@link formats.scssVars}
+     */
+    readonly scssVars: "@design-factory/scss-vars-filter";
+    /**
+     * Filter removing invalid font-weight tokens and t0 tokens. Should be used with {@link formats.cssRoot}
+     */
+    readonly cssRoot: "@design-factory/root-filter";
+};
+/**
+ * Design Factory custom Style-Dictionary formats
+ */
+export declare const formats: {
+    /**
+     * Format to print a sass file containing tokens as sass variables. Should be used with {@link filters.scssVars}
+     */
+    readonly scssVars: "@design-factory/scss-vars";
+    /**
+     * Format to print a css file printing tokens as css variables. Should be used with {@link filters.cssRoot}
+     */
+    readonly cssRoot: "@design-factory/css-root";
+};
+/**
+ * Registers Design Factory custom transforms, formats and filters with Style Dictionary.
+ */
+export declare const registerDf: () => void;

package/config.js

@@ -0,0 +1,200 @@
+import StyleDictionary from "style-dictionary";
+import { transformTypes, transforms as transforms$1 } from "style-dictionary/enums";
+import { fileHeader, sortByReference, usesReferences } from "style-dictionary/utils";
+import { EOL } from "os";
+const tier3ScopingMap = {
+  button: `.btn,${EOL}  .btn-close`,
+  //needing .btn-close because the alert uses it// TODO: remove when wrapping alert
+  badge: ".badge",
+  footer: ".df-app-footer",
+  navbar: ".navbar",
+  link: `a,${EOL}  .df-app-footer,${EOL}  button.df-collapse,${EOL}  .breadcrumb`
+  //collapse is a button styled as a link
+};
+const splitTokens = (allTokens) => {
+  const rootTokens = [];
+  const tier3Tokens = [];
+  allTokens.forEach((token) => {
+    if (token.path[1] && Object.keys(tier3ScopingMap).includes(token.path[1])) {
+      tier3Tokens.push(token);
+    } else {
+      rootTokens.push(token);
+    }
+  });
+  const groupedT3 = tier3Tokens.reduce(
+    (acc, token) => {
+      const key = token.path[1];
+      if (acc[key]) {
+        acc[key].push(token);
+      } else {
+        acc[key] = [token];
+      }
+      return acc;
+    },
+    {}
+  );
+  return { rootTokens, groupedT3 };
+};
+const FONT_WEIGHT_FIGMA2CSS = {
+  light: "300",
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+const transforms = {
+  /**
+   * Transform used to quote wrap font-family tokens.
+   * This is required as the font-family tokens exported from the Figma Plugin do not have the proper $type.
+   */
+  fontFamily: "@design-factory/font-family",
+  /**
+   * Transform used to map font-weight tokens into useable css values.
+   * This is required as the font-weight tokens exported from the Figma Plugin do not have the proper $type.
+   */
+  fontWeight: "@design-factory/font-weight",
+  /**
+   * Transform used to create token names based on DF token naming convention.
+   */
+  tokenName: "@design-factory/token-name"
+};
+const transformGroups = {
+  /**
+   * Transform group that applies standard scss transforms and custom Design Factory transforms.
+   */
+  designFactory: "@design-factory"
+};
+const filters = {
+  /**
+   * Filter removing invalid font-weight tokens. Should be used with {@link formats.scssVars}
+   */
+  scssVars: "@design-factory/scss-vars-filter",
+  /**
+   * Filter removing invalid font-weight tokens and t0 tokens. Should be used with {@link formats.cssRoot}
+   */
+  cssRoot: "@design-factory/root-filter"
+};
+const formats = {
+  /**
+   * Format to print a sass file containing tokens as sass variables. Should be used with {@link filters.scssVars}
+   */
+  scssVars: "@design-factory/scss-vars",
+  /**
+   * Format to print a css file printing tokens as css variables. Should be used with {@link filters.cssRoot}
+   */
+  cssRoot: "@design-factory/css-root"
+};
+const registerDf = () => {
+  StyleDictionary.registerTransform({
+    name: transforms.fontFamily,
+    type: transformTypes.value,
+    filter: (token) => token.name.includes("-font-") && (token.name.includes("family") || token.name.includes("Family")),
+    transform: (token) => `'${token.$value}'`
+  });
+  StyleDictionary.registerTransform({
+    name: transforms.fontWeight,
+    type: transformTypes.value,
+    filter: (token) => token.name.startsWith("df-typo-weight-"),
+    transform: (token) => FONT_WEIGHT_FIGMA2CSS[token.$value.trim().toLowerCase()] || token.$value
+  });
+  StyleDictionary.registerTransform({
+    name: transforms.tokenName,
+    type: transformTypes.name,
+    transform: (token) => token.path.join("-")
+  });
+  StyleDictionary.registerTransformGroup({
+    name: transformGroups.designFactory,
+    transforms: [
+      transforms$1.attributeCti,
+      transforms.tokenName,
+      transforms$1.timeSeconds,
+      transforms$1.htmlIcon,
+      transforms$1.sizeRem,
+      transforms$1.sizePxToRem,
+      transforms$1.colorCss,
+      transforms$1.assetUrl,
+      transforms.fontFamily,
+      transforms.fontWeight,
+      transforms$1.cubicBezierCss,
+      // object-value tokens
+      transforms$1.strokeStyleCssShorthand,
+      transforms$1.borderCssShorthand,
+      transforms$1.typographyCssShorthand,
+      transforms$1.transitionCssShorthand,
+      transforms$1.shadowCssShorthand
+    ]
+  });
+  StyleDictionary.registerFilter({
+    name: filters.scssVars,
+    filter: (token) => !token.name.endsWith("Italic")
+  });
+  StyleDictionary.registerFilter({
+    name: filters.cssRoot,
+    filter: (token) => !token.name.endsWith("Italic") && !token.name.startsWith("df-colorPalette")
+  });
+  StyleDictionary.registerFormat({
+    name: formats.scssVars,
+    format: async ({ dictionary, options, file }) => {
+      const { usesDtcg, withDefault, outputReferences } = options;
+      const header = await fileHeader({
+        file,
+        formatting: { lineSeparator: EOL, header: `/**${EOL}`, footer: `${EOL} */${EOL}${EOL}` }
+      });
+      const tokens = dictionary.tokens;
+      let allTokens = dictionary.allTokens;
+      allTokens = [...allTokens].filter((token) => !token.name.startsWith("internal-")).sort(sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg }));
+      return header + allTokens.reduce((acc, token) => {
+        let value = token.$value;
+        if (outputReferences && usesReferences(token.original.$value)) {
+          let originalValue = token.original.$value;
+          while (originalValue.startsWith("{internal.df.")) {
+            originalValue = dictionary.tokenMap.get(originalValue).original.$value;
+          }
+          value = `var(--${originalValue.slice(1, -1).replace(/\./g, "-")})`;
+        }
+        return `${acc}$${token.name}: ${value}${withDefault ? " !default" : ""};${EOL}`;
+      }, "");
+    }
+  });
+  StyleDictionary.registerFormat({
+    name: formats.cssRoot,
+    format: async ({ dictionary, options, file }) => {
+      const { usesDtcg, outputReferences, selector = "html:root" } = options;
+      const header = await fileHeader({
+        file,
+        formatting: { lineSeparator: EOL, header: `/**${EOL}`, footer: `${EOL} */${EOL}${EOL}` }
+      });
+      const tokens = dictionary.tokens;
+      let allTokens = dictionary.allTokens;
+      allTokens = [...allTokens].filter((token) => !token.name.startsWith("internal-")).sort(sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg }));
+      const { rootTokens, groupedT3 } = splitTokens(allTokens);
+      const getValueName = (token) => {
+        let value = token.$value;
+        if (outputReferences && usesReferences(token.original.$value)) {
+          let originalValue = token.original.$value;
+          while (originalValue.startsWith("{internal.df.")) {
+            originalValue = dictionary.tokenMap.get(originalValue).original.$value;
+          }
+          value = `var(--${originalValue.slice(1, -1).replace(/\./g, "-")})`;
+        }
+        return { value, name: token.name };
+      };
+      const colorScheme = dictionary.tokenMap.get("{internal.scheme}");
+      return `${header}${selector} {${EOL}` + (colorScheme?.$value ? `  color-scheme: ${colorScheme.$value};${EOL}${EOL}` : "") + rootTokens.reduce((acc, token) => {
+        const { value, name } = getValueName(token);
+        return `${acc}  --${name}: ${value};${EOL}`;
+      }, "") + (Object.keys(groupedT3).length ? `${EOL}  /* Tier 3 Scoped tokens */${EOL}` + Object.entries(groupedT3).reduce((acc, [key, tokens2]) => {
+        return `${acc}  ${tier3ScopingMap[key]} {${EOL}` + tokens2.reduce((innerAcc, token) => {
+          const { value, name } = getValueName(token);
+          return `${innerAcc}    --${name}: ${value};${EOL}`;
+        }, "") + `  }${EOL}`;
+      }, "") : "") + `}${EOL}`;
+    }
+  });
+};
+export {
+  filters,
+  formats,
+  registerDf,
+  transformGroups,
+  transforms
+};