Giving developers control over the Windows Icon Background color option in the packaging form

apps/pwabuilder/package.json

@@ -24,7 +24,7 @@
     "@pwabuilder/manifest-editor": "file:../../components/manifest-editor",
     "@pwabuilder/manifest-validation": "file:../../libraries/manifest-validation",
     "@pwabuilder/site-analytics": "file:../../libraries/site-analytics",
-    "@shoelace-style/shoelace": "^2.0.0-beta.83",
+    "@shoelace-style/shoelace": "^2.2.0",
     "@vaadin/router": "^1.7.4",
     "browser-fs-access": "^0.23.0",
     "colorjs.io": "^0.4.0",

apps/pwabuilder/src/script/components/publish-pane.ts

@@ -75,9 +75,9 @@ export class PublishPane extends LitElement {
       title: 'Windows',
       factoids: [
         "PWAs can be indistinguishable from native apps on Windows",
-        "PWAs are first class applications.",
-        "Collect 100% of revenue generated via third party commerce platforms.",
-        "1B+ store enabled devices."
+        "PWAs are first class applications",
+        "Collect 100% of revenue generated via third party commerce platforms",
+        "1B+ store enabled devices"
       ],
       isActionCard: true,
       icon: '/assets/Publish_Windows.svg',
@@ -99,8 +99,8 @@ export class PublishPane extends LitElement {
       title: 'iOS',
       factoids: [
         "Leverage same codebase across all platforms",
-        "Large user base.",
-        "Premium devices."
+        "Large user base",
+        "Premium devices"
       ],
       isActionCard: true,
       icon: '/assets/Publish_Apple.svg',

apps/pwabuilder/src/script/components/test-publish-pane.ts

@@ -45,9 +45,9 @@ export class TestPublishPane extends LitElement {
       title: 'Windows',
       factoids: [
         "PWAs can be indistinguishable from native apps on Windows",
-        "PWAs are first class applications.",
-        "Collect 100% of revenue generated via third party commerce platforms.",
-        "1B+ store enabled devices."
+        "PWAs are first class applications",
+        "Collect 100% of revenue generated via third party commerce platforms",
+        "1B+ store enabled devices"
       ],
       isActionCard: true,
       icon: '/assets/Publish_Windows.svg',

apps/pwabuilder/src/script/components/windows-form.ts

@@ -17,6 +17,9 @@ import { ManifestContext, PackageOptions } from '../utils/interfaces';
 export class WindowsForm extends AppPackageFormBase {
   @property({ type: Boolean }) generating: boolean = false;
   @state() showAdvanced = false;
+  @state() customSelected = false;
+  @state() initialBgColor: string = '';
+  @state() currentSelectedColor: string = '';
   @state() packageOptions: WindowsPackageOptions = emptyWindowsPackageOptions();
   @state() activeLanguages: string[] = [];
   @state() activeLanguageCodes: string[] = [];
@@ -93,28 +96,38 @@ export class WindowsForm extends AppPackageFormBase {
           color: rgba(0,0,0,.5);
         }
 
+        #color-input-holder {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+
+        #color-input-holder p {
+          margin: 0;
+          color: var(--secondary-font-color);
+        }
+
         :host{
           --sl-focus-ring-width: 3px;
           --sl-input-focus-ring-color: #4f3fb670;
           --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
           --sl-input-border-color-focus: #4F3FB6ac;
+          --sl-input-font-size-small: 22px;
+
         }
 
-        #languageDrop::part(control){
+        #languageDrop::part(display-input){
           min-height: 40px;
         }
 
-        #languageDrop::part(tag__base){
-          height: 35px;
+        #languageDrop::part(tag){
           font-size: var(--body-font-size);
           color: #757575;
           background-color: #f0f0f0;
           border-radius: var(--input-border-radius);
-          padding: 8px 15px;
-          gap: 40px;
         }
 
-        #languageDrop::part(menu){
+        #languageDrop::part(listbox){
           background-color: #ffffff;
           height: 200px;
           overflow-y: scroll;
@@ -123,17 +136,17 @@ export class WindowsForm extends AppPackageFormBase {
           margin-top: 3px;
         }
 
-        #languageDrop sl-menu-item::part(base){
+        #languageDrop sl-option::part(base){
           font-size: var(--body-font-size);
           color: #757575;
         }
 
