@sdata/web-vue 4.7.1 → 5.0.0

package/es/auto-complete/style/index.css

@@ -24,36 +24,36 @@
  **********************************************/
 .sd-autocomplete-popup .sd-select-popup {
   background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-fill-3);
-  border-radius: var(--sd-border-radius-medium);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--component-auto-complete-auto-complete-popup-color-border, var(--component-auto-complete-popup-color-border, var(--sd-color-fill-3)));
+  border-radius: var(--component-auto-complete-auto-complete-popup-border-radius, var(--component-auto-complete-popup-border-radius, var(--sd-border-radius-medium)));
+  box-shadow: var(--component-auto-complete-auto-complete-popup-box-shadow, var(--component-auto-complete-popup-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-popup-inner {
-  max-height: 200px;
-  padding: 4px 0;
+  max-height: var(--component-auto-complete-auto-complete-popup-max-height, var(--component-auto-complete-popup-max-height, var(--size-50, 200px)));
+  padding: var(--component-auto-complete-auto-complete-popup-padding-vertical, var(--component-auto-complete-popup-padding-vertical, var(--spacing-2, 4px))) 0;
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-option {
-  height: 36px;
-  padding: 0 12px;
-  font-size: 14px;
-  line-height: 36px;
+  height: var(--component-auto-complete-auto-complete-option-height, var(--component-auto-complete-option-height, var(--size-9, 36px)));
+  padding: 0 var(--component-auto-complete-auto-complete-option-padding-horizontal, var(--component-auto-complete-option-padding-horizontal, var(--spacing-6, 12px)));
+  font-size: var(--component-auto-complete-auto-complete-popup-font-size, var(--component-auto-complete-popup-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-auto-complete-auto-complete-option-height, var(--component-auto-complete-option-height, var(--size-9, 36px)));
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-option {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-bg-popup);
+  color: var(--component-auto-complete-auto-complete-option-color-text-default, var(--component-auto-complete-option-color-text-default, var(--sd-color-text-1)));
+  background-color: var(--component-auto-complete-auto-complete-option-color-bg-default, var(--component-auto-complete-option-color-bg-default, var(--sd-color-bg-popup)));
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-option-selected {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-bg-popup);
+  color: var(--component-auto-complete-auto-complete-option-color-text-selected, var(--component-auto-complete-option-color-text-selected, var(--sd-color-text-1)));
+  background-color: var(--component-auto-complete-auto-complete-option-color-bg-selected, var(--component-auto-complete-option-color-bg-selected, var(--sd-color-bg-popup)));
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-option-hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-auto-complete-auto-complete-option-color-text-hover, var(--component-auto-complete-option-color-text-hover, var(--sd-color-text-1)));
+  background-color: var(--component-auto-complete-auto-complete-option-color-bg-hover, var(--component-auto-complete-option-color-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-option-disabled {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-bg-popup);
+  color: var(--component-auto-complete-auto-complete-option-color-text-disabled, var(--component-auto-complete-option-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-auto-complete-auto-complete-option-color-bg-disabled, var(--component-auto-complete-option-color-bg-disabled, var(--sd-color-bg-popup)));
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-option-selected {
-  font-weight: 500;
+  font-weight: var(--component-auto-complete-auto-complete-option-font-weight-selected, var(--component-auto-complete-option-font-weight-selected, var(--font-weight-500, 500)));
 }

package/es/auto-complete/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';
@@ -62,3 +63,96 @@ $auto-complete-option-color-text_selected: var(
 $auto-complete-option-color-text_disabled: var(
   string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
 );
+
+// @generated runtime tokens — pnpm theme:generate
+$auto-complete-popup-max-height: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-popup-max-height',
+  $auto-complete-popup-max-height,
+  'size-50'
+);
+$auto-complete-popup-border-radius: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-popup-border-radius',
+  $auto-complete-popup-border-radius
+);
+$auto-complete-popup-padding-vertical: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-popup-padding-vertical',
+  $auto-complete-popup-padding-vertical,
+  'spacing-2'
+);
+$auto-complete-popup-font-size: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-popup-font-size',
+  $auto-complete-popup-font-size,
+  'font-size-body-3'
+);
+$auto-complete-popup-color-border: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-popup-color-border',
+  $auto-complete-popup-color-border
+);
+$auto-complete-popup-box-shadow: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-popup-box-shadow',
+  $auto-complete-popup-box-shadow
+);
+$auto-complete-option-height: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-height',
+  $auto-complete-option-height,
+  'size-9'
+);
+$auto-complete-option-font-weight_selected: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-font-weight-selected',
+  $auto-complete-option-font-weight_selected,
+  'font-weight-500'
+);
+$auto-complete-option-padding-horizontal: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-padding-horizontal',
+  $auto-complete-option-padding-horizontal,
+  'spacing-6'
+);
+$auto-complete-option-color-bg_default: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-color-bg-default',
+  $auto-complete-option-color-bg_default
+);
+$auto-complete-option-color-bg_hover: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-color-bg-hover',
+  $auto-complete-option-color-bg_hover
+);
+$auto-complete-option-color-bg_selected: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-color-bg-selected',
+  $auto-complete-option-color-bg_selected
+);
+$auto-complete-option-color-bg_disabled: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-color-bg-disabled',
+  $auto-complete-option-color-bg_disabled
+);
+$auto-complete-option-color-text_default: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-color-text-default',
+  $auto-complete-option-color-text_default
+);
+$auto-complete-option-color-text_hover: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-color-text-hover',
+  $auto-complete-option-color-text_hover
+);
+$auto-complete-option-color-text_selected: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-color-text-selected',
+  $auto-complete-option-color-text_selected
+);
+$auto-complete-option-color-text_disabled: theme-runtime.token(
+  'auto-complete',
+  'auto-complete-option-color-text-disabled',
+  $auto-complete-option-color-text_disabled
+);

