@sdata/web-vue 4.7.1 → 5.0.0

package/es/badge/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/color/colors.scss';
 @use '@style/theme/index.scss' as global;
 
@@ -62,3 +63,150 @@ $badge-purple-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}
 $badge-magenta-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-magenta-6')));
 
 $badge-gray-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-4')));
+
+// @generated runtime tokens — pnpm theme:generate
+$badge-size-count-height: theme-runtime.token(
+  'badge',
+  'badge-size-count-height',
+  $badge-size-count-height,
+  'size-5'
+);
+$badge-padding-count-horizontal: theme-runtime.token(
+  'badge',
+  'badge-padding-count-horizontal',
+  $badge-padding-count-horizontal,
+  'spacing-3'
+);
+$badge-margin-status-text-left: theme-runtime.token(
+  'badge',
+  'badge-margin-status-text-left',
+  $badge-margin-status-text-left,
+  'spacing-4'
+);
+$badge-font-count-size: theme-runtime.token(
+  'badge',
+  'badge-font-count-size',
+  $badge-font-count-size,
+  'font-size-body-1'
+);
+$badge-font-status-text-size: theme-runtime.token(
+  'badge',
+  'badge-font-status-text-size',
+  $badge-font-status-text-size,
+  'font-size-body-1'
+);
+$badge-color-count-text: theme-runtime.token(
+  'badge',
+  'badge-color-count-text',
+  $badge-color-count-text
+);
+$badge-color-status-text: theme-runtime.token(
+  'badge',
+  'badge-color-status-text',
+  $badge-color-status-text
+);
+$badge-color-count-bg: theme-runtime.token(
+  'badge',
+  'badge-color-count-bg',
+  $badge-color-count-bg,
+  'color-danger-6'
+);
+$badge-size-dot-width: theme-runtime.token('badge', 'badge-size-dot-width', $badge-size-dot-width);
+$badge-color-dot-bg_default: theme-runtime.token(
+  'badge',
+  'badge-color-dot-bg-default',
+  $badge-color-dot-bg_default
+);
+$badge-color-dot-bg_processing: theme-runtime.token(
+  'badge',
+  'badge-color-dot-bg-processing',
+  $badge-color-dot-bg_processing,
+  'color-primary-6'
+);
+$badge-color-dot-bg_success: theme-runtime.token(
+  'badge',
+  'badge-color-dot-bg-success',
+  $badge-color-dot-bg_success,
+  'color-success-6'
+);
+$badge-color-dot-bg_warning: theme-runtime.token(
+  'badge',
+  'badge-color-dot-bg-warning',
+  $badge-color-dot-bg_warning,
+  'color-warning-6'
+);
+$badge-color-dot-bg_error: theme-runtime.token(
+  'badge',
+  'badge-color-dot-bg-error',
+  $badge-color-dot-bg_error,
+  'color-danger-6'
+);
+$badge-font-count-weight: theme-runtime.token(
+  'badge',
+  'badge-font-count-weight',
+  $badge-font-count-weight,
+  'font-weight-500'
+);
+$badge-red-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-red-color-dot-bg',
+  $badge-red-color-dot-bg,
+  'color-danger-6'
+);
+$badge-orangered-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-orangered-color-dot-bg',
+  $badge-orangered-color-dot-bg
+);
+$badge-orange-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-orange-color-dot-bg',
+  $badge-orange-color-dot-bg
+);
+$badge-lime-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-lime-color-dot-bg',
+  $badge-lime-color-dot-bg
+);
+$badge-gold-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-gold-color-dot-bg',
+  $badge-gold-color-dot-bg
+);
+$badge-green-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-green-color-dot-bg',
+  $badge-green-color-dot-bg,
+  'color-success-6'
+);
+$badge-cyan-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-cyan-color-dot-bg',
+  $badge-cyan-color-dot-bg
+);
+$badge-sdblue-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-sdblue-color-dot-bg',
+  $badge-sdblue-color-dot-bg,
+  'color-primary-6'
+);
+$badge-pinkpurple-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-pinkpurple-color-dot-bg',
+  $badge-pinkpurple-color-dot-bg
+);
+$badge-purple-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-purple-color-dot-bg',
+  $badge-purple-color-dot-bg
+);
+$badge-magenta-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-magenta-color-dot-bg',
+  $badge-magenta-color-dot-bg
+);
+$badge-gray-color-dot-bg: theme-runtime.token(
+  'badge',
+  'badge-gray-color-dot-bg',
+  $badge-gray-color-dot-bg
+);

