diff --git a/CHANGELOG.md b/CHANGELOG.md index c289541b1..bdcbae61f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed -- `TextField`: change theme light border color for better contrast +- `TextField`: change theme light border color for better contrast. +- `SlideShow`: rework control button color contrast for better a11y. ## [3.9.8][] - 2025-01-10 diff --git a/packages/lumx-core/src/scss/components/slideshow/_index.scss b/packages/lumx-core/src/scss/components/slideshow/_index.scss index 4fe7b2624..753d2f97b 100644 --- a/packages/lumx-core/src/scss/components/slideshow/_index.scss +++ b/packages/lumx-core/src/scss/components/slideshow/_index.scss @@ -119,7 +119,8 @@ text-decoration: none; cursor: pointer; user-select: none; - border: none; + background: none; + border-style: solid; border-radius: 50%; outline: none; transition: transform $lumx-slideshow-transition-duration; @@ -130,7 +131,8 @@ } #{$self}--theme-light & { - background-color:lumx-color-variant("dark", "L5"); + border-color:lumx-color-variant("dark", "L2"); + border-width: 2px; &[data-focus-visible-added] { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); @@ -138,11 +140,13 @@ &:hover { background-color: lumx-color-variant("primary", "N"); + border-width: 0; } &--is-active { background-color: lumx-color-variant("primary", "N"); width: $item-size*2; border-radius: $lumx-border-radius; + border-width: 0; &[data-focus-visible-added] { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "primary"); @@ -151,7 +155,7 @@ } #{$self}--theme-dark & { - background-color: lumx-color-variant("light", "L5"); + border-color: lumx-color-variant("light", "L2"); &[data-focus-visible-added] { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light");