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 × 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 × 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 × 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 × 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 × 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 × 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 × 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 × 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 | 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 | 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, opacity-x020 | Disabled text and icons in brand-styled components |
--sjs2-color-border-brand-primary |
color-project-brand-600 | 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 | 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 | 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 | 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 | 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 | Primary informational messages, actions in the Survey Creator's Logic tab |
--sjs2-color-bg-note-secondary |
palette-blue-600, opacity-x010 | 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 | Positive primary actions, messages, indicators |
--sjs2-color-bg-positive-secondary |
palette-green-600, opacity-x010 | 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, 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 | Warning primary actions, messages, indicators |
--sjs2-color-bg-warning-secondary |
palette-yellow-600, opacity-x010 | 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, 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 | Alert primary actions, messages, indicators |
--sjs2-color-bg-alert-secondary |
palette-red-600, opacity-x010 | 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, 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 | Dark/static primary background |
--sjs2-color-bg-static-1-secondary |
palette-gray-900, opacity-x010 | 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 |
Subtle shadow tint for floating surfaces |
--sjs2-color-utility-shadow-surface-default |
palette-gray-999, 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 |
--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 + color-utility-shadow-floating-default | Default elevation effect for floating surfaces |
Surfaces
| Variable | Value | Role |
|---|---|---|
--sjs2-border-effect-surface-default |
Default surface primitives + color-utility-shadow-surface-default | 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 + color-utility-shadow-trigger-default | 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 | 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 | 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 | 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 | Background surface for dashboard views |
--sjs2-color-data-grid-fg-label |
color-fg-basic-primary | Color for labels on the chart axis |
--sjs2-color-data-grid-border-axis |
color-border-basic-primary | Color for the chart axis |
--sjs2-color-data-grid-border-line |
color-border-basic-secondary | 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 | 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
| 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 |
Panels
| 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 |
Questions
| 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 |
Input Fields
| 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 |
Text in Input Fields
| 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 |
Checkboxes, Radio Buttons & Toggles
Sliders
| 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 |
— |
--sjs2-border-effect-component-slider-a11y |
border-effect-a11y |
Tags in Multi-Select Dropdown
| 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 |
Labels
| 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 |
Labeled Items
| Variable | Value |
|---|---|
--sjs2-layout-component-labeled-item-box-padding-vertical |
spacing-x000 |
--sjs2-layout-component-labeled-item-box-gap-horizontal |
spacing-x100 |
Labeled Groups
| 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 |
Captions
| 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 |
Drop-Down Lists
| 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 |
Menus
Modal Windows
| 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 |
Notification Messages
| Variable | Value |
|---|---|
--sjs2-radius-component-notifier |
radius-x200 |
Swatches
| Variable | Value |
|---|---|
--sjs2-radius-component-swatch |
radius-form-item |
Validation Messages
| 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 |
Pages
| 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 |
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 |
Was this article helpful?
Send feedback to the SurveyJS team
Need help? Visit our support page