Styles - Nextedy Documentation

Style Definition

Property	Type	Default	Description
`styles`	object	`{}`	Top-level section containing named style definitions. Each key is a style name referenced by formatters or headers.
`styles.<name>.backgroundColor`	string	None	Background color using a color token name (e.g., `grey100`, `red200`) or a predefined style name
`styles.<name>.color`	string	None	Text color using a color token name (e.g., `grey700`, `purple700`)
`styles.<name>.fontWeight`	number/string	None	Font weight value (e.g., `600` for semi-bold)
`styles.<name>.textDecoration`	string	None	Text decoration (e.g., `line-through`)

Predefined Styles

Powersheet includes 20 built-in styles available without any custom definition. Custom styles defined in the styles section are merged on top of these defaults.

Status Styles

Style Name	Text Color	Background Color	Other
`none`	none	none
`boldTitle`			`fontWeight: 600`
`unsupported`	`grey800`	`grey200`	`textDecoration: line-through`
`readOnly`			Read-only cell indicator

Neutral Styles

Style Name	Text Color	Background Color
`darkgrey`	`grey700`	`grey200`
`grey`	`grey700`	`grey100`

Color Styles

Style Name	Text Color	Background Color
`darkred`	`red700`	`red200`
`red`	`red700`	`red100`
`darkorange`	`orange700`	`orange200`
`orange`	`orange700`	`orange100`
`darkgreen`	`green700`	`green200`
`green`	`green700`	`green100`
`lightgreen`	`green700`	`primaryalt100`
`darkblue`	`blue700`	`blue200`
`blue`	`blue700`	`blue100`
`lightblue`	`blue700`	`teal100`
`darkteal`	`teal700`	`teal200`
`teal`	`teal700`	`teal100`
`darkpurple`	`purple700`	`purple200`
`purple`	`purple700`	`purple100`
`lightpurple`	`purple700`	`primary100`

Style Resolution Flow

Defining Custom Styles

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'
  warningHeader:
    backgroundColor: 'orange200'
    color: 'orange700'
  criticalCell:
    backgroundColor: 'red100'
    color: 'red700'
    fontWeight: 600

Using Styles with Formatters

Styles are applied to cells via the formatters section. A formatter references a style name and applies it when an expression evaluates to true.

formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isReadOnly: true

Using Styles with Headers

Styles are applied to column headers via the header.style property on a column, or to column group headers via groupStyle and headerStyle on a column group.

columns:
  description:
    title: Foreseeable Sequence of Events
    width: 140
    header:
      style: lightpurple

columnGroups:
  epic:
    groupName: Epics
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: title

See Column Groups for full group styling reference.

Color Token Reference

Styles use color tokens as shorthand for hex color values. Each color family has variants from 100 (lightest) to 700 (darkest).

Purple

Token	Value
`purple100`	`#eae6ff`
`purple200`	`#c0b6f2`
`purple300`	`#998dd9`
`purple400`	`#8777d9`
`purple500`	`#6554c0`
`purple600`	`#5243aa`
`purple700`	`#403294`

Blue

Token	Value
`blue100`	`#deebff`
`blue200`	`#b3d4ff`
`blue300`	`#4c9aff`
`blue400`	`#2684ff`
`blue500`	`#0065ff`
`blue600`	`#0052cc`
`blue700`	`#064198`

Teal

Token	Value
`teal100`	`#e6fcff`
`teal200`	`#c1f7ff`
`teal300`	`#79e2f2`
`teal400`	`#00c7e6`
`teal500`	`#00b8d9`
`teal600`	`#00a3bf`
`teal700`	`#006686`

Green

Token	Value
`green100`	`#edfae1`
`green200`	`#c9eea4`
`green300`	`#abe86f`
`green400`	`#8dce4c`
`green500`	`#6aa82b`
`green600`	`#3d7900`
`green700`	`#2e5b00`

Orange

Token	Value
`orange100`	`#fffae6`
`orange200`	`#ffeeb4`
`orange300`	`#ffe380`
`orange400`	`#ffc400`
`orange500`	`#ffab00`
`orange600`	`#ff991f`
`orange700`	`#a94700`

Red

