adjust base theme

open-pioneer · Sep 1, 2023 · 2cb326e · 2cb326e
1 parent 4a0d958
commit 2cb326e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -60,11 +60,7 @@ export const theme = {
     },
     semanticTokens: {
         colors: {
-            error: {
-                default: "red.500",
-                _dark: "red.400"
-            },
-            success: "green.500"
+            error: "orange.500"
         }
     }
 };