@sdata/web-vue 4.7.1 → 5.0.0

package/es/progress/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -117,3 +118,255 @@ $progress-circle-color-path-stroke_warning: $color-warning-6;
 $progress-circle-color-icon_warning: $color-warning-6;
 
 $progress-steps-color-item-bg_warning: $color-warning-6;
+
+// @generated runtime tokens — pnpm theme:generate
+$progress-line-color-line-bg: theme-runtime.token(
+  'progress',
+  'progress-line-color-line-bg',
+  $progress-line-color-line-bg
+);
+$progress-line-color-inner-bg: theme-runtime.token(
+  'progress',
+  'progress-line-color-inner-bg',
+  $color-primary-6
+);
+$progress-line-color-inner-bg_success: theme-runtime.token(
+  'progress',
+  'progress-line-color-inner-bg-success',
+  $color-success-6
+);
+$progress-line-color-inner-bg_error: theme-runtime.token(
+  'progress',
+  'progress-line-color-inner-bg-error',
+  $color-danger-6
+);
+$progress-line-color-buffer-bg: theme-runtime.token(
+  'progress',
+  'progress-line-color-buffer-bg',
+  $progress-line-color-buffer-bg
+);
+$progress-line-size-large-font-size: theme-runtime.token(
+  'progress',
+  'progress-line-size-large-font-size',
+  $progress-line-size-large-font-size
+);
+$progress-line-size-small-font-size: theme-runtime.token(
+  'progress',
+  'progress-line-size-small-font-size',
+  $font-size-body-1
+);
+$progress-line-size-default-font-size: theme-runtime.token(
+  'progress',
+  'progress-line-size-default-font-size',
+  $font-size-body-1
+);
+$progress-line-size-large-margin-text-left: theme-runtime.token(
+  'progress',
+  'progress-line-size-large-margin-text-left',
+  $spacing-7
+);
+$progress-line-size-small-margin-text-left: theme-runtime.token(
+  'progress',
+  'progress-line-size-small-margin-text-left',
+  $spacing-7
+);
+$progress-line-color-icon_success: theme-runtime.token(
+  'progress',
+  'progress-line-color-icon-success',
+  $color-success-6
+);
+$progress-line-color-icon_error: theme-runtime.token(
+  'progress',
+  'progress-line-color-icon-error',
+  $color-danger-6
+);
+$progress-line-margin-text-left: theme-runtime.token(
+  'progress',
+  'progress-line-margin-text-left',
+  $spacing-7
+);
+$progress-line-margin-icon-left: theme-runtime.token(
+  'progress',
+  'progress-line-margin-icon-left',
+  $spacing-2
+);
+$progress-line-color-text: theme-runtime.token(
+  'progress',
+  'progress-line-color-text',
+  $progress-line-color-text
+);
+$progress-line-color-icon_normal: theme-runtime.token(
+  'progress',
+  'progress-line-color-icon-normal',
+  $progress-line-color-icon_normal
+);
+$progress-line-size-text-width: theme-runtime.token(
+  'progress',
+  'progress-line-size-text-width',
+  $size-8
+);
+$progress-line-size-default-icon-size: theme-runtime.token(
+  'progress',
+  'progress-line-size-default-icon-size',
+  $progress-line-size-default-icon-size
+);
+$progress-line-size-small-icon-size: theme-runtime.token(
+  'progress',
+  'progress-line-size-small-icon-size',
+  $progress-line-size-small-icon-size
+);
+$progress-line-size-large-icon-size: theme-runtime.token(
+  'progress',
+  'progress-line-size-large-icon-size',
+  $progress-line-size-large-icon-size
+);
+$progress-circle-size-small-font-size: theme-runtime.token(
+  'progress',
+  'progress-circle-size-small-font-size',
+  $font-size-body-2
+);
+$progress-circle-size-default-font-size: theme-runtime.token(
+  'progress',
+  'progress-circle-size-default-font-size',
+  $font-size-body-3
+);
+$progress-circle-size-large-font-size: theme-runtime.token(
+  'progress',
+  'progress-circle-size-large-font-size',
+  $progress-circle-size-large-font-size
+);
+$progress-circle-size-small-icon-size: theme-runtime.token(
+  'progress',
+  'progress-circle-size-small-icon-size',
+  $progress-circle-size-small-icon-size
+);
+$progress-circle-size-default-icon-size: theme-runtime.token(
+  'progress',
+  'progress-circle-size-default-icon-size',
+  $size-4
+);
+$progress-circle-size-large-icon-size: theme-runtime.token(
+  'progress',
+  'progress-circle-size-large-icon-size',
+  $size-4
+);
+$progress-circle-color-text: theme-runtime.token(
+  'progress',
+  'progress-circle-color-text',
+  $progress-circle-color-text
+);
+$progress-circle-color-mask-stroke: theme-runtime.token(
+  'progress',
+  'progress-circle-color-mask-stroke',
+  $progress-circle-color-mask-stroke
+);
+$progress-circle-size-mini-color-mask-stroke: theme-runtime.token(
+  'progress',
+  'progress-circle-size-mini-color-mask-stroke',
+  $progress-circle-size-mini-color-mask-stroke
+);
+$progress-circle-size-mini-color-mask-stroke_success: theme-runtime.token(
+  'progress',
+  'progress-circle-size-mini-color-mask-stroke-success',
+  $progress-circle-size-mini-color-mask-stroke_success
+);
+$progress-circle-size-mini-color-mask-stroke_error: theme-runtime.token(
+  'progress',
+  'progress-circle-size-mini-color-mask-stroke-error',
+  $progress-circle-size-mini-color-mask-stroke_error
+);
+$progress-circle-color-path-stroke: theme-runtime.token(
+  'progress',
+  'progress-circle-color-path-stroke',
+  $color-primary-6
+);
+$progress-circle-color-path-stroke_success: theme-runtime.token(
+  'progress',
+  'progress-circle-color-path-stroke-success',
+  $color-success-6
+);
+$progress-circle-color-path-stroke_error: theme-runtime.token(
+  'progress',
+  'progress-circle-color-path-stroke-error',
+  $color-danger-6
+);
+$progress-circle-color-icon_success: theme-runtime.token(
+  'progress',
+  'progress-circle-color-icon-success',
+  $color-success-6
+);
+$progress-circle-color-icon_error: theme-runtime.token(
+  'progress',
+  'progress-circle-color-icon-error',
+  $color-danger-6
+);
+$progress-steps-size-small-steps-item-width: theme-runtime.token(
+  'progress',
+  'progress-steps-size-small-steps-item-width',
+  $progress-steps-size-small-steps-item-width
+);
+$progress-steps-margin-steps-item-right: theme-runtime.token(
+  'progress',
+  'progress-steps-margin-steps-item-right',
+  $progress-steps-margin-steps-item-right
+);
+$progress-steps-margin-steps-item-right_small: theme-runtime.token(
+  'progress',
+  'progress-steps-margin-steps-item-right-small',
+  $progress-steps-margin-steps-item-right_small
+);
+$progress-steps-color-item-bg: theme-runtime.token(
+  'progress',
+  'progress-steps-color-item-bg',
+  $progress-steps-color-item-bg
+);
+$progress-steps-color-item-bg_normal: theme-runtime.token(
+  'progress',
+  'progress-steps-color-item-bg-normal',
+  $color-primary-6
+);
+$progress-steps-color-item-bg_success: theme-runtime.token(
+  'progress',
+  'progress-steps-color-item-bg-success',
+  $color-success-6
+);
+$progress-steps-color-item-bg_error: theme-runtime.token(
+  'progress',
+  'progress-steps-color-item-bg-error',
+  $color-danger-6
+);
+$progress-steps-margin-text-left: theme-runtime.token(
+  'progress',
+  'progress-steps-margin-text-left',
+  $spacing-4
+);
+$progress-line-color-inner-bg_warning: theme-runtime.token(
+  'progress',
+  'progress-line-color-inner-bg-warning',
+  $color-warning-6
+);
+$progress-line-color-icon_warning: theme-runtime.token(
+  'progress',
+  'progress-line-color-icon-warning',
+  $color-warning-6
+);
+$progress-circle-size-mini-color-mask-stroke_warning: theme-runtime.token(
+  'progress',
+  'progress-circle-size-mini-color-mask-stroke-warning',
+  $progress-circle-size-mini-color-mask-stroke_warning
+);
+$progress-circle-color-path-stroke_warning: theme-runtime.token(
+  'progress',
+  'progress-circle-color-path-stroke-warning',
+  $color-warning-6
+);
+$progress-circle-color-icon_warning: theme-runtime.token(
+  'progress',
+  'progress-circle-color-icon-warning',
+  $color-warning-6
+);
+$progress-steps-color-item-bg_warning: theme-runtime.token(
+  'progress',
+  'progress-steps-color-item-bg-warning',
+  $color-warning-6
+);

