Undo styling change following integration

Author: fcollonval

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

@@ -9,6 +9,7 @@ import {
 } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
+  accentFillFocus,
   accentFillRest,
   bodyFont,
   controlCornerRadius,
@@ -105,7 +106,7 @@ export const menuItemStyles: FoundationElementTemplate<
     }
 
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
+      border-color: ${accentFillFocus};
       background: ${neutralFillStealthFocus};
       color: ${neutralForegroundRest};
     }

packages/components/src/radio/radio.styles.ts

@@ -146,9 +146,8 @@ export const radioStyles: FoundationElementTemplate<
     }
 
     :host([aria-checked="true"]:${focusVisible}:not([disabled])) .control {
-      box-shadow:
-        0 0 0 2px ${fillColor},
-        0 0 0 4px ${focusStrokeOuter};
+      outline-offset: 2px;
+      outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};
     }
 
     :host([disabled]) .label,

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

@@ -22,6 +22,7 @@ import {
   errorFillHover,
   errorFillRest,
   errorForegroundActive,
+  focusStrokeOuter,
   focusStrokeWidth,
   foregroundOnAccentActive,
   foregroundOnAccentHover,
@@ -357,7 +358,8 @@ export const HypertextStyles = css`
   }
 
   :host([appearance="hypertext"]) .control:${focusVisible} {
-    border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};
+    outline-color: transparent;
+    border-bottom: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
     margin-bottom: calc(calc(${strokeWidth} - ${focusStrokeWidth}) * 1px);
   }
 `.withBehaviors(

packages/components/src/tab/tab.styles.ts

@@ -9,9 +9,6 @@ import {
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   accentFillFocus,
-  accentForegroundActive,
-  accentForegroundHover,
-  accentForegroundRest,
   bodyFont,
   controlCornerRadius,
   designUnit,
@@ -78,19 +75,19 @@ export const tabStyles: FoundationElementTemplate<ElementStyles> = (
 
     :host([aria-selected='true']) {
       background: ${neutralFillRest};
-      color: ${accentForegroundRest};
+      color: ${neutralForegroundRest};
       fill: currentcolor;
     }
 
     :host([aria-selected='true']:hover) {
       background: ${neutralFillHover};
-      color: ${accentForegroundHover};
+      color: ${neutralForegroundRest};
       fill: currentcolor;
     }
 
     :host([aria-selected='true']:active) {
       background: ${neutralFillActive};
-      color: ${accentForegroundActive};
+      color: ${neutralForegroundRest};
       fill: currentcolor;
     }
 

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

@@ -12,14 +12,14 @@ import {
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { Swatch } from '../color/swatch.js';
 import {
+  accentFillFocus,
   accentForegroundRest,
   baseHeightMultiplier,
   bodyFont,
   controlCornerRadius,
   density,
   designUnit,
   disabledOpacity,
-  focusStrokeOuter,
   focusStrokeWidth,
   neutralFillActive,
   neutralFillHover,
@@ -140,8 +140,9 @@ export const treeItemStyles: FoundationElementTemplate<
     }
 
     :host(:${focusVisible}) .positioning-region {
-      border: ${focusStrokeOuter} calc(${strokeWidth} * 1px) solid;
-      border-radius: calc(${controlCornerRadius} * 1px);
+      border-color: ${accentFillFocus};
+      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
+        ${accentFillFocus} inset;
       color: ${neutralForegroundRest};
     }
 
@@ -151,6 +152,7 @@ export const treeItemStyles: FoundationElementTemplate<
       box-sizing: border-box;
       background: ${neutralFillStealthRest};
       border: transparent calc(${strokeWidth} * 1px) solid;
+      border-radius: calc(${controlCornerRadius} * 1px);
       height: calc((${heightNumber} + 1) * 1px);
     }
 
@@ -174,6 +176,7 @@ export const treeItemStyles: FoundationElementTemplate<
       align-items: center;
       white-space: nowrap;
       width: 100%;
+      min-width: 0;
       height: calc(${heightNumber} * 1px);
       margin-inline-start: calc(${designUnit} * 2px + 8px);
       font-size: ${typeRampBaseFontSize};
@@ -276,8 +279,8 @@ export const treeItemStyles: FoundationElementTemplate<
 
     :host([selected])::after {
       /* The background needs to be calculated based on the selected background state
-                for this control. We currently have no way of changing that, so setting to
-                accent-foreground-rest for the time being */
+         for this control. We currently have no way of changing that, so setting to
+         accent-foreground-rest for the time being */
       background: ${accentForegroundRest};
       border-radius: calc(${controlCornerRadius} * 1px);
       content: '';

packages/components/src/utilities/storybook/index.ts

@@ -41,6 +41,7 @@ export function getFaIcon(iconName: string, slotName: string | null): string {
  */
 export function withTheme(story: any, context: StoryContext): HTMLElement {
   const theme = new DesignSystemProvider();
+  theme.style.width = '100%';
   theme.accentColor = context.globals.accent ?? '#DA1A5F';
 
   const background = context.globals.backgrounds?.value ?? '#252526';
@@ -53,7 +54,7 @@ export function withTheme(story: any, context: StoryContext): HTMLElement {
     ? StandardLuminance.DarkMode
     : StandardLuminance.LightMode;
 
-  const children = story(context);
+  const children = story();
   if (typeof children === 'string') {
     theme.insertAdjacentHTML('afterbegin', children);
   } else {