Add nimble-base prefix to tokens (#259)

# Pull Request ## 🤨 Rationale This PR addresses the second half of #236 (comment) by adding the prefix `nimble-base` to the raw tokens defined in ni/tokens. ## 👩‍💻 Implementation - Modified the nimble-extensions for the Adobe DSP to add a prefix to the names. Used a workaround as I couldn't see a way to configure a prefix using the DSP itself. I created the following issue for the workaround: AdobeXD/design-system-package-dsp#27 - Only defined the prefix for css and scss files. The rationale being that those are set globally in a page and can conflict. The JS files are modules that are explicitly imported and not globally available so are unlikely to get used accidentally. ## 🧪 Testing Just CI builds, no explicit testing. ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. Doc changes will be aligned with #231 or after. Won't address in this PR.
ni · Jan 13, 2022 · adb7088 · adb7088
1 parent 33ae6e4
commit adb7088
Show file tree

Hide file tree

Showing 10 changed files with 238 additions and 149 deletions.
diff --git a/change/@ni-nimble-tokens-1a4b1b85-aa79-4945-834d-21a8d1d85f61.json b/change/@ni-nimble-tokens-1a4b1b85-aa79-4945-834d-21a8d1d85f61.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add nimble-base prefix to tokens",
+  "packageName": "@ni/nimble-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/nimble-tokens/dist/styledictionary/config.js b/packages/nimble-tokens/dist/styledictionary/config.js
@@ -27,6 +27,16 @@ module.exports = {
       ],
       "transformGroup": "js",
       "buildPath": "js/"
+    },
+    "scss": {
+      "files": [
+        {
+          "destination": "variables.scss",
+          "format": "scss/variables"
+        }
+      ],
+      "transformGroup": "scss",
+      "buildPath": "scss/"
     }
   }
 };

diff --git a/packages/nimble-tokens/dist/styledictionary/csharp/colors.cs b/packages/nimble-tokens/dist/styledictionary/csharp/colors.cs
@@ -2,7 +2,7 @@
 
 /**
     Do not edit directly
-    Generated on Wed, 01 Dec 2021 15:38:41 GMT
+    Generated on Thu, 13 Jan 2022 15:57:37 GMT
 **/
 
 using System.Windows.Media;

