From f9bfb991fe146f794cc8b8f8e4b14fe35723ffb5 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Fri, 26 Apr 2024 07:33:14 +0200
Subject: [PATCH 1/2] (#6363) chore: add a new theme for bstw
---
packages/themes/bstw/.eslintrc.cjs | 13 +
packages/themes/bstw/LICENSE | 287 ++++++++++++++++++
packages/themes/bstw/README.md | 74 +++++
packages/themes/bstw/build.config.ts | 25 ++
packages/themes/bstw/package.json | 84 +++++
packages/themes/bstw/src/components/abbr.scss | 6 +
.../themes/bstw/src/components/accordion.scss | 61 ++++
.../themes/bstw/src/components/alert.scss | 8 +
.../themes/bstw/src/components/avatar.scss | 5 +
.../themes/bstw/src/components/badge.scss | 44 +++
.../bstw/src/components/breadcrumb.scss | 26 ++
.../bstw/src/components/button-group.scss | 7 +
.../bstw/src/components/button-link.scss | 52 ++++
.../themes/bstw/src/components/button.scss | 22 ++
packages/themes/bstw/src/components/card.scss | 33 ++
.../themes/bstw/src/components/details.scss | 14 +
.../themes/bstw/src/components/heading.scss | 29 ++
packages/themes/bstw/src/components/icon.scss | 10 +
.../bstw/src/components/indented-text.scss | 12 +
.../bstw/src/components/input-checkbox.scss | 272 +++++++++++++++++
.../bstw/src/components/input-color.scss | 110 +++++++
.../bstw/src/components/input-date.scss | 101 ++++++
.../bstw/src/components/input-email.scss | 101 ++++++
.../bstw/src/components/input-file.scss | 109 +++++++
.../bstw/src/components/input-number.scss | 101 ++++++
.../bstw/src/components/input-password.scss | 101 ++++++
.../bstw/src/components/input-radio.scss | 154 ++++++++++
.../bstw/src/components/input-range.scss | 96 ++++++
.../bstw/src/components/input-text.scss | 101 ++++++
.../themes/bstw/src/components/kolibri.scss | 5 +
.../bstw/src/components/link-button.scss | 145 +++++++++
packages/themes/bstw/src/components/link.scss | 45 +++
.../themes/bstw/src/components/modal.scss | 5 +
packages/themes/bstw/src/components/nav.scss | 85 ++++++
.../bstw/src/components/pagination.scss | 46 +++
.../themes/bstw/src/components/progress.scss | 26 ++
.../themes/bstw/src/components/select.scss | 132 ++++++++
.../themes/bstw/src/components/skip-nav.scss | 18 ++
.../bstw/src/components/split-button.scss | 41 +++
.../bstw/src/components/table-stateful.scss | 15 +
.../bstw/src/components/table-stateless.scss | 82 +++++
packages/themes/bstw/src/components/tabs.scss | 174 +++++++++++
.../themes/bstw/src/components/textarea.scss | 118 +++++++
.../bstw/src/components/toast-container.scss | 10 +
.../themes/bstw/src/components/tree-item.scss | 35 +++
packages/themes/bstw/src/components/tree.scss | 7 +
packages/themes/bstw/src/global.scss | 88 ++++++
packages/themes/bstw/src/globals.d.ts | 4 +
packages/themes/bstw/src/index.ts | 88 ++++++
packages/themes/bstw/src/mixins/alert-wc.scss | 259 ++++++++++++++++
packages/themes/bstw/src/mixins/button.scss | 133 ++++++++
.../themes/bstw/src/mixins/focus-outline.scss | 6 +
packages/themes/bstw/tsconfig.json | 31 ++
pnpm-lock.yaml | 265 +++++++++-------
pnpm-workspace.yaml | 1 +
55 files changed, 3808 insertions(+), 114 deletions(-)
create mode 100644 packages/themes/bstw/.eslintrc.cjs
create mode 100644 packages/themes/bstw/LICENSE
create mode 100644 packages/themes/bstw/README.md
create mode 100644 packages/themes/bstw/build.config.ts
create mode 100644 packages/themes/bstw/package.json
create mode 100644 packages/themes/bstw/src/components/abbr.scss
create mode 100644 packages/themes/bstw/src/components/accordion.scss
create mode 100644 packages/themes/bstw/src/components/alert.scss
create mode 100644 packages/themes/bstw/src/components/avatar.scss
create mode 100644 packages/themes/bstw/src/components/badge.scss
create mode 100644 packages/themes/bstw/src/components/breadcrumb.scss
create mode 100644 packages/themes/bstw/src/components/button-group.scss
create mode 100644 packages/themes/bstw/src/components/button-link.scss
create mode 100644 packages/themes/bstw/src/components/button.scss
create mode 100644 packages/themes/bstw/src/components/card.scss
create mode 100644 packages/themes/bstw/src/components/details.scss
create mode 100644 packages/themes/bstw/src/components/heading.scss
create mode 100644 packages/themes/bstw/src/components/icon.scss
create mode 100644 packages/themes/bstw/src/components/indented-text.scss
create mode 100644 packages/themes/bstw/src/components/input-checkbox.scss
create mode 100644 packages/themes/bstw/src/components/input-color.scss
create mode 100644 packages/themes/bstw/src/components/input-date.scss
create mode 100644 packages/themes/bstw/src/components/input-email.scss
create mode 100644 packages/themes/bstw/src/components/input-file.scss
create mode 100644 packages/themes/bstw/src/components/input-number.scss
create mode 100644 packages/themes/bstw/src/components/input-password.scss
create mode 100644 packages/themes/bstw/src/components/input-radio.scss
create mode 100644 packages/themes/bstw/src/components/input-range.scss
create mode 100644 packages/themes/bstw/src/components/input-text.scss
create mode 100644 packages/themes/bstw/src/components/kolibri.scss
create mode 100644 packages/themes/bstw/src/components/link-button.scss
create mode 100644 packages/themes/bstw/src/components/link.scss
create mode 100644 packages/themes/bstw/src/components/modal.scss
create mode 100644 packages/themes/bstw/src/components/nav.scss
create mode 100644 packages/themes/bstw/src/components/pagination.scss
create mode 100644 packages/themes/bstw/src/components/progress.scss
create mode 100644 packages/themes/bstw/src/components/select.scss
create mode 100644 packages/themes/bstw/src/components/skip-nav.scss
create mode 100644 packages/themes/bstw/src/components/split-button.scss
create mode 100644 packages/themes/bstw/src/components/table-stateful.scss
create mode 100644 packages/themes/bstw/src/components/table-stateless.scss
create mode 100644 packages/themes/bstw/src/components/tabs.scss
create mode 100644 packages/themes/bstw/src/components/textarea.scss
create mode 100644 packages/themes/bstw/src/components/toast-container.scss
create mode 100644 packages/themes/bstw/src/components/tree-item.scss
create mode 100644 packages/themes/bstw/src/components/tree.scss
create mode 100644 packages/themes/bstw/src/global.scss
create mode 100644 packages/themes/bstw/src/globals.d.ts
create mode 100644 packages/themes/bstw/src/index.ts
create mode 100644 packages/themes/bstw/src/mixins/alert-wc.scss
create mode 100644 packages/themes/bstw/src/mixins/button.scss
create mode 100644 packages/themes/bstw/src/mixins/focus-outline.scss
create mode 100644 packages/themes/bstw/tsconfig.json
diff --git a/packages/themes/bstw/.eslintrc.cjs b/packages/themes/bstw/.eslintrc.cjs
new file mode 100644
index 0000000000..6c245508a5
--- /dev/null
+++ b/packages/themes/bstw/.eslintrc.cjs
@@ -0,0 +1,13 @@
+module.exports = {
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ project: 'tsconfig.json',
+ sourceType: 'module',
+ tsconfigRootDir: __dirname,
+ },
+ plugins: ['@typescript-eslint', 'no-loops'],
+ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
+ rules: {
+ '@typescript-eslint/no-namespace': 'off',
+ },
+};
diff --git a/packages/themes/bstw/LICENSE b/packages/themes/bstw/LICENSE
new file mode 100644
index 0000000000..4153cd3775
--- /dev/null
+++ b/packages/themes/bstw/LICENSE
@@ -0,0 +1,287 @@
+ EUROPEAN UNION PUBLIC LICENCE v. 1.2
+ EUPL © the European Union 2007, 2016
+
+This European Union Public Licence (the ‘EUPL’) applies to the Work (as defined
+below) which is provided under the terms of this Licence. Any use of the Work,
+other than as authorised under this Licence is prohibited (to the extent such
+use is covered by a right of the copyright holder of the Work).
+
+The Work is provided under the terms of this Licence when the Licensor (as
+defined below) has placed the following notice immediately following the
+copyright notice for the Work:
+
+ Licensed under the EUPL
+
+or has expressed by any other means his willingness to license under the EUPL.
+
+1. Definitions
+
+In this Licence, the following terms have the following meaning:
+
+- ‘The Licence’: this Licence.
+
+- ‘The Original Work’: the work or software distributed or communicated by the
+ Licensor under this Licence, available as Source Code and also as Executable
+ Code as the case may be.
+
+- ‘Derivative Works’: the works or software that could be created by the
+ Licensee, based upon the Original Work or modifications thereof. This Licence
+ does not define the extent of modification or dependence on the Original Work
+ required in order to classify a work as a Derivative Work; this extent is
+ determined by copyright law applicable in the country mentioned in Article 15.
+
+- ‘The Work’: the Original Work or its Derivative Works.
+
+- ‘The Source Code’: the human-readable form of the Work which is the most
+ convenient for people to study and modify.
+
+- ‘The Executable Code’: any code which has generally been compiled and which is
+ meant to be interpreted by a computer as a program.
+
+- ‘The Licensor’: the natural or legal person that distributes or communicates
+ the Work under the Licence.
+
+- ‘Contributor(s)’: any natural or legal person who modifies the Work under the
+ Licence, or otherwise contributes to the creation of a Derivative Work.
+
+- ‘The Licensee’ or ‘You’: any natural or legal person who makes any usage of
+ the Work under the terms of the Licence.
+
+- ‘Distribution’ or ‘Communication’: any act of selling, giving, lending,
+ renting, distributing, communicating, transmitting, or otherwise making
+ available, online or offline, copies of the Work or providing access to its
+ essential functionalities at the disposal of any other natural or legal
+ person.
+
+2. Scope of the rights granted by the Licence
+
+The Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
+sublicensable licence to do the following, for the duration of copyright vested
+in the Original Work:
+
+- use the Work in any circumstance and for all usage,
+- reproduce the Work,
+- modify the Work, and make Derivative Works based upon the Work,
+- communicate to the public, including the right to make available or display
+ the Work or copies thereof to the public and perform publicly, as the case may
+ be, the Work,
+- distribute the Work or copies thereof,
+- lend and rent the Work or copies thereof,
+- sublicense rights in the Work or copies thereof.
+
+Those rights can be exercised on any media, supports and formats, whether now
+known or later invented, as far as the applicable law permits so.
+
+In the countries where moral rights apply, the Licensor waives his right to
+exercise his moral right to the extent allowed by law in order to make effective
+the licence of the economic rights here above listed.
+
+The Licensor grants to the Licensee royalty-free, non-exclusive usage rights to
+any patents held by the Licensor, to the extent necessary to make use of the
+rights granted on the Work under this Licence.
+
+3. Communication of the Source Code
+
+The Licensor may provide the Work either in its Source Code form, or as
+Executable Code. If the Work is provided as Executable Code, the Licensor
+provides in addition a machine-readable copy of the Source Code of the Work
+along with each copy of the Work that the Licensor distributes or indicates, in
+a notice following the copyright notice attached to the Work, a repository where
+the Source Code is easily and freely accessible for as long as the Licensor
+continues to distribute or communicate the Work.
+
+4. Limitations on copyright
+
+Nothing in this Licence is intended to deprive the Licensee of the benefits from
+any exception or limitation to the exclusive rights of the rights owners in the
+Work, of the exhaustion of those rights or of other applicable limitations
+thereto.
+
+5. Obligations of the Licensee
+
+The grant of the rights mentioned above is subject to some restrictions and
+obligations imposed on the Licensee. Those obligations are the following:
+
+Attribution right: The Licensee shall keep intact all copyright, patent or
+trademarks notices and all notices that refer to the Licence and to the
+disclaimer of warranties. The Licensee must include a copy of such notices and a
+copy of the Licence with every copy of the Work he/she distributes or
+communicates. The Licensee must cause any Derivative Work to carry prominent
+notices stating that the Work has been modified and the date of modification.
+
+Copyleft clause: If the Licensee distributes or communicates copies of the
+Original Works or Derivative Works, this Distribution or Communication will be
+done under the terms of this Licence or of a later version of this Licence
+unless the Original Work is expressly distributed only under this version of the
+Licence — for example by communicating ‘EUPL v. 1.2 only’. The Licensee
+(becoming Licensor) cannot offer or impose any additional terms or conditions on
+the Work or Derivative Work that alter or restrict the terms of the Licence.
+
+Compatibility clause: If the Licensee Distributes or Communicates Derivative
+Works or copies thereof based upon both the Work and another work licensed under
+a Compatible Licence, this Distribution or Communication can be done under the
+terms of this Compatible Licence. For the sake of this clause, ‘Compatible
+Licence’ refers to the licences listed in the appendix attached to this Licence.
+Should the Licensee's obligations under the Compatible Licence conflict with
+his/her obligations under this Licence, the obligations of the Compatible
+Licence shall prevail.
+
+Provision of Source Code: When distributing or communicating copies of the Work,
+the Licensee will provide a machine-readable copy of the Source Code or indicate
+a repository where this Source will be easily and freely available for as long
+as the Licensee continues to distribute or communicate the Work.
+
+Legal Protection: This Licence does not grant permission to use the trade names,
+trademarks, service marks, or 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 copyright notice.
+
+6. Chain of Authorship
+
+The original Licensor warrants that the copyright in the Original Work granted
+hereunder is owned by him/her or licensed to him/her and that he/she has the
+power and authority to grant the Licence.
+
+Each Contributor warrants that the copyright in the modifications he/she brings
+to the Work are owned by him/her or licensed to him/her and that he/she has the
+power and authority to grant the Licence.
+
+Each time You accept the Licence, the original Licensor and subsequent
+Contributors grant You a licence to their contributions to the Work, under the
+terms of this Licence.
+
+7. Disclaimer of Warranty
+
+The Work is a work in progress, which is continuously improved by numerous
+Contributors. It is not a finished work and may therefore contain defects or
+‘bugs’ inherent to this type of development.
+
+For the above reason, the Work is provided under the Licence on an ‘as is’ basis
+and without warranties of any kind concerning the Work, including without
+limitation merchantability, fitness for a particular purpose, absence of defects
+or errors, accuracy, non-infringement of intellectual property rights other than
+copyright as stated in Article 6 of this Licence.
+
+This disclaimer of warranty is an essential part of the Licence and a condition
+for the grant of any rights to the Work.
+
+8. Disclaimer of Liability
+
+Except in the cases of wilful misconduct or damages directly caused to natural
+persons, the Licensor will in no event be liable for any direct or indirect,
+material or moral, damages of any kind, arising out of the Licence or of the use
+of the Work, including without limitation, damages for loss of goodwill, work
+stoppage, computer failure or malfunction, loss of data or any commercial
+damage, even if the Licensor has been advised of the possibility of such damage.
+However, the Licensor will be liable under statutory product liability laws as
+far such laws apply to the Work.
+
+9. Additional agreements
+
+While distributing the Work, You may choose to conclude an additional agreement,
+defining obligations or services consistent with this Licence. However, if
+accepting obligations, You may act only on your own behalf and on your sole
+responsibility, not on behalf of the original Licensor or 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
+the fact You have accepted any warranty or additional liability.
+
+10. Acceptance of the Licence
+
+The provisions of this Licence can be accepted by clicking on an icon ‘I agree’
+placed under the bottom of a window displaying the text of this Licence or by
+affirming consent in any other similar way, in accordance with the rules of
+applicable law. Clicking on that icon indicates your clear and irrevocable
+acceptance of this Licence and all of its terms and conditions.
+
+Similarly, you irrevocably accept this Licence and all of its terms and
+conditions by exercising any rights granted to You by Article 2 of this Licence,
+such as the use of the Work, the creation by You of a Derivative Work or the
+Distribution or Communication by You of the Work or copies thereof.
+
+11. Information to the public
+
+In case of any Distribution or Communication of the Work by means of electronic
+communication by You (for example, by offering to download the Work from a
+remote location) the distribution channel or media (for example, a website) must
+at least provide to the public the information requested by the applicable law
+regarding the Licensor, the Licence and the way it may be accessible, concluded,
+stored and reproduced by the Licensee.
+
+12. Termination of the Licence
+
+The Licence and the rights granted hereunder will terminate automatically upon
+any breach by the Licensee of the terms of the Licence.
+
+Such a termination will not terminate the licences of any person who has
+received the Work from the Licensee under the Licence, provided such persons
+remain in full compliance with the Licence.
+
+13. Miscellaneous
+
+Without prejudice of Article 9 above, the Licence represents the complete
+agreement between the Parties as to the Work.
+
+If any provision of the Licence is invalid or unenforceable under applicable
+law, this will not affect the validity or enforceability of the Licence as a
+whole. Such provision will be construed or reformed so as necessary to make it
+valid and enforceable.
+
+The European Commission may publish other linguistic versions or new versions of
+this Licence or updated versions of the Appendix, so far this is required and
+reasonable, without reducing the scope of the rights granted by the Licence. New
+versions of the Licence will be published with a unique version number.
+
+All linguistic versions of this Licence, approved by the European Commission,
+have identical value. Parties can take advantage of the linguistic version of
+their choice.
+
+14. Jurisdiction
+
+Without prejudice to specific agreement between parties,
+
+- any litigation resulting from the interpretation of this License, arising
+ between the European Union institutions, bodies, offices or agencies, as a
+ Licensor, and any Licensee, will be subject to the jurisdiction of the Court
+ of Justice of the European Union, as laid down in article 272 of the Treaty on
+ the Functioning of the European Union,
+
+- any litigation arising between other parties and resulting from the
+ interpretation of this License, will be subject to the exclusive jurisdiction
+ of the competent court where the Licensor resides or conducts its primary
+ business.
+
+15. Applicable Law
+
+Without prejudice to specific agreement between parties,
+
+- this Licence shall be governed by the law of the European Union Member State
+ where the Licensor has his seat, resides or has his registered office,
+
+- this licence shall be governed by Belgian law if the Licensor has no seat,
+ residence or registered office inside a European Union Member State.
+
+Appendix
+
+‘Compatible Licences’ according to Article 5 EUPL are:
+
+- GNU General Public License (GPL) v. 2, v. 3
+- GNU Affero General Public License (AGPL) v. 3
+- Open Software License (OSL) v. 2.1, v. 3.0
+- Eclipse Public License (EPL) v. 1.0
+- CeCILL v. 2.0, v. 2.1
+- Mozilla Public Licence (MPL) v. 2
+- GNU Lesser General Public Licence (LGPL) v. 2.1, v. 3
+- Creative Commons Attribution-ShareAlike v. 3.0 Unported (CC BY-SA 3.0) for
+ works other than software
+- European Union Public Licence (EUPL) v. 1.1, v. 1.2
+- Québec Free and Open-Source Licence — Reciprocity (LiLiQ-R) or Strong
+ Reciprocity (LiLiQ-R+).
+
+The European Commission may update this Appendix to later versions of the above
+licences without producing a new version of the EUPL, as long as they provide
+the rights granted in Article 2 of this Licence and protect the covered Source
+Code from exclusive appropriation.
+
+All other changes or additions to this Appendix require the production of a new
+EUPL version.
diff --git a/packages/themes/bstw/README.md b/packages/themes/bstw/README.md
new file mode 100644
index 0000000000..ee92399ced
--- /dev/null
+++ b/packages/themes/bstw/README.md
@@ -0,0 +1,74 @@
+# Public UI - BStW-Theme
+
+This is the default theme for the [Public UI web component library](https://public-ui.github.io). You can customize this theme by using `css variables` or by creating a new theme.
+
+## Integration in React
+
+```tsx
+import { register } from '@public-ui/components';
+import { defineCustomElements } from '@public-ui/components/dist/loader';
+import { BStW } from '@public-ui/theme-bstw';
+
+register(BStW, defineCustomElements).then(() => {
+ ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ ,
+ );
+});
+```
+
+## Full documentation
+
+👉 [https://public-ui.github.io](https://public-ui.github.io)
+
+## Usage (DE)
+
+Das Default-Theme ist ein _Token-Based_ Theme, das mit minimalen Anpassungen sofort verwendet werden kann. Es bringt bereits alle notwendigen Stylings mit und kann
+über Design Tokens, in Form von _CSS Custom Properties_ an das eigene Design angepasst werden.
+
+### Variablen
+
+| Variable | Standard-Wert | Bedeutung |
+| --------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------- |
+| `--kolibri-border-radius` | `5px` | Border-Radius für abgerundete Elemente |
+| `--kolibri-font-family` | `BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif` | Allgemeine Schriftart |
+| `--kolibri-font-size` | `16px` | Allgemeine Schriftgröße |
+| `--kolibri-spacing` | `0.25rem` | Allgemeiner Abstand zwischen Elementen |
+| `--kolibri-border-width` | `1px` | Allgemeine Rahmen-Breite |
+| `--kolibri-color-primary` | `#004b76` | Primärfarbe |
+| `--kolibri-color-primary-variant` | `#0077b6` | Alternative Variante der Primärfarbe |
+| `--kolibri-color-danger` | `#c0003c` | Farbe für Fehlermeldungen und gefährliche Aktionen |
+| `--kolibri-color-warning` | `#c44931` | Farbe für Warnungen |
+| `--kolibri-color-success` | `#005c45` | Farbe für Erfolgsmeldungen |
+| `--kolibri-color-subtle` | `#576164` | Farbe für feine Akzente wie z.B. Rahmen |
+| `--kolibri-color-light` | `#ffffff` | Helle Farbe für z.B. Hintergründe |
+| `--kolibri-color-text` | `#202020` | Textfarbe |
+| `--kolibri-color-mute` | `#f2f3f4` | Farbe für deaktivierte Elemente |
+| `--kolibri-color-mute-variant` | `#bec5c9` | Alternative Farbe für deaktivierte Elemente |
+
+### Verwendung
+
+Theme importieren und registrieren:
+
+```js
+import { register } from '@public-ui/components';
+import { defineCustomElements } from '@public-ui/components/dist/loader';
+import { BStW } from '@public-ui/theme-bstw';
+
+register(BStW, defineCustomElements);
+```
+
+Für mehr Details und weitere Optionen siehe [Erste Schritte](https://public-ui.github.io/docs/get-started/first-steps#einbinden-in-ein-bestehendes-projekt).
+
+Um die _Design Tokens_ anzupassen, reicht ein einfaches Stylesheet, das die gewünschten Custom Properties überschreibt. Es ist dabei nicht notwendig, alle Properties zu setzen, sondern nur solche, die auch überschrieben werden sollen. Beispiel:
+
+```css
+:root {
+ --kolibri-border-radius: 3px;
+ --kolibri-font-size: 18px;
+ --kolibri-spacing: 0.3rem;
+ --kolibri-color-primary: #cc006e;
+ --kolibri-color-primary-variant: #ff64b9;
+}
+```
diff --git a/packages/themes/bstw/build.config.ts b/packages/themes/bstw/build.config.ts
new file mode 100644
index 0000000000..7f5e8c1afb
--- /dev/null
+++ b/packages/themes/bstw/build.config.ts
@@ -0,0 +1,25 @@
+import { defineBuildConfig } from 'unbuild';
+import postcss from 'rollup-plugin-postcss';
+
+export default defineBuildConfig({
+ entries: ['src/index'],
+ clean: true,
+ declaration: true,
+ externals: [],
+ rollup: {
+ emitCJS: true,
+ inlineDependencies: true,
+ },
+ hooks: {
+ 'rollup:options'(_buildContext, options) {
+ options.plugins = (options.plugins ?? []) as Plugin[];
+ options.plugins = options.plugins.filter((plugin) => (plugin as Plugin).name !== 'unbuild-raw');
+ options.plugins.push(
+ postcss({
+ plugins: [],
+ inject: false,
+ }),
+ );
+ },
+ },
+});
diff --git a/packages/themes/bstw/package.json b/packages/themes/bstw/package.json
new file mode 100644
index 0000000000..a040900ee7
--- /dev/null
+++ b/packages/themes/bstw/package.json
@@ -0,0 +1,84 @@
+{
+ "name": "@public-ui/theme-default",
+ "version": "2.0.14",
+ "license": "EUPL-1.2",
+ "homepage": "https://public-ui.github.io",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/public-ui/kolibri"
+ },
+ "bugs": {
+ "url": "https://github.com/public-ui/kolibri/issues",
+ "email": "kolibri@itzbund.de"
+ },
+ "author": {
+ "name": "Informationstechnikzentrum Bund",
+ "email": "kolibri@itzbund.de"
+ },
+ "description": "Contains the default theme for KoliBri - The accessible HTML-Standard.",
+ "keywords": [
+ "accessibility",
+ "accessible",
+ "bitv",
+ "designsystem",
+ "design",
+ "web components",
+ "webcomponents",
+ "aria",
+ "wai",
+ "axe",
+ "custom elements",
+ "styleguide",
+ "style",
+ "guide",
+ "ui",
+ "html",
+ "css",
+ "web",
+ "a11y",
+ "w3c",
+ "webstandard",
+ "wcag"
+ ],
+ "scripts": {
+ "build": "unbuild",
+ "format": "prettier --check src",
+ "lint": "tsc --noemit && eslint src",
+ "prepack": "unbuild",
+ "test": "THEME_MODULE=dist THEME_EXPORT=BStW kolibri-visual-test",
+ "test-update": "THEME_MODULE=dist THEME_EXPORT=BStW kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+ "pretest": "pnpm build",
+ "pretest-update": "pnpm build"
+ },
+ "devDependencies": {
+ "@public-ui/schema": "2.0.14",
+ "@public-ui/visual-tests": "2.0.14",
+ "@types/node": "ts5.4",
+ "@typescript-eslint/eslint-plugin": "7.6.0",
+ "@typescript-eslint/parser": "7.6.0",
+ "eslint": "8.57.0",
+ "eslint-plugin-no-loops": "0.3.0",
+ "rollup-plugin-postcss": "4.0.2",
+ "typescript": "5.4.5",
+ "unbuild": "1.2.1"
+ },
+ "peerDependencies": {
+ "@public-ui/components": "2.0.14"
+ },
+ "sideEffects": false,
+ "type": "module",
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.mjs",
+ "require": "./dist/index.cjs"
+ }
+ },
+ "main": "./dist/index.cjs",
+ "module": "./dist/index.mjs",
+ "types": "./dist/index.d.ts",
+ "files": [
+ "assets",
+ "dist"
+ ]
+}
diff --git a/packages/themes/bstw/src/components/abbr.scss b/packages/themes/bstw/src/components/abbr.scss
new file mode 100644
index 0000000000..719f4a782d
--- /dev/null
+++ b/packages/themes/bstw/src/components/abbr.scss
@@ -0,0 +1,6 @@
+@layer kol-theme-component {
+ abbr {
+ border-bottom: dashed var(--color-text) 1px;
+ text-decoration: none !important;
+ }
+}
diff --git a/packages/themes/bstw/src/components/accordion.scss b/packages/themes/bstw/src/components/accordion.scss
new file mode 100644
index 0000000000..f13dfb5889
--- /dev/null
+++ b/packages/themes/bstw/src/components/accordion.scss
@@ -0,0 +1,61 @@
+@import '../mixins/focus-outline';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+
+ .kol-span-wc > span {
+ display: flex;
+ place-items: baseline center;
+ text-align: left;
+ }
+
+ :host > div > .kol-heading-wc button {
+ border-radius: var(--border-radius);
+ min-height: 2.2rem;
+ padding: 12px 8px;
+ }
+
+ :host > div > .kol-heading-wc button .kol-span-wc {
+ font-weight: 700;
+ font-size: 1.125rem;
+ line-height: 20px;
+ gap: 0.5rem;
+ }
+
+ :host > div > .kol-heading-wc button .kol-span-wc > span {
+ gap: 0.5em;
+ }
+
+ :host > div > .kol-heading-wc button .kol-icon {
+ color: var(--color-primary);
+ font-size: 1rem;
+ }
+
+ :host > div {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ }
+
+ :host > div div[class='header'],
+ :host > div[class*='open'] div[class='content'] {
+ margin: 0;
+ }
+
+ :host > div div[class='content'] {
+ padding-left: 2.25em;
+ padding-bottom: 12px;
+ padding-right: 8px;
+ }
+
+ button:focus {
+ outline: none;
+ }
+
+ :host > .accordion:focus-within {
+ @include focus-outline;
+ cursor: pointer;
+ }
+}
diff --git a/packages/themes/bstw/src/components/alert.scss b/packages/themes/bstw/src/components/alert.scss
new file mode 100644
index 0000000000..0b60ea1f05
--- /dev/null
+++ b/packages/themes/bstw/src/components/alert.scss
@@ -0,0 +1,8 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+}
diff --git a/packages/themes/bstw/src/components/avatar.scss b/packages/themes/bstw/src/components/avatar.scss
new file mode 100644
index 0000000000..0b6f6e0ca9
--- /dev/null
+++ b/packages/themes/bstw/src/components/avatar.scss
@@ -0,0 +1,5 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+}
diff --git a/packages/themes/bstw/src/components/badge.scss b/packages/themes/bstw/src/components/badge.scss
new file mode 100644
index 0000000000..689b42828d
--- /dev/null
+++ b/packages/themes/bstw/src/components/badge.scss
@@ -0,0 +1,44 @@
+@layer kol-theme-component {
+ :host {
+ display: inline-block;
+ font-family: var(--font-family);
+ font-size: inherit;
+ }
+
+ :host > span {
+ border-radius: var(--border-radius);
+ display: inline-flex;
+ font-style: normal;
+ }
+
+ :host > span.smart-button {
+ align-items: center;
+ }
+
+ :host > span .kol-button-wc:hover > button {
+ background-color: var(--color-primary-variant);
+ color: var(--color-light);
+ }
+
+ :host > span .kol-button-wc > button {
+ color: inherit;
+ border-top-right-radius: var(--border-radius);
+ border-bottom-right-radius: var(--border-radius);
+ padding: 0.2rem;
+ }
+
+ :host > span .kol-span-wc {
+ padding: 0.25rem 0.75rem;
+ }
+
+ :host > span > .kol-span-wc {
+ align-items: center;
+ font-style: normal;
+ gap: 0.5rem;
+ }
+
+ :host > span > .kol-span-wc > span {
+ display: flex;
+ gap: 0.25rem;
+ }
+}
diff --git a/packages/themes/bstw/src/components/breadcrumb.scss b/packages/themes/bstw/src/components/breadcrumb.scss
new file mode 100644
index 0000000000..86608592aa
--- /dev/null
+++ b/packages/themes/bstw/src/components/breadcrumb.scss
@@ -0,0 +1,26 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+
+ li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {
+ font-size: 0.75rem;
+ color: var(--color-subtle);
+ }
+
+ .kol-link::part(icon) {
+ font-size: 1.25rem;
+ }
+
+ ul li > :is(span, .kol-link) {
+ line-height: 1.25rem;
+ }
+
+ ul li:last-child > span {
+ color: var(--color-subtle);
+ }
+
+ .kol-link {
+ font-family: var(--font-family);
+ }
+}
diff --git a/packages/themes/bstw/src/components/button-group.scss b/packages/themes/bstw/src/components/button-group.scss
new file mode 100644
index 0000000000..dd15173e81
--- /dev/null
+++ b/packages/themes/bstw/src/components/button-group.scss
@@ -0,0 +1,7 @@
+@layer kol-theme-component {
+ :host > .kol-button-group-wc {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--spacing);
+ }
+}
diff --git a/packages/themes/bstw/src/components/button-link.scss b/packages/themes/bstw/src/components/button-link.scss
new file mode 100644
index 0000000000..40027e6f5e
--- /dev/null
+++ b/packages/themes/bstw/src/components/button-link.scss
@@ -0,0 +1,52 @@
+@layer kol-theme-component {
+ :is(a, button) {
+ color: var(--color-primary);
+ font-style: normal;
+ font-weight: 400;
+ text-decoration-line: underline;
+ font-size: inherit;
+ }
+
+ :is(a, button):focus {
+ outline: none;
+ }
+
+ :is(a, button):focus .kol-span-wc {
+ border-radius: var(--border-radius);
+ outline: calc(var(--border-width) * 2) solid;
+ }
+
+ a:hover:not([aria-disabled]),
+ button:hover:not([disabled]) {
+ text-decoration-thickness: 0.25em;
+ }
+
+ :is(a, button):visited {
+ color: var(--visited);
+ }
+
+ .hidden {
+ display: none;
+ visibility: hidden;
+ }
+
+ .skip {
+ left: -99999px;
+ overflow: hidden;
+ position: absolute;
+ z-index: 9999999;
+ }
+
+ .skip:focus {
+ background: white;
+ left: unset;
+ position: unset;
+ }
+
+ .access-key-hint {
+ background: var(--color-mute-variant);
+ border-radius: 3px;
+ color: var(--color-text);
+ padding: 0 0.3em;
+ }
+}
diff --git a/packages/themes/bstw/src/components/button.scss b/packages/themes/bstw/src/components/button.scss
new file mode 100644
index 0000000000..46b4a5fe57
--- /dev/null
+++ b/packages/themes/bstw/src/components/button.scss
@@ -0,0 +1,22 @@
+@import '../mixins/button.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+
+ :is(a, button) > .kol-span-wc {
+ font-weight: 700;
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: var(--border-width);
+ min-height: var(--a11y-min-size);
+ min-width: var(--a11y-min-size);
+ padding: 8px 14px;
+ text-align: center;
+ transition-duration: 0.5s;
+ transition-property: background-color, color, border-color;
+ }
+
+ @include kol-button;
+}
diff --git a/packages/themes/bstw/src/components/card.scss b/packages/themes/bstw/src/components/card.scss
new file mode 100644
index 0000000000..2e52a96098
--- /dev/null
+++ b/packages/themes/bstw/src/components/card.scss
@@ -0,0 +1,33 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+
+ /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */
+ :host > div {
+ display: grid;
+ width: 100%;
+ height: 100%;
+ background-color: var(--color-light);
+ grid-template-rows: min-content 2fr min-content;
+ box-shadow: 0 0 0.25rem var(--color-subtle);
+ border-radius: var(--border-radius);
+ }
+
+ :host .kol-heading-wc {
+ line-height: 1.75rem;
+ }
+
+ :host div.header {
+ padding: 1rem 1rem 0.5rem 1rem;
+ }
+
+ :host div.content {
+ padding: 0.5rem 1rem 1rem;
+ overflow: hidden;
+ }
+
+ :host div.footer {
+ padding: 0.5rem 1rem;
+ }
+}
diff --git a/packages/themes/bstw/src/components/details.scss b/packages/themes/bstw/src/components/details.scss
new file mode 100644
index 0000000000..afddaab0bb
--- /dev/null
+++ b/packages/themes/bstw/src/components/details.scss
@@ -0,0 +1,14 @@
+@layer kol-theme-component {
+ details > summary {
+ border-radius: var(--border-radius);
+ font-family: var(--font-family);
+ }
+
+ details .kol-indented-text-wc {
+ margin: 0.25rem 0 0 0.65rem;
+ }
+
+ .kol-icon {
+ font-size: 1.2rem;
+ }
+}
diff --git a/packages/themes/bstw/src/components/heading.scss b/packages/themes/bstw/src/components/heading.scss
new file mode 100644
index 0000000000..a5976daf69
--- /dev/null
+++ b/packages/themes/bstw/src/components/heading.scss
@@ -0,0 +1,29 @@
+@layer kol-theme-component {
+ .headline-h1,
+ .headline-h2,
+ .headline-h3,
+ .headline-h4,
+ .headline-h5,
+ .headline-h6 {
+ color: inherit;
+ font-style: normal;
+ font-family: var(--font-family);
+ }
+ .headline-h1,
+ .headline-h2,
+ .headline-h3 {
+ font-weight: 700;
+ }
+ .headline-h1 {
+ font-size: 1.5rem;
+ line-height: 1.75rem;
+ }
+ .headline-h2 {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ }
+ .headline-h3 {
+ font-size: 1.125rem;
+ line-height: 1.5rem;
+ }
+}
diff --git a/packages/themes/bstw/src/components/icon.scss b/packages/themes/bstw/src/components/icon.scss
new file mode 100644
index 0000000000..85ac807f8f
--- /dev/null
+++ b/packages/themes/bstw/src/components/icon.scss
@@ -0,0 +1,10 @@
+@layer kol-theme-component {
+ :host {
+ width: 1em;
+ height: 1em;
+ }
+ :host > i {
+ width: 1em;
+ height: 1em;
+ }
+}
diff --git a/packages/themes/bstw/src/components/indented-text.scss b/packages/themes/bstw/src/components/indented-text.scss
new file mode 100644
index 0000000000..c2343d6da7
--- /dev/null
+++ b/packages/themes/bstw/src/components/indented-text.scss
@@ -0,0 +1,12 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+ :host > div {
+ background-color: var(--color-light);
+ border-left: none;
+ box-shadow: -2px 0px 0px var(--color-primary-variant);
+ padding: 0 0.5rem;
+ width: 100%;
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-checkbox.scss b/packages/themes/bstw/src/components/input-checkbox.scss
new file mode 100644
index 0000000000..1cd3c4b3f1
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-checkbox.scss
@@ -0,0 +1,272 @@
+@import '../mixins/focus-outline';
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ :host .kol-input {
+ display: grid;
+ align-items: center;
+ justify-items: left;
+ width: 100%;
+ min-height: var(--a11y-min-size);
+ gap: 0.4rem;
+ }
+
+ :host .kol-input.default {
+ grid-template-columns: 1.5rem auto;
+ }
+
+ :host .kol-input.switch {
+ grid-template-columns: 3.5rem auto;
+ }
+
+ :host .kol-input.button {
+ gap: 0.4rem 1px;
+ }
+
+ .checkbox-container {
+ justify-content: flex-start;
+ }
+
+ :host .kol-input > div.input {
+ display: inherit;
+ min-height: var(--a11y-min-size);
+ order: 2;
+ }
+
+ :host .kol-input > div.input input {
+ margin: 0px;
+ }
+
+ :host .kol-input > label {
+ order: 3;
+ }
+
+ .disabled .input-label,
+ .disabled .checkbox-container {
+ cursor: not-allowed;
+ }
+
+ :host .kol-input > .kol-alert-wc.error {
+ order: 1;
+ padding-top: calc(var(--spacing) / 2);
+ grid-column: span 2 / auto;
+ }
+
+ :host .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ :host .kol-input.error input:focus,
+ .kol-input.error select:focus,
+ .kol-input.error textarea:focus {
+ outline-color: var(--color-danger) !important;
+ }
+
+ :host .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ :host input {
+ cursor: pointer;
+ order: 1;
+ width: 100%;
+ border-color: var(--color-subtle);
+ border-width: 2px;
+ border-style: solid;
+ border-radius: var(--border-radius);
+ line-height: 24px;
+ font-size: 1rem;
+ }
+
+ :host input:hover {
+ border-color: var(--color-primary);
+ box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+ }
+
+ :host input:focus:hover {
+ box-shadow: none;
+ }
+
+ :host input:active {
+ box-shadow: none;
+ }
+
+ :host .kol-alert-wc {
+ @include kol-alert-wc;
+ }
+
+ /* CHECKBOX */
+ :host .kol-input label span {
+ margin-top: 0.125rem;
+ }
+
+ :host .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ :host .kol-input input[type='checkbox'] {
+ appearance: none;
+ background-color: white;
+ cursor: pointer;
+ transition: 0.5s;
+ }
+
+ :host .kol-input input[type='checkbox']:checked {
+ background-color: var(--color-primary);
+ border-color: var(--color-primary);
+ }
+
+ :host .kol-input.default input[type='checkbox'] {
+ border-radius: var(--border-radius);
+ height: calc(6 * 0.25rem);
+ min-width: calc(6 * 0.25rem);
+ width: calc(6 * 0.25rem);
+ }
+
+ :host .kol-input.default input[type='checkbox']:indeterminate {
+ background-color: var(--color-primary);
+ }
+
+ :host .kol-input.default .icon {
+ color: var(--color-light);
+ margin-left: 0.25rem;
+ }
+
+ :host .kol-input.switch input[type='checkbox'] {
+ background-color: var(--color-subtle);
+ border-radius: 1.25em;
+ border-width: 0;
+ display: block;
+ height: 1.5em;
+ min-width: 3.5em;
+ position: relative;
+ width: 3.5em;
+ /* Visible with forced colors */
+ outline: transparent solid 1px;
+ }
+
+ :host .kol-input.switch input[type='checkbox']:before {
+ width: 1.25em;
+ height: 1.25em;
+ left: calc(0.25em - 2px);
+ top: calc(0.25em - 2px);
+ border-radius: 1.25em;
+ background-color: white;
+ position: absolute;
+ }
+
+ :host .kol-input.switch input[type='checkbox']:checked {
+ background-color: var(--color-primary);
+ }
+
+ :host .kol-input.switch input[type='checkbox']:checked:before {
+ transform: translateX(2em);
+ }
+
+ :host .kol-input.switch input[type='checkbox']:indeterminate:before {
+ transform: translateX(1em);
+ }
+
+ .switch {
+ & .icon {
+ width: 1.25em;
+ height: 1.25em;
+ left: 2px;
+ }
+
+ &.checked .icon {
+ transform: translate(2em, -50%);
+ }
+
+ &.indeterminate .icon {
+ transform: translate(1em, -50%);
+ }
+ }
+
+ .button {
+ .input {
+ border-top-width: 1px;
+ border-left-width: 1px;
+ border-bottom-width: 1px;
+
+ border-top-style: solid;
+ border-left-style: solid;
+ border-bottom-style: solid;
+ }
+
+ &.hide-label .input {
+ border-right-width: 1px;
+ border-right-style: solid;
+ }
+
+ .input-label {
+ border-top-width: 1px;
+ border-right-width: 1px;
+ border-bottom-width: 1px;
+
+ border-top-style: solid;
+ border-right-style: solid;
+ border-bottom-style: solid;
+
+ justify-self: stretch;
+ align-self: stretch;
+ display: flex;
+
+ padding-right: 1rem;
+
+ .input-label-span {
+ margin: auto 0;
+ }
+ }
+
+ &:focus-within {
+ @include focus-outline;
+ }
+
+ .input,
+ .input-label {
+ border-color: var(--color-primary);
+ background-color: var(--color-light);
+ color: var(--color-primary);
+ }
+
+ &.indeterminate {
+ .input,
+ .input-label {
+ border-color: var(--color-primary);
+ background-color: var(--color-mute);
+ color: var(--color-primary);
+ }
+ }
+
+ &.checked {
+ .input,
+ .input-label {
+ border-color: var(--color-primary);
+ background-color: var(--color-primary);
+ color: var(--color-light);
+ }
+ }
+
+ &:is(:active, :hover):not(.disabled) {
+ .input,
+ .input-label {
+ background-color: var(--color-primary-variant);
+ border-color: var(--color-primary-variant);
+ color: var(--color-light);
+ }
+ }
+
+ &.disabled .input {
+ opacity: 0.5;
+ outline: none;
+ }
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-color.scss b/packages/themes/bstw/src/components/input-color.scss
new file mode 100644
index 0000000000..7f68825af5
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-color.scss
@@ -0,0 +1,110 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ input {
+ border: none;
+ }
+
+ input[type='color'] {
+ border: none;
+ min-height: 40px !important;
+ }
+
+ input[type='color'] {
+ background-color: transparent;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ input:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-date.scss b/packages/themes/bstw/src/components/input-date.scss
new file mode 100644
index 0000000000..00efea0ea8
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-date.scss
@@ -0,0 +1,101 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ input {
+ border: none;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ input:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-email.scss b/packages/themes/bstw/src/components/input-email.scss
new file mode 100644
index 0000000000..00efea0ea8
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-email.scss
@@ -0,0 +1,101 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ input {
+ border: none;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ input:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-file.scss b/packages/themes/bstw/src/components/input-file.scss
new file mode 100644
index 0000000000..839ab2347a
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-file.scss
@@ -0,0 +1,109 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ .kol-input .input input[type='file'] {
+ padding-top: calc(0.5em + 2px);
+ }
+
+ input {
+ border: none;
+ }
+
+ input[type='file'] {
+ background-color: transparent;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ input:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-number.scss b/packages/themes/bstw/src/components/input-number.scss
new file mode 100644
index 0000000000..00efea0ea8
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-number.scss
@@ -0,0 +1,101 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ input {
+ border: none;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ input:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-password.scss b/packages/themes/bstw/src/components/input-password.scss
new file mode 100644
index 0000000000..b7cd1f1653
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-password.scss
@@ -0,0 +1,101 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ input {
+ border: none;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ input:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-radio.scss b/packages/themes/bstw/src/components/input-radio.scss
new file mode 100644
index 0000000000..241a052a90
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-radio.scss
@@ -0,0 +1,154 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ label {
+ cursor: pointer;
+ display: grid;
+ line-height: 20px;
+ gap: calc(var(--spacing) * 2);
+ width: 100%;
+ }
+
+ input {
+ cursor: pointer;
+ width: 100%;
+ border-color: var(--color-subtle);
+ border-width: 2px;
+ border-style: solid;
+ border-radius: 5px;
+ line-height: 24px;
+ }
+
+ input:hover {
+ border-color: var(--color-primary);
+ box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+ }
+
+ input:focus:hover {
+ box-shadow: none;
+ }
+
+ input:hover {
+ border-color: var(--color-primary);
+ }
+
+ .kol-alert-wc {
+ @include kol-alert-wc;
+ }
+
+ .required legend > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ /* RADIO */
+ fieldset {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ display: grid;
+ gap: 0.25em;
+ }
+
+ .radio-input-wrapper {
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+ margin: 0;
+ min-height: var(--a11y-min-size);
+ position: relative;
+ }
+
+ .radio-input-wrapper label {
+ cursor: pointer;
+ display: flex;
+ padding-left: calc(var(--spacing) / 2);
+ width: 100%;
+ }
+
+ .radio-input-wrapper label span {
+ margin-top: 0.125em;
+ }
+
+ .radio-input-wrapper input[type='radio'] {
+ appearance: none;
+ transition: 0.5s;
+ border-radius: 100%;
+ height: calc(6 * 0.25rem);
+ min-width: calc(6 * 0.25rem);
+ width: calc(6 * 0.25rem);
+ }
+
+ .radio-input-wrapper input[type='radio']:before {
+ content: '';
+ cursor: pointer;
+ border-radius: 100%;
+ display: block;
+ }
+
+ .radio-input-wrapper input[type='radio']:checked:before {
+ background-color: var(--color-primary);
+ }
+
+ .radio-input-wrapper input[type='radio']:disabled {
+ cursor: not-allowed;
+ background-color: var(--color-mute-variant);
+ }
+
+ .kol-alert-wc.error {
+ order: 1;
+ }
+
+ fieldset legend {
+ order: 2;
+ display: contents;
+ }
+
+ fieldset .kol-input {
+ order: 3;
+ }
+
+ fieldset.error {
+ border-left: 3px solid var(--color-danger);
+ color: var(--color-danger);
+ font-weight: 700;
+ padding-left: 1rem;
+ }
+
+ fieldset.error input:focus,
+ fieldset.error select:focus,
+ fieldset.error textarea:focus {
+ outline-color: var(--color-danger) !important;
+ }
+
+ fieldset.error .kol-alert-wc.error {
+ margin-left: -0.25em;
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ fieldset.horizontal {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--spacing) calc(var(--spacing) * 2);
+ }
+
+ fieldset.horizontal legend {
+ display: inline-block;
+ margin-bottom: calc(var(--spacing) / 2);
+ }
+
+ fieldset .input-slot {
+ gap: var(--spacing);
+ }
+
+ .radio-input-wrapper label {
+ padding-left: 0;
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-range.scss b/packages/themes/bstw/src/components/input-range.scss
new file mode 100644
index 0000000000..e7e2a81bbd
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-range.scss
@@ -0,0 +1,96 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .inputs-wrapper {
+ gap: 1rem;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input.icon-left > .kol-icon:first-child {
+ margin-right: 0.5rem;
+ }
+
+ .input.icon-right > .kol-icon:last-child {
+ margin-left: 0.5rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ input:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/input-text.scss b/packages/themes/bstw/src/components/input-text.scss
new file mode 100644
index 0000000000..00efea0ea8
--- /dev/null
+++ b/packages/themes/bstw/src/components/input-text.scss
@@ -0,0 +1,101 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ input {
+ border: none;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ input:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/kolibri.scss b/packages/themes/bstw/src/components/kolibri.scss
new file mode 100644
index 0000000000..0b6f6e0ca9
--- /dev/null
+++ b/packages/themes/bstw/src/components/kolibri.scss
@@ -0,0 +1,5 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+}
diff --git a/packages/themes/bstw/src/components/link-button.scss b/packages/themes/bstw/src/components/link-button.scss
new file mode 100644
index 0000000000..137b842993
--- /dev/null
+++ b/packages/themes/bstw/src/components/link-button.scss
@@ -0,0 +1,145 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+
+ :is(a, button):focus {
+ outline: none;
+ }
+
+ :is(a, button):focus .kol-span-wc {
+ outline-color: var(--color-primary-variant);
+ outline-offset: 2px;
+ outline-style: solid;
+ outline-width: calc(var(--border-width) * 2);
+ transition: outline-offset 0.2s linear;
+ }
+
+ :is(a, button) > .kol-span-wc {
+ font-weight: 700;
+ border-radius: var(--a11y-min-size);
+ border-style: solid;
+ outline-width: calc(var(--border-width) * 2);
+ min-height: var(--a11y-min-size);
+ min-width: var(--a11y-min-size);
+ padding: 8px 14px;
+ text-align: center;
+ transition-duration: 0.5s;
+ transition-property: background-color, color, border-color;
+ }
+
+ .primary :is(a, button) > .kol-span-wc,
+ .primary :is(a, button):disabled:hover > .kol-span-wc {
+ background-color: var(--color-primary);
+ border-color: var(--color-primary);
+ color: var(--color-light);
+ }
+
+ .secondary :is(a, button) > .kol-span-wc,
+ .secondary :is(a, button):disabled:hover > .kol-span-wc,
+ .normal :is(a, button) > .kol-span-wc,
+ .normal :is(a, button):disabled:hover > .kol-span-wc {
+ background-color: var(--color-light);
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+ }
+
+ .danger :is(a, button) > .kol-span-wc,
+ .danger :is(a, button):disabled:hover > .kol-span-wc {
+ background-color: var(--color-danger);
+ border-color: var(--color-danger);
+ color: var(--color-light);
+ }
+
+ .ghost :is(a, button) > .kol-span-wc,
+ .ghost :is(a, button):disabled:hover > .kol-span-wc {
+ border-color: var(--color-light);
+ background-color: var(--color-light);
+ box-shadow: none;
+ color: var(--color-primary);
+ }
+
+ /*-----------*/
+ .primary :is(a, button):active > .kol-span-wc,
+ .primary :is(a, button):hover > .kol-span-wc,
+ .secondary :is(a, button):active > .kol-span-wc,
+ .secondary :is(a, button):hover > .kol-span-wc,
+ .normal :is(a, button):active > .kol-span-wc,
+ .normal :is(a, button):hover > .kol-span-wc,
+ .danger :is(a, button):active > .kol-span-wc,
+ .danger :is(a, button):hover > .kol-span-wc,
+ .ghost :is(a, button):active > .kol-span-wc,
+ .ghost :is(a, button):hover > .kol-span-wc {
+ background-color: var(--color-primary-variant);
+ border-color: var(--color-primary-variant);
+ box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+ color: var(--color-light);
+ }
+
+ .danger :is(a, button):active > .kol-span-wc,
+ .danger :is(a, button):hover > .kol-span-wc {
+ background-color: var(--color-danger);
+ border-color: var(--color-danger);
+ }
+
+ :is(a, button):disabled:hover > .kol-span-wc,
+ :is(a, button):focus:hover > .kol-span-wc {
+ box-shadow: none;
+ }
+
+ .primary :is(a, button):active > .kol-span-wc,
+ .secondary :is(a, button):active > .kol-span-wc,
+ .normal :is(a, button):active > .kol-span-wc,
+ .danger :is(a, button):active > .kol-span-wc,
+ .ghost :is(a, button):active > .kol-span-wc {
+ border-color: var(--color-light);
+ box-shadow: none;
+ outline: none;
+ }
+
+ :is(a, button).hide-label > .kol-span-wc {
+ padding: 0.8rem;
+ width: unset;
+ }
+
+ :is(a, button).hide-label > .kol-span-wc > span > span {
+ display: none;
+ }
+
+ :is(a, button).loading > .kol-span-wc .kol-icon {
+ animation: spin 5s infinite linear;
+ }
+
+ /** small ghost button */
+ .ghost :is(a, button).small > .kol-span-wc {
+ border: none;
+ background-color: transparent;
+ box-shadow: none;
+ }
+
+ .ghost :is(a, button).small > .kol-span-wc > span {
+ border-radius: 1.5em;
+ border-style: solid;
+ border-width: var(--border-width);
+ border-color: var(--color-light);
+ background-color: var(--color-light);
+ }
+
+ .ghost :is(a, button).small:active > .kol-span-wc > span,
+ .ghost :is(a, button).small:hover > .kol-span-wc > span,
+ .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,
+ .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {
+ background-color: var(--color-primary-variant);
+ border-color: var(--color-primary-variant);
+ box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+ color: var(--color-light);
+ }
+
+ /** :is(a,button) with transparent background */
+ :is(a, button).transparent > .kol-span-wc > span,
+ .ghost :is(a, button).small.transparent > .kol-span-wc > span,
+ :is(a, button).transparent > .kol-span-wc {
+ background-color: transparent;
+ border-color: transparent;
+ }
+}
diff --git a/packages/themes/bstw/src/components/link.scss b/packages/themes/bstw/src/components/link.scss
new file mode 100644
index 0000000000..d868d5f6f1
--- /dev/null
+++ b/packages/themes/bstw/src/components/link.scss
@@ -0,0 +1,45 @@
+@layer kol-theme-component {
+ :is(a, button) {
+ color: var(--color-primary);
+ font-style: normal;
+ font-weight: 400;
+ text-decoration-line: underline;
+ }
+
+ :is(a, button):focus {
+ outline: none;
+ }
+
+ :is(a, button):focus kol-span-wc {
+ border-radius: var(--border-radius);
+ outline: var(--border-width) solid;
+ }
+
+ a:hover:not([aria-disabled]),
+ button:hover:not([disabled]) {
+ text-decoration-thickness: 0.25em;
+ }
+
+ :is(a, button):visited {
+ color: var(--visited);
+ }
+
+ .hidden {
+ display: none;
+ visibility: hidden;
+ }
+
+ .skip {
+ left: -99999px;
+ overflow: hidden;
+ position: absolute;
+ z-index: 9999999;
+ line-height: 1em;
+ }
+
+ .skip:focus {
+ background: white;
+ left: unset;
+ position: unset;
+ }
+}
diff --git a/packages/themes/bstw/src/components/modal.scss b/packages/themes/bstw/src/components/modal.scss
new file mode 100644
index 0000000000..9d31a0fe91
--- /dev/null
+++ b/packages/themes/bstw/src/components/modal.scss
@@ -0,0 +1,5 @@
+@layer kol-theme-component {
+ :host .overlay .modal {
+ max-height: calc(100% - 32px);
+ }
+}
diff --git a/packages/themes/bstw/src/components/nav.scss b/packages/themes/bstw/src/components/nav.scss
new file mode 100644
index 0000000000..cd6472e853
--- /dev/null
+++ b/packages/themes/bstw/src/components/nav.scss
@@ -0,0 +1,85 @@
+@import '../mixins/focus-outline';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+
+ nav {
+ background-color: var(--color-mute);
+ }
+
+ ul {
+ list-style: none;
+ }
+
+ .kol-link-wc {
+ display: flex;
+ }
+
+ .entry-item a,
+ .entry-item .button {
+ align-items: center;
+ color: var(--color-primary);
+ display: flex;
+ gap: 0.5rem;
+ min-height: var(--a11y-min-size);
+ text-decoration: none;
+
+ .vertical & {
+ border-left: 2px solid transparent;
+ padding-left: 0.5rem;
+ }
+
+ .horizontal & {
+ padding: 0 1rem;
+ }
+
+ .vertical .active & {
+ border-left-color: var(--color-primary);
+ }
+
+ &:focus-visible {
+ @include focus-outline;
+ }
+ }
+
+ .entry-item a:hover {
+ text-decoration: underline;
+ }
+
+ // nested lists
+ .list .list {
+ padding-left: 1rem;
+ }
+
+ .active .entry-item a,
+ .active .entry-item .button {
+ font-weight: bold;
+ }
+
+ .active .list .entry-item a,
+ .active .list .entry-item .button {
+ font-weight: normal;
+ border-left-color: transparent;
+ }
+
+ .expand-button {
+ margin-left: 0.5rem;
+
+ .button {
+ &:hover {
+ background-color: var(--color-primary);
+ color: var(--color-light);
+ }
+
+ &:focus-visible {
+ @include focus-outline;
+ }
+ }
+
+ .button-inner {
+ justify-content: center;
+ }
+ }
+}
diff --git a/packages/themes/bstw/src/components/pagination.scss b/packages/themes/bstw/src/components/pagination.scss
new file mode 100644
index 0000000000..5666fb4250
--- /dev/null
+++ b/packages/themes/bstw/src/components/pagination.scss
@@ -0,0 +1,46 @@
+@import '../mixins/focus-outline';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+ .button:focus {
+ outline: none;
+ }
+
+ .button-inner {
+ background-color: var(--color-light);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-primary);
+ color: var(--color-primary);
+ font-weight: 700;
+ min-height: var(--a11y-min-size);
+ min-width: var(--a11y-min-size);
+ padding: 8px;
+ text-align: center;
+ transition-duration: 0.5s;
+ transition-property: background-color, color, border-color;
+ }
+
+ .button:focus .button-inner {
+ @include focus-outline;
+ }
+
+ .button:is(:active, :hover):not(:disabled) .button-inner {
+ background-color: var(--color-primary-variant);
+ border-color: var(--color-primary-variant);
+ box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+ color: var(--color-light);
+ }
+
+ .button:active .button-inner {
+ color: var(--color-light);
+ outline: none;
+ }
+
+ .selected .button-inner {
+ background-color: var(--color-mute-variant);
+ border-radius: var(--a11y-min-size);
+ border: 0;
+ }
+}
diff --git a/packages/themes/bstw/src/components/progress.scss b/packages/themes/bstw/src/components/progress.scss
new file mode 100644
index 0000000000..d9d6708331
--- /dev/null
+++ b/packages/themes/bstw/src/components/progress.scss
@@ -0,0 +1,26 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+ :host progress,
+ :host span {
+ display: block;
+ height: 0px;
+ overflow: hidden;
+ width: 0px;
+ }
+ :host svg line:first-child,
+ :host svg circle:first-child {
+ fill: transparent;
+ stroke: var(--color-mute-variant);
+ }
+ :host svg line:last-child,
+ :host svg circle:last-child {
+ fill: transparent;
+ stroke: var(--color-primary);
+ }
+
+ .cycle .progress {
+ stroke: var(--color-primary-variant);
+ }
+}
diff --git a/packages/themes/bstw/src/components/select.scss b/packages/themes/bstw/src/components/select.scss
new file mode 100644
index 0000000000..c44e53c04d
--- /dev/null
+++ b/packages/themes/bstw/src/components/select.scss
@@ -0,0 +1,132 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .hint {
+ order: 4;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ select {
+ border: none;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 2rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ select:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ }
+
+ select[multiple] {
+ overflow: auto;
+ }
+
+ select option {
+ margin: 1px 0;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ }
+
+ select option:disabled {
+ cursor: not-allowed;
+ }
+
+ select:not([multiple]) option {
+ padding: 0.5em;
+ }
+
+ option:active:not(:disabled),
+ option:checked:not(:disabled),
+ option:focus:not(:disabled),
+ option:hover:not(:disabled) {
+ background: var(--color-primary-variant);
+ color: var(--color-light);
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/skip-nav.scss b/packages/themes/bstw/src/components/skip-nav.scss
new file mode 100644
index 0000000000..ae25429b79
--- /dev/null
+++ b/packages/themes/bstw/src/components/skip-nav.scss
@@ -0,0 +1,18 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+
+ .kol-link-wc > a > .kol-span-wc {
+ border-radius: var(--a11y-min-size);
+ border-style: solid;
+ border-width: var(--border-width);
+ gap: calc(var(--spacing) * 2);
+ line-height: 1rem;
+ padding: 8px 14px;
+ background-color: var(--color-primary-variant);
+ border-color: var(--color-primary-variant);
+ color: var(--color-light);
+ cursor: pointer;
+ }
+}
diff --git a/packages/themes/bstw/src/components/split-button.scss b/packages/themes/bstw/src/components/split-button.scss
new file mode 100644
index 0000000000..f74545a3b1
--- /dev/null
+++ b/packages/themes/bstw/src/components/split-button.scss
@@ -0,0 +1,41 @@
+@import '../mixins/button.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: var(--border-width);
+ border-color: var(--color-primary);
+ min-height: var(--a11y-min-size);
+ min-width: var(--a11y-min-size);
+ }
+
+ .popover {
+ background: #fff;
+ }
+
+ .secondary-button button {
+ height: 100%;
+ }
+
+ .horizontal-line {
+ background-color: var(--color-primary);
+ border-radius: 2px;
+ width: 1px;
+ }
+
+ :is(a, button) > .kol-span-wc {
+ font-weight: 700;
+ border-top-left-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
+ min-height: var(--a11y-min-size);
+ min-width: var(--a11y-min-size);
+ padding: 8px 14px;
+ text-align: center;
+ transition-duration: 0.5s;
+ transition-property: background-color, color, border-color;
+ }
+
+ @include kol-button;
+}
diff --git a/packages/themes/bstw/src/components/table-stateful.scss b/packages/themes/bstw/src/components/table-stateful.scss
new file mode 100644
index 0000000000..9e3e35408a
--- /dev/null
+++ b/packages/themes/bstw/src/components/table-stateful.scss
@@ -0,0 +1,15 @@
+@layer kol-theme-component {
+ :host * {
+ hyphens: var(--hyphens);
+ font-family: var(--font-family);
+ line-height: var(--line-height);
+ word-break: break-word;
+ }
+
+ @media (min-width: 1024px) {
+ div.pagination .kol-pagination {
+ display: flex;
+ align-items: center;
+ }
+ }
+}
diff --git a/packages/themes/bstw/src/components/table-stateless.scss b/packages/themes/bstw/src/components/table-stateless.scss
new file mode 100644
index 0000000000..6100222541
--- /dev/null
+++ b/packages/themes/bstw/src/components/table-stateless.scss
@@ -0,0 +1,82 @@
+@layer kol-theme-component {
+ :host * {
+ hyphens: var(--hyphens);
+ font-family: var(--font-family);
+ line-height: var(--line-height);
+ word-break: break-word;
+ }
+
+ :host > div {
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+
+ caption {
+ padding: 0.5rem;
+ }
+
+ th {
+ font-weight: normal;
+ color: var(--color-primary);
+ }
+
+ :host table thead tr:first-child th,
+ :host table thead tr:first-child td {
+ border-width: 0;
+ border-top-width: calc(var(--border-width) * 2);
+ border-style: solid;
+ border-color: var(--color-primary-variant);
+ }
+
+ .table {
+ padding: 0.5rem;
+
+ &:has(.focus-element:focus) {
+ outline-color: var(--color-primary-variant);
+ outline-offset: 2px;
+ outline-style: solid;
+ outline-width: 3px;
+ transition: outline-offset 0.2s linear;
+ }
+ }
+
+ table {
+ width: 100%;
+ border-spacing: 0;
+ }
+
+ table,
+ :host table thead tr:last-child th,
+ :host table thead tr:last-child td {
+ border-width: 0;
+ border-bottom-width: calc(var(--border-width) * 2);
+ border-style: solid;
+ border-color: var(--color-primary-variant);
+ }
+
+ th {
+ background-color: var(--color-light);
+ }
+
+ th div {
+ width: 100%;
+ display: flex;
+ gap: 0.5rem;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ }
+
+ tr:nth-child(even) {
+ background-color: var(--color-mute);
+ }
+
+ th,
+ td {
+ padding: 0.5rem;
+ }
+
+ th[aria-sort='ascending'],
+ th[aria-sort='descending'] {
+ font-weight: 700;
+ }
+}
diff --git a/packages/themes/bstw/src/components/tabs.scss b/packages/themes/bstw/src/components/tabs.scss
new file mode 100644
index 0000000000..8702cde777
--- /dev/null
+++ b/packages/themes/bstw/src/components/tabs.scss
@@ -0,0 +1,174 @@
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ }
+
+ :host .kol-button-group-wc {
+ display: inline-flex;
+ gap: 2rem;
+ flex-wrap: wrap;
+ }
+
+ button {
+ box-sizing: border-box;
+ background-color: transparent;
+ border: 0;
+ border-radius: var(--border-radius);
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 22px;
+ min-height: var(--a11y-min-size);
+ min-width: var(--a11y-min-size);
+ color: var(--color-subtle);
+ padding: 0;
+ }
+
+ button:hover {
+ color: var(--color-primary);
+ }
+
+ button.primary,
+ button.selected {
+ color: var(--color-primary);
+ }
+
+ button:not(.selected) .kol-span-wc > span {
+ padding-bottom: 0.25em;
+ }
+
+ button.selected .kol-span-wc > span {
+ border-bottom: 0.25em solid;
+ }
+
+ button .kol-span-wc > span {
+ gap: 0.5rem;
+ }
+
+ .kol-icon {
+ font-size: 1rem;
+ }
+
+ :host > div > div {
+ padding: 0.25em 0;
+ }
+
+ div[role='tabpanel'] {
+ height: 100%;
+ }
+
+ div.grid {
+ height: 100%;
+ }
+
+ :host > .tabs-align-right {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ }
+
+ :host > .tabs-align-right .kol-button-group-wc {
+ display: grid;
+ order: 2;
+ }
+
+ :host > .tabs-align-left {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ }
+
+ :host > .tabs-align-left .kol-button-group-wc {
+ display: grid;
+ order: 0;
+ }
+
+ :host > .tabs-align-bottom {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ }
+
+ :host > .tabs-align-bottom .kol-button-group-wc {
+ order: 2;
+ }
+
+ :host > .tabs-align-bottom .kol-button-group-wc > div {
+ display: flex;
+ }
+
+ :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {
+ margin: 0px 1rem 0px 0px;
+ }
+
+ :host > .tabs-align-bottom > .kol-button-group-wc > div > div {
+ margin: 0px 1rem;
+ }
+
+ :host > .tabs-align-top {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ }
+
+ :host > .tabs-align-top .kol-button-group-wc {
+ order: 0;
+ }
+
+ :host > .tabs-align-top .kol-button-group-wc > div {
+ display: flex;
+ }
+
+ :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {
+ margin: 0px 1rem 0px 0px;
+ }
+
+ :host > .tabs-align-top > .kol-button-group-wc > div > div {
+ margin: 0px 1rem;
+ }
+
+ :host > div {
+ display: grid;
+ }
+
+ :host > div.tabs-align-left {
+ grid-template-columns: auto 1fr;
+ }
+
+ :host > div.tabs-align-right {
+ grid-template-columns: 1fr auto;
+ }
+
+ :host > .tabs-align-left .kol-button-group-wc,
+ :host > .tabs-align-top .kol-button-group-wc {
+ order: 0;
+ }
+
+ :host > .tabs-align-bottom .kol-button-group-wc,
+ :host > .tabs-align-right .kol-button-group-wc {
+ order: 1;
+ }
+
+ :host > .tabs-align-left .kol-button-group-wc,
+ :host > .tabs-align-right .kol-button-group-wc {
+ gap: inherit;
+ }
+
+ :host > div.tabs-align-left .kol-button-group-wc > div,
+ :host > div.tabs-align-left .kol-button-group-wc > div > div,
+ :host > div.tabs-align-right .kol-button-group-wc > div,
+ :host > div.tabs-align-right .kol-button-group-wc > div > div {
+ display: grid;
+ }
+
+ :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,
+ :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {
+ width: 100%;
+ }
+
+ :host > div.tabs-align-bottom .kol-button-group-wc div,
+ :host > div.tabs-align-top .kol-button-group-wc div {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ :host .kol-button-group-wc button {
+ border: none;
+ }
+}
diff --git a/packages/themes/bstw/src/components/textarea.scss b/packages/themes/bstw/src/components/textarea.scss
new file mode 100644
index 0000000000..6950347ed5
--- /dev/null
+++ b/packages/themes/bstw/src/components/textarea.scss
@@ -0,0 +1,118 @@
+@import '../mixins/alert-wc.scss';
+
+@layer kol-theme-component {
+ :host {
+ font-family: var(--font-family);
+ @include kol-alert-theme;
+ }
+
+ .kol-input {
+ gap: 0.25rem;
+ }
+
+ .kol-input .error {
+ order: 1;
+ }
+
+ .kol-input label {
+ order: 2;
+ }
+
+ .kol-input .input {
+ order: 3;
+ }
+
+ .kol-input .counter {
+ order: 4;
+ }
+
+ .kol-input .hint {
+ order: 5;
+ font-size: 0.9rem;
+ font-style: italic;
+ }
+
+ textarea {
+ border: none;
+ }
+
+ input::placeholder {
+ color: var(--color-subtle);
+ }
+
+ .input {
+ background-color: var(--color-light);
+ border-color: var(--color-subtle);
+ border-radius: var(--border-radius);
+ border-style: solid;
+ border-width: 2px;
+ padding: 0 0.5rem;
+ }
+
+ .input > .kol-icon {
+ width: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .input:is(.icon-left, .icon-right) input {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .input > input:first-child {
+ padding-left: var(--spacing);
+ }
+
+ .input > input:last-child {
+ padding-right: var(--spacing);
+ }
+
+ :not(.disabled) .input:hover {
+ border-color: var(--color-primary);
+ }
+
+ textarea:disabled {
+ cursor: not-allowed;
+ }
+
+ .required label > span::after {
+ content: '*';
+ padding-left: 0.125em;
+ }
+
+ .kol-input.error {
+ border-left: 3px solid var(--color-danger);
+ padding-left: 1rem;
+ }
+
+ .kol-input.error .input:focus-within {
+ outline-color: var(--color-danger) !important;
+ }
+
+ .kol-input.error .kol-alert-wc.error {
+ @include kol-input-error-with-kol-alert-wc-error(--color-danger);
+ }
+
+ select[multiple],
+ textarea {
+ overflow: auto;
+ }
+
+ textarea {
+ display: block;
+ }
+
+ .input {
+ position: relative;
+ }
+
+ .kol-input.disabled .input {
+ background-color: var(--color-mute);
+ border-color: var(--color-mute-variant);
+ color: var(--color-text);
+ }
+}
diff --git a/packages/themes/bstw/src/components/toast-container.scss b/packages/themes/bstw/src/components/toast-container.scss
new file mode 100644
index 0000000000..94e87cc5c5
--- /dev/null
+++ b/packages/themes/bstw/src/components/toast-container.scss
@@ -0,0 +1,10 @@
+@layer kol-theme-component {
+ :host {
+ top: 1rem;
+ right: 1rem;
+ width: 440px;
+ }
+ .toast {
+ margin-top: 1rem;
+ }
+}
diff --git a/packages/themes/bstw/src/components/tree-item.scss b/packages/themes/bstw/src/components/tree-item.scss
new file mode 100644
index 0000000000..87cb78e78c
--- /dev/null
+++ b/packages/themes/bstw/src/components/tree-item.scss
@@ -0,0 +1,35 @@
+@layer kol-theme-component {
+ .tree-item {
+ ul {
+ list-style: disc inside;
+ border-left: 2px solid;
+ padding-left: 0.4rem;
+ margin-left: 2rem;
+ margin-top: 0.4rem;
+ }
+
+ li {
+ margin: 0.4rem 0;
+ }
+
+ .toggle-button {
+ align-items: center;
+ border: 1px solid var(--color-primary);
+ display: inline-flex;
+ height: 1.6rem;
+ justify-content: center;
+ margin-right: 0.4rem;
+ width: 1.6rem;
+ }
+ }
+
+ .tree-link {
+ display: inline-block;
+ padding: 0.4rem;
+
+ &.active {
+ background: var(--color-primary-variant);
+ color: var(--color-light);
+ }
+ }
+}
diff --git a/packages/themes/bstw/src/components/tree.scss b/packages/themes/bstw/src/components/tree.scss
new file mode 100644
index 0000000000..e5b400ed76
--- /dev/null
+++ b/packages/themes/bstw/src/components/tree.scss
@@ -0,0 +1,7 @@
+@layer kol-theme-component {
+ .tree {
+ &:focus-within {
+ outline: 1px solid var(--color-primary);
+ }
+ }
+}
diff --git a/packages/themes/bstw/src/global.scss b/packages/themes/bstw/src/global.scss
new file mode 100644
index 0000000000..b66a52efcc
--- /dev/null
+++ b/packages/themes/bstw/src/global.scss
@@ -0,0 +1,88 @@
+@layer kol-theme-global {
+ :host {
+ --border-radius: var(--kolibri-border-radius, 5px);
+ --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);
+ --font-size: var(--kolibri-font-size, 16px);
+ --spacing: var(--kolibri-spacing, 0.25rem);
+ --border-width: var(--kolibri-border-width, 1px);
+ --color-primary: var(--kolibri-color-primary, #004b76);
+ --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);
+ --color-danger: var(--kolibri-color-danger, #c0003c);
+ --color-warning: var(--kolibri-color-warning, #c44931);
+ --color-success: var(--kolibri-color-success, #005c45);
+ --color-subtle: var(--kolibri-color-subtle, #576164);
+ --color-light: var(--kolibri-color-light, #ffffff);
+ --color-text: var(--kolibri-color-text, #202020);
+ --color-mute: var(--kolibri-color-mute, #f2f3f4);
+ --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
+ }
+
+ :host {
+ /* Reset global background-color defined by components */
+ background-color: transparent;
+ }
+
+ * {
+ box-sizing: border-box;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin: 0;
+ padding: 0;
+ }
+
+ *[tabindex]:focus,
+ .kol-input:not(.checkbox, .radio) .input:focus-within,
+ .kol-input:is(.checkbox, .radio) input:focus,
+ summary:focus {
+ cursor: pointer;
+ outline-color: var(--color-primary-variant);
+ outline-offset: 2px;
+ outline-style: solid;
+ outline-width: 3px;
+ transition: outline-offset 0.2s linear;
+ }
+
+ .kol-heading-wc {
+ font-weight: 700;
+ }
+
+ .kol-tooltip-wc .tooltip-floating {
+ border: var(--border-width) solid var(--color-subtle);
+ border-radius: var(--border-radius);
+ }
+
+ .kol-tooltip-wc .tooltip-arrow {
+ border: var(--border-width) solid var(--color-subtle);
+ }
+
+ .kol-tooltip-wc .tooltip-area {
+ background-color: var(--color-light);
+ }
+
+ .kol-tooltip-wc .tooltip-content {
+ border-radius: var(--border-radius);
+ line-height: 1.5;
+ padding: 0.5rem 0.75rem;
+ }
+
+ .kol-span-wc,
+ .kol-span-wc > span {
+ gap: 0.5rem;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+}
diff --git a/packages/themes/bstw/src/globals.d.ts b/packages/themes/bstw/src/globals.d.ts
new file mode 100644
index 0000000000..f24a8d87f6
--- /dev/null
+++ b/packages/themes/bstw/src/globals.d.ts
@@ -0,0 +1,4 @@
+declare module '*.scss' {
+ const content: string;
+ export default content;
+}
diff --git a/packages/themes/bstw/src/index.ts b/packages/themes/bstw/src/index.ts
new file mode 100644
index 0000000000..10154cd461
--- /dev/null
+++ b/packages/themes/bstw/src/index.ts
@@ -0,0 +1,88 @@
+import { KoliBri } from '@public-ui/schema';
+import globalCss from './global.scss';
+import abbrCss from './components/abbr.scss';
+import accordionCss from './components/accordion.scss';
+import alertCss from './components/alert.scss';
+import avatarCss from './components/avatar.scss';
+import badgeCss from './components/badge.scss';
+import breadcrumbCss from './components/breadcrumb.scss';
+import buttonCss from './components/button.scss';
+import buttonGroupCss from './components/button-group.scss';
+import buttonLinkCss from './components/button-link.scss';
+import cardCss from './components/card.scss';
+import detailsCss from './components/details.scss';
+import headingCss from './components/heading.scss';
+import iconCss from './components/icon.scss';
+import indentedTextCss from './components/indented-text.scss';
+import inputCheckboxCss from './components/input-checkbox.scss';
+import inputColorCss from './components/input-color.scss';
+import inputDateCss from './components/input-date.scss';
+import inputEmailCss from './components/input-email.scss';
+import inputFileCss from './components/input-file.scss';
+import inputNumberCss from './components/input-number.scss';
+import inputPasswordCss from './components/input-password.scss';
+import inputRadioCss from './components/input-radio.scss';
+import inputRangeCss from './components/input-range.scss';
+import inputTextCss from './components/input-text.scss';
+import kolibriCss from './components/kolibri.scss';
+import linkButtonCss from './components/link-button.scss';
+import linkCss from './components/link.scss';
+import modalCss from './components/modal.scss';
+import navCss from './components/nav.scss';
+import paginationCss from './components/pagination.scss';
+import progressCss from './components/progress.scss';
+import selectCss from './components/select.scss';
+import skipNavCss from './components/skip-nav.scss';
+import splitButtonCss from './components/split-button.scss';
+import tableStatefulCss from './components/table-stateful.scss';
+import tableStatelessCss from './components/table-stateless.scss';
+import tabsCss from './components/tabs.scss';
+import textareaCss from './components/textarea.scss';
+import toastContainerCss from './components/toast-container.scss';
+import treeItemCss from './components/tree-item.scss';
+import treeCss from './components/tree.scss';
+
+export const BStW = KoliBri.createTheme('bstw', {
+ GLOBAL: globalCss,
+ 'KOL-ABBR': abbrCss,
+ 'KOL-ACCORDION': accordionCss,
+ 'KOL-ALERT': alertCss,
+ 'KOL-AVATAR': avatarCss,
+ 'KOL-BADGE': badgeCss,
+ 'KOL-BREADCRUMB': breadcrumbCss,
+ 'KOL-BUTTON': buttonCss,
+ 'KOL-BUTTON-GROUP': buttonGroupCss,
+ 'KOL-BUTTON-LINK': buttonLinkCss,
+ 'KOL-CARD': cardCss,
+ 'KOL-DETAILS': detailsCss,
+ 'KOL-HEADING': headingCss,
+ 'KOL-ICON': iconCss,
+ 'KOL-INDENTED-TEXT': indentedTextCss,
+ 'KOL-INPUT-CHECKBOX': inputCheckboxCss,
+ 'KOL-INPUT-COLOR': inputColorCss,
+ 'KOL-INPUT-DATE': inputDateCss,
+ 'KOL-INPUT-EMAIL': inputEmailCss,
+ 'KOL-INPUT-FILE': inputFileCss,
+ 'KOL-INPUT-NUMBER': inputNumberCss,
+ 'KOL-INPUT-PASSWORD': inputPasswordCss,
+ 'KOL-INPUT-RADIO': inputRadioCss,
+ 'KOL-INPUT-RANGE': inputRangeCss,
+ 'KOL-INPUT-TEXT': inputTextCss,
+ 'KOL-KOLIBRI': kolibriCss,
+ 'KOL-LINK': linkCss,
+ 'KOL-LINK-BUTTON': linkButtonCss,
+ 'KOL-MODAL': modalCss,
+ 'KOL-NAV': navCss,
+ 'KOL-PAGINATION': paginationCss,
+ 'KOL-PROGRESS': progressCss,
+ 'KOL-SELECT': selectCss,
+ 'KOL-SKIP-NAV': skipNavCss,
+ 'KOL-SPLIT-BUTTON': splitButtonCss,
+ 'KOL-TABLE-STATEFUL': tableStatefulCss,
+ 'KOL-TABLE-STATELESS': tableStatelessCss,
+ 'KOL-TABS': tabsCss,
+ 'KOL-TEXTAREA': textareaCss,
+ 'KOL-TOAST-CONTAINER': toastContainerCss,
+ 'KOL-TREE': treeCss,
+ 'KOL-TREE-ITEM': treeItemCss,
+});
diff --git a/packages/themes/bstw/src/mixins/alert-wc.scss b/packages/themes/bstw/src/mixins/alert-wc.scss
new file mode 100644
index 0000000000..37485a8387
--- /dev/null
+++ b/packages/themes/bstw/src/mixins/alert-wc.scss
@@ -0,0 +1,259 @@
+@mixin kol-alert-wc {
+ display: block;
+ width: 100%;
+}
+
+@mixin kol-input-error-with-kol-alert-wc-error($color: null) {
+ color: var($color);
+ font-weight: 700;
+}
+
+@mixin kol-alert-theme {
+ .msg {
+ border-width: 0 !important;
+ }
+
+ .kol-alert-wc {
+ border-width: var(--border-width);
+ border-style: solid;
+ border-radius: var(--border-radius);
+ display: flex;
+ width: 100%;
+ overflow: unset;
+ border-color: transparent;
+ background-color: var(--color-light);
+ }
+
+ .kol-alert-wc > .heading {
+ display: flex;
+ gap: 0.5em;
+ place-items: center;
+ }
+
+ .kol-alert-wc > .heading > div {
+ display: grid;
+ gap: 0.25rem;
+ }
+
+ .msg > .heading > .kol-icon {
+ place-self: baseline;
+ }
+
+ .kol-alert-wc > .heading > .kol-button-wc.close {
+ place-self: center;
+ }
+
+ .msg {
+ align-items: start;
+ }
+
+ .default {
+ border-color: var(--color-subtle);
+ }
+
+ .default.msg .heading-icon {
+ color: var(--color-subtle);
+ }
+
+ .error {
+ border-color: var(--color-danger);
+ }
+
+ .error.msg .heading-icon {
+ color: var(--color-danger);
+ }
+
+ .info {
+ border-color: var(--color-primary);
+ }
+
+ .info.msg .heading-icon {
+ color: var(--color-primary);
+ }
+
+ .success {
+ border-color: var(--color-success);
+ }
+
+ .success.msg .heading-icon {
+ color: var(--color-success);
+ }
+
+ .warning {
+ border-color: var(--color-warning);
+ }
+
+ .warning.msg .heading-icon {
+ color: var(--color-warning);
+ }
+
+ .heading-icon {
+ color: var(--color-light);
+ }
+
+ .kol-alert-wc .heading .heading-icon {
+ padding: 0;
+ }
+
+ .msg > .heading > .heading-icon {
+ padding-top: 0;
+ place-items: baseline;
+ }
+
+ .msg > .heading > div > .kol-heading-wc {
+ padding-top: calc(--var-spacing / 2);
+ }
+
+ .msg.default .heading > div > .kol-heading-wc {
+ color: var(--color-subtle);
+ }
+
+ .msg.error .heading > div > .kol-heading-wc {
+ color: var(--color-danger);
+ }
+
+ .msg.info .heading > div > .kol-heading-wc {
+ color: var(--color-primary);
+ }
+
+ .msg.success .heading > div > .kol-heading-wc {
+ color: var(--color-success);
+ }
+
+ .msg.warning .heading > div > .kol-heading-wc {
+ color: var(--color-warning);
+ }
+
+ .msg.default .close .icon {
+ color: var(--color-subtle);
+ }
+
+ .msg.error .close .icon {
+ color: var(--color-danger);
+ }
+
+ .msg.info .close .icon {
+ color: var(--color-primary);
+ }
+
+ .msg.success .close .icon {
+ color: var(--color-success);
+ }
+
+ .msg.warning .close .icon {
+ color: var(--color-warning);
+ }
+
+ .card {
+ border-width: var(--border-width);
+ border-style: solid;
+ filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
+ flex-direction: column;
+ }
+
+ .card > .heading {
+ padding: 0.5rem 1rem;
+ }
+
+ .card[_has-closer] > .heading {
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-right: 0;
+ }
+
+ .card > .heading > div {
+ width: 100%;
+ min-height: 1.25rem;
+ }
+
+ .card > .heading .heading-icon {
+ justify-self: right;
+ margin-top: -4px;
+ }
+
+ .card > .heading .kol-heading-wc {
+ width: 100%;
+ color: var(--color-light);
+ display: flex;
+ font-size: 1.25rem;
+ line-height: 1.25rem;
+ }
+
+ .card > .heading .kol-heading-wc > * {
+ margin: auto 0;
+ }
+
+ .card > .content {
+ padding: 1rem;
+ }
+
+ .card.default > .heading {
+ background-color: var(--color-subtle);
+ }
+
+ .card.error > .heading {
+ background-color: var(--color-danger);
+ }
+
+ .card.info > .heading {
+ background-color: var(--color-primary);
+ }
+
+ .card.success > .heading {
+ background-color: var(--color-success);
+ }
+
+ .card.warning > .heading {
+ background-color: var(--color-warning);
+ }
+
+ :is(.error, .info, .success, .warning) .heading-icon {
+ font-size: 1.25rem;
+ }
+
+ .card > div > .content {
+ grid-row: 2;
+ grid-column: 1 / span 2;
+ }
+
+ .card.default .close {
+ background-color: var(--color-subtle);
+ }
+
+ .card.error .close {
+ background-color: var(--color-danger);
+ }
+
+ .card.info .close {
+ background-color: var(--color-primary);
+ }
+
+ .card.success .close {
+ background-color: var(--color-success);
+ }
+
+ .card.warning .close {
+ background-color: var(--color-warning);
+ }
+
+ .close > button {
+ border-radius: 50%;
+ /* visible on focus */
+ color: var(--color-light);
+ cursor: pointer;
+ height: var(--a11y-min-size);
+ width: var(--a11y-min-size);
+ }
+
+ .close > button.hide-label .kol-icon {
+ display: flex;
+ width: 1em;
+ height: 1em;
+ font-size: 1.2rem;
+ }
+
+ .close > button:active {
+ box-shadow: none;
+ outline: none;
+ }
+}
diff --git a/packages/themes/bstw/src/mixins/button.scss b/packages/themes/bstw/src/mixins/button.scss
new file mode 100644
index 0000000000..13aaccb31f
--- /dev/null
+++ b/packages/themes/bstw/src/mixins/button.scss
@@ -0,0 +1,133 @@
+@import './focus-outline';
+
+@mixin kol-button {
+ :is(a, button):focus {
+ outline: none;
+ }
+
+ :is(a, button):focus .kol-span-wc {
+ @include focus-outline;
+ }
+
+ .primary :is(a, button) > .kol-span-wc,
+ .primary :is(a, button):disabled:hover > .kol-span-wc {
+ background-color: var(--color-primary);
+ border-color: var(--color-primary);
+ color: var(--color-light);
+ }
+
+ .secondary :is(a, button) > .kol-span-wc,
+ .secondary :is(a, button):disabled:hover > .kol-span-wc,
+ .normal :is(a, button) > .kol-span-wc,
+ .normal :is(a, button):disabled:hover > .kol-span-wc {
+ background-color: var(--color-light);
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+ }
+
+ .danger :is(a, button) > .kol-span-wc,
+ .danger :is(a, button):disabled:hover > .kol-span-wc {
+ background-color: var(--color-danger);
+ border-color: var(--color-danger);
+ color: var(--color-light);
+ }
+
+ .ghost :is(a, button) > .kol-span-wc,
+ .ghost :is(a, button):disabled:hover > .kol-span-wc {
+ border-color: var(--color-light);
+ background-color: var(--color-light);
+ box-shadow: none;
+ color: var(--color-primary);
+ }
+
+ /*-----------*/
+ .primary :is(a, button):active > .kol-span-wc,
+ .primary :is(a, button):hover > .kol-span-wc,
+ .secondary :is(a, button):active > .kol-span-wc,
+ .secondary :is(a, button):hover > .kol-span-wc,
+ .normal :is(a, button):active > .kol-span-wc,
+ .normal :is(a, button):hover > .kol-span-wc,
+ .danger :is(a, button):active > .kol-span-wc,
+ .danger :is(a, button):hover > .kol-span-wc,
+ .ghost :is(a, button):active > .kol-span-wc,
+ .ghost :is(a, button):hover > .kol-span-wc {
+ background-color: var(--color-primary-variant);
+ border-color: var(--color-primary-variant);
+ box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+ color: var(--color-light);
+ }
+
+ .danger :is(a, button):active > .kol-span-wc,
+ .danger :is(a, button):hover > .kol-span-wc {
+ background-color: var(--color-danger);
+ border-color: var(--color-danger);
+ }
+
+ :is(a, button):disabled:hover > .kol-span-wc,
+ :is(a, button):focus:hover > .kol-span-wc {
+ box-shadow: none;
+ }
+
+ .primary :is(a, button):active > .kol-span-wc,
+ .secondary :is(a, button):active > .kol-span-wc,
+ .normal :is(a, button):active > .kol-span-wc,
+ .danger :is(a, button):active > .kol-span-wc,
+ .ghost :is(a, button):active > .kol-span-wc {
+ border-color: var(--color-light);
+ box-shadow: none;
+ outline: none;
+ }
+
+ :is(a, button).hide-label > .kol-span-wc {
+ padding: 0.8rem;
+ width: unset;
+ }
+
+ :is(a, button).hide-label > .kol-span-wc > span > span {
+ display: none;
+ }
+
+ :is(a, button).loading > .kol-span-wc .kol-icon {
+ animation: spin 5s infinite linear;
+ }
+
+ /** small ghost button */
+ .ghost :is(a, button).small > .kol-span-wc {
+ border: none;
+ background-color: transparent;
+ box-shadow: none;
+ }
+
+ .ghost :is(a, button).small > .kol-span-wc > span {
+ border-radius: 1.5em;
+ border-style: solid;
+ border-width: var(--border-width);
+ border-color: var(--color-light);
+ background-color: var(--color-light);
+ }
+
+ .ghost :is(a, button).small:active > .kol-span-wc > span,
+ .ghost :is(a, button).small:hover > .kol-span-wc > span,
+ .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,
+ .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {
+ background-color: var(--color-primary-variant);
+ border-color: var(--color-primary-variant);
+ box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+ color: var(--color-light);
+ }
+
+ /** :is(a,button) with transparent background */
+ :is(a, button).transparent > .kol-span-wc > span,
+ .ghost :is(a, button).small.transparent > .kol-span-wc > span,
+ :is(a, button).transparent > .kol-span-wc {
+ background-color: transparent;
+ border-color: transparent;
+ }
+
+ .access-key-hint {
+ background: var(--color-mute-variant);
+ border-radius: 3px;
+ color: var(--color-text);
+ padding: 0 0.3em;
+ }
+}
diff --git a/packages/themes/bstw/src/mixins/focus-outline.scss b/packages/themes/bstw/src/mixins/focus-outline.scss
new file mode 100644
index 0000000000..7256a3fb94
--- /dev/null
+++ b/packages/themes/bstw/src/mixins/focus-outline.scss
@@ -0,0 +1,6 @@
+@mixin focus-outline {
+ border-radius: var(--border-radius);
+ outline-offset: 2px;
+ outline: var(--color-primary-variant) solid 3px;
+ transition: 200ms outline-offset linear;
+}
diff --git a/packages/themes/bstw/tsconfig.json b/packages/themes/bstw/tsconfig.json
new file mode 100644
index 0000000000..ed683c278d
--- /dev/null
+++ b/packages/themes/bstw/tsconfig.json
@@ -0,0 +1,31 @@
+{
+ "compilerOptions": {
+ "allowUnreachableCode": false,
+ "allowSyntheticDefaultImports": true,
+ "declaration": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "esModuleInterop": true,
+ "lib": ["dom", "es2015"],
+ "module": "ESNext",
+ "preserveSymlinks": true,
+ "moduleResolution": "node",
+ "noImplicitAny": true,
+ "noImplicitReturns": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "outDir": "dist",
+ "removeComments": true,
+ "sourceMap": true,
+ "jsx": "react",
+ "target": "es2015",
+ "forceConsistentCasingInFileNames": false,
+ "importHelpers": false,
+ "strict": true,
+ "skipLibCheck": true,
+ },
+ "compileOnSave": false,
+ "buildOnSave": false,
+ "exclude": ["node_modules/**"],
+ "include": ["src/**/*.ts", "src/**/*.tsx", "src/globals.d.ts"],
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a38988750c..f11b1b2745 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -425,7 +425,7 @@ importers:
version: 5.4.5
unbuild:
specifier: 1.2.1
- version: 1.2.1(sass@1.75.0)
+ version: 1.2.1
packages/adapters/react:
devDependencies:
@@ -461,7 +461,7 @@ importers:
version: 5.4.5
unbuild:
specifier: 1.2.1
- version: 1.2.1(sass@1.75.0)
+ version: 1.2.1
packages/adapters/react-standalone:
dependencies:
@@ -510,7 +510,7 @@ importers:
version: 5.4.5
unbuild:
specifier: 1.2.1
- version: 1.2.1(sass@1.75.0)
+ version: 1.2.1
packages/adapters/vue:
devDependencies:
@@ -537,7 +537,7 @@ importers:
version: 5.4.5
unbuild:
specifier: 1.2.1
- version: 1.2.1(sass@1.75.0)
+ version: 1.2.1
vue:
specifier: 3.4.21
version: 3.4.21(typescript@5.4.5)
@@ -756,7 +756,7 @@ importers:
version: 1.3.49(chromedriver@122.0.6)(esbuild@0.20.1)(typescript@5.4.5)
'@leanup/stack-solid':
specifier: 1.3.49
- version: 1.3.49(@babel/core@7.24.0)(solid-js@1.8.16)(vite@5.1.5)(webpack@5.90.3)
+ version: 1.3.49(@babel/core@7.24.0)(solid-js@1.8.16)(vite@5.1.7)(webpack@5.90.3)
'@leanup/stack-webpack':
specifier: 1.3.49
version: 1.3.49(@leanup/stack@1.3.49)(esbuild@0.20.1)(less@4.2.0)(postcss@8.4.38)
@@ -1025,7 +1025,7 @@ importers:
version: 5.4.5
unbuild:
specifier: 1.2.1
- version: 1.2.1(sass@1.75.0)
+ version: 1.2.1
packages/test-tag-name-transformer:
devDependencies:
@@ -1098,6 +1098,43 @@ importers:
specifier: 5.4.5
version: 5.4.5
+ packages/themes/bstw:
+ dependencies:
+ '@public-ui/components':
+ specifier: 2.0.14
+ version: link:../../components
+ devDependencies:
+ '@public-ui/schema':
+ specifier: 2.0.14
+ version: link:../../schema
+ '@public-ui/visual-tests':
+ specifier: 2.0.14
+ version: link:../../tools/visual-tests
+ '@types/node':
+ specifier: ts5.4
+ version: 20.12.7
+ '@typescript-eslint/eslint-plugin':
+ specifier: 7.6.0
+ version: 7.6.0(@typescript-eslint/parser@7.6.0)(eslint@8.57.0)(typescript@5.4.5)
+ '@typescript-eslint/parser':
+ specifier: 7.6.0
+ version: 7.6.0(eslint@8.57.0)(typescript@5.4.5)
+ eslint:
+ specifier: 8.57.0
+ version: 8.57.0
+ eslint-plugin-no-loops:
+ specifier: 0.3.0
+ version: 0.3.0(eslint@8.57.0)
+ rollup-plugin-postcss:
+ specifier: 4.0.2
+ version: 4.0.2(postcss@8.4.38)(ts-node@10.9.2)
+ typescript:
+ specifier: 5.4.5
+ version: 5.4.5
+ unbuild:
+ specifier: 1.2.1
+ version: 1.2.1
+
packages/themes/default:
dependencies:
'@public-ui/components':
@@ -1133,7 +1170,7 @@ importers:
version: 5.4.5
unbuild:
specifier: 1.2.1
- version: 1.2.1(sass@1.75.0)
+ version: 1.2.1
packages/themes/ecl:
dependencies:
@@ -6220,7 +6257,6 @@ packages:
/@eslint-community/regexpp@4.10.0:
resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
- dev: true
/@eslint-community/regexpp@4.8.0:
resolution: {integrity: sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==}
@@ -6353,7 +6389,7 @@ packages:
engines: {node: '>= 10.14.2'}
dependencies:
'@jest/types': 26.6.2
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
chalk: 4.1.2
jest-message-util: 26.6.2
jest-util: 26.6.2
@@ -6369,7 +6405,7 @@ packages:
'@jest/test-result': 26.6.2
'@jest/transform': 26.6.2
'@jest/types': 26.6.2
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
ansi-escapes: 4.3.2
chalk: 4.1.2
exit: 0.1.2
@@ -6537,7 +6573,7 @@ packages:
dependencies:
'@types/istanbul-lib-coverage': 2.0.4
'@types/istanbul-reports': 3.0.1
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
'@types/yargs': 15.0.15
chalk: 4.1.2
dev: true
@@ -6636,7 +6672,7 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
- /@leanup/stack-solid@1.3.49(@babel/core@7.24.0)(solid-js@1.8.16)(vite@5.1.5)(webpack@5.90.3):
+ /@leanup/stack-solid@1.3.49(@babel/core@7.24.0)(solid-js@1.8.16)(vite@5.1.7)(webpack@5.90.3):
resolution: {integrity: sha512-DCrcyPuD3hKSQFz57T/1Fz3vNFSkQgQ1Up7vrv1IZJpsveUoZqTAUJBdPvMBaLQSsZvJMha8AnnPtVNDuxzeMw==}
peerDependencies:
solid-js: ^1
@@ -6645,7 +6681,7 @@ packages:
'@snowpack/plugin-babel': 2.1.7
babel-preset-solid: 1.8.6(@babel/core@7.24.0)
solid-js: 1.8.16
- vite-plugin-solid: 2.8.0(solid-js@1.8.16)(vite@5.1.5)
+ vite-plugin-solid: 2.8.0(solid-js@1.8.16)(vite@5.1.7)
transitivePeerDependencies:
- '@babel/core'
- supports-color
@@ -7058,7 +7094,7 @@ packages:
'@nrwl/devkit': 17.2.0(nx@17.2.0)
ejs: 3.1.9
enquirer: 2.3.6
- ignore: 5.2.4
+ ignore: 5.3.1
nx: 17.2.0
semver: 7.5.3
tmp: 0.2.1
@@ -7591,7 +7627,7 @@ packages:
rollup: 3.28.1
dev: true
- /@rollup/pluginutils@5.1.0:
+ /@rollup/pluginutils@5.1.0(rollup@3.28.1):
resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
engines: {node: '>=14.0.0'}
peerDependencies:
@@ -7603,6 +7639,7 @@ packages:
'@types/estree': 1.0.5
estree-walker: 2.0.2
picomatch: 2.3.1
+ rollup: 3.28.1
/@rollup/rollup-android-arm-eabi@4.8.0:
resolution: {integrity: sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==}
@@ -8161,7 +8198,7 @@ packages:
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
dependencies:
'@tufjs/canonical-json': 1.0.0
- minimatch: 9.0.3
+ minimatch: 9.0.4
dev: true
/@tufjs/models@2.0.0:
@@ -8169,7 +8206,7 @@ packages:
engines: {node: ^16.14.0 || >=18.0.0}
dependencies:
'@tufjs/canonical-json': 2.0.0
- minimatch: 9.0.3
+ minimatch: 9.0.4
dev: true
/@types/babel__core@7.20.5:
@@ -8205,12 +8242,12 @@ packages:
resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
dependencies:
'@types/connect': 3.4.35
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
/@types/bonjour@3.5.10:
resolution: {integrity: sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==}
dependencies:
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
/@types/chai@4.3.11:
resolution: {integrity: sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==}
@@ -8229,17 +8266,17 @@ packages:
resolution: {integrity: sha512-4x5FkPpLipqwthjPsF7ZRbOv3uoLUFkTA9G9v583qi4pACvq0uTELrB8OLUzPWUI4IJIyvM85vzkV1nyiI2Lig==}
dependencies:
'@types/express-serve-static-core': 4.17.36
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
/@types/connect@3.4.35:
resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
dependencies:
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
/@types/conventional-commits-parser@5.0.0:
resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
dependencies:
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
dev: true
/@types/cookie@0.4.1:
@@ -8270,7 +8307,7 @@ packages:
/@types/express-serve-static-core@4.17.36:
resolution: {integrity: sha512-zbivROJ0ZqLAtMzgzIUC4oNqDG9iF0lSsAqpOD9kbs5xcIM3dTiyuHvBc7R8MtWBp3AAWGaovJa+wzWPjLYW7Q==}
dependencies:
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
'@types/qs': 6.9.7
'@types/range-parser': 1.2.4
'@types/send': 0.17.1
@@ -8346,7 +8383,6 @@ packages:
/@types/json-schema@7.0.15:
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
- dev: true
/@types/junit-report-builder@3.0.2:
resolution: {integrity: sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==}
@@ -8420,11 +8456,6 @@ packages:
resolution: {integrity: sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==}
dependencies:
undici-types: 5.26.5
-
- /@types/node@20.11.30:
- resolution: {integrity: sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==}
- dependencies:
- undici-types: 5.26.5
dev: true
/@types/node@20.12.7:
@@ -8486,18 +8517,14 @@ packages:
resolution: {integrity: sha512-T+YwkslhsM+CeuhYUxyAjWm7mJ5am/K10UX40RuA6k6Lc7eGtq8iY2xOzy7Vq0GOqhl/xZl5l2FwURZMTPTUww==}
dev: true
- /@types/semver@7.5.0:
- resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
-
/@types/semver@7.5.8:
resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
- dev: true
/@types/send@0.17.1:
resolution: {integrity: sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==}
dependencies:
'@types/mime': 1.3.2
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
/@types/serve-index@1.9.1:
resolution: {integrity: sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==}
@@ -8509,7 +8536,7 @@ packages:
dependencies:
'@types/http-errors': 2.0.1
'@types/mime': 3.0.1
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
/@types/sinon@10.0.20:
resolution: {integrity: sha512-2APKKruFNCAZgx3daAyACGzWuJ028VVCUDk6o2rw/Z4PXT0ogwdV4KUegW0MwVs0Zu59auPXbbuBJHF12Sx1Eg==}
@@ -8522,7 +8549,7 @@ packages:
/@types/sockjs@0.3.33:
resolution: {integrity: sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==}
dependencies:
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
/@types/stack-utils@2.0.1:
resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
@@ -8542,7 +8569,7 @@ packages:
/@types/ws@8.5.5:
resolution: {integrity: sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==}
dependencies:
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
/@types/yargs-parser@21.0.0:
resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
@@ -8558,7 +8585,7 @@ packages:
resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
requiresBuild: true
dependencies:
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
optional: true
/@typescript-eslint/eslint-plugin@6.15.0(@typescript-eslint/parser@6.15.0)(eslint@8.56.0)(typescript@5.4.5):
@@ -8572,7 +8599,7 @@ packages:
typescript:
optional: true
dependencies:
- '@eslint-community/regexpp': 4.8.0
+ '@eslint-community/regexpp': 4.10.0
'@typescript-eslint/parser': 6.15.0(eslint@8.57.0)(typescript@5.4.5)
'@typescript-eslint/scope-manager': 6.15.0
'@typescript-eslint/type-utils': 6.15.0(eslint@8.56.0)(typescript@5.4.5)
@@ -8581,10 +8608,10 @@ packages:
debug: 4.3.4(supports-color@8.1.1)
eslint: 8.56.0
graphemer: 1.4.0
- ignore: 5.2.4
+ ignore: 5.3.1
natural-compare: 1.4.0
semver: 7.6.0
- ts-api-utils: 1.0.2(typescript@5.4.5)
+ ts-api-utils: 1.3.0(typescript@5.4.5)
typescript: 5.4.5
transitivePeerDependencies:
- supports-color
@@ -8688,7 +8715,7 @@ packages:
'@typescript-eslint/utils': 6.15.0(eslint@8.56.0)(typescript@5.4.5)
debug: 4.3.4(supports-color@8.1.1)
eslint: 8.56.0
- ts-api-utils: 1.0.2(typescript@5.4.5)
+ ts-api-utils: 1.3.0(typescript@5.4.5)
typescript: 5.4.5
transitivePeerDependencies:
- supports-color
@@ -8737,7 +8764,7 @@ packages:
globby: 11.1.0
is-glob: 4.0.3
semver: 7.6.0
- ts-api-utils: 1.0.2(typescript@5.4.5)
+ ts-api-utils: 1.3.0(typescript@5.4.5)
typescript: 5.4.5
transitivePeerDependencies:
- supports-color
@@ -8771,8 +8798,8 @@ packages:
eslint: ^7.0.0 || ^8.0.0
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
- '@types/json-schema': 7.0.12
- '@types/semver': 7.5.0
+ '@types/json-schema': 7.0.15
+ '@types/semver': 7.5.8
'@typescript-eslint/scope-manager': 6.15.0
'@typescript-eslint/types': 6.15.0
'@typescript-eslint/typescript-estree': 6.15.0(typescript@5.4.5)
@@ -8874,7 +8901,7 @@ packages:
webpack: ^4 || ^5
dependencies:
'@ampproject/remapping': 2.3.0
- '@rollup/pluginutils': 5.1.0
+ '@rollup/pluginutils': 5.1.0(rollup@3.28.1)
'@unocss/config': 0.58.9
'@unocss/core': 0.58.9
chokidar: 3.6.0
@@ -9876,7 +9903,7 @@ packages:
peerDependencies:
'@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
dependencies:
- '@babel/compat-data': 7.24.1
+ '@babel/compat-data': 7.24.4
'@babel/core': 7.23.6
'@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.23.6)
semver: 6.3.1
@@ -12228,7 +12255,7 @@ packages:
dependencies:
'@types/cookie': 0.4.1
'@types/cors': 2.8.17
- '@types/node': 20.11.30
+ '@types/node': 20.12.7
accepts: 1.3.8
base64id: 2.0.0
cookie: 0.4.2
@@ -12878,7 +12905,7 @@ packages:
hasBin: true
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
- '@eslint-community/regexpp': 4.8.0
+ '@eslint-community/regexpp': 4.10.0
'@eslint/eslintrc': 2.1.4
'@eslint/js': 8.56.0
'@humanwhocodes/config-array': 0.11.14
@@ -12902,7 +12929,7 @@ packages:
glob-parent: 6.0.2
globals: 13.21.0
graphemer: 1.4.0
- ignore: 5.2.4
+ ignore: 5.3.1
imurmurhash: 0.1.4
is-glob: 4.0.3
is-path-inside: 3.0.3
@@ -14070,7 +14097,7 @@ packages:
array-union: 3.0.1
dir-glob: 3.0.1
fast-glob: 3.3.2
- ignore: 5.2.4
+ ignore: 5.3.1
merge2: 1.4.1
slash: 4.0.0
@@ -14584,7 +14611,7 @@ packages:
resolution: {integrity: sha512-t7sv42WkwFkyKbivUCglsQW5YWMskWtbEf4MNKX5u/CCWHKSPzN4FtBQGsQZgCLbxOzpVlcbWVK5KB3auIOjSw==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
dependencies:
- minimatch: 9.0.3
+ minimatch: 9.0.4
dev: true
/ignore@5.2.4:
@@ -14594,7 +14621,6 @@ packages:
/ignore@5.3.1:
resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
engines: {node: '>= 4'}
- dev: true
/image-size@0.5.5:
resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
@@ -15551,7 +15577,7 @@ packages:
dependencies:
'@jest/types': 26.6.2
'@types/graceful-fs': 4.1.6
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
anymatch: 3.1.3
fb-watchman: 2.0.2
graceful-fs: 4.2.11
@@ -15689,7 +15715,7 @@ packages:
'@jest/environment': 26.6.2
'@jest/test-result': 26.6.2
'@jest/types': 26.6.2
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
chalk: 4.1.2
emittery: 0.7.2
exit: 0.1.2
@@ -15790,7 +15816,7 @@ packages:
engines: {node: '>= 10.14.2'}
dependencies:
'@jest/types': 26.6.2
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
chalk: 4.1.2
graceful-fs: 4.2.11
is-ci: 2.0.0
@@ -15815,7 +15841,7 @@ packages:
dependencies:
'@jest/test-result': 26.6.2
'@jest/types': 26.6.2
- '@types/node': 20.11.28
+ '@types/node': 20.12.7
ansi-escapes: 4.3.2
chalk: 4.1.2
jest-util: 26.6.2
@@ -17600,13 +17626,37 @@ packages:
fs-extra: 11.1.1
globby: 13.2.2
jiti: 1.21.0
- mlly: 1.4.1
+ mlly: 1.4.2
mri: 1.2.0
pathe: 1.1.1
sass: 1.75.0
typescript: 5.4.5
dev: true
+ /mkdist@1.3.0(typescript@5.4.5):
+ resolution: {integrity: sha512-ZQrUvcL7LkRdzMREpDyg9AT18N9Tl5jc2qeKAUeEw0KGsgykbHbuRvysGAzTuGtwuSg0WQyNit5jh/k+Er3JEg==}
+ hasBin: true
+ peerDependencies:
+ sass: ^1.63.6
+ typescript: '>=5.1.6'
+ peerDependenciesMeta:
+ sass:
+ optional: true
+ typescript:
+ optional: true
+ dependencies:
+ citty: 0.1.3
+ defu: 6.1.2
+ esbuild: 0.18.20
+ fs-extra: 11.1.1
+ globby: 13.2.2
+ jiti: 1.21.0
+ mlly: 1.4.1
+ mri: 1.2.0
+ pathe: 1.1.1
+ typescript: 5.4.5
+ dev: true
+
/mlly@1.4.1:
resolution: {integrity: sha512-SCDs78Q2o09jiZiE2WziwVBEqXQ02XkGdUy45cbJf+BpYRIjArXRJ1Wbowxkb+NaM9DWvS3UC9GiO/6eqvQ/pg==}
dependencies:
@@ -18411,7 +18461,7 @@ packages:
flat: 5.0.2
fs-extra: 11.1.1
glob: 7.1.4
- ignore: 5.2.4
+ ignore: 5.3.1
jest-diff: 29.7.0
js-yaml: 4.1.0
jsonc-parser: 3.2.0
@@ -21022,7 +21072,6 @@ packages:
hasBin: true
optionalDependencies:
fsevents: 2.3.3
- dev: true
/rollup@4.8.0:
resolution: {integrity: sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==}
@@ -21273,7 +21322,7 @@ packages:
resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
engines: {node: '>= 10.13.0'}
dependencies:
- '@types/json-schema': 7.0.12
+ '@types/json-schema': 7.0.15
ajv: 6.12.6
ajv-keywords: 3.5.2(ajv@6.12.6)
@@ -22765,14 +22814,6 @@ packages:
resolution: {integrity: sha512-rqy30BSpxPznbbTcAcci90oZ1YR4DqvKcNXNerG5gQBU2v4jk0cygheiul5J6ExIMrgDVuanv/MkGfqZbKrNNg==}
engines: {node: 10.* || >= 12.*}
- /ts-api-utils@1.0.2(typescript@5.4.5):
- resolution: {integrity: sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==}
- engines: {node: '>=16.13.0'}
- peerDependencies:
- typescript: '>=4.2.0'
- dependencies:
- typescript: 5.4.5
-
/ts-api-utils@1.3.0(typescript@5.4.5):
resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
engines: {node: '>=16'}
@@ -22780,7 +22821,6 @@ packages:
typescript: '>=4.2.0'
dependencies:
typescript: 5.4.5
- dev: true
/ts-interface-checker@0.1.13:
resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
@@ -23182,7 +23222,7 @@ packages:
has-symbols: 1.0.3
which-boxed-primitive: 1.0.2
- /unbuild@1.2.1(sass@1.75.0):
+ /unbuild@1.2.1:
resolution: {integrity: sha512-J4efk69Aye43tWcBPCsLK7TIRppGrEN4pAlDzRKo3HSE6MgTSTBxSEuE3ccx7ixc62JvGQ/CoFXYqqF2AHozow==}
hasBin: true
dependencies:
@@ -23200,7 +23240,7 @@ packages:
hookable: 5.5.3
jiti: 1.19.3
magic-string: 0.30.3
- mkdist: 1.3.0(sass@1.75.0)(typescript@5.4.5)
+ mkdist: 1.3.0(typescript@5.4.5)
mlly: 1.4.1
mri: 1.2.0
pathe: 1.1.1
@@ -23216,6 +23256,40 @@ packages:
- supports-color
dev: true
+ /unbuild@1.2.1(sass@1.75.0):
+ resolution: {integrity: sha512-J4efk69Aye43tWcBPCsLK7TIRppGrEN4pAlDzRKo3HSE6MgTSTBxSEuE3ccx7ixc62JvGQ/CoFXYqqF2AHozow==}
+ hasBin: true
+ dependencies:
+ '@rollup/plugin-alias': 5.0.0(rollup@3.28.1)
+ '@rollup/plugin-commonjs': 24.1.0(rollup@3.28.1)
+ '@rollup/plugin-json': 6.0.0(rollup@3.28.1)
+ '@rollup/plugin-node-resolve': 15.2.1(rollup@3.28.1)
+ '@rollup/plugin-replace': 5.0.2(rollup@3.28.1)
+ '@rollup/pluginutils': 5.1.0(rollup@3.28.1)
+ chalk: 5.3.0
+ consola: 3.2.3
+ defu: 6.1.2
+ esbuild: 0.17.19
+ globby: 13.2.2
+ hookable: 5.5.3
+ jiti: 1.21.0
+ magic-string: 0.30.8
+ mkdist: 1.3.0(sass@1.75.0)(typescript@5.4.5)
+ mlly: 1.4.2
+ mri: 1.2.0
+ pathe: 1.1.1
+ pkg-types: 1.0.3
+ pretty-bytes: 6.1.1
+ rollup: 3.28.1
+ rollup-plugin-dts: 5.3.1(rollup@3.28.1)(typescript@5.4.5)
+ scule: 1.0.0
+ typescript: 5.4.5
+ untyped: 1.4.0
+ transitivePeerDependencies:
+ - sass
+ - supports-color
+ dev: true
+
/unbzip2-stream@1.4.3:
resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
dependencies:
@@ -23530,7 +23604,7 @@ packages:
resolution: {integrity: sha512-vLFU70y3D915d611GnHYeHkEmq6ZZETzTH4P1hM6I9E3lBwH2VeBBEESe/bGCY+gAyK0qqLFn5bNFpui/GKmww==}
dev: true
- /vite-plugin-solid@2.8.0(solid-js@1.8.16)(vite@5.1.5):
+ /vite-plugin-solid@2.8.0(solid-js@1.8.16)(vite@5.1.7):
resolution: {integrity: sha512-n5FAm7ZmTl94VWUoiJCgG7bouF2NlC9CA1wY/qbVnkFbYDWk++bFWyNoU48aLJ+lMtzNeYzJypJXOHzFKxL9xA==}
peerDependencies:
solid-js: ^1.7.2
@@ -23543,49 +23617,12 @@ packages:
merge-anything: 5.1.7
solid-js: 1.8.16
solid-refresh: 0.5.3(solid-js@1.8.16)
- vite: 5.1.5(@types/node@20.11.25)(less@4.2.0)
- vitefu: 0.2.5(vite@5.1.5)
+ vite: 5.1.7(@types/node@20.11.25)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
+ vitefu: 0.2.5(vite@5.1.7)
transitivePeerDependencies:
- supports-color
dev: true
- /vite@5.1.5(@types/node@20.11.25)(less@4.2.0):
- resolution: {integrity: sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==}
- engines: {node: ^18.0.0 || >=20.0.0}
- hasBin: true
- peerDependencies:
- '@types/node': ^18.0.0 || >=20.0.0
- less: '*'
- lightningcss: ^1.21.0
- sass: '*'
- stylus: '*'
- sugarss: '*'
- terser: ^5.4.0
- peerDependenciesMeta:
- '@types/node':
- optional: true
- less:
- optional: true
- lightningcss:
- optional: true
- sass:
- optional: true
- stylus:
- optional: true
- sugarss:
- optional: true
- terser:
- optional: true
- dependencies:
- '@types/node': 20.11.25
- esbuild: 0.19.3
- less: 4.2.0
- postcss: 8.4.38
- rollup: 4.8.0
- optionalDependencies:
- fsevents: 2.3.3
- dev: true
-
/vite@5.1.7(@types/node@20.11.25)(less@4.2.0)(sass@1.71.1)(terser@5.29.1):
resolution: {integrity: sha512-sgnEEFTZYMui/sTlH1/XEnVNHMujOahPLGMxn1+5sIT45Xjng1Ec1K78jRP15dSmVgg5WBin9yO81j3o9OxofA==}
engines: {node: ^18.0.0 || >=20.0.0}
@@ -23625,7 +23662,7 @@ packages:
fsevents: 2.3.3
dev: true
- /vitefu@0.2.5(vite@5.1.5):
+ /vitefu@0.2.5(vite@5.1.7):
resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
peerDependencies:
vite: ^3.0.0 || ^4.0.0 || ^5.0.0
@@ -23633,7 +23670,7 @@ packages:
vite:
optional: true
dependencies:
- vite: 5.1.5(@types/node@20.11.25)(less@4.2.0)
+ vite: 5.1.7(@types/node@20.11.25)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
dev: true
/vlq@0.2.3:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 182b9e93ec..85efaa9ee1 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -14,6 +14,7 @@ packages:
- 'packages/test-tag-name-transformer'
- 'packages/themes'
- 'packages/themes/bmf'
+ - 'packages/themes/bstw'
- 'packages/themes/default'
- 'packages/themes/ecl'
- 'packages/themes/itzbund'
From eda991df872b87288aabed182fe581e4187dbd81 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Fri, 26 Apr 2024 07:51:18 +0200
Subject: [PATCH 2/2] (#6363) chore: add to sample app
---
packages/samples/react/src/react.main.tsx | 4 ++--
packages/samples/react/src/shares/theme.ts | 8 ++++++--
packages/themes/bstw/package.json | 4 ++--
packages/themes/src/index.ts | 1 +
4 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/packages/samples/react/src/react.main.tsx b/packages/samples/react/src/react.main.tsx
index 77e7f8a619..f996a0b8c4 100644
--- a/packages/samples/react/src/react.main.tsx
+++ b/packages/samples/react/src/react.main.tsx
@@ -5,7 +5,7 @@ import { setTagNameTransformer } from '@public-ui/react';
import { bootstrap } from '@public-ui/components';
import { defineCustomElements } from '@public-ui/components/dist/loader';
-import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
+import { BMF, BStW, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
import { App } from './App';
@@ -29,7 +29,7 @@ const getThemes = async () => {
}
/* List of regular sample app themes */
- return [BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund];
+ return [BMF, BStW, DEFAULT, ECL_EC, ECL_EU, ITZBund];
};
void (async () => {
diff --git a/packages/samples/react/src/shares/theme.ts b/packages/samples/react/src/shares/theme.ts
index f8c2e6dde2..7ebf6f3867 100644
--- a/packages/samples/react/src/shares/theme.ts
+++ b/packages/samples/react/src/shares/theme.ts
@@ -1,10 +1,10 @@
import { SelectOption } from '@public-ui/components';
-export const THEMES = ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'] as const;
+export const THEMES = ['bmf', 'bstw', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'] as const;
export type Theme = (typeof THEMES)[number];
export type ThemeAndUnstyled = Theme | 'unstyled';
-const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
+const drafts: ThemeAndUnstyled[] = ['bstw', 'ecl-ec', 'ecl-eu', 'itzbund'];
export const isDraftTheme = (theme: ThemeAndUnstyled) => drafts.includes(theme);
@@ -26,6 +26,10 @@ export const THEME_OPTIONS: SelectOption[] = [
label: 'Bundesministerium der Finanzen (Tested)',
value: 'bmf',
},
+ {
+ label: 'BStW (Draft)',
+ value: 'bstw',
+ },
{
label: 'Default (Tested)',
value: 'default',
diff --git a/packages/themes/bstw/package.json b/packages/themes/bstw/package.json
index a040900ee7..85ef1ae55c 100644
--- a/packages/themes/bstw/package.json
+++ b/packages/themes/bstw/package.json
@@ -45,8 +45,8 @@
"format": "prettier --check src",
"lint": "tsc --noemit && eslint src",
"prepack": "unbuild",
- "test": "THEME_MODULE=dist THEME_EXPORT=BStW kolibri-visual-test",
- "test-update": "THEME_MODULE=dist THEME_EXPORT=BStW kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+ "xtest": "THEME_MODULE=dist THEME_EXPORT=BStW kolibri-visual-test",
+ "xtest-update": "THEME_MODULE=dist THEME_EXPORT=BStW kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
"pretest": "pnpm build",
"pretest-update": "pnpm build"
},
diff --git a/packages/themes/src/index.ts b/packages/themes/src/index.ts
index a27cc45218..bb0a9718a6 100644
--- a/packages/themes/src/index.ts
+++ b/packages/themes/src/index.ts
@@ -1,4 +1,5 @@
export * from '../bmf/src';
+export * from '../bstw/src';
export * from '../default/src';
export * from '../ecl/src';
export * from '../itzbund/src';