---
title: "Complete SurveyJS Design Token List"
description: "Explore the complete list of SurveyJS design tokens, including base values, primitive scales, semantic tokens, and component-specific CSS variables for customizing SurveyJS themes."
source: https://surveyjs.io/documentation/complete-design-token-list
---

# Complete Design Token List

## Base Tokens

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-base-unit-size` | `8px` | Control heights, icon sizes, layout dimensions |
| `--sjs2-base-unit-spacing` | `8px` | Margins, paddings, gaps, layout spacing |
| `--sjs2-base-unit-radius` | `8px` | Corner rounding across components |
| `--sjs2-base-unit-border-width` | `1px` | All derived border width scales |
| `--sjs2-base-unit-font-size` | `8px` | All derived typography sizes |
| `--sjs2-base-unit-line-height` | `8px` | Text rhythm and vertical spacing |
| `--sjs2-base-unit-opacity` | `1%` | Transparency scales and overlays |
| `--sjs2-base-unit-scale` | `1%` | Transform-based interaction states |

## Primitive Scales

### Palette Scale

| Variable | Value |
| ------ | --------- |
| `--sjs2-palette-gray-100`  | `#F5F5F5` |
| `--sjs2-palette-gray-150`  | `#EDEDED` |
| `--sjs2-palette-gray-200`  | `#E5E5E5` |
| `--sjs2-palette-gray-250`  | `#D4D4D4` |
| `--sjs2-palette-gray-300`  | `#CDCDCD` |
| `--sjs2-palette-gray-400`  | `#B3B2B2` |
| `--sjs2-palette-gray-500`  | `#8E8E8E` |
| `--sjs2-palette-gray-600`  | `#656468` |
| `--sjs2-palette-gray-650`  | `#565558` |
| `--sjs2-palette-gray-700`  | `#414045` |
| `--sjs2-palette-gray-750`  | `#36353C` |
| `--sjs2-palette-gray-800`  | `#2D2C33` |
| `--sjs2-palette-gray-850`  | `#222126` |
| `--sjs2-palette-gray-900`  | `#1C1B20` |
| `--sjs2-palette-gray-950`  | `#161519` |
| `--sjs2-palette-gray-999`  | `#111014` |
| `--sjs2-palette-gray-000`  | `#fff` |
| `--sjs2-palette-red-400`| `#ff6e84` |
| `--sjs2-palette-red-600`| `#E50A3E` |
| `--sjs2-palette-red-700`| `#C30935` |
| `--sjs2-palette-green-400` | `#15CDAB` |
| `--sjs2-palette-green-600` | `#19B394` |
| `--sjs2-palette-green-700` | `#15947A` |
| `--sjs2-palette-blue-400`  | `#66B4FC` |
| `--sjs2-palette-blue-600`  | `#437FD9` |
| `--sjs2-palette-blue-700`  | `#2A6CD0` |
| `--sjs2-palette-yellow-400` | `#FEC64A` |
| `--sjs2-palette-yellow-600` | `#FF9814` |
| `--sjs2-palette-yellow-700` | `#F08700` |
| `--sjs2-palette-violet-400` | `#C36FF4` |
| `--sjs2-palette-violet-600` | `#A62CEC` |
| `--sjs2-palette-violet-700` | `#9614E1` |
| `--sjs2-palette-olive-400` | `#6FC648` |
| `--sjs2-palette-olive-600` | `#4FAF24` |
| `--sjs2-palette-olive-700` | `#41901E` |
| `--sjs2-palette-purple-400` | `#A190FA` |
| `--sjs2-palette-purple-600` | `#6E5BD1` |
| `--sjs2-palette-purple-700` | `#5640C9` |
| `--sjs2-palette-indianred-400` | `#F9786A` |
| `--sjs2-palette-indianred-600` | `#AF496B` |
| `--sjs2-palette-indianred-700` | `#973F5C` |

### Typography Scale 

