From 1976c6d05c9246cde9be2c2070a1e6872ef92c96 Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Fri, 15 Nov 2024 15:47:49 +0100 Subject: [PATCH 1/2] Separate :root, light-theme and dark-theme styles. --- pkg/web_css/lib/src/_variables.scss | 108 +++++++++++++++------------- 1 file changed, 59 insertions(+), 49 deletions(-) diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss index d100d53341..9a4baed4c1 100644 --- a/pkg/web_css/lib/src/_variables.scss +++ b/pkg/web_css/lib/src/_variables.scss @@ -16,15 +16,71 @@ // - `[property]` may be `color`, `opacity` for specific values, or a `value` for multi-part properties. :root { - @include dash_variables.light-theme; + --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif; + --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif; + --pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; --pub-color-white: #ffffff; + --pub-color-dangerRed: #ff4242; + + --pub-hash_link-text-color: #ccc; + --pub-footer-background-color: #27323a; + --pub-footer-text-color: #f8f9fa; + --pub-home_banner-text-color: var(--pub-color-white); + --pub-home_banner-link-color: #31b0fc; + + --pub-pkg_list_recent_item-text-color: #6d7278; + + --pub-remove_button-background-color: var(--pub-color-dangerRed); + --pub-remove_button-text-color: var(--pub-color-white); + + --pub-report_header_score_error-text-color: #e13701; + --pub-report_header_score_warning-text-color: #ffa500; + + --pub-input-placeholder-color: #888; + --pub-searchbar-background-color: #132030; + --pub-searchbar-text-color: #8d9399; + --pub-searchbar_input-background-color: #35404d; + --pub-searchbar_input-text-color: var(--pub-color-white); + --pub-searchbar_suggest-background-color: #25303d; + --pub-searchbar_suggest_hover-background-color: #455060; + --pub-searchbar_suggest-text-color: #a9a9a9; + + --pub-session_warning-background-color: #ffffaa; + + --pub-site_header_banner-background-color: #1C2834; + --pub-site_header_banner-text-color: #f8f9fa; + --pub-site_header_banner_hover-background-color: #2b3d50; // 10% lighter than bg color + --pub-site_header_popup-background-color: #1f3044; + --pub-site_header_popup-text-color: #f8f9fa; + --pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color + + --pub-carousel-background-color: rgba(0,0,0,0.85); + --pub-carousel_nav-background-color: rgba(0,0,0,0.7); + --pub-carousel_nav_hover-background-color: #4285f4; + --pub-carousel_screenshot-background-color: rgba(0,0,0,0.7); + --pub-carousel_screenshot-text-color: var(--pub-color-white); + --pub-collections_icon-background-color: #aeaeae; + --pub-thumbnail_container-background-color: var(--pub-color-white); // same in dark mode + + --pub-full_page_mask-background-color: rgba(0, 0, 0, 0.5); // Used to make the inaccessible UI parts fade into the background. + --pub_tag_simplebadge_warning-background-color: #c0392b; + --pub_tag_simplebadge_warning-text-color: #f8f8f8; + --pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2); + + // Material Design theme customizations + --mdc-theme-primary: #0175c2; + --mdc-theme-secondary: #0066d9; + --mdc-typography-font-family: var(--pub-default-text-font_family); +} + +.light-theme { + @include dash_variables.light-theme; + --pub-color-snowWhite: #fafafa; // slight deviation from official snow-white (fffafa) --pub-color-smokeWhite: #f5f5f7; // slight deviation from official white-smoke (f5f5f5) --pub-color-bubblesBlue: #e7f8ff; // slight deviation from official bubbles-blue (e7feff) - --pub-color-dangerRed: #ff4242; - --pub-neutral-bgColor: var(--pub-color-white); --pub-neutral-borderColor: var(--pub-color-smokeWhite); --pub-neutral-textColor: var(--dash-surface-fgColor); @@ -39,20 +95,10 @@ --pub-markdown-alert-warning: #9a6700; // attention-emphasis from GitHub --pub-markdown-alert-caution: #cf222e; // danger-emphasis from GitHub - --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif; - --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif; --pub-code-text-color: var(--pub-neutral-textColor); --pub-link-text-color: #0175c2; - --pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; --pub-badge-default-color: var(--pub-link-text-color); --pub-badge-red-color: var(--pub-color-dangerRed); - --pub-carousel-background-color: rgba(0,0,0,0.85); - --pub-carousel_nav-background-color: rgba(0,0,0,0.7); - --pub-carousel_nav_hover-background-color: #4285f4; - --pub-carousel_screenshot-background-color: rgba(0,0,0,0.7); - --pub-carousel_screenshot-text-color: var(--pub-color-white); - --pub-collections_icon-background-color: #aeaeae; - --pub-thumbnail_container-background-color: var(--pub-color-white); // same in dark mode --pub-copy_feedback-background-color: #fafaff; --pub-detail_tab-text-color: var(--pub-neutral-textColor); --pub-detail_tab-underline-color: #dddddd; @@ -60,56 +106,20 @@ --pub-weekly-chart-main-color: var(--pub-link-text-color); --pub-weekly-chart-tooltip-text-color: var(--pub-color-white); --pub-detail_tab-admin-color: #990000; - --pub-hash_link-text-color: #ccc; - --pub-footer-background-color: #27323a; - --pub-footer-text-color: #f8f9fa; --pub-home_title-text-color: #254a76; - --pub-home_banner-text-color: var(--pub-color-white); - --pub-home_banner-link-color: #31b0fc; --pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3); --pub-home_card_title-text-color: #1967d2; --pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4); --pub-pagination-active-color: var(--pub-link-text-color); --pub-pagination-inactive-color: #aaaaaa; - --pub-input-placeholder-color: #888; - --pub-pkg_list_recent_item-text-color: #6d7278; - --pub-remove_button-background-color: var(--pub-color-dangerRed); - --pub-remove_button-text-color: var(--pub-color-white); - --pub-report_header_score_error-text-color: #e13701; - --pub-report_header_score_warning-text-color: #ffa500; --pub-score_label-text-color: #6d7278; --pub-score_value-text-color: var(--pub-link-text-color); - --pub-searchbar-background-color: #132030; - --pub-searchbar-text-color: #8d9399; - --pub-searchbar_input-background-color: #35404d; - --pub-searchbar_input-text-color: var(--pub-color-white); - --pub-searchbar_suggest-background-color: #25303d; - --pub-searchbar_suggest_hover-background-color: #455060; - --pub-searchbar_suggest-text-color: #a9a9a9; - --pub-session_warning-background-color: #ffffaa; - --pub-site_header_banner-background-color: #1C2834; - --pub-site_header_banner-text-color: #f8f9fa; - --pub-site_header_banner_hover-background-color: #2b3d50; // 10% lighter than bg color - --pub-site_header_popup-background-color: #1f3044; - --pub-site_header_popup-text-color: #f8f9fa; - --pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color --pub-sort_control_hover-text-color: var(--pub-neutral-textColor); --pub-sort_control_selected-text-color: var(--pub-neutral-textColor); - --pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2); --pub-tag_simplebadge-text-color: #444444; - --pub_tag_simplebadge_warning-background-color: #c0392b; - --pub_tag_simplebadge_warning-text-color: #f8f8f8; --pub-tag_sdkbadge-separator-color: rgba(25, 103, 210, 0.5); // #1967d2 + 0.5 opacity; --pub-tag_sdkbadge-text-color: #1967d2; - --pub-full_page_mask-background-color: rgba(0, 0, 0, 0.5); // Used to make the inaccessible UI parts fade into the background. - // Material Design theme customizations - --mdc-theme-primary: #0175c2; - --mdc-theme-secondary: #0066d9; - --mdc-typography-font-family: var(--pub-default-text-font_family); -} - -.light-theme { .displayed-in-dark-theme { display: none !important; } From 7ed81427466013f6adc1af13a2cac46ef981171f Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Tue, 19 Nov 2024 13:30:55 +0100 Subject: [PATCH 2/2] Use :root instead of .light-theme --- pkg/web_css/lib/src/_variables.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss index 9a4baed4c1..6999663494 100644 --- a/pkg/web_css/lib/src/_variables.scss +++ b/pkg/web_css/lib/src/_variables.scss @@ -15,6 +15,7 @@ // - `[role]` may be the `background`, `text`, `border`, ... (multiple parts are separated by `_`) // - `[property]` may be `color`, `opacity` for specific values, or a `value` for multi-part properties. +/// Variables that are not specific to the light or dark theme. :root { --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif; --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif; @@ -74,7 +75,8 @@ --mdc-typography-font-family: var(--pub-default-text-font_family); } -.light-theme { +/// Variables that are specific to the light theme. +:root { @include dash_variables.light-theme; --pub-color-snowWhite: #fafafa; // slight deviation from official snow-white (fffafa) @@ -119,12 +121,15 @@ --pub-tag_simplebadge-text-color: #444444; --pub-tag_sdkbadge-separator-color: rgba(25, 103, 210, 0.5); // #1967d2 + 0.5 opacity; --pub-tag_sdkbadge-text-color: #1967d2; +} +.light-theme { .displayed-in-dark-theme { display: none !important; } } +/// Variables that are specific to the dark theme. .dark-theme { @include dash_variables.dark-theme;