@copilotkit/react-ui
Version:
<div align="center"> <a href="https://copilotkit.ai" target="_blank"> <img src="https://github.com/copilotkit/copilotkit/raw/main/assets/banner.png" alt="CopilotKit Logo"> </a>
69 lines (63 loc) • 2.93 kB
CSS
/* IMPORTANT NOTE:
THE DARK AND LIGHT COLORS HERE ARE DUPLICATED BECAUSE NO REUSE METHOD POSSIBLE.
WHEN MAKING ANY CHANGE, MAKE SURE TO INCLUDE IT IN ALL DUPLICATIONS.
*/
/* BASE LIGHT THEME */
:root {
/* Semantic color tokens */
/* Main brand/action color - used for buttons, interactive elements */
--copilot-kit-primary-color: rgb(28, 28, 28);
/* Color that contrasts with primary - used for text on primary elements */
--copilot-kit-contrast-color: rgb(255, 255, 255);
/* Main page/container background color */
--copilot-kit-background-color: rgb(255 255 255);
/* Input box background color */
--copilot-kit-input-background-color: #fbfbfb;
/* Secondary background - used for cards, panels, elevated surfaces */
--copilot-kit-secondary-color: rgb(255 255 255);
/* Primary text color for main content */
--copilot-kit-secondary-contrast-color: rgb(28, 28, 28);
/* Border color for dividers and containers */
--copilot-kit-separator-color: rgb(200 200 200);
/* Muted color for disabled/inactive states */
--copilot-kit-muted-color: rgb(200 200 200);
/* Shadow tokens */
/* Small shadow for subtle elevation */
--copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
/* Medium shadow for cards */
--copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
/* Large shadow for modals */
--copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--copilot-kit-dev-console-bg: #f8f8fa;
--copilot-kit-dev-console-text: black;
}
/* BASE DARK THEME */
.dark,
html.dark,
body.dark,
[data-theme="dark"],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] :root {
/* Main brand/action color - used for buttons, interactive elements */
--copilot-kit-primary-color: rgb(255, 255, 255);
/* Color that contrasts with primary - used for text on primary elements */
--copilot-kit-contrast-color: rgb(28, 28, 28);
/* Main page/container background color */
--copilot-kit-background-color: rgb(17, 17, 17);
/* Input box background color */
--copilot-kit-input-background-color: #2c2c2c;
/* Secondary background - used for cards, panels, elevated surfaces */
--copilot-kit-secondary-color: rgb(28, 28, 28);
/* Primary text color for main content */
--copilot-kit-secondary-contrast-color: rgb(255, 255, 255);
/* Border color for dividers and containers */
--copilot-kit-separator-color: rgb(45, 45, 45);
/* Muted color for disabled/inactive states */
--copilot-kit-muted-color: rgb(45, 45, 45);
/* Small shadow for subtle elevation */
--copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
/* Medium shadow for cards */
--copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
/* Large shadow for modals */
--copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}