package/es/qr-code/style/index.css

@@ -21,11 +21,11 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: 10px;
+  padding: var(--component-qr-code-qr-code-padding, var(--component-qr-code-padding, var(--spacing-5, 10px)));
   overflow: hidden;
-  background-color: var(--sd-color-bg-2);
-  border: 1px solid var(--sd-color-border-2);
-  border-radius: var(--sd-border-radius-medium);
+  background-color: var(--component-qr-code-qr-code-color-bg, var(--component-qr-code-color-bg, var(--sd-color-bg-2)));
+  border: 1px solid var(--component-qr-code-qr-code-color-border, var(--component-qr-code-color-border, var(--sd-color-border-2)));
+  border-radius: var(--component-qr-code-qr-code-border-radius, var(--component-qr-code-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-qr-code-borderless {
   padding: 0;
@@ -51,9 +51,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 6px;
-  background-color: var(--sd-color-bg-2);
-  border-radius: var(--sd-border-radius-medium);
+  padding: var(--component-qr-code-qr-code-icon-padding, var(--component-qr-code-icon-padding, var(--spacing-3, 6px)));
+  background-color: var(--component-qr-code-qr-code-color-bg, var(--component-qr-code-color-bg, var(--sd-color-bg-2)));
+  border-radius: var(--component-qr-code-qr-code-border-radius, var(--component-qr-code-border-radius, var(--sd-border-radius-medium)));
   transform: translate(-50%, -50%);
 }
 .sd-qr-code-icon img {
@@ -67,40 +67,37 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  background: color-mix(in srgb, var(--sd-color-bg-2) 88%, transparent);
+  background: var(--component-qr-code-qr-code-color-mask-bg, var(--component-qr-code-color-mask-bg, color-mix(in srgb, var(--sd-color-bg-2) 88%, transparent)));
 }
 .sd-qr-code-status {
   display: inline-flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--component-qr-code-qr-code-status-gap, var(--component-qr-code-status-gap, var(--spacing-4, 8px)));
   align-items: center;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
+  color: var(--component-qr-code-qr-code-color-text, var(--component-qr-code-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-qr-code-qr-code-font-size, var(--component-qr-code-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
 }
 .sd-qr-code-expired, .sd-qr-code-scanned {
   margin: 0;
-  font-weight: 500;
+  font-weight: var(--component-qr-code-qr-code-font-weight, var(--component-qr-code-font-weight, var(--font-weight-500, 500)));
 }
 .sd-qr-code-expired {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-qr-code-qr-code-color-expired, var(--component-qr-code-color-expired, rgb(var(--sd-danger-6))));
 }
 .sd-qr-code-scanned {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-qr-code-qr-code-color-scanned, var(--component-qr-code-color-scanned, rgb(var(--sd-success-6))));
 }
 .sd-qr-code-refresh-btn {
   padding: 0;
-  color: rgb(var(--sd-primary-6));
-  font-size: 13px;
+  color: var(--component-qr-code-qr-code-color-refresh, var(--component-qr-code-color-refresh, rgb(var(--sd-primary-6))));
+  font-size: var(--component-qr-code-qr-code-font-size-secondary, var(--component-qr-code-font-size-secondary, var(--font-size-body-2, 13px)));
   line-height: 1.5715;
   background: transparent;
   border: none;
   cursor: pointer;
 }
-.sd-qr-code-refresh-btn:hover {
+.sd-qr-code-refresh-btn:hover, .sd-qr-code-refresh-btn:focus-visible {
   color: rgb(var(--sd-primary-7));
-}
-.sd-qr-code-refresh-btn:focus-visible {
-  outline: 1px solid rgb(var(--sd-primary-6));
-  outline-offset: 4px;
+  outline: none;
 }

package/es/qr-code/style/index.scss

@@ -100,12 +100,10 @@ $qr-code-prefix-cls: string.unquote('#{theme.$prefix}-qr-code');
     cursor: pointer;
   }
 
-  &-refresh-btn:hover {
-    color: theme.$color-primary-7;
-  }
-
+  // 键盘焦点与 hover 保持同一视觉
+  &-refresh-btn:hover,
   &-refresh-btn:focus-visible {
-    outline: theme.$border-1 theme.$border-solid theme.$color-primary-6;
-    outline-offset: theme.$spacing-2;
+    color: theme.$color-primary-7;
+    outline: none;
   }
 }

package/es/qr-code/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -34,3 +35,61 @@ $qr-code-font-size: global.$font-size-body-3;
 $qr-code-font-size-secondary: global.$font-size-body-2;
 
 $qr-code-font-weight: global.$font-weight-500;
+
+// @generated runtime tokens — pnpm theme:generate
+$qr-code-color-border: theme-runtime.token(
+  'qr-code',
+  'qr-code-color-border',
+  $qr-code-color-border
+);
+$qr-code-color-bg: theme-runtime.token('qr-code', 'qr-code-color-bg', $qr-code-color-bg);
+$qr-code-color-mask-bg: theme-runtime.token(
+  'qr-code',
+  'qr-code-color-mask-bg',
+  $qr-code-color-mask-bg
+);
+$qr-code-color-text: theme-runtime.token('qr-code', 'qr-code-color-text', $qr-code-color-text);
+$qr-code-color-text-secondary: theme-runtime.token(
+  'qr-code',
+  'qr-code-color-text-secondary',
+  $qr-code-color-text-secondary
+);
+$qr-code-color-refresh: theme-runtime.token('qr-code', 'qr-code-color-refresh', $color-primary-6);
+$qr-code-color-scanned: theme-runtime.token('qr-code', 'qr-code-color-scanned', $color-success-6);
+$qr-code-color-expired: theme-runtime.token('qr-code', 'qr-code-color-expired', $color-danger-6);
+$qr-code-border-radius: theme-runtime.token(
+  'qr-code',
+  'qr-code-border-radius',
+  $qr-code-border-radius
+);
+$qr-code-padding: theme-runtime.token('qr-code', 'qr-code-padding', $qr-code-padding, 'spacing-5');
+$qr-code-icon-padding: theme-runtime.token(
+  'qr-code',
+  'qr-code-icon-padding',
+  $qr-code-icon-padding,
+  'spacing-3'
+);
+$qr-code-status-gap: theme-runtime.token(
+  'qr-code',
+  'qr-code-status-gap',
+  $qr-code-status-gap,
+  'spacing-4'
+);
+$qr-code-font-size: theme-runtime.token(
+  'qr-code',
+  'qr-code-font-size',
+  $qr-code-font-size,
+  'font-size-body-3'
+);
+$qr-code-font-size-secondary: theme-runtime.token(
+  'qr-code',
+  'qr-code-font-size-secondary',
+  $qr-code-font-size-secondary,
+  'font-size-body-2'
+);
+$qr-code-font-weight: theme-runtime.token(
+  'qr-code',
+  'qr-code-font-weight',
+  $qr-code-font-weight,
+  'font-weight-500'
+);

package/es/radio/style/index.css

@@ -39,13 +39,13 @@
   display: inline-flex;
   align-items: center;
   padding-left: 5px;
-  font-size: 14px;
+  font-size: var(--component-radio-radio-font-text-size, var(--component-radio-font-text-size, var(--font-size-body-3, 14px)));
   line-height: unset;
   cursor: pointer;
 }
 .sd-radio-label {
-  margin-left: 8px;
-  color: var(--sd-color-text-1);
+  margin-left: var(--component-radio-radio-margin-text-left, var(--component-radio-margin-text-left, var(--spacing-4, 8px)));
+  color: var(--component-radio-radio-color-text, var(--component-radio-color-text, var(--sd-color-text-1)));
 }
 .sd-radio-icon {
   position: relative;
@@ -54,8 +54,8 @@
   width: 14px;
   height: 14px;
   line-height: 14px;
-  border: 2px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-circle);
+  border: 2px solid var(--component-radio-radio-color-border, var(--component-radio-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-radio-radio-border-radius, var(--component-radio-border-radius, var(--sd-border-radius-circle)));
 }
 .sd-radio-icon::after {
   position: absolute;
@@ -65,25 +65,25 @@
   box-sizing: border-box;
   width: 10px;
   height: 10px;
-  background-color: var(--sd-color-bg-2);
-  border-radius: var(--sd-border-radius-circle);
+  background-color: var(--component-radio-radio-color-bg, var(--component-radio-color-bg, var(--sd-color-bg-2)));
+  border-radius: var(--component-radio-radio-border-radius, var(--component-radio-border-radius, var(--sd-border-radius-circle)));
   transform: scale(1);
   transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
   content: "";
 }
 .sd-radio:hover .sd-radio-icon {
-  border-color: var(--sd-color-neutral-3);
+  border-color: var(--component-radio-radio-color-border-hover, var(--component-radio-color-border-hover, var(--sd-color-neutral-3)));
 }
 .sd-radio-checked .sd-radio-icon {
-  background-color: rgb(var(--sd-primary-6));
-  border-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-radio-radio-color-bg-checked, var(--component-radio-color-bg-checked, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  border-color: var(--component-radio-radio-color-bg-checked, var(--component-radio-color-bg-checked, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-radio-checked .sd-radio-icon::after {
   background-color: var(--sd-color-white);
   transform: scale(0.4);
 }
 .sd-radio-checked:hover .sd-radio-icon {
-  border-color: rgb(var(--sd-primary-6));
+  border-color: var(--component-radio-radio-color-bg-checked, var(--component-radio-color-bg-checked, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-radio-disabled {
   cursor: not-allowed;
@@ -92,29 +92,29 @@
   cursor: not-allowed;
 }
 .sd-radio-disabled .sd-radio-label {
-  color: var(--sd-color-text-4);
+  color: var(--component-radio-radio-color-text-disabled, var(--component-radio-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-radio-disabled .sd-radio-icon {
-  border-color: var(--sd-color-neutral-3);
+  border-color: var(--component-radio-radio-color-border-disabled, var(--component-radio-color-border-disabled, var(--sd-color-neutral-3)));
 }
 .sd-radio-disabled .sd-radio-icon::after {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-radio-radio-color-bg-disabled, var(--component-radio-color-bg-disabled, var(--sd-color-fill-2)));
 }
 .sd-radio-disabled:hover .sd-radio-icon {
-  border-color: var(--sd-color-neutral-3);
+  border-color: var(--component-radio-radio-color-border-disabled, var(--component-radio-color-border-disabled, var(--sd-color-neutral-3)));
 }
 .sd-radio-checked.sd-radio-disabled .sd-radio-icon, .sd-radio-checked.sd-radio-disabled:hover .sd-radio-icon {
-  background-color: var(--sd-color-primary-light-3);
+  background-color: var(--component-radio-radio-color-bg-checked-disabled, var(--component-radio-color-bg-checked-disabled, var(--sd-color-primary-light-3)));
   border-color: transparent;
 }
 .sd-radio-checked.sd-radio-disabled .sd-radio-icon::after {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-radio-radio-color-dot-bg-checked-disabled, var(--component-radio-color-dot-bg-checked-disabled, var(--component-radio-radio-color-bg-disabled, var(--component-radio-color-bg-disabled, var(--sd-color-fill-2)))));
 }
 .sd-radio-checked.sd-radio-disabled .sd-radio-label {
-  color: var(--sd-color-text-4);
+  color: var(--component-radio-radio-color-text-checked-disabled, var(--component-radio-color-text-checked-disabled, var(--sd-color-text-4)));
 }
 .sd-radio:hover .sd-radio-icon-hover::before {
-  background-color: var(--sd-color-neutral-2);
+  background-color: var(--component-radio-radio-mask-bg-color-bg, var(--component-radio-mask-bg-color-bg, var(--sd-color-neutral-2)));
 }
 
 .sd-radio-group {
@@ -122,32 +122,33 @@
   box-sizing: border-box;
 }
 .sd-radio-group .sd-radio {
-  margin-right: 20px;
+  margin-right: var(--component-radio-radio-group-margin-right, var(--component-radio-group-margin-right, var(--spacing-8, 20px)));
 }
 .sd-radio-group-button {
   display: inline-flex;
+  width: fit-content;
   padding: 1.5px;
   line-height: 26px;
-  background-color: var(--sd-color-fill-2);
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-radio-radio-group-button-color-bg, var(--component-radio-group-button-color-bg, var(--sd-color-fill-2)));
+  border-radius: var(--component-radio-radio-button-bg-border-radius, var(--component-radio-button-bg-border-radius, var(--component-radio-radio-button-border-radius, var(--component-radio-button-border-radius, var(--sd-border-radius-small)))));
 }
 
 .sd-radio-button {
   position: relative;
   display: inline-block;
   margin: 1.5px;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  color: var(--component-radio-radio-button-color-text, var(--component-radio-button-color-text, var(--sd-color-text-2)));
+  font-size: var(--component-radio-radio-font-text-size, var(--component-radio-font-text-size, var(--font-size-body-3, 14px)));
   line-height: 26px;
-  background-color: transparent;
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-radio-radio-button-color-bg, var(--component-radio-button-color-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-radio-radio-button-border-radius, var(--component-radio-button-border-radius, var(--sd-border-radius-small)));
   cursor: pointer;
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-radio-button-content {
   position: relative;
   display: block;
-  padding: 0 12px;
+  padding: 0 var(--component-radio-radio-button-padding-horizontal, var(--component-radio-button-padding-horizontal, var(--spacing-6, 12px)));
 }
 .sd-radio-button:not(:first-of-type)::before {
   position: absolute;
@@ -155,8 +156,8 @@
   left: -2px;
   display: block;
   width: 1px;
-  height: 14px;
-  background-color: var(--sd-color-neutral-3);
+  height: var(--component-radio-radio-button-size-separator-height, var(--component-radio-button-size-separator-height, 14px));
+  background-color: var(--component-radio-radio-button-color-separator-bg, var(--component-radio-button-color-separator-bg, var(--sd-color-neutral-3)));
   transform: translateY(-50%);
   transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
@@ -165,21 +166,21 @@
   opacity: 0;
 }
 .sd-radio-button:hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-bg-5);
+  color: var(--component-radio-radio-button-color-text-hover, var(--component-radio-button-color-text-hover, var(--component-radio-radio-color-text, var(--component-radio-color-text, var(--sd-color-text-1)))));
+  background-color: var(--component-radio-radio-button-color-bg-hover, var(--component-radio-button-color-bg-hover, var(--component-radio-radio-button-color-bg-active, var(--component-radio-button-color-bg-active, var(--sd-color-bg-5)))));
 }
 .sd-radio-button.sd-radio-checked {
-  color: rgb(var(--sd-primary-6));
-  background-color: var(--sd-color-bg-5);
+  color: var(--component-radio-radio-button-color-text-active, var(--component-radio-button-color-text-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  background-color: var(--component-radio-radio-button-color-bg-active, var(--component-radio-button-color-bg-active, var(--sd-color-bg-5)));
 }
 .sd-radio-button.sd-radio-disabled {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-radio-radio-button-color-text-disabled, var(--component-radio-button-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-radio-radio-button-color-bg-disabled, var(--component-radio-button-color-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-radio-button.sd-radio-disabled.sd-radio-checked {
-  color: var(--sd-color-primary-light-3);
-  background-color: var(--sd-color-bg-5);
+  color: var(--component-radio-radio-button-color-text-checked-disabled, var(--component-radio-button-color-text-checked-disabled, var(--sd-color-primary-light-3)));
+  background-color: var(--component-radio-radio-button-color-bg-checked-disabled, var(--component-radio-button-color-bg-checked-disabled, var(--component-radio-radio-button-color-bg-active, var(--component-radio-button-color-bg-active, var(--sd-color-bg-5)))));
 }
 
 .sd-radio-group-size-small {
@@ -187,7 +188,7 @@
 }
 .sd-radio-group-size-small.sd-radio-group-button,
 .sd-radio-group-size-small .sd-radio-button {
-  font-size: 14px;
+  font-size: var(--component-radio-radio-font-text-size-small, var(--component-radio-font-text-size-small, var(--font-size-body-3, 14px)));
   line-height: 22px;
 }
 .sd-radio-group-size-large {
@@ -195,7 +196,7 @@
 }
 .sd-radio-group-size-large.sd-radio-group-button,
 .sd-radio-group-size-large .sd-radio-button {
-  font-size: 14px;
+  font-size: var(--component-radio-radio-font-text-size-large, var(--component-radio-font-text-size-large, var(--font-size-body-3, 14px)));
   line-height: 30px;
 }
 .sd-radio-group-size-mini {
@@ -203,20 +204,20 @@
 }
 .sd-radio-group-size-mini.sd-radio-group-button,
 .sd-radio-group-size-mini .sd-radio-button {
-  font-size: 12px;
+  font-size: var(--component-radio-radio-font-text-size-mini, var(--component-radio-font-text-size-mini, var(--font-size-body-1, 12px)));
   line-height: 18px;
 }
 
 .sd-radio-group-direction-vertical .sd-radio {
   display: flex;
   margin-right: 0;
-  line-height: 32px;
+  line-height: var(--component-radio-radio-group-size-line-height-vertical, var(--component-radio-group-size-line-height-vertical, var(--size-8, 32px)));
 }
 
-:where(body, [sd-theme])[sd-theme=dark] .sd-radio-button.sd-radio-checked,
-:where(body, [sd-theme])[sd-theme=dark] .sd-radio-button:not(.sd-radio-disabled):hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-radio-button.sd-radio-checked,
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-radio-button:not(.sd-radio-disabled):hover {
   background-color: var(--sd-color-fill-3);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-radio-button::after {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-radio-button::after {
   background-color: var(--sd-color-bg-3);
 }

package/es/radio/style/index.scss

@@ -144,6 +144,7 @@ $radio-prefix-cls: string.unquote('#{theme.$prefix}-radio');
   // button type
   &-button {
     display: inline-flex;
+    width: fit-content;
     padding: ($radio-button-spacing * 0.5);
     line-height: $radio-size-default-height - $radio-button-spacing * 2;
     background-color: $radio-group-button-color-bg;