bwst Theme: Optimierung readme.md und theme#10012
bwst Theme: Optimierung readme.md und theme#10012transkamp wants to merge 1 commit intopublic-ui:developfrom
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the bwst theme by refining design tokens, correcting CSS color syntax from rgb to rgba, and adjusting focus and border styles. Review feedback highlights a critical issue in spin.scss where the removal of dimensions prevents the loader from rendering correctly. Additionally, it is recommended to replace hardcoded shadow colors with central design tokens for better maintainability and to increase the outline-offset in link.scss as the current value is too small to be visible.
| border-width: 6px; | ||
| animation-duration: 1.5s; | ||
| animation-name: rotation; |
There was a problem hiding this comment.
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;|
|
||
| &: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); |
There was a problem hiding this comment.
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.
|
|
||
| .#{$block-classname}__text { | ||
| outline: var(--border-width) solid; | ||
| outline-offset: to-rem(0.05); |
There was a problem hiding this comment.
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.
| outline-offset: to-rem(0.05); | |
| outline-offset: to-rem(1); |
1 participant
Hinweis für link.scss Zeile 12. Die Anweisung wurde absichtlich nicht entfernt.
&:focus { // Outline für Fokus wurde entfernt, ein focus-visible ist aber trotzdem für Tastatursteuerung berücksichtigt outline: none;