Adjusting Azure Colors to address DetailsList, Spinner, and Link

change/@fluentui-azure-themes-21a90d0f-e722-463d-9a71-88ef4773c3b8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updating azure colors in lighttheme to maintain detailslist focus row bug fix and introduce spinner bug fix, resulting from accent color vs focus color ",
+  "packageName": "@fluentui/azure-themes",
+  "email": "30805892+Jacqueline-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/azure-themes/src/azure/AzureColors.ts

@@ -904,8 +904,8 @@ export const LightSemanticColors: IAzureSemanticColors = {
     background: BaseColors.WHITE,
     disabled: BaseColors.GRAY_F3F2F1,
     hover: BaseColors.GRAY_605E5C,
-    accent: BaseColors.GRAY_605E5C,
-    focus: BaseColors.BLUE_0078D4,
+    accent: BaseColors.BLUE_0078D4,
+    focus: BaseColors.GRAY_605E5C,
     error: BaseColors.RED_A4262C,
     dirty: BaseColors.PURPLE_8A2DA5,
   },

packages/azure-themes/src/azure/AzureThemeLight.ts

@@ -76,7 +76,7 @@ const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   dropdownTextHovered: LightSemanticColors.dropDown.text.hovered,
   errorBackground: LightSemanticColors.controlOutlines.error,
   errorText: LightSemanticColors.text.error,
-  focusBorder: LightSemanticColors.controlOutlines.accent,
+  focusBorder: LightSemanticColors.controlOutlines.focus,
   inputBackground: LightSemanticColors.background,
   inputBorder: LightSemanticColors.secondaryButton.rest.border,
   inputBorderHovered: LightSemanticColors.controlOutlines.hover,

packages/azure-themes/src/azure/styles/Link.styles.ts

@@ -18,6 +18,9 @@ export const LinkStyles = (props: ILinkStyleProps): Partial<ILinkStyles> => {
           '&:active': {
             color: semanticColors.linkHovered,
           },
+          '&:focus': {
+            outline: '0 !important',
+          },
         },
       },
     ],

packages/azure-themes/src/azure/styles/Toggle.styles.ts

@@ -24,7 +24,7 @@ export const ToggleStyles = (props: IToggleStyleProps): Partial<IToggleStyles> =
       },
       checked && [
         {
-          backgroundColor: extendedSemanticColors.controlFocus,
+          backgroundColor: extendedSemanticColors.controlAccent,
           selectors: {
             '&:hover': {
               backgroundColor: extendedSemanticColors.radioButtonPillCheckedHover,

packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx

@@ -35,6 +35,7 @@ import { SpinButtonBasicExample } from '../components/SpinButton.stories';
 import { DatePickerBasicExample } from '../components/defaultDatePicker';
 import { ProgressIndicatorBasicExample } from '../components/ProgressIndicator.stories';
 import { CalendarInlineMultidayDayViewExample } from '../components/CalendarInlineMultidayDayView.stories';
+import { SpinnerBasicExample } from '../components/spinner.stories';
 
 const Example = () => (
   <Stack gap={8} horizontalAlign="center" style={{ maxWidth: 1000 }}>
@@ -140,6 +141,9 @@ const Example = () => (
       <Link>Hello I am a link, hover underline</Link>
     </Stack>
 
+    <Link>Loader / Spinner</Link>
+    <SpinnerBasicExample />
+
     <Stack gap={8} horizontalAlign="center" style={{ marginTop: 40 }}>
       <Label>ComboBox</Label>
       <ComboBoxBasicExample />

packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
+import { Label } from '@fluentui/react/lib/Label';
+import { IStackProps, Stack } from '@fluentui/react/lib/Stack';
+
+export const SpinnerBasicExample: React.FunctionComponent = () => {
+  // This is just for laying out the label and spinner (spinners don't have to be inside a Stack)
+  const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' };
+
+  const tokens = {
+    sectionStack: {
+      childrenGap: 10,
+    },
+    spinnerStack: {
+      childrenGap: 20,
+    },
+  };
+
+  return (
+    <Stack tokens={tokens.sectionStack}>
+      <Stack {...rowProps} tokens={tokens.spinnerStack}>
+        <Label>Extra small spinner</Label>
+        <Spinner size={SpinnerSize.xSmall} />
+      </Stack>
+
+      <Stack {...rowProps} tokens={tokens.spinnerStack}>
+        <Label>Small spinner</Label>
+        <Spinner size={SpinnerSize.small} />
+      </Stack>
+
+      <Stack {...rowProps} tokens={tokens.spinnerStack}>
+        <Label>Medium spinner</Label>
+        <Spinner size={SpinnerSize.medium} />
+      </Stack>
+
+      <Stack {...rowProps} tokens={tokens.spinnerStack}>
+        <Label>Large spinner</Label>
+        <Spinner size={SpinnerSize.large} />
+      </Stack>
+    </Stack>
+  );
+};