From 7163900eb0d9b21cb32315bb379f4bfbd6de528a Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Wed, 5 Jun 2024 09:30:55 -0400
Subject: [PATCH] feat(exporter): export description to json files

---
 .../plugins/export-patternfly-tokens/code.js  |   9 +-
 .../module/tokens/dark/semantic.dark.json     |  40 ++++-
 .../module/tokens/default/base.dimension.json |  80 +++++++++
 .../tokens/default/semantic.dimension.json    | 170 ++++++++++++++----
 packages/module/tokens/default/semantic.json  |  40 ++++-
 5 files changed, 281 insertions(+), 58 deletions(-)

diff --git a/packages/module/plugins/export-patternfly-tokens/code.js b/packages/module/plugins/export-patternfly-tokens/code.js
index f7ebd34..3dcbc73 100644
--- a/packages/module/plugins/export-patternfly-tokens/code.js
+++ b/packages/module/plugins/export-patternfly-tokens/code.js
@@ -43,7 +43,7 @@ function processCollection({ name, modes, variableIds }) {
     let file = { fileName: `${name}.${mode.name}.tokens.json`, body: {} };
 
     variableIds.forEach((variableId) => {
-      const { name, resolvedType, valuesByMode } =
+      const { name, resolvedType, valuesByMode, description } =
         figma.variables.getVariableById(variableId);
       const value = valuesByMode[mode.modeId];
 
@@ -53,8 +53,11 @@ function processCollection({ name, modes, variableIds }) {
           obj[groupName] = obj[groupName] || {};
           obj = obj[groupName];
         });
-    
-    
+
+        if (description) {
+          obj.description = description;
+        }
+
         if (value.type === "VARIABLE_ALIAS") {
           obj.$type = resolvedType === "COLOR" ? "color" : "number";
           obj.$value = `{${figma.variables
diff --git a/packages/module/tokens/dark/semantic.dark.json b/packages/module/tokens/dark/semantic.dark.json
index ed55d07..1580aa6 100644
--- a/packages/module/tokens/dark/semantic.dark.json
+++ b/packages/module/tokens/dark/semantic.dark.json
@@ -5,42 +5,51 @@
       "color": {
         "primary": {
           "default": {
+            "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
             "type": "color",
             "value": "{global.dark.background.color.200}"
           },
           "hover": {
+            "description": "Use as the hover state for primary backgrounds",
             "type": "color",
             "value": "{global.dark.background.color.300}"
           },
           "clicked": {
+            "description": "Use as the selected state for primary backgrounds",
             "type": "color",
             "value": "{global.dark.background.color.300}"
           }
         },
         "secondary": {
           "default": {
+            "description": "Use as the secondary background color for UI content Use as the primary background color for UI content such as cards, page sections, and other content areas. Secondary background color is also used for our UI shell backgrounds (nav, masthead, etc).",
             "type": "color",
             "value": "{global.dark.background.color.100}"
           },
           "hover": {
+            "description": "Use as the hover state for secondary backgrounds",
             "type": "color",
             "value": "{global.dark.background.color.200}"
           },
           "clicked": {
+            "description": "Use as the selected state for secondary backgrounds",
             "type": "color",
             "value": "{global.dark.background.color.200}"
           }
         },
         "floating": {
           "default": {
+            "description": "Use as background color for components that show over top of other content such as toast alerts, menus, modals, overlay drawers, etc.",
             "type": "color",
             "value": "{global.dark.background.color.300}"
           },
           "hover": {
+            "description": "Use as the hover state for floating backgrounds",
             "type": "color",
             "value": "{global.dark.background.color.200}"
           },
           "clicked": {
+            "description": "Use as the selected state for floating backgrounds",
             "type": "color",
             "value": "{global.dark.background.color.200}"
           }
@@ -48,23 +57,28 @@
         "action": {
           "plain": {
             "default": {
+              "description": "Use as the default background for actions with transparent backgrounds such as menu items, accordion toggles, buttons, etc.",
               "type": "color",
               "value": "rgba(0, 0, 0, 0.0000)"
             },
             "hover": {
+              "description": "Use as the hover state for components that use the plain action default background.",
               "type": "color",
               "value": "{global.dark.background.color.600}"
             },
             "clicked": {
+              "description": "Use as the active/pressed state for components that use the plain action default background.",
               "type": "color",
               "value": "{global.dark.background.color.600}"
             },
             "alt": {
               "hover": {
+                "description": "Use as the hover state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
                 "type": "color",
                 "value": "{global.dark.background.color.200}"
               },
               "clicked": {
+                "description": "Use as the active/pressed state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
                 "type": "color",
                 "value": "{global.dark.background.color.200}"
               }
@@ -73,34 +87,40 @@
         },
         "control": {
           "default": {
+            "description": "Use as the default background for control elements like form inputs and menu toggles.",
             "type": "color",
             "value": "{global.dark.background.color.300}"
           }
         },
         "highlight": {
           "default": {
+            "description": "Use as the background color for highlighted elements",
             "type": "color",
             "value": "{global.dark.background.color.highlight.100}"
           },
           "clicked": {
+            "description": "Use as the active state for for highlighted elements",
             "type": "color",
             "value": "{global.dark.background.color.highlight.200}"
           }
         },
         "inverse": {
           "default": {
+            "description": "Use as the background color components with inversed backgrounds like tooltips.",
             "type": "color",
             "value": "{global.dark.background.color.400}"
           }
         },
         "disabled": {
           "default": {
+            "description": "Use as the background color for disabled components.",
             "type": "color",
             "value": "{global.dark.color.disabled.100}"
           }
         },
         "backdrop": {
           "default": {
+            "description": "Use as the background color for the backdrop component that shows beneath a modal/about modal/floating wizard etc.",
             "type": "color",
             "value": "{global.dark.background.color.500}"
           }
@@ -291,7 +311,7 @@
             "value": "{global.dark.color.nonstatus.orangered.200}"
           }
         },
-        "gold": {
+        "yellow": {
           "default": {
             "type": "color",
             "value": "{global.dark.color.nonstatus.gold.100}"
@@ -319,7 +339,7 @@
             "value": "{global.dark.color.nonstatus.green.200}"
           }
         },
-        "cyan": {
+        "teal": {
           "default": {
             "type": "color",
             "value": "{global.dark.color.nonstatus.cyan.100}"
@@ -606,10 +626,12 @@
           "value": "{global.dark.icon.color.300}"
         },
         "disabled": {
+          "description": "for use without disabled background color",
           "type": "color",
           "value": "{global.dark.color.disabled.200}"
         },
         "on-disabled": {
+          "description": "pair with disabled background color",
           "type": "color",
           "value": "{global.dark.color.disabled.300}"
         },
@@ -694,7 +716,7 @@
               "value": "{global.icon.color.inverse}"
             }
           },
-          "on-gold": {
+          "on-yellow": {
             "default": {
               "type": "color",
               "value": "{global.icon.color.inverse}"
@@ -722,7 +744,7 @@
               "value": "{global.icon.color.inverse}"
             }
           },
-          "on-cyan": {
+          "on-teal": {
             "default": {
               "type": "color",
               "value": "{global.icon.color.inverse}"
@@ -936,7 +958,7 @@
               "value": "{global.dark.color.nonstatus.orange.200}"
             }
           },
-          "gold": {
+          "yellow": {
             "default": {
               "type": "color",
               "value": "{global.dark.color.nonstatus.gold.100}"
@@ -964,7 +986,7 @@
               "value": "{global.dark.color.nonstatus.green.200}"
             }
           },
-          "cyan": {
+          "teal": {
             "default": {
               "type": "color",
               "value": "{global.dark.color.nonstatus.cyan.100}"
@@ -1070,10 +1092,12 @@
           "value": "{global.text.color.subtle}"
         },
         "disabled": {
+          "description": "for use without disabled background color",
           "type": "color",
           "value": "{global.dark.color.disabled.200}"
         },
         "on-disabled": {
+          "description": "pair with disabled background color",
           "type": "color",
           "value": "{global.dark.color.disabled.300}"
         },
@@ -1314,7 +1338,7 @@
               "value": "{global.text.color.inverse}"
             }
           },
-          "on-gold": {
+          "on-yellow": {
             "default": {
               "type": "color",
               "value": "{global.text.color.inverse}"
@@ -1342,7 +1366,7 @@
               "value": "{global.text.color.inverse}"
             }
           },
-          "on-cyan": {
+          "on-teal": {
             "default": {
               "type": "color",
               "value": "{global.text.color.inverse}"
diff --git a/packages/module/tokens/default/base.dimension.json b/packages/module/tokens/default/base.dimension.json
index 1dd9918..8fa2728 100644
--- a/packages/module/tokens/default/base.dimension.json
+++ b/packages/module/tokens/default/base.dimension.json
@@ -106,6 +106,86 @@
       }
     },
     "font": {
+      "family": {
+        "100": {
+          "type": "string",
+          "value": "Red Hat Text VF"
+        },
+        "200": {
+          "type": "string",
+          "value": "Red Hat Display VF"
+        },
+        "300": {
+          "type": "string",
+          "value": "Red Hat Mono VF"
+        }
+      },
+      "weight": {
+        "body": {
+          "100": {
+            "type": "number",
+            "value": 400
+          },
+          "200": {
+            "type": "number",
+            "value": 500
+          }
+        },
+        "heading": {
+          "100": {
+            "type": "number",
+            "value": 700
+          },
+          "200": {
+            "type": "number",
+            "value": 700
+          }
+        }
+      },
+      "line-height": {
+        "100": {
+          "type": "number",
+          "value": 1.2999999523162842
+        },
+        "200": {
+          "type": "number",
+          "value": 1.5
+        },
+        "figma-only": {
+          "100": {
+            "type": "number",
+            "value": 18
+          },
+          "200": {
+            "type": "number",
+            "value": 21
+          },
+          "300": {
+            "type": "number",
+            "value": 24
+          },
+          "400": {
+            "type": "number",
+            "value": 23.399999618530273
+          },
+          "500": {
+            "type": "number",
+            "value": 26
+          },
+          "600": {
+            "type": "number",
+            "value": 28.600000381469727
+          },
+          "700": {
+            "type": "number",
+            "value": 36.400001525878906
+          },
+          "800": {
+            "type": "number",
+            "value": 46.79999923706055
+          }
+        }
+      },
       "size": {
         "100": {
           "type": "number",
diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json
index c567e8d..217c8a1 100644
--- a/packages/module/tokens/default/semantic.dimension.json
+++ b/packages/module/tokens/default/semantic.dimension.json
@@ -142,33 +142,15 @@
         "type": "number",
         "value": "{global.spacer.800}"
       },
-      "action": {
+      "control": {
         "vertical": {
           "default": {
             "type": "number",
             "value": "{global.spacer.sm}"
           },
-          "plain": {
-            "type": "number",
-            "value": "{global.spacer.sm}"
-          }
-        },
-        "horizontal": {
-          "default": {
-            "type": "number",
-            "value": "{global.spacer.lg}"
-          },
-          "plain": {
-            "type": "number",
-            "value": "{global.spacer.sm}"
-          }
-        }
-      },
-      "control": {
-        "vertical": {
-          "default": {
+          "compact": {
             "type": "number",
-            "value": "{global.spacer.sm}"
+            "value": "{global.spacer.100}"
           },
           "plain": {
             "type": "number",
@@ -180,6 +162,10 @@
             "type": "number",
             "value": "{global.spacer.md}"
           },
+          "compact": {
+            "type": "number",
+            "value": "{global.spacer.200}"
+          },
           "plain": {
             "type": "number",
             "value": "{global.spacer.sm}"
@@ -230,6 +216,28 @@
           }
         }
       },
+      "action": {
+        "vertical": {
+          "default": {
+            "type": "number",
+            "value": "{global.spacer.sm}"
+          },
+          "plain": {
+            "type": "number",
+            "value": "{global.spacer.sm}"
+          }
+        },
+        "horizontal": {
+          "default": {
+            "type": "number",
+            "value": "{global.spacer.lg}"
+          },
+          "plain": {
+            "type": "number",
+            "value": "{global.spacer.sm}"
+          }
+        }
+      },
       "button": {
         "horizontal": {
           "compact": {
@@ -267,7 +275,25 @@
           "type": "number",
           "value": "{global.icon.size.400}"
         },
+        "3xl": {
+          "type": "number",
+          "value": "{global.icon.size.500}"
+        },
         "font": {
+          "body": {
+            "sm": {
+              "type": "number",
+              "value": "{global.font.size.body.sm}"
+            },
+            "default": {
+              "type": "number",
+              "value": "{global.font.size.body.default}"
+            },
+            "lg": {
+              "type": "number",
+              "value": "{global.font.size.body.lg}"
+            }
+          },
           "heading": {
             "h1": {
               "type": "number",
@@ -294,20 +320,6 @@
               "value": "{global.font.size.heading.h6}"
             }
           },
-          "body": {
-            "sm": {
-              "type": "number",
-              "value": "{global.font.size.body.sm}"
-            },
-            "default": {
-              "type": "number",
-              "value": "{global.font.size.body.default}"
-            },
-            "lg": {
-              "type": "number",
-              "value": "{global.font.size.body.lg}"
-            }
-          },
           "xs": {
             "type": "number",
             "value": "{global.font.size.xs}"
@@ -340,14 +352,94 @@
             "type": "number",
             "value": "{global.font.size.4xl}"
           }
-        },
-        "3xl": {
-          "type": "number",
-          "value": "{global.icon.size.500}"
         }
       }
     },
     "font": {
+      "weight": {
+        "body": {
+          "type": "number",
+          "value": "{global.font.weight.body.100}",
+          "bold": {
+            "type": "number",
+            "value": "{global.font.weight.body.200}"
+          }
+        },
+        "heading": {
+          "type": "number",
+          "value": "{global.font.weight.heading.100}",
+          "bold": {
+            "type": "number",
+            "value": "{global.font.weight.heading.200}"
+          }
+        }
+      },
+      "line-height": {
+        "body": {
+          "type": "number",
+          "value": "{global.font.line-height.100}"
+        },
+        "heading": {
+          "type": "number",
+          "value": "{global.font.line-height.200}"
+        },
+        "figma-only": {
+          "body": {
+            "small": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.100}"
+            },
+            "default": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.200}"
+            },
+            "large": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.300}"
+            }
+          },
+          "heading": {
+            "xs": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.300}"
+            },
+            "sm": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.400}"
+            },
+            "md": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.500}"
+            },
+            "lg": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.600}"
+            },
+            "xl": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.700}"
+            },
+            "2xl": {
+              "type": "number",
+              "value": "{global.font.line-height.figma-only.800}"
+            }
+          }
+        }
+      },
+      "family": {
+        "body": {
+          "type": "number",
+          "value": "{global.font.family.100}"
+        },
+        "heading": {
+          "type": "number",
+          "value": "{global.font.family.200}"
+        },
+        "mono": {
+          "type": "number",
+          "value": "{global.font.family.300}"
+        }
+      },
       "size": {
         "body": {
           "sm": {
diff --git a/packages/module/tokens/default/semantic.json b/packages/module/tokens/default/semantic.json
index 75e2122..bd9051b 100644
--- a/packages/module/tokens/default/semantic.json
+++ b/packages/module/tokens/default/semantic.json
@@ -5,42 +5,51 @@
       "color": {
         "primary": {
           "default": {
+            "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
             "type": "color",
             "value": "{global.background.color.100}"
           },
           "hover": {
+            "description": "Use as the hover state for primary backgrounds",
             "type": "color",
             "value": "{global.background.color.200}"
           },
           "clicked": {
+            "description": "Use as the selected state for primary backgrounds",
             "type": "color",
             "value": "{global.background.color.200}"
           }
         },
         "secondary": {
           "default": {
+            "description": "Use as the secondary background color for UI content Use as the primary background color for UI content such as cards, page sections, and other content areas. Secondary background color is also used for our UI shell backgrounds (nav, masthead, etc).",
             "type": "color",
             "value": "{global.background.color.200}"
           },
           "hover": {
+            "description": "Use as the hover state for secondary backgrounds",
             "type": "color",
             "value": "{global.background.color.300}"
           },
           "clicked": {
+            "description": "Use as the selected state for secondary backgrounds",
             "type": "color",
             "value": "{global.background.color.300}"
           }
         },
         "floating": {
           "default": {
+            "description": "Use as background color for components that show over top of other content such as toast alerts, menus, modals, overlay drawers, etc.",
             "type": "color",
             "value": "{global.background.color.100}"
           },
           "hover": {
+            "description": "Use as the hover state for floating backgrounds",
             "type": "color",
             "value": "{global.background.color.200}"
           },
           "clicked": {
+            "description": "Use as the selected state for floating backgrounds",
             "type": "color",
             "value": "{global.background.color.200}"
           }
@@ -48,23 +57,28 @@
         "action": {
           "plain": {
             "default": {
+              "description": "Use as the default background for actions with transparent backgrounds such as menu items, accordion toggles, buttons, etc.",
               "type": "color",
               "value": "rgba(255, 255, 255, 0.0000)"
             },
             "hover": {
+              "description": "Use as the hover state for components that use the plain action default background.",
               "type": "color",
               "value": "{global.background.color.600}"
             },
             "clicked": {
+              "description": "Use as the active/pressed state for components that use the plain action default background.",
               "type": "color",
               "value": "{global.background.color.600}"
             },
             "alt": {
               "hover": {
+                "description": "Use as the hover state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
                 "type": "color",
                 "value": "{global.background.color.100}"
               },
               "clicked": {
+                "description": "Use as the active/pressed state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
                 "type": "color",
                 "value": "{global.background.color.100}"
               }
@@ -73,34 +87,40 @@
         },
         "control": {
           "default": {
+            "description": "Use as the default background for control elements like form inputs and menu toggles.",
             "type": "color",
             "value": "{global.background.color.primary.default}"
           }
         },
         "highlight": {
           "default": {
+            "description": "Use as the background color for highlighted elements",
             "type": "color",
             "value": "{global.background.color.highlight.100}"
           },
           "clicked": {
+            "description": "Use as the active state for for highlighted elements",
             "type": "color",
             "value": "{global.background.color.highlight.200}"
           }
         },
         "inverse": {
           "default": {
+            "description": "Use as the background color components with inversed backgrounds like tooltips.",
             "type": "color",
             "value": "{global.background.color.400}"
           }
         },
         "disabled": {
           "default": {
+            "description": "Use as the background color for disabled components.",
             "type": "color",
             "value": "{global.color.disabled.100}"
           }
         },
         "backdrop": {
           "default": {
+            "description": "Use as the background color for the backdrop component that shows beneath a modal/about modal/floating wizard etc.",
             "type": "color",
             "value": "{global.background.color.500}"
           }
@@ -291,7 +311,7 @@
             "value": "{global.color.nonstatus.orangered.200}"
           }
         },
-        "gold": {
+        "yellow": {
           "default": {
             "type": "color",
             "value": "{global.color.nonstatus.gold.100}"
@@ -319,7 +339,7 @@
             "value": "{global.color.nonstatus.green.200}"
           }
         },
-        "cyan": {
+        "teal": {
           "default": {
             "type": "color",
             "value": "{global.color.nonstatus.cyan.100}"
@@ -606,10 +626,12 @@
           "value": "{global.icon.color.300}"
         },
         "disabled": {
+          "description": "for use without disabled background color",
           "type": "color",
           "value": "{global.color.disabled.200}"
         },
         "on-disabled": {
+          "description": "pair with disabled background color",
           "type": "color",
           "value": "{global.color.disabled.300}"
         },
@@ -694,7 +716,7 @@
               "value": "{global.icon.color.regular}"
             }
           },
-          "on-gold": {
+          "on-yellow": {
             "default": {
               "type": "color",
               "value": "{global.icon.color.regular}"
@@ -722,7 +744,7 @@
               "value": "{global.icon.color.regular}"
             }
           },
-          "on-cyan": {
+          "on-teal": {
             "default": {
               "type": "color",
               "value": "{global.icon.color.regular}"
@@ -936,7 +958,7 @@
               "value": "{global.color.nonstatus.orange.300}"
             }
           },
-          "gold": {
+          "yellow": {
             "default": {
               "type": "color",
               "value": "{global.color.nonstatus.gold.200}"
@@ -964,7 +986,7 @@
               "value": "{global.color.nonstatus.green.300}"
             }
           },
-          "cyan": {
+          "teal": {
             "default": {
               "type": "color",
               "value": "{global.color.nonstatus.cyan.200}"
@@ -1070,10 +1092,12 @@
           "value": "{global.text.color.subtle}"
         },
         "disabled": {
+          "description": "for use without disabled background color",
           "type": "color",
           "value": "{global.color.disabled.200}"
         },
         "on-disabled": {
+          "description": "pair with disabled background color",
           "type": "color",
           "value": "{global.color.disabled.300}"
         },
@@ -1314,7 +1338,7 @@
               "value": "{global.text.color.regular}"
             }
           },
-          "on-gold": {
+          "on-yellow": {
             "default": {
               "type": "color",
               "value": "{global.text.color.regular}"
@@ -1342,7 +1366,7 @@
               "value": "{global.text.color.regular}"
             }
           },
-          "on-cyan": {
+          "on-teal": {
             "default": {
               "type": "color",
               "value": "{global.text.color.regular}"