@sdata/web-vue 4.7.1 → 5.0.0

package/es/sender/style/index.css

@@ -22,23 +22,23 @@
   position: relative;
   width: 100%;
   overflow: hidden;
-  background: var(--sd-color-bg-2);
-  border: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
-  border-radius: calc(var(--sd-border-radius-medium) * 2);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  background: var(--component-sender-sender-color-bg, var(--component-sender-color-bg, var(--sd-color-bg-2)));
+  border: var(--component-sender-sender-border-width, var(--component-sender-border-width, var(--border-1, 1px))) solid var(--component-sender-sender-color-border-input, var(--component-sender-color-border-input, color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent)));
+  border-radius: var(--component-sender-sender-border-radius, var(--component-sender-border-radius, calc(var(--sd-border-radius-medium) * 2)));
+  box-shadow: var(--component-sender-sender-box-shadow, var(--component-sender-box-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)));
 }
 .sd-sender-disabled {
-  background: var(--sd-color-neutral-2);
+  background: var(--component-sender-sender-color-bg-disabled, var(--component-sender-color-bg-disabled, var(--color-fill-2, var(--sd-color-fill-2, var(--sd-color-neutral-2)))));
   border-color: transparent;
 }
 .sd-sender-content {
   display: flex;
-  gap: 8px;
+  gap: var(--component-sender-sender-content-gap, var(--component-sender-content-gap, var(--spacing-4, 8px)));
   align-items: flex-end;
   box-sizing: border-box;
   width: 100%;
   padding-block: 12px;
-  padding-inline: 12px;
+  padding-inline: var(--component-sender-sender-padding-inline, var(--component-sender-padding-inline, var(--spacing-6, 12px)));
 }
 .sd-sender-prefix, .sd-sender-actions-list {
   flex: none;
@@ -48,9 +48,9 @@
   align-self: center;
   min-width: 0;
   padding: 0;
-  color: var(--sd-color-neutral-10);
-  font-size: 14px;
-  caret-color: rgb(var(--sd-primary-6));
+  color: var(--component-sender-sender-color-text, var(--component-sender-color-text, var(--color-text-1, var(--sd-color-text-1, var(--sd-color-neutral-10)))));
+  font-size: var(--component-sender-sender-font-size, var(--component-sender-font-size, var(--font-size-body-3, 14px)));
+  caret-color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   background: transparent;
   border: 0;
   border-radius: 0;
@@ -63,7 +63,7 @@
   box-shadow: none;
 }
 .sd-sender-input.sd-sender-input.sd-textarea-wrapper .sd-textarea {
-  min-height: 32px;
+  min-height: var(--component-sender-sender-control-height, var(--component-sender-control-height, var(--size-default, 32px)));
   padding: 5px 0;
   background: transparent;
   border: 0;
@@ -79,18 +79,18 @@
 }
 .sd-sender-actions-list-presets {
   display: flex;
-  gap: 8px;
+  gap: var(--component-sender-sender-content-gap, var(--component-sender-content-gap, var(--spacing-4, 8px)));
 }
 .sd-sender-actions-btn.sd-button-text {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-sender-actions-btn-disabled.sd-button-text {
-  color: color-mix(in srgb, rgb(var(--sd-primary-6)) 45%, transparent);
+  color: var(--component-sender-sender-color-bg-actions-disabled, var(--component-sender-color-bg-actions-disabled, color-mix(in srgb, rgb(var(--sd-primary-6)) 45%, transparent)));
   border-color: transparent;
 }
 .sd-sender-actions-btn-disabled:not(.sd-button-text) {
   color: #fff;
-  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 45%, transparent);
+  background: var(--component-sender-sender-color-bg-actions-disabled, var(--component-sender-color-bg-actions-disabled, color-mix(in srgb, rgb(var(--sd-primary-6)) 45%, transparent)));
   border-color: transparent;
 }
 .sd-sender-actions-btn-loading-button {
@@ -98,8 +98,8 @@
   border: 0;
 }
 .sd-sender-actions-btn-loading-icon {
-  width: 32px;
-  height: 32px;
+  width: var(--component-sender-sender-control-height, var(--component-sender-control-height, var(--size-default, 32px)));
+  height: var(--component-sender-sender-control-height, var(--component-sender-control-height, var(--size-default, 32px)));
   vertical-align: top;
 }
 .sd-sender-actions-btn-recording-icon {
@@ -118,11 +118,11 @@
 }
 .sd-sender-footer {
   display: flex;
-  gap: 8px;
+  gap: var(--component-sender-sender-content-gap, var(--component-sender-content-gap, var(--spacing-4, 8px)));
   align-items: center;
   box-sizing: border-box;
-  padding-block: 4px 12px;
-  padding-inline: 12px;
+  padding-block: var(--component-sender-sender-footer-padding-top, var(--component-sender-footer-padding-top, var(--spacing-2, 4px))) 12px;
+  padding-inline: var(--component-sender-sender-padding-inline, var(--component-sender-padding-inline, var(--spacing-6, 12px)));
 }
 .sd-sender-footer-content {
   flex: auto;
@@ -134,17 +134,17 @@
 }
 .sd-sender-header {
   overflow: hidden;
-  border-bottom: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
+  border-bottom: var(--component-sender-sender-border-width, var(--component-sender-border-width, var(--border-1, 1px))) solid var(--component-sender-sender-color-border-input, var(--component-sender-color-border-input, color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent)));
 }
 .sd-sender-header-header {
   display: flex;
   align-items: center;
   padding-block: 10px;
   padding-inline: 16px 8px;
-  font-size: 14px;
-  line-height: 1.5715;
-  background: var(--sd-color-neutral-2);
-  border-radius: calc(var(--sd-border-radius-medium) * 2) calc(var(--sd-border-radius-medium) * 2) 0 0;
+  font-size: var(--component-sender-sender-font-size, var(--component-sender-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-sender-sender-line-height, var(--component-sender-line-height, 1.5715));
+  background: var(--component-sender-sender-color-header-bg, var(--component-sender-color-header-bg, var(--color-fill-2, var(--sd-color-fill-2, var(--sd-color-neutral-2)))));
+  border-radius: var(--component-sender-sender-border-radius, var(--component-sender-border-radius, calc(var(--sd-border-radius-medium) * 2))) var(--component-sender-sender-border-radius, var(--component-sender-border-radius, calc(var(--sd-border-radius-medium) * 2))) 0 0;
 }
 .sd-sender-header-title {
   flex: auto;
@@ -157,7 +157,7 @@
 }
 .sd-sender-header-motion-enter-active, .sd-sender-header-motion-leave-active {
   overflow: hidden;
-  transition: height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: height var(--component-sender-sender-motion-duration, var(--component-sender-motion-duration, 0.3s)) var(--component-sender-sender-motion-easing, var(--component-sender-motion-easing, cubic-bezier(0.34, 0.69, 0.1, 1))), border-color var(--component-sender-sender-motion-duration, var(--component-sender-motion-duration, 0.3s)) var(--component-sender-sender-motion-easing, var(--component-sender-motion-easing, cubic-bezier(0.34, 0.69, 0.1, 1)));
 }
 .sd-sender-input-slot.sd-rich-text-editor {
   display: block;
@@ -180,25 +180,25 @@
   color: inherit;
   font: inherit;
   line-height: inherit;
-  caret-color: rgb(var(--sd-primary-6));
+  caret-color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   outline: none;
 }
 .sd-sender-input-slot .sd-rich-text-editor-placeholder {
   inset-block-start: 0;
   inset-inline-start: 0;
-  color: var(--sd-color-neutral-4);
+  color: var(--component-sender-sender-color-text-placeholder, var(--component-sender-color-text-placeholder, var(--color-text-4, var(--sd-color-text-4, var(--sd-color-neutral-4)))));
 }
 .sd-sender-input-slot .sd-rich-text-editor-component {
-  margin-inline: 4px;
+  margin-inline: var(--component-sender-sender-slot-gap, var(--component-sender-slot-gap, var(--spacing-2, 4px)));
 }
 .sd-sender-input-slot .sd-rich-text-editor-component-control {
-  min-height: calc(14px * 1.5715 + 2px);
+  min-height: calc(var(--component-sender-sender-font-size, var(--component-sender-font-size, var(--font-size-body-3, 14px))) * var(--component-sender-sender-line-height, var(--component-sender-line-height, 1.5715)) + 2px);
   font-size: inherit;
   line-height: inherit;
 }
 .sd-sender-input-slot-content {
   width: 100%;
-  min-height: 32px;
+  min-height: var(--component-sender-sender-control-height, var(--component-sender-control-height, var(--size-default, 32px)));
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   cursor: text;
@@ -209,7 +209,7 @@
 }
 .sd-sender-skill {
   display: inline-block;
-  height: calc(14px * 1.5715 + 2px);
+  height: calc(var(--component-sender-sender-font-size, var(--component-sender-font-size, var(--font-size-body-3, 14px))) * var(--component-sender-sender-line-height, var(--component-sender-line-height, 1.5715)) + 2px);
   margin-block: 1px;
   margin-inline-start: -1px;
   vertical-align: baseline;
@@ -218,7 +218,7 @@
 .sd-sender-skill-empty::after {
   display: inline-block;
   height: inherit;
-  color: var(--sd-color-neutral-4);
+  color: var(--component-sender-sender-color-text-placeholder, var(--component-sender-color-text-placeholder, var(--color-text-4, var(--sd-color-text-4, var(--sd-color-neutral-4)))));
   content: attr(data-placeholder);
   pointer-events: none;
 }
@@ -228,54 +228,54 @@
 }
 .sd-sender-skill-tag {
   display: inline-flex;
-  gap: 4px;
+  gap: var(--component-sender-sender-slot-gap, var(--component-sender-slot-gap, var(--spacing-2, 4px)));
   align-items: center;
   height: 100%;
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   font-weight: 500;
-  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 8%, transparent);
-  border-radius: var(--sd-border-radius-medium);
+  background: var(--component-sender-sender-color-bg-skill, var(--component-sender-color-bg-skill, color-mix(in srgb, rgb(var(--sd-primary-6)) 8%, transparent)));
+  border-radius: var(--component-sender-sender-slot-border-radius, var(--component-sender-slot-border-radius, var(--sd-border-radius-medium)));
   cursor: pointer;
-  transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
-  padding-inline: 8px;
+  transition: background-color var(--component-sender-sender-motion-duration-fast, var(--component-sender-motion-duration-fast, 0.2s)) var(--component-sender-sender-motion-easing, var(--component-sender-motion-easing, cubic-bezier(0.34, 0.69, 0.1, 1)));
+  padding-inline: var(--component-sender-sender-skill-padding-inline, var(--component-sender-skill-padding-inline, var(--spacing-4, 8px)));
 }
 .sd-sender-skill-tag:hover {
-  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 15%, transparent);
+  background: var(--component-sender-sender-color-bg-skill-hover, var(--component-sender-color-bg-skill-hover, color-mix(in srgb, rgb(var(--sd-primary-6)) 15%, transparent)));
 }
 .sd-sender-skill-tag-close {
   display: inline-flex;
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   font-size: 12px;
-  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: color var(--component-sender-sender-motion-duration-fast, var(--component-sender-motion-duration-fast, 0.2s)) var(--component-sender-sender-motion-easing, var(--component-sender-motion-easing, cubic-bezier(0.34, 0.69, 0.1, 1)));
 }
 .sd-sender-skill-tag-close:not(.sd-sender-skill-tag-close-disabled):hover {
-  color: rgb(var(--sd-primary-5));
+  color: var(--component-sender-sender-color-primary-hover, var(--component-sender-color-primary-hover, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
 }
 .sd-sender-skill-tag-close-disabled {
-  color: var(--sd-color-neutral-4);
+  color: var(--component-sender-sender-color-text-disabled, var(--component-sender-color-text-disabled, var(--color-text-4, var(--sd-color-text-4, var(--sd-color-neutral-4)))));
   cursor: not-allowed;
 }
 .sd-sender-skill-holder {
-  width: 10px;
+  width: var(--component-sender-sender-skill-holder-width, var(--component-sender-skill-holder-width, var(--spacing-5, 10px)));
   height: 100%;
 }
 .sd-sender-switch {
   display: inline-block;
 }
 .sd-sender-switch .sd-sender-switch-content:not(:disabled):hover {
-  color: var(--sd-color-neutral-10);
-  background: color-mix(in srgb, var(--sd-color-neutral-3) 4%, transparent);
-  border-color: var(--sd-color-neutral-3);
+  color: var(--component-sender-sender-color-text, var(--component-sender-color-text, var(--color-text-1, var(--sd-color-text-1, var(--sd-color-neutral-10)))));
+  background: var(--component-sender-sender-switch-unchecked-hover-bg, var(--component-sender-switch-unchecked-hover-bg, color-mix(in srgb, var(--sd-color-neutral-3) 4%, transparent)));
+  border-color: var(--component-sender-sender-color-border, var(--component-sender-color-border, var(--color-border-2, var(--sd-color-border-2, var(--sd-color-neutral-3)))));
 }
 .sd-sender-switch-checked .sd-sender-switch-content {
-  color: rgb(var(--sd-primary-6));
-  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 8%, transparent);
-  border-color: rgb(var(--sd-primary-6));
+  color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  background: var(--component-sender-sender-switch-checked-bg, var(--component-sender-switch-checked-bg, color-mix(in srgb, rgb(var(--sd-primary-6)) 8%, transparent)));
+  border-color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-sender-switch-checked .sd-sender-switch-content:not(:disabled):hover {
-  color: rgb(var(--sd-primary-6));
-  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 10%, transparent);
-  border-color: rgb(var(--sd-primary-6));
+  color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  background: var(--component-sender-sender-switch-checked-hover-bg, var(--component-sender-switch-checked-hover-bg, color-mix(in srgb, rgb(var(--sd-primary-6)) 10%, transparent)));
+  border-color: var(--component-sender-sender-color-primary, var(--component-sender-color-primary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 
 @keyframes sender-loading-rotate {

package/es/sender/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 @use 'sass:string';
 
@@ -42,3 +43,157 @@ $sender-box-shadow:
 $sender-motion-duration: global.$transition-duration-3;
 $sender-motion-duration-fast: global.$transition-duration-2;
 $sender-motion-easing: global.$transition-timing-function-standard;
+
+// @generated runtime tokens — pnpm theme:generate
+$sender-font-size: theme-runtime.token(
+  'sender',
+  'sender-font-size',
+  $sender-font-size,
+  'font-size-body-3'
+);
+$sender-line-height: theme-runtime.token('sender', 'sender-line-height', $sender-line-height);
+$sender-border-width: theme-runtime.token(
+  'sender',
+  'sender-border-width',
+  $sender-border-width,
+  'border-1'
+);
+$sender-border-radius: theme-runtime.token('sender', 'sender-border-radius', $sender-border-radius);
+$sender-slot-border-radius: theme-runtime.token(
+  'sender',
+  'sender-slot-border-radius',
+  $sender-slot-border-radius
+);
+$sender-control-height: theme-runtime.token(
+  'sender',
+  'sender-control-height',
+  $sender-control-height,
+  'size-default'
+);
+$sender-padding-inline: theme-runtime.token(
+  'sender',
+  'sender-padding-inline',
+  $sender-padding-inline,
+  'spacing-6'
+);
+$sender-content-gap: theme-runtime.token(
+  'sender',
+  'sender-content-gap',
+  $sender-content-gap,
+  'spacing-4'
+);
+$sender-footer-padding-top: theme-runtime.token(
+  'sender',
+  'sender-footer-padding-top',
+  $sender-footer-padding-top,
+  'spacing-2'
+);
+$sender-slot-gap: theme-runtime.token('sender', 'sender-slot-gap', $sender-slot-gap, 'spacing-2');
+$sender-skill-padding-inline: theme-runtime.token(
+  'sender',
+  'sender-skill-padding-inline',
+  $sender-skill-padding-inline,
+  'spacing-4'
+);
+$sender-skill-holder-width: theme-runtime.token(
+  'sender',
+  'sender-skill-holder-width',
+  $sender-skill-holder-width,
+  'spacing-5'
+);
+$sender-color-primary: theme-runtime.token(
+  'sender',
+  'sender-color-primary',
+  $sender-color-primary,
+  'color-primary-6'
+);
+$sender-color-primary-hover: theme-runtime.token(
+  'sender',
+  'sender-color-primary-hover',
+  $sender-color-primary-hover,
+  'color-primary-5'
+);
+$sender-color-text: theme-runtime.token(
+  'sender',
+  'sender-color-text',
+  $sender-color-text,
+  'color-text-1'
+);
+$sender-color-text-disabled: theme-runtime.token(
+  'sender',
+  'sender-color-text-disabled',
+  $sender-color-text-disabled,
+  'color-text-4'
+);
+$sender-color-text-placeholder: theme-runtime.token(
+  'sender',
+  'sender-color-text-placeholder',
+  $sender-color-text-placeholder,
+  'color-text-4'
+);
+$sender-color-bg: theme-runtime.token('sender', 'sender-color-bg', $sender-color-bg);
+$sender-color-bg-disabled: theme-runtime.token(
+  'sender',
+  'sender-color-bg-disabled',
+  $sender-color-bg-disabled,
+  'color-fill-2'
+);
+$sender-color-header-bg: theme-runtime.token(
+  'sender',
+  'sender-color-header-bg',
+  $sender-color-header-bg,
+  'color-fill-2'
+);
+$sender-color-border: theme-runtime.token(
+  'sender',
+  'sender-color-border',
+  $sender-color-border,
+  'color-border-2'
+);
+$sender-color-border-input: theme-runtime.token(
+  'sender',
+  'sender-color-border-input',
+  $sender-color-border-input
+);
+$sender-color-bg-skill: theme-runtime.token(
+  'sender',
+  'sender-color-bg-skill',
+  $sender-color-bg-skill
+);
+$sender-color-bg-skill-hover: theme-runtime.token(
+  'sender',
+  'sender-color-bg-skill-hover',
+  $sender-color-bg-skill-hover
+);
+$sender-color-bg-actions-disabled: theme-runtime.token(
+  'sender',
+  'sender-color-bg-actions-disabled',
+  $sender-color-bg-actions-disabled
+);
+$sender-switch-checked-bg: theme-runtime.token(
+  'sender',
+  'sender-switch-checked-bg',
+  $sender-switch-checked-bg
+);
+$sender-switch-checked-hover-bg: theme-runtime.token(
+  'sender',
+  'sender-switch-checked-hover-bg',
+  $sender-switch-checked-hover-bg
+);
+$sender-switch-unchecked-hover-bg: theme-runtime.token(
+  'sender',
+  'sender-switch-unchecked-hover-bg',
+  $sender-switch-unchecked-hover-bg
+);
+$sender-box-shadow: theme-runtime.token('sender', 'sender-box-shadow', $sender-box-shadow);
+$sender-motion-duration: theme-runtime.token(
+  'sender',
+  'sender-motion-duration',
+  $sender-motion-duration
+);
+$sender-motion-duration-fast: theme-runtime.token(
+  'sender',
+  'sender-motion-duration-fast',
+  $sender-motion-duration-fast
+);
+$sender-motion-easing: theme-runtime.token('sender', 'sender-motion-easing', $sender-motion-easing);

package/es/skeleton/style/index.css

@@ -16,21 +16,21 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-skeleton-shape {
-  width: 48px;
-  height: 48px;
-  background-color: var(--sd-color-fill-2);
-  border-radius: var(--sd-border-radius-small);
+  width: var(--component-skeleton-skeleton-size-image-default, var(--component-skeleton-size-image-default, var(--size-12, 48px)));
+  height: var(--component-skeleton-skeleton-size-image-default, var(--component-skeleton-size-image-default, var(--size-12, 48px)));
+  background-color: var(--component-skeleton-skeleton-color-bg-base, var(--component-skeleton-color-bg-base, var(--sd-color-fill-2)));
+  border-radius: var(--component-skeleton-skeleton-radius-image-border, var(--component-skeleton-radius-image-border, var(--sd-border-radius-small)));
 }
 .sd-skeleton-shape-circle {
   border-radius: 50%;
 }
 .sd-skeleton-shape-small {
-  width: 36px;
-  height: 36px;
+  width: var(--component-skeleton-skeleton-size-image-small, var(--component-skeleton-size-image-small, var(--size-9, 36px)));
+  height: var(--component-skeleton-skeleton-size-image-small, var(--component-skeleton-size-image-small, var(--size-9, 36px)));
 }
 .sd-skeleton-shape-large {
-  width: 60px;
-  height: 60px;
+  width: var(--component-skeleton-skeleton-size-image-large, var(--component-skeleton-size-image-large, var(--size-15, 60px)));
+  height: var(--component-skeleton-skeleton-size-image-large, var(--component-skeleton-size-image-large, var(--size-15, 60px)));
 }
 .sd-skeleton-line {
   margin: 0;
@@ -38,15 +38,15 @@
   list-style: none;
 }
 .sd-skeleton-line-row {
-  height: 16px;
-  background-color: var(--sd-color-fill-2);
+  height: var(--component-skeleton-skeleton-size-row-height, var(--component-skeleton-size-row-height, var(--size-4, 16px)));
+  background-color: var(--component-skeleton-skeleton-color-bg-base, var(--component-skeleton-color-bg-base, var(--sd-color-fill-2)));
 }
 .sd-skeleton-line-row:not(:last-child) {
-  margin-bottom: 16px;
+  margin-bottom: var(--component-skeleton-skeleton-spacing-last-row-margin-bottom, var(--component-skeleton-spacing-last-row-margin-bottom, var(--spacing-7, 16px)));
 }
 .sd-skeleton-animation .sd-skeleton-shape,
 .sd-skeleton-animation .sd-skeleton-line-row {
-  background: linear-gradient(90deg, var(--sd-color-fill-2) 25%, var(--sd-color-fill-3) 37%, var(--sd-color-fill-2) 63%);
+  background: linear-gradient(90deg, var(--component-skeleton-skeleton-color-bg-base, var(--component-skeleton-color-bg-base, var(--sd-color-fill-2))) 25%, var(--component-skeleton-skeleton-color-animate-bg, var(--component-skeleton-color-animate-bg, var(--sd-color-fill-3))) 37%, var(--component-skeleton-skeleton-color-bg-base, var(--component-skeleton-color-bg-base, var(--sd-color-fill-2))) 63%);
   background-size: 400% 100%;
   animation: sd-skeleton-circle 1.5s cubic-bezier(0, 0, 1, 1) infinite;
 }

package/es/skeleton/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -25,3 +26,62 @@ $skeleton-size-row-height: global.$size-4;
 $skeleton-spacing-last_row-margin-bottom: global.$spacing-7;
 
 $skeleton-color-animate-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+// @generated runtime tokens — pnpm theme:generate
+$skeleton-color-bg-base: theme-runtime.token(
+  'skeleton',
+  'skeleton-color-bg-base',
+  $skeleton-color-bg-base
+);
+$skeleton-radius-image-border: theme-runtime.token(
+  'skeleton',
+  'skeleton-radius-image-border',
+  $skeleton-radius-image-border
+);
+$skeleton-size-image_default: theme-runtime.token(
+  'skeleton',
+  'skeleton-size-image-default',
+  $skeleton-size-image_default,
+  'size-12'
+);
+$skeleton-size-image_small: theme-runtime.token(
+  'skeleton',
+  'skeleton-size-image-small',
+  $skeleton-size-image_small,
+  'size-9'
+);
+$skeleton-size-image_large: theme-runtime.token(
+  'skeleton',
+  'skeleton-size-image-large',
+  $skeleton-size-image_large,
+  'size-15'
+);
+$skeleton-spacing-image_left-margin-right: theme-runtime.token(
+  'skeleton',
+  'skeleton-spacing-image-left-margin-right',
+  $skeleton-spacing-image_left-margin-right,
+  'spacing-7'
+);
+$skeleton-spacing-image_right-margin-left: theme-runtime.token(
+  'skeleton',
+  'skeleton-spacing-image-right-margin-left',
+  $skeleton-spacing-image_right-margin-left,
+  'spacing-7'
+);
+$skeleton-size-row-height: theme-runtime.token(
+  'skeleton',
+  'skeleton-size-row-height',
+  $skeleton-size-row-height,
+  'size-4'
+);
+$skeleton-spacing-last_row-margin-bottom: theme-runtime.token(
+  'skeleton',
+  'skeleton-spacing-last-row-margin-bottom',
+  $skeleton-spacing-last_row-margin-bottom,
+  'spacing-7'
+);
+$skeleton-color-animate-bg: theme-runtime.token(
+  'skeleton',
+  'skeleton-color-animate-bg',
+  $skeleton-color-animate-bg
+);