feat(calendar-view): [calendar-view] Adapting to the SMB theme

Author: Youyou-smiles

examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-event')
-  const timeInput = page.locator('.pc-demo-container').locator('.tiny-input__inner')
+  const timeInput = page.locator('.tiny-calendar-view').locator('.tiny-input__inner')
   const timeBtn = page.getByRole('textbox', { name: '年 05 月' })
   const leftYear = page.getByRole('button', { name: '前一年' })
   const month6 = page.getByText('六月')

packages/theme/src/calendar-view/index.less

@@ -670,23 +670,23 @@
     padding: 8px;
 
     .title{
-      font-size: var(--ti-tooltip-title-font-size);
+      font-size: var(--ti-calendar-view-tooltip-title-font-size);
       padding: 0 6px;
       margin-bottom: 6px;
       border-left-width: 2px;
       border-left-color: #1890ff;
-      font-weight: var(--ti-tooltip-title-font-weight);
+      font-weight: var(--ti-calendar-view-tooltip-title-font-weight);
     }
 
     .date{
       margin-bottom: 6px;
       padding: 0 8px;
-      color: var(--ti-tooltip-date-color, #8d959e);
+      color: var(--ti-calendar-view-tooltip-date-text-color, #8d959e);
     }
 
     .content{
       padding: 0 8px;
-      color: var(--ti-tooltip-content-color, #8d959e);
+      color: var(--ti-calendar-view-tooltip-content-text-color, #8d959e);
     }
   }
 }

packages/theme/src/calendar-view/smb-theme.js

@@ -19,10 +19,10 @@ export const tinyCalendarViewSmbTheme = {
   'ti-calendar-view-radio-active-inner-hover': 'var(--ti-common-color-bg-white-normal)',
   'ti-calendar-view-radio-button-inner': '#ebebeb',
   'ti-calendar-view-header-main-text-color': 'var(--ti-common-color-text-weaken)',
-  'ti-tooltip-title-font-size': 'var(--ti-common-font-size-2)',
-  'ti-tooltip-title-font-weight': 'var(--ti-common-font-weight-bold)',
-  'ti-tooltip-content-color': 'var(--ti-common-color-text-primary)',
-  'ti-tooltip-date-color': 'var(--ti-common-color-text-secondary)',
+  'ti-calendar-view-tooltip-title-font-size': 'var(--ti-common-font-size-2)',
+  'ti-calendar-view-tooltip-title-font-weight': 'var(--ti-common-font-weight-bold)',
+  'ti-calendar-view-tooltip-content-text-color': 'var(--ti-common-color-text-primary)',
+  'ti-calendar-view-tooltip-date-text-color': 'var(--ti-common-color-text-secondary)',
   'ti-calendar-view-day-selected-border-radius': 'unset',
   'ti-calendar-view-day-selected-svg-right': 'unset',
   'ti-calendar-view-day-selected-svg-top': 'unset',

packages/theme/src/calendar-view/vars.less

@@ -27,10 +27,10 @@
     --ti-calendar-view-day-selected-svg-right: -1px;
     --ti-calendar-view-day-selected-svg-top: -6px;
     // 提示
-    --ti-tooltip-title-font-size: var(--ti-common-font-size-base);
-    --ti-tooltip-title-font-weight: var(--ti-common-font-weight-5);
-    --ti-tooltip-date-color: #8d959e;
-    --ti-tooltip-content-color: #8d959e;
+    --ti-calendar-view-tooltip-title-font-size: var(--ti-common-font-size-base);
+    --ti-calendar-view-tooltip-title-font-weight: var(--ti-common-font-weight-5);
+    --ti-calendar-view-tooltip-date-text-color: #8d959e;
+    --ti-calendar-view-tooltip-content-text-color: #8d959e;
     // 箭头
     --ti-calendar-view-header-left-svg-fill: unset;
     --ti-calendar-view-header-right-svg-fill: unset;

packages/theme/src/theme.config.js

@@ -31,6 +31,7 @@ export default {
   'color-select-panel': 'color-select-panel',
   'color-picker': 'color-picker',
   'calendar-view': 'calendar-view',
+  'calendar-view-tooltip': 'calendar-view-tooltip',
   'detail-page': 'detail-page',
   'dialog-box': 'dialog-box__wrapper',
   'dropdown-item': 'dropdown-item',