Token	Value
`red100`	`#ffebe6`
`red200`	`#ffbdad`
`red300`	`#ff8f73`
`red400`	`#ff7452`
`red500`	`#ff5630`
`red600`	`#de350b`
`red700`	`#970900`

Grey

Token	Value
`grey100`	`#f9f9f9`
`grey150`	`#f1f1f1`
`grey200`	`#e8e8e8`
`grey300`	`#e0e0e0`
`grey400`	`#ccd0db`
`grey500`	`#838dad`
`grey600`	`#666e89`
`grey650`	`#666e89`
`grey700`	`#162858`

Use descriptive style names that reflect purpose rather than appearance: readOnlyStyle, criticalCell, warningHeader rather than greyBackground or redText. This makes configurations easier to maintain when color schemes change.

Complete YAML Example

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isReadOnly: true
  title:
    title: Title
    width: 200
    hasFocus: true
    columnGroup: requirements
  description:
    title: Description
    width: 140
    header:
      style: lightpurple

columnGroups:
  requirements:
    groupName: Requirements
    groupStyle: darkblue
    headerStyle: blue
    collapseTo: title

formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle
  criticalHighlight:
    - expression: 'true'
      style: criticalCell

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'
  criticalCell:
    backgroundColor: 'red100'
    color: 'red700'
    fontWeight: 600

Applying Styles to Headers

Header styles are applied through the header.style property on individual columns and the groupStyle / headerStyle properties on column groups.

Column Header Style

Property	Type	Default	Description
`columns.<key>.header`	object	None	Header styling configuration for the column
`columns.<key>.header.style`	string	None	Name of a predefined or custom style to apply to the column header. Must reference a style name from the `styles` section or a predefined style.

columns:
  description:
    title: Foreseeable Sequence of Events
    width: 140
    header:
      style: lightpurple

Reusing Header Styles with YAML Anchors

YAML anchors reduce repetition when multiple columns share the same header style:

columns:
  systemRequirements.systemRequirement.title:
    title: System Requirement
    header: &blueHeader
      style: blue
  systemRequirements.systemRequirement.severity:
    title: Severity
    header: *blueHeader

Column Group Header Style

How to Apply a Style to a Column Header Group (figure 1)

Column groups apply styles to the group header bar and optionally to all column headers within the group.

Property	Type	Default	Description
`columnGroups.<id>.groupStyle`	string	None	Style applied to the column group header background. References a predefined or custom style name. If not specified, white is used.
`columnGroups.<id>.headerStyle`	string	None	Style applied to all column headers within the group. Can be overridden by `header.style` on individual columns. If not specified, white is used.

columnGroups:
  epic:
    groupName: Epics
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: title

Header Style Resolution

Priority order:

columns.<key>.header.style — applied if defined (highest priority)
columnGroups.<id>.headerStyle — applied if column belongs to a group and no header.style is set
Default white — applied if neither is defined

Custom Header Styles

Define custom styles in the styles section and reference them from header configurations:

styles:
  warningHeader:
    backgroundColor: 'orange200'
    color: 'orange700'

columns:
  outlineNumber:
    title: "#"
    width: 80
    header:
      style: warningHeader

Formatters — conditional styling rules that reference styles
Column Groups — groupStyle and headerStyle properties
Columns — formatter and header column settings

​Style Definition

​Predefined Styles

​Status Styles

​Neutral Styles

​Color Styles

​Style Resolution Flow

​Defining Custom Styles

​Using Styles with Formatters

​Using Styles with Headers

​Color Token Reference

​Purple

​Blue

​Teal

​Green

​Orange

​Red

​Grey

​Complete YAML Example

​Applying Styles to Headers

​Column Header Style

​Reusing Header Styles with YAML Anchors

​Column Group Header Style

​Header Style Resolution

​Custom Header Styles

​Related Pages

Style Definition

Predefined Styles

Status Styles

Neutral Styles

Color Styles

Style Resolution Flow

Defining Custom Styles

Using Styles with Formatters

Using Styles with Headers

Color Token Reference

Purple

Blue

Teal

Green

Orange

Red

Grey

Complete YAML Example

Applying Styles to Headers

Column Header Style

Reusing Header Styles with YAML Anchors

Column Group Header Style

Header Style Resolution

Custom Header Styles

Related Pages