@sdata/web-vue 4.7.1 → 5.0.0

package/es/slider/style/index.css

@@ -30,8 +30,8 @@
   flex-direction: column;
 }
 .sd-slider-with-marks {
-  margin-bottom: 24px;
-  padding: 20px 20px;
+  margin-bottom: var(--component-slider-slider-spacing-margin-bottom-with-mark, var(--component-slider-spacing-margin-bottom-with-mark, var(--spacing-9, 24px)));
+  padding: var(--component-slider-slider-spacing-padding-width-mark-vertical, var(--component-slider-spacing-padding-width-mark-vertical, var(--spacing-8, 20px))) var(--component-slider-slider-spacing-padding-width-mark, var(--component-slider-spacing-padding-width-mark, var(--spacing-8, 20px)));
 }
 .sd-slider-vertical.sd-slider-with-marks {
   margin-bottom: 0;
@@ -50,7 +50,7 @@
   display: block;
   width: 100%;
   height: 2px;
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-slider-slider-color-road-bg, var(--component-slider-color-road-bg, var(--sd-color-fill-3)));
   border-radius: 2px;
   transform: translateY(-50%);
   content: "";
@@ -59,7 +59,7 @@
   width: 12px;
   max-width: 12px;
   height: 100%;
-  min-height: 200px;
+  min-height: var(--component-slider-slider-size-height-vertical, var(--component-slider-size-height-vertical, 200px));
   margin-top: 6px;
   margin-right: 0;
   margin-bottom: 6px;