-        #languageDrop sl-menu-item:focus-within::part(base) {
+        #languageDrop sl-option:focus-within::part(base) {
           color: #ffffff;
           background-color: #4F3FB6;
         }
 
-        #languageDrop sl-menu-item::part(base):hover{
+        #languageDrop sl-option::part(base):hover{
           color: #ffffff;
           background-color: #4F3FB6;
         }
@@ -142,6 +155,23 @@ export class WindowsForm extends AppPackageFormBase {
           font-size: var(--body-font-size);
           color: #757575;
         }
+
+        sl-color-picker {
+          --grid-width: 315px;
+          height: 25px;
+        }
+
+        sl-color-picker::part(trigger){
+          border-radius: 0;
+          height: 25px;
+          width: 75px;
+          display: flex;
+        }
+
+        .color-radio::part(control--checked){
+          background-color: var(--primary-color);
+          border-color: var(--primary-color);
+        }
 
     `
     ];
@@ -164,6 +194,9 @@ export class WindowsForm extends AppPackageFormBase {
     );
 
     this.packageOptions.targetDeviceFamilies = ['Desktop', 'Holographic'];
+
+    this.customSelected = this.packageOptions.images?.backgroundColor != 'transparent';
+    this.initialBgColor = this.currentSelectedColor = (this.packageOptions.images?.backgroundColor as string);
   }
 
   toggleSettings(settingsToggleValue: 'basic' | 'advanced') {
@@ -248,29 +281,77 @@ export class WindowsForm extends AppPackageFormBase {
           <sl-select id="languageDrop" 
             placeholder="Select one or more languages"
             @sl-change=${(e: any) => this.handleLanguage(e)} 
-            .value=${this.packageOptions.resourceLanguage!}
+            value=${this.packageOptions.resourceLanguage!}
             ?stayopenonselect=${true} 
             multiple
-            .maxTagsVisible=${5}
+            .maxOptionsVisible=${5}
+            size="small"
           >
           ${windowsLanguages.map((lang: any) => 
             html`
               ${lang.codes.map((code: string) =>  
                 html`
-                  <sl-menu-item value=${code}>${lang.name} - ${code}</sl-menu-item>
+                  <sl-option value=${code}>${lang.name} - ${code}</sl-option>
                 `
               )}
             `
           )} 
-           <!-- ${windowsLanguages.map((lang: any) => html`
-              <sl-menu-item value=${lang.codes[0]}>${lang.name}</sl-menu-item>
-            `)} -->
           </sl-select>
         </div>
       </div>
     `;
   }
 
+  renderColorPicker(formInput: FormInput): TemplateResult {
+    return html`
+      <label for="${formInput.inputId}">
+        ${formInput.label}
+        ${this.renderTooltip(formInput)}
+      </label>
+      <div id="iconColorPicker">
+        <div class="color-wrap">
+          <p class="sub-multi">Select your Windows icons background color</p>
+          <sl-radio-group 
+            id="icon-bg-radio-group" 
+            .value=${this.packageOptions!.images!.backgroundColor === 'transparent' ? 'transparent' : 'custom'}
+            @sl-change=${() => this.toggleIconBgRadios()}
+          >
+            <sl-radio class="color-radio" size="small" value="transparent">Transparent</sl-radio>
+            <sl-radio class="color-radio" size="small" value="custom">Custom Color</sl-radio>
+          </sl-radio-group>
+          ${this.customSelected ? html`
+          <div id="color-input-holder">
+            <sl-color-picker
+              id="icon-bg-color"
+              value=${this.packageOptions.images!.backgroundColor || 'transparent'}
+              @sl-change=${() => this.switchIconBgColor()}
+            ></sl-color-picker>
+            <p>${this.currentSelectedColor}</p>
+          </div>
+          ` : html``}
+        </div>
+      </div>
+    `;
+  }
+
+  toggleIconBgRadios(){
+    let input = (this.shadowRoot?.getElementById("icon-bg-radio-group") as any);
+    let selected = input.value;
+    this.customSelected = selected !== 'transparent';
+    if(!this.customSelected){
+      this.packageOptions.images!.backgroundColor = 'transparent';
+    } else {
+      this.packageOptions.images!.backgroundColor = this.initialBgColor;
+      this.currentSelectedColor = this.initialBgColor;
+    }
+  }
+
+  switchIconBgColor(){
+    let input = (this.shadowRoot?.getElementById("icon-bg-color") as any);
+    let formattedValue = input.getFormattedValue('hex')
+    this.packageOptions.images!.backgroundColor = this.currentSelectedColor = formattedValue;
+  }
+
   handleLanguage(e: any){
     this.packageOptions.resourceLanguage = e.target.value;
   }
