From d5e2283e2b82e6c313f940f20037c6c19fe37f31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=AF=E8=83=9C?= Date: Wed, 14 Aug 2019 14:20:13 +0800 Subject: [PATCH 1/5] feat: Font --- docs/content/layout/font.mdx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/docs/content/layout/font.mdx b/docs/content/layout/font.mdx index 52a0c1f8..d71aaf33 100644 --- a/docs/content/layout/font.mdx +++ b/docs/content/layout/font.mdx @@ -7,27 +7,33 @@ date: 2019-05-29 字体是体系化界面设计中最基本的构成之一。 ## 字体家族 + 优秀的字体系统首先是要选择合适的字体家族。XSKY 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 ```json isShow -font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei","微软雅黑"; +font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei"; ``` + 另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 [font-variant-numeric](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures) 设置为 tabular-nums，使其为等宽字体。 ## 主字体 + 大小为 13px，以保证在多数常用显示器上的用户阅读效率最佳。 ## 字阶与行高 + 根据产品需求及设计需求，定义了 7 个不同尺寸的字体以及与之相对应的行高。 -| Font Size | 12 | 13 | 14 | 16 | 20 | 28 | 36 | ...| -|--------------|----|----|----|----|----|----|----|----| -| Light Height | 20 | 22 | 22 | 24 | 28 | 36 | 44 | ...| +| Font Size | 12 | 13 | 14 | 16 | 20 | 28 | 36 | ... | +| ------------ | --- | --- | --- | --- | --- | --- | --- | --- | +| Light Height | 20 | 22 | 22 | 24 | 28 | 36 | 44 | ... | ## 字重 + 字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量。 ## 使用规范 + - H1：大小 36px，行高 44px - H2：大小 28px，行高 36px - H3：大小 20px，行高 28px @@ -49,6 +55,7 @@ font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei ``` ## 字体颜色 + 文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 4.5:1 以上的 AA 级对比度。 一级色值：#3F3F44 @@ -57,4 +64,6 @@ font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei 三级色值：#A2A3A9 -文字链：#6B58C4 \ No newline at end of file +文字链：#6B58C4 + +[wizard 字体规范](http://wiki.xsky.com/pages/viewpage.action?pageId=26709621) From 0889eff777c32f2db665eb86545d1498e8249b0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=AF=E8=83=9C?= Date: Wed, 14 Aug 2019 17:08:56 +0800 Subject: [PATCH 2/5] Feat: Add Font specification --- docs/content/layout/font.mdx | 31 +++++++++++++------------ docs/src/Layout/variables.scss | 41 +++++++++++++++------------------- src/style/variables.scss | 20 ++++++++++++++--- 3 files changed, 52 insertions(+), 40 deletions(-) diff --git a/docs/content/layout/font.mdx b/docs/content/layout/font.mdx index d71aaf33..b7028977 100644 --- a/docs/content/layout/font.mdx +++ b/docs/content/layout/font.mdx @@ -18,15 +18,15 @@ font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei ## 主字体 -大小为 13px，以保证在多数常用显示器上的用户阅读效率最佳。 +大小为 14px，以保证在多数常用显示器上的用户阅读效率最佳。 ## 字阶与行高 -根据产品需求及设计需求，定义了 7 个不同尺寸的字体以及与之相对应的行高。 +根据产品需求及设计需求，定义了 6 个不同尺寸的字体以及与之相对应的行高。 -| Font Size | 12 | 13 | 14 | 16 | 20 | 28 | 36 | ... | -| ------------ | --- | --- | --- | --- | --- | --- | --- | --- | -| Light Height | 20 | 22 | 22 | 24 | 28 | 36 | 44 | ... | +| Font Size | 12 | 14 | 16 | 20 | 28 | 36 | ... | +| ------------ | --- | --- | --- | --- | --- | --- | --- | +| Light Height | 20 | 22 | 24 | 28 | 36 | 44 | ... | ## 字重 @@ -34,22 +34,21 @@ font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei ## 使用规范 -- H1：大小 36px，行高 44px -- H2：大小 28px，行高 36px -- H3：大小 20px，行高 28px -- H4：大小 16px，行高 24x +- H1：大小 34px，行高 42px +- H2：大小 26px，行高 34px +- H3：大小 18px，行高 26px +- H4：大小 16px，行高 24px - 正文（标题）：大小 14px，行高 22px -- 正文：大小 13px，行高 22px +- 正文：大小 14px，行高 22px - 提示：大小 12px，行高 20px ```jsx
-
36 号字体 ABCDEFG
-
28 号字体 ABCDEFG
-
20 号字体 ABCDEFG
+
34 号字体 ABCDEFG
+
26 号字体 ABCDEFG
+
18 号字体 ABCDEFG
16 号字体 ABCDEFG
14 号字体 ABCDEFG
-
13 号字体 ABCDEFG
12 号字体 ABCDEFG
``` @@ -66,4 +65,8 @@ font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei 文字链：#6B58C4 +白色：#FFFFFF + +状态色：健康（#30B65F）、警告（#FFB71C）、错误（#F24542）、紧急（#B90A38）、进行中（#448AFF） + [wizard 字体规范](http://wiki.xsky.com/pages/viewpage.action?pageId=26709621) diff --git a/docs/src/Layout/variables.scss b/docs/src/Layout/variables.scss index 8461a7c5..314f4201 100644 --- a/docs/src/Layout/variables.scss +++ b/docs/src/Layout/variables.scss @@ -111,8 +111,8 @@ $brand-success: $green-normal; $brand-danger: $red-normal; $brand-warning: $goldenrod-normal; $brand-info: $blue-normal; -$brand-error: #f07574; -$brand-critical: #d9534f; +$brand-error: #f24542; +$brand-critical: #b90a38; $brand-muted: $gray-medium-6; @@ -120,26 +120,21 @@ $brand-muted: $gray-medium-6; $badge-height: 20px; $badge-dot-small-size: 6px; - /* Color Use Case */ - $brand-primary: $purple-normal; - $brand-success: $green-normal; - $brand-danger: $red-normal; - $brand-warning: $goldenrod-normal; - $brand-info: $blue-normal; - $brand-error: #f07574; - $brand-critical: #d9534f; - $brand-muted: $gray-medium-6; +/* PingFang font */ +$PingFangFont: 'PingFangSC-Regular'; - $text-lighter-2: $white; - $text-lighter-1: $gray-medium-3; - $text-lighter: #c1c1c9; - $text: $gray-medium-6; - $text-darker: $gray-darker-2; - $text-darker-1: $gray-darker-3; +$height-topbar: 50px; - $bg-top-level: $white; - $bg-top-title: $gray-lighter-1; - $bg-body: $gray-lighter-3; - $bg-side-logo: $gray-darker-4; - $bg-side: $gray-darker-5; - $bg-side-nav: $gray-darker-6; \ No newline at end of file +$text-lighter-2: $white; +$text-lighter-1: $gray-medium-3; +$text-lighter: #c1c1c9; +$text: $gray-medium-6; +$text-darker: $gray-darker-2; +$text-darker-1: $gray-darker-3; + +$bg-top-level: $white; +$bg-top-title: $gray-lighter-1; +$bg-body: $gray-lighter-3; +$bg-side-logo: $gray-darker-4; +$bg-side: $gray-darker-5; +$bg-side-nav: $gray-darker-6; \ No newline at end of file diff --git a/src/style/variables.scss b/src/style/variables.scss index 6f6382b1..314f4201 100644 --- a/src/style/variables.scss +++ b/src/style/variables.scss @@ -111,8 +111,8 @@ $brand-success: $green-normal; $brand-danger: $red-normal; $brand-warning: $goldenrod-normal; $brand-info: $blue-normal; -$brand-error: #f07574; -$brand-critical: #d9534f; +$brand-error: #f24542; +$brand-critical: #b90a38; $brand-muted: $gray-medium-6; @@ -123,4 +123,18 @@ $badge-dot-small-size: 6px; /* PingFang font */ $PingFangFont: 'PingFangSC-Regular'; -$height-topbar: 50px; \ No newline at end of file +$height-topbar: 50px; + +$text-lighter-2: $white; +$text-lighter-1: $gray-medium-3; +$text-lighter: #c1c1c9; +$text: $gray-medium-6; +$text-darker: $gray-darker-2; +$text-darker-1: $gray-darker-3; + +$bg-top-level: $white; +$bg-top-title: $gray-lighter-1; +$bg-body: $gray-lighter-3; +$bg-side-logo: $gray-darker-4; +$bg-side: $gray-darker-5; +$bg-side-nav: $gray-darker-6; \ No newline at end of file From ccfe2f23cd4391e65c807a087dcd63e2ad79aa75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=AF=E8=83=9C?= Date: Wed, 14 Aug 2019 17:32:55 +0800 Subject: [PATCH 3/5] change font size --- docs/content/layout/font.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/layout/font.mdx b/docs/content/layout/font.mdx index b7028977..85005283 100644 --- a/docs/content/layout/font.mdx +++ b/docs/content/layout/font.mdx @@ -24,9 +24,9 @@ font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei 根据产品需求及设计需求，定义了 6 个不同尺寸的字体以及与之相对应的行高。 -| Font Size | 12 | 14 | 16 | 20 | 28 | 36 | ... | +| Font Size | 12 | 14 | 16 | 18 | 26 | 34 | ... | | ------------ | --- | --- | --- | --- | --- | --- | --- | -| Light Height | 20 | 22 | 24 | 28 | 36 | 44 | ... | +| Light Height | 20 | 22 | 24 | 26 | 34 | 42 | ... | ## 字重 From 84b9bcb59aa762fe8051ea95496baa9b7b37c355 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=AF=E8=83=9C?= Date: Wed, 14 Aug 2019 17:38:07 +0800 Subject: [PATCH 4/5] add microsoft yahei --- docs/content/layout/font.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/layout/font.mdx b/docs/content/layout/font.mdx index 85005283..213a2a3d 100644 --- a/docs/content/layout/font.mdx +++ b/docs/content/layout/font.mdx @@ -11,7 +11,7 @@ date: 2019-05-29 优秀的字体系统首先是要选择合适的字体家族。XSKY 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 ```json isShow -font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei"; +font-family: "Helvetica Neue","Helvetica","PingFang SC","Arial","Microsoft YaHei", "微软雅黑"; ``` 另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 [font-variant-numeric](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures) 设置为 tabular-nums，使其为等宽字体。 From 602477937d1071ecc3e9d74f252b6eee115ad9dc Mon Sep 17 00:00:00 2001 From: housheng Date: Tue, 20 Aug 2019 10:30:38 +0800 Subject: [PATCH 5/5] change boostrap default font size --- docs/src/Layout/bootstrap-custom.scss | 8 ++++---- src/style/bootstrap-custom.scss | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/src/Layout/bootstrap-custom.scss b/docs/src/Layout/bootstrap-custom.scss index 17b283ff..c4201e6d 100644 --- a/docs/src/Layout/bootstrap-custom.scss +++ b/docs/src/Layout/bootstrap-custom.scss @@ -48,10 +48,10 @@ $font-size-base: 14px !default; $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px -$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px -$font-size-h2: floor(($font-size-base * 2)) !default; // ~28px -$font-size-h3: ceil($font-size-base * 1.43) !default; // ~20px -$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px +$font-size-h1: floor(($font-size-base * 2.43)) !default; // ~34px +$font-size-h2: floor(($font-size-base * 1.86)) !default; // ~26px +$font-size-h3: ceil($font-size-base * 1.29) !default; // ~18px +$font-size-h4: ceil(($font-size-base * 1.14)) !default; // ~16px $font-size-h5: $font-size-base !default; $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px diff --git a/src/style/bootstrap-custom.scss b/src/style/bootstrap-custom.scss index 17b283ff..c4201e6d 100644 --- a/src/style/bootstrap-custom.scss +++ b/src/style/bootstrap-custom.scss @@ -48,10 +48,10 @@ $font-size-base: 14px !default; $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px -$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px -$font-size-h2: floor(($font-size-base * 2)) !default; // ~28px -$font-size-h3: ceil($font-size-base * 1.43) !default; // ~20px -$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px +$font-size-h1: floor(($font-size-base * 2.43)) !default; // ~34px +$font-size-h2: floor(($font-size-base * 1.86)) !default; // ~26px +$font-size-h3: ceil($font-size-base * 1.29) !default; // ~18px +$font-size-h4: ceil(($font-size-base * 1.14)) !default; // ~16px $font-size-h5: $font-size-base !default; $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px