@xihan-ui/styles 1.0.0 → 2.0.0

package/css/descriptions.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 descriptions 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='descriptions'] {
@@ -8,7 +15,8 @@
     /* 一个尺寸档只换这几个私有槽，每一格与格内两段都从根上继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_descriptions-gap: var(--xh-space-3);
-    --xh-_descriptions-pair-gap: var(--xh-space-1);
+    /* 标签是每一格的集合标题：叠着排时与取值隔 space-2（§6.4 集合标题与集合的间距） */
+    --xh-_descriptions-pair-gap: var(--xh-space-2);
     --xh-_descriptions-label-gap: var(--xh-space-2);
     --xh-_descriptions-py: var(--xh-space-2);
     --xh-_descriptions-px: var(--xh-space-3);
@@ -71,23 +79,19 @@
   }
 
   /* —— 每一格 —— */
-  /* 一格自己也是网格：不写 placement 即标签一行、取值一行叠着排 */
+  /* 一格自己也是网格：不写 placement 即标签一行、取值一行叠着排。
+     窄档每格横跨根上排定的所有列，一行只摆一组，作者写在格上的 span 这一档不认 */
   [data-scope='descriptions'][data-part='item'] {
+    /* 作者写在这一格上的跨列数，由连接层落成这个槽；没写即一列 */
+    --xh-_descriptions-item-span: 1;
+
     display: grid;
     grid-template-columns: minmax(0, 1fr);
+    grid-column: 1 / -1;
     align-content: start;
     gap: var(--xh-descriptions-pair-gap, var(--xh-_descriptions-pair-gap));
   }
 
-  /* 标签在左：一格分成「标签列 + 取值列」，两段的首行文字对齐同一条基线。
-     只认自己的直接子格，套在取值里的另一份描述由它自己的根管 */
-  [data-scope='descriptions'][data-part='root'][data-placement='left']
-    > [data-scope='descriptions'][data-part='item'] {
-    grid-template-columns: var(--xh-descriptions-label-w, var(--xh-_descriptions-label-w)) minmax(0, 1fr);
-    align-items: baseline;
-    column-gap: var(--xh-descriptions-label-gap, var(--xh-_descriptions-label-gap));
-  }
-
   [data-scope='descriptions'][data-part='label'] {
     color: var(--xh-descriptions-label-fg, var(--xh-fg-muted));
     font-weight: var(--xh-descriptions-label-font-weight, var(--xh-text-label-weight));
@@ -101,8 +105,8 @@
     color: var(--xh-descriptions-value-fg, var(--xh-fg-default));
   }
 
-  /* —— 外框与网格线 —— */
-  [data-scope='descriptions'][data-part='root'][data-bordered] {
+  /* —— 形态：ghost 即基础规则，不画壳；outline 画外框与网格线 —— */
+  [data-scope='descriptions'][data-part='root'][data-variant='outline'] {
     /* 网格线由每格自己的边线拼出来，格与格之间不能再留缝 */
     gap: 0;
     border: var(--xh-stroke-thin) solid var(--xh-descriptions-border, var(--xh-border-default));
@@ -113,7 +117,7 @@
   }
 
   /* 每格自带上边线与左边线，行首与首行那几格再各自抹掉，相邻两格之间就只剩一条 */
-  [data-scope='descriptions'][data-part='root'][data-bordered]
+  [data-scope='descriptions'][data-part='root'][data-variant='outline']
     > [data-scope='descriptions'][data-part='item'] {
     padding-block: var(--xh-descriptions-item-py, var(--xh-_descriptions-py));
     padding-inline: var(--xh-descriptions-item-px, var(--xh-_descriptions-px));
@@ -122,85 +126,127 @@
     border-inline-start: 0 solid var(--xh-descriptions-divider, var(--xh-border-subtle));
   }
 
-  [data-scope='descriptions'][data-part='root'][data-bordered]
+  [data-scope='descriptions'][data-part='root'][data-variant='outline']
     > [data-scope='descriptions'][data-part='item']:first-child {
     border-block-start-width: 0;
   }
 
-  /* 二到六列：左边线一律补上，再抹掉每行第一格的左边线与首行那几格的上边线 */
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='2']
-    > [data-scope='descriptions'][data-part='item'] {
-    border-inline-start-width: var(--xh-stroke-thin);
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='2']
-    > [data-scope='descriptions'][data-part='item']:nth-child(2n + 1) {
-    border-inline-start-width: 0;
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='2']
-    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 2) {
-    border-block-start-width: 0;
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='3']
-    > [data-scope='descriptions'][data-part='item'] {
-    border-inline-start-width: var(--xh-stroke-thin);
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='3']
-    > [data-scope='descriptions'][data-part='item']:nth-child(3n + 1) {
-    border-inline-start-width: 0;
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='3']
-    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 3) {
-    border-block-start-width: 0;
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='4']
-    > [data-scope='descriptions'][data-part='item'] {
-    border-inline-start-width: var(--xh-stroke-thin);
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='4']
-    > [data-scope='descriptions'][data-part='item']:nth-child(4n + 1) {
-    border-inline-start-width: 0;
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='4']
-    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 4) {
-    border-block-start-width: 0;
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='5']
-    > [data-scope='descriptions'][data-part='item'] {
-    border-inline-start-width: var(--xh-stroke-thin);
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='5']
-    > [data-scope='descriptions'][data-part='item']:nth-child(5n + 1) {
-    border-inline-start-width: 0;
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='5']
-    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 5) {
-    border-block-start-width: 0;
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='6']
-    > [data-scope='descriptions'][data-part='item'] {
-    border-inline-start-width: var(--xh-stroke-thin);
-  }
-
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='6']
-    > [data-scope='descriptions'][data-part='item']:nth-child(6n + 1) {
-    border-inline-start-width: 0;
+  /* 淡底档：不补网格线，surface 圆角 + subtle 底；描边留一圈透明边位，与 outline 同一几何 */
+  [data-scope='descriptions'][data-part='root'][data-variant='subtle'] {
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-descriptions-radius, var(--xh-shape-surface));
+    background: var(--xh-descriptions-bg, var(--xh-bg-subtle));
+    overflow: hidden;
   }
 
