@sdata/web-vue 4.7.1 → 5.0.0

package/es/input-tag/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';
@@ -95,3 +96,228 @@ $input-tag-tag-remove-icon-color-bg_focus: var(
 $input-tag-size-medium-height: $input-tag-size-default-height;
 $input-tag-size-medium-tag-height: $input-tag-size-default-tag-height;
 $input-tag-size-medium-font-size: $input-tag-size-default-font-size;
+
+// @generated runtime tokens — pnpm theme:generate
+$input-tag-color-text_default: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-text-default',
+  $input-tag-color-text_default
+);
+$input-tag-color-text_error: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-text-error',
+  $input-tag-color-text_error
+);
+$input-tag-color-text_disabled: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-text-disabled',
+  $input-tag-color-text_disabled
+);
+$input-tag-color-placeholder: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-placeholder',
+  $input-tag-color-placeholder
+);
+$input-tag-color-icon-clear: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-icon-clear',
+  $input-tag-color-icon-clear
+);
+$input-tag-color-icon-clear-bg_hover: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-icon-clear-bg-hover',
+  $input-tag-color-icon-clear-bg_hover
+);
+$input-tag-color-border_default: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-default',
+  $input-tag-color-border_default,
+  'color-transparent'
+);
+$input-tag-color-border_default_hover: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-default-hover',
+  $input-tag-color-border_default_hover,
+  'color-transparent'
+);
+$input-tag-color-border_default_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-default-focus',
+  $input-tag-color-border_default_focus,
+  'color-primary-6'
+);
+$input-tag-color-border_error: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-error',
+  $input-tag-color-border_error,
+  'color-transparent'
+);
+$input-tag-color-border_error_hover: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-error-hover',
+  $input-tag-color-border_error_hover,
+  'color-transparent'
+);
+$input-tag-color-border_error_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-error-focus',
+  $input-tag-color-border_error_focus,
+  'color-danger-6'
+);
+$input-tag-color-border_disabled: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-disabled',
+  $input-tag-color-border_disabled,
+  'color-transparent'
+);
+$input-tag-color-border_disabled_hover: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-disabled-hover',
+  $input-tag-color-border_disabled
+);
+$input-tag-color-border_disabled_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-border-disabled-focus',
+  $input-tag-color-border_disabled
+);
+$input-tag-color-bg_default: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-bg-default',
+  $input-tag-color-bg_default
+);
+$input-tag-color-bg_default_hover: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-bg-default-hover',
+  $input-tag-color-bg_default_hover
+);
+$input-tag-color-bg_default_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-bg-default-focus',
+  $input-tag-color-bg_default_focus
+);
+$input-tag-color-bg_error: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-bg-error',
+  $input-tag-color-bg_error,
+  'color-danger-1'
+);
+$input-tag-color-bg_error_hover: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-bg-error-hover',
+  $input-tag-color-bg_error_hover,
+  'color-danger-2'
+);
+$input-tag-color-bg_error_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-bg-error-focus',
+  $input-tag-color-bg_error_focus
+);
+$input-tag-color-bg_disabled: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-bg-disabled',
+  $input-tag-color-bg_disabled
+);
+$input-tag-color-bg_disabled_hover: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-bg-disabled-hover',
+  $input-tag-color-bg_disabled
+);
+$input-tag-color-shadow_default_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-shadow-default-focus',
+  $input-tag-color-shadow_default_focus,
+  'color-primary-2'
+);
+$input-tag-color-shadow_error_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-color-shadow-error-focus',
+  $input-tag-color-shadow_error_focus,
+  'color-danger-2'
+);
+$input-tag-size-shadow_error_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-size-shadow-error-focus',
+  $input-tag-size-shadow_error_focus,
+  'shadow-distance-none'
+);
+$input-tag-size-shadow_default_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-size-shadow-default-focus',
+  $input-tag-size-shadow_default_focus,
+  'shadow-distance-none'
+);
+$input-tag-tag-margin-right: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-margin-right',
+  $input-tag-tag-margin-right,
+  'spacing-2'
+);
+$input-tag-padding-horizontal: theme-runtime.token(
+  'input-tag',
+  'input-tag-padding-horizontal',
+  $input-tag-padding-horizontal,
+  'spacing-2'
+);
+$input-tag-border-radius: theme-runtime.token(
+  'input-tag',
+  'input-tag-border-radius',
+  $input-tag-border-radius
+);
+$input-tag-size-icon-clear: theme-runtime.token(
+  'input-tag',
+  'input-tag-size-icon-clear',
+  $input-tag-size-icon-clear,
+  'size-3'
+);
+$input-tag-size-icon-clear_hover: theme-runtime.token(
+  'input-tag',
+  'input-tag-size-icon-clear-hover',
+  $input-tag-size-icon-clear_hover,
+  'size-5'
+);
+$input-tag-tag-font-size: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-font-size',
+  $input-tag-tag-font-size,
+  'font-size-body-1'
+);
+$input-tag-tag-color-bg: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-color-bg',
+  $input-tag-tag-color-bg
+);
+$input-tag-tag-color-bg_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-color-bg-focus',
+  $input-tag-tag-color-bg_focus
+);
+$input-tag-tag-color-bg_disabled: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-color-bg-disabled',
+  $input-tag-tag-color-bg_disabled
+);
+$input-tag-tag-color-border: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-color-border',
+  $input-tag-tag-color-border
+);
+$input-tag-tag-color-border_disabled: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-color-border-disabled',
+  $input-tag-tag-color-border_disabled
+);
+$input-tag-tag-color-border_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-color-border-focus',
+  $input-tag-tag-color-border_focus
+);
+$input-tag-tag-remove-icon-color-bg: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-remove-icon-color-bg',
+  $input-tag-tag-remove-icon-color-bg
+);
+$input-tag-tag-remove-icon-color-bg_focus: theme-runtime.token(
+  'input-tag',
+  'input-tag-tag-remove-icon-color-bg-focus',
+  $input-tag-tag-remove-icon-color-bg_focus
+);

