From 56cc3fa5078037c43d0645103b957e1cdcde6801 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B3=8A=E6=B7=9E?= <zhaoyuliang.zyl@alibaba-inc.com>
Date: Tue, 26 Nov 2024 11:45:38 +0800
Subject: [PATCH] feat(DatePicker2): suppert theme configuration

---
 .fusion                                       |   1 +
 .../date-picker2/__docs__/theme/index.tsx     | 284 ++++++++
 components/date-picker2/main.scss             | 647 +++++++++---------
 components/date-picker2/rtl.scss              | 319 ++++-----
 components/date-picker2/scss/footer.scss      |  23 +-
 components/date-picker2/scss/variable.scss    | 250 ++++++-
 6 files changed, 1018 insertions(+), 506 deletions(-)
 create mode 100644 components/date-picker2/__docs__/theme/index.tsx

diff --git a/.fusion b/.fusion
index 8677f3cee8..8484eb69ca 100644
--- a/.fusion
+++ b/.fusion
@@ -86,6 +86,7 @@
     "collapse": "lib/collapse/scss/variable.scss",
     "time-picker": "lib/time-picker/scss/variable.scss",
     "date-picker": "lib/date-picker/scss/variable.scss",
+    "date-picker2": "lib/date-picker2/scss/variable.scss",
     "drawer": "lib/drawer/scss/variable.scss",
     "message": "lib/message/scss/variable.scss",
     "dialog": "lib/dialog/scss/variable.scss",
diff --git a/components/date-picker2/__docs__/theme/index.tsx b/components/date-picker2/__docs__/theme/index.tsx
new file mode 100644
index 0000000000..39a1a234d8
--- /dev/null
+++ b/components/date-picker2/__docs__/theme/index.tsx
@@ -0,0 +1,284 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import dayjs, { ConfigType, Dayjs } from 'dayjs';
+import { Demo, DemoGroup, initDemo } from '../../../demo-helper';
+import DatePicker, { type RangePickerProps, type DatePickerProps } from '../../index';
+import ConfigProvider from '../../../config-provider';
+import zhCN from '../../../locale/zh-cn';
+import enUS from '../../../locale/en-us';
+import '../../../demo-helper/style';
+import '../../style';
+
+const { RangePicker } = DatePicker;
+
+const i18nMap = {
+    'zh-cn': {
+        datepicker: '日期选择',
+        rangepicker: '日期范围选择',
+        label: '标签：',
+        normal: '普通',
+        expandNormal: '普通展开',
+        expandTime: '带时间展开',
+        selected: '选中后',
+        disabled: '禁用',
+        disabledDate: '禁用某些日期',
+        week: '星期',
+        month: '月份',
+        year: '年份',
+        decade: '季度',
+    },
+    'en-us': {
+        datepicker: 'Date Picker2',
+        rangepicker: 'Range Picker2',
+        label: 'Label',
+        normal: 'Normal',
+        expandNormal: 'Date Expanded',
+        expandTime: 'Datetime Expanded',
+        selected: 'Selected',
+        disabled: 'Disabled',
+        disabledDate: 'Disabled Date',
+        week: 'Week',
+        month: 'Month',
+        year: 'Year',
+        decade: 'Decade',
+    },
+};
+
+let startValue: ConfigType;
+let endValue: ConfigType;
+
+class FunctionDemo extends React.Component<{
+    locale: (typeof i18nMap)['en-us'];
+    pickerRender: (
+        locale: (typeof i18nMap)['en-us'],
+        demoFunction: any,
+        onFunctionChange: any,
+        otherProps: any
+    ) => React.ReactNode;
+}> {
+    state = {
+        demoFunction: {
+            label: {
+                label: '内置标签',
+                value: 'false',
+                enum: [
+                    { label: '显示', value: 'true' },
+                    { label: '隐藏', value: 'false' },
+                ],
+            },
+        },
+    };
+
+    onFunctionChange = (val: unknown) => {
+        this.setState({
+            demoFunction: val,
+        });
+    };
+
+    render() {
+        const { locale, pickerRender } = this.props;
+        const { demoFunction } = this.state;
+        const hasLabel = demoFunction.label.value === 'true';
+
+        const otherProps: Record<string, unknown> = {
+            popupContainer: (target: HTMLElement) => target.parentNode,
+        };
+
+        if (hasLabel) {
+            otherProps.label = locale.label;
+        }
+
+        return pickerRender(locale, demoFunction, this.onFunctionChange, otherProps);
+    }
+}
+
+function renderDatePicker(
+    locale: (typeof i18nMap)['en-us'],
+    demoFunction: any,
+    onFunctionChange: any,
+    otherProps: DatePickerProps
+) {
+    const disabledDate = function (date: Dayjs, mode: string) {
+        switch (mode) {
+            case 'date':
+                return date.valueOf() <= dayjs().valueOf();
+            case 'year':
+                return date.year() < dayjs().year();
+            case 'month':
+                return date.year() * 100 + date.month() < dayjs().year() * 100 + dayjs().month();
+            default:
+                return false;
+        }
+    };
+
+    return (
+        <Demo
+            title={locale.datepicker}
+            demoFunction={demoFunction}
+            onFunctionChange={onFunctionChange}
+            block
+        >
+            <DemoGroup label={locale.normal}>
+                <DatePicker visible={false} {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.expandNormal} height="340px">
+                <DatePicker
+                    value={startValue}
+                    visible
+                    popupProps={{ needAdjust: false }}
+                    {...otherProps}
+                />
+            </DemoGroup>
+
+            <DemoGroup label={locale.expandTime} height="370px">
+                <DatePicker
+                    value={startValue}
+                    visible
+                    showTime
+                    popupProps={{ needAdjust: false }}
+                    {...otherProps}
+                />
+            </DemoGroup>
+
+            <DemoGroup label={locale.selected}>
+                <DatePicker visible={false} value={startValue} {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.disabled}>
+                <DatePicker disabled value={startValue} {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.disabledDate} height="300px">
+                <DatePicker
+                    visible
+                    disabledDate={disabledDate}
+                    value={startValue}
+                    {...otherProps}
+                />
+            </DemoGroup>
+            <DemoGroup label={locale.week} height="300px">
+                <DatePicker.WeekPicker visible value={startValue} {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.month} height="300px">
+                <DatePicker.MonthPicker visible value={startValue} {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.year} height="300px">
+                <DatePicker.YearPicker visible value={startValue} {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.decade} height="300px">
+                <DatePicker.QuarterPicker visible value={startValue} {...otherProps} />
+            </DemoGroup>
+        </Demo>
+    );
+}
+
+function renderRangePicker(
+    locale: (typeof i18nMap)['en-us'],
+    demoFunction: any,
+    onFunctionChange: any,
+    otherProps: RangePickerProps
+) {
+    const disabledDate = function (date: Dayjs, mode: string) {
+        switch (mode) {
+            case 'date':
+                return date.valueOf() <= dayjs().valueOf();
+            case 'year':
+                return date.year() < dayjs().year();
+            case 'month':
+                return date.year() * 100 + date.month() < dayjs().year() * 100 + dayjs().month();
+            default:
+                return false;
+        }
+    };
+    return (
+        <Demo
+            title={locale.rangepicker}
+            demoFunction={demoFunction}
+            onFunctionChange={onFunctionChange}
+        >
+            <DemoGroup label={locale.normal}>
+                <RangePicker {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.expandNormal} height="370px">
+                <RangePicker
+                    visible
+                    value={[startValue, endValue]}
+                    popupProps={{ needAdjust: false }}
+                    {...otherProps}
+                />
+            </DemoGroup>
+
+            <DemoGroup label={locale.expandTime} height="370px">
+                <RangePicker
+                    visible
+                    showTime
+                    value={[startValue, endValue]}
+                    popupProps={{ needAdjust: false }}
+                    {...otherProps}
+                />
+            </DemoGroup>
+
+            <DemoGroup label={locale.selected}>
+                <RangePicker value={[startValue, endValue]} visible={false} {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.disabled} height="370px">
+                <RangePicker
+                    visible
+                    disabledDate={disabledDate}
+                    value={[startValue, endValue]}
+                    {...otherProps}
+                />
+            </DemoGroup>
+
+            <DemoGroup label={locale.week} height="370px">
+                <RangePicker visible value={[startValue, endValue]} mode="week" {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.month} height="300px">
+                <RangePicker visible value={[startValue, endValue]} mode="month" {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.year} height="300px">
+                <RangePicker visible value={[startValue, endValue]} mode="year" {...otherProps} />
+            </DemoGroup>
+
+            <DemoGroup label={locale.decade} height="300px">
+                <RangePicker
+                    visible
+                    value={[startValue, endValue]}
+                    mode="quarter"
+                    {...otherProps}
+                />
+            </DemoGroup>
+        </Demo>
+    );
+}
+
+function render(i18n: (typeof i18nMap)['en-us'], lang: string) {
+    ReactDOM.render(
+        <ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
+            <div className="demo-container">
+                <FunctionDemo locale={i18n} pickerRender={renderDatePicker} />
+                <FunctionDemo locale={i18n} pickerRender={renderRangePicker} />
+            </div>
+        </ConfigProvider>,
+        document.getElementById('container')
+    );
+}
+
+window.renderDemo = function (lang = 'en-us') {
+    dayjs.locale(lang);
+    startValue = dayjs('2017-11-15 12:00:00', 'YYYY-MM-DD HH:mm:ss', true);
+    endValue = dayjs('2017-12-15 12:00:00', 'YYYY-MM-DD HH:mm:ss', true);
+    render(i18nMap[lang], lang);
+};
+
+renderDemo();
+
+initDemo('date-picker2');
diff --git a/components/date-picker2/main.scss b/components/date-picker2/main.scss
index 0478bda833..7715c0a67b 100644
--- a/components/date-picker2/main.scss
+++ b/components/date-picker2/main.scss
@@ -1,397 +1,378 @@
-@import "../core/index-noreset.scss";
-@import "../calendar2/scss/variable.scss";
-@import "../calendar2/scss/mixin.scss";
-@import "../input/scss/variable.scss";
-@import "../input/scss/mixin.scss";
-@import "./scss/variable";
+@import '../core/index-noreset.scss';
+@import '../calendar2/scss/variable.scss';
+@import '../calendar2/scss/mixin.scss';
+@import '../input/scss/variable.scss';
+@import '../input/scss/mixin.scss';
+@import './scss/variable';
 
