[Tidy] Remove all CSS variables and tokens (#886)

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/docs/pages/user-guides/custom-css.md

@@ -314,6 +314,15 @@ 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 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
+[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 +389,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/src/vizro/static/css/aggrid.css

@@ -1,48 +1,48 @@
 .ag-theme-quartz.ag-theme-vizro,
 .ag-theme-quartz-dark.ag-theme-vizro {
-  --ag-active-color: var(--state-overlays-selected-hover);
-  --ag-background-color: var(--main-container-bg-color);
-  --ag-odd-row-background-color: var(--main-container-bg-color);
+  --ag-active-color: var(--stateOverlays-selectedHover);
+  --ag-background-color: var(--right-side-bg);
+  --ag-odd-row-background-color: var(--right-side-bg);
   --ag-header-foreground-color: var(--text-secondary);
   --ag-data-color: var(--text-primary);
-  --ag-header-background-color: var(--main-container-bg-color);
+  --ag-header-background-color: var(--right-side-bg);
   --ag-icon-font-family: aggridquartz;
-  --ag-icon-size: var(--text-size-02);
+  --ag-icon-size: 0.875rem;
   --ag-row-height: 48px;
   --ag-header-height: 40px;
   --ag-borders: none;
   --ag-border-radius: 0;
   --ag-border-color: transparent;
   --ag-row-border-style: solid;
-  --ag-row-border-color: var(--border-subtle-alpha-01);
+  --ag-row-border-color: var(--border-subtleAlpha01);
   --ag-row-border-width: 1px;
-  --ag-selected-row-background-color: var(--state-overlays-selected);
+  --ag-selected-row-background-color: var(--stateOverlays-selected);
   --ag-checkbox-checked-color: var(--text-primary);
   --ag-header-column-resize-handle-display: block;
   --ag-header-column-resize-handle-height: 30%;
   --ag-header-column-resize-handle-width: 1px;
-  --ag-header-column-resize-handle-color: var(--border-subtle-alpha-02);
+  --ag-header-column-resize-handle-color: var(--border-subtleAlpha02);
   --ag-range-selection-border-color: transparent;
   --ag-input-focus-border-color: transparent;
 }
 
 /* Header ------- */
 #dashboard-container .ag-header-row {
   align-items: flex-start;
-  border-bottom: 1px solid var(--border-subtle-alpha-02);
+  border-bottom: 1px solid var(--border-subtleAlpha02);
   display: flex;
 }
 
 #dashboard-container .ag-header-cell {
   align-items: center;
   display: flex;
   height: 40px;
-  padding: 0 var(--spacing-03);
+  padding: 0 0.75rem;
 }
 
 #dashboard-container .ag-header-cell-text {
   letter-spacing: -0.112px;
-  line-height: var(--spacing-04);
+  line-height: 1rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -55,32 +55,32 @@
 
 /* Rows ------- */
 #dashboard-container .ag-cell {
-  padding: 0 var(--spacing-03);
+  padding: 0 0.75rem;
 }
 
 #dashboard-container .ag-cell-focus {
   border: none;
 }
 
 #dashboard-container .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
-  background: var(--state-overlays-selected);
+  background: var(--stateOverlays-selected);
 }
 
 /* Pop up menu ----- */
 #dashboard-container .ag-menu {
-  background-color: var(--surfaces-bg-02);
-  border: 1px solid var(--border-subtle-alpha-02);
+  background-color: var(--surfaces-bg02);
+  border: 1px solid var(--border-subtleAlpha02);
   color: var(--text-primary);
 }
 
 #dashboard-container .ag-ltr .ag-filter-filter input {
   background-color: var(--field-enabled);
-  box-shadow: var(--box-shadow-elevation-0);
+  box-shadow: var(--elevation-0);
   display: flex;
-  font-size: var(--text-size-02);
-  font-weight: var(--text-weight-regular);
-  letter-spacing: var(--letter-spacing-body-ui-02);
-  line-height: var(--text-size-03);
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: -0.112px;
+  line-height: 1rem;
   text-overflow: ellipsis;
 }
 
@@ -89,24 +89,24 @@
   border: none;
   border-radius: 0;
   box-shadow: none;
