Skip to content

Commit d5c64ed

Browse files
isoosisoos
authored
CSS rename/migration: neutral text color. (#8124)
1 parent 6f6ff9c commit d5c64ed

File tree

6 files changed

+42
-42
lines changed

6 files changed

+42
-42
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
body {
1313
background-color: var(--pub-neutral-bgColor);
14-
color: var(--pub-default-text-color);
14+
color: var(--pub-neutral-textColor);
1515
font-size: 14px;
1616
line-height: 1.6;
1717
margin: 0;
@@ -320,7 +320,7 @@ pre {
320320

321321
.-pub-like-button {
322322
--mdc-theme-primary: #f8f8f8;
323-
--mdc-theme-on-primary: var(--pub-default-text-color);
323+
--mdc-theme-on-primary: var(--pub-neutral-textColor);
324324
}
325325

326326
.-pub-like-button-img {
@@ -410,7 +410,7 @@ pre {
410410
}
411411

412412
a.-x-ago {
413-
color: var(--pub-default-text-color);
413+
color: var(--pub-neutral-textColor);
414414
text-decoration: underline dotted #ccc;
415415
}
416416

@@ -444,10 +444,10 @@ a.-x-ago {
444444
.pub-toc {
445445
border-left: 4px solid var(--pub-inset-bgColor);
446446
padding: 4px 12px;
447-
color: var(--pub-default-text-color);
447+
color: var(--pub-neutral-textColor);
448448

449449
a {
450-
color: var(--pub-default-text-color);
450+
color: var(--pub-neutral-textColor);
451451
}
452452

453453
.pub-toc-node-0 {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
1414
.detail-header,
1515
.detail-tabs-wide-header {
1616
background: var(--pub-inset-bgColor);
17-
color: var(--pub-default-text-color);
17+
color: var(--pub-code-text-color);
1818
}
1919

2020
.detail-header {
@@ -190,7 +190,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
190190
}
191191

192192
&:focus-within {
193-
border-color: var(--pub-default-text-color);
193+
border-color: var(--pub-neutral-textColor);
194194
}
195195
}
196196
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
}
7979

8080
.mdc-data-table__cell {
81-
color: var(--pub-default-text-color);
81+
color: var(--pub-neutral-textColor);
8282
}
8383

8484
.email-header { width: 60%; }
@@ -88,7 +88,7 @@
8888
.-pub-remove-uploader-button,
8989
.-pub-remove-user-button {
9090
border-radius: 3px;
91-
color: var(--pub-default-text-color);
91+
color: var(--pub-neutral-textColor);
9292
display: inline-block;
9393
padding: 2px 8px;
9494

@@ -136,7 +136,7 @@
136136
&:hover {
137137
.mdc-notched-outline__leading,
138138
.mdc-notched-outline__trailing {
139-
border-color: var(--pub-default-text-color) !important;
139+
border-color: var(--pub-neutral-textColor) !important;
140140
}
141141
}
142142
}
@@ -167,16 +167,16 @@
167167

168168
.mdc-data-table__header-cell {
169169
border-color: var(--mdc_pub-data_table-border-color);
170-
color: var(--pub-default-text-color);
170+
color: var(--pub-neutral-textColor);
171171
}
172172
.mdc-data-table__cell {
173-
color: var(--pub-default-text-color);
173+
color: var(--pub-neutral-textColor);
174174
}
175175

176176
.mdc-dialog__surface {
177177
.mdc-dialog__title,
178178
.mdc-dialog__content {
179-
color: var(--pub-default-text-color);
179+
color: var(--pub-neutral-textColor);
180180
}
181181
}
182182
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
display: block;
6262
width: 100%;
6363
background: var(--pub-neutral-bgColor);
64-
color: var(--pub-sort_control-text-color);
64+
color: var(--pub-neutral-textColor);
6565
font-size: 14px;
6666
padding: 12px 12px;
6767
text-align: left;
@@ -431,7 +431,7 @@
431431
}
432432

433433
a {
434-
color: var(--pub-default-text-color);
434+
color: var(--pub-neutral-textColor);
435435
}
436436

437437
label {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,6 @@
5959
display: inline-block;
6060
padding: 2px 6px;
6161
background: var(--pub-neutral-bgColor);
62-
color: var(--pub-default-text-color);
62+
color: var(--pub-neutral-textColor);
6363
}
6464
}

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

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

1818
:root {
19-
--pub-color-white: #ffffff;
20-
--pub-color-snowWhite: #fafafa; // slight deviation from official snow-white (fffafa)
21-
--pub-color-smokeWhite: #f5f5f7; // slight deviation from official white-smoke (f5f5f5)
22-
--pub-color-bubblesBlue: #e7f8ff; // slight deviation from official bubbles-blue (e7feff)
19+
--pub-color-white: #ffffff;
20+
--pub-color-snowWhite: #fafafa; // slight deviation from official snow-white (fffafa)
21+
--pub-color-smokeWhite: #f5f5f7; // slight deviation from official white-smoke (f5f5f5)
22+
--pub-color-bubblesBlue: #e7f8ff; // slight deviation from official bubbles-blue (e7feff)
23+
--pub-color-gunpowderGray: #4a4a4a; // hsl(0, 0%, 29%);
2324

2425
--pub-color-dangerRed: #ff4242;
2526

2627
--pub-neutral-bgColor: var(--pub-color-white);
2728
--pub-neutral-borderColor: var(--pub-color-smokeWhite);
29+
--pub-neutral-textColor: var(--pub-color-gunpowderGray);
2830
--pub-neutral-hover-bgColor: var(--pub-color-snowWhite);
2931
--pub-inset-bgColor: var(--pub-color-smokeWhite);
3032
--pub-selected-bgColor: var(--pub-color-bubblesBlue);
3133

3234
--pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
33-
--pub-default-text-color: hsl(0, 0%, 29%);
3435
--pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
35-
--pub-code-text-color: var(--pub-default-text-color);
36+
--pub-code-text-color: var(--pub-neutral-textColor);
3637
--pub-link-text-color: #0175c2;
3738
--pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
3839
--pub-badge-default-color: var(--pub-link-text-color);
@@ -45,7 +46,7 @@
4546
--pub-collections_icon-background-color: #aeaeae;
4647
--pub-thumbnail_container-background-color: var(--pub-color-white); // same in dark mode
4748
--pub-copy_feedback-background-color: #fafaff;
48-
--pub-detail_tab-text-color: var(--pub-default-text-color);
49+
--pub-detail_tab-text-color: var(--pub-neutral-textColor);
4950
--pub-detail_tab-underline-color: #dddddd;
5051
--pub-detail_tab-active-color: #1967d2;
5152
--pub-detail_tab-admin-color: #990000;
@@ -79,9 +80,8 @@
7980
--pub-site_header_popup-background-color: #1f3044;
8081
--pub-site_header_popup-text-color: #f8f9fa;
8182
--pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color
82-
--pub-sort_control-text-color: var(--pub-default-text-color);
83-
--pub-sort_control_hover-text-color: var(--pub-default-text-color);
84-
--pub-sort_control_selected-text-color: var(--pub-default-text-color);
83+
--pub-sort_control_hover-text-color: var(--pub-neutral-textColor);
84+
--pub-sort_control_selected-text-color: var(--pub-neutral-textColor);
8585
--pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2);
8686
--pub-tag_simplebadge-text-color: #444444;
8787
--pub_tag_simplebadge_warning-background-color: #c0392b;
@@ -107,20 +107,21 @@
107107
--pub-color-shadowBlack: #373737;
108108
--pub-color-anchorBlack: #41424c;
109109
--pub-color-nipponUltraBlue: #23607f;
110+
--pub-color-gainsboro: #dcdcdc;
110111

111112
--pub-neutral-bgColor: var(--pub-color-darkGunmetal);
112113
--pub-neutral-borderColor: var(--pub-color-anchorBlack);
114+
--pub-neutral-textColor: var(--pub-color-gainsboro);
113115
--pub-neutral-hover-bgColor: var(--pub-color-shadowBlack);
114116
--pub-inset-bgColor: var(--pub-color-anchorBlack);
115117
--pub-selected-bgColor: var(--pub-color-nipponUltraBlue);
116118

117-
--pub-default-text-color: #e0e0e0;
118-
--pub-code-text-color: var(--pub-default-text-color);
119+
--pub-code-text-color: var(--pub-neutral-textColor);
119120
--pub-link-text-color: #40c4ff;
120121
--pub-badge-default-color: var(--pub-link-text-color);
121122
--pub-badge-red-color: var(--pub-color-dangerRed);
122123
--pub-copy_feedback-background-color: #404040;
123-
--pub-detail_tab-text-color: var(--pub-default-text-color);
124+
--pub-detail_tab-text-color: var(--pub-neutral-textColor);
124125
--pub-detail_tab-underline-color: #888888;
125126
--pub-detail_tab-active-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-inset-bgColor) 20%);
126127
--pub-detail_tab-admin-color: #e03030;
@@ -132,33 +133,32 @@
132133
--pub-pagination-inactive-color: #aaaaaa;
133134
--pub-score_label-text-color: #a0b0b8;
134135
--pub-score_value-text-color: var(--pub-link-text-color);
135-
--pub-sort_control-text-color: var(--pub-default-text-color);
136-
--pub-sort_control_hover-text-color: var(--pub-default-text-color);
137-
--pub-sort_control_selected-text-color: var(--pub-default-text-color);
138-
--pub-tag_simplebadge-text-color: var(--pub-default-text-color);
139-
--pub-tag_sdkbadge-separator-color: var(--pub-default-text-color);
140-
--pub-tag_sdkbadge-text-color: var(--pub-default-text-color);
136+
--pub-sort_control_hover-text-color: var(--pub-neutral-textColor);
137+
--pub-sort_control_selected-text-color: var(--pub-neutral-textColor);
138+
--pub-tag_simplebadge-text-color: var(--pub-neutral-textColor);
139+
--pub-tag_sdkbadge-separator-color: var(--pub-neutral-textColor);
140+
--pub-tag_sdkbadge-text-color: var(--pub-neutral-textColor);
141141

142142
// Material Design theme customizations
143143
--mdc-theme-surface: var(--pub-neutral-bgColor);
144-
--mdc-theme-on-primary: var(--pub-default-text-color);
145-
--mdc-theme-on-secondary: var(--pub-default-text-color);
146-
--mdc-theme-on-surface: var(--pub-default-text-color);
144+
--mdc-theme-on-primary: var(--pub-neutral-textColor);
145+
--mdc-theme-on-secondary: var(--pub-neutral-textColor);
146+
--mdc-theme-on-surface: var(--pub-neutral-textColor);
147147
--mdc-checkbox-unchecked-color: #777777;
148148
--mdc-checkbox-disabled-color: #666666;
149149
--mdc-filled-button-container-color: rgba(255, 255, 255, 0.1);
150-
--mdc-filled-button-label-text-color: var(--pub-default-text-color);
150+
--mdc-filled-button-label-text-color: var(--pub-neutral-textColor);
151151
--mdc-protected-button-disabled-container-color: rgba(255, 255, 255, 0.1);
152-
--mdc-protected-button-disabled-label-text-color: var(--pub-default-text-color);
152+
--mdc-protected-button-disabled-label-text-color: var(--pub-neutral-textColor);
153153

154154
// Pub-specific Material Design overrides
155155
--mdc_pub-data_table-border-color: var(--mdc-checkbox-unchecked-color);
156156
--mdc_pub-select-background-color: rgba(255, 255, 255, 0.1);
157157
--mdc_pub-select-label-color: var(--pub-link-text-color);
158-
--mdc_pub-select-text-color: var(--pub-default-text-color);
158+
--mdc_pub-select-text-color: var(--pub-neutral-textColor);
159159
--mdc_pub-text_field-background-color: rgba(255, 255, 255, 0.1);
160160
--mdc_pub-text_field-border-color: var(--mdc-checkbox-unchecked-color);
161-
--mdc_pub-text_field-text-color: var(--pub-default-text-color);
161+
--mdc_pub-text_field-text-color: var(--pub-neutral-textColor);
162162

163163
// Most of our SVG images are black on transparent background and they
164164
// are almost invisible in dark mode. Ideally we would have different

0 commit comments

Comments
 (0)