@xihan-ui/styles 1.0.0 → 2.0.0

package/css/card.css

@@ -1,129 +1,106 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 card 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='card'] {
     --xh-card-skin: 1;
   }
 
+  /* Card 是带统一内边距与节奏的内容面；布局方向可由作者在根上覆盖。
+     边界由 --xh-border-default 描边承担，raised 落影只是抬起的加成（§5.3：Card 是唯一登记 raised 的静态面，
+     且 raised 必带描边）；内衬只走 --xh-surface-* 阶梯。 */
   [data-scope='card'][data-part='root'] {
+    position: relative;
     display: flex;
     flex-direction: column;
-    /* 封面要被圆角裁住，所以根自己收边 */
-    overflow: hidden;
-    border: var(--xh-stroke-thin) solid transparent;
+    gap: var(--xh-card-gap, var(--xh-space-3));
+    min-inline-size: 0;
+    overflow: visible;
+    padding: var(--xh-card-p, var(--xh-surface-pad-lg));
+    border: var(--xh-stroke-thin) solid var(--xh-card-border, var(--xh-border-default));
     border-radius: var(--xh-card-radius, var(--xh-shape-surface));
     background: var(--xh-card-bg, var(--xh-bg-surface));
     color: var(--xh-card-fg, var(--xh-fg-default));
-    /* 各段的内边距由根上这一个槽位统一给，换档只改这里 */
-    --xh-_card-pad: var(--xh-space-4);
-  }
-
-  /* —— 形态 —— */
-  [data-scope='card'][data-part='root'][data-variant='outline'] {
-    border-color: var(--xh-card-border, var(--xh-border-default));
+    box-shadow: var(--xh-card-shadow, var(--xh-elevation-raised));
+    font-size: var(--xh-card-font-size, var(--xh-text-label-size));
+    line-height: var(--xh-card-leading, var(--xh-text-body-leading));
   }
 
+  /* 形态按根面三选一：outline 即基础规则（描边 + surface 底 + raised），subtle 淡底 + 透明占位边 + 无影
+     （淡底与阴影互斥），ghost 三件都不画（占位边保住 1px 边位，三档几何一致）；不承诺悬停或尺寸等额外行为。 */
   [data-scope='card'][data-part='root'][data-variant='subtle'] {
+    border-color: transparent;
     background: var(--xh-card-bg, var(--xh-bg-subtle));
-  }
-
-  [data-scope='card'][data-part='root'][data-variant='elevated'] {
-    box-shadow: var(--xh-card-shadow, var(--xh-elevation-raised));
+    box-shadow: var(--xh-card-shadow, none);
   }
 
   [data-scope='card'][data-part='root'][data-variant='ghost'] {
+    border-color: transparent;
     background: transparent;
-  }
-
-  /* —— 尺寸 —— */
-  [data-scope='card'][data-part='root'][data-size='sm'] {
-    --xh-_card-pad: var(--xh-space-3);
-  }
-
-  [data-scope='card'][data-part='root'][data-size='lg'] {
-    --xh-_card-pad: var(--xh-space-6);
-  }
-
-  /* 悬停抬起：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
-  @media (hover: hover) {
-    [data-scope='card'][data-part='root'][data-hoverable]:hover {
-      border-color: var(--xh-card-border, var(--xh-border-strong));
-      box-shadow: var(--xh-card-shadow, var(--xh-elevation-raised));
-    }
-  }
-
-  [data-scope='card'][data-part='root'][data-hoverable] {
-    transition:
-      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  /* —— 各段 —— */
-  /* 封面顶到根的边上，不吃内边距 */
-  [data-scope='card'][data-part='cover'] {
-    display: block;
-    overflow: hidden;
+    box-shadow: var(--xh-card-shadow, none);
   }
 
   [data-scope='card'][data-part='header'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-card-header-gap, var(--xh-space-1));
-    padding: var(--xh-_card-pad);
-    /* 头下面若还有别的段，间距由那一段自己的内边距接上，这里不重复留白 */
-    padding-block-end: var(--xh-card-header-pb, var(--xh-space-2));
   }
 
-  [data-scope='card'][data-part='title'] {
-    font-size: var(--xh-card-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-font-weight-medium);
-    line-height: var(--xh-leading-tight);
+  [data-scope='card'][data-part='title'],
+  [data-scope='card'][data-part='description'] {
+    margin: 0;
   }
 
-  [data-scope='card'][data-part='root'][data-size='lg'] [data-part='title'] {
-    font-size: var(--xh-card-title-font-size, var(--xh-control-font-lg));
+  [data-scope='card'][data-part='title'] {
+    color: var(--xh-card-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-card-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-card-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-card-title-leading, var(--xh-leading-relaxed));
   }
 
   [data-scope='card'][data-part='description'] {
-    color: var(--xh-fg-muted);
-    font-size: var(--xh-text-secondary-size);
-    line-height: var(--xh-leading-normal);
+    color: var(--xh-card-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-card-description-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-card-description-leading, var(--xh-leading-normal));
   }
 
-  [data-scope='card'][data-part='body'] {
+  [data-scope='card'][data-part='content'] {
+    display: flex;
     flex: 1 1 auto;
-    padding: var(--xh-_card-pad);
-  }
-
-  /* 头与身相邻时，头已经收窄了下边距，身不必再从顶上留一份 */
-  [data-scope='card'][data-part='header'] + [data-part='body'] {
-    padding-block-start: var(--xh-card-body-pt, var(--xh-space-2));
+    flex-direction: column;
+    gap: var(--xh-card-content-gap, var(--xh-space-1));
+    min-inline-size: 0;
   }
 
   [data-scope='card'][data-part='footer'] {
     display: flex;
+    flex-direction: row;
     align-items: center;
     gap: var(--xh-card-footer-gap, var(--xh-space-2));
-    padding: var(--xh-_card-pad);
-    padding-block-start: var(--xh-card-footer-pt, var(--xh-space-2));
   }
 
-  /* —— 分段 —— */
-  /* 分隔线画在下一段的上边，段与段之间才只有一条 */
-  [data-scope='card'][data-part='root'][data-segmented] [data-part='body'],
-  [data-scope='card'][data-part='root'][data-segmented] [data-part='footer'] {
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-card-divider, var(--xh-border-subtle));
-    padding-block-start: var(--xh-_card-pad);
+  @media print {
+    [data-scope='card'][data-part='root'] {
+      border-color: currentColor;
+      box-shadow: none;
+    }
   }
 
-  [data-scope='card'][data-part='root'][data-segmented] [data-part='header'] {
-    padding-block-end: var(--xh-_card-pad);
+  @media (forced-colors: active) {
+    [data-scope='card'][data-part='root']:not([data-variant='ghost']) {
+      border-color: CanvasText;
+      box-shadow: none;
+    }
   }
 
-  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
-     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  /* 声明过 display 就盖掉 UA 的 [hidden]{display:none}，各部件在文件末尾统一还原。 */
   [data-scope='card'][data-part='root'][hidden],
-  [data-scope='card'][data-part='cover'][hidden],
   [data-scope='card'][data-part='header'][hidden],
+  [data-scope='card'][data-part='content'][hidden],
   [data-scope='card'][data-part='footer'][hidden] {
     display: none;
   }