ウィジェットのスタイル設定

ウィジェットの外観はトークンの集まりです。パーツの種類ごとの角の丸み、コントロールとバーのサイズ、文字、枠線、影、 選択中のボタンの見せ方、そしてツールバーと描画ツールを端に沿わせるか浮かせるか。プリセットから始めて、好きなところを 変えられます。色はテーマ（dark / light。API リファレンスを参照）が 受け持ち、どの外観もどちらのテーマとも組み合わせられます。

プリセット

プリセット	外観
studio（既定）	コントロールは 7 px、メニューは 11 px、ダイアログは 16 px の角丸。グループは区切り線ではなく余白で分け、メニューは 柔らかい影の上に浮かび、時間足のボタンはセグメント型のトラックに収まり、選択中のボタンは淡い色で塗られます。
terminal	高密度で角張った外観。角は 2 px、コントロールは 26 px、グループの間に区切り線が入り、ラベルは大文字で、選択中の ボタンには下線が付きます。チャート上の価格ラベルも角張った形になります。
capsule	価格ラベルも含め、あらゆる所がピル形です。ツールバーと描画ツールは島のように浮かび、メニューはすりガラス風で、 選択中のボタンは塗りつぶしのピルになります。

外観を選ぶ

import { ChartWidget, ChartWidgetGrid } from '@tradecanvas/chart/widget'

const widget = new ChartWidget(host, { ui: 'terminal' })
widget.setUI('capsule')        // in place: nothing is rebuilt
widget.getUI()                 // every token, resolved

// A grid: every chart and the grid's bar, and the charts it adds later
const grid = new ChartWidgetGrid(host, { layout: '2x2', widget: { ui: 'terminal' } })
grid.setUI('studio')
grid.getUI()

独自の外観

テーマはプリセット（指定しなければ Studio）から始まり、指定した項目だけを変更します。スケールで設定した角の丸みは、 そのスケールに従うすべてのパーツに反映されます。パーツ個別の値を設定した場合は、そちらが使われます。

widget.setUI({
  preset: 'studio',
  radius: { xs: 3, sm: 5, md: 10, lg: 12, xl: 18 },  // the scale, px (999: pills)
  components: { dialog: 20, tag: 0 },                // a part's own corners
  density: 'compact',                                // compact · comfortable · spacious
  sizes: { toolbar: 40 },                            // px; wins over density
  font: {
    family: "'Manrope', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    size: 13, weight: 500, strongWeight: 600,
    labelCase: 'uppercase', labelTracking: 0.06,      // small labels
  },
  borders: { width: 1, separators: true },           // rules between toolbar groups
  shadows: { menu: '0 12px 30px rgba(0, 0, 0, 0.4)' },
  blur: 12,                                          // frosted floating surfaces, px
  active: 'solid',                                   // tint · solid · underline
  toolbar: 'floating',                               // docked · floating
  sidebar: 'floating',
  intervals: 'segmented',                            // plain · segmented
  tagRadius: 999,                                    // the chart's price tags and pills
})

フィールド	設定する内容
radius	角の丸みのスケール xs、sm、md、lg、xl（px、0–999）。
components	パーツ個別の角の丸み：control（ボタン）、input、menu、dialog、 panel（アラート、データウィンドウ、注文チケット）、tooltip、tag、toast、 toolbar と sidebar（浮かせたときに見える、それ自体の枠）。既定では、コントロールと入力欄は md、メニューとパネルは lg、ダイアログは xl、ツールチップとタグは sm に従います。
density / sizes	toolbar の高さ、control と controlSmall の高さ、icon、 sidebar の幅、menuItem の高さ（px）。
font	フォントファミリー（CSS のリスト）、本文の size（11–20 px。小さいサイズはこれに連動）、ウェイト、そしてセクション 見出しなど小さなラベルの大文字・小文字と字間（em）。
borders	枠線の太さと、ツールバーのグループ間や描画ツールの間に区切り線を入れるかどうか。
shadows	メニュー、ダイアログ、ツールチップの CSS の影。
blur	すりガラス風のメニュー（px）。0 より大きいと、メニューの背後にチャートがぼけて透けて見えます。
active	選択中のボタンの見せ方：淡い色の塗り、塗りつぶしのピル、または下線。
toolbar / sidebar	端に沿わせるか、島のように浮かせるか。
intervals	時間足のボタンをそのまま並べるか、セグメント型のトラックに収めるか。
tagRadius	チャートが描く価格ラベル、軸のピル、注文バッジの角の丸み。