-@import "./scss/footer.scss";
-@import "./rtl.scss";
+@import './scss/footer.scss';
+@import './rtl.scss';
 
 #{$date-picker2-prefix} {
+  outline: none;
+  display: inline-table;
+  position: relative;
+  width: inherit;
+
+  &-overlay {
+    vertical-align: top;
+    padding: $date-picker2-overlay-padding-tb $date-picker2-overlay-padding-lr;
+  }
+
+  &-overlay-range {
+    padding: $date-picker2-range-overlay-padding-tb $date-picker2-range-overlay-padding-lr;
+  }
+
+  &-wrapper {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
+    background-color: $date-picker2-wrapper-background-color;
+    border: $date-picker2-wrapper-border-width $date-picker2-wrapper-border-style $date-picker2-wrapper-border-color;
+    border-radius: $date-picker2-wrapper-border-radius;
+
+    #{$calendar2-prefix} {
+      &-panel {
+        border-radius: $date-picker2-wrapper-calendar2-panel-border-radius;
+      }
+      &-body {
+        width: 272px;
+      }
+      &-cell::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 0px;
+        left: 0px;
+        z-index: 1;
+        height: $date-picker2-wrapper-calendar2-cell-before-height;
+        transform: translateY(-50%);
+      }
+      &-cell:last-child::before {
+        border-top-right-radius: 2px;
+        border-bottom-right-radius: 2px;
+        right: 8px;
+      }
+      &-cell:first-child::before {
+        border-top-left-radius: 2px;
+        border-bottom-left-radius: 2px;
+        left: 8px;
+      }
+    }
+  }
+
+  &-input {
+    display: inline-flex;
+    align-items: center;
     outline: none;
-    display: inline-table;
-    position: relative;
+    box-sizing: border-box;
+    border: $input-border-width $date-picker2-input-border-style $input-border-color;
+    vertical-align: middle;
     width: inherit;
-
-    &-overlay {
-        vertical-align: top;
-        padding: 4px 0px;
+    background-color: $input-bg-color;
+
+    #{$input-prefix} {
+      border: none;
+      // use flex-basis instead width to be compiable with safari
+      flex-basis: 100%;
+      height: 100%;
+      width: 100%;
+      input {
+        height: 100%;
+        width: auto;
+      }
     }
 
-    &-overlay-range {
-        padding: 12px 0px;
+    &#{$date-picker2-prefix}-input-small {
+      @include input-size($form-element-small-height, $input-s-padding, $form-element-small-font-size, $input-s-label-padding-left, $input-s-icon-padding-right);
+      @include input-icon-size($form-element-small-icon-size);
+      @include input-border-radius($form-element-small-corner);
     }
 
-    &-wrapper {
-        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .12);
-        background-color: $color-white;
-        border: 1px solid $color-line1-1;
-        border-radius: $corner-1;
-
-        #{$calendar2-prefix} {
-            &-panel {
-                border-radius: $corner-1;
-            }
-            &-body {
-                width: 272px;
-            }
-            &-cell::before {
-                content: "";
-                position: absolute;
-                top: 50%;
-                right: 0px;
-                left: 0px;
-                z-index: 1;
-                height: 24px;
-                transform: translateY(-50%);
-            }
-            &-cell:last-child::before {
-                border-top-right-radius: 2px;
-                border-bottom-right-radius: 2px;
-                right: 8px;
-            }
-            &-cell:first-child::before {
-                border-top-left-radius: 2px;
-                border-bottom-left-radius: 2px;
-                left: 8px;
-            }
-        }
+    &#{$date-picker2-prefix}-input-medium {
+      @include input-size($form-element-medium-height, $input-m-padding, $form-element-medium-font-size, $input-m-label-padding-left, $input-m-icon-padding-right);
+      @include input-icon-size($form-element-medium-icon-size);
+      @include input-border-radius($form-element-medium-corner);
     }
 
