@sdata/web-vue 4.7.1 → 5.0.0

package/es/cascader/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,26 +119,26 @@
   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)));
 }
 
 .sd-cascader-panel {
   display: inline-flex;
   box-sizing: border-box;
-  height: 200px;
+  height: var(--component-select-select-popup-max-height, var(--component-select-popup-max-height, var(--size-50, 200px)));
   overflow: hidden;
   white-space: nowrap;
   list-style: none;
   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);
+  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-cascader-search-panel {
   justify-content: flex-start;
@@ -166,7 +166,7 @@
   justify-content: center;
 }
 .sd-cascader-panel-column:not(:last-of-type) {
-  border-right: 1px solid var(--sd-color-fill-3);
+  border-right: 1px solid var(--component-select-select-popup-color-border, var(--component-select-popup-color-border, var(--sd-color-fill-3)));
 }
 .sd-cascader-column-content {
   flex: 1;
@@ -179,7 +179,7 @@
   flex-direction: column;
   box-sizing: border-box;
   height: 100%;
-  padding: 4px 0;
+  padding: var(--component-select-select-popup-padding-vertical, var(--component-select-popup-padding-vertical, var(--spacing-2, 4px))) 0;
 }
 .sd-cascader-list-wrapper-with-footer {
   padding-bottom: 0;
@@ -203,33 +203,33 @@
 }
 .sd-cascader-list-multiple .sd-cascader-option, .sd-cascader-list-strictly .sd-cascader-option {
   width: 100%;
-  padding-left: 12px;
+  padding-left: var(--component-cascader-cascader-padding-item-left, var(--component-cascader-padding-item-left, var(--spacing-6, 12px)));
 }
 .sd-cascader-list-multiple .sd-cascader-option .sd-checkbox,
 .sd-cascader-list-multiple .sd-cascader-option .sd-radio, .sd-cascader-list-strictly .sd-cascader-option .sd-checkbox,
 .sd-cascader-list-strictly .sd-cascader-option .sd-radio {
-  margin-right: 8px;
+  margin-right: var(--component-cascader-cascader-margin-checkbox-right, var(--component-cascader-margin-checkbox-right, var(--spacing-4, 8px)));
   padding-left: 0;
 }
 .sd-cascader-search-list.sd-cascader-list-multiple .sd-cascader-option-label {
-  padding-right: 12px;
+  padding-right: var(--component-cascader-cascader-padding-item-left, var(--component-cascader-padding-item-left, var(--spacing-6, 12px)));
 }
 .sd-cascader-list-footer {
   box-sizing: border-box;
-  height: 36px;
-  padding-left: 12px;
-  line-height: 36px;
-  border-top: 1px solid var(--sd-color-fill-3);
+  height: var(--component-cascader-cascader-size-item-height, var(--component-cascader-size-item-height, var(--size-9, 36px)));
+  padding-left: var(--component-cascader-cascader-padding-item-left, var(--component-cascader-padding-item-left, var(--spacing-6, 12px)));
+  line-height: var(--component-cascader-cascader-size-item-height, var(--component-cascader-size-item-height, var(--size-9, 36px)));
+  border-top: 1px solid var(--component-select-select-popup-color-border, var(--component-select-popup-color-border, var(--sd-color-fill-3)));
 }
 .sd-cascader-option, .sd-cascader-search-option {
   position: relative;
   display: flex;
   box-sizing: border-box;
   min-width: 100px;
-  height: 36px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  line-height: 36px;
+  height: var(--component-cascader-cascader-size-item-height, var(--component-cascader-size-item-height, var(--size-9, 36px)));
+  color: var(--component-cascader-cascader-color-item-text, var(--component-cascader-color-item-text, var(--sd-color-text-1)));
+  font-size: var(--component-cascader-cascader-font-item-size, var(--component-cascader-font-item-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-cascader-cascader-size-item-height, var(--component-cascader-size-item-height, var(--size-9, 36px)));
   text-align: left;
   background-color: transparent;
   cursor: pointer;
@@ -239,7 +239,7 @@
   box-sizing: border-box;
   min-width: 0;
   padding-right: 34px;
-  padding-left: 12px;
+  padding-left: var(--component-cascader-cascader-padding-item-left, var(--component-cascader-padding-item-left, var(--spacing-6, 12px)));
   overflow: hidden;
 }
 .sd-cascader-option .sd-icon-right,
@@ -248,7 +248,7 @@
   position: absolute;
   top: 50%;
   right: 10px;
-  color: var(--sd-color-text-2);
+  color: var(--component-cascader-cascader-color-item-icon, var(--component-cascader-color-item-icon, var(--sd-color-text-2)));
   font-size: 12px;
   transform: translateY(-50%);
 }
