Skip to content

Commit

Permalink
feat(create-vite): align template styles with docs (#8478)
Browse files Browse the repository at this point in the history
Co-authored-by: 翠 / green <green@sapphi.red>
Co-authored-by: Tony Trinh <tony19@gmail.com>
  • Loading branch information
3 people authored Jun 8, 2022
1 parent 408e5a7 commit d72b3dd
Show file tree
Hide file tree
Showing 93 changed files with 1,391 additions and 694 deletions.
7 changes: 4 additions & 3 deletions packages/create-vite/template-lit-ts/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions packages/create-vite/template-lit-ts/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/create-vite/template-lit-ts/src/assets/lit.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 0 additions & 15 deletions packages/create-vite/template-lit-ts/src/favicon.svg

This file was deleted.

40 changes: 40 additions & 0 deletions packages/create-vite/template-lit-ts/src/index.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
101 changes: 83 additions & 18 deletions packages/create-vite/template-lit-ts/src/my-element.ts
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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.
Expand All @@ -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 {
Expand Down
7 changes: 4 additions & 3 deletions packages/create-vite/template-lit/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions packages/create-vite/template-lit/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/create-vite/template-lit/src/assets/lit.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 0 additions & 15 deletions packages/create-vite/template-lit/src/favicon.svg

This file was deleted.

31 changes: 31 additions & 0 deletions packages/create-vite/template-lit/src/index.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit d72b3dd

Please sign in to comment.