-    &-input {
-        display: inline-flex;
-        align-items: center;
-        outline: none;
-        box-sizing: border-box;
-        border: $input-border-width solid $input-border-color;
-        vertical-align: middle;
-        width: inherit;
-        background-color: $input-bg-color;
-
-        #{$input-prefix} {
-            border: none;
-            // use flex-basis instead width to be compiable with safari
-            flex-basis: 100%;
-            height: 100%;
-            width: 100%;
-            input {
-                height: 100%;
-                width: auto;
-            }
-        }
-
-        &#{$date-picker2-prefix}-input-small {
-            @include input-size(
-                $form-element-small-height,
-                $input-s-padding,
-                $form-element-small-font-size,
-                $input-s-label-padding-left,
-                $input-s-icon-padding-right
-            );
-            @include input-icon-size($form-element-small-icon-size);
-            @include input-border-radius($form-element-small-corner);
-        }
-
-        &#{$date-picker2-prefix}-input-medium {
-            @include input-size(
-                $form-element-medium-height,
-                $input-m-padding,
-                $form-element-medium-font-size,
-                $input-m-label-padding-left,
-                $input-m-icon-padding-right
-            );
-            @include input-icon-size($form-element-medium-icon-size);
-            @include input-border-radius($form-element-medium-corner);
-        }
-
-        &#{$date-picker2-prefix}-input-large {
-            @include input-size(
-                $form-element-large-height,
-                $input-l-padding,
-                $form-element-large-font-size,
-                $input-l-label-padding-left,
-                $input-l-icon-padding-right
-            );
-            @include input-icon-size($form-element-large-icon-size);
-            @include input-border-radius($form-element-large-corner);
-        }
-
-        &:hover {
-            border-color: $input-hover-border-color;
-            background-color: $input-hover-bg-color;
-        }
+    &#{$date-picker2-prefix}-input-large {
+      @include input-size($form-element-large-height, $input-l-padding, $form-element-large-font-size, $input-l-label-padding-left, $input-l-icon-padding-right);
+      @include input-icon-size($form-element-large-icon-size);
+      @include input-border-radius($form-element-large-corner);
+    }
 
-        &#{$date-picker2-prefix}-input-focus {
-            border-color: $input-focus-border-color;
-            background-color: $input-focus-bg-color;
-            box-shadow: 0 0 0 $input-focus-shadow-spread $color-calculate-input-focus-shadow;
-        }
+    &:hover {
+      border-color: $input-hover-border-color;
+      background-color: $input-hover-bg-color;
+    }
 
-        &#{$date-picker2-prefix}-input-noborder {
-            border-color: transparent !important;
-            box-shadow: none !important;
-        }
+    &#{$date-picker2-prefix}-input-focus {
+      border-color: $input-focus-border-color;
+      background-color: $input-focus-bg-color;
+      box-shadow: 0 0 0 $input-focus-shadow-spread $color-calculate-input-focus-shadow;
+    }
 
-        &#{$date-picker2-prefix}-input-disabled {
-            @include input-disabled();
-        }
+    &#{$date-picker2-prefix}-input-noborder {
+      border-color: $date-picker2-input-noborder-border-color !important;
+      box-shadow: none !important;
+    }
 
-        &#{$date-picker2-prefix}-input-error {
-            border-color: $input-feedback-error-border-color;
-        }
+    &#{$date-picker2-prefix}-input-disabled {
+      @include input-disabled();
     }
 
-    &-input-separator {
-        color: $input-border-color;
-        font-size: 12px;
-        line-height: 12px;
-        display: inline-block;
-        min-width: 16px;
-        text-align: center;
+    &#{$date-picker2-prefix}-input-error {
+      border-color: $input-feedback-error-border-color;
     }
+  }
+
+  &-input-separator {
+    color: $input-border-color;
+    font-size: $date-picker2-separator-input-font-size;
+    line-height: 12px;
+    display: inline-block;
+    min-width: $date-picker2-separator-input-min-width;
+    text-align: center;
+  }
 }
 
 .#{$css-prefix} {
-    &range-picker2-panel,
-    &date-picker2-panel {
-        display: inline-flex;
-    }
-
-    &range-picker2-panel:not(.#{$css-prefix}range-picker2-panel-single) {
-        .#{$css-prefix}range-picker-right .#{$css-prefix}calendar2-header-left-btn,
-        .#{$css-prefix}range-picker-left .#{$css-prefix}calendar2-header-right-btn {
-            visibility: hidden;
-        }
+  &range-picker2-panel,
+  &date-picker2-panel {
+    display: inline-flex;
+  }
+
+  &range-picker2-panel:not(.#{$css-prefix}range-picker2-panel-single) {
+    .#{$css-prefix}range-picker-right .#{$css-prefix}calendar2-header-left-btn,
+    .#{$css-prefix}range-picker-left .#{$css-prefix}calendar2-header-right-btn {
+      visibility: hidden;
     }
+  }
 }
 
 #{$range-picker2-prefix}-arrow {
-    display: block;
-    transform: translate(0, -50%) rotate(-45deg);
-    position: absolute;
-    z-index: 1;
-    width: 10px;
-    height: 10px;
-    margin-left: 16.5px;
-    border-color: $color-line1-1 $color-line1-1 transparent transparent;
-    border-style: solid;
-    border-width: 1px;
-    transition: left .3s ease-out;
-    background: $color-white;
+  display: block;
+  transform: translate(0, -50%) rotate(-45deg);
+  position: absolute;
+  z-index: 1;
+  width: 10px;
+  height: 10px;
+  margin-left: 16.5px;
+  border-color: $date-picker2-range-arrow-border-color-t $date-picker2-range-arrow-border-color-r $date-picker2-range-arrow-border-color-b $date-picker2-range-arrow-border-color-l;
+  border-style: solid;
+  border-width: 1px;
+  transition: left 0.3s ease-out;
+  background: $date-picker2-range-arrow-background;
 }
 
 #{$date-picker2-prefix}-tl-bl {
-    #{$range-picker2-prefix}-arrow {
-        top: 12.5px;
-    }
+  #{$range-picker2-prefix}-arrow {
+    top: 12.5px;
+  }
 }
 #{$date-picker2-prefix}-bl-tl {
-    #{$range-picker2-prefix}-arrow {
-        bottom: 13px;
-        transform: translate(0, 50%) rotate(135deg);
-    }
+  #{$range-picker2-prefix}-arrow {
+    bottom: 13px;
+    transform: translate(0, 50%) rotate(135deg);
+  }
 }
 
 .#{$css-prefix}date-time-picker-wrapper {
