@sdata/web-vue 4.7.1 → 5.0.0

package/es/file-previewer/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as *;
 @use 'sass:string';
 
@@ -42,3 +43,200 @@ $file-previewer-size-pdf-btn: 28px;
 $file-previewer-size-pdf-btn-min-width: 28px;
 $file-previewer-font-size-pdf-btn: 16px;
 $file-previewer-font-size-pdf-page: $font-size-body-3;
+
+// @generated runtime tokens — pnpm theme:generate
+$file-previewer-color-mask-bg: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-mask-bg',
+  $file-previewer-color-mask-bg
+);
+$file-previewer-color-content-bg: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-content-bg',
+  $file-previewer-color-content-bg
+);
+$file-previewer-color-content-text: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-content-text',
+  $file-previewer-color-content-text
+);
+$file-previewer-color-inline-border: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-inline-border',
+  $file-previewer-color-inline-border
+);
+$file-previewer-color-inline-bg: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-inline-bg',
+  $file-previewer-color-inline-bg
+);
+$file-previewer-color-close-bg: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-close-bg',
+  $file-previewer-color-close-bg
+);
+$file-previewer-color-close-text: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-close-text',
+  $file-previewer-color-close-text
+);
+$file-previewer-color-loading-bg: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-loading-bg',
+  $file-previewer-color-loading-bg
+);
+$file-previewer-color-loading-text: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-loading-text',
+  $color-primary-6
+);
+$file-previewer-color-error-text: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-error-text',
+  $file-previewer-color-error-text
+);
+$file-previewer-color-inline-error-text: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-inline-error-text',
+  $file-previewer-color-inline-error-text
+);
+$file-previewer-spacing-viewport-padding: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-spacing-viewport-padding',
+  $spacing-12
+);
+$file-previewer-spacing-panel-padding: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-spacing-panel-padding',
+  $spacing-8
+);
+$file-previewer-spacing-header-padding-vertical: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-spacing-header-padding-vertical',
+  $spacing-6
+);
+$file-previewer-spacing-header-padding-horizontal: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-spacing-header-padding-horizontal',
+  $spacing-8
+);
+$file-previewer-radius-panel: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-radius-panel',
+  $radius-medium
+);
+$file-previewer-size-close: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-close',
+  $file-previewer-size-close
+);
+$file-previewer-size-close-icon: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-close-icon',
+  $file-previewer-size-close-icon
+);
+$file-previewer-size-loading: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-loading',
+  $file-previewer-size-loading
+);
+$file-previewer-size-inline-min-height: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-inline-min-height',
+  $file-previewer-size-inline-min-height
+);
+$file-previewer-position-close-top: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-position-close-top',
+  $file-previewer-position-close-top
+);
+$file-previewer-position-close-right: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-position-close-right',
+  $file-previewer-position-close-right
+);
+$file-previewer-font-size-title: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-font-size-title',
+  $font-size-title-1
+);
+$file-previewer-size-audio-width: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-audio-width',
+  $file-previewer-size-audio-width
+);
+$file-previewer-size-media-width: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-media-width',
+  $file-previewer-size-media-width
+);
+$file-previewer-size-media-height: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-media-height',
+  $file-previewer-size-media-height
+);
+$file-previewer-color-pdf-canvas-bg: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-pdf-canvas-bg',
+  $file-previewer-color-pdf-canvas-bg
+);
+$file-previewer-color-pdf-toolbar-bg: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-pdf-toolbar-bg',
+  $file-previewer-color-pdf-toolbar-bg
+);
+$file-previewer-color-pdf-toolbar-text: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-pdf-toolbar-text',
+  $file-previewer-color-pdf-toolbar-text
+);
+$file-previewer-color-pdf-btn-disabled: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-color-pdf-btn-disabled',
+  $file-previewer-color-pdf-btn-disabled
+);
+$file-previewer-spacing-pdf-gap: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-spacing-pdf-gap',
+  $spacing-3
+);
+$file-previewer-spacing-pdf-toolbar-padding: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-spacing-pdf-toolbar-padding',
+  $spacing-2
+);
+$file-previewer-spacing-pdf-toolbar-gap: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-spacing-pdf-toolbar-gap',
+  $spacing-3
+);
+$file-previewer-radius-pdf-canvas: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-radius-pdf-canvas',
+  $radius-medium
+);
+$file-previewer-radius-pdf-btn: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-radius-pdf-btn',
+  $radius-small
+);
+$file-previewer-size-pdf-btn: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-pdf-btn',
+  $file-previewer-size-pdf-btn
+);
+$file-previewer-size-pdf-btn-min-width: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-size-pdf-btn-min-width',
+  $file-previewer-size-pdf-btn-min-width
+);
+$file-previewer-font-size-pdf-btn: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-font-size-pdf-btn',
+  $file-previewer-font-size-pdf-btn
+);
+$file-previewer-font-size-pdf-page: theme-runtime.token(
+  'file-previewer',
+  'file-previewer-font-size-pdf-page',
+  $font-size-body-3
+);

