Skip to main content

SDK_V1_CSS

Constant SDK_V1_CSS 

Source
const SDK_V1_CSS: &str = "/* Copyright 2026, AgentMux Corp. SPDX-License-Identifier: Apache-2.0 */\n\n/*\n * am-widget.css: optional base styles for a sandboxed AgentMux widget\n * (docs/specs/SPEC_USER_WIDGETS_AND_WIDGET_API_2026_10_09.md \u{a7}7). It uses the\n * theme variables the SDK\'s connect() sets (--am-bg, --am-fg, ...), so a plain\n * HTML widget looks at home, in dark or light, with no CSS of its own.\n *\n *   <link rel=\"stylesheet\" href=\"/agentmux/widget-sdk/am-widget.css\">\n */\n\n:root {\n    --am-bg: #1e1e1e;\n    --am-fg: #e6e6e6;\n    --am-muted: #9a9a9a;\n    --am-accent: #58c142;\n    --am-border: #3a3a3a;\n    --am-error: #e5484d;\n    --am-warning: #f5a623;\n    --am-success: #46a758;\n    --am-font: system-ui, sans-serif;\n    --am-font-mono: ui-monospace, monospace;\n    --am-radius: 6px;\n}\n\nhtml,\nbody {\n    margin: 0;\n    background: var(--am-bg);\n    color: var(--am-fg);\n    font: 13px/1.45 var(--am-font);\n}\n\nbody {\n    padding: 12px;\n}\n\nh1,\nh2,\nh3 {\n    font-weight: 600;\n    margin: 0 0 8px;\n}\n\nh1 {\n    font-size: 16px;\n}\n\nh2 {\n    font-size: 14px;\n}\n\np {\n    margin: 0 0 8px;\n}\n\na {\n    color: var(--am-accent);\n}\n\n.muted {\n    color: var(--am-muted);\n}\n\ncode,\npre,\nkbd {\n    font-family: var(--am-font-mono);\n    font-size: 12px;\n}\n\npre {\n    border: 1px solid var(--am-border);\n    border-radius: var(--am-radius);\n    padding: 8px;\n    overflow: auto;\n}\n\nbutton {\n    font: inherit;\n    color: var(--am-fg);\n    background: transparent;\n    border: 1px solid var(--am-border);\n    border-radius: var(--am-radius);\n    padding: 4px 10px;\n    cursor: pointer;\n}\n\nbutton:hover {\n    border-color: var(--am-accent);\n}\n\nbutton.primary {\n    border-color: var(--am-accent);\n    color: var(--am-accent);\n}\n\nbutton:disabled {\n    opacity: 0.5;\n    cursor: default;\n}\n\ninput,\nselect,\ntextarea {\n    font: inherit;\n    color: var(--am-fg);\n    background: transparent;\n    border: 1px solid var(--am-border);\n    border-radius: var(--am-radius);\n    padding: 4px 8px;\n    box-sizing: border-box;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus,\nbutton:focus-visible {\n    outline: 1px solid var(--am-accent);\n    outline-offset: 1px;\n}\n\ntextarea {\n    width: 100%;\n    resize: vertical;\n}\n\nul.list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\nul.list > li {\n    padding: 6px 0;\n    border-bottom: 1px solid var(--am-border);\n}\n\n.error {\n    color: var(--am-error);\n}\n\n.warning {\n    color: var(--am-warning);\n}\n\n.success {\n    color: var(--am-success);\n}\n";