Merge pull request #7661 from VKCOM/e.muhamethanov/7659/change-button…

…-secondary-overlay-styles feat(Button): update button background-color with appearance="overlay" and mode="secondary"
VKCOM · Sep 27, 2024 · 6eeb964 · 6eeb964
2 parents 3ab56f7 + 34e6065
commit 6eeb964
Show file tree

Hide file tree

Showing 31 changed files with 68 additions and 62 deletions.
diff --git a/packages/vkui/src/components/Button/Button.module.css b/packages/vkui/src/components/Button/Button.module.css
@@ -398,16 +398,22 @@
 }
 
 .modeSecondary.appearanceOverlay {
-  background-color: var(--vkui--color_background_contrast_secondary_alpha);
+  background-color: var(--vkui--color_overlay_primary);
+}
+
+.modeSecondary.appearanceOverlay.hover {
+  background-color: var(--vkui--color_overlay_primary--hover);
+}
+
+.modeSecondary.appearanceOverlay.active {
+  background-color: var(--vkui--color_overlay_primary--active);
 }
 
-.modeSecondary.appearanceOverlay.hover,
 .modeTertiary.appearanceOverlay.hover,
 .modeOutline.appearanceOverlay.hover {
   background-color: var(--vkui--color_background_contrast_secondary_alpha--hover);
 }
 
