@sdata/web-vue 4.7.1 → 5.0.0

package/es/panel-group/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 // PanelGroup / Panel / PanelSeparator 样式 token。
 @use '@style/theme/index.scss' as global;
 @use 'sass:string';
@@ -14,3 +15,30 @@ $panel-separator-hit-size: 14px;
 // 聚焦环
 $panel-separator-focus-ring: 0 0 0 3px
   var(string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2'));
+
+// @generated runtime tokens — pnpm theme:generate
+$panel-separator-trigger-size: theme-runtime.token(
+  'panel-group',
+  'panel-separator-trigger-size',
+  $panel-separator-trigger-size
+);
+$panel-separator-color-background: theme-runtime.token(
+  'panel-group',
+  'panel-separator-color-background',
+  $panel-separator-color-background
+);
+$panel-separator-color-icon: theme-runtime.token(
+  'panel-group',
+  'panel-separator-color-icon',
+  $panel-separator-color-icon
+);
+$panel-separator-hit-size: theme-runtime.token(
+  'panel-group',
+  'panel-separator-hit-size',
+  $panel-separator-hit-size
+);
+$panel-separator-focus-ring: theme-runtime.token(
+  'panel-group',
+  'panel-separator-focus-ring',
+  $panel-separator-focus-ring
+);

package/es/popconfirm/style/index.css

@@ -17,41 +17,41 @@
 /********* icon hover *********/
 .sd-popconfirm-popup-content {
   box-sizing: border-box;
-  padding: 16px 16px;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  padding: var(--component-popconfirm-popconfirm-padding-vertical, var(--component-popconfirm-padding-vertical, var(--spacing-7, 16px))) var(--component-popconfirm-popconfirm-padding-horizontal, var(--component-popconfirm-padding-horizontal, var(--spacing-7, 16px)));
+  color: var(--component-popover-popup-color-content-text, var(--component-popover-color-content-text, var(--sd-color-text-2)));
+  font-size: var(--component-popover-popup-font-size, var(--component-popover-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-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);
+  background-color: var(--component-popconfirm-popconfirm-color-content-bg, var(--component-popconfirm-color-content-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-popconfirm-popconfirm-color-border, var(--component-popconfirm-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-popconfirm-popconfirm-border-radius, var(--component-popconfirm-border-radius, var(--sd-border-radius-medium)));
+  box-shadow: var(--component-popconfirm-popconfirm-shadow, var(--component-popconfirm-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-popconfirm-popup-content .sd-popconfirm-body {
   position: relative;
   display: flex;
   align-items: flex-start;
-  margin-bottom: 16px;
-  color: var(--sd-color-text-1);
+  margin-bottom: var(--component-popconfirm-popconfirm-margin-title-bottom, var(--component-popconfirm-margin-title-bottom, var(--spacing-7, 16px)));
+  color: var(--component-popconfirm-popconfirm-color-title-text, var(--component-popconfirm-color-title-text, var(--sd-color-text-1)));
   font-size: 14px;
 }
 .sd-popconfirm-popup-content .sd-popconfirm-body .sd-popconfirm-icon {
   display: inline-flex;
   align-items: center;
   height: 22.001px;
-  margin-right: 8px;
-  font-size: 18px;
+  margin-right: var(--component-popconfirm-popconfirm-margin-icon-right, var(--component-popconfirm-margin-icon-right, var(--spacing-4, 8px)));
+  font-size: var(--component-popconfirm-popconfirm-size-title-icon, var(--component-popconfirm-size-title-icon, 18px));
 }
 .sd-popconfirm-popup-content .sd-popconfirm-body .sd-popconfirm-icon .sd-icon-exclamation-circle-fill {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-popconfirm-popconfirm-color-title-icon, var(--component-popconfirm-color-title-icon, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-popconfirm-popup-content .sd-popconfirm-body .sd-popconfirm-icon .sd-icon-check-circle-fill {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-popconfirm-popconfirm-color-title-icon-success, var(--component-popconfirm-color-title-icon-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-popconfirm-popup-content .sd-popconfirm-body .sd-popconfirm-icon .sd-icon-info-circle-fill {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-popconfirm-popconfirm-color-title-icon-info, var(--component-popconfirm-color-title-icon-info, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-popconfirm-popup-content .sd-popconfirm-body .sd-popconfirm-icon .sd-icon-close-circle-fill {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-popconfirm-popconfirm-color-title-icon-danger, var(--component-popconfirm-color-title-icon-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-popconfirm-popup-content .sd-popconfirm-body .sd-popconfirm-content {
   text-align: left;
@@ -61,10 +61,10 @@
   text-align: right;
 }
 .sd-popconfirm-popup-content .sd-popconfirm-footer > button {
-  margin-left: 8px;
+  margin-left: var(--component-popconfirm-popconfirm-margin-button-left, var(--component-popconfirm-margin-button-left, var(--spacing-4, 8px)));
 }
 .sd-popconfirm-popup-arrow {
   z-index: 1;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-3);
+  background-color: var(--component-popover-popup-color-content-bg, var(--component-popover-color-content-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-popconfirm-popconfirm-color-border, var(--component-popconfirm-color-border, var(--sd-color-neutral-3)));
 }

package/es/popconfirm/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';
@@ -24,3 +25,85 @@ $popconfirm-color-title-icon: global.$color-warning-6;
 $popconfirm-color-title-icon_danger: global.$color-danger-6;
 $popconfirm-color-title-icon_success: global.$color-success-6;
 $popconfirm-color-title-icon_info: global.$color-primary-6;
+
+// @generated runtime tokens — pnpm theme:generate
+$popconfirm-padding-horizontal: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-padding-horizontal',
+  $popconfirm-padding-horizontal,
+  'spacing-7'
+);
+$popconfirm-padding-vertical: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-padding-vertical',
+  $popconfirm-padding-vertical,
+  'spacing-7'
+);
+$popconfirm-margin-title-bottom: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-margin-title-bottom',
+  $popconfirm-margin-title-bottom,
+  'spacing-7'
+);
+$popconfirm-size-title-icon: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-size-title-icon',
+  $popconfirm-size-title-icon
+);
+$popconfirm-margin-icon-right: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-margin-icon-right',
+  $popconfirm-margin-icon-right,
+  'spacing-4'
+);
+$popconfirm-margin-button-left: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-margin-button-left',
+  $popconfirm-margin-button-left,
+  'spacing-4'
+);
+$popconfirm-color-title-text: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-color-title-text',
+  $popconfirm-color-title-text
+);
+$popconfirm-color-content-bg: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-color-content-bg',
+  $popconfirm-color-content-bg
+);
+$popconfirm-color-border: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-color-border',
+  $popconfirm-color-border
+);
+$popconfirm-border-radius: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-border-radius',
+  $popconfirm-border-radius
+);
+$popconfirm-shadow: theme-runtime.token('popconfirm', 'popconfirm-shadow', $popconfirm-shadow);
+$popconfirm-color-title-icon: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-color-title-icon',
+  $popconfirm-color-title-icon,
+  'color-warning-6'
+);
+$popconfirm-color-title-icon_danger: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-color-title-icon-danger',
+  $popconfirm-color-title-icon_danger,
+  'color-danger-6'
+);
+$popconfirm-color-title-icon_success: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-color-title-icon-success',
+  $popconfirm-color-title-icon_success,
+  'color-success-6'
+);
+$popconfirm-color-title-icon_info: theme-runtime.token(
+  'popconfirm',
+  'popconfirm-color-title-icon-info',
+  $popconfirm-color-title-icon_info,
+  'color-primary-6'
+);

package/es/popover/style/index.css

@@ -17,28 +17,28 @@
 /********* icon hover *********/
 .sd-popover-popup-content {
   box-sizing: border-box;
-  padding: 12px 16px;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  padding: var(--component-popover-popup-padding-vertical, var(--component-popover-padding-vertical, var(--spacing-6, 12px))) var(--component-popover-popup-padding-horizontal, var(--component-popover-padding-horizontal, var(--spacing-7, 16px)));
+  color: var(--component-popover-popup-color-content-text, var(--component-popover-color-content-text, var(--sd-color-text-2)));
+  font-size: var(--component-popover-popup-font-size, var(--component-popover-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-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);
+  background-color: var(--component-popover-popup-color-content-bg, var(--component-popover-color-content-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-popover-popup-color-border, var(--component-popover-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-popover-popup-border-radius, var(--component-popover-border-radius, var(--component-popover-popup-border-radius, var(--component-popover-border-radius, var(--sd-border-radius-medium)))));
+  box-shadow: var(--component-popover-popup-shadow, var(--component-popover-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-popover-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-popover-popup-color-title-text, var(--component-popover-color-title-text, var(--sd-color-text-1)));
   font-weight: 500;
-  font-size: 16px;
+  font-size: var(--component-popover-popup-font-title-size, var(--component-popover-font-title-size, var(--font-size-title-1, 16px)));
 }
 .sd-popover-content {
   text-align: left;
   overflow-wrap: break-word;
 }
 .sd-popover-title + .sd-popover-content {
-  margin-top: 4px;
+  margin-top: var(--component-popover-popup-margin-content-top, var(--component-popover-margin-content-top, var(--spacing-2, 4px)));
 }
 .sd-popover-popup-arrow {
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-3);
+  background-color: var(--component-popover-popup-color-content-bg, var(--component-popover-color-content-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-popover-popup-color-border, var(--component-popover-color-border, var(--sd-color-neutral-3)));
 }

package/es/popover/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';
@@ -31,3 +32,60 @@ $popup-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neut
 $popup-font-size: global.$font-size-body-3;
 
 $popup-border-radius: global.$radius-medium;
+
+// @generated runtime tokens — pnpm theme:generate
+$popup-color-content-text: theme-runtime.token(
+  'popover',
+  'popup-color-content-text',
+  $popup-color-content-text
+);
+$popup-border-radius: theme-runtime.token('popover', 'popup-border-radius', $popup-border-radius);
+$popup-color-content-bg: theme-runtime.token(
+  'popover',
+  'popup-color-content-bg',
+  $popup-color-content-bg
+);
+$popup-shadow: theme-runtime.token('popover', 'popup-shadow', $popup-shadow);
+$popup-padding-content-top: theme-runtime.token(
+  'popover',
+  'popup-padding-content-top',
+  $popup-padding-content-top,
+  'spacing-2'
+);
+$popup-padding-horizontal: theme-runtime.token(
+  'popover',
+  'popup-padding-horizontal',
+  $popup-padding-horizontal,
+  'spacing-7'
+);
+$popup-padding-vertical: theme-runtime.token(
+  'popover',
+  'popup-padding-vertical',
+  $popup-padding-vertical,
+  'spacing-6'
+);
+$popup-color-title-text: theme-runtime.token(
+  'popover',
+  'popup-color-title-text',
+  $popup-color-title-text
+);
+$popup-font-title-size: theme-runtime.token(
+  'popover',
+  'popup-font-title-size',
+  $popup-font-title-size,
+  'font-size-title-1'
+);
+$popup-margin-content-top: theme-runtime.token(
+  'popover',
+  'popup-margin-content-top',
+  $popup-margin-content-top,
+  'spacing-2'
+);
+$popup-color-border: theme-runtime.token('popover', 'popup-color-border', $popup-color-border);
+$popup-font-size: theme-runtime.token(
+  'popover',
+  'popup-font-size',
+  $popup-font-size,
+  'font-size-body-3'
+);
+$popup-border-radius: theme-runtime.token('popover', 'popup-border-radius', $popup-border-radius);

package/es/progress/style/index.css

@@ -17,7 +17,7 @@
 /********* icon hover *********/
 .sd-progress {
   position: relative;
-  font-size: 12px;
+  font-size: var(--component-progress-progress-line-size-default-font-size, var(--component-progress-line-size-default-font-size, 12px));
   line-height: 1;
 }
 .sd-progress-type-line, .sd-progress-type-steps {
@@ -38,30 +38,30 @@
 .sd-progress-line-text, .sd-progress-steps-text {
   flex-grow: 1;
   flex-shrink: 0;
-  min-width: 32px;
-  margin-left: 16px;
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  min-width: var(--component-progress-progress-line-size-text-width, var(--component-progress-line-size-text-width, 32px));
+  margin-left: var(--component-progress-progress-line-margin-text-left, var(--component-progress-line-margin-text-left, 16px));
+  color: var(--component-progress-progress-line-color-text, var(--component-progress-line-color-text, var(--sd-color-text-2)));
+  font-size: var(--component-progress-progress-line-size-default-font-size, var(--component-progress-line-size-default-font-size, 12px));
   white-space: nowrap;
   text-align: right;
 }
 .sd-progress-line-text .sd-icon, .sd-progress-steps-text .sd-icon {
-  margin-left: 4px;
-  font-size: 12px;
+  margin-left: var(--component-progress-progress-line-margin-icon-left, var(--component-progress-line-margin-icon-left, 4px));
+  font-size: var(--component-progress-progress-line-size-default-icon-size, var(--component-progress-line-size-default-icon-size, 12px));
 }
 .sd-progress-line {
   position: relative;
   display: inline-block;
   width: 100%;
   overflow: hidden;
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-progress-progress-line-color-line-bg, var(--component-progress-line-color-line-bg, var(--sd-color-fill-3)));
   border-radius: 100px;
 }
 .sd-progress-line-bar {
   position: relative;
   max-width: 100%;
   height: 100%;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-progress-progress-line-color-inner-bg, var(--component-progress-line-color-inner-bg, rgb(var(--sd-primary-6))));
   border-radius: 100px;
   transition: width 0.6s cubic-bezier(0.34, 0.69, 0.1, 1), background 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
@@ -71,7 +71,7 @@
   left: 0;
   max-width: 100%;
   height: 100%;
-  background-color: var(--sd-color-primary-light-3);
+  background-color: var(--component-progress-progress-line-color-buffer-bg, var(--component-progress-line-color-buffer-bg, var(--sd-color-primary-light-3)));
   border-radius: 0 100px 100px 0;
   transition: width 0.6s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.6s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
@@ -88,18 +88,18 @@
   content: "";
 }
 .sd-progress-line-text .sd-icon {
-  color: var(--sd-color-text-2);
+  color: var(--component-progress-progress-line-color-icon-normal, var(--component-progress-line-color-icon-normal, var(--sd-color-text-2)));
 }
 .sd-progress-type-steps.sd-progress-size-small {
   width: auto;
 }
 .sd-progress-type-steps.sd-progress-size-small .sd-progress-steps-item {
   flex: unset;
-  width: 2px;
-  border-radius: 2px;
+  width: var(--component-progress-progress-steps-size-small-steps-item-width, var(--component-progress-steps-size-small-steps-item-width, 2px));
+  border-radius: var(--component-progress-progress-steps-size-small-steps-item-width, var(--component-progress-steps-size-small-steps-item-width, 2px));
 }
 .sd-progress-type-steps.sd-progress-size-small .sd-progress-steps-item:not(:last-of-type) {
-  margin-right: 3px;
+  margin-right: var(--component-progress-progress-steps-margin-steps-item-right-small, var(--component-progress-steps-margin-steps-item-right-small, 3px));
 }
 .sd-progress-steps {
   display: flex;
@@ -107,20 +107,20 @@
 }
 .sd-progress-steps-text {
   min-width: unset;
-  margin-left: 8px;
+  margin-left: var(--component-progress-progress-steps-margin-text-left, var(--component-progress-steps-margin-text-left, 8px));
 }
 .sd-progress-steps-text .sd-icon {
-  color: var(--sd-color-text-2);
+  color: var(--component-progress-progress-line-color-icon-normal, var(--component-progress-line-color-icon-normal, var(--sd-color-text-2)));
 }
 .sd-progress-steps-item {
   position: relative;
   display: inline-block;
   flex: 1;
   height: 100%;
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-progress-progress-steps-color-item-bg, var(--component-progress-steps-color-item-bg, var(--sd-color-fill-3)));
 }
 .sd-progress-steps-item:not(:last-of-type) {
-  margin-right: 3px;
+  margin-right: var(--component-progress-progress-steps-margin-steps-item-right, var(--component-progress-steps-margin-steps-item-right, 3px));
 }
 .sd-progress-steps-item:last-of-type {
   border-top-right-radius: 100px;
@@ -131,51 +131,51 @@
   border-bottom-left-radius: 100px;
 }
 .sd-progress-steps-item-active {
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-progress-progress-steps-color-item-bg-normal, var(--component-progress-steps-color-item-bg-normal, rgb(var(--sd-primary-6))));
 }
 .sd-progress-status-warning .sd-progress-line-bar {
-  background-color: rgb(var(--sd-warning-6));
+  background-color: var(--component-progress-progress-line-color-inner-bg-warning, var(--component-progress-line-color-inner-bg-warning, rgb(var(--sd-warning-6))));
 }
 .sd-progress-status-warning .sd-progress-steps-item-active {
-  background-color: rgb(var(--sd-warning-6));
+  background-color: var(--component-progress-progress-steps-color-item-bg-warning, var(--component-progress-steps-color-item-bg-warning, rgb(var(--sd-warning-6))));
 }
 .sd-progress-status-warning .sd-progress-line-text .sd-icon,
 .sd-progress-status-warning .sd-progress-steps-text .sd-icon {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-progress-progress-line-color-icon-warning, var(--component-progress-line-color-icon-warning, rgb(var(--sd-warning-6))));
 }
 .sd-progress-status-success .sd-progress-line-bar {
-  background-color: rgb(var(--sd-success-6));
+  background-color: var(--component-progress-progress-line-color-inner-bg-success, var(--component-progress-line-color-inner-bg-success, rgb(var(--sd-success-6))));
 }
 .sd-progress-status-success .sd-progress-steps-item-active {
-  background-color: rgb(var(--sd-success-6));
+  background-color: var(--component-progress-progress-steps-color-item-bg-success, var(--component-progress-steps-color-item-bg-success, rgb(var(--sd-success-6))));
 }
 .sd-progress-status-success .sd-progress-line-text .sd-icon,
 .sd-progress-status-success .sd-progress-steps-text .sd-icon {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-progress-progress-line-color-icon-success, var(--component-progress-line-color-icon-success, rgb(var(--sd-success-6))));
 }
 .sd-progress-status-danger .sd-progress-line-bar {
-  background-color: rgb(var(--sd-danger-6));
+  background-color: var(--component-progress-progress-line-color-inner-bg-error, var(--component-progress-line-color-inner-bg-error, rgb(var(--sd-danger-6))));
 }
 .sd-progress-status-danger .sd-progress-steps-item-active {
-  background-color: rgb(var(--sd-danger-6));
+  background-color: var(--component-progress-progress-steps-color-item-bg-error, var(--component-progress-steps-color-item-bg-error, rgb(var(--sd-danger-6))));
 }
 .sd-progress-status-danger .sd-progress-line-text .sd-icon,
 .sd-progress-status-danger .sd-progress-steps-text .sd-icon {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-progress-progress-line-color-icon-error, var(--component-progress-line-color-icon-error, rgb(var(--sd-danger-6))));
 }
 .sd-progress-size-small .sd-progress-line-text {
-  margin-left: 16px;
-  font-size: 12px;
+  margin-left: var(--component-progress-progress-line-size-small-margin-text-left, var(--component-progress-line-size-small-margin-text-left, 16px));
+  font-size: var(--component-progress-progress-line-size-small-font-size, var(--component-progress-line-size-small-font-size, 12px));
 }
 .sd-progress-size-small .sd-progress-line-text .sd-icon {
-  font-size: 12px;
+  font-size: var(--component-progress-progress-line-size-small-icon-size, var(--component-progress-line-size-small-icon-size, 12px));
 }
 .sd-progress-size-large .sd-progress-line-text {
-  margin-left: 16px;
-  font-size: 16px;
+  margin-left: var(--component-progress-progress-line-size-large-margin-text-left, var(--component-progress-line-size-large-margin-text-left, 16px));
+  font-size: var(--component-progress-progress-line-size-large-font-size, var(--component-progress-line-size-large-font-size, 16px));
 }
 .sd-progress-size-large .sd-progress-line-text .sd-icon {
-  font-size: 14px;
+  font-size: var(--component-progress-progress-line-size-large-icon-size, var(--component-progress-line-size-large-icon-size, 14px));
 }
 
 .sd-progress-type-circle {
@@ -195,35 +195,35 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  color: var(--sd-color-text-3);
-  font-size: 14px;
+  color: var(--component-progress-progress-circle-color-text, var(--component-progress-circle-color-text, var(--sd-color-text-3)));
+  font-size: var(--component-progress-progress-circle-size-default-font-size, var(--component-progress-circle-size-default-font-size, 14px));
   transform: translate(-50%, -50%);
 }
 .sd-progress-circle-text .sd-icon {
-  color: var(--sd-color-text-2);
-  font-size: 16px;
+  color: var(--component-progress-progress-line-color-icon-normal, var(--component-progress-line-color-icon-normal, var(--sd-color-text-2)));
+  font-size: var(--component-progress-progress-circle-size-default-icon-size, var(--component-progress-circle-size-default-icon-size, 16px));
 }
 .sd-progress-circle-bg {
-  stroke: var(--sd-color-fill-3);
+  stroke: var(--component-progress-progress-circle-color-mask-stroke, var(--component-progress-circle-color-mask-stroke, var(--sd-color-fill-3)));
 }
 .sd-progress-circle-bar {
   transition: stroke-dashoffset 0.6s cubic-bezier(0.34, 0.69, 0.1, 1) 0s, stroke 0.6s cubic-bezier(0.34, 0.69, 0.1, 1);
-  stroke: rgb(var(--sd-primary-6));
+  stroke: var(--component-progress-progress-circle-color-path-stroke, var(--component-progress-circle-color-path-stroke, rgb(var(--sd-primary-6))));
 }
 .sd-progress-size-mini .sd-progress-circle-bg {
-  stroke: var(--sd-color-primary-light-3);
+  stroke: var(--component-progress-progress-circle-size-mini-color-mask-stroke, var(--component-progress-circle-size-mini-color-mask-stroke, var(--sd-color-primary-light-3)));
 }
 .sd-progress-size-mini .sd-progress-circle-bar {
-  stroke: rgb(var(--sd-primary-6));
+  stroke: var(--component-progress-progress-circle-color-path-stroke, var(--component-progress-circle-color-path-stroke, rgb(var(--sd-primary-6))));
 }
 .sd-progress-size-mini.sd-progress-status-warning .sd-progress-circle-bg {
-  stroke: var(--sd-color-warning-light-3);
+  stroke: var(--component-progress-progress-circle-size-mini-color-mask-stroke-warning, var(--component-progress-circle-size-mini-color-mask-stroke-warning, var(--sd-color-warning-light-3)));
 }
 .sd-progress-size-mini.sd-progress-status-danger .sd-progress-circle-bg {
-  stroke: var(--sd-color-danger-light-3);
+  stroke: var(--component-progress-progress-circle-size-mini-color-mask-stroke-error, var(--component-progress-circle-size-mini-color-mask-stroke-error, var(--sd-color-danger-light-3)));
 }
 .sd-progress-size-mini.sd-progress-status-success .sd-progress-circle-bg {
-  stroke: var(--sd-color-success-light-3);
+  stroke: var(--component-progress-progress-circle-size-mini-color-mask-stroke-success, var(--component-progress-circle-size-mini-color-mask-stroke-success, var(--sd-color-success-light-3)));
 }
 .sd-progress-size-mini .sd-progress-circle-wrapper .sd-icon-check {
   position: absolute;
@@ -238,34 +238,34 @@
   transform: unset;
 }
 .sd-progress-size-small .sd-progress-circle-text {
-  font-size: 13px;
+  font-size: var(--component-progress-progress-circle-size-small-font-size, var(--component-progress-circle-size-small-font-size, 13px));
 }
 .sd-progress-size-small .sd-progress-circle-text .sd-icon {
-  font-size: 14px;
+  font-size: var(--component-progress-progress-circle-size-small-icon-size, var(--component-progress-circle-size-small-icon-size, 14px));
 }
 .sd-progress-size-large .sd-progress-circle-text {
-  font-size: 16px;
+  font-size: var(--component-progress-progress-circle-size-large-font-size, var(--component-progress-circle-size-large-font-size, 16px));
 }
 .sd-progress-size-large .sd-progress-circle-text .sd-icon {
-  font-size: 16px;
+  font-size: var(--component-progress-progress-circle-size-large-icon-size, var(--component-progress-circle-size-large-icon-size, 16px));
 }
 .sd-progress-status-warning .sd-progress-circle-bar {
-  stroke: rgb(var(--sd-warning-6));
+  stroke: var(--component-progress-progress-circle-color-path-stroke-warning, var(--component-progress-circle-color-path-stroke-warning, rgb(var(--sd-warning-6))));
 }
 .sd-progress-status-warning .sd-icon {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-progress-progress-circle-color-icon-warning, var(--component-progress-circle-color-icon-warning, rgb(var(--sd-warning-6))));
 }
 .sd-progress-status-success .sd-progress-circle-bar {
-  stroke: rgb(var(--sd-success-6));
+  stroke: var(--component-progress-progress-circle-color-path-stroke-success, var(--component-progress-circle-color-path-stroke-success, rgb(var(--sd-success-6))));
 }
 .sd-progress-status-success .sd-icon {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-progress-progress-circle-color-icon-success, var(--component-progress-circle-color-icon-success, rgb(var(--sd-success-6))));
 }
 .sd-progress-status-danger .sd-progress-circle-bar {
-  stroke: rgb(var(--sd-danger-6));
+  stroke: var(--component-progress-progress-circle-color-path-stroke-error, var(--component-progress-circle-color-path-stroke-error, rgb(var(--sd-danger-6))));
 }
 .sd-progress-status-danger .sd-icon {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-progress-progress-circle-color-icon-error, var(--component-progress-circle-color-icon-error, rgb(var(--sd-danger-6))));
 }
 
 @keyframes sd-progress-loading {