@sdata/web-vue 4.7.1 → 5.0.0

package/es/card/style/index.css

@@ -17,8 +17,8 @@
 /********* icon hover *********/
 .sd-card {
   position: relative;
-  background: var(--sd-color-bg-2);
-  border-radius: var(--sd-border-radius-none);
+  background: var(--component-card-card-color-bg, var(--component-card-color-bg, var(--sd-color-bg-2)));
+  border-radius: var(--component-card-card-border-radius-no-border, var(--component-card-border-radius-no-border, var(--sd-border-radius-none)));
   transition: box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-card-header {
@@ -28,7 +28,7 @@
   justify-content: space-between;
   box-sizing: border-box;
   overflow: hidden;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: var(--component-card-card-border-width-title-bottom, var(--component-card-border-width-title-bottom, var(--border-1, 1px))) solid var(--component-card-card-color-border, var(--component-card-color-border, var(--sd-color-neutral-3)));
 }
 .sd-card-header-no-title::before {
   display: block;
@@ -36,21 +36,21 @@
 }
 .sd-card-header-title {
   flex: 1;
-  color: var(--sd-color-text-1);
-  font-weight: 500;
+  color: var(--component-card-card-color-title, var(--component-card-color-title, var(--sd-color-text-1)));
+  font-weight: var(--component-card-card-font-weight-title, var(--component-card-font-weight-title, var(--font-weight-500, 500)));
   line-height: 1.5715;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .sd-card-header-extra {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-card-card-color-title-extra, var(--component-card-color-title-extra, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .sd-card-body {
-  color: var(--sd-color-text-2);
+  color: var(--component-card-card-color-body, var(--component-card-color-body, var(--sd-color-text-2)));
 }
 .sd-card-cover {
   overflow: hidden;
@@ -63,7 +63,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 20px;
+  margin-top: var(--component-card-card-margin-top-meta-footer, var(--component-card-margin-top-meta-footer, var(--spacing-8, 20px)));
 }
 .sd-card-actions::before {
   visibility: hidden;
@@ -77,7 +77,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--sd-color-text-2);
+  color: var(--component-card-card-color-action, var(--component-card-color-action, var(--sd-color-text-2)));
   cursor: pointer;
   transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   overflow: hidden;
@@ -85,10 +85,10 @@
   text-overflow: ellipsis;
 }
 .sd-card-actions-item:hover {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-card-card-color-action-hover, var(--component-card-color-action-hover, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-card-actions-item:not(:last-child) {
-  margin-right: 12px;
+  margin-right: var(--component-card-card-margin-right-action-item, var(--component-card-margin-right-action-item, var(--spacing-6, 12px)));
 }
 .sd-card-meta-footer {
   display: flex;
@@ -96,7 +96,7 @@
   justify-content: space-between;
 }
 .sd-card-meta-footer:last-child {
-  margin-top: 20px;
+  margin-top: var(--component-card-card-margin-top-meta-footer, var(--component-card-margin-top-meta-footer, var(--spacing-8, 20px)));
 }
 .sd-card-meta-footer-only-actions::before {
   visibility: hidden;
@@ -106,20 +106,20 @@
   margin-top: 0;
 }
 .sd-card-meta-title {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
+  color: var(--component-card-card-color-title, var(--component-card-color-title, var(--sd-color-text-1)));
+  font-weight: var(--component-card-card-font-weight-title, var(--component-card-font-weight-title, var(--font-weight-500, 500)));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .sd-card-meta-description:not(:first-child) {
-  margin-top: 4px;
+  margin-top: var(--component-card-card-margin-top-meta-description, var(--component-card-margin-top-meta-description, var(--spacing-2, 4px)));
 }
 .sd-card-grid {
   position: relative;
   box-sizing: border-box;
   width: 33.33%;
-  box-shadow: 1px 0 0 0 var(--sd-color-neutral-3), 0 1px 0 0 var(--sd-color-neutral-3), 1px 1px 0 0 var(--sd-color-neutral-3), 1px 0 0 0 var(--sd-color-neutral-3) inset, 0 1px 0 0 var(--sd-color-neutral-3) inset;
+  box-shadow: 1px 0 0 0 var(--component-card-card-color-border, var(--component-card-color-border, var(--sd-color-neutral-3))), 0 1px 0 0 var(--component-card-card-color-border, var(--component-card-color-border, var(--sd-color-neutral-3))), 1px 1px 0 0 var(--component-card-card-color-border, var(--component-card-color-border, var(--sd-color-neutral-3))), 1px 0 0 0 var(--component-card-card-color-border, var(--component-card-color-border, var(--sd-color-neutral-3))) inset, 0 1px 0 0 var(--component-card-card-color-border, var(--component-card-color-border, var(--sd-color-neutral-3))) inset;
 }
 .sd-card-grid::before {
   position: absolute;
@@ -132,7 +132,7 @@
   z-index: 1;
 }
 .sd-card-grid-hoverable:hover::before {
-  box-shadow: 0 1px 2px rgb(var(--sd-gray-2)), 0 4px 10px rgb(var(--sd-gray-2));
+  box-shadow: 0 1px 2px var(--component-card-card-color-box-shadow, var(--component-card-color-box-shadow, rgb(var(--sd-gray-2)))), 0 4px 10px var(--component-card-card-color-box-shadow, var(--component-card-color-box-shadow, rgb(var(--sd-gray-2))));
 }
 .sd-card-grid .sd-card {
   background: none;
@@ -145,52 +145,52 @@
   padding: 0;
 }
 .sd-card-hoverable:hover {
-  box-shadow: 0 1px 2px rgb(var(--sd-gray-2)), 0 4px 10px rgb(var(--sd-gray-2));
+  box-shadow: 0 1px 2px var(--component-card-card-color-box-shadow, var(--component-card-color-box-shadow, rgb(var(--sd-gray-2)))), 0 4px 10px var(--component-card-card-color-box-shadow, var(--component-card-color-box-shadow, rgb(var(--sd-gray-2))));
 }
 .sd-card-bordered {
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-small);
+  border: 1px solid var(--component-card-card-color-border, var(--component-card-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-card-card-border-radius, var(--component-card-border-radius, var(--sd-border-radius-small)));
 }
 .sd-card-bordered .sd-card-cover {
-  border-radius: var(--sd-border-radius-small) var(--sd-border-radius-small) 0 0;
+  border-radius: var(--component-card-card-border-radius, var(--component-card-border-radius, var(--sd-border-radius-small))) var(--component-card-card-border-radius, var(--component-card-border-radius, var(--sd-border-radius-small))) 0 0;
 }
 .sd-card-loading .sd-card-body {
   overflow: hidden;
   text-align: center;
 }
 .sd-card-size-medium {
-  font-size: 14px;
+  font-size: var(--component-card-card-size-default-font-size, var(--component-card-size-default-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-card-size-medium .sd-card-header {
-  height: 46px;
-  padding: 10px 16px;
+  height: var(--component-card-card-size-default-height-title, var(--component-card-size-default-height-title, 46px));
+  padding: var(--component-card-card-size-default-padding-vertical-title, var(--component-card-size-default-padding-vertical-title, var(--spacing-5, 10px))) var(--component-card-card-size-default-padding-horizontal-title, var(--component-card-size-default-padding-horizontal-title, var(--spacing-7, 16px)));
 }
 .sd-card-size-medium .sd-card-header-title,
 .sd-card-size-medium .sd-card-meta-title {
-  font-size: 16px;
+  font-size: var(--component-card-card-size-default-font-size-title, var(--component-card-size-default-font-size-title, var(--font-size-title-1, 16px)));
 }
 .sd-card-size-medium .sd-card-header-extra {
-  font-size: 14px;
+  font-size: var(--component-card-card-size-default-font-size-title-extra, var(--component-card-size-default-font-size-title-extra, var(--font-size-body-3, 14px)));
 }
 .sd-card-size-medium .sd-card-body {
-  padding: 16px 16px;
+  padding: var(--component-card-card-size-default-padding-vertical-body, var(--component-card-size-default-padding-vertical-body, var(--spacing-7, 16px))) var(--component-card-card-size-default-padding-horizontal-body, var(--component-card-size-default-padding-horizontal-body, var(--spacing-7, 16px)));
 }
 .sd-card-size-small {
-  font-size: 14px;
+  font-size: var(--component-card-card-size-small-font-size, var(--component-card-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-card-size-small .sd-card-header {
-  height: 40px;
-  padding: 8px 16px;
+  height: var(--component-card-card-size-small-height-title, var(--component-card-size-small-height-title, var(--size-10, 40px)));
+  padding: var(--component-card-card-size-small-padding-vertical-title, var(--component-card-size-small-padding-vertical-title, var(--spacing-4, 8px))) var(--component-card-card-size-small-padding-horizontal-title, var(--component-card-size-small-padding-horizontal-title, var(--spacing-7, 16px)));
 }
 .sd-card-size-small .sd-card-header-title,
 .sd-card-size-small .sd-card-meta-title {
-  font-size: 16px;
+  font-size: var(--component-card-card-size-small-font-size-title, var(--component-card-size-small-font-size-title, var(--font-size-title-1, 16px)));
 }
 .sd-card-size-small .sd-card-header-extra {
-  font-size: 14px;
+  font-size: var(--component-card-card-size-small-font-size-title-extra, var(--component-card-size-small-font-size-title-extra, var(--font-size-body-3, 14px)));
 }
 .sd-card-size-small .sd-card-body {
-  padding: 12px 16px;
+  padding: var(--component-card-card-size-small-padding-vertical-body, var(--component-card-size-small-padding-vertical-body, var(--spacing-6, 12px))) var(--component-card-card-size-small-padding-horizontal-body, var(--component-card-size-small-padding-horizontal-body, var(--spacing-7, 16px)));
 }
 
 .sd-card-full-height {
@@ -216,7 +216,7 @@
   height: 100%;
 }
 
-:where(body, [sd-theme])[sd-theme=dark] .sd-card-grid-hoverable:hover::before,
-:where(body, [sd-theme])[sd-theme=dark] .sd-card-hoverable:hover {
-  box-shadow: 0 1px 2px rgb(var(--sd-gray-1), 40%), 0 4px 10px rgb(var(--sd-gray-1), 40%);
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-card-grid-hoverable:hover::before,
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-card-hoverable:hover {
+  box-shadow: 0 1px 2px var(--component-card-card-color-box-shadow-dark, var(--component-card-color-box-shadow-dark, rgb(var(--sd-gray-1), 40%))), 0 4px 10px var(--component-card-card-color-box-shadow-dark, var(--component-card-color-box-shadow-dark, rgb(var(--sd-gray-1), 40%)));
 }

package/es/card/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';
@@ -73,3 +74,164 @@ $card-border-width-title-bottom: global.$border-1;
 $card-border-radius: global.$radius-small;
 
 $card-border-radius-no-border: global.$radius-none;
+
+// @generated runtime tokens — pnpm theme:generate
+$card-size-small-height-title: theme-runtime.token(
+  'card',
+  'card-size-small-height-title',
+  $card-size-small-height-title,
+  'size-10'
+);
+$card-size-small-font-size-title: theme-runtime.token(
+  'card',
+  'card-size-small-font-size-title',
+  $card-size-small-font-size-title,
+  'font-size-title-1'
+);
+$card-size-small-font-size-title-extra: theme-runtime.token(
+  'card',
+  'card-size-small-font-size-title-extra',
+  $card-size-small-font-size-title-extra,
+  'font-size-body-3'
+);
+$card-size-small-font-size: theme-runtime.token(
+  'card',
+  'card-size-small-font-size',
+  $card-size-small-font-size,
+  'font-size-body-3'
+);
+$card-size-small-padding-horizontal-title: theme-runtime.token(
+  'card',
+  'card-size-small-padding-horizontal-title',
+  $card-size-small-padding-horizontal-title,
+  'spacing-7'
+);
+$card-size-small-padding-vertical-title: theme-runtime.token(
+  'card',
+  'card-size-small-padding-vertical-title',
+  $card-size-small-padding-vertical-title,
+  'spacing-4'
+);
+$card-size-small-padding-horizontal-body: theme-runtime.token(
+  'card',
+  'card-size-small-padding-horizontal-body',
+  $card-size-small-padding-horizontal-body,
+  'spacing-7'
+);
+$card-size-small-padding-vertical-body: theme-runtime.token(
+  'card',
+  'card-size-small-padding-vertical-body',
+  $card-size-small-padding-vertical-body,
+  'spacing-6'
+);
+$card-size-default-height-title: theme-runtime.token(
+  'card',
+  'card-size-default-height-title',
+  $card-size-default-height-title
+);
+$card-size-default-font-size-title: theme-runtime.token(
+  'card',
+  'card-size-default-font-size-title',
+  $card-size-default-font-size-title,
+  'font-size-title-1'
+);
+$card-size-default-font-size-title-extra: theme-runtime.token(
+  'card',
+  'card-size-default-font-size-title-extra',
+  $card-size-default-font-size-title-extra,
+  'font-size-body-3'
+);
+$card-size-default-font-size: theme-runtime.token(
+  'card',
+  'card-size-default-font-size',
+  $card-size-default-font-size,
+  'font-size-body-3'
+);
+$card-size-default-padding-horizontal-title: theme-runtime.token(
+  'card',
+  'card-size-default-padding-horizontal-title',
+  $card-size-default-padding-horizontal-title,
+  'spacing-7'
+);
+$card-size-default-padding-vertical-title: theme-runtime.token(
+  'card',
+  'card-size-default-padding-vertical-title',
+  $card-size-default-padding-vertical-title,
+  'spacing-5'
+);
+$card-size-default-padding-horizontal-body: theme-runtime.token(
+  'card',
+  'card-size-default-padding-horizontal-body',
+  $card-size-default-padding-horizontal-body,
+  'spacing-7'
+);
+$card-size-default-padding-vertical-body: theme-runtime.token(
+  'card',
+  'card-size-default-padding-vertical-body',
+  $card-size-default-padding-vertical-body,
+  'spacing-7'
+);
+$card-line-height: theme-runtime.token('card', 'card-line-height', $line-height-base);
+$card-font-weight-title: theme-runtime.token(
+  'card',
+  'card-font-weight-title',
+  $card-font-weight-title,
+  'font-weight-500'
+);
+$card-margin-top-meta-footer: theme-runtime.token(
+  'card',
+  'card-margin-top-meta-footer',
+  $card-margin-top-meta-footer,
+  'spacing-8'
+);
+$card-margin-top-meta-description: theme-runtime.token(
+  'card',
+  'card-margin-top-meta-description',
+  $card-margin-top-meta-description,
+  'spacing-2'
+);
+$card-margin-right-action-item: theme-runtime.token(
+  'card',
+  'card-margin-right-action-item',
+  $card-margin-right-action-item,
+  'spacing-6'
+);
+$card-color-bg: theme-runtime.token('card', 'card-color-bg', $card-color-bg);
+$card-color-border: theme-runtime.token('card', 'card-color-border', $card-color-border);
+$card-color-title: theme-runtime.token('card', 'card-color-title', $card-color-title);
+$card-color-title-extra: theme-runtime.token(
+  'card',
+  'card-color-title-extra',
+  $card-color-title-extra,
+  'color-primary-6'
+);
+$card-color-body: theme-runtime.token('card', 'card-color-body', $card-color-body);
+$card-color-action: theme-runtime.token('card', 'card-color-action', $card-color-action);
+$card-color-action_hover: theme-runtime.token(
+  'card',
+  'card-color-action-hover',
+  $card-color-action_hover,
+  'color-primary-6'
+);
+$card-color-box-shadow: theme-runtime.token(
+  'card',
+  'card-color-box-shadow',
+  $card-color-box-shadow
+);
+$card-color-box-shadow_dark: theme-runtime.token(
+  'card',
+  'card-color-box-shadow-dark',
+  $card-color-box-shadow_dark
+);
+$card-border-width-title-bottom: theme-runtime.token(
+  'card',
+  'card-border-width-title-bottom',
+  $card-border-width-title-bottom,
+  'border-1'
+);
+$card-border-radius: theme-runtime.token('card', 'card-border-radius', $card-border-radius);
+$card-border-radius-no-border: theme-runtime.token(
+  'card',
+  'card-border-radius-no-border',
+  $card-border-radius-no-border
+);

package/es/carousel/style/index.css

@@ -272,27 +272,27 @@
   top: 0;
   right: 0;
   left: 0;
-  height: 48px;
+  height: var(--component-carousel-carousel-indicator-size-wrapper, var(--component-carousel-indicator-size-wrapper, var(--size-12, 48px)));
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 87%);
 }
 .sd-carousel-indicator-wrapper-bottom {
   right: 0;
   bottom: 0;
   left: 0;
-  height: 48px;
+  height: var(--component-carousel-carousel-indicator-size-wrapper, var(--component-carousel-indicator-size-wrapper, var(--size-12, 48px)));
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.15) 100%);
 }
 .sd-carousel-indicator-wrapper-left {
   top: 0;
   left: 0;
-  width: 48px;
+  width: var(--component-carousel-carousel-indicator-size-wrapper, var(--component-carousel-indicator-size-wrapper, var(--size-12, 48px)));
   height: 100%;
   background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 87%);
 }
 .sd-carousel-indicator-wrapper-right {
   top: 0;
   right: 0;
-  width: 48px;
+  width: var(--component-carousel-carousel-indicator-size-wrapper, var(--component-carousel-indicator-size-wrapper, var(--size-12, 48px)));
   height: 100%;
   background: linear-gradient(90deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.15) 100%);
 }
@@ -324,8 +324,8 @@
 .sd-carousel-indicator-outer {
   left: 50%;
   padding: 4px;
-  background-color: transparent;
-  border-radius: 20px;
+  background-color: var(--component-carousel-carousel-indicator-outer-color-bg, var(--component-carousel-indicator-outer-color-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-carousel-carousel-indicator-outer-border-radius, var(--component-carousel-indicator-outer-border-radius, 20px));
   transform: translateX(-50%);
 }
 .sd-carousel-indicator-outer.sd-carousel-indicator-dot {
@@ -337,22 +337,22 @@
 .sd-carousel-indicator-outer.sd-carousel-indicator-slider {
   bottom: -20px;
   padding: 0;
-  background-color: rgb(var(--sd-gray-4), 0.5);
+  background-color: var(--component-carousel-carousel-indicator-outer-color-default, var(--component-carousel-indicator-outer-color-default, rgb(var(--sd-gray-4), 0.5)));
 }
 .sd-carousel-indicator-outer .sd-carousel-indicator-item {
-  background-color: rgb(var(--sd-gray-4), 0.5);
+  background-color: var(--component-carousel-carousel-indicator-outer-color-default, var(--component-carousel-indicator-outer-color-default, rgb(var(--sd-gray-4), 0.5)));
 }
 .sd-carousel-indicator-outer .sd-carousel-indicator-item:hover, .sd-carousel-indicator-outer .sd-carousel-indicator-item-active {
-  background-color: var(--sd-color-fill-4);
+  background-color: var(--component-carousel-carousel-indicator-outer-color-active, var(--component-carousel-indicator-outer-color-active, var(--sd-color-fill-4)));
 }
 .sd-carousel-indicator-item {
   display: inline-block;
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: var(--sd-border-radius-medium);
+  background-color: var(--component-carousel-carousel-indicator-color-default, var(--component-carousel-indicator-color-default, rgba(255, 255, 255, 0.3)));
+  border-radius: var(--component-carousel-carousel-indicator-border-radius, var(--component-carousel-indicator-border-radius, var(--sd-border-radius-medium)));
   cursor: pointer;
 }
 .sd-carousel-indicator-item:hover, .sd-carousel-indicator-item-active {
-  background-color: var(--sd-color-white);
+  background-color: var(--component-carousel-carousel-indicator-color-active, var(--component-carousel-indicator-color-active, var(--sd-color-white)));
 }
 .sd-carousel-indicator-dot .sd-carousel-indicator-item {
   width: 6px;
@@ -360,20 +360,20 @@
   border-radius: 50%;
 }
 .sd-carousel-indicator-dot .sd-carousel-indicator-item:not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--component-carousel-carousel-indicator-gap, var(--component-carousel-indicator-gap, var(--spacing-4, 8px)));
 }
 .sd-carousel-indicator-line .sd-carousel-indicator-item {
-  width: 12px;
+  width: var(--component-carousel-carousel-indicator-line-size-width, var(--component-carousel-indicator-line-size-width, var(--size-3, 12px)));
   height: 4px;
 }
 .sd-carousel-indicator-line .sd-carousel-indicator-item:not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--component-carousel-carousel-indicator-gap, var(--component-carousel-indicator-gap, var(--spacing-4, 8px)));
 }
 .sd-carousel-indicator-slider {
-  width: 48px;
+  width: var(--component-carousel-carousel-indicator-slider-size-width, var(--component-carousel-indicator-slider-size-width, var(--size-12, 48px)));
   height: 4px;
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: var(--sd-border-radius-medium);
+  background-color: var(--component-carousel-carousel-indicator-color-default, var(--component-carousel-indicator-color-default, rgba(255, 255, 255, 0.3)));
+  border-radius: var(--component-carousel-carousel-indicator-border-radius, var(--component-carousel-indicator-border-radius, var(--sd-border-radius-medium)));
   cursor: pointer;
 }
 .sd-carousel-indicator-slider .sd-carousel-indicator-item {
@@ -388,37 +388,37 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: var(--sd-color-white);
-  background-color: rgba(255, 255, 255, 0.3);
+  width: var(--component-carousel-carousel-arrow-size, var(--component-carousel-arrow-size, var(--size-6, 24px)));
+  height: var(--component-carousel-carousel-arrow-size, var(--component-carousel-arrow-size, var(--size-6, 24px)));
+  color: var(--component-carousel-carousel-arrow-color-icon, var(--component-carousel-arrow-color-icon, var(--sd-color-white)));
+  background-color: var(--component-carousel-carousel-arrow-color-bg, var(--component-carousel-arrow-color-bg, rgba(255, 255, 255, 0.3)));
   border-radius: 50%;
   cursor: pointer;
 }
 .sd-carousel-arrow > div > svg {
-  color: var(--sd-color-white);
-  font-size: 14px;
+  color: var(--component-carousel-carousel-arrow-color-icon, var(--component-carousel-arrow-color-icon, var(--sd-color-white)));
+  font-size: var(--component-carousel-carousel-arrow-font-size, var(--component-carousel-arrow-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-carousel-arrow > div:hover {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: var(--component-carousel-carousel-arrow-color-bg-hover, var(--component-carousel-arrow-color-bg-hover, rgba(255, 255, 255, 0.5)));
 }
 .sd-carousel-arrow-left {
   top: 50%;
-  left: 12px;
+  left: var(--component-carousel-carousel-arrow-position, var(--component-carousel-arrow-position, var(--spacing-6, 12px)));
   transform: translateY(-50%);
 }
 .sd-carousel-arrow-right {
   top: 50%;
-  right: 12px;
+  right: var(--component-carousel-carousel-arrow-position, var(--component-carousel-arrow-position, var(--spacing-6, 12px)));
   transform: translateY(-50%);
 }
 .sd-carousel-arrow-top {
-  top: 12px;
+  top: var(--component-carousel-carousel-arrow-position, var(--component-carousel-arrow-position, var(--spacing-6, 12px)));
   left: 50%;
   transform: translateX(-50%);
 }
 .sd-carousel-arrow-bottom {
-  bottom: 12px;
+  bottom: var(--component-carousel-carousel-arrow-position, var(--component-carousel-arrow-position, var(--spacing-6, 12px)));
   left: 50%;
   transform: translateX(-50%);
 }
@@ -430,24 +430,24 @@
   opacity: 1;
 }
 
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-arrow > div {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-arrow > div {
   background-color: rgba(23, 23, 26, 0.3);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-arrow > div:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-arrow > div:hover {
   background-color: rgba(23, 23, 26, 0.5);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-item,
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-slider {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-indicator-item,
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-indicator-slider {
   background-color: rgba(23, 23, 26, 0.3);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-item-active,
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-item:hover {
-  background-color: var(--sd-color-white);
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-indicator-item-active,
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-indicator-item:hover {
+  background-color: var(--component-carousel-carousel-indicator-color-active, var(--component-carousel-indicator-color-active, var(--sd-color-white)));
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer.sd-carousel-indicator-slider {
-  background-color: rgb(var(--sd-gray-4), 0.5);
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer.sd-carousel-indicator-slider {
+  background-color: var(--component-carousel-carousel-indicator-outer-color-default, var(--component-carousel-indicator-outer-color-default, rgb(var(--sd-gray-4), 0.5)));
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer .sd-carousel-indicator-item:hover,
-:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer .sd-carousel-indicator-item-active {
-  background-color: var(--sd-color-fill-4);
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer .sd-carousel-indicator-item:hover,
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer .sd-carousel-indicator-item-active {
+  background-color: var(--component-carousel-carousel-indicator-outer-color-active, var(--component-carousel-indicator-outer-color-active, var(--sd-color-fill-4)));
 }

package/es/carousel/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';
@@ -42,3 +43,103 @@ $carousel-indicator-outer-color_active: var(
   string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4')
 );
 $carousel-indicator-outer-color-bg: global.$color-transparent;
+
+// @generated runtime tokens — pnpm theme:generate
+$carousel-content-border-radius: theme-runtime.token(
+  'carousel',
+  'carousel-content-border-radius',
+  $carousel-content-border-radius
+);
+$carousel-arrow-position: theme-runtime.token(
+  'carousel',
+  'carousel-arrow-position',
+  $carousel-arrow-position,
+  'spacing-6'
+);
+$carousel-arrow-size: theme-runtime.token(
+  'carousel',
+  'carousel-arrow-size',
+  $carousel-arrow-size,
+  'size-6'
+);
+$carousel-arrow-font-size: theme-runtime.token(
+  'carousel',
+  'carousel-arrow-font-size',
+  $carousel-arrow-font-size,
+  'font-size-body-3'
+);
+$carousel-arrow-color-icon: theme-runtime.token(
+  'carousel',
+  'carousel-arrow-color-icon',
+  $carousel-arrow-color-icon
+);
+$carousel-arrow-color-bg: theme-runtime.token(
+  'carousel',
+  'carousel-arrow-color-bg',
+  $carousel-arrow-color-bg
+);
+$carousel-arrow-color-bg_hover: theme-runtime.token(
+  'carousel',
+  'carousel-arrow-color-bg-hover',
+  $carousel-arrow-color-bg_hover
+);
+$carousel-indicator-size-wrapper: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-size-wrapper',
+  $carousel-indicator-size-wrapper,
+  'size-12'
+);
+$carousel-indicator-line-size-width: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-line-size-width',
+  $carousel-indicator-line-size-width,
+  'size-3'
+);
+$carousel-indicator-slider-size-width: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-slider-size-width',
+  $carousel-indicator-slider-size-width,
+  'size-12'
+);
+$carousel-indicator-gap: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-gap',
+  $carousel-indicator-gap,
+  'spacing-4'
+);
+$carousel-indicator-border-radius: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-border-radius',
+  $carousel-indicator-border-radius
+);
+$carousel-indicator-color_default: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-color-default',
+  $carousel-indicator-color_default
+);
+$carousel-indicator-color_active: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-color-active',
+  $carousel-indicator-color_active
+);
+$carousel-indicator-outer-border-radius: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-outer-border-radius',
+  $carousel-indicator-outer-border-radius
+);
+$carousel-indicator-outer-color_default: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-outer-color-default',
+  $carousel-indicator-outer-color_default
+);
+$carousel-indicator-outer-color_active: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-outer-color-active',
+  $carousel-indicator-outer-color_active
+);
+$carousel-indicator-outer-color-bg: theme-runtime.token(
+  'carousel',
+  'carousel-indicator-outer-color-bg',
+  $carousel-indicator-outer-color-bg,
+  'color-transparent'
+);