Add proper error message when SCSS variable name is invalid when uploading a theme file

app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs

@@ -5,6 +5,11 @@
       <label>{{i18n 'admin.customize.theme.variable_name'}}
         {{input id="name" value=name}}<br>
       </label>
+      {{#if fileSelected}}
+        {{#unless nameValid}}
+          <span class="alert alert-error">{{i18n "admin.customize.theme.variable_name_invalid"}}</span>
+        {{/unless}}
+      {{/if}}
     </div>
 {{/d-modal-body}}
 

config/locales/client.en.yml

@@ -3058,6 +3058,7 @@ en:
           add_upload: "Add Upload"
           upload_file_tip: "Choose an asset to upload (png, woff2, etc...)"
           variable_name: "SCSS var name:"
+          variable_name_invalid: "Invalid variable name. Only alphanumeric allowed. Must start with a letter."
           upload: "Upload"
           child_themes_check: "Theme includes other child themes"
           css_html: "Custom CSS/HTML"