diff --git a/.fusion b/.fusion
index 3fc7831855..8484eb69ca 100644
--- a/.fusion
+++ b/.fusion
@@ -79,12 +79,14 @@
     "input": "lib/input/scss/variable.scss",
     "select": "lib/select/scss/variable.scss",
     "calendar": "lib/calendar/scss/variable.scss",
+    "calendar2": "lib/calendar2/scss/variable.scss",
     "card": "lib/card/scss/variable.scss",
     "cascader": "lib/cascader/scss/variable.scss",
     "cascader-select": "lib/cascader-select/scss/variable.scss",
     "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/calendar2/__docs__/theme/index.tsx b/components/calendar2/__docs__/theme/index.tsx
new file mode 100644
index 0000000000..7e2df61267
--- /dev/null
+++ b/components/calendar2/__docs__/theme/index.tsx
@@ -0,0 +1,123 @@
+import dayjs, { type Dayjs } from 'dayjs';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Demo, DemoGroup, initDemo } from '../../../demo-helper';
+import Calendar from '../../index';
+import type { CalendarProps } from '../../types';
+import ConfigProvider from '../../../config-provider';
+import zhCN from '../../../locale/zh-cn';
+import enUS from '../../../locale/en-us';
+import '../../../demo-helper/style';
+import '../../style';
+
+const i18nMap = {
+    'zh-cn': {
+        dateFullscreenCalendar: '全屏日历',
+        cardCalendar: '卡片日历',
+        panelCalendar: '面板日历',
+        month: '月',
+        year: '年',
+
+        normal: '普通',
+    },
+    'en-us': {
+        dateFullscreenCalendar: 'Fullscreen',
+        cardCalendar: 'Card',
+        panelCalendar: 'Panel',
+
+        month: 'Month',
+        year: 'Year',
+
+        normal: 'Normal',
+    },
+};
+
+const wrappedCalendarStyle = {
+    width: '320px',
+    overflow: 'hidden',
+};
+
+const wrappedRangeCalendarStyle = {
+    width: '600px',
+    overflow: 'hidden',
+};
+
+function render(i18n: any, lang: string) {
+    const currentDate = dayjs();
+    const calendarValue = currentDate.clone().add(1, 'days');
+
+    const disabledDate: CalendarProps['disabledDate'] = function (date: Dayjs) {
+        return date.valueOf() > currentDate.clone().add(3, 'days').valueOf();
+    };
+
+    ReactDOM.render(
+        <ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
+            <div className="demo-container">
+                <Demo title={i18n.dateFullscreenCalendar}>
+                    <Demo title={i18n.month}>
+                        <DemoGroup label={i18n.normal}>
+                            <Calendar
+                                disabledDate={disabledDate}
+                                value={calendarValue.clone().add(-1, 'months')}
+                                mode="month"
+                            />
+                        </DemoGroup>
+                    </Demo>
+                </Demo>
+
+                <Demo title={i18n.cardCalendar}>
+                    <Demo title={i18n.month}>
+                        <DemoGroup label={i18n.normal}>
+                            <div style={wrappedCalendarStyle}>
+                                <Calendar
+                                    shape="card"
+                                    disabledDate={disabledDate}
+                                    value={calendarValue.clone().add(-1, 'months')}
+                                    mode="month"
+                                />
+                            </div>
+                        </DemoGroup>
+                    </Demo>
+                </Demo>
+
+                <Demo title={i18n.panelCalendar}>
+                    <Demo title={i18n.month}>
+                        <DemoGroup label={i18n.normal}>
+                            <div style={wrappedCalendarStyle}>
+                                <Calendar
+                                    shape="panel"
+                                    disabledDate={disabledDate}
+                                    value={calendarValue.clone().add(-1, 'months')}
+                                    mode="month"
+                                />
+                            </div>
+                        </DemoGroup>
+                    </Demo>
+
+                    <Demo title={i18n.year}>
+                        <DemoGroup label={i18n.normal}>
+                            <div style={wrappedCalendarStyle}>
+                                <Calendar
+                                    shape="panel"
+                                    disabledDate={disabledDate}
+                                    value={calendarValue.clone().add(-1, 'years')}
+                                    mode="year"
+                                />
+                            </div>
+                        </DemoGroup>
+                    </Demo>
+                </Demo>
+            </div>
+        </ConfigProvider>,
+        document.getElementById('container')
+    );
+}
+
+window.renderDemo = function (lang = 'en-us') {
+    dayjs.locale(lang);
+    render(i18nMap[lang], lang);
+};
+
+renderDemo();
+
+initDemo('calendar2');
diff --git a/components/calendar2/main.scss b/components/calendar2/main.scss
index 78f50cb155..fa14025dd2 100644
--- a/components/calendar2/main.scss
+++ b/components/calendar2/main.scss
@@ -1,269 +1,281 @@
-@import "../core/index-noreset";
+@import '../core/index-noreset';
 
