Shadow
Global
Token | Value | Example |
---|---|---|
--jh-shadow-100 Shadow 100; used on surface-level content and components such as cards and control thumbs |
0 4px 6px 0 rgba(39, 40, 41, var(--jh-opacity-200)), 0 2px 2px 0 rgba(39, 40, 41, var(--jh-opacity-100)) |
|
--jh-shadow-200 Shadow 200; used on components that overlay a portion of the UI such as FABs and toasts |
0 8px 12px 0 rgba(39, 40, 41, var(--jh-opacity-200)), 0 4px 4px 0 rgba(39, 40, 41, var(--jh-opacity-100)) |
|
--jh-shadow-300 Shadow 300; used on major sections of the UI such as menus |
0 12px 18px 0 rgba(39, 40, 41, var(--jh-opacity-200)), 0 6px 6px 0 rgba(39, 40, 41, var(--jh-opacity-100)) |
|
--jh-shadow-400 Shadow 400; used on components that should overlay the entire UI such as dialogs |
0 16px 24px 0 rgba(39, 40, 41, var(--jh-opacity-200)), 0 8px 8px 0 rgba(39, 40, 41, var(--jh-opacity-100)) |
|
Decision
Token | Value | Example |
---|---|---|
--jh-shadow-focus Used to style the focus ring on interactive elements |
0 0 0 1px var(--jh-color-interactive-focus-inner), 0 0 0 3px var(--jh-color-interactive-focus-outer) |
|