gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge branch 'feat/onboarding' of github.com:langflow-ai/openrag into feat/onboarding

Browse source
This commit is contained in:
Mike Fortman 2025-09-18 15:23:46 -05:00
commit dec24fc759
11 changed files with 471 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
frontend/components/label-wrapper.tsx
View file

@ -1,43 +1,54 @@
import { Info } from "lucide-react";
import {
DropdownMenu,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "./ui/input";
import { cn } from "@/lib/utils";
import { Label } from "./ui/label";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
export function LabelWrapper({
label,
description,
helperText,
id,
required,
flex,
children,
}: {
label: string;
helperText: string;
description?: string;
helperText?: string;
id: string;
required: boolean;
required?: boolean;
flex?: boolean;
children: React.ReactNode;
}) {
return (
<div className="space-y-2">
<Label
htmlFor={id}
className="text-mmd font-medium flex items-center gap-1"
>
{label}
{required && <span className="text-red-500">*</span>}
{helperText && (
<Tooltip>
<TooltipTrigger>
<Info className="w-3.5 h-3.5 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>{helperText}</TooltipContent>
</Tooltip>
<div className="flex w-full items-center justify-between">
<div
className={cn(
"flex flex-1 flex-col items-start",
flex ? "gap-3" : "gap-2",
)}
</Label>
<div className="relative">{children}</div>
>
<Label
htmlFor={id}
className="!text-mmd font-medium flex items-center gap-1"
>
{label}
{required && <span className="text-red-500">*</span>}
{helperText && (
<Tooltip>
<TooltipTrigger>
<Info className="w-3.5 h-3.5 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>{helperText}</TooltipContent>
</Tooltip>
)}
</Label>
{!flex && <div className="relative w-full">{children}</div>}
{description && (
<p className="text-mmd text-muted-foreground">{description}</p>
)}
</div>
{flex && <div className="relative">{children}</div>}
</div>
);
}

58
frontend/components/ui/accordion.tsx Normal file
View file

@ -0,0 +1,58 @@
"use client";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
const Accordion = AccordionPrimitive.Root;
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border rounded-md", className)}
{...props}
/>
));
AccordionItem.displayName = "AccordionItem";
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-180",
className,
)}
{...props}
>
<ChevronDown className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
{children}
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("p-4 pt-2", className)}>{children}</div>
</AccordionPrimitive.Content>
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

42
frontend/components/ui/button.tsx
View file

@ -8,13 +8,20 @@ const buttonVariants = cva(
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary-hover",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input hover:bg-input hover:text-accent-foreground",
primary: "border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm",
warning: "bg-warning-foreground text-warning-text hover:bg-warning-foreground/90 hover:shadow-sm",
secondary: "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
ghost: "text-foreground hover:bg-accent hover:text-accent-foreground disabled:!bg-transparent",
ghostActive: "bg-muted text-foreground hover:bg-secondary-hover hover:text-accent-foreground",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input hover:bg-muted hover:text-accent-foreground",
primary:
"border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm",
warning:
"bg-warning-foreground text-warning-text hover:bg-warning-foreground/90 hover:shadow-sm",
secondary:
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
ghost:
"text-foreground hover:bg-accent hover:text-accent-foreground disabled:!bg-transparent",
ghostActive:
"bg-muted text-foreground hover:bg-secondary-hover hover:text-accent-foreground",
link: "underline-offset-4 hover:underline text-primary",
},
size: {
@ -38,7 +45,9 @@ const buttonVariants = cva(
function toTitleCase(text: string) {
return text
?.split(" ")
?.map((word) => word?.charAt(0)?.toUpperCase() + word?.slice(1)?.toLowerCase())
?.map(
(word) => word?.charAt(0)?.toUpperCase() + word?.slice(1)?.toLowerCase(),
)
?.join(" ");
}
@ -51,7 +60,20 @@ export interface ButtonProps
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, loading, disabled, asChild = false, children, ignoreTitleCase = false, ...props }, ref) => {
(
{
className,
variant,
size,
loading,
disabled,
asChild = false,
children,
ignoreTitleCase = false,
...props
},
ref,
) => {
const Comp = asChild ? Slot : "button";
let newChildren = children;
if (typeof children === "string") {
@ -79,7 +101,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
)}
</Comp>
);
}
},
);
Button.displayName = "Button";

