Classes

Borders & shape Utilities

ClassBehavior
rounded-smSlightly rounded corners (4px)
roundedNormal rounded corners (10px)
rounded-lgHighly rounded corners for large boxes (16px)
fully-roundedTurns elements into circles or pill shapes
border-thinAdds a thin 1px outline border
border-thickAdds a thick 2px outline border

Containers Utilities

ClassBehavior
surface-panelMain background panel for widgets and layouts
surface-cardInner card background to group items inside a panel
floating-overlayFloating box with shadow for menus and notifications

Interactive Utilities

ClassBehavior
btnStandard clickable button style
btn-primaryColored button used for main actions
btn-destructiveRed button used for delete or exit actions
list-row-interactiveClickable menu row that lights up when hovered or pressed

Typography & badges Utilities

ClassBehavior
text-headerLarge, bright text used for titles
text-mutedSmall, faded text used for secondary info
badgeSmall tag or label with a dark background pill shape
badge-successGreen status label indicating success or active states

Progress & sliders Utilities

ClassBehavior
progress-bar-fillThe filled portion of a progress tracker or battery level bar
slider-troughThe empty background track of volume/brightness sliders

Stateful components Utilities

ClassBehavior
switch-track-activeBackground track of a toggle switch when flipped to ON
list-row-selectedHighlighted background state for currently active menu choices or active workspaces

Layout enhancements Utilities

ClassBehavior
separator-hA thin horizontal divider line to break up content inside modules
separator-vA thin vertical divider line to separate side-by-side items

Presentation Utilities

ClassBehavior
card-headerTop border highlight frame tailored for system graphs or hardware monitors
input-fieldStyling for custom user input boxes or terminal command runners

Warnings Utilities

ClassBehavior
alert-bannerHigh-visibility danger strip for critically low battery or lost internet
text-warningYellow-tinted typography scale for low urgency battery or update alerts

Animations Utilities

ClassBehavior
ease-in-outEasing transition that starts slow, accelerates, then slows down at the end
ease-outEasing transition that snaps instantly and slows to a smooth halt
ease-inEasing transition that starts slow and hits full speed dramatically at the finish
fade-inSmoothly fades an invisible element to completely visible
fade-outSmoothly fades an element to completely translucent
scale-inPops a widget up into view by blowing it up from a smaller size scale
scale-outShrinks a widget down until it collapses out of the presentation layer
slide-upGlides a hidden bottom module upwards into its active resting placement
slide-downGlides an active top module downwards into its active resting placement
pulse-glowContinuous breathing light effect tailored for indicators or low battery warnings
duration-fastFast 150ms playback
duration-normalStandard 300ms playback
duration-slowSlow 500ms playback
delay-noneExecutes the animation immediately
delay-shortPostpones the animation start by 100ms
delay-longPostpones the animation start by 300ms
loop-infiniteForces the keyframe loop to repeat forever
loop-onceRestricts execution to run exactly once through the timeline sequence
freeze-frameDirects GTK to hold the visual elements on the very last keyframe when complete
reset-frameInstantly snaps elements back to their initial un-animated look once finished