Adding client code for new desktop First Run Experience.

chrome/browser/resources/welcome/welcome.css

Index: chrome/browser/resources/welcome/welcome.css
diff --git a/chrome/browser/resources/welcome/welcome.css b/chrome/browser/resources/welcome/welcome.css
new file mode 100644
index 0000000000000000000000000000000000000000..bd5501a2195b92a8259694f0dfe71b69a33a04f2
--- /dev/null
+++ b/chrome/browser/resources/welcome/welcome.css
@@ -0,0 +1,199 @@
+/* Copyright (c) 2016 The Chromium Authors. All rights reserved.

[Moe, 2016/08/19 17:10:52]

you can probably inline this entire file in welcome.html inside <style
is="custom-style">

[tmartino, 2016/08/19 20:11:29]

Is that the preferred way of doing it? It seemed like separating css/html/js
into their own files was more common,

[Moe, 2016/08/19 20:40:52]

you can keep the css in a separate file if you want to. but you'd have to have
something like welcome_css.html declare your style in <style is="custom-style">
and then import that in welcome.html. but no css files anymore.

[michaelpg, 2016/09/06 22:21:56]

That's only for Polymer components that need scoped CSS. For normal resources
(including the main HTML file for Polymer-based pages) sticking with .css is
probably best.

+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+* {
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  align-items: center;
+  box-sizing: border-box;
+  color: rgba(0,0,0,.87);

[Moe, 2016/08/19 17:10:52]

why color with opacity? is there no grey color close to this?

+  display: flex;
+  flex-direction: column;
+  font: 14px/24px Roboto, 'Helvetica Neue', 'Lucida Grande', sans-serif;

[Moe, 2016/08/19 17:10:52]

use chrome://resources/css/text_defaults_md.css if possible.

+  justify-content: center;
+  min-height: 100vh;
+  overflow-y: hidden;
+  padding: 16px;
+}
+
+a {
+  text-decoration: none;
+}
+
+
+@keyframes slideUpContent {
+  from {
+    transform: translateY(186px);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  to {
+    opacity: 0;
+  }
+}
+
+
+@keyframes fadeInAndSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(-1440deg);
+  }
+}
+
+@keyframes fadeInAndSlideDownShadow {
+  from {
+    opacity: .6;
+    top: 8px;
+  }
+}
+
+@keyframes scaleUp {
+  0% {
+    transform: scale(.8);
+  }
+}
+
+.spacer {
+  flex: 1;
+  max-height: 96px;
+}
+
+.content {
+  animation: slideUpContent 600ms 1.8s cubic-bezier(.4,.2,0,1) both;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 500px;
+  text-align: center;
+}
+
+.heading {
+  animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4,.2,0,1) both;
+  font-size: 34px;
+  letter-spacing: -.44px;
+  line-height: 40px;
+  margin-bottom: 12px;
+  margin-top: 56px;
+}
+
+.subheading {
+  animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4,.2,0,1) both;
+  color: rgba(0,0,0,.54);
+  font-size: 16px;
+}
+
+.logo {
+  animation: fadeIn 600ms both;
+  height: 96px;
+  margin: 0 auto;
+  position: relative;
+  width: 96px;
+}
+
+.logo-icon {
+  animation: scaleUp 600ms 500ms cubic-bezier(.5,-.5,0,2.25) both;
+  background: #fff;
+  border-radius: 50%;
+  height: 96px;
+  width: 96px;
+}
+
+.logo-bw,
+.logo-color {
+  animation: fadeIn 600ms 500ms both, spin 2.4s cubic-bezier(.4,.2,0,1) both;
+  left: -5px;
+  position: absolute;
+  top: -5px;
+  width: 106px;
+}
+
+.logo-bw {
+  -webkit-filter: grayscale(100%);
+}
+
+.logo-color {
+  animation: fadeIn 300ms 700ms both, spin 2.4s cubic-bezier(.4,.2,0,1) both;
+}
+
+.logo-shadow {
+  -webkit-filter: blur(16px);
+  animation: fadeInAndSlideDownShadow 300ms 600ms both;
+  background: rgba(0,0,0,.2);

[Moe, 2016/08/19 17:10:52]

space after commas

+  border-radius: 50%;
+  height: 96px;
+  position: absolute;
+  top: 16px;
+  width: 96px;
+  z-index: -1;
+}
+
+.signin {
+  animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4,.2,0,1) both;
+  margin-top: 48px;
+  text-align: left;
+}
+
+.signin-description {
+  margin: 0 auto;
+  max-width: 344px;
+}
+
+.signin-buttons {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin-top: 32px;
+}
+
+.action {
+  background: rgb(66, 133, 244);

[Moe, 2016/08/19 17:10:52]

is this a standard google color? you're expected to reuse colors in:
polymer/v1_0/components-chromium/paper-styles/color.html for the most part.

[tmartino, 2016/08/19 20:11:29]

Yeah, it is, it's Google Blue 500. I actually tried including that file, but I
wasn't able to get it to respect the variables for some reason. Is there
something I need to do other than
<link rel="import" href=[that url]> in the .html and background-color:
var(--google-blue-500) in the CSS? A JS helper or the like?

[Moe, 2016/08/19 20:40:52]

if these styles are in a <style is='custom-style'></style> and color.html is
imported before, the variables will be respected. Polymer has no way of
replacing these variables when they're used outside of Polymer world.

+  color: #fff;

[Moe, 2016/08/19 17:10:52]

white

+  font-size: 12px;

[Moe, 2016/08/19 17:10:52]

if your WebUI page is in the content area. it should be responsive to font size
changes. a fixed font size is probably a bad idea. look at c/b/r/settings for
ideas.

+  font-weight: 500;
+  line-height: 28px;
+  min-width: 32px;
+  padding: 0 16px;
+}
+
+.link {
+  color: rgb(51, 103, 214);
+  display: inline-block;
+  font-size: 12px;
+  line-height: 32px;
+  margin: 8px;
+  min-width: 56px;
+  text-align: center;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.watermark {
+  -webkit-mask-image: url(chrome://welcome/watermark.svg);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100%;
+  background: rgba(0,0,0,.24);

[Moe, 2016/08/19 17:10:52]

rgba(0, 0, 0, .24);

+  height: 24px;
+  margin-top: 48px;
+  width: 74px;
+}