@sdata/web-vue 4.7.1 → 5.0.0

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

@@ -66,7 +66,7 @@
 .sd-picker-prefix {
   padding-right: 4px;
   color: var(--sd-color-text-2);
-  font-size: 14px;
+  font-size: var(--component-input-input-size-default-icon-suffix-size, var(--component-input-size-default-icon-suffix-size, 14px));
 }
 .sd-picker-suffix {
   display: inline-flex;
@@ -77,16 +77,16 @@
   display: inline-flex;
 }
 .sd-picker-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-input-input-feedback-icon-color-validating, var(--component-input-feedback-icon-color-validating, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-picker-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-input-input-feedback-icon-color-success, var(--component-input-feedback-icon-color-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-picker-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-input-input-feedback-icon-color-warning, var(--component-input-feedback-icon-color-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-picker-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-input-input-feedback-icon-color-error, var(--component-input-feedback-icon-color-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-picker-suffix .sd-feedback-icon {
   margin-left: 4px;
@@ -193,8 +193,8 @@
   min-height: 60px;
   overflow: hidden;
   background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
+  border: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-date-picker-picker-container-border-radius, var(--component-date-picker-container-border-radius, var(--sd-border-radius-medium)));
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
 }
 .sd-picker-container-shortcuts-placement-left, .sd-picker-container-shortcuts-placement-right,
@@ -221,13 +221,13 @@
 .sd-picker-container-shortcuts-placement-left .sd-picker-range-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-left .sd-picker-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-left .sd-picker-range-panel-wrapper {
-  border-left: 1px solid var(--sd-color-neutral-3);
+  border-left: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 .sd-picker-container-shortcuts-placement-right .sd-picker-panel-wrapper,
 .sd-picker-container-shortcuts-placement-right .sd-picker-range-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-right .sd-picker-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-right .sd-picker-range-panel-wrapper {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 
 .sd-picker-container-panel-only,
@@ -247,7 +247,7 @@
 .sd-picker-header {
   display: flex;
   padding: 8px 16px;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 .sd-picker-header-title {
   flex: 1;
@@ -261,11 +261,11 @@
   height: 24px;
   margin-right: 2px;
   margin-left: 2px;
-  color: var(--sd-color-text-2);
+  color: var(--component-date-picker-picker-color-switch-icon, var(--component-date-picker-color-switch-icon, var(--sd-color-text-2)));
   font-size: 12px;
   line-height: 24px;
   text-align: center;
-  background-color: var(--sd-color-bg-popup);
+  background-color: var(--component-date-picker-picker-color-bg-switch-icon, var(--component-date-picker-color-bg-switch-icon, var(--sd-color-bg-popup)));
   border-radius: 50%;
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   user-select: none;
@@ -274,7 +274,7 @@
   cursor: pointer;
 }
 .sd-picker-header-icon:not(.sd-picker-header-icon-hidden):hover {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-date-picker-picker-color-bg-switch-icon-hover, var(--component-date-picker-color-bg-switch-icon-hover, var(--sd-color-fill-3)));
 }
 .sd-picker-header-label {
   padding: 2px;
@@ -283,7 +283,7 @@
   transition: background-color 0.1s;
 }
 .sd-picker-header-label:hover {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-date-picker-picker-panel-color-bg-label-hover, var(--component-date-picker-panel-color-bg-label-hover, var(--sd-color-fill-3)));
 }
 .sd-picker-body {
   padding: 14px 16px;
@@ -298,7 +298,7 @@
   flex: 1;
   height: 32px;
   padding: 0;
-  color: var(--sd-color-text-3);
+  color: var(--component-date-picker-picker-panel-color-text-week, var(--component-date-picker-panel-color-text-week, var(--sd-color-text-3)));
   font-weight: 400;
   line-height: 32px;
   text-align: center;
@@ -316,31 +316,31 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 4px 0;
+  padding: var(--component-date-picker-picker-panel-cell-padding-vertical, var(--component-date-picker-panel-cell-padding-vertical, 4px)) 0;
   cursor: pointer;
 }
 .sd-picker-date-value {
-  min-width: 24px;
-  height: 24px;
-  color: var(--sd-color-text-4);
+  min-width: var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px));
+  height: var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px));
+  color: var(--component-date-picker-picker-color-cell-text-not-in-view, var(--component-date-picker-color-cell-text-not-in-view, var(--sd-color-text-4)));
   font-size: 14px;
-  line-height: 24px;
+  line-height: var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px));
   text-align: center;
