diff --git a/docs/.vitepress/vitepress/components/globals/design-guide.vue b/docs/.vitepress/vitepress/components/globals/design-guide.vue new file mode 100644 index 0000000000..7d06261ddc --- /dev/null +++ b/docs/.vitepress/vitepress/components/globals/design-guide.vue @@ -0,0 +1,58 @@ + + + diff --git a/docs/.vitepress/vitepress/index.ts b/docs/.vitepress/vitepress/index.ts index 18f5cfb8c0..70a2f98f07 100644 --- a/docs/.vitepress/vitepress/index.ts +++ b/docs/.vitepress/vitepress/index.ts @@ -2,6 +2,8 @@ import 'normalize.css' // import 'element-plus/dist/index.css' // for dev +// reset +import '../../../packages/theme-chalk/src/reset.scss' import '../../../packages/theme-chalk/src/index.scss' // for dark mode import '../../../packages/theme-chalk/src/dark/css-vars.scss' @@ -18,6 +20,7 @@ import IconList from './components/globals/icons.vue' import ParallaxHome from './components/globals/parallax-home.vue' import Resource from './components/globals/resource.vue' +import DesignGuide from './components/globals/design-guide.vue' import type { Component } from 'vue' @@ -33,4 +36,5 @@ export const globals: [string, Component][] = [ ['Changelog', Changelog], ['ParallaxHome', ParallaxHome], ['Resource', Resource], + ['DesignGuide', DesignGuide], ] diff --git a/docs/.vitepress/vitepress/styles/base.scss b/docs/.vitepress/vitepress/styles/base.scss index f097919f2c..1eb490fefa 100644 --- a/docs/.vitepress/vitepress/styles/base.scss +++ b/docs/.vitepress/vitepress/styles/base.scss @@ -22,7 +22,6 @@ body { min-width: 320px; min-height: 100vh; line-height: 1.4; - font-family: var(--font-family-base); font-size: 16px; font-weight: 400; color: var(--text-color); diff --git a/docs/.vitepress/vitepress/styles/vars.scss b/docs/.vitepress/vitepress/styles/vars.scss index d31fc6ca7f..5483e5061b 100644 --- a/docs/.vitepress/vitepress/styles/vars.scss +++ b/docs/.vitepress/vitepress/styles/vars.scss @@ -14,9 +14,7 @@ --border-color: var(--el-border-color); --border-color-light: var(--el-border-color-lighter); - --font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + --font-family: var(--el-font-family); --font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; diff --git a/docs/en-US/guide/design.md b/docs/en-US/guide/design.md index d4ee352d80..eaba8d4462 100644 --- a/docs/en-US/guide/design.md +++ b/docs/en-US/guide/design.md @@ -3,64 +3,9 @@ title: Design lang: en-US --- - - # Design Disciplines -
-
-
-
- Consistency -

Consistency

-
-
-
-
- Feedback -

Feedback

-
-
-
-
- Efficiency -

Efficiency

-
-
-
-
- Controllability -

Controllability

-
-
-
-
+ ## Consistency diff --git a/docs/en-US/guide/theming.md b/docs/en-US/guide/theming.md index cb74d659ee..99891460e6 100644 --- a/docs/en-US/guide/theming.md +++ b/docs/en-US/guide/theming.md @@ -74,7 +74,7 @@ If your project also uses SCSS, you can directly change Element Plus style varia You should use `@use 'xxx.scss' as *;` instead of `@import 'xxx.scss';`. -Because the sass team said they will remove it eventually. +Because the sass team said they will remove `@import` eventually. > [Sass: @use](https://sass-lang.com/documentation/at-rules/use) vs [Sass: @import](https://sass-lang.com/documentation/at-rules/import) diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 97ecab3eb9..8d92f1e208 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -184,6 +184,16 @@ $box-shadow: map.merge( ); // Typography +$font-family: () !default; +$font-family: map.merge( + ( + // default family + '': + "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif" + ), + $font-family +); + $font-size: () !default; $font-size: map.merge( ( diff --git a/packages/theme-chalk/src/reset.scss b/packages/theme-chalk/src/reset.scss index bcca250e07..ea0a769e4a 100644 --- a/packages/theme-chalk/src/reset.scss +++ b/packages/theme-chalk/src/reset.scss @@ -1,12 +1,15 @@ @use 'common/var' as *; +@use 'mixins/mixins' as *; body { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; font-weight: 400; - font-size: var(--el-font-size-base); - color: $color-black; + font-size: getCssVar('font-size', 'base'); + color: getCssVar('text-color', 'primary'); -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: transparent; } a { @@ -15,7 +18,7 @@ a { &:hover, &:focus { - color: var(--el-color-primary-light-3); + color: getCssVar('color-primary', 'light-3'); } &:active { @@ -42,15 +45,15 @@ h6 { } h1 { - font-size: #{var(--el-font-size-base) + 6px}; + font-size: calc(getCssVar('font-size', 'base') + 6px); } h2 { - font-size: #{var(--el-font-size-base) + 4px}; + font-size: calc(getCssVar('font-size', 'base') + 4px); } h3 { - font-size: #{var(--el-font-size-base) + 2px}; + font-size: calc(getCssVar('font-size', 'base') + 2px); } h4, @@ -74,16 +77,16 @@ p { sup, sub { - font-size: #{var(--el-font-size-base) - 1px}; + font-size: calc(getCssVar('font-size', 'base') - 1px); } small { - font-size: #{var(--el-font-size-base) - 2px}; + font-size: calc(getCssVar('font-size', 'base') - 2px); } hr { margin-top: 20px; margin-bottom: 20px; border: 0; - border-top: 1px solid #eeeeee; + border-top: 1px solid getCssVar('border-color'); } diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss index c4acfeda6e..ff895818d8 100644 --- a/packages/theme-chalk/src/var.scss +++ b/packages/theme-chalk/src/var.scss @@ -46,6 +46,7 @@ @include set-component-css-var('border-radius', $border-radius); // Typography @include set-component-css-var('font-size', $font-size); + @include set-component-css-var('font-family', $font-family); // Box-shadow // --el-box-shadow-#{$type} @include set-component-css-var('box-shadow', $box-shadow);