Elevation
Box shadow and filter shadow tokens for depth and focus.
Box shadow
| Name | Underlying Value | |
|---|---|---|
depth-inset themeVars.depth['inset'] | 1px 1px 2px 0px oklch(0.3328 0.0316 284.56 / 7.84%) | |
depth-onset themeVars.depth['onset'] | inset 1px 1px 2px 0px oklch(0.3328 0.0316 284.56 / 7.84%) | |
depth-surface-1 themeVars.depth['surface-1'] | 0px 2px 2px 0px oklch(0.3328 0.0316 284.56 / 3.92%), 0px 2px 4px 0px oklch(0.3328 0.0316 284.56 / 1.18%) | |
depth-surface-2 themeVars.depth['surface-2'] | 0px 2px 6px 0px oklch(0 0 0 / 3.92%), 0px 4px 12px 0px oklch(0 0 0 / 7.84%) | |
depth-surface-3 themeVars.depth['surface-3'] | 0px 2px 2px 0px oklch(0.3328 0.0316 284.56 / 1.18%), 0px 4px 24px 0px oklch(0.3328 0.0316 284.56 / 16.08%) | |
focus themeVars.focus['default'] | 0px 0px 0px 4px color-scope-focus-border, 0px 0px 0px 2px color-surface-content |
Filter shadow
| Name | Underlying Value | |
|---|---|---|
depth-filter-surface-1 themeVars['depth-filter']['surface-1'] | drop-shadow(0px 2px calc(2px / 2) oklch(0.3328 0.0316 284.56 / 3.92%)) drop-shadow(0px 2px calc(4px / 2) oklch(0.3328 0.0316 284.56 / 1.18%)) | |
depth-filter-surface-2 themeVars['depth-filter']['surface-2'] | drop-shadow(0px 2px calc(6px / 2) oklch(0 0 0 / 3.92%)) drop-shadow(0px 4px calc(12px / 2) oklch(0 0 0 / 7.84%)) | |
depth-filter-surface-3 themeVars['depth-filter']['surface-3'] | drop-shadow(0px 2px calc(2px / 2) oklch(0.3328 0.0316 284.56 / 1.18%)) drop-shadow(0px 4px calc(24px / 2) oklch(0.3328 0.0316 284.56 / 16.08%)) |