現時点では、テーマとスタイルの設定は、コンテンツエクスプローラとコンテンツアップローダーで使用可能です。
開始方法
選択したBoxコンポーネントをアプリケーションに追加します。デフォルトのBoxのテーマが適用されます。カスタマイズ
Boxでは、カスタマイズの目的でデザイントークンを使用します。デザイントークンとは、色、間隔、タイポグラフィ、スケールなど、特定の視覚的な属性を格納する名前付きのエンティティです。これは、プラットフォーム、ツール、コンポーネント間でのデザインプロパティの共有を容易にするために、ハードコードされた値の代わりに使用されます。
色
以下をカスタマイズできます。- グローバルカラーパレット - プライマリカラー、セカンダリカラー、アクセントカラーを選択します。
- 状態の色 - カーソルを合わせたとき、フォーカスしたとき、アクティブな場合、無効な場合など、状態を表す色を選択します。
- コンポーネント固有の色 - たとえば、ボタンには、種類に応じて異なる色を選択できます。
- グラデーション - 背景やその他のコンポーネントとしてグラデーションを選択して調整します。
- 不透明度 - Boxのウィンドウやサイドパネルのオーバーレイ効果の不透明度を調整します。
タイポグラフィ
以下をカスタマイズできます。- テキストの装飾 - 下線、取り消し線、文字間隔
- 行の高さ、段落の間隔
境界線、半径
以下を選択できます。- 境界線のスタイル - 幅、スタイル、色
- 角丸
間隔
以下を選択できます。- 全体的な間隔
- コンポーネント固有の間隔
- コンポーネント固有の位置と分布 (例: justify-content)
影と高さ
以下を定義できます。- 影のプリセット
- カスタマイズした影
インタラクティブな状態
以下をカスタマイズできます。- カーソルを合わせた状態、アクティブな状態、フォーカスした状態、無効な状態、エラー状態 - 背景色の変更などの視覚効果
- 遷移およびアニメーション
コンポーネントレベルの上書き
テキスト入力、ドロップダウン、チェックボックスを独自の色でカスタマイズできます。アイコン
ボタンやドロップダウンなどのインタラクティブなアイコンのスタイルを設定します。ファイルアイコンやフォルダアイコンなどの非インタラクティブなアイコンをカスタムアイコンに置き換えるには、CSSでインラインSVGを使用します。非インタラクティブなアイコンの色、高さ、幅を変更するには、CSSを使用します。
その他
スタイル:- ヘルプテキストとラベル
- ツールチップ