-  border-radius: var(--sd-border-radius-circle);
+  border-radius: var(--component-date-picker-picker-panel-border-radius-cell-selected, var(--component-date-picker-panel-border-radius-cell-selected, var(--sd-border-radius-circle)));
   cursor: pointer;
 }
 .sd-picker-cell-in-view .sd-picker-date-value {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
+  color: var(--component-date-picker-picker-color-cell-text-in-view, var(--component-date-picker-color-cell-text-in-view, var(--sd-color-text-1)));
+  font-weight: var(--component-date-picker-picker-cell-font-weight-in-view, var(--component-date-picker-cell-font-weight-in-view, var(--font-weight-500, 500)));
 }
 .sd-picker-cell-selected .sd-picker-date-value {
-  color: var(--sd-color-white);
-  background-color: rgb(var(--sd-primary-6));
+  color: var(--component-date-picker-picker-panel-color-text-cell-selected, var(--component-date-picker-panel-color-text-cell-selected, var(--sd-color-white)));
+  background-color: var(--component-date-picker-picker-panel-color-bg-cell-selected, var(--component-date-picker-panel-color-bg-cell-selected, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-picker-cell-in-view:not(.sd-picker-cell-selected, .sd-picker-cell-range-start, .sd-picker-cell-range-end, .sd-picker-cell-disabled, .sd-picker-cell-week) .sd-picker-date-value:hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-3);
+  color: var(--component-date-picker-picker-panel-color-text-cell-hover, var(--component-date-picker-panel-color-text-cell-hover, var(--sd-color-text-1)));
+  background-color: var(--component-date-picker-picker-panel-color-bg-cell-hover, var(--component-date-picker-panel-color-bg-cell-hover, var(--sd-color-fill-3)));
 }
 .sd-picker-cell-today {
   position: relative;
@@ -353,49 +353,49 @@
   width: 4px;
   height: 4px;
   margin-left: -2px;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-date-picker-picker-panel-color-current-time-dot, var(--component-date-picker-panel-color-current-time-dot, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   border-radius: 50%;
   content: "";
 }
 .sd-picker-cell-in-range .sd-picker-date {
-  background-color: var(--sd-color-primary-light-1);
+  background-color: var(--component-date-picker-picker-color-bg-cell-in-range, var(--component-date-picker-color-bg-cell-in-range, var(--sd-color-primary-light-1)));
 }
 .sd-picker-cell-range-start .sd-picker-date {
-  border-top-left-radius: 24px;
-  border-bottom-left-radius: 24px;
+  border-top-left-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
+  border-bottom-left-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 .sd-picker-cell-range-end .sd-picker-date {
-  border-top-right-radius: 24px;
-  border-bottom-right-radius: 24px;
+  border-top-right-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
+  border-bottom-right-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 .sd-picker-cell-in-range-near-hover .sd-picker-date {
   border-radius: 0;
 }
 .sd-picker-cell-range-start .sd-picker-date-value, .sd-picker-cell-range-end .sd-picker-date-value {
-  color: var(--sd-color-white);
-  background-color: rgb(var(--sd-primary-6));
-  border-radius: var(--sd-border-radius-circle);
+  color: var(--component-date-picker-picker-color-text-cell-range-boundary, var(--component-date-picker-color-text-cell-range-boundary, var(--sd-color-white)));
+  background-color: var(--component-date-picker-picker-color-bg-cell-range-boundary, var(--component-date-picker-color-bg-cell-range-boundary, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  border-radius: var(--component-date-picker-picker-panel-border-radius-cell-selected, var(--component-date-picker-panel-border-radius-cell-selected, var(--sd-border-radius-circle)));
 }
 .sd-picker-cell-hover-in-range .sd-picker-date {
-  background-color: var(--sd-color-primary-light-1);
+  background-color: var(--component-date-picker-picker-color-bg-cell-hover-in-range, var(--component-date-picker-color-bg-cell-hover-in-range, var(--sd-color-primary-light-1)));
 }
 .sd-picker-cell-hover-range-start .sd-picker-date {
-  border-radius: 24px 0 0 24px;
+  border-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px)))) 0 0 var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 .sd-picker-cell-hover-range-end .sd-picker-date {
-  border-radius: 0 24px 24px 0;
+  border-radius: 0 var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px)))) var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px)))) 0;
 }
 .sd-picker-cell-hover-range-start .sd-picker-date-value, .sd-picker-cell-hover-range-end .sd-picker-date-value {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-primary-light-2);
