Base-theme: Update documentation and remove unused button variants an…

…d color scheme
open-pioneer · Mar 11, 2024 · be236af · be236af
1 parent 5ff8f30
commit be236af
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 121 deletions.
diff --git a/.changeset/moody-lemons-repeat.md b/.changeset/moody-lemons-repeat.md
@@ -0,0 +1,5 @@
+---
+"@open-pioneer/base-theme": patch
+---
+
+Remove unused button variants and color scheme from base-theme.
diff --git a/src/packages/base-theme/README.md b/src/packages/base-theme/README.md
@@ -5,75 +5,13 @@ This package provides the default theme for all open pioneer trails applications
 ## Usage
 
 This theme is automatically used as the default theme for all open pioneer trails applications.
+When using this theme, the `trails` color scheme becomes the default color scheme for all Chakra UI components.
 
-### How to override the `trails` color scheme
+### How to override the theme
 
-When using this theme, the `trails` color scheme becomes is the default color scheme for all chakra UI components.
-
-To override the `trails` color scheme, import the `extendTheme` helper function:
-
-```jsx
-import { extendTheme } from "@open-pioneer/chakra-integration";
-```
-
-Define your custom `trails` (or `trails_alt`) colors:
-
-```jsx
-const colors = {
-    trails: {
-        50: "#f5edfd",
-        100: "#eedcff",
-        200: "#d6c2ea",
-        300: "#bfa8d5",
-        400: "#a890c1",
-        500: "#9177ad",
-        600: "#7b609a",
-        700: "#654986",
-        800: "#4f3373",
-        900: "#391e61"
-    }
-};
-```
-
-Use `extendTheme` function to override the `trails` colors:
-
-```jsx
-import { theme } from "@open-pioneer/base-theme";
-const customTheme = extendTheme({ colors }, theme);
-```
-
-Or use Chakra UI color schemes to override the `trails` (or `trails_alt`) colors:
-
-```jsx
-const customTheme = extendTheme(
-    {
-        colors: {
-            trails: theme.colors.gray
-        }
-    },
-    theme
-);
-```
-
-`options: gray | red | orange | yellow | green | teal | blue | cyan | purple | pink`
-
-Then pass in the custom theme in `createCustomElement`:
-
-```jsx
-createCustomElement({
-    ...,
-    theme: customTheme
-});
-```
-
-### How to use button variants
-
-```jsx
-<Button variant="secondary">secondary</Button>
-```
-
-`options: solid | outline | ghost | link | primary | secondary | cancel`  
-`default: solid`
+It is possible to override the theme by implementing an own theme extension.
+In particular, it is possible to override the `trails` color scheme.
+For an explanation how to override the theme, refer to ["How to theme an app" Tutorial](https://github.com/open-pioneer/trails-starter/blob/main/docs/tutorials/HowToThemeAnApp.md).
 
 ## License
 

diff --git a/src/packages/base-theme/theme.ts b/src/packages/base-theme/theme.ts
@@ -26,19 +26,6 @@ const colors = {
         700: "#1b4b5f",
         800: "#123240",
         900: "#091920"
-    },
-    //trails_alt = currently only used for: <Button variant="secondary">secondary</Button>
-    trails_alt: {
-        50: "#eaf3e9",
-        100: "#d5e7d2",
-        200: "#abcea5",
-        300: "#80b678",
-        400: "#569d4b",
-        500: "#2c851e",
-        600: "#236a18",
-        700: "#1a5012",
-        800: "#12350c",
-        900: "#091b06"
     }
 };
 
@@ -123,39 +110,6 @@ export const theme = extendTheme(
                     //colorScheme: "gray"
                     //size: "md", //"lg" | "md" | "sm" | "xs"
                     //variant: "solid" //"primary" | "secondary" | "cancel" | "solid" | "outline" | "ghost" | "link"
-                },
-                variants: {
-                    //primary === default
-                    primary: {
-                        color: "font_inverse",
-                        bg: "trails.500",
-                        _hover: {
-                            bg: "trails.600"
-                        },
-                        _active: {
-                            bg: "trails.700"
-                        }
-                    },
-                    secondary: {
-                        color: "font_inverse",
-                        bg: "trails_alt.500",
-                        _hover: {
-                            bg: "trails_alt.600"
-                        },
-                        _active: {
-                            bg: "trails_alt.700"
-                        }
-                    },
-                    cancel: {
-                        color: "font_inverse",
-                        bg: "gray.500",
-                        _hover: {
-                            bg: "gray.600"
-                        },
-                        _active: {
-                            bg: "gray.700"
-                        }
-                    }
                 }
             },
             Checkbox: {

diff --git a/src/samples/theming-sample/theming-app/AppUI.tsx b/src/samples/theming-sample/theming-app/AppUI.tsx
@@ -48,21 +48,14 @@ export function AppUI() {
                         </Tooltip>
                     </Stack>
 
-                    <Heading size={"xs"}>existing variants</Heading>
+                    <Heading size={"xs"}>Chakra UI variants</Heading>
                     <Stack direction="row" my={2}>
                         <Button variant="solid">solid</Button>
                         <Button variant="outline">outline</Button>
                         <Button variant="ghost">ghost</Button>
                         <Button variant="link">link</Button>
                     </Stack>
 
-                    <Heading size={"xs"}>custom variants</Heading>
-                    <Stack direction="row" my={2}>
-                        <Button variant="primary">primary</Button>
-                        <Button variant="secondary">secondary</Button>
-                        <Button variant="cancel">cancel</Button>
-                    </Stack>
-
                     <Heading size={"xs"}>Button states</Heading>
                     <Stack direction="row" my={2}>
                         <Button isDisabled>isDisabled</Button>