Skip to content

Commit ece89ec

Browse files
connorjclarkpaulirish
connorjclark
authored and
paulirish
committed
report: logically order css variables
1 parent 37f7261 commit ece89ec

File tree

1 file changed

+110
-113
lines changed

1 file changed

+110
-113
lines changed

‎lighthouse-core/report/html/report-styles.css

Lines changed: 110 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
If a variable is used for a specific component: --{component}-{property name}-{modifier}
2222
2323
Both {component} and {property name} should be kebab-case. If the target is the entire page,
24-
use 'report' for the component. The property name should be not be abbreviated. Use the
24+
use 'report' for the component. The property name should not be abbreviated. Use the
2525
property name the variable is intended for - if it's used for multiple, a common descriptor
2626
is fine (ex: 'size' for a variable applied to 'width' and 'height'). If a variable is shared
2727
across multiple components, either create more variables or just drop the "{component}-"
@@ -33,114 +33,115 @@
3333
color of that hue.
3434
*/
3535
.lh-vars {
36-
--report-font-family: Roboto, Helvetica, Arial, sans-serif;
37-
--report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
38-
--report-background-color: #fff;
39-
--report-text-color: var(--color-gray-900);
40-
--report-font-size: 16px;
41-
--report-line-height: 24px;
42-
--snippet-color: var(--color-gray-800);
43-
--category-header-font-size: 20px;
44-
--header-line-height: 24px;
45-
--audit-explanation-line-height: 16px;
46-
--default-padding: 12px;
47-
--footer-padding-vertical: 16px;
48-
--audit-margin-horizontal: 5px;
49-
--stackpack-padding-horizontal: 10px;
50-
--report-text-color-secondary: var(--color-gray-800);
51-
--color-informative: var(--color-blue-900);
52-
--snippet-background-color: var(--color-gray-50);
53-
--report-border-color-secondary: #ebebeb;
54-
--chevron-line-stroke: var(--color-gray-600);
55-
--report-width: calc(60 * var(--report-font-size));
56-
--report-min-width: 400px;
57-
--score-icon-background-size: 24px;
58-
--tools-icon-size: var(--score-icon-background-size);
59-
--tools-icon-color: var(--color-gray-600);
60-
--table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
61-
--sparkline-height: 5px;
62-
--audit-padding-vertical: 8px;
63-
--audit-group-padding-vertical: 8px;
64-
--section-padding-vertical: 12px;
65-
--chevron-size: 12px;
66-
--audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));
67-
6836
/* Palette using Material Design Colors
6937
* https://www.materialui.co/colors */
70-
--color-gray-50: #FAFAFA;
38+
--color-blue-200: #90CAF9;
39+
--color-blue-900: #0D47A1;
40+
--color-blue-A700: #2962FF;
41+
--color-cyan-500: #00BCD4;
7142
--color-gray-100: #F5F5F5;
7243
--color-gray-200: #E0E0E0;
7344
--color-gray-400: #BDBDBD;
45+
--color-gray-50: #FAFAFA;
7446
--color-gray-500: #9E9E9E;
7547
--color-gray-600: #757575;
7648
--color-gray-800: #424242;
7749
--color-gray-900: #212121;
7850
--color-gray: #000000;
79-
--color-blue-A700: #2962FF;
8051
--color-green-700: #018642;
8152
--color-green: #0CCE6B;
8253
--color-orange-700: #D04900;
8354
--color-orange: #FFA400;
8455
--color-red-700: #EB0F00;
8556
--color-red: #FF4E42;
86-
--color-white: #FFFFFF;
87-
--color-blue-200: #90CAF9;
88-
--color-blue-900: #0D47A1;
89-
--color-cyan-500: #00BCD4;
9057
--color-teal-600: #00897B;
58+
--color-white: #FFFFFF;
9159

