diff --git a/packages/themes/bwst/README.md b/packages/themes/bwst/README.md index 2e858586bcd..9bce0427e3d 100644 --- 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 index d0520a77c15..7b5a3323642 100644 --- 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 index 31da4cd9462..e5deef94883 100644 --- 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 index 1a08933cff6..28bb60b806c 100644 --- 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 index 4bc8d5b3d2d..b6dff0af201 100644 --- 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 index 30a4d939edf..58053c5b802 100644 --- 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 index 1f012c3ee83..ee2b9178dc8 100644 --- 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 index 08be74e6ba8..255de0769b6 100644 --- 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 index 324a34e83a2..c30845efec9 100644 --- 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 index d2ea1b71899..fd55b2a8e43 100644 --- 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 index fd93b24bdb7..019b0d790e2 100644 --- 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 index 2b83ce16d56..60236e14ecf 100644 --- 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); }