package/es/form/style/index.css

@@ -17,214 +17,214 @@
 /********* icon hover *********/
 .sd-form-item-status-validating .sd-input-wrapper:not(.sd-input-disabled),
 .sd-form-item-status-validating .sd-textarea-wrapper:not(.sd-textarea-disabled) {
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-validating, var(--component-form-color-bg-validating, var(--sd-color-fill-2)));
+  border-color: var(--component-form-form-color-border-validating, var(--component-form-color-border-validating, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-validating .sd-input-wrapper:not(.sd-input-disabled):hover,
 .sd-form-item-status-validating .sd-textarea-wrapper:not(.sd-textarea-disabled):hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-validating-hover, var(--component-form-color-bg-validating-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-form-form-color-border-validating-hover, var(--component-form-color-border-validating-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-validating .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
 .sd-form-item-status-validating .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-primary-6));
-  box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
+  background-color: var(--component-form-form-color-bg-validating-focus, var(--component-form-color-bg-validating-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-validating-focus, var(--component-form-color-border-validating-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-validating-focus, var(--component-form-size-shadow-validating-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-validating-focus, var(--component-form-color-shadow-validating-focus, var(--sd-color-primary-light-2)));
 }
 .sd-form-item-status-validating .sd-select-view:not(.sd-select-view-disabled),
 .sd-form-item-status-validating .sd-input-tag:not(.sd-input-tag-disabled) {
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-validating, var(--component-form-color-bg-validating, var(--sd-color-fill-2)));
+  border-color: var(--component-form-form-color-border-validating, var(--component-form-color-border-validating, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-validating .sd-select-view:not(.sd-select-view-disabled):hover,
 .sd-form-item-status-validating .sd-input-tag:not(.sd-input-tag-disabled):hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-validating-hover, var(--component-form-color-bg-validating-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-form-form-color-border-validating-hover, var(--component-form-color-border-validating-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-validating .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-validating .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-primary-6));
-  box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
+  background-color: var(--component-form-form-color-bg-validating-focus, var(--component-form-color-bg-validating-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-validating-focus, var(--component-form-color-border-validating-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-validating-focus, var(--component-form-size-shadow-validating-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-validating-focus, var(--component-form-color-shadow-validating-focus, var(--sd-color-primary-light-2)));
 }
 .sd-form-item-status-validating .sd-picker:not(.sd-picker-disabled) {
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-validating, var(--component-form-color-bg-validating, var(--sd-color-fill-2)));
+  border-color: var(--component-form-form-color-border-validating, var(--component-form-color-border-validating, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-validating .sd-picker:not(.sd-picker-disabled):hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-validating-hover, var(--component-form-color-bg-validating-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-form-form-color-border-validating-hover, var(--component-form-color-border-validating-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled):hover {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-primary-6));
-  box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
+  background-color: var(--component-form-form-color-bg-validating-focus, var(--component-form-color-bg-validating-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-validating-focus, var(--component-form-color-border-validating-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-validating-focus, var(--component-form-size-shadow-validating-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-validating-focus, var(--component-form-color-shadow-validating-focus, var(--sd-color-primary-light-2)));
 }
 
 .sd-form-item-status-validating .sd-form-item-message-help {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-form-form-color-tip-text-validating, var(--component-form-color-tip-text-validating, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-form-item-status-validating .sd-form-item-feedback {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-form-form-color-tip-icon-text-validating, var(--component-form-color-tip-icon-text-validating, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 
 .sd-form-item-status-success .sd-input-wrapper:not(.sd-input-disabled),
 .sd-form-item-status-success .sd-textarea-wrapper:not(.sd-textarea-disabled) {
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-success, var(--component-form-color-bg-success, var(--sd-color-fill-2)));
+  border-color: var(--component-form-form-color-border-success, var(--component-form-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-success .sd-input-wrapper:not(.sd-input-disabled):hover,
 .sd-form-item-status-success .sd-textarea-wrapper:not(.sd-textarea-disabled):hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-success-hover, var(--component-form-color-bg-success-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-form-form-color-border-success-hover, var(--component-form-color-border-success-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-success .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
 .sd-form-item-status-success .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-success-6));
-  box-shadow: 0 0 0 0 var(--sd-color-success-light-2);
+  background-color: var(--component-form-form-color-bg-success-focus, var(--component-form-color-bg-success-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-success-focus, var(--component-form-color-border-success-focus, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-success-focus, var(--component-form-size-shadow-success-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-success-focus, var(--component-form-color-shadow-success-focus, var(--sd-color-success-light-2)));
 }
 .sd-form-item-status-success .sd-select-view:not(.sd-select-view-disabled),
 .sd-form-item-status-success .sd-input-tag:not(.sd-input-tag-disabled) {
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-success, var(--component-form-color-bg-success, var(--sd-color-fill-2)));
+  border-color: var(--component-form-form-color-border-success, var(--component-form-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-success .sd-select-view:not(.sd-select-view-disabled):hover,
 .sd-form-item-status-success .sd-input-tag:not(.sd-input-tag-disabled):hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-success-hover, var(--component-form-color-bg-success-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-form-form-color-border-success-hover, var(--component-form-color-border-success-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-success .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-success .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-success-6));
-  box-shadow: 0 0 0 0 var(--sd-color-success-light-2);
+  background-color: var(--component-form-form-color-bg-success-focus, var(--component-form-color-bg-success-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-success-focus, var(--component-form-color-border-success-focus, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-success-focus, var(--component-form-size-shadow-success-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-success-focus, var(--component-form-color-shadow-success-focus, var(--sd-color-success-light-2)));
 }
 .sd-form-item-status-success .sd-picker:not(.sd-picker-disabled) {
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-success, var(--component-form-color-bg-success, var(--sd-color-fill-2)));
+  border-color: var(--component-form-form-color-border-success, var(--component-form-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-success .sd-picker:not(.sd-picker-disabled):hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-success-hover, var(--component-form-color-bg-success-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-form-form-color-border-success-hover, var(--component-form-color-border-success-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled):hover {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-success-6));
-  box-shadow: 0 0 0 0 var(--sd-color-success-light-2);
+  background-color: var(--component-form-form-color-bg-success-focus, var(--component-form-color-bg-success-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-success-focus, var(--component-form-color-border-success-focus, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-success-focus, var(--component-form-size-shadow-success-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-success-focus, var(--component-form-color-shadow-success-focus, var(--sd-color-success-light-2)));
 }
 
 .sd-form-item-status-success .sd-form-item-message-help {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-form-form-color-tip-text-success, var(--component-form-color-tip-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-form-item-status-success .sd-form-item-feedback {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-form-form-color-tip-icon-text-success, var(--component-form-color-tip-icon-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 
 .sd-form-item-status-warning .sd-input-wrapper:not(.sd-input-disabled),
 .sd-form-item-status-warning .sd-textarea-wrapper:not(.sd-textarea-disabled) {
-  background-color: var(--sd-color-warning-light-1);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-warning, var(--component-form-color-bg-warning, var(--sd-color-warning-light-1)));
+  border-color: var(--component-form-form-color-border-warning, var(--component-form-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-warning .sd-input-wrapper:not(.sd-input-disabled):hover,
 .sd-form-item-status-warning .sd-textarea-wrapper:not(.sd-textarea-disabled):hover {
-  background-color: var(--sd-color-warning-light-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-warning-hover, var(--component-form-color-bg-warning-hover, var(--sd-color-warning-light-2)));
+  border-color: var(--component-form-form-color-border-warning-hover, var(--component-form-color-border-warning-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-warning .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
 .sd-form-item-status-warning .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-warning-6));
-  box-shadow: 0 0 0 0 var(--sd-color-warning-light-2);
+  background-color: var(--component-form-form-color-bg-warning-focus, var(--component-form-color-bg-warning-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-warning-focus, var(--component-form-color-border-warning-focus, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-warning-focus, var(--component-form-size-shadow-warning-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-warning-focus, var(--component-form-color-shadow-warning-focus, var(--sd-color-warning-light-2)));
 }
 .sd-form-item-status-warning .sd-select-view:not(.sd-select-view-disabled),
 .sd-form-item-status-warning .sd-input-tag:not(.sd-input-tag-disabled) {
-  background-color: var(--sd-color-warning-light-1);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-warning, var(--component-form-color-bg-warning, var(--sd-color-warning-light-1)));
+  border-color: var(--component-form-form-color-border-warning, var(--component-form-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-warning .sd-select-view:not(.sd-select-view-disabled):hover,
 .sd-form-item-status-warning .sd-input-tag:not(.sd-input-tag-disabled):hover {
-  background-color: var(--sd-color-warning-light-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-warning-hover, var(--component-form-color-bg-warning-hover, var(--sd-color-warning-light-2)));
+  border-color: var(--component-form-form-color-border-warning-hover, var(--component-form-color-border-warning-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-warning .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-warning .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-warning-6));
-  box-shadow: 0 0 0 0 var(--sd-color-warning-light-2);
+  background-color: var(--component-form-form-color-bg-warning-focus, var(--component-form-color-bg-warning-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-warning-focus, var(--component-form-color-border-warning-focus, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-warning-focus, var(--component-form-size-shadow-warning-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-warning-focus, var(--component-form-color-shadow-warning-focus, var(--sd-color-warning-light-2)));
 }
 .sd-form-item-status-warning .sd-picker:not(.sd-picker-disabled) {
-  background-color: var(--sd-color-warning-light-1);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-warning, var(--component-form-color-bg-warning, var(--sd-color-warning-light-1)));
+  border-color: var(--component-form-form-color-border-warning, var(--component-form-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-warning .sd-picker:not(.sd-picker-disabled):hover {
-  background-color: var(--sd-color-warning-light-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-warning-hover, var(--component-form-color-bg-warning-hover, var(--sd-color-warning-light-2)));
+  border-color: var(--component-form-form-color-border-warning-hover, var(--component-form-color-border-warning-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled):hover {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-warning-6));
-  box-shadow: 0 0 0 0 var(--sd-color-warning-light-2);
+  background-color: var(--component-form-form-color-bg-warning-focus, var(--component-form-color-bg-warning-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-warning-focus, var(--component-form-color-border-warning-focus, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-warning-focus, var(--component-form-size-shadow-warning-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-warning-focus, var(--component-form-color-shadow-warning-focus, var(--sd-color-warning-light-2)));
 }
 
 .sd-form-item-status-warning .sd-form-item-message-help {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-form-form-color-tip-text-warning, var(--component-form-color-tip-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-form-item-status-warning .sd-form-item-feedback {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-form-form-color-tip-icon-text-warning, var(--component-form-color-tip-icon-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 
 .sd-form-item-status-error .sd-input-wrapper:not(.sd-input-disabled),
 .sd-form-item-status-error .sd-textarea-wrapper:not(.sd-textarea-disabled) {
-  background-color: var(--sd-color-danger-light-1);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-error, var(--component-form-color-bg-error, var(--sd-color-danger-light-1)));
+  border-color: var(--component-form-form-color-border-error, var(--component-form-color-border-error, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-error .sd-input-wrapper:not(.sd-input-disabled):hover,
 .sd-form-item-status-error .sd-textarea-wrapper:not(.sd-textarea-disabled):hover {
-  background-color: var(--sd-color-danger-light-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-error-hover, var(--component-form-color-bg-error-hover, var(--sd-color-danger-light-2)));
+  border-color: var(--component-form-form-color-border-error-hover, var(--component-form-color-border-error-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-error .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
 .sd-form-item-status-error .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-danger-6));
-  box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
+  background-color: var(--component-form-form-color-bg-error-focus, var(--component-form-color-bg-error-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-error-focus, var(--component-form-color-border-error-focus, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-error-focus, var(--component-form-size-shadow-error-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-error-focus, var(--component-form-color-shadow-error-focus, var(--sd-color-danger-light-2)));
 }
 .sd-form-item-status-error .sd-select-view:not(.sd-select-view-disabled),
 .sd-form-item-status-error .sd-input-tag:not(.sd-input-tag-disabled) {
-  background-color: var(--sd-color-danger-light-1);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-error, var(--component-form-color-bg-error, var(--sd-color-danger-light-1)));
+  border-color: var(--component-form-form-color-border-error, var(--component-form-color-border-error, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-error .sd-select-view:not(.sd-select-view-disabled):hover,
 .sd-form-item-status-error .sd-input-tag:not(.sd-input-tag-disabled):hover {
-  background-color: var(--sd-color-danger-light-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-error-hover, var(--component-form-color-bg-error-hover, var(--sd-color-danger-light-2)));
+  border-color: var(--component-form-form-color-border-error-hover, var(--component-form-color-border-error-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-error .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-error .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-danger-6));
-  box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
+  background-color: var(--component-form-form-color-bg-error-focus, var(--component-form-color-bg-error-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-error-focus, var(--component-form-color-border-error-focus, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-error-focus, var(--component-form-size-shadow-error-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-error-focus, var(--component-form-color-shadow-error-focus, var(--sd-color-danger-light-2)));
 }
 .sd-form-item-status-error .sd-picker:not(.sd-picker-disabled) {
-  background-color: var(--sd-color-danger-light-1);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-error, var(--component-form-color-bg-error, var(--sd-color-danger-light-1)));
+  border-color: var(--component-form-form-color-border-error, var(--component-form-color-border-error, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-error .sd-picker:not(.sd-picker-disabled):hover {
-  background-color: var(--sd-color-danger-light-2);
-  border-color: transparent;
+  background-color: var(--component-form-form-color-bg-error-hover, var(--component-form-color-bg-error-hover, var(--sd-color-danger-light-2)));
+  border-color: var(--component-form-form-color-border-error-hover, var(--component-form-color-border-error-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled):hover {
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-danger-6));
-  box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
+  background-color: var(--component-form-form-color-bg-error-focus, var(--component-form-color-bg-error-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-form-form-color-border-error-focus, var(--component-form-color-border-error-focus, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  box-shadow: 0 0 0 var(--component-form-form-size-shadow-error-focus, var(--component-form-size-shadow-error-focus, var(--shadow-distance-none, 0))) var(--component-form-form-color-shadow-error-focus, var(--component-form-color-shadow-error-focus, var(--sd-color-danger-light-2)));
 }
 
 .sd-form-item-status-error .sd-form-item-message-help {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-form-form-color-tip-text-error, var(--component-form-color-tip-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-form-item-status-error .sd-form-item-feedback {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-form-form-color-tip-icon-text-error, var(--component-form-color-tip-icon-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 
 .sd-form-item-control-children {
@@ -290,7 +290,7 @@
 }
 .sd-form-layout-inline .sd-form-item {
   width: auto;
-  margin-bottom: 8px;
+  margin-bottom: var(--component-form-form-inline-margin-item-bottom, var(--component-form-inline-margin-item-bottom, var(--spacing-4, 8px)));
 }
 .sd-form-auto-label-width .sd-form-item-label-col > .sd-form-item-label {
   white-space: nowrap;
@@ -300,23 +300,23 @@
   align-items: flex-start;
   justify-content: flex-start;
   width: 100%;
-  margin-bottom: 20px;
+  margin-bottom: var(--component-form-form-size-default-margin-item-bottom, var(--component-form-size-default-margin-item-bottom, var(--spacing-8, 20px)));
 }
 .sd-form-item-layout-vertical {
   display: block;
 }
 .sd-form-item-layout-vertical > .sd-form-item-label-col {
   justify-content: flex-start;
-  margin-bottom: 8px;
+  margin-bottom: var(--component-form-form-vertical-margin-label-bottom, var(--component-form-vertical-margin-label-bottom, var(--spacing-4, 8px)));
   padding: 0;
   line-height: 1.5715;
   white-space: normal;
 }
 .sd-form-item-layout-inline {
-  margin-right: 24px;
+  margin-right: var(--component-form-form-inline-margin-item-right, var(--component-form-inline-margin-item-right, var(--spacing-9, 24px)));
 }
 .sd-form-item-label-col {
-  padding-right: 16px;
+  padding-right: var(--component-form-form-margin-label-right, var(--component-form-margin-label-right, var(--spacing-7, 16px)));
 }
 .sd-form-item.sd-form-item-error, .sd-form-item.sd-form-item-has-help {
   margin-bottom: 0;
@@ -331,7 +331,7 @@
   line-height: 24px;
 }
 .sd-form-size-mini .sd-form-item-label-col > .sd-form-item-label {
-  font-size: 12px;
+  font-size: var(--component-form-form-size-mini-font-label-size, var(--component-form-size-mini-font-label-size, var(--font-size-body-1, 12px)));
 }
 .sd-form-size-mini .sd-form-item-content {
   min-height: 24px;
@@ -343,7 +343,7 @@
   line-height: 28px;
 }
 .sd-form-size-small .sd-form-item-label-col > .sd-form-item-label {
-  font-size: 14px;
+  font-size: var(--component-form-form-size-small-font-label-size, var(--component-form-size-small-font-label-size, var(--font-size-body-3, 14px)));
 }
 .sd-form-size-small .sd-form-item-content {
   min-height: 28px;
@@ -355,7 +355,7 @@
   line-height: 36px;
 }
 .sd-form-size-large .sd-form-item-label-col > .sd-form-item-label {
-  font-size: 14px;
+  font-size: var(--component-form-form-size-large-font-label-size, var(--component-form-size-large-font-label-size, var(--font-size-body-3, 14px)));
 }
 .sd-form-size-large .sd-form-item-content {
   min-height: 36px;
@@ -364,22 +364,22 @@
   min-height: 36px;
 }
 .sd-form-item-extra {
-  margin-top: 4px;
-  color: var(--sd-color-text-3);
-  font-size: 12px;
+  margin-top: var(--component-form-form-margin-extra-top, var(--component-form-margin-extra-top, var(--spacing-2, 4px)));
+  color: var(--component-form-form-color-extra-text, var(--component-form-color-extra-text, var(--sd-color-text-3)));
+  font-size: var(--component-form-form-font-extra-text-size, var(--component-form-font-extra-text-size, var(--font-size-body-1, 12px)));
 }
 .sd-form-item-message {
-  min-height: 20px;
-  color: rgb(var(--sd-danger-6));
-  font-size: 12px;
-  line-height: 20px;
+  min-height: var(--component-form-form-size-default-margin-item-bottom, var(--component-form-size-default-margin-item-bottom, var(--spacing-8, 20px)));
+  color: var(--component-form-form-color-tip-text-error, var(--component-form-color-tip-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  font-size: var(--component-form-form-font-error-text-size, var(--component-form-font-error-text-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-form-form-size-default-margin-item-bottom, var(--component-form-size-default-margin-item-bottom, var(--spacing-8, 20px)));
 }
 .sd-form-item-message-help {
-  color: var(--sd-color-text-3);
+  color: var(--component-form-form-color-extra-text, var(--component-form-color-extra-text, var(--sd-color-text-3)));
 }
 .sd-form-item-message + .sd-form-item-extra {
   margin-top: 0;
-  margin-bottom: 4px;
+  margin-bottom: var(--component-form-form-margin-extra-bottom, var(--component-form-margin-extra-bottom, var(--spacing-2, 4px)));
 }
 .sd-form-item-label-col {
   display: flex;
@@ -393,8 +393,8 @@
 }
 .sd-form-item-label-col > .sd-form-item-label {
   max-width: 100%;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  color: var(--component-form-form-color-text-label, var(--component-form-color-text-label, var(--sd-color-text-2)));
+  font-size: var(--component-form-form-size-default-font-label-size, var(--component-form-size-default-font-label-size, var(--font-size-body-3, 14px)));
   white-space: normal;
 }
 .sd-form-item-label-col.sd-form-item-label-col-flex {
@@ -441,8 +441,8 @@
   transform: scale(0.5);
 }
 .sd-form-item-label-tooltip {
-  margin-left: 4px;
-  color: var(--sd-color-text-4);
+  margin-left: var(--component-form-form-margin-tooltip-left, var(--component-form-margin-tooltip-left, var(--spacing-2, 4px)));
+  color: var(--component-form-form-color-text-tooltip, var(--component-form-color-text-tooltip, var(--sd-color-text-4)));
 }
 
 .form-blink-enter-from,