@@ -264,18 +264,18 @@
   font-size: 12px;
 }
 .sd-cascader-option:hover, .sd-cascader-search-option-hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-cascader-cascader-color-item-text-hover, var(--component-cascader-color-item-text-hover, var(--component-cascader-cascader-color-item-text, var(--component-cascader-color-item-text, var(--sd-color-text-1)))));
+  background-color: var(--component-cascader-cascader-color-item-bg-hover, var(--component-cascader-color-item-bg-hover, var(--component-cascader-cascader-color-item-bg-active, var(--component-cascader-color-item-bg-active, var(--sd-color-fill-2)))));
 }
 .sd-cascader-option:hover .sd-checkbox:not(.sd-checkbox-disabled):not(.sd-checkbox-checked):hover .sd-checkbox-icon-hover::before, .sd-cascader-search-option-hover .sd-checkbox:not(.sd-checkbox-disabled):not(.sd-checkbox-checked):hover .sd-checkbox-icon-hover::before {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-cascader-cascader-color-checkbox-bg-hover, var(--component-cascader-color-checkbox-bg-hover, var(--sd-color-fill-3)));
 }
 .sd-cascader-option:hover .sd-radio:not(.sd-radio-disabled):not(.sd-radio-checked):hover .sd-radio-icon-hover::before, .sd-cascader-search-option-hover .sd-radio:not(.sd-radio-disabled):not(.sd-radio-checked):hover .sd-radio-icon-hover::before {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-cascader-cascader-color-checkbox-bg-hover, var(--component-cascader-color-checkbox-bg-hover, var(--sd-color-fill-3)));
 }
 .sd-cascader-option-disabled, .sd-cascader-option-disabled:hover, .sd-cascader-search-option-disabled, .sd-cascader-search-option-disabled:hover {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-cascader-cascader-color-item-text-disabled, var(--component-cascader-color-item-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-cascader-cascader-color-item-bg-disabled, var(--component-cascader-color-item-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-cascader-option-disabled .sd-icon-right, .sd-cascader-option-disabled:hover .sd-icon-right, .sd-cascader-search-option-disabled .sd-icon-right, .sd-cascader-search-option-disabled:hover .sd-icon-right {
@@ -288,17 +288,17 @@
   width: 100%;
 }
 .sd-cascader-option-active {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-cascader-cascader-color-item-text-active, var(--component-cascader-color-item-text-active, var(--component-cascader-cascader-color-item-text, var(--component-cascader-color-item-text, var(--sd-color-text-1)))));
+  background-color: var(--component-cascader-cascader-color-item-bg-active, var(--component-cascader-color-item-bg-active, var(--sd-color-fill-2)));
   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);
 }
 .sd-cascader-option-active:hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-cascader-cascader-color-item-text-active, var(--component-cascader-color-item-text-active, var(--component-cascader-cascader-color-item-text, var(--component-cascader-color-item-text, var(--sd-color-text-1)))));
+  background-color: var(--component-cascader-cascader-color-item-bg-active, var(--component-cascader-color-item-bg-active, var(--sd-color-fill-2)));
 }
 .sd-cascader-option-active.sd-cascader-option-disabled, .sd-cascader-option-active.sd-cascader-option-disabled:hover {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-cascader-cascader-color-item-text-disabled-active, var(--component-cascader-color-item-text-disabled-active, var(--sd-color-text-4)));
