From 0724adc07cbf0600e74db2f76ab5f16b7add7c76 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 27 Nov 2024 09:39:23 +0100 Subject: [PATCH 1/4] Add plugin --- .pre-commit-config.yaml | 1 + .stylelintrc | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 386ccc6a3..6a9adf721 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -81,6 +81,7 @@ repos: - stylelint@16.2.1 - stylelint-config-standard@36.0.0 - stylelint-order@4.1.0 + - stylelint-csstree-validator@3.0.0 args: ["--fix"] - repo: https://github.com/errata-ai/vale diff --git a/.stylelintrc b/.stylelintrc index 7075ac01f..95f842317 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,6 +1,6 @@ { "extends": "stylelint-config-standard", - "plugins": ["stylelint-order"], + "plugins": ["stylelint-order", "stylelint-csstree-validator"], "rules": { "order/properties-alphabetical-order": true, "selector-class-pattern": null, @@ -8,6 +8,7 @@ "color-function-notation": "legacy", "alpha-value-notation": "number", "color-hex-length": "long", - "selector-not-notation": null + "selector-not-notation": null, + "csstree/validator": true } } From 386ab00ba9632eef5cdfafdc749628d041043b6c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 27 Nov 2024 09:47:29 +0100 Subject: [PATCH 2/4] Update --- .stylelintrc | 4 ++-- vizro-core/examples/scratch_dev/assets/css/custom.css | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 95f842317..bd07d51c1 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -3,12 +3,12 @@ "plugins": ["stylelint-order", "stylelint-csstree-validator"], "rules": { "order/properties-alphabetical-order": true, + "csstree/validator": true, "selector-class-pattern": null, "custom-property-pattern": null, "color-function-notation": "legacy", "alpha-value-notation": "number", "color-hex-length": "long", - "selector-not-notation": null, - "csstree/validator": true + "selector-not-notation": null } } diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css index f8c8df785..47a9820b2 100644 --- a/vizro-core/examples/scratch_dev/assets/css/custom.css +++ b/vizro-core/examples/scratch_dev/assets/css/custom.css @@ -1,3 +1,4 @@ #page-header { padding-left: 8px; + padding: auto; } From 0f0935692e6239a627791656789554b606f4baa0 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 27 Nov 2024 08:48:27 +0000 Subject: [PATCH 3/4] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/scratch_dev/assets/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css index 47a9820b2..81a196575 100644 --- a/vizro-core/examples/scratch_dev/assets/css/custom.css +++ b/vizro-core/examples/scratch_dev/assets/css/custom.css @@ -1,4 +1,4 @@ #page-header { - padding-left: 8px; padding: auto; + padding-left: 8px; } From bfb01be4ca0b3f47be7430374959b162bce24eb5 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 27 Nov 2024 09:55:49 +0100 Subject: [PATCH 4/4] Squashed commit of the following: commit 15d6e6eec7d7e788d4a912df4b41a5d045e1b36d Author: huong-li-nguyen Date: Wed Nov 27 09:34:46 2024 +0100 Fix integration tests commit f2af917e43efd018db6a81d0a69ad58c98f89bc1 Author: huong-li-nguyen Date: Wed Nov 27 09:20:52 2024 +0100 Update assets folder for dev commit 06ceaed79687cd5d80ec915ab014194b4d64fcc5 Merge: bbff0a45 9cd69c05 Author: huong-li-nguyen Date: Tue Nov 26 17:24:05 2024 +0100 Merge branch 'main' into demo/update-css-variables commit bbff0a45d279c1095a8ccaf45bf46a2ef6186598 Merge: d6c2aaff 538bc63f Author: huong-li-nguyen Date: Tue Nov 26 15:32:02 2024 +0100 Merge branch 'main' into demo/update-css-variables commit d6c2aaffe74956d3cc8d8547d0651a0039dd356e Merge: 06f93dff aaf36a3f Author: huong-li-nguyen Date: Tue Nov 26 11:39:01 2024 +0100 Merge branch 'tidy/remove-variables' into demo/update-css-variables commit aaf36a3f4e4243dbba0c7b00490ce942ea401064 Author: huong-li-nguyen Date: Tue Nov 26 11:38:49 2024 +0100 Fix typo commit bf1a00634224cf64fe5ef47ad1c21fa8e31c66ee Author: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue Nov 26 09:24:52 2024 +0000 [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci commit 26046be05f8ab93f0fd518dd75d67d5a7c0cdad8 Author: huong-li-nguyen Date: Tue Nov 26 10:22:32 2024 +0100 Update commit 06f93dff3f09c1bd5c702931fe9a8575094fa908 Merge: 34a74e33 a9dd04da Author: huong-li-nguyen Date: Tue Nov 26 10:14:19 2024 +0100 Merge branch 'tidy/remove-variables' into demo/update-css-variables commit a9dd04da50b2799b19e4e7c978ea2ea429e459ac Merge: c18f9422 e9be97e0 Author: huong-li-nguyen Date: Tue Nov 26 10:14:05 2024 +0100 Merge branch 'tidy/remove-variables' of https://github.com/mckinsey/vizro into tidy/remove-variables commit c18f9422272b6de309fa586395fd3ff91040b60a Author: huong-li-nguyen Date: Tue Nov 26 10:13:50 2024 +0100 Lint commit e9be97e0bc5669699a68002bdbea53b119bdbd3d Author: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue Nov 26 09:07:51 2024 +0000 [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci commit 93587424d0b1b8e7db9957dbf4dbf4e5f46a14de Author: huong-li-nguyen Date: Tue Nov 26 10:07:20 2024 +0100 Update docs commit 34a74e33542c95ff1ed3a3b9107b63e5cd7d6f6e Merge: 73c55c54 7b3e2e35 Author: huong-li-nguyen Date: Mon Nov 25 18:16:31 2024 +0100 Merge branch 'tidy/remove-variables' into demo/update-css-variables commit 7b3e2e352c849cb1adb6be01c94ddb7bda6585a0 Author: huong-li-nguyen Date: Mon Nov 25 18:15:11 2024 +0100 Add comment commit de7781e49e8e8b29f262116762a7ed5743ad49bd Author: huong-li-nguyen Date: Mon Nov 25 09:59:56 2024 +0100 Clarify comment commit 4600223c835df6622a4598fc5c191e08380b5857 Merge: 96fcd969 a8c342a2 Author: huong-li-nguyen Date: Mon Nov 25 09:59:14 2024 +0100 Merge branch 'main' into tidy/remove-variables commit 73c55c54860f1f285b6962453d4f88a58491fbc0 Author: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu Nov 21 12:58:54 2024 +0000 [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci commit 4431186c11eb48c6a377075e1f77f2742dc2673f Author: huong-li-nguyen Date: Thu Nov 21 13:58:33 2024 +0100 Fix dashboard-ui commit 5e7b3b147208ffcda082f1c5a943e6f0979c77a2 Merge: f8ab934a 96fcd969 Author: huong-li-nguyen Date: Thu Nov 21 13:53:10 2024 +0100 Merge branch 'tidy/remove-variables' into demo/update-css-variables commit f8ab934aa8e69a297c7b69da803e4787475b6f22 Author: huong-li-nguyen Date: Thu Nov 21 13:02:23 2024 +0100 Rename file commit 96fcd96941d7627a90835cf747348799385b3fb4 Author: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu Nov 21 11:28:23 2024 +0000 [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci commit e0c9f20e29daf0c2e10ff37918942bf0dbc403aa Author: huong-li-nguyen Date: Thu Nov 21 12:28:05 2024 +0100 Fix tabs commit bf90f2c6f93ae70ab34747de3019ca340088c2b8 Merge: f9bba278 01ac7251 Author: huong-li-nguyen Date: Thu Nov 21 11:46:32 2024 +0100 Merge branch 'main' into tidy/remove-variables commit f9bba2784b445253384de51753c540cc609c05ce Author: huong-li-nguyen Date: Thu Nov 21 11:45:20 2024 +0100 Update table commit dc498ef68989ca8788db53c8e1aec84c015561ee Author: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu Nov 21 10:30:48 2024 +0000 [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci commit 28ae5034cc9ad48015d28237220e75bfc55092ab Author: huong-li-nguyen Date: Thu Nov 21 11:30:30 2024 +0100 Add banner commit 5d1034de2fc2a673436f2442718a1aebf305f305 Author: huong-li-nguyen Date: Thu Nov 21 11:24:18 2024 +0100 Add requirements for `dev` commit 00657790d05c5ebefa5e83eb7c856660b839a67a Author: huong-li-nguyen Date: Thu Nov 21 11:22:56 2024 +0100 Update requirements commit f09f7b624ea49dc7794907736a893e234a167661 Author: huong-li-nguyen Date: Thu Nov 21 11:18:32 2024 +0100 Update vizro version commit c77fd12afe2283850b6a85b3d3b60188aa2adaad Author: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu Nov 21 09:55:11 2024 +0000 [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci commit 4fac651bd4fa20e879a9241f83b5c911c3b6056f Author: huong-li-nguyen Date: Thu Nov 21 10:54:36 2024 +0100 Update changelog commit 9ff9e3d39b249edb4e8a24ed9e1b1951de9ae465 Author: huong-li-nguyen Date: Thu Nov 21 10:38:12 2024 +0100 Update CSS variables commit 2ec7c6e4ac7a720a886fe558f9df52b6e463939d Author: huong-li-nguyen Date: Thu Nov 21 10:37:31 2024 +0100 Revert demo changes commit 84d5d7363c00b9fbe07f6e62240e153ad11d0634 Author: huong-li-nguyen Date: Thu Nov 21 10:25:43 2024 +0100 Update CSS variables outside of static folder commit 307ce5cf4cd171bf25a73f43bd406bf530c219aa Merge: ba273f78 c46383c9 Author: huong-li-nguyen Date: Wed Nov 20 14:58:31 2024 +0100 Merge branch 'main' into tidy/remove-variables commit ba273f7810ea9879b88e13156c789310b37ae20a Author: huong-li-nguyen Date: Wed Nov 20 11:10:04 2024 +0100 Replace remaining variable mentions commit 0742dc87fb9a9c0f18d6ab6a3ce46fcebfc1fafb Author: huong-li-nguyen Date: Wed Nov 20 10:48:55 2024 +0100 Fix renaming of border commit 42bdb3a607dc9b46c1f018c60457442538ada267 Author: huong-li-nguyen Date: Wed Nov 20 10:44:02 2024 +0100 Update color commit b52fb72a9fc19888731d1a6c8b4cbbc9e5e08022 Author: huong-li-nguyen Date: Wed Nov 20 10:41:38 2024 +0100 Fix collapse bg color commit 1277f117c2dd00b0ea0b56f22681b4565fb548f0 Merge: e7cdc9bd 5a47f977 Author: huong-li-nguyen Date: Tue Nov 19 17:46:44 2024 +0100 Merge branch 'tidy/remove-variables' of https://github.com/mckinsey/vizro into tidy/remove-variables commit e7cdc9bd88ed4e2648fd5d5e078c13a82f9c174a Merge: 4d07ec05 480914d2 Author: huong-li-nguyen Date: Tue Nov 19 17:46:33 2024 +0100 Merge branch 'tidy/add-bs-tooltip-styling' into tidy/remove-variables commit 5a47f977f122e8456bd48be0f1c886d0b9a10d58 Author: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue Nov 19 16:39:17 2024 +0000 [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci commit 4d07ec05242307f424735b63b42fee45e47e3267 Author: huong-li-nguyen Date: Tue Nov 19 17:38:29 2024 +0100 Create 20241119_173819_huong_li_nguyen_remove_variables.md commit 3404355f4753a1f494e57e27e4fcad30116741c5 Author: huong-li-nguyen Date: Tue Nov 19 17:38:01 2024 +0100 Replace remaining values commit e35fe3633f32b18c4fff5f5000218195f731a3a3 Author: huong-li-nguyen Date: Tue Nov 19 17:16:38 2024 +0100 Replace matched values commit 96464d6e913a0f38b73357f1cadf12069a87a581 Author: huong-li-nguyen Date: Tue Nov 19 17:01:26 2024 +0100 Add back selected variables commit 610a1884715a8466af7132da69303911630f980d Author: huong-li-nguyen Date: Tue Nov 19 16:51:18 2024 +0100 Hardcode values where suitable commit 1ca73f899cce691a074154bcf7930f8daf2070cd Author: huong-li-nguyen Date: Tue Nov 19 16:47:55 2024 +0100 Replace with rem units commit 39032be1e302f161626c3460dab07f32d0709db1 Author: huong-li-nguyen Date: Tue Nov 19 16:42:39 2024 +0100 Rename variables with vizro-bs equivalent commit 4a598a2e96541addc9bc9758088d7951d3e4f063 Author: huong-li-nguyen Date: Tue Nov 19 16:32:39 2024 +0100 Remove all CSS variables commit 480914d243da3fe70ac4d912c5a5c7a1fd3ccb3a Author: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue Nov 19 15:00:41 2024 +0000 [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci commit 7abbbbf8334b2b6d80608ca6af3262cc56a2c83c Merge: 0a7ff338 597e2c06 Author: huong-li-nguyen Date: Tue Nov 19 15:59:37 2024 +0100 Merge branch 'main' into tidy/add-bs-tooltip-styling commit 0a7ff3380669a6e54dcd65479e1c44d15ca91b06 Author: huong-li-nguyen Date: Tue Nov 19 15:59:06 2024 +0100 Create 20241119_155853_huong_li_nguyen_add_bs_tooltip_styling.md commit 07d8929631481dfb1e7cff0a61652fc3bc1c0f48 Author: huong-li-nguyen Date: Tue Nov 19 15:56:25 2024 +0100 Update vizro-bootstrap.min.css commit fff42a116300c823258e61be410338f290d80f7c Author: huong-li-nguyen Date: Tue Nov 19 15:23:53 2024 +0100 Remove CSS for tooltip commit 5f0e0205a2ad1b99c45b6f4ab8bce0eed83677fe Author: huong-li-nguyen Date: Tue Nov 19 15:23:13 2024 +0100 Update latest CSS file commit 81eeb605a3057fa8f9da538495fbda4d6d9af3a1 Author: huong-li-nguyen Date: Mon Nov 18 13:00:35 2024 +0100 Add changes --- .../assets/{custom_css.css => custom.css} | 45 +++--- .../examples/dashboard_ui/requirements.in | 1 + .../examples/dashboard_ui/requirements.txt | 36 ++++- .../docs/pages/user-guides/custom-css.md | 9 +- vizro-core/examples/dev/app.py | 21 ++- .../examples/dev/assets/{images => }/app.svg | 0 vizro-core/examples/dev/assets/css/custom.css | 25 ++++ .../examples/dev/assets/{images => }/logo.svg | 0 vizro-core/examples/dev/requirements.in | 4 + vizro-core/examples/dev/requirements.txt | 130 ++++++++++++++++++ .../visual-vocabulary/assets/css/custom.css | 4 +- .../visual-vocabulary/requirements.in | 2 +- .../visual-vocabulary/requirements.txt | 13 +- 13 files changed, 239 insertions(+), 51 deletions(-) rename vizro-ai/examples/dashboard_ui/assets/{custom_css.css => custom.css} (87%) rename vizro-core/examples/dev/assets/{images => }/app.svg (100%) rename vizro-core/examples/dev/assets/{images => }/logo.svg (100%) create mode 100644 vizro-core/examples/dev/requirements.in create mode 100644 vizro-core/examples/dev/requirements.txt diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom.css similarity index 87% rename from vizro-ai/examples/dashboard_ui/assets/custom_css.css rename to vizro-ai/examples/dashboard_ui/assets/custom.css index 0eb9a42a0..538cb44f9 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/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,9 @@ img#banner { flex-flow: column wrap; gap: 12px; justify-content: flex-start; - overflow: none; + + /* Nadija, can you check what overflow behaviour you guys wanted here? none doesn't exist as a property */ + overflow: hidden; } .flex-container h4 { diff --git a/vizro-ai/examples/dashboard_ui/requirements.in b/vizro-ai/examples/dashboard_ui/requirements.in index 2e9c8c58a..e4c705ba5 100644 --- a/vizro-ai/examples/dashboard_ui/requirements.in +++ b/vizro-ai/examples/dashboard_ui/requirements.in @@ -1,5 +1,6 @@ gunicorn vizro-ai>=0.3.2 +vizro==0.1.27 black openpyxl langchain_anthropic diff --git a/vizro-ai/examples/dashboard_ui/requirements.txt b/vizro-ai/examples/dashboard_ui/requirements.txt index 47db784ee..0cde69ddd 100644 --- a/vizro-ai/examples/dashboard_ui/requirements.txt +++ b/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,6 +259,10 @@ tokenizers==0.20.1 # via # anthropic # langchain-mistralai +tomli==2.1.0 + # via + # autoflake + # black tqdm==4.66.5 # via # huggingface-hub @@ -253,9 +270,12 @@ tqdm==4.66.5 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.27 + # via + # -r requirements.in + # vizro-ai vizro-ai==0.3.2 # via -r requirements.in werkzeug==3.0.4 diff --git a/vizro-core/docs/pages/user-guides/custom-css.md b/vizro-core/docs/pages/user-guides/custom-css.md index 8dd7da3c7..dd2d22275 100755 --- a/vizro-core/docs/pages/user-guides/custom-css.md +++ b/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 diff --git a/vizro-core/examples/dev/app.py b/vizro-core/examples/dev/app.py index aa56f9ff1..1265ab20c 100644 --- a/vizro-core/examples/dev/app.py +++ b/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() diff --git a/vizro-core/examples/dev/assets/images/app.svg b/vizro-core/examples/dev/assets/app.svg similarity index 100% rename from vizro-core/examples/dev/assets/images/app.svg rename to vizro-core/examples/dev/assets/app.svg diff --git a/vizro-core/examples/dev/assets/css/custom.css b/vizro-core/examples/dev/assets/css/custom.css index f6c0002d2..57c91b902 100644 --- a/vizro-core/examples/dev/assets/css/custom.css +++ b/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; +} diff --git a/vizro-core/examples/dev/assets/images/logo.svg b/vizro-core/examples/dev/assets/logo.svg similarity index 100% rename from vizro-core/examples/dev/assets/images/logo.svg rename to vizro-core/examples/dev/assets/logo.svg diff --git a/vizro-core/examples/dev/requirements.in b/vizro-core/examples/dev/requirements.in new file mode 100644 index 000000000..49e7b9ea2 --- /dev/null +++ b/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.27 diff --git a/vizro-core/examples/dev/requirements.txt b/vizro-core/examples/dev/requirements.txt new file mode 100644 index 000000000..dee664249 --- /dev/null +++ b/vizro-core/examples/dev/requirements.txt @@ -0,0 +1,130 @@ +# This file was autogenerated by uv via the following command: +# uv pip compile requirements.in -o requirements.txt +annotated-types==0.7.0 + # via pydantic +autoflake==2.3.1 + # via vizro +black==24.4.2 + # via vizro +blinker==1.8.2 + # via flask +cachelib==0.9.0 + # via flask-caching +certifi==2024.8.30 + # via requests +charset-normalizer==3.4.0 + # via requests +click==8.1.7 + # via + # black + # flask +dash==2.18.1 + # via + # dash-ag-grid + # dash-bootstrap-components + # vizro +dash-ag-grid==31.2.0 + # via vizro +dash-bootstrap-components==1.6.0 + # via vizro +dash-core-components==2.0.0 + # via dash +dash-html-components==2.0.0 + # via dash +dash-mantine-components==0.12.1 + # via vizro +dash-table==5.0.0 + # via dash +et-xmlfile==2.0.0 + # via openpyxl +flask==3.0.3 + # via + # dash + # flask-caching +flask-caching==2.3.0 + # via vizro +gunicorn==23.0.0 + # via -r requirements.in +idna==3.10 + # via requests +importlib-metadata==8.5.0 + # via + # dash + # flask +itsdangerous==2.2.0 + # via flask +jinja2==3.1.4 + # via flask +markupsafe==3.0.2 + # via + # jinja2 + # werkzeug +mypy-extensions==1.0.0 + # via black +nest-asyncio==1.6.0 + # via dash +numpy==2.0.2 + # via pandas +openpyxl==3.1.5 + # via -r requirements.in +packaging==24.1 + # via + # black + # gunicorn + # plotly +pandas==2.2.3 + # via vizro +pathspec==0.12.1 + # via black +platformdirs==4.2.2 + # via black +plotly==5.24.1 + # via + # dash + # vizro +pydantic==2.9.2 + # via vizro +pydantic-core==2.23.4 + # via pydantic +pyflakes==3.2.0 + # via autoflake +python-dateutil==2.9.0.post0 + # via pandas +pytz==2024.2 + # via pandas +requests==2.32.3 + # via dash +retrying==1.3.4 + # via dash +setuptools==75.3.0 + # via dash +six==1.16.0 + # via + # python-dateutil + # retrying +tenacity==9.0.0 + # via plotly +tomli==2.1.0 + # via + # autoflake + # black +typing-extensions==4.12.2 + # via + # black + # dash + # pydantic + # pydantic-core +tzdata==2024.2 + # via pandas +urllib3==2.2.3 + # via requests +vizro==0.1.27 + # via -r requirements.in +werkzeug==3.0.6 + # via + # dash + # flask +wrapt==1.16.0 + # via vizro +zipp==3.20.2 + # via importlib-metadata diff --git a/vizro-core/examples/visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css index db65291cd..c69bbe58c 100644 --- a/vizro-core/examples/visual-vocabulary/assets/css/custom.css +++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css @@ -94,7 +94,7 @@ img[src*="#chart-icon"] { 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; @@ -107,7 +107,7 @@ img[src*="#chart-icon"] { .anchor-container:focus, .anchor-container:hover { background: var(--text-secondary); - color: var(--text-contrast-primary); + color: var(--text-primary-inverted); } img#banner { diff --git a/vizro-core/examples/visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in index 701ad04d6..619153ed9 100644 --- a/vizro-core/examples/visual-vocabulary/requirements.in +++ b/vizro-core/examples/visual-vocabulary/requirements.in @@ -3,5 +3,5 @@ autoflake==2.3.1 black==24.4.2 isort==5.13.2 plotly==5.24.1 -vizro==0.1.25 +vizro==0.1.27 gunicorn diff --git a/vizro-core/examples/visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt index 693b90a19..7d4745d05 100644 --- a/vizro-core/examples/visual-vocabulary/requirements.txt +++ b/vizro-core/examples/visual-vocabulary/requirements.txt @@ -50,7 +50,9 @@ gunicorn==23.0.0 idna==3.10 # via requests importlib-metadata==8.5.0 - # via dash + # via + # dash + # flask isort==5.13.2 # via -r requirements.in itsdangerous==2.2.0 @@ -65,7 +67,7 @@ mypy-extensions==1.0.0 # via black nest-asyncio==1.6.0 # via dash -numpy==2.1.2 +numpy==2.0.2 # via pandas packaging==24.1 # via @@ -105,8 +107,13 @@ six==1.16.0 # retrying tenacity==9.0.0 # via plotly +tomli==2.1.0 + # via + # autoflake + # black typing-extensions==4.12.2 # via + # black # dash # pydantic # pydantic-core @@ -114,7 +121,7 @@ tzdata==2024.2 # via pandas urllib3==2.2.3 # via requests -vizro==0.1.25 +vizro==0.1.27 # via -r requirements.in werkzeug==3.0.6 # via