From 2cb326e49418b7c4dac6216a76bcf5bab2a18418 Mon Sep 17 00:00:00 2001
From: Arne Vogt <a.vogt@52north.org>
Date: Fri, 1 Sep 2023 10:54:56 +0200
Subject: [PATCH] adjust base theme

---
 src/packages/chakra-integration/Provider.tsx     |  7 +++++--
 src/packages/chakra-integration/theme/theme.ts   | 16 ++++++++++++++++
 .../chakra-sample/chakra-app/SampleUI.tsx        |  4 ++--
 .../chakra-sample/chakra-app/theme/theme.ts      |  6 +-----
 4 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 src/packages/chakra-integration/theme/theme.ts

diff --git a/src/packages/chakra-integration/Provider.tsx b/src/packages/chakra-integration/Provider.tsx
index 0e1944d5..110ca389 100644
--- a/src/packages/chakra-integration/Provider.tsx
+++ b/src/packages/chakra-integration/Provider.tsx
@@ -17,6 +17,7 @@ import createCache, { EmotionCache } from "@emotion/cache";
 import { CacheProvider, Global } from "@emotion/react";
 import { FC, PropsWithChildren, useEffect, useRef } from "react";
 import { PortalRootProvider } from "./PortalFix";
+import { theme as trailsDefaultTheme } from "./theme/theme";
 
 export type CustomChakraProviderProps = PropsWithChildren<{
     /**
@@ -148,8 +149,10 @@ export const CustomChakraProvider: FC<CustomChakraProviderProps> = ({
     const ColorMode = mode === "light" ? LightMode : DarkMode;
 
     //apply custom theme or Chakra UI default theme
-    let customTheme = theme ? extendTheme(theme) : baseTheme;
-    customTheme = extendTheme(rootStyles, customTheme);
+    let customTheme = extendTheme(trailsDefaultTheme, rootStyles, baseTheme); //always add trails defaults and root styles to chakra base theme
+    if (theme) {
+        customTheme = extendTheme(theme, customTheme); //merge with custom theme if provided
+    }
 
     return (
         <div className="chakra-host" ref={chakraHost}>
diff --git a/src/packages/chakra-integration/theme/theme.ts b/src/packages/chakra-integration/theme/theme.ts
new file mode 100644
index 00000000..c2e8df00
--- /dev/null
+++ b/src/packages/chakra-integration/theme/theme.ts
@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: con terra GmbH and contributors
+// SPDX-License-Identifier: Apache-2.0
+export const theme = {
+    components: {},
+    semanticTokens: {
+        colors: {
+            background_primary: "blue.300",
+            background_secondary: "blue.200",
+            font_primary: "gray.900",
+            font_secondary: "gray.50",
+            error: "red.500",
+            success: "green.500",
+            highlight: "yellow.300"
+        }
+    }
+};
diff --git a/src/samples/chakra-sample/chakra-app/SampleUI.tsx b/src/samples/chakra-sample/chakra-app/SampleUI.tsx
index ae9a3fda..52659697 100644
--- a/src/samples/chakra-sample/chakra-app/SampleUI.tsx
+++ b/src/samples/chakra-sample/chakra-app/SampleUI.tsx
@@ -68,7 +68,7 @@ export function SampleUI() {
 
 function LinkComponent() {
     return (
-        <Text>
+        <Text variant="error">
             This is a{" "}
             <Link href="https://chakra-ui.com" isExternal color="yellow.500">
                 link to Chakra&apos;s Design system
@@ -86,7 +86,7 @@ function ComponentStack() {
             spacing="24px"
             align="stretch"
         >
-            <Box>
+            <Box bg="error">
                 <PortalExample />
             </Box>
             <Box>
diff --git a/src/samples/chakra-sample/chakra-app/theme/theme.ts b/src/samples/chakra-sample/chakra-app/theme/theme.ts
index 317a523f..5b3d0a4b 100644
--- a/src/samples/chakra-sample/chakra-app/theme/theme.ts
+++ b/src/samples/chakra-sample/chakra-app/theme/theme.ts
@@ -60,11 +60,7 @@ export const theme = {
     },
     semanticTokens: {
         colors: {
-            error: {
-                default: "red.500",
-                _dark: "red.400"
-            },
-            success: "green.500"
+            error: "orange.500"
         }
     }
 };