-  font-size: var(--text-size-02);
+  font-size: 0.875rem;
 }
 
 #dashboard-container .ag-filter-select .ag-picker-field-wrapper {
   background-color: var(--field-enabled);
-  box-shadow: var(--box-shadow-elevation-0);
+  box-shadow: var(--elevation-0);
 }
 
 #dashboard-container .ag-select-list {
   background-color: var(--field-enabled);
-  box-shadow: var(--box-shadow-elevation-0);
+  box-shadow: var(--elevation-0);
   color: var(--text-primary);
-  font-size: var(--text-size-02);
-  line-height: var(--text-size-05);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
 }
 
 #dashboard-container .ag-select-list-item.ag-active-item {
-  background-color: var(--state-overlays-hover);
+  background-color: var(--stateOverlays-hover);
 }
 
 #dashboard-container .ag-radio-button-input-wrapper {
@@ -123,12 +123,12 @@
 
 #dashboard-container .ag-filter-apply-panel {
   justify-content: flex-start;
-  padding: var(--spacing-02) 0 var(--spacing-03) 0;
+  padding: 0.5rem 0 0.75rem;
 }
 
 #dashboard-container .ag-filter-condition {
   justify-content: flex-start;
-  padding: var(--spacing-02) var(--spacing-01);
+  padding: 0.5rem 0.25rem;
 }
 
 /* Scroll Bar */
@@ -157,28 +157,27 @@
   padding-left: 0;
 }
 
-/* Buttons */
 #dashboard-container .ag-standard-button {
   background: var(--fill-active);
   border: none;
   border-radius: 0;
-  box-shadow: var(--box-shadow-elevation-0);
-  color: var(--text-contrast-primary);
-  font-size: var(--text-size-02);
-  font-weight: var(--text-weight-semibold);
+  box-shadow: var(--elevation-0);
+  color: var(--text-primary-inverted);
+  font-size: 0.875rem;
+  font-weight: 600;
   height: 32px;
-  letter-spacing: var(--letter-spacing-body-link-02);
-  line-height: var(--text-size-05);
-  padding: var(--spacing-01) var(--spacing-03);
+  letter-spacing: -0.028px;
+  line-height: 1.5rem;
+  padding: 0.25rem 0.75rem;
   text-transform: none;
 }
 
 #dashboard-container .ag-standard-button:hover {
   background: linear-gradient(
-      var(--state-overlays-contrast-hover),
-      var(--state-overlays-contrast-hover)
+      var(--stateOverlays-hover-inverted),
+      var(--stateOverlays-hover-inverted)
     ),
     var(--fill-active);
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
   text-decoration-line: underline;
 }

vizro-core/src/vizro/static/css/bootstrap_overwrites.css

@@ -1,5 +1,32 @@
-/* This file contains overwrites, which we want to have as defaults for vizro
-but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough. */
+/* This file contains overwrites, which we want to have as defaults for vizro framework
+but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough
+for a pure Dash app.
+
+All the HEX values starting with --text-code are taken from the Github code highlighting style. */
+[data-bs-theme="dark"] {
+  --dropdown-label-bg: var(--primary-800);
+  --right-side-bg: var(--surfaces-bg03);
+  --text-code-string: #95c2e7;
+  --text-code-keyword: #f4766e;
+  --text-code-meta: #c8ace1;
+  --text-code-type: #f69d50;
+  --text-code-literal: #6bb5fd;
+  --slider-rail-bg: var(--primary-100);
+  --collapse-icon-bg: var(--primary-500);
+}
+
+[data-bs-theme="light"] {
+  --dropdown-label-bg: var(--primary-300);
+  --right-side-bg: var(--surfaces-bg01);
+  --text-code-string: #0a3069;
+  --text-code-keyword: #d12d39;
+  --text-code-meta: #6f42c1;
+  --text-code-type: #f69d50;
+  --text-code-literal: #005cc5;
+  --fill-icon-image-card: invert(64%) sepia(0%) saturate(1375%);
+  --slider-rail-bg: var(--primary-900);
+  --collapse-icon-bg: var(--primary-300);
+}
 
 .card .nav-link {
   height: 100%;