+  background-color: var(--component-cascader-cascader-color-item-bg-disabled-active, var(--component-cascader-color-item-bg-disabled-active, var(--sd-color-fill-2)));
 }
 
 .cascader-slide-enter-active,

package/es/cascader/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';
@@ -49,3 +50,91 @@ $cascader-color-item-bg_disabled_active: var(
 $cascader-color-checkbox-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
 
 $cascader-margin-checkbox-right: global.$spacing-4;
+
+// @generated runtime tokens — pnpm theme:generate
+$cascader-size-item-height: theme-runtime.token(
+  'cascader',
+  'cascader-size-item-height',
+  $cascader-size-item-height,
+  'size-9'
+);
+$cascader-font-item-size: theme-runtime.token(
+  'cascader',
+  'cascader-font-item-size',
+  $cascader-font-item-size,
+  'font-size-body-3'
+);
+$cascader-color-item-text: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-text',
+  $cascader-color-item-text
+);
+$cascader-color-item-icon: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-icon',
+  $cascader-color-item-icon
+);
+$cascader-padding-item-left: theme-runtime.token(
+  'cascader',
+  'cascader-padding-item-left',
+  $cascader-padding-item-left,
+  'spacing-6'
+);
+$cascader-color-item-text_hover: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-text-hover',
+  $cascader-color-item-text
+);
+$cascader-color-item-text_active: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-text-active',
+  $cascader-color-item-text
+);
+$cascader-color-item-text_disabled: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-text-disabled',
+  $cascader-color-item-text_disabled
+);
+$cascader-color-item-text_disabled_active: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-text-disabled-active',
+  $cascader-color-item-text_disabled_active
+);
+$cascader-font-item-weight_active: theme-runtime.token(
+  'cascader',
+  'cascader-font-item-weight-active',
+  $cascader-font-item-weight_active,
+  'font-weight-500'
+);
+$cascader-color-item-bg_active: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-bg-active',
+  $cascader-color-item-bg_active
+);
+$cascader-color-item-bg_hover: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-bg-hover',
+  $cascader-color-item-bg_active
+);
+$cascader-color-item-bg_disabled: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-bg-disabled',
+  $cascader-color-item-bg_disabled,
+  'color-transparent'
+);
+$cascader-color-item-bg_disabled_active: theme-runtime.token(
+  'cascader',
+  'cascader-color-item-bg-disabled-active',
+  $cascader-color-item-bg_disabled_active
+);
+$cascader-color-checkbox-bg_hover: theme-runtime.token(
+  'cascader',
+  'cascader-color-checkbox-bg-hover',
+  $cascader-color-checkbox-bg_hover
+);
+$cascader-margin-checkbox-right: theme-runtime.token(
+  'cascader',
+  'cascader-margin-checkbox-right',
+  $cascader-margin-checkbox-right,
+  'spacing-4'
+);

package/es/checkbox/style/index.css

@@ -26,7 +26,7 @@
   align-items: center;
   box-sizing: border-box;
   padding-left: 5px;
-  font-size: 14px;
+  font-size: var(--component-checkbox-checkbox-text-font-size, var(--component-checkbox-text-font-size, var(--font-size-body-3, 14px)));
   line-height: unset;
   cursor: pointer;
 }
