MCPX MCP Gateway

@import "./styles/tokens/index.css"; @tailwind base; @tailwind components; @tailwind utilities; .monacoHighlightField { color: #5147e4 !important; background-color: #ebe6fb; padding-block: 4px; border-radius: 4px; } .monaco-bg-light-blue .monaco-editor-background { background-color: #f9f8fb !important; } .monaco-bg-light-blue .margin { background-color: #f9f8fb !important; } .monaco-bg-light-blue .margin-view-overlays .line-numbers { opacity: 0.2 !important; } .monaco-bg-light-blue .view-lines .view-line { color: #6b6293 !important; } .monaco-bg-light-blue { overflow: hidden !important; padding: 16px 0 !important; border: none !important; } .monaco-bg-light-blue .monaco-editor { border: none !important; outline: none !important; } .monaco-bg-light-blue .monaco-editor .overflow-guard { border: none !important; } .monaco-editor-container { background-color: #f9f8fb !important; border-radius: 8px !important; border: 1px solid #d8dced !important; overflow: hidden !important; } .monaco-bg-light-blue .decorationsOverviewRuler { display: none !important; } .react-flow__handle { visibility: hidden !important; } .react-flow__pane { background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect width='2' height='2' fill='%23D9D9D9'/%3E%3C/svg%3E") !important; background-size: 16px 16px !important; background-repeat: repeat !important; margin: 16px; } @layer base { :root { color-scheme: light; /* main css variables (values replaced with new palette) */ --background: var(--structure-color-bg-app); --foreground: var(--text-colours-color-text-primary); --card: var(--structure-color-bg-container); --card-foreground: var(--text-colours-color-text-primary); --popover: var(--structure-color-bg-container); --popover-foreground: var(--text-colours-color-text-primary); --primary: var(--component-colours-color-fg-accent-primary); --text-primary: var(--text-colours-color-text-primary); --primary-foreground: var(--text-colours-color-text-primary-inverted); --secondary: var(--component-colours-color-bg-neutral); --secondary-foreground: var(--text-colours-color-text-primary); --muted: var(--text-colours-color-text-disabled); --muted-foreground: var(--text-colours-color-text-secondary); --accent: var(--component-colours-color-fg-accent-primary); --accent-foreground: var(--text-colours-color-text-primary-inverted); --destructive: var(--component-colours-color-fg-danger); --destructive-foreground: var(--text-colours-color-text-primary-inverted); --border: var(--structure-color-border-primary); --input: var(--structure-color-bg-container-overlay); --ring: var(--component-colours-color-border-interactive); --radius: var(--structure-container-corner-radius); /* Chart colors (unchanged) */ --chart-1: #30c5cf; --chart-2: #0065e5; --chart-3: #414cb4; --chart-4: #5b19e6; --chart-5: #9a3aa1; /* buttons */ --button-primary: var(--component-colours-color-fg-interactive); --button-hover: var(--component-colours-color-fg-interactive-hover); --button-border-secondary: red; --button-secondary: var(--component-colours-color-bg-interactive); --button-secondary-hover: var( --component-colours-color-bg-interactive-hover ); --button-danger: var(--component-colours-color-fg-danger); --button-danger-hover: var(--component-colours-color-fg-danger-hover); /* input */ --input-primary: var(--component-colours-color-bg-interactive); --input-primary-hover: var(--component-colours-color-bg-interactive-hover); --input-secondary: var(--component-colours-color-bg-neutral); --input-secondary-hover: var(--component-colours-color-bg-neutral-hover); --input-danger: var(--component-colours-color-bg-danger); --input-danger-hover: var(--component-colours-color-bg-danger-hover); /* Sidebar (values replaced with new palette) */ --sidebar-background: var(--structure-color-bg-app); --sidebar-foreground: var(--text-colours-color-text-primary); --sidebar-primary: var(--component-colours-color-fg-accent-primary); --sidebar-primary-foreground: var( --text-colours-color-text-primary-inverted ); --sidebar-accent: var(--component-colours-color-bg-accent-secondary); --sidebar-accent-foreground: var(--text-colours-color-text-primary); --sidebar-border: var(--structure-color-border-primary); --sidebar-ring: var(--component-colours-color-border-interactive); /* App background and containers (values replaced with new palette) */ --color-bg-app: var(--structure-color-bg-app); --color-bg-container: var(--structure-color-bg-container); --color-bg-container-overlay: var(--structure-color-bg-container-overlay); --color-bg-modal-overlay: var(--structure-color-modal-overlay); --color-bg-hover: var(--structure-color-bg-container); --color-bg-interactive: var(--component-colours-color-bg-interactive); --color-bg-interactive-hover: var( --component-colours-color-bg-interactive-hover ); --color-bg-info: var(--text-colours-color-text-secondary); --color-bg-info-hover: var(--text-colours-color-text-secondary); --color-bg-success: var(--component-colours-color-bg-success); --color-bg-success-hover: var(--component-colours-color-bg-success-hover); --color-bg-warning: var(--component-colours-color-bg-warning); --color-bg-warning-hover: var(--component-colours-color-bg-warning-hover); --color-bg-danger: var(--component-colours-color-bg-danger); --color-bg-danger-hover: var(--component-colours-color-bg-danger-hover); --color-bg-neutral: var(--component-colours-color-bg-neutral); --color-bg-secondary-accent: var( --component-colours-color-bg-accent-secondary ); --color-fg-interactive: var(--component-colours-color-fg-interactive); --color-fg-interactive-hover: var( --component-colours-color-fg-interactive-hover ); --color-fg-primary-accent: var(--component-colours-color-fg-accent-primary); --color-fg-secondary-accent: var( --component-colours-color-fg-accent-secondary ); --color-fg-info: var(--text-colours-color-text-secondary); --color-fg-info-hover: var(--text-colours-color-text-secondary); --color-fg-success: var(--component-colours-color-fg-success); --color-fg-success-hover: var(--component-colours-color-fg-success-hover); --color-fg-warning: var(--component-colours-color-fg-warning); --color-fg-warning-hover: var(--component-colours-color-fg-warning-hover); --color-fg-danger: var(--component-colours-color-fg-danger); --color-fg-danger-hover: var(--component-colours-color-fg-danger-hover); --color-border-primary: var(--structure-color-border-primary); --color-border-interactive: var( --component-colours-color-border-interactive ); --color-border-interactive-hover: var( --component-colours-color-border-interactive-hover ); --color-border-info: var(--text-colours-color-text-secondary); --color-border-info-hover: var(--text-colours-color-text-secondary); --color-border-success: var(--component-colours-color-border-success); --color-border-success-hover: var( --component-colours-color-border-success-hover ); --color-border-warning: var(--component-colours-color-border-warning); --color-border-warning-hover: var( --component-colours-color-border-warning-hover ); --color-border-danger: var(--component-colours-color-border-danger); --color-border-danger-hover: var( --component-colours-color-border-danger-hover ); --color-text-primary: var(--text-colours-color-text-primary); --color-text-primary-inverted: var( --text-colours-color-text-primary-inverted ); --color-text-secondary: var(--text-colours-color-text-secondary); --color-text-disabled: var(--text-colours-color-text-disabled); --color-gray-1: #b1b1b7; --color-active-agent: var(--component-colours-color-fg-accent-secondary); --color-active-server: var(--component-colours-color-fg-accent-primary); --color-mcpx-server: var(--component-colours-color-fg-interactive); --color-no-agents: var(--text-colours-color-text-disabled); } @keyframes pulse-line { 0% { stroke-dashoffset: 20; } 100% { stroke-dashoffset: 0; } } .pulsing-line { stroke-dasharray: 10 10; animation: pulse-line 2.5s linear infinite; } @layer base { * { @apply border-border outline-ring; } body { @apply bg-background text-foreground; } [data-radix-popper-content-wrapper] { transform-origin: var(--radix-popper-transform-origin); will-change: transform, opacity; } .react-flow__node-selectorNode { font-size: 12px; background: #eee; border: 1px solid #555; border-radius: 5px; text-align: center; } .react-flow__handle-flow__handle.react-flow__handle-flow__handle { border: none !important; } .react-flow__handle.connectionindicator { border: none !important; } } @layer utilities { @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } } }