Update slash icon, update from XD, and and rename a few tokens (#389)

🤨 Rationale

Replaces temporary forward-slash icon with proper icon
Replaces Enterprise green with ForestGreen
Replaces Selection100 with DigitalGreenLight
Replaces Banner_Fail_100_DarkUI_ with Banner_Fail_100_DarkUI
Adds DigitalGreenDark, PowerGreen, and Black22
Rename fillColorSelected to fillSelectedColor to match token naming schema.
Rename fill-selected-hover-color to fill-hover-selected-color to match token naming schema.
👩‍💻 Implementation

Followed CONTRIBUTING docs to import new icon.
Used XD plugin to import latest Nimble_Components doc

🧪 Testing

Local builds and Storybook review

✅ Checklist

 I have updated the project documentation to reflect my changes or determined no changes are needed.

change/@ni-nimble-components-2fdd0ccc-2fe4-4921-a6c9-d99af5c06cc5.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "Renamed fillHoverSelectedColor & fillSelectedColor tokens.",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-tokens-e02db61c-901f-4829-933a-7375ff6b6806.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "New `forward-slash` icon. Updated color tokens - `Enterprise` is now `ForestGreen`, `Selection100` is now `DigitalGreenLight`, `Banner_Fail_100_DarkUI_` is now `Banner_Fail_100_DarkUI`. Also adds `DigitalGreenDark`, `PowerGreen`, and `Black22`.",
+  "packageName": "@ni/nimble-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/button/styles.ts

@@ -5,7 +5,7 @@ import {
     actionRgbPartialColor,
     borderHoverColor,
     borderWidth,
-    fillColorSelected,
+    fillSelectedColor,
     standardPadding
 } from '../theme-provider/design-tokens';
 import { styles as buttonStyles } from '../patterns/button/styles';
@@ -72,7 +72,7 @@ export const styles = buttonStyles
 
                 :host(.primary) .control:active {
                     background-clip: border-box;
-                    border-color: ${fillColorSelected};
+                    border-color: ${fillSelectedColor};
                     border-width: ${borderWidth};
                     box-shadow: none;
                     padding: 0 ${standardPadding};

packages/nimble-components/src/listbox-option/styles.ts

@@ -4,7 +4,7 @@ import { focusVisible } from '../utilities/style/focus';
 
 import {
     borderHoverColor,
-    fillColorSelected,
+    fillSelectedColor,
     fillHoverSelectedColor,
     fillHoverColor,
     bodyFont,
@@ -27,7 +27,7 @@ export const styles = css`
     :host(.selected) {
         box-shadow: none;
         outline: none;
-        background-color: ${fillColorSelected};
+        background-color: ${fillSelectedColor};
     }
 
     :host(:hover.selected) {
@@ -52,7 +52,7 @@ export const styles = css`
     :host(:active) {
         box-shadow: none;
         outline: none;
-        background-color: ${fillColorSelected};
+        background-color: ${fillSelectedColor};
     }
 
     :host([disabled]) {

packages/nimble-components/src/menu-item/styles.ts

@@ -4,7 +4,7 @@ import { focusVisible } from '../utilities/style/focus';
 
 import {
     controlHeight,
-    fillColorSelected,
+    fillSelectedColor,
     fillHoverColor,
     bodyFontColor,
     borderHoverColor,
@@ -42,7 +42,7 @@ export const styles = css`
         background: ${fillHoverColor};
     }
     :host(:active) {
-        background: ${fillColorSelected};
+        background: ${fillSelectedColor};
     }
     :host([disabled]) {
         color: ${bodyDisabledFontColor};

packages/nimble-components/src/patterns/button/styles.ts

@@ -10,7 +10,7 @@ import {
     buttonLabelFontColor,
     buttonLabelDisabledFontColor,
     controlHeight,
-    fillColorSelected,
+    fillSelectedColor,
     iconColor,
     smallDelay,
     standardPadding
@@ -144,8 +144,8 @@ export const styles = css`
                 }
 
                 .control:active {
-                    background-color: ${fillColorSelected};
-                    border-color: ${fillColorSelected};
+                    background-color: ${fillSelectedColor};
+                    border-color: ${fillSelectedColor};
                 }
 
                 .control[disabled] {
@@ -173,8 +173,8 @@ export const styles = css`
                 }
 
                 .control:active {
-                    background-color: ${fillColorSelected};
-                    border-color: ${fillColorSelected};
+                    background-color: ${fillSelectedColor};
+                    border-color: ${fillSelectedColor};
                 }
 
                 .control[disabled] {
@@ -202,8 +202,8 @@ export const styles = css`
                 }
 
                 .control:active {
-                    background-color: ${fillColorSelected};
-                    border-color: ${fillColorSelected};
+                    background-color: ${fillSelectedColor};
+                    border-color: ${fillSelectedColor};
                 }
 
                 .control[disabled] {

packages/nimble-components/src/theme-provider/design-token-comments.ts

@@ -8,7 +8,7 @@ export const comments: { readonly [key in TokenName]: string } = {
     applicationBackgroundColor: 'Primary background color for the application',
     headerBackgroundColor: 'Background color for application headers',
     sectionBackgroundColor: 'Background color for dialogs and menus',
-    fillColorSelected: 'Control fill color when a control is selected',
+    fillSelectedColor: 'Control fill color when a control is selected',
     fillSelectedRgbPartialColor:
         'DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets',
     fillHoverSelectedColor:

packages/nimble-components/src/theme-provider/design-token-names.ts

@@ -12,9 +12,9 @@ export const tokenNames: { readonly [key in TokenName]: string } = {
     applicationBackgroundColor: 'application-background-color',
     headerBackgroundColor: 'header-background-color',
     sectionBackgroundColor: 'section-background-color',
-    fillColorSelected: 'fill-color-selected',
+    fillSelectedColor: 'fill-selected-color',
     fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
-    fillHoverSelectedColor: 'fill-selected-hover-color',
+    fillHoverSelectedColor: 'fill-hover-selected-color',
     fillHoverColor: 'fill-hover-color',
     borderColor: 'border-color',
     borderRgbPartialColor: 'border-rgb-partial-color',

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

@@ -9,8 +9,8 @@ import {
     Black75,
     Black80,
     White,
-    Enterprise,
-    Selection100,
+    ForestGreen,
+    DigitalGreenLight,
     Fail100LightUi,
     SmallDelay,
     MediumDelay,
@@ -94,27 +94,27 @@ export const actionRgbPartialColor = DesignToken.create<string>(
 
 export const applicationBackgroundColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.applicationBackgroundColor)
-).withDefault((element: HTMLElement) => getColorForTheme(element, White, Black85, Enterprise));
+).withDefault((element: HTMLElement) => getColorForTheme(element, White, Black85, ForestGreen));
 
 export const headerBackgroundColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.headerBackgroundColor)
-).withDefault((element: HTMLElement) => getColorForTheme(element, Black7, Black80, Enterprise));
+).withDefault((element: HTMLElement) => getColorForTheme(element, Black7, Black80, ForestGreen));
 
 export const sectionBackgroundColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.sectionBackgroundColor)
-).withDefault((element: HTMLElement) => getColorForTheme(element, Black30, Black91, Enterprise));
+).withDefault((element: HTMLElement) => getColorForTheme(element, Black30, Black91, ForestGreen));
 
