@sdata/web-vue 4.7.1 → 5.0.0

package/es/secret/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use 'sass:string';
 @use '@style/theme/index.scss' as global;
 
@@ -7,3 +8,32 @@ $secret-trigger-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-col
 $secret-trigger-color-text_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
 $secret-trigger-size-icon: global.$size-4;
 $secret-placeholder-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+// @generated runtime tokens — pnpm theme:generate
+$secret-gap: theme-runtime.token('secret', 'secret-gap', $secret-gap, 'spacing-3');
+$secret-trigger-border-radius: theme-runtime.token(
+  'secret',
+  'secret-trigger-border-radius',
+  $secret-trigger-border-radius
+);
+$secret-trigger-color-text: theme-runtime.token(
+  'secret',
+  'secret-trigger-color-text',
+  $secret-trigger-color-text
+);
+$secret-trigger-color-text_hover: theme-runtime.token(
+  'secret',
+  'secret-trigger-color-text-hover',
+  $secret-trigger-color-text_hover
+);
+$secret-trigger-size-icon: theme-runtime.token(
+  'secret',
+  'secret-trigger-size-icon',
+  $secret-trigger-size-icon,
+  'size-4'
+);
+$secret-placeholder-color-text: theme-runtime.token(
+  'secret',
+  'secret-placeholder-color-text',
+  $secret-placeholder-color-text
+);

package/es/select/style/index.css

