diff --git a/.changeset/moody-lemons-repeat.md b/.changeset/moody-lemons-repeat.md
new file mode 100644
index 0000000..062b0b8
--- /dev/null
+++ 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
index 9cdab87..b9aee9b 100644
--- 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
-
-```
-
-`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
index d9b7940..61026a7 100644
--- 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:
- 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
index 2cae38b..6a8709c 100644
--- a/src/samples/theming-sample/theming-app/AppUI.tsx
+++ b/src/samples/theming-sample/theming-app/AppUI.tsx
@@ -48,7 +48,7 @@ export function AppUI() {
- existing variants
+ Chakra UI variants
@@ -56,13 +56,6 @@ export function AppUI() {
- custom variants
-
-
-
-
-
-
Button states