Skip to content

bwst Theme: Optimierung readme.md und theme #10012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
transkamp wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

bwst Theme: Optimierung readme.md und theme #10012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/themes/bwst/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ To adjust the design tokens, create a simple stylesheet that overrides the desir

## Design Tokens

The following tokens are defined in `src/global.scss` and serve as the base for colors, fonts, and spacing across all components.
The following tokens are defined in `src/global.scss` and serve as the base for colors, fonts, and spacing across all components. For a comprehensive reference of all tokens including their usage context, see [DESIGN_TOKENS.md](./DESIGN_TOKENS.md).

| Token | Default value | Meaning |
| ------------------------- | ---------------------------------------------------------------------------- | ---------------------------- |
Expand Down
3 changes: 0 additions & 3 deletions packages/themes/bwst/src/components/details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,6 @@
@include focus-outline;
}
}
&:has(:focus-visible) {
@include focus-outline;
}

.collapsible__heading {
border-top: 1px solid var(--color-mute-variant);
Expand Down
4 changes: 2 additions & 2 deletions packages/themes/bwst/src/components/input-checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
}

&:not(:disabled):hover {
box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Der Wert rgba(8, 35, 48, 0.24) ist hartkodiert. Gemäß der DESIGN_TOKENS.md (Zeile 265) sollte dieser Wert als zentrales Design-Token (z. B. --shadow-color) in global.scss definiert werden, um Konsistenz und Wartbarkeit zu gewährleisten. Dies betrifft alle Stellen in diesem Pull Request, an denen dieser Farbwert angepasst wurde.

border-color: var(--color-primary);
}
}
Expand Down Expand Up @@ -219,7 +219,7 @@
&__label {
color: var(--color-light);
background-color: var(--color-primary-variant);
box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
border-color: var(--color-primary-variant);
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bwst/src/components/input-radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
line-height: 1.5;

&:not(:disabled):hover {
box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
border-color: var(--color-primary);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bwst/src/components/nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
&:hover {
color: var(--text-color);
background-color: var(--text-background-color);
box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
border-color: var(--text-border-color);
}

Expand Down
4 changes: 1 addition & 3 deletions packages/themes/bwst/src/components/spin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,7 @@
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
width: to-rem(96);
height: to-rem(96);
border-width: 10px;
border-width: 6px;
animation-duration: 1.5s;
animation-name: rotation;
Comment on lines +14 to 16
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Durch das Entfernen von width und height sowie das Fehlen der content-Eigenschaft wird das Pseudo-Element :before nicht mehr korrekt gerendert (es hat eine Größe von 0x0 oder wird gar nicht erzeugt). Zudem ist die Animation auf dem Pseudo-Element redundant zur Animation auf dem Container (&__loader, Zeile 6).

				content: '';
				width: to-rem(96);
				height: to-rem(96);
				border-width: 6px;

}
Expand Down
5 changes: 2 additions & 3 deletions packages/themes/bwst/src/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@
@layer kol-theme-global {
:host {
--border-radius: var(--kolibri-border-radius, #{to-rem(4)});
//--font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);
--font-family: var(--kolibri-font-family, 'Noto Sans Regular', Arial, helvetica, sans-serif);
--font-size: var(--kolibri-font-size, #{to-rem(16)});
--spacing: var(--kolibri-spacing, #{to-rem(4)});
--border-width: var(--kolibri-border-width, 1px);
--border-width: var(--kolibri-border-width, 2px);
--color-primary: var(--kolibri-color-primary, #156570);
--color-primary-variant: var(--kolibri-color-primary-variant, #207a8b);
--color-secondary: var(--kolibri-color-secondary, #ccebf7);
Expand Down Expand Up @@ -40,7 +39,7 @@
padding: 0;
}

*[tabindex]:not([role='tabpanel']):focus,
*[tabindex]:not([role='tabpanel']):not([tabindex='-1']):focus,
.kol-input:not(.checkbox, .radio) .input:focus-within,
.kol-input:is(.checkbox, .radio) input:focus,
summary:focus {
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bwst/src/mixins/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}

.kol-alert--variant-card {
filter: drop-shadow(0 to-rem(2) to-rem(4) rgb(8, 35, 48, 0.24));
filter: drop-shadow(0 to-rem(2) to-rem(4) rgba(8, 35, 48, 0.24));
border-radius: var(--border-radius);
flex-direction: column;
border: var(--border-width) solid var(--alert-accent-color);
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bwst/src/mixins/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
&:hover {
color: var(--text-color);
background-color: var(--text-background-color);
box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
border-color: var(--text-border-color);
}

Expand Down
4 changes: 2 additions & 2 deletions packages/themes/bwst/src/mixins/kol-table-stateless-wc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@
--kol-selection-input-main-color: var(--color-primary);
--kol-selection-input-off-color: var(--color-subtle);
--kol-selection-input-focus-color: var(--color-primary-variant);
--kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);
--kol-selection-input-hover-color: rgba(8, 35, 48, 0.24);
--kol-selection-input-icon-color: var(--color-light);

&-input {
Expand Down Expand Up @@ -209,7 +209,7 @@
--kol-selection-input-main-color: var(--color-light);
--kol-selection-input-off-color: var(--color-mute);
--kol-selection-input-focus-color: var(--color-mute-variant);
--kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);
--kol-selection-input-hover-color: rgba(255, 255, 255, 0.24);
--kol-selection-input-icon-color: var(--color-primary);
}
}
Expand Down
2 changes: 2 additions & 0 deletions packages/themes/bwst/src/mixins/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@
font-style: normal;

&:focus {
// Outline für Fokus wurde entfernt, ein focus-visible ist aber trotzdem für Tastatursteuerung berücksichtigt
outline: none;

.#{$block-classname}__text {
outline: var(--border-width) solid;
outline-offset: to-rem(0.05);
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Der Wert to-rem(0.05) ist extrem klein (entspricht ca. 0,05px bei Standard-Rem) und wird daher optisch nicht wahrnehmbar sein. Falls ein minimaler Abstand gewünscht ist, sollte ein Wert von mindestens to-rem(1) verwendet werden.

Suggested change
outline-offset: to-rem(0.05);
outline-offset: to-rem(1);

border-radius: var(--border-radius);
position: relative; // make sure focus outline is visible and not covered by adjacent element
}
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bwst/src/mixins/pagination-mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
&:is(:active, :hover):not(:disabled) .kol-button__text {
color: var(--color-light);
background-color: var(--color-primary-variant);
box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
border-color: var(--color-primary-variant);
}

Expand Down
Loading
⚡