package/es/basic-crud-table/style/index.css

@@ -18,7 +18,7 @@
 .sd-basic-crud-table {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--component-basic-crud-table-basic-crud-table-gap, var(--component-basic-crud-table-gap, var(--spacing-4, 8px)));
   width: 100%;
   min-width: 0;
 }
@@ -43,7 +43,7 @@
 .sd-basic-crud-table-header {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--component-basic-crud-table-basic-crud-table-gap, var(--component-basic-crud-table-gap, var(--spacing-4, 8px)));
 }
 .sd-basic-crud-table-header-actions {
   display: flex;
@@ -51,8 +51,8 @@
 }
 .sd-basic-crud-table-title {
   margin: 0;
-  color: var(--sd-color-text-1);
-  font-size: 24px;
+  color: var(--component-basic-crud-table-basic-crud-table-title-color, var(--component-basic-crud-table-title-color, var(--sd-color-text-1)));
+  font-size: var(--component-basic-crud-table-basic-crud-table-title-size, var(--component-basic-crud-table-title-size, var(--font-size-title-3, 24px)));
 }
 .sd-basic-crud-table-body {
   width: 100%;

package/es/basic-crud-table/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';
@@ -6,3 +7,22 @@
 $basic-crud-table-gap: global.$spacing-4;
 $basic-crud-table-title-size: global.$font-size-title-3;
 $basic-crud-table-title-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+// @generated runtime tokens — pnpm theme:generate
+$basic-crud-table-gap: theme-runtime.token(
+  'basic-crud-table',
+  'basic-crud-table-gap',
+  $basic-crud-table-gap,
+  'spacing-4'
+);
+$basic-crud-table-title-size: theme-runtime.token(
+  'basic-crud-table',
+  'basic-crud-table-title-size',
+  $basic-crud-table-title-size,
+  'font-size-title-3'
+);
+$basic-crud-table-title-color: theme-runtime.token(
+  'basic-crud-table',
+  'basic-crud-table-title-color',
+  $basic-crud-table-title-color
+);

package/es/bloom-menu/style/index.css

@@ -21,7 +21,7 @@
 }
 .sd-bloom-menu-trigger-content {
   display: inline-flex;
-  gap: 8px;
+  gap: var(--component-bloom-menu-bloom-menu-item-gap, var(--component-bloom-menu-item-gap, var(--spacing-4, 8px)));
   align-items: center;
   white-space: nowrap;
 }
