ComponentStyle

ComponentStyle manifests capture styling information for components. They allow you to centralize typography, colors, spacing, and other visual rules.

Minimal definition

This is the smallest well-formed ComponentStyle: the required spec.content with the base typography that almost every style block overrides.

apiVersion: bino.bi/v1alpha1
kind: ComponentStyle
metadata:
  name: corporateTheme
spec:
  content:
    global:
      fontSizePx: 14
      fontFamily: "'Inter', sans-serif"

spec.content can also be written as a JSON string instead of a YAML object, which is useful when copying from front-end configuration - see JSON string style. All attributes are listed in the Attribute Reference below.

Using named styles

The metadata.name of a ComponentStyle decides how it is applied:

_default - applied to all components automatically.
Any other name (e.g. corporateTheme) - a named style that individual components opt into via spec.selectedStyle.

At render time each component merges style layers in this order (later wins): built-in _system defaults → _default → the style named by selectedStyle.

---
apiVersion: bino.bi/v1alpha1
kind: ComponentStyle
metadata:
  name: corporateTheme
spec:
  content:
    global:
      fontFamily: "'Inter', sans-serif"
      fontSizePx: 11
---
apiVersion: bino.bi/v1alpha1
kind: Table
metadata:
  name: revenue_table
spec:
  dataset: revenue_by_customer
  selectedStyle: corporateTheme

selectedStyle is available on ReportArtefact, Table, Text, ChartStructure, ChartTime, ChartScatter, ChartBubble, ChartBullet, Tree, Grid, Image (as inline child), LayoutPage, and LayoutCard. It is emitted as the selected-style HTML attribute on the corresponding bn-* element. For LayoutPage and LayoutCard it takes effect with a template engine release that forwards selected-style to the inner page/card element.

Style inheritance

A selectedStyle set on a container becomes the default for everything inside it. The nearest ancestor wins:

component's own selectedStyle
  > enclosing Grid / Tree / LayoutCard
  > LayoutPage
  > ReportArtefact

Set it once on the ReportArtefact and every page and component in that artefact uses it - unless a page, card, grid, tree, or leaf component sets its own selectedStyle, which then applies to that element and its descendants. Tree Label nodes inherit the style too (they cannot set their own).

To exclude a single component from inheritance, set selectedStyle: "" explicitly - it falls back to _system + _default styling.

Inheritance is resolved at build time per artefact. bino preview shows the artefact-level style only when previewing through an artefact; the plain all-pages preview has no artefact context (page-level inheritance still applies).

Style structure

The style object has the following top-level sections:

Section	Description
`global`	Global typography and color settings applied to all components
`bn-text`	Typography overrides for text components
`bn-chart-time`	Style settings for time/column charts
`bn-chart-structure`	Style settings for structure/bar charts
`bn-chart-scatter`	Style settings for scatter charts
`bn-chart-bubble`	Style settings for bubble charts
`bn-chart-bullet`	Style settings for bullet charts
`bn-tree`	Style settings for hierarchical tree diagrams
`bn-grid`	Style settings for grid layouts with row/column headers

The style object accepts additional keys beyond these sections, so unknown or misspelled style keys pass validation without a diagnostic.

Global style

Global settings are inherited by all components.

Property	Type	Default	Description
`fontSizePx`	number	`13.3333`	Base font size in pixels. Scale factors multiply this value.
`fontFamily`	string	`'Noto Sans', sans-serif`	CSS font-family value
`fontColor`	string	`#000000`	Primary text color (CSS color)
`fontBackgroundColor`	string	`#ffffff`	Background color for text elements (CSS color)

global:
  fontSizePx: 14
  fontFamily: "'Inter', sans-serif"
  fontColor: "#1a1a1a"
  fontBackgroundColor: "#ffffff"

Text style (`bn-text`)

Typography overrides for text components. A font key that is not set falls back to the global style.

Property	Type	Description
`fontFamily`	string	CSS font-family value
`fontSizePx`	number	Font size in pixels
`fontColor`	string	Text color (CSS color)
`fontBackgroundColor`	string	Background color (CSS color)
`leading`	number	Leading (line spacing) factor

Template engine v1.0.0-next.29 accepts leading but does not apply it.

Time chart style (`bn-chart-time`)

Style settings for vertical column charts (time series visualizations).

Property	Type	Description
`scaleFactors`	object	Scale factors for element sizing
`axisStyles`	object	SVG styles for axis elements by scenario
`barStyles`	object	SVG styles for bar/column elements by scenario
`varianceStyles`	object	SVG styles for variance indicators
`stackColors`	string[]	Ordered CSS colors for stacked segments (default: `["#000000", "#c0c0c0", "#808080"]`)
`padding`	object	Padding around the chart area

