[Demo] Update all demos to use new Bootstrap CSS variables (#892)

vizro-ai/examples/dashboard_ui/assets/custom_css.css → vizro-ai/examples/dashboard_ui/assets/custom.css

@@ -3,12 +3,12 @@
 }
 
 .card-body {
-  color: var(--text-light-mode-secondary);
+  color: var(--text-secondary-inverted);
 }
 
 .textbox {
   border-radius: 24px;
-  font-size: var(--text-size-02);
+  font-size: 0.875rem;
   margin-bottom: 20px;
   max-width: 60%;
   padding: 4px 12px;
@@ -17,14 +17,14 @@
 
 .user_input:focus {
   background: var(--field-enabled);
-  box-shadow: 0 0 0 2px var(--focus-focus) inset;
+  box-shadow: 0 0 0 2px var(--focus) inset;
   color: var(--text-primary);
   outline-width: 0;
 }
 
 #text-area {
   background-color: inherit;
-  border: 1px solid var(--border-subtle-alpha-01);
+  border: 1px solid var(--border-subtleAlpha01);
   color: var(--text-primary);
   min-height: 14vh;
   padding: 8px;
@@ -68,10 +68,6 @@
 
 #model-dropdown .Select-menu-outer {
   font-size: 12px;
-
-  /* top: 0; */
-
-  /* transform: translateY(3px) translateY(-100%); */
 }
 
 #model-dropdow .dash-dropdown {
@@ -122,22 +118,13 @@
 }
 
 #data-upload-component {
-  border: 1px dashed var(--border-subtle-alpha-01);
+  border: 1px dashed var(--border-subtleAlpha01);
   color: var(--text-primary);
   height: 5vh;
   line-height: 5vh;
   text-align: center;
 }
 
-/*
-#settings-api-key-toggle .form-check-input {
-  border-radius: 8px;
-}
-
-#settings-api-base-toggle .form-check-input {
-  border-radius: 8px;
-}
-*/
 #toggle-div-api-base,
 #toggle-div-api-key {
   align-items: center;
@@ -177,19 +164,19 @@
 
 .btn-primary:enabled:has(#dropdown-menu-icon) {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   font-size: 1.5rem;
 }
 
 .btn-primary:disabled:has(#dropdown-menu-icon) {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   font-size: 1.5rem;
 }
 
 .download-button {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   width: 100%;
 }
 