-@import "./scss/variable";
-@import "./scss/normalize";
-@import "./scss/mixin";
-
-@import "./rtl.scss";
+@import './scss/variable';
+@import './scss/normalize';
+@import './scss/mixin';
 
+@import './rtl.scss';
 
 #{$calendar2-prefix} {
-    font-size: 12px;
-    user-select: none;
-    background: $color-white;
-
-    &-header {
-        display: flex;
+  font-size: $calendar2-font-size;
+  user-select: none;
+  background: $calendar2-background;
+
+  &-header {
+    display: flex;
+  }
+
+  &-table {
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  &-cell {
+    cursor: pointer;
+    position: relative;
+    transition:
+      background-color 0.2s,
+      border 0.2s;
+  }
+
+  #{$calendar2-cell-inner} {
+    color: $calendar2-cell-inner-color;
+    outline: none;
+    min-width: $calendar2-cell-inner-min-width;
+    position: relative;
+    border: $calendar2-cell-inner-border-line-width $calendar2-cell-inner-border-line-style $calendar2-cell-inner-border-color;
+  }
+
+  &-cell-disabled {
+    &::before {
+      @include calendar-disabled($calendar2-cell-disabled-color, $calendar2-cell-disabled-background);
     }
+  }
+
+  &-fullscreen,
+  &-panel,
+  &-card {
+    #{$calendar2-prefix}-header {
+      &-actions {
+        margin-left: auto;
+      }
+      &-ranges,
+      &-actions {
+        & > *:not(:first-child) {
+          margin-left: $calendar2-fullscreen-header-ranges-margin-left;
+        }
+      }
 
-    &-table {
-        width: 100%;
-        table-layout: fixed;
+      &-select-year,
+      &-select-month {
+        min-width: $calendar2-fullscreen-header-select-year-min-width;
+        .#{$css-prefix}input {
+          min-width: auto;
+        }
+      }
     }
 
-    &-cell {
-        cursor: pointer;
-        position: relative;
-        transition: background-color .2s, border .2s;
+    #{$calendar2-prefix}-body {
+      padding: $calendar2-fullscreen-body-padding-tb $calendar2-fullscreen-body-padding-lr;
     }
+  }
 
+  &-card,
+  &-panel {
     #{$calendar2-cell-inner} {
-        color: $color-text1-1;
-        outline: none;
-        min-width: 24px;
-        position: relative;
-        border: 1px solid transparent;
+      z-index: 2;
+      height: $calendar2-card-cell-inner-height;
+      line-height: 22px;
+      border-radius: 2px;
+      display: inline-block;
     }
 
