アイコン UI セクションの色変数のサポート

色変数を使用してモバイルアイコン UI セクションのテーマを変更する方法について説明します。

アイコン UI セクションには、要素の前景色と背景色を制御する 2 つのフィールドがある [ 色 ] セクションがあります。 背景色 変数 フォアグラウンド色変数 これらの 2 つのフィールドは、次のテーブルにあります。 アイコンセクション宛先ランチャー [sys_sg_navigation_section_destination_applet_launcher] アイコンセクション宛先機能 [sys_sg_navigation_section_destination_button] アイコンセクション宛先画面 [sys_sg_navigation_section_destination_screen] これらのアクションの作成の詳細については、「 アイコン UI セクションの構成」を参照してください。 UX テーマプロパティ [sys_ux_theme_property] テーブルから任意の色変数を定義できます。使用可能な変数のリストについては、以下のカラーデザインガイドを参照してください。

モバイルアイコン UI セクションカラーガイド

色変数は次のように分類されます。 設計ガイドラインを使用して、ユースケースに適した色変数を特定します。

アラートカラーパレット

アラートカラーパレットの色は、重要なステータス、状況、およびタスクを強調表示します。アラートの色は、装飾や整理ではなく、特定の意味を伝えるために使用します。

グループ化されたカラーパレット

グループ化されたカラーパレットの色は、業界の色の規則に従います。これらの色を使用して、色分けされたアイテムが特定の業界または LOB (基幹業務) に関連付けられていることを示します。各色の意味はコンテキストによって異なりますが、アプリ内で一貫性を保つ必要があります。

アラートカラーパレット

色名	色	例	カラーオプション
プライマリ			モバイル変数 primary Web 変数 --now-color--primary-1
重要			モバイル変数 alert--critical-2 Web 変数 --now-color_alert--critical-2
高			モバイル変数 alert--high-2 Web 変数 --now-color_alert--high-2
警告			モバイル変数 alert--warning-2 Web 変数 --now-color_alert--warning-2
中			モバイル変数 alert--moderate-2 Web 変数 --now-color_alert--moderate-2
情報			モバイル変数 alert--info-2 Web 変数 --now-color_alert--info-2
ポジティブ			モバイル変数 alert--positive-2 Web 変数 --now-color_alert--positive-2
低			モバイル変数 alert--low-2 Web 変数 --now-color_alert--low-2

グループ化されたカラーパレット

色名	色	例	カラーオプション
青			Web 変数 --now-color_grouped--blue-2
茶色			Web 変数 --now-color_grouped--brown-2
グレイ			Web 変数 --now-color_grouped--gray-2
緑			Web 変数 --now-color_grouped--green-2
緑黄			Web 変数 --now-color_grouped--green-yellow-2
マゼンタ			Web 変数 --now-color_grouped--マゼンタ-2
オレンジ			Web 変数 --now-color_grouped--orange-2
ピンク			Web 変数 --now-color_grouped--pink-2
紫			Web 変数 --now-color_grouped--purple-2
青緑			Web 変数 --now-color_grouped--teal-2
黄			Web 変数 --now-color_grouped--yellow-2