Some more work on white labelling

Author: garronej

src/mui/mui.tsx

@@ -4,10 +4,11 @@
 import React, { useMemo, useEffect, type ReactNode } from "react";
 import * as mui from "@mui/material/styles";
 import { fr } from "../fr";
+import type { FrCoreClassName } from "../fr/generatedFromCss/classNames";
 import { useIsDark } from "../useIsDark";
 import { typography } from "../fr/generatedFromCss/typography";
 import { spacingTokenByValue } from "../fr/generatedFromCss/spacing";
-import { assert } from "tsafe/assert";
+import { assert, type Equals } from "tsafe/assert";
 import { objectKeys } from "tsafe/objectKeys";
 import { id } from "tsafe/id";
 import { useBreakpointsValuesPx, type BreakpointsValues } from "../useBreakpointsValuesPx";
@@ -571,11 +572,18 @@ export function createDsfrCustomBrandingProvider(params: {
                             [`.${fr.cx("fr-footer__bottom-copy")}`]: {
                                 display: "none"
                             },
-                            [`.${fr.cx("fr-btn")}`]: {
+                            [getPrimaryButtonClassSelector()]: {
                                 "--hover-tint": theme.palette.primary.dark,
                                 "--active-tint": mui.darken(theme.palette.primary.main, 0.24),
-                                "&:hover, &:active": {
-                                    color: theme.palette.primary.contrastText
+                                color: theme.palette.primary.contrastText
+                            },
+                            [`.${fr.cx("fr-header__tools-links")}`]: {
+                                [`&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .${fr.cx("fr-btn")}`]: {
+                                    color: theme.palette.primary.main,
+                                    "--hover-tint":
+                                        fr.colors.decisions.background.raised.grey.hover,
+                                    "--active-tint":
+                                        fr.colors.decisions.background.raised.grey.active
                                 }
                             },
                             [`.${fr.cx("fr-input")}, .${fr.cx("fr-select")}`]: {
@@ -596,3 +604,57 @@ export function createDsfrCustomBrandingProvider(params: {
 
     return { DsfrCustomBrandingProvider };
 }
+
+function getPrimaryButtonClassSelector() {
+    type BtnClassNames = Extract<FrCoreClassName, `fr-btn--${string}`>;
+
+    type BtnVariant = BtnClassNames extends `fr-btn--${infer Variant}` ? Variant : never;
+
+    type BtnVariantWithoutPosition = Exclude<
+        BtnVariant,
+        "align-on-content" | "icon-left" | "icon-right" | "sm" | "lg"
+    >;
+
+    const btnVariants = [
+        "close",
+        "tooltip",
+        "fullscreen",
+        "display",
+        "account",
+        "team",
+        "briefcase",
+        "sort",
+        "secondary",
+        "tertiary",
+        "tertiary-no-outline",
+        "facebook",
+        "linkedin",
+        "mastodon",
+        "threads",
+        "twitter",
+        "twitter-x",
+        "mail",
+        "copy",
+        "dailymotion",
+        "github",
+        "instagram",
+        "snapchat",
+        "telegram",
+        "tiktok",
+        "twitch",
+        "vimeo",
+        "youtube",
+        "menu",
+        "search"
+    ] as const;
+
+    assert<Equals<BtnVariantWithoutPosition, typeof btnVariants[number]>>();
+
+    let selector = `.${fr.cx("fr-btn")}`;
+
+    for (const btnVariant of btnVariants) {
+        selector += `:not(.${fr.cx(`fr-btn--${btnVariant}`)})`;
+    }
+
+    return selector;
+}