Merge branch 'design-tokens-alpha' into design-tokens-brand-refresh

.husky/pre-commit

@@ -7,6 +7,7 @@ __rootDir="$(CDPATH= cd "$($__dirname "${BASH_SOURCE[0]}")" && pwd)"
 echo "..Running design token checks"
 cd design-tokens
 npm run paddingY:verify
+npm run build
 cd ${__rootDir}
 echo "..Running aries-site checks"
 cd aries-site

design-tokens/src/HPEStyleDictionary.ts

@@ -1,5 +1,11 @@
 import StyleDictionary from 'style-dictionary-utils';
-import { commonJs, cssColorModes, cssBreakpoints } from './formats/index.js';
+import {
+  commonJs,
+  commonJsGrommetRefs,
+  cssColorModes,
+  cssBreakpoints,
+  esmGrommetRefs,
+} from './formats/index.js';
 import {
   cssW3c,
   javascriptW3c,
@@ -18,6 +24,14 @@ StyleDictionary.registerFormat({
   name: 'css/variables-breakpoints',
   formatter: cssBreakpoints,
 });
+StyleDictionary.registerFormat({
+  name: `esmGrommetRefs`,
+  formatter: esmGrommetRefs,
+});
+StyleDictionary.registerFormat({
+  name: `commonJsGrommetRefs`,
+  formatter: commonJsGrommetRefs,
+});
 StyleDictionary.registerTransform({
   name: 'numberToDimension',
   ...numberToDimension,

design-tokens/src/formats/commonJsGrommetRefs.ts

@@ -0,0 +1,31 @@
+import StyleDictionary from 'style-dictionary';
+import { FormatterArguments } from 'style-dictionary/types/Format.js';
+import { getGrommetValue } from './utils/getGrommetValue.js';
+import { jsonToNestedValue } from './utils/jsonToNestedValue.js';
+import { access } from '../utils.js';
+
+const { fileHeader } = StyleDictionary.formatHelpers;
+
+export const commonJsGrommetRefs = ({
+  dictionary,
+  file,
+  platform = {},
+}: FormatterArguments) => {
+  const { prefix } = platform;
+  let tokens = dictionary.tokens;
+
+  dictionary.allTokens.forEach((token: any) => {
+    const value = getGrommetValue(token, dictionary);
+    const originalToken = access(token.path.join('.'), tokens);
+    originalToken.value = value;
+  });
+
+  tokens = prefix ? { [prefix]: tokens } : tokens;
+  const output = `${fileHeader({ file })}module.exports = ${JSON.stringify(
+    jsonToNestedValue(tokens),
+    null,
+    2,
+  )}\n`;
+
+  return output;
+};

design-tokens/src/formats/esmGrommetRefs.ts

@@ -0,0 +1,29 @@
+import StyleDictionary from 'style-dictionary';
+import { FormatterArguments } from 'style-dictionary/types/Format.js';
+import { getGrommetValue } from './utils/getGrommetValue.js';
+import { jsonToNestedValue } from './utils/jsonToNestedValue.js';
+import { access } from '../utils.js';
+const { fileHeader } = StyleDictionary.formatHelpers;
+
+export const esmGrommetRefs = ({
+  dictionary,
+  file,
+  platform = {},
+}: FormatterArguments) => {
+  const { prefix } = platform;
+  let tokens = dictionary.tokens;
+  dictionary.allTokens.forEach((token: any) => {
+    const value = getGrommetValue(token, dictionary);
+    const originalToken = access(token.path.join('.'), tokens);
+    originalToken.value = value;
+  });
+
+  tokens = prefix ? { [prefix]: tokens } : tokens;
+  const output = `${fileHeader({ file })}export default ${JSON.stringify(
+    jsonToNestedValue(tokens),
+    null,
+    2,
+  )}\n`;
+
+  return output;
+};

design-tokens/src/formats/index.ts

@@ -1,3 +1,5 @@
 export { commonJs } from './commonJs.js';
+export { commonJsGrommetRefs } from './commonJsGrommetRefs.js';
 export { cssColorModes } from './cssColorModes.js';
 export { cssBreakpoints } from './cssBreakpoints.js';
+export { esmGrommetRefs } from './esmGrommetRefs.js';

design-tokens/src/formats/utils/getGrommetValue.ts

@@ -0,0 +1,61 @@
+import { isReference } from '../../utils.js';
+
+const tokenToGrommetRef = (value: string): string => {
+  const temp: string[] = value.slice(1, -1).split('.');
+  temp.shift();
+  return temp.join('-');
+};
+
+/**
+ * @description Transforms a token reference to grommet reference format. {color.text.strong} -> text-strong
+ */
+export const getGrommetValue = (token: any, dictionary: any) => {
+  let result;
+  const originalValue = token.original.value;
+  if (token.$type === 'border') {
+    let color = originalValue.color;
+    if (
+      isReference(originalValue.color) &&
+      originalValue.color.split('.')[0].includes('color')
+    ) {
+      color = tokenToGrommetRef(originalValue.color);
+    }
+
+    result = {
+      color: color,
+      width: token.value.width,
+      style: token.value.style,
+    };
+  } else if (
+    token.$type !== 'shadow' && // shadow is already transformed
+    dictionary.usesReference(originalValue) &&
+    !originalValue.split('.')[0].includes('base') &&
+    !originalValue.split('.')[0].includes('fontWeight')
+  ) {
+    // referencing the semantic level, transform to "grommet" format
+    // keep as grommet-like reference. For example,
+    // '{spacing.small}' --> 'small'
+    // '{color.text.strong} --> 'text-strong'
+    if (
+      originalValue.split('.')[0].includes('spacing') ||
+      originalValue.split('.')[0].includes('radius') ||
+      originalValue.split('.')[0].includes('content') ||
+      originalValue.split('.')[0].includes('borderWidth') ||
+      originalValue.split('.')[0].includes('color')
+    ) {
+      result = tokenToGrommetRef(originalValue);
+      if (result === 'full') result = '2em';
+    } else {
+      const refs = dictionary.getReferences(originalValue);
+      let grommetValue;
+      refs.forEach((ref: any) => {
+        grommetValue = getGrommetValue(ref, dictionary);
+      });
+      if (grommetValue === 'full') result = '2em';
+      else result = grommetValue;
+    }
+    // references to "base" tokens or non-references should resolve to raw values
+  } else result = token.value;
+
+  return result;
+};