@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/card.css

@@ -0,0 +1,249 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 card 样式。 */
+
+@import '../family/motion.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-card {
+    --xh-card-skin: 1;
+  }
+
+  /* Card 是一块描边内容面：根自己不留内衬，头部条、正文与页脚各带各的内衬，头部条的分隔线才能贯通整宽，
+     直接放进根的媒体也贴边铺满；布局方向可由作者在根上覆盖。
+     边界由 --xh-border-default 描边承担，raised 落影只是抬起的加成（Card 是唯一登记 raised 的静态面，
+     且 raised 必带描边）。横向内衬 16px 不随密度；正文纵向内衬走 --xh-surface-pad-lg（16，紧凑 12）。
+     --xh-card-p 改的是各部件的内衬，四边同值 */
+  .xh-scope-card[data-part='root'] {
+    --xh-_card-px: var(--xh-card-p, var(--xh-space-4));
+    --xh-_card-py: var(--xh-card-p, var(--xh-surface-pad-lg));
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-card-gap, 0);
+    min-inline-size: 0;
+    overflow: visible;
+    padding: 0;
+    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));
+    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 边位，三档几何一致）；不承诺悬停或尺寸等额外行为。 */
+  .xh-scope-card[data-part='root'][data-variant='subtle'] {
+    /* 淡底容器：坐在它上面的控件按淡底阶梯换面（200 → 300），可交互卡片自己的悬停与按下读同一支私有槽。
+       host 槽只写不读，值由私有槽供给，两边同源 */
+    --xh-_card-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_card-host-bg-pressed: var(--xh-bg-subtle-active);
+    --xh-action-host-bg-hover: var(--xh-_card-host-bg-hover);
+    --xh-action-host-bg-pressed: var(--xh-_card-host-bg-pressed);
+
+    border-color: transparent;
+    background: var(--xh-card-bg, var(--xh-bg-subtle));
+    box-shadow: var(--xh-card-shadow, none);
+  }
+
+  .xh-scope-card[data-part='root'][data-variant='ghost'] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: var(--xh-card-shadow, none);
+  }
+
+  /* —— 整卡可交互 ——
+     点击区由 trigger 的 ::after 铺满整张卡片，可及名与 Tab 位只归 trigger 这个原生链接或按钮。
+     反馈按根面分：outline 是 raised 面，悬停抬高一档海拔（raised → lifted），按下换到白底阶梯的 200；
+     subtle / ghost 没有影，按承载面阶梯换面（淡底 200 → 300，无壳 100 → 200）。
+     抬起只走影、不走位移，减弱动效下仍是淡变。按下 press 时长切面，松开按 micro 回落。
+     按下认根的 :active：点击区是 trigger 的伪元素，按在卡片任一处都会让根进入 :active；
+     脚部叠在点击区之上，按脚部里的按钮时根也是 :active，这一档排除掉 */
+  .xh-scope-card[data-part='root'][data-interactive] {
+    transition-property: background-color, box-shadow;
+    transition-duration: var(--xh-motion-duration-micro);
+    transition-timing-function: var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-card[data-part='root'][data-interactive][data-variant='outline']:hover {
+    box-shadow: var(--xh-card-shadow-hover, var(--xh-elevation-lifted));
+  }
+
+  .xh-scope-card[data-part='root'][data-interactive][data-variant='subtle']:hover {
+    background: var(--xh-card-bg-hover, var(--xh-_card-host-bg-hover));
+  }
+
+  .xh-scope-card[data-part='root'][data-interactive][data-variant='ghost']:hover {
+    background: var(--xh-card-bg-hover, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-card[data-part='root'][data-interactive]:active:not(:has(.xh-scope-card[data-part='footer']:active)) {
+    transition-duration: var(--xh-motion-duration-press);
+  }
+
+  .xh-scope-card[data-part='root'][data-interactive][data-variant='outline']:active:not(:has(.xh-scope-card[data-part='footer']:active)) {
+    background: var(--xh-card-bg-pressed, var(--xh-bg-subtle-hover-opaque));
+  }
+
+  .xh-scope-card[data-part='root'][data-interactive][data-variant='subtle']:active:not(:has(.xh-scope-card[data-part='footer']:active)) {
+    background: var(--xh-card-bg-pressed, var(--xh-_card-host-bg-pressed));
+  }
+
+  .xh-scope-card[data-part='root'][data-interactive][data-variant='ghost']:active:not(:has(.xh-scope-card[data-part='footer']:active)) {
+    background: var(--xh-card-bg-pressed, var(--xh-bg-subtle-hover));
+  }
+
+  /* trigger 读作标题本身：链接不带 UA 的蓝字下划线，按钮不带 UA 的框与底 */
+  .xh-scope-card[data-part='trigger'] {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  /* 点击区铺满整张卡片：相对根定位（根是 position: relative），外扩一条描边宽盖住边框。
+     trigger 与根之间的祖先不能再建定位上下文，否则点击区只铺到那一层 */
+  .xh-scope-card[data-part='root'][data-interactive] .xh-scope-card[data-part='trigger']::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--xh-stroke-thin));
+    border-radius: var(--xh-card-radius, var(--xh-shape-surface));
+  }
+
+  /* 焦点环画在整张卡片外沿：环是点击区的轮廓，读者看到的可交互范围与点得到的范围一致 */
+  .xh-scope-card[data-part='root'][data-interactive] .xh-scope-card[data-part='trigger']:focus-visible {
+    outline: none;
+  }
+
+  .xh-scope-card[data-part='root'][data-interactive] .xh-scope-card[data-part='trigger']:focus-visible::after {
+    outline: var(--xh-ring-width) solid var(--xh-_ring-color, var(--xh-ring-focus));
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* footer 叠在点击区之上：里面另放的按钮照常可点，footer 的空白处不触发整卡 */
+  .xh-scope-card[data-part='root'][data-interactive] .xh-scope-card[data-part='footer'] {
+    position: relative;
+  }
+
+  /* liquid 档的交互光：可交互卡片进入悬停时，一道光沿 1px 描边扫过一次，与 Button 实心钮同一配方。
+     光只走描边、不进面，取卡片前景色；只在细指针可悬停的设备上播，强制色下不画装饰光。
+     减弱动效下时长归 1ms，一闪即过 */
+  @media (hover: hover) and (pointer: fine) and (forced-colors: none) {
+    :where([data-material='liquid']) .xh-scope-card[data-part='root'][data-interactive]:hover::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--xh-stroke-thin));
+      border: var(--xh-stroke-thin) solid transparent;
+      border-radius: inherit;
+      background: linear-gradient(100deg, transparent 42%, currentColor 50%, transparent 58%) border-box no-repeat;
+      background-size: 300% 100%;
+      background-position: 0% 0;
+      pointer-events: none;
+      mask:
+        linear-gradient(currentColor 0 0) padding-box exclude,
+        linear-gradient(currentColor 0 0);
+      animation: xh-glint var(--xh-card-glint-duration, var(--xh-motion-duration-glint)) var(--xh-motion-ease-enter) both;
+      /* 光从行首扫向行尾：rtl 下按方向符号把这一圈水平镜像，扫向跟着掉头，缓动不变 */
+      scale: var(--xh-direction-sign) 1;
+    }
+  }
+
+  .xh-scope-card[data-part='header'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* 头部条：根的直接子节点才是条——一行区块标题时高 46px（紧凑 40px），标题在条里竖向居中，
+     横向内衬与正文同起点，底边一道 1px 内部分隔线。嵌在正文里的 header（横向卡片把标题与正文排在一列）不画条 */
+  .xh-scope-card[data-part='root'] > .xh-scope-card[data-part='header'] {
+    justify-content: center;
+    min-block-size: var(--xh-card-header-h, var(--xh-surface-header-h));
+    padding-block: var(--xh-card-header-py, var(--xh-space-2));
+    padding-inline: var(--xh-_card-px);
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-card-header-border, var(--xh-border-subtle));
+  }
+
+  .xh-scope-card[data-part='title'],
+  .xh-scope-card[data-part='description'] {
+    margin: 0;
+  }
+
+  /* 标题取区块标题档（heading-3）、正文色 */
+  .xh-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-heading-3-size));
+    font-weight: var(--xh-card-title-font-weight, var(--xh-text-heading-3-weight));
+    line-height: var(--xh-card-title-leading, var(--xh-leading-tight));
+  }
+
+  .xh-scope-card[data-part='description'] {
+    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));
+  }
+
+  /* 正文：四边内衬、14px 次级色 */
+  .xh-scope-card[data-part='content'] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--xh-card-content-gap, var(--xh-space-1));
+    min-inline-size: 0;
+    padding: var(--xh-_card-py) var(--xh-_card-px);
+    color: var(--xh-card-content-fg, var(--xh-fg-muted));
+    font-size: var(--xh-card-content-font-size, var(--xh-text-body-size));
+  }
+
+  .xh-scope-card[data-part='footer'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--xh-card-footer-gap, var(--xh-space-2));
+  }
+
+  /* 页脚是正文的延续：与正文同起点，顶上不再留白（正文的底内衬就是两者的间距），底边留正文同档的内衬。
+     嵌在正文里的页脚随正文的内衬走，不另加 */
+  .xh-scope-card[data-part='root'] > .xh-scope-card[data-part='footer'] {
+    padding-block-start: 0;
+    padding-block-end: var(--xh-_card-py);
+    padding-inline: var(--xh-_card-px);
+  }
+
+  @media print {
+    .xh-scope-card[data-part='root'] {
+      border-color: currentColor;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .xh-scope-card[data-part='root']:not([data-variant='ghost']) {
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    /* 高对比档里换底与抬起都被系统抹平：可交互卡片的悬停与按下改由描边表出，三档形态同一条 */
+    .xh-scope-card[data-part='root'][data-interactive]:is(:hover, :active) {
+      border-color: Highlight;
+    }
+  }
+
+  /* 声明过 display 就盖掉 UA 的 [hidden]{display:none}，各部件在文件末尾统一还原。 */
+  .xh-scope-card[data-part='root'][hidden],
+  .xh-scope-card[data-part='header'][hidden],
+  .xh-scope-card[data-part='content'][hidden],
+  .xh-scope-card[data-part='footer'][hidden] {
+    display: none;
+  }
+}