diff --git a/.changeset/update-theme.md b/.changeset/update-theme.md
new file mode 100644
index 0000000..621f40e
--- /dev/null
+++ b/.changeset/update-theme.md
@@ -0,0 +1,6 @@
+---
+"@open-pioneer/base-theme": minor
+---
+
+Merge developments from @open-pioneer/theme.
+This package now provides the `"trails"` color scheme, among other things.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd449d7..5eb1de8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
react-use:
- specifier: ^17.4.1
+ specifier: ^17.4.2
version: 17.5.0(react-dom@18.2.0)(react@18.2.0)
devDependencies:
'@changesets/cli':
@@ -198,7 +198,7 @@ importers:
specifier: ^14.1.2
version: 14.1.2(react-dom@18.2.0)(react@18.2.0)
core-packages:
- specifier: workspace:*
+ specifier: workspace:^
version: link:../../..
publishDirectory: dist
@@ -293,7 +293,7 @@ importers:
specifier: workspace:^
version: link:../test-utils
core-packages:
- specifier: workspace:*
+ specifier: workspace:^
version: link:../../..
publishDirectory: dist
@@ -319,7 +319,7 @@ importers:
specifier: workspace:^
version: link:../test-utils
core-packages:
- specifier: workspace:*
+ specifier: workspace:^
version: link:../../..
publishDirectory: dist
@@ -398,23 +398,6 @@ importers:
version: link:../../..
publishDirectory: dist
- src/packages/theme:
- dependencies:
- '@open-pioneer/base-theme':
- specifier: workspace:^
- version: link:../base-theme
- '@open-pioneer/chakra-integration':
- specifier: workspace:^
- version: link:../chakra-integration
- '@open-pioneer/runtime':
- specifier: workspace:^
- version: link:../runtime
- devDependencies:
- core-packages:
- specifier: workspace:*
- version: link:../../..
- publishDirectory: dist
-
src/samples/api-sample/api-app:
dependencies:
'@open-pioneer/chakra-integration':
@@ -444,9 +427,6 @@ importers:
'@open-pioneer/runtime':
specifier: workspace:^
version: link:../../../packages/runtime
- '@open-pioneer/theme':
- specifier: workspace:^
- version: link:../../../packages/theme
react:
specifier: ^18.2.0
version: 18.2.0
@@ -527,9 +507,6 @@ importers:
'@open-pioneer/runtime':
specifier: workspace:^
version: link:../../../packages/runtime
- '@open-pioneer/theme':
- specifier: workspace:^
- version: link:../../../packages/theme
react:
specifier: ^18.2.0
version: 18.2.0
@@ -568,9 +545,6 @@ importers:
'@open-pioneer/runtime':
specifier: workspace:^
version: link:../../../packages/runtime
- '@open-pioneer/theme':
- specifier: workspace:^
- version: link:../../../packages/theme
packages:
diff --git a/src/packages/base-theme/README.md b/src/packages/base-theme/README.md
index ace0e89..478131e 100644
--- a/src/packages/base-theme/README.md
+++ b/src/packages/base-theme/README.md
@@ -1,10 +1,78 @@
# @open-pioneer/base-theme
-Provides the default open pioneer trails chakra theme.
+This package provides a theme that uses the "trails" color scheme.
-```js
-import { theme as baseTheme } from "@open-pioneer/base-theme";
+## Usage
+
+This theme is automatically used as the default theme for all open pioneer trails applications.
+
+### How 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
+});
```
-> NOTE: This package is still under active development.
-> There will be breaking changes.
+### How to use button variants
+
+```jsx
+
+```
+
+`options: solid | outline | ghost | link | primary | secondary | cancel`
+`default: solid`
+
+## License
+
+Apache-2.0 (see `LICENSE` file)
diff --git a/src/packages/base-theme/theme.ts b/src/packages/base-theme/theme.ts
index 7fc3094..d9b7940 100644
--- a/src/packages/base-theme/theme.ts
+++ b/src/packages/base-theme/theme.ts
@@ -1,6 +1,89 @@
// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
// SPDX-License-Identifier: Apache-2.0
-import { extendTheme } from "@open-pioneer/chakra-integration";
+import {
+ StyleFunctionProps,
+ extendTheme,
+ withDefaultColorScheme,
+ theme as baseTheme
+} from "@open-pioneer/chakra-integration";
+
+const fonts = {
+ /* heading: "Tahoma",
+ body: "Courier New" */
+};
+
+//10 colors as hex values from 50 to 900 (light to dark)
+const colors = {
+ //trails = default color scheme
+ trails: {
+ 50: "#eaf2f5",
+ 100: "#d5e5ec",
+ 200: "#abcbd9",
+ 300: "#81b1c5",
+ 400: "#5797b2",
+ 500: "#2d7d9f",
+ 600: "#24647f",
+ 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"
+ }
+};
+
+const semanticTokens = {
+ colors: {
+ "background_body": "white",
+ "background_primary": "trails.500",
+ "background_light": "trails.50",
+ //"background_secondary": "trails.700",
+ "placeholder": "gray.500",
+ "font_primary": "black",
+ //"font_secondary": "gray.500",
+ "font_inverse": "white",
+ "font_link": "trails.600",
+ "border": "gray.300",
+
+ //override internal chakra theming variables
+ //https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/semantic-tokens.ts
+ "chakra-body-text": "font_primary",
+ "chakra-body-bg": "background_body",
+ "chakra-border-color": "border",
+ "chakra-placeholder-color": "placeholder"
+ //"chakra-inverse-text": "font_inverse",
+ //"chakra-subtle-bg": "background_secondary",
+ //"chakra-subtle-text": "font_secondary"
+ }
+};
+
+//Create an intermediate theme to have access to all colors and semantic tokens (function: getColor)
+const intermediateTheme = extendTheme({ fonts, colors, semanticTokens }, baseTheme);
+
+//Get the color defined by a semantic token.
+//If it points to a color (e.g. red.500), get the hex color value out of the color scheme.
+//Overrides: "boxShadow" and "outline"
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getColor = (semanticToken: string, theme: any) => {
+ const color = theme.semanticTokens.colors[semanticToken];
+ if (color && color.includes(".")) {
+ const kvp = color.split(".");
+ const key = kvp[0],
+ value = kvp[1];
+ return theme.colors[key][value];
+ }
+ return color;
+};
/**
* Base theme for open pioneer trails applications.
@@ -15,9 +98,237 @@ import { extendTheme } from "@open-pioneer/chakra-integration";
* // Your overrides
* }, baseTheme);
* ```
- *
- * NOTE: this API is still _experimental_.
- *
- * @experimental
*/
-export const theme = extendTheme({});
+export const theme = extendTheme(
+ withDefaultColorScheme({ colorScheme: "trails" }),
+ {
+ styles: {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ global({ theme }: any) {
+ return {
+ ".chakra-host": {
+ //TODO: Hack! Additional Hex digits only work because colors are hex, too
+ //opacity-to-hex: 0.6 => 99
+ "--trails-theme-shadow-color": `${getColor("background_primary", theme)}99`
+ }
+ };
+ }
+ },
+ shadows: {
+ outline: `0 0 0 3px var(--trails-theme-shadow-color)`
+ },
+ components: {
+ Button: {
+ defaultProps: {
+ //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: {
+ defaultProps: {
+ //colorScheme: "blue"
+ //size: "md" //"lg" | "md" | "sm"
+ }
+ },
+ Divider: {
+ baseStyle: {
+ borderColor: "background_primary"
+ }
+ },
+ Input: {
+ defaultProps: {
+ //size: "md" //"lg" | "md" | "sm" | "xs"
+ //variant: "outline" //"outline" | "filled" | "flushed" | "unstyled"
+ },
+ variants: {
+ outline({ theme }: StyleFunctionProps) {
+ return {
+ field: {
+ borderColor: "border",
+ _focusVisible: {
+ borderColor: "background_primary",
+ boxShadow: `0 0 0 1px ${getColor("background_primary", theme)}`
+ }
+ },
+ addon: {
+ borderColor: "border",
+ bg: "background_primary"
+ }
+ };
+ },
+ filled: {
+ field: {
+ _focusVisible: {
+ borderColor: "background_primary"
+ }
+ },
+ addon: {
+ bg: "background_primary"
+ }
+ },
+ flushed({ theme }: StyleFunctionProps) {
+ return {
+ field: {
+ _focusVisible: {
+ borderColor: "background_primary",
+ boxShadow: `0px 1px 0px 0px ${getColor(
+ "background_primary",
+ theme
+ )}`
+ }
+ }
+ };
+ }
+ }
+ },
+ Link: {
+ baseStyle: {
+ color: "font_link"
+ }
+ },
+ Radio: {
+ defaultProps: {
+ //colorScheme: "blue",
+ //size: "md" //"lg" | "md" | "sm"
+ }
+ },
+ Select: {
+ defaultProps: {
+ //size: "md" //"lg" | "md" | "sm" | "xs"
+ //variant: "outline" //"outline" | "filled" | "flushed" | "unstyled"
+ },
+ variants: {
+ outline({ theme }: StyleFunctionProps) {
+ return {
+ field: {
+ borderColor: "border",
+ _focusVisible: {
+ borderColor: "background_primary",
+ boxShadow: `0 0 0 1px ${getColor("background_primary", theme)}`
+ }
+ }
+ };
+ },
+ filled: {
+ field: {
+ _focusVisible: {
+ borderColor: "background_primary"
+ }
+ },
+ addon: {
+ bg: "background_primary"
+ }
+ },
+ flushed({ theme }: StyleFunctionProps) {
+ return {
+ field: {
+ _focusVisible: {
+ borderColor: "background_primary",
+ boxShadow: `0px 1px 0px 0px ${getColor(
+ "background_primary",
+ theme
+ )}`
+ }
+ }
+ };
+ }
+ }
+ },
+ Slider: {
+ defaultProps: {
+ //colorScheme: "blue"
+ //size: "md" //"lg" | "md" | "sm"
+ },
+ baseStyle: {
+ thumb: {
+ borderColor: "background_primary",
+ _hover: {
+ bg: "background_primary"
+ }
+ }
+ }
+ },
+ Switch: {
+ defaultProps: {
+ //colorScheme: "blue",
+ //size: "md" //"lg" | "md" | "sm"
+ }
+ },
+ Textarea: {
+ defaultProps: {
+ //size: "md", //"lg" | "md" | "sm" | "xs"
+ //variant: "outline" //"outline" | "filled" | "flushed" | "unstyled"
+ },
+ variants: {
+ outline({ theme }: StyleFunctionProps) {
+ return {
+ borderColor: "border",
+ _focusVisible: {
+ borderColor: "background_primary",
+ boxShadow: `0 0 0 1px ${getColor("background_primary", theme)}`
+ }
+ };
+ },
+ filled: {
+ _focusVisible: {
+ borderColor: "background_primary"
+ }
+ },
+ flushed({ theme }: StyleFunctionProps) {
+ return {
+ _focusVisible: {
+ borderColor: "background_primary",
+ boxShadow: `0px 1px 0px 0px ${getColor(
+ "background_primary",
+ theme
+ )}`
+ }
+ };
+ }
+ }
+ },
+ Tooltip: {
+ baseStyle: {
+ //bg: "background_primary",
+ //color: "font_inverse",
+ borderRadius: "md"
+ }
+ }
+ }
+ },
+ intermediateTheme
+);
diff --git a/src/packages/theme/CHANGELOG.md b/src/packages/theme/CHANGELOG.md
deleted file mode 100644
index 4621ffe..0000000
--- a/src/packages/theme/CHANGELOG.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# @open-pioneer/theme
-
-## 0.3.0
-
-### Minor Changes
-
-- ee7c2d4: Update runtime version.
-
-## 0.2.0
-
-### Minor Changes
-
-- 70349a8: Update to new core packages major versions
-
-## 0.1.0
-
-### Minor Changes
-
-- 2cee00c: Initial release.
diff --git a/src/packages/theme/LICENSE b/src/packages/theme/LICENSE
deleted file mode 100644
index 7a4a3ea..0000000
--- a/src/packages/theme/LICENSE
+++ /dev/null
@@ -1,202 +0,0 @@
-
- Apache License
- Version 2.0, January 2004
- http://www.apache.org/licenses/
-
- TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
- 1. Definitions.
-
- "License" shall mean the terms and conditions for use, reproduction,
- and distribution as defined by Sections 1 through 9 of this document.
-
- "Licensor" shall mean the copyright owner or entity authorized by
- the copyright owner that is granting the License.
-
- "Legal Entity" shall mean the union of the acting entity and all
- other entities that control, are controlled by, or are under common
- control with that entity. For the purposes of this definition,
- "control" means (i) the power, direct or indirect, to cause the
- direction or management of such entity, whether by contract or
- otherwise, or (ii) ownership of fifty percent (50%) or more of the
- outstanding shares, or (iii) beneficial ownership of such entity.
-
- "You" (or "Your") shall mean an individual or Legal Entity
- exercising permissions granted by this License.
-
- "Source" form shall mean the preferred form for making modifications,
- including but not limited to software source code, documentation
- source, and configuration files.
-
- "Object" form shall mean any form resulting from mechanical
- transformation or translation of a Source form, including but
- not limited to compiled object code, generated documentation,
- and conversions to other media types.
-
- "Work" shall mean the work of authorship, whether in Source or
- Object form, made available under the License, as indicated by a
- copyright notice that is included in or attached to the work
- (an example is provided in the Appendix below).
-
- "Derivative Works" shall mean any work, whether in Source or Object
- form, that is based on (or derived from) the Work and for which the
- editorial revisions, annotations, elaborations, or other modifications
- represent, as a whole, an original work of authorship. For the purposes
- of this License, Derivative Works shall not include works that remain
- separable from, or merely link (or bind by name) to the interfaces of,
- the Work and Derivative Works thereof.
-
- "Contribution" shall mean any work of authorship, including
- the original version of the Work and any modifications or additions
- to that Work or Derivative Works thereof, that is intentionally
- submitted to Licensor for inclusion in the Work by the copyright owner
- or by an individual or Legal Entity authorized to submit on behalf of
- the copyright owner. For the purposes of this definition, "submitted"
- means any form of electronic, verbal, or written communication sent
- to the Licensor or its representatives, including but not limited to
- communication on electronic mailing lists, source code control systems,
- and issue tracking systems that are managed by, or on behalf of, the
- Licensor for the purpose of discussing and improving the Work, but
- excluding communication that is conspicuously marked or otherwise
- designated in writing by the copyright owner as "Not a Contribution."
-
- "Contributor" shall mean Licensor and any individual or Legal Entity
- on behalf of whom a Contribution has been received by Licensor and
- subsequently incorporated within the Work.
-
- 2. Grant of Copyright License. Subject to the terms and conditions of
- this License, each Contributor hereby grants to You a perpetual,
- worldwide, non-exclusive, no-charge, royalty-free, irrevocable
- copyright license to reproduce, prepare Derivative Works of,
- publicly display, publicly perform, sublicense, and distribute the
- Work and such Derivative Works in Source or Object form.
-
- 3. Grant of Patent License. Subject to the terms and conditions of
- this License, each Contributor hereby grants to You a perpetual,
- worldwide, non-exclusive, no-charge, royalty-free, irrevocable
- (except as stated in this section) patent license to make, have made,
- use, offer to sell, sell, import, and otherwise transfer the Work,
- where such license applies only to those patent claims licensable
- by such Contributor that are necessarily infringed by their
- Contribution(s) alone or by combination of their Contribution(s)
- with the Work to which such Contribution(s) was submitted. If You
- institute patent litigation against any entity (including a
- cross-claim or counterclaim in a lawsuit) alleging that the Work
- or a Contribution incorporated within the Work constitutes direct
- or contributory patent infringement, then any patent licenses
- granted to You under this License for that Work shall terminate
- as of the date such litigation is filed.
-
- 4. Redistribution. You may reproduce and distribute copies of the
- Work or Derivative Works thereof in any medium, with or without
- modifications, and in Source or Object form, provided that You
- meet the following conditions:
-
- (a) You must give any other recipients of the Work or
- Derivative Works a copy of this License; and
-
- (b) You must cause any modified files to carry prominent notices
- stating that You changed the files; and
-
- (c) You must retain, in the Source form of any Derivative Works
- that You distribute, all copyright, patent, trademark, and
- attribution notices from the Source form of the Work,
- excluding those notices that do not pertain to any part of
- the Derivative Works; and
-
- (d) If the Work includes a "NOTICE" text file as part of its
- distribution, then any Derivative Works that You distribute must
- include a readable copy of the attribution notices contained
- within such NOTICE file, excluding those notices that do not
- pertain to any part of the Derivative Works, in at least one
- of the following places: within a NOTICE text file distributed
- as part of the Derivative Works; within the Source form or
- documentation, if provided along with the Derivative Works; or,
- within a display generated by the Derivative Works, if and
- wherever such third-party notices normally appear. The contents
- of the NOTICE file are for informational purposes only and
- do not modify the License. You may add Your own attribution
- notices within Derivative Works that You distribute, alongside
- or as an addendum to the NOTICE text from the Work, provided
- that such additional attribution notices cannot be construed
- as modifying the License.
-
- You may add Your own copyright statement to Your modifications and
- may provide additional or different license terms and conditions
- for use, reproduction, or distribution of Your modifications, or
- for any such Derivative Works as a whole, provided Your use,
- reproduction, and distribution of the Work otherwise complies with
- the conditions stated in this License.
-
- 5. Submission of Contributions. Unless You explicitly state otherwise,
- any Contribution intentionally submitted for inclusion in the Work
- by You to the Licensor shall be under the terms and conditions of
- this License, without any additional terms or conditions.
- Notwithstanding the above, nothing herein shall supersede or modify
- the terms of any separate license agreement you may have executed
- with Licensor regarding such Contributions.
-
- 6. Trademarks. This License does not grant permission to use the trade
- names, trademarks, service marks, or product names of the Licensor,
- except as required for reasonable and customary use in describing the
- origin of the Work and reproducing the content of the NOTICE file.
-
- 7. Disclaimer of Warranty. Unless required by applicable law or
- agreed to in writing, Licensor provides the Work (and each
- Contributor provides its Contributions) on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
- implied, including, without limitation, any warranties or conditions
- of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
- PARTICULAR PURPOSE. You are solely responsible for determining the
- appropriateness of using or redistributing the Work and assume any
- risks associated with Your exercise of permissions under this License.
-
- 8. Limitation of Liability. In no event and under no legal theory,
- whether in tort (including negligence), contract, or otherwise,
- unless required by applicable law (such as deliberate and grossly
- negligent acts) or agreed to in writing, shall any Contributor be
- liable to You for damages, including any direct, indirect, special,
- incidental, or consequential damages of any character arising as a
- result of this License or out of the use or inability to use the
- Work (including but not limited to damages for loss of goodwill,
- work stoppage, computer failure or malfunction, or any and all
- other commercial damages or losses), even if such Contributor
- has been advised of the possibility of such damages.
-
- 9. Accepting Warranty or Additional Liability. While redistributing
- the Work or Derivative Works thereof, You may choose to offer,
- and charge a fee for, acceptance of support, warranty, indemnity,
- or other liability obligations and/or rights consistent with this
- License. However, in accepting such obligations, You may act only
- on Your own behalf and on Your sole responsibility, not on behalf
- of any other Contributor, and only if You agree to indemnify,
- defend, and hold each Contributor harmless for any liability
- incurred by, or claims asserted against, such Contributor by reason
- of your accepting any such warranty or additional liability.
-
- END OF TERMS AND CONDITIONS
-
- APPENDIX: How to apply the Apache License to your work.
-
- To apply the Apache License to your work, attach the following
- boilerplate notice, with the fields enclosed by brackets "[]"
- replaced with your own identifying information. (Don't include
- the brackets!) The text should be enclosed in the appropriate
- comment syntax for the file format. We also recommend that a
- file or class name and description of purpose be included on the
- same "printed page" as the copyright notice for easier
- identification within third-party archives.
-
- Copyright [yyyy] [name of copyright owner]
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
\ No newline at end of file
diff --git a/src/packages/theme/README.md b/src/packages/theme/README.md
deleted file mode 100644
index a0f34ed..0000000
--- a/src/packages/theme/README.md
+++ /dev/null
@@ -1,90 +0,0 @@
-# @open-pioneer/theme
-
-This package provides a theme that uses the "trails" color scheme.
-
-## Usage
-
-To use the theme in your app, first import:
-
-```jsx
-import { theme } from "@open-pioneer/theme";
-```
-
-Then pass in the theme in `createCustomElement`:
-
-```jsx
-createCustomElement({
- ...,
- theme
-});
-```
-
-### How 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
-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`
-
-## License
-
-Apache-2.0 (see `LICENSE` file)
diff --git a/src/packages/theme/build.config.mjs b/src/packages/theme/build.config.mjs
deleted file mode 100644
index 7d33afc..0000000
--- a/src/packages/theme/build.config.mjs
+++ /dev/null
@@ -1,11 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
-// SPDX-License-Identifier: Apache-2.0
-
-import { defineBuildConfig } from "@open-pioneer/build-support";
-
-export default defineBuildConfig({
- entryPoints: ["index"],
- publishConfig: {
- strict: true
- }
-});
diff --git a/src/packages/theme/index.ts b/src/packages/theme/index.ts
deleted file mode 100644
index 3d15d01..0000000
--- a/src/packages/theme/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
-// SPDX-License-Identifier: Apache-2.0
-export { theme } from "./theme";
diff --git a/src/packages/theme/package.json b/src/packages/theme/package.json
deleted file mode 100644
index 736fa65..0000000
--- a/src/packages/theme/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "name": "@open-pioneer/theme",
- "version": "0.3.0",
- "license": "Apache-2.0",
- "main": "index.ts",
- "scripts": {
- "build": "build-pioneer-package"
- },
- "peerDependencies": {
- "@open-pioneer/chakra-integration": "workspace:^",
- "@open-pioneer/runtime": "workspace:^",
- "@open-pioneer/base-theme": "workspace:^"
- },
- "devDependencies": {
- "core-packages": "workspace:^"
- },
- "publishConfig": {
- "directory": "dist",
- "linkDirectory": false
- }
-}
diff --git a/src/packages/theme/theme.ts b/src/packages/theme/theme.ts
deleted file mode 100644
index acebf71..0000000
--- a/src/packages/theme/theme.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
-// SPDX-License-Identifier: Apache-2.0
-import {
- StyleFunctionProps,
- extendTheme,
- withDefaultColorScheme
-} from "@open-pioneer/chakra-integration";
-import { theme as baseTheme } from "@open-pioneer/base-theme";
-
-const fonts = {
- /* heading: "Tahoma",
- body: "Courier New" */
-};
-
-//10 colors as hex values from 50 to 900 (light to dark)
-const colors = {
- //trails = default color scheme
- trails: {
- 50: "#eaf2f5",
- 100: "#d5e5ec",
- 200: "#abcbd9",
- 300: "#81b1c5",
- 400: "#5797b2",
- 500: "#2d7d9f",
- 600: "#24647f",
- 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"
- }
-};
-
-const semanticTokens = {
- colors: {
- "background_body": "white",
- "background_primary": "trails.500",
- "background_light": "trails.50",
- //"background_secondary": "trails.700",
- "placeholder": "gray.500",
- "font_primary": "black",
- //"font_secondary": "gray.500",
- "font_inverse": "white",
- "font_link": "trails.600",
- "border": "gray.300",
-
- //override internal chakra theming variables
- //https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/semantic-tokens.ts
- "chakra-body-text": "font_primary",
- "chakra-body-bg": "background_body",
- "chakra-border-color": "border",
- "chakra-placeholder-color": "placeholder"
- //"chakra-inverse-text": "font_inverse",
- //"chakra-subtle-bg": "background_secondary",
- //"chakra-subtle-text": "font_secondary"
- }
-};
-
-//Create an intermediate theme to have access to all colors and semantic tokens (function: getColor)
-const intermediateTheme = extendTheme({ fonts, colors, semanticTokens }, baseTheme);
-
-//Get the color defined by a semantic token.
-//If it points to a color (e.g. red.500), get the hex color value out of the color scheme.
-//Overrides: "boxShadow" and "outline"
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getColor = (semanticToken: string, theme: any) => {
- const color = theme.semanticTokens.colors[semanticToken];
- if (color && color.includes(".")) {
- const kvp = color.split(".");
- const key = kvp[0],
- value = kvp[1];
- return theme.colors[key][value];
- }
- return color;
-};
-
-/**
- * Provides a theme that uses the "trails" color scheme.
- */
-export const theme = extendTheme(
- withDefaultColorScheme({ colorScheme: "trails" }),
- {
- styles: {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- global({ theme }: any) {
- return {
- ".chakra-host": {
- //TODO: Hack! Additional Hex digits only work because colors are hex, too
- //opacity-to-hex: 0.6 => 99
- "--trails-theme-shadow-color": `${getColor("background_primary", theme)}99`
- }
- };
- }
- },
- shadows: {
- outline: `0 0 0 3px var(--trails-theme-shadow-color)`
- },
- components: {
- Button: {
- defaultProps: {
- //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: {
- defaultProps: {
- //colorScheme: "blue"
- //size: "md" //"lg" | "md" | "sm"
- }
- },
- Divider: {
- baseStyle: {
- borderColor: "background_primary"
- }
- },
- Input: {
- defaultProps: {
- //size: "md" //"lg" | "md" | "sm" | "xs"
- //variant: "outline" //"outline" | "filled" | "flushed" | "unstyled"
- },
- variants: {
- outline({ theme }: StyleFunctionProps) {
- return {
- field: {
- borderColor: "border",
- _focusVisible: {
- borderColor: "background_primary",
- boxShadow: `0 0 0 1px ${getColor("background_primary", theme)}`
- }
- },
- addon: {
- borderColor: "border",
- bg: "background_primary"
- }
- };
- },
- filled: {
- field: {
- _focusVisible: {
- borderColor: "background_primary"
- }
- },
- addon: {
- bg: "background_primary"
- }
- },
- flushed({ theme }: StyleFunctionProps) {
- return {
- field: {
- _focusVisible: {
- borderColor: "background_primary",
- boxShadow: `0px 1px 0px 0px ${getColor(
- "background_primary",
- theme
- )}`
- }
- }
- };
- }
- }
- },
- Link: {
- baseStyle: {
- color: "font_link"
- }
- },
- Radio: {
- defaultProps: {
- //colorScheme: "blue",
- //size: "md" //"lg" | "md" | "sm"
- }
- },
- Select: {
- defaultProps: {
- //size: "md" //"lg" | "md" | "sm" | "xs"
- //variant: "outline" //"outline" | "filled" | "flushed" | "unstyled"
- },
- variants: {
- outline({ theme }: StyleFunctionProps) {
- return {
- field: {
- borderColor: "border",
- _focusVisible: {
- borderColor: "background_primary",
- boxShadow: `0 0 0 1px ${getColor("background_primary", theme)}`
- }
- }
- };
- },
- filled: {
- field: {
- _focusVisible: {
- borderColor: "background_primary"
- }
- },
- addon: {
- bg: "background_primary"
- }
- },
- flushed({ theme }: StyleFunctionProps) {
- return {
- field: {
- _focusVisible: {
- borderColor: "background_primary",
- boxShadow: `0px 1px 0px 0px ${getColor(
- "background_primary",
- theme
- )}`
- }
- }
- };
- }
- }
- },
- Slider: {
- defaultProps: {
- //colorScheme: "blue"
- //size: "md" //"lg" | "md" | "sm"
- },
- baseStyle: {
- thumb: {
- borderColor: "background_primary",
- _hover: {
- bg: "background_primary"
- }
- }
- }
- },
- Switch: {
- defaultProps: {
- //colorScheme: "blue",
- //size: "md" //"lg" | "md" | "sm"
- }
- },
- Textarea: {
- defaultProps: {
- //size: "md", //"lg" | "md" | "sm" | "xs"
- //variant: "outline" //"outline" | "filled" | "flushed" | "unstyled"
- },
- variants: {
- outline({ theme }: StyleFunctionProps) {
- return {
- borderColor: "border",
- _focusVisible: {
- borderColor: "background_primary",
- boxShadow: `0 0 0 1px ${getColor("background_primary", theme)}`
- }
- };
- },
- filled: {
- _focusVisible: {
- borderColor: "background_primary"
- }
- },
- flushed({ theme }: StyleFunctionProps) {
- return {
- _focusVisible: {
- borderColor: "background_primary",
- boxShadow: `0px 1px 0px 0px ${getColor(
- "background_primary",
- theme
- )}`
- }
- };
- }
- }
- },
- Tooltip: {
- baseStyle: {
- //bg: "background_primary",
- //color: "font_inverse",
- borderRadius: "md"
- }
- }
- }
- },
- intermediateTheme
-);
diff --git a/src/packages/theme/typedoc.json b/src/packages/theme/typedoc.json
deleted file mode 100644
index 212dc2f..0000000
--- a/src/packages/theme/typedoc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "extends": ["core-packages/typedoc.base.json"],
- "entryPoints": ["./index.ts"]
-}
diff --git a/src/samples/auth-sample/auth-app/app.ts b/src/samples/auth-sample/auth-app/app.ts
index 90c9a51..94a009c 100644
--- a/src/samples/auth-sample/auth-app/app.ts
+++ b/src/samples/auth-sample/auth-app/app.ts
@@ -1,13 +1,11 @@
// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
// SPDX-License-Identifier: Apache-2.0
import { createCustomElement } from "@open-pioneer/runtime";
-import { theme } from "@open-pioneer/theme";
import * as appMetadata from "open-pioneer:app";
import { AppUI } from "./AppUI";
const element = createCustomElement({
component: AppUI,
- theme,
appMetadata
});
diff --git a/src/samples/auth-sample/auth-app/package.json b/src/samples/auth-sample/auth-app/package.json
index 376fe6f..e601fb2 100644
--- a/src/samples/auth-sample/auth-app/package.json
+++ b/src/samples/auth-sample/auth-app/package.json
@@ -7,7 +7,6 @@
"@open-pioneer/chakra-integration": "workspace:^",
"@open-pioneer/core": "workspace:^",
"@open-pioneer/runtime": "workspace:^",
- "@open-pioneer/theme": "workspace:^",
"react": "^18.2.0"
}
}
diff --git a/src/samples/notify-sample/notify-app/app.ts b/src/samples/notify-sample/notify-app/app.ts
index b964c46..11a73bd 100644
--- a/src/samples/notify-sample/notify-app/app.ts
+++ b/src/samples/notify-sample/notify-app/app.ts
@@ -1,13 +1,11 @@
// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
// SPDX-License-Identifier: Apache-2.0
import { createCustomElement } from "@open-pioneer/runtime";
-import { theme } from "@open-pioneer/theme";
import * as appMetadata from "open-pioneer:app";
import { AppUI } from "./AppUI";
const Element = createCustomElement({
component: AppUI,
- theme,
appMetadata
});
diff --git a/src/samples/notify-sample/notify-app/package.json b/src/samples/notify-sample/notify-app/package.json
index 16560c3..d4e5804 100644
--- a/src/samples/notify-sample/notify-app/package.json
+++ b/src/samples/notify-sample/notify-app/package.json
@@ -6,7 +6,6 @@
"@open-pioneer/chakra-integration": "workspace:^",
"@open-pioneer/notifier": "workspace:^",
"@open-pioneer/runtime": "workspace:^",
- "@open-pioneer/theme": "workspace:^",
"react": "^18.2.0"
}
}
diff --git a/src/samples/theming-sample/theming-app/app.ts b/src/samples/theming-sample/theming-app/app.ts
index 44230c5..a564485 100644
--- a/src/samples/theming-sample/theming-app/app.ts
+++ b/src/samples/theming-sample/theming-app/app.ts
@@ -1,13 +1,11 @@
// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
// SPDX-License-Identifier: Apache-2.0
import { createCustomElement } from "@open-pioneer/runtime";
-import { theme } from "@open-pioneer/theme";
import * as appMetadata from "open-pioneer:app";
import { AppUI } from "./AppUI";
const Element = createCustomElement({
component: AppUI,
- theme,
appMetadata
});
diff --git a/src/samples/theming-sample/theming-app/package.json b/src/samples/theming-sample/theming-app/package.json
index 46f4d30..f7de8c9 100644
--- a/src/samples/theming-sample/theming-app/package.json
+++ b/src/samples/theming-sample/theming-app/package.json
@@ -4,7 +4,6 @@
"private": true,
"dependencies": {
"@open-pioneer/chakra-integration": "workspace:^",
- "@open-pioneer/runtime": "workspace:^",
- "@open-pioneer/theme": "workspace:^"
+ "@open-pioneer/runtime": "workspace:^"
}
}
diff --git a/typedoc.config.cjs b/typedoc.config.cjs
index 50c3d33..0366041 100644
--- a/typedoc.config.cjs
+++ b/typedoc.config.cjs
@@ -11,8 +11,7 @@ const documentedPackages = [
"local-storage",
"notifier",
"runtime",
- "test-utils",
- "theme"
+ "test-utils"
];
// See https://typedoc.org/options/