-    &-cell-disabled {
-        &::before {
-            @include calendar-disabled;
+    #{$calendar2-prefix} {
+      min-height: 150px;
+      &-table {
+        thead > tr {
+          height: $calendar2-card-table-thead-height;
+          color: $calendar2-card-table-thead-color;
         }
-    }
 
-    &-fullscreen,
-    &-panel,
-    &-card {
-        #{$calendar2-prefix}-header {
-            &-actions {
-                margin-left: auto;
-            }
-            &-ranges,
-            &-actions {
-                & > *:not(:first-child) {
-                    margin-left: 8px;
-                }
-            }
-
-            &-select-year,
-            &-select-month {
-                min-width: 88px;
-                .#{$css-prefix}input {
-                    min-width: auto;
-                }
-            }
+        th,
+        td {
+          font-weight: $calendar2-card-table-th-font-weight;
+          text-align: center;
+          padding: $calendar2-card-table-th-padding-tb $calendar2-card-table-th-padding-lr;
         }
 
-        #{$calendar2-prefix}-body {
-            padding: 8px 0;
+        th {
+          height: $calendar2-card-table-th-height;
+        }
+      }
+
+      &-table-month,
+      &-table-year,
+      &-table-decade {
+        height: 145px;
+        #{$calendar2-prefix}-cell-inner {
+          min-width: $calendar2-card-table-month-cell-inner-min-width;
+        }
+      }
+      &-table-quarter {
+        height: 50px;
+        #{$calendar2-prefix}-cell-inner {
+          min-width: $calendar2-card-table-quarter-cell-inner-min-width;
         }
+      }
+
+      &-table-decade {
+        #{$calendar2-prefix}-cell-inner {
+          min-width: $calendar2-card-table-decade-cell-inner-min-width;
+        }
+      }
     }
 
-    &-card,
-    &-panel {
+    #{$calendar2-prefix}-cell-current {
+      &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(
+          #{$calendar2-prefix}-cell-today
+        ) {
         #{$calendar2-cell-inner} {
-            z-index: 2;
-            height: 24px;
-            line-height: 22px;
-            border-radius: 2px;
-            display: inline-block;
+          @include calendar-current($calendar2-card-current-cell-inner-color);
         }
 
-        #{$calendar2-prefix} {
-            min-height: 150px;
-            &-table {
-                thead > tr {
-                    height: 24px;
-                    color: $color-text1-2;
-                }
-
-                th,
-                td {
-                    font-weight: 400;
-                    text-align: center;
-                    padding: 4px 0;
-                }
-
-                th {
-                    height: 32px;
-                }
-            }
-
-            &-table-month,
-            &-table-year,
-            &-table-decade {
-                height: 145px;
-                #{$calendar2-prefix}-cell-inner {
-                    min-width: 56px;
-                }
-            }
-            &-table-quarter {
-                height: 50px;
-                #{$calendar2-prefix}-cell-inner {
-                    min-width: 56px;
-                }
-            }
-
-
-            &-table-decade {
-                #{$calendar2-prefix}-cell-inner {
-                    min-width: 80px;
-                }
-            }
+        &:hover:not(#{$calendar2-prefix}-cell-hover) #{$calendar2-cell-inner} {
+          @include calendar-hover($calendar2-card-cell-current-background);
         }
+      }
 
+      &#{$calendar2-prefix}-cell-today:not(#{$calendar2-prefix}-cell-disabled) {
+        #{$calendar2-cell-inner} {
+          color: $calendar2-card-current-today-not-disabled-cell-inner-color;
+        }
+      }
 
-        #{$calendar2-prefix}-cell-current {
-            &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-today) {
-                #{$calendar2-cell-inner} {
-                    @include calendar-current;
-                }
-
-                &:hover:not(#{$calendar2-prefix}-cell-hover) #{$calendar2-cell-inner} {
-                    @include calendar-hover;
-                }
-            }
-
-            &#{$calendar2-prefix}-cell-today:not(#{$calendar2-prefix}-cell-disabled) {
-                #{$calendar2-cell-inner} {
-                    color: $color-brand1-6;
-                }
-            }
-
-            &#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
-                #{$calendar2-cell-inner} {
-                    @include calendar-selected;
-                }
-            }
+      &#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
+        #{$calendar2-cell-inner} {
+          @include calendar-selected(
+            $calendar2-card-current-selected-not-disabled-cell-inner-color,
+            $calendar2-card-current-selected-not-disabled-cell-inner-background
+          );
         }