2
frontend/components/ui/card.tsx
View file

@ -64,7 +64,7 @@ const CardFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-4 pt-0", className)}
className={cn("flex items-center p-5 pt-0", className)}
{...props}
/>
));

31
frontend/components/ui/separator.tsx Normal file
View file

@ -0,0 +1,31 @@
"use client";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import * as React from "react";
import { cn } from "@/lib/utils";
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref,
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className,
)}
{...props}
/>
),
);
Separator.displayName = SeparatorPrimitive.Root.displayName;
export { Separator };

56
frontend/package-lock.json generated
View file

@ -10,6 +10,7 @@
"dependencies": {
"@microsoft/mgt-components": "^4.6.0",
"@microsoft/mgt-msal2-provider": "^4.6.0",
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-avatar": "^1.1.10",
"@radix-ui/react-checkbox": "^1.3.2",
"@radix-ui/react-collapsible": "^1.1.11",
@ -19,6 +20,7 @@
"@radix-ui/react-navigation-menu": "^1.2.13",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-select": "^2.2.5",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slider": "^1.3.6",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.2.5",
@ -1215,6 +1217,37 @@
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
"license": "MIT"
},
"node_modules/@radix-ui/react-accordion": {
"version": "1.2.12",
"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
"integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-collapsible": "1.1.12",
"@radix-ui/react-collection": "1.1.7",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-direction": "1.1.1",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-controllable-state": "1.2.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-arrow": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@ -1859,6 +1892,29 @@
}
}
},
"node_modules/@radix-ui/react-separator": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
"integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.1.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slider": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",

2
frontend/package.json
View file

