@xihan-ui/styles 1.0.0 → 2.0.0

package/css/markdown-stream.css

@@ -0,0 +1,149 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 markdown stream 样式。 */
+
+@layer xihan.motion {
+  /* 光标的两段动效都定义在本文件里。皮肤可以按需单独引入，
+     引用别处文件里的动画名时那份文件不一定在场，动画会静默地整个不跑 */
+  @keyframes xh-markdown-stream-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes xh-markdown-stream-caret-in {
+    from {
+      opacity: 0;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='markdown-stream'] {
+    --xh-markdown-stream-skin: 1;
+  }
+
+  [data-scope='markdown-stream'][data-part='root'] {
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这两个私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_markdown-stream-font-size: var(--xh-text-body-size);
+    --xh-_markdown-stream-gap: var(--xh-space-3);
+
+    color: var(--xh-markdown-stream-fg, var(--xh-fg-default));
+    font-size: var(--xh-markdown-stream-font-size, var(--xh-_markdown-stream-font-size));
+    line-height: var(--xh-markdown-stream-leading, var(--xh-text-prose-leading));
+  }
+
+  /* 块之间的距离由这一层给，块内部的排版归作者的正文样式 */
+  [data-scope='markdown-stream'][data-part='content'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-markdown-stream-gap, var(--xh-_markdown-stream-gap));
+  }
+
+  [data-scope='markdown-stream'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  [data-scope='markdown-stream'][data-part='block'] {
+    display: block;
+    min-inline-size: 0;
+    /* 块里铺的是渲染好的 Markdown，宽表格与不断行的长串由内容自己带；
+       行内一轴可横滚，这类块自己滚，不把整篇正文顶宽 */
+    overflow-x: auto;
+  }
+
+  [data-scope='markdown-stream'][data-part='block'][hidden] {
+    display: none;
+  }
+
+  /* 代码块与公式块没人接管时铺的是原文，保住换行与缩进 */
+  [data-scope='markdown-stream'][data-part='block'][data-kind='code'],
+  [data-scope='markdown-stream'][data-part='block'][data-kind='math'] {
+    font-family: var(--xh-markdown-stream-mono, var(--xh-font-family-mono));
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  /* 流式光标落在带 data-caret 的那一格上：正文在长的时候是生长块的末尾，
+     一个字都还没到的时候是外壳，所以「请求已经发出去」这件事第一帧就看得见。
+     它落在块的最后一个顶层元素之后，不是最后一句话的末尾——要贴进段落里就得往已消毒的
+     html 注入节点，那会打穿「原生 HTML 一律不透传」这条约束 */
+  [data-scope='markdown-stream'][data-part='root'][data-caret]::after,
+  [data-scope='markdown-stream'][data-part='block'][data-caret]::after {
+    display: inline-block;
+    background: var(--xh-markdown-stream-caret-bg, var(--xh-fg-default));
+    border-radius: var(--xh-markdown-stream-caret-radius, var(--xh-shape-inset));
+    content: '';
+    inline-size: var(--xh-markdown-stream-caret-w, var(--xh-stroke-thick));
+    block-size: var(--xh-markdown-stream-caret-h, 1.05em);
+    margin-inline-start: var(--xh-markdown-stream-caret-gap, 0.1em);
+    vertical-align: text-bottom;
+    translate: 0 var(--xh-markdown-stream-caret-shift, -0.5px);
+  }
+
+  /* 正文在长的时候光标只淡入一次然后停在实心：旁边的字每帧都在变，再闪一下只是噪声 */
+  [data-scope='markdown-stream'][data-part='block'][data-caret]::after {
+    animation: xh-markdown-stream-caret-in var(--xh-markdown-stream-caret-enter-duration, var(--xh-motion-duration-enter)) var(--xh-motion-ease-enter-strong) both;
+  }
+
+  /* 还没出字的那一段页面上只有这一竖，让它闪着，等的人才分得清是在等还是卡住了 */
+  [data-scope='markdown-stream'][data-part='root'][data-caret]::after {
+    animation: xh-markdown-stream-caret var(--xh-markdown-stream-caret-duration, var(--xh-caret-duration)) steps(1, end) infinite;
+  }
+
+  /* 减少动效：等待时的光标停在实心不闪，「还在等」这件事仍然看得出来。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='markdown-stream'][data-part='root'][data-caret]::after {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='markdown-stream'][data-part='root'][data-caret]::after {
+    animation: none;
+  }
+
+  /* 尺寸档只改正文字号与块间距 */
+  [data-scope='markdown-stream'][data-part='root'][data-size='sm'] {
+    --xh-_markdown-stream-font-size: var(--xh-control-font-sm);
+    --xh-_markdown-stream-gap: var(--xh-space-2);
+  }
+
+  [data-scope='markdown-stream'][data-part='root'][data-size='md'] {
+    --xh-_markdown-stream-font-size: var(--xh-control-font-md);
+    --xh-_markdown-stream-gap: var(--xh-space-3);
+  }
+
+  [data-scope='markdown-stream'][data-part='root'][data-size='lg'] {
+    --xh-_markdown-stream-font-size: var(--xh-control-font-lg);
+    --xh-_markdown-stream-gap: var(--xh-space-4);
+  }
+
+  /* 视觉隐藏的原子播报区：不能 display:none，那样读屏就取不到它了 */
+  [data-scope='markdown-stream'][data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    [data-scope='markdown-stream'][data-part='root'][data-caret]::after {
+      animation: none;
+    }
+  }
+}

package/css/marquee.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.
+ */
+
+/* 定义 marquee 样式。 */
+
 @layer xihan.motion {
   /*
    * 横轴一条、纵轴一条。四个方向乘两种铺法共八组起止点，若不外提就要写八份几乎一样的关键帧。
@@ -139,6 +146,11 @@
     --xh-_marquee-play: paused;
   }
 
+  /* 受控暂停：作者说了停就停，排在悬停两条之后，指针离开也不会把它带回去走 */
+  [data-scope='marquee'][data-part='root'][data-paused] {
+    --xh-_marquee-play: paused;
+  }
+
   /* 轨道：走的是这一层，一圈走完立刻回到起点接着走 */
   [data-scope='marquee'][data-part='content'] {
     display: flex;
@@ -150,7 +162,7 @@
     min-block-size: var(--xh-_marquee-fill-block);
     animation-name: var(--xh-_marquee-name);
     animation-duration: var(--xh-_marquee-duration);
-    animation-timing-function: linear;
+    animation-timing-function: var(--xh-motion-ease-loop);
     animation-iteration-count: infinite;
     animation-play-state: var(--xh-_marquee-play);
   }
@@ -193,4 +205,18 @@
   :where([data-motion='reduce']) [data-scope='marquee'][data-part='root'] {
     overflow: auto;
   }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    [data-scope='marquee'][data-part='content'] {
+      animation: none;
+    }
+
+    [data-scope='marquee'][data-part='root'] {
+      overflow: auto;
+    }
+  }
 }

package/css/masonry.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.
+ */
+
+/* 定义 masonry 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='masonry'] {

package/css/matrix-code.css

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 matrix code 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='matrix-code'] {
+    --xh-matrix-code-skin: 1;
+  }
+
+  /*
+   * 根 <svg>。深浅两色取固定档而不是语义前景/背景：语义色跟着主题走，深色主题下整张码
+   * 会翻成浅底深模块的反相图，一部分读码器不认反相码。要换配色改下面这三个覆盖槽。
+   *
+   * 换色只有一条硬约束：码点必须比底色深，且两者对比要足。反相（浅码点深底）与
+   * 深浅相近都会让一部分读码器扫不出来，而这件事肉眼看不出来。
+   *
+   *   --xh-matrix-code-fg      码点色，同时经 currentColor 传给码眼
+   *   --xh-matrix-code-bg      底色，挖空矩形也用它
+   *   --xh-matrix-code-eye-fg  码眼色，缺省跟随码点色
+   */
+  [data-scope='matrix-code'][data-part='root'] {
+    display: block;
+    border-radius: var(--xh-matrix-code-radius, var(--xh-shape-control));
+    background: var(--xh-matrix-code-bg, var(--xh-color-neutral-0));
+
+    /* 模块那条 path 不带自己的填充色，从这里继承下去 */
+    color: var(--xh-matrix-code-fg, var(--xh-color-neutral-950));
+    fill: currentColor;
+
+    /* 占位与码面之间来回时，底色与那圈描边淡变 */
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='matrix-code'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 码眼那条 path 恒在（与形状无关），没单独指定就退回 currentColor，跟码点同色 */
+  [data-scope='matrix-code'][data-part='root'] > [data-xh-geom='eyes'] {
+    fill: var(--xh-matrix-code-eye-fg, currentColor);
+  }
+
+  /*
+   * logo 底下那块挖空：填的必须与根的背景逐字同一个表达式，两处一起改。
+   * 差一点就会在 logo 四周露出一圈色差，读码器会把那圈当成模块边界。
+   */
+  [data-scope='matrix-code'][data-part='root'] > [data-xh-geom='logo-clear'] {
+    fill: var(--xh-matrix-code-bg, var(--xh-color-neutral-0));
+  }
+
+  /*
+   * 没有可编码的内容、以及内容超出容量：两种情形都一个模块不铺，留一块带描边的占位。
+   * 占位用的是语义色——它是界面元素不是码面，跟着主题走才对。
+   */
+  [data-scope='matrix-code'][data-part='root'][data-state='empty'],
+  [data-scope='matrix-code'][data-part='root'][data-state='error'] {
+    background: var(--xh-matrix-code-placeholder-bg, var(--xh-bg-subtle));
+    box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-matrix-code-placeholder-border, var(--xh-border-default));
+  }
+}