package/es/json-form/style/index.css

@@ -16,12 +16,12 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-json-form-row {
-  gap: 8px 8px;
+  gap: var(--component-json-form-json-form-spacing-row-gap, var(--component-json-form-spacing-row-gap, var(--spacing-4, 8px))) var(--component-json-form-json-form-spacing-col-gap, var(--component-json-form-spacing-col-gap, var(--spacing-4, 8px)));
 }
 .sd-json-form-control {
   width: 100%;
   min-width: 0;
-  border-radius: 6px;
+  border-radius: var(--component-json-form-json-form-border-radius-control, var(--component-json-form-border-radius-control, var(--border-radius-medium, 6px)));
 }
 .sd-json-form-chips {
   display: inline-flex;

package/es/json-form/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';
@@ -5,3 +6,23 @@
 $json-form-spacing-row-gap: global.$spacing-4;
 $json-form-spacing-col-gap: global.$spacing-4;
 $json-form-border-radius-control: global.$border-radius-medium;
+
+// @generated runtime tokens — pnpm theme:generate
+$json-form-spacing-row-gap: theme-runtime.token(
+  'json-form',
+  'json-form-spacing-row-gap',
+  $json-form-spacing-row-gap,
+  'spacing-4'
+);
+$json-form-spacing-col-gap: theme-runtime.token(
+  'json-form',
+  'json-form-spacing-col-gap',
+  $json-form-spacing-col-gap,
+  'spacing-4'
+);
+$json-form-border-radius-control: theme-runtime.token(
+  'json-form',
+  'json-form-border-radius-control',
+  $json-form-border-radius-control,
+  'border-radius-medium'
+);

package/es/kv-list/style/index.css

@@ -18,20 +18,20 @@
 .sd-kv-list {
   box-sizing: border-box;
   overflow: hidden;
-  background: var(--sd-color-bg-2);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
+  background: var(--component-kv-list-kv-list-color-bg, var(--component-kv-list-color-bg, var(--sd-color-bg-2)));
+  border: var(--component-kv-list-kv-list-border-width, var(--component-kv-list-border-width, var(--border-1, 1px))) solid var(--component-kv-list-kv-list-color-border, var(--component-kv-list-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-kv-list-kv-list-border-radius, var(--component-kv-list-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-kv-list-toolbar {
   display: flex;
   justify-content: flex-end;
-  padding: 8px;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  padding: var(--component-kv-list-kv-list-padding, var(--component-kv-list-padding, var(--spacing-4, 8px)));
+  border-bottom: var(--component-kv-list-kv-list-border-width, var(--component-kv-list-border-width, var(--border-1, 1px))) solid var(--component-kv-list-kv-list-color-border, var(--component-kv-list-color-border, var(--sd-color-neutral-3)));
 }
 .sd-kv-list-toolbar-actions, .sd-kv-list-row-actions {
   display: flex;
   flex-shrink: 0;
-  gap: 8px;
+  gap: var(--component-kv-list-kv-list-gap, var(--component-kv-list-gap, var(--spacing-4, 8px)));
   align-items: center;
 }
 .sd-kv-list-rows {
@@ -41,24 +41,24 @@
 .sd-kv-list-row {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
-  gap: 8px;
+  gap: var(--component-kv-list-kv-list-gap, var(--component-kv-list-gap, var(--spacing-4, 8px)));
   align-items: center;
-  padding: 8px;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
-  transition: background-color 0.2s, opacity 0.2s;
+  padding: var(--component-kv-list-kv-list-padding, var(--component-kv-list-padding, var(--spacing-4, 8px)));
+  border-bottom: var(--component-kv-list-kv-list-border-width, var(--component-kv-list-border-width, var(--border-1, 1px))) solid var(--component-kv-list-kv-list-color-border, var(--component-kv-list-color-border, var(--sd-color-neutral-3)));
+  transition: background-color var(--component-kv-list-kv-list-transition-duration, var(--component-kv-list-transition-duration, 0.2s)), opacity var(--component-kv-list-kv-list-transition-duration, var(--component-kv-list-transition-duration, 0.2s));
 }
 .sd-kv-list-row:last-child {
   border-bottom: 0;
 }
 .sd-kv-list-row--ghost {
-  background: var(--sd-color-primary-light-1);
+  background: var(--component-kv-list-kv-list-color-ghost, var(--component-kv-list-color-ghost, var(--sd-color-primary-light-1)));
   opacity: 0.45;
 }
 .sd-kv-list-row--chosen {
-  background: var(--sd-color-primary-light-1);
+  background: var(--component-kv-list-kv-list-color-ghost, var(--component-kv-list-color-ghost, var(--sd-color-primary-light-1)));
 }
 .sd-kv-list-drag-handle {
-  color: var(--sd-color-text-3);
+  color: var(--component-kv-list-kv-list-color-drag, var(--component-kv-list-color-drag, var(--sd-color-text-3)));
   cursor: grab;
 }
 .sd-kv-list-drag-handle:active {

package/es/kv-list/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';
 
@@ -12,3 +13,31 @@ $kv-list-border-radius: global.$radius-medium;
 $kv-list-gap: global.$spacing-4;
 $kv-list-padding: global.$spacing-4;
 $kv-list-transition-duration: global.$transition-duration-2;
+
+// @generated runtime tokens — pnpm theme:generate
+$kv-list-color-bg: theme-runtime.token('kv-list', 'kv-list-color-bg', $kv-list-color-bg);
+$kv-list-color-border: theme-runtime.token(
+  'kv-list',
+  'kv-list-color-border',
+  $kv-list-color-border
+);
+$kv-list-color-drag: theme-runtime.token('kv-list', 'kv-list-color-drag', $kv-list-color-drag);
+$kv-list-color-ghost: theme-runtime.token('kv-list', 'kv-list-color-ghost', $kv-list-color-ghost);
+$kv-list-border-width: theme-runtime.token(
+  'kv-list',
+  'kv-list-border-width',
+  $kv-list-border-width,
+  'border-1'
+);
+$kv-list-border-radius: theme-runtime.token(
+  'kv-list',
+  'kv-list-border-radius',
+  $kv-list-border-radius
+);
+$kv-list-gap: theme-runtime.token('kv-list', 'kv-list-gap', $kv-list-gap, 'spacing-4');
+$kv-list-padding: theme-runtime.token('kv-list', 'kv-list-padding', $kv-list-padding, 'spacing-4');
+$kv-list-transition-duration: theme-runtime.token(
+  'kv-list',
+  'kv-list-transition-duration',
+  $kv-list-transition-duration
+);

package/es/layout/style/index.css

@@ -44,7 +44,7 @@
   flex-direction: column;
   /* fix firefox can't set height smaller than content on flex item */
   min-height: 0;
-  background: var(--sd-color-fill-1);
+  background: var(--component-layout-layout-body-bg, var(--component-layout-body-bg, var(--sd-color-fill-1)));
 }
 .sd-layout, .sd-layout * {
   box-sizing: border-box;
@@ -65,21 +65,21 @@
 }
 
 .sd-layout-header {
-  height: 64px;
-  padding: 0 50px;
-  color: color-mix(in srgb, var(--sd-color-menu-dark-bg), #fff 90%);
-  line-height: 64px;
-  background: var(--sd-color-menu-dark-bg);
+  height: var(--component-layout-layout-header-height, var(--component-layout-header-height, var(--size-16, 64px)));
+  padding: var(--component-layout-layout-header-padding, var(--component-layout-header-padding, 0 50px));
+  color: var(--component-layout-layout-header-color, var(--component-layout-header-color, color-mix(in srgb, var(--sd-color-menu-dark-bg), #fff 90%)));
+  line-height: var(--component-layout-layout-header-height, var(--component-layout-header-height, var(--size-16, 64px)));
+  background: var(--component-layout-layout-header-bg, var(--component-layout-header-bg, var(--sd-color-menu-dark-bg)));
 }
 .sd-layout-header .sd-btn-text {
-  color: color-mix(in srgb, var(--sd-color-menu-dark-bg), #fff 90%);
+  color: var(--component-layout-layout-header-color, var(--component-layout-header-color, color-mix(in srgb, var(--sd-color-menu-dark-bg), #fff 90%)));
 }
 
 .sd-layout-footer {
-  padding: 24px 50px;
+  padding: var(--component-layout-layout-footer-padding, var(--component-layout-footer-padding, 24px 50px));
   color: var(--sd-color-text-1);
-  font-size: 14px;
-  background: var(--sd-color-fill-1);
+  font-size: var(--component-layout-layout-font-size, var(--component-layout-font-size, 14px));
+  background: var(--component-layout-layout-footer-bg, var(--component-layout-footer-bg, var(--sd-color-fill-1)));
 }
 
 .sd-layout-content {
@@ -93,11 +93,11 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  background: var(--sd-color-menu-dark-bg);
+  background: var(--component-layout-layout-sider-bg, var(--component-layout-sider-bg, var(--sd-color-menu-dark-bg)));
   transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), background 0s;
 }
 .sd-layout-sider-has-trigger {
-  padding-bottom: 44px;
+  padding-bottom: var(--component-layout-layout-sider-trigger-height, var(--component-layout-sider-trigger-height, var(--size-11, 44px)));
 }
 .sd-layout-sider-right {
   order: 1;
@@ -119,55 +119,55 @@
   position: absolute;
   bottom: 0;
   z-index: 1;
-  height: 44px;
-  color: var(--sd-color-white);
-  line-height: 44px;
+  height: var(--component-layout-layout-sider-trigger-height, var(--component-layout-sider-trigger-height, var(--size-11, 44px)));
+  color: var(--component-layout-layout-sider-trigger-color, var(--component-layout-sider-trigger-color, var(--sd-color-white)));
+  line-height: var(--component-layout-layout-sider-trigger-height, var(--component-layout-sider-trigger-height, var(--size-11, 44px)));
   text-align: center;
   cursor: pointer;
   transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-layout-sider-zero-width-trigger {
   position: absolute;
-  top: 64px;
+  top: var(--component-layout-layout-header-height, var(--component-layout-header-height, var(--size-16, 64px)));
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  color: var(--sd-color-white);
-  font-size: 18px;
-  background: var(--sd-color-menu-dark-bg);
-  border-radius: 0 10px 10px 0;
+  width: var(--component-layout-layout-sider-zero-trigger-width, var(--component-layout-sider-zero-trigger-width, var(--size-10, 40px)));
+  height: var(--component-layout-layout-sider-zero-trigger-height, var(--component-layout-sider-zero-trigger-height, var(--size-10, 40px)));
+  color: var(--component-layout-layout-sider-trigger-color, var(--component-layout-sider-trigger-color, var(--sd-color-white)));
+  font-size: var(--component-layout-layout-sider-zero-trigger-font-size, var(--component-layout-sider-zero-trigger-font-size, 18px));
+  background: var(--component-layout-layout-sider-bg, var(--component-layout-sider-bg, var(--sd-color-menu-dark-bg)));
+  border-radius: 0 var(--component-layout-layout-radius-lg, var(--component-layout-radius-lg, var(--border-radius-large, 10px))) var(--component-layout-layout-radius-lg, var(--component-layout-radius-lg, var(--border-radius-large, 10px))) 0;
   cursor: pointer;
-  transition: background-color 0.3s ease;
-  inset-inline-end: -40px;
+  transition: background-color var(--component-layout-layout-motion-duration-slow, var(--component-layout-motion-duration-slow, 0.3s)) ease;
+  inset-inline-end: -var(--component-layout-layout-sider-zero-trigger-width, var(--component-layout-sider-zero-trigger-width, var(--size-10, 40px)));
 }
 .sd-layout-sider-zero-width-trigger::after {
   position: absolute;
   inset: 0;
   background: transparent;
-  transition: background-color 0.3s ease;
+  transition: background-color var(--component-layout-layout-motion-duration-slow, var(--component-layout-motion-duration-slow, 0.3s)) ease;
   content: "";
 }
 .sd-layout-sider-zero-width-trigger:hover::after {
   background: rgba(255, 255, 255, 0.2);
 }
 .sd-layout-sider-zero-width-trigger-right {
-  inset-inline-start: -40px;
-  border-radius: 10px 0 0 10px;
+  inset-inline-start: -var(--component-layout-layout-sider-zero-trigger-width, var(--component-layout-sider-zero-trigger-width, var(--size-10, 40px)));
+  border-radius: var(--component-layout-layout-radius-lg, var(--component-layout-radius-lg, var(--border-radius-large, 10px))) 0 0 var(--component-layout-layout-radius-lg, var(--component-layout-radius-lg, var(--border-radius-large, 10px)));
 }
 .sd-layout-sider-light {
-  background: var(--sd-color-bg-1);
+  background: var(--component-layout-layout-light-sider-bg, var(--component-layout-light-sider-bg, var(--sd-color-bg-1)));
 }
 .sd-layout-sider-light .sd-layout-sider-trigger {
-  color: var(--sd-color-text-1);
-  background: var(--sd-color-bg-1);
+  color: var(--component-layout-layout-light-trigger-color, var(--component-layout-light-trigger-color, var(--sd-color-text-1)));
+  background: var(--component-layout-layout-light-trigger-bg, var(--component-layout-light-trigger-bg, var(--sd-color-bg-1)));
 }
 .sd-layout-sider-light .sd-layout-sider-zero-width-trigger {
-  color: var(--sd-color-text-1);
-  background: var(--sd-color-bg-1);
-  border: 1px solid var(--sd-color-fill-1);
+  color: var(--component-layout-layout-light-trigger-color, var(--component-layout-light-trigger-color, var(--sd-color-text-1)));
+  background: var(--component-layout-layout-light-trigger-bg, var(--component-layout-light-trigger-bg, var(--sd-color-bg-1)));
+  border: 1px solid var(--component-layout-layout-body-bg, var(--component-layout-body-bg, var(--sd-color-fill-1)));
   border-inline-start: 0;
 }
 .sd-layout-sider-temporary {
@@ -179,11 +179,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: var(--component-layout-layout-sider-zero-trigger-width, var(--component-layout-sider-zero-trigger-width, var(--size-10, 40px)));
+  height: var(--component-layout-layout-sider-zero-trigger-width, var(--component-layout-sider-zero-trigger-width, var(--size-10, 40px)));
   color: var(--sd-color-text-1);
-  font-size: 18px;
-  border-radius: 10px;
+  font-size: var(--component-layout-layout-sider-zero-trigger-font-size, var(--component-layout-sider-zero-trigger-font-size, 18px));
+  border-radius: var(--component-layout-layout-radius-lg, var(--component-layout-radius-lg, var(--border-radius-large, 10px)));
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
@@ -202,6 +202,6 @@
   transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-layout-sider-rail-expand {
-  z-index: 20;
+  z-index: var(--component-layout-layout-sider-rail-expand-z-index, var(--component-layout-sider-rail-expand-z-index, 20));
   box-shadow: var(--sd-shadow2-center);
 }

package/es/layout/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -58,3 +59,102 @@ $layout-radius-lg: global.$border-radius-large;
 $layout-motion-duration-mid: global.$transition-duration-2;
 $layout-motion-duration-slow: global.$transition-duration-3;
 $layout-font-size: global.$font-size-body;
+
+// @generated runtime tokens — pnpm theme:generate
+$layout-body-bg: theme-runtime.token('layout', 'layout-body-bg', $layout-body-bg);
+$layout-footer-bg: theme-runtime.token('layout', 'layout-footer-bg', $layout-footer-bg);
+$layout-header-bg: theme-runtime.token('layout', 'layout-header-bg', $layout-header-bg);
+$layout-header-height: theme-runtime.token(
+  'layout',
+  'layout-header-height',
+  $layout-header-height,
+  'size-16'
+);
+$layout-header-padding-horizontal: theme-runtime.token(
+  'layout',
+  'layout-header-padding-horizontal',
+  $layout-header-padding-horizontal
+);
+$layout-header-padding: theme-runtime.token(
+  'layout',
+  'layout-header-padding',
+  $layout-header-padding
+);
+$layout-header-color: theme-runtime.token('layout', 'layout-header-color', $layout-header-color);
+$layout-footer-padding: theme-runtime.token(
+  'layout',
+  'layout-footer-padding',
+  $layout-footer-padding
+);
+$layout-sider-bg: theme-runtime.token('layout', 'layout-sider-bg', $layout-sider-bg);
+$layout-sider-trigger-height: theme-runtime.token(
+  'layout',
+  'layout-sider-trigger-height',
+  $layout-sider-trigger-height,
+  'size-11'
+);
+$layout-sider-trigger-bg: theme-runtime.token(
+  'layout',
+  'layout-sider-trigger-bg',
+  $layout-sider-trigger-bg
+);
+$layout-sider-trigger-color: theme-runtime.token(
+  'layout',
+  'layout-sider-trigger-color',
+  $layout-sider-trigger-color
+);
+$layout-sider-zero-trigger-width: theme-runtime.token(
+  'layout',
+  'layout-sider-zero-trigger-width',
+  $layout-sider-zero-trigger-width,
+  'size-10'
+);
+$layout-sider-zero-trigger-height: theme-runtime.token(
+  'layout',
+  'layout-sider-zero-trigger-height',
+  $layout-sider-zero-trigger-height,
+  'size-10'
+);
+$layout-sider-zero-trigger-font-size: theme-runtime.token(
+  'layout',
+  'layout-sider-zero-trigger-font-size',
+  $layout-sider-zero-trigger-font-size
+);
+$layout-sider-rail-width: theme-runtime.token(
+  'layout',
+  'layout-sider-rail-width',
+  $layout-sider-rail-width,
+  'size-18'
+);
+$layout-sider-rail-expand-z-index: theme-runtime.token(
+  'layout',
+  'layout-sider-rail-expand-z-index',
+  $layout-sider-rail-expand-z-index
+);
+$layout-light-sider-bg: theme-runtime.token(
+  'layout',
+  'layout-light-sider-bg',
+  $layout-light-sider-bg
+);
+$layout-light-trigger-bg: theme-runtime.token(
+  'layout',
+  'layout-light-trigger-bg',
+  $layout-light-trigger-bg
+);
+$layout-light-trigger-color: theme-runtime.token(
+  'layout',
+  'layout-light-trigger-color',
+  $layout-light-trigger-color
+);
+$layout-radius-lg: theme-runtime.token(
+  'layout',
+  'layout-radius-lg',
+  $layout-radius-lg,
+  'border-radius-large'
+);
+$layout-motion-duration-slow: theme-runtime.token(
+  'layout',
+  'layout-motion-duration-slow',
+  $layout-motion-duration-slow
+);
+$layout-font-size: theme-runtime.token('layout', 'layout-font-size', $layout-font-size);