Skip to content

Commit

Permalink
fix(Color): optimize color
Browse files Browse the repository at this point in the history
  • Loading branch information
@vvpvvp
vvpvvp committed Jun 6, 2019
1 parent 0f91db8 commit d24404f
Show file tree
Hide file tree
Showing 14 changed files with 180 additions and 164 deletions.
152 changes: 84 additions & 68 deletions doc/components/component/basic/color.vue
View file
@@ -1,101 +1,117 @@
<style lang="less" scoped>
.color-spans>div>div {
min-height: 80px;
.color-spans > div > div {
border-radius: 3px;
padding: 10px;
padding: 25px 20px;
}
</style>
<template>
<div class="doc">
<h2>Color 色彩</h2>
<p>HeyUI目前提供一个<code>primary</code>的颜色，并提供基本的颜色模板，以方便在系统开发中统一调用。</p>
<p>我们将提供统一的var.less调用，关于调用方式请参照<router-link to="/component/themes">更换主题</router-link></p>
<p>
HeyUI目前提供一个
<code>primary</code>的颜色，并提供基本的颜色模板，以方便在系统开发中统一调用。
</p>
<p>
我们将提供统一的var.less调用，关于调用方式请参照
<router-link to="/component/themes">更换主题</router-link>
</p>
<h3>Primary</h3>
<Row :space='20' class="color-spans">
<Cell :width='8'>
<div v-bg-color:primary v-color:white>
<p>@primary-color</p>
</div>
<Row :space="20" class="color-spans">
<Cell :width="6">
<div class="bg-primary-color white-color">
<p>Primary</p>
</div>
</Cell>
</Row>

<h3>主色</h3>
<Row :space='20' class="color-spans">
<Cell :width='6'>
<div v-bg-color:blue v-color:white>
<p>@blue-color</p>
</div>
<Row :space="20" class="color-spans">
<Cell :width="6">
<div class="bg-blue-color white-color">
<p>Blue</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:green v-color:white>
<p>@green-color</p>
</div>
<Cell :width="6">
<div class="bg-green-color white-color">
<p>Green</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:yellow v-color:white>
<p>@yellow-color</p>
</div>
<Cell :width="6">
<div class="bg-yellow-color white-color">
<p>Yellow</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:red v-color:white>
<p>@red-color</p>
</div>
<Cell :width="6">
<div class="bg-red-color white-color">
<p>Red</p>
</div>
</Cell>
</Row>

<h3>灰色</h3>
<Row :space='20' class="color-spans">
<Cell :width='12'>
<div v-bg-color:dark v-color:white>
<p>@dark-color</p>
</div>
<h3>文本</h3>
<Row :space="20" class="color-spans">
<Cell :width="6">
<div class="bg-dark-color white-color">
<p>Dark</p>
</div>
</Cell>
<Cell :width="18"><div><p>&nbsp;</p></div></Cell>
<Cell :width="6">
<div class="bg-dark1-color white-color">
<p>Dark1</p>
</div>
</Cell>
<Cell :width='12'>
<div v-bg-color:dark1 v-color:white>
<p>@dark1-color</p>
</div>
<Cell :width="6">
<div class="bg-dark2-color white-color">
<p>Dark2</p>
</div>
</Cell>
<Cell :width='12'>
<div v-bg-color:dark2 v-color:white>
<p>@dark2-color</p>
</div>
<Cell :width="6">
<div class="bg-dark3-color white-color">
<p>Dark3</p>
</div>
</Cell>
<Cell :width='12'>
<div v-bg-color:gray v-color:white>
<p>@gray-color</p>
</div>
<Cell :width="6">
<div class="bg-dark4-color white-color">
<p>Dark4</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:gray1 v-color:dark>
<p>@gray1-color</p>
</div>
</Row>

<h3>背景色</h3>
<Row :space="20" class="color-spans">
<Cell :width="6">
<div class="bg-gray-color">
<p>Gray</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:gray2 v-color:dark>
<p>@gray2-color</p>
</div>
<Cell :width="18"><div><p>&nbsp;</p></div></Cell>
<Cell :width="6">
<div class="bg-gray1-color">
<p>Gray1</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:gray3 v-color:dark>
<p>@gray3-color</p>
</div>
<Cell :width="6">
<div class="bg-gray2-color">
<p>Gray2</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:gray4 v-color:dark>
<p>@gray4-color</p>
</div>
<Cell :width="6">
<div class="bg-gray3-color">
<p>Gray3</p>
</div>
</Cell>
<Cell :width="6">
<div class="bg-gray4-color">
<p>Gray4</p>
</div>
</Cell>
</Row>

<h3>文本</h3>
<h3>应用</h3>
<div>
<p v-color:dark v-font='18'>标题@dark-color</p>
<p v-color:gray>副标题@gray-color</p>
<p v-color:gray1>描述@gray1-color</p>
<p><a href="javascript:;">这是一个链接，复用@primary-color</a></p>
<p><span v-color:red>这是一个错误@red-color</span></p>
<example demo="basic/color"></example>
</div>

</div>
</template>
<script>
Expand Down
11 changes: 11 additions & 0 deletions doc/components/demos/basic/color.vue
View file
@@ -0,0 +1,11 @@
<template>
<div>
<p class="dark-color">Title</p>
<p class="dark2-color">SubTitle</p>
<p class="dark3-color">Description</p>
<section>
<p><a href="/">This is a link.</a></p>
<p>We have <span class="blue-color">blue</span>, <span class="red-color">red</span>, <span class="yellow-color">yellow</span>, <span class="green-color">green</span>.</p>
</section>
</div>
</template>
1 change: 1 addition & 0 deletions doc/components/demos/demos.js
View file
Expand Up @@ -11,6 +11,7 @@ export default {
'basicLayout4': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/layout4.vue')); }, 'basic'); },
'basicLayout5': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/layout5.vue')); }, 'basic'); },
'basicIcon': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/icon.vue')); }, 'basic'); },
'basicColor': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/color.vue')); }, 'basic'); },
'basicDemo': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/demo.vue')); }, 'basic'); },
'basicDemo2': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/demo2.vue')); }, 'basic'); },
'basicExtend1': resolve => require.ensure([], require => require('./basic/extend1.vue'), 'basic'),
Expand Down
1 change: 0 additions & 1 deletion doc/components/guide/themes.vue
View file
Expand Up @@ -94,7 +94,6 @@ export default = {
@gray1-color: #d3d3d3;
@gray2-color: #eeeeee;
@gray3-color: #f3f3f3;
@gray4-color: #f9f9f9;

//hover
@hover-background-color: lighten(@primary-color, 37%);
Expand Down
113 changes: 63 additions & 50 deletions doc/components_en/component/basic/color.vue
View file
Expand Up @@ -14,89 +14,102 @@
<p>We will provide global variables in var.less, please refer to the <router-link to="/en/component/themes">Themes</router-link>
</p>
<h3>Primary</h3>
<Row :space='20' class="color-spans">
<Cell :width='8'>
<div v-bg-color:primary v-color:white>
<p>@primary-color</p>
<Row :space="20" class="color-spans">
<Cell :width="6">
<div class="bg-primary-color white-color">
<p>Primary</p>
</div>
</Cell>
</Row>

<h3>Main color</h3>
<Row :space='20' class="color-spans">
<Cell :width='6'>
<div v-bg-color:blue v-color:white>
<p>@blue-color</p>
<h3>Main Color</h3>

<Row :space="20" class="color-spans">
<Cell :width="6">
<div class="bg-blue-color white-color">
<p>Blue</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:green v-color:white>
<p>@green-color</p>
<Cell :width="6">
<div class="bg-green-color white-color">
<p>Green</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:yellow v-color:white>
<p>@yellow-color</p>
<Cell :width="6">
<div class="bg-yellow-color white-color">
<p>Yellow</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:red v-color:white>
<p>@red-color</p>
<Cell :width="6">
<div class="bg-red-color white-color">
<p>Red</p>
</div>
</Cell>
</Row>

<h3>Gray</h3>
<Row :space='20' class="color-spans">
<Cell :width='12'>
<div v-bg-color:dark v-color:white>
<p>@dark-color</p>
<h3>Text Color</h3>
<Row :space="20" class="color-spans">
<Cell :width="6">
<div class="bg-dark-color white-color">
<p>Dark</p>
</div>
</Cell>
<Cell :width="18"><div><p>&nbsp;</p></div></Cell>
<Cell :width="6">
<div class="bg-dark1-color white-color">
<p>Dark1</p>
</div>
</Cell>
<Cell :width='12'>
<div v-bg-color:dark1 v-color:white>
<p>@dark1-color</p>
<Cell :width="6">
<div class="bg-dark2-color white-color">
<p>Dark2</p>
</div>
</Cell>
<Cell :width='12'>
<div v-bg-color:dark2 v-color:white>
<p>@dark2-color</p>
<Cell :width="6">
<div class="bg-dark3-color white-color">
<p>Dark3</p>
</div>
</Cell>
<Cell :width='12'>
<div v-bg-color:gray v-color:white>
<p>@gray-color</p>
<Cell :width="6">
<div class="bg-dark4-color white-color">
<p>Dark4</p>
</div>
</Cell>
</Row>

<h3>Background Color</h3>
<Row :space="20" class="color-spans">
<Cell :width="6">
<div class="bg-gray-color">
<p>Gray</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:gray1 v-color:dark>
<p>@gray1-color</p>
<Cell :width="18"><div><p>&nbsp;</p></div></Cell>
<Cell :width="6">
<div class="bg-gray1-color">
<p>Gray1</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:gray2 v-color:dark>
<p>@gray2-color</p>
<Cell :width="6">
<div class="bg-gray2-color">
<p>Gray2</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:gray3 v-color:dark>
<p>@gray3-color</p>
<Cell :width="6">
<div class="bg-gray3-color">
<p>Gray3</p>
</div>
</Cell>
<Cell :width='6'>
<div v-bg-color:gray4 v-color:dark>
<p>@gray4-color</p>
<Cell :width="6">
<div class="bg-gray4-color">
<p>Gray4</p>
</div>
</Cell>
</Row>

<h3>Text</h3>
<h3>Demo</h3>
<div>
<p v-color:dark v-font='18'>Title @dark-color</p>
<p v-color:gray>Subtitle @gray-color</p>
<p v-color:gray1>Description @gray1-color</p>
<p><a href="javascript:;">This is a link, reuse @primary-color</a></p>
<p><span v-color:red>This is an error @red-color</span></p>
<example demo="basic/color"></example>
</div>

</div>
Expand Down
1 change: 0 additions & 1 deletion doc/components_en/guide/themes.vue
View file
Expand Up @@ -93,7 +93,6 @@ export default = {
@gray1-color: #d3d3d3;
@gray2-color: #eeeeee;
@gray3-color: #f3f3f3;
@gray4-color: #f9f9f9;

//hover
@hover-background-color: lighten(@primary-color, 37%);
Expand Down

0 comments on commit d24404f

Please sign in to comment.