msei99/pbgui/pbgui-css-tokens

PBGui CSS Design Tokens

When to Use

• Writing new CSS for any frontend/*.html page
• Reviewing/migrating hardcoded px or rem font-size values
• Adding spacing, padding, gap, margin values to new components
• Ensuring a new page is consistent with api_keys_editor.html

Token Reference

Typography (6 levels)

Spacing (4 levels)

Control Heights

:root Block (copy verbatim)

:root {
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 12px;
    --sp-lg: 20px;
    --input-h: 32px;
    --btn-h: 32px;
}

Migration: Hardcoded → Token

Per-Element Mapping (api_keys_editor.html reference)

Procedure: Migrating a New Page

1. Add the :root block (above) inside <style> at the top of the file
2. Set html, body { font-size: var(--fs-base); }
3. Search for font-size: in the file and replace each value using the mapping table
4. Search for padding:, gap:, margin: and replace spacing values using --sp-*
5. For input, select, button: add height: var(--input-h) / height: var(--btn-h)
6. Validate: no hardcoded px/rem font-size values should remain (except inside :root)

Notes

• Source of truth: frontend/api_keys_editor.html :root block (line ~10)
• --sp-*, --input-h, --btn-h are defined but not yet wired everywhere — wire them as you touch elements
• No Streamlit pages remain; apply these tokens only to FastAPI-served frontend HTML/CSS.