新增几种theme-开头的样式，给ide传媒介查询参数 (#103)

* 给ide模拟器传媒介查询参数

* 新增几种灵感组件的样式配置

* 媒介参数传递遗留

* 修正格式

---------

Co-authored-by: yucongshuang <v-yucongshuang@oppo.com>

Author: oneyouzi

packages/hap-compiler/src/style/validator.js

@@ -396,7 +396,24 @@ const validateTime = function (v) {
     }
   }
 }
-
+// 灵感组件颜色值
+const themeColors = [
+  'uxCardColorTheme',
+  'uxCardColorAccent',
+  'uxCardColorPrimary',
+  'uxCardColorSecondary',
+  'uxCardColorSecondaryVariant',
+  'uxCardColorTertiary',
+  'uxCardColorQuaternary',
+  'uxCardColorContainer',
+  'uxCardBackground',
+  'uxCardColorHue',
+  'uxCardColorHueSecondary',
+  'uxIconColorAccent',
+  'uxIconColorPrimary',
+  'uxIconColorSecondary',
+  'uxIconColorBackground'
+]
 const validator = {
   /**
    * 整数校验
@@ -2657,23 +2674,13 @@ const validatorMap = {
   // font
   fontSrc: validator.fontSrc,
   fontFamily: validator.fontFamily,
-  themeColor: makeEnumValidator([
-    'uxCardColorTheme',
-    'uxCardColorAccent',
-    'uxCardColorPrimary',
-    'uxCardColorSecondary',
-    'uxCardColorSecondaryVariant',
-    'uxCardColorTertiary',
-    'uxCardColorQuaternary',
-    'uxCardColorContainer',
-    'uxCardBackground',
-    'uxCardColorHue',
-    'uxCardColorHueSecondary',
-    'uxIconColorAccent',
-    'uxIconColorPrimary',
-    'uxIconColorSecondary',
-    'uxIconColorBackground'
-  ])
+  themeColor: makeEnumValidator(themeColors),
+  themeBackgroundColor: makeEnumValidator(themeColors),
+  themeLayerColor: makeEnumValidator(themeColors),
+  themeThumbColor: makeEnumValidator(themeColors),
+  themeTrackColor: makeEnumValidator(themeColors),
+  themeSelectColor: makeEnumValidator(themeColors),
+  themeBlockColor: makeEnumValidator(themeColors)
 }
 
 /**

packages/hap-server/src/preview/create-router.js

@@ -226,7 +226,8 @@ export default async function createRouter(previewTarget) {
         script,
         scriptNotFound: !scriptExists(script),
         webJsUrl: genWebJsUrl(ctx.conf.options.webVersion),
-        language: currentLanguage
+        language: currentLanguage,
+        mediaQueryParams: JSON.stringify(ctx.conf.options.mediaQueryParams) // 传给页面的媒介查询参数
       })
       ctx.type = 'text/html'
       ctx.body = html

packages/hap-server/src/preview/views/page.html

@@ -97,6 +97,7 @@
       var base = '/preview'
       var type = '{{ type }}'
       window.language = `{{language}}`
+      window.mediaQueryParams = JSON.parse(`{{mediaQueryParams}}`)
       ;(function preview() {
         var routeName = '{{ routeName }}'
         Hap.init({