@sdata/web-vue 4.7.1 → 5.0.0

package/es/descriptions/style/index.css

@@ -23,15 +23,15 @@
   table-layout: fixed;
 }
 .sd-descriptions-title {
-  margin-bottom: 16px;
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  font-size: 16px;
+  margin-bottom: var(--component-descriptions-descriptions-size-default-title-margin-bottom, var(--component-descriptions-size-default-title-margin-bottom, 16px));
+  color: var(--component-descriptions-descriptions-color-title, var(--component-descriptions-color-title, var(--sd-color-text-1)));
+  font-weight: var(--component-descriptions-descriptions-font-weight-title, var(--component-descriptions-font-weight-title, var(--font-weight-500, 500)));
+  font-size: var(--component-descriptions-descriptions-font-size-title, var(--component-descriptions-font-size-title, var(--font-size-title-1, 16px)));
   line-height: 1.5715;
 }
 .sd-descriptions-item, .sd-descriptions-item-label, .sd-descriptions-item-value {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: var(--component-descriptions-descriptions-size-default-font-size-text, var(--component-descriptions-size-default-font-size-text, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
   text-align: left;
 }
@@ -40,32 +40,32 @@
 }
 .sd-descriptions-item-label-block {
   width: 1px;
-  padding: 0 4px 12px 0;
-  color: var(--sd-color-text-3);
-  font-weight: 500;
+  padding: 0 4px var(--component-descriptions-descriptions-item-size-default-spacing-bottom, var(--component-descriptions-item-size-default-spacing-bottom, 12px)) 0;
+  color: var(--component-descriptions-descriptions-color-text-label, var(--component-descriptions-color-text-label, var(--sd-color-text-3)));
+  font-weight: var(--component-descriptions-descriptions-font-weight-text-label, var(--component-descriptions-font-weight-text-label, var(--font-weight-500, 500)));
   white-space: nowrap;
 }
 .sd-descriptions-item-value-block {
-  padding: 0 4px 12px 0;
-  color: var(--sd-color-text-1);
-  font-weight: 400;
+  padding: 0 4px var(--component-descriptions-descriptions-item-size-default-spacing-bottom, var(--component-descriptions-item-size-default-spacing-bottom, 12px)) 0;
+  color: var(--component-descriptions-descriptions-color-text-value, var(--component-descriptions-color-text-value, var(--sd-color-text-1)));
+  font-weight: var(--component-descriptions-descriptions-font-weight-text-value, var(--component-descriptions-font-weight-text-value, var(--font-weight-400, 400)));
   white-space: pre-wrap;
   word-break: break-word;
 }
 .sd-descriptions-item-label-inline, .sd-descriptions-item-value-inline {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: var(--component-descriptions-descriptions-size-default-font-size-text, var(--component-descriptions-size-default-font-size-text, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
   text-align: left;
 }
 .sd-descriptions-item-label-inline {
   margin-bottom: 2px;
-  color: var(--sd-color-text-3);
-  font-weight: 500;
+  color: var(--component-descriptions-descriptions-color-text-label, var(--component-descriptions-color-text-label, var(--sd-color-text-3)));
+  font-weight: var(--component-descriptions-descriptions-font-weight-text-label, var(--component-descriptions-font-weight-text-label, var(--font-weight-500, 500)));
 }
 .sd-descriptions-item-value-inline {
-  color: var(--sd-color-text-1);
-  font-weight: 400;
+  color: var(--component-descriptions-descriptions-color-text-value, var(--component-descriptions-color-text-value, var(--sd-color-text-1)));
+  font-weight: var(--component-descriptions-descriptions-font-weight-text-value, var(--component-descriptions-font-weight-text-value, var(--font-weight-400, 400)));
 }
 .sd-descriptions-layout-inline-horizontal .sd-descriptions-item-label-inline {
   margin-right: 4px;
@@ -79,18 +79,18 @@
 }
 .sd-descriptions-border .sd-descriptions-body {
   overflow: hidden;
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
+  border: var(--component-descriptions-descriptions-border-width, var(--component-descriptions-border-width, 1px)) var(--component-descriptions-descriptions-border-style, var(--component-descriptions-border-style, solid)) var(--component-descriptions-descriptions-color-border, var(--component-descriptions-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-descriptions-descriptions-border-radius, var(--component-descriptions-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-descriptions-border .sd-descriptions-row:not(:last-child) {
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: var(--component-descriptions-descriptions-border-width, var(--component-descriptions-border-width, 1px)) var(--component-descriptions-descriptions-border-style, var(--component-descriptions-border-style, solid)) var(--component-descriptions-descriptions-color-border, var(--component-descriptions-color-border, var(--sd-color-neutral-3)));
 }
 .sd-descriptions-border .sd-descriptions-item, .sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-border .sd-descriptions-item-value-block {
   padding: 7px 20px;
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: var(--component-descriptions-descriptions-border-width, var(--component-descriptions-border-width, 1px)) var(--component-descriptions-descriptions-border-style, var(--component-descriptions-border-style, solid)) var(--component-descriptions-descriptions-color-border, var(--component-descriptions-color-border, var(--sd-color-neutral-3)));
 }
 .sd-descriptions-border .sd-descriptions-item-label-block {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-descriptions-descriptions-border-color-bg-label, var(--component-descriptions-border-color-bg-label, var(--sd-color-fill-1)));
 }
 .sd-descriptions-border .sd-descriptions-item-value-block:last-child {
   border-right: none;
@@ -105,58 +105,58 @@
   padding-left: 0;
 }
 .sd-descriptions-size-mini .sd-descriptions-title {
-  margin-bottom: 6px;
+  margin-bottom: var(--component-descriptions-descriptions-size-mini-title-margin-bottom, var(--component-descriptions-size-mini-title-margin-bottom, 6px));
 }
 .sd-descriptions-size-mini .sd-descriptions-item-label-block, .sd-descriptions-size-mini .sd-descriptions-item-value-block {
-  padding-right: 20px;
-  padding-bottom: 2px;
-  font-size: 12px;
+  padding-right: var(--component-descriptions-descriptions-border-item-size-mini-padding-horizontal, var(--component-descriptions-border-item-size-mini-padding-horizontal, var(--spacing-8, 20px)));
+  padding-bottom: var(--component-descriptions-descriptions-item-size-mini-spacing-bottom, var(--component-descriptions-item-size-mini-spacing-bottom, 2px));
+  font-size: var(--component-descriptions-descriptions-size-mini-font-size-text, var(--component-descriptions-size-mini-font-size-text, var(--font-size-body-1, 12px)));
 }
 .sd-descriptions-size-mini.sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-size-mini.sd-descriptions-border .sd-descriptions-item-value-block {
-  padding: 3px 20px;
+  padding: var(--component-descriptions-descriptions-border-item-size-mini-padding-vertical, var(--component-descriptions-border-item-size-mini-padding-vertical, 3px)) var(--component-descriptions-descriptions-border-item-size-mini-padding-horizontal, var(--component-descriptions-border-item-size-mini-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-descriptions-size-mini.sd-descriptions-border.sd-descriptions-layout-inline-vertical .sd-descriptions-item {
-  padding: 8px 20px;
+  padding: var(--component-descriptions-descriptions-border-item-size-mini-padding-vertical, var(--component-descriptions-border-item-size-mini-padding-vertical, 3px))5px var(--component-descriptions-descriptions-border-item-size-mini-padding-horizontal, var(--component-descriptions-border-item-size-mini-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-descriptions-size-small .sd-descriptions-title {
-  margin-bottom: 8px;
+  margin-bottom: var(--component-descriptions-descriptions-size-small-title-margin-bottom, var(--component-descriptions-size-small-title-margin-bottom, 8px));
 }
 .sd-descriptions-size-small .sd-descriptions-item-label-block, .sd-descriptions-size-small .sd-descriptions-item-value-block {
-  padding-right: 20px;
-  padding-bottom: 4px;
-  font-size: 14px;
+  padding-right: var(--component-descriptions-descriptions-border-item-size-small-padding-horizontal, var(--component-descriptions-border-item-size-small-padding-horizontal, var(--spacing-8, 20px)));
+  padding-bottom: var(--component-descriptions-descriptions-item-size-small-spacing-bottom, var(--component-descriptions-item-size-small-spacing-bottom, 4px));
+  font-size: var(--component-descriptions-descriptions-size-small-font-size-text, var(--component-descriptions-size-small-font-size-text, var(--font-size-body-3, 14px)));
 }
 .sd-descriptions-size-small.sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-size-small.sd-descriptions-border .sd-descriptions-item-value-block {
-  padding: 3px 20px;
+  padding: var(--component-descriptions-descriptions-border-item-size-small-padding-vertical, var(--component-descriptions-border-item-size-small-padding-vertical, 3px)) var(--component-descriptions-descriptions-border-item-size-small-padding-horizontal, var(--component-descriptions-border-item-size-small-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-descriptions-size-small.sd-descriptions-border.sd-descriptions-layout-inline-vertical .sd-descriptions-item {
-  padding: 8px 20px;
+  padding: var(--component-descriptions-descriptions-border-item-size-small-padding-vertical, var(--component-descriptions-border-item-size-small-padding-vertical, 3px))5px var(--component-descriptions-descriptions-border-item-size-small-padding-horizontal, var(--component-descriptions-border-item-size-small-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-descriptions-size-medium .sd-descriptions-title {
-  margin-bottom: 12px;
+  margin-bottom: var(--component-descriptions-descriptions-size-medium-title-margin-bottom, var(--component-descriptions-size-medium-title-margin-bottom, 12px));
 }
 .sd-descriptions-size-medium .sd-descriptions-item-label-block, .sd-descriptions-size-medium .sd-descriptions-item-value-block {
-  padding-right: 20px;
-  padding-bottom: 8px;
-  font-size: 14px;
+  padding-right: var(--component-descriptions-descriptions-border-item-size-medium-padding-horizontal, var(--component-descriptions-border-item-size-medium-padding-horizontal, var(--spacing-8, 20px)));
+  padding-bottom: var(--component-descriptions-descriptions-item-size-medium-spacing-bottom, var(--component-descriptions-item-size-medium-spacing-bottom, 8px));
+  font-size: var(--component-descriptions-descriptions-size-medium-font-size-text, var(--component-descriptions-size-medium-font-size-text, var(--font-size-body-3, 14px)));
 }
 .sd-descriptions-size-medium.sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-size-medium.sd-descriptions-border .sd-descriptions-item-value-block {
-  padding: 5px 20px;
+  padding: var(--component-descriptions-descriptions-border-item-size-medium-padding-vertical, var(--component-descriptions-border-item-size-medium-padding-vertical, 5px)) var(--component-descriptions-descriptions-border-item-size-medium-padding-horizontal, var(--component-descriptions-border-item-size-medium-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-descriptions-size-medium.sd-descriptions-border.sd-descriptions-layout-inline-vertical .sd-descriptions-item {
-  padding: 10px 20px;
+  padding: var(--component-descriptions-descriptions-border-item-size-medium-padding-vertical, var(--component-descriptions-border-item-size-medium-padding-vertical, 5px))5px var(--component-descriptions-descriptions-border-item-size-medium-padding-horizontal, var(--component-descriptions-border-item-size-medium-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-descriptions-size-large .sd-descriptions-title {
-  margin-bottom: 20px;
+  margin-bottom: var(--component-descriptions-descriptions-size-large-title-margin-bottom, var(--component-descriptions-size-large-title-margin-bottom, 20px));
 }
 .sd-descriptions-size-large .sd-descriptions-item-label-block, .sd-descriptions-size-large .sd-descriptions-item-value-block {
-  padding-right: 20px;
-  padding-bottom: 16px;
-  font-size: 14px;
+  padding-right: var(--component-descriptions-descriptions-border-item-size-large-padding-horizontal, var(--component-descriptions-border-item-size-large-padding-horizontal, var(--spacing-8, 20px)));
+  padding-bottom: var(--component-descriptions-descriptions-item-size-large-spacing-bottom, var(--component-descriptions-item-size-large-spacing-bottom, 16px));
+  font-size: var(--component-descriptions-descriptions-size-large-font-size-text, var(--component-descriptions-size-large-font-size-text, var(--font-size-body-3, 14px)));
 }
 .sd-descriptions-size-large.sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-size-large.sd-descriptions-border .sd-descriptions-item-value-block {
-  padding: 9px 20px;
+  padding: var(--component-descriptions-descriptions-border-item-size-large-padding-vertical, var(--component-descriptions-border-item-size-large-padding-vertical, 9px)) var(--component-descriptions-descriptions-border-item-size-large-padding-horizontal, var(--component-descriptions-border-item-size-large-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-descriptions-size-large.sd-descriptions-border.sd-descriptions-layout-inline-vertical .sd-descriptions-item {
-  padding: 14px 20px;
+  padding: var(--component-descriptions-descriptions-border-item-size-large-padding-vertical, var(--component-descriptions-border-item-size-large-padding-vertical, 9px))5px var(--component-descriptions-descriptions-border-item-size-large-padding-horizontal, var(--component-descriptions-border-item-size-large-padding-horizontal, var(--spacing-8, 20px)));
 }

package/es/descriptions/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';
@@ -81,3 +82,193 @@ $descriptions-border-item-size-default-padding-vertical: 7px;
 $descriptions-border-item-size-large-padding-horizontal: global.$spacing-8;
 
 $descriptions-border-item-size-large-padding-vertical: 9px;
+
+// @generated runtime tokens — pnpm theme:generate
+$descriptions-border-width: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-width',
+  $descriptions-border-width
+);
+$descriptions-border-style: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-style',
+  $descriptions-border-style
+);
+$descriptions-color-border: theme-runtime.token(
+  'descriptions',
+  'descriptions-color-border',
+  $descriptions-color-border
+);
+$descriptions-border-radius: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-radius',
+  $descriptions-border-radius
+);
+$descriptions-font-size-title: theme-runtime.token(
+  'descriptions',
+  'descriptions-font-size-title',
+  $descriptions-font-size-title,
+  'font-size-title-1'
+);
+$descriptions-size-mini-title-margin-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-mini-title-margin-bottom',
+  $descriptions-size-mini-title-margin-bottom
+);
+$descriptions-size-small-title-margin-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-small-title-margin-bottom',
+  $descriptions-size-small-title-margin-bottom
+);
+$descriptions-size-medium-title-margin-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-medium-title-margin-bottom',
+  $descriptions-size-medium-title-margin-bottom
+);
+$descriptions-size-default-title-margin-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-default-title-margin-bottom',
+  $descriptions-size-default-title-margin-bottom
+);
+$descriptions-size-large-title-margin-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-large-title-margin-bottom',
+  $descriptions-size-large-title-margin-bottom
+);
+$descriptions-size-mini-font-size-text: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-mini-font-size-text',
+  $descriptions-size-mini-font-size-text,
+  'font-size-body-1'
+);
+$descriptions-size-small-font-size-text: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-small-font-size-text',
+  $descriptions-size-small-font-size-text,
+  'font-size-body-3'
+);
+$descriptions-size-medium-font-size-text: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-medium-font-size-text',
+  $descriptions-size-medium-font-size-text,
+  'font-size-body-3'
+);
+$descriptions-size-default-font-size-text: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-default-font-size-text',
+  $descriptions-size-default-font-size-text,
+  'font-size-body-3'
+);
+$descriptions-size-large-font-size-text: theme-runtime.token(
+  'descriptions',
+  'descriptions-size-large-font-size-text',
+  $descriptions-size-large-font-size-text,
+  'font-size-body-3'
+);
+$descriptions-color-title: theme-runtime.token(
+  'descriptions',
+  'descriptions-color-title',
+  $descriptions-color-title
+);
+$descriptions-color-text-label: theme-runtime.token(
+  'descriptions',
+  'descriptions-color-text-label',
+  $descriptions-color-text-label
+);
+$descriptions-color-text-value: theme-runtime.token(
+  'descriptions',
+  'descriptions-color-text-value',
+  $descriptions-color-text-value
+);
+$descriptions-font-weight-title: theme-runtime.token(
+  'descriptions',
+  'descriptions-font-weight-title',
+  $descriptions-font-weight-title,
+  'font-weight-500'
+);
+$descriptions-font-weight-text-label: theme-runtime.token(
+  'descriptions',
+  'descriptions-font-weight-text-label',
+  $descriptions-font-weight-text-label,
+  'font-weight-500'
+);
+$descriptions-font-weight-text-value: theme-runtime.token(
+  'descriptions',
+  'descriptions-font-weight-text-value',
+  $descriptions-font-weight-text-value,
+  'font-weight-400'
+);
+$descriptions-border-color-bg-label: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-color-bg-label',
+  $descriptions-border-color-bg-label
+);
+$descriptions-item-size-mini-spacing-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-item-size-mini-spacing-bottom',
+  $descriptions-item-size-mini-spacing-bottom
+);
+$descriptions-item-size-small-spacing-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-item-size-small-spacing-bottom',
+  $descriptions-item-size-small-spacing-bottom
+);
+$descriptions-item-size-medium-spacing-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-item-size-medium-spacing-bottom',
+  $descriptions-item-size-medium-spacing-bottom
+);
+$descriptions-item-size-default-spacing-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-item-size-default-spacing-bottom',
+  $descriptions-item-size-default-spacing-bottom
+);
+$descriptions-item-size-large-spacing-bottom: theme-runtime.token(
+  'descriptions',
+  'descriptions-item-size-large-spacing-bottom',
+  $descriptions-item-size-large-spacing-bottom
+);
+$descriptions-border-item-size-mini-padding-horizontal: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-item-size-mini-padding-horizontal',
+  $descriptions-border-item-size-mini-padding-horizontal,
+  'spacing-8'
+);
+$descriptions-border-item-size-mini-padding-vertical: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-item-size-mini-padding-vertical',
+  $descriptions-border-item-size-mini-padding-vertical
+);
+$descriptions-border-item-size-small-padding-horizontal: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-item-size-small-padding-horizontal',
+  $descriptions-border-item-size-small-padding-horizontal,
+  'spacing-8'
+);
+$descriptions-border-item-size-small-padding-vertical: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-item-size-small-padding-vertical',
+  $descriptions-border-item-size-small-padding-vertical
+);
+$descriptions-border-item-size-medium-padding-horizontal: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-item-size-medium-padding-horizontal',
+  $descriptions-border-item-size-medium-padding-horizontal,
+  'spacing-8'
+);
+$descriptions-border-item-size-medium-padding-vertical: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-item-size-medium-padding-vertical',
+  $descriptions-border-item-size-medium-padding-vertical
+);
+$descriptions-border-item-size-large-padding-horizontal: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-item-size-large-padding-horizontal',
+  $descriptions-border-item-size-large-padding-horizontal,
+  'spacing-8'
+);
+$descriptions-border-item-size-large-padding-vertical: theme-runtime.token(
+  'descriptions',
+  'descriptions-border-item-size-large-padding-vertical',
+  $descriptions-border-item-size-large-padding-vertical
+);

package/es/divider/style/index.css

@@ -21,29 +21,29 @@
   width: 100%;
   min-width: 100%;
   max-width: 100%;
-  margin: 20px 0;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  margin: var(--component-divider-divider-margin-vertical, var(--component-divider-margin-vertical, var(--spacing-8, 20px))) 0;
+  border-bottom: var(--component-divider-divider-size, var(--component-divider-size, 1px)) var(--component-divider-divider-line-style, var(--component-divider-line-style, var(--border-solid, solid))) var(--component-divider-divider-color-bg, var(--component-divider-color-bg, var(--sd-color-neutral-3)));
 }
 .sd-divider-horizontal.sd-divider-with-text {
-  margin: 20px 0;
+  margin: var(--component-divider-divider-margin-vertical-text, var(--component-divider-margin-vertical-text, var(--spacing-8, 20px))) 0;
 }
 .sd-divider-vertical {
   display: inline-block;
   min-width: 1px;
   max-width: 1px;
   min-height: 1em;
-  margin: 0 12px;
+  margin: 0 var(--component-divider-divider-margin-horizontal, var(--component-divider-margin-horizontal, var(--spacing-6, 12px)));
   vertical-align: middle;
-  border-left: 1px solid var(--sd-color-neutral-3);
+  border-left: var(--component-divider-divider-size, var(--component-divider-size, 1px)) var(--component-divider-divider-line-style, var(--component-divider-line-style, var(--border-solid, solid))) var(--component-divider-divider-color-bg, var(--component-divider-color-bg, var(--sd-color-neutral-3)));
 }
 .sd-divider-text {
   position: absolute;
   top: 50%;
   box-sizing: border-box;
-  padding: 0 16px;
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  font-size: 14px;
+  padding: 0 var(--component-divider-divider-margin-text, var(--component-divider-margin-text, var(--spacing-7, 16px)));
+  color: var(--component-divider-divider-color-text, var(--component-divider-color-text, var(--sd-color-text-1)));
+  font-weight: var(--component-divider-divider-font-weight, var(--component-divider-font-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-divider-divider-font-size, var(--component-divider-font-size, var(--font-size-body-3, 14px)));
   line-height: 2;
   background: var(--sd-color-bg-2);
   transform: translateY(-50%);
@@ -53,8 +53,8 @@
   transform: translate(-50%, -50%);
 }
 .sd-divider-text-left {
-  left: 24px;
+  left: var(--component-divider-divider-position-text-left, var(--component-divider-position-text-left, var(--spacing-9, 24px)));
 }
 .sd-divider-text-right {
-  right: 24px;
+  right: var(--component-divider-divider-position-text-right, var(--component-divider-position-text-right, var(--spacing-9, 24px)));
 }

package/es/divider/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';
@@ -29,3 +30,62 @@ $divider-line-style: global.$border-solid;
 $divider-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
 
 $divider-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+// @generated runtime tokens — pnpm theme:generate
+$divider-margin-horizontal: theme-runtime.token(
+  'divider',
+  'divider-margin-horizontal',
+  $divider-margin-horizontal,
+  'spacing-6'
+);
+$divider-margin-vertical: theme-runtime.token(
+  'divider',
+  'divider-margin-vertical',
+  $divider-margin-vertical,
+  'spacing-8'
+);
+$divider-margin-vertical_text: theme-runtime.token(
+  'divider',
+  'divider-margin-vertical-text',
+  $divider-margin-vertical_text,
+  'spacing-8'
+);
+$divider-margin-text: theme-runtime.token(
+  'divider',
+  'divider-margin-text',
+  $divider-margin-text,
+  'spacing-7'
+);
+$divider-position-text-left: theme-runtime.token(
+  'divider',
+  'divider-position-text-left',
+  $divider-position-text-left,
+  'spacing-9'
+);
+$divider-position-text-right: theme-runtime.token(
+  'divider',
+  'divider-position-text-right',
+  $divider-position-text-right,
+  'spacing-9'
+);
+$divider-font-size: theme-runtime.token(
+  'divider',
+  'divider-font-size',
+  $divider-font-size,
+  'font-size-body-3'
+);
+$divider-font-weight: theme-runtime.token(
+  'divider',
+  'divider-font-weight',
+  $divider-font-weight,
+  'font-weight-500'
+);
+$divider-size: theme-runtime.token('divider', 'divider-size', $divider-size);
+$divider-line-style: theme-runtime.token(
+  'divider',
+  'divider-line-style',
+  $divider-line-style,
+  'border-solid'
+);
+$divider-color-bg: theme-runtime.token('divider', 'divider-color-bg', $divider-color-bg);
+$divider-color-text: theme-runtime.token('divider', 'divider-color-text', $divider-color-text);

package/es/drawer/style/index.css

@@ -43,17 +43,17 @@
   align-items: center;
   box-sizing: border-box;
   width: 100%;
-  height: 48px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  height: var(--component-drawer-drawer-size-header-height, var(--component-drawer-size-header-height, var(--size-12, 48px)));
+  padding: 0 var(--component-drawer-drawer-padding-horizontal, var(--component-drawer-padding-horizontal, var(--spacing-7, 16px)));
+  border-bottom: 1px solid var(--component-drawer-drawer-color-border, var(--component-drawer-color-border, var(--sd-color-neutral-3)));
 }
 .sd-drawer-header .sd-drawer-title {
   flex: 1;
   min-width: 0;
   margin-right: auto;
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  font-size: 16px;
+  color: var(--component-drawer-drawer-color-header-text, var(--component-drawer-color-header-text, var(--sd-color-text-1)));
+  font-weight: var(--component-drawer-drawer-font-header-weight, var(--component-drawer-font-header-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-drawer-drawer-font-header-size, var(--component-drawer-font-header-size, var(--font-size-title-1, 16px)));
   text-align: left;
 }
 .sd-drawer-header .sd-drawer-title-text {
@@ -61,28 +61,28 @@
 }
 .sd-drawer-header .sd-drawer-close-btn {
   margin-left: 8px;
-  color: var(--sd-color-text-1);
-  font-size: 12px;
+  color: var(--component-drawer-drawer-color-header-text, var(--component-drawer-color-header-text, var(--sd-color-text-1)));
+  font-size: var(--component-drawer-drawer-font-size-close-icon, var(--component-drawer-font-size-close-icon, var(--size-3, 12px)));
   cursor: pointer;
 }
 .sd-drawer-footer {
   flex-shrink: 0;
   box-sizing: border-box;
-  padding: 16px 16px;
+  padding: var(--component-drawer-drawer-padding-footer-vertical, var(--component-drawer-padding-footer-vertical, var(--spacing-7, 16px))) var(--component-drawer-drawer-padding-horizontal, var(--component-drawer-padding-horizontal, var(--spacing-7, 16px)));
   text-align: right;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-drawer-drawer-color-border, var(--component-drawer-color-border, var(--sd-color-neutral-3)));
 }
 .sd-drawer-footer > .sd-btn {
-  margin-left: 12px;
+  margin-left: var(--component-drawer-drawer-margin-footer-button-left, var(--component-drawer-margin-footer-button-left, var(--spacing-6, 12px)));
 }
 .sd-drawer-body {
   position: relative;
   flex: 1;
   box-sizing: border-box;
   height: 100%;
-  padding: 12px 16px;
+  padding: var(--component-drawer-drawer-padding-content-vertical, var(--component-drawer-padding-content-vertical, var(--spacing-6, 12px))) var(--component-drawer-drawer-padding-horizontal, var(--component-drawer-padding-horizontal, var(--spacing-7, 16px)));
   overflow: auto;
-  color: var(--sd-color-text-1);
+  color: var(--component-drawer-drawer-color-content-text, var(--component-drawer-color-content-text, var(--sd-color-text-1)));
 }
 
 .sd-drawer-penetrable {

package/es/drawer/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';
@@ -29,3 +30,70 @@ $drawer-color-content-text: var(string.unquote('#{global.$sd-cssvars-prefix}-col
 $drawer-position-close-icon-right: global.$spacing-7;
 
 $drawer-font-size-close-icon: global.$size-3;
+
+// @generated runtime tokens — pnpm theme:generate
+$drawer-size-header-height: theme-runtime.token(
+  'drawer',
+  'drawer-size-header-height',
+  $drawer-size-header-height,
+  'size-12'
+);
+$drawer-margin-footer-button-left: theme-runtime.token(
+  'drawer',
+  'drawer-margin-footer-button-left',
+  $drawer-margin-footer-button-left,
+  'spacing-6'
+);
+$drawer-font-header-size: theme-runtime.token(
+  'drawer',
+  'drawer-font-header-size',
+  $drawer-font-header-size,
+  'font-size-title-1'
+);
+$drawer-padding-horizontal: theme-runtime.token(
+  'drawer',
+  'drawer-padding-horizontal',
+  $drawer-padding-horizontal,
+  'spacing-7'
+);
+$drawer-padding-footer-vertical: theme-runtime.token(
+  'drawer',
+  'drawer-padding-footer-vertical',
+  $drawer-padding-footer-vertical,
+  'spacing-7'
+);
+$drawer-padding-content-vertical: theme-runtime.token(
+  'drawer',
+  'drawer-padding-content-vertical',
+  $drawer-padding-content-vertical,
+  'spacing-6'
+);
+$drawer-font-header-weight: theme-runtime.token(
+  'drawer',
+  'drawer-font-header-weight',
+  $drawer-font-header-weight,
+  'font-weight-500'
+);
+$drawer-color-border: theme-runtime.token('drawer', 'drawer-color-border', $drawer-color-border);
+$drawer-color-header-text: theme-runtime.token(
+  'drawer',
+  'drawer-color-header-text',
+  $drawer-color-header-text
+);
+$drawer-color-content-text: theme-runtime.token(
+  'drawer',
+  'drawer-color-content-text',
+  $drawer-color-content-text
+);
+$drawer-position-close-icon-right: theme-runtime.token(
+  'drawer',
+  'drawer-position-close-icon-right',
+  $drawer-position-close-icon-right,
+  'spacing-7'
+);
+$drawer-font-size-close-icon: theme-runtime.token(
+  'drawer',
+  'drawer-font-size-close-icon',
+  $drawer-font-size-close-icon,
+  'size-3'
+);