@sdata/web-vue 4.7.1 → 5.0.0

package/es/form/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';
@@ -137,3 +138,342 @@ $form-color-tip-icon-text_warning: global.$color-warning-6;
 $form-color-tip-text_validating: global.$color-primary-6;
 
 $form-color-tip-icon-text_validating: global.$color-primary-6;
+
+// @generated runtime tokens — pnpm theme:generate
+$form-size-mini-margin-item-bottom: theme-runtime.token(
+  'form',
+  'form-size-mini-margin-item-bottom',
+  $form-size-mini-margin-item-bottom,
+  'spacing-7'
+);
+$form-size-small-margin-item-bottom: theme-runtime.token(
+  'form',
+  'form-size-small-margin-item-bottom',
+  $form-size-small-margin-item-bottom,
+  'spacing-8'
+);
+$form-size-default-margin-item-bottom: theme-runtime.token(
+  'form',
+  'form-size-default-margin-item-bottom',
+  $form-size-default-margin-item-bottom,
+  'spacing-8'
+);
+$form-size-large-margin-item-bottom: theme-runtime.token(
+  'form',
+  'form-size-large-margin-item-bottom',
+  $form-size-large-margin-item-bottom,
+  'spacing-8'
+);
+$form-size-mini-font-label-size: theme-runtime.token(
+  'form',
+  'form-size-mini-font-label-size',
+  $form-size-mini-font-label-size,
+  'font-size-body-1'
+);
+$form-size-small-font-label-size: theme-runtime.token(
+  'form',
+  'form-size-small-font-label-size',
+  $form-size-small-font-label-size,
+  'font-size-body-3'
+);
+$form-size-large-font-label-size: theme-runtime.token(
+  'form',
+  'form-size-large-font-label-size',
+  $form-size-large-font-label-size,
+  'font-size-body-3'
+);
+$form-size-default-font-label-size: theme-runtime.token(
+  'form',
+  'form-size-default-font-label-size',
+  $form-size-default-font-label-size,
+  'font-size-body-3'
+);
+$form-font-extra-text-size: theme-runtime.token(
+  'form',
+  'form-font-extra-text-size',
+  $form-font-extra-text-size,
+  'font-size-body-1'
+);
+$form-font-error-text-size: theme-runtime.token(
+  'form',
+  'form-font-error-text-size',
+  $form-font-error-text-size,
+  'font-size-body-1'
+);
+$form-margin-label-right: theme-runtime.token(
+  'form',
+  'form-margin-label-right',
+  $form-margin-label-right,
+  'spacing-7'
+);
+$form-margin-extra-bottom: theme-runtime.token(
+  'form',
+  'form-margin-extra-bottom',
+  $form-margin-extra-bottom,
+  'spacing-2'
+);
+$form-margin-extra-top: theme-runtime.token(
+  'form',
+  'form-margin-extra-top',
+  $form-margin-extra-top,
+  'spacing-2'
+);
+$form-inline-margin-item-right: theme-runtime.token(
+  'form',
+  'form-inline-margin-item-right',
+  $form-inline-margin-item-right,
+  'spacing-9'
+);
+$form-inline-margin-item-bottom: theme-runtime.token(
+  'form',
+  'form-inline-margin-item-bottom',
+  $form-inline-margin-item-bottom,
+  'spacing-4'
+);
+$form-vertical-margin-label-bottom: theme-runtime.token(
+  'form',
+  'form-vertical-margin-label-bottom',
+  $form-vertical-margin-label-bottom,
+  'spacing-4'
+);
+$form-color-extra-text: theme-runtime.token(
+  'form',
+  'form-color-extra-text',
+  $form-color-extra-text
+);
+$form-color-text-label: theme-runtime.token(
+  'form',
+  'form-color-text-label',
+  $form-color-text-label
+);
+$form-margin-tooltip-left: theme-runtime.token(
+  'form',
+  'form-margin-tooltip-left',
+  $form-margin-tooltip-left,
+  'spacing-2'
+);
+$form-color-text-tooltip: theme-runtime.token(
+  'form',
+  'form-color-text-tooltip',
+  $form-color-text-tooltip
+);
+$form-color-bg_warning: theme-runtime.token(
+  'form',
+  'form-color-bg-warning',
+  $form-color-bg_warning
+);
+$form-color-bg_warning_hover: theme-runtime.token(
+  'form',
+  'form-color-bg-warning-hover',
+  $form-color-bg_warning_hover
+);
+$form-color-bg_warning_focus: theme-runtime.token(
+  'form',
+  'form-color-bg-warning-focus',
+  $form-color-bg_warning_focus
+);
+$form-color-border_warning: theme-runtime.token(
+  'form',
+  'form-color-border-warning',
+  $form-color-border_warning,
+  'color-transparent'
+);
+$form-color-border_warning_focus: theme-runtime.token(
+  'form',
+  'form-color-border-warning-focus',
+  $form-color-border_warning_focus,
+  'color-warning-6'
+);
+$form-color-border_warning_hover: theme-runtime.token(
+  'form',
+  'form-color-border-warning-hover',
+  $form-color-border_warning_hover,
+  'color-transparent'
+);
+$form-size-shadow_warning_focus: theme-runtime.token(
+  'form',
+  'form-size-shadow-warning-focus',
+  $form-size-shadow_warning_focus,
+  'shadow-distance-none'
+);
+$form-color-shadow_warning_focus: theme-runtime.token(
+  'form',
+  'form-color-shadow-warning-focus',
+  $form-color-shadow_warning_focus
+);
+$form-color-bg_success: theme-runtime.token(
+  'form',
+  'form-color-bg-success',
+  $form-color-bg_success
+);
+$form-color-bg_success_hover: theme-runtime.token(
+  'form',
+  'form-color-bg-success-hover',
+  $form-color-bg_success_hover
+);
+$form-color-bg_success_focus: theme-runtime.token(
+  'form',
+  'form-color-bg-success-focus',
+  $form-color-bg_success_focus
+);
+$form-color-border_success: theme-runtime.token(
+  'form',
+  'form-color-border-success',
+  $form-color-border_success,
+  'color-transparent'
+);
+$form-color-border_success_focus: theme-runtime.token(
+  'form',
+  'form-color-border-success-focus',
+  $form-color-border_success_focus,
+  'color-success-6'
+);
+$form-color-border_success_hover: theme-runtime.token(
+  'form',
+  'form-color-border-success-hover',
+  $form-color-border_success_hover,
+  'color-transparent'
+);
+$form-size-shadow_success_focus: theme-runtime.token(
+  'form',
+  'form-size-shadow-success-focus',
+  $form-size-shadow_success_focus,
+  'shadow-distance-none'
+);
+$form-color-shadow_success_focus: theme-runtime.token(
+  'form',
+  'form-color-shadow-success-focus',
+  $form-color-shadow_success_focus
+);
+$form-color-bg_error: theme-runtime.token('form', 'form-color-bg-error', $form-color-bg_error);
+$form-color-bg_error_hover: theme-runtime.token(
+  'form',
+  'form-color-bg-error-hover',
+  $form-color-bg_error_hover
+);
+$form-color-bg_error_focus: theme-runtime.token(
+  'form',
+  'form-color-bg-error-focus',
+  $form-color-bg_error_focus
+);
+$form-color-border_error: theme-runtime.token(
+  'form',
+  'form-color-border-error',
+  $form-color-border_error,
+  'color-transparent'
+);
+$form-color-border_error_focus: theme-runtime.token(
+  'form',
+  'form-color-border-error-focus',
+  $form-color-border_error_focus,
+  'color-danger-6'
+);
+$form-color-border_error_hover: theme-runtime.token(
+  'form',
+  'form-color-border-error-hover',
+  $form-color-border_error_hover,
+  'color-transparent'
+);
+$form-size-shadow_error_focus: theme-runtime.token(
+  'form',
+  'form-size-shadow-error-focus',
+  $form-size-shadow_error_focus,
+  'shadow-distance-none'
+);
+$form-color-shadow_error_focus: theme-runtime.token(
+  'form',
+  'form-color-shadow-error-focus',
+  $form-color-shadow_error_focus
+);
+$form-color-bg_validating: theme-runtime.token(
+  'form',
+  'form-color-bg-validating',
+  $form-color-bg_validating
+);
+$form-color-bg_validating_hover: theme-runtime.token(
+  'form',
+  'form-color-bg-validating-hover',
+  $form-color-bg_validating_hover
+);
+$form-color-bg_validating_focus: theme-runtime.token(
+  'form',
+  'form-color-bg-validating-focus',
+  $form-color-bg_validating_focus
+);
+$form-color-border_validating: theme-runtime.token(
+  'form',
+  'form-color-border-validating',
+  $form-color-border_validating,
+  'color-transparent'
+);
+$form-color-border_validating_focus: theme-runtime.token(
+  'form',
+  'form-color-border-validating-focus',
+  $form-color-border_validating_focus,
+  'color-primary-6'
+);
+$form-color-border_validating_hover: theme-runtime.token(
+  'form',
+  'form-color-border-validating-hover',
+  $form-color-border_validating_hover,
+  'color-transparent'
+);
+$form-size-shadow_validating_focus: theme-runtime.token(
+  'form',
+  'form-size-shadow-validating-focus',
+  $form-size-shadow_validating_focus,
+  'shadow-distance-none'
+);
+$form-color-shadow_validating_focus: theme-runtime.token(
+  'form',
+  'form-color-shadow-validating-focus',
+  $form-color-shadow_validating_focus
+);
+$form-color-tip-text_success: theme-runtime.token(
+  'form',
+  'form-color-tip-text-success',
+  $form-color-tip-text_success,
+  'color-success-6'
+);
+$form-color-tip-icon-text_success: theme-runtime.token(
+  'form',
+  'form-color-tip-icon-text-success',
+  $form-color-tip-icon-text_success,
+  'color-success-6'
+);
+$form-color-tip-text_error: theme-runtime.token(
+  'form',
+  'form-color-tip-text-error',
+  $form-color-tip-text_error,
+  'color-danger-6'
+);
+$form-color-tip-icon-text_error: theme-runtime.token(
+  'form',
+  'form-color-tip-icon-text-error',
+  $form-color-tip-icon-text_error,
+  'color-danger-6'
+);
+$form-color-tip-text_warning: theme-runtime.token(
+  'form',
+  'form-color-tip-text-warning',
+  $form-color-tip-text_warning,
+  'color-warning-6'
+);
+$form-color-tip-icon-text_warning: theme-runtime.token(
+  'form',
+  'form-color-tip-icon-text-warning',
+  $form-color-tip-icon-text_warning,
+  'color-warning-6'
+);
+$form-color-tip-text_validating: theme-runtime.token(
+  'form',
+  'form-color-tip-text-validating',
+  $form-color-tip-text_validating,
+  'color-primary-6'
+);
+$form-color-tip-icon-text_validating: theme-runtime.token(
+  'form',
+  'form-color-tip-icon-text-validating',
+  $form-color-tip-icon-text_validating,
+  'color-primary-6'
+);

