wehub-resource-sync
126 lines
3.3 KiB
CSS
126 lines
3.3 KiB
CSS
/* CopilotKit brand fonts */
|
|
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300..800&family=Spline+Sans+Mono:wght@400;500;600&display=swap");
|
|
|
|
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #010507;
|
|
|
|
/* Semantic tokens — CopilotKit brand */
|
|
--card: #ffffff;
|
|
--card-foreground: #010507;
|
|
--primary: #010507;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #ededf5;
|
|
--secondary-foreground: #010507;
|
|
--muted: #ededf5;
|
|
--muted-foreground: #57575b;
|
|
--accent: #eee6fe;
|
|
--accent-foreground: #010507;
|
|
--destructive: #fa5f67;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #dbdbe5;
|
|
--input: #dbdbe5;
|
|
--ring: #bec2ff;
|
|
|
|
/* Chart tokens */
|
|
--chart-tooltip-bg: #ffffff;
|
|
--chart-tooltip-border: #dbdbe5;
|
|
--chart-axis: #57575b;
|
|
|
|
--radius: 0.75rem;
|
|
|
|
/* Override CopilotKit font */
|
|
--cpk-default-font-family: var(--font-body);
|
|
|
|
/* Fonts */
|
|
--font-body: "Plus Jakarta Sans", "DM Sans", "Segoe UI", sans-serif;
|
|
--font-code:
|
|
"Spline Sans Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
|
|
|
|
/* Brand accent colors */
|
|
--cpk-mint-400: #85ecce;
|
|
--cpk-mint-800: #189370;
|
|
--cpk-lilac-400: #bec2ff;
|
|
--cpk-orange-400: #ffac4d;
|
|
--cpk-yellow-400: #fff388;
|
|
--cpk-ambient-gradient: linear-gradient(
|
|
90deg,
|
|
#bec2ff 0%,
|
|
#85ecce 45.673%,
|
|
#ffac4d 100%
|
|
);
|
|
}
|
|
|
|
:root.dark,
|
|
.dark {
|
|
--background: #010507;
|
|
--foreground: #ffffff;
|
|
|
|
--card: #191a1e;
|
|
--card-foreground: #ffffff;
|
|
--primary: #ffffff;
|
|
--primary-foreground: #010507;
|
|
--secondary: #242529;
|
|
--secondary-foreground: #ffffff;
|
|
--muted: #242529;
|
|
--muted-foreground: #adadb2;
|
|
--accent: #303136;
|
|
--accent-foreground: #ffffff;
|
|
--destructive: #fa5f67;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #303136;
|
|
--input: #303136;
|
|
--ring: #bec2ff;
|
|
|
|
--chart-tooltip-bg: #191a1e;
|
|
--chart-tooltip-border: #303136;
|
|
--chart-axis: #adadb2;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
/*
|
|
* Showcase highlight for suggestion pills.
|
|
* Applied via className in use-example-suggestions.tsx when showcase.json
|
|
* is set to a non-default mode (e.g. "a2ui", "opengenui"). Uses CopilotKit
|
|
* brand colors with a subtle tinted background.
|
|
* Add new showcase variants here following the same pattern.
|
|
*/
|
|
[data-copilotkit] button[data-slot="suggestion-pill"].a2ui-highlight {
|
|
border-color: var(--cpk-lilac-400);
|
|
background: color-mix(in srgb, var(--cpk-lilac-400) 15%, var(--background));
|
|
}
|
|
|
|
[data-copilotkit] button[data-slot="suggestion-pill"].opengenui-highlight {
|
|
border-color: var(--cpk-mint-400);
|
|
background: color-mix(in srgb, var(--cpk-mint-400) 15%, var(--background));
|
|
}
|
|
|
|
/*
|
|
* Position the CopilotKit inspector FAB BENEATH the Chat/App toggle in the
|
|
* top-right, instead of the header row where it would overlap it. The gap below
|
|
* the toggle matches the toggle's own 16px gap from the top of the viewport.
|
|
* The toggle is 16px from the top and 46px tall (both breakpoints), so its
|
|
* bottom is at 62px; a 16px gap puts the FAB circle at 78px. The visible circle
|
|
* renders ~16px below the host's `top`, so host top = 78 - 16 = 62px. Right edge
|
|
* matches the toggle's 16px inset.
|
|
*/
|
|
cpk-web-inspector {
|
|
top: 62px !important;
|
|
bottom: auto !important;
|
|
right: 16px !important;
|
|
}
|