@@ -30,14 +30,14 @@
   height: 16px;
 }
 .sd-bloom-menu-panel {
-  --bloom-menu-panel-width: min(86vw, 420px);
-  --bloom-menu-panel-color: var(--sd-color-text-1);
-  --bloom-menu-panel-background: var(--sd-color-bg-2);
-  --bloom-menu-panel-border-color: var(--sd-color-neutral-3);
+  --bloom-menu-panel-width: var(--component-bloom-menu-bloom-menu-panel-width, var(--component-bloom-menu-panel-width, min(86vw, 420px)));
+  --bloom-menu-panel-color: var(--component-bloom-menu-bloom-menu-text-color, var(--component-bloom-menu-text-color, var(--sd-color-text-1)));
+  --bloom-menu-panel-background: var(--component-bloom-menu-bloom-menu-background, var(--component-bloom-menu-background, var(--sd-color-bg-2)));
+  --bloom-menu-panel-border-color: var(--component-bloom-menu-bloom-menu-border-color, var(--component-bloom-menu-border-color, var(--sd-color-neutral-3)));
   --bloom-menu-panel-border-radius: var(--sd-border-radius-medium);
-  --bloom-menu-panel-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+  --bloom-menu-panel-shadow: var(--component-bloom-menu-bloom-menu-shadow, var(--component-bloom-menu-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
   overflow: hidden;
-  border: 1px solid var(--sd-color-neutral-3);
+  border: var(--component-bloom-menu-bloom-menu-border-width, var(--component-bloom-menu-border-width, var(--border-1, 1px))) var(--component-bloom-menu-bloom-menu-border-style, var(--component-bloom-menu-border-style, var(--border-solid, solid))) var(--component-bloom-menu-bloom-menu-border-color, var(--component-bloom-menu-border-color, var(--sd-color-neutral-3)));
 }
 .sd-bloom-menu-popup {
   padding: 0;
@@ -49,19 +49,19 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
-  color: var(--sd-color-text-2);
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  padding: var(--component-bloom-menu-bloom-menu-header-padding-block, var(--component-bloom-menu-header-padding-block, var(--spacing-6, 12px))) var(--component-bloom-menu-bloom-menu-header-padding-inline, var(--component-bloom-menu-header-padding-inline, var(--spacing-7, 16px)));
+  color: var(--component-bloom-menu-bloom-menu-muted-color, var(--component-bloom-menu-muted-color, var(--sd-color-text-2)));
+  border-bottom: var(--component-bloom-menu-bloom-menu-border-width, var(--component-bloom-menu-border-width, var(--border-1, 1px))) var(--component-bloom-menu-bloom-menu-border-style, var(--component-bloom-menu-border-style, var(--border-solid, solid))) var(--component-bloom-menu-bloom-menu-border-color, var(--component-bloom-menu-border-color, var(--sd-color-neutral-3)));
 }
 .sd-bloom-menu-title {
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: var(--component-bloom-menu-bloom-menu-font-weight, var(--component-bloom-menu-font-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-bloom-menu-bloom-menu-font-size, var(--component-bloom-menu-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-bloom-menu-close {
   color: inherit;
 }
 .sd-bloom-menu-close:hover {
-  color: var(--sd-color-text-1);
+  color: var(--component-bloom-menu-bloom-menu-text-color, var(--component-bloom-menu-text-color, var(--sd-color-text-1)));
 }
 .sd-bloom-menu-close svg {
   width: 16px;
@@ -74,57 +74,56 @@
 .sd-bloom-menu-item {
   min-width: 0;
   height: auto;
-  padding: 24px 12px;
-  color: var(--sd-color-text-2);
+  padding: var(--component-bloom-menu-bloom-menu-item-padding-block, var(--component-bloom-menu-item-padding-block, var(--spacing-9, 24px))) var(--component-bloom-menu-bloom-menu-item-padding-inline, var(--component-bloom-menu-item-padding-inline, var(--spacing-6, 12px)));
+  color: var(--component-bloom-menu-bloom-menu-muted-color, var(--component-bloom-menu-muted-color, var(--sd-color-text-2)));
   border-radius: 0;
 }
 .sd-bloom-menu-item:hover:not(:disabled) {
-  color: var(--sd-color-text-1);
-  background: var(--sd-color-fill-2);
+  color: var(--component-bloom-menu-bloom-menu-text-color, var(--component-bloom-menu-text-color, var(--sd-color-text-1)));
+  background: var(--component-bloom-menu-bloom-menu-hover-background, var(--component-bloom-menu-hover-background, var(--sd-color-fill-2)));
 }
-.sd-bloom-menu-item:focus-visible {
-  position: relative;
-  z-index: 1;
-  outline: 2px solid rgb(var(--sd-primary-6));
-  outline-offset: -2px;
+.sd-bloom-menu-item:focus-visible:not(:disabled) {
+  color: var(--component-bloom-menu-bloom-menu-text-color, var(--component-bloom-menu-text-color, var(--sd-color-text-1)));
+  background: var(--component-bloom-menu-bloom-menu-hover-background, var(--component-bloom-menu-hover-background, var(--sd-color-fill-2)));
+  outline: none;
 }
 .sd-bloom-menu-item-border-right {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: var(--component-bloom-menu-bloom-menu-border-width, var(--component-bloom-menu-border-width, var(--border-1, 1px))) var(--component-bloom-menu-bloom-menu-border-style, var(--component-bloom-menu-border-style, var(--border-solid, solid))) var(--component-bloom-menu-bloom-menu-border-color, var(--component-bloom-menu-border-color, var(--sd-color-neutral-3)));
 }
 .sd-bloom-menu-item-border-bottom {
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: var(--component-bloom-menu-bloom-menu-border-width, var(--component-bloom-menu-border-width, var(--border-1, 1px))) var(--component-bloom-menu-bloom-menu-border-style, var(--component-bloom-menu-border-style, var(--border-solid, solid))) var(--component-bloom-menu-bloom-menu-border-color, var(--component-bloom-menu-border-color, var(--sd-color-neutral-3)));
 }
 .sd-bloom-menu-item-disabled, .sd-bloom-menu-item:disabled {
-  color: var(--sd-color-text-4);
+  color: var(--component-bloom-menu-bloom-menu-disabled-color, var(--component-bloom-menu-disabled-color, var(--sd-color-text-4)));
   cursor: not-allowed;
 }
 .sd-bloom-menu-item-content {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--component-bloom-menu-bloom-menu-item-gap, var(--component-bloom-menu-item-gap, var(--spacing-4, 8px)));
   align-items: center;
   min-width: 0;
 }
 .sd-bloom-menu-item-icon {
   display: inline-flex;
-  font-size: 20px;
+  font-size: var(--component-bloom-menu-bloom-menu-icon-size, var(--component-bloom-menu-icon-size, var(--size-5, 20px)));
 }
 .sd-bloom-menu-item-icon svg {
-  width: 20px;
-  height: 20px;
+  width: var(--component-bloom-menu-bloom-menu-icon-size, var(--component-bloom-menu-icon-size, var(--size-5, 20px)));
+  height: var(--component-bloom-menu-bloom-menu-icon-size, var(--component-bloom-menu-icon-size, var(--size-5, 20px)));
 }
 .sd-bloom-menu-item-label {
   max-width: 100%;
   overflow: hidden;
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: var(--component-bloom-menu-bloom-menu-font-weight, var(--component-bloom-menu-font-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-bloom-menu-bloom-menu-font-size, var(--component-bloom-menu-font-size, var(--font-size-body-3, 14px)));
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .sd-bloom-menu-empty {
-  padding: 24px 16px;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  padding: var(--component-bloom-menu-bloom-menu-item-padding-block, var(--component-bloom-menu-item-padding-block, var(--spacing-9, 24px))) var(--component-bloom-menu-bloom-menu-header-padding-inline, var(--component-bloom-menu-header-padding-inline, var(--spacing-7, 16px)));
+  color: var(--component-bloom-menu-bloom-menu-muted-color, var(--component-bloom-menu-muted-color, var(--sd-color-text-2)));
+  font-size: var(--component-bloom-menu-bloom-menu-font-size, var(--component-bloom-menu-font-size, var(--font-size-body-3, 14px)));
   text-align: center;
 }
 

package/es/bloom-menu/style/index.scss

@@ -86,11 +86,11 @@ $bloom-menu-prefix-cls: string.unquote('#{theme.$prefix}-bloom-menu');
       background: $bloom-menu-hover-background;
     }
 
-    &:focus-visible {
-      position: relative;
-      z-index: 1;
-      outline: 2px solid theme.$color-primary-6;
-      outline-offset: -2px;
+    // 键盘焦点与 hover 保持同一视觉
+    &:focus-visible:not(:disabled) {
+      color: $bloom-menu-text-color;
+      background: $bloom-menu-hover-background;
+      outline: none;
     }
 
     &-border-right {

package/es/bloom-menu/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';
 
@@ -22,3 +23,101 @@ $bloom-menu-font-size: global.$font-size-body-3;
 $bloom-menu-font-weight: global.$font-weight-500;
 $bloom-menu-icon-size: global.$size-5;
 $bloom-menu-shadow: global.$shadow2-down;
+
+// @generated runtime tokens — pnpm theme:generate
+$bloom-menu-panel-width: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-panel-width',
+  $bloom-menu-panel-width
+);
+$bloom-menu-border-width: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-border-width',
+  $bloom-menu-border-width,
+  'border-1'
+);
+$bloom-menu-border-style: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-border-style',
+  $bloom-menu-border-style,
+  'border-solid'
+);
+$bloom-menu-border-color: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-border-color',
+  $bloom-menu-border-color
+);
+$bloom-menu-background: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-background',
+  $bloom-menu-background
+);
+$bloom-menu-text-color: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-text-color',
+  $bloom-menu-text-color
+);
+$bloom-menu-muted-color: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-muted-color',
+  $bloom-menu-muted-color
+);
+$bloom-menu-hover-background: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-hover-background',
+  $bloom-menu-hover-background
+);
+$bloom-menu-disabled-color: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-disabled-color',
+  $bloom-menu-disabled-color
+);
+$bloom-menu-header-padding-block: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-header-padding-block',
+  $bloom-menu-header-padding-block,
+  'spacing-6'
+);
+$bloom-menu-header-padding-inline: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-header-padding-inline',
+  $bloom-menu-header-padding-inline,
+  'spacing-7'
+);
+$bloom-menu-item-padding-block: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-item-padding-block',
+  $bloom-menu-item-padding-block,
+  'spacing-9'
+);
+$bloom-menu-item-padding-inline: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-item-padding-inline',
+  $bloom-menu-item-padding-inline,
+  'spacing-6'
+);
+$bloom-menu-item-gap: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-item-gap',
+  $bloom-menu-item-gap,
+  'spacing-4'
+);
+$bloom-menu-font-size: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-font-size',
+  $bloom-menu-font-size,
+  'font-size-body-3'
+);
+$bloom-menu-font-weight: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-font-weight',
+  $bloom-menu-font-weight,
+  'font-weight-500'
+);
+$bloom-menu-icon-size: theme-runtime.token(
+  'bloom-menu',
+  'bloom-menu-icon-size',
+  $bloom-menu-icon-size,
+  'size-5'
+);
+$bloom-menu-shadow: theme-runtime.token('bloom-menu', 'bloom-menu-shadow', $bloom-menu-shadow);

