Commit dbd89b4c authored by Esmael El-Moslimany's avatar Esmael El-Moslimany Committed by Commit Bot

WebUI: typography style refresh

Bug: 849857
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ia153c02e3f88c27a430c50cc85b2f3906f1b9c32
Reviewed-on: https://chromium-review.googlesource.com/1102189
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: default avatarScott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568958}
parent f3af0cc5
......@@ -14,8 +14,8 @@
--iron-icon-height: 20px;
--iron-icon-width: 20px;
--min-sidebar-width: 256px;
--primary-text-color: var(--paper-grey-900);
--secondary-text-color: var(--paper-grey-600);
--primary-text-color: var(--google-grey-900);
--secondary-text-color: var(--google-grey-700);
--splitter-width: 15px;
}
</style>
......
......@@ -34,9 +34,12 @@
#date {
color: var(--paper-grey-700);
font-size: 100%;
font-weight: 500;
font-size: 123%;
font-weight: 400;
letter-spacing: .25px;
margin: 24px auto 10px;
padding-bottom: 4px;
padding-top: 8px;
width: var(--downloads-card-width);
}
......
......@@ -118,9 +118,7 @@
#extension-id,
#inspect-views,
#button-strip {
/* TODO(dschuyler): use --cr-secondary-text. */
color: var(--paper-grey-600);
font-weight: 400;
@apply --cr-secondary-text;
}
#extension-id {
......
......@@ -54,8 +54,13 @@
#app-title {
@apply --cr-section-text;
font-size: 123%;
font-weight: 400;
letter-spacing: .25px;
margin-bottom: 12px;
margin-top: 21px;
padding-bottom: 4px;
padding-top: 8px;
}
</style>
<div id="container">
......
......@@ -56,6 +56,7 @@
background: var(--md-toolbar-color);
color: #fff;
height: 56px;
letter-spacing: .25px;
}
#loading-message {
......
......@@ -41,6 +41,11 @@
:host([is-card-start]) #date-accessed {
display: block;
font-size: 123%;
font-weight: 400;
letter-spacing: .25px;
padding-bottom: 4px;
padding-top: 8px;
}
#item-container {
......
......@@ -26,8 +26,8 @@
--iron-icon-height: var(--cr-icon-size);
--iron-icon-width: var(--cr-icon-size);
--link-color: var(--google-blue-700);
--primary-text-color: var(--paper-grey-900);
--secondary-text-color: var(--paper-grey-600);
--primary-text-color: var(--google-grey-900);
--secondary-text-color: var(--google-grey-700);
--separator-color: rgba(0, 0, 0, 0.08);
--side-bar-width: 256px;
--sidebar-footer-text-color: #6e6e6e;
......
......@@ -7,7 +7,7 @@
:root {
--error-color: var(--google-red-700);
--page-width: 624px;
--primary-text-color: var(--paper-grey-800);
--primary-text-color: var(--google-grey-900);
--title-icon-color: var(--paper-grey-500);
--user-manager-separator-line: 1px solid rgba(0, 0, 0, .12);
}
......
......@@ -5,7 +5,7 @@
<custom-style>
<style is="custom-style">
html {
--primary-text-color: var(--paper-grey-900);
--primary-text-color: var(--google-grey-900);
--iron-icon-height: 20px;
--iron-icon-width: 20px;
--paper-icon-button: {
......
......@@ -21,8 +21,13 @@
#header .title {
@apply --cr-section-text;
font-size: 123%;
font-weight: 400;
letter-spacing: .25px;
margin-bottom: 0;
margin-top: var(--settings-page-vertical-margin);
padding-bottom: 4px;
padding-top: 8px;
}
#card {
......
......@@ -47,6 +47,7 @@
}
h1 {
color: var(--google-grey-700);
flex: 1; /* Push other items to the end. */
@apply --cr-title-text;
}
......
......@@ -20,7 +20,7 @@
h2 {
align-items: center;
align-self: flex-start;
color: var(--paper-grey-600);
color: var(--google-grey-900);
display: flex;
font-size: inherit;
font-weight: 500;
......@@ -322,7 +322,7 @@
}
.column-header {
color: var(--paper-grey-600);
color: var(--google-grey-600);
font-weight: 500;
}
......
......@@ -2,6 +2,7 @@
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/default-theme.html">
......@@ -60,6 +61,7 @@
:host ::slotted([slot=body]) {
-webkit-padding-end: 20px;
-webkit-padding-start: 20px;
color: var(--secondary-text-color);
padding-bottom: 0;
padding-top: 0;
@apply --cr-dialog-body;
......@@ -76,6 +78,7 @@
:host ::slotted([slot=title]) {
-webkit-padding-end: 20px;
-webkit-padding-start: 20px;
color: var(--primary-text-color);
flex: 1;
font-size: calc(15 / 13 * 100%);
line-height: 1;
......
......@@ -70,9 +70,7 @@
}
#subLabel {
/* TODO(dschuyler): replace with: @apply --cr-secondary-text; */
color: var(--paper-grey-600);
font-weight: 400;
@apply --cr-secondary-text;
}
</style>
<button disabled="[[disabled]]">
......
......@@ -25,6 +25,7 @@
flex: 1;
font-size: 123%;
font-weight: 400;
letter-spacing: .25px;
line-height: normal;
}
......
......@@ -6,6 +6,9 @@
<custom-style>
<style is="custom-style">
html {
--primary-text-color: var(--google-grey-900);
--secondary-text-color: var(--google-grey-700);
--cr-actionable: {
cursor: pointer;
};
......@@ -47,12 +50,12 @@
}
--cr-primary-text: {
color: var(--paper-grey-900);
color: var(--primary-text-color);
line-height: 154%; /* 20px. */
}
--cr-secondary-text: {
color: var(--paper-grey-600);
color: var(--secondary-text-color);
font-weight: 400;
}
......@@ -89,7 +92,7 @@
};
--cr-section-text: {
color: var(--paper-grey-700);
color: var(--google-grey-700);
font-size: 100%; /* Likely to be 13px. */
font-weight: 500;
};
......@@ -153,6 +156,7 @@
--google-grey-refresh-100: #F1F3F4;
--google-grey-200: #E8EAED;
--google-grey-400: #BDC1C6;
--google-grey-600: #80868B;
--google-grey-900: #202124;
--google-red-600: #D93025;
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment