Tokens TypeScript Build (#31)

# Pull Request

## 🤨 Rationale

Added a workaround that avoids forking the DSP generated config.js and enables TypeScript Type Definitions for the JS Build. Could remove after: AdobeXD/design-system-package-dsp#22

## 👩‍💻 Implementation

Specified a custom config file in the DSP configuration. The custom file loads the one generated by the design system and patches it for the TypeScript configuration changes.

I noticed that even with a custom file specified the DSP plugin will still assume the original config.js exists and will always create or update it. The extend and patch workflow in `nimble-config.js` should allow us to leverage the GUI config for the DSP to generate a `config.js` and patch it for custom behavior in `nimble-config.js`.

## 🧪 Testing

Tested with the XD extension locally.

## ✅ Checklist

- [X] I have updated the project documentation to reflect my changes. Don't think any updates needed.

change/@ni-nimble-components-4975e18f-998c-4d51-9de9-704256682473.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Switch to token es6 module type declarations",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@ni-nimble-tokens-6bf3cf0d-5638-453b-ac9c-012aef61c63a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Generate es6 module type declarations",
+  "packageName": "@ni/nimble-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

packages/nimble-components/src/theme-provider/design-tokens.ts

@@ -27,10 +27,10 @@ const { create } = DesignToken;
 export const theme = create<NimbleTheme>({ name: 'theme', cssCustomPropertyName: null }).withDefault(NimbleTheme.Light);
 
 // Color Tokens
-export const applicationBackgroundColor = create<string>('application-background-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? White : Black85)) as string);
+export const applicationBackgroundColor = create<string>('application-background-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? White : Black85)));
 export const fillColorSelected = create<string>('fill-color-selected').withDefault(hexToRgba(Selection100, 0.3));
 export const fillColorSelectedRgb = create<string>('fill-color-selected-rgb').withDefault(rgbString(Selection100));
-export const borderColor = create<string>('border-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15)) as string);
+export const borderColor = create<string>('border-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15)));
 export const borderColorRgb = create<string>('border-color-rgb').withDefault((element: HTMLElement) => (rgbString(theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15)));
 export const borderColorHover = create<string>('border-color-hover').withDefault(Brand100);
 
@@ -40,11 +40,11 @@ export const standardPadding = create<string>('standard-padding').withDefault('1
 
 // Font Family Tokens
 export const fontFamily = create<string>('font-family').withDefault(BodyFamily);
-export const labelFontFamily = create<string>('label-font-family').withDefault(`${OverlineCapsFamily as string}, ${BodyFamily as string}`);
+export const labelFontFamily = create<string>('label-font-family').withDefault(`${OverlineCapsFamily}, ${BodyFamily}`);
 
 // Font Sizing Tokens
 export const labelFontSize = create<string>('label-font-size').withDefault('11px');
 export const contentFontSize = create<string>('content-font-size').withDefault('14px');
 
 // Font Color Tokens
-export const fontColor = create<string>('label-font-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15)) as string);
+export const fontColor = create<string>('label-font-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15)));

packages/nimble-tokens/CONTRIBUTING.md

@@ -16,7 +16,7 @@ The source of truth for the colors, fonts, and component design tokens in this r
 For changes to any token values, work with the Visual Design team to update the library, and then perform the following steps:
 
 1. Ensure you have the [Adobe XD plugin for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=Adobe.xd&ssr=false#overview) installed.
-2. Open the XD Plugin and load the nimble-tokens-dsp package by selecting the `nimble-tokens` folder.
+2. Open the XD Plugin (invoke [Show All Commands](https://code.visualstudio.com/docs/getstarted/keybindings#_navigation) and execute command `XD: Toggle Adobe XD Panel`) and load the nimble-tokens-dsp package by selecting the `nimble-tokens` folder.
 3. Click the **DSP Setting** button (bottom left). If the button isn't available, open the XD Plugin settings to confirm that the `XD: Global Editor` setting is **checked** for both user and workspace.
 4. Scroll to the bottom of the DSP Setting page and click the **Re-import** button to update the CC LIBRARY LINK.
 5. Save the settings change.

packages/nimble-tokens/dist/styledictionary/css/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Jul 2021 14:51:56 GMT
+ * Generated on Fri, 16 Jul 2021 22:14:11 GMT
  */
 
 :root {

packages/nimble-tokens/dist/styledictionary/js/tokens.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 16 Jul 2021 22:14:11 GMT
+ */
+
+export const Black7 : string;
+export const Black40 : string;
+export const Warning85 : string;
+export const Black75 : string;
+export const Black88 : string;
+export const Black15 : string;
+export const Development32Bit : string;
+export const Selection100 : string;
+export const Selection15 : string;
+export const Black85 : string;
+export const Brand100 : string;
+export const Brand15 : string;
+export const Brand30 : string;
+export const Brand50 : string;
+export const Brand75 : string;
+export const Brand85 : string;
+export const Application32Bit : string;
+export const Application64Bit : string;
+export const Development64Bit : string;
+export const Warning100 : string;
+export const Pass100 : string;
+export const Fail100 : string;
+export const Information75 : string;
+export const Information50 : string;
+export const Information30 : string;
+export const Information15 : string;
+export const Information85 : string;
+export const Information100 : string;
+export const Black30 : string;
+export const Brand : string;
+export const Enterprise : string;
+export const ThirdParty : string;
+export const RDRgbNiGreen : string;
+export const White : string;
+export const Black80 : string;
+export const Black91 : string;
+export const Black : string;
+export const Black50 : string;
+export const Black95 : string;
+export const RgbNiHoney : string;
+export const Plot6 : string;
+export const Plot5 : string;
+export const Plot4 : string;
+export const Plot3 : string;
+export const Plot2 : string;
+export const Plot1 : string;
+export const Fail85 : string;
+export const Fail75 : string;
+export const Pass15 : string;
+export const Pass30 : string;
+export const Pass50 : string;
+export const Pass75 : string;
+export const Pass85 : string;
+export const Fail50 : string;
+export const Fail30 : string;
+export const Fail15 : string;
+export const Warning75 : string;
+export const Warning50 : string;
+export const Warning30 : string;
+export const Warning15 : string;
+export const RgbNiPaleGreen : string;
+export const RgbNiOffWhite : string;
+export const RgbNiFernDark3 : string;
+export const RgbNiFernDark2 : string;
+export const RgbNiFernDark1 : string;
+export const RgbNiFern : string;
+export const RgbNiFernLight : string;
+export const RgbNiPlumDark3 : string;
+export const RgbNiPlumDark2 : string;
+export const RgbNiPlumDark1 : string;
+export const RgbNiPlum : string;
+export const RgbNiPlumLight : string;
+export const RgbNiIndigoDark3 : string;
+export const RgbNiIndigoDark2 : string;
+export const RgbNiIndigoDark1 : string;
+export const RgbNiIndigo : string;
+export const RgbNiIndigoLight : string;
+export const RgbNiSeaDark3 : string;
+export const RgbNiSeaDark2 : string;
+export const RgbNiSeaDark1 : string;
+export const RgbNiSea : string;
+export const RgbNiSeaLight : string;
+export const RgbNiTulipDark3 : string;
+export const RgbNiTulipDark2 : string;
+export const RgbNiTulipDark1 : string;
+export const RgbNiTulip : string;
+export const RgbNiTulipLight : string;
+export const RgbNiScarletDark3 : string;
+export const RgbNiScarletDark2 : string;
+export const RgbNiScarletDark1 : string;
+export const RgbNiScarlet : string;
+export const RgbNiScarletLight : string;
+export const RgbNiHoneyDark3 : string;
+export const RgbNiHoneyDark2 : string;
+export const RgbNiHoneyDark1 : string;
+export const RgbNiHoneyLight : string;
+export const RgbNiSkyDark3 : string;
+export const RgbNiSkyDark2 : string;
+export const RgbNiSkyDark1 : string;
+export const RgbNiSky : string;
+export const RgbNiSkyLight : string;
+export const RgbNiPowerGreen : string;
+export const RgbNiForestGreen : string;
+export const ButtonFamily : string;
+export const ButtonWeight : string;
+export const OverlineCapsFamily : string;
+export const OverlineCapsWeight : string;
+export const BodyFamily : string;
+export const BodyWeight : string;
+export const SubtitleFamily : string;
+export const SubtitleWeight : string;
+export const H2Family : string;
+export const H2Weight : string;
+export const H1Family : string;
+export const H1Weight : string;
+export const H0Family : string;
+export const H0Weight : string;
+export const ButtonSize : string;
+export const OverlineCapsSize : string;
+export const BodySize : string;
+export const SubtitleSize : string;
+export const H2Size : string;
+export const H1Size : string;
+export const H0Size : string;

packages/nimble-tokens/dist/styledictionary/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Jul 2021 14:51:56 GMT
+ * Generated on Fri, 16 Jul 2021 22:14:11 GMT
  */
 
 export const Black7 = "#f5f5f5";

packages/nimble-tokens/dist/styledictionary/nimble-extensions.js

@@ -0,0 +1,11 @@
+const config = require('./config');
+
+// Workaround to include TypeScript definitions in output.
+// See: https://github.com/AdobeXD/design-system-package-dsp/issues/22
+
+config.platforms.js.files.push({
+    "destination": "tokens.d.ts",
+    "format": "typescript/es6-declarations"
+});
+
+module.exports = config;

packages/nimble-tokens/dist/styledictionary/scss/variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 01 Jul 2021 14:51:56 GMT
+// Generated on Fri, 16 Jul 2021 22:14:11 GMT
 
 $black-7: #f5f5f5;
 $black-40: #bcbdbe;

packages/nimble-tokens/dsp.json

@@ -8,7 +8,7 @@
     "build_tool": "StyleDictionary",
     "snippet_trigger_prefix": "nim_",
     "build_status_label": "dev",
-    "build_params": "./config.js",
+    "build_params": "./nimble-extensions.js",
     "languages": [
       {
         "label": "Coffeescript",