Layers
Semantic tokens for semantic layers provide a cohesive approach to defining and applying visual depth and hierarchy across components in the design system. These tokens abstract the concept of layering into reusable variables, enabling consistent visual stacking, focus management, and depth perception while supporting flexibility for specific needs.
Is inherited by the z-index property.
| Sample | Layer | Token | Base token value |
|---|---|---|---|
| 6 | Top | $cds-layer-top | $cdsbt-zindex-600 z-index value: 600 |
| 5 | Fixed | $cds-layer-fixed | $cdsbt-zindex-500 z-index value: 500 |
| 4 | Overlay | $cds-layer-overlay | $cdsbt-zindex-400 z-index value: 400 |
| 3 | Modal | $cds-layer-modal | $cdsbt-zindex-300 z-index value: 300 |
| 2 | Dropdown | $cds-layer-dropdown | $cdsbt-zindex-200 z-index value: 200 |
| 1 | Structure | $cds-layer-structure | $cdsbt-zindex-100 z-index value: 100 |
| 0 | Ground | $cds-layer-ground | $cdsbt-zindex-0 z-index value: 0 |