Remove default font color from global CSS to enable overwrites (#213)

mckinsey · Dec 14, 2023 · ba5511b · ba5511b
1 parent 0ad2b83
commit ba5511b
Show file tree

Hide file tree

Showing 15 changed files with 253 additions and 145 deletions.
diff --git a/vizro-core/changelog.d/20231213_184705_huong_li_nguyen_enable_color_overwrite.md b/vizro-core/changelog.d/20231213_184705_huong_li_nguyen_enable_color_overwrite.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
+
+- 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
+
+- Remove default font color from global CSS to enable overwrites ([#213](https://github.com/mckinsey/vizro/pull/213))
+
+<!--
+### 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/examples/default/app.py b/vizro-core/examples/default/app.py
@@ -407,6 +407,7 @@ def create_benchmark_analysis():
     columns = [
         {"id": "country", "name": "country"},
         {"id": "continent", "name": "continent"},
+        {"id": "year", "name": "year"},
         {"id": "lifeExp", "name": "lifeExp", "type": "numeric", "format": {"specifier": ",.1f"}},
         {"id": "gdpPercap", "name": "gdpPercap", "type": "numeric", "format": {"specifier": "$,.2f"}},
         {"id": "pop", "name": "pop", "type": "numeric", "format": {"specifier": ",d"}},
@@ -421,8 +422,33 @@ def create_benchmark_analysis():
                 title="Click on a cell in country column:",
                 figure=dash_data_table(
                     id="dash_data_table_country",
-                    columns=columns,
                     data_frame=df,
+                    columns=columns,
+                    style_data_conditional=[
+                        {
+                            "if": {"filter_query": "{gdpPercap} < 1045", "column_id": "gdpPercap"},
+                            "backgroundColor": "#ff9222",
+                        },
+                        {
+                            "if": {
+                                "filter_query": "{gdpPercap} >= 1045 && {gdpPercap} <= 4095",
+                                "column_id": "gdpPercap",
+                            },
+                            "backgroundColor": "#de9e75",
+                        },
+                        {
+                            "if": {
+                                "filter_query": "{gdpPercap} > 4095 && {gdpPercap} <= 12695",
+                                "column_id": "gdpPercap",
+                            },
+                            "backgroundColor": "#aaa9ba",
+                        },
+                        {
+                            "if": {"filter_query": "{gdpPercap} > 12695", "column_id": "gdpPercap"},
+                            "backgroundColor": "#00b4ff",
+                        },
+                    ],
+                    sort_action="native",
                     style_cell={"textAlign": "left"},
                 ),
                 actions=[vm.Action(function=filter_interaction(targets=["line_country"]))],

diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
@@ -26,24 +26,25 @@
 }
 
 .collapsing.collapse-horizontal {
-  width: 0;
   height: auto;
   transition: width 0.35s ease;
+  width: 0;
 }
 
 .accordion-button {
-  font-size: var(--text-size-02);
-  line-height: 16px;
-  position: relative;
-  display: flex;
   align-items: center;
-  width: 100%;
-  text-align: left;
-  overflow-anchor: none;
   background-color: inherit;
+  color: var(--text-secondary);
+  display: flex;
+  font-size: var(--text-size-02);
+  height: 56px;
   letter-spacing: -0.014px;
+  line-height: 16px;
+  overflow-anchor: none;
   padding: 16px 8px;
-  height: 56px;
+  position: relative;
+  text-align: left;
+  width: 100%;
 }
 
 .accordion-button:not(.collapsed) {
@@ -52,23 +53,23 @@
 
 .accordion-button:not(.collapsed)::after {
   background-position: left;
-  transform: scaleX(1.3) rotate(180deg);
-  font-weight: 600;
   font-size: 16px;
+  font-weight: 600;
+  transform: scaleX(1.3) rotate(180deg);
 }
 
 .accordion-button::after {
-  flex-shrink: 0;
-  height: 24px;
-  margin-left: auto;
-  content: "\2304";
   background-repeat: no-repeat;
-  transition: transform 0.3s ease-in-out;
+  content: "\2304";
+  flex-shrink: 0;
   float: left !important;
-  transform: scaleX(1.3);
   font-size: 16px;
   font-weight: 600;
+  height: 24px;
+  margin-left: auto;
+  transform: scaleX(1.3);
   transform-origin: center center;
+  transition: transform 0.3s ease-in-out;
 }
 
 .accordion-header {
@@ -78,40 +79,41 @@
 .accordion {
   display: flex;
   flex-direction: column;
-  overflow-x: hidden;
   margin-top: -10px;
+  overflow-x: hidden;
 }
 
 .accordion-item-header {
-  display: flex;
-  flex-direction: column;
   background-color: inherit;
-  width: 100%;
   border-bottom: 1px solid var(--border-subtle-alpha-01);
+  display: flex;
+  flex-direction: column;
   gap: var(--spacing-01);
+  width: 100%;
 }
 
 .accordion-item-header:last-child {
   border-bottom: none;
 }
 
 .accordion-body {
+  align-items: start;
   display: flex;
   flex-direction: column;
-  width: 100%;
-  align-items: start;
   gap: var(--spacing-01);
+  width: 100%;
 }
 
 div.page_container .accordion-item-button {
+  align-items: center;
   background-color: inherit;
-  width: 100%;
+  color: var(--text-secondary);
   display: flex;
-  padding: var(--spacing-02);
-  height: 40px;
-  align-items: center;
   font-size: var(--text-size-02);
+  height: 40px;
   line-height: var(--text-size-03);
+  padding: var(--spacing-02);
+  width: 100%;
 }
 
 .accordion-item-button.btn.btn-primary.active {
@@ -124,11 +126,11 @@ div.page_container .accordion-item-button {
 * Adding important to increase the specificity
 */
 .accordion-item-button a {
+  align-items: flex-start;
+  display: flex;
   font-size: var(--text-size-02) !important;
   line-height: var(--text-size-03) !important;
   width: 100%;
-  align-items: flex-start;
-  display: flex;
 }
 
 div.page_container .accordion-item-button:focus {
@@ -144,3 +146,7 @@ div.page_container .accordion-item-button:hover {
 div.page_container .accordion-button:hover {
   color: var(--text-primary);
 }
+
+.material-symbols-outlined {
+  color: var(--text-secondary);
+}
diff --git a/vizro-core/src/vizro/static/css/card.css b/vizro-core/src/vizro/static/css/card.css
@@ -37,3 +37,7 @@ h6,
 p {
   margin-bottom: var(--spacing-02);
 }
+
+.card_text ul {
+  color: var(--text-secondary);
+}
diff --git a/vizro-core/src/vizro/static/css/dropdown.css b/vizro-core/src/vizro/static/css/dropdown.css
@@ -89,12 +89,14 @@ div.page_container .Select--multi .Select-value {
 
 /* Tag: Label */
 div.page_container .Select--multi .Select-value-label {
+  color: var(--text-secondary);
   line-height: var(--text-size-05);
   padding: 0 4px;
 }
 
 /* Tag: Cross */
 div.page_container .Select--multi .Select-value-icon {
+  color: var(--text-secondary);
   background: inherit;
   border: none;
   line-height: inherit;
@@ -137,6 +139,11 @@ div.nav_panel a {
   line-height: var(--text-size-07);
 }
 
+div.page_container .Select--multi .Select-clear-zone {
+  width: 16px;
+  color: var(--text-secondary);
+}
+
 /** spacing for tag elements only when elements are present inside
 wrapper **/
 .Select--multi.has-value .Select-multi-value-wrapper {

diff --git a/vizro-core/src/vizro/static/css/images.css b/vizro-core/src/vizro/static/css/images.css
@@ -8,14 +8,14 @@ img[src*="floating-left"] {
 
 img[src*="floating-center"] {
   display: block;
-  max-width: 100%;
+  float: none;
   height: auto;
   margin: auto;
-  float: none;
+  max-width: 100%;
 }
 
 img[src*="icon-top"] {
-  width: 36px;
-  height: 36px;
   filter: var(--fill-icon-image-card);
+  height: 36px;
+  width: 36px;
 }
diff --git a/vizro-core/src/vizro/static/css/index.css b/vizro-core/src/vizro/static/css/index.css
@@ -11,7 +11,6 @@
 * {
   border: 0;
   box-sizing: border-box;
-  color: var(--text-secondary);
   font-family: Inter, Sans-Serif, Arial, serif;
   letter-spacing: 0;
   margin: 0;

diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css
@@ -11,10 +11,10 @@
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
+  gap: var(--spacing-08);
+  overflow: auto;
   padding: 40px 32px 0 32px;
   width: 352px;
-  overflow: auto;
-  gap: var(--spacing-08);
 }
 
 .left_side {
@@ -106,22 +106,22 @@
 }
 
 .nav-bar {
-  display: inline-flex;
-  flex-direction: column;
-  width: 64px;
-  padding-top: 26px;
   align-items: center;
   background-color: var(--surfaces-bg-02);
   border-right: 1px solid var(--border-subtle-alpha-01);
+  display: inline-flex;
+  flex-direction: column;
+  padding-top: 26px;
+  width: 64px;
 }
 
 .icon-button {
+  align-items: center;
   background-color: var(--surfaces-bg-02);
-  width: 100%;
-  height: 64px;
   display: flex;
-  align-items: center;
+  height: 64px;
   justify-content: center;
+  width: 100%;
 }
 
 div.dashboard_container .tooltip-inner {
@@ -141,18 +141,18 @@ div.dashboard_container .custom-tooltip {
 }
 
 .mantine-Tooltip-tooltip {
+  background-color: var(--border-selected);
+  border-radius: 0;
+  box-shadow: var(--box-shadow-elevation-tooltip-hover);
+  color: var(--tooltip-text-primary);
+  filter: drop-shadow(0px 2px 2px #141721);
   font-size: var(--text-size-01);
   font-weight: var(--text-weight-light);
-  line-height: 16px;
   letter-spacing: var(--letter-spacing-help-text);
-  padding: var(--spacing-01) var(--spacing-02);
-  color: var(--tooltip-text-primary);
-  background-color: var(--border-selected);
+  line-height: 16px;
   max-width: 180px;
   overflow-wrap: break-word;
+  padding: var(--spacing-01) var(--spacing-02);
   text-wrap: wrap;
-  filter: drop-shadow(0px 2px 2px #141721);
-  border-radius: 0;
-  box-shadow: var(--box-shadow-elevation-tooltip-hover);
   white-space: pre-wrap;
 }
diff --git a/vizro-core/src/vizro/static/css/selectors.css b/vizro-core/src/vizro/static/css/selectors.css
@@ -1,5 +1,6 @@
 .selector_body_checklist,
 .selector_body_radio_items {
+  color: var(--text-secondary);
   display: flex;
   flex-direction: column;
   font-size: var(--text-size-02);

diff --git a/vizro-core/src/vizro/static/css/slider.css b/vizro-core/src/vizro/static/css/slider.css
@@ -98,13 +98,14 @@
 .slider_input_field_no_space_left,
 .slider_input_field_no_space_right {
   background-color: inherit;
+  color: var(--text-secondary);
   font-size: var(--text-size-02);
   margin-right: 4px;
+  max-width: 54px;
+  min-width: 40px;
   padding-bottom: var(--spacing-08);
   text-decoration: underline;
   text-decoration-color: var(--border-subtle-alpha-01);
-  max-width: 54px;
-  min-width: 40px;
 }
 
 .slider_input_field_right,