Update the Docs and label-variant

4 files changed, 22 insertions, 15 deletions

diff --git a/src/codes.less b/src/codes.less
index 80e881b..bdb73ee 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -1,8 +1,7 @@
 // Codes
 code {
-  background: @bg-color;
-  color: @code-color;
   .label-base();
+  .label-variant(@code-color, lighten(@code-color, 33%));
 }
 
 .code {
@@ -21,6 +20,7 @@ code {
   }
 
   code {
+    background: @bg-color;
     color: inherit;
     display: block;
     line-height: inherit;
diff --git a/src/labels.less b/src/labels.less
index d41fe60..014afa9 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,22 +1,21 @@
 // Labels
 .label {
-  background: @bg-color;
-  color: lighten(@body-font-color, 15%);
   .label-base();
+  .label-variant(lighten(@body-font-color, 12%), @bg-color);
 
   &.label-primary {
-    .label-variant(@primary-color);
+    .label-variant(@light-color, @primary-color);
   }
 
   &.label-success {
-    .label-variant(@control-color-success);
+    .label-variant(@light-color, @control-color-success);
   }
 
   &.label-warning {
-    .label-variant(@control-color-warning);
+    .label-variant(@light-color, @control-color-warning);
   }
 
   &.label-error {
-    .label-variant(@control-color-error);
+    .label-variant(@light-color, @control-color-error);
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
index a2ab1ae..84af7a4 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -6,16 +6,24 @@
     display: table;
   }
 }
+
+// Component focus shadow
 .control-shadow(@color: @primary-color) {
   box-shadow: 0 0 0 .2rem fade(@color, 15%);
 }
+
+// Component transition
 .control-transition() {
   transition: all .2s ease;
 }
+
+// Toast variant
 .toast-variant(@color: @dark-color) {
   background: fade(@color, 90%);
   border-color: @color;
 }
+
+// Label base style
 .label-base() {
   border-radius: @border-radius;
   display: inline-block;
@@ -23,10 +31,12 @@
   padding: .3rem .4rem;
   vertical-align: baseline;
 }
-.label-variant(@color) {
-  background: @color;
-  color: @light-color;
+
+.label-variant(@color: @light-color, @bg-color: @primary-color) {
+  background: @bg-color;
+  color: @color;
 }
+
 .shadow-variant(@offset) {
   box-shadow: 0 @offset (@offset+.1rem)*2 fade(@dark-color, 30%);
 }
diff --git a/src/typography.less b/src/typography.less
index 70043a7..246fef7 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -88,14 +88,12 @@ dl {
   }
 }
 mark {
-  background: @highlight-color;
-  color: @body-font-color;
   .label-base();
+  .label-variant(@body-font-color, @highlight-color);
 }
 kbd {
-  background: @dark-color;
-  color: @light-color;
   .label-base();
+  .label-variant(@light-color, @dark-color);
 }
 abbr[title] {
   border-bottom: .1rem dotted;