@@ -42,20 +42,20 @@
   background-color: var(--sd-color-neutral-2);
 }
 .sd-checkbox:hover .sd-checkbox-icon-hover::before {
-  background-color: var(--sd-color-neutral-2);
+  background-color: var(--component-checkbox-checkbox-mask-bg-color-bg, var(--component-checkbox-mask-bg-color-bg, var(--sd-color-neutral-2)));
 }
 .sd-checkbox-label {
-  margin-left: 8px;
-  color: var(--sd-color-text-1);
+  margin-left: var(--component-checkbox-checkbox-text-mask-spacing, var(--component-checkbox-text-mask-spacing, var(--spacing-4, 8px)));
+  color: var(--component-checkbox-checkbox-color-text, var(--component-checkbox-color-text, var(--sd-color-text-1)));
 }
 .sd-checkbox-icon {
   position: relative;
   box-sizing: border-box;
   width: 14px;
   height: 14px;
-  background-color: var(--sd-color-bg-2);
-  border: 2px solid var(--sd-color-fill-3);
-  border-radius: var(--sd-border-radius-small);
+  background-color: var(--component-checkbox-checkbox-mask-color-bg, var(--component-checkbox-mask-color-bg, var(--sd-color-bg-2)));
+  border: var(--component-checkbox-checkbox-mask-border-width, var(--component-checkbox-mask-border-width, var(--border-2, 2px))) var(--component-checkbox-checkbox-mask-border-style, var(--component-checkbox-mask-border-style, var(--border-solid, solid))) var(--component-checkbox-checkbox-mask-color-border, var(--component-checkbox-mask-color-border, var(--sd-color-fill-3)));
+  border-radius: var(--component-checkbox-checkbox-mask-border-radius, var(--component-checkbox-mask-border-radius, var(--sd-border-radius-small)));
   user-select: none;
 }
 .sd-checkbox-icon::after {
@@ -63,9 +63,9 @@
   top: 50%;
   left: 50%;
   display: block;
-  width: 6px;
-  height: 2px;
-  background: var(--sd-color-white);
+  width: var(--component-checkbox-checkbox-color-indeterminate-icon-width, var(--component-checkbox-color-indeterminate-icon-width, 6px));
+  height: var(--component-checkbox-checkbox-color-indeterminate-icon-height, var(--component-checkbox-color-indeterminate-icon-height, 2px));
+  background: var(--component-checkbox-checkbox-color-indeterminate-icon, var(--component-checkbox-color-indeterminate-icon, var(--sd-color-white)));
   border-radius: 0.5px;
   transform: translateX(-50%) translateY(-50%) scale(0);
   content: "";
@@ -73,31 +73,31 @@
 .sd-checkbox-icon-check {
   position: relative;
   display: block;
-  width: 8px;
+  width: var(--component-checkbox-checkbox-size-check-icon, var(--component-checkbox-size-check-icon, var(--size-2, 8px)));
   height: 100%;
   margin: 0 auto;
-  color: var(--sd-color-white);
+  color: var(--component-checkbox-checkbox-color-check-icon, var(--component-checkbox-color-check-icon, var(--sd-color-white)));
   transform: scale(0);
   transform-origin: center 75%;
 }
 .sd-checkbox:hover .sd-checkbox-icon {
-  border-color: var(--sd-color-fill-4);
+  border-color: var(--component-checkbox-checkbox-mask-color-border-hover, var(--component-checkbox-mask-color-border-hover, var(--sd-color-fill-4)));
   transition: border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
 .sd-checkbox-checked:hover .sd-checkbox-icon, .sd-checkbox-indeterminate:hover .sd-checkbox-icon {
   transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
 .sd-checkbox-checked .sd-checkbox-icon {
-  background-color: rgb(var(--sd-primary-6));
-  border-color: transparent;
+  background-color: var(--component-checkbox-checkbox-mask-color-bg-checked, var(--component-checkbox-mask-color-bg-checked, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  border-color: var(--component-checkbox-checkbox-mask-color-border-checked, var(--component-checkbox-mask-color-border-checked, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-checkbox-checked .sd-checkbox-icon-check {
   transform: scale(1);
   transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
 .sd-checkbox-indeterminate .sd-checkbox-icon {
-  background-color: rgb(var(--sd-primary-6));
-  border-color: transparent;
+  background-color: var(--component-checkbox-checkbox-mask-color-bg-checked, var(--component-checkbox-mask-color-bg-checked, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  border-color: var(--component-checkbox-checkbox-mask-color-border-checked, var(--component-checkbox-mask-color-border-checked, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-checkbox-indeterminate .sd-checkbox-icon svg {
   transform: scale(0);
@@ -113,41 +113,41 @@
   cursor: not-allowed;
 }
 .sd-checkbox.sd-checkbox-disabled:hover .sd-checkbox-mask {
-  border-color: var(--sd-color-fill-3);
+  border-color: var(--component-checkbox-checkbox-mask-color-border-disabled, var(--component-checkbox-mask-color-border-disabled, var(--sd-color-fill-3)));
 }
 .sd-checkbox-checked:hover .sd-checkbox-icon, .sd-checkbox-indeterminate:hover .sd-checkbox-icon {
-  border-color: transparent;
+  border-color: var(--component-checkbox-checkbox-mask-color-border-checked, var(--component-checkbox-mask-color-border-checked, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-checkbox-disabled .sd-checkbox-icon {
-  background-color: var(--sd-color-fill-2);
-  border-color: var(--sd-color-fill-3);
+  background-color: var(--component-checkbox-checkbox-mask-color-bg-disabled, var(--component-checkbox-mask-color-bg-disabled, var(--sd-color-fill-2)));
+  border-color: var(--component-checkbox-checkbox-mask-color-border-disabled, var(--component-checkbox-mask-color-border-disabled, var(--sd-color-fill-3)));
 }
 .sd-checkbox-disabled.sd-checkbox-checked .sd-checkbox-icon, .sd-checkbox-disabled.sd-checkbox-checked:hover .sd-checkbox-icon {
-  background-color: var(--sd-color-primary-light-3);
-  border-color: transparent;
+  background-color: var(--component-checkbox-checkbox-mask-color-bg-checked-disabled, var(--component-checkbox-mask-color-bg-checked-disabled, var(--sd-color-primary-light-3)));
+  border-color: var(--component-checkbox-checkbox-mask-color-border-checked-disabled, var(--component-checkbox-mask-color-border-checked-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-checkbox-disabled:hover .sd-checkbox-icon-hover::before, .sd-checkbox-checked:hover .sd-checkbox-icon-hover::before, .sd-checkbox-indeterminate:hover .sd-checkbox-icon-hover::before {
   background-color: transparent;
 }
 .sd-checkbox-disabled:hover .sd-checkbox-icon {
-  border-color: var(--sd-color-fill-3);
+  border-color: var(--component-checkbox-checkbox-mask-color-border, var(--component-checkbox-mask-color-border, var(--sd-color-fill-3)));
 }
 .sd-checkbox-disabled .sd-checkbox-label {
-  color: var(--sd-color-text-4);
+  color: var(--component-checkbox-checkbox-color-text-disabled, var(--component-checkbox-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-checkbox-disabled .sd-checkbox-icon-check {
-  color: var(--sd-color-fill-3);
+  color: var(--component-checkbox-checkbox-color-check-icon-disabled, var(--component-checkbox-color-check-icon-disabled, var(--sd-color-fill-3)));
 }
 
 .sd-checkbox-group {
   display: inline-block;
 }
 .sd-checkbox-group .sd-checkbox {
-  margin-right: 16px;
+  margin-right: var(--component-checkbox-checkbox-group-spacing, var(--component-checkbox-group-spacing, var(--spacing-7, 16px)));
 }
 
 .sd-checkbox-group-direction-vertical .sd-checkbox {
   display: flex;
   margin-right: 0;
-  line-height: 32px;
+  line-height: var(--component-checkbox-checkbox-group-size-line-height-vertical, var(--component-checkbox-group-size-line-height-vertical, var(--size-8, 32px)));
 }

package/es/checkbox/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/component.scss' as component;
 @use '@style/theme/index.scss' as global;
 
@@ -68,3 +69,136 @@ $checkbox-color-indeterminate-icon-width: 6px;
 $checkbox-color-indeterminate-icon-height: 2px;
 
 $checkbox-color-indeterminate-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+// @generated runtime tokens — pnpm theme:generate
+$checkbox-mask-border-width: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-border-width',
+  $checkbox-mask-border-width,
+  'border-2'
+);
+$checkbox-mask-border-style: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-border-style',
+  $checkbox-mask-border-style,
+  'border-solid'
+);
+$checkbox-mask-border-radius: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-border-radius',
+  $checkbox-mask-border-radius
+);
+$checkbox-mask-bg-color-bg: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-bg-color-bg',
+  $checkbox-mask-bg-color-bg
+);
+$checkbox-mask-color-bg: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-bg',
+  $checkbox-mask-color-bg
+);
+$checkbox-mask-color-bg_checked: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-bg-checked',
+  $checkbox-mask-color-bg_checked,
+  'color-primary-6'
+);
+$checkbox-mask-color-bg_disabled: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-bg-disabled',
+  $checkbox-mask-color-bg_disabled
+);
+$checkbox-mask-color-bg_checked_disabled: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-bg-checked-disabled',
+  $checkbox-mask-color-bg_checked_disabled
+);
+$checkbox-mask-color-border: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-border',
+  $checkbox-mask-color-border
+);
+$checkbox-mask-color-border_hover: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-border-hover',
+  $checkbox-mask-color-border_hover
+);
+$checkbox-mask-color-border_checked: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-border-checked',
+  $checkbox-mask-color-border_checked,
+  'color-transparent'
+);
+$checkbox-mask-color-border_checked_disabled: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-border-checked-disabled',
+  $checkbox-mask-color-border_checked_disabled,
+  'color-transparent'
+);
+$checkbox-mask-color-border_disabled: theme-runtime.token(
+  'checkbox',
+  'checkbox-mask-color-border-disabled',
+  $checkbox-mask-color-border_disabled
+);
+$checkbox-color-text: theme-runtime.token('checkbox', 'checkbox-color-text', $checkbox-color-text);
+$checkbox-color-text_disabled: theme-runtime.token(
+  'checkbox',
+  'checkbox-color-text-disabled',
+  $checkbox-color-text_disabled
+);
+$checkbox-group-spacing: theme-runtime.token(
+  'checkbox',
+  'checkbox-group-spacing',
+  $checkbox-group-spacing,
+  'spacing-7'
+);
+$checkbox-text-mask-spacing: theme-runtime.token(
+  'checkbox',
+  'checkbox-text-mask-spacing',
+  $checkbox-text-mask-spacing,
+  'spacing-4'
+);
+$checkbox-text-font-size: theme-runtime.token(
+  'checkbox',
+  'checkbox-text-font-size',
+  $checkbox-text-font-size,
+  'font-size-body-3'
+);
+$checkbox-group-size-line-height_vertical: theme-runtime.token(
+  'checkbox',
+  'checkbox-group-size-line-height-vertical',
+  $checkbox-group-size-line-height_vertical,
+  'size-8'
+);
+$checkbox-size-check-icon: theme-runtime.token(
+  'checkbox',
+  'checkbox-size-check-icon',
+  $checkbox-size-check-icon,
+  'size-2'
+);
+$checkbox-color-check-icon: theme-runtime.token(
+  'checkbox',
+  'checkbox-color-check-icon',
+  $checkbox-color-check-icon
+);
+$checkbox-color-check-icon_disabled: theme-runtime.token(
+  'checkbox',
+  'checkbox-color-check-icon-disabled',
+  $checkbox-color-check-icon_disabled
+);
+$checkbox-color-indeterminate-icon-width: theme-runtime.token(
+  'checkbox',
+  'checkbox-color-indeterminate-icon-width',
+  $checkbox-color-indeterminate-icon-width
+);
+$checkbox-color-indeterminate-icon-height: theme-runtime.token(
+  'checkbox',
+  'checkbox-color-indeterminate-icon-height',
+  $checkbox-color-indeterminate-icon-height
+);
+$checkbox-color-indeterminate-icon: theme-runtime.token(
+  'checkbox',
+  'checkbox-color-indeterminate-icon',
+  $checkbox-color-indeterminate-icon
+);