@ -11,6 +11,7 @@
"dependencies": {
"@microsoft/mgt-components": "^4.6.0",
"@microsoft/mgt-msal2-provider": "^4.6.0",
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-avatar": "^1.1.10",
"@radix-ui/react-checkbox": "^1.3.2",
"@radix-ui/react-collapsible": "^1.1.11",
@ -20,6 +21,7 @@
"@radix-ui/react-navigation-menu": "^1.2.13",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-select": "^2.2.5",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slider": "^1.3.6",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.2.5",

68
frontend/src/app/onboarding/advanced.tsx
View file

@ -1,7 +1,73 @@
import { useState } from "react";
import { LabelWrapper } from "@/components/label-wrapper";
import OllamaLogo from "@/components/logo/ollama-logo";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { ModelSelector } from "./model-selector";
export function AdvancedOnboarding({
modelProvider,
}: {
modelProvider: string;
}) {
return <div>AdvancedOnboarding</div>;
const [model, setModel] = useState("");
const options = [
{ value: "gpt-4", label: "GPT-4" },
{ value: "gpt-4-turbo", label: "GPT-4 Turbo" },
{ value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
{ value: "claude-3-opus", label: "Claude 3 Opus" },
{ value: "claude-3-sonnet", label: "Claude 3 Sonnet" },
];
return (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Advanced settings</AccordionTrigger>
<AccordionContent className="space-y-6">
<LabelWrapper
label="Embedding model"
description="It’s recommended that you use XYZ, ABC, or DEF models for best performance."
helperText="The embedding model for your Ollama server."
id="embedding-model"
required={true}
>
<ModelSelector
options={options}
icon={<OllamaLogo className="w-4 h-4" />}
value={model}
onValueChange={setModel}
/>
</LabelWrapper>
<LabelWrapper
label="Language model"
description="It’s recommended that you use XYZ, ABC, or DEF models for best performance."
helperText="The embedding model for your Ollama server."
id="embedding-model"
required={true}
>
<ModelSelector
options={options}
icon={<OllamaLogo className="w-4 h-4" />}
value={model}
onValueChange={setModel}
/>
</LabelWrapper>
<Separator />
<LabelWrapper
label="Sample dataset"
description="Ingest two small PDFs"
id="sample-dataset"
flex
>
<Switch />
</LabelWrapper>
</AccordionContent>
</AccordionItem>
</Accordion>
);
}

4
frontend/src/app/onboarding/model-selector.tsx
View file

@ -39,10 +39,10 @@ export function ModelSelector({
variant="outline"
role="combobox"
aria-expanded={open}
className="w-full gap-2 justify-between"
className="w-full gap-2 justify-between font-normal text-sm"
>
{value ? (
<div className="flex items-center gap-2 font-normal text-sm">
<div className="flex items-center gap-2">
<div className="w-4 h-4">{icon}</div>
{options.find((framework) => framework.value === value)?.label}
{options.find((framework) => framework.value === value)

28
frontend/src/app/onboarding/page.tsx
View file

@ -1,20 +1,25 @@
"use client";
import { Suspense, useState } from "react";
import { toast } from "sonner";
import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation";
import {
type Settings,
useGetSettingsQuery,
} from "@/app/api/queries/useGetSettingsQuery";
import { LabelInput } from "@/components/label-input";
import IBMLogo from "@/components/logo/ibm-logo";
import OllamaLogo from "@/components/logo/ollama-logo";
import OpenAILogo from "@/components/logo/openai-logo";
import { ProtectedRoute } from "@/components/protected-route";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardFooter,
CardHeader,
} from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAuth } from "@/contexts/auth-context";
import { AdvancedOnboarding } from "./advanced";
import { IBMOnboarding } from "./ibm-onboarding";
import { OllamaOnboarding } from "./ollama-onboarding";
import { OpenAIOnboarding } from "./openai-onboarding";
@ -36,10 +41,20 @@ function OnboardingPage() {
console.log("Setting updated successfully");
},
onError: (error) => {
console.error("Failed to update setting:", error.message);
toast.error("Failed to update settings", {
description: error.message,
});
},
});
const handleComplete = () => {
updateFlowSettingMutation.mutate({
llm_model: settings.agent?.llm_model,
embedding_model: settings.ingest?.embedding_model,
system_prompt: settings.agent?.system_prompt,
});
};
return (
<div
className="min-h-dvh relative flex gap-5 flex-col items-center justify-center bg-background p-4"
@ -92,6 +107,11 @@ function OnboardingPage() {
</TabsContent>
</CardContent>
</Tabs>
<CardFooter className="flex justify-end">
<Button size="sm" onClick={handleComplete}>
Complete
</Button>
</CardFooter>
</Card>
</div>
</div>

293
frontend/tailwind.config.ts
View file

@ -14,135 +14,170 @@ const config = {
"./src/**/*.{ts,tsx}",
],
theme: {
container: {
center: true,
screens: {
"2xl": "1400px",
"3xl": "1500px",
},
},
extend: {
screens: {
xl: "1200px",
"2xl": "1400px",
"3xl": "1500px",
},
keyframes: {
overlayShow: {
from: { opacity: 0 },
to: { opacity: 1 },
},
contentShow: {
from: {
opacity: 0,
transform: "translate(-50%, -50%) scale(0.95)",
clipPath: "inset(50% 0)",
},
to: {
opacity: 1,
transform: "translate(-50%, -50%) scale(1)",
clipPath: "inset(0% 0)",
},
},
wiggle: {
"0%, 100%": { transform: "scale(100%)" },
"50%": { transform: "scale(120%)" },
},
},
animation: {
overlayShow: "overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
contentShow: "contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
wiggle: "wiggle 150ms ease-in-out 1",
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
hover: "hsl(var(--primary-hover))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
hover: "hsl(var(--secondary-hover))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
"accent-emerald-foreground": {
DEFAULT: "hsl(var(--accent-emerald-foreground))",
},
"accent-pink-foreground": {
DEFAULT: "hsl(var(--accent-pink-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
"status-blue": "var(--status-blue)",
"status-green": "var(--status-green)",
"status-red": "var(--status-red)",
"status-yellow": "var(--status-yellow)",
"component-icon": "var(--component-icon)",
"flow-icon": "var(--flow-icon)",
"placeholder-foreground": "hsl(var(--placeholder-foreground))",
"datatype-blue": {
DEFAULT: "hsl(var(--datatype-blue))",
foreground: "hsl(var(--datatype-blue-foreground))",
},
"datatype-yellow": {
DEFAULT: "hsl(var(--datatype-yellow))",
foreground: "hsl(var(--datatype-yellow-foreground))",
},
"datatype-red": {
DEFAULT: "hsl(var(--datatype-red))",
foreground: "hsl(var(--datatype-red-foreground))",
},
"datatype-emerald": {
DEFAULT: "hsl(var(--datatype-emerald))",
foreground: "hsl(var(--datatype-emerald-foreground))",
},
"datatype-violet": {
DEFAULT: "hsl(var(--datatype-violet))",
foreground: "hsl(var(--datatype-violet-foreground))",
},
warning: {
DEFAULT: "hsl(var(--warning))",
foreground: "hsl(var(--warning-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
mono: ["var(--font-mono)", ...fontFamily.mono],
chivo: ["var(--font-chivo)", ...fontFamily.sans],
},
fontSize: {
xxs: "11px",
mmd: "13px",
},
},
container: {
center: true,
screens: {
'2xl': '1400px',
'3xl': '1500px'
}
},
extend: {
screens: {
xl: '1200px',
'2xl': '1400px',
'3xl': '1500px'
},
keyframes: {
overlayShow: {
from: {
opacity: 0
},
to: {
opacity: 1
}
},
contentShow: {
from: {
opacity: 0,
transform: 'translate(-50%, -50%) scale(0.95)',
clipPath: 'inset(50% 0)'
},
to: {
opacity: 1,
transform: 'translate(-50%, -50%) scale(1)',
clipPath: 'inset(0% 0)'
}
},
wiggle: {
'0%, 100%': {
transform: 'scale(100%)'
},
'50%': {
transform: 'scale(120%)'
}
},
'accordion-down': {
from: {
height: '0'
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: '0'
}
}
},
animation: {
overlayShow: 'overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)',
contentShow: 'contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)',
wiggle: 'wiggle 150ms ease-in-out 1',
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
},
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
hover: 'hsl(var(--primary-hover))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
hover: 'hsl(var(--secondary-hover))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
'accent-emerald-foreground': {
DEFAULT: 'hsl(var(--accent-emerald-foreground))'
},
'accent-pink-foreground': {
DEFAULT: 'hsl(var(--accent-pink-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
'status-blue': 'var(--status-blue)',
'status-green': 'var(--status-green)',
'status-red': 'var(--status-red)',
'status-yellow': 'var(--status-yellow)',
'component-icon': 'var(--component-icon)',
'flow-icon': 'var(--flow-icon)',
'placeholder-foreground': 'hsl(var(--placeholder-foreground))',
'datatype-blue': {
DEFAULT: 'hsl(var(--datatype-blue))',
foreground: 'hsl(var(--datatype-blue-foreground))'
},
'datatype-yellow': {
DEFAULT: 'hsl(var(--datatype-yellow))',
foreground: 'hsl(var(--datatype-yellow-foreground))'
},
'datatype-red': {
DEFAULT: 'hsl(var(--datatype-red))',
foreground: 'hsl(var(--datatype-red-foreground))'
},
'datatype-emerald': {
DEFAULT: 'hsl(var(--datatype-emerald))',
foreground: 'hsl(var(--datatype-emerald-foreground))'
},
'datatype-violet': {
DEFAULT: 'hsl(var(--datatype-violet))',
foreground: 'hsl(var(--datatype-violet-foreground))'
},
warning: {
DEFAULT: 'hsl(var(--warning))',
foreground: 'hsl(var(--warning-foreground))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
fontFamily: {
sans: [
'var(--font-sans)',
...fontFamily.sans
],
mono: [
'var(--font-mono)',
...fontFamily.mono
],
chivo: [
'var(--font-chivo)',
...fontFamily.sans
]
},
fontSize: {
xxs: '11px',
mmd: '13px'
}
}
},
plugins: [
tailwindcssAnimate,