60+
/* Context-specific colors */
61+
--color-average-secondary: var(--color-orange-700);
62+
--color-average: var(--color-orange);
63+
--color-fail-secondary: var(--color-red-700);
64+
--color-fail: var(--color-red);
65+
--color-informative: var(--color-blue-900);
66+
--color-pass-secondary: var(--color-green-700);
67+
--color-pass: var(--color-green);
68+
--color-hover: var(--color-gray-50);
69+
70+
/* Component variables */
71+
--audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));
72+
--audit-explanation-line-height: 16px;
9273
--audit-group-margin-bottom: 40px;
74+
--audit-group-padding-vertical: 8px;
75+
--audit-margin-horizontal: 5px;
76+
--audit-padding-vertical: 8px;
77+
--category-header-font-size: 20px;
78+
--category-padding: 40px;
79+
--chevron-line-stroke: var(--color-gray-600);
80+
--chevron-size: 12px;
81+
--default-padding: 12px;
9382
--env-item-background-color: var(--color-gray-100);
94-
--env-name-min-width: 220px;
95-
--env-item-padding: 10px 0px;
9683
--env-item-font-size: 28px;
9784
--env-item-line-height: 36px;
98-
--metric-description-padding: 0 0 2px calc(var(--score-icon-margin-left) + var(--score-icon-size) + var(--score-icon-margin-right));
85+
--env-item-padding: 10px 0px;
86+
--env-name-min-width: 220px;
87+
--footer-padding-vertical: 16px;
9988
--gauge-circle-size-big: 112px;
10089
--gauge-circle-size: 80px;
101-
--scores-container-padding: 20px 0 20px 0;
90+
--gauge-label-font-size-big: 28px;
91+
--gauge-label-font-size: 20px;
92+
--gauge-label-line-height-big: 36px;
93+
--gauge-label-line-height: 26px;
94+
--gauge-percentage-font-size-big: 38px;
95+
--gauge-percentage-font-size: 28px;
96+
--gauge-wrapper-width: 148px;
97+
--header-line-height: 24px;
98+
--highlighter-background-color: var(--report-text-color);
10299
--icon-square-size: calc(var(--score-icon-size) * 0.88);
100+
--metric-description-padding: 0 0 2px calc(var(--score-icon-margin-left) + var(--score-icon-size) + var(--score-icon-margin-right));
101+
--metric-toggle-lines-fill: #7F7F7F;
102+
--metrics-toggle-background-color: var(--color-gray-200);
103103
--plugin-badge-background-color: var(--color-white);
104104
--plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
105105
--plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
106106
--plugin-icon-size: 65%;
107107
--pwa-icon-margin: 0 6px 0 -2px;
108108
--pwa-icon-size: var(--topbar-logo-size);
109+
--report-background-color: #fff;
110+
--report-border-color-secondary: #ebebeb;
111+
--report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
112+
--report-font-family: Roboto, Helvetica, Arial, sans-serif;
113+
--report-font-size: 16px;
114+
--report-line-height: 24px;
115+
--report-min-width: 400px;
116+
--report-text-color-secondary: var(--color-gray-800);
117+
--report-text-color: var(--color-gray-900);
118+
--report-width: calc(60 * var(--report-font-size));
109119
--score-container-padding: 8px;
110-
--gauge-wrapper-width: 148px;
111-
--gauge-percentage-font-size-big: 38px;
112-
--gauge-percentage-font-size: 28px;
120+
--score-icon-background-size: 24px;
113121
--score-icon-margin-left: 4px;
114122
--score-icon-margin-right: 12px;
115123
--score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
116124
--score-icon-size: 12px;
117-
--gauge-label-font-size-big: 28px;
118-
--gauge-label-font-size: 20px;
119-
--gauge-label-line-height-big: 36px;
120-
--gauge-label-line-height: 26px;
125+
--scores-container-padding: 20px 0 20px 0;
121126
--scorescale-height: 6px;
122127
--scorescale-width: 18px;
123-
--category-padding: 40px;
128+
--section-padding-vertical: 12px;
129+
--snippet-background-color: var(--color-gray-50);
130+
--snippet-color: var(--color-gray-800);
131+
--sparkline-height: 5px;
132+
--stackpack-padding-horizontal: 10px;
133+
--sticky-header-background-color: var(--report-background-color);
134+
--table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
135+
--tools-icon-color: var(--color-gray-600);
136+
--tools-icon-size: var(--score-icon-background-size);
124137
--topbar-background-color: var(--color-gray-100);
125138
--topbar-height: 32px;
126139
--topbar-logo-size: 24px;
127140
--topbar-padding: 0 8px;
128-
--metrics-toggle-background-color: var(--color-gray-200);
129-
130-
--color-average-secondary: var(--color-orange-700);
131-
--color-average: var(--color-orange);
132-
--color-fail-secondary: var(--color-red-700);
133-
--color-fail: var(--color-red);
134-
--color-pass-secondary: var(--color-green-700);
135-
--color-pass: var(--color-green);
136-
--sticky-header-background-color: var(--report-background-color);
137-
--highlighter-background-color: var(--report-text-color);
138141

139-
--color-hover: #FAFAFA;
140-
--metric-toggle-lines-fill: #7F7F7F;
141-
142-
--plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23757575"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
142+
/* SVGs */
143143
--plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
144+
--plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23757575"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
144145

145146
--pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>check</title><path fill="%23178239" d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/></svg>');
146147
--average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="%23E67700" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>');
@@ -161,32 +162,31 @@
161162

