diff --git a/CHANGELOG.md b/CHANGELOG.md index 642a4c3..9247ddb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,8 @@ ## 0.9.2 -- 灰度色板增加 `gray-darker`; +- 增加组件重置 mix-in; +- 增加主题色板; - 增加灰度色快捷方式。 ## 0.9.0 diff --git a/index.js b/index.js deleted file mode 100644 index 594f397..0000000 --- a/index.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Title: HIUI Base - * Author: Sivan[sunxingfan@xiaomi.com] - */ - -import './lib/index.scss' diff --git a/lib/base/_base.scss b/lib/base/_base.scss index 36bb60f..4afe902 100644 --- a/lib/base/_base.scss +++ b/lib/base/_base.scss @@ -10,16 +10,24 @@ body { min-width: $minPageWidth; font: #{$font-size-normal}/#{$line-height-default} $font-family-base; - background-color: #fff; - color: #333; + background-color: $white; + color: $black; } a { - color: #4284f5; + &:link { + color: get-color($palette-hiui, '50'); + } + &:visited { + color: get-color($palette-hiui, '40'); + } + &:focus { + color: get-color($palette-hiui, '80'); + } &:hover { - color: #3b77db; + color: get-color($palette-hiui, '80'); } &:active { - color: #3b77db; + color: get-color($palette-hiui, '40'); } -} \ No newline at end of file +} diff --git a/lib/core/_mixins.scss b/lib/core/_mixins.scss index d5316e4..3af7fdb 100644 --- a/lib/core/_mixins.scss +++ b/lib/core/_mixins.scss @@ -27,6 +27,8 @@ '70': mix(#000, $color, 20%), '80': mix(#000, $color, 30%), '90': mix(#000, $color, 40%), + 'g50': mix(mix(#000, $color, 90%), #fff, 15%), + 'g60': mix(mix(#000, $color, 90%), #fff, 20%), 'g70': mix(mix(#000, $color, 90%), #fff, 26%), 'g80': mix(mix(#000, $color, 90%), #fff, 35%), 'g90': mix(mix(#000, $color, 90%), #fff, 50%), @@ -54,14 +56,57 @@ } // Component reset +// included in minimal components @mixin component-reset() { - font-size: $font-size-normal; - line-height: $line-height-default; + font: normal #{$font-size-normal}/#{$line-height-default} $font-family-base; text-align: left; + text-indent: 0; + text-shadow: none; + text-transform: none; + letter-spacing: 0; + word-spacing: normal; + white-space: normal; + color: $black; ul, ol { margin: 0; padding: 0; list-style-type: none; } + a { + padding-left: 0; + padding-right: 0; + } } + +//// Component Example +//// +//// Define component colors +//@mixin hi-card-style($color: get-color($palette-primary, 'brand')) { +// .hi-card { +// border-color: map-get(get-palette($color), '50'); +// background-color: map-get(get-palette($color), '10'); +// color: map-get(get-palette($color), '50'); +// &__title { +// color: map-get(get-palette($color), '80'); +// } +// } +//} +// +//// Component base style +//.hi-card { +// display: inline-block; +// border: 1px solid; +// @include component-reset(); +// &__title { +// text-align: center; +// } +//} +// +//// Component colors +//@include hi-card-style(); +//@each $name, $color in $theme-colors { +// .theme__#{$name} { +// @include hi-card-style($color); +// } +//} diff --git a/lib/core/_palettes.scss b/lib/core/_palettes.scss index a375f23..5f3557b 100644 --- a/lib/core/_palettes.scss +++ b/lib/core/_palettes.scss @@ -5,21 +5,26 @@ */ // Colors -$palette-primary: ( - 'hiui-blue': #4285f4, +$theme-colors: ( 'orange': #f63, 'cyan': #46bc99, 'blue': #3da8f5, 'purple': #8a8acb, 'green': #1da653 ); + +$palette-primary: map-merge( + ('hiui-blue': #4285f4), + $theme-colors +); + $palette-secondary: ( 'success': #f63, 'danger': #46bc99, 'warning': #3da8f5 ); $palette-tertiary: ( - 'gray-darker': #ccc, + 'black': #333, 'gray-dark': #d8d8d8, 'gray': #e7e7e7, 'gray-light': #f6f6f6, @@ -34,7 +39,7 @@ $palette-blue: get-palette(get-color($palette-primary, 'blue')); $palette-purple: get-palette(get-color($palette-primary, 'purple')); // Color shortcuts -$gray-darker: get-color($palette-tertiary, 'gray-darker'); +$black: get-color($palette-tertiary, 'black'); $gray-dark: get-color($palette-tertiary, 'gray-dark'); $gray: get-color($palette-tertiary, 'gray'); $gray-light: get-color($palette-tertiary, 'gray-light'); @@ -52,3 +57,5 @@ $white: get-color($palette-tertiary, 'white'); //.HIBG-90 {color: get-color($palette-hiui, 'g90');} //.HIBG-80 {color: get-color($palette-hiui, 'g80');} //.HIBG-70 {color: get-color($palette-hiui, 'g70');} +//.HIBG-60 {color: get-color($palette-hiui, 'g60');} +//.HIBG-50 {color: get-color($palette-hiui, 'g50');} diff --git a/package.json b/package.json index 6273feb..5493196 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@hi-ui/core-css", "version": "0.9.2", "description": "HIUI core styles, include common reset, helper classes and typography. i18n supported.", - "main": "index.js", + "main": "lib/index.scss", "directories": { "lib": "lib" },