Paradigm CSS

The css="" attribute

Use the css="" attribute for inline styles. Separate each property with a semicolon, just like regular CSS. Use underscores in place of spaces within values:

<div css="
    padding: 16px;
    background-color: #1f2329;
    border-radius: 8px;
    box-shadow: 0_2px_4px_rgba(0,0,0,0.1);
">
    Content here
</div>

The runtime parses the css attribute, converts each declaration into class tokens, and generates CSS rules at render time. This replaces hand-written class lists with concise markup.

Hover states

Paradigm CSS supports hover values by appending the hover value after a space, followed by :hover:

<a css="
    background-color: #FFFFFF #F9F9F9:hover;
    color: #3b82f6 #2563eb:hover;
    cursor: pointer;
">
    Link text
</a>

Button styling example

<button
    id="$block-create-item-btn"
    class="$block-button $block-button-primary"
    onclick="$block.createItem()"
    css="
        padding: 8px_16px;
        background-color: #3b82f6;
        color: #ffffff;
        border: none;
        border-radius: 6px;
        font-size: 0.875rem;
        cursor: pointer;
    "
>Create Item</button>

Breakpoint model

Paradigm CSS ships with a set of default breakpoints and supports custom extensions. Breakpoints are stored in ParadigmCSS.breakpoints and used when generating responsive style rules.

Components and variables

Design tokens live in ParadigmCSS.variables, and reusable utility bundles live in ParadigmCSS.components. Both are intended to be extended per application.

Render cycle

ParadigmCSS.render() scans the DOM for CSS tokens and builds the style sheet based on normalized class names and breakpoint definitions. Call it after any DOM update:

$block.renderItems = function() {
    const container = document.getElementById('$block-items-container');
    container.innerHTML = /* HTML content */;
    ParadigmCSS.render();
}

Dark theme color palette

Admin interfaces follow this palette:

Widget block styling

Widget blocks render inside a compact user-facing panel and use a light theme:

• Background: #FFFFFF
• Borders: solid_thin_rgba(0,0,0,0.1)
• Text primary: inherit (dark text on light background)
• Text secondary: rgba(0,0,0,0.5)
• Status badges: green #2ecc71, orange #e67e22, blue #3498db

When to use <style> tags

Only use <style> tags for CSS that cannot be expressed with css="":

• Pseudo-elements (:before, :after)
• Media queries (@media)
• Animations (@keyframes)
• Complex selectors (:nth-child, sibling selectors)

AI integration notes

• Attribute syntax gives AI a structured way to generate styles without guessing Tailwind classes.
• Custom breakpoints, components, and variables are centralized, making them easy to reference in prompts.