wcag/contrast: split off some of antd-theme and adjust links color

Author: novoselt

src/packages/frontend/app/antd-base-theme.ts

@@ -0,0 +1,17 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import type { ThemeConfig } from "antd";
+
+import { COLORS } from "@cocalc/util/theme";
+
+export function getBaseAntdTheme(): ThemeConfig {
+  return {
+    token: {
+      colorLink: COLORS.BLUE_D,
+      colorTextDescription: COLORS.GRAY_DD,
+    },
+  };
+}

src/packages/frontend/app/context.tsx

@@ -12,6 +12,7 @@ import { useTypedRedux } from "@cocalc/frontend/app-framework";
 import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
 import { ACTIVITY_BAR_LABELS } from "@cocalc/frontend/project/page/activity-bar-consts";
 import { COLORS } from "@cocalc/util/theme";
+import { getBaseAntdTheme } from "./antd-base-theme";
 import { NARROW_THRESHOLD_PX, PageStyle } from "./top-nav-consts";
 import useAppContext, { AppContext, AppState, calcStyle } from "./use-context";
 
@@ -79,6 +80,7 @@ export function useAppContextProvider(): AppState {
 
 export function useAntdStyleProvider() {
   const other_settings = useTypedRedux("account", "other_settings");
+  const baseTheme = getBaseAntdTheme();
   const rounded = other_settings?.get("antd_rounded", true);
   const animate = other_settings?.get("antd_animate", true);
   const branded = other_settings?.get("antd_brandcolors", false);
@@ -96,12 +98,11 @@ export function useAntdStyleProvider() {
 
   const algorithm = compact ? { algorithm: theme.compactAlgorithm } : undefined;
 
-  const textColors = { colorTextDescription: COLORS.GRAY_DD };
-
   const antdTheme: ThemeConfig = {
+    ...baseTheme,
     ...algorithm,
     token: {
-      ...textColors,
+      ...(baseTheme.token ?? {}),
       ...brandedColors,
       ...borderStyle,
       ...animationStyle,

src/packages/next/pages/_app.tsx

@@ -10,6 +10,7 @@
 import "antd/dist/reset.css";
 import "@ant-design/v5-patch-for-react-19";
 
+import { ConfigProvider } from "antd";
 import { Locale } from "locales/misc";
 
 // Initialize the appBasePath for the frontend codebase.
@@ -20,6 +21,7 @@ import "@cocalc/cdn/dist/codemirror/lib/codemirror.css";
 import "@cocalc/cdn/dist/katex/katex.min.css";
 import "@cocalc/frontend/editors/slate/elements/elements.css";
 import { AppContext, DEFAULT_CONTEXT } from "@cocalc/frontend/app/use-context";
+import { getBaseAntdTheme } from "@cocalc/frontend/app/antd-base-theme";
 
 // The IntlProvider makes translated components from the frontend work.
 // It's english only, using the fallback defaultMessage.
@@ -35,16 +37,19 @@ function MyApp({
   pageProps,
 }: // router,
 AppProps & { locale: Locale }) {
+  const antdTheme = getBaseAntdTheme();
   return (
     <AppContext.Provider value={{ ...DEFAULT_CONTEXT }}>
-      <IntlProvider
-        locale={DEFAULT_LOCALE}
-        messages={{}}
-        defaultLocale={DEFAULT_LOCALE}
-        defaultRichTextElements={LOCALIZE_DEFAULT_ELEMENTS}
-      >
-        <Component {...pageProps} />
-      </IntlProvider>
+      <ConfigProvider theme={antdTheme}>
+        <IntlProvider
+          locale={DEFAULT_LOCALE}
+          messages={{}}
+          defaultLocale={DEFAULT_LOCALE}
+          defaultRichTextElements={LOCALIZE_DEFAULT_ELEMENTS}
+        >
+          <Component {...pageProps} />
+        </IntlProvider>
+      </ConfigProvider>
     </AppContext.Provider>
   );
 }