@sdata/web-vue 4.7.1 → 5.0.0

package/es/result/style/index.css

@@ -18,69 +18,69 @@
 .sd-result {
   box-sizing: border-box;
   width: 100%;
-  padding: 32px 32px 24px;
+  padding: var(--component-result-result-padding-top-icon, var(--component-result-padding-top-icon, var(--spacing-10, 32px))) var(--component-result-result-padding-horizontal, var(--component-result-padding-horizontal, var(--spacing-10, 32px))) var(--component-result-result-padding-bottom, var(--component-result-padding-bottom, var(--spacing-9, 24px)));
 }
 .sd-result-icon {
-  margin-bottom: 16px;
-  font-size: 20px;
+  margin-bottom: var(--component-result-result-margin-icon-bottom, var(--component-result-margin-icon-bottom, var(--spacing-7, 16px)));
+  font-size: var(--component-result-result-size-icon, var(--component-result-size-icon, var(--size-5, 20px)));
   text-align: center;
 }
 .sd-result-icon-tip {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 45px;
-  height: 45px;
+  width: var(--component-result-result-size-icon-wrapper, var(--component-result-size-icon-wrapper, 45px));
+  height: var(--component-result-result-size-icon-wrapper, var(--component-result-size-icon-wrapper, 45px));
   margin: 0 auto;
   border-radius: 50%;
 }
 .sd-result-icon-custom .sd-result-icon-tip {
   width: unset;
   height: unset;
-  color: inherit;
-  font-size: 45px;
+  color: var(--component-result-result-color-icon-default, var(--component-result-color-icon-default, inherit));
+  font-size: var(--component-result-result-size-icon-custom, var(--component-result-size-icon-custom, 45px));
 }
 .sd-result-icon-success .sd-result-icon-tip {
-  color: rgb(var(--sd-success-6));
-  background-color: var(--sd-color-success-light-1);
+  color: var(--component-result-result-color-icon-success, var(--component-result-color-icon-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
+  background-color: var(--component-result-result-color-icon-bg-success, var(--component-result-color-icon-bg-success, var(--sd-color-success-light-1)));
 }
 .sd-result-icon-error .sd-result-icon-tip {
-  color: rgb(var(--sd-danger-6));
-  background-color: var(--sd-color-danger-light-1);
+  color: var(--component-result-result-color-icon-error, var(--component-result-color-icon-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  background-color: var(--component-result-result-color-icon-bg-error, var(--component-result-color-icon-bg-error, var(--sd-color-danger-light-1)));
 }
 .sd-result-icon-info .sd-result-icon-tip {
-  color: rgb(var(--sd-primary-6));
-  background-color: var(--sd-color-primary-light-1);
+  color: var(--component-result-result-color-icon-info, var(--component-result-color-icon-info, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  background-color: var(--component-result-result-color-icon-bg-info, var(--component-result-color-icon-bg-info, var(--sd-color-primary-light-1)));
 }
 .sd-result-icon-warning .sd-result-icon-tip {
-  color: rgb(var(--sd-warning-6));
-  background-color: var(--sd-color-warning-light-1);
+  color: var(--component-result-result-color-icon-warning, var(--component-result-color-icon-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
+  background-color: var(--component-result-result-color-icon-bg-warning, var(--component-result-color-icon-bg-warning, var(--sd-color-warning-light-1)));
 }
 .sd-result-icon-404, .sd-result-icon-403, .sd-result-icon-500 {
-  padding-top: 24px;
+  padding-top: var(--component-result-result-padding-top, var(--component-result-padding-top, var(--spacing-9, 24px)));
 }
 .sd-result-icon-404 .sd-result-icon-tip, .sd-result-icon-403 .sd-result-icon-tip, .sd-result-icon-500 .sd-result-icon-tip {
-  width: 92px;
-  height: 92px;
-  line-height: 92px;
+  width: var(--component-result-result-size-image-width, var(--component-result-size-image-width, var(--size-23, 92px)));
+  height: var(--component-result-result-size-image-width, var(--component-result-size-image-width, var(--size-23, 92px)));
+  line-height: var(--component-result-result-size-image-width, var(--component-result-size-image-width, var(--size-23, 92px)));
 }
 .sd-result-title {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  font-size: 14px;
+  color: var(--component-result-result-color-title-text, var(--component-result-color-title-text, var(--sd-color-text-1)));
+  font-weight: var(--component-result-result-font-title-weight, var(--component-result-font-title-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-result-result-font-title-size, var(--component-result-font-title-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
   text-align: center;
 }
 .sd-result-subtitle {
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  color: var(--component-result-result-color-subtitle-text, var(--component-result-color-subtitle-text, var(--sd-color-text-2)));
+  font-size: var(--component-result-result-font-subtitle-size, var(--component-result-font-subtitle-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
   text-align: center;
 }
 .sd-result-extra {
-  margin-top: 20px;
+  margin-top: var(--component-result-result-margin-extra-top, var(--component-result-margin-extra-top, var(--spacing-8, 20px)));
   text-align: center;
 }
 .sd-result-content {
-  margin-top: 20px;
+  margin-top: var(--component-result-result-margin-content-top, var(--component-result-margin-content-top, var(--spacing-8, 20px)));
 }

package/es/result/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';
@@ -63,3 +64,141 @@ $result-color-icon-bg_info: var(
 $result-size-icon_custom: 45px;
 
 $result-color-icon_default: inherit;
+
+// @generated runtime tokens — pnpm theme:generate
+$result-padding-top: theme-runtime.token(
+  'result',
+  'result-padding-top',
+  $result-padding-top,
+  'spacing-9'
+);
+$result-padding-top_icon: theme-runtime.token(
+  'result',
+  'result-padding-top-icon',
+  $result-padding-top_icon,
+  'spacing-10'
+);
+$result-padding-bottom: theme-runtime.token(
+  'result',
+  'result-padding-bottom',
+  $result-padding-bottom,
+  'spacing-9'
+);
+$result-padding-horizontal: theme-runtime.token(
+  'result',
+  'result-padding-horizontal',
+  $result-padding-horizontal,
+  'spacing-10'
+);
+$result-margin-icon-bottom: theme-runtime.token(
+  'result',
+  'result-margin-icon-bottom',
+  $result-margin-icon-bottom,
+  'spacing-7'
+);
+$result-margin-extra-top: theme-runtime.token(
+  'result',
+  'result-margin-extra-top',
+  $result-margin-extra-top,
+  'spacing-8'
+);
+$result-margin-content-top: theme-runtime.token(
+  'result',
+  'result-margin-content-top',
+  $result-margin-content-top,
+  'spacing-8'
+);
+$result-font-title-size: theme-runtime.token(
+  'result',
+  'result-font-title-size',
+  $result-font-title-size,
+  'font-size-body-3'
+);
+$result-font-title-weight: theme-runtime.token(
+  'result',
+  'result-font-title-weight',
+  $result-font-title-weight,
+  'font-weight-500'
+);
+$result-font-subtitle-size: theme-runtime.token(
+  'result',
+  'result-font-subtitle-size',
+  $result-font-subtitle-size,
+  'font-size-body-3'
+);
+$result-color-title-text: theme-runtime.token(
+  'result',
+  'result-color-title-text',
+  $result-color-title-text
+);
+$result-color-subtitle-text: theme-runtime.token(
+  'result',
+  'result-color-subtitle-text',
+  $result-color-subtitle-text
+);
+$result-size-icon: theme-runtime.token('result', 'result-size-icon', $result-size-icon, 'size-5');
+$result-size-icon-wrapper: theme-runtime.token(
+  'result',
+  'result-size-icon-wrapper',
+  $result-size-icon-wrapper
+);
+$result-size-image-width: theme-runtime.token(
+  'result',
+  'result-size-image-width',
+  $result-size-image-width,
+  'size-23'
+);
+$result-color-icon_success: theme-runtime.token(
+  'result',
+  'result-color-icon-success',
+  $result-color-icon_success,
+  'color-success-6'
+);
+$result-color-icon-bg_success: theme-runtime.token(
+  'result',
+  'result-color-icon-bg-success',
+  $result-color-icon-bg_success
+);
+$result-color-icon_error: theme-runtime.token(
+  'result',
+  'result-color-icon-error',
+  $result-color-icon_error,
+  'color-danger-6'
+);
+$result-color-icon-bg_error: theme-runtime.token(
+  'result',
+  'result-color-icon-bg-error',
+  $result-color-icon-bg_error
+);
+$result-color-icon_warning: theme-runtime.token(
+  'result',
+  'result-color-icon-warning',
+  $result-color-icon_warning,
+  'color-warning-6'
+);
+$result-color-icon-bg_warning: theme-runtime.token(
+  'result',
+  'result-color-icon-bg-warning',
+  $result-color-icon-bg_warning
+);
+$result-color-icon_info: theme-runtime.token(
+  'result',
+  'result-color-icon-info',
+  $result-color-icon_info,
+  'color-primary-6'
+);
+$result-color-icon-bg_info: theme-runtime.token(
+  'result',
+  'result-color-icon-bg-info',
+  $result-color-icon-bg_info
+);
+$result-size-icon_custom: theme-runtime.token(
+  'result',
+  'result-size-icon-custom',
+  $result-size-icon_custom
+);
+$result-color-icon_default: theme-runtime.token(
+  'result',
+  'result-color-icon-default',
+  $result-color-icon_default
+);

package/es/rich-text-editor/style/index.css

@@ -19,45 +19,45 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  color: var(--sd-color-neutral-10);
-  font-size: 14px;
-  line-height: 1.5715;
-  background: var(--sd-color-bg-2);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
-  transition: border-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  color: var(--component-rich-text-editor-rich-text-editor-color-text, var(--component-rich-text-editor-color-text, var(--color-text-1, var(--sd-color-text-1, var(--sd-color-neutral-10)))));
+  font-size: var(--component-rich-text-editor-rich-text-editor-font-size, var(--component-rich-text-editor-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-rich-text-editor-rich-text-editor-line-height, var(--component-rich-text-editor-line-height, 1.5715));
+  background: var(--component-rich-text-editor-rich-text-editor-color-background, var(--component-rich-text-editor-color-background, var(--sd-color-bg-2)));
+  border: 1px solid var(--component-rich-text-editor-rich-text-editor-color-border, var(--component-rich-text-editor-color-border, var(--color-border-2, var(--sd-color-border-2, var(--sd-color-neutral-3)))));
+  border-radius: var(--component-rich-text-editor-rich-text-editor-border-radius, var(--component-rich-text-editor-border-radius, var(--sd-border-radius-medium)));
+  transition: border-color var(--component-rich-text-editor-rich-text-editor-motion-duration, var(--component-rich-text-editor-motion-duration, 0.2s)) var(--component-rich-text-editor-rich-text-editor-motion-easing, var(--component-rich-text-editor-motion-easing, cubic-bezier(0.34, 0.69, 0.1, 1))), box-shadow var(--component-rich-text-editor-rich-text-editor-motion-duration, var(--component-rich-text-editor-motion-duration, 0.2s)) var(--component-rich-text-editor-rich-text-editor-motion-easing, var(--component-rich-text-editor-motion-easing, cubic-bezier(0.34, 0.69, 0.1, 1)));
 }
 .sd-rich-text-editor-focusable:hover {
-  border-color: rgb(var(--sd-primary-5));
+  border-color: var(--component-rich-text-editor-rich-text-editor-color-border-hover, var(--component-rich-text-editor-color-border-hover, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
 }
 .sd-rich-text-editor:focus-within {
-  border-color: rgb(var(--sd-primary-6));
-  box-shadow: 0 0 0 2px color-mix(in srgb, rgb(var(--sd-primary-6)) 15%, transparent);
+  border-color: var(--component-rich-text-editor-rich-text-editor-color-border-focus, var(--component-rich-text-editor-color-border-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  box-shadow: var(--component-rich-text-editor-rich-text-editor-focus-shadow, var(--component-rich-text-editor-focus-shadow, 0 0 0 2px color-mix(in srgb, rgb(var(--sd-primary-6)) 15%, transparent)));
 }
 .sd-rich-text-editor-content {
   box-sizing: border-box;
   width: 100%;
-  min-height: calc(14px * 1.5715 + 24px);
+  min-height: calc(var(--component-rich-text-editor-rich-text-editor-font-size, var(--component-rich-text-editor-font-size, var(--font-size-body-3, 14px))) * var(--component-rich-text-editor-rich-text-editor-line-height, var(--component-rich-text-editor-line-height, 1.5715)) + 24px);
   padding-block: 12px;
   padding-inline: 16px;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   outline: none;
-  caret-color: rgb(var(--sd-primary-6));
+  caret-color: var(--component-rich-text-editor-rich-text-editor-color-border-focus, var(--component-rich-text-editor-color-border-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-rich-text-editor-placeholder {
   position: absolute;
   inset-block-start: 12px;
   inset-inline-start: 16px;
   overflow: hidden;
-  color: var(--sd-color-neutral-4);
+  color: var(--component-rich-text-editor-rich-text-editor-color-placeholder, var(--component-rich-text-editor-color-placeholder, var(--color-text-4, var(--sd-color-text-4, var(--sd-color-neutral-4)))));
   white-space: nowrap;
   text-overflow: ellipsis;
   pointer-events: none;
 }
 .sd-rich-text-editor-disabled {
-  color: var(--sd-color-neutral-4);
-  background: var(--sd-color-neutral-2);
+  color: var(--component-rich-text-editor-rich-text-editor-color-text-disabled, var(--component-rich-text-editor-color-text-disabled, var(--color-text-4, var(--sd-color-text-4, var(--sd-color-neutral-4)))));
+  background: var(--component-rich-text-editor-rich-text-editor-color-background-disabled, var(--component-rich-text-editor-color-background-disabled, var(--color-fill-2, var(--sd-color-fill-2, var(--sd-color-neutral-2)))));
   cursor: not-allowed;
 }
 .sd-rich-text-editor-readonly {
@@ -83,7 +83,7 @@
   list-style: none;
 }
 .sd-rich-text-editor-link {
-  color: rgb(var(--sd-link-6));
+  color: var(--component-rich-text-editor-rich-text-editor-color-link, var(--component-rich-text-editor-color-link, var(--color-link-6, var(--sd-color-link-6, rgb(var(--sd-link-6))))));
   text-decoration: underline;
 }
 .sd-rich-text-editor-code {
@@ -92,8 +92,8 @@
   overflow-x: auto;
   font-family: consolas, menlo;
   white-space: pre;
-  background: var(--sd-color-neutral-2);
-  border-radius: var(--sd-border-radius-medium);
+  background: var(--component-rich-text-editor-rich-text-editor-color-code-background, var(--component-rich-text-editor-color-code-background, var(--color-fill-2, var(--sd-color-fill-2, var(--sd-color-neutral-2)))));
+  border-radius: var(--component-rich-text-editor-rich-text-editor-border-radius, var(--component-rich-text-editor-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-rich-text-editor-text-bold {
   font-weight: 600;
@@ -108,26 +108,26 @@
   text-decoration: line-through;
 }
 .sd-rich-text-editor-text-code {
-  padding-inline: 4px;
+  padding-inline: var(--component-rich-text-editor-rich-text-editor-code-padding, var(--component-rich-text-editor-code-padding, var(--spacing-2, 4px)));
   font-family: consolas, menlo;
-  background: var(--sd-color-neutral-2);
-  border-radius: var(--sd-border-radius-medium);
+  background: var(--component-rich-text-editor-rich-text-editor-color-code-background, var(--component-rich-text-editor-color-code-background, var(--color-fill-2, var(--sd-color-fill-2, var(--sd-color-neutral-2)))));
+  border-radius: var(--component-rich-text-editor-rich-text-editor-border-radius, var(--component-rich-text-editor-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-rich-text-editor-component {
   display: inline-flex;
-  gap: 4px;
+  gap: var(--component-rich-text-editor-rich-text-editor-component-gap, var(--component-rich-text-editor-component-gap, var(--spacing-2, 4px)));
   align-items: center;
-  margin-inline: 4px;
+  margin-inline: var(--component-rich-text-editor-rich-text-editor-component-gap, var(--component-rich-text-editor-component-gap, var(--spacing-2, 4px)));
   vertical-align: middle;
 }
 .sd-rich-text-editor-component-selected {
-  border-radius: var(--sd-border-radius-medium);
-  outline: 2px solid rgb(var(--sd-primary-6));
+  border-radius: var(--component-rich-text-editor-rich-text-editor-border-radius, var(--component-rich-text-editor-border-radius, var(--sd-border-radius-medium)));
+  outline: 2px solid var(--component-rich-text-editor-rich-text-editor-color-border-focus, var(--component-rich-text-editor-color-border-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   outline-offset: 1px;
 }
 .sd-rich-text-editor-component-input > .sd-input-wrapper, .sd-rich-text-editor-component-select > .sd-select-view {
   display: inline-flex;
-  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 6%, transparent);
+  background: var(--component-rich-text-editor-rich-text-editor-color-component-background, var(--component-rich-text-editor-color-component-background, color-mix(in srgb, rgb(var(--sd-primary-6)) 6%, transparent)));
 }
 .sd-rich-text-editor-component-control {
   max-width: 100%;
@@ -135,7 +135,7 @@
 }
 .sd-rich-text-editor-component-stretch {
   display: inline-flex;
-  width: 12em;
+  width: var(--component-rich-text-editor-rich-text-editor-component-inline-width, var(--component-rich-text-editor-component-inline-width, 12em));
   max-width: none;
 }
 .sd-rich-text-editor-component-stretch > * {
@@ -143,7 +143,7 @@
   width: 100%;
 }
 .sd-rich-text-editor-component-rangePicker {
-  width: 22em;
+  width: var(--component-rich-text-editor-rich-text-editor-component-range-width, var(--component-rich-text-editor-component-range-width, 22em));
 }
 .sd-rich-text-editor-component-tag {
   margin: 0;
@@ -152,9 +152,9 @@
   display: inline-flex;
   align-items: center;
   min-height: 1.5em;
-  padding-inline: 4px;
-  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 6%, transparent);
-  border-radius: var(--sd-border-radius-medium);
+  padding-inline: var(--component-rich-text-editor-rich-text-editor-code-padding, var(--component-rich-text-editor-code-padding, var(--spacing-2, 4px)));
+  background: var(--component-rich-text-editor-rich-text-editor-color-component-background, var(--component-rich-text-editor-color-component-background, color-mix(in srgb, rgb(var(--sd-primary-6)) 6%, transparent)));
+  border-radius: var(--component-rich-text-editor-rich-text-editor-border-radius, var(--component-rich-text-editor-border-radius, var(--sd-border-radius-medium)));
 }
 
 @media (prefers-reduced-motion: reduce) {

package/es/rich-text-editor/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';
 
@@ -35,3 +36,122 @@ $rich-text-editor-focus-shadow: 0 0 0 2px
   color-mix(in srgb, #{global.$color-primary-6} 15%, transparent);
 $rich-text-editor-motion-duration: global.$transition-duration-2;
 $rich-text-editor-motion-easing: global.$transition-timing-function-standard;
+
+// @generated runtime tokens — pnpm theme:generate
+$rich-text-editor-font-size: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-font-size',
+  $rich-text-editor-font-size,
+  'font-size-body-3'
+);
+$rich-text-editor-line-height: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-line-height',
+  $rich-text-editor-line-height
+);
+$rich-text-editor-border-radius: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-border-radius',
+  $rich-text-editor-border-radius
+);
+$rich-text-editor-component-gap: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-component-gap',
+  $rich-text-editor-component-gap,
+  'spacing-2'
+);
+$rich-text-editor-component-inline-width: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-component-inline-width',
+  $rich-text-editor-component-inline-width
+);
+$rich-text-editor-component-range-width: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-component-range-width',
+  $rich-text-editor-component-range-width
+);
+$rich-text-editor-code-padding: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-code-padding',
+  $rich-text-editor-code-padding,
+  'spacing-2'
+);
+$rich-text-editor-color-text: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-text',
+  $rich-text-editor-color-text,
+  'color-text-1'
+);
+$rich-text-editor-color-text-disabled: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-text-disabled',
+  $rich-text-editor-color-text-disabled,
+  'color-text-4'
+);
+$rich-text-editor-color-placeholder: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-placeholder',
+  $rich-text-editor-color-placeholder,
+  'color-text-4'
+);
+$rich-text-editor-color-background: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-background',
+  $rich-text-editor-color-background
+);
+$rich-text-editor-color-background-disabled: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-background-disabled',
+  $rich-text-editor-color-background-disabled,
+  'color-fill-2'
+);
+$rich-text-editor-color-border: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-border',
+  $rich-text-editor-color-border,
+  'color-border-2'
+);
+$rich-text-editor-color-border-hover: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-border-hover',
+  $rich-text-editor-color-border-hover,
+  'color-primary-5'
+);
+$rich-text-editor-color-border-focus: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-border-focus',
+  $rich-text-editor-color-border-focus,
+  'color-primary-6'
+);
+$rich-text-editor-color-link: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-link',
+  $rich-text-editor-color-link,
+  'color-link-6'
+);
+$rich-text-editor-color-code-background: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-code-background',
+  $rich-text-editor-color-code-background,
+  'color-fill-2'
+);
+$rich-text-editor-color-component-background: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-color-component-background',
+  $rich-text-editor-color-component-background
+);
+$rich-text-editor-focus-shadow: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-focus-shadow',
+  $rich-text-editor-focus-shadow
+);
+$rich-text-editor-motion-duration: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-motion-duration',
+  $rich-text-editor-motion-duration
+);
+$rich-text-editor-motion-easing: theme-runtime.token(
+  'rich-text-editor',
+  'rich-text-editor-motion-easing',
+  $rich-text-editor-motion-easing
+);

package/es/scrollbar/style/index.css

@@ -698,15 +698,15 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --os-size: var(--sd-scrollbar-size, 6px);
   --os-handle-bg: var(
     --sd-scrollbar-thumb-color,
-    var(--sd-color-neutral-4)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color, var(--component-scrollbar-thumb-bar-bg-color, var(--sd-color-neutral-4)))
   );
   --os-handle-bg-hover: var(
     --sd-scrollbar-thumb-color-hover,
-    var(--sd-color-neutral-5)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color-hover, var(--component-scrollbar-thumb-bar-bg-color-hover, var(--sd-color-neutral-5)))
   );
   --os-handle-bg-active: var(
     --sd-scrollbar-thumb-color-active,
-    var(--sd-color-neutral-6)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color-active, var(--component-scrollbar-thumb-bar-bg-color-active, var(--sd-color-neutral-6)))
   );
   --os-track-bg: transparent;
   --os-track-bg-hover: transparent;
@@ -715,7 +715,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --os-padding-perpendicular: 0;
   --os-handle-border-radius: var(
     --sd-scrollbar-thumb-radius,
-    6px
+    var(--component-scrollbar-scrollbar-thumb-bar-border-radius, var(--component-scrollbar-thumb-bar-border-radius, 6px))
   );
 }
 .sd-scrollbar .os-scrollbar-handle {
@@ -738,10 +738,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 .sd-scrollbar .sd-scrollbar-theme-track {
   --os-size: 6px;
-  --os-track-bg: var(--sd-color-neutral-1);
-  --os-track-bg-hover: var(--sd-color-neutral-1);
-  --os-track-bg-active: var(--sd-color-neutral-1);
-  --os-track-border: 1px solid var(--sd-color-neutral-3);
+  --os-track-bg: var(--component-scrollbar-scrollbar-track-bg-color, var(--component-scrollbar-track-bg-color, var(--sd-color-neutral-1)));
+  --os-track-bg-hover: var(--component-scrollbar-scrollbar-track-bg-color, var(--component-scrollbar-track-bg-color, var(--sd-color-neutral-1)));
+  --os-track-bg-active: var(--component-scrollbar-scrollbar-track-bg-color, var(--component-scrollbar-track-bg-color, var(--sd-color-neutral-1)));
+  --os-track-border: 1px solid var(--component-scrollbar-scrollbar-track-border-color, var(--component-scrollbar-track-border-color, var(--sd-color-neutral-3)));
   --os-handle-perpendicular-size: var(
     --sd-scrollbar-size,
     6px
@@ -751,28 +751,28 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-theme-embed {
   --os-handle-bg: var(
     --sd-scrollbar-thumb-color,
-    var(--sd-color-neutral-4)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color, var(--component-scrollbar-thumb-bar-bg-color, var(--sd-color-neutral-4)))
   );
   --os-handle-bg-hover: var(
     --sd-scrollbar-thumb-color-hover,
-    var(--sd-color-neutral-5)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color-hover, var(--component-scrollbar-thumb-bar-bg-color-hover, var(--sd-color-neutral-5)))
   );
   --os-handle-bg-active: var(
     --sd-scrollbar-thumb-color-active,
-    var(--sd-color-neutral-6)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color-active, var(--component-scrollbar-thumb-bar-bg-color-active, var(--sd-color-neutral-6)))
   );
 }
 .sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-theme-track {
   --os-handle-bg: var(
     --sd-scrollbar-thumb-color,
-    var(--sd-color-neutral-4)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color, var(--component-scrollbar-thumb-bar-bg-color, var(--sd-color-neutral-4)))
   );
   --os-handle-bg-hover: var(
     --sd-scrollbar-thumb-color-hover,
-    var(--sd-color-neutral-5)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color-hover, var(--component-scrollbar-thumb-bar-bg-color-hover, var(--sd-color-neutral-5)))
   );
   --os-handle-bg-active: var(
     --sd-scrollbar-thumb-color-active,
-    var(--sd-color-neutral-6)
+    var(--component-scrollbar-scrollbar-thumb-bar-bg-color-active, var(--component-scrollbar-thumb-bar-bg-color-active, var(--sd-color-neutral-6)))
   );
 }

package/es/scrollbar/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';
@@ -27,3 +28,35 @@ $scrollbar-thumb-bar-bg_color_hover: var(
 $scrollbar-thumb-bar-bg_color_active: var(
   string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-6')
 );
+
+// @generated runtime tokens — pnpm theme:generate
+$scrollbar-track-border_color: theme-runtime.token(
+  'scrollbar',
+  'scrollbar-track-border-color',
+  $scrollbar-track-border_color
+);
+$scrollbar-track-bg_color: theme-runtime.token(
+  'scrollbar',
+  'scrollbar-track-bg-color',
+  $scrollbar-track-bg_color
+);
+$scrollbar-thumb-bar-border_radius: theme-runtime.token(
+  'scrollbar',
+  'scrollbar-thumb-bar-border-radius',
+  $scrollbar-thumb-bar-border_radius
+);
+$scrollbar-thumb-bar-bg_color: theme-runtime.token(
+  'scrollbar',
+  'scrollbar-thumb-bar-bg-color',
+  $scrollbar-thumb-bar-bg_color
+);
+$scrollbar-thumb-bar-bg_color_hover: theme-runtime.token(
+  'scrollbar',
+  'scrollbar-thumb-bar-bg-color-hover',
+  $scrollbar-thumb-bar-bg_color_hover
+);
+$scrollbar-thumb-bar-bg_color_active: theme-runtime.token(
+  'scrollbar',
+  'scrollbar-thumb-bar-bg-color-active',
+  $scrollbar-thumb-bar-bg_color_active
+);

package/es/secret/style/index.css

@@ -17,7 +17,7 @@
 /********* icon hover *********/
 .sd-secret {
   display: inline-flex;
-  gap: 6px;
+  gap: var(--component-secret-secret-gap, var(--component-secret-gap, var(--spacing-3, 6px)));
   align-items: center;
   min-width: 0;
   max-width: 100%;
@@ -30,7 +30,7 @@
 }
 .sd-secret-placeholder {
   overflow: hidden;
-  color: var(--sd-color-text-3);
+  color: var(--component-secret-secret-placeholder-color-text, var(--component-secret-placeholder-color-text, var(--sd-color-text-3)));
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -40,15 +40,15 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  color: var(--sd-color-text-3);
+  color: var(--component-secret-secret-trigger-color-text, var(--component-secret-trigger-color-text, var(--sd-color-text-3)));
   background: transparent;
   border: 0;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-secret-secret-trigger-border-radius, var(--component-secret-trigger-border-radius, var(--sd-border-radius-small)));
   cursor: pointer;
 }
 .sd-secret-trigger .sd-icon {
-  font-size: 16px;
+  font-size: var(--component-secret-secret-trigger-size-icon, var(--component-secret-trigger-size-icon, var(--size-4, 16px)));
 }
 .sd-secret-trigger:hover {
-  color: var(--sd-color-text-1);
+  color: var(--component-secret-secret-trigger-color-text-hover, var(--component-secret-trigger-color-text-hover, var(--sd-color-text-1)));
 }