+ add colorset.less.

dist/css/choosen.css

-.chosen-container{position:relative;display:inline-block;vertical-align:middle;font-size:14px;zoom:1;*display:inline;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.chosen-container .chosen-drop{position:absolute;top:100%;left:-9999px;z-index:1010;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-top:0;background:#fff;box-shadow:0 4px 5px rgba(0,0,0,0.15)}.chosen-container.chosen-with-drop .chosen-drop{left:0}.chosen-container a{cursor:pointer}.chosen-container-single .chosen-single{display:block;overflow:hidden;padding:6px 10px;height:34px;width:100%;border:1px solid #ccc;border-radius:4px;background-color:#fff;background-clip:padding-box;vertical-align:middle;color:#333;text-decoration:none;white-space:nowrap;line-height:1.428571429;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.chosen-container-single .chosen-default{color:#999}.chosen-container-single .chosen-single span{display:block;overflow:hidden;margin-right:26px;text-overflow:ellipsis;white-space:nowrap}.chosen-container-single .chosen-single-with-deselect span{margin-right:38px}.chosen-container-single .chosen-single abbr{position:absolute;top:7px;right:24px;display:block;width:21px;height:21px;line-height:21px;font-size:21px;font-weight:bold;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.chosen-container-single .chosen-single abbr:before{content:'×'}.chosen-container-single .chosen-single abbr:hover,.chosen-container-single .chosen-single abbr:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}.chosen-container-single .chosen-single div{position:absolute;top:0;right:0;display:block;height:100%;padding:6px 10px}.chosen-container-single .chosen-single div b{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid #000;border-right:4px solid transparent;border-left:4px solid transparent;border-bottom:0 dotted}.chosen-container-single .chosen-search{position:relative;z-index:1010;margin:0;padding:3px 4px;white-space:nowrap}.chosen-container-single .chosen-search input[type="text"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:1px 0;padding:5px 26px 5px 10px;width:100%;height:auto;outline:0;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:12px;line-height:1.5}.chosen-container-single .chosen-search input[type="text"]:focus{border-color:#4d90fe}.chosen-container-single .chosen-search:before{position:absolute;display:block;right:10px;color:#999;top:8px;content:"\f002";font-family:ZenIcon}.chosen-container-single .chosen-drop{margin-top:-1px;border-radius:0 0 4px 4px;background-clip:padding-box}.chosen-container-single.chosen-container-single-nosearch .chosen-search{position:absolute;left:-9999px}.chosen-container .chosen-results{position:relative;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;max-height:240px;-webkit-overflow-scrolling:touch}.chosen-container .chosen-results li{display:none;margin:0;padding:5px 10px;list-style:none;line-height:15px;-webkit-touch-callout:none;-webkit-transition:all .2s cubic-bezier(0.175,0.885,0.32,1);transition:all .2s cubic-bezier(0.175,0.885,0.32,1)}.chosen-container .chosen-results li.active-result{display:list-item;cursor:pointer}.chosen-container .chosen-results li.disabled-result{display:list-item;color:#ccc;cursor:default}.chosen-container .chosen-results li.highlighted{color:#3280fc;background-color:#f1f1f1;-webkit-transition:box-shadow .2s cubic-bezier(0.175,0.885,0.32,1);transition:box-shadow .2s cubic-bezier(0.175,0.885,0.32,1);border-left:2px solid #3280fc \9;-moz-box-shadow:inset 3px 0 0 #3280fc;-webkit-box-shadow:inset 3px 0 0 #3280fc;box-shadow:inset 3px 0 0 #3280fc}.chosen-container .chosen-results li.no-results{display:list-item;background:#f4f4f4}.chosen-container .chosen-results li.group-result{display:list-item;font-weight:bold;cursor:default}.chosen-container .chosen-results li.group-option{padding-left:15px}.chosen-container .chosen-results li em{font-style:normal;text-decoration:underline}.chosen-container-multi .chosen-choices{position:relative;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;width:100%;min-height:34px;min-height:32px \0;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:text;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.chosen-container-multi .chosen-choices:before,.chosen-container-multi .chosen-choices:after{content:" ";display:table}.chosen-container-multi .chosen-choices:after{clear:both}.chosen-container-multi .chosen-choices li{display:block;float:left;list-style:none;padding:0 6px;margin:6px 0 0 6px}.chosen-container-multi .chosen-choices li.search-field{padding:0;margin-bottom:5px;white-space:nowrap}.chosen-container-multi .chosen-choices li.search-field input[type="text"]{height:20px;outline:0;border:0!important;background:transparent!important;box-shadow:none;color:#999;font-size:100%;border-radius:0}.chosen-container-multi .chosen-choices li.search-field .default{color:#999}.chosen-container-multi .chosen-choices li.search-choice{position:relative;padding:3px 20px 3px 5px;background-color:#f1f1f1;border-radius:3px;border:1px solid #ddd;background-clip:padding-box;-moz-box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);-webkit-box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);line-height:12px;cursor:default;-webkit-transition:all .4s cubic-bezier(0.175,0.885,0.32,1);transition:all .4s cubic-bezier(0.175,0.885,0.32,1)}.chosen-container-multi .chosen-choices li.search-choice:hover{border-color:#c4c4c4;background-color:#fff;-moz-box-shadow:0 1px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1)}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close{position:absolute;top:-1px;right:0;text-align:center;display:block;width:21px;height:21px;line-height:21px;font-size:16.8px;font-weight:bold;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before{content:'×'}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover,.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}.chosen-container-multi .chosen-choices li.search-choice-disabled{padding-right:5px;border:1px solid #ccc;background-color:#e4e4e4;color:#666}.chosen-container-multi .chosen-choices li.search-choice-focus{background:#d4d4d4}.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close{background-position:-42px -10px}.chosen-container-multi .chosen-results{margin:0;padding:0}.chosen-container-multi .chosen-drop .result-selected{display:list-item;color:#ccc;cursor:default}.chosen-container-active .chosen-single{border-color:#4d90fe;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(77,144,254,0.6);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(77,144,254,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(77,144,254,0.6)}.chosen-container-active.chosen-with-drop .chosen-single{border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);-moz-border-radius-bottomright:0;border-bottom-right-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;-moz-box-shadow:0 6px 12px rgba(0,0,0,0.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175)}.chosen-container-active.chosen-with-drop .chosen-single div{border-left:none;background:transparent}.chosen-container-active.chosen-with-drop .chosen-single div b{border-top:0 dotted;border-bottom:4px solid #000;content:""}.chosen-container-active .chosen-choices{border-color:#4d90fe;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(77,144,254,0.6);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(77,144,254,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(77,144,254,0.6)}.chosen-container-active .chosen-choices li.search-field input[type="text"]{color:#111!important}.chosen-disabled{opacity:.5!important;cursor:default}.chosen-disabled .chosen-single{cursor:default}.chosen-disabled .chosen-choices .search-choice .search-choice-close{cursor:default}
\ No newline at end of file
+.chosen-container{position:relative;display:inline-block;vertical-align:middle;font-size:14px;zoom:1;*display:inline;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.chosen-container .chosen-drop{position:absolute;top:100%;left:-9999px;z-index:1010;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-top:0;background:#fff;box-shadow:0 4px 5px rgba(0,0,0,0.15)}.chosen-container.chosen-with-drop .chosen-drop{left:0}.chosen-container a{cursor:pointer}.chosen-container-single .chosen-single{display:block;overflow:hidden;padding:6px 10px;height:32px;width:100%;border:1px solid #ccc;border-radius:2px;background-color:#fff;background-clip:padding-box;vertical-align:middle;color:#222;text-decoration:none;white-space:nowrap;line-height:1.428571429;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.chosen-container-single .chosen-default{color:#808080}.chosen-container-single .chosen-single span{display:block;overflow:hidden;margin-right:26px;text-overflow:ellipsis;white-space:nowrap}.chosen-container-single .chosen-single-with-deselect span{margin-right:38px}.chosen-container-single .chosen-single abbr{position:absolute;top:7px;right:24px;display:block;width:19.5px;height:19.5px;line-height:19.5px;font-size:19.5px;font-weight:bold;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.chosen-container-single .chosen-single abbr:before{content:'×'}.chosen-container-single .chosen-single abbr:hover,.chosen-container-single .chosen-single abbr:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}.chosen-container-single .chosen-single div{position:absolute;top:0;right:0;display:block;height:100%;padding:6px 10px}.chosen-container-single .chosen-single div b{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid #000;border-right:4px solid transparent;border-left:4px solid transparent;border-bottom:0 dotted}.chosen-container-single .chosen-search{position:relative;z-index:1010;margin:0;padding:3px 4px;white-space:nowrap}.chosen-container-single .chosen-search input[type="text"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:1px 0;padding:5px 26px 5px 10px;width:100%;height:auto;outline:0;border:1px solid #ccc;border-radius:2px;background-color:#fff;font-size:12px;line-height:1.5}.chosen-container-single .chosen-search input[type="text"]:focus{border-color:#2973ea}.chosen-container-single .chosen-search:before{position:absolute;display:block;right:10px;color:#808080;top:8px;content:"\f002";font-family:ZenIcon}.chosen-container-single .chosen-drop{margin-top:-1px;border-radius:0 0 2px 2px;background-clip:padding-box}.chosen-container-single.chosen-container-single-nosearch .chosen-search{position:absolute;left:-9999px}.chosen-container .chosen-results{position:relative;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;max-height:240px;-webkit-overflow-scrolling:touch}.chosen-container .chosen-results li{display:none;margin:0;padding:5px 10px;list-style:none;line-height:15px;-webkit-touch-callout:none;-webkit-transition:all .2s cubic-bezier(0.175,0.885,0.32,1);transition:all .2s cubic-bezier(0.175,0.885,0.32,1)}.chosen-container .chosen-results li.active-result{display:list-item;cursor:pointer}.chosen-container .chosen-results li.disabled-result{display:list-item;color:#ccc;cursor:default}.chosen-container .chosen-results li.highlighted{color:#145bcc;background-color:#f1f1f1;-webkit-transition:box-shadow .2s cubic-bezier(0.175,0.885,0.32,1);transition:box-shadow .2s cubic-bezier(0.175,0.885,0.32,1);border-left:2px solid #145bcc \9;-moz-box-shadow:inset 3px 0 0 #145bcc;-webkit-box-shadow:inset 3px 0 0 #145bcc;box-shadow:inset 3px 0 0 #145bcc}.chosen-container .chosen-results li.no-results{display:list-item;background:#f4f4f4}.chosen-container .chosen-results li.group-result{display:list-item;font-weight:bold;cursor:default}.chosen-container .chosen-results li.group-option{padding-left:15px}.chosen-container .chosen-results li em{font-style:normal;text-decoration:underline}.chosen-container-multi .chosen-choices{position:relative;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;width:100%;min-height:32px;min-height:30px \0;border:1px solid #ccc;border-radius:2px;background-color:#fff;cursor:text;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.chosen-container-multi .chosen-choices:before,.chosen-container-multi .chosen-choices:after{content:" ";display:table}.chosen-container-multi .chosen-choices:after{clear:both}.chosen-container-multi .chosen-choices li{display:block;float:left;list-style:none;padding:0 6px;margin:6px 0 0 6px}.chosen-container-multi .chosen-choices li.search-field{padding:0;margin-bottom:5px;white-space:nowrap}.chosen-container-multi .chosen-choices li.search-field input[type="text"]{height:20px;outline:0;border:0!important;background:transparent!important;box-shadow:none;color:#808080;font-size:100%;border-radius:0}.chosen-container-multi .chosen-choices li.search-field .default{color:#999}.chosen-container-multi .chosen-choices li.search-choice{position:relative;padding:3px 20px 3px 5px;background-color:#f1f1f1;border-radius:1px;border:1px solid #ddd;background-clip:padding-box;-moz-box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);-webkit-box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);line-height:12px;cursor:default;-webkit-transition:all .4s cubic-bezier(0.175,0.885,0.32,1);transition:all .4s cubic-bezier(0.175,0.885,0.32,1)}.chosen-container-multi .chosen-choices li.search-choice:hover{border-color:#c4c4c4;background-color:#fff;-moz-box-shadow:0 1px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1)}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close{position:absolute;top:-1px;right:0;text-align:center;display:block;width:19.5px;height:19.5px;line-height:19.5px;font-size:15.6px;font-weight:bold;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before{content:'×'}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover,.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}.chosen-container-multi .chosen-choices li.search-choice-disabled{padding-right:5px;border:1px solid #ccc;background-color:#e4e4e4;color:#666}.chosen-container-multi .chosen-choices li.search-choice-focus{background:#d4d4d4}.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close{background-position:-42px -10px}.chosen-container-multi .chosen-results{margin:0;padding:0}.chosen-container-multi .chosen-drop .result-selected{display:list-item;color:#ccc;cursor:default}.chosen-container-active .chosen-single{border-color:#2973ea;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(41,115,234,0.6);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(41,115,234,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(41,115,234,0.6)}.chosen-container-active.chosen-with-drop .chosen-single{border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);-moz-border-radius-bottomright:0;border-bottom-right-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;-moz-box-shadow:0 6px 12px rgba(0,0,0,0.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175)}.chosen-container-active.chosen-with-drop .chosen-single div{border-left:none;background:transparent}.chosen-container-active.chosen-with-drop .chosen-single div b{border-top:0 dotted;border-bottom:4px solid #000;content:""}.chosen-container-active .chosen-choices{border-color:#2973ea;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(41,115,234,0.6);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(41,115,234,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(41,115,234,0.6)}.chosen-container-active .chosen-choices li.search-field input[type="text"]{color:#111!important}.chosen-disabled{opacity:.5!important;cursor:default}.chosen-disabled .chosen-single{cursor:default}.chosen-disabled .chosen-choices .search-choice .search-choice-close{cursor:default}
\ No newline at end of file

examples/alerts.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -46,6 +46,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/article.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/breadcrumb.html

@@ -6,7 +6,7 @@
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
   <script src="../assets/js/less.js"></script>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -44,6 +44,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/button-groups.html

@@ -8,7 +8,7 @@
   <script src="../src/js/debug.js"></script>
 
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   
   <!--[if lt IE 9]>
@@ -42,6 +42,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/buttons.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -47,6 +47,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/cards.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -54,6 +54,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/carousel.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
   <meta charset='utf-8'>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -42,6 +42,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/chosen.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
   <link rel="stylesheet" href="chosen-docsupport/style.css">
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../dist/css/choosen.css" rel="stylesheet">
    <link href="../assets/css/doc.css" rel="stylesheet">
 
@@ -61,6 +61,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/code.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/google-code-prettify/prettify.js"></script>
   <script src="../assets/js/jquery.js"></script>

examples/collapse.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
   <meta charset='utf-8'>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
@@ -45,6 +45,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/colorset.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="ZUI，一个简单吸引人的前端框架。">
+  <meta name="author" content="Zentao">
+
+  <title>ZUI</title>
+
+  <link href="../dist/css/zui.css" rel="stylesheet">
+  <link href="../assets/css/doc.css" rel="stylesheet">
+  <script src="../assets/js/jquery.js"></script>
+  <script src="../dist/js/zui.min.js"></script>
+  <script src="../src/js/debug.js"></script>
+  <!--[if lt IE 9]>
+  <script src="../assets/js/html5shiv.js"></script>
+  <script src="../assets/js/respond.js"></script>
+  <![endif]-->
+  <script src="../assets/js/doc.js"></script>
+</head>
+<body>
+  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">ZUI</a>
+    </div>
+    <div class="collapse navbar-collapse" id="navbar">
+      <ul class="nav navbar-nav">
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="alerts.html">alerts</a></li>
+            <li><a href="article.html">article</a></li>
+            <li><a href="breadcrumb.html">breadcrumb</a></li>
+            <li><a href="button-groups.html">button-groups</a></li>
+            <li><a href="buttons.html">buttons</a></li>
+            <li><a href="cards.html">cards</a></li>
+            <li><a href="carousel.html">carousel</a></li>
+            <li><a href="chosen.html">chosen</a></li>
+            <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
+            <li><a href="comment.html">comment</a></li>
+            <li><a href="dropdowns.html">dropdowns</a></li>
+            <li><a href="forms.html">forms</a></li>
+            <li><a href="grid.html">grid</a></li>
+            <li><a href="icons.html">icons</a></li>
+            <li><a href="input-groups.html">input-groups</a></li>
+            <li><a href="kindeditor.html">kindeditor</a></li>
+            <li><a href="labels.html">labels</a></li>
+            <li><a href="lightbox.html">Lightbox</a></li>
+            <li><a href="list-group.html">list-group</a></li>
+            <li><a href="list.html">list</a></li>
+            <li><a href="modals.html">modals</a></li>
+            <li><a href="navbars.html">navbars</a></li>
+            <li><a href="navs.html">navs</a></li>
+            <li><a href="pager.html">pager</a></li>
+            <li><a href="panels.html">panels</a></li>
+            <li><a href="popovers.html">popovers</a></li>
+            <li><a href="progress.html">progress</a></li>
+            <li><a href="tables.html">tables</a></li>
+            <li><a href="tabs.html">tabs</a></li>
+            <li><a href="textbox.html">textbox</a></li>
+            <li><a href="tooltip.html">tooltip</a></li>
+            <li><a href="type.html">type</a></li>
+          </ul>
+        </li>
+        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
+      </ul>
+    </div>
+  </nav>
+  <article>
+    <h1 class="header-dividing">ColorSet</h1>
+    <div class="segment">
+      <div class="colorset">
+        <div class="color-primary"></div>
+        <div class="color-secondary"></div>
+        <div class="color-pale"></div>
+        <div class="color-fore"></div>
+        <div class="color-back"></div>
+      </div>
+      <div class="colorset">
+        <div class="color-gray-darker"></div>
+        <div class="color-gray-dark"></div>
+        <div class="color-gray"></div>
+        <div class="color-gray-light"></div>
+        <div class="color-gray-lighter"></div>
+        <div class="color-gray-pale"></div>
+      </div>
+      <div class="colorset">
+        <div class="color-white"></div>
+        <div class="color-black"></div>
+      </div>
+      <div class="colorset">
+        <div class="color-light"></div>
+        <div class="color-dark"></div>
+      </div>
+      <div class="colorset">
+        <div class="color-red"></div>
+        <div class="color-yellow"></div>
+        <div class="color-green"></div>
+        <div class="color-blue"></div>
+        <div class="color-brown"></div>
+        <div class="color-purple"></div>
+      </div>
+      <div class="colorset">
+        <div class="color-success"></div>
+        <div class="color-warning"></div>
+        <div class="color-danger"></div>
+        <div class="color-info"></div>
+        <div class="color-important"></div>
+        <div class="color-special"></div>
+      </div>
+      <div class="colorset">
+        <div class="color-success-pale"></div>
+        <div class="color-warning-pale"></div>
+        <div class="color-danger-pale"></div>
+        <div class="color-info-pale"></div>
+        <div class="color-important-pale"></div>
+        <div class="color-special-pale"></div>
+      </div>
+    </div>
+  </article>
+</body>
+</html>

examples/comment.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -57,6 +57,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/dropdowns.html

@@ -11,7 +11,7 @@
   <script src="../src/js/debug.js"></script>
 
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <!--[if lt IE 9]>
   <script src="../assets/js/html5shiv.js"></script>
   <script src="../assets/js/respond.js"></script>
@@ -43,6 +43,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/forms.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>ZUI</title>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/grid.html

@@ -8,7 +8,7 @@
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
   <script src="../assets/js/less.js"></script>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <!-- Latest compiled and minified JavaScript -->
   <script src="../assets/js/jquery.js"></script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/headers.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/icons.html

@@ -6,7 +6,7 @@
 	<meta name="description" content="An Icon Font Generated By IcoMoon.io">
 	<meta name="viewport" content="width=device-width">
 	<link rel="stylesheet" href="demo-files/demo.css">
-	<link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+	<link href="../dist/css/zui.css" rel="stylesheet">
 	<!--[if lt IE 8]><!-->
 	<link rel="stylesheet" href="ie7/ie7.css">
 	<!--<![endif]-->
@@ -44,6 +44,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/input-groups.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>ZUI</title>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
@@ -47,6 +47,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/kindeditor.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset='utf-8'>
     <link href="../assets/css/doc.css" rel="stylesheet">
-    <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+    <link href="../dist/css/zui.css" rel="stylesheet">
     <script src="../plugins/kindeditor/kindeditor-all-min.js"></script>
     <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -17,13 +17,13 @@
         {
           allowFileManager : true,
           bodyClass : 'article-content',
-          cssPath: '../dist/css/zui.chanzhi.css'
+          cssPath: '../dist/css/zui.css'
         });
 
         K.create('textarea.kindeditorSimple', 
         {
           bodyClass : 'article-content',
-          cssPath: '../dist/css/zui.chanzhi.css',
+          cssPath: '../dist/css/zui.css',
           resizeType : 1,
           allowPreviewEmoticons : false,
           allowImageUpload : false,
@@ -37,7 +37,7 @@
         {
           themeType : 'simple',
           bodyClass : 'article-content',
-          cssPath: '../dist/css/zui.chanzhi.css'
+          cssPath: '../dist/css/zui.css'
         });
 
       });
@@ -73,6 +73,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/labels.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>ZUI</title>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
@@ -47,6 +47,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/lightbox.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
   <meta charset='utf-8'>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../src/js/debug.js"></script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/list-group.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <title>ZUI</title>
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
@@ -47,6 +47,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/list.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/modals.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
   <meta charset='utf-8'>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
@@ -46,6 +46,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/navbars.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <!-- Latest compiled and minified JavaScript -->
   <script src="../assets/js/jquery.js"></script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/navs.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -56,6 +56,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/pager.html

@@ -6,7 +6,7 @@
 
   <title>ZUI</title>
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
 
   <script src="../assets/js/jquery.js"></script>
@@ -61,6 +61,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/panels.html

@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>ZUI</title>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
   <script src="../assets/js/less.js"></script>
@@ -49,6 +49,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/popovers.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -70,6 +70,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/progress.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset='utf-8'>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
@@ -43,6 +43,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/tables.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/tabs.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
   <meta charset='utf-8'>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
@@ -48,6 +48,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/textbox.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>ZUI</title>
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
@@ -47,6 +47,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/tooltip.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -58,6 +58,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

examples/type.html

@@ -9,7 +9,7 @@
 
   <title>ZUI</title>
 
-  <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
+  <link href="../dist/css/zui.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
   <script src="../assets/js/jquery.js"></script>
   <script src="../dist/js/zui.min.js"></script>
@@ -46,6 +46,7 @@
             <li><a href="carousel.html">carousel</a></li>
             <li><a href="chosen.html">chosen</a></li>
             <li><a href="collapse.html">collapse</a></li>
+            <li><a href="colorset.html">colorset</a></li>
             <li><a href="comment.html">comment</a></li>
             <li><a href="dropdowns.html">dropdowns</a></li>
             <li><a href="forms.html">forms</a></li>

src/less/basic/colorset.less

+// COLOR SCHEME
+// -------------------------------------------------
+
+@color-theme:                light;
+// @color-primary:              #304269; // old color
+@color-primary:              #145bcc;
+@color-secondary:            lighten(@color-primary, 15%);
+@color-pale:                 hsl(hue(@color-primary), 6, 96%);
+@color-fore:                 #333;
+@color-back:                 #fff;
+
+// Grays
+@color-gray-darker:          lighten(#000, 13.5%); // #222
+@color-gray-dark:            lighten(#000, 20%);   // #333
+@color-gray:                 lighten(#000, 50%);   // #808080
+@color-gray-light:           lighten(#000, 86.7%); // #ddd
+@color-gray-lighter:         lighten(#000, 89.7%); // #e5e5e5
+@color-gray-pale:            lighten(#000, 94.5%); // #f1f1f1
+
+// Color set
+@color-white:                #fff;
+@color-black:                #000;
+@color-red:                  #d2322d;
+@color-yellow:               #ed9c28;
+@color-green:                #47a447;
+@color-blue:                 #39b3d7;
+@color-brown:                #81511c;
+@color-purple:               #8957a1;
+
+// Brand colors
+@color-light:                @color-back;
+@color-dark:                 @color-fore;
+
+@color-success:              @color-green;
+@color-warning:              @color-yellow;
+@color-danger:               @color-red;
+@color-info:                 @color-blue;
+@color-important:            @color-brown;
+@color-special:              @color-purple;
+
+@color-success-pale:         hsl(hue(@color-success), 10, 94%);
+@color-warning-pale:         hsl(hue(@color-warning), 10, 94%);
+@color-danger-pale:          hsl(hue(@color-danger), 10, 94%);
+@color-info-pale:            hsl(hue(@color-info), 10, 94%);
+@color-important-pale:       hsl(hue(@color-important), 10, 94%);
+@color-special-pale:         hsl(hue(@color-special), 10, 94%);

src/less/basic/colorset.test.less

+.colorset
+{
+  .clearfix();
+  background-color: @color-back;
+  padding: 10px;
+  padding-top: 20px;
+  padding-right: 0;
+  border-bottom: 1px dashed darken(@color-back, 10%);
+}
+
+.color-tile
+{
+  display: block;
+  width: 170px;
+  height: 90px;
+  color: #fff;
+  position: relative;
+  float: left;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+
+  &:after,&:before
+  {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 24px;
+    line-height:24px;
+    width: 100%;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+    background-color: rgba(0, 0, 0, 0.2);
+    text-align: left;
+    padding: 0 5px;
+  }
+
+  &:after
+  {
+    background-color: transparent;
+    text-align: right;
+    text-transform:uppercase;
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+
+.color(@c)
+{
+  .@{c}
+  {
+    .color-tile();
+    border-color: darken(@@c, 10%);
+
+    background-color: @@c;
+    
+    &:after
+    {
+      content: %("%d", @@c);
+    }
+
+    &:before
+    {
+      content: %("%s", @c);
+    }
+  }
+}
+
+
+.color(color-primary);
+.color(color-secondary);
+.color(color-pale);
+.color(color-fore);
+.color(color-back);
+.color(color-gray-darker);
+.color(color-gray-dark);
+.color(color-gray);
+.color(color-gray-light);
+.color(color-gray-lighter);
+.color(color-gray-pale);
+
+.color(color-white);
+.color(color-black);
+.color(color-red);
+.color(color-yellow);
+.color(color-green);
+.color(color-blue);
+.color(color-brown);
+.color(color-purple);
+.color(color-light);
+.color(color-dark);
+.color(color-success);
+.color(color-warning);
+.color(color-danger);
+.color(color-info);
+.color(color-important);
+.color(color-special);
+.color(color-success-pale);
+.color(color-warning-pale);
+.color(color-danger-pale);
+.color(color-info-pale);
+.color(color-important-pale);
+.color(color-special-pale);

src/less/basic/variables.chanzhi.less

@@ -3,15 +3,15 @@
 // =================================================
 
 
-// COLOR SCHEME
+// COLOR CHEME
 // -------------------------------------------------
 
 // Color set
 @dodger-blue:                #145bcc;
 @sky-blue:                   #3280fc;
 @pale-blue:                  #ebf2f9;
-@gray-blue:                  #4d90fe;
-@white:                      #fff;
+@color-gray-blue:            #4d90fe;
+@color-fore:                 #fff;
 @charcoal:                   #333;
 @red:                        #d2322d;
 @yellow:                     #ed9c28;
@@ -19,25 +19,25 @@
 @blue:                       #39b3d7;
 @brown:                      #81511c;
 @purple:                     #8957a1;
-@gray:                       #808080;
+@color-gray:                 #808080;
 
 // Grays
-@gray-darker:                @charcoal;
-@gray-dark:                  #555;
-@gray:                       #999;
-@gray-light:                 #ddd;
-@gray-lighter:               #e5e5e5;
-@gray-pale:                  #f1f1f1;
+@color-gray-darker:          @charcoal;
+@color-gray-dark:            #555;
+@color-gray:                 #999;
+@color-gray-light:           #ddd;
+@color-gray-lighter:         #e5e5e5;
+@color-gray-pale:            #f1f1f1;
 
 // Brand colors
 @color-primary:               @dodger-blue;
 @color-secondary:             @sky-blue;
-@color-light:                 @white;
+@color-light:                 @color-fore;
 @color-dark:                  @charcoal;
 @color-pale:                  @pale-blue;
-@color-backgrond:             @white;
+@color-backgrond:             @color-fore;
 @color-fore:                  @charcoal;
-@color-accent:                @gray-blue;
+@color-accent:                @color-gray-blue;
 @color-success:               @green;
 @color-warning:               @yellow;
 @color-danger:                @red;
@@ -56,7 +56,7 @@
 // Form states and alerts
 // -------------------------
 @state-default-text:             @color-dark;
-@state-default-bg:               @gray-pale;
+@state-default-bg:               @color-gray-pale;
 @state-default-border:           darken(spin(@state-default-bg, -10), 5%);
 
 @state-success-text:             @color-success;
@@ -192,7 +192,7 @@
 
 // Active
 @component-active-color:         @color-secondary;
-@component-active-bg:            @gray-pale;
+@component-active-bg:            @color-gray-pale;
 
 // Accent
 @active-border-color:            @component-active-color;
@@ -219,9 +219,9 @@
 @dropdown-link-active-color:     @component-active-color;
 @dropdown-link-active-bg:        @component-active-bg;
 
-@dropdown-link-disabled-color:   @gray-light;
+@dropdown-link-disabled-color:   @color-gray-light;
 
-@dropdown-header-color:          @gray;
+@dropdown-header-color:          @color-gray;
 
 @dropdown-caret-color:           #000;
 
@@ -250,13 +250,13 @@
 @table-condensed-cell-padding:       5px;
 
 @table-bg:                           transparent; // overall background-color
-@table-head-bg:                      @gray-pale;
+@table-head-bg:                      @color-gray-pale;
 @table-bg-accent:                    #f9f9f9; // for striping
 @table-bg-hover:                     #f5f5f5;
 @table-bg-active:                    @table-bg-hover;
-@table-border-active:                @gray-light;
+@table-border-active:                @color-gray-light;
 
-@table-border-color:                 @gray-light; // table and cell border
+@table-border-color:                 @color-gray-light; // table and cell border
 
 
 // BUTTONS
@@ -288,7 +288,7 @@
 @btn-info-bg:                    @color-info;
 @btn-info-border:                darken(@btn-info-bg, 5%);
 
-@btn-link-disabled-color:        @gray-light;
+@btn-link-disabled-color:        @color-gray-light;
 
 // Progress bars
 // -------------------------
@@ -305,7 +305,7 @@
 // -------------------------
 @thumbnail-padding:           4px;
 @thumbnail-bg:                @body-bg;
-@thumbnail-border:            @gray-light;
+@thumbnail-border:            @color-gray-light;
 @thumbnail-border-radius:     @border-radius-base;
 
 @thumbnail-caption-color:     @text-color;
@@ -316,12 +316,12 @@
 // -------------------------
 
 // Hr border color
-@hr-border:                   @gray-lighter;
+@hr-border:                   @color-gray-lighter;
 
 // Labels
 // -------------------------
 
-@label-default-bg:            @gray;
+@label-default-bg:            @color-gray;
 @label-primary-bg:            @color-primary;
 @label-success-bg:            @color-success;
 @label-info-bg:               @color-info;
@@ -334,7 +334,7 @@
 // Badges
 // -------------------------
 @badge-link-hover-color:      #fff;
-@badge-bg:                    @gray-light;
+@badge-bg:                    @color-gray-light;
 
 @badge-active-color:          @link-color;
 @badge-active-bg:             #fff;
@@ -345,34 +345,34 @@
 
 // Input
 @input-bg:                       #fff;
-@input-bg-disabled:              @gray-lighter;
+@input-bg-disabled:              @color-gray-lighter;
 
-@input-color:                    @gray-darker;
+@input-color:                    @color-gray-darker;
 @input-border:                   #ccc;
 @input-border-radius:            @border-radius-base;
-@input-border-focus:             @gray-blue;
+@input-border-focus:             @color-gray-blue;
 
-@input-color-placeholder:        @gray;
+@input-color-placeholder:        @color-gray;
 
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
 @input-height-large:             (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
 @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
 
-@legend-color:                   @gray-dark;
+@legend-color:                   @color-gray-dark;
 @legend-border-color:            #e5e5e5;
 
-@input-group-addon-bg:           @gray-lighter;
+@input-group-addon-bg:           @color-gray-lighter;
 @input-group-addon-border-color: @input-border;
 
 // Breadcrumbs
 // -------------------------
 @breadcrumb-color:            #ccc;
-@breadcrumb-active-color:     @gray-light;
+@breadcrumb-active-color:     @color-gray-light;
 
 // List group
 // -------------------------
 @list-group-bg:               #fff;
-@list-group-border:           @gray-light;
+@list-group-border:           @color-gray-light;
 @list-group-border-radius:    @border-radius-base;
 
 @list-group-hover-bg:         #f5f5f5;
@@ -386,12 +386,12 @@
 // Panels
 // -------------------------
 @panel-bg:                    #fff;
-@panel-inner-border:          @gray-light;
+@panel-inner-border:          @color-gray-light;
 @panel-border-radius:         @border-radius-base;
 @panel-footer-bg:             #f5f5f5;
 
-@panel-default-text:          @gray-dark;
-@panel-default-border:        @gray-light;
+@panel-default-text:          @color-gray-dark;
+@panel-default-border:        @color-gray-light;
 @panel-default-heading-bg:    #f5f5f5;
 
 @panel-primary-text:          #fff;
@@ -470,25 +470,25 @@
 @code-bg:                     #f9f2f4;
 
 @pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
+@pre-color:                   @color-gray-dark;
 @pre-border-color:            #ccc;
 @pre-scrollable-max-height:   340px;
 
 // Type
 // ------------------------
-@text-muted:                  @gray;
-@abbr-border-color:           @gray-light;
-@headings-small-color:        @gray;
-@blockquote-small-color:      @gray;
-@blockquote-border-color:     @gray-lighter;
-@header-dividing-color:       @gray-lighter;
-@headings-block-background:   @gray-lighter;
+@text-muted:                  @color-gray;
+@abbr-border-color:           @color-gray-light;
+@headings-small-color:        @color-gray;
+@blockquote-small-color:      @color-gray;
+@blockquote-border-color:     @color-gray-lighter;
+@header-dividing-color:       @color-gray-lighter;
+@headings-block-background:   @color-gray-lighter;
 
 // Miscellaneous
 // -------------------------
 
 // Hr border color
-@hr-border:                   @gray-lighter;
+@hr-border:                   @color-gray-lighter;
 
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;
@@ -498,7 +498,7 @@
 
 @article-padding:                 20px;
 @article-section-padding:         10px 15px;
-@article-abstract-bg:             @gray-pale;
+@article-abstract-bg:             @color-gray-pale;
 @article-abstract-color:          lighten(@color-fore,20%);
 @article-img-shadow:              0px 1px 3px rgba(0, 0, 0, 0.4);
 @article-img-shadow-hover:        0px 1px 6px rgba(0, 0, 0, 0.8);
@@ -508,7 +508,7 @@
 @article-font-size-h4:            ceil(@font-size-base * 1.25); // 18px
 @article-font-size-h5:            @font-size-base;
 @article-font-size-h6:            ceil(@font-size-base * 0.85); // 12px
-@article-headings-border-color:   @gray-light;
+@article-headings-border-color:   @color-gray-light;
 
 // Contents List
 // -----------------------
@@ -520,22 +520,22 @@
 // Cards
 // ----------------------
 
-@card-border-color:           @gray-light;
-@card-reveal-bg:              @gray-pale;
+@card-border-color:           @color-gray-light;
+@card-reveal-bg:              @color-gray-pale;
 
 
 // Pager
 // -------------------------
 
 @pager-bg:                        #fff;
-@pager-border:                    @gray-light;
+@pager-border:                    @color-gray-light;
 
-@pager-hover-bg:                  @gray-lighter;
+@pager-hover-bg:                  @color-gray-lighter;
 
 @pager-active-bg:                 @component-active-bg;
 @pager-active-color:              @component-active-color;
 
-@pager-disabled-color:            @gray-light;
+@pager-disabled-color:            @color-gray-light;
 @pager-border-radius:             16px;
 
 
@@ -549,14 +549,14 @@
 @navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 
-@navbar-default-color:             @gray-dark;
-@navbar-default-bg:                lighten(@gray-pale, 2.5%);
+@navbar-default-color:             @color-gray-dark;
+@navbar-default-bg:                lighten(@color-gray-pale, 2.5%);
 @navbar-default-border:            darken(@navbar-default-bg, 10%);
 
 // Navbar links
-@navbar-default-link-color:                @gray-dark;
-@navbar-default-link-hover-color:          @gray-darker;
-@navbar-default-link-hover-bg:             @gray-lighter;
+@navbar-default-link-color:                @color-gray-dark;
+@navbar-default-link-hover-color:          @color-gray-darker;
+@navbar-default-link-hover-bg:             @color-gray-lighter;
 @navbar-default-link-active-color:         #555;
 @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
 @navbar-default-link-disabled-color:       #ccc;
@@ -568,20 +568,20 @@
 @navbar-default-brand-hover-bg:            transparent;
 
 // Navbar toggle
-@navbar-default-toggle-hover-bg:           @gray-light;
+@navbar-default-toggle-hover-bg:           @color-gray-light;
 @navbar-default-toggle-icon-bar-bg:        #ccc;
-@navbar-default-toggle-border-color:       @gray-light;
+@navbar-default-toggle-border-color:       @color-gray-light;
 
 
 // Inverted navbar
 //
 // Reset inverted navbar basics
-@navbar-inverse-color:                      @gray-light;
+@navbar-inverse-color:                      @color-gray-light;
 @navbar-inverse-bg:                         @color-primary;
 @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 @gray-light;
+@navbar-inverse-link-color:                 @color-gray-light;
 @navbar-inverse-link-hover-color:           #fff;
 @navbar-inverse-link-hover-bg:              lighten(@navbar-inverse-bg, 6%);
 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
@@ -605,24 +605,24 @@
 
 @nav-link-padding:                          10px 15px;
 @nav-link-padding-top:                      10px;
-@nav-link-hover-bg:                         @gray-lighter;
+@nav-link-hover-bg:                         @color-gray-lighter;
 
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
+@nav-disabled-link-color:                   @color-gray-light;
+@nav-disabled-link-hover-color:             @color-gray-light;
 
 @nav-open-link-hover-color:                 #fff;
 @nav-open-caret-border-color:               #fff;
 
 // Tabs
-@nav-tabs-border-color:                     @gray-light;
+@nav-tabs-border-color:                     @color-gray-light;
 
-@nav-tabs-link-hover-border-color:          @gray-lighter;
+@nav-tabs-link-hover-border-color:          @color-gray-lighter;
 
 @nav-tabs-active-link-hover-bg:             @body-bg;
-@nav-tabs-active-link-hover-color:          @gray-dark;
-@nav-tabs-active-link-hover-border-color:   @gray-light;
+@nav-tabs-active-link-hover-color:          @color-gray-dark;
+@nav-tabs-active-link-hover-border-color:   @color-gray-light;
 
-@nav-tabs-justified-link-border-color:       @gray-light;
+@nav-tabs-justified-link-border-color:       @color-gray-light;
 @nav-tabs-justified-active-link-border-color:@body-bg;
 
 // Pills
@@ -636,7 +636,7 @@
 @nav-secondary-active-link-hover-color:     @component-active-color;
 
 // Primary
-@nav-primary-border-color:                  @gray-light;
+@nav-primary-border-color:                  @color-gray-light;
 @nav-primary-active-link-hover-color:       @component-active-color;
 @nav-primary-active-border-color:           @component-active-bg;
 
@@ -693,8 +693,8 @@
 @icon-font-path:          "../fonts";
 //@FontAwesomePath:    "//netdna.bootstrapcdn.com/font-awesome/3.2.1/font"; // for referencing Bootstrap CDN font files directly
 @icon-font-version:       "3.2.1";
-@icon-border-color:       @gray-light;
-@icon-muted-color:        @gray-light;
+@icon-border-color:       @color-gray-light;
+@icon-muted-color:        @color-gray-light;
 @icon-light-color:        #fff;
 @icon-dark-color:         #333;
 @icons-li-width:          30/14em;

src/less/basic/variables.less

 //
 // The Variables of ZUI.
-// =================================================
-
-
-// COLOR SCHEME
-// -------------------------------------------------
-
-// Color set
-@dark-mineral-blue:          #304269;
-@sky-blue:                   #91bed4;
-@pale-blue:                  #d9e8f5;
-@orange:                     #f26101;
-@white:                      #fff;
-@charcoal:                   #333;
-@red:                        #d2322d;
-@yellow:                     #ed9c28;
-@green:                      #47a447;
-@blue:                       #39b3d7;
-@brown:                      #81511c;
-@purple:                     #8957a1;
-@gray:                       #808080;
-
-// Grays
-@gray-darker:                @charcoal;
-@gray-dark:                  #707070;
-@gray:                       #999;
-@gray-light:                 #ddd;
-@gray-lighter:               #e5e5e5;
-@gray-pale:                  #f1f1f1;
-
-// Brand colors
-@color-primary:               @dark-mineral-blue;
-@color-secondary:             @sky-blue;
-@color-light:                 @white;
-@color-dark:                  @charcoal;
-@color-pale:                  @pale-blue;
-@color-backgrond:             @white;
-@color-fore:                  @charcoal;
-@color-accent:                @orange;
-@color-success:               @green;
-@color-warning:               @yellow;
-@color-danger:                @red;
-@color-info:                  @blue;
-@color-important:             @brown;
-@color-special:               @purple;
-
-@color-success-pale:          #f3fff0;
-@color-warning-pale:          #faf8f0;
-@color-danger-pale:           #FDF7F7;
-@color-info-pale:             #f4f8fa;
-@color-important-pale:        #f6e1c9;
-@color-special-pale:          #f6e9fc;
+// =========================
 
 
-// Form states and alerts
+// COLOR SET
 // -------------------------
-@state-default-text:             @color-dark;
-@state-default-bg:               @gray-pale;
-@state-default-border:           darken(spin(@state-default-bg, -10), 5%);
+@import "colorset.less";
+
+// Form states and alerts
+@state-default-text:      @color-dark;
+@state-default-bg:        @color-gray-pale;
+@state-default-border:    darken(spin(@state-default-bg, -10), 5%);
 
-@state-success-text:             @color-success;
-@state-success-bg:               @color-success-pale;
-@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+@state-success-text:      @color-success;
+@state-success-bg:        @color-success-pale;
+@state-success-border:    darken(spin(@state-success-bg, -10), 5%);
 
-@state-info-text:                @color-info;
-@state-info-bg:                  @color-info-pale;
-@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+@state-info-text:         @color-info;
+@state-info-bg:           @color-info-pale;
+@state-info-border:       darken(spin(@state-info-bg, -10), 7%);
 
-@state-warning-text:             @color-warning;
-@state-warning-bg:               @color-warning-pale;
-@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+@state-warning-text:      @color-warning;
+@state-warning-bg:        @color-warning-pale;
+@state-warning-border:    darken(spin(@state-warning-bg, -10), 5%);
 
-@state-danger-text:              @color-danger;
-@state-danger-bg:                @color-danger-pale;
-@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+@state-danger-text:       @color-danger;
+@state-danger-bg:         @color-danger-pale;
+@state-danger-border:     darken(spin(@state-danger-bg, -10), 5%);
 
-@state-important-text:           @color-important;
-@state-important-bg:             @color-important-pale;
-@state-important-border:         darken(spin(@state-important-bg, -10), 5%);
+@state-important-text:    @color-important;
+@state-important-bg:      @color-important-pale;
+@state-important-border:  darken(spin(@state-important-bg, -10), 5%);
 
-@state-special-text:             @color-special;
-@state-special-bg:               @color-special-pale;
-@state-special-border:           darken(spin(@state-special-bg, -10), 5%);
+@state-special-text:      @color-special;
+@state-special-bg:        @color-special-pale;
+@state-special-border:    darken(spin(@state-special-bg, -10), 5%);
 
 
 // Scaffolding
-@body-bg:               @color-backgrond;
+@body-bg:               @color-back;
 @text-color:            @color-fore;
 
 // Links
-@link-color:            lighten(@color-primary,20%);
+@link-color:            lighten(@color-primary,10%);
 @link-hover-color:      darken(@link-color, 15%);
 
 
 // MEDIA QUERIES TYPES
-// -------------------------------------------------
+// -------------------------
 
 // Extra small screen (phone).
 @screen-xs:                  480px;
@@ -123,7 +76,7 @@
 
 
 // GRID SYSTEM
-// -------------------------------------------------
+// -------------------------
 
 // Number of grid columns.
 @grid-columns:               12;
@@ -139,8 +92,9 @@
 // Large screen / wide desktop
 @container-lg-desktop:        ((1140px + @grid-gutter-width));
 
+
 // TYPOGRAPHY
-// -------------------------------------------------
+// -------------------------
 
 // Font family.
 @font-family-sans-serif:  "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
@@ -149,16 +103,16 @@
 @font-family-base:        @font-family-sans-serif;
 
 // Font size.
-@font-size-base:          14px;
-@font-size-large:         ceil(@font-size-base * 1.25); // 18px
-@font-size-small:         ceil(@font-size-base * 0.85); // 12px
+@font-size-base:          13px;
+@font-size-large:         ceil(@font-size-base * 1.25);  // 18px
+@font-size-small:         ceil(@font-size-base * 0.85);  // 12px
 
 @font-size-h1:            floor(@font-size-base * 2.60); // 36px
 @font-size-h2:            floor(@font-size-base * 2.15); // 30px
-@font-size-h3:            ceil(@font-size-base * 1.70); // 24px
-@font-size-h4:            ceil(@font-size-base * 1.25); // 18px
+@font-size-h3:            ceil(@font-size-base * 1.70);  // 24px
+@font-size-h4:            ceil(@font-size-base * 1.25);  // 18px
 @font-size-h5:            @font-size-base;
-@font-size-h6:            ceil(@font-size-base * 0.85); // 12px
+@font-size-h6:            ceil(@font-size-base * 0.85);  // 12px
 
 // Line height.
 @line-height-base:        1.428571429; // 20/14
@@ -175,7 +129,7 @@
 
 
 // COMPONENTS CONFIG
-// -------------------------------------------------
+// -------------------------
 
 // Paddings
 @padding-base-vertical:          6px;
@@ -192,7 +146,7 @@
 
 // Active
 @component-active-color:         @color-primary;
-@component-active-bg:            @gray-pale;
+@component-active-bg:            @color-gray-pale;
 
 // Accent
 @active-border-color:            @component-active-color;
@@ -219,15 +173,15 @@
 @dropdown-link-active-color:     @component-active-color;
 @dropdown-link-active-bg:        @component-active-bg;
 
-@dropdown-link-disabled-color:   @gray-light;
+@dropdown-link-disabled-color:   @color-gray-light;
 
-@dropdown-header-color:          @gray;
+@dropdown-header-color:          @color-gray;
 
 @dropdown-caret-color:           #000;
 
 
 // COMPONENT VARIABLES
-// --------------------------------------------------
+// --------------------------
 
 
 // Z-index master list
@@ -250,22 +204,22 @@
 @table-condensed-cell-padding:       5px;
 
 @table-bg:                           transparent; // overall background-color
-@table-head-bg:                      @gray-pale;
+@table-head-bg:                      @color-gray-pale;
 @table-bg-accent:                    #f9f9f9; // for striping
 @table-bg-hover:                     #f5f5f5;
 @table-bg-active:                    @table-bg-hover;
-@table-border-active:                @gray-light;
+@table-border-active:                @color-gray-light;
 
-@table-border-color:                 @gray-light; // table and cell border
+@table-border-color:                 @color-gray-light; // table and cell border
 
 
 // BUTTONS
-// -------------------------------------------------
+// -------------------------
 
 @btn-font-weight:                normal;
 
 @btn-default-color:              @color-fore;
-@btn-default-bg:                 darken(@color-backgrond,1%);
+@btn-default-bg:                 darken(@color-back,1%);
 @btn-default-border:             darken(@btn-default-bg, 20%);
 
 @btn-primary-color:              @color-light;
@@ -288,7 +242,7 @@
 @btn-info-bg:                    @color-info;
 @btn-info-border:                darken(@btn-info-bg, 5%);
 
-@btn-link-disabled-color:        @gray-light;
+@btn-link-disabled-color:        @color-gray-light;
 
 // Progress bars
 // -------------------------
@@ -305,7 +259,7 @@
 // -------------------------
 @thumbnail-padding:           4px;
 @thumbnail-bg:                @body-bg;
-@thumbnail-border:            @gray-light;
+@thumbnail-border:            @color-gray-light;
 @thumbnail-border-radius:     @border-radius-base;
 
 @thumbnail-caption-color:     @text-color;
@@ -316,12 +270,12 @@
 // -------------------------
 
 // Hr border color
-@hr-border:                   @gray-lighter;
+@hr-border:                   @color-gray-lighter;
 
 // Labels
 // -------------------------
 
-@label-default-bg:            @gray;
+@label-default-bg:            @color-gray;
 @label-primary-bg:            @color-primary;
 @label-success-bg:            @color-success;
 @label-info-bg:               @color-info;
@@ -334,7 +288,7 @@
 // Badges
 // -------------------------
 @badge-link-hover-color:      #fff;
-@badge-bg:                    @gray-light;
+@badge-bg:                    @color-gray-light;
 
 @badge-active-color:          @link-color;
 @badge-active-bg:             #fff;
@@ -345,34 +299,34 @@
 
 // Input
 @input-bg:                       #fff;
-@input-bg-disabled:              @gray-lighter;
+@input-bg-disabled:              @color-gray-lighter;
 
-@input-color:                    @gray-darker;
+@input-color:                    @color-gray-darker;
 @input-border:                   #ccc;
 @input-border-radius:            @border-radius-base;
 @input-border-focus:             @link-color;
 
-@input-color-placeholder:        @gray;
+@input-color-placeholder:        @color-gray;
 
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
 @input-height-large:             (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
 @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
 
-@legend-color:                   @gray-dark;
+@legend-color:                   @color-gray-dark;
 @legend-border-color:            #e5e5e5;
 
-@input-group-addon-bg:           @gray-lighter;
+@input-group-addon-bg:           @color-gray-lighter;
 @input-group-addon-border-color: @input-border;
 
 // Breadcrumbs
 // -------------------------
 @breadcrumb-color:            #ccc;
-@breadcrumb-active-color:     @gray-light;
+@breadcrumb-active-color:     @color-gray-light;
 
 // List group
 // -------------------------
 @list-group-bg:               #fff;
-@list-group-border:           @gray-light;
+@list-group-border:           @color-gray-light;
 @list-group-border-radius:    @border-radius-base;
 
 @list-group-hover-bg:         #f5f5f5;
@@ -386,12 +340,12 @@
 // Panels
 // -------------------------
 @panel-bg:                    #fff;
-@panel-inner-border:          @gray-light;
+@panel-inner-border:          @color-gray-light;
 @panel-border-radius:         @border-radius-base;
 @panel-footer-bg:             #f5f5f5;
 
-@panel-default-text:          @gray-dark;
-@panel-default-border:        @gray-light;
+@panel-default-text:          @color-gray-dark;
+@panel-default-border:        @color-gray-light;
 @panel-default-heading-bg:    #f5f5f5;
 
 @panel-primary-text:          #fff;
@@ -467,28 +421,28 @@
 // Code
 // ------------------------
 @code-color:                  @color-important;
-@code-bg:                     @gray-pale;
+@code-bg:                     @color-gray-pale;
 
 @pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
+@pre-color:                   @color-gray-dark;
 @pre-border-color:            #ccc;
 @pre-scrollable-max-height:   340px;
 
 // Type
 // ------------------------
-@text-muted:                  @gray;
-@abbr-border-color:           @gray-light;
-@headings-small-color:        @gray;
-@blockquote-small-color:      @gray;
-@blockquote-border-color:     @gray-lighter;
-@header-dividing-color:       @gray-lighter;
-@headings-block-background:   @gray-lighter;
+@text-muted:                  @color-gray;
+@abbr-border-color:           @color-gray-light;
+@headings-small-color:        @color-gray;
+@blockquote-small-color:      @color-gray;
+@blockquote-border-color:     @color-gray-lighter;
+@header-dividing-color:       @color-gray-lighter;
+@headings-block-background:   @color-gray-lighter;
 
 // Miscellaneous
 // -------------------------
 
 // Hr border color
-@hr-border:                   @gray-lighter;
+@hr-border:                   @color-gray-lighter;
 
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;
@@ -498,7 +452,7 @@
 
 @article-padding:                 20px;
 @article-section-padding:         10px 15px;
-@article-abstract-bg:             @gray-pale;
+@article-abstract-bg:             @color-gray-pale;
 @article-abstract-color:          lighten(@color-fore,20%);
 @article-img-shadow:              0px 1px 3px rgba(0, 0, 0, 0.4);
 @article-img-shadow-hover:        0px 1px 6px rgba(0, 0, 0, 0.8);
@@ -508,7 +462,7 @@
 @article-font-size-h4:            ceil(@font-size-base * 1.25); // 18px
 @article-font-size-h5:            @font-size-base;
 @article-font-size-h6:            ceil(@font-size-base * 0.85); // 12px
-@article-headings-border-color:   @gray-light;
+@article-headings-border-color:   @color-gray-light;
 
 // Contents List
 // -----------------------
@@ -520,22 +474,22 @@
 // Cards
 // ----------------------
 
-@card-border-color:           @gray-light;
-@card-reveal-bg:              @gray-pale;
+@card-border-color:           @color-gray-light;
+@card-reveal-bg:              @color-gray-pale;
 
 
 // Pager
 // -------------------------
 
 @pager-bg:                        #fff;
-@pager-border:                    @gray-light;
+@pager-border:                    @color-gray-light;
 
-@pager-hover-bg:                  @gray-lighter;
+@pager-hover-bg:                  @color-gray-lighter;
 
 @pager-active-bg:                 @component-active-bg;
 @pager-active-color:              @component-active-color;
 
-@pager-disabled-color:            @gray-light;
+@pager-disabled-color:            @color-gray-light;
 @pager-border-radius:             16px;
 
 
@@ -549,14 +503,14 @@
 @navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 
-@navbar-default-color:             @gray-dark;
-@navbar-default-bg:                lighten(@gray-pale, 2.5%);
+@navbar-default-color:             @color-gray-dark;
+@navbar-default-bg:                lighten(@color-gray-pale, 2.5%);
 @navbar-default-border:            darken(@navbar-default-bg, 6.5%);
 
 // Navbar links
-@navbar-default-link-color:                @gray-dark;
-@navbar-default-link-hover-color:          @gray-darker;
-@navbar-default-link-hover-bg:             @gray-lighter;
+@navbar-default-link-color:                @color-gray-dark;
+@navbar-default-link-hover-color:          @color-gray-darker;
+@navbar-default-link-hover-bg:             @color-gray-lighter;
 @navbar-default-link-active-color:         #555;
 @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
 @navbar-default-link-disabled-color:       #ccc;
@@ -568,20 +522,20 @@
 @navbar-default-brand-hover-bg:            transparent;
 
 // Navbar toggle
-@navbar-default-toggle-hover-bg:           @gray-light;
+@navbar-default-toggle-hover-bg:           @color-gray-light;
 @navbar-default-toggle-icon-bar-bg:        #ccc;
-@navbar-default-toggle-border-color:       @gray-light;
+@navbar-default-toggle-border-color:       @color-gray-light;
 
 
 // Inverted navbar
 //
 // Reset inverted navbar basics
-@navbar-inverse-color:                      @gray-light;
+@navbar-inverse-color:                      @color-gray-light;
 @navbar-inverse-bg:                         @color-primary;
 @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 @gray-light;
+@navbar-inverse-link-color:                 @color-gray-light;
 @navbar-inverse-link-hover-color:           #fff;
 @navbar-inverse-link-hover-bg:              darken(@navbar-inverse-bg, 6%);
 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
@@ -605,24 +559,24 @@
 
 @nav-link-padding:                          10px 15px;
 @nav-link-padding-top:                      10px;
-@nav-link-hover-bg:                         @gray-lighter;
+@nav-link-hover-bg:                         @color-gray-lighter;
 
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
+@nav-disabled-link-color:                   @color-gray-light;
+@nav-disabled-link-hover-color:             @color-gray-light;
 
 @nav-open-link-hover-color:                 #fff;
 @nav-open-caret-border-color:               #fff;
 
 // Tabs
-@nav-tabs-border-color:                     @gray-light;
+@nav-tabs-border-color:                     @color-gray-light;
 
-@nav-tabs-link-hover-border-color:          @gray-lighter;
+@nav-tabs-link-hover-border-color:          @color-gray-lighter;
 
 @nav-tabs-active-link-hover-bg:             @body-bg;
-@nav-tabs-active-link-hover-color:          @gray;
-@nav-tabs-active-link-hover-border-color:   @gray-light;
+@nav-tabs-active-link-hover-color:          @color-gray;
+@nav-tabs-active-link-hover-border-color:   @color-gray-light;
 
-@nav-tabs-justified-link-border-color:       @gray-light;
+@nav-tabs-justified-link-border-color:       @color-gray-light;
 @nav-tabs-justified-active-link-border-color:@body-bg;
 
 // Pills
@@ -636,7 +590,7 @@
 @nav-secondary-active-link-hover-color:     @component-active-color;
 
 // Primary
-@nav-primary-border-color:                  @gray-light;
+@nav-primary-border-color:                  @color-gray-light;
 @nav-primary-active-link-hover-color:       @component-active-color;
 @nav-primary-active-border-color:           @component-active-bg;
 
@@ -666,7 +620,7 @@
 // Tooltips
 // -------------------------
 @tooltip-max-width:           200px;
-@tooltip-color:               @color-backgrond;
+@tooltip-color:               @color-back;
 @tooltip-bg:                  @color-fore;
 
 @tooltip-arrow-width:         5px;
@@ -693,8 +647,8 @@
 @icon-font-path:          "../fonts";
 //@FontAwesomePath:    "//netdna.bootstrapcdn.com/font-awesome/3.2.1/font"; // for referencing Bootstrap CDN font files directly
 @icon-font-version:       "3.2.1";
-@icon-border-color:       @gray-light;
-@icon-muted-color:        @gray-light;
+@icon-border-color:       @color-gray-light;
+@icon-muted-color:        @color-gray-light;
 @icon-light-color:        #fff;
 @icon-dark-color:         #333;
 @icons-li-width:          30/14em;

src/less/components/list-group.less

@@ -51,16 +51,16 @@
     z-index: 2; // Place active items above their siblings for proper border styling
     background-color: @component-active-color;
     border-color: @component-active-color;
-    color: @white;
+    color: @color-fore;
 
     // Force color to inherit for custom content
-    .list-group-item-heading { color: @white; }
-    .list-group-item-text { color: darken(@white, 10%); }
+    .list-group-item-heading { color: @color-fore; }
+    .list-group-item-text { color: darken(@color-fore, 10%); }
   }
 }
 
 // Custom content options
 // -------------------------
 
-.list-group-item-heading { margin-top: 0; margin-bottom: 5px; color: @gray-dark; }
+.list-group-item-heading { margin-top: 0; margin-bottom: 5px; color: @color-gray-dark; }
 .list-group-item-text { margin-bottom: 0; line-height: 1.3; }

src/less/components/navs.less

@@ -16,7 +16,7 @@
   > .nav-heading
   {
     padding: @nav-link-padding;
-    color: @gray-dark;
+    color: @color-gray-dark;
     font-weight: @headings-font-weight;
   }
 
@@ -176,12 +176,12 @@
       {
         background-color: @component-active-color;
         border-color: @component-active-color;
-        color: @white;
+        color: @color-fore;
 
         .caret
         {
-          border-top-color: @white;
-          border-bottom-color: @white;
+          border-top-color: @color-fore;
+          border-bottom-color: @color-fore;
         }
       }
     }
@@ -290,8 +290,8 @@
       }
       &.nav-heading
       {
-        border: 1px solid @gray-light;
-        background-color: @gray-pale;
+        border: 1px solid @color-gray-light;
+        background-color: @color-gray-pale;
       }
     }
   }
@@ -325,7 +325,7 @@
       }
       &.nav-heading
       {
-        border-bottom: 1px solid @gray-light;
+        border-bottom: 1px solid @color-gray-light;
       }
     }
   }

src/less/modules/choosen.less

-@import "../basic/variables.chanzhi.less";
+@import "../basic/variables.less";
 @import "../basic/mixins.less";
 @import "../controls/icons.variables.less";
 
@@ -153,7 +153,7 @@
       position: absolute;
       display: block;
       right: 10px;
-      color: @gray;
+      color: @color-gray;
       top: 8px;
       content: @search;
       font-family: @icon-font-name;
@@ -273,9 +273,9 @@
     {
       position: relative;
       padding: 3px 20px 3px 5px;
-      background-color: @gray-pale;
+      background-color: @color-gray-pale;
       border-radius: @border-radius-small;
-      border: 1px solid @gray-light;
+      border: 1px solid @color-gray-light;
       background-clip: padding-box; 
       .box-shadow(~"0 0 2px #fff inset, 0 1px 0 rgba(0,0,0,.05)");
       line-height: 12px;
@@ -284,8 +284,8 @@
       
       &:hover
       {
-        border-color: darken(@gray-light, 10%);
-        background-color: lighten(@gray-pale, 10%);
+        border-color: darken(@color-gray-light, 10%);
+        background-color: lighten(@color-gray-pale, 10%);
         .box-shadow(~"0 1px 0 rgba(0,0,0,.1)");
       }
 

src/less/modules/kindeditor.less

@@ -175,12 +175,12 @@
   .ke-selected
   {
     .opacity(1);
-    border-color: @gray-light;
+    border-color: @color-gray-light;
   }
 
   .ke-selected
   {
-    background-color: @gray-pale;
+    background-color: @color-gray-pale;
   }
 
   .ke-disabled
@@ -191,7 +191,7 @@
   .ke-separator {
     height: 16px;
     margin: 2px 3px;
-    border-left: 1px dotted @gray-light;
+    border-left: 1px dotted @color-gray-light;
     border-top:0;
     border-bottom:0;
     width: 0;
@@ -222,8 +222,8 @@
 .ke-edit-textarea {
   font-size: @font-size-small;
   font-family: @font-family-monospace;
-  background-color: @gray-darker;
-  color: @gray-lighter;
+  background-color: @color-gray-darker;
+  color: @color-gray-lighter;
   overflow: auto;
   resize: none;
 }
@@ -374,14 +374,14 @@
   background-color: @dropdown-link-active-bg;
   .ke-colorpicker-cell-color
   {
-    border: 2px solid @white;
+    border: 2px solid @color-fore;
   }
 }
 .ke-colorpicker-cell-selected
 {
   .ke-colorpicker-cell-color
   {
-    border: 2px solid @white;
+    border: 2px solid @color-fore;
   }
 }
 
@@ -430,7 +430,7 @@
 .ke-dialog-header {
   border:0;
   margin:0;
-  background: @gray-pale;
+  background: @color-gray-pale;
   font-weight: bold;
   font-family: @headings-font-family;
   font-size: @font-size-base;
@@ -600,7 +600,7 @@
 }
 .ke-input-color, select {
   border: 1px solid @input-border;
-  background-color: @white;
+  background-color: @color-fore;
   font-size: 12px;
   width: 60px;
   height: 20px;

src/less/views/cards.less

@@ -27,7 +27,7 @@
   {
     .opacity(1);
     display: block;
-    background-color: @gray-pale;
+    background-color: @color-gray-pale;
     overflow: hidden;
     text-align: center;
     width: 100%;
@@ -58,7 +58,7 @@
   {
     > a
     {
-      color: @gray;
+      color: @color-gray;
     }
   }
 

src/less/views/comment.less

@@ -3,7 +3,7 @@
   > header
   {
     padding-bottom: 10px;
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid @color-gray-lighter;
 
     // > .alert
     // {
@@ -37,7 +37,7 @@
 .comment
 {
   padding: 10px 0;
-  border-bottom: 1px solid @gray-lighter;
+  border-bottom: 1px solid @color-gray-lighter;
 
   .clearfix();
   > .avatar,
@@ -73,7 +73,7 @@
         padding-left: 2px;
         display: inline-block;
         padding-right: 5px;
-        color: @gray;
+        color: @color-gray;
       }
     }
   }
@@ -96,13 +96,13 @@
   {
     padding-left: 30px;
     margin-left: 20px;
-    border-left: 1px dashed @gray-lighter;
+    border-left: 1px dashed @color-gray-lighter;
     padding-top: 10px;
     padding-bottom: 0;
     > .comment
     {
       border: none;
-      border-top: 1px solid @gray-lighter;
+      border-top: 1px solid @color-gray-lighter;
       &:last-child
       {
         padding-bottom: 0;

src/less/views/list.less

@@ -4,7 +4,7 @@
   > header
   {
     padding-bottom: 10px;
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid @color-gray-lighter;
   }
 
 }
@@ -14,7 +14,7 @@
 {
   .item
   {
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid @color-gray-lighter;
     padding: 10px 0;
     .transition(all,@animation-speed-normal,@animation-type);
   }
@@ -51,7 +51,7 @@
   {
     > a
     {
-      color: @gray;
+      color: @color-gray;
     }
     padding-top: @padding-base-vertical;
   }

src/less/zui.less

@@ -27,7 +27,7 @@
 @import "controls/buttons.less";
 @import "controls/labels.less";
 @import "controls/breadcrumbs.less";
-// @import "controls/icons.less";
+@import "controls/icons.less";
 @import "controls/close.less";
 
 //
@@ -61,8 +61,7 @@
 // ASSETS
 // --------------------------------------------------
 
-@import "controls/icons.less";
-@import "modules/choosen.less";
+// @import "modules/choosen.less";
 
 //
 // VIEWS
@@ -73,3 +72,8 @@
 @import "views/list.less";
 @import "views/cards.less";
 
+//
+// TESTS
+// --------------------------------------------------
+
+@import "basic/colorset.test.less";