配色ルール

Taskwareで使用する色と、それに関する基本ルールです。

使用する色について

TWV2で使用する色は、RGBとCMYKを組み合わせた有彩色12種と無彩色3種の計15種類の色に分かれています。
更にこれらの色を軸として、明暗や色合いを調整した8階層にそれぞれ分けられています。

これらをTWV2で使用できる色とし、ベースカラーと呼びます。そしてこれらベースカラーを目的に応じて割り当てたものをシステムカラーと呼びます。システムカラーには何かしらのベースカラーが登録されており、目的に沿って共通のclass名称を指定をしておくことで一括で変更することができます。

指定する配色がベースカラーとシステムカラーそれぞれ同色の場合は、システムカラーを設定しておくのを推奨しています。

カラーパレット

ルール上で使用することのできるカラーパレットです。下記の配色以外を使用する場合は、直書きするかvisual.css、あるいはcustom.cssに記述して使用してください。

Color

16進数 (R,G,B,A)

shine

bright

light

clear

dim

dark

overlay

o20pe

Red

#fa5c7c (250,92,124)

#fff7f8

#fedee5

#fdc6d1

#fdaebe

#c84a63

#96374a

#f9455d

alpha20%

Orange

#fd7e14

#fff8f3

#ffe5d0

#fed2ad

#febf8a

#ca6510

#984c0c

#fc5e0f

alpha20%

Yellow

#ffbc00

#fffcf2

#fff2cc

#ffe8a6

#ffde80

#cc9600

#997100

#ffab00

alpha20%

Lime

#0acf97

#f3fdfa

#cef5ea

#a9eedb

#85e7cb

#08a679

#067c5b

#07c37d

alpha20%

Green

#06f679

#f2fff8

#cdfde4

#a8fcd0

#83fbbc

#05c561

#049449

#04f45b

alpha20%

Teal

#02a8b5

#f2fbfb

#cceef0

#a7e1e5

#81d4da

#028691

#01656d

#0192a2

alpha20%

Cyan

#39afd1

#f5fbfd

#d7eff6

#bae3ef

#9cd7e8

#2e8ca7

#22697d

#2b9bc5

alpha20%

Blue

#2c8ef8

#f4f9ff

#d5e8fe

#b5d8fd

#96c7fc

#2372c6

#1a5595

#2172f6

alpha20%

Indigo

#727cf5

#f8f8fe

#e3e5fd

#ced1fc

#b9befa

#5b63c4

#444a93

#555df2

alpha20%

Purple

#6b5eae

#f7f7fb

#e1dfef

#cbc7e3

#b5afd7

#564b8b

#403868

#50469a

alpha20%

Pink

#e59cd3

#fefafd

#faebf6

#f6dcf0

#f2cee9

#b77da9

#895e7f

#de83c8

alpha20%

Magenta

#ff679b

#fff7fa

#ffe1eb

#ffcadc

#ffb3cd

#cc527c

#993e5d

#ff4d82

alpha20%

Gray

#ff679b

#fafafb

#eaedef

#dbe0e2

#ccd3d6

#7a858a

#5b6468

#7e9098

alpha20%

有彩色について

ベースとなる有彩色はredorangeyellowlimegreentealcyanblueindigopurplepinkmagentaの12種に分けらており、さらにそれらベースカラーの明度や色合いを調整したshinebrightlightcleardimdarkoverlayopacityの8段階に分けられます。

無彩色について

無彩色には、白色・黒色・灰色の3種類があり、RGBで出力した際に極端な色に値する白（255, 255, 255）と黒（0, 0, 0）、そして。灰色に関しては、有彩色と同様に8階層の色分けが施されています。また旧環境で用いていた無彩色（白と黒）の配色を引き継いだ、baseという値が存在します。ベースカラーの明度や色合いを調整したshinebrightlightcleardimdarkoverlayopacityの8段階に分けられます。

shine	ベースカラーに、whiteを95%混ぜた色。
bright	ベースカラーに、whiteを80%混ぜた色。
light	ベースカラーに、whiteを65%混ぜた色。
clear	ベースカラーに、whiteを60%混ぜた色。
dim	ベースカラーに、blackを20%混ぜた色。
dark	ベースカラーに、blackを40%混ぜた色。
overlay	ベースカラーに、blackを25%混ぜ、かつオーバーレイ効果を施したもの。
opacity	透過20%を施したもの。

ベースカラーとシステムカラー

ベースカラーとシステムカラーとして使用でき、変数に置き換えた値によって、CSSとして使用する際にいつでも使用することができます。
ベースカラーの他、システムカラーとして設けており、作成する際のコンセプトに沿った配色を割り当てるルールを設けています。

システムカラーを用いることで、登録ボタンやキャンセルボタンといった、ボタンの目的に応じたラベリングすることで、一括で配色を変更することができます。

do	実行や確認など、アクションを行うことでシステムの目的に沿って進む。
dont	削除など、アクションを行うことで既存のデータを消す。
caution	注意事項やアラートといった、アクションを実行する際の注意喚起を示すもの。
info	案内関連
trigger	検索といった、メインのアクションを行う目的に対して、補佐的な役割を担う要素に与えるもの。

パーツのオプションとして指定できるカラーは、システムカラーに限ります。ベースカラーによって設定する場合は、common.css から使用してください。