Box Developerドキュメント
ログイン

UI Elementsのデザイントークン

ガイド Boxの埋め込み UI Element UI Elementsのデザイントークン

必須のガイド

UI Elementsのデザイントークン

テーマとスタイルの設定のために使用できるすべてのデザイントークンを表に示します。実装のためのわかりやすい指針となる、デフォルト値と説明も記載されています。

トークンの構造

コンテンツエクスプローラでテーマオブジェクトにトークンを指定する方法として、トークンのフルネームを使用したフラットな構造と、短縮した名前を使用した入れ子構造の2つがあります。後者を使用すると、トークンをグループ化できるため、カスタマイズがわかりやすくなりますが、どちらも結果は同じです。

例

フラットな構造:

const theme = {
    tokens: {
        "body-default-font-size": "14px",
        "body-default-font-weight": "400"
        "body-default-text-decoration": "none",
        "body-default-bold-line-height": "20px",
    }
};

入れ子構造:

const theme = {
    tokens: {
        Body: {
            Default: {
                "font-size": "14px",
                "font-weight": "400",
                "text-decoration": "none",
            }
            "Default Bold": {
                "line-height": "20px",
            }
        }
    }
};

境界線の色

16進カラー、RGB、特定のブラウザに依存しないカラー名など、任意のCSSカラー値を渡すことができます。

トークンデフォルト値説明
border-checkbox-border#6f6f6fチェックボックスのデフォルトの境界線の色。
border-checkbox-border-hover#4e4e4eチェックボックスにカーソルを合わせたときの境界線の色。
border-checkbox-border-selected#0061d5オンにしたチェックボックスの境界線の色。
border-checkbox-border-selected-hover#2079e3オンにしたチェックボックスにカーソルを合わせたときの境界線の色。
border-cta-border-outline#000000背景が透明のセカンダリボタンの境界線。
border-cta-border-outline-disabled#646464無効なアウトラインボタンの境界線。
border-cta-border-outline-hover#000000カーソルを合わせたときのアウトラインボタンの境界線。
border-cta-border-outline-pressed#000000押したときのアウトラインボタンの境界線。
border-cta-border-secondary#bcbcbcセカンダリボタンの境界線。
border-cta-border-secondary-disabled#e8e8e8無効なセカンダリボタンの境界線。
border-cta-border-secondary-hover#bcbcbcカーソルを合わせたときのセカンダリボタンの境界線。
border-cta-border-secondary-pressed#bcbcbc押したときのセカンダリボタンの境界線。
border-divider-border#e8e8e8水平方向の行区切り記号。
border-dropdown-border#bcbcbcドロップダウンメニューの境界線。
border-gridthumbnail-border#e8e8e8グリッドビューにおける項目 (ファイル/フォルダ) のサムネイルの境界線。
border-input-border#909090テキスト入力の境界線。
border-input-border-error#ed3757エラーが発生しているテキスト入力の境界線。
border-input-border-focus#2486fcフォーカスされたテキスト入力の境界線。
border-input-border-hover#6f6f6fカーソルを合わせたときのテキスト入力の境界線。
border-search-border#f4f4f4検索入力の境界線。
border-search-border-hover#6f6f6fカーソルを合わせたときの検索入力の境界線。
border-switch-border#bcbcbc切り替えスイッチの境界線。
border-switch-border-hover#bcbcbcカーソルを合わせたときの切り替えスイッチの境界線。
border-tooltip-border-error#f69babエラーのツールチップの境界線。

アイコンの色

ボタンやドロップダウンなどのインタラクティブなアイコンのスタイルのみを設定できます。

トークンデフォルト値説明
icon-cta-icon#6f6f6fボタンのアイコンのデフォルトの色。
icon-cta-icon-hover#222222カーソルを合わせたときのボタンのアイコンの色。
icon-cta-icon-pressed#222222押したときのボタンのアイコンの色。

アウトラインの色

トークンデフォルト値説明
outline-focus-on-dark#ffffff背景が暗い場合のフォーカスアウトラインの色。
outline-focus-on-light#2486fc背景が明るい場合のフォーカスアウトラインの色。

表面色

