refactor(list): color in popover

src/list/src/List.tsx

@@ -36,7 +36,10 @@ export default defineComponent({
             textColor,
             color,
             colorModal,
+            colorPopover,
             borderColor,
+            borderColorModal,
+            borderColorPopover,
             borderRadius
           }
         } = themeRef.value
@@ -47,7 +50,10 @@ export default defineComponent({
           '--color': color,
           '--border-radius': borderRadius,
           '--border-color': borderColor,
-          '--color-modal': colorModal
+          '--border-color-modal': borderColorModal,
+          '--border-color-popover': borderColorPopover,
+          '--color-modal': colorModal,
+          '--color-popover': colorPopover
         }
       })
     }

src/list/src/styles/index.cssr.ts

@@ -1,4 +1,4 @@
-import { cB, c, cE, cM, insideModal } from '../../../_utils/cssr'
+import { cB, c, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr'
 
 // vars:
 // --font-size
@@ -7,7 +7,10 @@ import { cB, c, cE, cM, insideModal } from '../../../_utils/cssr'
 // --color
 // --border-radius
 // --border-color
+// --border-color-modal
+// --border-color-popover
 // --color-modal
+// --color-popover
 export default c([
   cB('list', `
     font-size: var(--font-size);
@@ -18,24 +21,25 @@ export default c([
     padding: 0;
     list-style-type: none;
     color: var(--text-color);
+    background-color: var(--color);
+    --merged-border-color: var(--border-color);
   `, [
     cM('bordered', `
-      background-color: var(--color);
       border-radius: var(--border-radius);
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--merged-border-color);
     `, [
       cB('list-item', `
         padding: 12px 20px;
       `, [
         c('&:not(:last-child)', `
-          border-bottom: 1px solid var(--border-color);
+          border-bottom: 1px solid var(--merged-border-color);
         `)
       ]),
       cE('header, footer', `
         padding: 12px 20px;
       `, [
         c('&:not(:last-child)', `
-          border-bottom: 1px solid var(--border-color);
+          border-bottom: 1px solid var(--merged-border-color);
         `)
       ])
     ]),
@@ -45,7 +49,7 @@ export default c([
       transition: border-color .3s var(--bezier);
     `, [
       c('&:not(:last-child)', `
-        border-bottom: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--merged-border-color);
       `)
     ]),
     cB('list-item', `
@@ -68,14 +72,25 @@ export default c([
         flex: 1;
       `),
       c('&:not(:last-child)', `
-        border-bottom: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--merged-border-color);
       `)
     ])
   ]),
   insideModal(
-    cB('list', [
+    cB('list', `
+      background-color: var(--color-modal);
+    `, [
       cM('bordered', `
-        background-color: var(--color-modal);
+        --merged-border-color: var(--border-color-modal);
+      `)
+    ])
+  ),
+  insidePopover(
+    cB('list', `
+      background-color: var(--color-popover);
+    `, [
+      cM('bordered', `
+        --merged-border-color: var(--border-color-popover);
       `)
     ])
   )

src/list/styles/dark.ts

@@ -1,3 +1,4 @@
+import { composite } from 'seemly'
 import { commonDark } from '../../_styles/common'
 import type { ListTheme } from './light'
 
@@ -9,6 +10,7 @@ const listDark: ListTheme = {
       textColor2,
       cardColor,
       modalColor,
+      popoverColor,
       dividerColor,
       borderRadius,
       fontSize
@@ -17,7 +19,10 @@ const listDark: ListTheme = {
       textColor: textColor2,
       color: cardColor,
       colorModal: modalColor,
+      colorPopover: popoverColor,
       borderColor: dividerColor,
+      borderColorModal: composite(modalColor, dividerColor),
+      borderColorPopover: composite(popoverColor, dividerColor),
       borderRadius,
       fontSize
     }

src/list/styles/light.ts

@@ -1,3 +1,4 @@
+import { composite } from 'seemly'
 import { commonLight } from '../../_styles/common'
 import type { ThemeCommonVars } from '../../_styles/common'
 import { Theme } from '../../_mixins'
@@ -7,6 +8,7 @@ const self = (vars: ThemeCommonVars) => {
     textColor2,
     cardColor,
     modalColor,
+    popoverColor,
     dividerColor,
     borderRadius,
     fontSize
@@ -15,7 +17,10 @@ const self = (vars: ThemeCommonVars) => {
     textColor: textColor2,
     color: cardColor,
     colorModal: modalColor,
+    colorPopover: popoverColor,
     borderColor: dividerColor,
+    borderColorModal: composite(modalColor, dividerColor),
+    borderColorPopover: composite(popoverColor, dividerColor),
     borderRadius,
     fontSize
   }