diff --git a/README-zh.md b/README-zh.md index 2a1766f..96740cf 100644 --- a/README-zh.md +++ b/README-zh.md @@ -7,12 +7,12 @@ HIUI 模板核心样式文件，包含初始化、布局、排版等样式。 ## 使用 ### 组件 -组件依赖直接引入 `@import '@hi-ui/core-css';`，只包含变量和函数，不会插入任何实质代码。 +组件依赖直接引入 `@import '@hi-ui/core-css/index.scss';`，只包含变量和函数，不会插入任何实质代码。 ### 主题 主题依赖包含了核心文件以及必备的 normalize、helper classes、排版、多语言等支持，使用方法如下： -```scss +``` scss @import '@hi-ui/core-css/i18n/zh-CN.scss'; @import '@hi-ui/core-css/base.scss'; ``` diff --git a/README.md b/README.md index 6b64876..4f06b12 100644 --- a/README.md +++ b/README.md @@ -7,12 +7,12 @@ HIUI core styles, include common reset, helper classes and typography. i18n supp ## Usage ### Components -For component usage, just use `@import '@hi-ui/core-css';` imports variables and mix-ins. +For component usage, just use `@import '@hi-ui/core-css/index.scss';` imports variables and mix-ins. ### Themes For theme usage, use code below to import variables, mix-ins, normalize, helper classes etc. -```scss +``` scss @import '@hi-ui/core-css/i18n/zh-CN.scss'; @import '@hi-ui/core-css/base.scss'; ``` diff --git a/lib/base/_typography.scss b/lib/base/_typography.scss index b320e6a..2aad3fd 100644 --- a/lib/base/_typography.scss +++ b/lib/base/_typography.scss @@ -4,8 +4,10 @@ * Description: typo styles. */ -@import './typography/base'; -@import './typography/headings'; -@import './typography/lists'; -@import './typography/images'; -@import './typography/code'; +#{$entry-selector} { + @include typoBase; + @include typoCode; + @include typoHeadings; + @include typoImages; + @include typoLists; +} diff --git a/lib/core/_palettes.scss b/lib/core/_palettes.scss index 1e6c0e0..1072d5b 100644 --- a/lib/core/_palettes.scss +++ b/lib/core/_palettes.scss @@ -8,9 +8,10 @@ $theme-colors: ( 'orange': #f63, 'cyan': #46bc99, + 'magenta': #ff5975, + 'lavender': #b450de, 'blue': #3da8f5, - 'purple': #8a8acb, - 'green': #1da653 + 'purple': #8a8acb ) !default; $palette-primary: map-merge( @@ -20,8 +21,8 @@ $palette-primary: map-merge( $palette-secondary: ( 'success': #1da653, - 'danger': #eb5252, - 'warning': #e19d0c + 'warning': #e19d0c, + 'danger': #f44141 ) !default; $palette-tertiary: ( @@ -31,6 +32,7 @@ $palette-tertiary: ( 'gray': #d8d8d8, 'gray-light': #e7e7e7, 'gray-lighter': #f6f6f6, + 'blue-lighter': #ecf2fe, 'white': #fff ) !default; @@ -38,6 +40,8 @@ $palette-tertiary: ( $palette-hiui: get-palette(get-color($palette-primary, 'hiui-blue')) !default; $palette-orange: get-palette(get-color($palette-primary, 'orange')) !default; $palette-cyan: get-palette(get-color($palette-primary, 'cyan')) !default; +$palette-magenta: get-palette(get-color($palette-primary, 'magenta')) !default; +$palette-lavender: get-palette(get-color($palette-primary, 'lavender')) !default; $palette-blue: get-palette(get-color($palette-primary, 'blue')) !default; $palette-purple: get-palette(get-color($palette-primary, 'purple')) !default; diff --git a/lib/core/index.scss b/lib/core/index.scss index 780787e..ac164de 100644 --- a/lib/core/index.scss +++ b/lib/core/index.scss @@ -7,3 +7,8 @@ @import './variables'; @import './mixins'; @import './palettes'; +@import './typography/base'; +@import './typography/code'; +@import './typography/headings'; +@import './typography/images'; +@import './typography/lists'; diff --git a/lib/base/typography/_base.scss b/lib/core/typography/_base.scss similarity index 96% rename from lib/base/typography/_base.scss rename to lib/core/typography/_base.scss index dd6269f..f3589cb 100644 --- a/lib/base/typography/_base.scss +++ b/lib/core/typography/_base.scss @@ -4,9 +4,7 @@ * Description: base typo reset and .entry styles. */ -@import '../../core/index'; - -#{$entry-selector} { +@mixin typoBase { @include clearfix(); // Be careful about CSS selector specificity! diff --git a/lib/base/typography/_code.scss b/lib/core/typography/_code.scss similarity index 93% rename from lib/base/typography/_code.scss rename to lib/core/typography/_code.scss index a44f39d..ae72fd3 100644 --- a/lib/base/typography/_code.scss +++ b/lib/core/typography/_code.scss @@ -4,9 +4,7 @@ * Description: code preview styles. */ -@import '../../core/index'; - -#{$entry-selector} { +@mixin typoCode { code, pre, kbd { diff --git a/lib/base/typography/_headings.scss b/lib/core/typography/_headings.scss similarity index 91% rename from lib/base/typography/_headings.scss rename to lib/core/typography/_headings.scss index adbacbb..bf6328a 100644 --- a/lib/base/typography/_headings.scss +++ b/lib/core/typography/_headings.scss @@ -4,9 +4,7 @@ * Description: heading styles. */ -@import '../../core/index'; - -#{$entry-selector} { +@mixin typoHeadings { // Only reset headings at entry root > { h1, @@ -15,7 +13,7 @@ h4, h5, h6 { - margin-top: $spacer-6; + margin-top: $spacer-10; margin-bottom: $spacer-4; font-weight: $font-weight-bold; } diff --git a/lib/base/typography/_images.scss b/lib/core/typography/_images.scss similarity index 88% rename from lib/base/typography/_images.scss rename to lib/core/typography/_images.scss index b91f9ea..155e9f3 100644 --- a/lib/base/typography/_images.scss +++ b/lib/core/typography/_images.scss @@ -4,9 +4,7 @@ * Description: image styles. */ -@import '../../core/index'; - -#{$entry-selector} { +@mixin typoImages { // Only add to imgs at entry root > { img, diff --git a/lib/base/typography/_lists.scss b/lib/core/typography/_lists.scss similarity index 92% rename from lib/base/typography/_lists.scss rename to lib/core/typography/_lists.scss index d276a86..e4878d4 100644 --- a/lib/base/typography/_lists.scss +++ b/lib/core/typography/_lists.scss @@ -4,9 +4,7 @@ * Description: