Styles

Styles are defined once in a palette and referenced by ID.

Structure

{
  "styles": {
    "defs": { "<style_id>": StyleDef, ... },
    "compositions": { "<comp_id>": { "extends": "base", "overrides": {...} } },
    "conditionals": [ConditionalRule, ...]
  }
}

Style Definition Fields

All fields are optional; specify only what you need. Keyword fields accept the values listed in Keyword values; anything else is reported as UNKNOWN_VALUE.

Field	Type	Description
font_weight	string or number	"normal", "bold", "bolder", "lighter", or 1–1000
font_style	string	"normal", "italic", "oblique"
font_size	string	CSS font-size value
font_family	string	Font family name
color	string	Text color
background_color	string	Background color
text_align	string	"left", "center", "right", "justify"
vertical_align	string	"top", "middle", "bottom", "baseline", "super", "sub"
text_decoration	string	"none", "underline", etc.
text_transform	string	"none", "uppercase", etc.
white_space	string	CSS white-space value
padding	object	{ top, right, bottom, left }
border	object	{ top, right, bottom, left }
indent	string	Text indent value

Outside HTML, "baseline", "super" and "sub" place a cell’s content at the top: in a table cell they line up the first lines of a row’s cells, which is where top alignment puts them when the cells share a font size. LaTeX output doesn’t write vertical_align (see the Feature Matrix).

Border Side

Field	Type	Description
width	string	Border width (e.g. "1px")
style	string	"solid", "dashed", "dotted", "double", "none"
color	string	Border color

Example

{
  "styles": {
    "defs": {
      "header_bold": {
        "font_weight": "bold",
        "background_color": "#f0f0f0",
        "border": {
          "bottom": { "width": "2px", "style": "solid", "color": "#333333" }
        }
      },
      "numeric": {
        "font_family": "Courier New, monospace",
        "text_align": "right"
      }
    },
    "compositions": {
      "header_numeric": {
        "extends": "header_bold",
        "overrides": { "text_align": "right" }
      }
    },
    "conditionals": [{
      "id": "stripe",
      "selector": { "row_parity": "even", "scope": "tbody" },
      "style": { "background_color": "#FAFAFA" }
    }]
  }
}

How Styles Combine

Every writer resolves a cell’s style the same way (in gridwell-layout). The layers, lowest to highest priority:

1. the column’s default style (column_spec[].style_id), for body and summary cells (column labels are styled by their own row and cell styles);
2. row striping (config.row_striping, see Config);
3. each matching conditional style, in the order listed (later ones win);
4. the row’s style (row.style_id);
5. the cell’s style (cell.style_id).

A layer overrides only the properties it sets; everything else shows through from the layers below. padding and border merge side by side, so a cell style that sets only border.bottom keeps a row style’s border.top. A border edge whose style is none or hidden removes that edge. Values that don’t parse (and keywords outside their allowed set) are ignored, so they never reach any output.

A style id is a non-empty name of ASCII letters, digits, _ and - (anything else fails validation with INVALID_STYLE_ID): writers put ids into markup, such as HTML class names. A style id can name a definition or a composition. A composition is its extends definition with overrides laid over it; compositions don’t chain.

Conditional selectors

Selector field	Values	Matches
scope	tbody (body)	data rows of every group (not summary rows)
	thead (head)	column-label rows
	table (all), or absent	every row
row_parity	odd, even	rows numbered from 1, as in CSS :nth-child(odd): data rows count across all groups, head rows within the head, summary rows within their group
	absent	every row in scope

Unknown values match nothing (and are reported as UNKNOWN_VALUE).

Color Values

• Named: all 148 CSS named colors (red, steelblue, rebeccapurple, …)
• Hex: #RGB, #RGBA, #RRGGBB, #RRGGBBAA
• Functional: rgb()/rgba() and hsl()/hsla(), in comma syntax (rgb(255, 0, 0)) or space syntax with optional alpha (rgb(255 0 0 / 50%))
• Keyword: transparent

Anything else fails validation with INVALID_COLOR; see Validation for details and for the length forms each field accepts.