Expose colors as CSS variables

garronej · garronej · commit 83fc0e2e0f9d · 2023-08-12T02:00:34.000+02:00
diff --git a/scripts/build/cssToTs/colorDecisions.ts b/scripts/build/cssToTs/colorDecisions.ts
@@ -253,9 +253,9 @@ export function generateGetColorDecisionsTsCode(rawCssCode: string): string {
     });
 
     return [
-        `export function getColorDecisions(`,
+        `export function getColorDecisions<Format extends "css var" | "hex">(`,
         `    params: {`,
-        `        colorOptions: ColorOptions;`,
+        `        colorOptions: ColorOptions<Format>;`,
         `    }`,
         `) {`,
         ``,
diff --git a/scripts/build/cssToTs/colorOptions.ts b/scripts/build/cssToTs/colorOptions.ts
@@ -381,7 +381,7 @@ export const parseColorOptions = memoize((rawCssCode: string): ColorOption[] =>
         .filter(exclude(undefined));
 });
 
-export function generateGetColorOptionsTsCode(rawCssCode: string) {
+export function generateGetColorOptionsHexTsCode(rawCssCode: string) {
     const colorOptions = parseColorOptions(rawCssCode);
 
     const obj: any = {};
@@ -425,7 +425,7 @@ export function generateGetColorOptionsTsCode(rawCssCode: string) {
     });
 
     return [
-        `export function getColorOptions(`,
+        `export function getColorOptionsHex(`,
         `    params: {`,
         `        isDark: boolean;`,
         `    }`,
@@ -449,6 +449,46 @@ export function generateGetColorOptionsTsCode(rawCssCode: string) {
     ].join("\n");
 }
 
+export function generateColorOptionsTsCode(rawCssCode: string) {
+    const colorOptions = parseColorOptions(rawCssCode);
+
+    const obj: any = {};
+
+    colorOptions.forEach(colorOption => {
+        const value = `var(${colorOption.colorOptionName})`;
+
+        function req(obj: any, path: readonly string[]): void {
+            const [propertyName, ...pathRest] = path;
+
+            if (pathRest.length === 0) {
+                obj[propertyName] = value;
+                return;
+            }
+
+            if (obj[propertyName] === undefined) {
+                obj[propertyName] = {};
+            }
+
+            req(obj[propertyName], pathRest);
+        }
+
+        req(obj, colorOption.themePath);
+    });
+
+    return [
+        ``,
+        `export const colorOptions= {`,
+        JSON.stringify(obj, null, 2)
+            .replace(/^{\n/, "")
+            .replace(/\n}$/, "")
+            .split("\n")
+            .map(line => line.replace(/^[ ]{2}/, ""))
+            .map(line => `    ${line}`)
+            .join("\n"),
+        `} as const;`
+    ].join("\n");
+}
+
 function toConsistentColor(color: string) {
     if (!color.startsWith("#")) {
         return color;
diff --git a/scripts/build/cssToTs/cssToTs.ts b/scripts/build/cssToTs/cssToTs.ts
@@ -1,6 +1,6 @@
 import { generateBreakpointsTsCode } from "./breakpoints";
 import { generateGetColorDecisionsTsCode } from "./colorDecisions";
-import { generateGetColorOptionsTsCode } from "./colorOptions";
+import { generateGetColorOptionsHexTsCode, generateColorOptionsTsCode } from "./colorOptions";
 import { getProjectRoot } from "../../../src/bin/tools/getProjectRoot";
 import { generateTypographyTsCode } from "./typography";
 import { generateSpacingTsCode } from "./spacing";
@@ -26,17 +26,32 @@ export function cssToTs(params: {
         )}, please don't edit.`
     ].join("\n");
 
-    const targetOptionFilePath = pathJoin(generatedDirPath, "getColorOptions.ts");
+    const targetGetColorOptionsHexFilePath = pathJoin(generatedDirPath, "getColorOptionsHex.ts");
 
     fs.writeFileSync(
-        targetOptionFilePath,
+        targetGetColorOptionsHexFilePath,
+        Buffer.from(
+            [warningMessage, ``, generateGetColorOptionsHexTsCode(rawDsfrCssCode), ``].join("\n"),
+            "utf8"
+        )
+    );
+
+    const targetColorOptionsFilePath = pathJoin(generatedDirPath, "colorOptions.ts");
+
+    fs.writeFileSync(
+        targetColorOptionsFilePath,
         Buffer.from(
             [
                 warningMessage,
                 ``,
-                generateGetColorOptionsTsCode(rawDsfrCssCode),
+                `import type { getColorOptionsHex } from "./${pathBasename(
+                    targetGetColorOptionsHexFilePath
+                ).replace(/\.ts$/, "")}";`,
                 ``,
-                `export type ColorOptions = ReturnType<typeof getColorOptions>;`,
+                generateColorOptionsTsCode(rawDsfrCssCode),
+                ``,
+                `export type ColorOptions<Format extends "css var" | "hex"= "css var"> = `,
+                `  Format extends "css var" ? typeof colorOptions : ReturnType<typeof getColorOptionsHex>;`,
                 ``
             ].join("\n"),
             "utf8"
@@ -48,14 +63,37 @@ export function cssToTs(params: {
         Buffer.from(
             [
                 warningMessage,
-                `import type { ColorOptions } from "./${pathBasename(targetOptionFilePath).replace(
-                    /\.ts$/,
-                    ""
-                )}";`,
+                `import type { ColorOptions } from "./${pathBasename(
+                    targetColorOptionsFilePath
+                ).replace(/\.ts$/, "")}";`,
+                ``,
+                generateGetColorDecisionsTsCode(rawDsfrCssCode).replace(
+                    "export function getColorDecisions",
+                    "function getColorDecisions_noReturnType"
+                ),
+                ``,
+                `type IsHex<T> = T extends \`#\${string}\` ? T : never;`,
+                ``,
+                `type OnlyHex<T> = {`,
+                `    [K in keyof T]: T[K] extends string ? IsHex<T[K]> : OnlyHex<T[K]>`,
+                `};`,
+                ``,
+                `type IsCssVar<T> = T extends \`var(--\${string})\` ? T : never;`,
+                `type OnlyCssVar<T> = {`,
+                `    [K in keyof T]: T[K] extends string ? IsCssVar<T[K]> : OnlyCssVar<T[K]>`,
+                `};`,
+                ``,
+                `export type ColorDecisions<Format extends "css var" | "hex" = "css var"> =`,
+                `    Format extends "css var" ? OnlyCssVar<ReturnType<typeof getColorDecisions_noReturnType>> :`,
+                `    OnlyHex<ReturnType<typeof getColorDecisions_noReturnType>>;`,
                 ``,
-                generateGetColorDecisionsTsCode(rawDsfrCssCode),
+                `export function getColorDecisions<Format extends "css var" | "hex">(params: {`,
+                `    colorOptions: ColorOptions<Format>;`,
                 ``,
-                `export type ColorDecisions = ReturnType<typeof getColorDecisions>;`,
+                `}): ColorDecisions<Format> {`,
+                `    // ${"@"}ts-expect-error: We are intentionally sacrificing internal type safety for a more accurate type annotation.`,
+                `    return getColorDecisions_noReturnType(params);`,
+                `}`,
                 ``
             ].join("\n"),
             "utf8"
diff --git a/src/fr/colors.ts b/src/fr/colors.ts
@@ -1,24 +1,38 @@
-import { getColorOptions } from "./generatedFromCss/getColorOptions";
-import type { ColorOptions } from "./generatedFromCss/getColorOptions";
-import { getColorDecisions } from "./generatedFromCss/getColorDecisions";
-import type { ColorDecisions } from "./generatedFromCss/getColorDecisions";
-import { memoize } from "../tools/memoize";
+import { colorOptions, type ColorOptions } from "./generatedFromCss/colorOptions";
+import { getColorOptionsHex } from "./generatedFromCss/getColorOptionsHex";
+import { getColorDecisions, type ColorDecisions } from "./generatedFromCss/getColorDecisions";
 
-export type ColorTheme = {
-    isDark: boolean;
-    decisions: ColorDecisions;
-    options: ColorOptions;
+export type Colors = {
+    options: ColorOptions<"css var">;
+    decisions: ColorDecisions<"css var">;
+    getHex: (params: { isDark: boolean }) => {
+        isDark: boolean;
+        options: ColorOptions<"hex">;
+        decisions: ColorDecisions<"hex">;
+    };
 };
 
-export const getColors = memoize(
-    (isDark: boolean): ColorTheme => {
-        const options = getColorOptions({ isDark });
+export const colors: Colors = {
+    "options": colorOptions,
+    "decisions": getColorDecisions({ colorOptions }),
+    "getHex": (() => {
+        const getHex: Colors["getHex"] = ({ isDark }) => {
+            const options = getColorOptionsHex({ isDark });
 
-        return {
-            isDark,
-            options,
-            "decisions": getColorDecisions({ "colorOptions": options })
+            const decisions = getColorDecisions({ colorOptions });
+
+            return {
+                isDark,
+                options,
+                decisions
+            };
+        };
+
+        const cache: Record<"light" | "dark", ReturnType<Colors["getHex"]> | undefined> = {
+            "light": undefined,
+            "dark": undefined
         };
-    },
-    { "max": 1 }
-);
+
+        return ({ isDark }) => (cache[isDark ? "dark" : "light"] ??= getHex({ isDark }));
+    })()
+};
diff --git a/src/fr/index.ts b/src/fr/index.ts
@@ -5,15 +5,17 @@ import { spacing } from "./spacing";
 export type { SpacingToken } from "./spacing";
 import { cx } from "./cx";
 export type { FrCxArg } from "./cx";
-export type { ColorTheme } from "./colors";
-import { getColors } from "./colors";
+export type { Colors } from "./colors";
+export type { ColorOptions } from "./generatedFromCss/colorOptions";
+export type { ColorDecisions } from "./generatedFromCss/getColorDecisions";
+import { colors } from "./colors";
 export type { FrClassName, FrIconClassName, RiIconClassName } from "./generatedFromCss/classNames";
 import { typography } from "./generatedFromCss/typography";
 
 export const fr = {
     breakpoints,
     spacing,
     cx,
-    getColors,
+    colors,
     typography
 };
diff --git a/src/mui.tsx b/src/mui.tsx
@@ -5,8 +5,7 @@ import React, { useMemo, type ReactNode } from "react";
 import type { Theme as MuiTheme, ThemeOptions } from "@mui/material/styles";
 import { createTheme, ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import type { Shadows } from "@mui/material/styles";
-import { getColors } from "./fr/colors";
-import type { ColorTheme } from "./fr/colors";
+import { fr } from "./fr";
 import { useIsDark } from "./useIsDark";
 import { typography } from "./fr/generatedFromCss/typography";
 import { spacingTokenByValue } from "./fr/generatedFromCss/spacing";
@@ -21,7 +20,7 @@ export function getMuiDsfrThemeOptions(params: {
 }): ThemeOptions {
     const { isDark, breakpointsValues } = params;
 
-    const { options, decisions } = getColors(isDark);
+    const { options, decisions } = fr.colors.getHex({ isDark });
 
     return {
         "shape": {
@@ -179,7 +178,8 @@ export function getMuiDsfrThemeOptions(params: {
             "MuiStepIcon": {
                 "styleOverrides": {
                     "text": {
-                        "fill": getColors(true).decisions.text.title.grey.default
+                        "fill": fr.colors.getHex({ "isDark": true }).decisions.text.title.grey
+                            .default
                     }
                 }
             },
@@ -274,7 +274,7 @@ export function createMuiDsfrThemeProvider(params: {
          * That is to say before augmentation.
          **/
         nonAugmentedMuiTheme: MuiTheme;
-        frColorTheme: ColorTheme;
+        isDark: boolean;
     }) => MuiTheme;
 }) {
     const { augmentMuiTheme, useIsDark: useIsDark_props = useIsDark } = params;
@@ -297,8 +297,8 @@ export function createMuiDsfrThemeProvider(params: {
             return augmentMuiTheme === undefined
                 ? nonAugmentedMuiTheme
                 : augmentMuiTheme({
-                      "frColorTheme": getColors(isDark),
-                      nonAugmentedMuiTheme
+                      nonAugmentedMuiTheme,
+                      isDark
                   });
         }, [isDark]);
 
diff --git a/src/next-pagesdir.tsx b/src/next-pagesdir.tsx
@@ -15,7 +15,7 @@ import AppleTouchIcon from "./dsfr/favicon/apple-touch-icon.png";
 import FaviconSvg from "./dsfr/favicon/favicon.svg";
 import FaviconIco from "./dsfr/favicon/favicon.ico";
 import { getAssetUrl } from "./tools/getAssetUrl";
-import { getColors } from "./fr/colors";
+import { fr } from "./fr";
 import { start } from "./start";
 import type { RegisterLink, RegisteredLinkProps } from "./link";
 import { setLink } from "./link";
@@ -171,7 +171,8 @@ export function createNextDsfrIntegrationApi(
                                 <meta
                                     name="theme-color"
                                     content={
-                                        getColors(isDark).decisions.background.default.grey.default
+                                        fr.colors.getHex({ isDark }).decisions.background.default
+                                            .grey.default
                                     }
                                 />
                             </>
diff --git a/src/useColors.ts b/src/useColors.ts
@@ -1,13 +1,41 @@
 "use client";
 
 import { useIsDark } from "./useIsDark";
-import { getColors } from "./fr/colors";
-import type { ColorTheme } from "./fr/colors";
+import { fr } from "./fr";
 
-export type { ColorTheme };
-
-export function useColors(): ColorTheme {
+/** @deprecated: A hook is no longer required to get the colors.
+ *
+ *  Before you would do:
+ * ```ts
+ * import { useColors } from "@codegouvfr/react-dsfr/useColors";
+ * // ...
+ * const theme = useColors();
+ * // ...
+ * theme.decisions.background.default.grey.default
+ * ```
+ * Now you should do:
+ * ```ts
+ * import { fr } from "@codegouvfr/react-dsfr";
+ * // ...
+ * fr.colors.decisions.background.default.grey.default
+ * ```
+ * We don't need a hook anymore as the the colors are expressed as CSS variables and thus don't need to be
+ * switched at runtime when the user changes the dark mode.
+ *
+ * If however you need the colors in the HEX format you can do:
+ *
+ * ```ts
+ * import { fr } from "@codegouvfr/react-dsfr";
+ * import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
+ * // ...
+ * const { isDark } = useIsDark();
+ * const theme = fr.colors.getHex({ isDark });
+ * // ...
+ * theme.decisions.background.default.grey.default
+ * ```
+ **/
+export function useColors() {
     const { isDark } = useIsDark();
 
-    return getColors(isDark);
+    return fr.colors.getHex({ isDark });
 }
diff --git a/src/useIsDark/client.ts b/src/useIsDark/client.ts
@@ -1,7 +1,7 @@
 import { assert } from "tsafe/assert";
 import { createStatefulObservable, useRerenderOnChange } from "../tools/StatefulObservable";
 import { useConstCallback } from "../tools/powerhooks/useConstCallback";
-import { getColors } from "../fr/colors";
+import { fr } from "../fr";
 import { data_fr_scheme, data_fr_theme, rootColorSchemeStyleTagId } from "./constants";
 
 export type ColorScheme = "light" | "dark";
@@ -248,7 +248,9 @@ export function startClientSideIsDarkLogic(params: {
 
             element.name = name;
 
-            element.content = getColors(isDark).decisions.background.default.grey.default;
+            element.content = fr.colors.getHex({
+                isDark
+            }).decisions.background.default.grey.default;
 
             document.head.appendChild(element);
         };
diff --git a/src/useIsDark/scriptToRunAsap.ts b/src/useIsDark/scriptToRunAsap.ts
@@ -1,6 +1,6 @@
 import type { ColorScheme } from "./client";
 import { data_fr_scheme, data_fr_theme, rootColorSchemeStyleTagId } from "./constants";
-import { getColors } from "../fr/colors";
+import { fr } from "../fr";
 
 export const getScriptToRunAsap = (defaultColorScheme: ColorScheme | "system") => `
 {
@@ -93,8 +93,8 @@ export const getScriptToRunAsap = (defaultColorScheme: ColorScheme | "system") =
         element.name = name;
 
         element.content = isDark ? "${
-            getColors(true).decisions.background.default.grey.default
-        }" : "${getColors(false).decisions.background.default.grey.default}";
+            fr.colors.getHex({ "isDark": true }).decisions.background.default.grey.default
+        }" : "${fr.colors.getHex({ "isDark": false }).decisions.background.default.grey.default}";
 
         document.head.appendChild(element);
 
