feat(radio): [radio] Adapting to the SMB theme

examples/sites/demos/pc/app/radio/basic-usage.spec.ts

@@ -20,5 +20,5 @@ test('基本用法', async ({ page }) => {
     return {}
   })
 
-  expect(afterElement.backgroundColor).toBe('rgb(94, 124, 224)')
+  expect(afterElement.backgroundColor).toBe('rgb(20, 118, 255)')
 })

examples/sites/demos/pc/app/radio/radio-size.spec.ts

@@ -7,10 +7,10 @@ test('尺寸设置', async ({ page }) => {
   const demo = page.locator('#radio-size')
   const radioGroup = demo.locator('.tiny-radio-group')
 
-  await expect(radioGroup.first()).toHaveCSS('width', '183px')
+  await expect(radioGroup.first()).toHaveCSS('width', '184px')
   await expect(radioGroup.first()).toHaveCSS('height', '32px')
-  await expect(radioGroup.nth(1)).toHaveCSS('width', '171px')
+  await expect(radioGroup.nth(1)).toHaveCSS('width', '184px')
   await expect(radioGroup.nth(1)).toHaveCSS('height', '28px')
-  await expect(radioGroup.nth(2)).toHaveCSS('width', '139px')
+  await expect(radioGroup.nth(2)).toHaveCSS('width', '152px')
   await expect(radioGroup.nth(2)).toHaveCSS('height', '24px')
 })

packages/theme/src/radio-button/index.less

@@ -20,7 +20,6 @@
 
   border-radius: var(--ti-radio-button-border-radius);
   &:first-child &__inner {
-    border-left: var(--ti-radio-button-border-left) solid var(--ti-radio-button-border-color);
     border-radius: var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-left-border-radius);
   }
 
@@ -52,7 +51,6 @@
     padding: var(--ti-radio-button-padding-verticals) 24px;
     font-weight: 500;
     border-radius: var(--ti-radio-button-border-radius);
-    border-left: 0;
     line-height: 1;
     white-space: nowrap;
     vertical-align: middle;
@@ -70,7 +68,6 @@
     &:hover {
       color: var(--ti-radio-button-hover-text-color);
       background-color: var(--ti-radio-button-checked-hover-bg-color);
-      border-color: var(--ti-radio-button-checked-hover-border-color);
       outline: 0;
     }
 
@@ -93,12 +90,10 @@
       & + .@{radio-button-prefix-cls}__inner {
         color: #fff;
         background-color: var(--ti-radio-button-checked-normal-bg-color);
-        border-color: var(--ti-radio-button-checked-normal-border-color);
         box-shadow: var(--ti-radio-button-checked-normal-box-shadow);
 
         &:hover {
           background-color: var(--ti-radio-button-checked-hover-bg-color);
-          border-color: var(--ti-radio-button-checked-hover-border-color);
           box-shadow: var(--ti-radio-button-checked-hover-box-shadow);
         }
       }
@@ -119,14 +114,23 @@
       & + .@{radio-button-prefix-cls}__inner {
         background-color: var(--ti-radio-button-checked-disabled-bg-color);
         color: var(--ti-radio-button-disabled-checked-text-color);
-        &,
-        &:hover {
-          border-color: var(--ti-radio-button-checked-disabled-border-color);
-        }
       }
     }
   }
 
+  &--default &__inner {
+    font-size: var(--ti-radio-button-medium-font-size);
+    display: flex;
+    align-items: center;
+    height: 32px;
+    padding: 5px 24px;
+    border-radius: var(--ti-radio-button-margin-right);
+
+    &.is-round {
+      padding: 10px 20px;
+    }
+  }
+
   &--medium &__inner {
     font-size: var(--ti-radio-button-medium-font-size);
     display: flex;

packages/theme/src/radio-button/vars.less

@@ -13,15 +13,12 @@
 .component-css-vars-radio-button() {
   --ti-radio-button-text-color: var(--ti-common-color-text-secondary);
   --ti-radio-button-hover-text-color: var(--ti-common-color-bg-emphasize);
-  --ti-radio-button-border-color: var(--ti-common-color-border, #adb0b8);
   --ti-radio-button-border-radius: var(--ti-common-space-6);
   --ti-radio-button-font-size: var(--ti-common-font-size-base, 12px);
   --ti-radio-button-bg-color: var(--ti-common-color-bg-normal);
   --ti-radio-button-checked-normal-bg-color: #1476FF;
-  --ti-radio-button-checked-normal-border-color: #1476FF;
   --ti-radio-button-checked-normal-box-shadow: #1476FF;
   --ti-radio-button-checked-hover-bg-color: var(--ti-common-color-prompt-bg);
-  --ti-radio-button-checked-hover-border-color: #1293ff;
   --ti-radio-button-checked-hover-box-shadow: #1293ff;
   --ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
   --ti-radio-button-disabled-checked-text-color: var(--ti-common-color-text-weaken);

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

@@ -42,7 +42,6 @@
 
       &:first-child .@{radio-button-prefix-cls}__inner {
         border-radius: var(--ti-radio-button-top-border-radius) var(--ti-radio-button-top-border-radius) var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-bottom-border-radius);
-        border-top: var(--ti-radio-button-border-top) solid var(--ti-radio-button-border-color);
       }
 
       &:last-child .@{radio-button-prefix-cls}__inner {
@@ -58,10 +57,5 @@
         border-color: var(--ti-radio-input-checked-disabled-border-color);
       }
     }
-
-    .@{radio-button-prefix-cls}__inner {
-      border-top: 0;
-      border-left: 1px solid var(--ti-radio-button-border-color);
-    }
   }
 }

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

@@ -15,5 +15,4 @@
   --ti-radio-button-margin-bottom: 2px;
   --ti-radio-button-top-border-radius: 6px;
   --ti-radio-button-bottom-border-radius: 6px;
-  --ti-radio-button-border-top: 0;
 }

packages/vue/src/radio-button/src/pc.vue

@@ -13,7 +13,7 @@
   <label
     class="tiny-radio-button"
     :class="[
-      state.size ? 'tiny-radio-button--' + state.size : '',
+      state.size ? 'tiny-radio-button--' + state.size : 'tiny-radio-button--default',
       { 'is-active': state.value === label },
       { 'is-disabled': state.isDisabled },
       { 'is-focus': state.focus }