feat(create-vite): align template styles with docs (#8478)

Co-authored-by: 翠 / green <green@sapphi.red> Co-authored-by: Tony Trinh <tony19@gmail.com>
vitejs · Jun 8, 2022 · d72b3dd · d72b3dd
1 parent 408e5a7
commit d72b3dd
Show file tree

Hide file tree

Showing 93 changed files with 1,391 additions and 694 deletions.
diff --git a/packages/create-vite/template-lit-ts/index.html b/packages/create-vite/template-lit-ts/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Lit App</title>
+    <title>Vite + Lit + TS</title>
+    <link rel="stylesheet" href="./src/index.css" />
     <script type="module" src="/src/my-element.ts"></script>
   </head>
   <body>
     <my-element>
-      <p>This is child content</p>
+      <h1>Vite + Lit</h1>
     </my-element>
   </body>
 </html>
diff --git a/packages/create-vite/template-lit-ts/public/vite.svg b/packages/create-vite/template-lit-ts/public/vite.svg
diff --git a/packages/create-vite/template-lit-ts/src/assets/lit.svg b/packages/create-vite/template-lit-ts/src/assets/lit.svg
diff --git a/packages/create-vite/template-lit-ts/src/favicon.svg b/packages/create-vite/template-lit-ts/src/favicon.svg
diff --git a/packages/create-vite/template-lit-ts/src/index.css b/packages/create-vite/template-lit-ts/src/index.css
@@ -0,0 +1,40 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
diff --git a/packages/create-vite/template-lit-ts/src/my-element.ts b/packages/create-vite/template-lit-ts/src/my-element.ts
@@ -1,5 +1,7 @@
 import { html, css, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import viteLogo from '/vite.svg'
+import litLogo from './assets/lit.svg'
 
 /**
  * An example element.
@@ -9,20 +11,11 @@ import { customElement, property } from 'lit/decorators.js'
  */
 @customElement('my-element')
 export class MyElement extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      border: solid 1px gray;
-      padding: 16px;
-      max-width: 800px;
-    }
-  `
-
   /**
-   * The name to say "Hello" to.
+   * Copy for the read the docs hint.
    */
   @property()
-  name = 'World'
+  docsHint = 'Click on the Vite and Lit logos to learn more'
 
   /**
    * The number of times the button has been clicked.
@@ -32,21 +25,93 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-      <h1>Hello, ${this.name}!</h1>
-      <button @click=${this._onClick} part="button">
-        Click Count: ${this.count}
-      </button>
+      <div>
+        <a href="https://vitejs.dev" target="_blank"
+          ><img src="${viteLogo}" class="logo" alt="Vite logo"
+        /></a>
+        <a href="https://lit.dev" target="_blank"
+          ><img src=${litLogo} class="logo" alt="Lit logo"
+        /></a>
+      </div>
       <slot></slot>
+      <div class="card">
+        <button @click=${this._onClick} part="button">
+          count is ${this.count}
+        </button>
+      </div>
+      <p class="read-the-docs">${this.docsHint}</p>
     `
   }
 
   private _onClick() {
     this.count++
   }
 
-  foo(): string {
-    return 'foo'
-  }
+  static styles = css`
+    :host {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 2rem;
+      text-align: center;
+    }
+
+    .logo {
+      height: 6em;
+      padding: 1.5em;
+    }
+    .logo:hover {
+      filter: drop-shadow(0 0 2em #646cffaa);
+    }
+
+    .card {
+      padding: 2em;
+    }
+
+    .read-the-docs {
+      color: #888;
+    }
+
+    h1 {
+      font-size: 3.2em;
+    }
+
+    a {
+      font-weight: 500;
+      color: #646cff;
+      text-decoration: inherit;
+    }
+    a:hover {
+      color: #535bf2;
+    }
+
+    button {
+      border-radius: 8px;
+      border: 1px solid transparent;
+      padding: 0.6em 1.2em;
+      font-size: 1em;
+      font-weight: 500;
+      font-family: inherit;
+      background-color: #1a1a1a;
+      cursor: pointer;
+      transition: border-color 0.25s;
+    }
+    button:hover {
+      border-color: #646cff;
+    }
+    button:focus,
+    button:focus-visible {
+      outline: 4px auto -webkit-focus-ring-color;
+    }
+
+    @media (prefers-color-scheme: light) {
+      a:hover {
+        color: #747bff;
+      }
+      button {
+        background-color: #f9f9f9;
+      }
+    }
+  `
 }
 
 declare global {

diff --git a/packages/create-vite/template-lit/index.html b/packages/create-vite/template-lit/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Lit App</title>
+    <title>Vite + Lit</title>
+    <link rel="stylesheet" href="./src/index.css" />
     <script type="module" src="/src/my-element.js"></script>
   </head>
   <body>
     <my-element>
-      <p>This is child content</p>
+      <h1>Vite + Lit</h1>
     </my-element>
   </body>
 </html>
diff --git a/packages/create-vite/template-lit/public/vite.svg b/packages/create-vite/template-lit/public/vite.svg
diff --git a/packages/create-vite/template-lit/src/assets/lit.svg b/packages/create-vite/template-lit/src/assets/lit.svg
diff --git a/packages/create-vite/template-lit/src/favicon.svg b/packages/create-vite/template-lit/src/favicon.svg
diff --git a/packages/create-vite/template-lit/src/index.css b/packages/create-vite/template-lit/src/index.css
@@ -0,0 +1,31 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}