UBO Mini Design System Styles

This page documents style definitions currently present in the local repo, based on the shared Syncfusion/Tailwind style layer and extension CSS files.

Main source files: packages/ubo-react-components/src/styles/ubo-theme.css and packages/ubo-react-components/src/styles/ubo-syncfusion-tailwind.css.

Brand Tokens

Defined in ubo-theme.css as custom CSS variables.

--color-brand-600
#001041
--color-brand-300
#899BD1
--color-brand-200
#B1BDE1
--color-brand-100
#DDE3F8
--color-brand-50
#EFF2FF

Semantic Theme Colors (Syncfusion Theme Settings)

Additional semantic colors are defined in packages/tailwind-config/settings.json. This is where text/background intent values are configured for Syncfusion theme generation.

Note: explicit tokens named foreground / background are not defined as standalone variables in the UBO theme file; semantic text/background intent is represented through tokens like $primary-text and $success-bg-color.

Token Value Preview
$primary#3e4760
primary
$primary-text#ffffff
primary-text
$success-bg-color#15803d
success-bg
$success-border-color#15803d
success-border
$success-text#ffffff
success-text
$danger-bg-color#dc2626
danger-bg
$danger-border-color#dc2626
danger-border
$danger-text#ffffff
danger-text
$info-bg-color#0e7490
info-bg
$info-border-color#0e7490
info-border
$info-text#ffffff
info-text
$warning#c2410c
warning
$warning-bg-color#c2410c
warning-bg
$warning-border-color#c2410c
warning-border
$warning-text#ffffff
warning-text

Neutral and Base Palette (Defined)

Also defined in packages/tailwind-config/settings.json. Useful for foreground/background planning.

$white
$coolgray-50
$coolgray-100
$coolgray-200
$coolgray-300
$coolgray-400
$coolgray-500
$coolgray-700
$coolgray-800
$coolgray-900
$black

Status Tokens

Group Defined variables Preview
Error --color-error-700, -600, -500, -400, -300, -200, -100, -25
error-700
error-600
error-500
error-400
error-300
error-200
error-100
error-25
Warning --color-warning-700, -600, -100, -25
warning-700
warning-600
warning-100
warning-25
Success --color-success-700, -600, -400, -300, -200, -100, -25
success-700
success-600
success-400
success-300
success-200
success-100
success-25
Pending --color-pending-700, -600, -550, -500, -400, -300, -200, -100, -25
pending-700
pending-600
pending-550
pending-500
pending-400
pending-300
pending-200
pending-100
pending-25

Button Style Definitions

Local button overrides currently include global Syncfusion button padding and custom brand variants.

Class / selector Defined behavior Visual
.e-btn.e-lib Global button padding set to 0.55rem. Default button padding
.e-btn.e-primary Uses brand primary background and border (--color-brand-600). Primary
.e-btn.ubo-secondary Uses light brand background + border (--color-brand-50/--color-brand-200). Secondary
.e-btn.e-outline (Syncfusion class) Outline button style from EJ2 theme (not custom overridden here). Outline

Other Local Style Hooks

Area Key selectors/classes Purpose
Tooltip .ubo-tooltip.e-tooltip-wrap Brand-colored tooltip background, border, and arrow styling.
Grid utility classes .e-grid-hide-filterbar, .e-detailrow-remove-indent, .e-detailrow-remove-border, .e-grid-row-pointer Hide/show grid sub-elements and improve row interaction UX.
Loading spinner .ubo-loading-spinner, .e-spinner-pane ... Forces spinner stroke color to brand primary.
Pill Tabs .ubo-pill-tabs Pill-style tab headers with active state border in brand color.
File Uploader .ubo-file-uploader--drop-area, .ubo-file-uploader.e-upload Custom drag/drop layout and Syncfusion uploader control cleanup.
Input Prefix .ubo-prefix-input, .ubo-prefix Prefixed input layout with shared spacing, borders, and typography.

Recommended Next Steps