clean themes

src/packages/chakra-integration/Provider.tsx

@@ -36,6 +36,7 @@ export type CustomChakraProviderProps = PropsWithChildren<{
     /**
      * chakra theming object
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     theme?: Record<string, any>;
 }>;
 
@@ -149,7 +150,7 @@ export const CustomChakraProvider: FC<CustomChakraProviderProps> = ({
     const ColorMode = mode === "light" ? LightMode : DarkMode;
 
     //apply custom theme or Chakra UI default theme
-    let customTheme = extendTheme(trailsDefaultTheme, rootStyles, baseTheme); //always add trails defaults and root styles to chakra base theme
+    let customTheme = extendTheme(rootStyles, trailsDefaultTheme, baseTheme); //always add trails defaults and root styles to chakra base theme
     if (theme) {
         customTheme = extendTheme(theme, customTheme); //merge with custom theme if provided
     }

src/packages/chakra-integration/theme/theme.ts

@@ -1,16 +1,40 @@
 // SPDX-FileCopyrightText: con terra GmbH and contributors
 // SPDX-License-Identifier: Apache-2.0
 export const theme = {
-    components: {},
+    styles: {
+        //add global css styles here
+        /*global:{
+            ".chakra-host": {
+            }
+        }*/
+    },
+    colors: {
+        //define colors and color schemes here/
+        /*primary: {
+            50: "#defffd",
+            100: "#b3fffa",
+            200: "#86feee",
+            300: "#5bfedd",
+            400: "#3efec9",
+            500: "#32e5a6",
+            600: "#23b277",                                               
+            700: "#147f4c",
+            800: "#004d23",
+            900: "#001b0a",
+        } */
+    },
+    components: {
+        //define component specific styling here
+        /*Button: {
+            defaultProps: {
+                colorScheme: "primary"
+            }*/
+    },
     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"
-        }
+        //define sematinc tokens here
+        /*colors: {
+            background_primary: "primary.300",
+            background_secondary: "primary.500",
+        }*/
     }
 };

src/packages/runtime/CustomElement.ts