@@ -422,6 +503,19 @@ export class WindowsForm extends AppPackageFormBase {
                     (this.packageOptions.images!.baseImage = val),
                 })}
               </div>
+              <div class="form-group">
+                ${this.renderColorPicker({
+                  label: 'Icon Background Color',
+                  tooltip: `Optional. The background color of the Windows icons that will be generated with your .msix.`,
+                  tooltipLink:
+                    'https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-design#color-contrast',
+                  inputId: 'icon-bg-color-input',
+                  value: this.packageOptions.images!.backgroundColor || 'transparent',
+                  placeholder: 'transparent',
+                  inputHandler: (val: string) =>
+                    (this.packageOptions.images!.backgroundColor = val),
+                })}
+              </div>
               <div class="form-group">
                 ${this.renderMultiSelect({
                   label: 'Language',
@@ -486,7 +580,7 @@ export class WindowsForm extends AppPackageFormBase {
                   })}
                 </div>
               </div>
-              <div class="form-group" id="target-device-families">
+              <div class="form-group" id="widgets-picker">
                 <label>Widgets</label>
                 <div class="form-check">
                   ${this.renderFormInput({

apps/pwabuilder/src/script/pages/app-report.ts

@@ -1650,12 +1650,6 @@ export class AppReport extends LitElement {
     this.pageNumber = 1;
   }
 
-  copyReportCardLink() {
-    navigator.clipboard.writeText(window.location.href).then(() => {
-      setTimeout(() =>{this.shadowRoot!.querySelector("#cl-mani-tooltip")!.removeAttribute('open')}, 2000)
-    })
-  } 
-
   // Opens manifest editor and tracks analytics
   async openManifestEditorModal() {
     let dialog: any = this.shadowRoot!.querySelector("manifest-editor-frame")!.shadowRoot!.querySelector(".dialog");
@@ -2461,7 +2455,7 @@ export class AppReport extends LitElement {
         }
 
       </sl-dialog>
-      
+
       <publish-pane></publish-pane>
       <test-publish-pane></test-publish-pane>
       ${this.manifestDataLoading ? html`` : html`<manifest-editor-frame .isGenerated=${this.createdManifest} @readyForRetest=${() => this.addRetestTodo("Manifest")}></manifest-editor-frame>`}

apps/pwabuilder/src/script/services/publish/windows-publish.ts

@@ -228,7 +228,7 @@ export const windowsLanguages = [
   { "codes": ["et", "et-ee"], "name": "Estonian" },
   { "codes": ["fil", "fil-latn", "fil-ph"], "name": "Filipino" },
   { "codes": ["fi", "fi-fi"], "name": "Finnish" },
-  { "codes": ["fr", "fr-be ", "fr-ca ", "fr-ch ", "fr-fr ", "fr-lu", "fr-015", "fr-cd", "fr-ci", "fr-cm", "fr-ht", "fr-ma", "fr-mc", "fr-ml", "fr-re", "frc-latn", "frp-latn", "fr-155", "fr-029", "fr-021", "fr-011"], "name": "French" },
+  { "codes": ["fr", "fr-be", "fr-ca", "fr-ch", "fr-fr", "fr-lu", "fr-015", "fr-cd", "fr-ci", "fr-cm", "fr-ht", "fr-ma", "fr-mc", "fr-ml", "fr-re", "frc-latn", "frp-latn", "fr-155", "fr-029", "fr-021", "fr-011"], "name": "French" },
   { "codes": ["gl", "gl-es"], "name": "Galician" },
   { "codes": ["ka", "ka-ge"], "name": "Georgian" },
   { "codes": ["de", "de-at", "de-ch", "de-de", "de-lu", "de-li"], "name": "German" },

apps/pwabuilder/src/shoelace.ts

@@ -16,6 +16,7 @@ import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel';
 import '@shoelace-style/shoelace/dist/components/textarea/textarea';
 import '@shoelace-style/shoelace/dist/components/tooltip/tooltip';
 import '@shoelace-style/shoelace/dist/components/skeleton/skeleton';
+import '@shoelace-style/shoelace/dist/components/option/option';
 
 
 // also needed for site

components/manifest-editor/src/components/manifest-icons-form.ts

@@ -58,6 +58,11 @@ export class ManifestIconsForm extends LitElement {
   static get styles() {
     return css`
 
+    :host {
+      --sl-input-font-family: Hind, sans-serif;
+    }
+
+
       sl-checkbox::part(base),
       sl-checkbox::part(control),
       sl-button::part(base) {

components/manifest-editor/src/components/manifest-info-form.ts

@@ -36,11 +36,12 @@ export class ManifestInfoForm extends LitElement {
         --sl-input-focus-ring-color: #4f3fb670;
         --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
         --sl-input-border-color-focus: #4F3FB6ac;
+        --sl-input-font-family: Hind, sans-serif;
       }
 
       sl-input::part(base),
       sl-textarea::part(base),
-      sl-menu-item::part(base),
+      sl-option::part(base),
       sl-color-picker::part(base),
       sl-button::part(base) {
         --sl-input-font-size-medium: 16px;
@@ -166,12 +167,12 @@ export class ManifestInfoForm extends LitElement {
         width: 100%;
       }
 
-      sl-menu-item:focus-within::part(base) {
+      sl-option:focus-within::part(base) {
         color: #ffffff;
         background-color: #4F3FB6;
       }
 
-      sl-menu-item::part(base):hover{
+      sl-option::part(base):hover{
         color: #ffffff;
         background-color: #4F3FB6;
       }
@@ -212,7 +213,7 @@ export class ManifestInfoForm extends LitElement {
 
       @media(max-width: 480px){
         sl-input::part(base),
-        sl-menu-item::part(base) {
+        sl-option::part(base) {
           --sl-input-font-size-medium: 14px;
           --sl-font-size-medium: 14px;
           --sl-input-height-medium: 2.5em;
@@ -594,7 +595,7 @@ export class ManifestInfoForm extends LitElement {
             <p class="field-desc">Select a Background color</p>
             <span class="color-holder">
               <div class="color-section">
-                <sl-color-picker id="background_color_picker" value=${this.manifest.background_color! || defaultColor} hoist=${true} data-field="background_color" .swatches=${[]} @sl-change=${() => this.handleColorSwitch("background_color")}></sl-color-picker>
+                <sl-color-picker id="background_color_picker" value=${this.manifest.background_color! || defaultColor} hoist=${true} data-field="background_color" @sl-change=${() => this.handleColorSwitch("background_color")}></sl-color-picker>
                 <p id="background_color_string" class="color_string">${this.manifest.background_color?.toLocaleUpperCase() || defaultColor}</p>
               </div>
             </span>
@@ -618,7 +619,7 @@ export class ManifestInfoForm extends LitElement {
             <p class="field-desc">Select a Theme color</p>
             <span class="color-holder">
               <div class="color-section">
-                <sl-color-picker id="theme_color_picker" value=${this.manifest.theme_color! || defaultColor} hoist=${true} data-field="theme_color" .swatches=${[]} @sl-change=${() => this.handleColorSwitch("theme_color")}></sl-color-picker>
+                <sl-color-picker id="theme_color_picker" value=${this.manifest.theme_color! || defaultColor} hoist=${true} data-field="theme_color" @sl-change=${() => this.handleColorSwitch("theme_color")}></sl-color-picker>
                 <p id="theme_color_string" class="color_string">${this.manifest.theme_color?.toLocaleUpperCase() || defaultColor}</p>
               </div>
             </span>