@sdata/web-vue 4.7.1 → 5.0.0

package/es/tag-group/style/token.scss

@@ -1,6 +1,15 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
 
 $tag-group-gap: global.$spacing-2;
 $tag-group-popover-max-width: 320px;
+
+// @generated runtime tokens — pnpm theme:generate
+$tag-group-gap: theme-runtime.token('tag-group', 'tag-group-gap', $tag-group-gap, 'spacing-2');
+$tag-group-popover-max-width: theme-runtime.token(
+  'tag-group',
+  'tag-group-popover-max-width',
+  $tag-group-popover-max-width
+);

package/es/textarea/style/index.css

@@ -26,52 +26,52 @@
   width: 100%;
   padding-right: 12px;
   padding-left: 12px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  background-color: var(--sd-color-fill-2);
-  border: 1px solid transparent;
-  border-radius: var(--sd-border-radius-small);
+  color: var(--component-input-input-color-text, var(--component-input-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)));
+  background-color: var(--component-input-input-color-bg, var(--component-input-color-bg, var(--sd-color-fill-2)));
+  border: 1px solid var(--component-input-input-color-border, var(--component-input-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-input-input-border-radius, var(--component-input-border-radius, var(--sd-border-radius-small)));
   cursor: text;
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-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-textarea-wrapper:hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-hover, var(--component-input-color-bg-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-input-input-color-border-hover, var(--component-input-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-textarea-wrapper:focus-within, .sd-textarea-wrapper.sd-textarea-focus {
   z-index: 1;
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-primary-6));
-  box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
+  background-color: var(--component-input-input-color-bg-focus, var(--component-input-color-bg-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-input-input-color-border-focus, var(--component-input-color-border-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  box-shadow: 0 0 0 var(--component-input-input-size-shadow-focus, var(--component-input-size-shadow-focus, var(--shadow-distance-none, 0))) var(--component-input-input-color-shadow-focus, var(--component-input-color-shadow-focus, var(--sd-color-primary-light-2)));
 }
 .sd-textarea-wrapper.sd-textarea-disabled {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-input-input-color-bg-disabled, var(--component-input-color-bg-disabled, var(--sd-color-fill-2)));
+  border-color: var(--component-input-input-color-border-disabled, var(--component-input-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-textarea-wrapper.sd-textarea-disabled:hover {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-input-input-color-bg-disabled, var(--component-input-color-bg-disabled, var(--sd-color-fill-2)));
+  border-color: var(--component-input-input-color-border-disabled, var(--component-input-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-textarea-wrapper.sd-textarea-disabled .sd-textarea-prefix,
 .sd-textarea-wrapper.sd-textarea-disabled .sd-textarea-suffix {
   color: inherit;
 }
 .sd-textarea-wrapper.sd-textarea-error {
-  background-color: var(--sd-color-danger-light-1);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-error, var(--component-input-color-bg-error, var(--sd-color-danger-light-1)));
+  border-color: var(--component-input-input-color-border-error, var(--component-input-color-border-error, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-textarea-wrapper.sd-textarea-error:hover {
-  background-color: var(--sd-color-danger-light-2);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-error-hover, var(--component-input-color-bg-error-hover, var(--sd-color-danger-light-2)));
+  border-color: var(--component-input-input-color-border-error-hover, var(--component-input-color-border-error-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-textarea-wrapper.sd-textarea-error:focus-within, .sd-textarea-wrapper.sd-textarea-error.sd-textarea-wrapper-focus {
   z-index: 1;
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-danger-6));
-  box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
+  background-color: var(--component-input-input-color-bg-error-focus, var(--component-input-color-bg-error-focus, var(--component-input-input-color-bg-focus, var(--component-input-color-bg-focus, var(--sd-color-bg-2)))));
+  border-color: var(--component-input-input-color-border-error-focus, var(--component-input-color-border-error-focus, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  box-shadow: 0 0 0 var(--component-input-input-size-shadow-error-focus, var(--component-input-size-shadow-error-focus, var(--shadow-distance-none, 0))) var(--component-input-input-color-shadow-error-focus, var(--component-input-color-shadow-error-focus, var(--sd-color-danger-light-2)));
 }
 .sd-textarea-wrapper .sd-textarea-prefix,
 .sd-textarea-wrapper .sd-textarea-suffix {
@@ -83,7 +83,7 @@
 }
 .sd-textarea-wrapper .sd-textarea-prefix > svg,
 .sd-textarea-wrapper .sd-textarea-suffix > svg {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-default-icon-suffix-size, var(--component-input-size-default-icon-suffix-size, 14px));
 }
 .sd-textarea-wrapper .sd-textarea-prefix {
   padding-right: 12px;
@@ -91,27 +91,27 @@
 }
 .sd-textarea-wrapper .sd-textarea-suffix {
   padding-left: 12px;
-  color: var(--sd-color-text-2);
+  color: var(--component-input-input-color-suffix-text, var(--component-input-color-suffix-text, var(--sd-color-text-2)));
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon {
   display: inline-flex;
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-input-input-feedback-icon-color-validating, var(--component-input-feedback-icon-color-validating, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-input-input-feedback-icon-color-success, var(--component-input-feedback-icon-color-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-input-input-feedback-icon-color-warning, var(--component-input-feedback-icon-color-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-input-input-feedback-icon-color-error, var(--component-input-feedback-icon-color-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-textarea-wrapper .sd-textarea-clear-btn {
   align-self: center;
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-input-input-color-icon-clear, var(--component-input-color-icon-clear, var(--sd-color-text-2)));
+  font-size: var(--component-input-input-size-icon-clear, var(--component-input-size-icon-clear, var(--size-3, 12px)));
   visibility: hidden;
   cursor: pointer;
 }
@@ -123,7 +123,7 @@
   visibility: visible;
 }
 .sd-textarea-wrapper:not(.sd-textarea-focus) .sd-textarea-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-4);
+  background-color: var(--component-input-input-color-icon-clear-bg-hover, var(--component-input-color-icon-clear-bg-hover, var(--sd-color-fill-4)));
 }
 .sd-textarea-wrapper {
   position: relative;
@@ -142,9 +142,9 @@
 .sd-textarea-wrapper .sd-textarea-word-limit {
   position: absolute;
   right: 10px;
-  bottom: 6px;
-  color: var(--sd-color-text-3);
-  font-size: 12px;
+  bottom: var(--component-input-textarea-layout-tip-bottom, var(--component-input-layout-tip-bottom, var(--spacing-3, 6px)));
+  color: var(--component-input-textarea-color-tip-text, var(--component-input-color-tip-text, var(--sd-color-text-3)));
+  font-size: var(--component-input-textarea-font-tip-size, var(--component-input-font-tip-size, var(--font-size-body-1, 12px)));
   user-select: none;
 }
 .sd-textarea-wrapper.sd-textarea-scroll .sd-textarea-word-limit {
@@ -182,21 +182,21 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-textarea::placeholder {
-  color: var(--sd-color-text-3);
+  color: var(--component-input-input-color-placeholder-text, var(--component-input-color-placeholder-text, var(--sd-color-text-3)));
 }
 .sd-textarea[disabled]::placeholder {
-  color: var(--sd-color-text-4);
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-textarea[disabled] {
-  -webkit-text-fill-color: var(--sd-color-text-4);
+  -webkit-text-fill-color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-textarea {
   display: block;
   box-sizing: border-box;
   height: 100%;
-  min-height: 32px;
+  min-height: var(--component-input-textarea-size-min-height, var(--component-input-size-min-height, var(--size-default, 32px)));
   padding: 4px 12px;
-  font-size: 14px;
+  font-size: var(--component-input-textarea-font-size, var(--component-input-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
   vertical-align: top;
   resize: vertical;

package/es/time-picker/style/index.css

@@ -24,18 +24,18 @@
 .sd-timepicker-container {
   overflow: hidden;
   background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
+  border: 1px solid var(--component-time-picker-timepicker-color-border, var(--component-time-picker-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-time-picker-timepicker-wrapper-border-radius, var(--component-time-picker-wrapper-border-radius, var(--sd-border-radius-medium)));
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
 }
 .sd-timepicker-column {
   box-sizing: border-box;
-  width: 64px;
+  width: var(--component-time-picker-timepicker-column-width, var(--component-time-picker-column-width, 64px));
   height: 224px;
   overflow: hidden;
 }
 .sd-timepicker-column:not(:last-child) {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px solid var(--component-time-picker-timepicker-color-border, var(--component-time-picker-color-border, var(--sd-color-neutral-3)));
 }
 .sd-timepicker-column:hover {
   overflow-y: auto;
@@ -54,8 +54,8 @@
 }
 .sd-timepicker-cell {
   padding: 4px 0;
-  color: var(--sd-color-text-1);
-  font-weight: 500;
+  color: var(--component-time-picker-timepicker-color-text-cell, var(--component-time-picker-color-text-cell, var(--sd-color-text-1)));
+  font-weight: var(--component-time-picker-timepicker-font-weight-cell, var(--component-time-picker-font-weight-cell, var(--font-weight-500, 500)));
   cursor: pointer;
 }
 .sd-timepicker-cell-inner {
@@ -65,27 +65,27 @@
   line-height: 24px;
 }
 .sd-timepicker-cell:not(.sd-timepicker-cell-selected, .sd-timepicker-cell-disabled):hover .sd-timepicker-cell-inner {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-time-picker-timepicker-color-bg-cell-hover, var(--component-time-picker-color-bg-cell-hover, var(--sd-color-fill-2)));
 }
 .sd-timepicker-cell-selected .sd-timepicker-cell-inner {
-  font-weight: 500;
-  background-color: var(--sd-color-fill-2);
+  font-weight: var(--component-time-picker-timepicker-font-weight-cell-active, var(--component-time-picker-font-weight-cell-active, var(--font-weight-500, 500)));
+  background-color: var(--component-time-picker-timepicker-color-bg-cell-active, var(--component-time-picker-color-bg-cell-active, var(--sd-color-fill-2)));
 }
 .sd-timepicker-cell-disabled {
-  color: var(--sd-color-text-4);
+  color: var(--component-time-picker-timepicker-color-text-cell-disabled, var(--component-time-picker-color-text-cell-disabled, var(--sd-color-text-4)));
   cursor: not-allowed;
 }
 .sd-timepicker-footer-extra-wrapper {
   padding: 8px;
   color: var(--sd-color-text-1);
   font-size: 12px;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-time-picker-timepicker-color-border, var(--component-time-picker-color-border, var(--sd-color-neutral-3)));
 }
 .sd-timepicker-footer-btn-wrapper {
   display: flex;
   justify-content: space-between;
   padding: 8px;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-time-picker-timepicker-color-border, var(--component-time-picker-color-border, var(--sd-color-neutral-3)));
 }
 .sd-timepicker-footer-btn-wrapper :only-child {
   margin-left: auto;

package/es/time-picker/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';
@@ -31,3 +32,52 @@ $timepicker-color-text-cell_disabled: var(
 $timepicker-font-weight-cell: global.$font-weight-500;
 
 $timepicker-font-weight-cell_active: global.$font-weight-500;
+
+// @generated runtime tokens — pnpm theme:generate
+$timepicker-wrapper-border-radius: theme-runtime.token(
+  'time-picker',
+  'timepicker-wrapper-border-radius',
+  $timepicker-wrapper-border-radius
+);
+$timepicker-column-width: theme-runtime.token(
+  'time-picker',
+  'timepicker-column-width',
+  $timepicker-column-width
+);
+$timepicker-color-border: theme-runtime.token(
+  'time-picker',
+  'timepicker-color-border',
+  $timepicker-color-border
+);
+$timepicker-color-text-cell: theme-runtime.token(
+  'time-picker',
+  'timepicker-color-text-cell',
+  $timepicker-color-text-cell
+);
+$timepicker-color-bg-cell_hover: theme-runtime.token(
+  'time-picker',
+  'timepicker-color-bg-cell-hover',
+  $timepicker-color-bg-cell_hover
+);
+$timepicker-color-bg-cell_active: theme-runtime.token(
+  'time-picker',
+  'timepicker-color-bg-cell-active',
+  $timepicker-color-bg-cell_active
+);
+$timepicker-color-text-cell_disabled: theme-runtime.token(
+  'time-picker',
+  'timepicker-color-text-cell-disabled',
+  $timepicker-color-text-cell_disabled
+);
+$timepicker-font-weight-cell: theme-runtime.token(
+  'time-picker',
+  'timepicker-font-weight-cell',
+  $timepicker-font-weight-cell,
+  'font-weight-500'
+);
+$timepicker-font-weight-cell_active: theme-runtime.token(
+  'time-picker',
+  'timepicker-font-weight-cell-active',
+  $timepicker-font-weight-cell_active,
+  'font-weight-500'
+);

package/es/timeline/style/index.css

@@ -21,19 +21,19 @@
 }
 .sd-timeline-item {
   position: relative;
-  min-height: 78px;
+  min-height: var(--component-timeline-timeline-item-min-height, var(--component-timeline-item-min-height, 78px));
   padding-left: 6px;
-  color: var(--sd-color-text-1);
+  color: var(--component-timeline-timeline-color-content-text, var(--component-timeline-color-content-text, var(--sd-color-text-1)));
   font-size: 14px;
 }
 .sd-timeline-item-label {
-  color: var(--sd-color-text-3);
-  font-size: 12px;
+  color: var(--component-timeline-timeline-color-label-text, var(--component-timeline-color-label-text, var(--sd-color-text-3)));
+  font-size: var(--component-timeline-timeline-font-label-size, var(--component-timeline-font-label-size, var(--font-size-body-1, 12px)));
   line-height: 1.667;
 }
 .sd-timeline-item-content {
-  margin-bottom: 4px;
-  color: var(--sd-color-text-1);
+  margin-bottom: var(--component-timeline-timeline-vertical-margin-content-bottom, var(--component-timeline-vertical-margin-content-bottom, var(--spacing-2, 4px)));
+  color: var(--component-timeline-timeline-color-content-text, var(--component-timeline-color-content-text, var(--sd-color-text-1)));
   font-size: 14px;
   line-height: 1.5715;
 }
@@ -64,15 +64,15 @@
   width: 6px;
   height: 6px;
   margin-top: -50%;
-  color: rgb(var(--sd-primary-6));
-  border-radius: var(--sd-border-radius-circle);
+  color: var(--component-timeline-timeline-color-dot-bg, var(--component-timeline-color-dot-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  border-radius: var(--component-timeline-timeline-dot-border-radius, var(--component-timeline-dot-border-radius, var(--sd-border-radius-circle)));
 }
 .sd-timeline-item-dot-solid {
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-timeline-timeline-color-dot-bg, var(--component-timeline-color-dot-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-timeline-item-dot-hollow {
-  background-color: var(--sd-color-bg-2);
-  border: 2px solid rgb(var(--sd-primary-6));
+  background-color: var(--component-timeline-timeline-color-dot-bg-hollow, var(--component-timeline-color-dot-bg-hollow, var(--sd-color-bg-2)));
+  border: var(--component-timeline-timeline-dot-border-width-hollow, var(--component-timeline-dot-border-width-hollow, var(--border-2, 2px))) solid var(--component-timeline-timeline-color-dot-bg, var(--component-timeline-color-dot-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-timeline-item-dot-custom {
   position: absolute;
@@ -80,7 +80,7 @@
   left: 50%;
   display: inline-flex;
   box-sizing: border-box;
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-timeline-timeline-color-dot-bg, var(--component-timeline-color-dot-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   background-color: var(--sd-color-bg-2);
   transform: translateX(-50%) translateY(-50%);
   transform-origin: center;
@@ -94,9 +94,9 @@
   bottom: -4.0005px;
   left: 50%;
   box-sizing: border-box;
-  width: 1px;
-  border-color: var(--sd-color-neutral-3);
-  border-left-width: 1px;
+  width: var(--component-timeline-timeline-size-line-width, var(--component-timeline-size-line-width, var(--border-1, 1px)));
+  border-color: var(--component-timeline-timeline-color-line-bg, var(--component-timeline-color-line-bg, var(--sd-color-neutral-3)));
+  border-left-width: var(--component-timeline-timeline-size-line-width, var(--component-timeline-size-line-width, var(--border-1, 1px)));
   transform: translateX(-50%);
 }
 
@@ -177,7 +177,7 @@
   margin-top: 50px;
 }
 .sd-timeline-item-horizontal-top.sd-timeline-item-label-relative > .sd-timeline-item-label {
-  padding-bottom: 16px;
+  padding-bottom: var(--component-timeline-timeline-horizontal-margin-content-spacing, var(--component-timeline-horizontal-margin-content-spacing, var(--spacing-7, 16px)));
   transform: translateY(-100%);
 }
 .sd-timeline-item-horizontal-top.sd-timeline-item-label-relative > .sd-timeline-item-content {
@@ -192,7 +192,7 @@
 .sd-timeline-item-horizontal-bottom.sd-timeline-item-label-relative > .sd-timeline-item-label {
   top: unset;
   bottom: 0;
-  padding-top: 16px;
+  padding-top: var(--component-timeline-timeline-horizontal-margin-content-spacing, var(--component-timeline-horizontal-margin-content-spacing, var(--spacing-7, 16px)));
   text-align: left;
   transform: translateY(100%);
 }
@@ -250,11 +250,11 @@
 
 .sd-timeline-item-dot-line-is-horizontal {
   top: 50%;
-  right: 4px;
+  right: var(--component-timeline-timeline-horizontal-margin-line-right, var(--component-timeline-horizontal-margin-line-right, var(--spacing-2, 4px)));
   left: 12px;
   width: unset;
-  height: 1px;
-  border-top-width: 1px;
+  height: var(--component-timeline-timeline-size-line-width, var(--component-timeline-size-line-width, var(--border-1, 1px)));
+  border-top-width: var(--component-timeline-timeline-size-line-width, var(--component-timeline-size-line-width, var(--border-1, 1px)));
   border-left: none;
   transform: translateY(-50%);
 }
@@ -296,7 +296,7 @@
 }
 
 .sd-timeline-item-horizontal-top > .sd-timeline-item-content-wrapper {
-  margin-top: 16px;
+  margin-top: var(--component-timeline-timeline-horizontal-margin-content-spacing, var(--component-timeline-horizontal-margin-content-spacing, var(--spacing-7, 16px)));
   margin-left: 0;
 }
 
@@ -310,7 +310,7 @@
 }
 
 .sd-timeline-item-horizontal-bottom > .sd-timeline-item-content-wrapper {
-  margin-bottom: 16px;
+  margin-bottom: var(--component-timeline-timeline-horizontal-margin-content-spacing, var(--component-timeline-horizontal-margin-content-spacing, var(--spacing-7, 16px)));
   margin-left: 0;
 }
 

package/es/timeline/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';
@@ -43,3 +44,77 @@ $timeline-vertical-margin-line-top: global.$spacing-2;
 $timeline-vertical-margin-line-bottom: global.$spacing-2;
 
 $timeline-size-line-width: global.$border-1;
+
+// @generated runtime tokens — pnpm theme:generate
+$timeline-color-content-text: theme-runtime.token(
+  'timeline',
+  'timeline-color-content-text',
+  $timeline-color-content-text
+);
+$timeline-color-label-text: theme-runtime.token(
+  'timeline',
+  'timeline-color-label-text',
+  $timeline-color-label-text
+);
+$timeline-color-dot-bg: theme-runtime.token(
+  'timeline',
+  'timeline-color-dot-bg',
+  $timeline-color-dot-bg,
+  'color-primary-6'
+);
+$timeline-color-line-bg: theme-runtime.token(
+  'timeline',
+  'timeline-color-line-bg',
+  $timeline-color-line-bg
+);
+$timeline-font-label-size: theme-runtime.token(
+  'timeline',
+  'timeline-font-label-size',
+  $timeline-font-label-size,
+  'font-size-body-1'
+);
+$timeline-item-min-height: theme-runtime.token(
+  'timeline',
+  'timeline-item-min-height',
+  $timeline-item-min-height
+);
+$timeline-dot-border-radius: theme-runtime.token(
+  'timeline',
+  'timeline-dot-border-radius',
+  $timeline-dot-border-radius
+);
+$timeline-dot-border-width_hollow: theme-runtime.token(
+  'timeline',
+  'timeline-dot-border-width-hollow',
+  $timeline-dot-border-width_hollow,
+  'border-2'
+);
+$timeline-color-dot-bg_hollow: theme-runtime.token(
+  'timeline',
+  'timeline-color-dot-bg-hollow',
+  $timeline-color-dot-bg_hollow
+);
+$timeline-horizontal-margin-content-spacing: theme-runtime.token(
+  'timeline',
+  'timeline-horizontal-margin-content-spacing',
+  $timeline-horizontal-margin-content-spacing,
+  'spacing-7'
+);
+$timeline-horizontal-margin-line-right: theme-runtime.token(
+  'timeline',
+  'timeline-horizontal-margin-line-right',
+  $timeline-horizontal-margin-line-right,
+  'spacing-2'
+);
+$timeline-vertical-margin-content-bottom: theme-runtime.token(
+  'timeline',
+  'timeline-vertical-margin-content-bottom',
+  $timeline-vertical-margin-content-bottom,
+  'spacing-2'
+);
+$timeline-size-line-width: theme-runtime.token(
+  'timeline',
+  'timeline-size-line-width',
+  $timeline-size-line-width,
+  'border-1'
+);

package/es/toolbar/style/index.css

@@ -21,13 +21,13 @@
 .sd-toolbar-inner {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--component-toolbar-toolbar-gap, var(--component-toolbar-gap, var(--spacing-6, 12px)));
   align-items: flex-start;
   width: 100%;
 }
 .sd-toolbar-with-border .sd-toolbar-inner {
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  padding-bottom: var(--component-toolbar-toolbar-padding-bottom, var(--component-toolbar-padding-bottom, var(--spacing-4, 8px)));
+  border-bottom: var(--component-toolbar-toolbar-border-width, var(--component-toolbar-border-width, var(--border-1, 1px))) var(--component-toolbar-toolbar-border-style, var(--component-toolbar-border-style, var(--border-solid, solid))) var(--component-toolbar-toolbar-color-border, var(--component-toolbar-color-border, var(--sd-color-neutral-3)));
 }
 .sd-toolbar-body {
   flex: 1 1 0;
@@ -40,7 +40,7 @@
   display: grid;
   flex: 1;
   grid-template-columns: repeat(auto-fill, minmax(var(--toolbar-span-width), 1fr));
-  gap: 8px;
+  gap: var(--component-toolbar-toolbar-body-gap, var(--component-toolbar-body-gap, var(--spacing-4, 8px)));
   width: 100%;
 }
 .sd-toolbar-body--schema .sd-form > * {
@@ -58,14 +58,14 @@
 .sd-toolbar-actions {
   display: flex;
   flex-shrink: 0;
-  gap: 8px;
+  gap: var(--component-toolbar-toolbar-actions-gap, var(--component-toolbar-actions-gap, var(--spacing-4, 8px)));
   align-items: center;
   align-self: flex-end;
   white-space: nowrap;
 }
 .sd-toolbar-expand {
   display: inline-flex;
-  gap: 4px;
+  gap: var(--component-toolbar-toolbar-expand-gap, var(--component-toolbar-expand-gap, var(--spacing-2, 4px)));
   align-items: center;
 }
 .sd-toolbar-expand-icon {

package/es/toolbar/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';
@@ -21,3 +22,47 @@ $toolbar-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-ne
 $toolbar-border-width: global.$border-1;
 
 $toolbar-border-style: global.$border-solid;
+
+// @generated runtime tokens — pnpm theme:generate
+$toolbar-gap: theme-runtime.token('toolbar', 'toolbar-gap', $toolbar-gap, 'spacing-6');
+$toolbar-body-gap: theme-runtime.token(
+  'toolbar',
+  'toolbar-body-gap',
+  $toolbar-body-gap,
+  'spacing-4'
+);
+$toolbar-actions-gap: theme-runtime.token(
+  'toolbar',
+  'toolbar-actions-gap',
+  $toolbar-actions-gap,
+  'spacing-4'
+);
+$toolbar-expand-gap: theme-runtime.token(
+  'toolbar',
+  'toolbar-expand-gap',
+  $toolbar-expand-gap,
+  'spacing-2'
+);
+$toolbar-padding-bottom: theme-runtime.token(
+  'toolbar',
+  'toolbar-padding-bottom',
+  $toolbar-padding-bottom,
+  'spacing-4'
+);
+$toolbar-color-border: theme-runtime.token(
+  'toolbar',
+  'toolbar-color-border',
+  $toolbar-color-border
+);
+$toolbar-border-width: theme-runtime.token(
+  'toolbar',
+  'toolbar-border-width',
+  $toolbar-border-width,
+  'border-1'
+);
+$toolbar-border-style: theme-runtime.token(
+  'toolbar',
+  'toolbar-border-style',
+  $toolbar-border-style,
+  'border-solid'
+);

package/es/tooltip/style/index.css

@@ -20,19 +20,19 @@
 }
 .sd-tooltip-content {
   max-width: 350px;
-  padding: 8px 12px;
-  color: #fff;
-  font-size: 14px;
+  padding: var(--component-tooltip-tooltip-padding-vertical, var(--component-tooltip-padding-vertical, var(--spacing-4, 8px))) var(--component-tooltip-tooltip-padding-horizontal, var(--component-tooltip-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-tooltip-tooltip-color-text, var(--component-tooltip-color-text, #fff));
+  font-size: var(--component-tooltip-tooltip-font-size, var(--component-tooltip-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
   text-align: left;
   overflow-wrap: break-word;
-  background-color: var(--sd-color-tooltip-bg);
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-tooltip-tooltip-color-bg, var(--component-tooltip-color-bg, var(--sd-color-tooltip-bg)));
+  border-radius: var(--component-tooltip-tooltip-border-radius, var(--component-tooltip-border-radius, var(--sd-border-radius-small)));
 }
 .sd-tooltip-mini {
-  padding: 4px 12px;
-  font-size: 14px;
+  padding: var(--component-tooltip-tooltip-mini-padding-vertical, var(--component-tooltip-mini-padding-vertical, var(--spacing-2, 4px))) var(--component-tooltip-tooltip-mini-padding-horizontal, var(--component-tooltip-mini-padding-horizontal, var(--spacing-6, 12px)));
+  font-size: var(--component-tooltip-tooltip-mini-font-size, var(--component-tooltip-mini-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-tooltip-popup-arrow {
-  background-color: var(--sd-color-tooltip-bg);
+  background-color: var(--component-tooltip-tooltip-color-bg, var(--component-tooltip-color-bg, var(--sd-color-tooltip-bg)));
 }