feat(card): add :target style (#35)

* feat(docs): add target style when anchor compoents demo

* feat(card): rename targetColor to colorTarget

* fix(changelog): fix changelog doc typo

* feat(card): delete !important, complete target style by override

* feat(card): rewrite target style

CHANGELOG.en-US.md

@@ -7,6 +7,10 @@
 - Fix `n-popover` sometimes won't sync position in manual mode.
 - Fix `n-transfer`'s empty icon is no toggling transition.
 
+### Feats
+
+- `n-card` add `:target` style
+
 ## 2.11.4
 
 ### Feats

CHANGELOG.zh-CN.md

@@ -7,6 +7,10 @@
 - 修复 `n-popover` 有时在手动模式不会同步位置
 - 修复 `n-transfer` 的无数据 Icon 没有开关动画
 
+### Feats
+
+- `n-card` 增加 `:target` 的样式
+
 ## 2.11.4
 
 ### Feats
@@ -389,7 +393,7 @@
 - `n-layout-sider` 新增 `default-collapsed` 属性
 - `n-modal` 支持自定义位置
 
-### Fixed
+### Fixes
 
 - 修正 `n-menu` 垂直折叠时 `n-menu-item` tooltip 不显示的问题
 - 修正 `n-menu` `collapsed-icon-size` 不生效的问题

src/card/src/Card.tsx

@@ -83,6 +83,7 @@ export default defineComponent({
           self: {
             color,
             colorModal,
+            colorTarget,
             textColor,
             titleTextColor,
             titleFontWeight,
@@ -113,6 +114,7 @@ export default defineComponent({
           '--color': color,
           '--color-modal': colorModal,
           '--color-popover': colorPopover,
+          '--color-target': colorTarget,
           '--text-color': textColor,
           '--line-height': lineHeight,
           '--action-color': actionColor,

src/card/src/styles/index.cssr.ts

@@ -137,9 +137,11 @@ export default c([
         width: 100%;
       `)
     ]),
-    cM('bordered', {
-      border: '1px solid var(--border-color)'
-    }),
+    cM('bordered', `
+      border: 1px solid var(--border-color);
+    `, [
+      c('&:target', 'border-color: var(--color-target);')
+    ]),
     cM('action-segmented', [
       c('>', [
         cE('action', [

src/card/styles/light.ts

@@ -5,6 +5,7 @@ import { Theme } from '../../_mixins'
 
 export const self = (vars: ThemeCommonVars) => {
   const {
+    primaryColor,
     borderRadius,
     lineHeight,
     fontSize,
@@ -27,6 +28,7 @@ export const self = (vars: ThemeCommonVars) => {
     color: cardColor,
     colorModal: modalColor,
     colorPopover: popoverColor,
+    colorTarget: primaryColor,
     textColor: textColor2,
     titleTextColor: textColor1,
     borderColor: dividerColor,