Skip to content

Commit 9203001

Browse files
isoosisoos
authored
Dark theme: MDC primary + fonts migrations. (#7836)
1 parent 822976f commit 9203001

File tree

6 files changed

+29
-30
lines changed

6 files changed

+29
-30
lines changed

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ body {
2020
}
2121

2222
body, input, button, select {
23-
font-family: $font-family-google-sans-text;
23+
font-family: var(--pub-default-text-font_family);
2424
-webkit-font-smoothing: antialiased;
2525
// we don't use font ligatures, and Google Sans fonts would otherwise change text in surprising ways
2626
font-variant-ligatures: none;
@@ -42,7 +42,7 @@ body,
4242
font-size: 16px;
4343

4444
h1, h2, h3, h4, h5, h6 {
45-
font-family: $font-family-google-sans;
45+
font-family: var(--pub-default-text-font_family);
4646
font-weight: 400;
4747
}
4848

@@ -58,14 +58,6 @@ img {
5858
max-width: 100%;
5959
}
6060

61-
// Material Design theme customizations
62-
:root {
63-
--mdc-theme-primary: #0175C2;
64-
--mdc-theme-secondary: #0066D9;
65-
// Represents $font-family-google-sans-text, but breaks generated CSS.
66-
--mdc-typography-font-family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
67-
}
68-
6961
summary {
7062
cursor: pointer;
7163
background: transparent;
@@ -159,7 +151,7 @@ code {
159151
background: var(--pub-code-background-color);
160152
border: none;
161153
border-radius: 4px;
162-
font-family: $font-family-google-sans-mono;
154+
font-family: var(--pub-code-text-font_family);
163155
padding: 2px 4px;
164156
}
165157

@@ -255,7 +247,7 @@ pre {
255247
}
256248

257249
th {
258-
font-family: $font-family-google-sans;
250+
font-family: var(--pub-default-text-font_family);
259251
font-size: 16px;
260252
font-weight: 400; /* overrides github-markdown.css */
261253
border-bottom: 1px solid #c8c8ca;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
7979
padding: 30px 0 20px;
8080

8181
.title {
82-
font-family: $font-family-google-sans-display;
82+
font-family: var(--pub-default-headline-font_family);
8383
margin: 0;
8484
font-size: 24px;
8585

@@ -173,7 +173,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
173173
}
174174

175175
.detail-like {
176-
font-family: $font-family-google-sans-text;
176+
font-family: var(--pub-default-text-font_family);
177177
font-size: 16px;
178178
font-weight: 500;
179179
text-transform: uppercase;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@
238238

239239
.packages-recent {
240240
color: #6d7278;
241-
font-family: $font-family-google-sans;
241+
font-family: var(--pub-default-text-font_family);
242242
font-size: 12px;
243243
margin: 0px 8px 0px 16px;
244244
white-space: nowrap;
@@ -391,7 +391,7 @@
391391
.search-form-section-header {
392392
display: flex;
393393
cursor: pointer;
394-
font-family: $font-family-google-sans;
394+
font-family: var(--pub-default-text-font_family);
395395
font-size: 14px;
396396
font-weight: bold;
397397

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
font-size: 14px;
110110

111111
.version {
112-
font-family: $font-family-google-sans;
112+
font-family: var(--pub-default-text-font_family);
113113
font-size: 24px;
114114
}
115115
}
@@ -154,7 +154,7 @@
154154
}
155155

156156
.score-key-figure-value {
157-
font-family: $font-family-google-sans-display;
157+
font-family: var(--pub-default-headline-font_family);
158158
font-size: 32px;
159159
line-height: 1;
160160

@@ -164,13 +164,13 @@
164164
}
165165

166166
.score-key-figure-supplemental {
167-
font-family: $font-family-google-sans;
167+
font-family: var(--pub-default-text-font_family);
168168
font-size: 24px;
169169
}
170170

171171
.score-key-figure-label {
172172
color: #555555;
173-
font-family: $font-family-google-sans-text;
173+
font-family: var(--pub-default-text-font_family);
174174
font-size: 14px;
175175
text-align: center;
176176
text-transform: uppercase;
@@ -209,15 +209,15 @@
209209
}
210210

211211
.pkg-report-header-title {
212-
font-family: $font-family-google-sans;
212+
font-family: var(--pub-default-text-font_family);
213213
font-size: 24px;
214214
}
215215

216216
.pkg-report-header-score {
217217
display: flex;
218218
align-items: center;
219219

220-
font-family: $font-family-google-sans;
220+
font-family: var(--pub-default-text-font_family);
221221
font-size: 22px;
222222

223223
&.-is-red {
@@ -314,7 +314,7 @@
314314
transition: opacity $copy-feedback-transition-opacity-delay;
315315

316316
>.code {
317-
font-family: $font-family-google-sans-mono;
317+
font-family: var(--pub-code-text-font_family);
318318
display: block;
319319
}
320320

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
display: flex;
77
align-items: center;
88

9-
font-family: $font-family-google-sans;
9+
font-family: var(--pub-default-text-font_family);
1010

1111
&:hover {
1212
opacity: 1.0;

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@
55

66
:root {
77
--pub-default-background-color: #ffffff;
8-
--pub-default-text-color: #4a4a4a;
8+
--pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
9+
--pub-default-text-color: hsl(0, 0%, 29%);
10+
--pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
911
--pub-code-background-color: #f5f5f7;
1012
--pub-link-text-color: #0175c2;
13+
--pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
1114
--pub-badge-default-color: var(--pub-link-text-color);
1215
--pub-badge-red-color: #ff4242;
1316
--pub-detail_tab-background-color: var(--pub-code-background-color);
@@ -16,6 +19,11 @@
1619
--pub-detail_tab-active-color: #1967d2;
1720
--pub-detail_tab-admin-color: #990000;
1821
--pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-default-background-color) 80%);
22+
23+
// Material Design theme customizations
24+
--mdc-theme-primary: #0175c2;
25+
--mdc-theme-secondary: #0066d9;
26+
--mdc-typography-font-family: var(--pub-default-text-font_family);
1927
}
2028

2129
.dark-theme {
@@ -31,12 +39,11 @@
3139
--pub-detail_tab-active-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-detail_tab-background-color) 20%);
3240
--pub-detail_tab-admin-color: #e03030;
3341
--pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-default-background-color) 80%);
34-
}
3542

36-
$font-family-google-sans-display: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
37-
$font-family-google-sans: "Google Sans", "Roboto", sans-serif;
38-
$font-family-google-sans-text: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
39-
$font-family-google-sans-mono: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
43+
// Material Design theme customizations
44+
--mdc-theme-on-primary: var(--pub-default-text-color);
45+
--mdc-theme-on-secondary: var(--pub-default-text-color);
46+
}
4047

4148
$site-header-banner-bg: #1C2834;
4249
$site-header-banner-fg: #f8f9fa;

0 commit comments

Comments
 (0)