fix(theme-generator): sync colors in Shadow DOM with user-defined ones (#637)

* fix(theme-generator): sync colors in Shadow DOM with user-defined ones

* style(theme-generator): ensure radio text is centered

* fix(theme-generator): parse size values for SVG components

Author: RylanBot

packages/theme-generator/src/common/utils/vars.css

@@ -56,11 +56,11 @@
   --text-placeholder: rgba(0, 0, 0, .4);
   --text-disabled: rgba(0, 0, 0, .26);
   --text-anti: #fff;
-  --text-interactive: #0052d9;
-  --brand-main: #0052d9;
-  --brand-main-hover: #366ef4;
-  --brand-main-focus: #d9e1ff;
-  --brand-main-disabled: #b5c7ff;
+  --text-interactive: var(--td-brand-color);
+  --brand-main: var(--td-brand-color);
+  --brand-main-hover: var(--td-brand-color-hover);
+  --brand-main-focus: var(--td-brand-color-focus);
+  --brand-main-disabled: var(--td-brand-color-disabled);
   --brand-main-light: rgba(0, 82, 217, .1);
   --error-1: #fff0ed;
   --error-8: #881f1c;
@@ -132,11 +132,6 @@
   --text-placeholder: rgba(255, 255, 255, .35);
   --text-disabled: rgba(255, 255, 255, .22);
   --text-anti: #fff;
-  --text-interactive: #4582e6;
-  --brand-main: #4582e6;
-  --brand-main-hover: #2667d4;
-  --brand-main-focus: #173463;
-  --brand-main-disabled: #143975;
   --brand-main-light: rgba(69, 130, 230, .2);
   --error-1: #472324;
   --error-8: #ec888e;

packages/theme-generator/src/font-panel/components/FontColorAdjust.vue

@@ -151,7 +151,10 @@ export default {
       flex: 1;
       text-align: center;
       width: 25%;
-      padding: 4px 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     /deep/ .t-radio-group__bg-block {

packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue

@@ -260,8 +260,11 @@ export default {
     }
     /deep/ .t-radio-button {
       width: 50%;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-
     /deep/ .t-radio-group__bg-block {
       border-radius: 5px;
       width: calc(50% - 2px) !important;

packages/theme-generator/src/font-panel/components/SizeAdjust.vue

@@ -344,6 +344,10 @@ export default {
     }
     /deep/ .t-radio-button {
       width: 50%;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
     /deep/ .t-radio-group__bg-block {
       border-radius: 5px;

packages/theme-generator/src/size-panel/components/SizeAdjust.vue

@@ -26,11 +26,11 @@
                 <div :style="{ color: 'var(--text-secondary)' }">{{ token.remark }} : {{ token.value }}</div>
               </div>
               <div :style="{ display: 'flex', alignItems: 'center' }">
-                <size-adjust-svg v-if="type === 'comp-size'" :size="token.value" />
-                <horizontal-padding-adjust-svg v-else-if="type === 'comp-padding-lr'" :size="token.value" />
-                <vertical-padding-adjust-svg v-else-if="type === 'comp-padding-tb'" :size="token.value" />
-                <margin-adjust-svg v-else-if="type === 'comp-margin'" :size="token.value" />
-                <popup-padding-adjust-svg v-else-if="type === 'popup-padding'" :size="token.value" />
+                <size-adjust-svg v-if="type === 'comp-size'" :size="parseSize(token.value)" />
+                <horizontal-padding-adjust-svg v-else-if="type === 'comp-padding-lr'" :size="parseSize(token.value)" />
+                <vertical-padding-adjust-svg v-else-if="type === 'comp-padding-tb'" :size="parseSize(token.value)" />
+                <margin-adjust-svg v-else-if="type === 'comp-margin'" :size="parseSize(token.value)" />
+                <popup-padding-adjust-svg v-else-if="type === 'popup-padding'" :size="parseSize(token.value)" />
               </div>
             </div>
           </t-list-item>
@@ -130,6 +130,13 @@ export default {
       this.tokenTypeList[idx].value = res;
       modifyToken(tokenName, res);
     },
+    parseSize(val) {
+      if (typeof val === 'string') {
+        const num = parseFloat(val);
+        return isNaN(num) ? 0 : num;
+      }
+      return val;
+    },
   },
   mounted() {
     // 将当前的尺寸相关枚举存储