Scale factors (time chart)

All scale factors are multiplied by global.fontSizePx to calculate pixel values.

Property	Default	Description
`scenarioOffset`	`0.3`	Horizontal offset between scenario bars
`scenarioLabelToColumn`	`0.3`	Gap between scenario label and column
`labelToColumn`	`0.3`	Gap between category label and column
`labelToAxis`	`0.3`	Gap between label and axis
`needleWidth`	`0.3`	Width of needle indicators
`needleHeadWidth`	`0.6`	Width of needle head (arrow)
`columnWidth`	`2.0`	Width of data columns
`varianceAxisLineWidth`	`0.3`	Width of variance axis lines
`axisLineWidth`	`0.1`	Width of main axis lines
`auxiliaryLineWidth`	`0.1`	Width of auxiliary/grid lines
`scenarioLineWidth`	`0.2`	Width of scenario indicator lines
`markerWidth`	`0.7`	Width of data point markers
`markerOffset`	`0.0`	Offset of markers from data points
`categoryWidth`	`3.0`	Width allocated per category
`axisTickLength`	`0.3`	Length of axis tick marks

Structure chart style (`bn-chart-structure`)

Style settings for horizontal bar charts (structure visualizations).

Property	Type	Description
`scaleFactors`	object	Scale factors for element sizing
`axisStyles`	object	SVG styles for axis elements by scenario
`barStyles`	object	SVG styles for bar elements by scenario
`varianceStyles`	object	SVG styles for variance indicators
`stackColors`	string[]	Ordered CSS colors for stacked segments (default: `["#000000", "#c0c0c0", "#808080"]`)
`padding`	object	Padding around the chart area

Scale factors (structure chart)

All scale factors are multiplied by global.fontSizePx to calculate pixel values.

Property	Default	Description
`scenarioOffset`	`0.3`	Vertical offset between scenario bars
`scenarioLabelToBar`	`0.1`	Gap between scenario label and bar
`labelToBar`	`0.3`	Gap between category label and bar
`labelToAxis`	`0.3`	Gap between label and axis
`needleWidth`	`0.3`	Width of needle indicators
`needleHeadWidth`	`0.6`	Width of needle head (arrow)
`barWidth`	`1.2`	Height of horizontal bars
`varianceAxisLineWidth`	`0.3`	Width of variance axis lines
`axisLineWidth`	`0.1`	Width of main axis lines
`auxiliaryLineWidth`	`0.1`	Width of auxiliary/grid lines
`scenarioLineWidth`	`0.2`	Width of scenario indicator lines
`markerWidth`	`0.7`	Width of data point markers
`markerOffset`	`0.0`	Offset of markers from data points
`categoryWidth`	`1.9`	Height allocated per category row
`axisTickLength`	`0.3`	Length of axis tick marks

Tree chart style (`bn-tree`)

Style settings for hierarchical tree diagrams.

Property	Type	Default	Description
`edgeColor`	string	`#404040`	Color for tree edges/connections (CSS color)
`edgeWidth`	number	`1`	Width of tree edges in pixels
`operatorCircleRadius`	number	`10`	Radius of operator node circles in pixels
`operatorFontSizeScale`	number	`0.9`	Scale factor for operator font size relative to `global.fontSizePx`
`operatorColor`	string	`#404040`	Color for operator nodes (CSS color)

bn-tree:
  edgeColor: "#606060"
  edgeWidth: 2
  operatorCircleRadius: 12
  operatorFontSizeScale: 0.85
  operatorColor: "#333333"

Grid style (`bn-grid`)

Style settings for grid layouts with row and column headers.

Property	Type	Default	Description
`headerBackground`	string	`"transparent"`	Background color for row and column headers (CSS color)
`borderColor`	string	`"#A6A6A6"`	Color of cell border/divider lines (CSS color)
`borderWidth`	number	`1`	Width of cell borders in pixels
`cellPadding`	number	`4`	Padding inside cells in pixels

bn-grid:
  headerBackground: "#f0f0f0"
  borderColor: "#cccccc"
  borderWidth: 1
  cellPadding: 8

SVG style group

Both axisStyles and barStyles use scenario-based grouping following IBCS notation:

Key	Description
`ac`	Style for Actual values
`fc`	Style for Forecast values
`pp`	Style for Prior Period values
`pl`	Style for Plan values

Each scenario key contains an SVG style object. Further scenario keys are allowed and take the same SVG style object.

SVG variance style group

The varianceStyles property groups styles by variance direction:

Key	Description
`pos`	Style for positive variances (favorable)
`neg`	Style for negative variances (unfavorable)
`neu`	Style for neutral/zero variances

