feat: migrate less to token for Calendar (#42194)

* feat: rename calendar token

* docs: add component-token demo

components/calendar/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.

components/calendar/demo/component-token.tsx

@@ -0,0 +1,29 @@
+import { Calendar, ConfigProvider } from 'antd';
+import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { Dayjs } from 'dayjs';
+import React from 'react';
+
+/** Test usage. Do not use in your production. */
+export default () => {
+  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+    console.log(value.format('YYYY-MM-DD'), mode);
+  };
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Calendar: {
+            fullBg: 'red',
+            fullPanelBg: 'green',
+            itemActiveBg: 'black',
+          },
+        },
+      }}
+    >
+      <Calendar onPanelChange={onPanelChange} />
+      <br />
+      <Calendar onPanelChange={onPanelChange} fullscreen={false} />
+    </ConfigProvider>
+  );
+};

components/calendar/index.en-US.md

@@ -20,6 +20,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 <code src="./demo/card.tsx" clientOnly>Card</code>
 <code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
 <code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

components/calendar/index.zh-CN.md

@@ -21,6 +21,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 <code src="./demo/card.tsx" clientOnly>卡片模式</code>
 <code src="./demo/select.tsx" clientOnly>选择功能</code>
 <code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

components/calendar/style/index.ts

@@ -1,9 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import { resetComponent } from '../../style';
 import type { PickerPanelToken } from '../../date-picker/style';
 import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style';
 import type { InputToken } from '../../input/style';
 import { initInputToken } from '../../input/style';
+import { resetComponent } from '../../style';
 import type { FullToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
@@ -11,26 +11,25 @@ export interface ComponentToken {
   yearControlWidth: number;
   monthControlWidth: number;
   miniContentHeight: number;
+  fullBg: string;
+  fullPanelBg: string;
+  itemActiveBg: string;
 }
 
 interface CalendarToken extends InputToken<FullToken<'Calendar'>>, PickerPanelToken {
   calendarCls: string;
-  calendarFullBg: string;
-  calendarFullPanelBg: string;
-  calendarItemActiveBg: string;
   dateValueHeight: number;
   weekHeight: number;
   dateContentHeight: number;
 }
 
 export const genCalendarStyles = (token: CalendarToken): CSSObject => {
-  const { calendarCls, componentCls, calendarFullBg, calendarFullPanelBg, calendarItemActiveBg } =
-    token;
+  const { calendarCls, componentCls, fullBg, fullPanelBg, itemActiveBg } = token;
   return {
     [calendarCls]: {
       ...genPanelStyle(token),
       ...resetComponent(token),
-      background: calendarFullBg,
+      background: fullBg,
       '&-rtl': {
         direction: 'rtl',
       },
@@ -52,7 +51,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
       },
     },
     [`${calendarCls} ${componentCls}-panel`]: {
-      background: calendarFullPanelBg,
+      background: fullPanelBg,
       border: 0,
       borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
       borderRadius: 0,
@@ -92,7 +91,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
         display: 'block',
         width: '100%',
         textAlign: 'end',
-        background: calendarFullBg,
+        background: fullBg,
         border: 0,
         [`${componentCls}-body`]: {
           'th, td': {
@@ -121,7 +120,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
         // >>> Selected
         [`&-in-view${componentCls}-cell-selected`]: {
           [`${calendarCls}-date, ${calendarCls}-date-today`]: {
-            background: calendarItemActiveBg,
+            background: itemActiveBg,
           },
         },
         '&-selected, &-selected:hover': {
@@ -198,9 +197,6 @@ export default genComponentStyleHook(
       {
         calendarCls,
         pickerCellInnerCls: `${token.componentCls}-cell-inner`,
-        calendarFullBg: token.colorBgContainer,
-        calendarFullPanelBg: token.colorBgContainer,
-        calendarItemActiveBg: token.controlItemBgActive,
         dateValueHeight: token.controlHeightSM,
         weekHeight: token.controlHeightSM * 0.75,
         dateContentHeight:
@@ -210,9 +206,12 @@ export default genComponentStyleHook(
 
     return [genCalendarStyles(calendarToken)];
   },
-  {
+  (token) => ({
+    fullBg: token.colorBgContainer,
+    fullPanelBg: token.colorBgContainer,
+    itemActiveBg: token.controlItemBgActive,
     yearControlWidth: 80,
     monthControlWidth: 70,
     miniContentHeight: 256,
-  },
+  }),
 );

docs/react/migrate-less-variables.en-US.md

@@ -23,7 +23,18 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Button -->
 
-<!-- ### Calendar -->
+## Calendar
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@calendar-bg` | - | Deprecated for style change |
+| `@calendar-input-bg` | - | Deprecated for style change |
+| `@calendar-border-color` | - | Deprecated for style change |
+| `@calendar-item-active-bg` | `itemActiveBg` | - |
+| `@calendar-column-active-bg` | - | Deprecated for style change |
+| `@calendar-full-bg` | `fullBg` | - |
+| `@calendar-full-panel-bg` | `fullPanelBg` | - |
 
 <!-- ### Card -->
 

docs/react/migrate-less-variables.zh-CN.md

@@ -23,7 +23,18 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Button 按钮 -->
 
-<!-- ### Calendar 日历 -->
+## Calendar 日历
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@calendar-bg` | - | 由于样式变化已废弃 |
+| `@calendar-input-bg` | - | 由于样式变化已废弃 |
+| `@calendar-border-color` | - | 由于样式变化已废弃 |
+| `@calendar-item-active-bg` | `itemActiveBg` | - |
+| `@calendar-column-active-bg` | - | 由于样式变化已废弃 |
+| `@calendar-full-bg` | `fullBg` | - |
+| `@calendar-full-panel-bg` | `fullPanelBg` | - |
 
 <!-- ### Card 卡片 -->