-    border-left: 1px solid $color-line1-1;
-    #{$calendar2-prefix}-body {
-        padding-right: 0px;
-        padding-left: 0px;
-    }
+  border-left: $date-picker2-wrapper-picker-time-border-left-width $date-picker2-wrapper-picker-time-border-left-style $date-picker2-wrapper-picker-time-border-left-color;
+  #{$calendar2-prefix}-body {
+    padding-right: $date-picker2-wrapper-picker-time-calendar2-body-padding-right;
+    padding-left: $date-picker2-wrapper-picker-time-calendar2-body-padding-left;
+  }
 }
 
 #{$range-picker2-prefix}-panel:not(#{$range-picker2-prefix}-panel-single) {
-    #{$calendar2-prefix}-cell-disabled {
+  #{$calendar2-prefix}-cell-disabled {
+    #{$calendar2-cell-inner} {
+      @include calendar-disabled($date-picker2-range-calendar2-disabled-cell-inner-color, $date-picker2-range-calendar2-disabled-cell-inner-background);
+    }
+  }
+
+  #{$calendar2-prefix}-cell-current {
+    &#{$calendar2-prefix}-cell-selected {
+      &::before {
+        color: $date-picker2-range-calendar2-current-cell-selected-color;
+        background: $date-picker2-range-calendar2-current-cell-selected-background;
+      }
+      #{$calendar2-cell-inner} {
+        color: $date-picker2-range-calendar2-current-cell-selected-inner-color;
+        background: $date-picker2-range-calendar2-current-cell-selected-inner-background;
+      }
+
+      &#{$calendar2-prefix}-cell-range-begin,
+      &#{$calendar2-prefix}-cell-range-end {
         #{$calendar2-cell-inner} {
-            @include calendar-disabled;
+          z-index: 10;
+          @include calendar-selected($date-picker2-range-calendar2-current-cell-selected-begin-inner-color, $date-picker2-range-calendar2-current-cell-selected-begin-inner-background);
         }
+      }
+
+      &#{$calendar2-prefix}-cell-range-begin::before {
+        left: 50%;
+      }
+      &#{$calendar2-prefix}-cell-range-end::before {
+        right: 50%;
+      }
+      &#{$calendar2-prefix}-cell-range-begin-single::before,
+      &#{$calendar2-prefix}-cell-range-end-single::before {
+        display: none;
+      }
     }
 
-    #{$calendar2-prefix}-cell-current {
-        &#{$calendar2-prefix}-cell-selected {
-            &::before {
-                color: $color-text1-3;
-                background: $color-brand1-1;
-            }
-            #{$calendar2-cell-inner} {
-                color: $color-text1-3;
-                background: transparent;
-            }
-
-            &#{$calendar2-prefix}-cell-range-begin,
-            &#{$calendar2-prefix}-cell-range-end {
-                #{$calendar2-cell-inner} {
-                    z-index: 10;
-                    @include calendar-selected;
-                }
-            }
-
-            &#{$calendar2-prefix}-cell-range-begin::before {
-                left: 50%;
-            }
-            &#{$calendar2-prefix}-cell-range-end::before {
-                right: 50%;
-            }
-            &#{$calendar2-prefix}-cell-range-begin-single::before,
-            &#{$calendar2-prefix}-cell-range-end-single::before {
-                display: none;
-            }
-        }
-
-        &#{$calendar2-prefix}-cell-hover {
-            &::after {
-                content: "";
-                position: absolute;
-                top: 50%;
-                right: 0;
-                left: 0;
-                z-index: 2;
-                height: 24px;
-                transform: translateY(-50%);
-                border-color: $color-brand1-9 transparent;
-                border-style: dashed;
-                border-width: 1px;
-            }
-
-            &#{$calendar2-prefix}-cell-hover-begin::after,
-            &:first-child::after {
-                left: 8px;
-            }
-
-            &#{$calendar2-prefix}-cell-hover-end::after,
-            &:last-child::after {
-                right: 8px;
-            }
-
-            &#{$calendar2-prefix}-cell-selected {
-                &#{$calendar2-prefix}-cell-hover-begin::after {
-                    left: 8px;
-                }
-                &#{$calendar2-prefix}-cell-hover-end::after {
-                    right: 8px;
-                }
-            }
-
-
-            &:first-of-type::after {
-                border-top-left-radius: 2px;
-                border-bottom-left-radius: 2px;
-                border-left: 1px dashed $color-brand1-9;
-            }
-            &:last-of-type::after {
-                border-top-right-radius: 2px;
-                border-bottom-right-radius: 2px;
-                border-right: 1px dashed $color-brand1-9;
-            }
-        }
-
-        &#{$calendar2-prefix}-cell-edge-end {
-            &::before {
-                right: 8px;
-            }
-            &::after {
-                right: 8px;
-            }
-            &#{$calendar2-prefix}-cell-hover {
-                &::after {
-                    border-top-right-radius: 2px;
-                    border-bottom-right-radius: 2px;
-                    border-right: 1px dashed $color-brand1-9;
-                }
-            }
-        }
-
+    &#{$calendar2-prefix}-cell-hover {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 0;
+        left: 0;
+        z-index: 2;
+        height: $date-picker2-range-calendar2-current-cell-hover-height;
+        transform: translateY(-50%);
+        border-color: $date-picker2-range-calendar2-current-cell-hover-border-color-tb $date-picker2-range-calendar2-current-cell-hover-border-color-lr;
+        border-style: dashed;
+        border-width: 1px;
+      }
+
+      &#{$calendar2-prefix}-cell-hover-begin::after,
+      &:first-child::after {
+        left: 8px;
+      }
+
+      &#{$calendar2-prefix}-cell-hover-end::after,
+      &:last-child::after {
+        right: 8px;
+      }
+
+      &#{$calendar2-prefix}-cell-selected {
         &#{$calendar2-prefix}-cell-hover-begin::after {
-            border-top: 1px dashed $color-brand1-9;
-            border-left: 1px dashed $color-brand1-9;
-            border-top-left-radius: 2px;
-            border-bottom-left-radius: 2px;
+          left: 8px;
         }
         &#{$calendar2-prefix}-cell-hover-end::after {
-            border-top: 1px dashed $color-brand1-9;
-            border-right: 1px dashed $color-brand1-9;
-            border-top-right-radius: 2px;
-            border-bottom-right-radius: 2px;
+          right: 8px;
         }
+      }
+
+      &:first-of-type::after {
+        border-top-left-radius: 2px;
+        border-bottom-left-radius: 2px;
+        border-left: $date-picker2-range-calendar2-current-cell-hover-border-left-width $date-picker2-range-calendar2-current-cell-hover-border-left-style $date-picker2-range-calendar2-current-cell-hover-border-left-color;
+      }
+      &:last-of-type::after {
+        border-top-right-radius: 2px;
+        border-bottom-right-radius: 2px;
+        border-right: $date-picker2-range-calendar2-current-cell-hover-border-right-width $date-picker2-range-calendar2-current-cell-hover-border-right-style $date-picker2-range-calendar2-current-cell-hover-border-right-color;
+      }
     }
 
