Box UI Elementsのテーマとスタイルの設定

Box UI Elementsのテーマとスタイルの設定により、企業の要件に合わせて、埋め込まれたBoxコンポーネントの外観をカスタマイズできます。

開始方法

選択したBoxコンポーネントをアプリケーションに追加します。デフォルトのBoxのテーマが適用されます。

カスタマイズ

Boxでは、カスタマイズの目的でデザイントークンを使用します。

埋め込まれたBoxコンポーネントでは、以下の要素を変更できます。

色

以下をカスタマイズできます。

• グローバルカラーパレット - プライマリカラー、セカンダリカラー、アクセントカラーを選択します。

• 状態の色 - カーソルを合わせたとき、フォーカスしたとき、アクティブな場合、無効な場合など、状態を表す色を選択します。

• コンポーネント固有の色 - たとえば、ボタンには、種類に応じて異なる色を選択できます。

• グラデーション - 背景やその他のコンポーネントとしてグラデーションを選択して調整します。

• 不透明度 - Boxのウィンドウやサイドパネルのオーバーレイ効果の不透明度を調整します。

タイポグラフィ

以下をカスタマイズできます。

• テキストの装飾 - 下線、取り消し線、文字間隔
• 行の高さ、段落の間隔

境界線、半径

以下を選択できます。

• 境界線のスタイル - 幅、スタイル、色
• 角丸

間隔

以下を選択できます。

• 全体的な間隔
• コンポーネント固有の間隔
• コンポーネント固有の位置と分布 (例: justify-content)

影と高さ

以下を定義できます。

• 影のプリセット
• カスタマイズした影

インタラクティブな状態

以下をカスタマイズできます。

• カーソルを合わせた状態、アクティブな状態、フォーカスした状態、無効な状態、エラー状態 - 背景色の変更などの視覚効果
• 遷移およびアニメーション

コンポーネントレベルの上書き

テキスト入力、ドロップダウン、チェックボックスを独自の色でカスタマイズできます。

その他

スタイル:

• ヘルプテキストとラベル
• ツールチップ

デモ