fix: fix broken alias transformer and update design token docs (#936)

When style-dictionary was upgraded from 2.x.x to 3.x.x the data structure of the design token changed, which meant that the alias transformer was using the value of the token rather than the object path in order to generate the alias. With the transformer fixed, this commit also updates the design token docs. Closes D2IQ-95943
d2iq · Mar 4, 2023 · 0be7f91 · 0be7f91
1 parent 10c2ef0
commit 0be7f91
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 19 deletions.
diff --git a/design-guidelines/design-tokens/color.md b/design-guidelines/design-tokens/color.md
@@ -1,14 +1,13 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Mon Jun 29 2020 12:33:19 GMT-0400 (Eastern Daylight Time)
+   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
 
 -->
-
 ## All Colors
 
 | Swatch                                                                                     | Js variable name  | Value   |
-| ------------------------------------------------------------------------------------------ | ----------------- | ------- |
+| :----------------------------------------------------------------------------------------- | :---------------- | :------ |
 | ![white color swatch](https://via.placeholder.com/100x33/FFF/000000?text=+)                | white             | #FFF    |
 | ![black color swatch](https://via.placeholder.com/100x33/000/000000?text=+)                | black             | #000    |
 | ![cyan color swatch](https://via.placeholder.com/100x33/20D5FF/000000?text=+)              | cyan              | #20D5FF |
@@ -106,7 +105,7 @@
 ## Text
 
 | Swatch                                                                                              | Js variable name           | Value   | Alias for        |
-| --------------------------------------------------------------------------------------------------- | -------------------------- | ------- | ---------------- |
+| :-------------------------------------------------------------------------------------------------- | :------------------------- | :------ | :--------------- |
 | ![textColorPrimary color swatch](https://via.placeholder.com/100x33/1B2029/000000?text=+)           | textColorPrimary           | #1B2029 | greyDark         |
 | ![textColorPrimaryInverted color swatch](https://via.placeholder.com/100x33/DADDE2/000000?text=+)   | textColorPrimaryInverted   | #DADDE2 | greyLight        |
 | ![textColorSecondary color swatch](https://via.placeholder.com/100x33/76797E/000000?text=+)         | textColorSecondary         | #76797E | greyDarkLighten4 |
@@ -117,7 +116,7 @@
 ## Borders
 
 | Swatch                                                                                              | Js variable name           | Value   | Alias for        |
-| --------------------------------------------------------------------------------------------------- | -------------------------- | ------- | ---------------- |
+| :-------------------------------------------------------------------------------------------------- | :------------------------- | :------ | :--------------- |
 | ![borderColorDefault color swatch](https://via.placeholder.com/100x33/DADDE2/000000?text=+)         | borderColorDefault         | #DADDE2 | greyLight        |
 | ![borderColorDefaultInverted color swatch](https://via.placeholder.com/100x33/32363E/000000?text=+) | borderColorDefaultInverted | #32363E | greyDarkLighten2 |
 
@@ -126,7 +125,7 @@
 ## Other Aliases
 
 | Swatch                                                                           | Js variable name | Value   | Alias for |
-| -------------------------------------------------------------------------------- | ---------------- | ------- | --------- |
+| :------------------------------------------------------------------------------- | :--------------- | :------ | :-------- |
 | ![accent color swatch](https://via.placeholder.com/100x33/7D58FF/000000?text=+)  | accent           | #7D58FF | purple    |
 | ![error color swatch](https://via.placeholder.com/100x33/EB293A/000000?text=+)   | error            | #EB293A | red       |
 | ![success color swatch](https://via.placeholder.com/100x33/14C684/000000?text=+) | success          | #14C684 | green     |
diff --git a/design-guidelines/design-tokens/font.md b/design-guidelines/design-tokens/font.md
@@ -1,12 +1,11 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Mon Jun 29 2020 12:33:19 GMT-0400 (Eastern Daylight Time)
+   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
 
 -->
-
 | Js variable name      | Value                                                                                                                                     |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
 | fontFamilySansSerif   | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' |
 | fontFamilyMonospace   | 'Menlo', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', 'Consolas', monospace                                                  |
 | fontLineHeightDefault | 1.4                                                                                                                                       |

diff --git a/design-guidelines/design-tokens/layout.md b/design-guidelines/design-tokens/layout.md
@@ -1,14 +1,13 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Mon Jun 29 2020 12:33:19 GMT-0400 (Eastern Daylight Time)
+   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
 
 -->
-
 ## Breakpoints
 
 | Js variable name | Value  |
-| ---------------- | ------ |
+| :--------------- | :----- |
 | breakpointSmall  | 600px  |
 | breakpointMedium | 900px  |
 | breakpointLarge  | 1200px |
@@ -19,7 +18,7 @@
 ## Container Widths
 
 | Js variable name       | Value  |
-| ---------------------- | ------ |
+| :--------------------- | :----- |
 | containerWidthDefault  | 550px  |
 | containerWidthAtMedium | 800px  |
 | containerWidthAtLarge  | 900px  |
@@ -30,7 +29,7 @@
 ## Icon Sizes
 
 | Swatch                               | Js variable name | Value |
-| ------------------------------------ | ---------------- | ----- |
+| :----------------------------------- | :--------------- | :---- |
 | ![](https://via.placeholder.com/12/) | iconSizeXxs      | 12px  |
 | ![](https://via.placeholder.com/16/) | iconSizeXs       | 16px  |
 | ![](https://via.placeholder.com/24/) | iconSizeS        | 24px  |
@@ -44,7 +43,7 @@
 ## Spacing
 
 | Js variable name | Value |
-| ---------------- | ----- |
+| :--------------- | :---- |
 | spaceXxs         | 4px   |
 | spaceXs          | 8px   |
 | spaceS           | 12px  |
@@ -58,9 +57,11 @@
 ## Other
 
 | Js variable name    | Value |
-| ------------------- | ----- |
-| borderRadiusSmall   | 4px   |
-| borderRadiusDefault | 6px   |
+| :------------------ | :---- |
+| borderRadiusSmall   | 2px   |
+| borderRadiusDefault | 4px   |
+| borderRadiusLarge   | 8px   |
+| borderRadiusCircle  | 50%   |
 | textBlockWidth      | 65ch  |
 | zIndexContent       | 0     |
 | zIndexModal         | 1     |

diff --git a/packages/design-tokens/scripts/formats.mjs b/packages/design-tokens/scripts/formats.mjs
@@ -1,8 +1,10 @@
 import tablemark from "tablemark";
+
 const dateHeader = `
    Do not edit directly
    Generated by style-dictionary on ${new Date()}
 `;
+
 const getSwatch = prop => {
   if (prop.attributes.category === "color") {
     return {

diff --git a/packages/design-tokens/scripts/transforms.js b/packages/design-tokens/scripts/transforms.js
@@ -103,7 +103,7 @@ const JS_originalFromAlias = {
   type: "attribute",
   matcher: prop => prop.isAlias,
   transformer: prop => {
-    const propAttributes = prop.value.replace(/[{}]/g, "").split(".");
+    const propAttributes = prop.original.value.replace(/[{}]/g, "").split(".");
     const originalProp = {
       attributes: {
         category: propAttributes[0],