package/es/image/style/index.css

@@ -17,20 +17,20 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-image-trigger {
-  padding: 6px 4px;
-  background: var(--sd-color-bg-5);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: 4px;
+  padding: var(--component-image-image-trigger-spacing-padding-vertical, var(--component-image-trigger-spacing-padding-vertical, 6px)) var(--component-image-image-trigger-spacing-padding-horizontal, var(--component-image-trigger-spacing-padding-horizontal, 4px));
+  background: var(--component-image-image-trigger-color-bg, var(--component-image-trigger-color-bg, var(--sd-color-bg-5)));
+  border: var(--component-image-image-trigger-size-border, var(--component-image-trigger-size-border, 1px)) solid var(--component-image-image-trigger-color-border, var(--component-image-trigger-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-image-image-trigger-radius, var(--component-image-trigger-radius, 4px));
 }
 .sd-image-trigger .sd-trigger-arrow {
-  background-color: var(--sd-color-bg-5);
-  border: 1px solid var(--sd-color-neutral-3);
+  background-color: var(--component-image-image-trigger-color-bg, var(--component-image-trigger-color-bg, var(--sd-color-bg-5)));
+  border: var(--component-image-image-trigger-size-border, var(--component-image-trigger-size-border, 1px)) solid var(--component-image-image-trigger-color-border, var(--component-image-trigger-color-border, var(--sd-color-neutral-3)));
 }
 
 .sd-image {
   position: relative;
   display: inline-block;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-image-image-radius, var(--component-image-radius, var(--sd-border-radius-small)));
 }
 .sd-image-img {
   vertical-align: middle;
@@ -52,15 +52,15 @@
   flex: 1 1 auto;
 }
 .sd-image-footer-caption-title {
-  font-weight: 500;
-  font-size: 16px;
+  font-weight: var(--component-image-image-font-weight-title, var(--component-image-font-weight-title, 500));
+  font-size: var(--component-image-image-font-size-title, var(--component-image-font-size-title, 16px));
 }
 .sd-image-footer-caption-description {
-  font-size: 14px;
+  font-size: var(--component-image-image-font-size-description, var(--component-image-font-size-description, 14px));
 }
 .sd-image-footer-extra {
   flex: 0 0 auto;
-  padding-left: 12px;
+  padding-left: var(--component-image-image-spacing-actions-left, var(--component-image-spacing-actions-left, 12px));
 }
 .sd-image-with-footer-inner .sd-image-footer {
   position: absolute;
@@ -68,27 +68,27 @@
   left: 0;
   align-items: center;
   box-sizing: border-box;
-  padding: 9px 16px;
-  color: var(--sd-color-white);
-  background: linear-gradient(360deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
-  border-bottom-right-radius: var(--sd-border-radius-small);
-  border-bottom-left-radius: var(--sd-border-radius-small);
+  padding: var(--component-image-image-padding-footer-inner-vertical, var(--component-image-padding-footer-inner-vertical, 9px)) var(--component-image-image-padding-footer-inner-horizontal, var(--component-image-padding-footer-inner-horizontal, 16px));
+  color: var(--component-image-image-color-footer-inner-text, var(--component-image-color-footer-inner-text, var(--sd-color-white)));
+  background: var(--component-image-image-color-footer-inner-bg, var(--component-image-color-footer-inner-bg, linear-gradient(360deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)));
+  border-bottom-right-radius: var(--component-image-image-radius, var(--component-image-radius, var(--sd-border-radius-small)));
+  border-bottom-left-radius: var(--component-image-image-radius, var(--component-image-radius, var(--sd-border-radius-small)));
 }
 .sd-image-with-footer-inner .sd-image-footer-caption-title {
-  color: var(--sd-color-white);
+  color: var(--component-image-image-color-title-footer-inner-text, var(--component-image-color-title-footer-inner-text, var(--sd-color-white)));
 }
 .sd-image-with-footer-inner .sd-image-footer-caption-description {
-  color: var(--sd-color-white);
+  color: var(--component-image-image-color-description-footer-inner-text, var(--component-image-color-description-footer-inner-text, var(--sd-color-white)));
 }
 .sd-image-with-footer-outer .sd-image-footer {
-  margin-top: 4px;
-  color: var(--sd-color-neutral-8);
+  margin-top: var(--component-image-image-spacing-footer-top, var(--component-image-spacing-footer-top, 4px));
+  color: var(--component-image-image-color-footer-outer-text, var(--component-image-color-footer-outer-text, var(--sd-color-neutral-8)));
 }
 .sd-image-with-footer-outer .sd-image-footer-caption-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-image-image-color-title-footer-outer-text, var(--component-image-color-title-footer-outer-text, var(--sd-color-text-1)));
 }
 .sd-image-with-footer-outer .sd-image-footer-caption-description {
-  color: var(--sd-color-neutral-6);
+  color: var(--component-image-image-color-description-footer-outer-text, var(--component-image-color-description-footer-outer-text, var(--sd-color-neutral-6)));
 }
 .sd-image-error {
   display: flex;
@@ -98,13 +98,13 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  color: var(--sd-color-neutral-4);
-  background-color: var(--sd-color-neutral-1);
+  color: var(--component-image-image-color-error-text, var(--component-image-color-error-text, var(--sd-color-neutral-4)));
+  background-color: var(--component-image-image-color-error-bg, var(--component-image-color-error-bg, var(--sd-color-neutral-1)));
 }
 .sd-image-error-icon {
-  width: 60px;
+  width: var(--component-image-image-font-size-error-icon, var(--component-image-font-size-error-icon, 60px));
   max-width: 100%;
-  height: 60px;
+  height: var(--component-image-image-font-size-error-icon, var(--component-image-font-size-error-icon, 60px));
   max-height: 100%;
 }
 .sd-image-error-icon > svg {
@@ -113,8 +113,8 @@
 }
 .sd-image-error-alt {
   padding: 8px 16px;
-  font-size: 12px;
-  line-height: 1.6667;
+  font-size: var(--component-image-image-font-size-error-text, var(--component-image-font-size-error-text, 12px));
+  line-height: var(--component-image-image-line-height-error-text, var(--component-image-line-height-error-text, 1.6667));
   text-align: center;
 }
 .sd-image-loader {
@@ -123,23 +123,23 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--sd-color-neutral-1);
+  background-color: var(--component-image-image-color-loader-bg, var(--component-image-color-loader-bg, var(--sd-color-neutral-1)));
 }
 .sd-image-loader-spin {
   position: absolute;
   top: 50%;
   left: 50%;
-  color: rgb(var(--sd-primary-6));
-  font-size: 32px;
+  color: var(--component-image-image-color-loader-spin-text, var(--component-image-color-loader-spin-text, rgb(var(--sd-primary-6))));
+  font-size: var(--component-image-image-font-size-loader-spin, var(--component-image-font-size-loader-spin, 32px));
   text-align: center;
   transform: translate(-50%, -50%);
 }
 .sd-image-loader-spin-text {
-  color: var(--sd-color-neutral-6);
-  font-size: 16px;
+  color: var(--component-image-image-color-loader-spin-text-text, var(--component-image-color-loader-spin-text-text, var(--sd-color-neutral-6)));
+  font-size: var(--component-image-image-font-size-loader-spin-text, var(--component-image-font-size-loader-spin-text, 16px));
 }
 .sd-image-simple.sd-image-with-footer-inner .sd-image-footer {
-  padding: 12px 16px;
+  padding: var(--component-image-image-spacing-footer-inner-simple-vertical, var(--component-image-spacing-footer-inner-simple-vertical, 12px)) var(--component-image-image-spacing-footer-inner-simple-horizontal, var(--component-image-spacing-footer-inner-simple-horizontal, 16px));
 }
 .sd-image-loading .sd-image-img, .sd-image-loading-error .sd-image-img {
   visibility: hidden;
@@ -164,7 +164,7 @@
   height: 100%;
 }
 .sd-image-preview-mask {
-  background-color: var(--sd-color-mask-bg);
+  background-color: var(--component-image-image-preview-color-mask-bg, var(--component-image-preview-color-mask-bg, var(--sd-color-mask-bg)));
 }
 .sd-image-preview-img-container {
   width: 100%;
@@ -191,11 +191,11 @@
 }
 .sd-image-preview-scale-value {
   box-sizing: border-box;
-  padding: 7px 10px;
-  color: var(--sd-color-white);
-  font-size: 12px;
+  padding: var(--component-image-image-preview-spacing-scale-value-vertical, var(--component-image-preview-spacing-scale-value-vertical, 7px)) var(--component-image-image-preview-spacing-scale-value-horizontal, var(--component-image-preview-spacing-scale-value-horizontal, 10px));
+  color: var(--component-image-image-preview-color-scale-value-text, var(--component-image-preview-color-scale-value-text, var(--sd-color-white)));
+  font-size: var(--component-image-image-preview-font-size-scale-value, var(--component-image-preview-font-size-scale-value, 12px));
   line-height: initial;
-  background-color: rgba(255, 255, 255, 0.08);
+  background-color: var(--component-image-image-preview-color-scale-value-bg, var(--component-image-preview-color-scale-value-bg, rgba(255, 255, 255, 0.08)));
   position: absolute;
   top: 50%;
   left: 50%;
@@ -203,42 +203,42 @@
 }
 .sd-image-preview-toolbar {
   position: absolute;
-  bottom: 46px;
+  bottom: var(--component-image-image-preview-position-toolbar-bottom, var(--component-image-preview-position-toolbar-bottom, 46px));
   left: 50%;
   display: flex;
   align-items: flex-start;
-  padding: 4px 16px;
-  background-color: var(--sd-color-bg-2);
-  border-radius: var(--sd-border-radius-medium);
+  padding: var(--component-image-image-preview-spacing-toolbar-vertical, var(--component-image-preview-spacing-toolbar-vertical, 4px)) var(--component-image-image-preview-spacing-toolbar-horizontal, var(--component-image-preview-spacing-toolbar-horizontal, 16px));
+  background-color: var(--component-image-image-preview-color-toolbar-bg, var(--component-image-preview-color-toolbar-bg, var(--sd-color-bg-2)));
+  border-radius: var(--component-image-image-preview-radius-toolbar, var(--component-image-preview-radius-toolbar, var(--sd-border-radius-medium)));
   transform: translateX(-50%);
 }
 .sd-image-preview-toolbar-action {
   display: flex;
   align-items: center;
-  color: var(--sd-color-neutral-8);
-  font-size: 14px;
-  background-color: transparent;
-  border-radius: var(--sd-border-radius-small);
+  color: var(--component-image-image-preview-color-action-text, var(--component-image-preview-color-action-text, var(--sd-color-neutral-8)));
+  font-size: var(--component-image-image-preview-font-size-action, var(--component-image-preview-font-size-action, 14px));
+  background-color: var(--component-image-image-preview-color-action-bg, var(--component-image-preview-color-action-bg, transparent));
+  border-radius: var(--component-image-image-preview-radius-action, var(--component-image-preview-radius-action, var(--sd-border-radius-small)));
   cursor: pointer;
 }
 .sd-image-preview-toolbar-action:not(:last-of-type) {
-  margin-right: 0;
+  margin-right: var(--component-image-image-preview-margin-action-right, var(--component-image-preview-margin-action-right, 0));
 }
 .sd-image-preview-toolbar-action:hover {
-  color: rgb(var(--sd-primary-6));
-  background-color: var(--sd-color-neutral-2);
+  color: var(--component-image-image-preview-color-action-hover-text, var(--component-image-preview-color-action-hover-text, rgb(var(--sd-primary-6))));
+  background-color: var(--component-image-image-preview-color-action-hover-bg, var(--component-image-preview-color-action-hover-bg, var(--sd-color-neutral-2)));
 }
 .sd-image-preview-toolbar-action-disabled, .sd-image-preview-toolbar-action-disabled:hover {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-image-image-preview-color-action-disabled-text, var(--component-image-preview-color-action-disabled-text, var(--sd-color-text-4)));