-.modeSecondary.appearanceOverlay.active,
 .modeTertiary.appearanceOverlay.active,
 .modeOutline.appearanceOverlay.active {
   background-color: var(--vkui--color_background_contrast_secondary_alpha--active);

diff --git a/...c/components/Button/__image_snapshots__/button-android-chromium-dark-1-snap.png b/...c/components/Button/__image_snapshots__/button-android-chromium-dark-1-snap.png
diff --git a/.../components/Button/__image_snapshots__/button-android-chromium-light-1-snap.png b/.../components/Button/__image_snapshots__/button-android-chromium-light-1-snap.png
diff --git a/...ents/Button/__image_snapshots__/button-counter-android-chromium-dark-1-snap.png b/...ents/Button/__image_snapshots__/button-counter-android-chromium-dark-1-snap.png
diff --git a/...nts/Button/__image_snapshots__/button-counter-android-chromium-light-1-snap.png b/...nts/Button/__image_snapshots__/button-counter-android-chromium-light-1-snap.png
diff --git a/...components/Button/__image_snapshots__/button-counter-ios-webkit-dark-1-snap.png b/...components/Button/__image_snapshots__/button-counter-ios-webkit-dark-1-snap.png
diff --git a/...omponents/Button/__image_snapshots__/button-counter-ios-webkit-light-1-snap.png b/...omponents/Button/__image_snapshots__/button-counter-ios-webkit-light-1-snap.png
diff --git a/...onents/Button/__image_snapshots__/button-counter-vkcom-chromium-dark-1-snap.png b/...onents/Button/__image_snapshots__/button-counter-vkcom-chromium-dark-1-snap.png
diff --git a/...nents/Button/__image_snapshots__/button-counter-vkcom-chromium-light-1-snap.png b/...nents/Button/__image_snapshots__/button-counter-vkcom-chromium-light-1-snap.png
diff --git a/...ponents/Button/__image_snapshots__/button-counter-vkcom-firefox-dark-1-snap.png b/...ponents/Button/__image_snapshots__/button-counter-vkcom-firefox-dark-1-snap.png
diff --git a/...onents/Button/__image_snapshots__/button-counter-vkcom-firefox-light-1-snap.png b/...onents/Button/__image_snapshots__/button-counter-vkcom-firefox-light-1-snap.png
diff --git a/...mponents/Button/__image_snapshots__/button-counter-vkcom-webkit-dark-1-snap.png b/...mponents/Button/__image_snapshots__/button-counter-vkcom-webkit-dark-1-snap.png
diff --git a/...ponents/Button/__image_snapshots__/button-counter-vkcom-webkit-light-1-snap.png b/...ponents/Button/__image_snapshots__/button-counter-vkcom-webkit-light-1-snap.png
diff --git a/...kui/src/components/Button/__image_snapshots__/button-ios-webkit-dark-1-snap.png b/...kui/src/components/Button/__image_snapshots__/button-ios-webkit-dark-1-snap.png
diff --git a/...ui/src/components/Button/__image_snapshots__/button-ios-webkit-light-1-snap.png b/...ui/src/components/Button/__image_snapshots__/button-ios-webkit-light-1-snap.png
diff --git a/...onents/Button/__image_snapshots__/button-state-android-chromium-dark-1-snap.png b/...onents/Button/__image_snapshots__/button-state-android-chromium-dark-1-snap.png
diff --git a/...nents/Button/__image_snapshots__/button-state-android-chromium-light-1-snap.png b/...nents/Button/__image_snapshots__/button-state-android-chromium-light-1-snap.png
diff --git a/...c/components/Button/__image_snapshots__/button-state-ios-webkit-dark-1-snap.png b/...c/components/Button/__image_snapshots__/button-state-ios-webkit-dark-1-snap.png
diff --git a/.../components/Button/__image_snapshots__/button-state-ios-webkit-light-1-snap.png b/.../components/Button/__image_snapshots__/button-state-ios-webkit-light-1-snap.png
diff --git a/...mponents/Button/__image_snapshots__/button-state-vkcom-chromium-dark-1-snap.png b/...mponents/Button/__image_snapshots__/button-state-vkcom-chromium-dark-1-snap.png
diff --git a/...ponents/Button/__image_snapshots__/button-state-vkcom-chromium-light-1-snap.png b/...ponents/Button/__image_snapshots__/button-state-vkcom-chromium-light-1-snap.png
diff --git a/...omponents/Button/__image_snapshots__/button-state-vkcom-firefox-dark-1-snap.png b/...omponents/Button/__image_snapshots__/button-state-vkcom-firefox-dark-1-snap.png
diff --git a/...mponents/Button/__image_snapshots__/button-state-vkcom-firefox-light-1-snap.png b/...mponents/Button/__image_snapshots__/button-state-vkcom-firefox-light-1-snap.png
diff --git a/...components/Button/__image_snapshots__/button-state-vkcom-webkit-dark-1-snap.png b/...components/Button/__image_snapshots__/button-state-vkcom-webkit-dark-1-snap.png
diff --git a/...omponents/Button/__image_snapshots__/button-state-vkcom-webkit-light-1-snap.png b/...omponents/Button/__image_snapshots__/button-state-vkcom-webkit-light-1-snap.png
diff --git a/...src/components/Button/__image_snapshots__/button-vkcom-chromium-dark-1-snap.png b/...src/components/Button/__image_snapshots__/button-vkcom-chromium-dark-1-snap.png
diff --git a/...rc/components/Button/__image_snapshots__/button-vkcom-chromium-light-1-snap.png b/...rc/components/Button/__image_snapshots__/button-vkcom-chromium-light-1-snap.png
diff --git a/.../src/components/Button/__image_snapshots__/button-vkcom-firefox-dark-1-snap.png b/.../src/components/Button/__image_snapshots__/button-vkcom-firefox-dark-1-snap.png
diff --git a/...src/components/Button/__image_snapshots__/button-vkcom-firefox-light-1-snap.png b/...src/components/Button/__image_snapshots__/button-vkcom-firefox-light-1-snap.png
diff --git a/...i/src/components/Button/__image_snapshots__/button-vkcom-webkit-dark-1-snap.png b/...i/src/components/Button/__image_snapshots__/button-vkcom-webkit-dark-1-snap.png
diff --git a/.../src/components/Button/__image_snapshots__/button-vkcom-webkit-light-1-snap.png b/.../src/components/Button/__image_snapshots__/button-vkcom-webkit-light-1-snap.png