package/es/avatar/style/index.css

@@ -20,32 +20,32 @@
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  width: 40px;
-  height: 40px;
-  color: var(--sd-color-white);
-  font-size: 20px;
+  width: var(--component-avatar-avatar-size-default, var(--component-avatar-size-default, var(--size-10, 40px)));
+  height: var(--component-avatar-avatar-size-default, var(--component-avatar-size-default, var(--size-10, 40px)));
+  color: var(--component-avatar-avatar-color-text, var(--component-avatar-color-text, var(--sd-color-white)));
+  font-size: var(--component-avatar-avatar-font-size-text, var(--component-avatar-font-size-text, 20px));
   white-space: nowrap;
   vertical-align: middle;
-  background-color: var(--sd-color-fill-4);
+  background-color: var(--component-avatar-avatar-color-bg, var(--component-avatar-color-bg, var(--sd-color-fill-4)));
 }
 .sd-avatar-circle {
-  border-radius: var(--sd-border-radius-circle);
+  border-radius: var(--component-avatar-avatar-circle-border-radius, var(--component-avatar-circle-border-radius, var(--sd-border-radius-circle)));
 }
 .sd-avatar-circle .sd-avatar-image {
   overflow: hidden;
-  border-radius: var(--sd-border-radius-circle);
+  border-radius: var(--component-avatar-avatar-circle-border-radius, var(--component-avatar-circle-border-radius, var(--sd-border-radius-circle)));
 }
 .sd-avatar-square {
-  border-radius: var(--sd-border-radius-medium);
+  border-radius: var(--component-avatar-avatar-square-border-radius, var(--component-avatar-square-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-avatar-square .sd-avatar-image {
   overflow: hidden;
-  border-radius: var(--sd-border-radius-medium);
+  border-radius: var(--component-avatar-avatar-square-border-radius, var(--component-avatar-square-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-avatar-text {
   position: absolute;
   left: 50%;
-  font-weight: 500;
+  font-weight: var(--component-avatar-avatar-font-weight-text, var(--component-avatar-font-weight-text, var(--font-weight-500, 500)));
   line-height: 1;
   transform: translateX(-50%);
   transform-origin: 0 center;
@@ -69,17 +69,17 @@
 }
 .sd-avatar-trigger-icon-button {
   position: absolute;
-  right: -4px;
-  bottom: -4px;
+  right: -var(--component-avatar-avatar-spacing-trigger-button-right, var(--component-avatar-spacing-trigger-button-right, var(--spacing-2, 4px)));
+  bottom: -var(--component-avatar-avatar-spacing-trigger-button-bottom, var(--component-avatar-spacing-trigger-button-bottom, var(--spacing-2, 4px)));
   z-index: 1;
-  width: 20px;
-  height: 20px;
-  color: var(--sd-color-fill-4);
-  font-size: 12px;
-  line-height: 20px;
+  width: var(--component-avatar-avatar-size-trigger-button, var(--component-avatar-size-trigger-button, var(--size-5, 20px)));
+  height: var(--component-avatar-avatar-size-trigger-button, var(--component-avatar-size-trigger-button, var(--size-5, 20px)));
+  color: var(--component-avatar-avatar-color-trigger-icon-button, var(--component-avatar-color-trigger-icon-button, var(--sd-color-fill-4)));
+  font-size: var(--component-avatar-avatar-size-trigger-icon, var(--component-avatar-size-trigger-icon, var(--size-3, 12px)));
+  line-height: var(--component-avatar-avatar-size-trigger-button, var(--component-avatar-size-trigger-button, var(--size-5, 20px)));
   text-align: center;
-  background-color: var(--sd-color-neutral-2);
-  border-radius: var(--sd-border-radius-circle);
+  background-color: var(--component-avatar-avatar-color-trigger-button-bg, var(--component-avatar-color-trigger-button-bg, var(--sd-color-neutral-2)));
+  border-radius: var(--component-avatar-avatar-border-trigger-button-radius, var(--component-avatar-border-trigger-button-radius, var(--sd-border-radius-circle)));
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-avatar-trigger-icon-mask {
@@ -92,15 +92,15 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  color: var(--sd-color-white);
+  color: var(--component-avatar-avatar-color-trigger-mask-icon, var(--component-avatar-color-trigger-mask-icon, var(--sd-color-white)));
   font-size: 16px;
-  background-color: color-mix(in srgb, #1d2129 60%, transparent);
-  border-radius: var(--sd-border-radius-medium);
+  background-color: color-mix(in srgb, #1d2129 var(--component-avatar-avatar-opacity-trigger-mask-bg, var(--component-avatar-opacity-trigger-mask-bg, var(--opacity-6, 60%))), transparent);
+  border-radius: var(--component-avatar-avatar-square-border-radius, var(--component-avatar-square-border-radius, var(--sd-border-radius-medium)));
   opacity: 0;
   transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-avatar-circle .sd-avatar-trigger-icon-mask {
-  border-radius: var(--sd-border-radius-circle);
+  border-radius: var(--component-avatar-avatar-circle-border-radius, var(--component-avatar-circle-border-radius, var(--sd-border-radius-circle)));
 }
 .sd-avatar-with-trigger-icon {
   cursor: pointer;
@@ -110,37 +110,37 @@
   opacity: 1;
 }
 .sd-avatar-with-trigger-icon:hover .sd-avatar-trigger-icon-button {
-  background-color: var(--sd-color-neutral-3);
+  background-color: var(--component-avatar-avatar-color-trigger-button-bg-hover, var(--component-avatar-color-trigger-button-bg-hover, var(--sd-color-neutral-3)));
 }
 .sd-avatar-rtl {
   direction: rtl;
 }
 .sd-avatar-rtl .sd-avatar-trigger-icon-button {
   right: unset;
-  left: -4px;
+  left: -var(--component-avatar-avatar-spacing-trigger-button-right, var(--component-avatar-spacing-trigger-button-right, var(--spacing-2, 4px)));
 }
 .sd-avatar-group {
   display: inline-block;
   line-height: 0;
 }
 .sd-avatar-group-max-count-avatar {
-  color: var(--sd-color-white);
-  font-size: 20px;
+  color: var(--component-avatar-avatar-color-max-count-text, var(--component-avatar-color-max-count-text, var(--sd-color-white)));
+  font-size: var(--component-avatar-avatar-font-size-max-count, var(--component-avatar-font-size-max-count, 20px));
   cursor: default;
 }
 .sd-avatar-group-rtl {
   direction: rtl;
 }
 .sd-avatar-group .sd-avatar {
-  border: 2px solid var(--sd-color-bg-2);
+  border: var(--component-avatar-avatar-group-item-border-width, var(--component-avatar-group-item-border-width, 2px)) solid var(--component-avatar-avatar-color-group-item-border, var(--component-avatar-color-group-item-border, var(--sd-color-bg-2)));
 }
 .sd-avatar-group .sd-avatar:not(:first-child) {
-  margin-left: -10px;
+  margin-left: var(--component-avatar-avatar-group-item-margin-left, var(--component-avatar-group-item-margin-left, -10px));
 }
 .sd-avatar-group-popover .sd-avatar:not(:first-child) {
-  margin-left: 4px !important;
+  margin-left: var(--component-avatar-avatar-group-popover-item-spacing, var(--component-avatar-group-popover-item-spacing, var(--spacing-2, 4px))) !important;
 }
 .sd-avatar-group-popover .sd-avatar-rtl:not(:first-child) {
-  margin-right: 4px !important;
+  margin-right: var(--component-avatar-avatar-group-popover-item-spacing, var(--component-avatar-group-popover-item-spacing, var(--spacing-2, 4px))) !important;
   margin-left: 0 !important;
 }

package/es/avatar/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';
@@ -55,3 +56,120 @@ $avatar-border-trigger-button-radius: global.$radius-circle;
 $avatar-font-size-max-count: 20px;
 
 $avatar-color-max-count-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+// @generated runtime tokens — pnpm theme:generate
+$avatar-size-default: theme-runtime.token(
+  'avatar',
+  'avatar-size-default',
+  $avatar-size-default,
+  'size-10'
+);
+$avatar-font-size-text: theme-runtime.token(
+  'avatar',
+  'avatar-font-size-text',
+  $avatar-font-size-text
+);
+$avatar-color-text: theme-runtime.token('avatar', 'avatar-color-text', $avatar-color-text);
+$avatar-color-bg: theme-runtime.token('avatar', 'avatar-color-bg', $avatar-color-bg);
+$avatar-color-group-item-border: theme-runtime.token(
+  'avatar',
+  'avatar-color-group-item-border',
+  $avatar-color-group-item-border
+);
+$avatar-group-item-border-width: theme-runtime.token(
+  'avatar',
+  'avatar-group-item-border-width',
+  $avatar-group-item-border-width
+);
+$avatar-group-item-margin-left: theme-runtime.token(
+  'avatar',
+  'avatar-group-item-margin-left',
+  $avatar-group-item-margin-left
+);
+$avatar-group-popover-item-spacing: theme-runtime.token(
+  'avatar',
+  'avatar-group-popover-item-spacing',
+  $avatar-group-popover-item-spacing,
+  'spacing-2'
+);
+$avatar-font-weight-text: theme-runtime.token(
+  'avatar',
+  'avatar-font-weight-text',
+  $avatar-font-weight-text,
+  'font-weight-500'
+);
+$avatar-circle-border-radius: theme-runtime.token(
+  'avatar',
+  'avatar-circle-border-radius',
+  $avatar-circle-border-radius
+);
+$avatar-square-border-radius: theme-runtime.token(
+  'avatar',
+  'avatar-square-border-radius',
+  $avatar-square-border-radius
+);
+$avatar-size-trigger-button: theme-runtime.token(
+  'avatar',
+  'avatar-size-trigger-button',
+  $avatar-size-trigger-button,
+  'size-5'
+);
+$avatar-color-trigger-button-bg: theme-runtime.token(
+  'avatar',
+  'avatar-color-trigger-button-bg',
+  $avatar-color-trigger-button-bg
+);
+$avatar-color-trigger-button-bg_hover: theme-runtime.token(
+  'avatar',
+  'avatar-color-trigger-button-bg-hover',
+  $avatar-color-trigger-button-bg_hover
+);
+$avatar-color-trigger-mask-icon: theme-runtime.token(
+  'avatar',
+  'avatar-color-trigger-mask-icon',
+  $avatar-color-trigger-mask-icon
+);
+$avatar-opacity-trigger-mask-bg: theme-runtime.token(
+  'avatar',
+  'avatar-opacity-trigger-mask-bg',
+  $avatar-opacity-trigger-mask-bg,
+  'opacity-6'
+);
+$avatar-color-trigger-icon-button: theme-runtime.token(
+  'avatar',
+  'avatar-color-trigger-icon-button',
+  $avatar-color-trigger-icon-button
+);
+$avatar-spacing-trigger-button-right: theme-runtime.token(
+  'avatar',
+  'avatar-spacing-trigger-button-right',
+  $avatar-spacing-trigger-button-right,
+  'spacing-2'
+);
+$avatar-spacing-trigger-button-bottom: theme-runtime.token(
+  'avatar',
+  'avatar-spacing-trigger-button-bottom',
+  $avatar-spacing-trigger-button-bottom,
+  'spacing-2'
+);
+$avatar-size-trigger-icon: theme-runtime.token(
+  'avatar',
+  'avatar-size-trigger-icon',
+  $avatar-size-trigger-icon,
+  'size-3'
+);
+$avatar-border-trigger-button-radius: theme-runtime.token(
+  'avatar',
+  'avatar-border-trigger-button-radius',
+  $avatar-border-trigger-button-radius
+);
+$avatar-font-size-max-count: theme-runtime.token(
+  'avatar',
+  'avatar-font-size-max-count',
+  $avatar-font-size-max-count
+);
+$avatar-color-max-count-text: theme-runtime.token(
+  'avatar',
+  'avatar-color-max-count-text',
+  $avatar-color-max-count-text
+);

package/es/back-top/style/index.css

@@ -17,29 +17,29 @@
 /********* icon hover *********/
 .sd-back-top {
   position: fixed;
-  right: 24px;
-  bottom: 24px;
+  right: var(--component-back-top-backtop-margin-right, var(--component-back-top-margin-right, var(--spacing-9, 24px)));
+  bottom: var(--component-back-top-backtop-margin-bottom, var(--component-back-top-margin-bottom, var(--spacing-9, 24px)));
   z-index: 999;
 }
 .sd-back-top-btn {
-  width: 40px;
-  height: 40px;
-  color: var(--sd-color-white);
-  font-size: 12px;
+  width: var(--component-back-top-backtop-button-size-width, var(--component-back-top-button-size-width, var(--size-10, 40px)));
+  height: var(--component-back-top-backtop-button-size-width, var(--component-back-top-button-size-width, var(--size-10, 40px)));
+  color: var(--component-back-top-backtop-button-color-text, var(--component-back-top-button-color-text, var(--sd-color-white)));
+  font-size: var(--component-back-top-backtop-button-size-font, var(--component-back-top-button-size-font, var(--font-size-body-1, 12px)));
   text-align: center;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-back-top-backtop-button-color-bg, var(--component-back-top-button-color-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   border: none;
-  border-radius: var(--sd-border-radius-circle);
+  border-radius: var(--component-back-top-backtop-button-border-radius, var(--component-back-top-button-border-radius, var(--sd-border-radius-circle)));
   outline: none;
   cursor: pointer;
   transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-back-top-btn:hover {
-  background-color: rgb(var(--sd-primary-5));
+  background-color: var(--component-back-top-backtop-button-color-bg-hover, var(--component-back-top-button-color-bg-hover, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
 }
 .sd-back-top-btn:focus-visible {
-  box-shadow: 0 0 0 2px rgb(var(--sd-primary-3));
+  box-shadow: 0 0 0 2px var(--component-back-top-backtop-button-color-focus-ring, var(--component-back-top-button-color-focus-ring, var(--color-primary-3, var(--sd-color-primary-3, rgb(var(--sd-primary-3))))));
 }
 .sd-back-top-btn svg {
-  font-size: 14px;
+  font-size: var(--component-back-top-backtop-button-size-icon, var(--component-back-top-button-size-icon, 14px));
 }

package/es/back-top/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';
@@ -25,3 +26,62 @@ $backtop-button-color-focus-ring: global.$color-primary-3;
 $backtop-button-border-radius: global.$radius-circle;
 
 $backtop-button-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+// @generated runtime tokens — pnpm theme:generate
+$backtop-margin-bottom: theme-runtime.token(
+  'back-top',
+  'backtop-margin-bottom',
+  $backtop-margin-bottom,
+  'spacing-9'
+);
+$backtop-margin-right: theme-runtime.token(
+  'back-top',
+  'backtop-margin-right',
+  $backtop-margin-right,
+  'spacing-9'
+);
+$backtop-button-size-width: theme-runtime.token(
+  'back-top',
+  'backtop-button-size-width',
+  $backtop-button-size-width,
+  'size-10'
+);
+$backtop-button-size-font: theme-runtime.token(
+  'back-top',
+  'backtop-button-size-font',
+  $backtop-button-size-font,
+  'font-size-body-1'
+);
+$backtop-button-size-icon: theme-runtime.token(
+  'back-top',
+  'backtop-button-size-icon',
+  $backtop-button-size-icon
+);
+$backtop-button-color-bg: theme-runtime.token(
+  'back-top',
+  'backtop-button-color-bg',
+  $backtop-button-color-bg,
+  'color-primary-6'
+);
+$backtop-button-color-bg_hover: theme-runtime.token(
+  'back-top',
+  'backtop-button-color-bg-hover',
+  $backtop-button-color-bg_hover,
+  'color-primary-5'
+);
+$backtop-button-color-focus-ring: theme-runtime.token(
+  'back-top',
+  'backtop-button-color-focus-ring',
+  $backtop-button-color-focus-ring,
+  'color-primary-3'
+);
+$backtop-button-border-radius: theme-runtime.token(
+  'back-top',
+  'backtop-button-border-radius',
+  $backtop-button-border-radius
+);
+$backtop-button-color-text: theme-runtime.token(
+  'back-top',
+  'backtop-button-color-text',
+  $backtop-button-color-text
+);

package/es/badge/style/index.css

@@ -31,7 +31,7 @@
   box-sizing: border-box;
   overflow: hidden;
   text-align: center;
-  border-radius: 20px;
+  border-radius: var(--component-badge-badge-size-count-height, var(--component-badge-size-count-height, var(--size-5, 20px)));
   transform: translate(50%, -50%);
   transform-origin: 100% 0%;
 }
@@ -42,20 +42,20 @@
   background-color: var(--sd-color-bg-2);
 }
 .sd-badge-number, .sd-badge-text {
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  color: var(--sd-color-white);
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 20px;
-  background-color: rgb(var(--sd-danger-6));
+  min-width: var(--component-badge-badge-size-count-height, var(--component-badge-size-count-height, var(--size-5, 20px)));
+  height: var(--component-badge-badge-size-count-height, var(--component-badge-size-count-height, var(--size-5, 20px)));
+  padding: 0 var(--component-badge-badge-padding-count-horizontal, var(--component-badge-padding-count-horizontal, var(--spacing-3, 6px)));
+  color: var(--component-badge-badge-color-count-text, var(--component-badge-color-count-text, var(--sd-color-white)));
+  font-weight: var(--component-badge-badge-font-count-weight, var(--component-badge-font-count-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-badge-badge-font-count-size, var(--component-badge-font-count-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-badge-badge-size-count-height, var(--component-badge-size-count-height, var(--size-5, 20px)));
+  background-color: var(--component-badge-badge-color-count-bg, var(--component-badge-color-count-bg, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
   box-shadow: 0 0 0 2px var(--sd-color-bg-2);
 }
 .sd-badge-dot {
-  width: 6px;
-  height: 6px;
-  background-color: rgb(var(--sd-danger-6));
+  width: var(--component-badge-badge-size-dot-width, var(--component-badge-size-dot-width, 6px));
+  height: var(--component-badge-badge-size-dot-width, var(--component-badge-size-dot-width, 6px));
+  background-color: var(--component-badge-badge-color-count-bg, var(--component-badge-color-count-bg, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
   border-radius: var(--sd-border-radius-circle);
   box-shadow: 0 0 0 2px var(--sd-color-bg-2);
 }
@@ -72,69 +72,69 @@
 }
 .sd-badge-status-dot {
   display: inline-block;
-  width: 6px;
-  height: 6px;
+  width: var(--component-badge-badge-size-dot-width, var(--component-badge-size-dot-width, 6px));
+  height: var(--component-badge-badge-size-dot-width, var(--component-badge-size-dot-width, 6px));
   border-radius: var(--sd-border-radius-circle);
 }
 .sd-badge-status-normal {
-  background-color: var(--sd-color-fill-4);
+  background-color: var(--component-badge-badge-color-dot-bg-default, var(--component-badge-color-dot-bg-default, var(--sd-color-fill-4)));
 }
 .sd-badge-status-processing {
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-badge-badge-color-dot-bg-processing, var(--component-badge-color-dot-bg-processing, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-badge-status-success {
-  background-color: rgb(var(--sd-success-6));
+  background-color: var(--component-badge-badge-color-dot-bg-success, var(--component-badge-color-dot-bg-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-badge-status-warning {
-  background-color: rgb(var(--sd-warning-6));
+  background-color: var(--component-badge-badge-color-dot-bg-warning, var(--component-badge-color-dot-bg-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-badge-status-danger {
-  background-color: rgb(var(--sd-danger-6));
+  background-color: var(--component-badge-badge-color-dot-bg-error, var(--component-badge-color-dot-bg-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-badge-color-red {
-  background-color: rgb(var(--sd-danger-6));
+  background-color: var(--component-badge-badge-red-color-dot-bg, var(--component-badge-red-color-dot-bg, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-badge-color-orangered {
-  background-color: #f77234;
+  background-color: var(--component-badge-badge-orangered-color-dot-bg, var(--component-badge-orangered-color-dot-bg, #f77234));
 }
 .sd-badge-color-orange {
-  background-color: rgb(var(--sd-orange-6));
+  background-color: var(--component-badge-badge-orange-color-dot-bg, var(--component-badge-orange-color-dot-bg, rgb(var(--sd-orange-6))));
 }
 .sd-badge-color-gold {
-  background-color: rgb(var(--sd-gold-6));
+  background-color: var(--component-badge-badge-gold-color-dot-bg, var(--component-badge-gold-color-dot-bg, rgb(var(--sd-gold-6))));
 }
 .sd-badge-color-lime {
-  background-color: rgb(var(--sd-lime-6));
+  background-color: var(--component-badge-badge-lime-color-dot-bg, var(--component-badge-lime-color-dot-bg, rgb(var(--sd-lime-6))));
 }
 .sd-badge-color-green {
-  background-color: rgb(var(--sd-success-6));
+  background-color: var(--component-badge-badge-green-color-dot-bg, var(--component-badge-green-color-dot-bg, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-badge-color-cyan {
-  background-color: rgb(var(--sd-cyan-6));
+  background-color: var(--component-badge-badge-cyan-color-dot-bg, var(--component-badge-cyan-color-dot-bg, rgb(var(--sd-cyan-6))));
 }
 .sd-badge-color-sdblue {
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-badge-badge-sdblue-color-dot-bg, var(--component-badge-sdblue-color-dot-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-badge-color-purple {
-  background-color: rgb(var(--sd-purple-6));
+  background-color: var(--component-badge-badge-purple-color-dot-bg, var(--component-badge-purple-color-dot-bg, rgb(var(--sd-purple-6))));
 }
 .sd-badge-color-pinkpurple {
-  background-color: rgb(var(--sd-pinkpurple-6));
+  background-color: var(--component-badge-badge-pinkpurple-color-dot-bg, var(--component-badge-pinkpurple-color-dot-bg, rgb(var(--sd-pinkpurple-6))));
 }
 .sd-badge-color-magenta {
-  background-color: rgb(var(--sd-magenta-6));
+  background-color: var(--component-badge-badge-magenta-color-dot-bg, var(--component-badge-magenta-color-dot-bg, rgb(var(--sd-magenta-6))));
 }
 .sd-badge-color-gray {
-  background-color: rgb(var(--sd-gray-4));
+  background-color: var(--component-badge-badge-gray-color-dot-bg, var(--component-badge-gray-color-dot-bg, rgb(var(--sd-gray-4))));
 }
 .sd-badge .sd-badge-status-text {
-  margin-left: 8px;
-  color: var(--sd-color-text-1);
-  font-size: 12px;
+  margin-left: var(--component-badge-badge-margin-status-text-left, var(--component-badge-margin-status-text-left, var(--spacing-4, 8px)));
+  color: var(--component-badge-badge-color-status-text, var(--component-badge-color-status-text, var(--sd-color-text-1)));
+  font-size: var(--component-badge-badge-font-status-text-size, var(--component-badge-font-status-text-size, var(--font-size-body-1, 12px)));
   line-height: 1.5715;
 }
 .sd-badge-rtl .sd-badge-status-text {
-  margin-right: 8px;
+  margin-right: var(--component-badge-badge-margin-status-text-left, var(--component-badge-margin-status-text-left, var(--spacing-4, 8px)));
   margin-left: 0;
 }
 .sd-badge-number-text {