refactor(option-group): [select] modify variable names and add refactor styles for option-group

Author: MomoPoppy

packages/theme/src/option-group/index.less

@@ -24,7 +24,7 @@
   padding: 0;
 
   &:not(:last-of-type) {
-    padding-bottom: var(--ti-option-group-padding-bottom);
+    padding-bottom: 0px;
   }
 
   &:not(:last-of-type)::after {
@@ -34,28 +34,21 @@
     left: 8px;
     right: 8px;
     bottom: 12px;
-    height: var(--ti-option-group-line-dividing-height);
-    background: var(--ti-option-group-line-dividing-bg-color);
+    height: var(--tv-OptionGroup-height-divider);
+    background: var(--tv-OptionGroup-border-color-divider);
   }
 
   .@{option-group-prefix-cls}__title {
-    padding: 0 var(--ti-option-group-title-padding-horizontal);
-    font-size: var(--ti-option-group-title-font-size);
-    font-weight: var(--ti-option-group-title-font-weight);
-    color: var(--ti-option-group-title-text-color);
-    line-height: var(--ti-option-group-title-line-height);
-    height: var(--ti-option-group-title-height);
-    margin-top: var(--ti-option-group-title-margin-top);
-    margin-bottom: var(--ti-option-group-title-margin-bottom);
-  }
+    padding: 0 var(--tv-OptionGroup-title-padding-x);
+    font-size: var(--tv-OptionGroup-font-size);
 
-  &:first-child .@{option-group-prefix-cls}__title {
-    margin-top: var(--ti-option-group-title-margin-top-first);
+    color: var(--tv-OptionGroup-text-color);
+    line-height: var(--tv-OptionGroup-line-height);
+    height: auto;
+    margin: var(--tv-OptionGroup-title-margin);
   }
 
-  .@{option-group-prefix-cls}__list {
-    .tiny-option {
-      padding: var(--ti-option-padding-vertical) var(--ti-option-padding-horizontal-group);
-    }
+  &:first-child .@{option-group-prefix-cls}__title {
+    margin-top: var(--tv-OptionGroup-title-margin-top-first);
   }
 }

packages/theme/src/option-group/vars.less

@@ -11,28 +11,23 @@
 */
 
 .component-css-vars-option-group() {
-  // 分组分割线填充色
-  --ti-option-group-line-dividing-bg-color: var(--ti-common-color-line-dividing, #f0f0f0);
-  // 分组标题字号
-  --ti-option-group-title-font-size: var(--ti-common-font-size-0, 12px);
-  // 分组标题字重
-  --ti-option-group-title-font-weight: var(--ti-common-font-weight-normal, 400);
-  // 分组标题字体颜色
-  --ti-option-group-title-text-color: var(--ti-common-color-text-weaken, #808080);
-  // 分组标题行高
-  --ti-option-group-title-line-height: var(--ti-common-line-height-base, 18px);
-  // 分组标题高度
-  --ti-option-group-title-height: var(--ti-common-size-auto, auto);
-  // 分组标题水平方向外边距
-  --ti-option-group-title-padding-horizontal: var(--ti-common-space-4x, 16px);
-  // 分组标题顶部外边距
-  --ti-option-group-title-margin-top: var(--ti-common-space-2x, 8px);
-  // 分组标题底部外边距
-  --ti-option-group-title-margin-bottom: var(--ti-common-space-2, 2px);
-  // 分组第一个标题顶部外边距
-  --ti-option-group-title-margin-top-first: var(--ti-common-space-base, 4px);
-  // 分组分割线高度
-  --ti-option-group-line-dividing-height: var(--ti-common-size-0, 0px);
-  // 分组底部内边距
-  --ti-option-group-padding-bottom: var(--ti-common-space-0, 0px);
+  // 字号
+  --tv-OptionGroup-font-size: var(--tv-font-size-sm, 12px);
+  // 文本色
+  --tv-OptionGroup-text-color: var(--tv-color-text-weaken, #808080);
+  // 行高
+  --tv-OptionGroup-line-height: var(--tv-line-height-number, 1.5);
+
+  // 分割线填充色
+  --tv-OptionGroup-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
+  // 分割线高度
+  --tv-OptionGroup-height-divider: 0px;
+
+  // 标题水平方向内边距
+  --tv-OptionGroup-title-padding-x: var(--tv-space-xl, 16px);
+  // 标题外边距
+  --tv-OptionGroup-title-margin: var(--tv-space-md, 8px) 0 var(--tv-space-xs, 2px) 0;
+
+  // 第一个标题顶部外边距
+  --tv-OptionGroup-title-margin-top-first: var(--tv-space-sm, 4px);
 }