+  background-color: var(--component-image-image-preview-color-action-disabled-bg, var(--component-image-preview-color-action-disabled-bg, transparent));
   cursor: not-allowed;
 }
 .sd-image-preview-toolbar-action-name {
-  padding-right: 12px;
-  font-size: 12px;
+  padding-right: var(--component-image-image-preview-spacing-action-name-right, var(--component-image-preview-spacing-action-name-right, 12px));
+  font-size: var(--component-image-image-preview-font-size-action-name, var(--component-image-preview-font-size-action-name, 12px));
 }
 .sd-image-preview-toolbar-action-content {
-  padding: 13px;
+  padding: var(--component-image-image-preview-padding-action-content, var(--component-image-preview-padding-action-content, 13px));
   line-height: 1;
 }
 .sd-image-preview-loading {
@@ -246,13 +246,13 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  padding: 10px;
-  color: rgb(var(--sd-primary-6));
-  font-size: 18px;
-  background-color: #232324;
-  border-radius: var(--sd-border-radius-medium);
+  width: var(--component-image-image-preview-size-loading-width, var(--component-image-preview-size-loading-width, 48px));
+  height: var(--component-image-image-preview-size-loading-height, var(--component-image-preview-size-loading-height, 48px));
+  padding: var(--component-image-image-preview-spacing-loading-padding, var(--component-image-preview-spacing-loading-padding, 10px));
+  color: var(--component-image-image-preview-color-loading-text, var(--component-image-preview-color-loading-text, rgb(var(--sd-primary-6))));
+  font-size: var(--component-image-image-preview-font-size-loading, var(--component-image-preview-font-size-loading, 18px));
+  background-color: var(--component-image-image-preview-color-loading-bg, var(--component-image-preview-color-loading-bg, #232324));
+  border-radius: var(--component-image-image-preview-radius-loading, var(--component-image-preview-radius-loading, var(--sd-border-radius-medium)));
   position: absolute;
   top: 50%;
   left: 50%;
@@ -260,18 +260,18 @@
 }
 .sd-image-preview-close-btn {
   position: absolute;
-  top: 36px;
-  right: 36px;
+  top: var(--component-image-image-preview-position-close-btn-top, var(--component-image-preview-position-close-btn-top, 36px));
+  right: var(--component-image-image-preview-position-close-btn-right, var(--component-image-preview-position-close-btn-right, 36px));
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--sd-color-white);
-  font-size: 14px;
-  line-height: 32px;
+  width: var(--component-image-image-preview-size-close-btn-width, var(--component-image-preview-size-close-btn-width, 32px));
+  height: var(--component-image-image-preview-size-close-btn-width, var(--component-image-preview-size-close-btn-width, 32px));
+  color: var(--component-image-image-preview-color-close-btn-text, var(--component-image-preview-color-close-btn-text, var(--sd-color-white)));
+  font-size: var(--component-image-image-preview-size-close-icon, var(--component-image-preview-size-close-icon, 14px));
+  line-height: var(--component-image-image-preview-size-close-btn-width, var(--component-image-preview-size-close-btn-width, 32px));
   text-align: center;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--component-image-image-preview-color-close-btn-bg, var(--component-image-preview-color-close-btn-bg, rgba(0, 0, 0, 0.5)));
   border-radius: 50%;
   cursor: pointer;
 }