+      }
+    }
+  }
+
+  &-fullscreen {
+    #{$calendar2-prefix} {
+      &-cell-value,
+      &-table th {
+        text-align: right;
+      }
+
+      &-table th {
+        padding: $calendar2-fullscreen-table-padding-t $calendar2-fullscreen-table-padding-r $calendar2-fullscreen-table-padding-b $calendar2-fullscreen-table-padding-l;
+      }
+
+      &-cell-inner {
+        height: $calendar2-fullscreen-cell-inner-height;
+        border-top: $calendar2-fullscreen-cell-inner-border-top-line-width $calendar2-fullscreen-cell-inner-border-top-line-style $calendar2-fullscreen-cell-inner-border-top-color;
+        margin: $calendar2-fullscreen-cell-inner-margin-tb $calendar2-fullscreen-cell-inner-margin-lr;
+        padding: $calendar2-fullscreen-cell-inner-padding-t $calendar2-fullscreen-cell-inner-padding-lr $calendar2-fullscreen-cell-inner-padding-b;
+      }
     }
 
-    &-fullscreen {
-        #{$calendar2-prefix} {
-            &-cell-value,
-            &-table th {
-                text-align: right;
-            }
-
-            &-table th {
-                padding: 0 12px 5px 0;
-            }
-
-            &-cell-inner {
-                height: 80px;
-                border-top: 2px solid $color-line1-1;
-                margin: 0 4px;
-                padding: 4px 8px 0;
-            }
-        }
+    td #{$calendar2-prefix}-cell-inner {
+      height: $calendar2-fullscreen-td-height;
+      border-top: $calendar2-fullscreen-td-border-top-line-width $calendar2-fullscreen-td-border-top-line-style $calendar2-fullscreen-td-border-top-color;
+    }
+
+    #{$calendar2-prefix}-cell-disabled #{$calendar2-cell-inner} {
+      @include calendar-disabled-fullscreen(
+        $calendar2-fullscreen-cell-disabled-color,
+        $calendar2-fullscreen-cell-disabled-background
+      );
+    }
 
-        td #{$calendar2-prefix}-cell-inner {
-            height: 80px;
-            border-top: 2px solid $color-line1-1;
+    #{$calendar2-prefix}-cell-current {
+      &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(
+          #{$calendar2-prefix}-cell-today
+        ) {
+        #{$calendar2-cell-inner} {
+          @include calendar-current-fullscreen($calendar2-fullscreen-current-cell-inner-color);
         }
 
-        #{$calendar2-prefix}-cell-disabled #{$calendar2-cell-inner} {
-            @include calendar-disabled-fullscreen;
+        &:hover #{$calendar2-cell-inner} {
+          @include calendar-hover-fullscreen($calendar2-fullscreen-cell-current-hover-background-color);
         }
+      }
 
-        #{$calendar2-prefix}-cell-current {
-            &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-today) {
-                #{$calendar2-cell-inner} {
-                    @include calendar-current-fullscreen;
-                }
-
-                &:hover #{$calendar2-cell-inner} {
-                    @include calendar-hover-fullscreen;
-                }
-            }
-
-            &#{$calendar2-prefix}-cell-today {
-                #{$calendar2-cell-inner} {
-                    color: $color-brand1-6;
-                }
-            }
-
-            #{$calendar2-cell-inner} {
-                background-color: $color-white;
-            }
-
-            &#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
-                #{$calendar2-cell-inner} {
-                    @include calendar-selected-fullscreen;
-                }
-            }
+      &#{$calendar2-prefix}-cell-today {
+        #{$calendar2-cell-inner} {
+          color: $calendar2-fullscreen-current-today-cell-inner-color;
         }
-    }
+      }
+
+      #{$calendar2-cell-inner} {
+        background-color: $calendar2-fullscreen-current-cell-inner-background-color;
+      }
 
-    &-card {
-        #{$calendar2-prefix} {
-            &-header {
-                padding: 8px 8px;
-                border-bottom: 1px solid $color-line1-1;
-            }
+      &#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
+        #{$calendar2-cell-inner} {
+          @include calendar-selected-fullscreen(
+            $calendar2-fullscreen-current-selected-not-disabled-cell-inner-border-top-color,
+            $calendar2-fullscreen-current-selected-not-disabled-cell-inner-color,
+            $calendar2-fullscreen-current-selected-not-disabled-cell-inner-background
+          );
         }
