feat(calendar): color in popover

src/calendar/src/Calendar.tsx

@@ -137,13 +137,15 @@ export default defineComponent({
             cellColorHover,
             cellColor,
             cellColorModal,
-            barColor
+            barColor,
+            cellColorPopover
           }
         } = themeRef.value
         return {
           '--bezier': cubicBezierEaseInOut,
           '--border-color': composite(cellColor, borderColor),
           '--border-color-modal': composite(cellColorModal, borderColor),
+          '--border-color-popover': composite(cellColorPopover, borderColor),
           '--border-radius': borderRadius,
           '--text-color': textColor,
           '--title-font-weight': titleFontWeight,
@@ -157,6 +159,10 @@ export default defineComponent({
           '--cell-color': cellColor,
           '--cell-color-hover': composite(cellColor, cellColorHover),
           '--cell-color-hover-modal': composite(cellColorModal, cellColorHover),
+          '--cell-color-hover-popover': composite(
+            cellColorPopover,
+            cellColorHover
+          ),
           '--bar-color': barColor
         }
       })

src/calendar/src/styles/index.cssr.ts

@@ -1,8 +1,10 @@
-import { cB, cE, cM, c, insideModal } from '../../../_utils/cssr'
+import { cB, cE, cM, c, insideModal, insidePopover } from '../../../_utils/cssr'
 
 // vars:
 // --bezier
 // --border-color
+// --border-color-modal
+// --border-color-popover
 // --border-radius
 // --text-color
 // --title-font-weight
@@ -15,6 +17,7 @@ import { cB, cE, cM, c, insideModal } from '../../../_utils/cssr'
 // --cell-color
 // --cell-color-hover
 // --cell-color-hover-modal
+// --cell-color-hover-popover
 // --bar-color
 export default c([
   cB('calendar', `
@@ -164,5 +167,17 @@ export default c([
         background-color: var(--cell-color-hover-modal);
       `)
     ])
+  ])),
+  insidePopover(cB('calendar', [
+    cB('calendar-dates', `
+      border-color: var(--border-color-popover);
+    `),
+    cB('calendar-cell', `
+      border-color: var(--border-color-popover);
+    `, [
+      c('&:hover', `
+        background-color: var(--cell-color-hover-popover);
+      `)
+    ])
   ]))
 ])

src/calendar/styles/dark.ts

@@ -23,7 +23,8 @@ const calendarDark: CalendarTheme = {
       baseColor,
       hoverColor,
       cardColor,
-      modalColor
+      modalColor,
+      popoverColor
     } = vars
     return {
       ...commonVariables,
@@ -40,6 +41,7 @@ const calendarDark: CalendarTheme = {
       cellColorHover: hoverColor,
       cellColor: cardColor,
       cellColorModal: modalColor,
+      cellColorPopover: popoverColor,
       barColor: primaryColor
     }
   }

src/calendar/styles/light.ts

@@ -18,7 +18,8 @@ const self = (vars: ThemeCommonVars) => {
     baseColor,
     hoverColor,
     cardColor,
-    modalColor
+    modalColor,
+    popoverColor
   } = vars
   return {
     ...commonVariables,
@@ -35,6 +36,7 @@ const self = (vars: ThemeCommonVars) => {
     cellColorHover: hoverColor,
     cellColor: cardColor,
     cellColorModal: modalColor,
+    cellColorPopover: popoverColor,
     barColor: primaryColor
   }
 }

src/modal/demos/zhCN/dark-7-debug.demo.md

@@ -0,0 +1,10 @@
+# Dark Debug Popover 2
+
+```html
+<n-popover trigger="click">
+  <template #trigger>
+    <n-button>Toggle</n-button>
+  </template>
+  <n-calendar />
+</n-popover>
+```

src/modal/demos/zhCN/index.demo-entry.md

@@ -19,6 +19,7 @@ dark-4-debug
 dark-5-debug
 drawer-debug
 dark-6-debug
+dark-7-debug
 ```
 
 ## Props