@@ -281,40 +281,40 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--sd-color-white);
-  background-color: rgba(255, 255, 255, 0.3);
+  width: var(--component-image-image-preview-arrow-size, var(--component-image-preview-arrow-size, 32px));
+  height: var(--component-image-image-preview-arrow-size, var(--component-image-preview-arrow-size, 32px));
+  color: var(--component-image-image-preview-arrow-color-icon, var(--component-image-preview-arrow-color-icon, var(--sd-color-white)));
+  background-color: var(--component-image-image-preview-arrow-color-bg, var(--component-image-preview-arrow-color-bg, rgba(255, 255, 255, 0.3)));
   border-radius: 50%;
   cursor: pointer;
 }
 .sd-image-preview-arrow-left > svg, .sd-image-preview-arrow-right > svg {
-  color: var(--sd-color-white);
-  font-size: 16px;
+  color: var(--component-image-image-preview-arrow-color-icon, var(--component-image-preview-arrow-color-icon, var(--sd-color-white)));
+  font-size: var(--component-image-image-preview-arrow-font-size, var(--component-image-preview-arrow-font-size, 16px));
 }
 .sd-image-preview-arrow-left:hover, .sd-image-preview-arrow-right:hover {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: var(--component-image-image-preview-arrow-color-bg-hover, var(--component-image-preview-arrow-color-bg-hover, rgba(255, 255, 255, 0.5)));
 }
 .sd-image-preview-arrow-left {
   top: 50%;
-  left: 20px;
+  left: var(--component-image-image-preview-arrow-position, var(--component-image-preview-arrow-position, 20px));
   transform: translateY(-50%);
 }
 .sd-image-preview-arrow-right {
   top: 50%;
-  right: 20px;
+  right: var(--component-image-image-preview-arrow-position, var(--component-image-preview-arrow-position, 20px));
   transform: translateY(-50%);
 }
 .sd-image-preview-arrow-disabled {
-  color: rgba(255, 255, 255, 0.3);
-  background-color: rgba(255, 255, 255, 0.2);
+  color: var(--component-image-image-preview-arrow-color-icon-disabled, var(--component-image-preview-arrow-color-icon-disabled, rgba(255, 255, 255, 0.3)));
+  background-color: var(--component-image-image-preview-arrow-color-bg-disabled, var(--component-image-preview-arrow-color-bg-disabled, rgba(255, 255, 255, 0.2)));
   cursor: not-allowed;
 }
 .sd-image-preview-arrow-disabled > svg {
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--component-image-image-preview-arrow-color-icon-disabled, var(--component-image-preview-arrow-color-icon-disabled, rgba(255, 255, 255, 0.3)));
 }
 .sd-image-preview-arrow-disabled:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--component-image-image-preview-arrow-color-bg-disabled, var(--component-image-preview-arrow-color-bg-disabled, rgba(255, 255, 255, 0.2)));
 }
 
 /** mask 动效 */