+      }
     }
-
-    &-panel {
-        #{$calendar2-prefix}-header {
-            padding: 0 8px;
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid $color-line1-1;
-
-            &-btn {
-                min-width: 20px;
-                line-height: 20px;
-                color: $color-text1-3;
-                font-family: inherit;
-                vertical-align: initial;
-                border-radius: 2px;
-            }
-
-            &-btn > span,
-            &-text-field {
-                text-align: center;
-                font-size: 14px;
-                color: $color-text1-4;
-                font-weight: bolder;
-                vertical-align: initial;
-            }
-
-            &-btn:hover,
-            &-btn:hover > span {
-                color: $color-brand1-6;
-            }
-
-            &-right-btn:hover,
-            &-left-btn:hover {
-                @include calendar-hover;
-            }
-
-
-            &-text-field {
-                flex: 1;
-                height: 38px;
-                line-height: 38px;
-                #{$calendar2-prefix}-header-btn:not(:first-child) {
-                    margin-left: 6px;
-                }
-            }
+  }
+
+  &-card {
+    #{$calendar2-prefix} {
+      &-header {
+        padding: $calendar2-card-header-padding-tb $calendar2-card-header-padding-lr;
+        border-bottom: $calendar2-card-header-border-bottom-line-width $calendar2-card-header-border-bottom-line-style $calendar2-card-header-border-bottom-color;
+      }
+    }
+  }
+
+  &-panel {
+    #{$calendar2-prefix}-header {
+      padding: $calendar2-panel-header-padding-tb $calendar2-panel-header-padding-lr;
+      display: flex;
+      align-items: center;
+      border-bottom: $calendar2-panel-header-border-bottom-line-width $calendar2-panel-header-border-bottom-line-style
+        $calendar2-panel-header-border-bottom-color;
+
+      &-btn {
+        min-width: $calendar2-panel-header-btn-min-width;
+        line-height: 20px;
+        color: $calendar2-panel-header-btn-color;
+        font-family: inherit;
+        vertical-align: initial;
+        border-radius: 2px;
+      }
+
+      &-btn > span,
+      &-text-field {
+        text-align: center;
+        font-size: $calendar2-panel-header-btn-font-size;
+        color: $calendar2-panel-header-btn-color;
+        font-weight: $font-weight-bolder;
+        vertical-align: initial;
+      }
+
+      &-btn:hover,
+      &-btn:hover > span {
+        color: $calendar2-panel-header-hover-btn-color;
+      }
+
+      &-right-btn:hover,
+      &-left-btn:hover {
+        @include calendar-hover($calendar2-panel-header-hover-right-btn-background);
+      }
+
+      &-text-field {
+        flex: 1;
+        height: 38px;
+        line-height: 38px;
+        #{$calendar2-prefix}-header-btn:not(:first-child) {
+          margin-left: 6px;
         }
+      }
     }
+  }
 }
 
-
 #{$calendar2-prefix}-header-select-month-popup,
 #{$calendar2-prefix}-header-select-year-popup {
-    min-width: auto;
+  min-width: auto;
 }
diff --git a/components/calendar2/rtl.scss b/components/calendar2/rtl.scss
index 8b669a3850..117568ae6b 100644
--- a/components/calendar2/rtl.scss
+++ b/components/calendar2/rtl.scss
@@ -1,32 +1,32 @@
-div[dir="rtl"]#{$calendar2-prefix} {
-    &-fullscreen,
-    &-panel,
-    &-card {
-        #{$calendar2-prefix}-header {
-            &-actions {
-                margin-right: auto;
-                margin-left: 0;
-            }
+div[dir='rtl']#{$calendar2-prefix} {
+  &-fullscreen,
+  &-panel,
+  &-card {
+    #{$calendar2-prefix}-header {
+      &-actions {
+        margin-right: auto;
+        margin-left: $s-zero;
+      }
 
-            &-ranges,
-            &-actions {
-                & > *:not(:first-child) {
-                    margin-right: 8px;
-                    margin-left: 0;
-                }
-            }
+      &-ranges,
+      &-actions {
+        & > *:not(:first-child) {
+          margin-right: $calendar2-fullscreen-header-ranges-margin-left;
+          margin-left: $s-zero;
         }
+      }
     }
+  }
 
