[Tidy] Replace dmc.Tabs with dbc.Tabs

vizro-core/changelog.d/20241119_173819_huong_li_nguyen_remove_variables.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
+
+- Removed all CSS variables from `variables.css` and `token_names.css`, replacing them with CSS variables from `vizro-bootstrap.min.css`.
+  Refer to [`vizro-bootstrap.min.css](https://github.com/mckinsey/vizro/blob/main/vizro-core/src/vizro/static/css/vizro-bootstrap.min.css) for the updated CSS variables. ([#886](https://github.com/mckinsey/vizro/pull/886))
+
+<!--
+### 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))
+
+-->

vizro-core/changelog.d/20241125_175907_huong_li_nguyen_replace_tabs.md

@@ -0,0 +1,47 @@
+<!--
+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
+
+- Replace `dmc.Tabs` with `dbc.Tabs` and change CSS selectors accordingly. ([#895](https://github.com/mckinsey/vizro/pull/895))
+
+<!--
+### 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))
+
+-->

vizro-core/docs/pages/user-guides/custom-css.md

@@ -314,6 +314,14 @@ It's essential to understand the relationship between the targeted CSS class or
 
 ## Common examples
 
+### Make your CSS responsive to theme switches with variables
+To ensure your CSS adapts to theme changes, we recommend using CSS variables (`var`) whenever possible. For a
+comprehensive list of available variable names, refer to the
+[Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/css-variables/). Note that our
+Bootstrap stylesheet is still under development, so not all Bootstrap variables are currently available.
+Additionally, you can define your own CSS variables, as demonstrated in the example on
+[changing the container background color](#change-the-styling-of-a-container).
+
 ### Turn off page title
 See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
 
@@ -380,8 +388,18 @@ To do this, you need to change the container's CSS class. Using the DevTool, as
 !!! example "Style a container"
     === "custom.css"
     ```css
+    /* Assign a variable to the dark and light theme */
+    [data-bs-theme="dark"] {
+        --container-bg-color: #232632;
+    }
+
+    [data-bs-theme="light"] {
+        --container-bg-color: #F5F6F6;
+    }
+
+    /* Use the custom variable var(--container-bg-color) */
     .page-component-container {
-        background: var(--surfaces-bg-card);
+        background: var(--container-bg-color);
         padding: 12px;
     }
     ```

vizro-core/docs/pages/user-guides/custom-tables.md

@@ -38,10 +38,10 @@ The following examples show a possible version of a custom table. In this case t
             columns = [{"name": i, "id": i} for i in chosen_columns]
             defaults = {
                 "style_as_list_view": True,
-                "style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
+                "style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
                 "style_header": {
-                    "border_bottom": "1px solid var(--state-overlays-selected-hover)",
-                    "border_top": "1px solid var(--main-container-bg-color)",
+                    "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
+                    "border_top": "1px solid var(--right-side-bg)",
                     "height": "32px",
                 },
             }

vizro-core/examples/scratch_dev/app.py

@@ -1,46 +1,55 @@
 """Dev app to try things out."""
 
-import pandas as pd
 import vizro.models as vm
 import vizro.plotly.express as px
 from vizro import Vizro
-from vizro._themes._color_values import COLORS
-import dash_bootstrap_components as dbc
-from dash import html
 
-from typing import Literal
-
-from dash import html
-
-import vizro.models as vm
-from vizro import Vizro
-
-
-class Tooltip(vm.VizroBaseModel):
-    type: Literal["tooltip"] = "tooltip"
-    text: str = "This is a tooltip"
-
-    def build(self):
-        return html.Div(
-            [
-                dbc.Button("Button", id=f"{self.id}-tooltip-target"),
-                dbc.Tooltip(
-                    self.text,
-                    target=f"{self.id}-tooltip-target",
-                    is_open=True,
-                ),
-            ]
-        )
-
-
-vm.Page.add_type("components", Tooltip)
+gapminder_2007 = px.data.gapminder().query("year == 2007")
 
 page = vm.Page(
-    title="Custom Component",
+    title="Tabs",
     components=[
-        Tooltip(text="Tooltip label"),
-        Tooltip(
-            text="Max. width of tooltip should not exceed 180px - this instance should be used for multiple lines of text for increased legibility."
+        vm.Tabs(
+            tabs=[
+                vm.Container(
+                    title="Tab I",
+                    components=[
+                        vm.Graph(
+                            title="Graph I",
+                            figure=px.bar(
+                                gapminder_2007,
+                                x="continent",
+                                y="lifeExp",
+                                color="continent",
+                            ),
+                        ),
+                        vm.Graph(
+                            title="Graph II",
+                            figure=px.box(
+                                gapminder_2007,
+                                x="continent",
+                                y="lifeExp",
+                                color="continent",
+                            ),
+                        ),
+                    ],
+                ),
+                vm.Container(
+                    title="Tab II",
+                    components=[
+                        vm.Graph(
+                            title="Graph III",
+                            figure=px.scatter(
+                                gapminder_2007,
+                                x="gdpPercap",
+                                y="lifeExp",
+                                size="pop",
+                                color="continent",
+                            ),
+                        ),
+                    ],
+                ),
+            ],
         ),
     ],
 )

vizro-core/src/vizro/models/_components/tabs.py

@@ -2,8 +2,7 @@
 
 from typing import TYPE_CHECKING, Literal
 
-import dash_mantine_components as dmc
-from dash import html
+import dash_bootstrap_components as dbc
 
 try:
     from pydantic.v1 import validator
@@ -33,21 +32,9 @@ class Tabs(VizroBaseModel):
 
     @_log_call
     def build(self):
-        tabs_list = dmc.TabsList(
-            [dmc.Tab(tab.title, value=tab.id, className="tab-title") for tab in self.tabs],
-            className="tabs-list",
-        )
-
-        tabs_panels = [
-            dmc.TabsPanel(html.Div([tab.build()], className="tab-content"), value=tab.id, className="tabs-panel")
-            for tab in self.tabs
-        ]
-
-        return dmc.Tabs(
+        return dbc.Tabs(
             id=self.id,
-            value=self.tabs[0].id,
-            children=[tabs_list, *tabs_panels],
+            children=[dbc.Tab(tab.build(), label=tab.title) for tab in self.tabs],
             persistence=True,
             persistence_type="session",
-            className="tabs",
         )