jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: changed component colors name to not override existing colors, fixed responsiveness issues on main, playground and nav (#4482)

Browse source 
* Changed description color

* Updated edge colors

* updated color of output inspection

* Updated handle position to work with every case

* Open sidebar on filter

* Fixed empty folder on top of the sidebar

* Fix app header responsitivity

* Changed mobile playground showing

* Changed color name to datatype

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Lucas Oliveira 2024-11-08 18:10:18 -03:00 • committed by GitHub
commit f32360fea8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 251 additions and 317 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/frontend/src/App.css
View file

@ -133,27 +133,8 @@ body {
outline: none; outline: none;
} }
:root {
--selected: #2196f3;
}
.dark {
--selected: #0369a1;
}
/* selected */
:root {
--selected-light: var(--selected, #2196f3);
--selected-dark: var(--selected, #0369a1);
}
.react-flow__edge.selected .react-flow__edge-path { .react-flow__edge.selected .react-flow__edge-path {
stroke: var(--selected-light) !important; stroke: var(--selected) !important;
stroke-width: 2px !important;
}
:root.dark .react-flow__edge.selected .react-flow__edge-path {
stroke: var(--selected-dark) !important;
stroke-width: 2px !important; stroke-width: 2px !important;
} }

4
src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
View file

@ -134,7 +134,7 @@ export default function NodeDescription({
data-testid="generic-node-desc" data-testid="generic-node-desc"
ref={overflowRef} ref={overflowRef}
className={cn( className={cn(
"nodoubleclick generic-node-desc-text h-full cursor-text text-[13px] word-break-break-word", "nodoubleclick generic-node-desc-text h-full cursor-text text-[13px] text-muted-foreground word-break-break-word",
description === "" || !description ? "font-light italic" : "", description === "" || !description ? "font-light italic" : "",
placeholderClassName, placeholderClassName,
)} )}
@ -149,7 +149,7 @@ export default function NodeDescription({
<Markdown <Markdown
linkTarget="_blank" linkTarget="_blank"
className={cn( className={cn(
"markdown prose flex h-full w-full flex-col text-[13px] leading-5 text-foreground word-break-break-word", "markdown prose flex h-full w-full flex-col text-[13px] leading-5 word-break-break-word",
mdClassName, mdClassName,
)} )}
> >

2
src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
View file

@ -216,7 +216,7 @@ export default function NodeOutputField({
className={cn( className={cn(
"icon-size", "icon-size",
displayOutputPreview && !unknownOutput displayOutputPreview && !unknownOutput
? "text-placeholder-foreground hover:text-foreground" ? "text-foreground hover:text-primary-hover"
: "cursor-not-allowed text-placeholder-foreground opacity-60", : "cursor-not-allowed text-placeholder-foreground opacity-60",
errorOutput ? "text-destructive" : "", errorOutput ? "text-destructive" : "",
)} )}

2
src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
View file

@ -218,7 +218,7 @@ export default function NodeStatus({
<div className="max-h-100 p-2"> <div className="max-h-100 p-2">
<div className="max-h-80 overflow-auto"> <div className="max-h-80 overflow-auto">
{validationString && ( {validationString && (
<div className="ml-1 pb-2 text-accent-red-foreground"> <div className="text-accent-red-foreground ml-1 pb-2">
{validationString} {validationString}
</div> </div>
)} )}

80
src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
View file

@ -43,7 +43,7 @@ export default function HandleRenderComponent({
}) { }) {
const handleColorName = colorName?.[0] ?? ""; const handleColorName = colorName?.[0] ?? "";
const accentColorName = `accent-${handleColorName}`; const accentColorName = `datatype-${handleColorName}`;
const accentForegroundColorName = `${accentColorName}-foreground`; const accentForegroundColorName = `${accentColorName}-foreground`;
const setHandleDragging = useFlowStore((state) => state.setHandleDragging); const setHandleDragging = useFlowStore((state) => state.setHandleDragging);
@ -181,7 +181,7 @@ export default function HandleRenderComponent({
.concat(colorName![0]) .concat(colorName![0])
.map( .map(
(color, index) => (color, index) =>
`hsl(var(--accent-${color}))` + `hsl(var(--datatype-${color}))` +
" " + " " +
((360 / colors.length) * index - 360 / (colors.length * 4)) + ((360 / colors.length) * index - 360 / (colors.length * 4)) +
"deg " + "deg " +
@ -204,33 +204,33 @@ export default function HandleRenderComponent({
@keyframes pulseNeon { @keyframes pulseNeon {
0% { 0% {
box-shadow: 0 0 0 2px hsl(var(--node-ring)), box-shadow: 0 0 0 2px hsl(var(--node-ring)),
0 0 2px hsl(var(--accent-${colorName![0]})), 0 0 2px hsl(var(--datatype-${colorName![0]})),
0 0 4px hsl(var(--accent-${colorName![0]})), 0 0 4px hsl(var(--datatype-${colorName![0]})),
0 0 6px hsl(var(--accent-${colorName![0]})), 0 0 6px hsl(var(--datatype-${colorName![0]})),
0 0 8px hsl(var(--accent-${colorName![0]})), 0 0 8px hsl(var(--datatype-${colorName![0]})),
0 0 10px hsl(var(--accent-${colorName![0]})), 0 0 10px hsl(var(--datatype-${colorName![0]})),
0 0 15px hsl(var(--accent-${colorName![0]})), 0 0 15px hsl(var(--datatype-${colorName![0]})),
0 0 20px hsl(var(--accent-${colorName![0]})); 0 0 20px hsl(var(--datatype-${colorName![0]}));
} }
50% { 50% {
box-shadow: 0 0 0 2px hsl(var(--node-ring)), box-shadow: 0 0 0 2px hsl(var(--node-ring)),
0 0 4px hsl(var(--accent-${colorName![0]})), 0 0 4px hsl(var(--datatype-${colorName![0]})),
0 0 8px hsl(var(--accent-${colorName![0]})), 0 0 8px hsl(var(--datatype-${colorName![0]})),
0 0 12px hsl(var(--accent-${colorName![0]})), 0 0 12px hsl(var(--datatype-${colorName![0]})),
0 0 16px hsl(var(--accent-${colorName![0]})), 0 0 16px hsl(var(--datatype-${colorName![0]})),
0 0 20px hsl(var(--accent-${colorName![0]})), 0 0 20px hsl(var(--datatype-${colorName![0]})),
0 0 25px hsl(var(--accent-${colorName![0]})), 0 0 25px hsl(var(--datatype-${colorName![0]})),
0 0 30px hsl(var(--accent-${colorName![0]})); 0 0 30px hsl(var(--datatype-${colorName![0]}));
} }
100% { 100% {
box-shadow: 0 0 0 2px hsl(var(--node-ring)), box-shadow: 0 0 0 2px hsl(var(--node-ring)),
0 0 2px hsl(var(--accent-${colorName![0]})), 0 0 2px hsl(var(--datatype-${colorName![0]})),
0 0 4px hsl(var(--accent-${colorName![0]})), 0 0 4px hsl(var(--datatype-${colorName![0]})),
0 0 6px hsl(var(--accent-${colorName![0]})), 0 0 6px hsl(var(--datatype-${colorName![0]})),
0 0 8px hsl(var(--accent-${colorName![0]})), 0 0 8px hsl(var(--datatype-${colorName![0]})),
0 0 10px hsl(var(--accent-${colorName![0]})), 0 0 10px hsl(var(--datatype-${colorName![0]})),
0 0 15px hsl(var(--accent-${colorName![0]})), 0 0 15px hsl(var(--datatype-${colorName![0]})),
0 0 20px hsl(var(--accent-${colorName![0]})); 0 0 20px hsl(var(--datatype-${colorName![0]}));
} }
} }
`; `;
@ -264,21 +264,6 @@ export default function HandleRenderComponent({
const handleRef = useRef<HTMLDivElement>(null); const handleRef = useRef<HTMLDivElement>(null);
const invisibleDivRef = useRef<HTMLDivElement>(null); const invisibleDivRef = useRef<HTMLDivElement>(null);
const getHandleClasses = ({
left,
showNode,
}: {
left: boolean;
showNode: boolean;
}) => {
return cn(
"noflow nowheel nopan noselect absolute left-3.5 -translate-y-1/2 translate-x-1/3 cursor-crosshair rounded-full",
left && "-left-5 -translate-x-1/2",
left && !showNode && "-translate-y-5 translate-x-4",
!left && !showNode && "-translate-y-5 translate-x-[10.8rem]",
);
};
const handleClick = () => { const handleClick = () => {
setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!)); setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!));
setFilterType(currentFilter); setFilterType(currentFilter);
@ -291,13 +276,10 @@ export default function HandleRenderComponent({
return ( return (
<div> <div>
<div className={`${!showNode ? "" : "relative"}`}>
<ShadTooltip <ShadTooltip
open={openTooltip} open={openTooltip}
setOpen={setOpenTooltip} setOpen={setOpenTooltip}
styleClasses={cn( styleClasses={cn("tooltip-fixed-width custom-scroll nowheel bottom-2 ")}
"tooltip-fixed-width custom-scroll nowheel bottom-2 ",
)}
delayDuration={1000} delayDuration={1000}
content={ content={
<HandleTooltipComponent <HandleTooltipComponent
@ -353,15 +335,13 @@ export default function HandleRenderComponent({
}} }}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
/> >
</ShadTooltip>
<div <div
data-testid={`div-handle-${testIdComplement}-${title.toLowerCase()}-${ data-testid={`div-handle-${testIdComplement}-${title.toLowerCase()}-${
!showNode ? (left ? "target" : "source") : left ? "left" : "right" !showNode ? (left ? "target" : "source") : left ? "left" : "right"
}`} }`}
ref={invisibleDivRef} ref={invisibleDivRef}
className={getHandleClasses({ left, showNode })} className="noflow nowheel nopan noselect pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 cursor-crosshair rounded-full"
style={{ style={{
background: isNullHandle ? "hsl(var(--border))" : handleColor, background: isNullHandle ? "hsl(var(--border))" : handleColor,
width: "10px", width: "10px",
@ -377,18 +357,14 @@ export default function HandleRenderComponent({
: "none", : "none",
border: isNullHandle ? "2px solid hsl(var(--muted))" : "none", border: isNullHandle ? "2px solid hsl(var(--muted))" : "none",
}} }}
onClick={(e) => {
handleRef.current?.dispatchEvent(
new MouseEvent("mousedown", { bubbles: true }),
);
}}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
onContextMenu={(event) => { onContextMenu={(event) => {
event.preventDefault(); event.preventDefault();
}} }}
/> />
</div> </Handle>
</ShadTooltip>
</div> </div>
); );
} }

30
src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx
View file

@ -63,17 +63,6 @@ export const MenuBar = ({}: {}): JSX.Element => {
const changesNotSaved = const changesNotSaved =
customStringify(currentFlow) !== customStringify(currentSavedFlow); customStringify(currentFlow) !== customStringify(currentSavedFlow);
const savedText =
updatedAt && changesNotSaved ? (
SAVED_HOVER +
new Date(updatedAt).toLocaleString("en-US", {
hour: "numeric",
minute: "numeric",
})
) : (
<div className="text-[#059669]">Saved</div>
);
function handleAddFlow() { function handleAddFlow() {
try { try {
addFlow().then((id) => { addFlow().then((id) => {
@ -122,7 +111,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
<div <div
className="cursor-pointer truncate text-muted-foreground hover:text-primary" className="cursor-pointer truncate text-muted-foreground hover:text-primary"
onClick={() => { onClick={() => {
navigate("/"); navigate(
currentFolder?.id
? "/all/folder/" + currentFolder.id
: "/all",
);
}} }}
> >
{currentFolder?.name} {currentFolder?.name}
@ -283,7 +276,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
></FlowSettingsModal> ></FlowSettingsModal>
<FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal> <FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
</div> </div>
<div className="hidden shrink-0 items-center sm:flex"> <div
className={cn(
"hidden shrink-0 items-center sm:flex",
isBuilding ? "w-30" : "w-[3.2rem]",
)}
>
{!autoSaving && ( {!autoSaving && (
<Button <Button
variant="primary" variant="primary"
@ -326,8 +324,8 @@ export const MenuBar = ({}: {}): JSX.Element => {
side="bottom" side="bottom"
styleClasses="cursor-default z-10" styleClasses="cursor-default z-10"
> >
<div className="mr-3 flex cursor-default items-center gap-2 truncate text-sm text-muted-foreground"> <div className="flex cursor-default items-center gap-2 truncate text-sm text-muted-foreground">
<div className="flex cursor-default items-center gap-2 truncate text-sm text-zinc-500"> <div className="flex cursor-default items-center gap-2 truncate text-sm">
<div className="w-full truncate text-xs"> <div className="w-full truncate text-xs">
{printByBuildStatus()} {printByBuildStatus()}
</div> </div>
@ -342,7 +340,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
}} }}
className={ className={
isBuilding isBuilding
? "flex hidden items-center gap-1.5 text-xs text-status-red sm:flex" ? "hidden items-center gap-1.5 text-xs text-status-red sm:flex"
: "hidden" : "hidden"
} }
> >

4
src/frontend/src/components/appHeaderComponent/index.tsx
View file

@ -114,12 +114,12 @@ export default function AppHeader(): JSX.Element {
<span <span
className={ className={
notificationCenter notificationCenter
? `absolute left-[31px] top-[10px] block h-1 w-1 rounded-full bg-destructive` ? `absolute left-[31px] top-[10px] h-1 w-1 rounded-full bg-destructive`
: "hidden" : "hidden"
} }
/> />
<ForwardedIconComponent <ForwardedIconComponent
name="bell" name="Bell"
className="side-bar-button-size h-[18px] w-[18px]" className="side-bar-button-size h-[18px] w-[18px]"
aria-hidden="true" aria-hidden="true"
/> />

13
src/frontend/src/modals/IOModal/newModal.tsx
View file

@ -1,15 +1,13 @@
import { Separator } from "@/components/ui/separator";
import { import {
useDeleteMessages, useDeleteMessages,
useGetMessagesQuery, useGetMessagesQuery,
} from "@/controllers/API/queries/messages"; } from "@/controllers/API/queries/messages";
import { useUtilityStore } from "@/stores/utilityStore"; import { useUtilityStore } from "@/stores/utilityStore";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import AccordionComponent from "../../components/accordionComponent";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
import ShadTooltip from "../../components/shadTooltipComponent"; import ShadTooltip from "../../components/shadTooltipComponent";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import { InputOutput } from "../../constants/enums"; import { InputOutput } from "../../constants/enums";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
@ -424,7 +422,7 @@ export default function IOModal({
</div> </div>
)} )}
<div className={cn(sidebarOpen ? "lg:hidden" : "")}> <div className={cn(sidebarOpen ? "lg:hidden" : "")}>
<div className="-ml-4 -mt-4 flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@ -442,12 +440,12 @@ export default function IOModal({
<div <div
className={cn( className={cn(
sidebarOpen ? "pointer-events-none opacity-0" : "", sidebarOpen ? "pointer-events-none opacity-0" : "",
"absolute right-10 top-2 flex h-8 w-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "absolute right-12 top-2 flex h-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
)} )}
> >
<ShadTooltip styleClasses="z-50" content="New Chat"> <ShadTooltip styleClasses="z-50" content="New Chat">
<Button <Button
className="h-[32px] w-[32px] hover:bg-secondary-hover" className="mr-2 h-[32px] w-[32px] hover:bg-secondary-hover"
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={(_) => { onClick={(_) => {
@ -457,10 +455,11 @@ export default function IOModal({
> >
<IconComponent <IconComponent
name="Plus" name="Plus"
className="h-[18px] w-[18px] text-ring" className="!h-[18px] !w-[18px] text-ring"
/> />
</Button> </Button>
</ShadTooltip> </ShadTooltip>
<Separator orientation="vertical" />
</div> </div>
</div> </div>
{haveChat ? ( {haveChat ? (

2
src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
View file

@ -10,7 +10,7 @@ const ConnectionLineComponent = ({
}: ConnectionLineComponentProps): JSX.Element => { }: ConnectionLineComponentProps): JSX.Element => {
const handleDragging = useFlowStore((state) => state.handleDragging); const handleDragging = useFlowStore((state) => state.handleDragging);
const color = handleDragging?.color; const color = handleDragging?.color;
const accentColor = `hsl(var(--accent-${color}))`; const accentColor = `hsl(var(--datatype-${color}))`;
return ( return (
<g> <g>

9
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -38,8 +38,6 @@ import ReactFlow, {
Panel, Panel,
SelectionDragHandler, SelectionDragHandler,
updateEdge, updateEdge,
useReactFlow,
useViewport,
} from "reactflow"; } from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode"; import GenericNode from "../../../../CustomNodes/GenericNode";
import { import {
@ -565,11 +563,10 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
const handleEdgeClick = (event, edge) => { const handleEdgeClick = (event, edge) => {
const color = const color =
nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] || nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] || "cyan";
"hsl(var(--foreground))";
const accentColor = `hsl(var(--accent-${color}-foreground))`; const accentColor = `hsl(var(--datatype-${color}))`;
document.documentElement.style.setProperty("--selected", accentColor); reactFlowWrapper.current?.style.setProperty("--selected", accentColor);
}; };
const { open } = useSidebar(); const { open } = useSidebar();

2
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx
View file

@ -17,7 +17,7 @@ export function SidebarFilterComponent({
<div <div
className={`mb-0.5 flex w-full items-center justify-between rounded border p-2 text-sm text-foreground`} className={`mb-0.5 flex w-full items-center justify-between rounded border p-2 text-sm text-foreground`}
style={{ style={{
backgroundColor: `hsl(var(--accent-${color}-foreground))`, backgroundColor: `hsl(var(--datatype-${color}-foreground))`,
}} }}
> >
<div className="flex flex-1 items-center gap-1.5"> <div className="flex flex-1 items-center gap-1.5">

6
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
View file

@ -102,6 +102,12 @@ export function FlowSidebarComponent() {
}, },
); );
useEffect(() => {
if (filterType) {
setOpen(true);
}
}, [filterType]);
useEffect(() => { useEffect(() => {
filterComponents(); filterComponents();
}, [data, search, filterType, getFilterEdge, showBeta, showLegacy]); }, [data, search, filterType, getFilterEdge, showBeta, showLegacy]);

4
src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
View file

@ -11,8 +11,7 @@ export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => {
return ( return (
<div className="m-0 h-full w-full bg-secondary p-0"> <div className="m-0 h-full w-full bg-secondary p-0">
<div className="text-container"> <div className="absolute top-1/2 flex w-full -translate-y-1/2 flex-col items-center justify-center gap-2">
<div className="relative z-20 flex w-full flex-col items-center justify-center gap-2">
<h3 <h3
className="pt-5 font-chivo text-2xl font-semibold" className="pt-5 font-chivo text-2xl font-semibold"
data-testid="mainpage_title" data-testid="mainpage_title"
@ -38,7 +37,6 @@ export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => {
</Button> </Button>
</div> </div>
</div> </div>
</div>
); );
}; };

1
src/frontend/src/style/applies.css
View file

@ -1272,7 +1272,6 @@
/* Gradient background */ /* Gradient background */
.text-container { .text-container {
z-index: 50;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;

20
src/frontend/src/style/classes.css
View file

@ -190,31 +190,15 @@ textarea[class^="ag-"]:focus {
} }
.react-flow__handle-right { .react-flow__handle-right {
right: -1.25rem !important; right: 0 !important;
transform: translate(50%, -50%) !important; transform: translate(50%, -50%) !important;
} }
.react-flow__handle-left { .react-flow__handle-left {
left: 1.25rem !important; left: 0 !important;
transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important;
} }
.react-flow__handle-right {
right: -1.25rem !important;
transform: translate(50%, -50%) !important;
}
.react-flow__handle-left {
left: -1.25rem !important;
transform: translate(-50%, -50%) !important;
}
/* Modified transform when showNode is false */
.react-flow__handle-right.no-show,
.react-flow__handle-left.no-show {
transform: translate(0%, -50%) !important;
}
.react-flow__node-noteNode:not(.selected) { .react-flow__node-noteNode:not(.selected) {
z-index: -1 !important; z-index: -1 !important;
} }

96
src/frontend/src/style/index.css
View file

@ -105,41 +105,41 @@
--smooth-red: 0 93.3% 94.1%; --smooth-red: 0 93.3% 94.1%;
--radius: 0.5rem; --radius: 0.5rem;
--accent-pink: 327.3 73.3% 97.1%; --datatype-pink: 327.3 73.3% 97.1%;
--accent-pink-foreground: 333.3 71.4% 50.6%; --datatype-pink-foreground: 333.3 71.4% 50.6%;
--accent-yellow: 40.6 96.1% 40.4%; --datatype-yellow: 40.6 96.1% 40.4%;
--accent-yellow-foreground: 54.9 96.7% 88%; --datatype-yellow-foreground: 54.9 96.7% 88%;
--accent-blue: 221.2 83.2% 53.3%; --datatype-blue: 221.2 83.2% 53.3%;
--accent-blue-foreground: 214.3 94.6% 92.7%; --datatype-blue-foreground: 214.3 94.6% 92.7%;
--accent-gray: 215 13.8% 34.1%; --datatype-gray: 215 13.8% 34.1%;
--accent-gray-foreground: 220 14.3% 95.9%; --datatype-gray-foreground: 220 14.3% 95.9%;
--accent-lime: 84.8 85.2% 34.5%; --datatype-lime: 84.8 85.2% 34.5%;
--accent-lime-foreground: 79.6 89.1% 89.2%; --datatype-lime-foreground: 79.6 89.1% 89.2%;
--accent-red: 0 72.2% 50.6%; --datatype-red: 0 72.2% 50.6%;
--accent-red-foreground: 0 93.3% 94.1%; --datatype-red-foreground: 0 93.3% 94.1%;
--accent-violet: 262.1 83.3% 57.8%; --datatype-violet: 262.1 83.3% 57.8%;
--accent-violet-foreground: 251.4 91.3% 95.5%; --datatype-violet-foreground: 251.4 91.3% 95.5%;
--accent-emerald: 161.4 93.5% 30.4%; --datatype-emerald: 161.4 93.5% 30.4%;
--accent-emerald-foreground: 149.3 80.4% 90%; --datatype-emerald-foreground: 149.3 80.4% 90%;
--accent-fuchsia: 293.4 69.5% 48.8%; --datatype-fuchsia: 293.4 69.5% 48.8%;
--accent-fuchsia-foreground: 287 100% 95.5%; --datatype-fuchsia-foreground: 287 100% 95.5%;
--accent-purple: 271.5 81.3% 55.9%; --datatype-purple: 271.5 81.3% 55.9%;
--accent-purple-foreground: 268.7 100% 95.5%; --datatype-purple-foreground: 268.7 100% 95.5%;
--accent-cyan: 191.6 91.4% 36.5%; --datatype-cyan: 191.6 91.4% 36.5%;
--accent-cyan-foreground: 185.1 95.9% 90.4%; --datatype-cyan-foreground: 185.1 95.9% 90.4%;
--accent-indigo: 243.4 75.4% 58.6%; --datatype-indigo: 243.4 75.4% 58.6%;
--accent-indigo-foreground: 226.5 100% 93.9%; --datatype-indigo-foreground: 226.5 100% 93.9%;
--node-ring: 240 6% 90%; --node-ring: 240 6% 90%;
} }
@ -247,41 +247,41 @@
--hard-zinc: 240 5.2% 33.9%; --hard-zinc: 240 5.2% 33.9%;
--smooth-red: 0 93.3% 94.1%; --smooth-red: 0 93.3% 94.1%;
--accent-pink: 327.4 87.1% 81.8%; --datatype-pink: 327.4 87.1% 81.8%;
--accent-pink-foreground: 333.3 71.4% 50.6%; --datatype-pink-foreground: 333.3 71.4% 50.6%;
--accent-yellow: 50.4 97.8% 63.5%; --datatype-yellow: 50.4 97.8% 63.5%;
--accent-yellow-foreground: 40.6 96.1% 40.4%; --datatype-yellow-foreground: 40.6 96.1% 40.4%;
--accent-blue: 211.7 96.4% 78.4%; --datatype-blue: 211.7 96.4% 78.4%;
--accent-blue-foreground: 221.2 83.2% 53.3%; --datatype-blue-foreground: 221.2 83.2% 53.3%;
--accent-gray: 216 12.2% 83.9%; --datatype-gray: 216 12.2% 83.9%;
--accent-gray-foreground: 215 13.8% 34.1%; --datatype-gray-foreground: 215 13.8% 34.1%;
--accent-lime: 82 84.5% 67.1%; --datatype-lime: 82 84.5% 67.1%;
--accent-lime-foreground: 84.8 85.2% 34.5%; --datatype-lime-foreground: 84.8 85.2% 34.5%;
--accent-red: 0 93.5% 81.8%; --datatype-red: 0 93.5% 81.8%;
--accent-red-foreground: 0 72.2% 50.6%; --datatype-red-foreground: 0 72.2% 50.6%;
--accent-violet: 252.5 94.7% 85.1%; --datatype-violet: 252.5 94.7% 85.1%;
--accent-violet-foreground: 262.1 83.3% 57.8%; --datatype-violet-foreground: 262.1 83.3% 57.8%;
--accent-emerald: 156.2 71.6% 66.9%; --datatype-emerald: 156.2 71.6% 66.9%;
--accent-emerald-foreground: 161.4 93.5% 30.4%; --datatype-emerald-foreground: 161.4 93.5% 30.4%;
--accent-fuchsia: 291.1 93.1% 82.9%; --datatype-fuchsia: 291.1 93.1% 82.9%;
--accent-fuchsia-foreground: 293.4 69.5% 48.8%; --datatype-fuchsia-foreground: 293.4 69.5% 48.8%;
--accent-purple: 269.2 97.4% 85.1%; --datatype-purple: 269.2 97.4% 85.1%;
--accent-purple-foreground: 293.4 69.5% 48.8%; --datatype-purple-foreground: 293.4 69.5% 48.8%;
--accent-cyan: 187 92.4% 69%; --datatype-cyan: 187 92.4% 69%;
--accent-cyan-foreground: 191.6 91.4% 36.5%; --datatype-cyan-foreground: 191.6 91.4% 36.5%;
--accent-indigo: 229.7 93.5% 81.8%; --datatype-indigo: 229.7 93.5% 81.8%;
--accent-indigo-foreground: 243.4 75.4% 58.6%; --datatype-indigo-foreground: 243.4 75.4% 58.6%;
--node-ring: 240 6% 90%; --node-ring: 240 6% 90%;
} }
} }

72
src/frontend/tailwind.config.mjs
View file

@ -139,10 +139,6 @@ const config = {
"node-selected": "hsl(var(--node-selected))", "node-selected": "hsl(var(--node-selected))",
background: "hsl(var(--background))", background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))", foreground: "hsl(var(--foreground))",
"accent-emerald": {
DEFAULT: "hsl(var(--accent-emerald))",
foreground: "hsl(var(--accent-emerald-foreground))",
},
"emerald-smooth": "hsl(var(--emaral-smooth))", "emerald-smooth": "hsl(var(--emaral-smooth))",
"emerald-hard": "hsl(var(--emeral-hard))", "emerald-hard": "hsl(var(--emeral-hard))",
placeholder: "hsl(var(--placeholder))", placeholder: "hsl(var(--placeholder))",
@ -200,49 +196,49 @@ const config = {
DEFAULT: "#18181B", DEFAULT: "#18181B",
muted: "#27272A", muted: "#27272A",
}, },
"accent-yellow": { "datatype-yellow": {
DEFAULT: "hsl(var(--accent-yellow))", DEFAULT: "hsl(var(--datatype-yellow))",
foreground: "hsl(var(--accent-yellow-foreground))", foreground: "hsl(var(--datatype-yellow-foreground))",
}, },
"accent-blue": { "datatype-blue": {
DEFAULT: "hsl(var(--accent-blue))", DEFAULT: "hsl(var(--datatype-blue))",
foreground: "hsl(var(--accent-blue-foreground))", foreground: "hsl(var(--datatype-blue-foreground))",
}, },
"accent-gray": { "datatype-gray": {
DEFAULT: "hsl(var(--accent-gray))", DEFAULT: "hsl(var(--datatype-gray))",
foreground: "hsl(var(--accent-gray-foreground))", foreground: "hsl(var(--datatype-gray-foreground))",
}, },
"accent-lime": { "datatype-lime": {
DEFAULT: "hsl(var(--accent-lime))", DEFAULT: "hsl(var(--datatype-lime))",
foreground: "hsl(var(--accent-lime-foreground))", foreground: "hsl(var(--datatype-lime-foreground))",
}, },
"accent-red": { "datatype-red": {
DEFAULT: "hsl(var(--accent-red))", DEFAULT: "hsl(var(--datatype-red))",
foreground: "hsl(var(--accent-red-foreground))", foreground: "hsl(var(--datatype-red-foreground))",
}, },
"accent-violet": { "datatype-violet": {
DEFAULT: "hsl(var(--accent-violet))", DEFAULT: "hsl(var(--datatype-violet))",
foreground: "hsl(var(--accent-violet-foreground))", foreground: "hsl(var(--datatype-violet-foreground))",
}, },
"accent-emerald": { "datatype-emerald": {
DEFAULT: "hsl(var(--accent-emerald))", DEFAULT: "hsl(var(--datatype-emerald))",
foreground: "hsl(var(--accent-emerald-foreground))", foreground: "hsl(var(--datatype-emerald-foreground))",
}, },
"accent-fuchsia": { "datatype-fuchsia": {
DEFAULT: "hsl(var(--accent-fuchsia))", DEFAULT: "hsl(var(--datatype-fuchsia))",
foreground: "hsl(var(--accent-fuchsia-foreground))", foreground: "hsl(var(--datatype-fuchsia-foreground))",
}, },
"accent-purple": { "datatype-purple": {
DEFAULT: "hsl(var(--accent-purple))", DEFAULT: "hsl(var(--datatype-purple))",
foreground: "hsl(var(--accent-purple-foreground))", foreground: "hsl(var(--datatype-purple-foreground))",
}, },
"accent-cyan": { "datatype-cyan": {
DEFAULT: "hsl(var(--accent-cyan))", DEFAULT: "hsl(var(--datatype-cyan))",
foreground: "hsl(var(--accent-cyan-foreground))", foreground: "hsl(var(--datatype-cyan-foreground))",
}, },
"accent-indigo": { "datatype-indigo": {
DEFAULT: "hsl(var(--accent-indigo))", DEFAULT: "hsl(var(--datatype-indigo))",
foreground: "hsl(var(--accent-indigo-foreground))", foreground: "hsl(var(--datatype-indigo-foreground))",
}, },
"node-ring": "hsl(var(--node-ring))", "node-ring": "hsl(var(--node-ring))",
}, },
@ -308,7 +304,7 @@ const config = {
wordBreak: "break-word", wordBreak: "break-word",
}, },
".arrow-hide": { ".arrow-hide": {
"&::-webkit-inner-spin-button": { "&::-webkit-datatype-spin-button": {
"-webkit-appearance": "none", "-webkit-appearance": "none",
margin: 0, margin: 0,
}, },