@@ -24,11 +24,11 @@
  **********************************************/
 .sd-select-dropdown {
   box-sizing: border-box;
-  padding: 4px 0;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-fill-3);
-  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);
+  padding: var(--component-select-select-popup-padding-vertical, var(--component-select-popup-padding-vertical, var(--spacing-2, 4px))) 0;
+  background-color: var(--component-select-select-popup-color-bg, var(--component-select-popup-color-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-select-select-popup-color-border, var(--component-select-popup-color-border, var(--sd-color-fill-3)));
+  border-radius: var(--component-select-select-popup-border-radius, var(--component-select-popup-border-radius, var(--sd-border-radius-medium)));
+  box-shadow: var(--component-select-select-popup-box-shadow, var(--component-select-popup-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-select-dropdown .sd-select-dropdown-loading {
   display: flex;
@@ -43,7 +43,7 @@
   list-style: none;
 }
 .sd-select-dropdown-list-wrapper {
-  max-height: 200px;
+  max-height: var(--component-select-select-popup-max-height, var(--component-select-popup-max-height, var(--size-50, 200px)));
   overflow-y: auto;
 }
 .sd-select-dropdown .sd-select-option {
@@ -53,12 +53,12 @@
   align-items: center;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 12px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  line-height: 36px;
+  padding: 0 var(--component-select-select-signal-popup-option-padding-horizontal, var(--component-select-signal-popup-option-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-select-select-popup-option-color-text-default, var(--component-select-popup-option-color-text-default, var(--sd-color-text-1)));
+  font-size: var(--component-select-select-popup-font-size, var(--component-select-popup-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-select-select-popup-option-height, var(--component-select-popup-option-height, var(--size-9, 36px)));
   text-align: left;
-  background-color: var(--sd-color-bg-popup);
+  background-color: var(--component-select-select-popup-option-color-bg-default, var(--component-select-popup-option-color-bg-default, var(--sd-color-bg-popup)));
   cursor: pointer;
 }
 .sd-select-dropdown .sd-select-option-content {
@@ -78,18 +78,18 @@
   justify-content: space-between;
 }
 .sd-select-dropdown .sd-select-option-selected {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  background-color: var(--sd-color-bg-popup);
+  color: var(--component-select-select-popup-option-color-text-selected, var(--component-select-popup-option-color-text-selected, var(--sd-color-text-1)));
+  font-weight: var(--component-select-select-popup-option-font-weight-selected, var(--component-select-popup-option-font-weight-selected, var(--font-weight-500, 500)));
+  background-color: var(--component-select-select-popup-option-color-bg-selected, var(--component-select-popup-option-color-bg-selected, var(--sd-color-bg-popup)));
 }
 .sd-select-dropdown .sd-select-option-active, .sd-select-dropdown .sd-select-option:not(.sd-select-dropdown .sd-select-option-disabled):hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-select-select-popup-option-color-text-hover, var(--component-select-popup-option-color-text-hover, var(--sd-color-text-1)));
+  background-color: var(--component-select-select-popup-option-color-bg-hover, var(--component-select-popup-option-color-bg-hover, var(--sd-color-fill-2)));
   transition: 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-select-dropdown .sd-select-option-disabled {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-bg-popup);
+  color: var(--component-select-select-popup-option-color-text-disabled, var(--component-select-popup-option-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-select-select-popup-option-color-bg-disabled, var(--component-select-popup-option-color-bg-disabled, var(--sd-color-bg-popup)));
   cursor: not-allowed;
 }
 .sd-select-dropdown .sd-select-option-icon {
@@ -97,19 +97,19 @@
   margin-right: 8px;
 }
 .sd-select-dropdown .sd-select-option-suffix {
-  margin-left: 12px;
+  margin-left: var(--component-select-dropdown-margin-left-suffix-icon, var(--component-select-margin-left-suffix-icon, var(--spacing-6, 12px)));
 }
 .sd-select-dropdown .sd-select-group:first-child .sd-select-dropdown .sd-select-group-title {
-  margin-top: 8px;
+  margin-top: var(--component-select-select-popup-group-title-padding-top, var(--component-select-popup-group-title-padding-top, var(--spacing-4, 8px)));
 }
 .sd-select-dropdown .sd-select-group-title {
   box-sizing: border-box;
   width: 100%;
-  margin-top: 8px;
-  padding: 0 12px;
-  color: var(--sd-color-text-3);
-  font-size: 12px;
-  line-height: 20px;
+  margin-top: var(--component-select-select-popup-group-title-padding-top, var(--component-select-popup-group-title-padding-top, var(--spacing-4, 8px)));
+  padding: 0 var(--component-select-select-popup-group-title-padding-horizontal, var(--component-select-popup-group-title-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-select-select-popup-group-title-color-text, var(--component-select-popup-group-title-color-text, var(--sd-color-text-3)));
+  font-size: var(--component-select-select-popup-group-title-font-size, var(--component-select-popup-group-title-font-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-select-select-popup-group-title-height, var(--component-select-popup-group-title-height, var(--size-5, 20px)));
   cursor: default;
   overflow: hidden;
   white-space: nowrap;
@@ -119,11 +119,11 @@
   padding-top: 0;
 }
 .sd-select-dropdown-header {
-  border-bottom: 1px solid var(--sd-color-fill-3);
+  border-bottom: 1px solid var(--component-select-select-popup-color-border, var(--component-select-popup-color-border, var(--sd-color-fill-3)));
 }
 .sd-select-dropdown.sd-select-dropdown-has-footer {
   padding-bottom: 0;
 }
 .sd-select-dropdown-footer {
-  border-top: 1px solid var(--sd-color-fill-3);
+  border-top: 1px solid var(--component-select-select-popup-color-border, var(--component-select-popup-color-border, var(--sd-color-fill-3)));
 }

package/es/select/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';
@@ -67,3 +68,153 @@ $select-popup-group-title-color-text: var(
 );
 
 $dropdown-margin-left-suffix-icon: global.$spacing-6;
+
+// @generated runtime tokens — pnpm theme:generate
+$select-popup-max-height: theme-runtime.token(
+  'select',
+  'select-popup-max-height',
+  $select-popup-max-height,
+  'size-50'
+);
+$select-popup-border-radius: theme-runtime.token(
+  'select',
+  'select-popup-border-radius',
+  $select-popup-border-radius
+);
+$select-popup-padding-vertical: theme-runtime.token(
+  'select',
+  'select-popup-padding-vertical',
+  $select-popup-padding-vertical,
+  'spacing-2'
+);
+$select-popup-font-size: theme-runtime.token(
+  'select',
+  'select-popup-font-size',
+  $select-popup-font-size,
+  'font-size-body-3'
+);
+$select-popup-color-bg: theme-runtime.token(
+  'select',
+  'select-popup-color-bg',
+  $select-popup-color-bg
+);
+$select-popup-color-border: theme-runtime.token(
+  'select',
+  'select-popup-color-border',
+  $select-popup-color-border
+);
+$select-popup-box-shadow: theme-runtime.token(
+  'select',
+  'select-popup-box-shadow',
+  $select-popup-box-shadow
+);
+$select-popup-option-height: theme-runtime.token(
+  'select',
+  'select-popup-option-height',
+  $select-popup-option-height,
+  'size-9'
+);
+$select-popup-option-font-weight_selected: theme-runtime.token(
+  'select',
+  'select-popup-option-font-weight-selected',
+  $select-popup-option-font-weight_selected,
+  'font-weight-500'
+);
+$select-signal-popup-option-padding-horizontal: theme-runtime.token(
+  'select',
+  'select-signal-popup-option-padding-horizontal',
+  $select-signal-popup-option-padding-horizontal,
+  'spacing-6'
+);
+$select-multi-popup-option-padding-horizontal: theme-runtime.token(
+  'select',
+  'select-multi-popup-option-padding-horizontal',
+  $select-multi-popup-option-padding-horizontal,
+  'spacing-2'
+);
+$select-popup-option-color-bg_default: theme-runtime.token(
+  'select',
+  'select-popup-option-color-bg-default',
+  $select-popup-option-color-bg_default
+);
+$select-popup-option-color-bg_hover: theme-runtime.token(
+  'select',
+  'select-popup-option-color-bg-hover',
+  $select-popup-option-color-bg_hover
+);
+$select-popup-option-color-bg_selected: theme-runtime.token(
+  'select',
+  'select-popup-option-color-bg-selected',
+  $select-popup-option-color-bg_selected
+);
+$select-popup-option-color-bg_disabled: theme-runtime.token(
+  'select',
+  'select-popup-option-color-bg-disabled',
+  $select-popup-option-color-bg_disabled
+);
+$select-popup-option-color-text_default: theme-runtime.token(
+  'select',
+  'select-popup-option-color-text-default',
+  $select-popup-option-color-text_default
+);
+$select-popup-option-color-text_hover: theme-runtime.token(
+  'select',
+  'select-popup-option-color-text-hover',
+  $select-popup-option-color-text_hover
+);
+$select-popup-option-color-text_selected: theme-runtime.token(
+  'select',
+  'select-popup-option-color-text-selected',
+  $select-popup-option-color-text_selected
+);
+$select-popup-option-color-text_disabled: theme-runtime.token(
+  'select',
+  'select-popup-option-color-text-disabled',
+  $select-popup-option-color-text_disabled
+);
+$select-popup-option-color-highlight-text: theme-runtime.token(
+  'select',
+  'select-popup-option-color-highlight-text',
+  $select-popup-option-color-highlight-text
+);
+$select-popup-option-font-highlight-weight: theme-runtime.token(
+  'select',
+  'select-popup-option-font-highlight-weight',
+  $select-popup-option-font-highlight-weight,
+  'font-weight-500'
+);
+$select-popup-group-title-height: theme-runtime.token(
+  'select',
+  'select-popup-group-title-height',
+  $select-popup-group-title-height,
+  'size-5'
+);
+$select-popup-group-title-padding-horizontal: theme-runtime.token(
+  'select',
+  'select-popup-group-title-padding-horizontal',
+  $select-popup-group-title-padding-horizontal,
+  'spacing-6'
+);
+$select-popup-group-title-padding-top: theme-runtime.token(
+  'select',
+  'select-popup-group-title-padding-top',
+  $select-popup-group-title-padding-top,
+  'spacing-4'
+);
+$select-popup-group-title-font-size: theme-runtime.token(
+  'select',
+  'select-popup-group-title-font-size',
+  $select-popup-group-title-font-size,
+  'font-size-body-1'
+);
+$select-popup-group-title-color-text: theme-runtime.token(
+  'select',
+  'select-popup-group-title-color-text',
+  $select-popup-group-title-color-text
+);
+$dropdown-margin-left-suffix-icon: theme-runtime.token(
+  'select',
+  'dropdown-margin-left-suffix-icon',
+  $dropdown-margin-left-suffix-icon,
+  'spacing-6'
+);

package/es/selectable-card/style/index.css

@@ -18,10 +18,10 @@
 .sd-selectable-card {
   position: relative;
   box-sizing: border-box;
-  color: var(--sd-color-text-1);
-  background: var(--sd-color-bg-2);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
+  color: var(--component-selectable-card-selectable-card-color-value, var(--component-selectable-card-color-value, var(--sd-color-text-1)));
+  background: var(--component-selectable-card-selectable-card-color-bg, var(--component-selectable-card-color-bg, var(--sd-color-bg-2)));
+  border: var(--component-selectable-card-selectable-card-border-width, var(--component-selectable-card-border-width, var(--border-1, 1px))) solid var(--component-selectable-card-selectable-card-color-border, var(--component-selectable-card-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-selectable-card-selectable-card-border-radius, var(--component-selectable-card-border-radius, var(--sd-border-radius-medium)));
   cursor: pointer;
   transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), 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);
 }
@@ -36,15 +36,17 @@
 }
 @media (hover: hover) {
   .sd-selectable-card:not(.sd-selectable-card--disabled):hover::after {
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--component-selectable-card-selectable-card-overlay-hover, var(--component-selectable-card-overlay-hover, rgba(0, 0, 0, 0.05)));
   }
 }
 .sd-selectable-card:not(.sd-selectable-card--disabled):active::after {
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--component-selectable-card-selectable-card-overlay-active, var(--component-selectable-card-overlay-active, rgba(0, 0, 0, 0.1)));
 }
 .sd-selectable-card:has(.sd-selectable-card-input:focus-visible) {
-  outline: 2px solid rgb(var(--sd-primary-6));
-  outline-offset: 2px;
+  outline: none;
+}
+.sd-selectable-card:has(.sd-selectable-card-input:focus-visible)::after {
+  background: var(--component-selectable-card-selectable-card-overlay-hover, var(--component-selectable-card-overlay-hover, rgba(0, 0, 0, 0.05)));
 }
 .sd-selectable-card-body {
   display: flex;
@@ -65,16 +67,16 @@
   font-size: 2em;
 }
 .sd-selectable-card-title {
-  color: var(--sd-color-text-2);
+  color: var(--component-selectable-card-selectable-card-color-title, var(--component-selectable-card-color-title, var(--sd-color-text-2)));
   font-size: 14px;
 }
 .sd-selectable-card-value {
-  color: var(--sd-color-text-1);
+  color: var(--component-selectable-card-selectable-card-color-value, var(--component-selectable-card-color-value, var(--sd-color-text-1)));
   font-weight: 500;
   line-height: 1.25;
 }
 .sd-selectable-card-description, .sd-selectable-card-default {
-  color: var(--sd-color-text-3);
+  color: var(--component-selectable-card-selectable-card-color-description, var(--component-selectable-card-color-description, var(--sd-color-text-3)));
   font-size: 13px;
   line-height: 1.5715;
 }
@@ -124,69 +126,69 @@
   font-size: 20px;
 }
 .sd-selectable-card--color-red {
-  --sd-selectable-card-accent: rgb(var(--sd-red-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-red-1));
-  --sd-selectable-card-border: rgb(var(--sd-red-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-red-color-text, var(--component-tag-red-color-text, rgb(var(--sd-red-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-red-color-bg, var(--component-tag-red-color-bg, rgb(var(--sd-red-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-red-bordered-color-border, var(--component-tag-red-bordered-color-border, rgb(var(--sd-red-6))));
 }
 .sd-selectable-card--color-orangered {
-  --sd-selectable-card-accent: rgb(var(--sd-orangered-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-orangered-1));
-  --sd-selectable-card-border: rgb(var(--sd-orangered-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-orangered-color-text, var(--component-tag-orangered-color-text, rgb(var(--sd-orangered-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-orangered-color-bg, var(--component-tag-orangered-color-bg, rgb(var(--sd-orangered-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-orangered-bordered-color-border, var(--component-tag-orangered-bordered-color-border, rgb(var(--sd-orangered-6))));
 }
 .sd-selectable-card--color-orange {
-  --sd-selectable-card-accent: rgb(var(--sd-orange-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-orange-1));
-  --sd-selectable-card-border: rgb(var(--sd-orange-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-orange-color-text, var(--component-tag-orange-color-text, rgb(var(--sd-orange-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-orange-color-bg, var(--component-tag-orange-color-bg, rgb(var(--sd-orange-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-orange-bordered-color-border, var(--component-tag-orange-bordered-color-border, rgb(var(--sd-orange-6))));
 }
 .sd-selectable-card--color-gold {
-  --sd-selectable-card-accent: rgb(var(--sd-gold-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-gold-1));
-  --sd-selectable-card-border: rgb(var(--sd-gold-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-gold-color-text, var(--component-tag-gold-color-text, rgb(var(--sd-gold-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-gold-color-bg, var(--component-tag-gold-color-bg, rgb(var(--sd-gold-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-gold-bordered-color-border, var(--component-tag-gold-bordered-color-border, rgb(var(--sd-gold-6))));
 }
 .sd-selectable-card--color-lime {
-  --sd-selectable-card-accent: rgb(var(--sd-lime-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-lime-1));
-  --sd-selectable-card-border: rgb(var(--sd-lime-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-lime-color-text, var(--component-tag-lime-color-text, rgb(var(--sd-lime-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-lime-color-bg, var(--component-tag-lime-color-bg, rgb(var(--sd-lime-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-lime-bordered-color-border, var(--component-tag-lime-bordered-color-border, rgb(var(--sd-lime-6))));
 }
 .sd-selectable-card--color-green {
-  --sd-selectable-card-accent: rgb(var(--sd-green-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-green-1));
-  --sd-selectable-card-border: rgb(var(--sd-green-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-green-color-text, var(--component-tag-green-color-text, rgb(var(--sd-green-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-green-color-bg, var(--component-tag-green-color-bg, rgb(var(--sd-green-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-green-bordered-color-border, var(--component-tag-green-bordered-color-border, rgb(var(--sd-green-6))));
 }
 .sd-selectable-card--color-cyan {
-  --sd-selectable-card-accent: rgb(var(--sd-cyan-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-cyan-1));
-  --sd-selectable-card-border: rgb(var(--sd-cyan-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-cyan-color-text, var(--component-tag-cyan-color-text, rgb(var(--sd-cyan-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-cyan-color-bg, var(--component-tag-cyan-color-bg, rgb(var(--sd-cyan-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-cyan-bordered-color-border, var(--component-tag-cyan-bordered-color-border, rgb(var(--sd-cyan-6))));
 }
 .sd-selectable-card--color-blue {
-  --sd-selectable-card-accent: rgb(var(--sd-blue-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-blue-1));
-  --sd-selectable-card-border: rgb(var(--sd-blue-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-blue-color-text, var(--component-tag-blue-color-text, rgb(var(--sd-blue-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-blue-color-bg, var(--component-tag-blue-color-bg, rgb(var(--sd-blue-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-blue-bordered-color-border, var(--component-tag-blue-bordered-color-border, rgb(var(--sd-blue-6))));
 }
 .sd-selectable-card--color-sdblue {
-  --sd-selectable-card-accent: rgb(var(--sd-sdblue-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-sdblue-1));
-  --sd-selectable-card-border: rgb(var(--sd-sdblue-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-sdblue-color-text, var(--component-tag-sdblue-color-text, rgb(var(--sd-sdblue-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-sdblue-color-bg, var(--component-tag-sdblue-color-bg, rgb(var(--sd-sdblue-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-sdblue-bordered-color-border, var(--component-tag-sdblue-bordered-color-border, rgb(var(--sd-sdblue-6))));
 }
 .sd-selectable-card--color-purple {
-  --sd-selectable-card-accent: rgb(var(--sd-purple-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-purple-1));
-  --sd-selectable-card-border: rgb(var(--sd-purple-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-purple-color-text, var(--component-tag-purple-color-text, rgb(var(--sd-purple-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-purple-color-bg, var(--component-tag-purple-color-bg, rgb(var(--sd-purple-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-purple-bordered-color-border, var(--component-tag-purple-bordered-color-border, rgb(var(--sd-purple-6))));
 }
 .sd-selectable-card--color-pinkpurple {
-  --sd-selectable-card-accent: rgb(var(--sd-pinkpurple-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-pinkpurple-1));
-  --sd-selectable-card-border: rgb(var(--sd-pinkpurple-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-pinkpurple-color-text, var(--component-tag-pinkpurple-color-text, rgb(var(--sd-pinkpurple-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-pinkpurple-color-bg, var(--component-tag-pinkpurple-color-bg, rgb(var(--sd-pinkpurple-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-pinkpurple-bordered-color-border, var(--component-tag-pinkpurple-bordered-color-border, rgb(var(--sd-pinkpurple-6))));
 }
 .sd-selectable-card--color-magenta {
-  --sd-selectable-card-accent: rgb(var(--sd-magenta-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-magenta-1));
-  --sd-selectable-card-border: rgb(var(--sd-magenta-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-magenta-color-text, var(--component-tag-magenta-color-text, rgb(var(--sd-magenta-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-magenta-color-bg, var(--component-tag-magenta-color-bg, rgb(var(--sd-magenta-1))));
+  --sd-selectable-card-border: var(--component-tag-tag-magenta-bordered-color-border, var(--component-tag-magenta-bordered-color-border, rgb(var(--sd-magenta-6))));
 }
 .sd-selectable-card--color-gray {
-  --sd-selectable-card-accent: rgb(var(--sd-gray-6));
-  --sd-selectable-card-soft-bg: rgb(var(--sd-gray-2));
-  --sd-selectable-card-border: rgb(var(--sd-gray-6));
+  --sd-selectable-card-accent: var(--component-tag-tag-gray-color-text, var(--component-tag-gray-color-text, rgb(var(--sd-gray-6))));
+  --sd-selectable-card-soft-bg: var(--component-tag-tag-gray-color-bg, var(--component-tag-gray-color-bg, rgb(var(--sd-gray-2))));
+  --sd-selectable-card-border: var(--component-tag-tag-gray-bordered-color-border, var(--component-tag-gray-bordered-color-border, rgb(var(--sd-gray-6))));
 }
 .sd-selectable-card--selected {
   border-color: var(--sd-selectable-card-border);
@@ -204,7 +206,7 @@
 }
 .sd-selectable-card--disabled {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--component-selectable-card-selectable-card-disabled-opacity, var(--component-selectable-card-disabled-opacity, 0.5));
 }
 .sd-selectable-card-input {
   position: absolute;

package/es/selectable-card/style/index.scss

@@ -48,9 +48,13 @@ $colors:
     background: $selectable-card-overlay-active;
   }
 
+  // 键盘焦点与 hover 保持同一视觉（::after 覆盖层）
   &:has(&-input:focus-visible) {
-    outline: 2px solid $selectable-card-color-focus;
-    outline-offset: 2px;
+    outline: none;
+
+    &::after {
+      background: $selectable-card-overlay-hover;
+    }
   }
 
   &-body {

package/es/selectable-card/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';
 
@@ -25,3 +26,62 @@ $selectable-card-size-large-gap: global.$spacing-6;
 $selectable-card-size-small-value: global.$font-size-body-3;
 $selectable-card-size-medium-value: global.$font-size-title-1;
 $selectable-card-size-large-value: global.$font-size-title-2;
+
+// @generated runtime tokens — pnpm theme:generate
+$selectable-card-color-bg: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-color-bg',
+  $selectable-card-color-bg
+);
+$selectable-card-color-border: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-color-border',
+  $selectable-card-color-border
+);
+$selectable-card-color-title: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-color-title',
+  $selectable-card-color-title
+);
+$selectable-card-color-value: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-color-value',
+  $selectable-card-color-value
+);
+$selectable-card-color-description: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-color-description',
+  $selectable-card-color-description
+);
+$selectable-card-color-focus: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-color-focus',
+  $selectable-card-color-focus,
+  'color-primary-6'
+);
+$selectable-card-border-width: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-border-width',
+  $selectable-card-border-width,
+  'border-1'
+);
+$selectable-card-border-radius: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-border-radius',
+  $selectable-card-border-radius
+);
+$selectable-card-disabled-opacity: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-disabled-opacity',
+  $selectable-card-disabled-opacity
+);
+$selectable-card-overlay-hover: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-overlay-hover',
+  $selectable-card-overlay-hover
+);
+$selectable-card-overlay-active: theme-runtime.token(
+  'selectable-card',
+  'selectable-card-overlay-active',
+  $selectable-card-overlay-active
+);