# GC.Spread.Sheets.Designer.ThemeTokens

## Content

# Enumeration: ThemeTokens

[Sheets](../modules/GC.Spread.Sheets).[Designer](../modules/GC.Spread.Sheets.Designer).ThemeTokens

## Table of contents

### Enumeration members

- [borderRadiusL](GC.Spread.Sheets.Designer.ThemeTokens#borderradiusl)
- [borderRadiusM](GC.Spread.Sheets.Designer.ThemeTokens#borderradiusm)
- [borderRadiusXL](GC.Spread.Sheets.Designer.ThemeTokens#borderradiusxl)
- [colorBackground](GC.Spread.Sheets.Designer.ThemeTokens#colorbackground)
- [colorBackground2](GC.Spread.Sheets.Designer.ThemeTokens#colorbackground2)
- [colorBackground2Hover](GC.Spread.Sheets.Designer.ThemeTokens#colorbackground2hover)
- [colorBackground2Selected](GC.Spread.Sheets.Designer.ThemeTokens#colorbackground2selected)
- [colorBackgroundDisabled](GC.Spread.Sheets.Designer.ThemeTokens#colorbackgrounddisabled)
- [colorBackgroundHover](GC.Spread.Sheets.Designer.ThemeTokens#colorbackgroundhover)
- [colorBackgroundSelected](GC.Spread.Sheets.Designer.ThemeTokens#colorbackgroundselected)
- [colorBrandBackground](GC.Spread.Sheets.Designer.ThemeTokens#colorbrandbackground)
- [colorBrandBackgroundHover](GC.Spread.Sheets.Designer.ThemeTokens#colorbrandbackgroundhover)
- [colorBrandBackgroundSelected](GC.Spread.Sheets.Designer.ThemeTokens#colorbrandbackgroundselected)
- [colorBrandForeground](GC.Spread.Sheets.Designer.ThemeTokens#colorbrandforeground)
- [colorForeground](GC.Spread.Sheets.Designer.ThemeTokens#colorforeground)
- [colorForegroundDisabled](GC.Spread.Sheets.Designer.ThemeTokens#colorforegrounddisabled)
- [colorStroke](GC.Spread.Sheets.Designer.ThemeTokens#colorstroke)
- [colorStrokeDisabled](GC.Spread.Sheets.Designer.ThemeTokens#colorstrokedisabled)
- [colorStrokeHover](GC.Spread.Sheets.Designer.ThemeTokens#colorstrokehover)
- [colorStrokeSelected](GC.Spread.Sheets.Designer.ThemeTokens#colorstrokeselected)
- [shadow4](GC.Spread.Sheets.Designer.ThemeTokens#shadow4)
- [shadow8](GC.Spread.Sheets.Designer.ThemeTokens#shadow8)

## Enumeration members

### <a id="borderradiusl" name="borderradiusl"></a> borderRadiusL

• **borderRadiusL** = `"--sjs-border-radius-l"`

Large border radius.

___

### <a id="borderradiusm" name="borderradiusm"></a> borderRadiusM

• **borderRadiusM** = `"--sjs-border-radius-m"`

Medium border radius.

___

### <a id="borderradiusxl" name="borderradiusxl"></a> borderRadiusXL

• **borderRadiusXL** = `"--sjs-border-radius-xl"`

Extra-large border radius.

___

### <a id="colorbackground" name="colorbackground"></a> colorBackground

• **colorBackground** = `"--sjs-color-background"`

Normal background color, used for the background of all standard components.

___

### <a id="colorbackground2" name="colorbackground2"></a> colorBackground2

• **colorBackground2** = `"--sjs-color-background-2"`

 Background color for the bottom-most container in the designer.

___

### <a id="colorbackground2hover" name="colorbackground2hover"></a> colorBackground2Hover

• **colorBackground2Hover** = `"--sjs-color-background-2-hover"`

Background color when the bottom-most container’s component is hovered.

___

### <a id="colorbackground2selected" name="colorbackground2selected"></a> colorBackground2Selected

• **colorBackground2Selected** = `"--sjs-color-background-2-selected"`

Background color when the bottom-most container’s component is selected.

___

### <a id="colorbackgrounddisabled" name="colorbackgrounddisabled"></a> colorBackgroundDisabled

• **colorBackgroundDisabled** = `"--sjs-color-background-disabled"`

 Background color when a standard component is disabled.

___

### <a id="colorbackgroundhover" name="colorbackgroundhover"></a> colorBackgroundHover

• **colorBackgroundHover** = `"--sjs-color-background-hover"`

Background color when a standard component is hovered.

___

### <a id="colorbackgroundselected" name="colorbackgroundselected"></a> colorBackgroundSelected

• **colorBackgroundSelected** = `"--sjs-color-background-selected"`

 Background color when a standard component is selected.

___

### <a id="colorbrandbackground" name="colorbrandbackground"></a> colorBrandBackground

• **colorBrandBackground** = `"--sjs-color-brand-background"`

The color representing the brand, used as the product’s color identifier. It serves as the background color for components that need to stand out or showcase the brand’s style.

___

### <a id="colorbrandbackgroundhover" name="colorbrandbackgroundhover"></a> colorBrandBackgroundHover

• **colorBrandBackgroundHover** = `"--sjs-color-brand-background-hover"`

Background color when the brand background color is hovered.

___

### <a id="colorbrandbackgroundselected" name="colorbrandbackgroundselected"></a> colorBrandBackgroundSelected

• **colorBrandBackgroundSelected** = `"--sjs-color-brand-background-selected"`

Background color when the brand background color is selected.

___

### <a id="colorbrandforeground" name="colorbrandforeground"></a> colorBrandForeground

• **colorBrandForeground** = `"--sjs-color-brand-foreground"`

 Text color used on top of the brand background color.

___

### <a id="colorforeground" name="colorforeground"></a> colorForeground

• **colorForeground** = `"--sjs-color-foreground"`

 Normal foreground color, used for the color of all regular text.

___

### <a id="colorforegrounddisabled" name="colorforegrounddisabled"></a> colorForegroundDisabled

• **colorForegroundDisabled** = `"--sjs-color-foreground-disabled"`

 The color of regular text when the component is disabled.

___

### <a id="colorstroke" name="colorstroke"></a> colorStroke

• **colorStroke** = `"--sjs-color-stroke"`

Border color.

___

### <a id="colorstrokedisabled" name="colorstrokedisabled"></a> colorStrokeDisabled

• **colorStrokeDisabled** = `"--sjs-color-stroke-disabled"`

Border color when the component is disabled.

___

### <a id="colorstrokehover" name="colorstrokehover"></a> colorStrokeHover

• **colorStrokeHover** = `"--sjs-color-stroke-hover"`

 Border color when the component is hovered.

___

### <a id="colorstrokeselected" name="colorstrokeselected"></a> colorStrokeSelected

• **colorStrokeSelected** = `"--sjs-color-stroke-selected"`

Border color when the component is selected.

___

### <a id="shadow4" name="shadow4"></a> shadow4

• **shadow4** = `"--sjs-shadow-4"`

Shadow with a blur radius of 4px.

___

### <a id="shadow8" name="shadow8"></a> shadow8

• **shadow8** = `"--sjs-shadow-8"`

Shadow with a blur radius of 8px.