fix(slideshow-contrast): improve contrast of non-selected bullets

lumapps · Jan 10, 2025 · 995e3ad · 995e3ad
1 parent 1deef0e
commit 995e3ad
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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,19 +131,22 @@
         }
 
         #{$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");
             }
 
             &: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");