-export const fillColorSelected = DesignToken.create<string>(
-    styleNameFromTokenName(tokenNames.fillColorSelected)
-).withDefault((element: HTMLElement) => hexToRgbaCssColor(getFillColorSelectedForTheme(element), 0.3));
+export const fillSelectedColor = DesignToken.create<string>(
+    styleNameFromTokenName(tokenNames.fillSelectedColor)
+).withDefault((element: HTMLElement) => hexToRgbaCssColor(getfillSelectedColorForTheme(element), 0.3));
 
 export const fillSelectedRgbPartialColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)
-).withDefault((element: HTMLElement) => hexToRgbPartial(getFillColorSelectedForTheme(element)));
+).withDefault((element: HTMLElement) => hexToRgbPartial(getfillSelectedColorForTheme(element)));
 
 export const fillHoverSelectedColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.fillHoverSelectedColor)
-).withDefault((element: HTMLElement) => hexToRgbaCssColor(getFillColorSelectedForTheme(element), 0.15));
+).withDefault((element: HTMLElement) => hexToRgbaCssColor(getfillSelectedColorForTheme(element), 0.15));
 
 export const fillHoverColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.fillHoverColor)
@@ -142,7 +142,7 @@ export const passColor = DesignToken.create<string>(
 
 export const borderHoverColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.borderHoverColor)
-).withDefault((element: HTMLElement) => getColorForTheme(element, Selection100, Selection100, White));
+).withDefault((element: HTMLElement) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White));
 
 // Component Color Tokens
 export const iconColor = DesignToken.create<string>(
@@ -435,8 +435,13 @@ function getDefaultFontColorForTheme(element: HTMLElement): string {
     return getColorForTheme(element, Black91, Black15, White);
 }
 
-function getFillColorSelectedForTheme(element: HTMLElement): string {
-    return getColorForTheme(element, Selection100, Selection100, White);
+function getfillSelectedColorForTheme(element: HTMLElement): string {
+    return getColorForTheme(
+        element,
+        DigitalGreenLight,
+        DigitalGreenLight,
+        White
+    );
 }
 
 function getfillHoverColorForTheme(element: HTMLElement): string {

packages/nimble-components/src/toggle-button/styles.ts

@@ -1,32 +1,32 @@
 import { css } from '@microsoft/fast-element';
 import { focusVisible } from '../utilities/style/focus';
 
-import { fillColorSelected } from '../theme-provider/design-tokens';
+import { fillSelectedColor } from '../theme-provider/design-tokens';
 import { styles as buttonStyles } from '../patterns/button/styles';
 
 export const styles = css`
     ${buttonStyles}
 
     .control[aria-pressed='true'] {
-        background-color: ${fillColorSelected};
-        border-color: ${fillColorSelected};
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
     }
 
     .control[aria-pressed='true']:hover {
-        background-color: ${fillColorSelected};
+        background-color: ${fillSelectedColor};
     }
 
     .control[aria-pressed='true']${focusVisible} {
-        background-color: ${fillColorSelected};
+        background-color: ${fillSelectedColor};
     }
 
     .control[aria-pressed='true'][disabled] {
-        background-color: ${fillColorSelected};
-        border-color: ${fillColorSelected};
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
     }
 
     .control[aria-pressed='true'][disabled]:hover {
-        background-color: ${fillColorSelected};
-        border-color: ${fillColorSelected};
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
     }
 `;

packages/nimble-components/src/tree-item/styles.ts

@@ -9,7 +9,7 @@ import { focusVisible } from '../utilities/style/focus';
 import {
     bodyFontColor,
     borderHoverColor,
-    fillColorSelected,
+    fillSelectedColor,
     fillHoverColor,
     fillHoverSelectedColor,
     borderWidth,
@@ -64,7 +64,7 @@ export const styles: (
         }
 
         :host([selected]) .positioning-region {
-            background: ${fillColorSelected};
+            background: ${fillSelectedColor};
         }
 
         :host([selected]) .positioning-region:hover {