入力説明の色変数のサポート

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：4分

    • 色変数を使用して、モバイル入力の説明のテーマを変更する方法について説明します。

    入力の [説明 ] フィールドで色変数を使用して、テキストの色を制御します。

    [説明] フィールドが HTML として設定されている場合、入力の [説明] フィールドで色変数を使用してテキストの色を制御します。

    たとえば、 #FF0000 のような色の 16 進値に加えて、 --now-color-primary-0 などの色変数を使用できます。使用可能な変数のリストについては、「 モバイルのカラーテーマに関する考慮事項」を参照してください。

    入力の詳細については、「 入力フォーム画面を構成する」を参照してください。

    		 入力の説明で使用される色変数

    説明入力カラーガイド

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

    アラートカラーパレット
    アラートカラーパレットの色は、重要なステータス、状況、およびタスクを強調表示します。アラートの色は、装飾や整理ではなく、特定の意味を伝えるために使用します。
    グループ化されたカラーパレット
    グループ化されたカラーパレットの色は、業界の色の規則に従います。これらの色を使用して、色分けされたアイテムが特定の業界または LOB (基幹業務) に関連付けられていることを示します。各色の意味はコンテキストによって異なりますが、アプリ内で一貫性を保つ必要があります。
    表 : 1. アラートカラーパレット
    色名 例 カラー変数
    重要 重大アラートのカラースキーム
    モバイル変数
    alert--critical-0
    Web 変数
    --now-color_alert--critical-0
    高 高アラートのカラースキーム
    モバイル変数
    alert--high-0
    Web 変数
    --now-color_alert--high-0
    警告 警告アラートのカラースキーム
    モバイル変数
    alert--warning-0
    Web 変数
    --now-color_alert--warning-0
    中 中アラートのカラースキーム
    モバイル変数
    alert--moderate-0
    Web 変数
    --now-color_alert--moderate-0
    情報 情報アラートのカラースキーム
    モバイル変数
    alert--info-0
    Web 変数
    --now-color_alert--info-0
    ポジティブ 正のアラートのカラースキーム
    モバイル変数
    alert--positive-0
    Web 変数
    --now-color_alert--positive-0
    低 低アラートのカラースキーム
    モバイル変数
    alert--low-0
    Web 変数
    --now-color_alert--low-0
    無効 無効なアラートのカラースキーム
    モバイル変数
    alert-disabled-background
    Web 変数
    --now-color_background--secondary
    重大 (代替) 重大アラートの代替カラースキーム
    モバイル変数
    alert--critical-4
    Web 変数
    --now-color_alert--critical-4
    高 (代替) 高アラートのカラースキームの代替
    モバイル変数
    alert--high-4
    Web 変数
    --now-color_alert--high-4
    警告 (代替) 警告アラートのカラースキームの代替
    モバイル変数
    alert--warning-4
    Web 変数
    --now-color_alert--warning-4
    中 (代替) 中程度のアラートのカラースキームの代替
    モバイル変数
    alert--moderate-4
    Web 変数
    --now-color_alert--moderate-4
    情報 (代替) 情報アラートのカラースキーム代替
    モバイル変数
    alert--info-4
    Web 変数
    --now-color_alert--info-4
    ポジティブ (代替) 正のアラートカラースキームの代替
    モバイル変数
    alert--positive-4
    Web 変数
    --now-color_alert--positive-4
    低 (代替) 低アラートのカラースキームの代替
    モバイル変数
    alert--low-4
    Web 変数
    --now-color_alert--low-4
    無効 (代替) 無効なアラートカラースキームの代替
    モバイル変数
    alert-disabled-text
    Web 変数
    --now-color_text--tertiary
    表 : 2. グループ化されたカラーパレット
    色名 例 カラーオプション
    青 青色のグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--blue-0
    茶色 茶色のグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--brown-0
    グレイ グレーのグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--gray-0
    緑 緑色のグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--green-0
    緑黄 緑黄のグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--green-yellow-0
    マゼンタ マゼンタのグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--magenta-0
    オレンジ オレンジ色のグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--orange-0
    ピンク ピンクのグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--pink-0
    紫 紫のグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--purple-0
    青緑 青緑でグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--teal-0
    黄 黄色のグループ化されたカラースキーム
    Web 変数
    --now-color_grouped--yellow-0
    青 (代替) 青色のグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--blue-4
    茶色 (代替) 茶色のグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--brown-4
    グレー (代替) グレーのグループ化された配色 (代替)
    Web 変数
    --now-color_grouped--gray-4
    緑 (代替) 緑のグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--green-4
    緑黄 (代替) 緑黄のグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--green-yellow-4
    マゼンタ (代替) マゼンタのグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--マゼンタ-4
    オレンジ (代替) オレンジ色のグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--orange-4
    ピンク (代替) ピンクのグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--pink-4
    紫 (代替) 紫でグループ化された代替カラースキーム
    Web 変数
    --now-color_grouped--purple-4
    青緑 (代替) 青緑でグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--teal-4
    黄 (代替) 黄色のグループ化されたカラースキームの代替
    Web 変数
    --now-color_grouped--yellow-4