コアスタイル、色、バリアント、および代替カラーパレット

コアスタイル、バリアント、代替カラーパレットを構成することで、さまざまなユーザーに合わせて ネクストエクスペリエンス UI のルックアンドフィールをカスタマイズできます。

テーマビルダーのコアスタイル

コアスタイルは、スタイルの基本バージョンです。コアスタイルには、色、形と形、タイポグラフ、画像が含まれます。

テーマビルダーの色

コンポーネントを編集するときに、カラーピッカーを使用してキャンバスの背景色を変更し、コンポーネントの色がさまざまな背景でどのようにレンダリングされるかを表示します。

注:

キャンバスの色を更新しても、インスタンスには適用されません。編集したテーマをインスタンスに公開すると、コンポーネントに固有のフックのみがインスタンスに適用されます。

テーマの色を編集するときに、カラーピッカーでコントラスト比を表示できます。パレットビューまたは [マイカラー] ビューから色を変更すると、値が更新されます。

テーマビルダーのバリアント/代替カラーパレット

バリアントと代替カラーパレットはどちらも、バリアントに分類される UX スタイルレコードのタイプです。

バリアントは既存のテーマの代替バージョンであり、通常はアクセシビリティ用に設計されており、ユーザーが設定で選択できます。バリアントの例として、 ネクストエクスペリエンス に付属するデフォルトの Polaris テーマのダークバージョンがあります。ダークバリアントを使用すると、明るい背景を暗い背景に置き換え、それに応じてテキストの色を対比させることで、視覚障害のあるユーザーのアクセシビリティを向上させることができます。

代替カラーパレットは、テーマの色を変更できるもので、外観を目的として設計されています。このパレットは、デフォルトの Polaris テーマを除く任意のテーマの [ テーマビルダー マネージャー] ページで定義できます。既存のテーマを使用して代替カラーパレットを作成すると、代替カラーパレットはそのプライマリテーマとグループ化され、最初はそのロゴ、色、タイポグラフ、および形状スタイルを共有します。最初は、プライマリテーマとの唯一の違いは、一意の名前を付けることです。

次に、代替カラーパレットのプライマリ色を定義します。この色は、ナビゲーションバー、メニュー、およびその他の一般的なコンポーネントを識別するために使用されます。同様に、必要に応じてセカンダリ色 , を定義します。インターフェイスでセカンダリ色が必要ない場合は、プライマリ色が使用されます。最後に、中間色を定義して、分割線とコンテナーを定義します。ベースパレットには、ライトとダークの 2 種類があります。

注:

セカンダリ色と中間色は、ダーク代替カラーパレットでは編集できません。

選択した色を使用してパレットが作成されたら、名前を変更できます。また、次のこともできます で利用可能なすべての UI 資産をプレビュー Now Platform インスタンスに適用したときにどのようにレンダリングされるかを可視化する.

注:

ダークバリアントは、以前は UI16 と呼ばれていたコア UIには適用されません。コア UIは、ネクストエクスペリエンスが非アクティブの場合に使用するインターフェイスです。ただし、暗いバリアントはほとんどの側面 の ネクストエクスペリエンスにまで及びます。