pwa-builder · jgw96 · Aug 27, 2024 · Feb 28, 2024 · Mar 4, 2024 · Mar 13, 2024
diff --git a/apps/pwabuilder/src/script/components/app-file-input.ts b/apps/pwabuilder/src/script/components/app-file-input.ts
@@ -50,13 +50,12 @@ export class FileInput extends LitElement implements FileInputElement {
   render() {
     return html`
       <div>
-        <fast-button
-          class="file-button"
-          appearance="lightweight"
+        <sl-button
+          variant="secondary"
           @click=${this.clickModalInput}
         >
           ${this.buttonText}
-        </fast-button>
+        </sl-button>
         <input
           id="${ifDefined(this.inputId)}"
           class="file-input hidden"

diff --git a/apps/pwabuilder/src/script/pages/app-home.ts b/apps/pwabuilder/src/script/pages/app-home.ts
@@ -164,6 +164,9 @@ export class AppHome extends LitElement {
           display: flex;
           flex-direction: column;
         }
+        #input-box::part(input) {
+          -webkit-text-fill-color: var(--sl-input-color);
+        }
         #start-button {
           grid-area: 1 / 5 / auto / auto;
           width: 100%;

diff --git a/apps/pwabuilder/src/script/pages/image-generator.ts b/apps/pwabuilder/src/script/pages/image-generator.ts
@@ -86,11 +86,6 @@ export class ImageGenerator extends LitElement {
           font-size: 10px;
         }
 
-
-        app-file-input:hover {
-          cursor: pointer;
-        }
-
         sl-button {
           height: 24px;
           padding: 8px 0;
@@ -109,6 +104,11 @@ export class ImageGenerator extends LitElement {
           margin-top: 8px;
         }
 
+        #submit sl-button::part(base) {
+          background-color: var(--primary-color);
+          border-color: var(--primary-color);
+        }
+
         .background {
           background-color: var(--primary-color);
           color: var(--font-color);
@@ -229,7 +229,7 @@ export class ImageGenerator extends LitElement {
                 </div>
               </section>
               <section id="submit" class="form-bottom">
-                <sl-button id="generateButton" class="primary" ?disabled=${!this.generateEnabled || this.generating}
+                <sl-button id="generateButton" variant="primary" ?disabled=${!this.generateEnabled || this.generating}
                   @click=${this.generateZip}
                   ?loading=${this.generating}>
                   ${localeStrings.button.generate}

diff --git a/docs/index.html b/docs/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>PWABuilder Suite Documentation</title>
+    <title>PWABuilder Suite Documentation - test</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="description" content="Documentation for building great progressive web apps with the PWABuilder tooling suite.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
@@ -15,8 +15,8 @@
     <link rel="icon" href="/assets/icons/icon_24.png" type="image/png" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.75/dist/themes/light.css" />
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.75/dist/shoelace.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/dist/themes/light.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/shoelace-autoloader.js"></script>
 
     <link rel="stylesheet" href="styles/global.css"/>
     <link rel="stylesheet" href="styles/vs-prism.css" />

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -12,6 +12,7 @@
   "devDependencies": {
     "@types/node": "^20.4.2",
     "cpx": "^1.5.0",
-    "docsify-cli": "^4.4.4"
+    "docsify-cli": "^4.4.4",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/docs/styles/global.css b/docs/styles/global.css
@@ -118,13 +118,13 @@ sl-menu-item[checked]::part(base) {
     border:#ada6b4 1px solid;
 }
 
-sl-menu::part(base) {
+sl-menu {
     width: 100%;
     border-radius: 10px;
     background: linear-gradient(to right, #f9f4ff, #e7f6fa);
 }
 
-sl-menu-item::part(base):hover {
+sl-menu-item:hover::part(base), sl-menu-item:focus-within::part(base) {
     background: #4F3FB6;
     color: white;
     border: 1px solid white;
@@ -160,4 +160,18 @@ sl-alert::part(base) {
 
 sl-alert::part(icon) {
     color: #491576;
-}
+}
+
+/* Search Input */
+
+.sidebar .search input[type=search]::placeholder {
+    color: rgba(0, 0, 0, 0.886);
+}
+
+.sidebar .search .clear-button svg {
+    background: #4d4d4d;
+    border-radius: 50%;
+}
+
+/* sl-menu-item */
+