Fix tab subtle background (#22346)

* Set subtle tab background to subtle background tokens * yarn change
microsoft · Apr 8, 2022 · 69bcdf2 · 69bcdf2
1 parent 5e54cca
commit 69bcdf2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/change/@fluentui-react-tabs-c4411795-459a-4614-bbb0-128211b1e806.json b/change/@fluentui-react-tabs-c4411795-459a-4614-bbb0-128211b1e806.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Set subtle tab background to subtle background tokens",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-tabs/src/components/Tab/useTabStyles.ts
@@ -88,8 +88,12 @@ const useRootStyles = makeStyles({
     },
   },
   subtle: {
+    backgroundColor: tokens.colorSubtleBackground,
     ':hover': {
-      backgroundColor: tokens.colorNeutralBackground1Hover,
+      backgroundColor: tokens.colorSubtleBackgroundHover,
+    },
+    ':active': {
+      backgroundColor: tokens.colorTransparentBackgroundPressed,
     },
   },
   disabled: {