UBO + Syncfusion Elevation and Shadows
This page captures the current shadow/elevation patterns generated in the Syncfusion Tailwind theme used by UBO.
Source snapshot:
packages/tailwind-config/compatibility/tailwind.css.
Shadow Utilities Actually Used In Code
These are the real Tailwind shadow classes currently used in app/package source code
(apps/*/src and packages/*/src), including one arbitrary shadow
utility.
| Utility class | Representative shadow value | Preview | Where currently used |
|---|---|---|---|
shadow-xs |
0 1px 2px 0 rgba(16, 24, 40, 0.05) (representative) |
xs |
ProductVerticalTabs, EmptyState, ValidationResult, customer chips, ConsentItem. |
shadow-sm |
0 1px 2px 0 rgba(0, 0, 0, 0.05) (representative) |
sm |
common.tsx, SelectedGames, VendorSummary, payments grid cards. |
shadow |
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) (representative) |
base |
shop-loans.page.tsx, not-authorize.component.tsx. |
shadow-md |
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) (representative) |
md |
shop-loans.page.tsx. |
shadow-lg |
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) (representative) |
lg |
ubo-top-navigation.tsx dropdown menu. |
shadow-none |
none |
none |
Used with !shadow-none to cancel shadow on interactive controls in SelectedGames.tsx. |
shadow-[0_1px_2px_0_rgba(16,24,40,0.05)] |
0 1px 2px 0 rgba(16, 24, 40, 0.05) |
arbitrary |
Used in engagement summary/metadata chips in CreatePromotionPage, ReviewSummary, and PromotionReviewModal. |
Syncfusion Theme Box-Shadow Formulas (Generated CSS)
The generated Syncfusion theme also defines direct box-shadow formulas for
controls, overlays, and focus states. These are not Tailwind utility classes, but they can
affect final rendering when Syncfusion classes are used.
0 1px 2px 0 rgba(0, 0, 0, 0.05)(common subtle elevation)0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)(card-like)0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)(popup/dialog-like)
Focus Ring (Not Elevation, But Related)
The theme uses ring-style shadows extensively for focus visibility. These are state rings, not depth elevation.
| Pattern | Value | Preview | Purpose |
|---|---|---|---|
| Primary focus ring | 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #3e4760 |
Focus |
Accessible focus visibility on buttons and interactive controls. |
| 1px outline-like ring | 0 0 0 1px #3e4760 or 0 0 0 1px #9ca3af |
1px ring |
Subtle state indication for controls without adding depth. |
| Soft halo ring | 0 0 0 2px rgba(107, 114, 128, 0.12) / 0 0 0 4px rgba(107, 114, 128, 0.12) |
Halo |
Status/hover halos on specific controls and badges. |
Recommended Team Usage
- Prefer shared utility classes first (
shadow-sm,shadow-lg, etc.) and use arbitrary shadows only when necessary. - For consistency, avoid mixing too many shadow strengths in the same view.
- Treat focus rings as accessibility state styling, separate from depth/elevation styling.