+  color: var(--component-date-picker-picker-color-text-cell-hover-range-boundary, var(--component-date-picker-color-text-cell-hover-range-boundary, var(--sd-color-text-1)));
+  background-color: var(--component-date-picker-picker-color-bg-cell-hover-range-boundary, var(--component-date-picker-color-bg-cell-hover-range-boundary, var(--sd-color-primary-light-2)));
   border-radius: 50%;
 }
 .sd-picker-cell-disabled .sd-picker-date {
-  background-color: var(--sd-color-fill-1);
+  background-color: var(--component-date-picker-picker-color-bg-cell-disabled, var(--component-date-picker-color-bg-cell-disabled, var(--sd-color-fill-1)));
   cursor: not-allowed;
 }
 .sd-picker-cell-disabled .sd-picker-date-value {
-  color: var(--sd-color-text-4);
+  color: var(--component-date-picker-picker-color-cell-text-not-in-view, var(--component-date-picker-color-cell-text-not-in-view, var(--sd-color-text-4)));
   background-color: transparent;
   cursor: not-allowed;
 }
@@ -409,7 +409,7 @@
   justify-content: space-between;
   box-sizing: border-box;
   padding: 3px 8px;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 .sd-picker-footer-btn-wrapper :only-child {
   margin-left: auto;
@@ -419,14 +419,14 @@
   padding: 8px 24px;
   color: var(--sd-color-text-1);
   font-size: 12px;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 .sd-picker-footer-now-wrapper {
   box-sizing: border-box;
   height: 36px;
   line-height: 36px;
   text-align: center;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 .sd-picker-btn-confirm {
   margin: 5px 0;
@@ -461,7 +461,7 @@
 }
 
 .sd-panel-date-inner {
-  width: 265px;
+  width: var(--component-date-picker-picker-panel-date-width, var(--component-date-picker-panel-date-width, 265px));
 }
 
 .sd-panel-date-inner .sd-picker-body {
@@ -471,7 +471,7 @@
 .sd-panel-date-timepicker {
   display: flex;
   flex-direction: column;
-  border-left: 1px solid var(--sd-color-neutral-3);
+  border-left: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 
 .sd-panel-date-timepicker-title {
@@ -482,7 +482,7 @@
   font-size: 14px;
   line-height: 40px;
   text-align: center;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  border-bottom: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 
 .sd-panel-date-timepicker .sd-timepicker {
@@ -519,7 +519,7 @@
 }
 
 .sd-panel-date-footer {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 
 .sd-panel-date-with-view-tabs {
@@ -546,17 +546,17 @@
 
 .sd-panel-date-view-tabs {
   display: flex;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
 }
 
 .sd-panel-date-view-tab-pane {
   flex: 1;
-  height: 50px;
-  color: var(--sd-color-text-4);
-  font-size: 14px;
-  line-height: 50px;
+  height: var(--component-date-picker-datepicker-view-tabs-height, var(--component-date-picker-view-tabs-height, 50px));
+  color: var(--component-date-picker-datepicker-view-tab-pane-color-text-unactive, var(--component-date-picker-view-tab-pane-color-text-unactive, var(--sd-color-text-4)));
+  font-size: var(--component-date-picker-datepicker-view-tab-pane-font-size, var(--component-date-picker-view-tab-pane-font-size, 14px));
+  line-height: var(--component-date-picker-datepicker-view-tabs-height, var(--component-date-picker-view-tabs-height, 50px));
   text-align: center;
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: 1px solid var(--component-date-picker-picker-panel-color-border, var(--component-date-picker-panel-color-border, var(--sd-color-neutral-3)));
   cursor: pointer;
 }
 
@@ -565,11 +565,11 @@
 }
 
 .sd-panel-date-view-tab-pane-text {
-  margin-left: 8px;
+  margin-left: var(--component-date-picker-datepicker-view-tab-pane-spacing-text-icon, var(--component-date-picker-view-tab-pane-spacing-text-icon, 8px));
 }
 
 .sd-panel-date-view-tab-pane-active {
-  color: var(--sd-color-text-1);
+  color: var(--component-date-picker-datepicker-view-tab-pane-color-text-active, var(--component-date-picker-view-tab-pane-color-text-active, var(--sd-color-text-1)));
 }
 
 /******** borderSize *******/
@@ -593,7 +593,7 @@
 .sd-panel-quarter,
 .sd-panel-year {
   box-sizing: border-box;
-  width: 265px;
+  width: var(--component-date-picker-picker-panel-month-width, var(--component-date-picker-panel-month-width, 265px));
 }
 
 .sd-panel-month .sd-picker-date,
@@ -606,13 +606,13 @@
 .sd-panel-quarter .sd-picker-date-value,
 .sd-panel-year .sd-picker-date-value {
   width: 100%;
-  border-radius: 24px;
+  border-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 
 .sd-panel-month .sd-picker-cell:not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not(.sd-picker-cell-week) .sd-picker-date-value:hover,
 .sd-panel-quarter .sd-picker-cell:not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not(.sd-picker-cell-week) .sd-picker-date-value:hover,
 .sd-panel-year .sd-picker-cell:not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not(.sd-picker-cell-disabled):not(.sd-picker-cell-week) .sd-picker-date-value:hover {
-  border-radius: 24px;
+  border-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 
 /******** borderSize *******/
@@ -634,7 +634,7 @@
 /********* icon hover *********/
 .sd-panel-year {
   box-sizing: border-box;
-  width: 265px;
+  width: var(--component-date-picker-picker-panel-year-width, var(--component-date-picker-panel-year-width, 265px));
 }
 
 /******** borderSize *******/
@@ -663,7 +663,7 @@
 }
 
 .sd-panel-week-inner {
-  width: 298px;
+  width: var(--component-date-picker-picker-panel-week-width, var(--component-date-picker-panel-week-width, 298px));
 }
 
 .sd-panel-week-inner .sd-picker-body {
@@ -685,28 +685,28 @@
 
 .sd-panel-week .sd-picker-cell:nth-child(2) .sd-picker-date {
   padding-left: 4px;
-  border-top-left-radius: 24px;
-  border-bottom-left-radius: 24px;
+  border-top-left-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
+  border-bottom-left-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 
 .sd-panel-week .sd-picker-cell:nth-child(2) .sd-picker-date .sd-picker-date-value {
-  border-top-left-radius: 24px;
-  border-bottom-left-radius: 24px;
+  border-top-left-radius: var(--component-date-picker-picker-panel-cell-border-radius, var(--component-date-picker-panel-cell-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
+  border-bottom-left-radius: var(--component-date-picker-picker-panel-cell-border-radius, var(--component-date-picker-panel-cell-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 
 .sd-panel-week .sd-picker-cell:nth-child(8) .sd-picker-date {
   padding-right: 4px;
-  border-top-right-radius: 24px;
-  border-bottom-right-radius: 24px;
+  border-top-right-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
+  border-bottom-right-radius: var(--component-date-picker-picker-panel-cell-boundary-border-radius, var(--component-date-picker-panel-cell-boundary-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 
 .sd-panel-week .sd-picker-cell:nth-child(8) .sd-picker-date .sd-picker-date-value {
-  border-top-right-radius: 24px;
-  border-bottom-right-radius: 24px;
+  border-top-right-radius: var(--component-date-picker-picker-panel-cell-border-radius, var(--component-date-picker-panel-cell-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
+  border-bottom-right-radius: var(--component-date-picker-picker-panel-cell-border-radius, var(--component-date-picker-panel-cell-border-radius, var(--component-date-picker-picker-panel-cell-circle-height, var(--component-date-picker-panel-cell-circle-height, 24px))));
 }
 
 .sd-panel-week .sd-picker-row-week:hover .sd-picker-cell:not(.sd-picker-cell-week):not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end) .sd-picker-date-value {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-date-picker-picker-panel-color-bg-cell-hover, var(--component-date-picker-panel-color-bg-cell-hover, var(--sd-color-fill-3)));
 }
 
 /******** borderSize *******/
@@ -728,7 +728,7 @@
 /********* icon hover *********/
 .sd-panel-quarter {
   box-sizing: border-box;
-  width: 265px;
+  width: var(--component-date-picker-picker-panel-quarter-width, var(--component-date-picker-panel-quarter-width, 265px));
 }
 
 /******** borderSize *******/

package/es/date-picker/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -85,3 +86,231 @@ $picker-panel-color-bg-label_hover: var(
   string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
 );
 $picker-panel-color-text-week: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+// @generated runtime tokens — pnpm theme:generate
+$picker-container-border-radius: theme-runtime.token(
+  'date-picker',
+  'picker-container-border-radius',
+  $picker-container-border-radius
+);
+$picker-header-padding-horizontal: theme-runtime.token(
+  'date-picker',
+  'picker-header-padding-horizontal',
+  $picker-header-padding-horizontal
+);
+$picker-header-padding-vertical: theme-runtime.token(
+  'date-picker',
+  'picker-header-padding-vertical',
+  $picker-header-padding-vertical
+);
+$picker-panel-date-width: theme-runtime.token(
+  'date-picker',
+  'picker-panel-date-width',
+  $picker-panel-date-width
+);
+$picker-panel-month-width: theme-runtime.token(
+  'date-picker',
+  'picker-panel-month-width',
+  $picker-panel-month-width
+);
+$picker-panel-year-width: theme-runtime.token(
+  'date-picker',
+  'picker-panel-year-width',
+  $picker-panel-year-width
+);
+$picker-panel-week-width: theme-runtime.token(
+  'date-picker',
+  'picker-panel-week-width',
+  $picker-panel-week-width
+);
+$picker-panel-quarter-width: theme-runtime.token(
+  'date-picker',
+  'picker-panel-quarter-width',
+  $picker-panel-quarter-width
+);
+$picker-panel-time-cell-width: theme-runtime.token(
+  'date-picker',
+  'picker-panel-time-cell-width',
+  $picker-panel-time-cell-width
+);
+$picker-panel-time-cell-spacing-horizontal: theme-runtime.token(
+  'date-picker',
+  'picker-panel-time-cell-spacing-horizontal',
+  $picker-panel-time-cell-spacing-horizontal
+);
+$picker-panel-time-padding-horizontal: theme-runtime.token(
+  'date-picker',
+  'picker-panel-time-padding-horizontal',
+  $picker-panel-time-padding-horizontal
+);
+$picker-panel-cell-padding-vertical: theme-runtime.token(
+  'date-picker',
+  'picker-panel-cell-padding-vertical',
+  $picker-panel-cell-padding-vertical
+);
+$picker-panel-cell-circle-height: theme-runtime.token(
+  'date-picker',
+  'picker-panel-cell-circle-height',
+  $picker-panel-cell-circle-height
+);
+$picker-color-switch-icon: theme-runtime.token(
+  'date-picker',
+  'picker-color-switch-icon',
+  $picker-color-switch-icon
+);
+$picker-color-bg-switch-icon: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-switch-icon',
+  $picker-color-bg-switch-icon
+);
+$picker-color-bg-switch-icon_hover: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-switch-icon-hover',
+  $picker-color-bg-switch-icon_hover
+);
+$picker-cell-font-weight-in-view: theme-runtime.token(
+  'date-picker',
+  'picker-cell-font-weight-in-view',
+  $picker-cell-font-weight-in-view,
+  'font-weight-500'
+);
+$picker-color-cell-text-in-view: theme-runtime.token(
+  'date-picker',
+  'picker-color-cell-text-in-view',
+  $picker-color-cell-text-in-view
+);
+$picker-color-cell-text-not-in-view: theme-runtime.token(
+  'date-picker',
+  'picker-color-cell-text-not-in-view',
+  $picker-color-cell-text-not-in-view
+);
+$picker-color-bg-circle_selected: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-circle-selected',
+  $picker-color-bg-circle_selected,
+  'color-primary-6'
+);
+$picker-color-bg-circle_selected: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-circle-selected',
+  $picker-color-bg-circle_selected,
+  'color-primary-6'
+);
+$picker-color-bg-cell-in-range: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-cell-in-range',
+  $picker-color-bg-cell-in-range
+);
+$picker-color-bg-cell-disabled: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-cell-disabled',
+  $picker-color-bg-cell-disabled
+);
+$picker-color-text-cell-range-boundary: theme-runtime.token(
+  'date-picker',
+  'picker-color-text-cell-range-boundary',
+  $picker-color-text-cell-range-boundary
+);
+$picker-color-bg-cell-range-boundary: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-cell-range-boundary',
+  $picker-color-bg-cell-range-boundary,
+  'color-primary-6'
+);
+$picker-color-bg-cell-hover-in-range: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-cell-hover-in-range',
+  $picker-color-bg-cell-hover-in-range
+);
+$picker-color-text-cell-hover-range-boundary: theme-runtime.token(
+  'date-picker',
+  'picker-color-text-cell-hover-range-boundary',
+  $picker-color-text-cell-hover-range-boundary
+);
+$picker-color-bg-cell-hover-range-boundary: theme-runtime.token(
+  'date-picker',
+  'picker-color-bg-cell-hover-range-boundary',
+  $picker-color-bg-cell-hover-range-boundary
+);
+$picker-panel-color-border: theme-runtime.token(
+  'date-picker',
+  'picker-panel-color-border',
+  $picker-panel-color-border
+);
+$picker-panel-color-text-cell_hover: theme-runtime.token(
+  'date-picker',
+  'picker-panel-color-text-cell-hover',
+  $picker-panel-color-text-cell_hover
+);
+$picker-panel-color-bg-cell_hover: theme-runtime.token(
+  'date-picker',
+  'picker-panel-color-bg-cell-hover',
+  $picker-panel-color-bg-cell_hover
+);
+$picker-panel-color-text-cell_selected: theme-runtime.token(
+  'date-picker',
+  'picker-panel-color-text-cell-selected',
+  $picker-panel-color-text-cell_selected
+);
+$picker-panel-color-bg-cell_selected: theme-runtime.token(
+  'date-picker',
+  'picker-panel-color-bg-cell-selected',
+  $picker-panel-color-bg-cell_selected,
+  'color-primary-6'
+);
+$picker-panel-color-current-time-dot: theme-runtime.token(
+  'date-picker',
+  'picker-panel-color-current-time-dot',
+  $picker-panel-color-current-time-dot,
+  'color-primary-6'
+);
+$picker-panel-border-radius-cell_selected: theme-runtime.token(
+  'date-picker',
+  'picker-panel-border-radius-cell-selected',
+  $picker-panel-border-radius-cell_selected
+);
+$picker-panel-cell-boundary-border-radius: theme-runtime.token(
+  'date-picker',
+  'picker-panel-cell-boundary-border-radius',
+  $picker-panel-cell-circle-height
+);
+$picker-panel-cell-border-radius: theme-runtime.token(
+  'date-picker',
+  'picker-panel-cell-border-radius',
+  $picker-panel-cell-circle-height
+);
+$datepicker-view-tabs-height: theme-runtime.token(
+  'date-picker',
+  'datepicker-view-tabs-height',
+  $datepicker-view-tabs-height
+);
+$datepicker-view-tab-pane-color-text_unactive: theme-runtime.token(
+  'date-picker',
+  'datepicker-view-tab-pane-color-text-unactive',
+  $datepicker-view-tab-pane-color-text_unactive
+);
+$datepicker-view-tab-pane-color-text_active: theme-runtime.token(
+  'date-picker',
+  'datepicker-view-tab-pane-color-text-active',
+  $datepicker-view-tab-pane-color-text_active
+);
+$datepicker-view-tab-pane-font-size: theme-runtime.token(
+  'date-picker',
+  'datepicker-view-tab-pane-font-size',
+  $datepicker-view-tab-pane-font-size
+);
+$datepicker-view-tab-pane-spacing-text-icon: theme-runtime.token(
+  'date-picker',
+  'datepicker-view-tab-pane-spacing-text-icon',
+  $datepicker-view-tab-pane-spacing-text-icon
+);
+$picker-panel-color-bg-label_hover: theme-runtime.token(
+  'date-picker',
+  'picker-panel-color-bg-label-hover',
+  $picker-panel-color-bg-label_hover
+);
+$picker-panel-color-text-week: theme-runtime.token(
+  'date-picker',
+  'picker-panel-color-text-week',
+  $picker-panel-color-text-week
+);