feat: add component reset

CHANGELOG.md

@@ -10,7 +10,8 @@
 
 ## 0.9.2
 
-- 灰度色板增加 `gray-darker`；
+- 增加组件重置 mix-in；
+- 增加主题色板；
 - 增加灰度色快捷方式。
 
 ## 0.9.0

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');
   }
-}
+}

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);
+//  }
+//}

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');}

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"
   },