feat(create-vite): use framework brand glow color (#8539)

vitejs · Jun 11, 2022 · 3a21a5e · 3a21a5e
1 parent 8447414
commit 3a21a5e
Show file tree

Hide file tree

Showing 20 changed files with 80 additions and 36 deletions.
diff --git a/packages/create-vite/template-lit-ts/package.json b/packages/create-vite/template-lit-ts/package.json
@@ -3,9 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "main": "dist/my-element.es.mjs",
+  "main": "dist/my-element.es.js",
   "exports": {
-    ".": "./dist/my-element.es.mjs"
+    ".": "./dist/my-element.es.js"
   },
   "types": "types/my-element.d.ts",
   "files": [

diff --git a/packages/create-vite/template-lit-ts/src/my-element.ts b/packages/create-vite/template-lit-ts/src/my-element.ts
@@ -26,12 +26,12 @@ export class MyElement extends LitElement {
   render() {
     return html`
       <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>
+        <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 lit" alt="Lit logo" />
+        </a>
       </div>
       <slot></slot>
       <div class="card">
@@ -63,6 +63,9 @@ export class MyElement extends LitElement {
     .logo:hover {
       filter: drop-shadow(0 0 2em #646cffaa);
     }
+    .logo.lit:hover {
+      filter: drop-shadow(0 0 2em #325cffaa);
+    }
 
     .card {
       padding: 2em;

diff --git a/packages/create-vite/template-lit/package.json b/packages/create-vite/template-lit/package.json
@@ -3,9 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "main": "dist/my-element.es.mjs",
+  "main": "dist/my-element.es.js",
   "exports": {
-    ".": "./dist/my-element.es.mjs"
+    ".": "./dist/my-element.es.js"
   },
   "files": [
     "dist"

diff --git a/packages/create-vite/template-lit/src/my-element.js b/packages/create-vite/template-lit/src/my-element.js
@@ -32,12 +32,12 @@ export class MyElement extends LitElement {
   render() {
     return html`
       <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>
+        <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 lit" alt="Lit logo" />
+        </a>
       </div>
       <slot></slot>
       <div class="card">
@@ -70,6 +70,9 @@ export class MyElement extends LitElement {
       .logo:hover {
         filter: drop-shadow(0 0 2em #646cffaa);
       }
+      .logo.lit:hover {
+        filter: drop-shadow(0 0 2em #325cffaa);
+      }
 
       .card {
         padding: 2em;

diff --git a/packages/create-vite/template-preact-ts/src/app.css b/packages/create-vite/template-preact-ts/src/app.css
@@ -12,6 +12,9 @@
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
 
 .card {
   padding: 2em;

diff --git a/packages/create-vite/template-preact-ts/src/app.tsx b/packages/create-vite/template-preact-ts/src/app.tsx
@@ -13,7 +13,7 @@ export function App() {
           <img src={viteLogo} class="logo" alt="Vite logo" />
         </a>
         <a href="https://preactjs.com" target="_blank">
-          <img src={preactLogo} class="logo" alt="Preact logo" />
+          <img src={preactLogo} class="logo preact" alt="Preact logo" />
         </a>
       </div>
       <h1>Vite + Preact</h1>

diff --git a/packages/create-vite/template-preact/src/app.css b/packages/create-vite/template-preact/src/app.css
@@ -12,6 +12,9 @@
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
 
 .card {
   padding: 2em;

diff --git a/packages/create-vite/template-preact/src/app.jsx b/packages/create-vite/template-preact/src/app.jsx
@@ -13,7 +13,7 @@ export function App() {
           <img src={viteLogo} class="logo" alt="Vite logo" />
         </a>
         <a href="https://preactjs.com" target="_blank">
-          <img src={preactLogo} class="logo" alt="Preact logo" />
+          <img src={preactLogo} class="logo preact" alt="Preact logo" />
         </a>
       </div>
       <h1>Vite + Preact</h1>

diff --git a/packages/create-vite/template-react-ts/src/App.css b/packages/create-vite/template-react-ts/src/App.css
@@ -13,6 +13,9 @@
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
 
 @keyframes logo-spin {
   from {

diff --git a/packages/create-vite/template-react-ts/src/App.tsx b/packages/create-vite/template-react-ts/src/App.tsx
@@ -13,7 +13,7 @@ function App() {
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
         <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo" alt="React logo" />
+          <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
       <h1>Vite + React</h1>

diff --git a/packages/create-vite/template-react/src/App.css b/packages/create-vite/template-react/src/App.css
@@ -13,6 +13,9 @@
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
 
 @keyframes logo-spin {
   from {

diff --git a/packages/create-vite/template-react/src/App.jsx b/packages/create-vite/template-react/src/App.jsx
@@ -13,7 +13,7 @@ function App() {
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
         <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo" alt="React logo" />
+          <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
       <h1>Vite + React</h1>

diff --git a/packages/create-vite/template-svelte-ts/src/App.svelte b/packages/create-vite/template-svelte-ts/src/App.svelte
@@ -7,10 +7,10 @@
 <main>
   <div>
     <a href="https://vitejs.dev" target="_blank"> 
-      <img src={viteLogo} alt="Vite Logo" />
+      <img src={viteLogo} class="logo" alt="Vite Logo" />
     </a>
     <a href="https://svelte.dev" target="_blank"> 
-      <img src={svelteLogo} alt="Svelte Logo" />
+      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
     </a>
   </div>
   <h1>Vite + Svelte</h1>
@@ -29,14 +29,17 @@
 </main>
 
 <style>
-  img {
+  .logo {
     height: 6em;
     padding: 1.5em;
     will-change: filter;
   }
-  img:hover {
+  .logo:hover {
     filter: drop-shadow(0 0 2em #646cffaa);
   }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
   .read-the-docs {
     color: #888;
   }

diff --git a/packages/create-vite/template-svelte/src/App.svelte b/packages/create-vite/template-svelte/src/App.svelte
@@ -7,10 +7,10 @@
 <main>
   <div>
     <a href="https://vitejs.dev" target="_blank"> 
-      <img src={viteLogo} alt="Vite Logo" />
+      <img src={viteLogo} class="logo" alt="Vite Logo" />
     </a>
     <a href="https://svelte.dev" target="_blank"> 
-      <img src={svelteLogo} alt="Svelte Logo" />
+      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
     </a>
   </div>
   <h1>Vite + Svelte</h1>
@@ -29,14 +29,17 @@
 </main>
 
 <style>
-  img {
+  .logo {
     height: 6em;
     padding: 1.5em;
     will-change: filter;
   }
-  img:hover {
+  .logo:hover {
     filter: drop-shadow(0 0 2em #646cffaa);
   }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
   .read-the-docs {
     color: #888;
   }

diff --git a/packages/create-vite/template-vanilla-ts/src/main.ts b/packages/create-vite/template-vanilla-ts/src/main.ts
@@ -5,8 +5,12 @@ import { setupCounter } from './counter'
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <div>
-    <a href="https://vitejs.dev" target="_blank"><img class="logo" alt="Vite logo" src="${viteLogo}" /></a>
-    <a href="https://www.typescriptlang.org/" target="_blank"><img class="logo" alt="TypeScript logo" src="${typescriptLogo}" /></a>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
     <h1>Vite + TypeScript</h1>
     <div class="card">
       <button id="counter" type="button"></button>

diff --git a/packages/create-vite/template-vanilla-ts/src/style.css b/packages/create-vite/template-vanilla-ts/src/style.css
@@ -52,6 +52,9 @@ h1 {
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #f7df1eaa);
+}
 
 .card {
   padding: 2em;

diff --git a/packages/create-vite/template-vanilla/main.js b/packages/create-vite/template-vanilla/main.js
@@ -5,8 +5,12 @@ import { setupCounter } from './counter.js'
 
 document.querySelector('#app').innerHTML = `
   <div>
-    <a href="https://vitejs.dev" target="_blank"><img class="logo" alt="Vite logo" src="${viteLogo}" /></a>
-    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><img class="logo" alt="JavaScript logo" src="${javascriptLogo}" /></a>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
     <h1>Hello Vite!</h1>
     <div class="card">
       <button id="counter" type="button"></button>

diff --git a/packages/create-vite/template-vanilla/style.css b/packages/create-vite/template-vanilla/style.css
@@ -52,6 +52,9 @@ h1 {
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #f7df1eaa);
+}
 
 .card {
   padding: 2em;

diff --git a/packages/create-vite/template-vue-ts/src/App.vue b/packages/create-vite/template-vue-ts/src/App.vue
@@ -7,10 +7,10 @@ import HelloWorld from './components/HelloWorld.vue'
 <template>
   <div>
     <a href="https://vitejs.dev" target="_blank">
-      <img class="logo" alt="Vite logo" src="/vite.svg" />
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
     </a>
     <a href="https://vuejs.org/" target="_blank">
-      <img class="logo" alt="Vue logo" src="./assets/vue.svg" />
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
   <HelloWorld msg="Vite + Vue" />
@@ -25,4 +25,7 @@ import HelloWorld from './components/HelloWorld.vue'
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
 </style>
diff --git a/packages/create-vite/template-vue/src/App.vue b/packages/create-vite/template-vue/src/App.vue
@@ -7,10 +7,10 @@ import HelloWorld from './components/HelloWorld.vue'
 <template>
   <div>
     <a href="https://vitejs.dev" target="_blank">
-      <img class="logo" alt="Vite logo" src="/vite.svg" />
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
     </a>
     <a href="https://vuejs.org/" target="_blank">
-      <img class="logo" alt="Vue logo" src="./assets/vue.svg" />
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
   <HelloWorld msg="Vite + Vue" />
@@ -25,4 +25,7 @@ import HelloWorld from './components/HelloWorld.vue'
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
 </style>