@@ -73,34 +73,34 @@
   transform: translateX(-50%);
 }
 .sd-slider-track.sd-slider-track-disabled::before {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-slider-slider-color-road-bg-disabled, var(--component-slider-color-road-bg-disabled, var(--sd-color-fill-2)));
 }
 .sd-slider-track.sd-slider-track-disabled .sd-slider-bar {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-slider-slider-color-bar-bg-disabled, var(--component-slider-color-bar-bg-disabled, var(--sd-color-fill-3)));
 }
 .sd-slider-track.sd-slider-track-disabled .sd-slider-btn {
   cursor: not-allowed;
 }
 .sd-slider-track.sd-slider-track-disabled .sd-slider-btn::after {
-  border-color: var(--sd-color-fill-3);
+  border-color: var(--component-slider-slider-color-button-border-disabled, var(--component-slider-color-button-border-disabled, var(--sd-color-fill-3)));
 }
 .sd-slider-track.sd-slider-track-disabled .sd-slider-dots .sd-slider-dot {
-  border-color: var(--sd-color-fill-2);
+  border-color: var(--component-slider-slider-color-road-bg-disabled, var(--component-slider-color-road-bg-disabled, var(--sd-color-fill-2)));
 }
 .sd-slider-track.sd-slider-track-disabled .sd-slider-dots .sd-slider-dot-active {
-  border-color: var(--sd-color-fill-3);
+  border-color: var(--component-slider-slider-color-bar-bg-disabled, var(--component-slider-color-bar-bg-disabled, var(--sd-color-fill-3)));
 }
 .sd-slider-track.sd-slider-track-disabled .sd-slider-ticks .sd-slider-tick {
-  background: var(--sd-color-fill-2);
+  background: var(--component-slider-slider-color-road-bg-disabled, var(--component-slider-color-road-bg-disabled, var(--sd-color-fill-2)));
 }
 .sd-slider-track.sd-slider-track-disabled .sd-slider-ticks .sd-slider-tick-active {
-  background: var(--sd-color-fill-3);
+  background: var(--component-slider-slider-color-bar-bg-disabled, var(--component-slider-color-bar-bg-disabled, var(--sd-color-fill-3)));
 }
 .sd-slider-bar {
   position: absolute;
   top: 50%;
   height: 2px;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-slider-slider-color-bar-bg, var(--component-slider-color-bar-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   border-radius: 2px;
   transform: translateY(-50%);
 }
@@ -127,14 +127,14 @@
   box-sizing: border-box;
   width: 12px;
   height: 12px;
-  background: var(--sd-color-bg-2);
-  border: 2px solid rgb(var(--sd-primary-6));
+  background: var(--component-slider-slider-color-button-bg, var(--component-slider-color-button-bg, var(--sd-color-bg-2)));
+  border: var(--component-slider-slider-border-size-button, var(--component-slider-border-size-button, var(--border-2, 2px))) solid var(--component-slider-slider-color-button-border, var(--component-slider-color-button-border, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   border-radius: 50%;
   transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), box-shadow 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
   content: "";
 }
 .sd-slider-btn.sd-slider-btn-active::after, .sd-slider-btn:hover::after {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--component-slider-slider-shadow-button-active, var(--component-slider-shadow-button-active, 0 1px 3px rgba(0, 0, 0, 0.06)));
   transform: scale("");
 }
 .sd-slider-track-vertical .sd-slider-btn {
@@ -150,8 +150,8 @@
 }
 .sd-slider-marks .sd-slider-mark {
   position: absolute;
-  color: var(--sd-color-text-3);
-  font-size: 14px;
+  color: var(--component-slider-slider-color-mark-font, var(--component-slider-color-mark-font, var(--sd-color-text-3)));
+  font-size: var(--component-slider-slider-font-size-mark, var(--component-slider-font-size-mark, var(--font-size-body-3, 14px)));
   line-height: 1;
   transform: translateX(-50%);
   cursor: pointer;
@@ -170,7 +170,7 @@
 .sd-slider-dots .sd-slider-dot-wrapper {
   position: absolute;
   top: 50%;
-  font-size: 12px;
+  font-size: var(--component-slider-slider-font-size-dot, var(--component-slider-font-size-dot, var(--font-size-body-1, 12px)));
   transform: translate(-50%, -50%);
 }
 .sd-slider-track-vertical .sd-slider-dots .sd-slider-dot-wrapper {
@@ -180,46 +180,46 @@
 }
 .sd-slider-dots .sd-slider-dot-wrapper .sd-slider-dot {
   box-sizing: border-box;
-  width: 8px;
-  height: 8px;
-  background-color: var(--sd-color-bg-2);
-  border: 2px solid var(--sd-color-fill-3);
+  width: var(--component-slider-slider-size-dot-width, var(--component-slider-size-dot-width, var(--size-2, 8px)));
+  height: var(--component-slider-slider-size-dot-width, var(--component-slider-size-dot-width, var(--size-2, 8px)));
+  background-color: var(--component-slider-slider-color-dot-bg, var(--component-slider-color-dot-bg, var(--sd-color-bg-2)));
+  border: var(--component-slider-slider-border-size-dot, var(--component-slider-border-size-dot, var(--border-2, 2px))) solid var(--component-slider-slider-color-road-bg, var(--component-slider-color-road-bg, var(--sd-color-fill-3)));
   border-radius: 50%;
 }
 .sd-slider-dots .sd-slider-dot-wrapper .sd-slider-dot-active {
-  border-color: rgb(var(--sd-primary-6));
+  border-color: var(--component-slider-slider-color-bar-bg, var(--component-slider-color-bar-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-slider-ticks .sd-slider-tick {
   position: absolute;
   top: 50%;
-  width: 1px;
-  height: 3px;
+  width: var(--component-slider-slider-size-tick-width, var(--component-slider-size-tick-width, 1px));
+  height: var(--component-slider-slider-size-tick-height, var(--component-slider-size-tick-height, 3px));
   margin-top: -1px;
-  background: var(--sd-color-fill-3);
+  background: var(--component-slider-slider-color-road-bg, var(--component-slider-color-road-bg, var(--sd-color-fill-3)));
   transform: translate(-50%, -100%);
 }
 .sd-slider-ticks .sd-slider-tick-active {
-  background: rgb(var(--sd-primary-6));
+  background: var(--component-slider-slider-color-bar-bg, var(--component-slider-color-bar-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-slider-vertical .sd-slider-ticks .sd-slider-tick {
   top: unset;
   left: 50%;
-  width: 3px;
-  height: 1px;
+  width: var(--component-slider-slider-size-tick-height, var(--component-slider-size-tick-height, 3px));
+  height: var(--component-slider-slider-size-tick-width, var(--component-slider-size-tick-width, 1px));
   margin-top: unset;
   transform: translate(1px, 50%);
 }
 .sd-slider-input {
   display: flex;
   align-items: center;
-  margin-left: 20px;
+  margin-left: var(--component-slider-slider-spacing-input-margin-left, var(--component-slider-spacing-input-margin-left, var(--spacing-8, 20px)));
 }
 .sd-slider-vertical .sd-slider-input {
   margin-left: 0;
 }
 .sd-slider-input > .sd-input-number {
-  width: 60px;
-  height: 32px;
+  width: var(--component-slider-slider-size-input-width, var(--component-slider-size-input-width, var(--size-15, 60px)));
+  height: var(--component-slider-slider-size-input-height, var(--component-slider-size-input-height, var(--size-8, 32px)));
   overflow: visible;
   line-height: normal;
 }
@@ -228,8 +228,8 @@
 }
 .sd-slider-input-hyphens {
   width: 8px;
-  height: 2px;
+  height: var(--component-slider-slider-size-input-range-content-height, var(--component-slider-size-input-range-content-height, 2px));
   /* prettier-ignore */
   margin: 0 6px;
-  background: rgb(var(--sd-gray-6));
+  background: var(--component-slider-slider-color-input-range-content-bg, var(--component-slider-color-input-range-content-bg, rgb(var(--sd-gray-6))));
 }

package/es/slider/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';
@@ -58,3 +59,146 @@ $slider-color-input_range_content-bg: rgb(
 // vertical
 $slider-size-height_vertical: 200px;
 $slider-spacing-mark-left: 3px; // mark 文本和滑动路径的距离
+
+// @generated runtime tokens — pnpm theme:generate
+$slider-color-road-bg: theme-runtime.token('slider', 'slider-color-road-bg', $slider-color-road-bg);
+$slider-color-road-bg_disabled: theme-runtime.token(
+  'slider',
+  'slider-color-road-bg-disabled',
+  $slider-color-road-bg_disabled
+);
+$slider-color-bar-bg: theme-runtime.token(
+  'slider',
+  'slider-color-bar-bg',
+  $slider-color-bar-bg,
+  'color-primary-6'
+);
+$slider-color-bar-bg_disabled: theme-runtime.token(
+  'slider',
+  'slider-color-bar-bg-disabled',
+  $slider-color-bar-bg_disabled
+);
+$slider-color-button-bg: theme-runtime.token(
+  'slider',
+  'slider-color-button-bg',
+  $slider-color-button-bg
+);
+$slider-border-size-button: theme-runtime.token(
+  'slider',
+  'slider-border-size-button',
+  $slider-border-size-button,
+  'border-2'
+);
+$slider-color-button-border: theme-runtime.token(
+  'slider',
+  'slider-color-button-border',
+  $slider-color-button-border,
+  'color-primary-6'
+);
+$slider-color-button-border_disabled: theme-runtime.token(
+  'slider',
+  'slider-color-button-border-disabled',
+  $slider-color-button-border_disabled
+);
+$slider-shadow-button_active: theme-runtime.token(
+  'slider',
+  'slider-shadow-button-active',
+  $slider-shadow-button_active
+);
+$slider-color-dot-bg: theme-runtime.token('slider', 'slider-color-dot-bg', $slider-color-dot-bg);
+$slider-border-size-dot: theme-runtime.token(
+  'slider',
+  'slider-border-size-dot',
+  $slider-border-size-dot,
+  'border-2'
+);
+$slider-font-size-dot: theme-runtime.token(
+  'slider',
+  'slider-font-size-dot',
+  $slider-font-size-dot,
+  'font-size-body-1'
+);
+$slider-size-dot-width: theme-runtime.token(
+  'slider',
+  'slider-size-dot-width',
+  $slider-size-dot-width,
+  'size-2'
+);
+$slider-spacing-margin-bottom_with-mark: theme-runtime.token(
+  'slider',
+  'slider-spacing-margin-bottom-with-mark',
+  $slider-spacing-margin-bottom_with-mark,
+  'spacing-9'
+);
+$slider-spacing-padding_width-mark: theme-runtime.token(
+  'slider',
+  'slider-spacing-padding-width-mark',
+  $slider-spacing-padding_width-mark,
+  'spacing-8'
+);
+$slider-spacing-padding_width-mark_vertical: theme-runtime.token(
+  'slider',
+  'slider-spacing-padding-width-mark-vertical',
+  $slider-spacing-padding_width-mark_vertical,
+  'spacing-8'
+);
+$slider-font-size-mark: theme-runtime.token(
+  'slider',
+  'slider-font-size-mark',
+  $slider-font-size-mark,
+  'font-size-body-3'
+);
+$slider-color-mark-font: theme-runtime.token(
+  'slider',
+  'slider-color-mark-font',
+  $slider-color-mark-font
+);
+$slider-size-tick-width: theme-runtime.token(
+  'slider',
+  'slider-size-tick-width',
+  $slider-size-tick-width
+);
+$slider-size-tick-height: theme-runtime.token(
+  'slider',
+  'slider-size-tick-height',
+  $slider-size-tick-height
+);
+$slider-spacing-input-margin-left: theme-runtime.token(
+  'slider',
+  'slider-spacing-input-margin-left',
+  $slider-spacing-input-margin-left,
+  'spacing-8'
+);
+$slider-size-input-width: theme-runtime.token(
+  'slider',
+  'slider-size-input-width',
+  $slider-size-input-width,
+  'size-15'
+);
+$slider-size-input-height: theme-runtime.token(
+  'slider',
+  'slider-size-input-height',
+  $slider-size-input-height,
+  'size-8'
+);
+$slider-size-input_range-height: theme-runtime.token(
+  'slider',
+  'slider-size-input-range-height',
+  $slider-size-input_range-height,
+  'size-8'
+);
+$slider-size-input_range_content-height: theme-runtime.token(
+  'slider',
+  'slider-size-input-range-content-height',
+  $slider-size-input_range_content-height
+);
+$slider-color-input_range_content-bg: theme-runtime.token(
+  'slider',
+  'slider-color-input-range-content-bg',
+  $slider-color-input_range_content-bg
+);
+$slider-size-height_vertical: theme-runtime.token(
+  'slider',
+  'slider-size-height-vertical',
+  $slider-size-height_vertical
+);

package/es/spin/style/index.css

@@ -29,25 +29,25 @@
   left: 50%;
   width: 8px;
   height: 8px;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-spin-spin-dot-color-icon-default, var(--component-spin-dot-color-icon-default, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   border-radius: var(--sd-border-radius-circle);
   transform: translateX(-50%) scale(0);
   animation: sd-dot-loading 2s cubic-bezier(0, 0, 1, 1) infinite forwards;
 }
 .sd-dot-loading-item:nth-child(2) {
-  background-color: rgb(var(--sd-primary-5));
+  background-color: var(--component-spin-spin-dot-color-icon-second, var(--component-spin-dot-color-icon-second, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
   animation-delay: 400ms;
 }
 .sd-dot-loading-item:nth-child(3) {
-  background-color: rgb(var(--sd-primary-4));
+  background-color: var(--component-spin-spin-dot-color-icon-third, var(--component-spin-dot-color-icon-third, var(--color-primary-4, var(--sd-color-primary-4, rgb(var(--sd-primary-4))))));
   animation-delay: 800ms;
 }
 .sd-dot-loading-item:nth-child(4) {
-  background-color: rgb(var(--sd-primary-4));
+  background-color: var(--component-spin-spin-dot-color-icon-forth, var(--component-spin-dot-color-icon-forth, var(--color-primary-4, var(--sd-color-primary-4, rgb(var(--sd-primary-4))))));
   animation-delay: 1200ms;
 }
 .sd-dot-loading-item:nth-child(5) {
-  background-color: rgb(var(--sd-primary-2));
+  background-color: var(--component-spin-spin-dot-color-icon-last, var(--component-spin-dot-color-icon-last, var(--color-primary-2, var(--sd-color-primary-2, rgb(var(--sd-primary-2))))));
   animation-delay: 1600ms;
 }
 
@@ -165,14 +165,14 @@
   text-align: center;
 }
 .sd-spin-icon {
-  color: rgb(var(--sd-primary-6));
-  font-size: 20px;
+  color: var(--component-spin-spin-color-icon, var(--component-spin-color-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  font-size: var(--component-spin-spin-font-size-icon, var(--component-spin-font-size-icon, 20px));
 }
 .sd-spin-tip {
-  margin-top: 6px;
-  color: rgb(var(--sd-primary-6));
-  font-weight: 500;
-  font-size: 14px;
+  margin-top: var(--component-spin-spin-margin-top-tip, var(--component-spin-margin-top-tip, var(--spacing-3, 6px)));
+  color: var(--component-spin-spin-color-text, var(--component-spin-color-text, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  font-weight: var(--component-spin-spin-font-weight, var(--component-spin-font-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-spin-spin-font-size-text, var(--component-spin-font-size-text, 14px));
 }
 .sd-spin-mask {
   position: absolute;

package/es/spin/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';
@@ -30,3 +31,62 @@ $spin-dot-color-icon_forth: global.$color-primary-4;
 $spin-dot-color-icon_last: global.$color-primary-2;
 
 $spin-dot-size-width: global.$size-2;
+
+// @generated runtime tokens — pnpm theme:generate
+$spin-font-size-text: theme-runtime.token('spin', 'spin-font-size-text', $spin-font-size-text);
+$spin-font-size-icon: theme-runtime.token('spin', 'spin-font-size-icon', $spin-font-size-icon);
+$spin-font-weight: theme-runtime.token(
+  'spin',
+  'spin-font-weight',
+  $spin-font-weight,
+  'font-weight-500'
+);
+$spin-line-height: theme-runtime.token('spin', 'spin-line-height', $line-height-base);
+$spin-margin-top-tip: theme-runtime.token(
+  'spin',
+  'spin-margin-top-tip',
+  $spin-margin-top-tip,
+  'spacing-3'
+);
+$spin-color-text: theme-runtime.token(
+  'spin',
+  'spin-color-text',
+  $spin-color-text,
+  'color-primary-6'
+);
+$spin-color-icon: theme-runtime.token(
+  'spin',
+  'spin-color-icon',
+  $spin-color-icon,
+  'color-primary-6'
+);
+$spin-dot-color-icon_default: theme-runtime.token(
+  'spin',
+  'spin-dot-color-icon-default',
+  $spin-dot-color-icon_default,
+  'color-primary-6'
+);
+$spin-dot-color-icon_second: theme-runtime.token(
+  'spin',
+  'spin-dot-color-icon-second',
+  $spin-dot-color-icon_second,
+  'color-primary-5'
+);
+$spin-dot-color-icon_third: theme-runtime.token(
+  'spin',
+  'spin-dot-color-icon-third',
+  $spin-dot-color-icon_third,
+  'color-primary-4'
+);
+$spin-dot-color-icon_forth: theme-runtime.token(
+  'spin',
+  'spin-dot-color-icon-forth',
+  $spin-dot-color-icon_forth,
+  'color-primary-4'
+);
+$spin-dot-color-icon_last: theme-runtime.token(
+  'spin',
+  'spin-dot-color-icon-last',
+  $spin-dot-color-icon_last,
+  'color-primary-2'
+);

package/es/split/style/index.css

@@ -36,10 +36,10 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--sd-color-text-1);
+  color: var(--component-split-split-trigger-color-icon, var(--component-split-trigger-color-icon, var(--sd-color-text-1)));
   font-size: 12px;
   line-height: 1;
-  background-color: var(--sd-color-neutral-3);
+  background-color: var(--component-split-split-trigger-color-background, var(--component-split-trigger-color-background, var(--sd-color-neutral-3)));
 }
 .sd-split-trigger-icon {
   display: inline-block;

package/es/split/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';
@@ -16,3 +17,20 @@ $split-trigger-size-icon-wrapper: 6px;
 $split-trigger-font-size-icon: 12px;
 
 $split-trigger-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+// @generated runtime tokens — pnpm theme:generate
+$split-trigger-color-background: theme-runtime.token(
+  'split',
+  'split-trigger-color-background',
+  $split-trigger-color-background
+);
+$split-trigger-size-icon-wrapper: theme-runtime.token(
+  'split',
+  'split-trigger-size-icon-wrapper',
+  $split-trigger-size-icon-wrapper
+);
+$split-trigger-color-icon: theme-runtime.token(
+  'split',
+  'split-trigger-color-icon',
+  $split-trigger-color-icon
+);

package/es/statistic/style/index.css

@@ -17,18 +17,18 @@
 /********* icon hover *********/
 .sd-statistic {
   display: inline-block;
-  color: var(--sd-color-text-2);
+  color: var(--component-statistic-statistic-color-text, var(--component-statistic-color-text, var(--sd-color-text-2)));
   line-height: 1.5715;
 }
 .sd-statistic-title {
-  margin-bottom: 8px;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  margin-bottom: var(--component-statistic-statistic-margin-title-bottom, var(--component-statistic-margin-title-bottom, var(--spacing-4, 8px)));
+  color: var(--component-statistic-statistic-color-title-text, var(--component-statistic-color-title-text, var(--sd-color-text-2)));
+  font-size: var(--component-statistic-statistic-font-title-size, var(--component-statistic-font-title-size, var(--font-size-body-3, 14px)));
 }
 .sd-statistic-content .sd-statistic-value {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  font-size: 26px;
+  color: var(--component-statistic-statistic-color-value-text, var(--component-statistic-color-value-text, var(--sd-color-text-1)));
+  font-weight: var(--component-statistic-statistic-font-value-weight, var(--component-statistic-font-value-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-statistic-statistic-font-int-size, var(--component-statistic-font-int-size, 26px));
   white-space: nowrap;
 }
 .sd-statistic-content .sd-statistic-value-integer {
@@ -36,19 +36,19 @@
   white-space: nowrap;
 }
 .sd-statistic-content .sd-statistic-value .sd-number-flow-fraction {
-  font-size: inherit;
+  font-size: var(--component-statistic-statistic-font-decimal-size, var(--component-statistic-font-decimal-size, inherit));
 }
 .sd-statistic-content .sd-statistic-value-decimal {
   display: inline-block;
-  font-size: inherit;
+  font-size: var(--component-statistic-statistic-font-decimal-size, var(--component-statistic-font-decimal-size, inherit));
 }
 .sd-statistic-prefix {
-  font-size: 14px;
+  font-size: var(--component-statistic-statistic-size-value-icon, var(--component-statistic-size-value-icon, 14px));
 }
 .sd-statistic-suffix {
-  font-size: 14px;
+  font-size: var(--component-statistic-statistic-font-suffix-size, var(--component-statistic-font-suffix-size, 14px));
 }
 .sd-statistic-extra {
-  margin-top: 8px;
-  color: var(--sd-color-text-2);
+  margin-top: var(--component-statistic-statistic-margin-extra-top, var(--component-statistic-margin-extra-top, var(--spacing-4, 8px)));
+  color: var(--component-statistic-statistic-color-extra-text, var(--component-statistic-color-extra-text, var(--sd-color-text-2)));
 }

package/es/statistic/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,75 @@ $statistic-font-suffix-size: 14px;
 $statistic-color-title-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
 
 $statistic-color-extra-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+// @generated runtime tokens — pnpm theme:generate
+$statistic-font-title-size: theme-runtime.token(
+  'statistic',
+  'statistic-font-title-size',
+  $statistic-font-title-size,
+  'font-size-body-3'
+);
+$statistic-margin-title-bottom: theme-runtime.token(
+  'statistic',
+  'statistic-margin-title-bottom',
+  $statistic-margin-title-bottom,
+  'spacing-4'
+);
+$statistic-margin-extra-top: theme-runtime.token(
+  'statistic',
+  'statistic-margin-extra-top',
+  $statistic-margin-extra-top,
+  'spacing-4'
+);
+$statistic-font-value-size: theme-runtime.token(
+  'statistic',
+  'statistic-font-value-size',
+  $statistic-font-value-size,
+  'font-size-body-3'
+);
+$statistic-font-int-size: theme-runtime.token(
+  'statistic',
+  'statistic-font-int-size',
+  $statistic-font-int-size
+);
+$statistic-font-decimal-size: theme-runtime.token(
+  'statistic',
+  'statistic-font-decimal-size',
+  $statistic-font-decimal-size
+);
+$statistic-font-value-weight: theme-runtime.token(
+  'statistic',
+  'statistic-font-value-weight',
+  $statistic-font-value-weight,
+  'font-weight-500'
+);
+$statistic-color-value-text: theme-runtime.token(
+  'statistic',
+  'statistic-color-value-text',
+  $statistic-color-value-text
+);
+$statistic-color-text: theme-runtime.token(
+  'statistic',
+  'statistic-color-text',
+  $statistic-color-text
+);
+$statistic-size-value-icon: theme-runtime.token(
+  'statistic',
+  'statistic-size-value-icon',
+  $statistic-size-value-icon
+);
+$statistic-font-suffix-size: theme-runtime.token(
+  'statistic',
+  'statistic-font-suffix-size',
+  $statistic-font-suffix-size
+);
+$statistic-color-title-text: theme-runtime.token(
+  'statistic',
+  'statistic-color-title-text',
+  $statistic-color-title-text
+);
+$statistic-color-extra-text: theme-runtime.token(
+  'statistic',
+  'statistic-color-extra-text',
+  $statistic-color-extra-text
+);