-    #{$calendar2-prefix}-cell-edge-end + #{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {
-        &::before,
+    &#{$calendar2-prefix}-cell-edge-end {
+      &::before {
+        right: 8px;
+      }
+      &::after {
+        right: 8px;
+      }
+      &#{$calendar2-prefix}-cell-hover {
         &::after {
-            left: 8px;
-        }
-
-        &#{$calendar2-prefix}-cell-hover {
-            &::after {
-                border-top-left-radius: 2px;
-                border-bottom-left-radius: 2px;
-                border-left: 1px dashed $color-brand1-9;
-            }
+          border-top-right-radius: 2px;
+          border-bottom-right-radius: 2px;
+          border-right: $date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-width $date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-style $date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-color;
         }
+      }
     }
-}
 
-#{$calendar2-prefix}-table-week {
-    #{$calendar2-prefix}-cell-hover::after {
-        display: none;
+    &#{$calendar2-prefix}-cell-hover-begin::after {
+      border-top: $date-picker2-range-calendar2-current-cell-begin-hover-after-border-top-width $date-picker2-range-calendar2-current-cell-begin-hover-after-border-top-style $date-picker2-range-calendar2-current-cell-begin-hover-after-border-top-color;
+      border-left: $date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-width $date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-style $date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-color;
+      border-top-left-radius: 2px;
+      border-bottom-left-radius: 2px;
     }
+    &#{$calendar2-prefix}-cell-hover-end::after {
+      border-top: $date-picker2-range-calendar2-current-cell-end-hover-after-border-top-width $date-picker2-range-calendar2-current-cell-end-hover-after-border-top-style $date-picker2-range-calendar2-current-cell-end-hover-after-border-top-color;
+      border-right: $date-picker2-range-calendar2-current-cell-end-hover-after-border-right-width $date-picker2-range-calendar2-current-cell-end-hover-after-border-right-style $date-picker2-range-calendar2-current-cell-end-hover-after-border-right-color;
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
+  }
 
-    tr:hover #{$calendar2-prefix}-cell:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected)::before {
-        @include calendar-hover;
+  #{$calendar2-prefix}-cell-edge-end + #{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {
+    &::before,
+    &::after {
+      left: 8px;
     }
 
-    #{$calendar2-prefix}-week-current {
-        #{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected {
-            &::before,
-            #{$calendar2-cell-inner} {
-                color: $color-text1-3;
-                background-color: $color-brand1-1;
-            }
-
-            &:last-child,
-            &:nth-child(2) {
-                #{$calendar2-cell-inner} {
-                    @include calendar-selected;
-                }
-            }
-            &:nth-child(2)::before {
-                left: 50%;
-            }
-            &:last-child::before {
-                right: 50%;
-            }
-        }
+    &#{$calendar2-prefix}-cell-hover {
+      &::after {
+        border-top-left-radius: 2px;
+        border-bottom-left-radius: 2px;
+        border-left: $date-picker2-range-calendar2-end-edge-cell-hover-border-left-width $date-picker2-range-calendar2-end-edge-cell-hover-border-left-style $date-picker2-range-calendar2-end-edge-cell-hover-border-left-color;
+      }
     }
+  }
+}
 
-    tr:not(#{$calendar2-prefix}-week-current) {
-        td#{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
-            &::before,
-            #{$calendar2-cell-inner} {
-                background-color: transparent;
-                color: $color-text1-1;
-            }
+#{$calendar2-prefix}-table-week {
+  #{$calendar2-prefix}-cell-hover::after {
+    display: none;
+  }
+
+  tr:hover #{$calendar2-prefix}-cell:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected)::before {
+    @include calendar-hover($date-picker2-calendar2-week-table-tr-hover-background);
+  }
+
+  #{$calendar2-prefix}-week-current {
+    #{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected {
+      &::before,
+      #{$calendar2-cell-inner} {
+        color: $date-picker2-calendar2-week-table-current-cell-selected-color;
+        background-color: $date-picker2-calendar2-week-table-current-cell-selected-background-color;
+      }
+
+      &:last-child,
+      &:nth-child(2) {
+        #{$calendar2-cell-inner} {
+          @include calendar-selected($date-picker2-calendar2-week-table-current-cell-selected-inner-color, $date-picker2-calendar2-week-table-current-cell-selected-inner-background);
         }
+      }
+      &:nth-child(2)::before {
+        left: 50%;
+      }
+      &:last-child::before {
+        right: 50%;
+      }
+    }
+  }
+
+  tr:not(#{$calendar2-prefix}-week-current) {
+    td#{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
+      &::before,
+      #{$calendar2-cell-inner} {
+        background-color: $date-picker2-calendar2-week-table-tr-td-cell-selected-background-color;
+        color: $date-picker2-calendar2-week-table-tr-td-cell-selected-color;
+      }
     }
+  }
 }
 
 #{$range-picker2-prefix}-panel #{$calendar2-prefix}-week-current {
-    #{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
-        &:last-child,
-        &:nth-child(2) {
-            #{$calendar2-cell-inner} {
-                background-color: $color-brand1-1;
-                color: $color-text1-3;
-            }
-        }
-        &#{$calendar2-prefix}-cell-week-range-begin,
-        &#{$calendar2-prefix}-cell-week-range-end {
-            &:last-child,
-            &:nth-child(2) {
-                #{$calendar2-cell-inner} {
-                    @include calendar-selected;
-                }
-            }
+  #{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
+    &:last-child,
+    &:nth-child(2) {
+      #{$calendar2-cell-inner} {
+        background-color: $date-picker2-range-calendar2-selected-cell-inner-background-color;
+        color: $date-picker2-range-calendar2-selected-cell-inner-color;
+      }
+    }
+    &#{$calendar2-prefix}-cell-week-range-begin,
+    &#{$calendar2-prefix}-cell-week-range-end {
+      &:last-child,
+      &:nth-child(2) {
+        #{$calendar2-cell-inner} {
+          @include calendar-selected($date-picker2-range-calendar2-selected-cell-begin-week-inner-color, $date-picker2-range-calendar2-selected-cell-begin-week-inner-background);
         }
+      }
     }
+  }
 }
