From 67491e4974cc45bae7a4912b1ea2c6c8890d43f3 Mon Sep 17 00:00:00 2001
From: nadijagraca <108531476+nadijagraca@users.noreply.github.com>
Date: Fri, 5 Apr 2024 14:41:41 +0200
Subject: [PATCH] [Docs] Add example for inversing the card icon color (#401)

---
 ...sic_graca_add_card_icon_styling_example.md | 48 +++++++++++++++++++
 .../components/responsive_icon.gif            |  0
 .../docs/pages/user-guides/card-button.md     | 20 ++++++++
 vizro-core/src/vizro/static/css/variables.css |  1 +
 4 files changed, 69 insertions(+)
 create mode 100644 vizro-core/changelog.d/20240403_151537_nadija_ratkusic_graca_add_card_icon_styling_example.md
 create mode 100644 vizro-core/docs/assets/user_guides/components/responsive_icon.gif

diff --git a/vizro-core/changelog.d/20240403_151537_nadija_ratkusic_graca_add_card_icon_styling_example.md b/vizro-core/changelog.d/20240403_151537_nadija_ratkusic_graca_add_card_icon_styling_example.md
new file mode 100644
index 000000000..f1f65e73c
--- /dev/null
+++ b/vizro-core/changelog.d/20240403_151537_nadija_ratkusic_graca_add_card_icon_styling_example.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/docs/assets/user_guides/components/responsive_icon.gif b/vizro-core/docs/assets/user_guides/components/responsive_icon.gif
new file mode 100644
index 000000000..e69de29bb
diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md
index d085c4161..f313b0c59 100755
--- a/vizro-core/docs/pages/user-guides/card-button.md
+++ b/vizro-core/docs/pages/user-guides/card-button.md
@@ -590,6 +590,26 @@ If you use the image URL hash `icon-top`, the image will be styled according to
 Note that in the above example the first [`Card`][vizro.models.Card] navigates to an existing [`Page`][vizro.models.Page]
 in the app with `path = filters-and-parameters` and the second one to an external link.
 
+#### Add an icon responsive to theme switch
+
+To add an icon that is responsive to the theme switch, you will need to override the value of the [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).
+
+The `filter` CSS property lets you add visual effects to elements using different functions. In our example, we're using the `--inverse-color` CSS variable from the Vizro theme.
+
+It uses the  CSS `invert()` function to flip the color of the icon when you switch themes. Please note that this only works if your initial icon has a white fill color. If your icon is not white, you can change its color by adding `fill="white"` to the SVG code.
+
+Assign the predefined CSS variable `--inverse-color` to the `filter` property of your selected icon.
+
+```css
+img[src*="#my-image"] {
+  filter: var(--icon-color);
+}
+```
+
+!!! example "Styled icon"
+    ![styled icon](../../assets/user_guides/components/responsive_icon.gif)
+
+
 ## Buttons
 
 To enhance dashboard interactions, you can use the [`Button`][vizro.models.Button] component to trigger any pre-defined
diff --git a/vizro-core/src/vizro/static/css/variables.css b/vizro-core/src/vizro/static/css/variables.css
index 8a8b519cd..a447adfb4 100644
--- a/vizro-core/src/vizro/static/css/variables.css
+++ b/vizro-core/src/vizro/static/css/variables.css
@@ -153,4 +153,5 @@
   --status-success: var(--status-light-mode-success);
   --tags-text-color: var(--tags-light-mode-text-color);
   --status-warning: var(--status-light-mode-warning);
+  --inverse-color: invert(100%);
 }