diff --git a/change/@ni-nimble-components-4975e18f-998c-4d51-9de9-704256682473.json b/change/@ni-nimble-components-4975e18f-998c-4d51-9de9-704256682473.json new file mode 100644 index 0000000000..fdf4f9d6f6 --- /dev/null +++ b/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": "rajsite@users.noreply.github.com", + "dependentChangeType": "prerelease" +} diff --git a/change/@ni-nimble-tokens-6bf3cf0d-5638-453b-ac9c-012aef61c63a.json b/change/@ni-nimble-tokens-6bf3cf0d-5638-453b-ac9c-012aef61c63a.json new file mode 100644 index 0000000000..59b273edc2 --- /dev/null +++ b/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": "rajsite@users.noreply.github.com", + "dependentChangeType": "prerelease" +} diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index 8714979684..63f4f4bf79 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -27,10 +27,10 @@ const { create } = DesignToken; export const theme = create({ name: 'theme', cssCustomPropertyName: null }).withDefault(NimbleTheme.Light); // Color Tokens -export const applicationBackgroundColor = create('application-background-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? White : Black85)) as string); +export const applicationBackgroundColor = create('application-background-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? White : Black85))); export const fillColorSelected = create('fill-color-selected').withDefault(hexToRgba(Selection100, 0.3)); export const fillColorSelectedRgb = create('fill-color-selected-rgb').withDefault(rgbString(Selection100)); -export const borderColor = create('border-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15)) as string); +export const borderColor = create('border-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15))); export const borderColorRgb = create('border-color-rgb').withDefault((element: HTMLElement) => (rgbString(theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15))); export const borderColorHover = create('border-color-hover').withDefault(Brand100); @@ -40,11 +40,11 @@ export const standardPadding = create('standard-padding').withDefault('1 // Font Family Tokens export const fontFamily = create('font-family').withDefault(BodyFamily); -export const labelFontFamily = create('label-font-family').withDefault(`${OverlineCapsFamily as string}, ${BodyFamily as string}`); +export const labelFontFamily = create('label-font-family').withDefault(`${OverlineCapsFamily}, ${BodyFamily}`); // Font Sizing Tokens export const labelFontSize = create('label-font-size').withDefault('11px'); export const contentFontSize = create('content-font-size').withDefault('14px'); // Font Color Tokens -export const fontColor = create('label-font-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15)) as string); +export const fontColor = create('label-font-color').withDefault((element: HTMLElement) => ((theme.getValueFor(element) === NimbleTheme.Light ? Black91 : Black15))); diff --git a/packages/nimble-tokens/CONTRIBUTING.md b/packages/nimble-tokens/CONTRIBUTING.md index 1186b766f4..48228ca3cb 100644 --- a/packages/nimble-tokens/CONTRIBUTING.md +++ b/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. diff --git a/packages/nimble-tokens/dist/styledictionary/css/variables.css b/packages/nimble-tokens/dist/styledictionary/css/variables.css index 25e41bcb36..659134df76 100644 --- a/packages/nimble-tokens/dist/styledictionary/css/variables.css +++ b/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 { diff --git a/packages/nimble-tokens/dist/styledictionary/js/tokens.d.ts b/packages/nimble-tokens/dist/styledictionary/js/tokens.d.ts new file mode 100644 index 0000000000..79cec0ee53 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/packages/nimble-tokens/dist/styledictionary/js/tokens.js b/packages/nimble-tokens/dist/styledictionary/js/tokens.js index 7613832eb8..e0bb365788 100644 --- a/packages/nimble-tokens/dist/styledictionary/js/tokens.js +++ b/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"; diff --git a/packages/nimble-tokens/dist/styledictionary/nimble-extensions.js b/packages/nimble-tokens/dist/styledictionary/nimble-extensions.js new file mode 100644 index 0000000000..c0a8810b78 --- /dev/null +++ b/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; diff --git a/packages/nimble-tokens/dist/styledictionary/scss/variables.scss b/packages/nimble-tokens/dist/styledictionary/scss/variables.scss index 62326e8895..0238040858 100644 --- a/packages/nimble-tokens/dist/styledictionary/scss/variables.scss +++ b/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; diff --git a/packages/nimble-tokens/dsp.json b/packages/nimble-tokens/dsp.json index 397cedac9c..9dd209d400 100644 --- a/packages/nimble-tokens/dsp.json +++ b/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",