diff --git a/components/date-picker2/rtl.scss b/components/date-picker2/rtl.scss
index 5d0b39a80e..8329046d88 100644
--- a/components/date-picker2/rtl.scss
+++ b/components/date-picker2/rtl.scss
@@ -1,177 +1,178 @@
-div[dir="rtl"] {
+div[dir='rtl'] {
     #{$date-picker2-prefix} {
-        &-footer {
-            &-preset > .#{$css-prefix}btn {
-                margin-left: $s-2;
-                margin-right: 0;
-            }
-
-            &-actions {
-                margin-left: 0;
-                margin-right: auto;
-            }
+      &-footer {
+        &-preset > .#{$css-prefix}btn {
+          margin-left: $date-picker2-footer-preset-btn-margin-right;
+          margin-right: $s-zero;
         }
-        &-wrapper {
-            #{$calendar2-prefix} {
-                &-cell:last-child::before {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                    right: 0;
-                    border-top-left-radius: 2px;
-                    border-bottom-left-radius: 2px;
-                    left: 8px;
-                }
-                &-cell:first-child::before {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-                    left: 0;
-                    border-top-right-radius: 2px;
-                    border-bottom-right-radius: 2px;
-                    right: 8px;
-                }
-            }
+  
+        &-actions {
+          margin-left: $s-zero;
+          margin-right: auto;
         }
+      }
+      &-wrapper {
+        #{$calendar2-prefix} {
+          &-cell:last-child::before {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            right: 0;
+            border-top-left-radius: 2px;
+            border-bottom-left-radius: 2px;
+            left: 8px;
+          }
+          &-cell:first-child::before {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            left: 0;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+            right: 8px;
+          }
+        }
+      }
     }
-
+  
     .#{$css-prefix}date-time-picker-wrapper {
-        border-right: 1px solid $color-line1-1;
-        border-left: none;
+      border-right: $date-picker2-wrapper-picker-time-border-left-width $date-picker2-wrapper-picker-time-border-left-style $date-picker2-wrapper-picker-time-border-left-color;
+      border-left: none;
 
-        .#{$css-prefix}time-picker2-menu:not(:last-child) {
-            border-left: 1px solid #DCDEE3;
-            border-right: none;
-        }
+      .#{$css-prefix}time-picker2-menu:not(:last-child) {
+        border-left: $line-1 $line-solid $color-line1-2;
+        border-right: none;
+      }
     }
-
+  
     #{$range-picker2-prefix}-panel:not(#{$range-picker2-prefix}-panel-single) {
-        #{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {
-            &#{$calendar2-prefix}-cell-selected {
-                &#{$calendar2-prefix}-cell-range-begin::before {
-                    right: 50%;
-                    left: 0;
-                }
-                &#{$calendar2-prefix}-cell-range-end::before {
-                    left: 50%;
-                    right: 0;
-                }
-            }
-
-            &#{$calendar2-prefix}-cell-hover {
-                &#{$calendar2-prefix}-cell-hover-begin::after,
-                &:first-child::after {
-                    right: 8px;
-                }
-                &#{$calendar2-prefix}-cell-hover-begin:not(:last-child)::after,
-                &:first-child:not(#{$calendar2-prefix}-cell-hover-end)::after {
-                    left: 0;
-                }
-
-                &#{$calendar2-prefix}-cell-hover-end::after,
-                &:last-child::after {
-                    left: 8px;
-                }
-
-                &#{$calendar2-prefix}-cell-hover-end:not(:first-child)::after,
-                &:last-child:not(#{$calendar2-prefix}-cell-hover-begin)::after {
-                    right: 0;
-                }
-
-                &#{$calendar2-prefix}-cell-selected {
-                    &#{$calendar2-prefix}-cell-hover-begin::after {
-                        left: 0;
-                        right: 7px;
-                    }
-                    &#{$calendar2-prefix}-cell-hover-end::after {
-                        right: 0;
-                        left: 7px;
-                    }
-                }
-                &:first-of-type::after {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-                    border-left: none;
-                    border-top-right-radius: 2px;
-                    border-bottom-right-radius: 2px;
-                    border-right: 1px dashed $color-brand1-9;
-                }
-                &:last-of-type::after {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                    border-right: none;
-                    border-top-left-radius: 2px;
-                    border-bottom-left-radius: 2px;
-                    border-left: 1px dashed $color-brand1-9;
-                }
-            }
-
-            &#{$calendar2-prefix}-cell-edge-end {
-                &::before,
-                &::after {
-                    right: 0;
-                    left: 8px;
-                }
-                &#{$calendar2-prefix}-cell-hover::after {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                    border-right: none;
-                    border-top-left-radius: 2px;
-                    border-bottom-left-radius: 2px;
-                    border-left: 1px dashed $color-brand1-9;
-                }
-            }
-
+      #{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {
+        &#{$calendar2-prefix}-cell-selected {
+          &#{$calendar2-prefix}-cell-range-begin::before {
+            right: 50%;
+            left: 0;
+          }
+          &#{$calendar2-prefix}-cell-range-end::before {
+            left: 50%;
+            right: 0;
+          }
+        }
+  
+        &#{$calendar2-prefix}-cell-hover {
+          &#{$calendar2-prefix}-cell-hover-begin::after,
+          &:first-child::after {
+            right: 8px;
+          }
+          &#{$calendar2-prefix}-cell-hover-begin:not(:last-child)::after,
+          &:first-child:not(#{$calendar2-prefix}-cell-hover-end)::after {
+            left: 0;
+          }
+  
+          &#{$calendar2-prefix}-cell-hover-end::after,
+          &:last-child::after {
+            left: 8px;
+          }
+  
+          &#{$calendar2-prefix}-cell-hover-end:not(:first-child)::after,
+          &:last-child:not(#{$calendar2-prefix}-cell-hover-begin)::after {
+            right: 0;
+          }
+  
+          &#{$calendar2-prefix}-cell-selected {
             &#{$calendar2-prefix}-cell-hover-begin::after {
-                border-left: none;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-                border-right: 1px dashed $color-brand1-9;
-                border-top-right-radius: 2px;
-                border-bottom-right-radius: 2px;
+              left: 0;
+              right: 7px;
             }
             &#{$calendar2-prefix}-cell-hover-end::after {
-                border-right: none;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-                border-left: 1px dashed $color-brand1-9;
-                border-top-left-radius: 2px;
-                border-bottom-left-radius: 2px;
+              right: 0;
+              left: 7px;
             }
+          }
+          &:first-of-type::after {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: none;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+            border-right: $date-picker2-range-calendar2-current-cell-hover-border-left-width $date-picker2-range-calendar2-current-cell-hover-border-left-style $date-picker2-range-calendar2-current-cell-hover-border-left-color;
+          }
+          &:last-of-type::after {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: none;
+            border-top-left-radius: 2px;
+            border-bottom-left-radius: 2px;
+            border-left: $date-picker2-range-calendar2-current-cell-hover-border-right-width $date-picker2-range-calendar2-current-cell-hover-border-right-style $date-picker2-range-calendar2-current-cell-hover-border-right-color;
+          }
         }