Further variance keys are allowed and take the same SVG style object.

SVG style object

Individual SVG style properties:

Property	Type	Description
`stroke`	string	SVG stroke color (CSS color)
`fill`	string	SVG fill color (CSS color)
`width`	number	Stroke width in pixels
`dasharray`	string	SVG stroke-dasharray pattern (e.g., `"10 5 5 5"` for dashed lines)
`fillpattern`	string	Fill pattern: `solid`, `hatched` or `outlined`

fc is the deprecated name of hatched. It still works with template engine 1.x; bino lint reports it with style-fillpattern-deprecated. Template engines before v1.0.0-next.28 know only fc in time and structure charts, so keep fc in a project that is pinned to such an engine.

axisStyles:
  ac: { stroke: "#121212", fill: "#121212", width: 0.1 }
  fc: { stroke: "#121212", fill: "#ffffff", width: 0.1, dasharray: "10 5 5 5" }
  pp: { stroke: "#606060", fill: "#606060", width: 0.1 }
  pl: { stroke: "#121212", fill: "#ffffff", width: 0.1 }

Padding

Padding configuration for chart areas:

Property	Type	Default	Description
`top`	number	`10`	Top padding in pixels
`left`	number	`10`	Left padding in pixels
`right`	number	`10`	Right padding in pixels
`bottom`	number	`10`	Bottom padding in pixels

Complete example

---
apiVersion: bino.bi/v1alpha1
kind: ComponentStyle
metadata:
  name: corporateTheme
spec:
  content:
    global:
      fontSizePx: 14
      fontFamily: "'Inter', sans-serif"
      fontColor: "#1a1a1a"
      fontBackgroundColor: "#ffffff"

    bn-chart-time:
      scaleFactors:
        columnWidth: 2.5
        categoryWidth: 3.5
      axisStyles:
        ac: { stroke: "#000000", fill: "#000000", width: 0.1 }
        fc:
          {
            stroke: "#000000",
            fill: "#ffffff",
            width: 0.1,
            dasharray: "10 5 5 5",
          }
        pp: { stroke: "#666666", fill: "#666666", width: 0.1 }
        pl: { stroke: "#000000", fill: "#ffffff", width: 0.1 }
      barStyles:
        ac: { stroke: "#333333", fill: "#333333", width: 0.1 }
        fc:
          { stroke: "#333333", fill: "#ffffff", width: 0.5, fillpattern: "hatched" }
        pp: { stroke: "#999999", fill: "#999999", width: 0.1 }
        pl: { stroke: "#333333", fill: "#ffffff", width: 0.1 }
      varianceStyles:
        pos: { stroke: "#008f96", fill: "#008f96", width: 0.1 }
        neg: { stroke: "#ff0000", fill: "#ff0000", width: 0.1 }
        neu: { stroke: "#808080", fill: "#808080", width: 0.1 }
      stackColors: ["#000000", "#c0c0c0", "#808080"]
      padding:
        top: 15
        left: 15
        right: 15
        bottom: 15

    bn-chart-structure:
      scaleFactors:
        barWidth: 1.5
        categoryWidth: 2.0
      axisStyles:
        ac: { stroke: "#000000", fill: "#000000", width: 0.1 }
        fc:
          {
            stroke: "#000000",
            fill: "#ffffff",
            width: 0.1,
            dasharray: "10 5 5 5",
          }
        pp: { stroke: "#666666", fill: "#666666", width: 0.1 }
        pl: { stroke: "#000000", fill: "#ffffff", width: 0.1 }
      barStyles:
        ac: { stroke: "#333333", fill: "#333333", width: 0.1 }
        fc:
          { stroke: "#333333", fill: "#ffffff", width: 0.5, fillpattern: "hatched" }
        pp: { stroke: "#999999", fill: "#999999", width: 0.1 }
        pl: { stroke: "#333333", fill: "#ffffff", width: 0.1 }
      varianceStyles:
        pos: { stroke: "#008f96", fill: "#008f96", width: 0.1 }
        neg: { stroke: "#ff0000", fill: "#ff0000", width: 0.1 }
        neu: { stroke: "#808080", fill: "#808080", width: 0.1 }
      stackColors: ["#000000", "#c0c0c0", "#808080"]

    bn-tree:
      edgeColor: "#505050"
      edgeWidth: 1.5
      operatorCircleRadius: 12
      operatorFontSizeScale: 0.85
      operatorColor: "#404040"

    bn-grid:
      headerBackground: "#f5f5f5"
      borderColor: "#cccccc"
      borderWidth: 1
      cellPadding: 8

JSON string style

You can also provide the content as a JSON string:

---
apiVersion: bino.bi/v1alpha1
kind: ComponentStyle
metadata:
  name: compactStyle
spec:
  content: >-
    {"global":{"fontSizePx":12,"fontFamily":"'Roboto', sans-serif"}}

Attribute Reference

Common Metadata

Attribute	Type	Required	Default	Description
`apiVersion`	string	yes	-	Must be `bino.bi/v1alpha1`.
`kind`	string	yes	-	Must be `ComponentStyle`.
`metadata.name`	string	yes	-	Unique style identifier. Use `_default` for global defaults.
`metadata.labels`	object	no	-	Key-value pairs for categorization and constraint matching.
`metadata.annotations`	object	no	-	Arbitrary key-value metadata, not used by the system.
`metadata.description`	string	no	-	Free-form description.
`metadata.constraints`	array	no	-	Conditional inclusion rules. See Constraints.

Spec Attributes

Attribute	Type	Required	Default	Description	Sample
`spec.content`	object or string	yes	-	Style definitions as a YAML object or a JSON string (at least 2 characters). Contains the component-specific style sections below; unknown keys are accepted.	`content: '{"global":{"fontSizePx":12}}'`
`spec.content.global`	object	no	-	Global typography and color settings, inherited by all components. See Global style.	`global: { fontSizePx: 14 }`
`spec.content.bn-text`	object	no	-	Typography overrides for text components. See Text style.	`bn-text: {}`
`spec.content.bn-chart-time`	object	no	-	Style settings for time/column charts: `scaleFactors`, `axisStyles`, `barStyles`, `varianceStyles`, `stackColors`, `padding`. See Time chart style.	`bn-chart-time: { scaleFactors: { columnWidth: 2.5 } }`
`spec.content.bn-chart-structure`	object	no	-	Style settings for structure/bar charts: `scaleFactors`, `axisStyles`, `barStyles`, `varianceStyles`, `stackColors`, `padding`. See Structure chart style.	`bn-chart-structure: { scaleFactors: { barWidth: 1.5 } }`
`spec.content.bn-chart-scatter`	object	no	-	Style settings for scatter charts: `scaleFactors`, `axisStyles`, `seriesColors`, `padding`.	`bn-chart-scatter: {}`
`spec.content.bn-chart-bubble`	object	no	-	Style settings for bubble charts: `scaleFactors`, `axisStyles`, `seriesColors`, `padding`.	`bn-chart-bubble: {}`
`spec.content.bn-chart-bullet`	object	no	-	Style settings for bullet charts: `scaleFactors`, `axisStyles`, `barStyles`, `varianceStyles`, `rangeColors`, `padding`.	`bn-chart-bullet: {}`
`spec.content.bn-tree`	object	no	-	Style settings for hierarchical tree diagrams. See Tree chart style.	`bn-tree: { edgeColor: "#606060" }`
`spec.content.bn-grid`	object	no	-	Style settings for grid layouts. See Grid style.	`bn-grid: { cellPadding: 8 }`

Components reference a named style through their own spec.selectedStyle attribute; see Using named styles.

Chart section properties

Both bn-chart-time and bn-chart-structure take the same properties.

Attribute	Type	Required	Default	Description	Sample
`scaleFactors`	object	no	per property	Scale factors for element sizing, multiplied by `global.fontSizePx`. Defaults differ per chart: see time chart and structure chart.	`scaleFactors: { columnWidth: 2.5 }`
`axisStyles`	object	no	-	SVG styles for axis elements, keyed by scenario. See SVG style group.	`axisStyles: { ac: { stroke: "#000000" } }`
`barStyles`	object	no	-	SVG styles for bar/column elements, keyed by scenario. See SVG style group.	`barStyles: { ac: { fill: "#333333" } }`
`varianceStyles`	object	no	-	SVG styles for variance indicators, keyed by direction. See SVG variance style group.	`varianceStyles: { neg: { fill: "#ff0000" } }`
`stackColors`	array of strings	no	`["#000000", "#c0c0c0", "#808080"]`	Ordered CSS colors for stacked segments. Segments cycle through these colors.	`stackColors: ["#000000", "#c0c0c0"]`
`padding`	object	no	`10` per side	Padding around the chart area. See Padding.	`padding: { top: 15 }`

Global style properties

Property	Type	Default	Description
`global.fontSizePx`	number	`13.3333`	Base font size in pixels. Scale factors multiply this value.
`global.fontFamily`	string	`'Noto Sans', sans-serif`	CSS font-family value.
`global.fontColor`	string	`#000000`	Primary text color (CSS color).
`global.fontBackgroundColor`	string	`#ffffff`	Background color for text elements (CSS color).