162163
@media not print {
163164
.lh-vars.dark {
164-
--color-red-700: var(--color-red);
165-
--color-green-700: var(--color-green);
166-
--color-teal-600: var(--color-cyan-500);
167-
--color-orange-700: var(--color-orange);
168-
165+
/* Pallete */
169166
--color-gray-200: var(--color-gray-800);
170167
--color-gray-400: var(--color-gray-600);
168+
--color-gray-50: #757575;
171169
--color-gray-600: var(--color-gray-500);
170+
--color-green-700: var(--color-green);
171+
--color-orange-700: var(--color-orange);
172+
--color-red-700: var(--color-red);
173+
--color-teal-600: var(--color-cyan-500);
172174

173-
--topbar-background-color: var(--color-gray);
174-
--plugin-badge-background-color: var(--color-gray-800);
175-
--env-item-background-color: var(--color-gray);
176-
--report-border-color-secondary: var(--color-gray-200);
175+
/* Context-specific colors */
176+
--color-hover: rgba(0, 0, 0, 0.2);
177+
--color-informative: var(--color-blue-200);
177178

179+
/* Component variables */
180+
--env-item-background-color: var(--color-gray);
181+
--plugin-badge-background-color: var(--color-gray-800);
178182
--report-background-color: var(--color-gray-900);
179-
--report-text-color: var(--color-gray-100);
183+
--report-border-color-secondary: var(--color-gray-200);
180184
--report-text-color-secondary: var(--color-gray-400);
185+
--report-text-color: var(--color-gray-100);
186+
--topbar-background-color: var(--color-gray);
181187

188+
/* SVGs */
182189
--plugin-icon-url: var(--plugin-icon-url-dark);
183-
184-
--color-informative: var(--color-blue-200);
185-
186-
--color-gray-50: #757575;
187-
188-
--color-hover: rgba(0, 0, 0, 0.2);
189-
190190
--pwa-fast-reliable-gray-url: var(--pwa-fast-reliable-gray-url-dark);
191191
--pwa-installable-gray-url: var(--pwa-installable-gray-url-dark);
192192
--pwa-optimized-gray-url: var(--pwa-optimized-gray-url-dark);
@@ -196,24 +196,24 @@
196196
@media only screen and (max-width: 480px) {
197197
.lh-vars {
198198
--audit-group-margin-bottom: 20px;
199-
--report-font-size: 14px;
200-
--report-line-height: 20px;
199+
--category-padding: 24px;
201200
--env-name-min-width: 120px;
202201
--gauge-circle-size-big: 96px;
203202
--gauge-circle-size: 72px;
203+
--gauge-label-font-size-big: 22px;
204+
--gauge-label-font-size: 14px;
205+
--gauge-label-line-height-big: 26px;
206+
--gauge-label-line-height: 20px;
207+
--gauge-percentage-font-size-big: 34px;
208+
--gauge-percentage-font-size: 26px;
209+
--gauge-wrapper-width: 112px;
204210
--header-padding: 16px 0 16px 0;
205211
--plugin-icon-size: 75%;
206212
--pwa-icon-margin: 0 7px 0 -3px;
207-
--gauge-wrapper-width: 112px;
208-
--gauge-percentage-font-size-big: 34px;
209-
--gauge-percentage-font-size: 26px;
213+
--report-font-size: 14px;
214+
--report-line-height: 20px;
210215
--score-icon-margin-left: 2px;
211216
--score-icon-size: 10px;
212-
--gauge-label-font-size-big: 22px;
213-
--gauge-label-font-size: 14px;
214-
--gauge-label-line-height-big: 26px;
215-
--gauge-label-line-height: 20px;
216-
--category-padding: 24px;
217217
--topbar-height: 28px;
218218
--topbar-logo-size: 20px;
219219
}
@@ -225,37 +225,34 @@
225225
}
226226

227227
.lh-vars.lh-devtools {
228-
--report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
229-
--report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
230-
--report-font-size: 12px;
231-
--report-line-height: 20px;
232-
--category-header-font-size: 16px;
233-
--header-line-height: 20px;
234228
--audit-explanation-line-height: 14px;
235-
--default-padding: 12px;
229+
--audit-group-margin-bottom: 20px;
230+
--audit-group-padding-vertical: 12px;
231+
--audit-padding-vertical: 4px;
232+
--category-header-font-size: 16px;
236233
--category-padding: 12px;
234+
--default-padding: 12px;
235+
--env-name-min-width: 120px;
237236
--footer-padding-vertical: 8px;
238-
239237
--gauge-circle-size-big: 72px;
240238
--gauge-circle-size: 64px;
241-
242-
--audit-group-margin-bottom: 20px;
243-
--env-name-min-width: 120px;
239+
--gauge-label-font-size-big: 22px;
240+
--gauge-label-font-size: 14px;
241+
--gauge-label-line-height-big: 26px;
242+
--gauge-label-line-height: 20px;
243+
--gauge-percentage-font-size-big: 34px;
244+
--gauge-percentage-font-size: 26px;
245+
--gauge-wrapper-width: 97px;
246+
--header-line-height: 20px;
244247
--header-padding: 16px 0 16px 0;
245248
--plugin-icon-size: 75%;
246249
--pwa-icon-margin: 0 7px 0 -3px;
247-
--gauge-wrapper-width: 97px;
248-
--gauge-percentage-font-size-big: 34px;
249-
--gauge-percentage-font-size: 26px;
250+
--report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
251+
--report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
252+
--report-font-size: 12px;
253+
--report-line-height: 20px;
250254
--score-icon-margin-left: 2px;
251255
--score-icon-size: 10px;
252-
--gauge-label-font-size-big: 22px;
253-
--gauge-label-font-size: 14px;
254-
--gauge-label-line-height-big: 26px;
255-
--gauge-label-line-height: 20px;
256-
257-
--audit-padding-vertical: 4px;
258-
--audit-group-padding-vertical: 12px;
259256
--section-padding-vertical: 8px;
260257
}
261258

0 commit comments

Comments
 (0)