-  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='6']
-    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 6) {
-    border-block-start-width: 0;
+  /* —— 逐档的列数与边线 ——
+     窄档一行只摆一组：每格的上边线就是行与行之间那条线，左边线用不上——
+     上面那两条默认规则就是这一档的写法。
+     宽起来以后逐档恢复：每一档写两件事，一是这一档一行摆几格（跨列数），
+     二是这一档的边线：不在行首的格补上左边线，首行那几格抹掉上边线。
+     两组集合逐档只增不减，宽档不必回收窄档写下的边线。 */
+  @media (min-width: 768px) {
+    /* 标签左置从这一档起生效：窄档一律标签在上，取值拿满整格的宽。
+       只认自己的直接子格，套在取值里的另一份描述由它自己的根管 */
+    [data-scope='descriptions'][data-part='root'][data-placement='left']
+      > [data-scope='descriptions'][data-part='item'] {
+      grid-template-columns: var(--xh-descriptions-label-w, var(--xh-_descriptions-label-w)) minmax(0, 1fr);
+      align-items: baseline;
+      column-gap: var(--xh-descriptions-label-gap, var(--xh-_descriptions-label-gap));
+    }
+
+    /* 二列与三列在这一档按作者写的列数摆，作者写在格上的 span 从这一档起认 */
+    [data-scope='descriptions'][data-part='root'][data-columns='2']
+      > [data-scope='descriptions'][data-part='item'],
+    [data-scope='descriptions'][data-part='root'][data-columns='3']
+      > [data-scope='descriptions'][data-part='item'] {
+      grid-column: span var(--xh-_descriptions-item-span);
+    }
+
+    /* 四列与六列在这一档摆两列：一格横跨一半的轨道，作者写的 span 这一档同样不认——
+       一行只有两格时，认了 span 的那格反而比邻居窄。
+       五列没有能摆成两列等宽的跨列数，留在一列，到宽档再按作者的五列摆 */
+    [data-scope='descriptions'][data-part='root'][data-columns='4']
+      > [data-scope='descriptions'][data-part='item'] {
+      grid-column: span 2;
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-columns='6']
+      > [data-scope='descriptions'][data-part='item'] {
+      grid-column: span 3;
+    }
+
+    /* 一行两格：二、四、六列在这一档共用这套边线 */
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='2']
+      > [data-scope='descriptions'][data-part='item']:not(:nth-child(2n + 1)),
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='4']
+      > [data-scope='descriptions'][data-part='item']:not(:nth-child(2n + 1)),
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='6']
+      > [data-scope='descriptions'][data-part='item']:not(:nth-child(2n + 1)) {
+      border-inline-start-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='2']
+      > [data-scope='descriptions'][data-part='item']:nth-child(-n + 2),
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='4']
+      > [data-scope='descriptions'][data-part='item']:nth-child(-n + 2),
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='6']
+      > [data-scope='descriptions'][data-part='item']:nth-child(-n + 2) {
+      border-block-start-width: 0;
+    }
+
+    /* 一行三格 */
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='3']
+      > [data-scope='descriptions'][data-part='item']:not(:nth-child(3n + 1)) {
+      border-inline-start-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='3']
+      > [data-scope='descriptions'][data-part='item']:nth-child(-n + 3) {
+      border-block-start-width: 0;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    /* 四、五、六列到这一档按作者写的列数摆，作者写在格上的 span 从这一档起认 */
+    [data-scope='descriptions'][data-part='root'][data-columns='4']
+      > [data-scope='descriptions'][data-part='item'],
+    [data-scope='descriptions'][data-part='root'][data-columns='5']
+      > [data-scope='descriptions'][data-part='item'],
+    [data-scope='descriptions'][data-part='root'][data-columns='6']
+      > [data-scope='descriptions'][data-part='item'] {
+      grid-column: span var(--xh-_descriptions-item-span);
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='4']
+      > [data-scope='descriptions'][data-part='item']:not(:nth-child(4n + 1)) {
+      border-inline-start-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='4']
+      > [data-scope='descriptions'][data-part='item']:nth-child(-n + 4) {
+      border-block-start-width: 0;
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='5']
+      > [data-scope='descriptions'][data-part='item']:not(:nth-child(5n + 1)) {
+      border-inline-start-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='5']
+      > [data-scope='descriptions'][data-part='item']:nth-child(-n + 5) {
+      border-block-start-width: 0;
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='6']
+      > [data-scope='descriptions'][data-part='item']:not(:nth-child(6n + 1)) {
+      border-inline-start-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='descriptions'][data-part='root'][data-variant='outline'][data-columns='6']
+      > [data-scope='descriptions'][data-part='item']:nth-child(-n + 6) {
+      border-block-start-width: 0;
+    }
   }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。