Styling and internationalization

This guide shows how to combine ComponentStyle and Internationalization manifests. You will define a style, a translation block, and reference them from layouts conceptually.

1. Define a component style

---
apiVersion: bino.bi/v1alpha1
kind: ComponentStyle
metadata:
  name: corporateTheme
spec:
  content:
    global:
      fontFamily: "Inter, system-ui, sans-serif"
      fontSizePx: 12
      fontColor: "#374151"

2. Define translations

---
apiVersion: bino.bi/v1alpha1
kind: Internationalization
metadata:
  name: systemTexts_en
spec:
  code: en-US
  namespace: _system
  content:
    report.title.sales_overview: "Sales Overview"
    report.subtitle.q1_2024: "Q1 2024"

3. Use them in components

Styles named _default apply to all components automatically. A named style like corporateTheme is opted into per component via spec.selectedStyle:

---
apiVersion: bino.bi/v1alpha1
kind: ChartStructure
metadata:
  name: revenue_chart
spec:
  dataset: revenue_by_region
  chartTitle: "Revenue by Region"
  selectedStyle: corporateTheme

The effective style merges the built-in _system defaults, then _default, then the selected named style. See the ComponentStyle reference for the full style structure and the list of supporting kinds; the sales-dashboard sample wires a named style the same way.

For translations, layouts and components refer to text keys (for example report.title.sales_overview) rather than hard-coded strings.