feat(typography): add new component typography (#1728)

* feat: typography * feat(typography): add new component typography
Tencent · Feb 13, 2024 · a8f1fd7 · a8f1fd7
1 parent 7d69aa4
commit a8f1fd7
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 0 deletions.
diff --git a/docs/web/api/typography.md b/docs/web/api/typography.md
@@ -0,0 +1,27 @@
+---
+title: Typography 排版
+description: 排版用于文本基础编排和样式
+isComponent: true
+usage: { title: "", description: "" }
+spline: base
+---
+
+### 基础组合用法
+
+{{ base }}
+
+#### 标题
+
+{{ title }}
+
+#### 文本
+
+{{ text }}
+
+#### 可复制
+
+{{ copyable }}
+
+#### 可省略
+
+{{ ellipsis }}
diff --git a/docs/web/api/typogrpahy.en-US.md b/docs/web/api/typogrpahy.en-US.md
@@ -0,0 +1,27 @@
+---
+title: Typography
+description: Typography is used to basic text layout and style.
+isComponent: true
+usage: { title: "", description: "" }
+spline: base
+---
+
+### Base
+
+{{ base }}
+
+#### Title
+
+{{ title }}
+
+#### Text
+
+{{ text }}
+
+#### Copyable
+
+{{ copyable }}
+
+#### Ellipsis
+
+{{ ellipsis }}
diff --git a/style/web/components/_docs.less b/style/web/components/_docs.less
@@ -45,3 +45,5 @@
 @import "./tree/_docs.less";
 
 @import "./skeleton/_docs.less";
+
+@import "./typography/_docs.less";
diff --git a/style/web/components/typography/_docs.less b/style/web/components/typography/_docs.less
@@ -0,0 +1,15 @@
+// TDesign 站点中有代码code元素的相关样式 为正常展示需要覆盖为typography样式
+div[name="DEMO"] *:not(pre) > .t-typography code {
+  border-radius: @border-radius-default;
+  border: 1px solid @component-border;
+  margin: 0 @comp-margin-xs;
+  background-color: @bg-color-secondarycontainer;
+  padding: 0 @comp-paddingLR-s;
+  font: @font-body-medium;
+  color: @text-color-primary;
+  transition: background-color .2s;
+
+  &:hover {
+    background-color: @bg-color-secondarycontainer-hover;
+  }
+}
diff --git a/style/web/components/typography/_index.less b/style/web/components/typography/_index.less
@@ -0,0 +1,114 @@
+@import "../../base.less";
+
+@import "./_var.less";
+
+@componentName: typography;
+
+.@{prefix}-@{componentName} {
+  color: @typography-text-primary-color;
+  font: @font-body-medium;
+  margin: @comp-margin-m 0;
+
+  // 标题
+  h1& {
+    font: @typography-h1-font;
+    margin-top: @comp-margin-xxxxl;
+    margin-bottom: @comp-margin-l;
+  }
+
+  h2& {
+    font: @typography-h2-font;
+    margin-top: @comp-margin-xxxl;
+    margin-bottom: @comp-margin-l;
+  }
+
+  h3& {
+    font: @typography-h3-font;
+    margin-top: @comp-margin-xxl;
+    margin-bottom: @comp-margin-m;
+  }
+
+  h4& {
+    font: @typography-h4-font;
+    margin-top: @comp-margin-xl;
+    margin-bottom: @comp-margin-m;
+  }
+
+  h5& {
+    font: @typography-h5-font;
+    margin-top: @comp-margin-l;
+    margin-bottom: @comp-margin-m;
+  }
+
+  h6& {
+    font: @typography-h6-font;
+  }
+
+  // 加粗样式
+  strong {
+    font-weight: @typography-text-strong;
+  }
+
+  // 标记样式
+  mark {
+    background-color: @typography-text-mark-color;
+  }
+
+  // 代码样式
+  code {
+    border-radius: @border-radius-default;
+    border: 1px solid @component-border;
+    margin: 0 @comp-margin-xs;
+    background-color: @bg-color-secondarycontainer;
+    padding: 1px @comp-paddingLR-s;
+    transition: background-color .2s;
+
+    &:hover {
+      border-radius: @border-radius-default;
+      border: 1px solid @component-border;
+      background-color: @bg-color-secondarycontainer-hover;
+    }
+  }
+
+  // 键盘样式
+  kbd {
+    border-radius: @border-radius-default;
+    border: 1px solid @component-border;
+    margin: 0 @comp-margin-xs;
+    background-color: @bg-color-secondarycontainer;
+    padding: 1px @comp-paddingLR-s;
+  }
+
+  // 不可选样式
+  &--disabled {
+    color: @typography-text-disabled-color;
+    cursor: not-allowed;
+  }
+
+  // 主题样式
+  &--success {
+    color: @typography-text-success-color;
+  }
+
+  &--warning {
+    color: @typography-text-warning-color;
+  }
+
+  &--error {
+    color: @typography-text-error-color;
+  }
+
+  &--secondary {
+    color: @typography-text-secondary-color;
+  }
+
+  .t-icon-chevron-down,
+  .t-icon-copy {
+    color: @typography-icon-color;
+    cursor: pointer;
+
+    &:hover {
+      color: @typography-icon-color-hover;
+    }
+  }
+}
diff --git a/style/web/components/typography/_var.less b/style/web/components/typography/_var.less
@@ -0,0 +1,19 @@
+@typography-text-primary-color: @text-color-primary;
+@typography-text-secondary-color: @text-color-secondary;
+@typography-text-disabled-color: @text-color-disabled;
+@typography-text-success-color: @success-color;
+@typography-text-error-color: @error-color;
+@typography-text-warning-color: @warning-color;
+@typography-text-mark-color: #fcdf47;
+@typography-icon-color: @brand-color;
+@typography-icon-color-hover: @brand-color-hover;
+
+@typography-text-strong: 600;
+
+@typography-text-font: @font-body-medium;
+@typography-h1-font: @typography-text-strong @font-headline-large;
+@typography-h2-font: @typography-text-strong @font-headline-medium;
+@typography-h3-font: @typography-text-strong @font-headline-small;
+@typography-h4-font: @typography-text-strong @font-title-large;
+@typography-h5-font: @typography-text-strong @font-title-medium;
+@typography-h6-font: @typography-text-strong @font-title-small;