-
Notifications
You must be signed in to change notification settings - Fork 8
/
ColorUsage.vue
162 lines (154 loc) · 4.04 KB
/
ColorUsage.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<template>
<div>
<h2>Color Usage</h2>
<h3>Meaning</h3>
<ul>
<li>
<b>Primary Blue:</b> A primary color/brand color, which delivers brand
value.
</li>
<li><b>Green:</b> Success or progress, which gives positive feedback.</li>
<li><b>Red:</b> signals attention or danger.</li>
<li><b>Darkgray:</b> neutral color.</li>
<li><b>Lightgray:</b> neutral color.</li>
</ul>
<h3>Dark text on light background</h3>
<div class="example-wrapper">
<div class="example-content light">
<div style="color: #3d3d3d">Default text <code>Darkgray-500</code></div>
<div style="color: #575757">
Secondary text <code>Darkgray-400</code>
</div>
<div style="color: #8a8a8a">
Disabled / hint text <code>Darkgray-300</code>
</div>
</div>
</div>
<p>
Depends on text meaning and hierarchy, there are three different types:
</p>
<ul>
<li><b>Default text</b> should be <code>Darkgray-500</code>.</li>
<li>
<b>Secondary text, which is lower in the visual hierarchy,</b> uses
<code>Darkgray-400</code>.
</li>
<li><b>Disabled / hint text</b> should be <code>Darkgray-300</code>.</li>
</ul>
<h3>Light text on dark background</h3>
<div class="example-wrapper">
<div class="example-content dark">
<div style="color: #f8f8f8">
Default text <code>Lightgray-300</code>
</div>
<div style="color: #dbdbdb">
Secondary text <code>Lightgray-400</code>
</div>
<div style="color: #a8a8a8">
Disabled / hint text <code>Lightgray-500</code>
</div>
</div>
</div>
<p>Similar to light text, there are three different types:</p>
<ul>
<li><b>Default text</b> should be <code>Lightgray-300</code>.</li>
<li><b>Secondary text</b> uses <code>Lightgray-400</code>.</li>
<li><b>Disabled / hint text</b> should be <code>Lightgray-500</code>.</li>
</ul>
<h3>Light text on color background</h3>
<div class="example-wrapper">
<div class="example-content color">
<div style="color: #ffffff">
Default text <code>White, Opacity: 100%</code>
</div>
<div style="color: #ffffff; opacity: 0.68">
Secondary text <code>White, Opacity: 68%</code>
</div>
<div style="color: #ffffff; opacity: 0.46">
Disabled / hint text <code>White, Opacity: 46%</code>
</div>
</div>
</div>
<p>Same as light text, there are three different types:</p>
<ul>
<li>
<b>Default text</b> should be
<code>white color with opacity 100%</code>.
</li>
<li>
<b>Secondary text</b> uses <code>white color with opacity 68%</code>.
</li>
<li>
<b>Disabled / hint text</b> should be
<code>white color with opacity 46%</code>.
</li>
</ul>
<h3>Icon color</h3>
<div class="example-wrapper">
<div class="example-content icon">
<div style="background: #f8f8f8">
<i class="yoco" style="color: #8a8a8a">file</i>
<span> file_name.pdf</span>
</div>
<div style="color: #fff; background: #2c66c4">
<i class="yoco">announce</i> <span> Announce new icons.</span>
</div>
<div style="color: #2c66c4">
<i class="yoco">print</i> <span> Print invoice.</span>
</div>
</div>
</div>
<p>
Depends on the meaning and visual hierarchy, icon should match the
following rules:
</p>
<ul>
<li>
<b>If icon is supplementary to default text:</b> Icon color should be
<code>Darkgray-300</code>.
</li>
<li>
<b>If icon has color background:</b> Icon color is <code>White</code>.
</li>
<li>
<b>If text has color or status:</b> Icon color should math to its text.
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'ColorUsage',
}
</script>
<style lang="scss" scoped>
.example-wrapper {
padding: 2rem 0;
margin-bottom: 1rem;
background: #f8f8f8;
}
.example-content {
width: 90%;
max-width: 480px;
padding: 0.8rem;
margin: 0 auto;
div {
padding: 0.8rem;
}
&.light {
background: #fff;
border: 1px solid #dbdbdb;
}
&.color {
background: #2c66c4;
}
&.dark {
background: #3d3d3d;
}
&.icon {
padding: 0;
background: #fff;
border: 1px #dbdbdb solid;
}
}
</style>