トークンデフォルト値説明
surface-checkbox-surface#ffffffチェックボックスの背景色。
surface-checkbox-surface-hover#ffffffカーソルを合わせたときのチェックボックスの背景色。
surface-checkbox-surface-selected#0061d5オンにしたチェックボックスの背景色。
surface-checkbox-surface-selected-hover#2079e3カーソルを合わせたときのオンにしたチェックボックスの背景色。
surface-cta-surface-iconrgba(0, 0, 0, 0)アイコンボタンの背景。
surface-cta-surface-icon-disabledrgba(0, 0, 0, 0)無効なアイコンボタンの背景。
surface-cta-surface-icon-hoverrgba(0, 0, 0, 0.04)カーソルを合わせたときのアイコンボタンの背景。
surface-cta-surface-icon-pressedrgba(0, 0, 0, 0.08)押したときのアイコンボタンの背景。
surface-cta-surface-outlinergba(0, 0, 0, 0)背景が透明のセカンダリボタンの背景。
surface-cta-surface-outline-hoverrgba(0, 0, 0, 0.04)カーソルを合わせたときのアウトラインボタンの背景。
surface-cta-surface-outline-pressedrgba(0, 0, 0, 0.08)押したときのアウトラインボタンの背景。
surface-cta-surface-secondary#ffffffセカンダリボタンの背景。
surface-cta-surface-secondary-hover#f4f4f4カーソルを合わせたときのセカンダリボタンの背景。
surface-cta-surface-secondary-pressed#e8e8e8押したときのセカンダリボタンの背景。
surface-cta-surface-tertiary#ffffffリンク形式のボタンの背景。
surface-cta-surface-tertiary-hover#f4f4f4カーソルを合わせたときのリンク形式のボタンの背景。
surface-cta-surface-tertiary-pressed#e8e8e8押したときのリンク形式のボタンの背景。
surface-dropdown-surface#ffffffドロップダウンメニューの背景。
surface-dropdown-surface-error#ffffffエラーが発生しているドロップダウンメニューの背景。
surface-dropdown-surface-focus#ffffffフォーカスされたドロップダウンメニューの背景。
surface-dropdown-surface-hover#ffffffカーソルを合わせたときのドロップダウンメニューの背景。
surface-illustration-surface-box-neutral#0061d5イラスト (詳細なアイコン) の色。
surface-input-surface#ffffffテキスト入力の背景。
surface-input-surface-error#ffffffエラーが発生しているテキスト入力の背景。
surface-input-surface-focus#ffffffフォーカスされたテキスト入力の背景。
surface-input-surface-hover#ffffffカーソルを合わせたときのテキスト入力の背景。
surface-menu-surface#ffffffドロップダウンメニューオプションの背景。
surface-menu-surface-focus#f4f4f4フォーカスしたメニュー項目の背景。
surface-menu-surface-hover#f4f4f4カーソルを合わせたときのメニュー項目の背景。
surface-search-surface#f4f4f4検索入力の背景。
surface-search-surface-focused#ffffffフォーカスされた検索入力の背景。
surface-search-surface-hover#fbfbfbカーソルを合わせたときの検索入力の背景。
surface-sliderthumb-surface#0061d5範囲スライダのつまみの色。
surface-sliderthumb-surface-hover#2486fcカーソルを合わせたときの範囲スライダのつまみの色。
slidertrack-surface#6f6f6f範囲スライダのトラックの色。
surface-surface#ffffff一般的な背景色。
surface-surface-brand#0061d5プライマリボタンの背景。
surface-surface-brand-disabled#0061d5無効なプライマリボタンの背景。
surface-surface-brand-hover#006ae9カーソルを合わせたときのプライマリボタンの背景。
surface-surface-brand-pressed#004eac押したときのプライマリボタンの背景。
surface-switch-surface#ffffff切り替えスイッチの背景。
surface-switch-surface-off#d3d3d3オフの状態の切り替えスイッチの背景。
surface-switch-surface-on#0061d5オンの状態の切り替えスイッチの背景。
surface-tooltip-surface#4e4e4eツールチップの背景。
surface-tooltip-surface-error#fdebeeエラーのツールチップの背景。