@@ -74,6 +74,7 @@ export interface CustomElementOptions {
     /**
      * Chakra theming object
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     theme?: Record<string, any>;
 }
 
@@ -331,8 +332,6 @@ class ElementState {
     }
 
     private render() {
-        console.log("options");
-        console.log(this.options);
         this.reactIntegration?.render(this.options.component ?? emptyComponent, {
             theme: this.options.theme
         });

src/packages/runtime/react-integration/ReactIntegration.tsx

@@ -86,6 +86,7 @@ export class ReactIntegration {
     }
 
     render(Component: ComponentType, props: Record<string, unknown>) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const customTheme = props.theme as Record<string, any>;
         this.root.render(
             <StrictMode>

src/samples/chakra-sample/chakra-app/SampleUI.tsx

@@ -68,9 +68,9 @@ export function SampleUI() {
 
 function LinkComponent() {
     return (
-        <Text variant="error">
+        <Text>
             This is a{" "}
-            <Link href="https://chakra-ui.com" isExternal color="yellow.500">
+            <Link href="https://chakra-ui.com" isExternal>
                 link to Chakra&apos;s Design system
             </Link>
         </Text>
@@ -79,14 +79,8 @@ function LinkComponent() {
 
 function ComponentStack() {
     return (
-        <Stack
-            mb={5}
-            mt={5}
-            divider={<StackDivider borderColor="gray.200" />}
-            spacing="24px"
-            align="stretch"
-        >
-            <Box bg="error">
+        <Stack mb={5} mt={5} divider={<StackDivider />} spacing="24px" align="stretch">
+            <Box>
                 <PortalExample />
             </Box>
             <Box>
@@ -110,7 +104,7 @@ function ComponentStack() {
             <Box>
                 <PopoverExample />
             </Box>
-            <Box bg="yellow.100">
+            <Box>
                 <RadioGroupExample />
             </Box>
         </Stack>
@@ -119,7 +113,7 @@ function ComponentStack() {
 
 function PortalExample() {
     return (
-        <Box bg="yellow.100">
+        <Box bg="background_secondary">
             <Heading size="sm">Portal Example: </Heading>
             This is box and displayed here. Scroll/Look down to see the portal that is added at the
             end of document.body. The Portal is part of this Box.
@@ -131,7 +125,7 @@ function PortalExample() {
 function TooltipExample() {
     return (
         <Tooltip hasArrow label="Button Tooltip" aria-label="A tooltip" placement="top">
-            <Button variant="asdad">Button with a tooltip</Button>
+            <Button>Button with a tooltip</Button>
         </Tooltip>
     );
 }
@@ -172,9 +166,7 @@ function AlertDialogExample() {
 
     return (
         <>
-            <Button onClick={onOpen} colorScheme="teal">
-                Open Alert
-            </Button>
+            <Button onClick={onOpen}>Open Alert</Button>
 
             <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
                 <AlertDialogOverlay>
@@ -188,10 +180,10 @@ function AlertDialogExample() {
                         </AlertDialogBody>
 
                         <AlertDialogFooter>
-                            <Button ref={cancelRef} onClick={onClose}>
+                            <Button ref={cancelRef} onClick={onClose} variant="cancel">
                                 Cancel
                             </Button>
-                            <Button colorScheme="green" onClick={onClose} ml={3}>
+                            <Button onClick={onClose} ml={3}>
                                 Okay
                             </Button>
                         </AlertDialogFooter>
@@ -207,9 +199,7 @@ function ModalExample() {
 
     return (
         <>
-            <Button onClick={onOpen} colorScheme="teal">
-                Show Modal
-            </Button>
+            <Button onClick={onOpen}>Show Modal</Button>
 
             <Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
                 <ModalOverlay />
@@ -219,9 +209,7 @@ function ModalExample() {
                     <ModalBody pb={6}>This is a modal text!</ModalBody>
 
                     <ModalFooter>
-                        <Button colorScheme="green" mr={2}>
-                            Got it
-                        </Button>
+                        <Button mr={2}>Got it</Button>
                         <Button onClick={onClose}>Cancel</Button>
                     </ModalFooter>
                 </ModalContent>
@@ -256,7 +244,7 @@ function DrawerExample() {
                         <Button variant="outline" mr={3} onClick={onClose}>
                             Cancel
                         </Button>
-                        <Button colorScheme="green">Got it</Button>
+                        <Button>Got it</Button>
                     </DrawerFooter>
                 </DrawerContent>
             </Drawer>
@@ -269,7 +257,7 @@ function PopoverExample() {
         <>
             <Popover>
                 <PopoverTrigger>
-                    <Button colorScheme="teal">Show Popover</Button>
+                    <Button>Show Popover</Button>
                 </PopoverTrigger>
                 <PopoverContent>
                     <PopoverArrow />
@@ -281,9 +269,7 @@ function PopoverExample() {
 
             <Popover>
                 <PopoverTrigger>
-                    <Button ml={5} colorScheme="teal">
-                        Show Popover rendered in an portal
-                    </Button>
+                    <Button ml={5}>Show Popover rendered in an portal</Button>
                 </PopoverTrigger>
                 <Portal>
                     <PopoverContent>

src/samples/chakra-sample/chakra-app/TableExample.tsx

@@ -14,7 +14,7 @@ import {
 export function TableExampleComponent() {
     return (
         <TableContainer sx={{ border: "solid" }}>
-            <Table variant="striped" colorScheme="teal">
+            <Table variant="striped">
                 <TableCaption>This is the table cation</TableCaption>
                 <Thead>
                     <Tr>

src/samples/chakra-sample/chakra-app/theme/theme.ts

@@ -2,65 +2,68 @@
 // SPDX-License-Identifier: Apache-2.0
 export const theme = {
     colors: {
-        palegreen: {
+        primary: {
             50: "#defffd",
-            100: "#defffd",
-            200: "#defffd",
-            300: "#defffd",
-            400: "#defffd",
-            500: "#defffd",
-            600: "#defffd",
-            700: "#defffd",
-            800: "#defffd",
-            900: "#defffd"
-        },
-        myblack: {
-            50: "#f2f2f2",
-            100: "#d9d9d9",
-            200: "#bfbfbf",
-            300: "#a6a6a6",
-            400: "#8c8c8c",
-            500: "#737373",
-            600: "#595959",
-            700: "#404040",
-            800: "#262626",
-            900: "#0d0d0d"
-        },
-        mybrown: {
-            50: "#feeded",
-            100: "#e4d0d0",
-            200: "#ccb2b2",
-            300: "#b79494",
-            400: "#a27676",
-            500: "#885c5c",
-            600: "#6a4747",
-            700: "#4d3333",
-            800: "#301d1d",
-            900: "#170707"
+            100: "#b3fffa",
+            200: "#86feee",
+            300: "#5bfedd",
+            400: "#3efec9",
+            500: "#32e5a6",
+            600: "#23b277",
+            700: "#147f4c",
+            800: "#004d23",
+            900: "#001b0a"
         }
     },
+    fonts: {
+        heading: "Helvetica"
+    },
     components: {
         Button: {
             defaultProps: {
-                //only colorScheme, variant, size
-                colorScheme: "palegreen" //default color must provided here
-                //variant: "brown"
-            },
-            baseStyle: {
-                fontWeight: "italic", // Normally, it is "semibold"
-                bg: "red.500", //only applies if variant attribute is set
-                color: "myblack.500"
+                colorScheme: "primary"
             },
             variants: {
-                brown: {
-                    bg: "mybrown.500"
+                cancel: {
+                    color: "font_inverse",
+                    bg: "error",
+                    _hover: { backgroundColor: "error_hover" }
                 }
             }
+        },
+        Link: {
+            baseStyle: {
+                color: "font_link"
+            }
+        },
+        Divider: {
+            baseStyle: {
+                borderColor: "border"
+            }
         }
     },
     semanticTokens: {
         colors: {
-            error: "orange.500"
+            "background_primary": "primary.300",
+            "background_secondary": "primary.500",
+            "placeholder": "primary.100",
+            "font_primary": "black",
+            "font_secondary": "grey.500",
+            "font_inverse": "white",
+            "font_link": "yellow.300",
+            "border": "black",
+            "error": "red.500",
+            "error_hover": "red.600",
+            "success": "green.500",
+            "highlight": "yellow.300",
+            //oderride internal chakra themeing variables
+            "chakra-body-bg": "background_primary",
+            "chakra-subtle-bg": "background_secondary",
+            "chakra-body-text": "font_primary",
+            "chakra-subtle-text": "font_secondary",
+            "chakra-inverse-text": "font_inverse",
+            "chakra-border-color": "border",
+            "chakra-placeholder-color": "placeholder"
         }
     }
 };