Skip to content

Commit

Permalink
Separate :root, light-theme and dark-theme styles. (dart-lang#8295)
Browse files Browse the repository at this point in the history
  • Loading branch information
@isoos
isoos authored Nov 19, 2024
1 parent a1bce2d commit 1a0755f
Showing 1 changed file with 62 additions and 47 deletions.
109 changes: 62 additions & 47 deletions pkg/web_css/lib/src/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,74 @@
// - `[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 {
@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);
}

/// 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)
--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);
Expand All @@ -39,74 +97,30 @@
--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;
--pub-detail_tab-active-color: #1967d2;
--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 {
Expand All @@ -115,6 +129,7 @@
}
}

/// Variables that are specific to the dark theme.
.dark-theme {
@include dash_variables.dark-theme;

Expand Down

0 comments on commit 1a0755f

Please sign in to comment.