テキストの色

トークンデフォルト値説明
text-cta-link#0061d5ハイパーリンクの色。
text-cta-link-disabled#b2cff2無効なハイパーリンクの色。
text-cta-link-hover#1d6bcaカーソルを合わせたときのハイパーリンクの色。
text-cta-link-pressed#2486fc押したときのハイパーリンクの色。
text-text-error-on-light#d5324e背景が明るい場合のエラーテキストの色。
text-text-on-dark#ffffff背景が暗い場合のテキストの色。
text-text-on-light#222222背景が明るい場合のプライマリテキストの色。
text-text-on-light-secondary#6f6f6f背景が明るい場合のセカンダリテキストの色。
text-text-on-light-secondary-hover#4e4e4eカーソルを合わせたときのセカンダリテキストの色。

タイポグラフィのトークン

表内のコメントは、ルートフォントサイズの16ピクセルに基づいて計算されたピクセル数を示しています。

トークンデフォルト値説明
body-default-font-familyLato, "Helvetica Neue", sans-serif本文テキストのフォントファミリ。
body-default-font-size0.875rem本文テキストのフォントサイズ。
body-default-font-weight400本文テキストのフォントの太さ。
body-default-letter-spacing0.01875rem本文テキストの文字間隔。
body-default-line-height1.25rem本文テキストの行の高さ。
body-default-text-decorationnone本文テキストの装飾。
body-default-bold-font-familyLato, "Helvetica Neue", sans-serif本文テキスト (太字) のフォントファミリ。
body-default-bold-font-size0.875rem本文テキスト (太字) のフォントサイズ。
body-default-bold-font-weight700本文テキスト (太字) のフォントの太さ。
body-default-bold-letter-spacing0.01875rem本文テキスト (太字) の文字間隔。
body-default-bold-line-height1.25rem本文テキスト (太字) の行の高さ。
body-default-bold-text-decorationnone本文テキスト (太字) の装飾。
body-default-semibold-font-familyLato, "Helvetica Neue", sans-serif本文テキスト (半太字) のフォントファミリ。
body-default-semibold-font-size0.875rem本文テキスト (半太字) のフォントサイズ。
body-default-semibold-font-weight600本文テキスト (半太字) のフォントの太さ。
body-default-semibold-letter-spacing0.01875rem本文テキスト (半太字) の文字間隔。
body-default-semibold-line-height1.25rem本文テキスト (半太字) の行の高さ。
body-default-semibold-text-decorationnone本文テキスト (半太字) の装飾。
body-large-font-familyLato, "Helvetica Neue", sans-serif本文テキスト (大) のフォントファミリ。
body-large-font-size1rem本文テキスト (大) のフォントサイズ。
body-large-font-weight400本文テキスト (大) のフォントの太さ。
body-large-letter-spacing0.01875rem本文テキスト (大) の文字間隔。
body-large-line-height1.5rem本文テキスト (大) の行の高さ。
body-large-text-decorationnone本文テキスト (大) の装飾。
body-large-bold-font-familyLato, "Helvetica Neue", sans-serif本文テキスト (大、太字) のフォントファミリ。
body-large-bold-font-size1rem本文テキスト (大、太字) のフォントサイズ。
body-large-bold-font-weight700本文テキスト (大、太字) のフォントの太さ。
body-large-bold-letter-spacing0.01875rem本文テキスト (大、太字) の文字間隔。
body-large-bold-line-height1.5rem本文テキスト (大、太字) の行の高さ。
body-large-bold-text-decorationnone本文テキスト (大、太字) の装飾。
caption-bold-font-familyLato, "Helvetica Neue", sans-serifキャプション (太字) のフォントファミリ。
caption-bold-font-size0.75remキャプション (太字) のフォントサイズ。
caption-bold-font-weight700キャプション (太字) のフォントの太さ。
caption-bold-letter-spacing0.01875remキャプション (太字) の文字間隔。
caption-bold-line-height0.875remキャプション (太字) の行の高さ。
caption-bold-text-decorationnoneキャプション (太字) のテキストの装飾。
caption-default-font-familyLato, "Helvetica Neue", sans-serifキャプションのフォントファミリ。
caption-default-font-size0.75remキャプションのフォントサイズ。
caption-default-font-weight400キャプションのフォントの太さ。
caption-default-letter-spacing0.01875remキャプションの文字間隔。
caption-default-line-height0.875remキャプションの行の高さ。
caption-default-text-decorationnoneキャプションのテキストの装飾。
label-bold-font-familyLato, "Helvetica Neue", sans-serifラベル (太字) のフォントファミリ。
label-bold-font-size0.625remラベル (太字) のフォントサイズ。
label-bold-font-weight700ラベル (太字) のフォントの太さ。
label-bold-letter-spacing0.0375remラベル (太字) の文字間隔。
label-bold-line-height1remラベル (太字) の行の高さ。
label-bold-text-decorationnoneラベル (太字) のテキストの装飾。
label-default-font-familyLato, "Helvetica Neue", sans-serifラベルのフォントファミリ。
label-default-font-size0.625remラベルのフォントサイズ。
label-default-font-weight400ラベルのフォントの太さ。
label-default-letter-spacing0.0375remラベルの文字間隔。
label-default-line-height1remラベルの行の高さ。
label-default-text-decorationnoneラベルのテキストの装飾。
link-default-font-familyLato, "Helvetica Neue", sans-serifハイパーリンクのフォントファミリ。
link-default-font-size0.875remハイパーリンクのフォントサイズ。
link-default-font-weight400ハイパーリンクのフォントの太さ。
link-default-letter-spacing0.01875remハイパーリンクの文字間隔。
link-default-line-height1.25remハイパーリンクの行の高さ。
link-default-text-decorationunderlineハイパーリンクのテキストの装飾。
notification-default-font-familyLato, "Helvetica Neue", sans-serif通知のフォントファミリ。
notification-default-font-size0.5625rem通知のフォントサイズ。
notification-default-font-weight700通知のフォントの太さ。
notification-default-letter-spacing0.01875rem通知の文字間隔。
notification-default-line-height0.75rem通知の行の高さ。
notification-default-text-decorationnone通知のテキストの装飾。
title-large-font-familyLato, "Helvetica Neue", sans-serifタイトル (大) のフォントファミリ。
title-large-font-size1.125remタイトル (大) のフォントサイズ。
title-large-font-weight700タイトル (大) のフォントの太さ。
title-large-letter-spacing0.01875remタイトル (大) の文字間隔。
title-large-line-height1.5remタイトル (大) の行の高さ。
title-large-text-decorationnoneタイトル (大) のテキストの装飾。
title-medium-font-familyLato, "Helvetica Neue", sans-serifタイトル (中) のフォントファミリ。
title-medium-font-size1remタイトル (中) のフォントサイズ。
title-medium-font-weight700タイトル (中) のフォントの太さ。
title-medium-letter-spacing0.01875remタイトル (中) の文字間隔。
title-medium-line-height1.5remタイトル (中) の行の高さ。
title-medium-text-decorationnoneタイトル (中) のテキストの装飾。
title-small-font-familyLato, "Helvetica Neue", sans-serifタイトル (小) のフォントファミリ。
title-small-font-size0.9375remタイトル (小) のフォントサイズ。
title-small-font-weight700タイトル (小) のフォントの太さ。
title-small-letter-spacing0.01875remタイトル (小) の文字間隔。
title-small-line-height1.25remタイトル (小) の行の高さ。
title-small-text-decorationnoneタイトル (小) のテキストの装飾。
title-subtitle-font-familyLato, "Helvetica Neue", sans-serifサブタイトルのフォントファミリ。
title-subtitle-font-size0.875remサブタイトルのフォントサイズ。
title-subtitle-font-weight700サブタイトルのフォントの太さ。
title-subtitle-letter-spacing0.01875remサブタイトルの文字間隔。
title-subtitle-line-height1.25remサブタイトルの行の高さ。
title-subtitle-text-decorationnoneサブタイトルのテキストの装飾。
title-x-large-font-familyLato, "Helvetica Neue", sans-serifタイトル (特大) のフォントファミリ。
title-x-large-font-size1.3125remタイトル (特大) のフォントサイズ。
title-x-large-font-weight700タイトル (特大) のフォントの太さ。
title-x-large-letter-spacing0.01875remタイトル (特大) の文字間隔。
title-x-large-line-height2remタイトル (特大) の行の高さ。
title-x-large-text-decorationnoneタイトル (特大) のテキストの装飾。

