From ba5511bc0d1e85ef99bf6e73bea1636ef68ad305 Mon Sep 17 00:00:00 2001 From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Date: Thu, 14 Dec 2023 11:25:32 +0100 Subject: [PATCH] Remove default font color from global CSS to enable overwrites (#213) --- ..._huong_li_nguyen_enable_color_overwrite.md | 47 +++++++ vizro-core/examples/default/app.py | 28 +++- vizro-core/src/vizro/static/css/accordion.css | 64 +++++---- vizro-core/src/vizro/static/css/card.css | 4 + vizro-core/src/vizro/static/css/dropdown.css | 7 + vizro-core/src/vizro/static/css/images.css | 8 +- vizro-core/src/vizro/static/css/index.css | 1 - vizro-core/src/vizro/static/css/layout.css | 32 ++--- vizro-core/src/vizro/static/css/selectors.css | 1 + vizro-core/src/vizro/static/css/slider.css | 5 +- vizro-core/src/vizro/static/css/table.css | 8 +- .../src/vizro/static/css/token_names.css | 124 +++++++++--------- vizro-core/src/vizro/static/css/types.css | 2 +- .../src/vizro/static/css/typography.css | 19 +++ vizro-core/src/vizro/static/css/variables.css | 48 +++---- 15 files changed, 253 insertions(+), 145 deletions(-) create mode 100644 vizro-core/changelog.d/20231213_184705_huong_li_nguyen_enable_color_overwrite.md 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 new file mode 100644 index 000000000..630ee2756 --- /dev/null +++ b/vizro-core/changelog.d/20231213_184705_huong_li_nguyen_enable_color_overwrite.md @@ -0,0 +1,47 @@ + + + + + + + + +### Fixed + +- Remove default font color from global CSS to enable overwrites ([#213](https://github.com/mckinsey/vizro/pull/213)) + + diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index f0f97e4a5..4957f1e00 100644 --- 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 index 0993c5cb6..7d333feaa 100644 --- 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,17 +79,17 @@ .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 { @@ -96,22 +97,23 @@ } .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 index 493d9e63b..692de768b 100644 --- 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 index 4f3518926..65723573d 100644 --- 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 index 5670c82e8..df3e4a4d0 100644 --- 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 index 1bc75277a..92440cb85 100644 --- 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 index 33d25a5ef..5558cd2f5 100644 --- 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 index e0093adb8..912f72b0e 100644 --- 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 index 8d43bf480..21254daa4 100644 --- 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, diff --git a/vizro-core/src/vizro/static/css/table.css b/vizro-core/src/vizro/static/css/table.css index 2f00727c8..5c5128285 100644 --- a/vizro-core/src/vizro/static/css/table.css +++ b/vizro-core/src/vizro/static/css/table.css @@ -4,6 +4,7 @@ div.right_side .dash-spreadsheet-inner th { background-color: var(--main-container-bg-color); + color: var(--text-primary); } div.right_side @@ -12,6 +13,7 @@ div.right_side .dash-spreadsheet-inner td { background-color: var(--main-container-bg-color); + color: var(--text-primary); } div.right_side @@ -28,7 +30,6 @@ div.right_side .dash-spreadsheet-inner td .dash-cell-value.unfocused { - color: var(--text-primary); font-size: 14px; } @@ -37,16 +38,13 @@ div.right_side .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name { - color: var( - --text-primary - ); /* Should be text-secondary when hover color is implemented */ font-size: 14px; } .table-container { height: 100%; - width: 100%; overflow: auto; padding: 12px; padding-left: 32px; + width: 100%; } diff --git a/vizro-core/src/vizro/static/css/token_names.css b/vizro-core/src/vizro/static/css/token_names.css index 57741c3c0..ebd452554 100644 --- a/vizro-core/src/vizro/static/css/token_names.css +++ b/vizro-core/src/vizro/static/css/token_names.css @@ -1,85 +1,85 @@ :root { - --state-overlays-dark-mode-enable: rgba(255, 255, 255, 0); - --state-overlays-dark-mode-hover: rgba(255, 255, 255, 0.12); - --state-overlays-dark-mode-active: rgba(255, 255, 255, 0.08); - --state-overlays-dark-mode-selected: rgba(255, 255, 255, 0.1); - --state-overlays-dark-mode-selected-hover: rgba(255, 255, 255, 0.16); - --state-overlays-light-mode-enable: rgba(20, 23, 33, 0); - --state-overlays-light-mode-hover: rgba(20, 23, 33, 0.08); - --state-overlays-light-mode-active: rgba(20, 23, 33, 0.12); - --state-overlays-light-mode-selected: rgba(20, 23, 33, 0.08); - --state-overlays-light-mode-selected-hover: rgba(20, 23, 33, 0.24); - --status-dark-mode-success: rgba(64, 216, 110, 1); - --status-dark-mode-warning: rgba(255, 193, 7, 1); - --status-dark-mode-error: rgba(245, 101, 101, 1); - --status-dark-mode-information: rgba(0, 180, 255, 1); - --status-light-mode-success: rgba(38, 191, 86, 1); - --status-light-mode-warning: rgba(241, 124, 2, 1); - --status-light-mode-error: rgba(240, 59, 58, 1); - --status-light-mode-information: rgba(0, 158, 255, 1); + --primary-dark-100: #333640; + --primary-dark-200: #2f323c; + --primary-dark-300: #2b2e39; + --primary-dark-400: #272a35; + --primary-dark-500: #232632; + --primary-dark-600: #1f222e; + --primary-dark-700: #1b1e2a; + --primary-dark-800: #181b26; + --primary-dark-900: #141721; --surfaces-dark-mode-bg-01: rgba(35, 38, 50, 1); --surfaces-dark-mode-bg-02: rgba(27, 30, 42, 1); --surfaces-dark-mode-bg-03: rgba(20, 23, 33, 1); --surfaces-dark-mode-bg-card: rgba(35, 38, 50, 1); - --surfaces-light-mode-bg-01: rgba(255, 255, 255, 1); - --surfaces-light-mode-bg-02: rgba(245, 246, 246, 1); - --surfaces-light-mode-bg-03: rgba(230, 232, 234, 1); - --surfaces-light-mode-bg-card: rgba(245, 246, 246, 1); + --border-dark-mode-disabled: rgba(255, 255, 255, 0.3); + --field-dark-mode-disabled: rgba(240, 241, 242, 1); + --fill-dark-mode-disabled: rgba(255, 255, 255, 0.3); + --text-dark-mode-disabled: rgba(255, 255, 255, 1); + --border-dark-mode-enabled: rgba(255, 255, 255, 0.6); --field-dark-mode-enabled: rgba(43, 46, 57, 1); + --status-dark-mode-error: rgba(245, 101, 101, 1); + --fill-dark-mode-high-emphasis: rgba(255, 255, 255, 0.88); + --border-dark-mode-hover: rgba(255, 255, 255, 0.88); --field-dark-mode-hover: rgba(55, 58, 68, 1); - --field-dark-mode-disabled: rgba(240, 241, 242, 1); - --field-light-mode-enabled: rgba(250, 250, 251, 1); - --field-light-mode-hover: rgba(255, 255, 255, 1); - --field-light-mode-disabled: rgba(240, 241, 242, 1); + --fill-dark-mode-hover-selected: rgba(255, 255, 255, 1); + --status-dark-mode-information: rgba(0, 180, 255, 1); + --fill-dark-mode-medium-emphasis: rgba(255, 255, 255, 0.6); --text-dark-mode-placeholder: rgba(255, 255, 255, 0.38); - --text-dark-mode-secondary: rgba(255, 255, 255, 0.6); --text-dark-mode-primary: rgba(255, 255, 255, 0.88); - --text-dark-mode-disabled: rgba(255, 255, 255, 1); - --text-light-mode-placeholder: rgba(20, 23, 33, 0.38); - --text-light-mode-secondary: rgba(20, 23, 33, 0.6); - --text-light-mode-primary: rgba(20, 23, 33, 0.88); - --text-light-mode-disabled: rgba(20, 23, 33, 0.3); + --text-dark-mode-secondary: rgba(255, 255, 255, 0.6); + --border-dark-mode-selected: #fff; --fill-dark-mode-subtle: rgba(255, 255, 255, 0.1); - --fill-dark-mode-medium-emphasis: rgba(255, 255, 255, 0.6); - --fill-dark-mode-high-emphasis: rgba(255, 255, 255, 0.88); - --fill-dark-mode-hover-selected: rgba(255, 255, 255, 1); - --fill-dark-mode-disabled: rgba(255, 255, 255, 0.3); - --fill-light-mode-subtle: rgba(0, 0, 0, 0.1); - --fill-light-mode-medium-emphasis: rgba(20, 23, 33, 0.6); - --fill-light-mode-high-emphasis: rgba(20, 23, 33, 0.88); - --fill-light-mode-hover-selected: rgba(20, 23, 33, 1); - --fill-light-mode-disabled: rgba(20, 23, 33, 0.3); --border-dark-mode-subtle-alpha-01: rgba(255, 255, 255, 0.1); - --border-dark-mode-enabled: rgba(255, 255, 255, 0.6); - --border-dark-mode-hover: rgba(255, 255, 255, 0.88); - --border-dark-mode-selected: #fff; - --border-dark-mode-disabled: rgba(255, 255, 255, 0.3); - --border-light-mode-subtle-alpha-01: rgba(20, 23, 33, 0.1); - --border-light-mode-enabled: rgba(20, 23, 33, 0.6); - --border-light-mode-hover: rgba(20, 23, 33, 0.88); - --border-light-mode-selected: #141721; - --border-light-mode-disabled: rgba(20, 23, 33, 0.3); - --primary-dark-100: #333640; - --primary-dark-200: #2f323c; - --primary-dark-300: #2b2e39; - --primary-dark-400: #272a35; - --primary-dark-500: #232632; - --primary-dark-600: #1f222e; - --primary-dark-700: #1b1e2a; - --primary-dark-800: #181b26; - --primary-dark-900: #141721; - --primary-light-50: #ffffff; + --status-dark-mode-success: rgba(64, 216, 110, 1); + --tags-dark-mode-text-color: rgba(255, 255, 255, 0.6); + --status-dark-mode-warning: rgba(255, 193, 7, 1); --primary-light-100: #fafafb; --primary-light-200: #f5f6f6; --primary-light-300: #f2f3f4; --primary-light-400: #ebedee; + --primary-light-50: #ffffff; --primary-light-500: #e6e8ea; --primary-light-600: #e2e4e6; --primary-light-700: #dddfe1; --primary-light-800: #d8dadd; --primary-light-900: #d3d6d9; - --tags-dark-mode-text-color: rgba(255, 255, 255, 0.6); + --surfaces-light-mode-bg-01: rgba(255, 255, 255, 1); + --surfaces-light-mode-bg-02: rgba(245, 246, 246, 1); + --surfaces-light-mode-bg-03: rgba(230, 232, 234, 1); + --surfaces-light-mode-bg-card: rgba(245, 246, 246, 1); + --border-light-mode-disabled: rgba(20, 23, 33, 0.3); + --field-light-mode-disabled: rgba(240, 241, 242, 1); + --fill-light-mode-disabled: rgba(20, 23, 33, 0.3); + --text-light-mode-disabled: rgba(20, 23, 33, 0.3); + --border-light-mode-enabled: rgba(20, 23, 33, 0.6); + --field-light-mode-enabled: rgba(250, 250, 251, 1); + --status-light-mode-error: rgba(240, 59, 58, 1); + --fill-light-mode-high-emphasis: rgba(20, 23, 33, 0.88); + --border-light-mode-hover: rgba(20, 23, 33, 0.88); + --field-light-mode-hover: rgba(255, 255, 255, 1); + --fill-light-mode-hover-selected: rgba(20, 23, 33, 1); + --status-light-mode-information: rgba(0, 158, 255, 1); + --fill-light-mode-medium-emphasis: rgba(20, 23, 33, 0.6); + --text-light-mode-placeholder: rgba(20, 23, 33, 0.38); + --text-light-mode-primary: rgba(20, 23, 33, 0.88); + --text-light-mode-secondary: rgba(20, 23, 33, 0.6); + --border-light-mode-selected: #141721; + --fill-light-mode-subtle: rgba(0, 0, 0, 0.1); + --border-light-mode-subtle-alpha-01: rgba(20, 23, 33, 0.1); + --status-light-mode-success: rgba(38, 191, 86, 1); --tags-light-mode-text-color: rgba(255, 255, 255, 0.6); - --overlays-on-light-ui-medium-contrast: rgba(239, 240, 248, 0.6); + --status-light-mode-warning: rgba(241, 124, 2, 1); --overlays-on-light-ui-high-contrast: rgba(239, 240, 248, 0.88); + --overlays-on-light-ui-medium-contrast: rgba(239, 240, 248, 0.6); + --state-overlays-dark-mode-active: rgba(255, 255, 255, 0.08); + --state-overlays-dark-mode-enable: rgba(255, 255, 255, 0); + --state-overlays-dark-mode-hover: rgba(255, 255, 255, 0.12); + --state-overlays-dark-mode-selected: rgba(255, 255, 255, 0.1); + --state-overlays-dark-mode-selected-hover: rgba(255, 255, 255, 0.16); + --state-overlays-light-mode-active: rgba(20, 23, 33, 0.12); + --state-overlays-light-mode-enable: rgba(20, 23, 33, 0); + --state-overlays-light-mode-hover: rgba(20, 23, 33, 0.08); + --state-overlays-light-mode-selected: rgba(20, 23, 33, 0.08); + --state-overlays-light-mode-selected-hover: rgba(20, 23, 33, 0.24); } diff --git a/vizro-core/src/vizro/static/css/types.css b/vizro-core/src/vizro/static/css/types.css index 18d182af4..87d9a1af0 100644 --- a/vizro-core/src/vizro/static/css/types.css +++ b/vizro-core/src/vizro/static/css/types.css @@ -4,8 +4,8 @@ textarea { } textarea:focus { - outline: none; box-shadow: 0 0 0 2px var(--focus-focus) inset; + outline: none; } hr { diff --git a/vizro-core/src/vizro/static/css/typography.css b/vizro-core/src/vizro/static/css/typography.css index 5912e14c4..c764b79ba 100644 --- a/vizro-core/src/vizro/static/css/typography.css +++ b/vizro-core/src/vizro/static/css/typography.css @@ -42,6 +42,7 @@ h4, } .body-ui-01 { + color: var(--text-secondary); font-size: var(--text-size-03); font-weight: var(--text-weight-regular); letter-spacing: var(--letter-spacing-body-ui-01); @@ -49,6 +50,7 @@ h4, } .body-ui-link-01 { + color: var(--text-secondary); font-size: var(--text-size-03); font-weight: var(--text-weight-semibold); letter-spacing: var(--letter-spacing-body-ui-01); @@ -58,6 +60,7 @@ h4, p, .body-ui-02 { + color: var(--text-secondary); font-size: var(--text-size-02); font-weight: var(--text-weight-regular); letter-spacing: var(--letter-spacing-body-ui-02); @@ -65,6 +68,7 @@ p, } .body-ui-link-02 { + color: var(--text-secondary); font-size: var(--text-size-02); font-weight: var(--text-weight-semibold); letter-spacing: var(--letter-spacing-body-link-02); @@ -72,6 +76,7 @@ p, } .body-editorial-01 { + color: var(--text-secondary); font-size: var(--text-size-03); font-weight: var(--text-weight-regular); letter-spacing: var(--letter-spacing-body-edit-01); @@ -80,6 +85,7 @@ p, } .body-editorial-02 { + color: var(--text-secondary); font-size: var(--text-size-02); font-weight: var(--text-weight-regular); letter-spacing: var(--letter-spacing-body-edit-02); @@ -87,6 +93,7 @@ p, } .help-text { + color: var(--text-secondary); font-size: var(--text-size-01); font-weight: var(--text-weight-light); letter-spacing: var(--letter-spacing-help-text); @@ -106,3 +113,15 @@ code, padding: 0 4px; width: max-content; } + +.hljs-section, +.hljs-quote, +.hljs-bullet, +.hljs-name { + color: var(--text-secondary); +} + +h5, +h6 { + color: var(--text-secondary); +} diff --git a/vizro-core/src/vizro/static/css/variables.css b/vizro-core/src/vizro/static/css/variables.css index 09ad4b158..6e52915a3 100644 --- a/vizro-core/src/vizro/static/css/variables.css +++ b/vizro-core/src/vizro/static/css/variables.css @@ -8,6 +8,7 @@ --spacing-06: 24px; --spacing-07: 28px; --spacing-08: 32px; + --tag-height: 24px; --text-size-01: 12px; --text-size-02: 14px; --text-size-03: 16px; @@ -26,12 +27,10 @@ --text-weight-light: 300; --text-weight-regular: 400; --text-weight-semibold: 600; - --tag-height: 24px; } /* Ensure dark and light have same list of variables (only color variables) */ .vizro_dark { - --main-container-bg-color: rgba(20, 23, 33, 1); --field-active: rgba(36, 48, 61, 1); --text-active: rgba(255, 255, 255, 1); --slider-background-color: #373a44; @@ -40,6 +39,7 @@ --surfaces-bg-03: var(--surfaces-dark-mode-bg-03); --surfaces-bg-card: var(--surfaces-dark-mode-bg-card); --tags-bg-color: #181b26; + --main-container-bg-color: rgba(20, 23, 33, 1); --fill-contrast-hover-selected: rgba(20, 23, 33, 1); --text-contrast-primary: rgba(20, 23, 33, 0.88); --border-contrast-selected: rgba(20, 23, 33, 1); @@ -53,18 +53,24 @@ --focus-focus: rgba(0, 133, 255, 0.6); --status-focus: rgba(0, 133, 255, 0.6); --fill-high-emphasis: var(--fill-dark-mode-high-emphasis); + --background-hover: rgba(255, 255, 255, 0.08); --border-hover: var(--border-dark-mode-hover); --field-hover: var(--field-dark-mode-hover); --fill-hover-selected: var(--fill-dark-mode-hover-selected); --status-information: var(--status-dark-mode-information); --fill-medium-emphasis: var(--fill-dark-mode-medium-emphasis); --fill-on-active: rgba(255, 255, 255, 1); + --state-overlays-active: var(--state-overlays-dark-mode-active); --state-overlays-enable: var(--state-overlays-dark-mode-enable); --state-overlays-hover: var(--state-overlays-dark-mode-hover); - --state-overlays-active: var(--state-overlays-dark-mode-active); + --state-overlays-selected: var(--state-overlays-dark-mode-selected); + --state-overlays-selected-hover: var( + --state-overlays-dark-mode-selected-hover + ); --text-placeholder: var(--text-dark-mode-placeholder); --text-primary: var(--text-dark-mode-primary); --text-secondary: var(--text-dark-mode-secondary); + --background-selected: rgba(0, 0, 0, 0.12); --border-selected: var(--border-dark-mode-selected); --box-shadow-elevation-0: 0 1px 1px 0 rgba(20, 23, 33, 0.3), 0 0 1px 0 rgba(20, 23, 33, 0.88); @@ -74,24 +80,18 @@ 0px 2px 6px -1px rgba(20, 23, 33, 0.16); --box-shadow-elevation-card-hover: 0px 2px 2px 0px rgba(20, 23, 33, 0.24), 0px 4px 8px 1px rgba(20, 23, 33, 0.12); + --box-shadow-elevation-tooltip-hover: 0px 4px 8px 0px rgba(20, 23, 33, 0.38), + 0px 2px 4px -1px rgba(20, 23, 33, 0.88); --fill-subtle: var(--fill-dark-mode-subtle); --border-subtle-alpha-01: var(--border-dark-mode-subtle-alpha-01); --status-success: var(--status-dark-mode-success); --tags-text-color: var(--tags-dark-mode-text-color); - --status-warning: var(--status-dark-mode-warning); - --background-selected: rgba(0, 0, 0, 0.12); - --background-hover: rgba(255, 255, 255, 0.08); - --state-overlays-selected: var(--state-overlays-dark-mode-selected); - --state-overlays-selected-hover: var( - --state-overlays-dark-mode-selected-hover - ); --tooltip-text-primary: rgba(20, 23, 33, 0.88); - --box-shadow-elevation-tooltip-hover: 0px 4px 8px 0px rgba(20, 23, 33, 0.38), - 0px 2px 4px -1px rgba(20, 23, 33, 0.88); + --status-warning: var(--status-dark-mode-warning); } .vizro_light { - --main-container-bg-color: rgba(255, 255, 255, 1); + --fill-accordion-button: invert(64%) sepia(0%) saturate(1375%); --field-active: rgba(251, 251, 251, 1); --text-active: rgba(20, 23, 33, 1); --slider-background-color: #d3d6d9; @@ -100,6 +100,7 @@ --surfaces-bg-03: var(--surfaces-light-mode-bg-03); --surfaces-bg-card: var(--surfaces-light-mode-bg-card); --tags-bg-color: var(--primary-light-300); + --main-container-bg-color: rgba(255, 255, 255, 1); --fill-contrast-hover-selected: rgba(255, 255, 255, 1); --text-contrast-primary: rgba(255, 255, 255, 0.88); --border-contrast-selected: rgba(255, 255, 255, 1); @@ -113,6 +114,7 @@ --focus-focus: rgba(0, 133, 255, 0.6); --status-focus: rgba(0, 133, 255, 0.6); --fill-high-emphasis: var(--fill-light-mode-high-emphasis); + --background-hover: var(--overlays-on-light-ui-medium-contrast); --border-hover: var(--border-light-mode-hover); --field-hover: var(--field-light-mode-hover); --fill-hover-selected: var(--fill-light-mode-hover-selected); @@ -121,12 +123,17 @@ --status-information: var(--status-light-mode-information); --fill-medium-emphasis: var(--fill-light-mode-medium-emphasis); --fill-on-active: rgba(0, 0, 0, 1); + --state-overlays-active: var(--state-overlays-light-mode-active); --state-overlays-enable: var(--state-overlays-light-mode-enable); --state-overlays-hover: var(--state-overlays-light-mode-hover); - --state-overlays-active: var(--state-overlays-light-mode-active); + --state-overlays-selected: var(--state-overlays-light-mode-selected); + --state-overlays-selected-hover: var( + --state-overlays-light-mode-selected-hover + ); --text-placeholder: var(--text-light-mode-placeholder); --text-primary: var(--text-light-mode-primary); --text-secondary: var(--text-light-mode-secondary); + --background-selected: var(--overlays-on-light-ui-high-contrast); --border-selected: var(--border-light-mode-selected); --box-shadow-elevation-0: 0 1px 1px 0 rgba(20, 23, 33, 0.08), 0 0 1px 0 rgba(20, 23, 33, 0.38); @@ -134,19 +141,12 @@ 0px 0px 1px 0px rgba(20, 23, 33, 0.38); --box-shadow-elevation-card-hover: 0px 2px 2px 0px rgba(20, 23, 33, 0.24), 0px 4px 8px 1px rgba(20, 23, 33, 0.12); + --box-shadow-elevation-tooltip-hover: 0px 4px 8px 0px rgba(20, 23, 33, 0.12), + 0px 2px 4px -1px rgba(20, 23, 33, 0.08); --fill-subtle: var(--fill-light-mode-subtle); --border-subtle-alpha-01: var(--border-light-mode-subtle-alpha-01); --status-success: var(--status-light-mode-success); --tags-text-color: var(--tags-light-mode-text-color); - --status-warning: var(--status-light-mode-warning); - --fill-accordion-button: invert(64%) sepia(0%) saturate(1375%); - --background-selected: var(--overlays-on-light-ui-high-contrast); - --background-hover: var(--overlays-on-light-ui-medium-contrast); - --state-overlays-selected: var(--state-overlays-light-mode-selected); - --state-overlays-selected-hover: var( - --state-overlays-light-mode-selected-hover - ); --tooltip-text-primary: rgba(255, 255, 255, 0.88); - --box-shadow-elevation-tooltip-hover: 0px 4px 8px 0px rgba(20, 23, 33, 0.12), - 0px 2px 4px -1px rgba(20, 23, 33, 0.08); + --status-warning: var(--status-light-mode-warning); }