Skip to content

Commit d72b3dd

Browse files
patak-devsapphi-redtony19
authored
feat(create-vite): align template styles with docs (#8478)
Co-authored-by: 翠 / green <[email protected]> Co-authored-by: Tony Trinh <[email protected]>
1 parent 408e5a7 commit d72b3dd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

93 files changed

+1391
-694
lines changed

‎packages/create-vite/template-lit-ts/index.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Lit App</title>
7+
<title>Vite + Lit + TS</title>
8+
<link rel="stylesheet" href="./src/index.css" />
89
<script type="module" src="/src/my-element.ts"></script>
910
</head>
1011
<body>
1112
<my-element>
12-
<p>This is child content</p>
13+
<h1>Vite + Lit</h1>
1314
</my-element>
1415
</body>
1516
</html>

‎packages/create-vite/template-lit-ts/public/vite.svg

+1
Loading

‎packages/create-vite/template-lit-ts/src/assets/lit.svg

+1
Loading

‎packages/create-vite/template-lit-ts/src/favicon.svg

-15
This file was deleted.

‎packages/create-vite/template-lit-ts/src/index.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
a {
19+
font-weight: 500;
20+
color: #646cff;
21+
text-decoration: inherit;
22+
}
23+
a:hover {
24+
color: #535bf2;
25+
}
26+
27+
body {
28+
margin: 0;
29+
display: flex;
30+
place-items: center;
31+
min-width: 320px;
32+
min-height: 100vh;
33+
}
34+
35+
@media (prefers-color-scheme: light) {
36+
:root {
37+
color: #213547;
38+
background-color: #ffffff;
39+
}
40+
}

‎packages/create-vite/template-lit-ts/src/my-element.ts

+83-18
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { html, css, LitElement } from 'lit'
22
import { customElement, property } from 'lit/decorators.js'
3+
import viteLogo from '/vite.svg'
4+
import litLogo from './assets/lit.svg'
35

46
/**
57
* An example element.
@@ -9,20 +11,11 @@ import { customElement, property } from 'lit/decorators.js'
911
*/
1012
@customElement('my-element')
1113
export class MyElement extends LitElement {
12-
static styles = css`
13-
:host {
14-
display: block;
15-
border: solid 1px gray;
16-
padding: 16px;
17-
max-width: 800px;
18-
}
19-
`
20-
2114
/**
22-
* The name to say "Hello" to.
15+
* Copy for the read the docs hint.
2316
*/
2417
@property()
25-
name = 'World'
18+
docsHint = 'Click on the Vite and Lit logos to learn more'
2619

2720
/**
2821
* The number of times the button has been clicked.
@@ -32,21 +25,93 @@ export class MyElement extends LitElement {
3225

3326
render() {
3427
return html`
35-
<h1>Hello, ${this.name}!</h1>
36-
<button @click=${this._onClick} part="button">
37-
Click Count: ${this.count}
38-
</button>
28+
<div>
29+
<a href="https://vitejs.dev" target="_blank"
30+
><img src="${viteLogo}" class="logo" alt="Vite logo"
31+
/></a>
32+
<a href="https://lit.dev" target="_blank"
33+
><img src=${litLogo} class="logo" alt="Lit logo"
34+
/></a>
35+
</div>
3936
<slot></slot>
37+
<div class="card">
38+
<button @click=${this._onClick} part="button">
39+
count is ${this.count}
40+
</button>
41+
</div>
42+
<p class="read-the-docs">${this.docsHint}</p>
4043
`
4144
}
4245

4346
private _onClick() {
4447
this.count++
4548
}
4649

47-
foo(): string {
48-
return 'foo'
49-
}
50+
static styles = css`
51+
:host {
52+
max-width: 1280px;
53+
margin: 0 auto;
54+
padding: 2rem;
55+
text-align: center;
56+
}
57+
58+
.logo {
59+
height: 6em;
60+
padding: 1.5em;
61+
}
62+
.logo:hover {
63+
filter: drop-shadow(0 0 2em #646cffaa);
64+
}
65+
66+
.card {
67+
padding: 2em;
68+
}
69+
70+
.read-the-docs {
71+
color: #888;
72+
}
73+
74+
h1 {
75+
font-size: 3.2em;
76+
}
77+
78+
a {
79+
font-weight: 500;
80+
color: #646cff;
81+
text-decoration: inherit;
82+
}
83+
a:hover {
84+
color: #535bf2;
85+
}
86+
87+
button {
88+
border-radius: 8px;
89+
border: 1px solid transparent;
90+
padding: 0.6em 1.2em;
91+
font-size: 1em;
92+
font-weight: 500;
93+
font-family: inherit;
94+
background-color: #1a1a1a;
95+
cursor: pointer;
96+
transition: border-color 0.25s;
97+
}
98+
button:hover {
99+
border-color: #646cff;
100+
}
101+
button:focus,
102+
button:focus-visible {
103+
outline: 4px auto -webkit-focus-ring-color;
104+
}
105+
106+
@media (prefers-color-scheme: light) {
107+
a:hover {
108+
color: #747bff;
109+
}
110+
button {
111+
background-color: #f9f9f9;
112+
}
113+
}
114+
`
50115
}
51116

52117
declare global {

‎packages/create-vite/template-lit/index.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Lit App</title>
7+
<title>Vite + Lit</title>
8+
<link rel="stylesheet" href="./src/index.css" />
89
<script type="module" src="/src/my-element.js"></script>
910
</head>
1011
<body>
1112
<my-element>
12-
<p>This is child content</p>
13+
<h1>Vite + Lit</h1>
1314
</my-element>
1415
</body>
1516
</html>

‎packages/create-vite/template-lit/public/vite.svg

+1
Loading

‎packages/create-vite/template-lit/src/assets/lit.svg

+1
Loading

‎packages/create-vite/template-lit/src/favicon.svg

-15
This file was deleted.

‎packages/create-vite/template-lit/src/index.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
body {
19+
margin: 0;
20+
display: flex;
21+
place-items: center;
22+
min-width: 320px;
23+
min-height: 100vh;
24+
}
25+
26+
@media (prefers-color-scheme: light) {
27+
:root {
28+
color: #213547;
29+
background-color: #ffffff;
30+
}
31+
}

0 commit comments

Comments
 (0)