组件样式

组件的外观由一组 token 构成：各类部件的圆角、控件与工具栏的尺寸、字体、边框、阴影、选中按钮的样式， 以及工具栏和画线工具是沿边停靠还是悬浮。从一套预设出发，想改哪里就改哪里。颜色仍由主题决定 （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 变量

这些 token 是组件根元素（以及其对话框）上的 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) 返回带成交量透明度的K线颜色，这样在你自己的主题里，成交量柱依然只是K线背后的衬底。在 widget 的设置里修改K线颜色时，它会自动这样处理；基于预设、只改了 candleUp / candleDown 的主题，成交量也会跟随这些颜色。

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

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