feat(variant-theme): keep custom colors (#261)

microsoft · Nov 21, 2024 · 369d425 · 369d425
1 parent 70b19d2
commit 369d425
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/change/@fluentui-contrib-variant-theme-30b11b3b-d257-4605-a5e0-3b645353268b.json b/change/@fluentui-contrib-variant-theme-30b11b3b-d257-4605-a5e0-3b645353268b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "keep custom colors",
+  "packageName": "@fluentui-contrib/variant-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/variant-theme/src/ThemeGenerator.ts b/packages/variant-theme/src/ThemeGenerator.ts
@@ -209,15 +209,17 @@ function getStrongVariant(
   brand: BrandVariants,
   isInverted?: boolean
 ) {
+  const newBrandColor = theme.colorNeutralBackground1;
+
   // Todo: dark mode support
   setNeutralWithBrand(theme, brand);
-  const colorOnBrand: string = determineColorOnBrand(
-    theme.colorNeutralBackground1
-  );
-  const alphas: Record<AlphaColors, string> =
-    colorOnBrand === black ? blackAlpha : whiteAlpha;
 
-  setColorsOnBrand(theme, brand, colorOnBrand, alphas, isInverted);
+  const alphas: Record<AlphaColors, string> =
+    contrast(hex_to_sRGB(newBrandColor), hex_to_sRGB(black)) >
+    contrast(hex_to_sRGB(newBrandColor), hex_to_sRGB(white))
+      ? whiteAlpha
+      : blackAlpha;
+  setColorsOnBrand(theme, brand, newBrandColor, alphas, isInverted);
 }
 
 function setNeutralWithBrand(theme: Theme, brand: BrandVariants) {