Color
色は、ユーザーが意味や関係性を認知・認識するより先に、知覚してしまう情報です。色を適切に使用すれば情報の優先順位を表現できるほか、サービスのなかで一貫して同じ意味で使用することで認知・認識の補助となり、ユーザー体験の向上につながります。
Inhouseでは、16進数のカラーコードに一貫性のある名前をつけて呼び出しやすくしたPrimitive colorと、そのPrimitive colorを同じ意味で使用できるように用途ごとに名前を割り当てたSemantic colorによる、2種類のデザイントークンがあります。
例えば、単純に青色を使いたいときにサービスで使う色のカラーコードを覚えるのは大変なので、Sassのソースコードでは get-primitive-color($name: blue, $level: 600) と指定します。このように指定することで、色の明度の調整はLevelの数値を変えるだけで対応できるようにもなります。
そのうえで、 get-primitive-color($name: blue, $level: 600) をアクションボタンの配色として使用する場合は、 get-semantic-color($intention: informative, $level: 600) と指定します。このように指定することで、チームで一貫して同じ配色ができます。
Primitive color
このドキュメントでは、InhouseのFlavorのひとつであるPepper flavorを例にPrimitive colorを紹介します。実際には、ブランドごとに配色は異なります。
Pepper flavorでは、カラーパレット Pepper Color で定義している色の値をPrimitive tokenとして扱います。Pepper Colorは、青（Pepper Blue 500）と、黒（Pepper Blue 800）を基準に、この色と調和がとれている色を集めたものです。
Sass function
Syntax
get-primitive-color($name, $level)
Usage
@use '@inhouse/inhouse-components-web' as inhouse;
.example {
color: inhouse.get-primitive-color($name: blue, $level: 600);
}
| Name | Level | Pepper flavor |
|---|---|---|
| black | 1000 | Pepper Black |
| white | 1000 | Pepper White |
| gray | 50 | Pepper Gray 50 |
| 100 | Pepper Gray 100 | |
| 200 | Pepper Gray 200 | |
| 300 | Pepper Gray 300 | |
| 400 | Pepper Gray 400 | |
| 500 | Pepper Gray 500 | |
| 600 | Pepper Gray 600 | |
| 700 | Pepper Gray 700 | |
| 800 | Pepper Gray 800 | |
| 900 | Pepper Gray 900 | |
| blue | 50 | Pepper Blue 50 |
| 100 | Pepper Blue 100 | |
| 200 | Pepper Blue 200 | |
| 300 | Pepper Blue 300 | |
| 400 | Pepper Blue 400 | |
| 500 | Pepper Blue 500 | |
| 600 | Pepper Blue 600 | |
| 700 | Pepper Blue 700 | |
| 800 | Pepper Blue 800 | |
| 900 | Pepper Blue 900 | |
| green | 50 | Pepper Green 50 |
| 100 | Pepper Green 100 | |
| 200 | Pepper Green 200 | |
| 300 | Pepper Green 300 | |
| 400 | Pepper Green 400 | |
| 500 | Pepper Green 500 | |
| 600 | Pepper Green 600 | |
| 700 | Pepper Green 700 | |
| 800 | Pepper Green 800 | |
| 900 | Pepper Green 900 | |
| yellow | 50 | Pepper Yellow 50 |
| 100 | Pepper Yellow 100 | |
| 200 | Pepper Yellow 200 | |
| 300 | Pepper Yellow 300 | |
| 400 | Pepper Yellow 400 | |
| 500 | Pepper Yellow 500 | |
| 600 | Pepper Yellow 600 | |
| 700 | Pepper Yellow 700 | |
| 800 | Pepper Yellow 800 | |
| 900 | Pepper Yellow 900 | |
| red | 50 | Pepper Red 50 |
| 100 | Pepper Red 100 | |
| 200 | Pepper Red 200 | |
| 300 | Pepper Red 300 | |
| 400 | Pepper Red 400 | |
| 500 | Pepper Red 500 | |
| 600 | Pepper Red 600 | |
| 700 | Pepper Red 700 | |
| 800 | Pepper Red 800 | |
| 900 | Pepper Red 900 | |
| orange | 50 | Pepper Orange 50 |
| 100 | Pepper Orange 100 | |
| 200 | Pepper Orange 200 | |
| 300 | Pepper Orange 300 | |
| 400 | Pepper Orange 400 | |
| 500 | Pepper Orange 500 | |
| 600 | Pepper Orange 600 | |
| 700 | Pepper Orange 700 | |
| 800 | Pepper Orange 800 | |
| 900 | Pepper Orange 900 |
Semantic color
Semantic colorは、Informative, Neutral, Positive, Notice, Negative, Attention, Interactive, FavoriteからなるIntentionにそれぞれ配色が定義されています。
ソースコード上では、Sass functionや対応するコンポーネントのModifierにIntentionの名前を指定することで、割り当てられたPrimitive colorの値が返ってきたり、Primitive colorを基調とした配色が適用されます。
Sass function
Syntax
get-semantic-color($intention, $level)
Usage
@use '@inhouse/inhouse-components-web' as inhouse;
.example {
color: inhouse.get-semantic-color($intention: informative, $level: 600);
}
| Intention | Pepper flavor |
|---|---|
| Informative | Pepper Blue |
| Neutral | Pepper Gray |
| Positive | Pepper Green |
| Notice | Pepper Yellow |
| Negative | Pepper Red |
| Attention | Pepper Orange |
| Interactive | Pepper Blue |
| Favorite | Pepper Red |
Overlay color
Overlay colorは、ComponentのStateを表現するために、Overlayさせる色です。 色面に乗せる場合と画像に乗せる場合で色が異なります。
Sass function
色面に乗せるOverlay Colorを取得できます。
Syntax
get-background-overlay-color($brightness, $state)
Usage
@use '@inhouse/inhouse-components-web' as inhouse;
.example {
color: inhouse.get-background-overlay-color($brightness: light, $state: enabled);
}
| Brightness | State | Pepper flavor |
|---|---|---|
| light | enabled | #000000 (00%) |
| hover | #000000 (04%) | |
| focused | #000000 (12%) | |
| selected | #5e8eb8 (08%) | |
| activated | #5e8eb8 (12%) | |
| dragged | #000000 (08%) | |
| dark | enabled | #ffffff (00%) |
| hover | #ffffff (08%) | |
| focused | #ffffff (24%) | |
| selected | #ffffff (16%) | |
| activated | #ffffff (24%) | |
| dragged | #ffffff (16%) |
画像に乗せるOverlay Colorを取得できます。
Syntax
get-image-overlay-color($state)
Usage
@use '@inhouse/inhouse-components-web' as inhouse;
.example {
color: inhouse.get-image-overlay-color($state: enabled);
}
| State | Pepper flavor |
|---|---|
| enabled | #000000 (00%) |
| hover | #000000 (12%) |
| focused | #000000 (36%) |
| selected | #000000 (24%) |
| activated | #000000 (36%) |
| dragged | #000000 (32%) |