package/es/border-beam/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';
@@ -10,3 +11,30 @@ $border-beam-border-radius-md: 16px;
 $border-beam-border-radius-line: 16px;
 $border-beam-border-radius-pulse-outside: 16px;
 $border-beam-border-radius-pulse-inner: 16px;
+
+// @generated runtime tokens — pnpm theme:generate
+$border-beam-border-radius-sm: theme-runtime.token(
+  'border-beam',
+  'border-beam-border-radius-sm',
+  $border-beam-border-radius-sm
+);
+$border-beam-border-radius-md: theme-runtime.token(
+  'border-beam',
+  'border-beam-border-radius-md',
+  $border-beam-border-radius-md
+);
+$border-beam-border-radius-line: theme-runtime.token(
+  'border-beam',
+  'border-beam-border-radius-line',
+  $border-beam-border-radius-line
+);
+$border-beam-border-radius-pulse-outside: theme-runtime.token(
+  'border-beam',
+  'border-beam-border-radius-pulse-outside',
+  $border-beam-border-radius-pulse-outside
+);
+$border-beam-border-radius-pulse-inner: theme-runtime.token(
+  'border-beam',
+  'border-beam-border-radius-pulse-inner',
+  $border-beam-border-radius-pulse-inner
+);

package/es/breadcrumb/style/index.css

