@sdata/web-vue 4.7.1 → 5.0.0

package/es/link/style/index.css

@@ -19,23 +19,23 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 1px 4px;
-  color: rgb(var(--sd-link-6));
-  font-size: 14px;
-  line-height: 1.5715;
+  padding: var(--component-link-link-padding-vertical, var(--component-link-padding-vertical, 1px)) var(--component-link-link-padding-horizontal, var(--component-link-padding-horizontal, var(--spacing-2, 4px)));
+  color: var(--component-link-link-color-text, var(--component-link-color-text, var(--color-link-6, var(--sd-color-link-6, rgb(var(--sd-link-6))))));
+  font-size: var(--component-link-link-font-size, var(--component-link-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-link-link-line-height, var(--component-link-line-height, 1.5715));
   text-decoration: none;
   background-color: transparent;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-link-link-border-radius, var(--component-link-border-radius, var(--sd-border-radius-small)));
   cursor: pointer;
   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-link:hover {
-  color: rgb(var(--sd-link-6));
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-link-link-color-text-hover, var(--component-link-color-text-hover, var(--component-link-link-color-text, var(--component-link-color-text, var(--color-link-6, var(--sd-color-link-6, rgb(var(--sd-link-6))))))));
+  background-color: var(--component-link-link-color-bg-hover, var(--component-link-color-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-link:active {
-  color: rgb(var(--sd-link-6));
-  background-color: var(--sd-color-fill-3);
+  color: var(--component-link-link-color-text-active, var(--component-link-color-text-active, var(--component-link-link-color-text, var(--component-link-color-text, var(--color-link-6, var(--sd-color-link-6, rgb(var(--sd-link-6))))))));
+  background-color: var(--component-link-link-color-bg-active, var(--component-link-color-bg-active, var(--sd-color-fill-3)));
   transition: none;
 }
 .sd-link.sd-link-hoverless {
@@ -47,63 +47,63 @@
   background-color: unset;
 }
 .sd-link.sd-link-disabled {
-  color: var(--sd-color-link-light-3);
+  color: var(--component-link-link-color-text-disabled, var(--component-link-color-text-disabled, var(--sd-color-link-light-3)));
   background: none;
   cursor: not-allowed;
 }
 .sd-link.sd-link-loading {
-  color: var(--sd-color-link-light-3);
+  color: var(--component-link-link-color-text-loading, var(--component-link-color-text-loading, var(--sd-color-link-light-3)));
   background: none;
   cursor: default;
 }
 .sd-link-status-success {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-link-link-color-text-success, var(--component-link-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-link-status-success:hover {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-link-link-color-text-success-hover, var(--component-link-color-text-success-hover, var(--component-link-link-color-text-success, var(--component-link-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))))));
 }
 .sd-link-status-success:active {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-link-link-color-text-success-active, var(--component-link-color-text-success-active, var(--component-link-link-color-text-success, var(--component-link-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))))));
 }
 .sd-link-status-success.sd-link-disabled {
-  color: var(--sd-color-success-light-3);
+  color: var(--component-link-link-color-text-success-disabled, var(--component-link-color-text-success-disabled, var(--sd-color-success-light-3)));
 }
 .sd-link-status-success.sd-link-loading {
-  color: var(--sd-color-success-light-3);
+  color: var(--component-link-link-color-text-success-loading, var(--component-link-color-text-success-loading, var(--sd-color-success-light-3)));
 }
 .sd-link-status-danger {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-link-link-color-text-error, var(--component-link-color-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-link-status-danger:hover {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-link-link-color-text-error-hover, var(--component-link-color-text-error-hover, var(--component-link-link-color-text-error, var(--component-link-color-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))))));
 }
 .sd-link-status-danger:active {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-link-link-color-text-error-active, var(--component-link-color-text-error-active, var(--component-link-link-color-text-error, var(--component-link-color-text-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))))));
 }
 .sd-link-status-danger.sd-link-disabled {
-  color: var(--sd-color-danger-light-3);
+  color: var(--component-link-link-color-text-error-disabled, var(--component-link-color-text-error-disabled, var(--sd-color-danger-light-3)));
 }
 .sd-link-status-danger.sd-link-loading {
-  color: var(--sd-color-danger-light-3);
+  color: var(--component-link-link-color-text-error-loading, var(--component-link-color-text-error-loading, var(--sd-color-danger-light-3)));
 }
 .sd-link-status-warning {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-link-link-color-text-warning, var(--component-link-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-link-status-warning:hover {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-link-link-color-text-warning-hover, var(--component-link-color-text-warning-hover, var(--component-link-link-color-text-warning, var(--component-link-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))))));
 }
 .sd-link-status-warning:active {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-link-link-color-text-warning-active, var(--component-link-color-text-warning-active, var(--component-link-link-color-text-warning, var(--component-link-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))))));
 }
 .sd-link-status-warning.sd-link-disabled {
-  color: var(--sd-color-warning-light-2);
+  color: var(--component-link-link-color-text-warning-disabled, var(--component-link-color-text-warning-disabled, var(--sd-color-warning-light-2)));
 }
 .sd-link-status-warning.sd-link-loading {
-  color: var(--sd-color-warning-light-2);
+  color: var(--component-link-link-color-text-warning-loading, var(--component-link-color-text-warning-loading, var(--sd-color-warning-light-2)));
 }
 .sd-link-icon {
-  margin-right: 6px;
-  font-size: 12px;
+  margin-right: var(--component-link-link-margin-icon-right, var(--component-link-margin-icon-right, var(--spacing-3, 6px)));
+  font-size: var(--component-link-link-size-icon, var(--component-link-size-icon, var(--size-3, 12px)));
   vertical-align: middle;
 }
 .sd-link-content {

package/es/link/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';
@@ -75,3 +76,119 @@ $link-padding-vertical: 1px;
 $link-size-icon: global.$size-3;
 
 $link-border-radius: global.$radius-small;
+
+// @generated runtime tokens — pnpm theme:generate
+$link-font-size: theme-runtime.token('link', 'link-font-size', $link-font-size, 'font-size-body-3');
+$link-color-bg_hover: theme-runtime.token('link', 'link-color-bg-hover', $link-color-bg_hover);
+$link-color-bg_active: theme-runtime.token('link', 'link-color-bg-active', $link-color-bg_active);
+$link-padding-horizontal: theme-runtime.token(
+  'link',
+  'link-padding-horizontal',
+  $link-padding-horizontal,
+  'spacing-2'
+);
+$link-line-height: theme-runtime.token('link', 'link-line-height', $line-height-base);
+$link-color-text: theme-runtime.token('link', 'link-color-text', $link-color-text, 'color-link-6');
+$link-color-text_hover: theme-runtime.token('link', 'link-color-text-hover', $link-color-text);
+$link-color-text_active: theme-runtime.token('link', 'link-color-text-active', $link-color-text);
+$link-color-text_disabled: theme-runtime.token(
+  'link',
+  'link-color-text-disabled',
+  $link-color-text_disabled
+);
+$link-color-text_loading: theme-runtime.token(
+  'link',
+  'link-color-text-loading',
+  $link-color-text_loading
+);
+$link-color-text_success: theme-runtime.token(
+  'link',
+  'link-color-text-success',
+  $link-color-text_success,
+  'color-success-6'
+);
+$link-color-text_success_hover: theme-runtime.token(
+  'link',
+  'link-color-text-success-hover',
+  $link-color-text_success
+);
+$link-color-text_success_active: theme-runtime.token(
+  'link',
+  'link-color-text-success-active',
+  $link-color-text_success
+);
+$link-color-text_success_disabled: theme-runtime.token(
+  'link',
+  'link-color-text-success-disabled',
+  $link-color-text_success_disabled
+);
+$link-color-text_success_loading: theme-runtime.token(
+  'link',
+  'link-color-text-success-loading',
+  $link-color-text_success_loading
+);
+$link-color-text_error: theme-runtime.token(
+  'link',
+  'link-color-text-error',
+  $link-color-text_error,
+  'color-danger-6'
+);
+$link-color-text_error_active: theme-runtime.token(
+  'link',
+  'link-color-text-error-active',
+  $link-color-text_error
+);
+$link-color-text_error_hover: theme-runtime.token(
+  'link',
+  'link-color-text-error-hover',
+  $link-color-text_error
+);
+$link-color-text_error_disabled: theme-runtime.token(
+  'link',
+  'link-color-text-error-disabled',
+  $link-color-text_error_disabled
+);
+$link-color-text_error_loading: theme-runtime.token(
+  'link',
+  'link-color-text-error-loading',
+  $link-color-text_error_loading
+);
+$link-color-text_warning: theme-runtime.token(
+  'link',
+  'link-color-text-warning',
+  $link-color-text_warning,
+  'color-warning-6'
+);
+$link-color-text_warning_hover: theme-runtime.token(
+  'link',
+  'link-color-text-warning-hover',
+  $link-color-text_warning
+);
+$link-color-text_warning_active: theme-runtime.token(
+  'link',
+  'link-color-text-warning-active',
+  $link-color-text_warning
+);
+$link-color-text_warning_disabled: theme-runtime.token(
+  'link',
+  'link-color-text-warning-disabled',
+  $link-color-text_warning_disabled
+);
+$link-color-text_warning_loading: theme-runtime.token(
+  'link',
+  'link-color-text-warning-loading',
+  $link-color-text_warning_loading
+);
+$link-margin-icon-right: theme-runtime.token(
+  'link',
+  'link-margin-icon-right',
+  $link-margin-icon-right,
+  'spacing-3'
+);
+$link-padding-vertical: theme-runtime.token(
+  'link',
+  'link-padding-vertical',
+  $link-padding-vertical
+);
+$link-size-icon: theme-runtime.token('link', 'link-size-icon', $link-size-icon, 'size-3');
+$link-border-radius: theme-runtime.token('link', 'link-border-radius', $link-border-radius);

package/es/list/style/index.css

@@ -24,10 +24,10 @@
   box-sizing: border-box;
   width: 100%;
   overflow-y: auto;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  line-height: 1.5715;
-  border-radius: var(--sd-border-radius-medium);
+  color: var(--component-list-list-color-text, var(--component-list-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-list-list-font-size, var(--component-list-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-list-list-line-height, var(--component-list-line-height, 1.5715));
+  border-radius: var(--component-list-list-border-radius, var(--component-list-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-list-wrapper {
   overflow: hidden;
@@ -41,46 +41,46 @@
   overflow: hidden;
 }
 .sd-list-small .sd-list-content-wrapper .sd-list-header {
-  padding: 8px 20px;
+  padding: var(--component-list-list-size-small-padding-vertical-header, var(--component-list-size-small-padding-vertical-header, var(--spacing-4, 8px))) var(--component-list-list-size-small-padding-horizontal-header, var(--component-list-size-small-padding-horizontal-header, var(--spacing-8, 20px)));
 }
 .sd-list-small .sd-list-content-wrapper .sd-list-footer,
 .sd-list-small .sd-list-content-wrapper .sd-list-content > .sd-list-item,
 .sd-list-small .sd-list-content-wrapper .sd-list-content .sd-list-col > .sd-list-item,
 .sd-list-small .sd-list-content-wrapper .sd-list-content.sd-list-virtual .sd-list-item {
-  padding: 9px 20px;
+  padding: var(--component-list-list-size-small-padding-vertical-item, var(--component-list-size-small-padding-vertical-item, 9px)) var(--component-list-list-size-small-padding-horizontal-item, var(--component-list-size-small-padding-horizontal-item, var(--spacing-8, 20px)));
 }
 .sd-list-medium .sd-list-content-wrapper .sd-list-header {
-  padding: 12px 20px;
+  padding: var(--component-list-list-size-medium-padding-vertical-header, var(--component-list-size-medium-padding-vertical-header, var(--component-list-list-size-default-padding-vertical-header, var(--component-list-size-default-padding-vertical-header, var(--spacing-6, 12px))))) var(--component-list-list-size-medium-padding-horizontal-header, var(--component-list-size-medium-padding-horizontal-header, var(--component-list-list-size-default-padding-horizontal-header, var(--component-list-size-default-padding-horizontal-header, var(--spacing-8, 20px)))));
 }
 .sd-list-medium .sd-list-content-wrapper .sd-list-footer,
 .sd-list-medium .sd-list-content-wrapper .sd-list-content > .sd-list-item,
 .sd-list-medium .sd-list-content-wrapper .sd-list-content .sd-list-col > .sd-list-item,
 .sd-list-medium .sd-list-content-wrapper .sd-list-content.sd-list-virtual .sd-list-item {
-  padding: 13px 20px;
+  padding: var(--component-list-list-size-medium-padding-vertical-item, var(--component-list-size-medium-padding-vertical-item, var(--component-list-list-size-default-padding-vertical-item, var(--component-list-size-default-padding-vertical-item, 13px)))) var(--component-list-list-size-medium-padding-horizontal-item, var(--component-list-size-medium-padding-horizontal-item, var(--component-list-list-size-default-padding-horizontal-item, var(--component-list-size-default-padding-horizontal-item, var(--spacing-8, 20px)))));
 }
 .sd-list-large .sd-list-content-wrapper .sd-list-header {
-  padding: 16px 20px;
+  padding: var(--component-list-list-size-large-padding-vertical-header, var(--component-list-size-large-padding-vertical-header, var(--spacing-7, 16px))) var(--component-list-list-size-large-padding-horizontal-header, var(--component-list-size-large-padding-horizontal-header, var(--spacing-8, 20px)));
 }
 .sd-list-large .sd-list-content-wrapper .sd-list-footer,
 .sd-list-large .sd-list-content-wrapper .sd-list-content > .sd-list-item,
 .sd-list-large .sd-list-content-wrapper .sd-list-content .sd-list-col > .sd-list-item,
 .sd-list-large .sd-list-content-wrapper .sd-list-content.sd-list-virtual .sd-list-item {
-  padding: 17px 20px;
+  padding: var(--component-list-list-size-large-padding-vertical-item, var(--component-list-size-large-padding-vertical-item, 17px)) var(--component-list-list-size-large-padding-horizontal-item, var(--component-list-size-large-padding-horizontal-item, var(--spacing-8, 20px)));
 }
 .sd-list-bordered {
-  border: 1px solid var(--sd-color-neutral-3);
+  border: var(--component-list-list-border-width, var(--component-list-border-width, 1px)) solid var(--component-list-list-border-color, var(--component-list-border-color, var(--sd-color-neutral-3)));
 }
 .sd-list-split .sd-list-header, .sd-list-split .sd-list-item:not(:last-child) {
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: var(--component-list-list-border-width, var(--component-list-border-width, 1px)) solid var(--component-list-list-border-color, var(--component-list-border-color, var(--sd-color-neutral-3)));
 }
 .sd-list-split .sd-list-footer {
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: var(--component-list-list-border-width, var(--component-list-border-width, 1px)) solid var(--component-list-list-border-color, var(--component-list-border-color, var(--sd-color-neutral-3)));
 }
 .sd-list-header {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 1.5;
+  color: var(--component-list-list-color-text-header, var(--component-list-color-text-header, var(--sd-color-text-1)));
+  font-weight: var(--component-list-list-font-weight-header, var(--component-list-font-weight-header, var(--font-weight-500, 500)));
+  font-size: var(--component-list-list-font-size-header, var(--component-list-font-size-header, var(--font-size-title-1, 16px)));
+  line-height: var(--component-list-list-line-height-header, var(--component-list-line-height-header, 1.5));
 }
 .sd-list-item {
   display: flex;
@@ -94,32 +94,32 @@
   overflow: hidden;
 }
 .sd-list-item-main .sd-list-item-action:not(:first-child) {
-  margin-top: 4px;
+  margin-top: var(--component-list-list-action-margin-top, var(--component-list-action-margin-top, var(--spacing-2, 4px)));
 }
 .sd-list-item-meta {
   display: flex;
   align-items: center;
-  padding: 4px 0;
+  padding: var(--component-list-list-meta-padding-vertical, var(--component-list-meta-padding-vertical, var(--spacing-2, 4px))) var(--component-list-list-meta-padding-horizontal, var(--component-list-meta-padding-horizontal, var(--spacing-none, 0)));
 }
 .sd-list-item-meta-avatar {
   display: flex;
 }
 .sd-list-item-meta-avatar:not(:last-child) {
-  margin-right: 16px;
+  margin-right: var(--component-list-list-meta-margin-right-avatar, var(--component-list-meta-margin-right-avatar, var(--spacing-7, 16px)));
 }
 .sd-list-item-meta-title {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
+  color: var(--component-list-list-meta-color-title, var(--component-list-meta-color-title, var(--sd-color-text-1)));
+  font-weight: var(--component-list-list-meta-font-weight-title, var(--component-list-meta-font-weight-title, var(--font-weight-500, 500)));
 }
 .sd-list-item-meta-title:not(:last-child) {
-  margin-bottom: 2px;
+  margin-bottom: var(--component-list-list-meta-margin-bottom-title, var(--component-list-meta-margin-bottom-title, var(--spacing-1, 2px)));
 }
 .sd-list-item-meta-content {
   flex-grow: 1;
   overflow: hidden;
 }
 .sd-list-item-meta-description {
-  color: var(--sd-color-text-2);
+  color: var(--component-list-list-mete-color-description, var(--component-list-mete-color-description, var(--sd-color-text-2)));
 }
 .sd-list-item-action {
   display: flex;
@@ -134,14 +134,14 @@
   cursor: pointer;
 }
 .sd-list-item-action > li:not(:last-child) {
-  margin-right: 20px;
+  margin-right: var(--component-list-list-action-gap, var(--component-list-action-gap, var(--spacing-8, 20px)));
 }
 .sd-list-hover .sd-list-item:hover {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-list-list-color-bg-item-hover, var(--component-list-color-bg-item-hover, var(--sd-color-fill-1)));
 }
 .sd-list-pagination {
   float: right;
-  margin-top: 24px;
+  margin-top: var(--component-list-list-pagination-margin-top, var(--component-list-pagination-margin-top, var(--spacing-9, 24px)));
 }
 .sd-list-pagination::after {
   display: block;

package/es/list/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';
@@ -59,3 +60,180 @@ $list-size-medium-padding-vertical-header: $list-size-default-padding-vertical-h
 $list-size-medium-padding-horizontal-header: $list-size-default-padding-horizontal-header;
 $list-size-medium-padding-vertical-item: $list-size-default-padding-vertical-item;
 $list-size-medium-padding-horizontal-item: $list-size-default-padding-horizontal-item;
+
+// @generated runtime tokens — pnpm theme:generate
+$list-border-width: theme-runtime.token('list', 'list-border-width', $list-border-width);
+$list-border-color: theme-runtime.token('list', 'list-border-color', $list-border-color);
+$list-border-radius: theme-runtime.token('list', 'list-border-radius', $list-border-radius);
+$list-color-text: theme-runtime.token('list', 'list-color-text', $list-color-text);
+$list-font-size: theme-runtime.token('list', 'list-font-size', $list-font-size, 'font-size-body-3');
+$list-line-height: theme-runtime.token('list', 'list-line-height', $line-height-base);
+$list-color-text-header: theme-runtime.token(
+  'list',
+  'list-color-text-header',
+  $list-color-text-header
+);
+$list-color-bg-item-hover: theme-runtime.token(
+  'list',
+  'list-color-bg-item-hover',
+  $list-color-bg-item-hover
+);
+$list-font-size-header: theme-runtime.token(
+  'list',
+  'list-font-size-header',
+  $list-font-size-header,
+  'font-size-title-1'
+);
+$list-font-weight-header: theme-runtime.token(
+  'list',
+  'list-font-weight-header',
+  $list-font-weight-header,
+  'font-weight-500'
+);
+$list-line-height-header: theme-runtime.token(
+  'list',
+  'list-line-height-header',
+  $list-line-height-header
+);
+$list-size-small-padding-vertical-header: theme-runtime.token(
+  'list',
+  'list-size-small-padding-vertical-header',
+  $list-size-small-padding-vertical-header,
+  'spacing-4'
+);
+$list-size-small-padding-horizontal-header: theme-runtime.token(
+  'list',
+  'list-size-small-padding-horizontal-header',
+  $list-size-small-padding-horizontal-header,
+  'spacing-8'
+);
+$list-size-small-padding-vertical-item: theme-runtime.token(
+  'list',
+  'list-size-small-padding-vertical-item',
+  $list-size-small-padding-vertical-item
+);
+$list-size-small-padding-horizontal-item: theme-runtime.token(
+  'list',
+  'list-size-small-padding-horizontal-item',
+  $list-size-small-padding-horizontal-item,
+  'spacing-8'
+);
+$list-size-default-padding-vertical-header: theme-runtime.token(
+  'list',
+  'list-size-default-padding-vertical-header',
+  $list-size-default-padding-vertical-header,
+  'spacing-6'
+);
+$list-size-default-padding-horizontal-header: theme-runtime.token(
+  'list',
+  'list-size-default-padding-horizontal-header',
+  $list-size-default-padding-horizontal-header,
+  'spacing-8'
+);
+$list-size-default-padding-vertical-item: theme-runtime.token(
+  'list',
+  'list-size-default-padding-vertical-item',
+  $list-size-default-padding-vertical-item
+);
+$list-size-default-padding-horizontal-item: theme-runtime.token(
+  'list',
+  'list-size-default-padding-horizontal-item',
+  $list-size-default-padding-horizontal-item,
+  'spacing-8'
+);
+$list-size-large-padding-vertical-header: theme-runtime.token(
+  'list',
+  'list-size-large-padding-vertical-header',
+  $list-size-large-padding-vertical-header,
+  'spacing-7'
+);
+$list-size-large-padding-horizontal-header: theme-runtime.token(
+  'list',
+  'list-size-large-padding-horizontal-header',
+  $list-size-large-padding-horizontal-header,
+  'spacing-8'
+);
+$list-size-large-padding-vertical-item: theme-runtime.token(
+  'list',
+  'list-size-large-padding-vertical-item',
+  $list-size-large-padding-vertical-item
+);
+$list-size-large-padding-horizontal-item: theme-runtime.token(
+  'list',
+  'list-size-large-padding-horizontal-item',
+  $list-size-large-padding-horizontal-item,
+  'spacing-8'
+);
+$list-meta-font-weight-title: theme-runtime.token(
+  'list',
+  'list-meta-font-weight-title',
+  $list-meta-font-weight-title,
+  'font-weight-500'
+);
+$list-meta-color-title: theme-runtime.token(
+  'list',
+  'list-meta-color-title',
+  $list-meta-color-title
+);
+$list-mete-color-description: theme-runtime.token(
+  'list',
+  'list-mete-color-description',
+  $list-mete-color-description
+);
+$list-meta-margin-right-avatar: theme-runtime.token(
+  'list',
+  'list-meta-margin-right-avatar',
+  $list-meta-margin-right-avatar,
+  'spacing-7'
+);
+$list-meta-margin-bottom-title: theme-runtime.token(
+  'list',
+  'list-meta-margin-bottom-title',
+  $list-meta-margin-bottom-title,
+  'spacing-1'
+);
+$list-meta-padding-horizontal: theme-runtime.token(
+  'list',
+  'list-meta-padding-horizontal',
+  $list-meta-padding-horizontal,
+  'spacing-none'
+);
+$list-meta-padding-vertical: theme-runtime.token(
+  'list',
+  'list-meta-padding-vertical',
+  $list-meta-padding-vertical,
+  'spacing-2'
+);
+$list-action-gap: theme-runtime.token('list', 'list-action-gap', $list-action-gap, 'spacing-8');
+$list-action-margin-top: theme-runtime.token(
+  'list',
+  'list-action-margin-top',
+  $list-action-margin-top,
+  'spacing-2'
+);
+$list-pagination-margin-top: theme-runtime.token(
+  'list',
+  'list-pagination-margin-top',
+  $list-pagination-margin-top,
+  'spacing-9'
+);
+$list-size-medium-padding-vertical-header: theme-runtime.token(
+  'list',
+  'list-size-medium-padding-vertical-header',
+  $list-size-default-padding-vertical-header
+);
+$list-size-medium-padding-horizontal-header: theme-runtime.token(
+  'list',
+  'list-size-medium-padding-horizontal-header',
+  $list-size-default-padding-horizontal-header
+);
+$list-size-medium-padding-vertical-item: theme-runtime.token(
+  'list',
+  'list-size-medium-padding-vertical-item',
+  $list-size-default-padding-vertical-item
+);
+$list-size-medium-padding-horizontal-item: theme-runtime.token(
+  'list',
+  'list-size-medium-padding-horizontal-item',
+  $list-size-default-padding-horizontal-item
+);

package/es/mention/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';
@@ -12,3 +13,24 @@ $mentions-padding-vertical: global.$spacing-2;
 $mentions-font-size: global.$font-size-body-3;
 
 $mentions-line-height: $line-height-base;
+
+// @generated runtime tokens — pnpm theme:generate
+$mentions-padding-horizontal: theme-runtime.token(
+  'mention',
+  'mentions-padding-horizontal',
+  $mentions-padding-horizontal,
+  'spacing-6'
+);
+$mentions-padding-vertical: theme-runtime.token(
+  'mention',
+  'mentions-padding-vertical',
+  $mentions-padding-vertical,
+  'spacing-2'
+);
+$mentions-font-size: theme-runtime.token(
+  'mention',
+  'mentions-font-size',
+  $mentions-font-size,
+  'font-size-body-3'
+);
+$mentions-line-height: theme-runtime.token('mention', 'mentions-line-height', $line-height-base);