Lightning Componentで画面を作る際に、文字の色、背景の色、枠線の色へグレイを指定する際に、あらかじめclassが用意されています。
文字の色
slds-color__text_gray-1 から slds-color__text_gray-12 まで指定できます。
次が表示した時の色合いです。
slds-color__text_gray-1 や slds-color__text_gray-2 ではほぼ白に近いなという印象ですが、背景色に濃色を指定して白抜きで表示する際に使えると思います。
slds-color__text_gray-10 や slds-color__text_gray-11 だと黒より大分薄くてタイトルの文字色で使いやすそうです。
背景の色
slds-color__background_gray-1 から slds-color__background_gray-12 まで指定できます。
次が表示した時の色合いです。
標準画面のヘッダなどでよく使われるグレイは slds-color__background_gray-3 となります。開発した画面でも、標準画面の色と統一感を持たせる時に使うことになると思います。
枠線の色
slds-color__border_gray-1 から slds-color__border_gray-12 まで指定できます。
次が表示した時の色合いです。
標準画面の枠線でよく使われるグレイは slds-color__border_gray-5 だと思います、多分。開発した画面でも、標準画面の色と統一感を持たせる時に使うことになると思います。
最後に
色合いの画像を表示するために用意したLightning Component用のtableタグは下記の通りです。
<table class="slds-table slds-table_bordered" > <tr class="slds-text-title_caps"> <td class="slds-theme_inverse">対象</td> <td class="slds-theme_inverse">classの指定</td> <td class="slds-theme_inverse">画面表示</td> </tr> <tr> <td rowspan="12">文字色</td> <td>slds-color__text_gray-1</td> <td class="slds-color__text_gray-1">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-2</td> <td class="slds-color__text_gray-2">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-3</td> <td class="slds-color__text_gray-3">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-4</td> <td class="slds-color__text_gray-4">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-5</td> <td class="slds-color__text_gray-5">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-6</td> <td class="slds-color__text_gray-6">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-7</td> <td class="slds-color__text_gray-7">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-8</td> <td class="slds-color__text_gray-8">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-9</td> <td class="slds-color__text_gray-9">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-10</td> <td class="slds-color__text_gray-10">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-11</td> <td class="slds-color__text_gray-11">文字色サンプル</td> </tr> <tr> <td>slds-color__text_gray-12</td> <td class="slds-color__text_gray-12">文字色サンプル</td> </tr> <tr class="slds-text-title_caps"> <td class="slds-theme_inverse">対象</td> <td class="slds-theme_inverse">classの指定</td> <td class="slds-theme_inverse">画面表示</td> </tr> <tr> <td rowspan="12">背景色</td> <td>slds-color__background_gray-1</td> <td class="slds-color__background_gray-1">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-2</td> <td class="slds-color__background_gray-2">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-3</td> <td class="slds-color__background_gray-3">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-4</td> <td class="slds-color__background_gray-4">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-5</td> <td class="slds-color__background_gray-5">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-6</td> <td class="slds-color__background_gray-6">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-7</td> <td class="slds-color__background_gray-7">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-8</td> <td class="slds-color__background_gray-8">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-9</td> <td class="slds-color__background_gray-9">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-10</td> <td class="slds-color__background_gray-10">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-11</td> <td class="slds-color__background_gray-11">背景色サンプル</td> </tr> <tr> <td>slds-color__background_gray-12</td> <td class="slds-color__background_gray-12">背景色サンプル</td> </tr> <tr class="slds-text-title_caps"> <td class="slds-theme_inverse">対象</td> <td class="slds-theme_inverse">classの指定</td> <td class="slds-theme_inverse">画面表示</td> </tr> <tr> <td rowspan="12">枠線</td> <td>slds-color__border_gray-1</td> <td><div class="slds-color__border_gray-1" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-2</td> <td><div class="slds-color__border_gray-2" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-3</td> <td><div class="slds-color__border_gray-3" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-4</td> <td><div class="slds-color__border_gray-4" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-5</td> <td><div class="slds-color__border_gray-5" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-6</td> <td><div class="slds-color__border_gray-6" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-7</td> <td><div class="slds-color__border_gray-7" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-8</td> <td><div class="slds-color__border_gray-8" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-9</td> <td><div class="slds-color__border_gray-9" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-10</td> <td><div class="slds-color__border_gray-10" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-11</td> <td><div class="slds-color__border_gray-11" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> <tr> <td>slds-color__border_gray-12</td> <td><div class="slds-color__border_gray-12" style="border-style:solid; border-width:1px;">枠線サンプル</div></td> </tr> </table>