Estilos del widget

El aspecto del widget es un conjunto de tokens: las esquinas de cada tipo de pieza, el tamaño de los controles y las barras, la tipografía, los bordes, las sombras, cómo se ve un botón elegido y si la barra de herramientas y las herramientas de dibujo van pegadas a los bordes o flotan. Parte de un preajuste y cambia lo que quieras. Los colores siguen dependiendo del tema (dark / light; consulta la referencia de la API); cualquier aspecto funciona con ambos.

Preajustes

Preajuste	Aspecto
`studio` (predeterminado)	Controles redondeados de 7 px, menús de 11 px y diálogos de 16 px. Los grupos se separan con espacio en lugar de líneas, los menús flotan sobre sombras suaves, los botones de temporalidad van en un carril segmentado y un botón elegido lleva un relleno tintado.
`terminal`	Denso y cuadrado: esquinas de 2 px, controles de 26 px, líneas entre grupos, etiquetas en mayúsculas y una línea bajo el botón elegido. Las etiquetas de precio del gráfico son cuadradas.
`capsule`	Píldoras por todas partes, también en las etiquetas de precio. La barra de herramientas y las herramientas de dibujo flotan como islas, los menús son de vidrio esmerilado y un botón elegido es una píldora sólida.

Elegir un aspecto

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()

Tu propio aspecto

Un tema parte de un preajuste (Studio si no indicas ninguno) y cambia solo lo que nombra. Las esquinas fijadas en la escala llegan a todas las piezas que la siguen, salvo que fijes las de esa pieza en concreto.

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
})

Campo	Qué ajusta
`radius`	La escala de esquinas `xs`, `sm`, `md`, `lg`, `xl`, en px (0–999).
`components`	Las esquinas propias de una pieza: `control` (botones), `input`, `menu`, `dialog`, `panel` (alertas, ventana de datos, ticket de orden), `tooltip`, `tag`, `toast`, `toolbar` y `sidebar` (su propia caja, visible cuando flotan). Por defecto, los controles y los campos toman `md`; los menús y los paneles, `lg`; los diálogos, `xl`; y los tooltips y las etiquetas, `sm`.
`density` / `sizes`	Alto de `toolbar`, alto de `control` y `controlSmall`, `icon`, ancho de `sidebar` y alto de `menuItem`, en px.
`font`	Familias (listas CSS), `size` del texto base (11–20 px; los tamaños pequeños lo siguen), pesos, y las mayúsculas y el espaciado entre letras (em) de las etiquetas pequeñas, como los títulos de sección.
`borders`	Grosor del borde, y si unas líneas separan los grupos de la barra de herramientas y las herramientas de dibujo.
`shadows`	Sombras CSS de menús, diálogos y tooltips.
`blur`	Menús esmerilados, en px: por encima de 0, los menús dejan ver algo del gráfico, desenfocado.
`active`	Cómo se ve un botón elegido: un relleno tintado, una píldora sólida o un subrayado.
`toolbar` / `sidebar`	Pegada al borde, o flotando como una isla.
`intervals`	Los botones de temporalidad tal cual, o en un carril segmentado.
`tagRadius`	Esquinas de las etiquetas de precio, las píldoras del eje y las insignias de órdenes que dibuja el gráfico.

Los valores que no puede usar (fuera de rango, o CSS que podría salirse de su declaración) se ignoran y se conserva el del preajuste.

Fuentes

El widget no carga ninguna fuente: las nombra, y el navegador recorre cada lista hasta dar con una disponible. Studio nombra Manrope y después Inter; Terminal, IBM Plex Sans Condensed e IBM Plex Mono; Capsule, Sora. Carga las que quieras:

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

Variables CSS

Los tokens son variables CSS en la raíz del widget (y en sus diálogos). Sin la opción ui siguen siendo las de la hoja de estilos (las de Studio), así que tu propio CSS puede fijarlas: el widget coloca su hoja de estilos al principio de la página, de modo que una regla tuya sobre .tcw-root prevalece. Con ui, el widget las escribe en el elemento y son ellas las que prevalecen.

.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;
}

Variables	Origen
`--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` (y `-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`

Los interruptores de disposición son atributos data en esos mismos elementos, para tu propio CSS: data-tcw-ui (el preajuste), data-tcw-active, data-tcw-toolbar, data-tcw-sidebar, data-tcw-intervals y data-tcw-separators (on / off).

Las etiquetas del gráfico

El widget pasa tagRadius a su gráfico (una forma indicada en chartOptions.shapes se mantiene hasta que llames a setUI). Con un Chart sin widget, fija tú la forma; se mantiene al cambiar de tema. La adoptan las etiquetas de precio, las píldoras del eje y de la cruz, las etiquetas de órdenes, posiciones y órdenes bracket, y las de los niveles del periodo anterior.

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

Colores del volumen

Las barras de volumen toman volumeUp y volumeDown del tema. volumeColor(candleColor) devuelve el color de la vela con la opacidad del volumen, así en un tema propio las barras siguen siendo un fondo bajo las velas. El widget lo hace solo cuando sus ajustes cambian los colores de las velas, y un tema basado en un preajuste que solo cambia candleUp / candleDown también tiene el volumen en esos colores.

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

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