Skip to content

Commit 3a21a5e

Browse files
bluwybluwy
authored
feat(create-vite): use framework brand glow color (#8539)
1 parent 8447414 commit 3a21a5e

File tree

20 files changed

+80
-36
lines changed

20 files changed

+80
-36
lines changed

‎packages/create-vite/template-lit-ts/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
6-
"main": "dist/my-element.es.mjs",
6+
"main": "dist/my-element.es.js",
77
"exports": {
8-
".": "./dist/my-element.es.mjs"
8+
".": "./dist/my-element.es.js"
99
},
1010
"types": "types/my-element.d.ts",
1111
"files": [

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

+9-6
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ export class MyElement extends LitElement {
2626
render() {
2727
return html`
2828
<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>
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 lit" alt="Lit logo" />
34+
</a>
3535
</div>
3636
<slot></slot>
3737
<div class="card">
@@ -63,6 +63,9 @@ export class MyElement extends LitElement {
6363
.logo:hover {
6464
filter: drop-shadow(0 0 2em #646cffaa);
6565
}
66+
.logo.lit:hover {
67+
filter: drop-shadow(0 0 2em #325cffaa);
68+
}
6669
6770
.card {
6871
padding: 2em;

‎packages/create-vite/template-lit/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
6-
"main": "dist/my-element.es.mjs",
6+
"main": "dist/my-element.es.js",
77
"exports": {
8-
".": "./dist/my-element.es.mjs"
8+
".": "./dist/my-element.es.js"
99
},
1010
"files": [
1111
"dist"

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

+9-6
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@ export class MyElement extends LitElement {
3232
render() {
3333
return html`
3434
<div>
35-
<a href="https://vitejs.dev" target="_blank"
36-
><img src="${viteLogo}" class="logo" alt="Vite logo"
37-
/></a>
38-
<a href="https://lit.dev" target="_blank"
39-
><img src=${litLogo} class="logo" alt="Lit logo"
40-
/></a>
35+
<a href="https://vitejs.dev" target="_blank">
36+
<img src="${viteLogo}" class="logo" alt="Vite logo" />
37+
</a>
38+
<a href="https://lit.dev" target="_blank">
39+
<img src=${litLogo} class="logo lit" alt="Lit logo" />
40+
</a>
4141
</div>
4242
<slot></slot>
4343
<div class="card">
@@ -70,6 +70,9 @@ export class MyElement extends LitElement {
7070
.logo:hover {
7171
filter: drop-shadow(0 0 2em #646cffaa);
7272
}
73+
.logo.lit:hover {
74+
filter: drop-shadow(0 0 2em #325cffaa);
75+
}
7376
7477
.card {
7578
padding: 2em;

‎packages/create-vite/template-preact-ts/src/app.css

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
.logo:hover {
1313
filter: drop-shadow(0 0 2em #646cffaa);
1414
}
15+
.logo.preact:hover {
16+
filter: drop-shadow(0 0 2em #673ab8aa);
17+
}
1518

1619
.card {
1720
padding: 2em;

‎packages/create-vite/template-preact-ts/src/app.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function App() {
1313
<img src={viteLogo} class="logo" alt="Vite logo" />
1414
</a>
1515
<a href="https://preactjs.com" target="_blank">
16-
<img src={preactLogo} class="logo" alt="Preact logo" />
16+
<img src={preactLogo} class="logo preact" alt="Preact logo" />
1717
</a>
1818
</div>
1919
<h1>Vite + Preact</h1>

‎packages/create-vite/template-preact/src/app.css

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
.logo:hover {
1313
filter: drop-shadow(0 0 2em #646cffaa);
1414
}
15+
.logo.preact:hover {
16+
filter: drop-shadow(0 0 2em #673ab8aa);
17+
}
1518

1619
.card {
1720
padding: 2em;

‎packages/create-vite/template-preact/src/app.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function App() {
1313
<img src={viteLogo} class="logo" alt="Vite logo" />
1414
</a>
1515
<a href="https://preactjs.com" target="_blank">
16-
<img src={preactLogo} class="logo" alt="Preact logo" />
16+
<img src={preactLogo} class="logo preact" alt="Preact logo" />
1717
</a>
1818
</div>
1919
<h1>Vite + Preact</h1>

‎packages/create-vite/template-react-ts/src/App.css

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
.logo:hover {
1414
filter: drop-shadow(0 0 2em #646cffaa);
1515
}
16+
.logo.react:hover {
17+
filter: drop-shadow(0 0 2em #61dafbaa);
18+
}
1619

1720
@keyframes logo-spin {
1821
from {

‎packages/create-vite/template-react-ts/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function App() {
1313
<img src={viteLogo} className="logo" alt="Vite logo" />
1414
</a>
1515
<a href="https://reactjs.org" target="_blank">
16-
<img src={reactLogo} className="logo" alt="React logo" />
16+
<img src={reactLogo} className="logo react" alt="React logo" />
1717
</a>
1818
</div>
1919
<h1>Vite + React</h1>

‎packages/create-vite/template-react/src/App.css

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
.logo:hover {
1414
filter: drop-shadow(0 0 2em #646cffaa);
1515
}
16+
.logo.react:hover {
17+
filter: drop-shadow(0 0 2em #61dafbaa);
18+
}
1619

1720
@keyframes logo-spin {
1821
from {

‎packages/create-vite/template-react/src/App.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function App() {
1313
<img src={viteLogo} className="logo" alt="Vite logo" />
1414
</a>
1515
<a href="https://reactjs.org" target="_blank">
16-
<img src={reactLogo} className="logo" alt="React logo" />
16+
<img src={reactLogo} className="logo react" alt="React logo" />
1717
</a>
1818
</div>
1919
<h1>Vite + React</h1>

‎packages/create-vite/template-svelte-ts/src/App.svelte

+7-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<main>
88
<div>
99
<a href="https://vitejs.dev" target="_blank">
10-
<img src={viteLogo} alt="Vite Logo" />
10+
<img src={viteLogo} class="logo" alt="Vite Logo" />
1111
</a>
1212
<a href="https://svelte.dev" target="_blank">
13-
<img src={svelteLogo} alt="Svelte Logo" />
13+
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
1414
</a>
1515
</div>
1616
<h1>Vite + Svelte</h1>
@@ -29,14 +29,17 @@
2929
</main>
3030

3131
<style>
32-
img {
32+
.logo {
3333
height: 6em;
3434
padding: 1.5em;
3535
will-change: filter;
3636
}
37-
img:hover {
37+
.logo:hover {
3838
filter: drop-shadow(0 0 2em #646cffaa);
3939
}
40+
.logo.svelte:hover {
41+
filter: drop-shadow(0 0 2em #ff3e00aa);
42+
}
4043
.read-the-docs {
4144
color: #888;
4245
}

‎packages/create-vite/template-svelte/src/App.svelte

+7-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<main>
88
<div>
99
<a href="https://vitejs.dev" target="_blank">
10-
<img src={viteLogo} alt="Vite Logo" />
10+
<img src={viteLogo} class="logo" alt="Vite Logo" />
1111
</a>
1212
<a href="https://svelte.dev" target="_blank">
13-
<img src={svelteLogo} alt="Svelte Logo" />
13+
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
1414
</a>
1515
</div>
1616
<h1>Vite + Svelte</h1>
@@ -29,14 +29,17 @@
2929
</main>
3030

3131
<style>
32-
img {
32+
.logo {
3333
height: 6em;
3434
padding: 1.5em;
3535
will-change: filter;
3636
}
37-
img:hover {
37+
.logo:hover {
3838
filter: drop-shadow(0 0 2em #646cffaa);
3939
}
40+
.logo.svelte:hover {
41+
filter: drop-shadow(0 0 2em #ff3e00aa);
42+
}
4043
.read-the-docs {
4144
color: #888;
4245
}

‎packages/create-vite/template-vanilla-ts/src/main.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@ import { setupCounter } from './counter'
55

66
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
77
<div>
8-
<a href="https://vitejs.dev" target="_blank"><img class="logo" alt="Vite logo" src="${viteLogo}" /></a>
9-
<a href="https://www.typescriptlang.org/" target="_blank"><img class="logo" alt="TypeScript logo" src="${typescriptLogo}" /></a>
8+
<a href="https://vitejs.dev" target="_blank">
9+
<img src="${viteLogo}" class="logo" alt="Vite logo" />
10+
</a>
11+
<a href="https://www.typescriptlang.org/" target="_blank">
12+
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
13+
</a>
1014
<h1>Vite + TypeScript</h1>
1115
<div class="card">
1216
<button id="counter" type="button"></button>

‎packages/create-vite/template-vanilla-ts/src/style.css

+3
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ h1 {
5252
.logo:hover {
5353
filter: drop-shadow(0 0 2em #646cffaa);
5454
}
55+
.logo.vanilla:hover {
56+
filter: drop-shadow(0 0 2em #f7df1eaa);
57+
}
5558

5659
.card {
5760
padding: 2em;

‎packages/create-vite/template-vanilla/main.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@ import { setupCounter } from './counter.js'
55

66
document.querySelector('#app').innerHTML = `
77
<div>
8-
<a href="https://vitejs.dev" target="_blank"><img class="logo" alt="Vite logo" src="${viteLogo}" /></a>
9-
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><img class="logo" alt="JavaScript logo" src="${javascriptLogo}" /></a>
8+
<a href="https://vitejs.dev" target="_blank">
9+
<img src="${viteLogo}" class="logo" alt="Vite logo" />
10+
</a>
11+
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
12+
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
13+
</a>
1014
<h1>Hello Vite!</h1>
1115
<div class="card">
1216
<button id="counter" type="button"></button>

‎packages/create-vite/template-vanilla/style.css

+3
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ h1 {
5252
.logo:hover {
5353
filter: drop-shadow(0 0 2em #646cffaa);
5454
}
55+
.logo.vanilla:hover {
56+
filter: drop-shadow(0 0 2em #f7df1eaa);
57+
}
5558

5659
.card {
5760
padding: 2em;

‎packages/create-vite/template-vue-ts/src/App.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import HelloWorld from './components/HelloWorld.vue'
77
<template>
88
<div>
99
<a href="https://vitejs.dev" target="_blank">
10-
<img class="logo" alt="Vite logo" src="/vite.svg" />
10+
<img src="/vite.svg" class="logo" alt="Vite logo" />
1111
</a>
1212
<a href="https://vuejs.org/" target="_blank">
13-
<img class="logo" alt="Vue logo" src="./assets/vue.svg" />
13+
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
1414
</a>
1515
</div>
1616
<HelloWorld msg="Vite + Vue" />
@@ -25,4 +25,7 @@ import HelloWorld from './components/HelloWorld.vue'
2525
.logo:hover {
2626
filter: drop-shadow(0 0 2em #646cffaa);
2727
}
28+
.logo.vue:hover {
29+
filter: drop-shadow(0 0 2em #42b883aa);
30+
}
2831
</style>

‎packages/create-vite/template-vue/src/App.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import HelloWorld from './components/HelloWorld.vue'
77
<template>
88
<div>
99
<a href="https://vitejs.dev" target="_blank">
10-
<img class="logo" alt="Vite logo" src="/vite.svg" />
10+
<img src="/vite.svg" class="logo" alt="Vite logo" />
1111
</a>
1212
<a href="https://vuejs.org/" target="_blank">
13-
<img class="logo" alt="Vue logo" src="./assets/vue.svg" />
13+
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
1414
</a>
1515
</div>
1616
<HelloWorld msg="Vite + Vue" />
@@ -25,4 +25,7 @@ import HelloWorld from './components/HelloWorld.vue'
2525
.logo:hover {
2626
filter: drop-shadow(0 0 2em #646cffaa);
2727
}
28+
.logo.vue:hover {
29+
filter: drop-shadow(0 0 2em #42b883aa);
30+
}
2831
</style>

0 commit comments

Comments
 (0)