使えない値（範囲外の値や、宣言の外に抜け出しうる CSS）は無視され、プリセットの値がそのまま残ります。

フォント

ウィジェットはフォントを読み込みません。名前を指定するだけで、ブラウザーがリストの順にフォールバックします。 Studio は Manrope、次に Inter、Terminal は IBM Plex Sans Condensed と IBM Plex Mono、Capsule は Sora を指定しています。 使いたいフォントは自分で読み込んでください。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap">

CSS 変数

トークンは、ウィジェットのルート要素（とそのダイアログ）に設定された CSS 変数です。ui オプションがなければ 値はスタイルシートのもの（つまり Studio の値）のままなので、独自の CSS で設定できます。ウィジェットは自身の スタイルシートをページの先頭に置くため、.tcw-root に書いたあなたのルールが優先されます。ui を指定すると、ウィジェットが要素に直接値を書き込み、そちらが優先されます。

.tcw-root {
  --tcw-radius: 4px;            /* the md corner: buttons and fields follow it */
  --tcw-dialog-radius: 12px;
  --tcw-control-h: 28px;
  --tcw-font: 'Inter', system-ui, sans-serif;
}

変数	元になる設定
--tcw-radius-xs、-sm、--tcw-radius、-lg、-xl	radius
--tcw-control-radius、--tcw-input-radius、--tcw-menu-radius、--tcw-dialog-radius、--tcw-panel-radius、--tcw-tooltip-radius、--tcw-tag-radius、--tcw-toast-radius、--tcw-toolbar-radius、--tcw-sidebar-radius	components
--tcw-toolbar-h、--tcw-control-h、--tcw-control-h-sm、--tcw-icon、--tcw-sidebar-w、--tcw-menu-item-h	sizes
--tcw-font、--tcw-font-mono、--tcw-font-size（と -sm、-xs、-lg）、--tcw-weight、--tcw-weight-strong、--tcw-label-case、--tcw-label-tracking	font
--tcw-border-w、--tcw-sep-w	borders
--tcw-menu-shadow、--tcw-dialog-shadow、--tcw-tooltip-shadow	shadows
--tcw-blur、--tcw-surface-opacity	blur

レイアウトの切り替えは、同じ要素の data 属性として公開されており、独自の CSS に使えます： data-tcw-ui（プリセット）、data-tcw-active、data-tcw-toolbar、 data-tcw-sidebar、data-tcw-intervals、data-tcw-separators（on / off）。

チャートのラベル

ウィジェットは tagRadius を自身のチャートに渡します（chartOptions.shapes で指定した形は、 setUI を呼ぶまで保たれます）。ウィジェットを使わない素の Chart では、形を自分で設定して ください。この設定はテーマを切り替えても保たれます。この形は、価格ラベル、軸とクロスヘアのピル、注文・ポジション・ ブラケット注文のラベル、前期間のレベルのラベルに使われます。

const chart = new Chart(host, { shapes: { tagRadius: 4 } })
chart.setShapes({ tagRadius: 999 })   // pill price tags, axis pills and order badges
chart.getShapes()

出来高の色

出来高バーはテーマの volumeUp と volumeDown を使います。volumeColor(candleColor) はローソク足の色を出来高用の透明度にした色を返すので、独自のテーマでもバーはローソク足の背景にとどまります。widget の設定でローソク足の色を変えたときは、widget が自動でこれを行います。プリセットを元に candleUp / candleDown だけを変えたテーマでも、出来高はその色になります。

import { DARK_THEME, volumeColor } from '@tradecanvas/chart'

chart.setTheme({
  ...DARK_THEME,
  candleUp: '#26a17b',
  candleDown: '#e0525f',
  volumeUp: volumeColor('#26a17b'),
  volumeDown: volumeColor('#e0525f'),
})