間隔、サイズ、形状のトークン

表内のコメントは、ルートフォントサイズの16ピクセルに基づいて計算されたピクセル数を示しています。

トークンデフォルト値説明
border-10.0625rem境界線の幅 (1ピクセルに相当)。
border-20.125rem境界線の幅 (2ピクセルに相当)。
border-30.1875rem境界線の幅 (3ピクセルに相当)。
border-40.25rem境界線の幅 (4ピクセルに相当)。
border-60.375rem境界線の幅 (6ピクセルに相当)。
border-80.5rem境界線の幅 (8ピクセルに相当)。
dropshadow-10 0 0.5rem 0 rgba(0, 0, 0, 0.05)微妙なシャドウ効果。
dropshadow-20 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1)中程度のシャドウ効果。
dropshadow-30 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.1)顕著なシャドウ効果。
radius-050.125rem境界線の半径 (2ピクセルに相当)。
radius-10.25rem境界線の半径 (4ピクセルに相当)。
radius-20.375rem境界線の半径 (6ピクセルに相当)。
radius-30.5rem境界線の半径 (8ピクセルに相当)。
radius-40.75rem境界線の半径 (12ピクセルに相当)。
radius-51rem境界線の半径 (16ピクセルに相当)。
radius-61.25rem境界線の半径 (20ピクセルに相当)。
radius-71.5rem境界線の半径 (24ピクセルに相当)。
radius-81.75rem境界線の半径 (28ピクセルに相当)。
radius-half2rem境界線の半径 (32ピクセルに相当)。
size-050.125remサイズ指定 (2ピクセルに相当)。
size-10.25remサイズ指定 (4ピクセルに相当)。
size-20.5remサイズ指定 (8ピクセルに相当)。
size-30.75remサイズ指定 (12ピクセルに相当)。
size-41remサイズ指定 (16ピクセルに相当)。
size-51.25remサイズ指定 (20ピクセルに相当)。
size-61.5remサイズ指定 (24ピクセルに相当)。
size-71.75remサイズ指定 (28ピクセルに相当)。
size-82remサイズ指定 (32ピクセルに相当)。
size-92.25remサイズ指定 (36ピクセルに相当)。
size-102.5remサイズ指定 (40ピクセルに相当)。
size-112.75remサイズ指定 (44ピクセルに相当)。
size-123remサイズ指定 (48ピクセルに相当)。
size-143.5remサイズ指定 (56ピクセルに相当)。
size-153.75remサイズ指定 (60ピクセルに相当)。
size-164remサイズ指定 (64ピクセルに相当)。
size-184.5remサイズ指定 (72ピクセルに相当)。
size-205remサイズ指定 (80ピクセルに相当)。
space-050.125rem間隔指定 (2ピクセルに相当)。
space-10.25rem間隔指定 (4ピクセルに相当)。
space-20.5rem間隔指定 (8ピクセルに相当)。
space-30.75rem間隔指定 (12ピクセルに相当)。
space-41rem間隔指定 (16ピクセルに相当)。
space-51.25rem間隔指定 (20ピクセルに相当)。
space-61.5rem間隔指定 (24ピクセルに相当)。
space-71.75rem間隔指定 (28ピクセルに相当)。
space-82rem間隔指定 (32ピクセルに相当)。
space-92.25rem間隔指定 (36ピクセルに相当)。
space-102.5rem間隔指定 (40ピクセルに相当)。
space-112.75rem間隔指定 (44ピクセルに相当)。
space-123rem間隔指定 (48ピクセルに相当)。
space-143.5rem間隔指定 (56ピクセルに相当)。
space-153.75rem間隔指定 (60ピクセルに相当)。
space-164rem間隔指定 (64ピクセルに相当)。
space-184.5rem間隔指定 (72ピクセルに相当)。
space-205rem間隔指定 (80ピクセルに相当)。