Skip to content

Commit 1976c6d

Browse files
isoosisoos
committed
Separate :root, light-theme and dark-theme styles.
1 parent d7efc04 commit 1976c6d

File tree

1 file changed

+59
-49
lines changed

1 file changed

+59
-49
lines changed

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

Lines changed: 59 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,71 @@
1616
// - `[property]` may be `color`, `opacity` for specific values, or a `value` for multi-part properties.
1717

1818
:root {
19-
@include dash_variables.light-theme;
19+
--pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
20+
--pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
21+
--pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
2022

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

26-
--pub-color-dangerRed: #ff4242;
27-
2884
--pub-neutral-bgColor: var(--pub-color-white);
2985
--pub-neutral-borderColor: var(--pub-color-smokeWhite);
3086
--pub-neutral-textColor: var(--dash-surface-fgColor);
@@ -39,77 +95,31 @@
3995
--pub-markdown-alert-warning: #9a6700; // attention-emphasis from GitHub
4096
--pub-markdown-alert-caution: #cf222e; // danger-emphasis from GitHub
4197

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;
4498
--pub-code-text-color: var(--pub-neutral-textColor);
4599
--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;
47100
--pub-badge-default-color: var(--pub-link-text-color);
48101
--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
56102
--pub-copy_feedback-background-color: #fafaff;
57103
--pub-detail_tab-text-color: var(--pub-neutral-textColor);
58104
--pub-detail_tab-underline-color: #dddddd;
59105
--pub-detail_tab-active-color: #1967d2;
60106
--pub-weekly-chart-main-color: var(--pub-link-text-color);
61107
--pub-weekly-chart-tooltip-text-color: var(--pub-color-white);
62108
--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;
66109
--pub-home_title-text-color: #254a76;
67-
--pub-home_banner-text-color: var(--pub-color-white);
68-
--pub-home_banner-link-color: #31b0fc;
69110
--pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3);
70111
--pub-home_card_title-text-color: #1967d2;
71112
--pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4);
72113
--pub-pagination-active-color: var(--pub-link-text-color);
73114
--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;
80115
--pub-score_label-text-color: #6d7278;
81116
--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
96117
--pub-sort_control_hover-text-color: var(--pub-neutral-textColor);
97118
--pub-sort_control_selected-text-color: var(--pub-neutral-textColor);
98-
--pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2);
99119
--pub-tag_simplebadge-text-color: #444444;
100-
--pub_tag_simplebadge_warning-background-color: #c0392b;
101-
--pub_tag_simplebadge_warning-text-color: #f8f8f8;
102120
--pub-tag_sdkbadge-separator-color: rgba(25, 103, 210, 0.5); // #1967d2 + 0.5 opacity;
103121
--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.
105122

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);
110-
}
111-
112-
.light-theme {
113123
.displayed-in-dark-theme {
114124
display: none !important;
115125
}

0 commit comments

Comments
 (0)