diff --git a/packages/nimble-tokens/dist/styledictionary/css/variables.css b/packages/nimble-tokens/dist/styledictionary/css/variables.css
@@ -1,100 +1,100 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Nov 2021 20:33:32 GMT
+ * Generated on Thu, 13 Jan 2022 15:57:37 GMT
  */
 
 :root {
-  --sl-legacy-blue: #009ff5;
-  --information-100-dark-ui: #a46eff;
-  --information-100-light-ui: #804ad9;
-  --warning-100-dark-ui: #ff8126;
-  --pass-100-light-ui: #009921;
-  --pass-100-dark-ui: #00c12b;
-  --warning-typography-light-ui: #d3440d;
-  --pass-typography-light-ui: #00801c;
-  --fail-100-light-ui: #c4000c;
-  --fail-100-dark-ui: #ff4646;
-  --black-75: #818386;
-  --black-15: #f1f1f2;
-  --black-7: #f5f5f5;
-  --white: #ffffff;
-  --black-88: #252526;
-  --black-85: #363738;
-  --black-80: #505153;
-  --black: #000000;
-  --black-95: #0e0f0f;
-  --black-91: #161617;
-  --enterprise: #074023;
-  --selection-100: #00b888;
-  --brand-85: #26a97c;
-  --brand-100: #009b65;
-  --fail-85: #cf1a37;
-  --rgb-ni-sky: #3cb4e7;
-  --banner-fail-100-dark-ui: #d63434;
-  --warning-100-light-ui: #ff4b00;
-  --black-30: #d3d5d6;
-  --black-50: #aeb0b3;
-  --title-2-family: Source Sans Pro;
-  --title-2-weight: 400;
-  --control-label-1-family: Source Sans Pro;
-  --control-label-1-weight: 600;
-  --body-family: Source Sans Pro;
-  --body-weight: 400;
-  --header-0-family: Noto Serif;
-  --header-0-weight: 400;
-  --sub-header-family: Source Sans Pro;
-  --sub-header-weight: 400;
-  --header-1-family: Noto Serif;
-  --header-1-weight: 400;
-  --group-label-1-family: Space Mono;
-  --group-label-1-weight: 400;
-  --button-label-1-family: Source Sans Pro;
-  --button-label-1-weight: 400;
-  --title-1-family: Source Sans Pro;
-  --title-1-weight: 400;
-  --link-color-ui-family: Source Sans Pro;
-  --link-color-ui-weight: 400;
-  --link-dark-ui-family: Source Sans Pro;
-  --link-dark-ui-weight: 400;
-  --headline-2-family: Noto Serif;
-  --headline-2-weight: 400;
-  --placeholder-family: Source Sans Pro;
-  --placeholder-weight: 400;
-  --tooltip-caption-family: Source Sans Pro;
-  --tooltip-caption-weight: 400;
-  --body-emphasized-family: Source Sans Pro;
-  --body-emphasized-weight: 600;
-  --subtitle-1-family: Source Sans Pro;
-  --subtitle-1-weight: 300;
-  --title-3-family: Source Sans Pro;
-  --title-3-weight: 400;
-  --subtitle-2-family: Source Sans Pro;
-  --subtitle-2-weight: 300;
-  --link-light-ui-family: Source Sans Pro;
-  --link-light-ui-weight: 400;
-  --headline-1-family: Noto Serif;
-  --headline-1-weight: 400;
-  --legacy-content-family: 'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif;
-  --title-2-size: 22px;
-  --control-label-1-size: 11px;
-  --body-size: 14px;
-  --header-0-size: 36px;
-  --sub-header-size: 12px;
-  --header-1-size: 24px;
-  --group-label-1-size: 11px;
-  --button-label-1-size: 12.800000190734863px;
-  --title-1-size: 19px;
-  --link-color-ui-size: 14px;
-  --link-dark-ui-size: 14px;
-  --headline-2-size: 29.100000381469727px;
-  --placeholder-size: 14px;
-  --tooltip-caption-size: 11px;
-  --body-emphasized-size: 14px;
-  --subtitle-1-size: 12.800000190734863px;
-  --title-3-size: 25px;
-  --subtitle-2-size: 16px;
-  --link-light-ui-size: 14px;
-  --headline-1-size: 25px;
-  --small-delay: 0.1s; /* Short animation delay used for control state change animation */
-  --medium-delay: 0.15s; /* Medium animation delay for control state change animation */
+  --ni-nimble-base-sl-legacy-blue: #009ff5;
+  --ni-nimble-base-information-100-dark-ui: #a46eff;
+  --ni-nimble-base-information-100-light-ui: #804ad9;
+  --ni-nimble-base-warning-100-dark-ui: #ff8126;
+  --ni-nimble-base-pass-100-light-ui: #009921;
+  --ni-nimble-base-pass-100-dark-ui: #00c12b;
+  --ni-nimble-base-warning-typography-light-ui: #d3440d;
+  --ni-nimble-base-pass-typography-light-ui: #00801c;
+  --ni-nimble-base-fail-100-light-ui: #c4000c;
+  --ni-nimble-base-fail-100-dark-ui: #ff4646;
+  --ni-nimble-base-black-75: #818386;
+  --ni-nimble-base-black-15: #f1f1f2;
+  --ni-nimble-base-black-7: #f5f5f5;
+  --ni-nimble-base-white: #ffffff;
+  --ni-nimble-base-black-88: #252526;
+  --ni-nimble-base-black-85: #363738;
+  --ni-nimble-base-black-80: #505153;
+  --ni-nimble-base-black: #000000;
+  --ni-nimble-base-black-95: #0e0f0f;
+  --ni-nimble-base-black-91: #161617;
+  --ni-nimble-base-enterprise: #074023;
+  --ni-nimble-base-selection-100: #00b888;
+  --ni-nimble-base-brand-85: #26a97c;
+  --ni-nimble-base-brand-100: #009b65;
+  --ni-nimble-base-fail-85: #cf1a37;
+  --ni-nimble-base-rgb-ni-sky: #3cb4e7;
+  --ni-nimble-base-banner-fail-100-dark-ui: #d63434;
+  --ni-nimble-base-warning-100-light-ui: #ff4b00;
+  --ni-nimble-base-black-30: #d3d5d6;
+  --ni-nimble-base-black-50: #aeb0b3;
+  --ni-nimble-base-title-2-family: Source Sans Pro;
+  --ni-nimble-base-title-2-weight: 400;
+  --ni-nimble-base-control-label-1-family: Source Sans Pro;
+  --ni-nimble-base-control-label-1-weight: 600;
+  --ni-nimble-base-body-family: Source Sans Pro;
+  --ni-nimble-base-body-weight: 400;
+  --ni-nimble-base-header-0-family: Noto Serif;
+  --ni-nimble-base-header-0-weight: 400;
+  --ni-nimble-base-sub-header-family: Source Sans Pro;
+  --ni-nimble-base-sub-header-weight: 400;
+  --ni-nimble-base-header-1-family: Noto Serif;
+  --ni-nimble-base-header-1-weight: 400;
+  --ni-nimble-base-group-label-1-family: Space Mono;
+  --ni-nimble-base-group-label-1-weight: 400;
+  --ni-nimble-base-button-label-1-family: Source Sans Pro;
+  --ni-nimble-base-button-label-1-weight: 400;
+  --ni-nimble-base-title-1-family: Source Sans Pro;
+  --ni-nimble-base-title-1-weight: 400;
+  --ni-nimble-base-link-color-ui-family: Source Sans Pro;
+  --ni-nimble-base-link-color-ui-weight: 400;
+  --ni-nimble-base-link-dark-ui-family: Source Sans Pro;
+  --ni-nimble-base-link-dark-ui-weight: 400;
+  --ni-nimble-base-headline-2-family: Noto Serif;
+  --ni-nimble-base-headline-2-weight: 400;
+  --ni-nimble-base-placeholder-family: Source Sans Pro;
+  --ni-nimble-base-placeholder-weight: 400;
+  --ni-nimble-base-tooltip-caption-family: Source Sans Pro;
+  --ni-nimble-base-tooltip-caption-weight: 400;
+  --ni-nimble-base-body-emphasized-family: Source Sans Pro;
+  --ni-nimble-base-body-emphasized-weight: 600;
+  --ni-nimble-base-subtitle-1-family: Source Sans Pro;
+  --ni-nimble-base-subtitle-1-weight: 300;
+  --ni-nimble-base-title-3-family: Source Sans Pro;
+  --ni-nimble-base-title-3-weight: 400;
+  --ni-nimble-base-subtitle-2-family: Source Sans Pro;
+  --ni-nimble-base-subtitle-2-weight: 300;
+  --ni-nimble-base-link-light-ui-family: Source Sans Pro;
+  --ni-nimble-base-link-light-ui-weight: 400;
+  --ni-nimble-base-headline-1-family: Noto Serif;
+  --ni-nimble-base-headline-1-weight: 400;
+  --ni-nimble-base-legacy-content-family: 'Roboto', 'Microsoft YaHei', 'Hiragino Kaku Gothic Pro', sans-serif;
+  --ni-nimble-base-title-2-size: 22px;
+  --ni-nimble-base-control-label-1-size: 11px;
+  --ni-nimble-base-body-size: 14px;
+  --ni-nimble-base-header-0-size: 36px;
+  --ni-nimble-base-sub-header-size: 12px;
+  --ni-nimble-base-header-1-size: 24px;
+  --ni-nimble-base-group-label-1-size: 11px;
+  --ni-nimble-base-button-label-1-size: 12.800000190734863px;
+  --ni-nimble-base-title-1-size: 19px;
+  --ni-nimble-base-link-color-ui-size: 14px;
+  --ni-nimble-base-link-dark-ui-size: 14px;
+  --ni-nimble-base-headline-2-size: 29.100000381469727px;
+  --ni-nimble-base-placeholder-size: 14px;
+  --ni-nimble-base-tooltip-caption-size: 11px;
+  --ni-nimble-base-body-emphasized-size: 14px;
+  --ni-nimble-base-subtitle-1-size: 12.800000190734863px;
+  --ni-nimble-base-title-3-size: 25px;
+  --ni-nimble-base-subtitle-2-size: 16px;
+  --ni-nimble-base-link-light-ui-size: 14px;
+  --ni-nimble-base-headline-1-size: 25px;
+  --ni-nimble-base-small-delay: 0.1s; /* Short animation delay used for control state change animation */
+  --ni-nimble-base-medium-delay: 0.15s; /* Medium animation delay for control state change animation */
 }
