Remove opacity from lightbox pagination dots

zigurous · Nov 19, 2024 · c6a0c89 · c6a0c89
1 parent 14fb0c7
commit c6a0c89
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/dist/index.min.css.map b/dist/index.min.css.map
diff --git a/src/components/lightbox.css b/src/components/lightbox.css
@@ -1,3 +1,17 @@
+.lightbox > .overlay__scrim.bg-white + .lightbox__dialog,
+.lightbox[data-theme="light"] > .overlay__scrim.bg-background + .lightbox__dialog,
+.lightbox:not([data-theme]) > .overlay__scrim.bg-background + .lightbox__dialog {
+  --lightbox-active-color: #808080;
+  --lightbox-inactive-color: #bfbfbf;
+}
+
+.lightbox > .overlay__scrim.bg-black + .lightbox__dialog,
+.lightbox[data-theme="dark"] > .overlay__scrim.bg-background + .lightbox__dialog,
+.lightbox[data-theme="high-contrast"] > .overlay__scrim.bg-background + .lightbox__dialog {
+  --lightbox-active-color: #a6a6a6;
+  --lightbox-inactive-color: #666666;
+}
+
 .lightbox {
   position: fixed;
   top: 0;
@@ -40,7 +54,7 @@
 .lightbox__next,
 .lightbox__previous,
 .lightbox__close {
-  color: gray;
+  color: var(--lightbox-active-color);
 }
 
 .lightbox__next,
@@ -86,10 +100,9 @@
   width: var(--spacing-lg);
   height: var(--spacing-lg);
   border-radius: 50%;
-  background-color: gray;
-  opacity: var(--opacity-disabled);
+  background-color: var(--lightbox-inactive-color);
 }
 
 .lightbox__pagination-dot.selected {
-  opacity: 1;
+  background-color: var(--lightbox-active-color);
 }