Skip to content

Commit 1a0755f

Browse files
isoosisoos
authored
Separate :root, light-theme and dark-theme styles. (#8295)
1 parent a1bce2d commit 1a0755f

File tree

1 file changed

+62
-47
lines changed

1 file changed

+62
-47
lines changed

‎pkg/web_css/lib/src/_variables.scss

Lines changed: 62 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,74 @@
1515
// - `[role]` may be the `background`, `text`, `border`, ... (multiple parts are separated by `_`)
1616
// - `[property]` may be `color`, `opacity` for specific values, or a `value` for multi-part properties.
1717

18+
/// Variables that are not specific to the light or dark theme.
1819
:root {
19-
@include dash_variables.light-theme;
20+
--pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
21+
--pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
22+
--pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
2023

2124
--pub-color-white: #ffffff;
25+
--pub-color-dangerRed: #ff4242;
26+
27+
--pub-hash_link-text-color: #ccc;
28+
--pub-footer-background-color: #27323a;
29+
--pub-footer-text-color: #f8f9fa;
30+
--pub-home_banner-text-color: var(--pub-color-white);
31+
--pub-home_banner-link-color: #31b0fc;
32+
33+
--pub-pkg_list_recent_item-text-color: #6d7278;
34+
35+
--pub-remove_button-background-color: var(--pub-color-dangerRed);
36+
--pub-remove_button-text-color: var(--pub-color-white);
37+
38+
--pub-report_header_score_error-text-color: #e13701;
39+
--pub-report_header_score_warning-text-color: #ffa500;
40+
41+
--pub-input-placeholder-color: #888;
42+
--pub-searchbar-background-color: #132030;
43+
--pub-searchbar-text-color: #8d9399;
44+
--pub-searchbar_input-background-color: #35404d;
45+
--pub-searchbar_input-text-color: var(--pub-color-white);
46+
--pub-searchbar_suggest-background-color: #25303d;
47+
--pub-searchbar_suggest_hover-background-color: #455060;
48+
--pub-searchbar_suggest-text-color: #a9a9a9;
49+
50+
--pub-session_warning-background-color: #ffffaa;
51+
52+
--pub-site_header_banner-background-color: #1C2834;
53+
--pub-site_header_banner-text-color: #f8f9fa;
54+
--pub-site_header_banner_hover-background-color: #2b3d50; // 10% lighter than bg color
55+
--pub-site_header_popup-background-color: #1f3044;
56+
--pub-site_header_popup-text-color: #f8f9fa;
57+
--pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color
58+
59+
--pub-carousel-background-color: rgba(0,0,0,0.85);
60+
--pub-carousel_nav-background-color: rgba(0,0,0,0.7);
61+
--pub-carousel_nav_hover-background-color: #4285f4;
62+
--pub-carousel_screenshot-background-color: rgba(0,0,0,0.7);
63+
--pub-carousel_screenshot-text-color: var(--pub-color-white);
64+
--pub-collections_icon-background-color: #aeaeae;
65+
--pub-thumbnail_container-background-color: var(--pub-color-white); // same in dark mode
66+
67+
--pub-full_page_mask-background-color: rgba(0, 0, 0, 0.5); // Used to make the inaccessible UI parts fade into the background.
68+
--pub_tag_simplebadge_warning-background-color: #c0392b;
69+
--pub_tag_simplebadge_warning-text-color: #f8f8f8;
70+
--pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2);
71+
72+
// Material Design theme customizations
73+
--mdc-theme-primary: #0175c2;
74+
--mdc-theme-secondary: #0066d9;
75+
--mdc-typography-font-family: var(--pub-default-text-font_family);
76+
}
77+
78+
/// Variables that are specific to the light theme.
79+
:root {
80+
@include dash_variables.light-theme;
81+
2282
--pub-color-snowWhite: #fafafa; // slight deviation from official snow-white (fffafa)
2383
--pub-color-smokeWhite: #f5f5f7; // slight deviation from official white-smoke (f5f5f5)
2484
--pub-color-bubblesBlue: #e7f8ff; // slight deviation from official bubbles-blue (e7feff)
2585

26-
--pub-color-dangerRed: #ff4242;
27-
2886
--pub-neutral-bgColor: var(--pub-color-white);
2987
--pub-neutral-borderColor: var(--pub-color-smokeWhite);
3088
--pub-neutral-textColor: var(--dash-surface-fgColor);
@@ -39,74 +97,30 @@
3997
--pub-markdown-alert-warning: #9a6700; // attention-emphasis from GitHub
4098
--pub-markdown-alert-caution: #cf222e; // danger-emphasis from GitHub
4199

42-
--pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
43-
--pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
44100
--pub-code-text-color: var(--pub-neutral-textColor);
45101
--pub-link-text-color: #0175c2;
46-
--pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
47102
--pub-badge-default-color: var(--pub-link-text-color);
48103
--pub-badge-red-color: var(--pub-color-dangerRed);
49-
--pub-carousel-background-color: rgba(0,0,0,0.85);
50-
--pub-carousel_nav-background-color: rgba(0,0,0,0.7);
51-
--pub-carousel_nav_hover-background-color: #4285f4;
52-
--pub-carousel_screenshot-background-color: rgba(0,0,0,0.7);
53-
--pub-carousel_screenshot-text-color: var(--pub-color-white);
54-
--pub-collections_icon-background-color: #aeaeae;
55-
--pub-thumbnail_container-background-color: var(--pub-color-white); // same in dark mode
56104
--pub-copy_feedback-background-color: #fafaff;
57105
--pub-detail_tab-text-color: var(--pub-neutral-textColor);
58106
--pub-detail_tab-underline-color: #dddddd;
59107
--pub-detail_tab-active-color: #1967d2;
60108
--pub-weekly-chart-main-color: var(--pub-link-text-color);
61109
--pub-weekly-chart-tooltip-text-color: var(--pub-color-white);
62110
--pub-detail_tab-admin-color: #990000;
63-
--pub-hash_link-text-color: #ccc;
64-
--pub-footer-background-color: #27323a;
65-
--pub-footer-text-color: #f8f9fa;
66111
--pub-home_title-text-color: #254a76;
67-
--pub-home_banner-text-color: var(--pub-color-white);
68-
--pub-home_banner-link-color: #31b0fc;
69112
--pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3);
70113
--pub-home_card_title-text-color: #1967d2;
71114
--pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4);
72115
--pub-pagination-active-color: var(--pub-link-text-color);
73116
--pub-pagination-inactive-color: #aaaaaa;
74-
--pub-input-placeholder-color: #888;
75-
--pub-pkg_list_recent_item-text-color: #6d7278;
76-
--pub-remove_button-background-color: var(--pub-color-dangerRed);
77-
--pub-remove_button-text-color: var(--pub-color-white);
78-
--pub-report_header_score_error-text-color: #e13701;
79-
--pub-report_header_score_warning-text-color: #ffa500;
80117
--pub-score_label-text-color: #6d7278;
81118
--pub-score_value-text-color: var(--pub-link-text-color);
82-
--pub-searchbar-background-color: #132030;
83-
--pub-searchbar-text-color: #8d9399;
84-
--pub-searchbar_input-background-color: #35404d;
85-
--pub-searchbar_input-text-color: var(--pub-color-white);
86-
--pub-searchbar_suggest-background-color: #25303d;
87-
--pub-searchbar_suggest_hover-background-color: #455060;
88-
--pub-searchbar_suggest-text-color: #a9a9a9;
89-
--pub-session_warning-background-color: #ffffaa;
90-
--pub-site_header_banner-background-color: #1C2834;
91-
--pub-site_header_banner-text-color: #f8f9fa;
92-
--pub-site_header_banner_hover-background-color: #2b3d50; // 10% lighter than bg color
93-
--pub-site_header_popup-background-color: #1f3044;
94-
--pub-site_header_popup-text-color: #f8f9fa;
95-
--pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color
96119
--pub-sort_control_hover-text-color: var(--pub-neutral-textColor);
97120
--pub-sort_control_selected-text-color: var(--pub-neutral-textColor);
98-
--pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2);
99121
--pub-tag_simplebadge-text-color: #444444;
100-
--pub_tag_simplebadge_warning-background-color: #c0392b;
101-
--pub_tag_simplebadge_warning-text-color: #f8f8f8;
102122
--pub-tag_sdkbadge-separator-color: rgba(25, 103, 210, 0.5); // #1967d2 + 0.5 opacity;
103123
--pub-tag_sdkbadge-text-color: #1967d2;
104-
--pub-full_page_mask-background-color: rgba(0, 0, 0, 0.5); // Used to make the inaccessible UI parts fade into the background.
105-
106-
// Material Design theme customizations
107-
--mdc-theme-primary: #0175c2;
108-
--mdc-theme-secondary: #0066d9;
109-
--mdc-typography-font-family: var(--pub-default-text-font_family);
110124
}
111125

112126
.light-theme {
@@ -115,6 +129,7 @@
115129
}
116130
}
117131

132+
/// Variables that are specific to the dark theme.
118133
.dark-theme {
119134
@include dash_variables.dark-theme;
120135

0 commit comments

Comments
 (0)