Styles

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

Formatters — conditional styling rules that reference styles
Header Styles — applying styles to column and group headers
Column Groups — groupStyle and headerStyle properties
Column Properties — formatter and header column settings

Source references: powersheet.yaml, column-column-group-header-styles KB article, ConfigProvider.tsx (DEFAULT_STYLES)

Sources

KB Articles

Source Code

powersheet.yaml
prod-powersheet-src/com.nextedy.powersheet.client/src/modules/Powersheet/Powersheet.tsx
prod-powersheet-src/com.nextedy.powersheet/src/com/nextedy/powersheet/PowersheetService.java
prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/SheetComponent.tsx
prod-powersheet-src/com.nextedy.powersheet.client/src/modules/ConfigProvider/ConfigProvider.tsx

Getting Started

Concepts

Reference

How-To Guides

Frequently Asked Questions

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

Getting Started

Concepts

Reference

How-To Guides

Frequently Asked Questions

​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

​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

Related Pages