Style#

Composable CSS-in-Python utilities: Style, Theme, CssClass, StyleSheet.

Build CSS from Python kwargs, centralize design tokens, and inject efficient CSS classes into the DOM instead of sending inline style strings per component.

class ngapp.style.CssClass(name)#

Bases: object

Thin wrapper around a CSS class name string.

Compose with + to join class names:

sidebar = CssClass("ngs0")
hidden  = CssClass("ngs1")
sidebar + hidden            # CssClass("ngs0 ngs1")
sidebar + "bg-primary"      # CssClass("ngs0 bg-primary")
"q-pa-md" + sidebar         # CssClass("q-pa-md ngs0")

class ngapp.style.Style(**kwargs)#

Bases: object

Composable CSS property bag.

Keyword arguments become CSS properties (underscores → hyphens). Merge with | (right side wins, None removes a property). Converts to a CSS string via str().

Example:

overlay = Style(position="fixed", z_index=9999, color="white")
hidden  = overlay | Style(display="none")
str(overlay)  # "position: fixed; z-index: 9999; color: white;"

class ngapp.style.StyleSheet(prefix='ngs')#

Bases: object

Registers Style objects as CSS classes and injects them into the DOM.

Example:

css = StyleSheet()
sidebar = css.add(Style(height="100%", background="#f5f7fa"))
hidden  = css.add(Style(display="none"))
Div(ui_class=sidebar + hidden)  # "ngs0 ngs1"
css.inject(app)                 # creates a <style> tag in <head>

add(style, name=None)#: Register a style and return a CssClass for it.

inject(app)#

Inject all registered styles into the DOM as a <style> tag.

Uses app.call_js, so it is safe to call during __init__.

class ngapp.style.Theme(**kwargs)#

Bases: object

Centralized design tokens (colors, spacing, font sizes).

All keyword arguments are stored as attributes. Pass a spacing tuple to enable the sp() helper.

Attributes named after Quasar brand colors (primary, secondary, accent, dark, positive, negative, info, warning) can be applied to the app with apply(), replacing set_colors.

Example:

theme = Theme(primary="#164d7d", border="#e0e0e0", spacing=(0, 4, 8, 12, 16))
theme.primary       # "#164d7d"
theme.sp(2)         # "8px"
theme.border_line() # "1px solid #e0e0e0"
theme.apply(app)    # sets --q-primary on the page

apply(app)#

Apply Quasar brand colors from this theme to the app.

Picks up any attributes named primary, secondary, accent, dark, positive, negative, info, or warning and passes them to app.set_colors().

border_line(width='1px', style='solid', color=None)#: Return a CSS border shorthand, e.g. "1px solid #e0e0e0".

sp(index)#: Return spacing[index] as a pixel string, e.g. "8px".