@@ -199,14 +186,14 @@
 
 .dropdown-menu-toggle-class {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   height: 2rem;
   scale: 90%;
 }
 
 .dropdown-menu-toggle-class:hover {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   cursor: pointer;
   height: 2rem;
   scale: 90%;
@@ -218,7 +205,7 @@
     .disabled
   ) {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
 }
 
 .modal-class {
@@ -234,7 +221,7 @@
 
 .custom_header {
   align-items: center;
-  border-bottom: 1px solid var(--border-subtle-alpha-01);
+  border-bottom: 1px solid var(--border-subtleAlpha01);
   display: flex;
   flex-direction: row;
   height: 60px;
@@ -314,7 +301,7 @@
   background: var(--text-primary);
   border-top-left-radius: 8px;
   bottom: 0;
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
   display: flex;
   font-size: 0.8rem;
   font-weight: 500;
@@ -327,7 +314,7 @@
 .anchor-container:focus,
 .anchor-container:hover {
   background: var(--text-secondary);
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
 }
 
 img#banner {
@@ -346,7 +333,7 @@ img#banner {
   flex-flow: column wrap;
   gap: 12px;
   justify-content: flex-start;
-  overflow: none;
+  overflow: hidden; /* to check */
 }
 
 .flex-container h4 {

vizro-ai/examples/dashboard_ui/requirements.in

@@ -1,5 +1,6 @@
 gunicorn
 vizro-ai>=0.3.2
+vizro==0.1.28
 black
 openpyxl
 langchain_anthropic

vizro-ai/examples/dashboard_ui/requirements.txt

@@ -15,13 +15,20 @@ anyio==4.4.0
     #   anthropic
     #   httpx
     #   openai
+async-timeout==4.0.3
+    # via
+    #   aiohttp
+    #   langchain
 attrs==24.2.0
     # via aiohttp
 autoflake==2.3.1
-    # via vizro-ai
+    # via
+    #   vizro
+    #   vizro-ai
 black==24.8.0
     # via
     #   -r requirements.in
+    #   vizro
     #   vizro-ai
 blinker==1.8.2
     # via flask
@@ -63,6 +70,8 @@ distro==1.9.0
     #   openai
 et-xmlfile==1.1.0
     # via openpyxl
+exceptiongroup==1.2.2
+    # via anyio
 filelock==3.16.1
     # via huggingface-hub
 flask==3.0.3
@@ -77,6 +86,8 @@ frozenlist==1.4.1
     #   aiosignal
 fsspec==2024.10.0
     # via huggingface-hub
+greenlet==3.1.1
+    # via sqlalchemy
 gunicorn==23.0.0
     # via -r requirements.in
 h11==0.14.0
@@ -100,7 +111,9 @@ idna==3.8
     #   requests
     #   yarl
 importlib-metadata==8.5.0
-    # via dash
+    # via
+    #   dash
+    #   flask
 itsdangerous==2.2.0
     # via flask
 jinja2==3.1.4
@@ -182,7 +195,9 @@ pathspec==0.12.1
 platformdirs==4.3.2
     # via black
 plotly==5.24.1
-    # via dash
+    # via
+    #   dash
+    #   vizro
 pydantic==2.9.1
     # via
     #   anthropic
@@ -217,8 +232,6 @@ requests==2.32.3
     #   tiktoken
 retrying==1.3.4
     # via dash
-ruff==0.6.4
-    # via vizro
 setuptools==74.1.2
     # via dash
 six==1.16.0
@@ -246,16 +259,23 @@ tokenizers==0.20.1
     # via
     #   anthropic
     #   langchain-mistralai
+tomli==2.1.0
+    # via
+    #   autoflake
+    #   black
 tqdm==4.66.5
     # via
     #   huggingface-hub
     #   openai
 typing-extensions==4.12.2
     # via
     #   anthropic
+    #   anyio
+    #   black
     #   dash
     #   huggingface-hub
     #   langchain-core
+    #   multidict
     #   openai
     #   pydantic
     #   pydantic-core
@@ -264,8 +284,10 @@ tzdata==2024.1
     # via pandas
 urllib3==2.2.3
     # via requests
-vizro==0.1.23
-    # via vizro-ai
+vizro==0.1.28
+    # via
+    #   -r requirements.in
+    #   vizro-ai
 vizro-ai==0.3.2
     # via -r requirements.in
 werkzeug==3.0.4

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

@@ -316,11 +316,10 @@ It's essential to understand the relationship between the targeted CSS class or
 
 ### 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 CSS variable names, refer to the
-[Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/css-variables/). Note that our Vizro Bootstrap
-stylesheet is still under development. While all Bootstrap variables have values assigned, some of these values may
-come from the default Bootstrap theme, which can result in styling that looks different from the intended Vizro design.
-You can also define your own CSS variables, as demonstrated in the example on
+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

vizro-core/examples/dev/app.py

@@ -8,7 +8,7 @@
 import plotly.graph_objects as go
 import vizro.models as vm
 import vizro.plotly.express as px
-from dash import dash_table, dcc, html
+from dash import dash_table, dcc, get_asset_url, html
 from vizro import Vizro
 from vizro.actions import export_data, filter_interaction
 from vizro.figures import kpi_card, kpi_card_reference
@@ -606,10 +606,10 @@ def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None)
     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",
         },
     }
@@ -817,5 +817,16 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
     ),
 )
 
+
 if __name__ == "__main__":
-    Vizro().build(dashboard).run()
+    app = Vizro().build(dashboard)
+    app.dash.layout.children.append(
+        dbc.NavLink(
+            ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
+            href="https://github.com/mckinsey/vizro",
+            target="_blank",
+            className="anchor-container",
+        )
+    )
+    server = app.dash.server
+    app.run()

vizro-core/examples/dev/assets/css/custom.css

@@ -17,3 +17,28 @@
   height: 210px;
   width: 240px;
 }
+
+.anchor-container {
+  align-items: center;
+  background: var(--text-primary);
+  border-top-left-radius: 8px;
+  bottom: 0;
+  color: var(--text-primary-inverted);
+  display: flex;
+  font-size: 0.8rem;
+  font-weight: 500;
+  height: 24px;
+  padding: 0 12px;
+  position: fixed;
+  right: 0;
+}
+
+.anchor-container:focus,
+.anchor-container:hover {
+  background: var(--text-secondary);
+  color: var(--text-primary-inverted);
+}
+
+img#banner {
+  height: 16px;
+}

vizro-core/examples/dev/requirements.in

@@ -0,0 +1,4 @@
+# This file is only used if you don't have hatch installed.
+gunicorn
+openpyxl
+vizro==0.1.28