-
-        #{$calendar2-prefix}-cell-edge-end + #{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {
-            &::before,
-            &::after {
-                right: 8px;
-                left: 0;
-            }
-            &#{$calendar2-prefix}-cell-hover {
-                &::after {
-                    right: 8px;
-                    border-top-right-radius: 2px;
-                    border-bottom-right-radius: 2px;
-                    border-right: 1px dashed $color-brand1-9;
-                }
-                &:not(#{$calendar2-prefix}-cell-hover-end):not(#{$calendar2-prefix}-cell-hover-begin)::after {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-                    border-left: none;
-                }
-            }
+  
+        &#{$calendar2-prefix}-cell-edge-end {
+          &::before,
+          &::after {
+            right: 0;
+            left: 8px;
+          }
+          &#{$calendar2-prefix}-cell-hover::after {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: none;
+            border-top-left-radius: 2px;
+            border-bottom-left-radius: 2px;
+            border-left: $date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-width $date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-style $date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-color;
+          }
+        }
+  
+        &#{$calendar2-prefix}-cell-hover-begin::after {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+          border-right: $date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-width $date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-style $date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-color;
+          border-top-right-radius: 2px;
+          border-bottom-right-radius: 2px;
+        }
+        &#{$calendar2-prefix}-cell-hover-end::after {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+          border-left: $date-picker2-range-calendar2-current-cell-end-hover-after-border-right-width $date-picker2-range-calendar2-current-cell-end-hover-after-border-right-style $date-picker2-range-calendar2-current-cell-end-hover-after-border-right-color;
+          border-top-left-radius: 2px;
+          border-bottom-left-radius: 2px;
+        }
+      }
+  
+      #{$calendar2-prefix}-cell-edge-end + #{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {
+        &::before,
+        &::after {
+          right: 8px;
+          left: 0;
         }
+        &#{$calendar2-prefix}-cell-hover {
+          &::after {
+            right: 8px;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+            border-right: $date-picker2-range-calendar2-end-edge-cell-hover-border-left-width $date-picker2-range-calendar2-end-edge-cell-hover-border-left-style $date-picker2-range-calendar2-end-edge-cell-hover-border-left-color;
+          }
+          &:not(#{$calendar2-prefix}-cell-hover-end):not(#{$calendar2-prefix}-cell-hover-begin)::after {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: none;
+          }
+        }
+      }
     }
-
+  
     #{$calendar2-prefix}-table-week {
-        #{$calendar2-prefix}-week-current {
-            #{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected {
-                &:nth-child(2)::before {
-                    right: 50%;
-                    left: 0;
-                }
-                &:last-child::before {
-                    left: 50%;
-                    right: 0;
-                }
-            }
+      #{$calendar2-prefix}-week-current {
+        #{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected {
+          &:nth-child(2)::before {
+            right: 50%;
+            left: 0;
+          }
+          &:last-child::before {
+            left: 50%;
+            right: 0;
+          }
         }
+      }
     }
-}
+  }
+  
\ No newline at end of file
diff --git a/components/date-picker2/scss/footer.scss b/components/date-picker2/scss/footer.scss
index 6490bcdd40..86ab6970d8 100644
--- a/components/date-picker2/scss/footer.scss
+++ b/components/date-picker2/scss/footer.scss
@@ -3,23 +3,24 @@
     min-width: 100%;
     box-sizing: border-box;
     text-align: center;
-    border-top: 1px solid $color-line1-1;
-    padding: 4px 12px;
+    border-top: $date-picker2-footer-border-top-width $date-picker2-footer-border-top-style $date-picker2-footer-border-top-color;
+    padding: $date-picker2-footer-padding-tb $date-picker2-footer-padding-lr;
     display: flex;
-    min-height: 40px;
+    min-height: $date-picker2-footer-min-height;
     align-items: center;
     flex-wrap: wrap;
     position: relative;
-
-    &-preset>.#{$css-prefix}btn {
-        margin-right: $s-2;
+  
+    &-preset > .#{$css-prefix}btn {
+      margin-right: $date-picker2-footer-preset-btn-margin-right;
     }
-
+  
     &-actions {
-        margin-left: auto;
+      margin-left: auto;
     }
-
+  
     &-preset-only {
-        width: 100%;
+      width: 100%;
     }
-}
+  }
+  
\ No newline at end of file
diff --git a/components/date-picker2/scss/variable.scss b/components/date-picker2/scss/variable.scss
index 38dcc4f1a2..1784dad631 100644
--- a/components/date-picker2/scss/variable.scss
+++ b/components/date-picker2/scss/variable.scss
@@ -1,7 +1,251 @@
+////
+/// @module date-picker2: 日期选择 2
+/// @tag DatePicker2
+/// @category component
+/// @family data-entry
+/// @varPrefix $date-picker2
+/// @classPrefix {prefix}-date-picker2
+/// @order {"size/footer":10,"size/overlay":11,"size/wrapper":12,"size/input":13,"statement/range/overlay":100,"statement/range":10,"statement/range/selected":101,"statement/range/hover":102,"statement/range/disabled":103,"statement/panel/wrapper":110,"statement/panel":11,"statement/table/selected":120,"statement/table":12,"statement/table/hover":121}
+////
+
 //
 // $date-picker2-prefix: '.' + $css-prefix + 'picker';
 // --------------------------------------------------
 
