Theme: Add popup background design token (Message Dialog) (#15412)

examples/components/theme-configurator/index.vue

@@ -10,7 +10,6 @@
       @select="onSelectChange"
     ></action-panel>
     <main-panel
-      ref='configuratorMain'
       v-if="defaultConfig"
       :currentConfig="currentConfig"
       :defaultConfig="defaultConfig"
@@ -180,7 +179,6 @@ export default {
       bus.$emit(ACTION_COMPONECT_SELECT, val);
       this.selectedComponent = val;
       this.filterCurrentConfig();
-      this.$refs.configuratorMain.focus();
     }
   },
   watch: {

packages/theme-chalk/src/common/popup.scss

@@ -1,3 +1,4 @@
+@import "./var.scss";
 @import "../mixins/mixins";
 
 .v-modal-enter {
@@ -30,8 +31,8 @@
   top: 0;
   width: 100%;
   height: 100%;
-  opacity: 0.5;
-  background: #000;
+  opacity: $--popup-modal-opacity;
+  background: $--popup-modal-background-color;
 }
 
 @include b(popup-parent) {

packages/theme-chalk/src/common/var.scss

@@ -667,6 +667,13 @@ $--pagination-button-disabled-background-color: $--color-white !default;
 /// color||Color|0
 $--pagination-hover-color: $--color-primary !default;
 
+/* Popup
+-------------------------- */
+/// color||Color|0
+$--popup-modal-background-color: $--color-black !default;
+/// opacity||Other|1
+$--popup-modal-opacity: 0.5 !default;
+
 /* Popover
 -------------------------- */
 /// color||Color|0