@zhang_jifan/fanui 2.1.0

package/src/base/_typography.scss

@@ -0,0 +1,353 @@
+// =============================================================================
+// fanUI · 字体排版 (Typography)
+// -----------------------------------------------------------------------------
+// 提供：层级标题、正文、辅助文本、列表、引用、代码、链接色、
+//        以及字号 / 行高 / 字重 / 对齐 / 截断 等排版工具类。
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 字体族
+// -----------------------------------------------------------------------------
+
+.fanui-font-sans  { font-family: fn.fanui-var("font-sans"); }
+.fanui-font-serif { font-family: fn.fanui-var("font-serif"); }
+.fanui-font-mono  { font-family: fn.fanui-var("font-mono"); }
+
+// -----------------------------------------------------------------------------
+// 2. 标题层级
+// -----------------------------------------------------------------------------
+
+%fanui-heading {
+  margin-top: 0;
+  margin-bottom: fn.fanui-var("heading-margin-bottom", v.$fanui-heading-margin-bottom);
+  font-weight: v.$fanui-heading-font-weight;
+  line-height: v.$fanui-heading-line-height;
+  color: fn.fanui-var("color-text-strong");
+  text-wrap: balance;
+}
+
+h1, h2, h3, h4, h5, h6,
+.fanui-h1, .fanui-h2, .fanui-h3, .fanui-h4, .fanui-h5, .fanui-h6 {
+  @extend %fanui-heading;
+}
+
+h1, .fanui-h1 { font-size: fn.fanui-var("font-size-3xl"); letter-spacing: -0.02em; }
+h2, .fanui-h2 { font-size: fn.fanui-var("font-size-2xl"); letter-spacing: -0.015em; }
+h3, .fanui-h3 { font-size: fn.fanui-var("font-size-xl"); }
+h4, .fanui-h4 { font-size: fn.fanui-var("font-size-lg"); }
+h5, .fanui-h5 { font-size: fn.fanui-var("font-size-md"); }
+h6, .fanui-h6 { font-size: fn.fanui-var("font-size-base"); }
+
+// 超大展示标题
+.fanui-display-1 { font-size: fn.fanui-var("font-size-6xl"); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
+.fanui-display-2 { font-size: fn.fanui-var("font-size-5xl"); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
+.fanui-display-3 { font-size: fn.fanui-var("font-size-4xl"); font-weight: 700; line-height: 1.2;  letter-spacing: -0.02em; }
+
+// -----------------------------------------------------------------------------
+// 3. 正文与辅助文本
+// -----------------------------------------------------------------------------
+
+p {
+  margin-top: 0;
+  margin-bottom: fn.fanui-var("paragraph-margin-bottom", v.$fanui-paragraph-margin-bottom);
+}
+
+.fanui-lead {
+  font-size: fn.fanui-var("font-size-md");
+  line-height: fn.fanui-var("line-height-relaxed");
+  color: fn.fanui-var("color-text-muted");
+}
+
+.fanui-text-muted  { color: fn.fanui-var("color-text-muted"); }
+.fanui-text-subtle { color: fn.fanui-var("color-text-subtle"); }
+.fanui-text-strong { color: fn.fanui-var("color-text-strong"); font-weight: 600; }
+.fanui-text-inverse { color: fn.fanui-var("color-text-inverse"); }
+
+// 语义文本色
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-text-#{$name} { color: fn.fanui-var("#{$name}"); }
+}
+
+.fanui-text-gradient {
+  @include mx.fanui-text-gradient(fn.fanui-var("primary"), fn.fanui-var("accent"));
+}
+
+// -----------------------------------------------------------------------------
+// 4. 字号 / 行高 / 字重 / 字距 工具类
+// -----------------------------------------------------------------------------
+
+@each $name, $size in v.$fanui-font-sizes {
+  .fanui-fs-#{$name} { font-size: fn.fanui-var("font-size-#{$name}"); }
+}
+
+// 首字母特大
+.fanui-fs-lead-lg::first-letter {
+  font-size: fn.fanui-var("font-size-5xl");
+  font-weight: 700;
+  float: left;
+  line-height: 1;
+  margin-inline-end: 8px;
+}
+
+@each $name, $value in v.$fanui-line-heights {
+  .fanui-lh-#{$name} { line-height: $value; }
+}
+
+@each $name, $value in v.$fanui-font-weights {
+  .fanui-fw-#{$name} { font-weight: $value; }
+}
+
+@each $name, $value in v.$fanui-letter-spacings {
+  .fanui-tracking-#{$name} { letter-spacing: $value; }
+}
+
+.fanui-italic     { font-style: italic; }
+.fanui-not-italic { font-style: normal; }
+.fanui-uppercase  { text-transform: uppercase; }
+.fanui-lowercase  { text-transform: lowercase; }
+.fanui-capitalize { text-transform: capitalize; }
+.fanui-underline  { text-decoration: underline; }
+.fanui-line-through { text-decoration: line-through; }
+.fanui-no-underline { text-decoration: none; }
+
+// -----------------------------------------------------------------------------
+// 5. 对齐 / 换行 / 截断
+// -----------------------------------------------------------------------------
+
+.fanui-text-start    { text-align: start; }
+.fanui-text-center   { text-align: center; }
+.fanui-text-end      { text-align: end; }
+.fanui-text-justify  { text-align: justify; }
+
+.fanui-text-wrap     { white-space: normal; }
+.fanui-text-nowrap   { white-space: nowrap; }
+.fanui-text-pre      { white-space: pre; }
+.fanui-text-pre-wrap { white-space: pre-wrap; }
+.fanui-text-break    { word-break: break-word; overflow-wrap: anywhere; }
+.fanui-text-balance  { text-wrap: balance; }
+.fanui-text-pretty   { text-wrap: pretty; }
+
+.fanui-truncate { @include mx.fanui-truncate(1); }
+.fanui-truncate-2 { @include mx.fanui-truncate(2); }
+.fanui-truncate-3 { @include mx.fanui-truncate(3); }
+.fanui-truncate-4 { @include mx.fanui-truncate(4); }
+
+// -----------------------------------------------------------------------------
+// 6. 列表
+// -----------------------------------------------------------------------------
+
+.fanui-list {
+  padding-inline-start: 1.25rem;
+  margin-bottom: 1em;
+
+  li { margin-bottom: 0.25em; }
+}
+
+.fanui-list-unstyled {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-inline-start: 0;
+}
+
+.fanui-list-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: fn.fanui-var("space-4");
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.fanui-list-dashed {
+  list-style: none;
+  padding-inline-start: 0;
+
+  > li {
+    position: relative;
+    padding-inline-start: 1.25em;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0.25em;
+      top: 0.65em;
+      width: 0.35em;
+      height: 0.35em;
+      border-radius: 50%;
+      background-color: fn.fanui-var("primary");
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 7. 引用 / 分隔 / 代码
+// -----------------------------------------------------------------------------
+
+.fanui-blockquote {
+  margin: 0 0 1em;
+  padding: fn.fanui-var("space-4") fn.fanui-var("space-5");
+  border-inline-start: 4px solid fn.fanui-var("primary");
+  background-color: fn.fanui-var("color-surface-sunken");
+  border-radius: 0 fn.fanui-var("radius-base") fn.fanui-var("radius-base") 0;
+  color: fn.fanui-var("color-text-muted");
+
+  footer {
+    margin-top: fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-subtle");
+
+    &::before { content: "— "; }
+  }
+}
+
+.fanui-code {
+  padding: 0.15em 0.4em;
+  font-family: fn.fanui-var("font-mono");
+  font-size: 0.875em;
+  color: fn.fanui-var("danger");
+  background-color: fn.fanui-var("color-surface-sunken");
+  border: 1px solid fn.fanui-var("color-border-subtle");
+  border-radius: fn.fanui-var("radius-sm");
+  white-space: nowrap;
+}
+
+.fanui-pre {
+  display: block;
+  margin: 0 0 1em;
+  padding: fn.fanui-var("space-4");
+  font-family: fn.fanui-var("font-mono");
+  font-size: fn.fanui-var("font-size-sm");
+  line-height: fn.fanui-var("line-height-relaxed");
+  color: fn.fanui-var("color-text");
+  background-color: fn.fanui-var("color-surface-sunken");
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-md");
+  overflow-x: auto;
+  tab-size: 2;
+
+  code {
+    padding: 0;
+    background: none;
+    border: 0;
+    color: inherit;
+    font-size: inherit;
+    white-space: pre;
+  }
+}
+
+.fanui-kbd {
+  display: inline-block;
+  min-width: 1.6em;
+  padding: 0.1em 0.4em;
+  font-family: fn.fanui-var("font-mono");
+  font-size: 0.8125em;
+  line-height: 1.4;
+  text-align: center;
+  color: fn.fanui-var("color-text");
+  background-color: fn.fanui-var("color-surface");
+  border: 1px solid fn.fanui-var("color-border-strong");
+  border-bottom-width: 2px;
+  border-radius: fn.fanui-var("radius-sm");
+  box-shadow: fn.fanui-var("shadow-xs");
+}
+
+.fanui-mark {
+  padding: 0.1em 0.2em;
+  background-color: fn.fanui-alpha(#f59e0b, 0.28);
+  color: inherit;
+  border-radius: fn.fanui-var("radius-sm");
+}
+
+.fanui-link {
+  color: fn.fanui-var("primary");
+  text-decoration: none;
+  border-bottom: 1px solid fn.fanui-var("primary-border");
+  @include mx.fanui-transition((color, border-color), v.$fanui-duration-fast);
+
+  &:hover {
+    color: fn.fanui-var("primary-hover");
+    border-bottom-color: fn.fanui-var("primary-hover");
+    text-decoration: none;
+  }
+
+  &--subtle {
+    color: fn.fanui-var("color-text-muted");
+    border-bottom-color: fn.fanui-var("color-border");
+
+    &:hover { color: fn.fanui-var("color-text"); border-bottom-color: fn.fanui-var("color-border-strong"); }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 8. 标题锚点（.fanui-anchor）
+// -----------------------------------------------------------------------------
+
+.fanui-anchor {
+  position: relative;
+  scroll-margin-top: fn.fanui-var("space-8");
+
+  > .fanui-anchor__link {
+    position: absolute;
+    left: -1.25em;
+    padding-inline-end: 0.25em;
+    color: fn.fanui-var("color-text-subtle");
+    opacity: 0;
+    @include mx.fanui-transition(opacity, v.$fanui-duration-fast);
+
+    &::before { content: "#"; }
+  }
+
+  &:hover > .fanui-anchor__link { opacity: 1; }
+}
+
+// -----------------------------------------------------------------------------
+// 9. 排版组合容器（.fanui-prose）
+// -----------------------------------------------------------------------------
+
+.fanui-prose {
+  font-size: fn.fanui-var("font-size-md");
+  line-height: fn.fanui-var("line-height-relaxed");
+  color: fn.fanui-var("color-text");
+  max-width: 72ch;
+
+  > * + * { margin-top: 1em; }
+  > h2 { margin-top: 2em; }
+  > h3 { margin-top: 1.5em; }
+  > h2 + *,
+  > h3 + * { margin-top: 0.5em; }
+
+  ul, ol { padding-inline-start: 1.4em; }
+  li + li { margin-top: 0.35em; }
+  li > ul,
+  li > ol { margin-top: 0.35em; }
+
+  code { @extend .fanui-code; }
+  pre { @extend .fanui-pre; }
+
+  img { border-radius: fn.fanui-var("radius-md"); margin: 1.5em 0; }
+
+  hr { margin: 2.5em 0; }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: fn.fanui-var("font-size-base");
+    margin: 1.5em 0;
+
+    th,
+    td {
+      padding: 8px 12px;
+      text-align: start;
+      border: 1px solid fn.fanui-var("color-border");
+    }
+
+    th {
+      background-color: fn.fanui-var("color-surface-sunken");
+      font-weight: 600;
+    }
+  }
+}