diff --git a/packages/nimble-tokens/dist/styledictionary/js/tokens.d.ts b/packages/nimble-tokens/dist/styledictionary/js/tokens.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Nov 2021 20:33:32 GMT
+ * Generated on Thu, 13 Jan 2022 15:57:37 GMT
  */
 
 export const SlLegacyBlue : string;

diff --git 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 Wed, 24 Nov 2021 20:33:32 GMT
+ * Generated on Thu, 13 Jan 2022 15:57:37 GMT
  */
 
 export const SlLegacyBlue = "#009ff5";

diff --git a/packages/nimble-tokens/dist/styledictionary/nimble-extensions.js b/packages/nimble-tokens/dist/styledictionary/nimble-extensions.js
@@ -35,12 +35,38 @@ StyleDictionary.registerTransform({
     }
 });
 
+// Workaround as name/dsp/kebab does not support prefixes
+// See: https://github.com/AdobeXD/design-system-package-dsp/issues/27
+const { type, matcher, transformer } = StyleDictionary.transform['name/dsp/kebab'];
+StyleDictionary.registerTransform({
+    name: 'name/nimble/kebab',
+    type,
+    matcher,
+    transformer: function (prop) {
+        return `ni-nimble-base-${transformer(prop)}`;
+    }
+});
+
 // Combination of DSP & Nimble transform overrides
 StyleDictionary.registerTransformGroup({
     name: 'css',
     transforms: [
         'attribute/cti',
-        'name/dsp/kebab', // replaces 'name/cti/kebab',
+        'name/nimble/kebab', // replaces name/dsp/kebab from DSP config
+        'time/seconds',
+        'content/icon',
+        'size/px', // replaces size/rem from DSP config
+        'color/css',
+        'font/weight'
+    ]
+});
+
+// Combination of DSP & Nimble transform overrides
+StyleDictionary.registerTransformGroup({
+    name: 'scss',
+    transforms: [
+        'attribute/cti',
+        'name/nimble/kebab', // replaces name/dsp/kebab from DSP config
         'time/seconds',
         'content/icon',
         'size/px', // replaces size/rem from DSP config
@@ -111,9 +137,9 @@ StyleDictionary.registerFormat({
 });
 
 StyleDictionary.registerTransform({
+    name: 'color/FromRgb',
     type: 'value',
     transitive: true,
-    name: 'color/FromRgb',
     matcher: token => token.attributes.category === 'color',
     transformer: token => {
         const color = hexRgb(token.value);