@sdata/web-vue 4.7.1 → 5.0.0

package/es/alert/style/index.css

@@ -24,16 +24,16 @@
   box-sizing: border-box;
   width: 100%;
   min-height: fit-content;
-  padding: 8px 15px;
+  padding: var(--component-alert-alert-padding-vertical, var(--component-alert-padding-vertical, 8px)) var(--component-alert-alert-padding-horizontal, var(--component-alert-padding-horizontal, 15px));
   overflow: hidden;
-  font-size: 14px;
-  line-height: 1.5715;
+  font-size: var(--component-alert-alert-font-size-text-content, var(--component-alert-font-size-text-content, var(--font-size-body-3, 14px)));
+  line-height: var(--component-alert-alert-line-height, var(--component-alert-line-height, 1.5715));
   text-align: left;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-alert-alert-border-radius, var(--component-alert-border-radius, var(--sd-border-radius-small)));
 }
 .sd-alert-with-title {
   align-items: flex-start;
-  padding: 15px 15px;
+  padding: var(--component-alert-alert-padding-vertical-with-title, var(--component-alert-padding-vertical-with-title, 15px)) var(--component-alert-alert-padding-horizontal-with-title, var(--component-alert-padding-horizontal-with-title, 15px));
 }
 .sd-alert-center {
   justify-content: center;
@@ -42,24 +42,24 @@
   flex: initial;
 }
 .sd-alert-normal {
-  background-color: var(--sd-color-neutral-2);
-  border: 1px solid transparent;
+  background-color: var(--component-alert-alert-normal-color-bg, var(--component-alert-normal-color-bg, var(--sd-color-neutral-2)));
+  border: var(--component-alert-alert-border-width, var(--component-alert-border-width, var(--border-1, 1px))) solid var(--component-alert-alert-normal-color-border, var(--component-alert-normal-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-alert-info {
-  background-color: var(--sd-color-primary-light-1);
-  border: 1px solid transparent;
+  background-color: var(--component-alert-alert-info-color-bg, var(--component-alert-info-color-bg, var(--sd-color-primary-light-1)));
+  border: var(--component-alert-alert-border-width, var(--component-alert-border-width, var(--border-1, 1px))) solid var(--component-alert-alert-info-color-border, var(--component-alert-info-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-alert-success {
-  background-color: var(--sd-color-success-light-1);
-  border: 1px solid transparent;
+  background-color: var(--component-alert-alert-success-color-bg, var(--component-alert-success-color-bg, var(--sd-color-success-light-1)));
+  border: var(--component-alert-alert-border-width, var(--component-alert-border-width, var(--border-1, 1px))) solid var(--component-alert-alert-success-color-border, var(--component-alert-success-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-alert-warning {
-  background-color: var(--sd-color-warning-light-1);
-  border: 1px solid transparent;
+  background-color: var(--component-alert-alert-warning-color-bg, var(--component-alert-warning-color-bg, var(--sd-color-warning-light-1)));
+  border: var(--component-alert-alert-border-width, var(--component-alert-border-width, var(--border-1, 1px))) solid var(--component-alert-alert-warning-color-border, var(--component-alert-warning-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-alert-error {
-  background-color: var(--sd-color-danger-light-1);
-  border: 1px solid transparent;
+  background-color: var(--component-alert-alert-error-color-bg, var(--component-alert-error-color-bg, var(--sd-color-danger-light-1)));
+  border: var(--component-alert-alert-border-width, var(--component-alert-border-width, var(--border-1, 1px))) solid var(--component-alert-alert-error-color-border, var(--component-alert-error-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-alert-banner {
   border: none;
@@ -70,90 +70,90 @@
   flex: 1;
 }
 .sd-alert-title {
-  margin-bottom: 4px;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 1.5;
+  margin-bottom: var(--component-alert-alert-title-margin-bottom, var(--component-alert-title-margin-bottom, var(--spacing-2, 4px)));
+  font-weight: var(--component-alert-alert-font-weight-title, var(--component-alert-font-weight-title, var(--font-weight-500, 500)));
+  font-size: var(--component-alert-alert-font-size-text-title, var(--component-alert-font-size-text-title, var(--font-size-title-1, 16px)));
+  line-height: var(--component-alert-alert-title-line-height, var(--component-alert-title-line-height, 1.5));
 }
 .sd-alert-normal .sd-alert-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-normal-color-text-title, var(--component-alert-normal-color-text-title, var(--sd-color-text-1)));
 }
 .sd-alert-normal .sd-alert-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-normal-color-text-content, var(--component-alert-normal-color-text-content, var(--sd-color-text-1)));
 }
 .sd-alert-normal.sd-alert-with-title .sd-alert-content {
-  color: var(--sd-color-text-2);
+  color: var(--component-alert-alert-normal-color-text-content-title, var(--component-alert-normal-color-text-content-title, var(--sd-color-text-2)));
 }
 .sd-alert-info .sd-alert-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-info-color-text-title, var(--component-alert-info-color-text-title, var(--sd-color-text-1)));
 }
 .sd-alert-info .sd-alert-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-info-color-text-content, var(--component-alert-info-color-text-content, var(--sd-color-text-1)));
 }
 .sd-alert-info.sd-alert-with-title .sd-alert-content {
-  color: var(--sd-color-text-2);
+  color: var(--component-alert-alert-info-color-text-content-title, var(--component-alert-info-color-text-content-title, var(--sd-color-text-2)));
 }
 .sd-alert-success .sd-alert-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-success-color-text-title, var(--component-alert-success-color-text-title, var(--sd-color-text-1)));
 }
 .sd-alert-success .sd-alert-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-success-color-text-content, var(--component-alert-success-color-text-content, var(--sd-color-text-1)));
 }
 .sd-alert-success.sd-alert-with-title .sd-alert-content {
-  color: var(--sd-color-text-2);
+  color: var(--component-alert-alert-success-color-text-content-title, var(--component-alert-success-color-text-content-title, var(--sd-color-text-2)));
 }
 .sd-alert-warning .sd-alert-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-warning-color-text-title, var(--component-alert-warning-color-text-title, var(--sd-color-text-1)));
 }
 .sd-alert-warning .sd-alert-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-warning-color-text-content, var(--component-alert-warning-color-text-content, var(--sd-color-text-1)));
 }
 .sd-alert-warning.sd-alert-with-title .sd-alert-content {
-  color: var(--sd-color-text-2);
+  color: var(--component-alert-alert-warning-color-text-content-title, var(--component-alert-warning-color-text-content-title, var(--sd-color-text-2)));
 }
 .sd-alert-error .sd-alert-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-error-color-text-title, var(--component-alert-error-color-text-title, var(--sd-color-text-1)));
 }
 .sd-alert-error .sd-alert-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-error-color-text-content, var(--component-alert-error-color-text-content, var(--sd-color-text-1)));
 }
 .sd-alert-error.sd-alert-with-title .sd-alert-content {
-  color: var(--sd-color-text-2);
+  color: var(--component-alert-alert-error-color-text-content-title, var(--component-alert-error-color-text-content-title, var(--sd-color-text-2)));
 }
 .sd-alert-icon {
-  margin-right: 8px;
+  margin-right: var(--component-alert-alert-margin-icon-right, var(--component-alert-margin-icon-right, var(--spacing-4, 8px)));
 }
 .sd-alert-icon svg {
-  font-size: 16px;
+  font-size: var(--component-alert-alert-font-size-icon, var(--component-alert-font-size-icon, 16px));
   vertical-align: -3px;
 }
 .sd-alert-with-title .sd-alert-icon svg {
-  font-size: 18px;
+  font-size: var(--component-alert-alert-font-size-icon-with-title, var(--component-alert-font-size-icon-with-title, 18px));
   vertical-align: -5px;
 }
 .sd-alert-normal .sd-alert-icon svg {
-  color: var(--sd-color-neutral-4);
+  color: var(--component-alert-alert-normal-color-icon, var(--component-alert-normal-color-icon, var(--sd-color-neutral-4)));
 }
 .sd-alert-info .sd-alert-icon svg {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-alert-alert-info-color-icon, var(--component-alert-info-color-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-alert-success .sd-alert-icon svg {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-alert-alert-success-color-icon, var(--component-alert-success-color-icon, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-alert-warning .sd-alert-icon svg {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-alert-alert-warning-color-icon, var(--component-alert-warning-color-icon, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-alert-error .sd-alert-icon svg {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-alert-alert-error-color-icon, var(--component-alert-error-color-icon, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-alert-close-btn {
   top: 4px;
   right: 0;
   box-sizing: border-box;
-  margin-left: 8px;
+  margin-left: var(--component-alert-alert-margin-close-icon-left, var(--component-alert-margin-close-icon-left, var(--spacing-4, 8px)));
   padding: 0;
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-alert-alert-color-close-icon, var(--component-alert-color-close-icon, var(--sd-color-text-2)));
+  font-size: var(--component-alert-alert-font-size-close-icon, var(--component-alert-font-size-close-icon, 12px));
   background-color: transparent;
   border: none;
   outline: none;
@@ -161,13 +161,13 @@
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-alert-close-btn:hover {
-  color: var(--sd-color-text-1);
+  color: var(--component-alert-alert-color-close-icon-hover, var(--component-alert-color-close-icon-hover, var(--sd-color-text-1)));
 }
 .sd-alert-action + .sd-alert-close-btn {
-  margin-left: 8px;
+  margin-left: var(--component-alert-alert-margin-action-right, var(--component-alert-margin-action-right, var(--spacing-4, 8px)));
 }
 .sd-alert-action {
-  margin-left: 8px;
+  margin-left: var(--component-alert-alert-margin-action-left, var(--component-alert-margin-action-left, var(--spacing-4, 8px)));
 }
 .sd-alert-with-title .sd-alert-close-btn {
   margin-top: 0;

package/es/alert/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';
@@ -80,3 +81,259 @@ $alert-color-close-icon_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-
 $alert-margin-close-icon-left: global.$spacing-4;
 $alert-margin-action-left: global.$spacing-4;
 $alert-margin-action-right: global.$spacing-4;
+
+// @generated runtime tokens — pnpm theme:generate
+$alert-border-width: theme-runtime.token(
+  'alert',
+  'alert-border-width',
+  $alert-border-width,
+  'border-1'
+);
+$alert-min-height: theme-runtime.token('alert', 'alert-min-height', $alert-min-height, 'size-10');
+$alert-border-radius: theme-runtime.token('alert', 'alert-border-radius', $alert-border-radius);
+$alert-line-height: theme-runtime.token('alert', 'alert-line-height', $alert-line-height);
+$alert-title-line-height: theme-runtime.token(
+  'alert',
+  'alert-title-line-height',
+  $alert-title-line-height
+);
+$alert-title-margin-bottom: theme-runtime.token(
+  'alert',
+  'alert-title-margin-bottom',
+  $alert-title-margin-bottom,
+  'spacing-2'
+);
+$alert-margin-icon-right: theme-runtime.token(
+  'alert',
+  'alert-margin-icon-right',
+  $alert-margin-icon-right,
+  'spacing-4'
+);
+$alert-padding-horizontal: theme-runtime.token(
+  'alert',
+  'alert-padding-horizontal',
+  $alert-padding-horizontal
+);
+$alert-padding-vertical: theme-runtime.token(
+  'alert',
+  'alert-padding-vertical',
+  $alert-padding-vertical
+);
+$alert-padding-horizontal_with_title: theme-runtime.token(
+  'alert',
+  'alert-padding-horizontal-with-title',
+  $alert-padding-horizontal_with_title
+);
+$alert-padding-vertical_with_title: theme-runtime.token(
+  'alert',
+  'alert-padding-vertical-with-title',
+  $alert-padding-vertical_with_title
+);
+$alert-font-weight-title: theme-runtime.token(
+  'alert',
+  'alert-font-weight-title',
+  $alert-font-weight-title,
+  'font-weight-500'
+);
+$alert-font-size-text-title: theme-runtime.token(
+  'alert',
+  'alert-font-size-text-title',
+  $alert-font-size-text-title,
+  'font-size-title-1'
+);
+$alert-font-size-text-content: theme-runtime.token(
+  'alert',
+  'alert-font-size-text-content',
+  $alert-font-size-text-content,
+  'font-size-body-3'
+);
+$alert-font-size-icon: theme-runtime.token('alert', 'alert-font-size-icon', $alert-font-size-icon);
+$alert-font-size-icon_with_title: theme-runtime.token(
+  'alert',
+  'alert-font-size-icon-with-title',
+  $alert-font-size-icon_with_title
+);
+$alert-font-size-close-icon: theme-runtime.token(
+  'alert',
+  'alert-font-size-close-icon',
+  $alert-font-size-close-icon
+);
+$alert-normal-color-bg: theme-runtime.token(
+  'alert',
+  'alert-normal-color-bg',
+  $alert-normal-color-bg
+);
+$alert-normal-color-border: theme-runtime.token(
+  'alert',
+  'alert-normal-color-border',
+  $alert-normal-color-border,
+  'color-transparent'
+);
+$alert-normal-color-icon: theme-runtime.token(
+  'alert',
+  'alert-normal-color-icon',
+  $alert-normal-color-icon
+);
+$alert-normal-color-text-title: theme-runtime.token(
+  'alert',
+  'alert-normal-color-text-title',
+  $alert-normal-color-text-title
+);
+$alert-normal-color-text-content: theme-runtime.token(
+  'alert',
+  'alert-normal-color-text-content',
+  $alert-normal-color-text-content
+);
+$alert-normal-color-text-content_title: theme-runtime.token(
+  'alert',
+  'alert-normal-color-text-content-title',
+  $alert-normal-color-text-content_title
+);
+$alert-info-color-bg: theme-runtime.token('alert', 'alert-info-color-bg', $alert-info-color-bg);
+$alert-info-color-border: theme-runtime.token(
+  'alert',
+  'alert-info-color-border',
+  $alert-info-color-border,
+  'color-transparent'
+);
+$alert-info-color-icon: theme-runtime.token(
+  'alert',
+  'alert-info-color-icon',
+  $alert-info-color-icon,
+  'color-primary-6'
+);
+$alert-info-color-text-title: theme-runtime.token(
+  'alert',
+  'alert-info-color-text-title',
+  $alert-info-color-text-title
+);
+$alert-info-color-text-content: theme-runtime.token(
+  'alert',
+  'alert-info-color-text-content',
+  $alert-info-color-text-content
+);
+$alert-info-color-text-content_title: theme-runtime.token(
+  'alert',
+  'alert-info-color-text-content-title',
+  $alert-info-color-text-content_title
+);
+$alert-warning-color-bg: theme-runtime.token(
+  'alert',
+  'alert-warning-color-bg',
+  $alert-warning-color-bg
+);
+$alert-warning-color-border: theme-runtime.token(
+  'alert',
+  'alert-warning-color-border',
+  $alert-warning-color-border,
+  'color-transparent'
+);
+$alert-warning-color-icon: theme-runtime.token(
+  'alert',
+  'alert-warning-color-icon',
+  $alert-warning-color-icon,
+  'color-warning-6'
+);
+$alert-warning-color-text-title: theme-runtime.token(
+  'alert',
+  'alert-warning-color-text-title',
+  $alert-warning-color-text-title
+);
+$alert-warning-color-text-content: theme-runtime.token(
+  'alert',
+  'alert-warning-color-text-content',
+  $alert-warning-color-text-content
+);
+$alert-warning-color-text-content_title: theme-runtime.token(
+  'alert',
+  'alert-warning-color-text-content-title',
+  $alert-warning-color-text-content_title
+);
+$alert-error-color-bg: theme-runtime.token('alert', 'alert-error-color-bg', $alert-error-color-bg);
+$alert-error-color-border: theme-runtime.token(
+  'alert',
+  'alert-error-color-border',
+  $alert-error-color-border,
+  'color-transparent'
+);
+$alert-error-color-icon: theme-runtime.token(
+  'alert',
+  'alert-error-color-icon',
+  $alert-error-color-icon,
+  'color-danger-6'
+);
+$alert-error-color-text-title: theme-runtime.token(
+  'alert',
+  'alert-error-color-text-title',
+  $alert-error-color-text-title
+);
+$alert-error-color-text-content: theme-runtime.token(
+  'alert',
+  'alert-error-color-text-content',
+  $alert-error-color-text-content
+);
+$alert-error-color-text-content_title: theme-runtime.token(
+  'alert',
+  'alert-error-color-text-content-title',
+  $alert-error-color-text-content_title
+);
+$alert-success-color-bg: theme-runtime.token(
+  'alert',
+  'alert-success-color-bg',
+  $alert-success-color-bg
+);
+$alert-success-color-border: theme-runtime.token(
+  'alert',
+  'alert-success-color-border',
+  $alert-success-color-border,
+  'color-transparent'
+);
+$alert-success-color-icon: theme-runtime.token(
+  'alert',
+  'alert-success-color-icon',
+  $alert-success-color-icon,
+  'color-success-6'
+);
+$alert-success-color-text-title: theme-runtime.token(
+  'alert',
+  'alert-success-color-text-title',
+  $alert-success-color-text-title
+);
+$alert-success-color-text-content: theme-runtime.token(
+  'alert',
+  'alert-success-color-text-content',
+  $alert-success-color-text-content
+);
+$alert-success-color-text-content_title: theme-runtime.token(
+  'alert',
+  'alert-success-color-text-content-title',
+  $alert-success-color-text-content_title
+);
+$alert-color-close-icon: theme-runtime.token(
+  'alert',
+  'alert-color-close-icon',
+  $alert-color-close-icon
+);
+$alert-color-close-icon_hover: theme-runtime.token(
+  'alert',
+  'alert-color-close-icon-hover',
+  $alert-color-close-icon_hover
+);
+$alert-margin-close-icon-left: theme-runtime.token(
+  'alert',
+  'alert-margin-close-icon-left',
+  $alert-margin-close-icon-left,
+  'spacing-4'
+);
+$alert-margin-action-left: theme-runtime.token(
+  'alert',
+  'alert-margin-action-left',
+  $alert-margin-action-left,
+  'spacing-4'
+);
+$alert-margin-action-right: theme-runtime.token(
+  'alert',
+  'alert-margin-action-right',
+  $alert-margin-action-right,
+  'spacing-4'
+);

package/es/anchor/style/index.css

@@ -17,7 +17,7 @@
 /********* icon hover *********/
 .sd-anchor {
   position: relative;
-  width: 150px;
+  width: var(--component-anchor-anchor-width, var(--component-anchor-width, 150px));
   overflow: auto;
 }
 .sd-anchor-line-slider {
@@ -25,10 +25,10 @@
   top: 0;
   left: 0;
   z-index: 1;
-  width: 2px;
+  width: var(--component-anchor-anchor-line-width, var(--component-anchor-line-width, 2px));
   height: 12px;
   margin-top: 9.0005px;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-anchor-anchor-color-bg-line-active, var(--component-anchor-color-bg-line-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-anchor-list {
@@ -42,9 +42,9 @@
 .sd-anchor-list::before {
   position: absolute;
   left: -4px;
-  width: 2px;
+  width: var(--component-anchor-anchor-line-width, var(--component-anchor-line-width, 2px));
   height: 100%;
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-anchor-anchor-color-bg-line, var(--component-anchor-color-bg-line, var(--sd-color-fill-3)));
   content: "";
 }
 .sd-anchor-sublist {
@@ -54,34 +54,34 @@
   list-style: none;
 }
 .sd-anchor-link-item {
-  margin-bottom: 2px;
+  margin-bottom: var(--component-anchor-anchor-title-margin-bottom, var(--component-anchor-title-margin-bottom, var(--spacing-1, 2px)));
 }
 .sd-anchor-link-item .sd-anchor-link {
   display: block;
-  margin-bottom: 2px;
+  margin-bottom: var(--component-anchor-anchor-title-margin-bottom, var(--component-anchor-title-margin-bottom, var(--spacing-1, 2px)));
   padding: 4px 8px;
   overflow: hidden;
-  color: var(--sd-color-text-2);
+  color: var(--component-anchor-anchor-color-title, var(--component-anchor-color-title, var(--sd-color-text-2)));
   font-size: 14px;
   line-height: 1.5715;
   white-space: nowrap;
   text-decoration: none;
   text-overflow: ellipsis;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-anchor-anchor-border-radius-title-hover, var(--component-anchor-border-radius-title-hover, var(--sd-border-radius-small)));
   cursor: pointer;
 }
 .sd-anchor-link-item .sd-anchor-link:hover {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-anchor-anchor-color-title-hover, var(--component-anchor-color-title-hover, var(--sd-color-text-1)));
+  font-weight: var(--component-anchor-anchor-font-weight-title-hover, var(--component-anchor-font-weight-title-hover, var(--font-weight-500, 500)));
+  background-color: var(--component-anchor-anchor-color-bg-title-hover, var(--component-anchor-color-bg-title-hover, var(--sd-color-fill-2)));
 }
 .sd-anchor-link-active > .sd-anchor-link {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
+  color: var(--component-anchor-anchor-color-title-active, var(--component-anchor-color-title-active, var(--sd-color-text-1)));
+  font-weight: var(--component-anchor-anchor-font-weight-title-active, var(--component-anchor-font-weight-title-active, var(--font-weight-500, 500)));
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-anchor-link-item .sd-anchor-link-item {
-  margin-left: 16px;
+  margin-left: var(--component-anchor-anchor-item-inner-margin-left, var(--component-anchor-item-inner-margin-left, var(--spacing-7, 16px)));
 }
 .sd-anchor-line-less .sd-anchor-list {
   margin-left: 0;
@@ -90,7 +90,7 @@
   display: none;
 }
 .sd-anchor-line-less .sd-anchor-link-active > .sd-anchor-link {
-  color: rgb(var(--sd-primary-6));
-  font-weight: 500;
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-anchor-anchor-lineless-color-title-active, var(--component-anchor-lineless-color-title-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  font-weight: var(--component-anchor-anchor-lineless-font-weight-title-active, var(--component-anchor-lineless-font-weight-title-active, var(--font-weight-500, 500)));
+  background-color: var(--component-anchor-anchor-lineless-bg-title-active, var(--component-anchor-lineless-bg-title-active, var(--sd-color-fill-2)));
 }

package/es/anchor/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';
@@ -34,3 +35,76 @@ $anchor-font-size-title: 14px;
 $anchor-lineless-color-title_active: global.$color-primary-6;
 $anchor-lineless-bg-title_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
 $anchor-lineless-font-weight-title_active: global.$font-weight-500;
+
+// @generated runtime tokens — pnpm theme:generate
+$anchor-width: theme-runtime.token('anchor', 'anchor-width', $anchor-width);
+$anchor-line-width: theme-runtime.token('anchor', 'anchor-line-width', $anchor-line-width);
+$anchor-color-bg-line: theme-runtime.token('anchor', 'anchor-color-bg-line', $anchor-color-bg-line);
+$anchor-color-bg-line_active: theme-runtime.token(
+  'anchor',
+  'anchor-color-bg-line-active',
+  $anchor-color-bg-line_active,
+  'color-primary-6'
+);
+$anchor-border-radius-title-hover: theme-runtime.token(
+  'anchor',
+  'anchor-border-radius-title-hover',
+  $anchor-border-radius-title-hover
+);
+$anchor-item-inner-margin-left: theme-runtime.token(
+  'anchor',
+  'anchor-item-inner-margin-left',
+  $anchor-item-inner-margin-left,
+  'spacing-7'
+);
+$anchor-title-margin-bottom: theme-runtime.token(
+  'anchor',
+  'anchor-title-margin-bottom',
+  $anchor-title-margin-bottom,
+  'spacing-1'
+);
+$anchor-color-title: theme-runtime.token('anchor', 'anchor-color-title', $anchor-color-title);
+$anchor-color-title_hover: theme-runtime.token(
+  'anchor',
+  'anchor-color-title-hover',
+  $anchor-color-title_hover
+);
+$anchor-color-title_active: theme-runtime.token(
+  'anchor',
+  'anchor-color-title-active',
+  $anchor-color-title_active
+);
+$anchor-font-weight-title_hover: theme-runtime.token(
+  'anchor',
+  'anchor-font-weight-title-hover',
+  $anchor-font-weight-title_hover,
+  'font-weight-500'
+);
+$anchor-font-weight-title_active: theme-runtime.token(
+  'anchor',
+  'anchor-font-weight-title-active',
+  $anchor-font-weight-title_active,
+  'font-weight-500'
+);
+$anchor-color-bg-title_hover: theme-runtime.token(
+  'anchor',
+  'anchor-color-bg-title-hover',
+  $anchor-color-bg-title_hover
+);
+$anchor-lineless-color-title_active: theme-runtime.token(
+  'anchor',
+  'anchor-lineless-color-title-active',
+  $anchor-lineless-color-title_active,
+  'color-primary-6'
+);
+$anchor-lineless-bg-title_active: theme-runtime.token(
+  'anchor',
+  'anchor-lineless-bg-title-active',
+  $anchor-lineless-bg-title_active
+);
+$anchor-lineless-font-weight-title_active: theme-runtime.token(
+  'anchor',
+  'anchor-lineless-font-weight-title-active',
+  $anchor-lineless-font-weight-title_active,
+  'font-weight-500'
+);