Fix a couple issues with anchor styling

change/@ni-nimble-components-c92408f2-14ec-4254-9aac-0babfa7fbbd1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix a couple issues with anchor styling",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -2,102 +2,93 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
 import {
-    linkActiveDisabledFontColor,
     linkActiveFontColor,
     linkActiveProminentFontColor,
     linkDisabledFontColor,
     linkFont,
     linkFontColor,
-    linkProminentDisabledFontColor,
     linkProminentFontColor
 } from '../theme-provider/design-tokens';
 
 export const styles = css`
-    ${display('inline')}
+    @layer base, hover, focusVisible, active, disabled;
 
-    :host {
-        box-sizing: border-box;
-        font: ${linkFont};
-    }
-
-    .top-container {
-        display: contents;
-    }
-
-    [part='start'] {
-        display: none;
-    }
-
-    .control {
-        color: ${linkFontColor};
-        text-decoration: underline;
-    }
-
-    .control${focusVisible} {
-        display: inline;
-        outline: none;
-        box-shadow: inset 0px -1px ${linkFontColor};
-    }
-
-    .control:active {
-        color: ${linkActiveFontColor};
-        text-decoration: underline;
-    }
+    @layer base {
+        ${display('inline')}
 
-    .control${focusVisible}:active {
-        box-shadow: inset 0px -1px ${linkActiveFontColor};
-    }
+        :host {
+            box-sizing: border-box;
+            font: ${linkFont};
+        }
 
-    .control:not(:any-link) {
-        color: ${linkDisabledFontColor};
-        text-decoration: none;
-    }
+        .top-container {
+            display: contents;
+        }
 
-    .control:not(:any-link):active {
-        color: ${linkActiveDisabledFontColor};
-    }
+        [part='start'] {
+            display: none;
+        }
 
-    :host([underline-hidden]) .control {
-        text-decoration: none;
-    }
+        .control {
+            color: ${linkFontColor};
+            text-decoration: underline;
+        }
 
-    :host([underline-hidden]) .control:hover {
-        text-decoration: underline;
-    }
+        :host([underline-hidden]) .control {
+            text-decoration: none;
+        }
 
-    :host([underline-hidden]) .control${focusVisible} {
-        text-decoration: underline;
-    }
+        :host([appearance='prominent']) .control {
+            color: ${linkProminentFontColor};
+        }
 
-    :host([underline-hidden]) .control:not(:any-link) {
-        text-decoration: none;
-    }
+        .content {
+            pointer-events: none;
+        }
 
-    :host([appearance='prominent']) .control {
-        color: ${linkProminentFontColor};
+        [part='end'] {
+            display: none;
+        }
     }
 
-    :host([appearance='prominent']) .control:active {
-        color: ${linkActiveProminentFontColor};
+    @layer hover {
+        .control:any-link:hover {
+            text-decoration: underline;
+        }
     }
 
-    :host([appearance='prominent']) .control${focusVisible} {
-        box-shadow: inset 0px -1px ${linkProminentFontColor};
+    @layer focusVisible {
+        .control${focusVisible} {
+            outline: none;
+            box-shadow: inset 0px -1px;
+            text-decoration: underline;
+        }
     }
 
-    :host([appearance='prominent']) .control${focusVisible}:active {
-        box-shadow: inset 0px -1px ${linkActiveProminentFontColor};
-    }
+    @layer active {
+        .control:active {
+            color: ${linkActiveFontColor};
+            text-decoration: underline;
+            box-shadow: none;
+        }
 
-    :host([appearance='prominent']) .control:not(:any-link) {
-        color: ${linkProminentDisabledFontColor};
-    }
+        :host([appearance='prominent']) .control:active {
+            color: ${linkActiveProminentFontColor};
+        }
 
-    .content {
-        pointer-events: none;
+        ${
+            '' /* It's probably cleaner to add :not(active) to the selector in the 'active' layer (rather
+                than resetting text-decoration back to the value from the 'default' layer), but
+                there's a bug in storybook-addon-pseudo-states where it doesn't handle :not() properly. */
+        }
+        :host([underline-hidden]) .control:active {
+            text-decoration: none;
+        }
     }
 
-    [part='end'] {
-        display: none;
+    @layer disabled {
+        .control:not(:any-link) {
+            color: ${linkDisabledFontColor};
+        }
     }
 `;

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

@@ -588,7 +588,7 @@ export const [
         element,
         DigitalGreenLight,
         DigitalGreenLight,
-        PowerGreen
+        hexToRgbaCssColor(White, 0.6)
     ),
     (element: HTMLElement) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3),
     LinkLightUiFamily,