| Variable | Value |
| -------- | -------------------- |
| `--sjs2-font-weight-regular`  | `400`|
| `--sjs2-font-weight-medium`   | `500`|
| `--sjs2-font-weight-semibold` | `600`|
| `--sjs2-font-weight-bold`     | `700`|
| `--sjs2-font-size-x000`       | [base-unit-font-size](#base-tokens) × 0 |
| `--sjs2-font-size-x100`       | base-unit-font-size × 1   |
| `--sjs2-font-size-x150`       | base-unit-font-size × 1.5 |
| `--sjs2-font-size-x200`       | base-unit-font-size × 2   |
| `--sjs2-font-size-x250`       | base-unit-font-size × 2.5 |
| `--sjs2-font-size-x300`       | base-unit-font-size × 3   |
| `--sjs2-font-size-x350`       | base-unit-font-size × 3.5 |
| `--sjs2-font-size-x400`       | base-unit-font-size × 4   |
| `--sjs2-font-size-x500`       | base-unit-font-size × 5   |
| `--sjs2-font-size-x600`       | base-unit-font-size × 6   |
| `--sjs2-line-height-x000`     | [base-unit-line-height](#base-tokens) × 0 |
| `--sjs2-line-height-x100`     | base-unit-line-height × 1 |
| `--sjs2-line-height-x200`     | base-unit-line-height × 2 |
| `--sjs2-line-height-x300`     | base-unit-line-height × 3 |
| `--sjs2-line-height-x400`     | base-unit-line-height × 4 |
| `--sjs2-line-height-x500`     | base-unit-line-height × 5 |
| `--sjs2-line-height-x600`     | base-unit-line-height × 6 |
| `--sjs2-text-case-default`    | `"none"` |
| `--sjs2-text-case-uppercase`  | `"uppercase"`|

### Spacing Scale 

| Variable                | Value              |
| ----------------------- | ------------------------- |
| `--sjs2-spacing-x000`          | [base-unit-spacing](#base-tokens) × 0     |
| `--sjs2-spacing-x025`          | base-unit-spacing × 0.25  |
| `--sjs2-spacing-x050`          | base-unit-spacing × 0.50  |
| `--sjs2-spacing-x075`          | base-unit-spacing × 0.75  |
| `--sjs2-spacing-x100`          | base-unit-spacing × 1     |
| `--sjs2-spacing-x150`          | base-unit-spacing × 1.5   |
| `--sjs2-spacing-x200`          | base-unit-spacing × 2     |
| `--sjs2-spacing-x250`          | base-unit-spacing × 2.5   |
| `--sjs2-spacing-x300`          | base-unit-spacing × 3     |
| `--sjs2-spacing-x400`          | base-unit-spacing × 4     |
| `--sjs2-spacing-x500`          | base-unit-spacing × 5     |
| `--sjs2-spacing-x550`          | base-unit-spacing × 5.5   |
| `--sjs2-spacing-x600`          | base-unit-spacing × 6     |
| `--sjs2-spacing-x700`          | base-unit-spacing × 7     |
| `--sjs2-spacing-x800`          | base-unit-spacing × 8     |
| `--sjs2-spacing-negative-x025` | base-unit-spacing × -0.25 |
| `--sjs2-spacing-negative-x050` | base-unit-spacing × -0.50 |
| `--sjs2-spacing-negative-x075` | base-unit-spacing × -0.75 |
| `--sjs2-spacing-negative-x100` | base-unit-spacing × -1    |
| `--sjs2-spacing-negative-x150` | base-unit-spacing × -1.5  |
| `--sjs2-spacing-negative-x200` | base-unit-spacing × -2    |
| `--sjs2-spacing-negative-x250` | base-unit-spacing × -2.5  |
| `--sjs2-spacing-negative-x300` | base-unit-spacing × -3    |
| `--sjs2-spacing-negative-x400` | base-unit-spacing × -4    |
| `--sjs2-spacing-negative-x500` | base-unit-spacing × -5    |
| `--sjs2-spacing-negative-x600` | base-unit-spacing × -6    |
| `--sjs2-spacing-negative-x700` | base-unit-spacing × -7    |
| `--sjs2-spacing-negative-x800` | base-unit-spacing × -8    |

### Sizing Scale 

| Variable     | Value          |
| ------------ | --------------------- |
| `--sjs2-size-x000`  | [base-unit-size](#base-tokens) × 0 |
| `--sjs2-size-x025`  | base-unit-size × 0.25 |
| `--sjs2-size-x050`  | base-unit-size × 0.50 |
| `--sjs2-size-x075`  | base-unit-size × 0.75 |
| `--sjs2-size-x100`  | base-unit-size × 1    |
| `--sjs2-size-x150`  | base-unit-size × 1.5  |
| `--sjs2-size-x200`  | base-unit-size × 2    |
| `--sjs2-size-x250`  | base-unit-size × 2.5  |
| `--sjs2-size-x300`  | base-unit-size × 3    |
| `--sjs2-size-x350`  | base-unit-size × 3.5  |
| `--sjs2-size-x400`  | base-unit-size × 4    |
| `--sjs2-size-x500`  | base-unit-size × 5    |
| `--sjs2-size-x600`  | base-unit-size × 6    |
| `--sjs2-size-x700`  | base-unit-size × 7    |
| `--sjs2-size-x800`  | base-unit-size × 8    |
| `--sjs2-size-x900`  | base-unit-size × 9    |
| `--sjs2-size-x1000` | base-unit-size × 10   |
| `--sjs2-size-x1100` | base-unit-size × 11   |
| `--sjs2-size-x1200` | base-unit-size × 12   |
| `--sjs2-size-x1300` | base-unit-size × 13   |
| `--sjs2-size-x1400` | base-unit-size × 14   |
| `--sjs2-size-x1500` | base-unit-size × 15   |
| `--sjs2-scale-x000` | [base-unit-scale](#base-tokens) × 0 |
| `--sjs2-scale-x025` | base-unit-scale × 25  |
| `--sjs2-scale-x050` | base-unit-scale × 50  |
| `--sjs2-scale-x075` | base-unit-scale × 75  |
| `--sjs2-scale-x095` | base-unit-scale × 95  |
| `--sjs2-scale-x098` | base-unit-scale × 98  |
| `--sjs2-scale-x100` | base-unit-scale × 100 |
| `--sjs2-scale-x200` | base-unit-scale × 200 |

### Border Width Scale

| Variable            | Value |
| ------------------- | ----- |
| `--sjs2-border-width-x000` | [base-unit-border-width](#base-tokens) × 0 |
| `--sjs2-border-width-x100` | base-unit-border-width × 1 |
| `--sjs2-border-width-x200` | base-unit-border-width × 2 |
| `--sjs2-border-width-x400` | base-unit-border-width × 4 |

### Radius Scale

| Variable            | Value |
| ------------------- | ----- |
| `--sjs2-radius-x000`       | [base-unit-radius](#base-tokens) × 0   |
| `--sjs2-radius-x025`       | base-unit-radius × 0.25    |
| `--sjs2-radius-x050`       | base-unit-radius × 0.50    |
| `--sjs2-radius-x075`       | base-unit-radius × 0.75    |
| `--sjs2-radius-x100`       | base-unit-radius × 1       |
| `--sjs2-radius-x150`       | base-unit-radius × 1.5     |
| `--sjs2-radius-x200`       | base-unit-radius × 2       |
| `--sjs2-radius-x250`       | base-unit-radius × 2.5     |
| `--sjs2-radius-x300`       | base-unit-radius × 3       |
| `--sjs2-radius-x400`       | base-unit-radius × 4       |
| `--sjs2-radius-x500`       | base-unit-radius × 5       |
| `--sjs2-radius-x600`       | base-unit-radius × 6       |
| `--sjs2-radius-x700`       | base-unit-radius × 7       |
| `--sjs2-radius-x800`       | base-unit-radius × 8       |
| `--sjs2-radius-round`      | `"9999px"`                 |

### Opacity Scale 

| Variable       | Value |
| -------------- | ----- |
| `--sjs2-opacity-x000` | [base-unit-opacity](#base-tokens) × 0 |
| `--sjs2-opacity-x005` | base-unit-opacity × 5   |
| `--sjs2-opacity-x010` | base-unit-opacity × 10  |
| `--sjs2-opacity-x015` | base-unit-opacity × 15  |
| `--sjs2-opacity-x020` | base-unit-opacity × 20  |
| `--sjs2-opacity-x025` | base-unit-opacity × 25  |
| `--sjs2-opacity-x030` | base-unit-opacity × 30  |
| `--sjs2-opacity-x035` | base-unit-opacity × 35  |
| `--sjs2-opacity-x040` | base-unit-opacity × 40  |
| `--sjs2-opacity-x045` | base-unit-opacity × 45  |
| `--sjs2-opacity-x050` | base-unit-opacity × 50  |
| `--sjs2-opacity-x055` | base-unit-opacity × 55  |
| `--sjs2-opacity-x060` | base-unit-opacity × 60  |
| `--sjs2-opacity-x065` | base-unit-opacity × 65  |
| `--sjs2-opacity-x070` | base-unit-opacity × 70  |
| `--sjs2-opacity-x075` | base-unit-opacity × 75  |
| `--sjs2-opacity-x080` | base-unit-opacity × 80  |
| `--sjs2-opacity-x085` | base-unit-opacity × 85  |
| `--sjs2-opacity-x090` | base-unit-opacity × 90  |
| `--sjs2-opacity-x095` | base-unit-opacity × 95  |
| `--sjs2-opacity-x100` | base-unit-opacity × 100 |

## Semantic Tokens

### Colors

#### Brand

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-color-project-brand-600` | — | Backgrounds of primary interactive elements (buttons, selections, highlights) |
| `--sjs2-color-project-brand-700` | color-project-brand-600 (-15% L) | Primary interactive foregrounds, hover and pressed states for brand backgrounds |
| `--sjs2-color-project-brand-800` | color-project-brand-600 (-25% L) | Hover and pressed states for brand foregrounds |
| `--sjs2-color-project-brand-400` | color-project-brand-600 (+20% L) | Primary interactive foregrounds on dark surfaces |
| `--sjs2-color-bg-brand-primary` | color-project-brand-600 | Primary buttons, selected controls, active highlights |
| `--sjs2-color-bg-brand-secondary` | color-project-brand-600, [opacity-x010](#opacity-scale) | Soft brand-tinted surfaces |
| `--sjs2-color-bg-brand-tertiary` | color-project-brand-600, opacity-x000 | Very subtle overlays, usually colored on hover only |
| `--sjs2-color-bg-brand-primary-dim` | color-project-brand-700 | Hover and pressed brand surfaces, stronger emphasis states |
| `--sjs2-color-bg-brand-secondary-dim` | color-project-brand-600, opacity-x015 | Hover and pressed states for secondary backgrounds |
| `--sjs2-color-bg-brand-tertiary-dim` | color-project-brand-600, opacity-x010 | Hover and pressed states for tertiary backgrounds |
| `--sjs2-color-bg-brand-primary-disabled` | [palette-gray-100](#palette-scale) | Disabled brand controls and inactive surfaces |
| `--sjs2-color-fg-brand-primary` | color-project-brand-700 | Text and icons on secondary and tertiary brand surfaces, main emphasis content, actions and links |
| `--sjs2-color-fg-brand-primary-dim` | color-project-brand-800 | Hover and pressed states for primary text and icons, actions and links |
| `--sjs2-color-fg-brand-on-primary` | palette-gray-000 | Text and icons on primary brand backgrounds, such as actions/buttons |
| `--sjs2-color-fg-brand-primary-disabled` | [color-fg-neutral-primary](#foreground-tokens-text-and-icons), opacity-x020 | Disabled text and icons in brand-styled components |
| `--sjs2-color-border-brand-primary` | [color-project-brand-600](#brand) | Brand borders (e.g., borders of input fields in focused state) |
| `--sjs2-color-border-brand-on-primary` | palette-gray-000 | Border color on brand primary backgrounds |

#### Basic

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-color-bg-basic-primary` | [palette-gray-000](#palette-scale) | Question panels, primary cards, toast notifications |
| `--sjs2-color-bg-basic-secondary` | palette-gray-100 | Input fields, unselected checkboxes, radio buttons, and toggles, secondary cards |
| `--sjs2-color-bg-basic-tertiary` | palette-gray-150 | Tertiary cards |
| `--sjs2-color-bg-basic-primary-dim` | palette-gray-100 | Hover and pressed states of primary cards |
| `--sjs2-color-bg-basic-secondary-dim` | palette-gray-150 | Hover and pressed states of input fields and unchecked controls |
| `--sjs2-color-bg-basic-tertiary-dim` | palette-gray-200 | Hover and pressed states of tertiary cards |
| `--sjs2-color-bg-basic-primary-disabled` | palette-gray-100 | Disabled state for basic backgrounds |
| `--sjs2-color-fg-basic-primary` | palette-gray-900 | Primary texts, titles and values across the UI, selected states |
| `--sjs2-color-fg-basic-secondary` | color-fg-basic-primary, [opacity-x060](#opacity-scale) | Secondary labels, descriptions, icons |
| `--sjs2-color-fg-basic-tertiary` | color-fg-basic-primary, opacity-x040 | Tertiary texts and icons, unselected states |
| `--sjs2-color-fg-basic-primary-muted` | color-fg-basic-primary, opacity-x080 | Primary icons, selected states |
| `--sjs2-color-fg-basic-primary-disabled` | opacity-x020 | Disabled primary texts and icons, disabled selected states |
| `--sjs2-color-fg-basic-secondary-disabled` | opacity-x020 | Disabled secondary texts and icons |
| `--sjs2-color-fg-basic-tertiary-disabled` | opacity-x020 | Disabled tertiary texts and icons, disabled unselected states |
| `--sjs2-color-border-basic-primary` | palette-gray-900 | High-contrast borders (e.g., borders of highlighted input fields) |
| `--sjs2-color-border-basic-secondary` | palette-gray-250 | Default borders across all components |
| `--sjs2-color-border-basic-secondary-overlay` | color-border-basic-primary, opacity-x040 | Default borders in overlay mode |
| `--sjs2-color-border-basic-secondary-disabled` | palette-gray-100 | Disabled color for default borders |

#### Neutral

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-color-bg-neutral-primary` | [palette-gray-900](#palette-scale) | Neutral primary actions, tooltips |
| `--sjs2-color-bg-neutral-secondary` | palette-gray-100 | Neutral secondary actions |
| `--sjs2-color-bg-neutral-tertiary` | palette-gray-600, [opacity-x000](#opacity-scale) | Neutral tertiary actions |
| `--sjs2-color-bg-neutral-primary-dim` | palette-gray-700 | Hover and pressed states for neutral primary backgrounds |
| `--sjs2-color-bg-neutral-secondary-dim` | palette-gray-150 | Hover and pressed states for neutral secondary backgrounds |
| `--sjs2-color-bg-neutral-tertiary-dim` | palette-gray-600, opacity-x010 | Hover and pressed states for neutral tertiary backgrounds |
| `--sjs2-color-bg-neutral-primary-disabled` | palette-gray-100 | Disabled states for neutral backgrounds |
| `--sjs2-color-fg-neutral-primary` | color-fg-basic-primary | Action labels on neutral secondary and tertiary backgrounds |
| `--sjs2-color-fg-neutral-primary-muted` | color-fg-basic-primary-muted | Action icons on neutral secondary and tertiary backgrounds |
| `--sjs2-color-fg-neutral-on-primary` | palette-gray-000 | Text and icons of actions and tooltips on neutral primary backgrounds |
| `--sjs2-color-fg-neutral-primary-disabled` | opacity-x020 | Disabled text and icons on neutral backgrounds |
| `--sjs2-color-border-neutral-primary` | palette-gray-000 | High-contrast inverted borders |
| `--sjs2-color-border-neutral-on-primary` | palette-gray-000 | Border color on neutral primary backgrounds |

#### Note (Informational)

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-color-bg-note-primary` | [palette-blue-600](#palette-scale) | Primary informational messages, actions in the Survey Creator's Logic tab |
| `--sjs2-color-bg-note-secondary` | palette-blue-600, [opacity-x010](#opacity-scale) | Secondary informational messages, actions in the Logic tab |
| `--sjs2-color-bg-note-tertiary` | palette-blue-600, opacity-x000 | Tertiary informational messages |
| `--sjs2-color-bg-note-primary-dim` | palette-blue-700 | Hover and pressed states for note primary backgrounds |
| `--sjs2-color-bg-note-secondary-dim` | palette-blue-600, opacity-x015 | Hover and pressed states for note secondary backgrounds |
| `--sjs2-color-bg-note-tertiary-dim` | palette-blue-600, opacity-x010 | Hover and pressed states for note tertiary backgrounds |
| `--sjs2-color-bg-note-primary-disabled` | palette-gray-100 | Disabled states for note backgrounds |
| `--sjs2-color-fg-note-primary` | palette-blue-700 | Text and icons of actions, messages, and indicators on note secondary and tertiary backgrounds |
| `--sjs2-color-fg-note-on-primary` | palette-gray-000 | Text and icons of actions, messages, indicators on note primary backgrounds |
| `--sjs2-color-fg-note-primary-disabled` | color-fg-neutral-primary, opacity-x020 | Disabled text and icons on note backgrounds |
| `--sjs2-color-border-note-primary` | palette-blue-600 | Note borders (e.g., borders of informational messages or indicators) |
| `--sjs2-color-border-note-on-primary`| palette-gray-000 | Border color on note primary backgrounds |

#### Positive

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-color-bg-positive-primary` | [palette-green-600](#palette-scale) | Positive primary actions, messages, indicators |
| `--sjs2-color-bg-positive-secondary` | palette-green-600, [opacity-x010](#opacity-scale) | Positive secondary actions, messages, indicators |
| `--sjs2-color-bg-positive-tertiary` | palette-green-600, opacity-x000 | Positive tertiary actions, messages, indicators |
| `--sjs2-color-bg-positive-primary-dim` | palette-green-700 | Hover and pressed states for positive primary backgrounds |
| `--sjs2-color-bg-positive-secondary-dim`| palette-green-600, opacity-x015 | Hover and pressed states for positive secondary backgrounds |
| `--sjs2-color-bg-positive-tertiary-dim`| palette-green-600, opacity-x010 | Hover and pressed states for positive tertiary backgrounds |
| `--sjs2-color-bg-positive-primary-disabled` | palette-gray-100 | Disabled states for positive backgrounds |
| `--sjs2-color-fg-positive-primary` | palette-green-700 | Text and icons of actions, messages, and indicators on positive secondary and tertiary backgrounds |
| `--sjs2-color-fg-positive-on-primary` | palette-gray-000 | Text and icons of actions, messages, and indicators on positive primary backgrounds |
| `--sjs2-color-fg-positive-primary-disabled` | [color-fg-neutral-primary](#neutral), opacity-x020| Disabled text and icons on positive backgrounds |
| `--sjs2-color-border-positive-primary` | palette-green-600 | Positive borders (e.g., borders of success messages or indicators) |
| `--sjs2-color-border-positive-on-primary` | palette-gray-000 | Border color on positive primary backgrounds |

#### Warning

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-color-bg-warning-primary` | [palette-yellow-600](#palette-scale) | Warning primary actions, messages, indicators |
| `--sjs2-color-bg-warning-secondary`| palette-yellow-600, [opacity-x010](#opacity-scale) | Warning secondary actions, messages, indicators |
| `--sjs2-color-bg-warning-tertiary` | palette-yellow-600, opacity-x000 | Warning tertiary actions, messages, indicators |
| `--sjs2-color-bg-warning-primary-dim`| palette-yellow-700 | Hover and pressed states for warning primary backgrounds |
| `--sjs2-color-bg-warning-secondary-dim` | palette-yellow-600, opacity-x015 | Hover and pressed states for warning secondary backgrounds |
| `--sjs2-color-bg-warning-tertiary-dim` | palette-yellow-600, opacity-x010 | Hover and pressed states for warning tertiary backgrounds |
| `--sjs2-color-bg-warning-primary-disabled` | palette-gray-100 | Disabled states for warning backgrounds |
| `--sjs2-color-fg-warning-primary` | palette-yellow-700 | Text and icons of actions, messages, and indicators on warning secondary and tertiary backgrounds |
| `--sjs2-color-fg-warning-on-primary` | palette-gray-000  | Text and icons of actions, messages, and indicators on warning primary backgrounds |
| `--sjs2-color-fg-warning-primary-disabled` | [color-fg-neutral-primary](#neutral), opacity-x020 | Disabled text and icons on warning backgrounds |
| `--sjs2-color-border-warning-primary`| palette-yellow-600 | Warning borders (e.g., borders of warning messages or indicators) |
| `--sjs2-color-border-warning-on-primary` | palette-gray-000 | Border color on warning primary backgrounds |

#### Alert

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-color-bg-alert-primary` | [palette-red-600](#palette-scale) | Alert primary actions, messages, indicators |
| `--sjs2-color-bg-alert-secondary` | palette-red-600, [opacity-x010](#opacity-scale) | Alert secondary actions, messages, indicators |
| `--sjs2-color-bg-alert-tertiary` | palette-red-600, opacity-x000 | Alert tertiary actions, messages, indicators |
| `--sjs2-color-bg-alert-primary-dim` | palette-red-700 | Hover and pressed states for alert primary backgrounds |
| `--sjs2-color-bg-alert-secondary-dim`| palette-red-600, opacity-x015 | Hover and pressed states for alert secondary backgrounds |
| `--sjs2-color-bg-alert-tertiary-dim` | palette-red-600, opacity-x010 | Hover and pressed states for alert tertiary backgrounds |
| `--sjs2-color-bg-alert-primary-disabled` | palette-gray-100 | Disabled states for alert backgrounds |
| `--sjs2-color-fg-alert-primary` | palette-red-700 | Text and icons of actions, messages, and indicators on alert secondary and tertiary backgrounds |
| `--sjs2-color-fg-alert-on-primary` | palette-gray-000 | Text and icons of actions, messages, and indicators on alert primary backgrounds |
| `--sjs2-color-fg-alert-primary-disabled` | [color-fg-neutral-primary](#neutral), opacity-x020 | Disabled text and icons on alert backgrounds |
| `--sjs2-color-border-alert-primary`| palette-red-600 | Alert borders (e.g., borders of input fields in invalid state) |
| `--sjs2-color-border-alert-on-primary` | palette-gray-000 | Border color on alert primary backgrounds |

#### Static (Contextual)

| Variable | Value | Role |
| -------- | ------------ | ---- |
| `--sjs2-color-bg-static-1-primary` | [palette-gray-900](#palette-scale) | Dark/static primary background |
| `--sjs2-color-bg-static-1-secondary` | palette-gray-900, [opacity-x010](#opacity-scale) | Dark/static secondary background |
| `--sjs2-color-bg-static-1-primary-dim` | palette-gray-700 | Dimmed dark/static primary background |
| `--sjs2-color-bg-static-1-secondary-dim` | palette-gray-900, opacity-x015 | Dimmed dark/static secondary background |
| `--sjs2-color-bg-static-2-primary` | palette-gray-000 | Light/static primary background |
| `--sjs2-color-bg-static-2-secondary` | palette-gray-000, opacity-x010 | Light/static secondary background |
| `--sjs2-color-bg-static-2-primary-dim` | palette-gray-100 (+10% L) | Dimmed light/static primary background |
| `--sjs2-color-bg-static-2-secondary-dim` | palette-gray-000, opacity-x015 | Dimmed light/static secondary background |
| `--sjs2-color-fg-static-1-primary` | palette-gray-000 | Foreground on dark/static backgrounds |
| `--sjs2-color-fg-static-2-primary` | palette-gray-900 | Foreground on light/static backgrounds |
| `--sjs2-color-border-static-1-primary` | palette-gray-000 | Static borders, do not change between light and dark theme variations |
| `--sjs2-color-border-static-2-primary` | palette-gray-900 | Static borders, do not change between light and dark theme variations |

#### Utility

| Variable | Value | Role |
| -------- | ------------ | ---- |
| `--sjs2-color-utility-shadow-floating-default` | `#004C44`, [opacity-x015](#opacity-scale) | Subtle shadow tint for floating surfaces |
| `--sjs2-color-utility-shadow-surface-default`  | [palette-gray-999](#palette-scale), opacity-x010 | Default surface shadow for resting state containers |
| `--sjs2-color-utility-shadow-surface-disabled` | palette-gray-999, opacity-x010 | Disabled surface shadow (muted depth indication) |
| `--sjs2-color-utility-shadow-surface-dragging` | `#004C44`, opacity-x015 | Shadow for dragged surfaces indicating lift and motion |
| `--sjs2-color-utility-shadow-surface-focused`  | [color-project-brand-600](#brand) | Focus accent shadow for active surface emphasis |
| `--sjs2-color-utility-shadow-surface-hovered`  | color-project-brand-600, opacity-x040 | Hover highlight shadow for interactive surfaces |
| `--sjs2-color-utility-shadow-surface-pressed`  | color-project-brand-600 | Pressed state shadow reinforcing interaction feedback |
| `--sjs2-color-utility-shadow-trigger-default`  | [color-border-basic-secondary](#basic) | Default shadow/border tint for interactive controls |
| `--sjs2-color-utility-shadow-trigger-design`   | color-border-basic-secondary | Design-time trigger emphasis (same base as default) |
| `--sjs2-color-utility-shadow-trigger-disabled` | color-border-basic-secondary-disabled | Disabled trigger visual state |
| `--sjs2-color-utility-shadow-trigger-hovered`  | color-border-basic-secondary | Hover state emphasis for triggers |
| `--sjs2-color-utility-shadow-trigger-invalid`  | [color-border-alert-primary](#alert) | Error state emphasis for invalid controls |
| `--sjs2-color-utility-shadow-trigger-pressed`  | color-border-basic-secondary | Pressed state emphasis for triggers |
| `--sjs2-color-utility-shadow-trigger-readonly` | color-border-basic-primary | Read-only state emphasis for non-editable controls |
| `--sjs2-color-utility-body` | palette-gray-000 | Page background layer |
| `--sjs2-color-utility-sheet` | palette-gray-000 | Background color of elevated overlay surfaces (modals, bottom sheets, dropdowns) |
| `--sjs2-color-utility-overlay` | palette-gray-000 | Backdrop color behind modals and bottom sheets |
| `--sjs2-color-utility-surface-survey` | `#1c1b200d` | Survey background color |
| `--sjs2-color-utility-surface-survey-panelless` | palette-gray-000 | Survey background color in panelless layout |

### Radius

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-radius-form` | [radius-x100](#radius-scale) | Input fields, buttons, actions |
| `--sjs2-radius-form-item` | radius-x050  | Small elements inside input fields, buttons, and actions (e.g., swatch color preview, tag box or button group item, question box action) |

### Sizes

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-size-xxx-small` | [size-x200](#sizing-scale) | Small controls and dense UI elements |
| `--sjs2-size-xx-small` | size-x300 | Compact controls and components |
| `--sjs2-size-x-small` | size-x400 | Small controls and components |
| `--sjs2-size-small` | size-x500 | Smaller controls and UI elements |
| `--sjs2-size-medium` | size-x600 | Standard controls and components |
| `--sjs2-size-large` | size-x700 | Larger controls and prominent UI elements |

### Spacing

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-spacing-medium-horizontal` | [spacing-x300](#spacing-scale) | Horizontal gaps and padding |
| `--sjs2-spacing-medium-vertical` | spacing-x300 | Vertical gaps and padding |
| `--sjs2-spacing-large-horizontal` | spacing-x500 | Larger gaps and spacious layouts |
| `--sjs2-spacing-large-vertical` | spacing-x500 | Larger gaps and spacious layouts |

### Opacity

| Variable           | Value | Affects |
| ------------------ | ----- | ------- |
| `--sjs2-opacity-visible`  | [opacity-x100](#opacity-scale) | Fully visible UI elements, active content, standard rendering |
| `--sjs2-opacity-hovered`  | opacity-x100 | Hovered interactive elements and hover-state overlays |
| `--sjs2-opacity-pressed`  | opacity-x100 | Pressed controls and interaction feedback states |
| `--sjs2-opacity-disabled` | opacity-x025 | Disabled controls, inactive content, unavailable actions |
| `--sjs2-opacity-hidden`   | opacity-x000 | Fully transparent or visually hidden elements |

### Border Effects

#### Primitives

| Variable | Value |
|--------- | ----- |
| `--sjs2-border-spread-floating-default` | 0px |
| `--sjs2-border-blur-floating-default` | 20px |
| `--sjs2-border-offset-x-floating-default` | 0px |
| `--sjs2-border-offset-y-floating-default` | 6px |
| `--sjs2-border-spread-surface-default` | [border-width-x100](#border-width-scale) |
| `--sjs2-border-spread-surface-hovered` | border-width-x200 |
| `--sjs2-border-spread-surface-pressed` | border-width-x200 |
| `--sjs2-border-spread-surface-focused` | border-width-x200 |
| `--sjs2-border-spread-surface-disabled` | border-width-x100 |
| `--sjs2-border-spread-surface-dragging` | 4px |
| `--sjs2-border-blur-surface-default` | 0px |
| `--sjs2-border-blur-surface-hovered` | 0px |
| `--sjs2-border-blur-surface-pressed` | 0px |
| `--sjs2-border-blur-surface-focused` | 0px |
| `--sjs2-border-blur-surface-disabled` | 0px |
| `--sjs2-border-blur-surface-dragging` | 12px |
| `--sjs2-border-offset-x-surface-default` | 0px |
| `--sjs2-border-offset-x-surface-hovered` | 0px |
| `--sjs2-border-offset-x-surface-pressed` | 0px |
| `--sjs2-border-offset-x-surface-focused` | 0px |
| `--sjs2-border-offset-x-surface-disabled` | 0px |
| `--sjs2-border-offset-x-surface-dragging` | 0px |
| `--sjs2-border-offset-y-surface-default` | 0px |
| `--sjs2-border-offset-y-surface-hovered` | 0px |
| `--sjs2-border-offset-y-surface-pressed` | 0px |
| `--sjs2-border-offset-y-surface-focused` | 0px |
| `--sjs2-border-offset-y-surface-disabled` | 0px |
| `--sjs2-border-offset-y-surface-dragging` | 6px |
| `--sjs2-border-spread-trigger-default` | border-width-x100 |
| `--sjs2-border-spread-trigger-hovered` | border-width-x100 |
| `--sjs2-border-spread-trigger-pressed` | border-width-x100 |
| `--sjs2-border-spread-trigger-disabled` | border-width-x100 |
| `--sjs2-border-spread-trigger-design` | border-width-x100 |
| `--sjs2-border-spread-trigger-readonly` | border-width-x100 |
| `--sjs2-border-spread-trigger-invalid` | border-width-x100 |
| `--sjs2-border-blur-trigger-default` | 0px |
| `--sjs2-border-blur-trigger-hovered` | 0px |
| `--sjs2-border-blur-trigger-pressed` | 0px |
| `--sjs2-border-blur-trigger-disabled` | 0px |
| `--sjs2-border-blur-trigger-design` | 0px |
| `--sjs2-border-blur-trigger-readonly` | 0px |
| `--sjs2-border-blur-trigger-invalid` | 0px |
| `--sjs2-border-offset-x-trigger-default` | 0px |
| `--sjs2-border-offset-x-trigger-hovered` | 0px |
| `--sjs2-border-offset-x-trigger-pressed` | 0px |
| `--sjs2-border-offset-x-trigger-disabled` | 0px |
| `--sjs2-border-offset-x-trigger-design` | 0px |
| `--sjs2-border-offset-x-trigger-readonly` | 0px |
| `--sjs2-border-offset-x-trigger-invalid` | 0px |
| `--sjs2-border-offset-y-trigger-default` | 0px |
| `--sjs2-border-offset-y-trigger-hovered` | 0px |
| `--sjs2-border-offset-y-trigger-pressed` | 0px |
| `--sjs2-border-offset-y-trigger-disabled` | 0px |
| `--sjs2-border-offset-y-trigger-design` | 0px |
| `--sjs2-border-offset-y-trigger-readonly` | 0px |
| `--sjs2-border-offset-y-trigger-invalid` | 0px |
| `--sjs2-border-spread-form-default` | border-width-x100 |
| `--sjs2-border-spread-form-hovered` | border-width-x100 |
| `--sjs2-border-spread-form-pressed` | border-width-x100 |
| `--sjs2-border-spread-form-focused` | border-width-x200 |
| `--sjs2-border-spread-form-highlighted` | border-width-x200 |
| `--sjs2-border-spread-form-disabled` | border-width-x100 |
| `--sjs2-border-spread-form-invalid` | border-width-x100 |
| `--sjs2-border-spread-form-invalid-focused` | border-width-x200 |
| `--sjs2-border-spread-form-readonly` | border-width-x100 |
| `--sjs2-border-spread-form-design` | border-width-x100 |
| `--sjs2-border-blur-form-default` | 0px |
| `--sjs2-border-blur-form-hovered` | 0px |
| `--sjs2-border-blur-form-pressed` | 0px |
| `--sjs2-border-blur-form-focused` | 0px |
| `--sjs2-border-blur-form-highlighted` | 0px |
| `--sjs2-border-blur-form-disabled` | 0px |
| `--sjs2-border-blur-form-invalid` | 0px |
| `--sjs2-border-blur-form-invalid-focused` | 0px |
| `--sjs2-border-blur-form-readonly` | 0px |
| `--sjs2-border-blur-form-design` | 0px |
| `--sjs2-border-offset-x-form-default` | 0px |
| `--sjs2-border-offset-x-form-hovered` | 0px |
| `--sjs2-border-offset-x-form-pressed` | 0px |
| `--sjs2-border-offset-x-form-focused` | 0px |
| `--sjs2-border-offset-x-form-highlighted` | 0px |
| `--sjs2-border-offset-x-form-disabled` | 0px |
| `--sjs2-border-offset-x-form-invalid` | 0px |
| `--sjs2-border-offset-x-form-invalid-focused` | 0px |
| `--sjs2-border-offset-x-form-readonly` | 0px |
| `--sjs2-border-offset-x-form-design` | 0px |
| `--sjs2-border-offset-y-form-default` | 0px |
| `--sjs2-border-offset-y-form-hovered` | 0px |
| `--sjs2-border-offset-y-form-pressed` | 0px |
| `--sjs2-border-offset-y-form-focused` | 0px |
| `--sjs2-border-offset-y-form-highlighted` | 0px |
| `--sjs2-border-offset-y-form-disabled` | 0px |
| `--sjs2-border-offset-y-form-invalid` | 0px |
| `--sjs2-border-offset-y-form-invalid-focused` | 0px |
| `--sjs2-border-offset-y-form-readonly` | 0px |
| `--sjs2-border-offset-y-form-design` | 0px |

#### Floating Layers

| Variable | Value | Role |
| -------- | ----- | ---- |
| `--sjs2-border-effect-floating-default` | [Default floating primitives](#primitives) + [color-utility-shadow-floating-default](#utility) | Default elevation effect for floating surfaces |

#### Surfaces

| Variable | Value | Role |
| -------- | ----- | ---- |
| `--sjs2-border-effect-surface-default` | [Default surface primitives](#primitives) + [color-utility-shadow-surface-default](#utility) | Default surface outline/elevation for static containers |
| `--sjs2-border-effect-surface-disabled` | Disabled surface primitives + color-utility-shadow-surface-disabled | Disabled surface state styling for containers |
| `--sjs2-border-effect-surface-dragging` | Dragging surface primitives + color-utility-shadow-surface-dragging | Elevated effect indicating drag interaction |
| `--sjs2-border-effect-surface-focused` | Focused surface primitives + color-utility-shadow-surface-focused | Focus indication for surface-level components |
| `--sjs2-border-effect-surface-hovered` | Hovered surface primitives + color-utility-shadow-surface-hovered | Hover feedback for surface-level components |
| `--sjs2-border-effect-surface-pressed` | Pressed surface primitives + color-utility-shadow-surface-pressed | Pressed interaction feedback for surfaces |

#### Triggers

| Variable | Value | Role |
| -------- | ----- | ---- |
| `--sjs2-border-effect-trigger-default` | [Default trigger primitives](#primitives) + [color-utility-shadow-trigger-default](#utility) | Default state for interactive controls |
| `--sjs2-border-effect-trigger-design` | Design trigger primitives + color-utility-shadow-trigger-design | Design-time emphasis state for interactive controls |
| `--sjs2-border-effect-trigger-disabled` | Disabled trigger primitives + color-utility-shadow-trigger-disabled | Disabled state styling for interactive controls |
| `--sjs2-border-effect-trigger-hovered` | Hovered trigger primitives + color-utility-shadow-trigger-hovered  | Hover feedback for interactive controls |
| `--sjs2-border-effect-trigger-invalid`  | Invalid trigger primitives + color-utility-shadow-trigger-invalid  | Validation error state for interactive controls |
| `--sjs2-border-effect-trigger-pressed`  | Pressed trigger primitives + color-utility-shadow-trigger-pressed  | Pressed interaction state for interactive controls |
| `--sjs2-border-effect-trigger-readonly` | Read-only trigger primitives + color-utility-shadow-trigger-readonly | Read-only state styling for UI controls |

### Typography

| Variable | Value | Affects |
| -------- | ----- | ------- |
| `--sjs2-typography-font-family-text` | `"Open Sans"` | Default UI text |
| `--sjs2-typography-font-family-code` | `"DM Mono"` | Embedded code examples |
| `--sjs2-typography-font-weight-basic` | [font-weight-regular](#typography-scale) | Default font weight for any text (input content, labels, descriptions, etc.) |
| `--sjs2-typography-font-weight-strong` | font-weight-semibold | Titles (headings & subheadings), text in selected state |
| `--sjs2-typography-font-size-small` | [font-size-x150](#typography-scale) | Footnote text |
| `--sjs2-typography-font-size-default` | font-size-x200 | Body text |
| `--sjs2-typography-font-size-medium` | font-size-x300 | Subheading text |
| `--sjs2-typography-font-size-large` | font-size-x400 | Heading text |
| `--sjs2-typography-line-height-small` | [line-height-x200](#typography-scale) | Footnote text |
| `--sjs2-typography-line-height-default` | line-height-x300 | Body text |
| `--sjs2-typography-line-height-medium` | line-height-x400 | Subheading text |
| `--sjs2-typography-line-height-large` | line-height-x500 | Heading text |

### Survey Creator Tokens

| Variable | Value | Role |
| -------- | ----- | ---- |
| `--sjs2-color-utility-surface-designer` | `#edf9f7` | Background color in the Designer tab |
| `--sjs2-color-utility-surface-logic` | color-utility-surface-designer | Background color in the Logic tab |
| `--sjs2-color-utility-surface-json-editor` | color-utility-surface-designer | Background color in the JSON Editor tab |
| `--sjs2-color-utility-surface-translations` | color-utility-surface-designer | Background color in the Translations tab |
| `--sjs2-color-utility-surface-embed` | color-utility-surface-designer | Background color in the Embed Survey tab |
| `--sjs2-color-utility-surface-presets-manager` | `#1c1b200d` | Background color in the UI Preset Editor |

### Dashboard Tokens

| Variable | Value | Role |
| -------- | ------------ | ---- |
| `--sjs2-color-utility-surface-dashboard` | [color-utility-surface-survey](#utility) | Background surface for dashboard views |
| `--sjs2-color-data-grid-fg-label` | [color-fg-basic-primary](#basic) | Color for labels on the chart axis |
| `--sjs2-color-data-grid-border-axis` | [color-border-basic-primary](#basic) | Color for the chart axis |
| `--sjs2-color-data-grid-border-line` | [color-border-basic-secondary](#basic) | Color for grid lines |
| `--sjs2-color-data-chart-bg-color-1` | `#84CAD4` | Chart palette color 1 |
| `--sjs2-color-data-chart-bg-color-2` | `#3A99FB` | Chart palette color 2 |
| `--sjs2-color-data-chart-bg-color-3` | `#FF6771` | Chart palette color 3 |
| `--sjs2-color-data-chart-bg-color-4` | `#1DB496` | Chart palette color 4 |
| `--sjs2-color-data-chart-bg-color-5` | `#FFC152` | Chart palette color 5 |
| `--sjs2-color-data-chart-bg-color-6` | `#ABA1FF` | Chart palette color 6 |
| `--sjs2-color-data-chart-bg-color-7` | `#7D8CA5` | Chart palette color 7 |
| `--sjs2-color-data-chart-bg-color-8` | `#4FC46C` | Chart palette color 8 |
| `--sjs2-color-data-chart-bg-color-9` | `#E87BCB` | Chart palette color 9 |
| `--sjs2-color-data-chart-bg-color-10`| `#4E6198` | Chart palette color 10 |
| `--sjs2-color-data-chart-border-color-1` | color-data-chart-bg-color-1 | Border palette color 1 |
| `--sjs2-color-data-chart-border-color-2` | color-data-chart-bg-color-2 | Border palette color 2 |
| `--sjs2-color-data-chart-border-color-3` | color-data-chart-bg-color-3 | Border palette color 3 |
| `--sjs2-color-data-chart-border-color-4` | color-data-chart-bg-color-4 | Border palette color 4 |
| `--sjs2-color-data-chart-border-color-5` | color-data-chart-bg-color-5 | Border palette color 5 |
| `--sjs2-color-data-chart-border-color-6` | color-data-chart-bg-color-6 | Border palette color 6 |
| `--sjs2-color-data-chart-border-color-7` | color-data-chart-bg-color-7 | Border palette color 7 |
| `--sjs2-color-data-chart-border-color-8` | color-data-chart-bg-color-8 | Border palette color 8 |
| `--sjs2-color-data-chart-border-color-9` | color-data-chart-bg-color-9 | Border palette color 9 |
| `--sjs2-color-data-chart-border-color-10`| color-data-chart-bg-color-10 | Border palette color 10 |
| `--sjs2-color-data-chart-fg-on-color-1` | [palette-gray-000](#palette-scale) | Text and icon color 1 |
| `--sjs2-color-data-chart-fg-on-color-2` | palette-gray-000 | Text and icon color 2 |
| `--sjs2-color-data-chart-fg-on-color-3` | palette-gray-000 | Text and icon color 3 |
| `--sjs2-color-data-chart-fg-on-color-4` | palette-gray-000 | Text and icon color 4 |
| `--sjs2-color-data-chart-fg-on-color-5` | palette-gray-000 | Text and icon color 5 |
| `--sjs2-color-data-chart-fg-on-color-6` | palette-gray-000 | Text and icon color 6 |
| `--sjs2-color-data-chart-fg-on-color-7` | palette-gray-000 | Text and icon color 7 |
| `--sjs2-color-data-chart-fg-on-color-8` | palette-gray-000 | Text and icon color 8 |
| `--sjs2-color-data-chart-fg-on-color-9` | palette-gray-000 | Text and icon color 9 |
| `--sjs2-color-data-chart-fg-on-color-10`| palette-gray-000 | Text and icon color 10 |

## Component Tokens

### Buttons & Actions

<div id="-component-action-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-action-xx-small-label-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-action-xx-small-label-padding-horizontal` | spacing-x025 |
| `--sjs2-layout-component-action-xx-small-icon-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-action-xx-small-icon-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-action-xx-small-box-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-action-xx-small-box-padding-horizontal` | spacing-x050 |
| `--sjs2-layout-component-action-xx-small-box-gap` | spacing-x000 |
| `--sjs2-layout-component-action-x-small-label-padding-horizontal` | spacing-x050 |
| `--sjs2-layout-component-action-x-small-label-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-action-x-small-icon-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-action-x-small-icon-padding-horizontal` | spacing-x050 |
| `--sjs2-layout-component-action-x-small-box-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-action-x-small-box-padding-horizontal` | spacing-x050 |
| `--sjs2-layout-component-action-x-small-box-gap` | spacing-x000 |
| `--sjs2-layout-component-action-small-label-padding-horizontal` | spacing-x075 |
| `--sjs2-layout-component-action-small-label-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-action-small-icon-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-action-small-icon-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-action-small-box-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-action-small-box-padding-horizontal` | spacing-x100 |
| `--sjs2-layout-component-action-small-box-gap` | spacing-x000 |
| `--sjs2-layout-component-action-medium-label-padding-horizontal` | spacing-x100 |
| `--sjs2-layout-component-action-medium-label-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-action-medium-icon-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-action-medium-icon-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-action-medium-box-padding-vertical` | spacing-x150 |
| `--sjs2-layout-component-action-medium-box-padding-horizontal` | spacing-x150 |
| `--sjs2-layout-component-action-medium-box-gap` | spacing-x000 |
| `--sjs2-layout-component-action-large-label-padding-horizontal` | spacing-x200 |
| `--sjs2-layout-component-action-large-label-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-action-large-icon-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-action-large-icon-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-action-large-box-padding-vertical` | spacing-x200 |
| `--sjs2-layout-component-action-large-box-padding-horizontal` | spacing-x200 |
| `--sjs2-layout-component-action-large-box-gap` | spacing-x000 |
| `--sjs2-size-component-action-large-icon` | typography-line-height-component-action-large-content |
| `--sjs2-size-component-action-medium-icon` | typography-line-height-component-action-medium-content |
| `--sjs2-size-component-action-small-icon` | typography-line-height-component-action-small-content |
| `--sjs2-size-component-action-x-small-icon` | typography-line-height-component-action-x-small-content |
| `--sjs2-size-component-action-xx-small-icon` | typography-line-height-component-action-xx-small-content |
| `--sjs2-radius-component-action` | radius-form |
| `--sjs2-typography-font-family-component-action-large-content` | typography-font-family-text |
| `--sjs2-typography-font-family-component-action-medium-content` | typography-font-family-text |
| `--sjs2-typography-font-family-component-action-small-content` | typography-font-family-text |
| `--sjs2-typography-font-family-component-action-x-small-content` | typography-font-family-text |
| `--sjs2-typography-font-family-component-action-xx-small-content` | typography-font-family-text |
| `--sjs2-typography-font-size-component-action-large-content` | typography-font-size-default |
| `--sjs2-typography-font-size-component-action-medium-content` | typography-font-size-default |
| `--sjs2-typography-font-size-component-action-small-content` | typography-font-size-default |
| `--sjs2-typography-font-size-component-action-x-small-content` | typography-font-size-small |
| `--sjs2-typography-font-size-component-action-xx-small-content` | typography-font-size-small |
| `--sjs2-typography-line-height-component-action-large-content` | typography-line-height-default |
| `--sjs2-typography-line-height-component-action-medium-content` | typography-line-height-default |
| `--sjs2-typography-line-height-component-action-small-content` | typography-line-height-default |
| `--sjs2-typography-line-height-component-action-x-small-content` | typography-line-height-small |
| `--sjs2-typography-line-height-component-action-xx-small-content` | typography-line-height-small |
| `--sjs2-typography-font-weight-component-action-large-content` | typography-font-weight-strong |
| `--sjs2-typography-font-weight-component-action-medium-content` | typography-font-weight-strong |
| `--sjs2-typography-font-weight-component-action-small-content` | typography-font-weight-strong |
| `--sjs2-typography-font-weight-component-action-x-small-content` | typography-font-weight-strong |
| `--sjs2-typography-font-weight-component-action-xx-small-content` | typography-font-weight-strong |
| `--sjs2-color-component-action-alert-primary-default-bg` | color-bg-alert-primary |
| `--sjs2-color-component-action-alert-primary-default-icon` | color-fg-alert-on-primary |
| `--sjs2-color-component-action-alert-primary-default-label` | color-fg-alert-on-primary |
| `--sjs2-color-component-action-alert-primary-hovered-bg` | color-bg-alert-primary-dim |
| `--sjs2-color-component-action-alert-primary-hovered-icon` | color-fg-alert-on-primary |
| `--sjs2-color-component-action-alert-primary-hovered-label` | color-fg-alert-on-primary |
| `--sjs2-color-component-action-alert-primary-disabled-bg` | color-bg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-primary-disabled-icon` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-primary-disabled-label` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-secondary-default-bg` | color-bg-alert-secondary |
| `--sjs2-color-component-action-alert-secondary-default-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-secondary-default-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-secondary-hovered-bg` | color-bg-alert-secondary-dim |
| `--sjs2-color-component-action-alert-secondary-hovered-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-secondary-hovered-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-secondary-disabled-bg` | color-bg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-secondary-disabled-icon` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-secondary-disabled-label` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-default-bg` | color-bg-alert-tertiary |
| `--sjs2-color-component-action-alert-tertiary-default-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-default-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-hovered-bg` | color-bg-alert-tertiary-dim |
| `--sjs2-color-component-action-alert-tertiary-hovered-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-hovered-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-disabled-bg` | color-bg-alert-tertiary, opacity-hidden |
| `--sjs2-color-component-action-alert-tertiary-disabled-icon` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-disabled-label` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-muted-default-bg` | color-bg-alert-tertiary |
| `--sjs2-color-component-action-alert-tertiary-muted-default-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-alert-tertiary-muted-default-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-alert-tertiary-muted-hovered-bg` | color-bg-alert-tertiary-dim |
| `--sjs2-color-component-action-alert-tertiary-muted-hovered-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-muted-hovered-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-muted-disabled-bg` | color-bg-alert-tertiary, opacity-hidden |
| `--sjs2-color-component-action-alert-tertiary-muted-disabled-icon` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-muted-disabled-label` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-quaternary-default-bg` | color-bg-alert-tertiary |
| `--sjs2-color-component-action-alert-quaternary-default-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-alert-quaternary-default-label` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-alert-quaternary-hovered-bg` | color-bg-alert-tertiary-dim |
| `--sjs2-color-component-action-alert-quaternary-hovered-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-quaternary-hovered-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-quaternary-disabled-bg` | color-bg-alert-tertiary, opacity-hidden |
| `--sjs2-color-component-action-alert-quaternary-disabled-icon` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-quaternary-disabled-label` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-surface-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-action-alert-tertiary-surface-default-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-surface-default-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-surface-hovered-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-action-alert-tertiary-surface-hovered-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-surface-hovered-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-surface-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-surface-disabled-icon` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-surface-disabled-label` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-default-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-default-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-hovered-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-hovered-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-hovered-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-disabled-icon` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-tertiary-muted-surface-disabled-label` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-quaternary-surface-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-action-alert-quaternary-surface-default-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-alert-quaternary-surface-default-label` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-alert-quaternary-surface-hovered-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-action-alert-quaternary-surface-hovered-icon` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-quaternary-surface-hovered-label` | color-fg-alert-primary |
| `--sjs2-color-component-action-alert-quaternary-surface-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-action-alert-quaternary-surface-disabled-icon` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-alert-quaternary-surface-disabled-label` | color-fg-alert-primary-disabled |
| `--sjs2-color-component-action-brand-primary-default-bg` | color-bg-brand-primary |
| `--sjs2-color-component-action-brand-primary-default-icon` | color-fg-brand-on-primary |
| `--sjs2-color-component-action-brand-primary-default-label` | color-fg-brand-on-primary |
| `--sjs2-color-component-action-brand-primary-hovered-bg` | color-bg-brand-primary-dim |
| `--sjs2-color-component-action-brand-primary-hovered-icon` | color-fg-brand-on-primary |
| `--sjs2-color-component-action-brand-primary-hovered-label` | color-fg-brand-on-primary |
| `--sjs2-color-component-action-brand-primary-disabled-bg` | color-bg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-primary-disabled-icon` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-primary-disabled-label` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-secondary-default-bg` | color-bg-brand-secondary |
| `--sjs2-color-component-action-brand-secondary-default-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-secondary-default-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-secondary-hovered-bg` | color-bg-brand-secondary-dim |
| `--sjs2-color-component-action-brand-secondary-hovered-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-secondary-hovered-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-secondary-disabled-bg` | color-bg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-secondary-disabled-icon` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-secondary-disabled-label` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-default-bg` | color-bg-brand-tertiary |
| `--sjs2-color-component-action-brand-tertiary-default-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-default-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-hovered-bg` | color-bg-brand-tertiary-dim |
| `--sjs2-color-component-action-brand-tertiary-hovered-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-hovered-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-disabled-bg` | color-bg-brand-tertiary, opacity-hidden |
| `--sjs2-color-component-action-brand-tertiary-disabled-icon` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-disabled-label` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-muted-default-bg` | color-bg-brand-tertiary |
| `--sjs2-color-component-action-brand-tertiary-muted-default-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-brand-tertiary-muted-default-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-brand-tertiary-muted-hovered-bg` | color-bg-brand-tertiary-dim |
| `--sjs2-color-component-action-brand-tertiary-muted-hovered-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-muted-hovered-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-muted-disabled-bg` | color-bg-brand-tertiary, opacity-hidden |
| `--sjs2-color-component-action-brand-tertiary-muted-disabled-icon` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-muted-disabled-label` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-quaternary-default-bg` | color-bg-brand-tertiary |
| `--sjs2-color-component-action-brand-quaternary-default-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-brand-quaternary-default-label` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-brand-quaternary-hovered-bg` | color-bg-brand-tertiary-dim |
| `--sjs2-color-component-action-brand-quaternary-hovered-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-quaternary-hovered-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-quaternary-disabled-bg` | color-bg-brand-tertiary, opacity-hidden |
| `--sjs2-color-component-action-brand-quaternary-disabled-icon` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-quaternary-disabled-label` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-surface-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-action-brand-tertiary-surface-default-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-surface-default-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-surface-hovered-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-action-brand-tertiary-surface-hovered-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-surface-hovered-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-surface-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-surface-disabled-icon` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-surface-disabled-label` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-default-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-default-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-hovered-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-hovered-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-hovered-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-disabled-icon` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-tertiary-muted-surface-disabled-label` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-quaternary-surface-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-action-brand-quaternary-surface-default-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-brand-quaternary-surface-default-label` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-brand-quaternary-surface-hovered-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-action-brand-quaternary-surface-hovered-icon` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-quaternary-surface-hovered-label` | color-fg-brand-primary |
| `--sjs2-color-component-action-brand-quaternary-surface-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-action-brand-quaternary-surface-disabled-icon` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-brand-quaternary-surface-disabled-label` | color-fg-brand-primary-disabled |
| `--sjs2-color-component-action-neutral-primary-default-bg` | color-bg-neutral-primary |
| `--sjs2-color-component-action-neutral-primary-default-icon` | color-fg-neutral-on-primary |
| `--sjs2-color-component-action-neutral-primary-default-label` | color-fg-neutral-on-primary |
| `--sjs2-color-component-action-neutral-primary-hovered-bg` | color-bg-neutral-primary-dim |
| `--sjs2-color-component-action-neutral-primary-hovered-icon` | color-fg-neutral-on-primary |
| `--sjs2-color-component-action-neutral-primary-hovered-label` | color-fg-neutral-on-primary |
| `--sjs2-color-component-action-neutral-primary-disabled-bg` | color-bg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-primary-disabled-icon` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-primary-disabled-label` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-secondary-default-bg` | color-bg-neutral-secondary |
| `--sjs2-color-component-action-neutral-secondary-default-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-secondary-default-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-secondary-hovered-bg` | color-bg-neutral-secondary-dim |
| `--sjs2-color-component-action-neutral-secondary-hovered-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-secondary-hovered-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-secondary-disabled-bg` | color-bg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-secondary-disabled-icon` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-secondary-disabled-label` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-tertiary-default-bg` | color-bg-neutral-tertiary |
| `--sjs2-color-component-action-neutral-tertiary-default-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-tertiary-default-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-tertiary-hovered-bg` | color-bg-neutral-tertiary-dim |
| `--sjs2-color-component-action-neutral-tertiary-hovered-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-tertiary-hovered-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-tertiary-disabled-bg` | color-bg-neutral-tertiary, opacity-hidden |
| `--sjs2-color-component-action-neutral-tertiary-disabled-icon` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-tertiary-disabled-label` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-quaternary-default-bg` | color-bg-neutral-tertiary |
| `--sjs2-color-component-action-neutral-quaternary-default-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-neutral-quaternary-default-label` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-neutral-quaternary-hovered-bg` | color-bg-neutral-tertiary-dim |
| `--sjs2-color-component-action-neutral-quaternary-hovered-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-quaternary-hovered-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-quaternary-disabled-bg` | color-bg-neutral-tertiary, opacity-hidden |
| `--sjs2-color-component-action-neutral-quaternary-disabled-icon` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-quaternary-disabled-label` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-tertiary-surface-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-action-neutral-tertiary-surface-default-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-tertiary-surface-default-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-tertiary-surface-hovered-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-action-neutral-tertiary-surface-hovered-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-tertiary-surface-hovered-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-tertiary-surface-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-action-neutral-tertiary-surface-disabled-icon` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-tertiary-surface-disabled-label` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-quaternary-surface-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-action-neutral-quaternary-surface-default-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-neutral-quaternary-surface-default-label` | color-fg-basic-tertiary |
| `--sjs2-color-component-action-neutral-quaternary-surface-hovered-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-action-neutral-quaternary-surface-hovered-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-quaternary-surface-hovered-label` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-action-neutral-quaternary-surface-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-action-neutral-quaternary-surface-disabled-icon` | color-fg-neutral-primary-disabled |
| `--sjs2-color-component-action-neutral-quaternary-surface-disabled-label` | color-fg-neutral-primary-disabled |
| `--sjs2-border-effect-component-action-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-action-alert-primary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-alert-primary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-alert-primary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-alert-secondary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-alert-secondary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-alert-secondary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-alert-tertiary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-alert-tertiary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-alert-tertiary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-alert-quaternary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-alert-quaternary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-alert-quaternary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-alert-tertiary-muted-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-alert-tertiary-muted-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-alert-tertiary-muted-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-alert-tertiary-surface-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-alert-tertiary-surface-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-alert-tertiary-surface-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-alert-tertiary-muted-surface-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-alert-tertiary-muted-surface-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-alert-tertiary-muted-surface-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-alert-quaternary-surface-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-alert-quaternary-surface-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-alert-quaternary-surface-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-brand-primary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-brand-primary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-brand-primary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-brand-secondary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-brand-secondary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-brand-secondary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-brand-tertiary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-brand-tertiary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-brand-tertiary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-brand-quaternary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-brand-quaternary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-brand-quaternary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-brand-tertiary-muted-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-brand-tertiary-muted-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-brand-tertiary-muted-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-brand-tertiary-surface-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-brand-tertiary-surface-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-brand-tertiary-surface-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-brand-tertiary-muted-surface-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-brand-tertiary-muted-surface-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-brand-tertiary-muted-surface-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-brand-quaternary-surface-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-brand-quaternary-surface-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-brand-quaternary-surface-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-neutral-primary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-neutral-primary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-neutral-primary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-neutral-secondary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-neutral-secondary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-neutral-secondary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-neutral-tertiary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-neutral-tertiary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-neutral-tertiary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-neutral-quaternary-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-neutral-quaternary-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-neutral-quaternary-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-neutral-tertiary-surface-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-neutral-tertiary-surface-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-neutral-tertiary-surface-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-action-neutral-quaternary-surface-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-action-neutral-quaternary-surface-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-action-neutral-quaternary-surface-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |

</div>

### Panels

<div id="-component-panel-simple- | -component-panel- | -component-panel-simple-nested- | -component-panel-nested- | -component-panel-dynamic-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-panel-box-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-box-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-box-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-box-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-panel-content-area-padding-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-content-area-padding-top` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-content-area-padding-bottom` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-content-area-gap-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-content-area-gap-vertical` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-header-padding-left` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-header-padding-right` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-header-padding-top` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-header-padding-bottom` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-header-gap-vertical` | spacing-x050 |
| `--sjs2-layout-component-panel-header-gap-horizontal` | spacing-x150 |
| `--sjs2-layout-component-panel-title-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-title-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-panel-description-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-description-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-description-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-footer-padding-left` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-footer-padding-right` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-footer-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-footer-padding-bottom` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-footer-gap` | spacing-x150 |
| `--sjs2-layout-component-panel-footer-action-group-gap` | spacing-x150 |
| `--sjs2-layout-component-panel-header-action-group-gap` | spacing-x150 |
| `--sjs2-layout-component-panel-simple-box-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-box-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-box-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-box-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-content-area-padding-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-simple-content-area-padding-top` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-simple-content-area-padding-bottom` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-simple-content-area-gap-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-simple-content-area-gap-vertical` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-simple-nested-box-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-nested-box-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-nested-box-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-nested-box-gap-vertical` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-simple-nested-content-area-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-nested-content-area-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-nested-content-area-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-simple-nested-content-area-gap-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-simple-nested-content-area-gap-vertical` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-nested-footer-padding-left` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-nested-footer-padding-right` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-nested-footer-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-footer-padding-bottom` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-nested-footer-gap` | spacing-x150 |
| `--sjs2-layout-component-panel-nested-box-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-box-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-box-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-box-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-content-area-padding-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-nested-content-area-padding-top` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-nested-content-area-padding-bottom` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-nested-content-area-gap-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-nested-content-area-gap-vertical` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-nested-header-padding-left` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-nested-header-padding-right` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-nested-header-padding-top` | spacing-x200 |
| `--sjs2-layout-component-panel-nested-header-padding-bottom` | spacing-x200 |
| `--sjs2-layout-component-panel-nested-header-gap-vertical` | spacing-x050 |
| `--sjs2-layout-component-panel-nested-header-gap-horizontal` | spacing-x150 |
| `--sjs2-layout-component-panel-nested-title-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-title-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-description-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-description-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-description-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-nested-footer-action-group-gap` | spacing-x150 |
| `--sjs2-layout-component-panel-nested-header-action-group-gap` | spacing-x150 |
| `--sjs2-layout-component-panel-dynamic-box-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-box-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-box-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-box-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-content-area-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-content-area-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-content-area-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-content-area-gap-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-content-area-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-header-padding-left` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-dynamic-header-padding-right` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-dynamic-header-padding-top` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-dynamic-header-padding-bottom` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-dynamic-header-gap-vertical` | spacing-x050 |
| `--sjs2-layout-component-panel-dynamic-header-gap-horizontal` | spacing-x150 |
| `--sjs2-layout-component-panel-dynamic-title-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-title-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-description-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-description-padding-top` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-description-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-panel-dynamic-footer-padding-left` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-dynamic-footer-padding-right` | spacing-large-horizontal |
| `--sjs2-layout-component-panel-dynamic-footer-padding-top` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-dynamic-footer-padding-bottom` | spacing-medium-vertical |
| `--sjs2-layout-component-panel-dynamic-footer-gap` | spacing-x150 |
| `--sjs2-layout-component-panel-dynamic-footer-action-group-gap` | spacing-x150 |
| `--sjs2-layout-component-panel-dynamic-header-action-group-gap` | spacing-x150 |
| `--sjs2-radius-component-panel` | radius-x150 |
| `--sjs2-radius-component-panel-simple` | radius-component-panel |
| `--sjs2-radius-component-panel-simple-nested` | radius-x000 |
| `--sjs2-radius-component-panel-dynamic` | radius-component-panel |
| `--sjs2-radius-component-panel-nested` | radius-form |
| `--sjs2-typography-font-family-component-panel-title` | typography-font-family-text |
| `--sjs2-typography-font-family-component-panel-description` | typography-font-family-text |
| `--sjs2-typography-font-size-component-panel-title` | typography-font-size-default |
| `--sjs2-typography-font-size-component-panel-description` | typography-font-size-default |
| `--sjs2-typography-line-height-component-panel-title` | typography-line-height-default |
| `--sjs2-typography-line-height-component-panel-description` | typography-line-height-default |
| `--sjs2-typography-font-weight-component-panel-title` | typography-font-weight-strong |
| `--sjs2-typography-font-weight-component-panel-description` | typography-font-weight-basic |
| `--sjs2-color-component-panel-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-panel-default-title` | color-fg-basic-primary |
| `--sjs2-color-component-panel-default-title-placeholder` | color-fg-basic-secondary |
| `--sjs2-color-component-panel-default-description` | color-fg-basic-secondary |
| `--sjs2-color-component-panel-default-description-placeholder` | color-fg-basic-tertiary |
| `--sjs2-color-component-panel-default-separator` | color-border-basic-secondary |
| `--sjs2-color-component-panel-hovered-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-hovered-title` | color-fg-basic-primary-dim |
| `--sjs2-color-component-panel-focused-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-dragging-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-dynamic-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-dynamic-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-panel-dynamic-default-title` | color-fg-basic-primary |
| `--sjs2-color-component-panel-dynamic-default-title-placeholder` | color-fg-basic-secondary |
| `--sjs2-color-component-panel-dynamic-default-description` | color-fg-basic-secondary |
| `--sjs2-color-component-panel-dynamic-default-description-placeholder` | color-fg-basic-tertiary |
| `--sjs2-color-component-panel-dynamic-default-separator` | color-border-basic-secondary |
| `--sjs2-color-component-panel-dynamic-hovered-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-dynamic-hovered-title` | color-fg-basic-primary-dim |
| `--sjs2-color-component-panel-dynamic-focused-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-dynamic-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-dynamic-dragging-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-panel-simple-hovered-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-focused-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-dragging-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-nested-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-nested-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-panel-nested-default-title` | color-fg-basic-primary |
| `--sjs2-color-component-panel-nested-default-title-placeholder` | color-fg-basic-secondary |
| `--sjs2-color-component-panel-nested-default-description` | color-fg-basic-secondary |
| `--sjs2-color-component-panel-nested-default-description-placeholder` | color-fg-basic-tertiary |
| `--sjs2-color-component-panel-nested-default-separator` | color-border-basic-secondary |
| `--sjs2-color-component-panel-nested-hovered-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-nested-hovered-title` | color-fg-basic-primary-dim |
| `--sjs2-color-component-panel-nested-focused-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-nested-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-nested-dragging-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-nested-default-bg` | transparent |
| `--sjs2-color-component-panel-simple-nested-default-border` | transparent |
| `--sjs2-color-component-panel-simple-nested-hovered-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-nested-focused-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-nested-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-panel-simple-nested-dragging-bg` | color-bg-basic-primary |
| `--sjs2-border-effect-component-panel-default` | border-offset-x-surface-default border-offset-y-surface-default border-blur-surface-default border-spread-surface-default color-component-panel-default-border |
| `--sjs2-border-effect-component-panel-hovered` | border-offset-x-surface-hovered border-offset-y-surface-hovered border-blur-surface-hovered border-spread-surface-hovered color-utility-shadow-surface-hovered |
| `--sjs2-border-effect-component-panel-pressed` | border-offset-x-surface-pressed border-offset-y-surface-pressed border-blur-surface-pressed border-spread-surface-pressed color-utility-shadow-surface-pressed |
| `--sjs2-border-effect-component-panel-focused` | border-offset-x-surface-focused border-offset-y-surface-focused border-blur-surface-focused border-spread-surface-focused color-utility-shadow-surface-focused |
| `--sjs2-border-effect-component-panel-disabled` | border-offset-x-surface-disabled border-offset-y-surface-disabled border-blur-surface-disabled border-spread-surface-disabled color-utility-shadow-surface-disabled |
| `--sjs2-border-effect-component-panel-dragging` | border-offset-x-surface-dragging border-offset-y-surface-dragging border-blur-surface-dragging border-spread-surface-dragging color-utility-shadow-surface-dragging |
| `--sjs2-border-effect-component-panel-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-panel-nested-default` | border-offset-x-surface-default border-offset-y-surface-default border-blur-surface-default border-spread-surface-default color-component-panel-nested-default-border |
| `--sjs2-border-effect-component-panel-nested-hovered` | border-offset-x-surface-hovered border-offset-y-surface-hovered border-blur-surface-hovered border-spread-surface-hovered color-utility-shadow-surface-hovered |
| `--sjs2-border-effect-component-panel-nested-pressed` | border-offset-x-surface-pressed border-offset-y-surface-pressed border-blur-surface-pressed border-spread-surface-pressed color-utility-shadow-surface-pressed |
| `--sjs2-border-effect-component-panel-nested-focused` | border-offset-x-surface-focused border-offset-y-surface-focused border-blur-surface-focused border-spread-surface-focused color-utility-shadow-surface-focused |
| `--sjs2-border-effect-component-panel-nested-disabled` | border-offset-x-surface-disabled border-offset-y-surface-disabled border-blur-surface-disabled border-spread-surface-disabled color-utility-shadow-surface-disabled |
| `--sjs2-border-effect-component-panel-nested-dragging` | border-offset-x-surface-dragging border-offset-y-surface-dragging border-blur-surface-dragging border-spread-surface-dragging color-utility-shadow-surface-dragging |
| `--sjs2-border-effect-component-panel-nested-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-panel-simple-default` | border-offset-x-surface-default border-offset-y-surface-default border-blur-surface-default border-spread-surface-default color-component-panel-simple-default-border |
| `--sjs2-border-effect-component-panel-simple-hovered` | border-offset-x-surface-hovered border-offset-y-surface-hovered border-blur-surface-hovered border-spread-surface-hovered color-utility-shadow-surface-hovered |
| `--sjs2-border-effect-component-panel-simple-pressed` | border-offset-x-surface-pressed border-offset-y-surface-pressed border-blur-surface-pressed border-spread-surface-pressed color-utility-shadow-surface-pressed |
| `--sjs2-border-effect-component-panel-simple-focused` | border-offset-x-surface-focused border-offset-y-surface-focused border-blur-surface-focused border-spread-surface-focused color-utility-shadow-surface-focused |
| `--sjs2-border-effect-component-panel-simple-disabled` | border-offset-x-surface-disabled border-offset-y-surface-disabled border-blur-surface-disabled border-spread-surface-disabled color-utility-shadow-surface-disabled |
| `--sjs2-border-effect-component-panel-simple-dragging` | border-offset-x-surface-dragging border-offset-y-surface-dragging border-blur-surface-dragging border-spread-surface-dragging color-utility-shadow-surface-dragging |
| `--sjs2-border-effect-component-panel-simple-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-panel-dynamic-default` | border-offset-x-surface-default border-offset-y-surface-default border-blur-surface-default border-spread-surface-default color-component-panel-dynamic-default-border |
| `--sjs2-border-effect-component-panel-dynamic-hovered` | border-offset-x-surface-hovered border-offset-y-surface-hovered border-blur-surface-hovered border-spread-surface-hovered color-utility-shadow-surface-hovered |
| `--sjs2-border-effect-component-panel-dynamic-pressed` | border-offset-x-surface-pressed border-offset-y-surface-pressed border-blur-surface-pressed border-spread-surface-pressed color-utility-shadow-surface-pressed |
| `--sjs2-border-effect-component-panel-dynamic-focused` | border-offset-x-surface-focused border-offset-y-surface-focused border-blur-surface-focused border-spread-surface-focused color-utility-shadow-surface-focused |
| `--sjs2-border-effect-component-panel-dynamic-disabled` | border-offset-x-surface-disabled border-offset-y-surface-disabled border-blur-surface-disabled border-spread-surface-disabled color-utility-shadow-surface-disabled |
| `--sjs2-border-effect-component-panel-dynamic-dragging` | border-offset-x-surface-dragging border-offset-y-surface-dragging border-blur-surface-dragging border-spread-surface-dragging color-utility-shadow-surface-dragging |
| `--sjs2-border-effect-component-panel-dynamic-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-panel-simple-nested-default` | border-offset-x-surface-default border-offset-y-surface-default border-blur-surface-default border-spread-surface-default color-component-panel-simple-nested-default-border |
| `--sjs2-border-effect-component-panel-simple-nested-hovered` | border-offset-x-surface-hovered border-offset-y-surface-hovered border-blur-surface-hovered border-spread-surface-hovered color-utility-shadow-surface-hovered |
| `--sjs2-border-effect-component-panel-simple-nested-pressed` | border-offset-x-surface-pressed border-offset-y-surface-pressed border-blur-surface-pressed border-spread-surface-pressed color-utility-shadow-surface-pressed |
| `--sjs2-border-effect-component-panel-simple-nested-focused` | border-offset-x-surface-focused border-offset-y-surface-focused border-blur-surface-focused border-spread-surface-focused color-utility-shadow-surface-focused |
| `--sjs2-border-effect-component-panel-simple-nested-disabled` | border-offset-x-surface-disabled border-offset-y-surface-disabled border-blur-surface-disabled border-spread-surface-disabled color-utility-shadow-surface-disabled |
| `--sjs2-border-effect-component-panel-simple-nested-dragging` | border-offset-x-surface-dragging border-offset-y-surface-dragging border-blur-surface-dragging border-spread-surface-dragging color-utility-shadow-surface-dragging |
| `--sjs2-border-effect-component-panel-simple-nested-a11y` | border-effect-a11y |

</div>

### Questions

<div id="-component-question-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-question-box-gap-vertical` | spacing-x200 |
| `--sjs2-layout-component-question-box-gap-horizontal` | spacing-x300 |
| `--sjs2-layout-component-question-header-padding-left` | spacing-x000 |
| `--sjs2-layout-component-question-header-padding-right` | spacing-x000 |
| `--sjs2-layout-component-question-header-padding-top` | spacing-x000 |
| `--sjs2-layout-component-question-header-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-question-header-gap-horizontal` | spacing-x150 |
| `--sjs2-layout-component-question-header-gap-vertical` | spacing-x050 |
| `--sjs2-layout-component-question-header-side-padding-left` | spacing-x000 |
| `--sjs2-layout-component-question-header-side-padding-right` | spacing-x000 |
| `--sjs2-layout-component-question-header-side-padding-top` | spacing-x150 |
| `--sjs2-layout-component-question-header-side-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-question-header-side-gap-horizontal` | spacing-x150 |
| `--sjs2-layout-component-question-header-side-gap-vertical` | spacing-x050 |
| `--sjs2-layout-component-question-title-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-question-title-padding-top` | spacing-x000 |
| `--sjs2-layout-component-question-title-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-question-description-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-question-description-padding-top` | spacing-x000 |
| `--sjs2-layout-component-question-description-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-question-header-action-group-gap` | spacing-x150 |
| `--sjs2-typography-font-family-component-question-title` | typography-font-family-text |
| `--sjs2-typography-font-family-component-question-description` | typography-font-family-text |
| `--sjs2-typography-font-size-component-question-title` | typography-font-size-default |
| `--sjs2-typography-font-size-component-question-description` | typography-font-size-default |
| `--sjs2-typography-line-height-component-question-title` | typography-line-height-default |
| `--sjs2-typography-line-height-component-question-description` | typography-line-height-default |
| `--sjs2-typography-font-weight-component-question-title` | typography-font-weight-strong |
| `--sjs2-typography-font-weight-component-question-description` | typography-font-weight-basic |
| `--sjs2-color-component-question-default-title` | color-fg-basic-primary |
| `--sjs2-color-component-question-default-title-placeholder` | color-fg-basic-secondary |
| `--sjs2-color-component-question-default-description` | color-fg-basic-secondary |
| `--sjs2-color-component-question-default-description-placeholder` | color-fg-basic-tertiary |
| `--sjs2-color-component-question-hovered-title` | color-fg-basic-primary-dim |

</div>

### Input Fields

<div id="-component-formbox-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-formbox-small-padding-horizontal` | spacing-x050 |
| `--sjs2-layout-component-formbox-small-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-formbox-small-gap` | spacing-x050 |
| `--sjs2-layout-component-formbox-medium-padding-horizontal` | spacing-x050 |
| `--sjs2-layout-component-formbox-medium-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-formbox-medium-gap` | spacing-x050 |
| `--sjs2-radius-component-formbox` | radius-form |
| `--sjs2-radius-component-formbox-action` | radius-form-item |
| `--sjs2-color-component-formbox-default-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-formbox-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-formbox-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-formbox-disabled-border` | color-border-basic-secondary-disabled |
| `--sjs2-color-component-formbox-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-formbox-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-formbox-focused-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-formbox-focused-border` | color-border-brand-primary |
| `--sjs2-color-component-formbox-invalid-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-formbox-invalid-border` | color-border-alert-primary |
| `--sjs2-color-component-formbox-highlighted-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-formbox-highlighted-border` | color-border-basic-primary |
| `--sjs2-color-component-formbox-design-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-formbox-design-border` | color-border-basic-secondary |
| `--sjs2-color-component-formbox-hovered-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-formbox-hovered-border` | color-border-basic-secondary |
| `--sjs2-color-component-formbox-invalid-focused-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-formbox-invalid-focused-border` | color-border-alert-primary |
| `--sjs2-border-effect-component-formbox-default` | inset border-offset-x-form-default border-offset-y-form-default border-blur-form-default border-spread-form-default color-component-formbox-default-border |
| `--sjs2-border-effect-component-formbox-hovered` | inset border-offset-x-form-hovered border-offset-y-form-hovered border-blur-form-hovered border-spread-form-hovered color-component-formbox-hovered-border |
| `--sjs2-border-effect-component-formbox-focused` | inset border-offset-x-form-focused border-offset-y-form-focused border-blur-form-focused border-spread-form-focused color-component-formbox-focused-border |
| `--sjs2-border-effect-component-formbox-disabled` | inset border-offset-x-form-disabled border-offset-y-form-disabled border-blur-form-disabled border-spread-form-disabled color-component-formbox-disabled-border |
| `--sjs2-border-effect-component-formbox-invalid` | inset border-offset-x-form-invalid border-offset-y-form-invalid border-blur-form-invalid border-spread-form-invalid color-component-formbox-invalid-border |
| `--sjs2-border-effect-component-formbox-invalid-focused` | inset border-offset-x-form-invalid-focused border-offset-y-form-invalid-focused border-blur-form-invalid-focused border-spread-form-invalid-focused color-component-formbox-invalid-focused-border |
| `--sjs2-border-effect-component-formbox-highlighted` | inset border-offset-x-form-highlighted border-offset-y-form-highlighted border-blur-form-highlighted border-spread-form-highlighted color-component-formbox-highlighted-border |
| `--sjs2-border-effect-component-formbox-readonly` | inset border-offset-x-form-readonly border-offset-y-form-readonly border-blur-form-readonly border-spread-form-readonly color-component-formbox-readonly-border |
| `--sjs2-border-effect-component-formbox-design` | inset border-offset-x-form-design border-offset-y-form-design border-blur-form-design border-spread-form-design color-component-formbox-design-border |
| `--sjs2-border-effect-component-formbox-a11y` | 0px 0px 0px 0px transparent |

</div>

### Text in Input Fields

<div id="-component-input-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-input-small-content-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-input-small-content-padding-horizontal` | spacing-x100 |
| `--sjs2-layout-component-input-small-swatch-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-input-small-swatch-padding-left` | spacing-x100 |
| `--sjs2-layout-component-input-small-swatch-padding-right` | spacing-x000 |
| `--sjs2-layout-component-input-small-icon-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-input-small-icon-padding-left` | spacing-x050 |
| `--sjs2-layout-component-input-small-icon-padding-right` | spacing-x000 |
| `--sjs2-layout-component-input-small-label-padding-vertical` | spacing-x050 |
| `--sjs2-layout-component-input-small-label-padding-horizontal` | spacing-x100 |
| `--sjs2-layout-component-input-small-action-group-gap` | spacing-x050 |
| `--sjs2-layout-component-input-small-limit-padding-vertical` | spacing-x075 |
| `--sjs2-layout-component-input-small-limit-padding-left` | spacing-x100 |
| `--sjs2-layout-component-input-small-limit-padding-right` | spacing-x100 |
| `--sjs2-layout-component-input-small-tag-group-gap` | spacing-x050 |
| `--sjs2-layout-component-input-medium-content-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-input-medium-content-padding-horizontal` | spacing-x150 |
| `--sjs2-layout-component-input-medium-swatch-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-input-medium-swatch-padding-left` | spacing-x150 |
| `--sjs2-layout-component-input-medium-swatch-padding-right` | spacing-x000 |
| `--sjs2-layout-component-input-medium-icon-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-input-medium-icon-padding-left` | spacing-x100 |
| `--sjs2-layout-component-input-medium-icon-padding-right` | spacing-x000 |
| `--sjs2-layout-component-input-medium-label-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-input-medium-label-padding-horizontal` | spacing-x150 |
| `--sjs2-layout-component-input-medium-action-group-gap` | spacing-x050 |
| `--sjs2-layout-component-input-medium-limit-padding-vertical` | spacing-x075 |
| `--sjs2-layout-component-input-medium-limit-padding-left` | spacing-x100 |
| `--sjs2-layout-component-input-medium-limit-padding-right` | spacing-x100 |
| `--sjs2-layout-component-input-medium-tag-group-gap` | spacing-x050 |
| `--sjs2-typography-font-family-component-input-content` | typography-font-family-text |
| `--sjs2-typography-font-size-component-input-content` | typography-font-size-default |
| `--sjs2-typography-line-height-component-input-content` | typography-line-height-default |
| `--sjs2-typography-font-weight-component-input-content` | typography-font-weight-basic |
| `--sjs2-color-component-input-default-line` | color-border-basic-secondary |
| `--sjs2-color-component-input-default-value` | color-fg-basic-primary |
| `--sjs2-color-component-input-default-placeholder` | color-fg-basic-secondary |
| `--sjs2-color-component-input-default-label` | color-fg-basic-secondary |
| `--sjs2-color-component-input-default-limit` | color-fg-basic-secondary |
| `--sjs2-color-component-input-default-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-input-default-description` | color-fg-basic-secondary |
| `--sjs2-color-component-input-disabled-line` | color-border-basic-secondary-disabled |
| `--sjs2-color-component-input-disabled-value` | color-fg-basic-primary-disabled |
| `--sjs2-color-component-input-disabled-placeholder` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-input-disabled-label` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-input-disabled-limit` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-input-disabled-icon` | color-fg-basic-tertiary-disabled |
| `--sjs2-color-component-input-disabled-description` | color-fg-basic-primary-disabled |

</div>

### Checkboxes, Radio Buttons & Toggles

<div id="-component-checkbox- | -component-radio- | -component-toggle- | -component-boolean- | -component-buttongroup-item-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-size-component-checkbox-box` | size-x300 |
| `--sjs2-size-component-checkbox-icon` | size-x200 |
| `--sjs2-size-component-radio-box` | size-x300 |
| `--sjs2-size-component-radio-icon` | size-x200 |
| `--sjs2-radius-component-buttongroup-item` | radius-form-item |
| `--sjs2-radius-component-checkbox` | radius-form-item |
| `--sjs2-radius-component-radio` | radius-round |
| `--sjs2-radius-component-boolean` | radius-round |
| `--sjs2-radius-component-boolean-item` | radius-round |
| `--sjs2-radius-component-toggle` | radius-round |
| `--sjs2-radius-component-toggle-thumb` | radius-round |
| `--sjs2-color-component-buttongroup-item-false-default-bg` | color-bg-basic-secondary, opacity-hidden |
| `--sjs2-color-component-buttongroup-item-false-default-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-buttongroup-item-false-default-value` | color-fg-basic-secondary |
| `--sjs2-color-component-buttongroup-item-false-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-buttongroup-item-false-disabled-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-buttongroup-item-false-disabled-value` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-buttongroup-item-false-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-buttongroup-item-false-readonly-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-buttongroup-item-false-readonly-value` | color-fg-basic-tertiary |
| `--sjs2-color-component-buttongroup-item-false-hovered-bg` | color-bg-basic-secondary-dim |
| `--sjs2-color-component-buttongroup-item-false-hovered-border` | color-border-basic-secondary |
| `--sjs2-color-component-buttongroup-item-false-hovered-value` | color-fg-basic-primary |
| `--sjs2-color-component-buttongroup-item-true-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-buttongroup-item-true-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-buttongroup-item-true-default-value` | color-fg-brand-primary |
| `--sjs2-color-component-buttongroup-item-true-disabled-bg` | color-bg-basic-primary-disabled |
| `--sjs2-color-component-buttongroup-item-true-disabled-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-buttongroup-item-true-disabled-value` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-buttongroup-item-true-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-buttongroup-item-true-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-buttongroup-item-true-readonly-value` | color-fg-basic-primary |
| `--sjs2-color-component-toggle-false-default-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-toggle-false-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-toggle-false-default-thumb` | color-fg-basic-secondary |
| `--sjs2-color-component-toggle-false-disabled-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-toggle-false-disabled-border` | color-border-basic-secondary |
| `--sjs2-color-component-toggle-false-disabled-thumb` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-toggle-false-readonly-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-toggle-false-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-toggle-false-readonly-thumb` | color-fg-basic-tertiary |
| `--sjs2-color-component-toggle-false-hovered-bg` | color-bg-basic-secondary-dim |
| `--sjs2-color-component-toggle-false-hovered-border` | color-border-basic-secondary |
| `--sjs2-color-component-toggle-false-hovered-thumb` | color-fg-basic-secondary |
| `--sjs2-color-component-toggle-true-default-bg` | color-bg-brand-primary |
| `--sjs2-color-component-toggle-true-default-border` | color-border-brand-primary |
| `--sjs2-color-component-toggle-true-default-thumb` | color-fg-brand-on-primary |
| `--sjs2-color-component-toggle-true-disabled-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-toggle-true-disabled-border` | color-border-basic-secondary |
| `--sjs2-color-component-toggle-true-disabled-thumb` | color-fg-basic-tertiary-disabled |
| `--sjs2-color-component-toggle-true-readonly-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-toggle-true-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-toggle-true-readonly-thumb` | color-fg-basic-secondary |
| `--sjs2-color-component-toggle-true-hovered-bg` | color-bg-brand-primary-dim |
| `--sjs2-color-component-toggle-true-hovered-border` | color-bg-brand-primary-dim |
| `--sjs2-color-component-toggle-true-hovered-thumb` | color-fg-brand-on-primary |
| `--sjs2-color-component-boolean-item-false-default-bg` | color-bg-basic-secondary, opacity-hidden |
| `--sjs2-color-component-boolean-item-false-default-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-boolean-item-false-default-value` | color-fg-basic-secondary |
| `--sjs2-color-component-boolean-item-false-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-boolean-item-false-disabled-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-boolean-item-false-disabled-value` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-boolean-item-false-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-boolean-item-false-readonly-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-boolean-item-false-readonly-value` | color-fg-basic-secondary |
| `--sjs2-color-component-boolean-item-false-hovered-bg` | color-bg-basic-secondary-dim |
| `--sjs2-color-component-boolean-item-false-hovered-border` | color-border-basic-secondary |
| `--sjs2-color-component-boolean-item-false-hovered-value` | color-fg-basic-primary |
| `--sjs2-color-component-boolean-item-false-design-bg` | color-bg-basic-secondary, opacity-hidden |
| `--sjs2-color-component-boolean-item-false-design-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-boolean-item-false-design-value` | color-fg-basic-secondary |
| `--sjs2-color-component-boolean-item-true-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-boolean-item-true-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-boolean-item-true-default-value` | color-fg-brand-primary |
| `--sjs2-color-component-boolean-item-true-disabled-bg` | color-bg-basic-primary-dim |
| `--sjs2-color-component-boolean-item-true-disabled-border` | color-border-basic-secondary, opacity-hidden |
| `--sjs2-color-component-boolean-item-true-disabled-value` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-boolean-item-true-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-boolean-item-true-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-boolean-item-true-readonly-value` | color-fg-basic-primary |
| `--sjs2-color-component-boolean-default-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-boolean-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-boolean-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-boolean-disabled-border` | color-border-basic-secondary-disabled |
| `--sjs2-color-component-boolean-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-boolean-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-boolean-invalid-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-boolean-invalid-border` | color-border-alert-primary |
| `--sjs2-color-component-boolean-highlighted-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-boolean-highlighted-border` | color-border-basic-primary |
| `--sjs2-color-component-boolean-design-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-boolean-design-border` | color-border-basic-secondary |
| `--sjs2-color-component-radio-false-default-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-radio-false-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-radio-false-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-radio-false-disabled-border` | color-border-basic-secondary-disabled |
| `--sjs2-color-component-radio-false-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-radio-false-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-radio-false-hovered-bg` | color-bg-basic-secondary-dim |
| `--sjs2-color-component-radio-false-hovered-border` | color-border-basic-secondary |
| `--sjs2-color-component-radio-false-design-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-radio-false-design-border` | color-border-basic-secondary |
| `--sjs2-color-component-radio-false-invalid-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-radio-false-invalid-border` | color-border-alert-primary |
| `--sjs2-color-component-radio-true-default-bg` | color-bg-brand-primary |
| `--sjs2-color-component-radio-true-default-border` | color-border-brand-primary |
| `--sjs2-color-component-radio-true-default-icon` | color-fg-brand-on-primary |
| `--sjs2-color-component-radio-true-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-radio-true-disabled-border` | color-border-basic-secondary-disabled |
| `--sjs2-color-component-radio-true-disabled-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-radio-true-hovered-bg` | color-bg-brand-primary-dim |
| `--sjs2-color-component-radio-true-hovered-border` | color-bg-brand-primary-dim |
| `--sjs2-color-component-radio-true-hovered-icon` | color-fg-brand-on-primary |
| `--sjs2-color-component-radio-true-invalid-bg` | color-bg-alert-primary |
| `--sjs2-color-component-radio-true-invalid-border` | color-bg-alert-primary |
| `--sjs2-color-component-radio-true-invalid-icon` | color-fg-alert-on-primary |
| `--sjs2-color-component-checkbox-false-default-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-checkbox-false-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-checkbox-false-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-checkbox-false-disabled-border` | color-border-basic-secondary-disabled |
| `--sjs2-color-component-checkbox-false-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-checkbox-false-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-checkbox-false-hovered-bg` | color-bg-basic-secondary-dim |
| `--sjs2-color-component-checkbox-false-hovered-border` | color-border-basic-secondary |
| `--sjs2-color-component-checkbox-false-design-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-checkbox-false-design-border` | color-border-basic-secondary |
| `--sjs2-color-component-checkbox-false-invalid-bg` | color-bg-basic-secondary |
| `--sjs2-color-component-checkbox-false-invalid-border` | color-border-alert-primary |
| `--sjs2-color-component-checkbox-true-default-bg` | color-bg-brand-primary |
| `--sjs2-color-component-checkbox-true-default-border` | color-border-brand-primary |
| `--sjs2-color-component-checkbox-true-default-icon` | color-fg-brand-on-primary |
| `--sjs2-color-component-checkbox-true-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-checkbox-true-disabled-border` | color-border-basic-secondary-disabled |
| `--sjs2-color-component-checkbox-true-disabled-icon` | color-fg-basic-tertiary |
| `--sjs2-color-component-checkbox-true-hovered-bg` | color-bg-brand-primary-dim |
| `--sjs2-color-component-checkbox-true-hovered-border` | color-bg-brand-primary-dim |
| `--sjs2-color-component-checkbox-true-hovered-icon` | color-fg-brand-on-primary |
| `--sjs2-color-component-checkbox-true-invalid-bg` | color-bg-alert-primary |
| `--sjs2-color-component-checkbox-true-invalid-border` | color-bg-alert-primary |
| `--sjs2-color-component-checkbox-true-invalid-icon` | color-fg-alert-on-primary |
| `--sjs2-border-effect-component-toggle-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-toggle-false-default` | inset border-offset-x-form-default border-offset-y-form-default border-blur-form-default border-spread-form-default color-component-toggle-false-default-border |
| `--sjs2-border-effect-component-toggle-false-hovered` | inset border-offset-x-form-hovered border-offset-y-form-hovered border-blur-form-hovered border-spread-form-hovered color-component-toggle-false-hovered-border |
| `--sjs2-border-effect-component-toggle-false-disabled` | inset border-offset-x-form-disabled border-offset-y-form-disabled border-blur-form-disabled border-spread-form-disabled color-component-toggle-false-disabled-border |
| `--sjs2-border-effect-component-toggle-true-default` | inset border-offset-x-form-default border-offset-y-form-default border-blur-form-default border-spread-form-default color-component-toggle-true-default-border |
| `--sjs2-border-effect-component-toggle-true-hovered` | inset border-offset-x-form-hovered border-offset-y-form-hovered border-blur-form-hovered border-spread-form-hovered color-component-toggle-true-hovered-border |
| `--sjs2-border-effect-component-toggle-true-disabled` | inset border-offset-x-form-disabled border-offset-y-form-disabled border-blur-form-disabled border-spread-form-disabled color-component-toggle-true-disabled-border |
| `--sjs2-border-effect-component-buttongroup-item-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-buttongroup-item-false-default` | inset border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-component-buttongroup-item-false-default-border |
| `--sjs2-border-effect-component-buttongroup-item-false-hovered` | inset border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-component-buttongroup-item-false-hovered-border |
| `--sjs2-border-effect-component-buttongroup-item-false-disabled` | inset border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-component-buttongroup-item-false-disabled-border |
| `--sjs2-border-effect-component-buttongroup-item-false-readonly` | inset border-offset-x-trigger-readonly border-offset-y-trigger-readonly border-blur-trigger-readonly border-spread-trigger-readonly color-component-buttongroup-item-false-readonly-border |
| `--sjs2-border-effect-component-buttongroup-item-true-default` | inset border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-component-buttongroup-item-true-default-border |
| `--sjs2-border-effect-component-buttongroup-item-true-disabled` | inset border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-component-buttongroup-item-true-disabled-border |
| `--sjs2-border-effect-component-buttongroup-item-true-readonly` | inset border-offset-x-trigger-readonly border-offset-y-trigger-readonly border-blur-trigger-readonly border-spread-trigger-readonly color-component-buttongroup-item-true-readonly-border |
| `--sjs2-border-effect-component-boolean-item-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-boolean-item-false-default` | inset border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-component-boolean-item-false-default-border |
| `--sjs2-border-effect-component-boolean-item-false-hovered` | inset border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-component-boolean-item-false-hovered-border |
| `--sjs2-border-effect-component-boolean-item-false-disabled` | inset border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-component-boolean-item-false-disabled-border |
| `--sjs2-border-effect-component-boolean-item-false-readonly` | inset border-offset-x-trigger-readonly border-offset-y-trigger-readonly border-blur-trigger-readonly border-spread-trigger-readonly color-component-boolean-item-false-readonly-border |
| `--sjs2-border-effect-component-boolean-item-true-default` | inset border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-component-boolean-item-true-default-border |
| `--sjs2-border-effect-component-boolean-item-true-disabled` | inset border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-component-boolean-item-true-disabled-border |
| `--sjs2-border-effect-component-boolean-item-true-readonly` | inset border-offset-x-trigger-readonly border-offset-y-trigger-readonly border-blur-trigger-readonly border-spread-trigger-readonly color-component-boolean-item-true-readonly-border |
| `--sjs2-border-effect-component-boolean-default` | inset border-offset-x-form-default border-offset-y-form-default border-blur-form-default border-spread-form-default color-component-boolean-default-border |
| `--sjs2-border-effect-component-boolean-disabled` | inset border-offset-x-form-disabled border-offset-y-form-disabled border-blur-form-disabled border-spread-form-disabled color-component-boolean-disabled-border |
| `--sjs2-border-effect-component-boolean-invalid` | inset border-offset-x-form-invalid border-offset-y-form-invalid border-blur-form-invalid border-spread-form-invalid color-component-boolean-invalid-border |
| `--sjs2-border-effect-component-boolean-highlighted` | inset border-offset-x-form-highlighted border-offset-y-form-highlighted border-blur-form-highlighted border-spread-form-highlighted color-component-boolean-highlighted-border |
| `--sjs2-border-effect-component-boolean-readonly` | inset border-offset-x-form-readonly border-offset-y-form-readonly border-blur-form-readonly border-spread-form-readonly color-component-boolean-readonly-border |
| `--sjs2-border-effect-component-boolean-design` | inset border-offset-x-form-design border-offset-y-form-design border-blur-form-design border-spread-form-design color-component-boolean-design-border |
| `--sjs2-border-effect-component-boolean-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-checkbox-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-checkbox-false-default` | inset border-offset-x-form-default border-offset-y-form-default border-blur-form-default border-spread-form-default color-component-checkbox-false-default-border |
| `--sjs2-border-effect-component-checkbox-false-hovered` | inset border-offset-x-form-hovered border-offset-y-form-hovered border-blur-form-hovered border-spread-form-hovered color-component-checkbox-false-hovered-border |
| `--sjs2-border-effect-component-checkbox-false-disabled` | inset border-offset-x-form-disabled border-offset-y-form-disabled border-blur-form-disabled border-spread-form-disabled color-component-checkbox-false-disabled-border |
| `--sjs2-border-effect-component-checkbox-false-design` | inset border-offset-x-form-design border-offset-y-form-design border-blur-form-design border-spread-form-design color-component-checkbox-false-design-border |
| `--sjs2-border-effect-component-checkbox-false-readonly` | inset border-offset-x-form-readonly border-offset-y-form-readonly border-blur-form-readonly border-spread-form-readonly color-component-checkbox-false-readonly-border |
| `--sjs2-border-effect-component-checkbox-false-invalid` | inset border-offset-x-form-invalid border-offset-y-form-invalid border-blur-form-invalid border-spread-form-invalid color-component-checkbox-false-invalid-border |
| `--sjs2-border-effect-component-checkbox-true-default` | inset border-offset-x-form-default border-offset-y-form-default border-blur-form-default border-spread-form-default color-component-checkbox-true-default-border |
| `--sjs2-border-effect-component-checkbox-true-hovered` | inset border-offset-x-form-hovered border-offset-y-form-hovered border-blur-form-hovered border-spread-form-hovered color-component-checkbox-true-hovered-border |
| `--sjs2-border-effect-component-checkbox-true-disabled` | inset border-offset-x-form-disabled border-offset-y-form-disabled border-blur-form-disabled border-spread-form-disabled color-component-checkbox-true-disabled-border |
| `--sjs2-border-effect-component-radio-a11y` | border-effect-a11y |
| `--sjs2-border-effect-component-radio-false-default` | inset border-offset-x-form-default border-offset-y-form-default border-blur-form-default border-spread-form-default color-component-checkbox-false-default-border |
| `--sjs2-border-effect-component-radio-false-hovered` | inset border-offset-x-form-hovered border-offset-y-form-hovered border-blur-form-hovered border-spread-form-hovered color-component-checkbox-false-hovered-border |
| `--sjs2-border-effect-component-radio-false-disabled` | inset border-offset-x-form-disabled border-offset-y-form-disabled border-blur-form-disabled border-spread-form-disabled color-component-checkbox-false-disabled-border |
| `--sjs2-border-effect-component-radio-false-design` | inset border-offset-x-form-design border-offset-y-form-design border-blur-form-design border-spread-form-design color-component-checkbox-false-design-border |
| `--sjs2-border-effect-component-radio-false-readonly` | inset border-offset-x-form-readonly border-offset-y-form-readonly border-blur-form-readonly border-spread-form-readonly color-component-checkbox-false-readonly-border |
| `--sjs2-border-effect-component-radio-false-invalid` | inset border-offset-x-form-invalid border-offset-y-form-invalid border-blur-form-invalid border-spread-form-invalid color-component-checkbox-false-invalid-border |
| `--sjs2-border-effect-component-radio-true-default` | inset border-offset-x-form-default border-offset-y-form-default border-blur-form-default border-spread-form-default color-component-checkbox-true-default-border |
| `--sjs2-border-effect-component-radio-true-hovered` | inset border-offset-x-form-hovered border-offset-y-form-hovered border-blur-form-hovered border-spread-form-hovered color-component-checkbox-true-hovered-border |
| `--sjs2-border-effect-component-radio-true-disabled` | inset border-offset-x-form-disabled border-offset-y-form-disabled border-blur-form-disabled border-spread-form-disabled color-component-checkbox-true-disabled-border |

</div>

### Sliders

<div id="-component-slider-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-radius-component-slider` | radius-round |
| `--sjs2-radius-component-slider-thumb` | radius-round |
| `--sjs2-color-component-slider-default-bg` | color-bg-basic-tertiary |
| `--sjs2-color-component-slider-default-fg` | color-bg-brand-primary |
| `--sjs2-color-component-slider-default-thumb` | color-bg-basic-primary |
| `--sjs2-color-component-slider-default-dot` | color-bg-brand-primary |
| `--sjs2-color-component-slider-disabled-bg` | color-bg-basic-tertiary |
| `--sjs2-color-component-slider-disabled-fg` | color-fg-basic-tertiary-disabled |
| `--sjs2-color-component-slider-disabled-thumb` | color-bg-basic-primary |
| `--sjs2-color-component-slider-disabled-dot` | color-fg-basic-tertiary-disabled |
| `--sjs2-color-component-slider-readonly-bg` | color-bg-basic-tertiary |
| `--sjs2-color-component-slider-readonly-fg` | color-bg-neutral-primary |
| `--sjs2-color-component-slider-readonly-thumb` | color-bg-basic-primary |
| `--sjs2-color-component-slider-readonly-dot` | color-bg-neutral-primary |
| `--sjs2-color-component-slider-hovered-bg` | color-bg-basic-tertiary |
| `--sjs2-color-component-slider-hovered-fg` | color-bg-brand-primary |
| `--sjs2-color-component-slider-hovered-thumb` | color-bg-basic-primary |
| `--sjs2-color-component-slider-hovered-dot` | color-bg-brand-primary |
| `--sjs2-color-component-slider-invalid-bg` | color-bg-alert-secondary |
| `--sjs2-color-component-slider-invalid-fg` | color-bg-alert-primary |
| `--sjs2-color-component-slider-invalid-thumb` | color-bg-basic-primary |
| `--sjs2-color-component-slider-invalid-dot` | color-bg-alert-primary |
| `--sjs2-color-component-slider-design-bg` | color-bg-basic-tertiary |
| `--sjs2-color-component-slider-design-fg` | color-bg-brand-primary |
| `--sjs2-color-component-slider-design-thumb` | color-bg-basic-primary |
| `--sjs2-color-component-slider-design-dot` | color-bg-basic-primary |
| `--sjs2-color-component-slider-preview-bg` | color-bg-basic-tertiary |
| `--sjs2-color-component-slider-preview-fg` | color-bg-neutral-primary |
| `--sjs2-color-component-slider-preview-thumb` | color-bg-neutral-primary |
| `--sjs2-color-component-slider-preview-dot` | color-bg-neutral-primary |
| `--sjs2-border-effect-component-slider-default` | border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-utility-shadow-trigger-default |
| `--sjs2-border-effect-component-slider-hovered` | border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-utility-shadow-trigger-hovered |
| `--sjs2-border-effect-component-slider-disabled` | border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-utility-shadow-trigger-disabled |
| `--sjs2-border-effect-component-slider-invalid` | border-offset-x-trigger-invalid border-offset-y-trigger-invalid border-blur-trigger-invalid border-spread-trigger-invalid color-utility-shadow-trigger-invalid |
| `--sjs2-border-effect-component-slider-readonly` | border-offset-x-trigger-readonly border-offset-y-trigger-readonly border-blur-trigger-readonly border-spread-trigger-readonly color-utility-shadow-trigger-readonly |
| `--sjs2-border-effect-component-slider-design` | border-offset-x-trigger-design border-offset-y-trigger-design border-blur-trigger-design border-spread-trigger-design color-utility-shadow-trigger-design |
| `--sjs2-border-effect-component-slider-preview` | &mdash; |
| `--sjs2-border-effect-component-slider-a11y` | border-effect-a11y |

</div>

### Tags in Multi-Select Dropdown

<div id="-component-tagbox-item-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-radius-component-tagbox-item` | radius-form-item |
| `--sjs2-radius-component-tagbox-item-action` | radius-round |
| `--sjs2-color-component-tagbox-item-default-bg` | color-bg-basic-primary |
| `--sjs2-color-component-tagbox-item-default-border` | color-border-basic-secondary |
| `--sjs2-color-component-tagbox-item-default-label` | color-fg-basic-primary |
| `--sjs2-color-component-tagbox-item-default-mask-stop-1` | color-component-tagbox-item-default-bg |
| `--sjs2-color-component-tagbox-item-default-mask-stop-2` | color-bg-basic-primary, opacity-hidden |
| `--sjs2-color-component-tagbox-item-hovered-bg` | color-bg-basic-primary |
| `--sjs2-color-component-tagbox-item-hovered-border` | color-border-basic-secondary |
| `--sjs2-color-component-tagbox-item-hovered-label` | color-fg-basic-primary |
| `--sjs2-color-component-tagbox-item-hovered-mask-stop-1` | color-component-tagbox-item-hovered-bg |
| `--sjs2-color-component-tagbox-item-hovered-mask-stop-2` | color-bg-basic-primary, opacity-hidden |
| `--sjs2-color-component-tagbox-item-readonly-bg` | color-bg-basic-primary |
| `--sjs2-color-component-tagbox-item-readonly-border` | color-border-basic-secondary |
| `--sjs2-color-component-tagbox-item-readonly-label` | color-fg-basic-primary |
| `--sjs2-color-component-tagbox-item-disabled-bg` | color-bg-basic-primary |
| `--sjs2-color-component-tagbox-item-disabled-border` | color-border-basic-secondary-disabled |
| `--sjs2-color-component-tagbox-item-disabled-label` | color-fg-basic-primary-disabled |
| `--sjs2-color-component-tagbox-item-action-default-bg` | color-bg-neutral-secondary |
| `--sjs2-color-component-tagbox-item-action-default-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-tagbox-item-action-hovered-bg` | color-bg-neutral-secondary-dim |
| `--sjs2-color-component-tagbox-item-action-hovered-icon` | color-fg-neutral-primary-muted |
| `--sjs2-color-component-tagbox-item-action-pressed-bg` | color-bg-neutral-secondary |
| `--sjs2-color-component-tagbox-item-action-pressed-icon` | color-fg-neutral-primary-muted |
| `--sjs2-border-effect-component-tagbox-item-default` | inset border-offset-x-trigger-default border-offset-y-trigger-default border-blur-trigger-default border-spread-trigger-default color-component-tagbox-item-default-border |
| `--sjs2-border-effect-component-tagbox-item-hovered` | inset border-offset-x-trigger-hovered border-offset-y-trigger-hovered border-blur-trigger-hovered border-spread-trigger-hovered color-component-tagbox-item-hovered-border |
| `--sjs2-border-effect-component-tagbox-item-disabled` | inset border-offset-x-trigger-disabled border-offset-y-trigger-disabled border-blur-trigger-disabled border-spread-trigger-disabled color-component-tagbox-item-disabled-border |
| `--sjs2-border-effect-component-tagbox-item-readonly` | inset border-offset-x-trigger-readonly border-offset-y-trigger-readonly border-blur-trigger-readonly border-spread-trigger-readonly color-component-tagbox-item-readonly-border |
| `--sjs2-border-effect-component-tagbox-item-a11y` | border-effect-a11y |

</div>

### Labels

<div id="-component-label-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-label-box-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-label-box-gap-vertical` | spacing-x100 |
| `--sjs2-layout-component-label-content-gap-horizontal` | spacing-x050 |
| `--sjs2-typography-font-family-component-label-content` | typography-font-family-text |
| `--sjs2-typography-font-family-component-label-hint` | typography-font-family-text |
| `--sjs2-typography-font-size-component-label-content` | typography-font-size-default |
| `--sjs2-typography-font-size-component-label-hint` | typography-font-size-small |
| `--sjs2-typography-line-height-component-label-content` | typography-line-height-default |
| `--sjs2-typography-line-height-component-label-hint` | typography-line-height-small |
| `--sjs2-typography-font-weight-component-label-content` | typography-font-weight-basic |
| `--sjs2-typography-font-weight-component-label-hint` | typography-font-weight-basic |
| `--sjs2-color-component-label-default-text` | color-fg-basic-primary |
| `--sjs2-color-component-label-default-hint` | color-fg-basic-secondary |
| `--sjs2-color-component-label-disabled-text` | color-fg-basic-primary-disabled |
| `--sjs2-color-component-label-disabled-hint` | color-fg-basic-secondary-disabled |

</div>

### Labeled Items

<div id="-component-labeled-item-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-labeled-item-box-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-labeled-item-box-gap-horizontal` | spacing-x100 |

</div>

### Labeled Groups

<div id="-component-labeled-group-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-labeled-group-box-padding-vertical` | spacing-x150 |
| `--sjs2-layout-component-labeled-group-box-gap-vertical` | spacing-x300 |
| `--sjs2-layout-component-labeled-group-box-gap-horizontal` | spacing-x200 |

</div>

### Captions

<div id="-component-caption-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-caption-box-padding-left` | spacing-x000 |
| `--sjs2-layout-component-caption-box-padding-right` | spacing-x050 |
| `--sjs2-layout-component-caption-box-padding-top` | spacing-x000 |
| `--sjs2-layout-component-caption-box-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-caption-box-gap-vertical` | spacing-x050 |
| `--sjs2-layout-component-caption-content-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-caption-content-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-caption-hint-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-caption-hint-padding-top` | spacing-x000 |
| `--sjs2-layout-component-caption-hint-padding-bottom` | spacing-x200 |
| `--sjs2-layout-component-caption-action-group-gap` | spacing-x000 |
| `--sjs2-typography-font-family-component-caption-content` | typography-font-family-text |
| `--sjs2-typography-font-family-component-caption-hint` | typography-font-family-text |
| `--sjs2-typography-font-size-component-caption-content` | typography-font-size-default |
| `--sjs2-typography-font-size-component-caption-hint` | typography-font-size-small |
| `--sjs2-typography-line-height-component-caption-content` | typography-line-height-default |
| `--sjs2-typography-line-height-component-caption-hint` | typography-line-height-small |
| `--sjs2-typography-font-weight-component-caption-content` | typography-font-weight-basic |
| `--sjs2-typography-font-weight-component-caption-hint` | typography-font-weight-basic |
| `--sjs2-color-component-caption-default-text` | color-fg-basic-secondary |
| `--sjs2-color-component-caption-default-hint` | color-fg-basic-secondary |
| `--sjs2-color-component-caption-disabled-text` | color-fg-basic-secondary-disabled |
| `--sjs2-color-component-caption-disabled-hint` | color-fg-basic-secondary-disabled |

</div>

### Drop-Down Lists

<div id="-component-drop-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-drop-box-padding-horizontal` | spacing-x100 |
| `--sjs2-layout-component-drop-box-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-drop-box-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-drop-content-area-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-drop-item-box-padding-left` | spacing-x150 |
| `--sjs2-layout-component-drop-item-box-padding-right` | spacing-x150 |
| `--sjs2-layout-component-drop-item-box-padding-vertical` | spacing-x150 |
| `--sjs2-layout-component-drop-item-box-gap` | spacing-x100 |
| `--sjs2-layout-component-drop-item-label-padding-horizontal` | spacing-x050 |
| `--sjs2-radius-component-drop` | radius-x200 |
| `--sjs2-radius-component-drop-item` | radius-x100 |

</div>

### Menus

<div id="-component-menu-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-menu-box-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-menu-box-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-menu-box-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-menu-content-area-padding-horizontal` | spacing-x100 |
| `--sjs2-layout-component-menu-content-area-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-menu-content-area-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-menu-item-box-padding-left` | spacing-x150 |
| `--sjs2-layout-component-menu-item-box-padding-right` | spacing-x100 |
| `--sjs2-layout-component-menu-item-box-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-menu-item-box-gap` | spacing-x100 |
| `--sjs2-layout-component-menu-item-label-padding-horizontal` | spacing-x000 |
| `--sjs2-radius-component-menu` | radius-x200 |
| `--sjs2-radius-component-menu-item` | radius-x100 |

</div>

### Modal Windows

<div id="-component-modal-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-modal-box-padding-horizontal` | spacing-x400 |
| `--sjs2-layout-component-modal-box-padding-top` | spacing-x400 |
| `--sjs2-layout-component-modal-box-padding-bottom` | spacing-x400 |
| `--sjs2-layout-component-modal-box-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-modal-content-area-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-modal-content-area-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-modal-header-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-modal-header-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-modal-footer-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-modal-footer-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-modal-footer-action-group-gap` | spacing-x150 |
| `--sjs2-radius-component-modal` | radius-x300 |

</div>

### Notification Messages

<div id="-component-notifier-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-radius-component-notifier` | radius-x200 |

</div>

### Swatches

<div id="-component-swatch-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-radius-component-swatch` | radius-form-item |

</div>

### Validation Messages

<div id="-component-message-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-message-box-padding-horizontal` | spacing-x150 |
| `--sjs2-layout-component-message-box-padding-vertical` | spacing-x100 |
| `--sjs2-layout-component-message-box-gap-vertical` | spacing-x100 |
| `--sjs2-layout-component-message-content-gap-horizontal` | spacing-x100 |
| `--sjs2-radius-component-message` | radius-form |
| `--sjs2-typography-font-family-component-message-content` | typography-font-family-text |
| `--sjs2-typography-font-size-component-message-content` | typography-font-size-default |
| `--sjs2-typography-line-height-component-message-content` | typography-line-height-default |
| `--sjs2-typography-font-weight-component-message-content` | typography-font-weight-basic |
| `--sjs2-color-component-message-error-bg` | color-bg-alert-secondary |
| `--sjs2-color-component-message-error-icon` | color-fg-alert-primary |
| `--sjs2-color-component-message-error-text` | color-fg-basic-primary |
| `--sjs2-color-component-message-info-bg` | color-bg-note-secondary |
| `--sjs2-color-component-message-info-icon` | color-fg-note-primary |
| `--sjs2-color-component-message-info-text` | color-fg-basic-primary |
| `--sjs2-color-component-message-warning-bg` | color-bg-warning-secondary |
| `--sjs2-color-component-message-warning-icon` | color-fg-warning-primary |
| `--sjs2-color-component-message-warning-text` | color-fg-basic-primary |

</div>

### Pages

<div id="-component-page-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-page-box-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-page-box-padding-top` | spacing-x000 |
| `--sjs2-layout-component-page-box-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-page-box-gap-vertical` | spacing-large-vertical |
| `--sjs2-layout-component-page-content-area-padding-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-page-content-area-padding-top` | spacing-x000 |
| `--sjs2-layout-component-page-content-area-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-page-content-area-gap-horizontal` | spacing-x300 |
| `--sjs2-layout-component-page-content-area-gap-vertical` | spacing-x300 |
| `--sjs2-layout-component-page-header-padding-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-page-header-padding-top` | spacing-x000 |
| `--sjs2-layout-component-page-header-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-page-header-gap-vertical` | spacing-x050 |
| `--sjs2-layout-component-page-title-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-page-title-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-page-description-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-page-description-padding-top` | spacing-x000 |
| `--sjs2-layout-component-page-description-padding-bottom` | spacing-x000 |
| `--sjs2-radius-component-page` | radius-x150 |
| `--sjs2-typography-font-family-component-page-title` | typography-font-family-text |
| `--sjs2-typography-font-family-component-page-description` | typography-font-family-text |
| `--sjs2-typography-font-size-component-page-title` | typography-font-size-medium |
| `--sjs2-typography-font-size-component-page-description` | typography-font-size-default |
| `--sjs2-typography-line-height-component-page-title` | typography-line-height-medium |
| `--sjs2-typography-line-height-component-page-description` | typography-line-height-default |
| `--sjs2-typography-font-weight-component-page-title` | typography-font-weight-strong |
| `--sjs2-typography-font-weight-component-page-description` | typography-font-weight-basic |
| `--sjs2-color-component-page-default-title` | color-fg-basic-primary |
| `--sjs2-color-component-page-default-title-placeholder` | color-fg-basic-secondary |
| `--sjs2-color-component-page-default-description` | color-fg-basic-secondary |
| `--sjs2-color-component-page-default-description-placeholder` | color-fg-basic-tertiary |

</div>

### Survey

<div id="-component-survey-">

| Variable | Value |
| -------- | ----- |
| `--sjs2-layout-component-survey-box-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-survey-box-padding-top` | spacing-large-vertical |
| `--sjs2-layout-component-survey-box-padding-bottom` | calc(spacing-large-vertical * 2) |
| `--sjs2-layout-component-survey-box-gap-vertical` | spacing-large-vertical |
| `--sjs2-layout-component-survey-content-area-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-survey-content-area-padding-top` | spacing-x000 |
| `--sjs2-layout-component-survey-content-area-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-survey-content-area-gap-horizontal` | spacing-x000 |
| `--sjs2-layout-component-survey-content-area-gap-vertical` | spacing-x000 |
| `--sjs2-layout-component-survey-header-gap-vertical` | spacing-x100 |
| `--sjs2-layout-component-survey-header-padding-top` | spacing-x000 |
| `--sjs2-layout-component-survey-header-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-survey-header-padding-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-survey-header-action-group-gap` | spacing-x100 |
| `--sjs2-layout-component-survey-title-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-survey-title-padding-vertical` | spacing-x000 |
| `--sjs2-layout-component-survey-description-padding-top` | spacing-x000 |
| `--sjs2-layout-component-survey-description-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-survey-description-padding-horizontal` | spacing-x000 |
| `--sjs2-layout-component-survey-footer-padding-top` | spacing-x000 |
| `--sjs2-layout-component-survey-footer-padding-bottom` | spacing-x000 |
| `--sjs2-layout-component-survey-footer-padding-horizontal` | spacing-large-horizontal |
| `--sjs2-layout-component-survey-footer-action-group-gap` | spacing-x150 |
| `--sjs2-typography-font-family-component-survey-header-title` | typography-font-family-text |
| `--sjs2-typography-font-family-component-survey-header-description` | typography-font-family-text |
| `--sjs2-typography-font-size-component-survey-header-title` | typography-font-size-large |
| `--sjs2-typography-font-size-component-survey-header-description` | typography-font-size-default |
| `--sjs2-typography-line-height-component-survey-header-title` | typography-line-height-large |
| `--sjs2-typography-line-height-component-survey-header-description` | typography-line-height-default |
| `--sjs2-typography-font-weight-component-survey-header-title` | typography-font-weight-strong |
| `--sjs2-typography-font-weight-component-survey-header-description` | typography-font-weight-basic |
| `--sjs2-color-component-survey-header-default-title` | color-fg-basic-primary |
| `--sjs2-color-component-survey-header-default-title-placeholder` | color-fg-basic-secondary |
| `--sjs2-color-component-survey-header-default-description` | color-fg-basic-secondary |
| `--sjs2-color-component-survey-header-default-description-placeholder` | color-fg-basic-tertiary |
| `--sjs2-color-component-survey-header-default-bg` | transparent |

</div>