Introduction to USS built-in variables

USS built-in variables specify default values for Editor and runtime UI. You can use these variables in your own USS to match your custom interfaces with Unity style.

The name of each built-in variable indicates how and where the variable is used. A variable name consists of one or more parts, separated by hyphens. Each part consists of one or more words separated by underscores.

--unity-{group}-{role_and_control}-{sub_element}-{pseudo_state_sequence}

Each part of the name shows the types of USS rules that use the variable.

Group: The kind of data the variable represents.
Role/Control: A conceptual grouping for the elements the variable affects.
Sub-Element: An element or control the variable affects.
Pseudo States: Lists the states Unity uses the variable for.

例えば、変数名は以下のようになります。

--unity-colors-button-text-hover

Unity が変数をどのように使用するかについては、以下の通りです。

	Value	意味
Group	`colors`	Represents color data.
Role/Control	`button`	Affects buttons.
Sub-Element	`text`	Affects text. Its `group` is `colors`, so it affects text color.
Pseudo-States	`hover`	Applies to elements when the mouse pointer hovers over them.

This USS built-in variable changes the color of button text when a user hovers over the button.

Group

The group specifies what kind of data the variable represents. Each group has several possible sub-elements.

The variable names have the following groups:

Group	用途
`colors`	`background-color` や `border-color` などの色のプロパティ。
`metrics`	寸法や形状を制御するプロパティ。例えば、 `border-radius`、`border-width`、`margin`、`padding`
`icons`	標準的な Unity のアイコン画像。

Role and Control

Role and Control (ロールとコントロール) は、概念的に要素をグループ化する 2 つの方法です。

Role refers to a group of elements that have the same purpose, regardless of what type each element is. For example, the error role includes all elements that display error messages to users.
Control refers to a group of elements of the same type, regardless of what they do. For example, buttons includes all buttons in the Editor.

Each variable has either a role or a control.

The variable names have the following roles and controls:

役割

Role	説明
`default`	文字色、背景、余白などのデフォルトのスタイル設定。
`alternated_rows`	表形式のデータを交互に行の色を変えて表示する要素。例えば、リストビューのリストアイテムなど。
`error`	エラーの状態をユーザーに伝えるための要素。
`highlight`	UI のハイライト部分。例えば、テキストの選択部分や、ツリービューでの選択項目など。
`link`	UI のパーツ (通常はテキスト) でクリックできるリンク。これは、クリックされていない状態です。
`play_mode`	エディターが再生モードのときに表示される要素。
`visited_link`	UI のパーツ (通常はテキスト) でクリックできるリンク。これは、クリックされていない状態です。
`warning`	ユーザーに警告メッセージを伝えるための要素。

Controls

制御	説明
`app_toolbar`	Unity のメインツールバー
`app_toolbar_button`	Unity のメインツールバーのボタン
`box`	Editor UI で要素をグループ化するためのボックス
`button`	ツールバーを除く UI のボタン
`dropdown`	ドロップダウンリストやメニュー
`helpbox`	ヘルプ情報を表示するボックス
`input_field`	テキストや数値を入力するフィールド
`label`	エディター UI のテキストラベル
`object_field`	オブジェクトの値に使用されるフィールド。例えば、ゲームオブジェクトやアセットのプロパティ値など。
`popup`	ポップアップメニューなどのポップアップコントロール
`preview`	プレビューを表示するためのビュー。例えば、メッシュやテクスチャなどのアセットのプレビューを表示します。
`scrollbar_groove`	ユーザーがスクロールバーのつまみをドラッグするスクロールバーの背景要素
`scrollbar_thumb`	スクロールバーのドラッグ可能なハンドル要素
`slider_groove`	ユーザーがスライダーのつまみをドラッグする際のスライダーの背景要素
`slider_thumb`	スライダーのドラッグ可能なハンドル要素
`slider_thumb_halo`	ユーザーがスライダーのサムをドラッグしたときに、サムの周囲に表示されるオーバーレイ
`tab`	タブコントロールのタブアイテム
`toolbar`	Unity のメインツールバー (`app_toolbar`) 以外のエディターツールバー
`toolbar_button`	エディターツールバーのボタン
`window`	エディターウィンドウ

Sub-Element

The sub-element is the part of an element that the variable affects. Together with a variable’s group, the sub-element shows what kind of data the variable represents.

例えば、変数名に colors グループと text サブ要素が付いている場合です。これは、Unity がテキストの色に影響を与えるスタイルでその変数を使用することを意味します。

The variable names have the following sub-elements:

Group	Sub-element	説明
`colors`
	`background`	要素の背景色
	`border`	要素の境界色
	`border_accent`	要素の内側の境界線の色を表します。たとえば、Inspector ウィンドウには、ツートンカラーの境界線があります。
	`text`	テキストを表示する要素の文字色
`metrics`
	`margin_{left, top, right, bottom}`	要素のマージン値
	`padding_{left, top, right, bottom}`	要素のパディング値
	`border_{left, top, right, bottom}_width`	要素のボーダー幅の値
	`border_{left_top, left_bottom, right_top, right_bottom}_radius`	要素の境界線の半径値
	`width, height`	要素の幅と高さの値

Pseudo-States

Pseudo-State (疑似状態) シーケンスは、Unity が変数を使用する UI 状態のリストです。

例えば、変数名に hover という疑似状態が付いている場合です。これは、ユーザーが要素にポインターを重ねるときに要素に影響を与えるスタイルの変数を Unity が使用するという意味です。

例えば、--unity-colors-toolbar_button-text-hover

一つの変数名に複数の疑似状態を持たせることができます。複数の疑似状態は、アンダースコア _ で区切られたアルファベット順に表示されます。

例えば、 --unity-colors-toolbar_button-text-focus_selected

Unity の変数名には、以下の疑似状態のすべての組み合わせが可能です。

Pseudo-state	説明
(なし)	通常の状態
`checked`	チェックボックスタイプのコントロールがオンです。
`disabled`	コントロールがオフです。
`focus`	コントロールにフォーカスがあります。
`hover`	ユーザーがコントロールにカーソルを重ねています。
`inactive`	A control doesn’t have focus
`pressed`	コントロールが押されました。
`selected`	コントロールが選択されました。

その他の参考資料

Create USS variables

USS built-in variable references