Enumeration: ThemeTokens

Sheets.Designer.ThemeTokens

Table of contents

Enumeration members

• borderRadiusL
• borderRadiusM
• borderRadiusXL
• colorBackground
• colorBackground2
• colorBackground2Hover
• colorBackground2Selected
• colorBackgroundDisabled
• colorBackgroundHover
• colorBackgroundSelected
• colorBrandBackground
• colorBrandBackgroundHover
• colorBrandBackgroundSelected
• colorBrandForeground
• colorForeground
• colorForegroundDisabled
• colorStroke
• colorStrokeDisabled
• colorStrokeHover
• colorStrokeSelected
• shadow4
• shadow8

Enumeration members

borderRadiusL

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

Large border radius.

---

borderRadiusM

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

Medium border radius.

---

borderRadiusXL

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

Extra-large border radius.

---

colorBackground

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

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

---

colorBackground2

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

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

---

colorBackground2Hover

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

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

---

colorBackground2Selected

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

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

---

colorBackgroundDisabled

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

Background color when a standard component is disabled.

---

colorBackgroundHover

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

Background color when a standard component is hovered.

---

colorBackgroundSelected

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

Background color when a standard component is selected.

---

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.

---

colorBrandBackgroundHover

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

Background color when the brand background color is hovered.

---

colorBrandBackgroundSelected

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

Background color when the brand background color is selected.

---

colorBrandForeground

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

Text color used on top of the brand background color.

---

colorForeground

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

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

---

colorForegroundDisabled

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

The color of regular text when the component is disabled.

---

colorStroke

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

Border color.

---

colorStrokeDisabled

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

Border color when the component is disabled.

---

colorStrokeHover

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

Border color when the component is hovered.

---

colorStrokeSelected

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

Border color when the component is selected.

---

shadow4

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

Shadow with a blur radius of 4px.

---

shadow8

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

Shadow with a blur radius of 8px.