@@ -19,7 +19,7 @@
   display: inline-flex;
   align-items: center;
   color: var(--sd-color-text-2);
-  font-size: 14px;
+  font-size: var(--component-breadcrumb-breadcrumb-size-font-size, var(--component-breadcrumb-size-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-breadcrumb-icon {
   color: var(--sd-color-text-2);
@@ -27,29 +27,29 @@
 .sd-breadcrumb-item {
   display: inline-block;
   padding: 0 4px;
-  color: var(--sd-color-text-2);
-  line-height: 24px;
+  color: var(--component-breadcrumb-breadcrumb-color-text, var(--component-breadcrumb-color-text, var(--sd-color-text-2)));
+  line-height: var(--component-breadcrumb-breadcrumb-size-text-height, var(--component-breadcrumb-size-text-height, var(--size-6, 24px)));
   vertical-align: middle;
 }
 .sd-breadcrumb-item > .sd-icon {
-  color: var(--sd-color-text-3);
+  color: var(--component-breadcrumb-breadcrumb-color-icon, var(--component-breadcrumb-color-icon, var(--sd-color-text-3)));
 }
 .sd-breadcrumb-item a {
   display: inline-block;
   margin: 0 -4px;
   padding: 0 4px;
-  color: var(--sd-color-text-2);
+  color: var(--component-breadcrumb-breadcrumb-color-link-text, var(--component-breadcrumb-color-link-text, var(--sd-color-text-2)));
   text-decoration: none;
-  background-color: transparent;
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-breadcrumb-breadcrumb-color-bg, var(--component-breadcrumb-color-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-breadcrumb-breadcrumb-border-text-radius-hover, var(--component-breadcrumb-border-text-radius-hover, var(--sd-border-radius-small)));
 }
 .sd-breadcrumb-item a:hover {
-  color: rgb(var(--sd-link-6));
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-breadcrumb-breadcrumb-color-link-text-hover, var(--component-breadcrumb-color-link-text-hover, var(--color-link-6, var(--sd-color-link-6, rgb(var(--sd-link-6))))));
+  background-color: var(--component-breadcrumb-breadcrumb-color-bg-hover, var(--component-breadcrumb-color-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-breadcrumb-item:last-child {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
+  color: var(--component-breadcrumb-breadcrumb-color-text-active, var(--component-breadcrumb-color-text-active, var(--sd-color-text-1)));
+  font-weight: var(--component-breadcrumb-breadcrumb-font-weight-active, var(--component-breadcrumb-font-weight-active, var(--font-weight-500, 500)));
 }
 .sd-breadcrumb-item-ellipses {
   position: relative;
@@ -60,18 +60,18 @@
 }
 .sd-breadcrumb-item-separator {
   display: inline-block;
-  margin: 0 4px;
-  color: var(--sd-color-text-4);
-  line-height: 24px;
+  margin: 0 var(--component-breadcrumb-breadcrumb-margin-separator-horizontal, var(--component-breadcrumb-margin-separator-horizontal, var(--spacing-2, 4px)));
+  color: var(--component-breadcrumb-breadcrumb-color-separator, var(--component-breadcrumb-color-separator, var(--sd-color-text-4)));
+  line-height: var(--component-breadcrumb-breadcrumb-size-text-height, var(--component-breadcrumb-size-text-height, var(--size-6, 24px)));
   vertical-align: middle;
 }
 .sd-breadcrumb-item-with-dropdown {
   cursor: pointer;
 }
 .sd-breadcrumb-item-dropdown-icon {
-  margin-left: 4px;
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  margin-left: var(--component-breadcrumb-breadcrumb-margin-dropdown-icon-left, var(--component-breadcrumb-margin-dropdown-icon-left, var(--spacing-2, 4px)));
+  color: var(--component-breadcrumb-breadcrumb-color-dropdown-icon, var(--component-breadcrumb-color-dropdown-icon, var(--sd-color-text-2)));
+  font-size: var(--component-breadcrumb-breadcrumb-size-dropdown-icon, var(--component-breadcrumb-size-dropdown-icon, var(--size-3, 12px)));
 }
 .sd-breadcrumb-item-dropdown-icon-active svg {
   transform: rotate(180deg);

package/es/breadcrumb/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';
@@ -41,3 +42,99 @@ $breadcrumb-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-t
 $breadcrumb-color-link-text_hover: global.$color-link-6;
 
 $breadcrumb-color-dropdown-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+// @generated runtime tokens — pnpm theme:generate
+$breadcrumb-color-text: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-text',
+  $breadcrumb-color-text
+);
+$breadcrumb-color-text_active: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-text-active',
+  $breadcrumb-color-text_active
+);
+$breadcrumb-color-link-text: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-link-text',
+  $breadcrumb-color-link-text
+);
+$breadcrumb-color-separator: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-separator',
+  $breadcrumb-color-separator
+);
+$breadcrumb-color-bg_hover: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-bg-hover',
+  $breadcrumb-color-bg_hover
+);
+$breadcrumb-color-bg: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-bg',
+  $breadcrumb-color-bg,
+  'color-transparent'
+);
+$breadcrumb-margin-separator-horizontal: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-margin-separator-horizontal',
+  $breadcrumb-margin-separator-horizontal,
+  'spacing-2'
+);
+$breadcrumb-margin-dropdown-icon-left: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-margin-dropdown-icon-left',
+  $breadcrumb-margin-dropdown-icon-left,
+  'spacing-2'
+);
+$breadcrumb-border-text-radius_hover: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-border-text-radius-hover',
+  $breadcrumb-border-text-radius_hover
+);
+$breadcrumb-size-text-height: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-size-text-height',
+  $breadcrumb-size-text-height,
+  'size-6'
+);
+$breadcrumb-size-separator-height: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-size-separator-height',
+  $breadcrumb-size-separator-height,
+  'size-3'
+);
+$breadcrumb-size-dropdown-icon: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-size-dropdown-icon',
+  $breadcrumb-size-dropdown-icon,
+  'size-3'
+);
+$breadcrumb-size-font-size: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-size-font-size',
+  $breadcrumb-size-font-size,
+  'font-size-body-3'
+);
+$breadcrumb-font-weight_active: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-font-weight-active',
+  $breadcrumb-font-weight_active,
+  'font-weight-500'
+);
+$breadcrumb-color-icon: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-icon',
+  $breadcrumb-color-icon
+);
+$breadcrumb-color-link-text_hover: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-link-text-hover',
+  $breadcrumb-color-link-text_hover,
+  'color-link-6'
+);
+$breadcrumb-color-dropdown-icon: theme-runtime.token(
+  'breadcrumb',
+  'breadcrumb-color-dropdown-icon',
+  $breadcrumb-color-dropdown-icon
+);