-    &-fullscreen #{$calendar2-prefix} {
-        &-cell-value,
-        &-table th {
-            text-align: left;
-        }
+  &-fullscreen #{$calendar2-prefix} {
+    &-cell-value,
+    &-table th {
+      text-align: left;
+    }
 
-        &-table th {
-            padding: 0 0 5px 12px;
-        }
+    &-table th {
+      padding: $calendar2-fullscreen-table-padding-t $calendar2-fullscreen-table-padding-l
+        $calendar2-fullscreen-table-padding-b $calendar2-fullscreen-table-padding-r;
     }
+  }
 }
-
diff --git a/components/calendar2/scss/mixin.scss b/components/calendar2/scss/mixin.scss
index 9113969e1c..f665b89536 100644
--- a/components/calendar2/scss/mixin.scss
+++ b/components/calendar2/scss/mixin.scss
@@ -1,43 +1,43 @@
 // mixin
-@mixin calendar-hover {
-    background: $color-fill1-2;
+@mixin calendar-hover($background) {
+  background: $background;
 }
 
-@mixin calendar-current {
-    color: $color-text1-3;
+@mixin calendar-current($color) {
+  color: $color;
 }
 
-@mixin calendar-initial {
-    background-color: $color-transparent;
-    color: $color-text1-3;
+@mixin calendar-initial($background-color, $color) {
+  background-color: $background-color;
+  color: $color;
 }
 
-@mixin calendar-disabled {
-    color: $color-text1-1;
-    background: $color-fill1-1;
+@mixin calendar-disabled($color, $background) {
+  color: $color;
+  background: $background;
 }
 
-@mixin calendar-selected {
-    color: $color-white;
-    background: $color-brand1-6;
+@mixin calendar-selected($color, $background) {
+  color: $color;
+  background: $background;
 }
 
-@mixin calendar-hover-fullscreen {
-    background-color: $color-fill1-2;
+@mixin calendar-hover-fullscreen($background-color) {
+  background-color: $background-color;
 }
 
-@mixin calendar-current-fullscreen {
-    color: $color-text1-3;
+@mixin calendar-current-fullscreen($color) {
+  color: $color;
 }
 
-@mixin calendar-selected-fullscreen {
-    border-top-color: $color-brand1-6;
-    font-weight: bold;
-    color: $color-brand1-6;
-    background: $color-brand1-1;
+@mixin calendar-selected-fullscreen($border-top-color, $color, $background) {
+  border-top-color: $border-top-color;
+  font-weight: bold;
+  color: $color;
+  background: $background;
 }
 
-@mixin calendar-disabled-fullscreen {
-    color: $color-text1-1;
-    background: $color-fill1-1;
+@mixin calendar-disabled-fullscreen($color, $background) {
+  color: $color;
+  background: $background;
 }
diff --git a/components/calendar2/scss/variable.scss b/components/calendar2/scss/variable.scss
index fa2364046d..bdc16f0222 100644
--- a/components/calendar2/scss/variable.scss
+++ b/components/calendar2/scss/variable.scss
@@ -1,5 +1,219 @@
 ////
+/// @module calendar2: 日历 2
+/// @tag Calendar2
+/// @category component
+/// @family data-display
+/// @varPrefix $calendar2-
+/// @classPrefix {prefix}-calendar2
+/// @order {"size/cell":10,"statement/normal/header":100,"statement/normal":10,"statement/normal/table":101,"statement/normal/cell":102,"statement/card/cell":110,"statement/card":11,"statement/card/table":111,"statement/card/header":112,"statement/panel/header":120,"statement/panel":12,"statement/disabled/cell":130,"statement/disabled":13}
 ////
 
-$calendar2-prefix: "." + $css-prefix + "calendar2";
-$calendar2-cell-inner: "." + $css-prefix + "calendar2" + '-cell-inner';
+$calendar2-prefix: '.' + $css-prefix + 'calendar2';
+$calendar2-cell-inner: '.' + $css-prefix + 'calendar2' + '-cell-inner';
+/// font size
+/// @namespace size
+$calendar2-font-size: $font-size-body-1 !default;
+/// background
+/// @namespace size
+$calendar2-background: $color-white !default;
+/// color
+/// @namespace size/cell
+$calendar2-cell-inner-color: $color-text1-1 !default;
+/// min width
+/// @namespace size/cell
+$calendar2-cell-inner-min-width: $s-6 !default;
+/// line width
+/// @namespace size/cell
+$calendar2-cell-inner-border-line-width: $line-1 !default;
+/// line style
+/// @namespace size/cell
+$calendar2-cell-inner-border-line-style: $line-solid !default;
+/// line color
+/// @namespace size/cell
+$calendar2-cell-inner-border-color: $color-transparent !default;
+/// margin (l)
+/// @namespace statement/normal/header
+$calendar2-fullscreen-header-ranges-margin-left: $s-2 !default;
+/// min width
+/// @namespace statement/normal/header
+$calendar2-fullscreen-header-select-year-min-width: $s-22 !default;
+/// padding (t,b)
+/// @namespace statement/normal
+$calendar2-fullscreen-body-padding-tb: $s-2 !default;
+/// padding (l,r)
+/// @namespace statement/normal
+$calendar2-fullscreen-body-padding-lr: $s-zero !default;
+/// height
+/// @namespace statement/card/cell
+$calendar2-card-cell-inner-height: $s-6 !default;
+/// thead height
+/// @namespace statement/card/table
+$calendar2-card-table-thead-height: $s-6 !default;
+/// color
+/// @namespace statement/card/table
+$calendar2-card-table-thead-color: $color-text1-2 !default;
+/// font weight
+/// @namespace statement/card/table
+$calendar2-card-table-th-font-weight: $font-weight-2 !default;
+/// padding (t,b)
+/// @namespace statement/card/table
+$calendar2-card-table-th-padding-tb: $s-1 !default;
+/// padding (l,r)
+/// @namespace statement/card/table
+$calendar2-card-table-th-padding-lr: $s-zero !default;
+/// th height
+/// @namespace statement/card/table
+$calendar2-card-table-th-height: $s-8 !default;
+/// month min width
+/// @namespace statement/card/table
+$calendar2-card-table-month-cell-inner-min-width: $s-14 !default;
+/// quarter min width
+/// @namespace statement/card/table
+$calendar2-card-table-quarter-cell-inner-min-width: $s-14 !default;
+/// decade min width
+/// @namespace statement/card/table
+$calendar2-card-table-decade-cell-inner-min-width: $s-20 !default;
+/// today color
+/// @namespace statement/card/cell
+$calendar2-card-current-today-not-disabled-cell-inner-color: $color-brand1-6 !default;
+/// padding (t)
+/// @namespace statement/normal/table
+$calendar2-fullscreen-table-padding-t: $s-zero !default;
+/// padding (r)
+/// @namespace statement/normal/table
+$calendar2-fullscreen-table-padding-r: $s-3 !default;
+/// padding (b)
+/// @namespace statement/normal/table
+$calendar2-fullscreen-table-padding-b: 5 !default;
+/// padding (l)
+/// @namespace statement/normal/table
+$calendar2-fullscreen-table-padding-l: $s-zero !default;
+/// height
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-height: $s-20 !default;
+/// line width
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-border-top-line-width: $line-2 !default;
+/// line style
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-border-top-line-style: $line-solid !default;
+/// border top color
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-border-top-color: $color-line1-1 !default;
+/// margin (t,b)
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-margin-tb: $s-zero !default;
+/// margin (l,r)
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-margin-lr: $s-1 !default;
+/// padding (t)
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-padding-t: $s-1 !default;
+/// padding (l,r)
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-padding-lr: $s-2 !default;
+/// padding (b)
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-inner-padding-b: $s-zero !default;
+/// height
+/// @namespace statement/normal
+$calendar2-fullscreen-td-height: $s-20 !default;
+/// line width
+/// @namespace statement/normal
+$calendar2-fullscreen-td-border-top-line-width: $line-2 !default;
+/// line style
+/// @namespace statement/normal
+$calendar2-fullscreen-td-border-top-line-style: $line-solid !default;
+/// color
+/// @namespace statement/normal
+$calendar2-fullscreen-td-border-top-color: $color-line1-1 !default;
+/// today color
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-current-today-cell-inner-color: $color-brand1-6 !default;
+/// background color
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-current-cell-inner-background-color: $color-white !default;
+/// padding (t,b)
+/// @namespace statement/card/header
+$calendar2-card-header-padding-tb: $s-2 !default;
+/// padding (l,r)
+/// @namespace statement/card/header
+$calendar2-card-header-padding-lr: $s-2 !default;
+/// line width
+/// @namespace statement/card/header
+$calendar2-card-header-border-bottom-line-width: $line-1 !default;
+/// line style
+/// @namespace statement/card/header
+$calendar2-card-header-border-bottom-line-style: $line-solid !default;
+/// color
+/// @namespace statement/card/header
+$calendar2-card-header-border-bottom-color: $color-line1-1 !default;
+/// padding (t,b)
+/// @namespace statement/panel/header
+$calendar2-panel-header-padding-tb: $s-zero !default;
+/// padding (l,r)
+/// @namespace statement/panel/header
+$calendar2-panel-header-padding-lr: $s-2 !default;
+/// line width
+/// @namespace statement/panel/header
+$calendar2-panel-header-border-bottom-line-width: $line-1 !default;
+/// line style
+/// @namespace statement/panel/header
+$calendar2-panel-header-border-bottom-line-style: $line-solid !default;
+/// border bottom color
+/// @namespace statement/panel/header
+$calendar2-panel-header-border-bottom-color: $color-line1-1 !default;
+/// min width
+/// @namespace statement/panel/header
+$calendar2-panel-header-btn-min-width: $s-5 !default;
+/// btn color
+/// @namespace statement/panel/header
+$calendar2-panel-header-btn-color: $color-text1-3 !default;
+/// font size
+/// @namespace statement/panel/header
+$calendar2-panel-header-btn-font-size: $font-size-body-2 !default;
+/// hover btn color
+/// @namespace statement/panel/header
+$calendar2-panel-header-hover-btn-color: $color-brand1-6 !default;
+/// color
+/// @namespace statement/disabled/cell
+$calendar2-cell-disabled-color: $color-text1-1 !default;
+/// background
+/// @namespace statement/disabled/cell
+$calendar2-cell-disabled-background: $color-fill1-1 !default;
+/// color
+/// @namespace statement/card/cell
+$calendar2-card-current-cell-inner-color: $color-text1-3 !default;
+/// background
+/// @namespace statement/card/cell
+$calendar2-card-cell-current-background: $color-fill1-2 !default;
+/// selected color
+/// @namespace statement/card/cell
+$calendar2-card-current-selected-not-disabled-cell-inner-color: $color-white !default;
+/// selected background
+/// @namespace statement/card/cell
+$calendar2-card-current-selected-not-disabled-cell-inner-background: $color-brand1-6 !default;
+/// disabled color
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-disabled-color: $color-text1-1 !default;
+/// disabled background
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-disabled-background: $color-fill1-1 !default;
+/// color
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-current-cell-inner-color: $color-text1-3 !default;
+/// hover background color
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-cell-current-hover-background-color: $color-fill1-2 !default;
+/// border top color
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-current-selected-not-disabled-cell-inner-border-top-color: $color-brand1-6 !default;
+/// selected color
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-current-selected-not-disabled-cell-inner-color: $color-brand1-6 !default;
+/// selected background
+/// @namespace statement/normal/cell
+$calendar2-fullscreen-current-selected-not-disabled-cell-inner-background: $color-brand1-1 !default;
+/// hover right btn background
+/// @namespace statement/panel/header
+$calendar2-panel-header-hover-right-btn-background: $color-fill1-2 !default;
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;