optimierung readme.md und bwst theme

transkamp · transkamp · commit 01314f1ad339 · 2026-04-17T11:05:43.000+02:00
diff --git a/packages/themes/bwst/README.md b/packages/themes/bwst/README.md
@@ -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                      |
 | ------------------------- | ---------------------------------------------------------------------------- | ---------------------------- |
diff --git a/packages/themes/bwst/src/components/details.scss b/packages/themes/bwst/src/components/details.scss
@@ -48,9 +48,6 @@
 				@include focus-outline;
 			}
 		}
-		&:has(:focus-visible) {
-			@include focus-outline;
-		}
 
 		.collapsible__heading {
 			border-top: 1px solid var(--color-mute-variant);
diff --git a/packages/themes/bwst/src/components/input-checkbox.scss b/packages/themes/bwst/src/components/input-checkbox.scss
@@ -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);
 				border-color: var(--color-primary);
 			}
 		}
@@ -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);
 					}
 				}
diff --git a/packages/themes/bwst/src/components/input-radio.scss b/packages/themes/bwst/src/components/input-radio.scss
@@ -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);
 			}
 
diff --git a/packages/themes/bwst/src/components/nav.scss b/packages/themes/bwst/src/components/nav.scss
@@ -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);
 					}
 
diff --git a/packages/themes/bwst/src/components/spin.scss b/packages/themes/bwst/src/components/spin.scss
@@ -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;
 			}
diff --git a/packages/themes/bwst/src/global.scss b/packages/themes/bwst/src/global.scss
@@ -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);
@@ -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 {
diff --git a/packages/themes/bwst/src/mixins/alert.scss b/packages/themes/bwst/src/mixins/alert.scss
@@ -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);
diff --git a/packages/themes/bwst/src/mixins/button.scss b/packages/themes/bwst/src/mixins/button.scss
@@ -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);
 			}
 
diff --git a/packages/themes/bwst/src/mixins/kol-table-stateless-wc.scss b/packages/themes/bwst/src/mixins/kol-table-stateless-wc.scss
@@ -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 {
@@ -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);
 			}
 		}
diff --git a/packages/themes/bwst/src/mixins/link.scss b/packages/themes/bwst/src/mixins/link.scss
@@ -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);
 				border-radius: var(--border-radius);
 				position: relative; // make sure focus outline is visible and not covered by adjacent element
 			}
diff --git a/packages/themes/bwst/src/mixins/pagination-mixin.scss b/packages/themes/bwst/src/mixins/pagination-mixin.scss
@@ -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);
 			}
 

Original file line number	Diff line number	Diff line change
`@@ -48,9 +48,6 @@`
`48`	`48`	`@include focus-outline;`
`49`	`49`	`}`
`50`	`50`	`}`
`51`		`- &:has(:focus-visible) {`
`52`		`- @include focus-outline;`
`53`		`- }`
`54`	`51`
`55`	`52`	`.collapsible__heading {`
`56`	`53`	`border-top: 1px solid var(--color-mute-variant);`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`&:not(:disabled):hover {`
`72`		`- box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);`
	`72`	`+ box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);`
`73`	`73`	`border-color: var(--color-primary);`
`74`	`74`	`}`
`75`	`75`	`}`
`@@ -219,7 +219,7 @@`
`219`	`219`	`&__label {`
`220`	`220`	`color: var(--color-light);`
`221`	`221`	`background-color: var(--color-primary-variant);`
`222`		`- box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);`
	`222`	`+ box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);`
`223`	`223`	`border-color: var(--color-primary-variant);`
`224`	`224`	`}`
`225`	`225`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@`
`55`	`55`	`line-height: 1.5;`
`56`	`56`
`57`	`57`	`&:not(:disabled):hover {`
`58`		`- box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);`
	`58`	`+ box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);`
`59`	`59`	`border-color: var(--color-primary);`
`60`	`60`	`}`
`61`	`61`
Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,7 @@`
`102`	`102`	`&:hover {`
`103`	`103`	`color: var(--text-color);`
`104`	`104`	`background-color: var(--text-background-color);`
`105`		`- box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);`
	`105`	`+ box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);`
`106`	`106`	`border-color: var(--text-border-color);`
`107`	`107`	`}`
`108`	`108`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.kol-alert--variant-card {`
`31`		`- filter: drop-shadow(0 to-rem(2) to-rem(4) rgb(8, 35, 48, 0.24));`
	`31`	`+ filter: drop-shadow(0 to-rem(2) to-rem(4) rgba(8, 35, 48, 0.24));`
`32`	`32`	`border-radius: var(--border-radius);`
`33`	`33`	`flex-direction: column;`
`34`	`34`	`border: var(--border-width) solid var(--alert-accent-color);`
Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@`
`92`	`92`	`&:hover {`
`93`	`93`	`color: var(--text-color);`
`94`	`94`	`background-color: var(--text-background-color);`
`95`		`- box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24);`
	`95`	`+ box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);`
`96`	`96`	`border-color: var(--text-border-color);`
`97`	`97`	`}`
`98`	`98`