-$date-picker2-prefix: "." + $css-prefix + "date-picker2";
-$range-picker2-prefix: "." + $css-prefix + "range-picker2";
-$calendar2-prefix: "." + $css-prefix + "calendar2";
+$date-picker2-prefix: '.' + $css-prefix + 'date-picker2';
+$range-picker2-prefix: '.' + $css-prefix + 'range-picker2';
+$calendar2-prefix: '.' + $css-prefix + 'calendar2';
+/// line width
+/// @namespace size/footer
+$date-picker2-footer-border-top-width: $line-1 !default;
+/// line style
+/// @namespace size/footer
+$date-picker2-footer-border-top-style: $line-solid !default;
+/// color
+/// @namespace size/footer
+$date-picker2-footer-border-top-color: $color-line1-1 !default;
+/// padding (t,b)
+/// @namespace size/footer
+$date-picker2-footer-padding-tb: $s-1 !default;
+/// padding (l,r)
+/// @namespace size/footer
+$date-picker2-footer-padding-lr: $s-3 !default;
+/// min height
+/// @namespace size/footer
+$date-picker2-footer-min-height: $s-10 !default;
+/// margin (r)
+/// @namespace size/footer
+$date-picker2-footer-preset-btn-margin-right: $s-2 !default;
+/// padding (t,b)
+/// @namespace size/overlay
+$date-picker2-overlay-padding-tb: $s-1 !default;
+/// padding (l,r)
+/// @namespace size/overlay
+$date-picker2-overlay-padding-lr: $s-zero !default;
+/// padding (t,b)
+/// @namespace statement/range/overlay
+$date-picker2-range-overlay-padding-tb: $s-3 !default;
+/// padding (l,r)
+/// @namespace statement/range/overlay
+$date-picker2-range-overlay-padding-lr: $s-zero !default;
+/// background color
+/// @namespace size/wrapper
+$date-picker2-wrapper-background-color: $color-white !default;
+/// line width
+/// @namespace size/wrapper
+$date-picker2-wrapper-border-width: $line-1 !default;
+/// line style
+/// @namespace size/wrapper
+$date-picker2-wrapper-border-style: $line-solid !default;
+/// color
+/// @namespace size/wrapper
+$date-picker2-wrapper-border-color: $color-line1-1 !default;
+/// border radius
+/// @namespace size/wrapper
+$date-picker2-wrapper-border-radius: $corner-1 !default;
+/// border radius
+/// @namespace statement/panel/wrapper
+$date-picker2-wrapper-calendar2-panel-border-radius: $corner-1 !default;
+/// height
+/// @namespace size/wrapper
+$date-picker2-wrapper-calendar2-cell-before-height: $s-6 !default;
+/// line style
+/// @namespace size/input
+$date-picker2-input-border-style: $line-solid !default;
+/// border color
+/// @namespace size/input
+$date-picker2-input-noborder-border-color: $color-transparent !default;
+/// font size
+/// @namespace size/input
+$date-picker2-separator-input-font-size: $font-size-body-1 !default;
+/// min width
+/// @namespace size/input
+$date-picker2-separator-input-min-width: $s-4 !default;
+/// border color (t)
+/// @namespace statement/range
+$date-picker2-range-arrow-border-color-t: $color-line1-1 !default;
+/// border color (r)
+/// @namespace statement/range
+$date-picker2-range-arrow-border-color-r: $color-line1-1 !default;
+/// border color (b)
+/// @namespace statement/range
+$date-picker2-range-arrow-border-color-b: $color-transparent !default;
+/// border color (l)
+/// @namespace statement/range
+$date-picker2-range-arrow-border-color-l: $color-transparent !default;
+/// background
+/// @namespace statement/range
+$date-picker2-range-arrow-background: $color-white !default;
+/// time line width
+/// @namespace size/wrapper
+$date-picker2-wrapper-picker-time-border-left-width: $line-1 !default;
+/// time line style
+/// @namespace size/wrapper
+$date-picker2-wrapper-picker-time-border-left-style: $line-solid !default;
+/// time color
+/// @namespace size/wrapper
+$date-picker2-wrapper-picker-time-border-left-color: $color-line1-1 !default;
+/// time padding (r)
+/// @namespace size/wrapper
+$date-picker2-wrapper-picker-time-calendar2-body-padding-right: $s-zero !default;
+/// time padding (l)
+/// @namespace size/wrapper
+$date-picker2-wrapper-picker-time-calendar2-body-padding-left: $s-zero !default;
+/// current color
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-current-cell-selected-color: $color-text1-3 !default;
+/// current background
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-current-cell-selected-background: $color-brand1-1 !default;
+/// current inner color
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-current-cell-selected-inner-color: $color-text1-3 !default;
+/// current inner background
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-current-cell-selected-inner-background: $color-transparent !default;
+/// current height
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-height: $s-6 !default;
+/// border color (tb)
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-border-color-tb: $color-brand1-9 !default;
+/// border color (lr)
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-border-color-lr: $color-transparent !default;
+/// border left line width
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-border-left-width: $line-1 !default;
+/// border left line style
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-border-left-style: $line-dashed !default;
+/// border left color
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-border-left-color: $color-brand1-9 !default;
+/// border right line width
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-border-right-width: $line-1 !default;
+/// border right line style
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-border-right-style: $line-dashed !default;
+/// border right color
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-hover-border-right-color: $color-brand1-9 !default;
+/// end edge border right line width
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-width: $line-1 !default;
+/// end edge border right line style
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-style: $line-dashed !default;
+/// end edge border right color
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-edge-hover-border-right-color: $color-brand1-9 !default;
+/// begin border top line width
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-begin-hover-after-border-top-width: $line-1 !default;
+/// begin border top line style
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-begin-hover-after-border-top-style: $line-dashed !default;
+/// begin border top color
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-begin-hover-after-border-top-color: $color-brand1-9 !default;
+/// begin border left line width
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-width: $line-1 !default;
+/// begin border left line style
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-style: $line-dashed !default;
+/// begin border left color
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-begin-hover-after-border-left-color: $color-brand1-9 !default;
+/// end border top line width
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-hover-after-border-top-width: $line-1 !default;
+/// end border top line style
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-hover-after-border-top-style: $line-dashed !default;
+/// end border top color
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-hover-after-border-top-color: $color-brand1-9 !default;
+/// end border right line width
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-hover-after-border-right-width: $line-1 !default;
+/// end border right line style
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-hover-after-border-right-style: $line-dashed !default;
+/// end border right color
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-current-cell-end-hover-after-border-right-color: $color-brand1-9 !default;
+/// enf edge border left line width
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-end-edge-cell-hover-border-left-width: $line-1 !default;
+/// enf edge border left line style
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-end-edge-cell-hover-border-left-style: $line-dashed !default;
+/// enf edge border left color
+/// @namespace statement/range/hover
+$date-picker2-range-calendar2-end-edge-cell-hover-border-left-color: $color-brand1-9 !default;
+/// week current color
+/// @namespace statement/table/selected
+$date-picker2-calendar2-week-table-current-cell-selected-color: $color-text1-3 !default;
+/// week current background color
+/// @namespace statement/table/selected
+$date-picker2-calendar2-week-table-current-cell-selected-background-color: $color-brand1-1 !default;
+/// week background color
+/// @namespace statement/table/selected
+$date-picker2-calendar2-week-table-tr-td-cell-selected-background-color: $color-transparent !default;
+/// week color
+/// @namespace statement/table/selected
+$date-picker2-calendar2-week-table-tr-td-cell-selected-color: $color-text1-1 !default;
+/// inner background color
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-selected-cell-inner-background-color: $color-brand1-1 !default;
+/// inner color
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-selected-cell-inner-color: $color-text1-3 !default;
+/// color
+/// @namespace statement/range/disabled
+$date-picker2-range-calendar2-disabled-cell-inner-color: $color-text1-1 !default;
+/// background
+/// @namespace statement/range/disabled
+$date-picker2-range-calendar2-disabled-cell-inner-background: $color-fill1-1 !default;
+/// current begin color
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-current-cell-selected-begin-inner-color: $color-white !default;
+/// current begin background
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-current-cell-selected-begin-inner-background: $color-brand1-6 !default;
+/// background
+/// @namespace statement/table/hover
+$date-picker2-calendar2-week-table-tr-hover-background: $color-fill1-2 !default;
+/// week inner color
+/// @namespace statement/table/selected
+$date-picker2-calendar2-week-table-current-cell-selected-inner-color: $color-white !default;
+/// week inner background
+/// @namespace statement/table/selected
+$date-picker2-calendar2-week-table-current-cell-selected-inner-background: $color-brand1-6 !default;
+/// begin week color
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-selected-cell-begin-week-inner-color: $color-white !default;
+/// begin week background
+/// @namespace statement/range/selected
+$date-picker2-range-calendar2-selected-cell-begin-week-inner-background: $color-brand1-6 !default;