formatting branch

This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-29 19:58:34 -03:00
commit e95dd524a8
24 changed files with 134 additions and 145 deletions

View file

@ -229,26 +229,25 @@ export default function ParameterComponent({
</div> </div>
) : left === true && type === "code" ? ( ) : left === true && type === "code" ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<CodeAreaComponent <CodeAreaComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>
) : left === true && type === "file" ? ( ) : left === true && type === "file" ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<InputFileComponent <InputFileComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
fileTypes={data.node.template[name].fileTypes} fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes} suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => { onFileChange={(t: string) => {
data.node.template[name].file_path = t; data.node.template[name].file_path = t;
save(); save();
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : left === true && type === "int" ? ( ) : left === true && type === "int" ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
@ -261,13 +260,12 @@ export default function ParameterComponent({
</div> </div>
) : left === true && type === "prompt" ? ( ) : left === true && type === "prompt" ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<PromptAreaComponent <PromptAreaComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>
) : ( ) : (
<></> <></>
)} )}

View file

@ -29,10 +29,7 @@ export default function SingleAlert({
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircle <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
className="h-5 w-5 text-status-red"
aria-hidden="true"
/>
</div> </div>
<div className="ml-3"> <div className="ml-3">
<h3 className="text-sm break-words font-medium text-error-foreground"> <h3 className="text-sm break-words font-medium text-error-foreground">
@ -65,7 +62,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-status-red" className="inline-flex rounded-md p-1.5 text-status-red"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<X className="h-4 w-4 text-error-foreground" aria-hidden="true" /> <X
className="h-4 w-4 text-error-foreground"
aria-hidden="true"
/>
</button> </button>
</div> </div>
</div> </div>
@ -76,10 +76,7 @@ export default function SingleAlert({
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Info <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
className="h-5 w-5 text-status-blue "
aria-hidden="true"
/>
</div> </div>
<div className="ml-3 flex-1 md:flex md:justify-between"> <div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-info-foreground font-medium"> <p className="text-sm text-info-foreground font-medium">
@ -111,7 +108,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-info-foreground" className="inline-flex rounded-md p-1.5 text-info-foreground"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<X className="h-4 w-4 text-info-foreground" aria-hidden="true" /> <X
className="h-4 w-4 text-info-foreground"
aria-hidden="true"
/>
</button> </button>
</div> </div>
</div> </div>
@ -145,7 +145,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-status-green" className="inline-flex rounded-md p-1.5 text-status-green"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<X className="h-4 w-4 text-success-foreground" aria-hidden="true" /> <X
className="h-4 w-4 text-success-foreground"
aria-hidden="true"
/>
</button> </button>
</div> </div>
</div> </div>

View file

@ -43,10 +43,7 @@ export default function ErrorAlert({
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircle <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
className="h-5 w-5 text-status-red"
aria-hidden="true"
/>
</div> </div>
<div className="ml-3"> <div className="ml-3">
<h3 className="text-sm font-medium text-error-foreground"> <h3 className="text-sm font-medium text-error-foreground">

View file

@ -40,10 +40,7 @@ export default function NoticeAlert({
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Info <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
className="h-5 w-5 text-status-blue "
aria-hidden="true"
/>
</div> </div>
<div className="ml-3 flex-1 md:flex md:justify-between"> <div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-info-foreground">{title}</p> <p className="text-sm text-info-foreground">{title}</p>

View file

@ -71,9 +71,7 @@ export default function ExtraSidebar() {
<span className="flex-1">{item.name}</span> <span className="flex-1">{item.name}</span>
<svg <svg
className={classNames( className={classNames(
open open ? "text-ring rotate-90" : "text-ring",
? "text-ring rotate-90"
: "text-ring",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring" "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring"
)} )}
viewBox="0 0 20 20" viewBox="0 0 20 20"

View file

@ -170,12 +170,12 @@ export default function BuildTrigger({
{isBuilding && progress < 1 ? ( {isBuilding && progress < 1 ? (
// Render your loading animation here when isBuilding is true // Render your loading animation here when isBuilding is true
<RadialProgressComponent <RadialProgressComponent
// ! confirm below works // ! confirm below works
color={"text-build-trigger"} color={"text-build-trigger"}
value={progress} value={progress}
></RadialProgressComponent> ></RadialProgressComponent>
) : isBuilding ? ( ) : isBuilding ? (
<Loading strokeWidth={1.5} className="stroke-build-trigger"/> <Loading strokeWidth={1.5} className="stroke-build-trigger" />
) : ( ) : (
<Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" /> <Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
)} )}

View file

@ -36,11 +36,13 @@ export default function Dropdown({
editNode editNode
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" + ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" +
INPUT_STYLE INPUT_STYLE
: "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" + : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
INPUT_STYLE INPUT_STYLE
} }
> >
<span className="block bg-background truncate w-full">{internalValue}</span> <span className="block bg-background truncate w-full">
{internalValue}
</span>
<span <span
className={ className={
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2" "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
@ -72,9 +74,7 @@ export default function Dropdown({
key={id} key={id}
className={({ active }) => className={({ active }) =>
classNames( classNames(
active active ? " bg-accent" : "",
? " bg-accent"
: "",
editNode editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12" ? "relative cursor-default select-none py-0.5 pl-3 pr-12"
: "relative cursor-default select-none py-2 pl-3 pr-9" : "relative cursor-default select-none py-2 pl-3 pr-9"

View file

@ -22,7 +22,9 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
/> />
</svg> </svg>
<br></br> <br></br>
<span className="animate-pulse text-almost-medium-blue text-lg">Loading...</span> <span className="animate-pulse text-almost-medium-blue text-lg">
Loading...
</span>
</div> </div>
); );
} }

View file

@ -73,9 +73,7 @@ export default function PromptAreaComponent({
); );
}} }}
> >
{!editNode && ( {!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
<ExternalLink className="w-6 h-6 hover:text-ring " />
)}
</button> </button>
</div> </div>
</div> </div>

View file

@ -76,9 +76,7 @@ export default function TextAreaComponent({
); );
}} }}
> >
{!editNode && ( {!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
<ExternalLink className="w-6 h-6 hover:text-ring " />
)}
</button> </button>
</div> </div>
</div> </div>

View file

@ -30,9 +30,7 @@ export default function ToggleComponent({
className={classNames( className={classNames(
enabled ? "translate-x-5" : "translate-x-0", enabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", "pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out",
disabled disabled ? "bg-input " : "bg-background"
? "bg-input "
: "bg-background"
)} )}
> >
<span <span

View file

@ -25,4 +25,4 @@ const Switch = React.forwardRef<
)); ));
Switch.displayName = SwitchPrimitives.Root.displayName; Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch }; export { Switch };

View file

@ -150,8 +150,6 @@ export const EXPORT_CODE_DIALOG =
export const INPUT_STYLE = export const INPUT_STYLE =
"focus:tw-ring-none focus-visible:outline-none focus:ring-ring bg-background focus:outline-none"; "focus:tw-ring-none focus-visible:outline-none focus:ring-ring bg-background focus:outline-none";
/** /**
* The base text for subtitle of code dialog * The base text for subtitle of code dialog
* @constant * @constant
@ -170,9 +168,8 @@ export const NAV_DISPLAY_STYLE =
* The base text for subtitle of code dialog * The base text for subtitle of code dialog
* @constant * @constant
*/ */
export const BUTTON_DIV_STYLE = export const BUTTON_DIV_STYLE = " flex gap-2 ";
" flex gap-2 "; (" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ");
" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
/** /**
* Default description for the flow * Default description for the flow

View file

@ -192,26 +192,28 @@ export function TabsProvider({ children }: { children: ReactNode }) {
} }
function processFlowEdges(flow) { function processFlowEdges(flow) {
if(!flow.data || !flow.data.edges) return; if (!flow.data || !flow.data.edges) return;
flow.data.edges.forEach((edge) => { flow.data.edges.forEach((edge) => {
edge.className = ""; edge.className = "";
edge.style = { stroke: "#555555" }; edge.style = { stroke: "#555555" };
}); });
} }
function updateDisplay_name(node:NodeType,template:APIClassType) { function updateDisplay_name(node: NodeType, template: APIClassType) {
node.data.node.display_name = template["display_name"]?template["display_name"]:node.data.type; node.data.node.display_name = template["display_name"]
? template["display_name"]
: node.data.type;
} }
function processFlowNodes(flow) { function processFlowNodes(flow) {
if(!flow.data || !flow.data.nodes) return; if (!flow.data || !flow.data.nodes) return;
flow.data.nodes.forEach((node:NodeType) => { flow.data.nodes.forEach((node: NodeType) => {
const template = templates[node.data.type]; const template = templates[node.data.type];
if (!template) { if (!template) {
setErrorData({ title: `Unknown node type: ${node.data.type}` }); setErrorData({ title: `Unknown node type: ${node.data.type}` });
return; return;
} }
if (Object.keys(template["template"]).length > 0) { if (Object.keys(template["template"]).length > 0) {
updateDisplay_name(node,template); updateDisplay_name(node, template);
updateNodeBaseClasses(node, template); updateNodeBaseClasses(node, template);
updateNodeEdges(flow, node, template); updateNodeEdges(flow, node, template);
updateNodeDescription(node, template); updateNodeDescription(node, template);
@ -220,11 +222,15 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}); });
} }
function updateNodeBaseClasses(node:NodeType,template:APIClassType) { function updateNodeBaseClasses(node: NodeType, template: APIClassType) {
node.data.node.base_classes = template["base_classes"]; node.data.node.base_classes = template["base_classes"];
} }
function updateNodeEdges(flow:FlowType, node:NodeType,template:APIClassType) { function updateNodeEdges(
flow: FlowType,
node: NodeType,
template: APIClassType
) {
flow.data.edges.forEach((edge) => { flow.data.edges.forEach((edge) => {
if (edge.source === node.id) { if (edge.source === node.id) {
edge.sourceHandle = edge.sourceHandle edge.sourceHandle = edge.sourceHandle
@ -236,11 +242,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}); });
} }
function updateNodeDescription(node:NodeType,template:APIClassType) { function updateNodeDescription(node: NodeType, template: APIClassType) {
node.data.node.description = template["description"]; node.data.node.description = template["description"];
} }
function updateNodeTemplate(node:NodeType,template:APIClassType) { function updateNodeTemplate(node: NodeType, template: APIClassType) {
node.data.node.template = updateTemplate( node.data.node.template = updateTemplate(
template["template"] as unknown as APITemplateType, template["template"] as unknown as APITemplateType,
node.data.node.template as APITemplateType node.data.node.template as APITemplateType

View file

@ -87,10 +87,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Code</span> <span className="pr-2">Code</span>
<Code2 <Code2 className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
className="h-6 w-6 text-primary pl-1 "
aria-hidden="true"
/>
</DialogTitle> </DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription> <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader> </DialogHeader>
@ -103,7 +100,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<div className="flex items-center justify-between px-2"> <div className="flex items-center justify-between px-2">
<TabsList> <TabsList>
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger> <TabsTrigger key={index} value={index.toString()}>
{tab.name}
</TabsTrigger>
))} ))}
</TabsList> </TabsList>
<div className="float-right"> <div className="float-right">

View file

@ -79,7 +79,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
} }
return ( return (
<Dialog open={true} onOpenChange={setModalOpen} > <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger> <DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[700px] "> <DialogContent className="lg:max-w-[700px] ">
<DialogHeader> <DialogHeader>

View file

@ -76,7 +76,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<div className="h-full w-full flex flex-col justify-center items-center"> <div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm"> <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<Icon <Icon
strokeWidth={1.5} strokeWidth={1.5}
className="w-10 mt-4 h-10 p-1 rounded" className="w-10 mt-4 h-10 p-1 rounded"
style={{ style={{
color: color:

View file

@ -32,9 +32,7 @@ export default function ChatMessage({
<div <div
className={classNames( className={classNames(
"w-full py-2 pl-2 flex", "w-full py-2 pl-2 flex",
chat.isSend chat.isSend ? "bg-background " : "bg-input"
? "bg-background "
: "bg-input"
)} )}
> >
<div <div
@ -60,9 +58,7 @@ export default function ChatMessage({
/> />
</div> </div>
)} )}
{chat.isSend && ( {chat.isSend && <User2 className="w-6 h-6 -mb-1 text-primary " />}
<User2 className="w-6 h-6 -mb-1 text-primary " />
)}
</div> </div>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="w-full text-start flex items-center"> <div className="w-full text-start flex items-center">

View file

@ -39,10 +39,7 @@ export default function FileCard({ fileName, content, fileType }) {
<div <div
className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `} className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `}
> >
<button <button className="text-ring py-1 px-2 " onClick={handleDownload}>
className="text-ring py-1 px-2 "
onClick={handleDownload}
>
<DownloadCloud className="hover:scale-110 w-5 h-5 text-current" /> <DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
</button> </button>
</div> </div>

View file

@ -402,8 +402,10 @@ export default function Page({ flow }: { flow: FlowType }) {
maxZoom={8} maxZoom={8}
> >
<Background className="" /> <Background className="" />
<Controls className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border <Controls
fill-foreground bg-muted"></Controls> className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
fill-foreground bg-muted"
></Controls>
</ReactFlow> </ReactFlow>
<Chat flow={flow} reactFlowInstance={reactFlowInstance} /> <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
</div> </div>

View file

@ -109,7 +109,7 @@ export default function ExtraSidebar() {
disabled={!isPending} disabled={!isPending}
> >
<Save <Save
strokeWidth={1.5} strokeWidth={1.5}
className={ className={
"w-5 h-5" + (isPending ? " " : " text-muted-foreground") "w-5 h-5" + (isPending ? " " : " text-muted-foreground")
} }
@ -134,7 +134,7 @@ export default function ExtraSidebar() {
}} }}
/> />
<div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center"> <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
{/* ! replace hash color here */} {/* ! replace hash color here */}
<Search size={20} strokeWidth={1.5} className="text-primary" /> <Search size={20} strokeWidth={1.5} className="text-primary" />
</div> </div>
</div> </div>

View file

@ -83,7 +83,6 @@ const NodeToolbarComponent = (props) => {
</ShadTooltip> </ShadTooltip>
)} )}
{/* <Menu as="div" className="relative inline-block text-left z-100"> {/* <Menu as="div" className="relative inline-block text-left z-100">
<button className="text-gray-700 transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"> <button className="text-gray-700 transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
<div> <div>

View file

@ -9,10 +9,10 @@ import { BUTTON_DIV_STYLE } from "../../constants";
export default function HomePage() { export default function HomePage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } = const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
useContext(TabsContext); useContext(TabsContext);
useEffect(() => { useEffect(() => {
setTabId(""); setTabId("");
}, []); }, []);
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16"> <div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-2 px-6"> <div className="w-full flex justify-between py-12 pb-2 px-6">
@ -20,7 +20,7 @@ export default function HomePage() {
<Home className="w-6" /> <Home className="w-6" />
{USER_PROJECTS_HEADER} {USER_PROJECTS_HEADER}
</span> </span>
<div className={`${ BUTTON_DIV_STYLE }`}> <div className={`${BUTTON_DIV_STYLE}`}>
<Button <Button
variant="primary" variant="primary"
onClick={() => { onClick={() => {

View file

@ -6,7 +6,12 @@ import plugin from "tailwindcss/plugin";
// ! Check if removing the other module.exports made sense // ! Check if removing the other module.exports made sense
module.exports = { module.exports = {
darkMode: ["class"], darkMode: ["class"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./index.html", "./src/**/*.{js,ts,tsx,jsx}"], content: [
"app/**/*.{ts,tsx}",
"components/**/*.{ts,tsx}",
"./index.html",
"./src/**/*.{js,ts,tsx,jsx}",
],
important: true, important: true,
theme: { theme: {
container: { container: {
@ -18,45 +23,44 @@ module.exports = {
}, },
extend: { extend: {
colors: { colors: {
"almost-dark-gray": "var(--almost-dark-gray)",
'almost-dark-gray': "var(--almost-dark-gray)", "almost-light-blue": "var(--almost-light-blue)",
'almost-light-blue': "var(--almost-light-blue)", "almost-medium-blue": "var(--almost-medium-blue)",
'almost-medium-blue': "var(--almost-medium-blue)", "almost-medium-gray": "var(--almost-medium-gray)",
'almost-medium-gray': "var(--almost-medium-gray)", "almost-medium-green": "var(--almost-medium-green)",
'almost-medium-green': "var(--almost-medium-green)", "almost-medium-red": "var(--almost-medium-red)",
'almost-medium-red': "var(--almost-medium-red)", "btn-shadow": "var(--round-btn-shadow)",
'btn-shadow': "var(--round-btn-shadow)", "build-trigger": "var(--build-trigger)",
'build-trigger': "var(--build-trigger)", "chat-trigger": "var(--chat-trigger)",
'chat-trigger': "var(--chat-trigger)", "blur-shared": "var(--blur-shared)",
'blur-shared': "var(--blur-shared)", "dark-blue": "var(--dark-blue)",
'dark-blue': "var(--dark-blue)", "dark-gray": "var(--dark-gray)",
'dark-gray': "var(--dark-gray)", "dark-red": "var(--dark-red)",
'dark-red': "var(--dark-red)", "error-background": "var(--error-background)",
'error-background': "var(--error-background)", "error-foreground": "var(--error-foreground)",
'error-foreground': "var(--error-foreground)", "high-dark-gray": "var(--high-dark-gray)",
'high-dark-gray': "var(--high-dark-gray)", "high-indigo": "var(--high-indigo)",
'high-indigo': "var(--high-indigo)", "high-light-gray": "var(--high-light-gray)",
'high-light-gray': "var(--high-light-gray)", "info-background": "var(--info-background)",
'info-background': "var(--info-background)", "info-foreground": "var(--info-foreground)",
'info-foreground': "var(--info-foreground)", "light-blue": "var(--light-blue)",
'light-blue': "var(--light-blue)", "light-gray": "var(--light-gray)",
'light-gray': "var(--light-gray)", "light-slate": "var(--light-slate)",
'light-slate': "var(--light-slate)", "medium-blue": "var(--medium-blue)",
'medium-blue': "var(--medium-blue)", "status-blue": "var(--status-blue)",
'status-blue': "var(--status-blue)", "medium-dark-gray": "var(--medium-dark-gray)",
'medium-dark-gray': "var(--medium-dark-gray)", "medium-dark-green": "var(--medium-dark-green)",
'medium-dark-green': "var(--medium-dark-green)", "medium-dark-red": "var(--medium-dark-red)",
'medium-dark-red': "var(--medium-dark-red)", "medium-emerald": "var(--medium-emerald)",
'medium-emerald': "var(--medium-emerald)", "medium-gray": "var(--medium-gray)",
'medium-gray': "var(--medium-gray)", "medium-high-indigo": "var(--medium-high-indigo)",
'medium-high-indigo': "var(--medium-high-indigo)", "medium-indigo": "var(--medium-indigo)",
'medium-indigo': "var(--medium-indigo)", "medium-low-gray": "var(--medium-low-gray)",
'medium-low-gray': "var(--medium-low-gray)", "status-green": "var(--status-green)",
'status-green': "var(--status-green)", "status-red": "var(--status-red)",
'status-red': "var(--status-red)", "status-yellow": "var(--status-yellow)",
'status-yellow': "var(--status-yellow)", "success-background": "var(--success-background)",
'success-background': "var(--success-background)", "success-foreground": "var(--success-foreground)",
'success-foreground': "var(--success-foreground)",
white: "var(--white)", white: "var(--white)",
border: "hsl(var(--border))", border: "hsl(var(--border))",