From f32360fea8f9fdb04ccf7667a5cbe60d45c2dd57 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com> Date: Fri, 8 Nov 2024 18:10:18 -0300 Subject: [PATCH] fix: changed component colors name to not override existing colors, fixed responsiveness issues on main, playground and nav (#4482) * 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> --- src/frontend/src/App.css | 21 +- .../components/NodeDescription/index.tsx | 4 +- .../components/NodeOutputfield/index.tsx | 2 +- .../components/NodeStatus/index.tsx | 2 +- .../handleRenderComponent/index.tsx | 234 ++++++++---------- .../components/FlowMenu/index.tsx | 30 ++- .../components/appHeaderComponent/index.tsx | 4 +- src/frontend/src/modals/IOModal/newModal.tsx | 13 +- .../ConnectionLineComponent/index.tsx | 2 +- .../components/PageComponent/index.tsx | 9 +- .../sidebarFilterComponent/index.tsx | 2 +- .../components/flowSidebarComponent/index.tsx | 6 + .../MainPage/pages/emptyFolder/index.tsx | 50 ++-- src/frontend/src/style/applies.css | 1 - src/frontend/src/style/classes.css | 20 +- src/frontend/src/style/index.css | 96 +++---- src/frontend/tailwind.config.mjs | 72 +++--- 17 files changed, 251 insertions(+), 317 deletions(-) diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css index 2d4cd7467..96907a865 100644 --- a/src/frontend/src/App.css +++ b/src/frontend/src/App.css @@ -133,27 +133,8 @@ body { 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 { - stroke: var(--selected-light) !important; - stroke-width: 2px !important; -} - -:root.dark .react-flow__edge.selected .react-flow__edge-path { - stroke: var(--selected-dark) !important; + stroke: var(--selected) !important; stroke-width: 2px !important; } diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index 48d1e6d8b..e95fc0d85 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx @@ -134,7 +134,7 @@ export default function NodeDescription({ data-testid="generic-node-desc" ref={overflowRef} 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" : "", placeholderClassName, )} @@ -149,7 +149,7 @@ export default function NodeDescription({ diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx index 1297d4d47..3bddc9ad1 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx @@ -216,7 +216,7 @@ export default function NodeOutputField({ className={cn( "icon-size", displayOutputPreview && !unknownOutput - ? "text-placeholder-foreground hover:text-foreground" + ? "text-foreground hover:text-primary-hover" : "cursor-not-allowed text-placeholder-foreground opacity-60", errorOutput ? "text-destructive" : "", )} diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx index 69e8175e8..4f5c2676a 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx @@ -218,7 +218,7 @@ export default function NodeStatus({
{validationString && ( -
+
{validationString}
)} diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx index 488885245..9d3572882 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx @@ -43,7 +43,7 @@ export default function HandleRenderComponent({ }) { const handleColorName = colorName?.[0] ?? ""; - const accentColorName = `accent-${handleColorName}`; + const accentColorName = `datatype-${handleColorName}`; const accentForegroundColorName = `${accentColorName}-foreground`; const setHandleDragging = useFlowStore((state) => state.setHandleDragging); @@ -181,7 +181,7 @@ export default function HandleRenderComponent({ .concat(colorName![0]) .map( (color, index) => - `hsl(var(--accent-${color}))` + + `hsl(var(--datatype-${color}))` + " " + ((360 / colors.length) * index - 360 / (colors.length * 4)) + "deg " + @@ -204,33 +204,33 @@ export default function HandleRenderComponent({ @keyframes pulseNeon { 0% { box-shadow: 0 0 0 2px hsl(var(--node-ring)), - 0 0 2px hsl(var(--accent-${colorName![0]})), - 0 0 4px hsl(var(--accent-${colorName![0]})), - 0 0 6px hsl(var(--accent-${colorName![0]})), - 0 0 8px hsl(var(--accent-${colorName![0]})), - 0 0 10px hsl(var(--accent-${colorName![0]})), - 0 0 15px hsl(var(--accent-${colorName![0]})), - 0 0 20px hsl(var(--accent-${colorName![0]})); + 0 0 2px hsl(var(--datatype-${colorName![0]})), + 0 0 4px hsl(var(--datatype-${colorName![0]})), + 0 0 6px hsl(var(--datatype-${colorName![0]})), + 0 0 8px hsl(var(--datatype-${colorName![0]})), + 0 0 10px hsl(var(--datatype-${colorName![0]})), + 0 0 15px hsl(var(--datatype-${colorName![0]})), + 0 0 20px hsl(var(--datatype-${colorName![0]})); } 50% { box-shadow: 0 0 0 2px hsl(var(--node-ring)), - 0 0 4px hsl(var(--accent-${colorName![0]})), - 0 0 8px hsl(var(--accent-${colorName![0]})), - 0 0 12px hsl(var(--accent-${colorName![0]})), - 0 0 16px hsl(var(--accent-${colorName![0]})), - 0 0 20px hsl(var(--accent-${colorName![0]})), - 0 0 25px hsl(var(--accent-${colorName![0]})), - 0 0 30px hsl(var(--accent-${colorName![0]})); + 0 0 4px hsl(var(--datatype-${colorName![0]})), + 0 0 8px hsl(var(--datatype-${colorName![0]})), + 0 0 12px hsl(var(--datatype-${colorName![0]})), + 0 0 16px hsl(var(--datatype-${colorName![0]})), + 0 0 20px hsl(var(--datatype-${colorName![0]})), + 0 0 25px hsl(var(--datatype-${colorName![0]})), + 0 0 30px hsl(var(--datatype-${colorName![0]})); } 100% { box-shadow: 0 0 0 2px hsl(var(--node-ring)), - 0 0 2px hsl(var(--accent-${colorName![0]})), - 0 0 4px hsl(var(--accent-${colorName![0]})), - 0 0 6px hsl(var(--accent-${colorName![0]})), - 0 0 8px hsl(var(--accent-${colorName![0]})), - 0 0 10px hsl(var(--accent-${colorName![0]})), - 0 0 15px hsl(var(--accent-${colorName![0]})), - 0 0 20px hsl(var(--accent-${colorName![0]})); + 0 0 2px hsl(var(--datatype-${colorName![0]})), + 0 0 4px hsl(var(--datatype-${colorName![0]})), + 0 0 6px hsl(var(--datatype-${colorName![0]})), + 0 0 8px hsl(var(--datatype-${colorName![0]})), + 0 0 10px hsl(var(--datatype-${colorName![0]})), + 0 0 15px hsl(var(--datatype-${colorName![0]})), + 0 0 20px hsl(var(--datatype-${colorName![0]})); } } `; @@ -264,21 +264,6 @@ export default function HandleRenderComponent({ const handleRef = useRef(null); const invisibleDivRef = useRef(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 = () => { setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!)); setFilterType(currentFilter); @@ -291,104 +276,95 @@ export default function HandleRenderComponent({ return (
-
- - } - side={left ? "left" : "right"} - > - - isValidConnection(connection, nodes, edges) - } - className={cn( - `group/handle z-50 transition-all`, - !showNode && "no-show", - )} - onClick={handleClick} - onMouseUp={() => { - setOpenTooltip(false); - }} - onContextMenu={(event) => { - event.preventDefault(); - }} - onMouseDown={(event) => { - if (event.button === 0) { - setHandleDragging(currentFilter); - document.addEventListener("mouseup", handleMouseUp); - } - }} - style={{ - width: "32px", - height: "32px", - top: "50%", - position: "absolute", - zIndex: 30, - background: "transparent", - border: "none", - }} - onMouseEnter={() => setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} + - - -
+ + isValidConnection(connection, nodes, edges) + } + className={cn( + `group/handle z-50 transition-all`, + !showNode && "no-show", + )} + onClick={handleClick} + onMouseUp={() => { + setOpenTooltip(false); }} - onClick={(e) => { - handleRef.current?.dispatchEvent( - new MouseEvent("mousedown", { bubbles: true }), - ); - }} - onMouseEnter={() => setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} onContextMenu={(event) => { event.preventDefault(); }} - /> -
+ onMouseDown={(event) => { + if (event.button === 0) { + setHandleDragging(currentFilter); + document.addEventListener("mouseup", handleMouseUp); + } + }} + style={{ + width: "32px", + height: "32px", + top: "50%", + position: "absolute", + zIndex: 30, + background: "transparent", + border: "none", + }} + onMouseEnter={() => setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onContextMenu={(event) => { + event.preventDefault(); + }} + /> + +
); } diff --git a/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx index 4e0afe927..20ee011ce 100644 --- a/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx +++ b/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx @@ -63,17 +63,6 @@ export const MenuBar = ({}: {}): JSX.Element => { const changesNotSaved = customStringify(currentFlow) !== customStringify(currentSavedFlow); - const savedText = - updatedAt && changesNotSaved ? ( - SAVED_HOVER + - new Date(updatedAt).toLocaleString("en-US", { - hour: "numeric", - minute: "numeric", - }) - ) : ( -
Saved
- ); - function handleAddFlow() { try { addFlow().then((id) => { @@ -122,7 +111,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
{ - navigate("/"); + navigate( + currentFolder?.id + ? "/all/folder/" + currentFolder.id + : "/all", + ); }} > {currentFolder?.name} @@ -283,7 +276,12 @@ export const MenuBar = ({}: {}): JSX.Element => { >
-
+
{!autoSaving && ( +
{haveChat ? ( diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx index 6a33b66a6..a225c0404 100644 --- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx @@ -10,7 +10,7 @@ const ConnectionLineComponent = ({ }: ConnectionLineComponentProps): JSX.Element => { const handleDragging = useFlowStore((state) => state.handleDragging); const color = handleDragging?.color; - const accentColor = `hsl(var(--accent-${color}))`; + const accentColor = `hsl(var(--datatype-${color}))`; return ( diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index da1f6c510..c6f75f5d3 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -38,8 +38,6 @@ import ReactFlow, { Panel, SelectionDragHandler, updateEdge, - useReactFlow, - useViewport, } from "reactflow"; import GenericNode from "../../../../CustomNodes/GenericNode"; import { @@ -565,11 +563,10 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { const handleEdgeClick = (event, edge) => { const color = - nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] || - "hsl(var(--foreground))"; + nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] || "cyan"; - const accentColor = `hsl(var(--accent-${color}-foreground))`; - document.documentElement.style.setProperty("--selected", accentColor); + const accentColor = `hsl(var(--datatype-${color}))`; + reactFlowWrapper.current?.style.setProperty("--selected", accentColor); }; const { open } = useSidebar(); diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx index 32313ce71..9e6294858 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx @@ -17,7 +17,7 @@ export function SidebarFilterComponent({
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx index 715b8a74a..6afb6813f 100644 --- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx @@ -102,6 +102,12 @@ export function FlowSidebarComponent() { }, ); + useEffect(() => { + if (filterType) { + setOpen(true); + } + }, [filterType]); + useEffect(() => { filterComponents(); }, [data, search, filterType, getFilterEdge, showBeta, showLegacy]); diff --git a/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx b/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx index a80181a99..81d8d7f2f 100644 --- a/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx +++ b/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx @@ -11,32 +11,30 @@ export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => { return (
-
-
-

- {folders?.length > 1 ? "Empty folder" : "Start building"} -

-

- Begin with a template, or start from scratch. -

- -
+
+

+ {folders?.length > 1 ? "Empty folder" : "Start building"} +

+

+ Begin with a template, or start from scratch. +

+
); diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index 42d8e5d52..df9452653 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -1272,7 +1272,6 @@ /* Gradient background */ .text-container { - z-index: 50; width: 100%; height: 100%; display: flex; diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css index 25500fbee..d485f94df 100644 --- a/src/frontend/src/style/classes.css +++ b/src/frontend/src/style/classes.css @@ -190,31 +190,15 @@ textarea[class^="ag-"]:focus { } .react-flow__handle-right { - right: -1.25rem !important; + right: 0 !important; transform: translate(50%, -50%) !important; } .react-flow__handle-left { - left: 1.25rem !important; + left: 0 !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) { z-index: -1 !important; } diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css index 23fe1b71a..1429dba85 100644 --- a/src/frontend/src/style/index.css +++ b/src/frontend/src/style/index.css @@ -105,41 +105,41 @@ --smooth-red: 0 93.3% 94.1%; --radius: 0.5rem; - --accent-pink: 327.3 73.3% 97.1%; - --accent-pink-foreground: 333.3 71.4% 50.6%; + --datatype-pink: 327.3 73.3% 97.1%; + --datatype-pink-foreground: 333.3 71.4% 50.6%; - --accent-yellow: 40.6 96.1% 40.4%; - --accent-yellow-foreground: 54.9 96.7% 88%; + --datatype-yellow: 40.6 96.1% 40.4%; + --datatype-yellow-foreground: 54.9 96.7% 88%; - --accent-blue: 221.2 83.2% 53.3%; - --accent-blue-foreground: 214.3 94.6% 92.7%; + --datatype-blue: 221.2 83.2% 53.3%; + --datatype-blue-foreground: 214.3 94.6% 92.7%; - --accent-gray: 215 13.8% 34.1%; - --accent-gray-foreground: 220 14.3% 95.9%; + --datatype-gray: 215 13.8% 34.1%; + --datatype-gray-foreground: 220 14.3% 95.9%; - --accent-lime: 84.8 85.2% 34.5%; - --accent-lime-foreground: 79.6 89.1% 89.2%; + --datatype-lime: 84.8 85.2% 34.5%; + --datatype-lime-foreground: 79.6 89.1% 89.2%; - --accent-red: 0 72.2% 50.6%; - --accent-red-foreground: 0 93.3% 94.1%; + --datatype-red: 0 72.2% 50.6%; + --datatype-red-foreground: 0 93.3% 94.1%; - --accent-violet: 262.1 83.3% 57.8%; - --accent-violet-foreground: 251.4 91.3% 95.5%; + --datatype-violet: 262.1 83.3% 57.8%; + --datatype-violet-foreground: 251.4 91.3% 95.5%; - --accent-emerald: 161.4 93.5% 30.4%; - --accent-emerald-foreground: 149.3 80.4% 90%; + --datatype-emerald: 161.4 93.5% 30.4%; + --datatype-emerald-foreground: 149.3 80.4% 90%; - --accent-fuchsia: 293.4 69.5% 48.8%; - --accent-fuchsia-foreground: 287 100% 95.5%; + --datatype-fuchsia: 293.4 69.5% 48.8%; + --datatype-fuchsia-foreground: 287 100% 95.5%; - --accent-purple: 271.5 81.3% 55.9%; - --accent-purple-foreground: 268.7 100% 95.5%; + --datatype-purple: 271.5 81.3% 55.9%; + --datatype-purple-foreground: 268.7 100% 95.5%; - --accent-cyan: 191.6 91.4% 36.5%; - --accent-cyan-foreground: 185.1 95.9% 90.4%; + --datatype-cyan: 191.6 91.4% 36.5%; + --datatype-cyan-foreground: 185.1 95.9% 90.4%; - --accent-indigo: 243.4 75.4% 58.6%; - --accent-indigo-foreground: 226.5 100% 93.9%; + --datatype-indigo: 243.4 75.4% 58.6%; + --datatype-indigo-foreground: 226.5 100% 93.9%; --node-ring: 240 6% 90%; } @@ -247,41 +247,41 @@ --hard-zinc: 240 5.2% 33.9%; --smooth-red: 0 93.3% 94.1%; - --accent-pink: 327.4 87.1% 81.8%; - --accent-pink-foreground: 333.3 71.4% 50.6%; + --datatype-pink: 327.4 87.1% 81.8%; + --datatype-pink-foreground: 333.3 71.4% 50.6%; - --accent-yellow: 50.4 97.8% 63.5%; - --accent-yellow-foreground: 40.6 96.1% 40.4%; + --datatype-yellow: 50.4 97.8% 63.5%; + --datatype-yellow-foreground: 40.6 96.1% 40.4%; - --accent-blue: 211.7 96.4% 78.4%; - --accent-blue-foreground: 221.2 83.2% 53.3%; + --datatype-blue: 211.7 96.4% 78.4%; + --datatype-blue-foreground: 221.2 83.2% 53.3%; - --accent-gray: 216 12.2% 83.9%; - --accent-gray-foreground: 215 13.8% 34.1%; + --datatype-gray: 216 12.2% 83.9%; + --datatype-gray-foreground: 215 13.8% 34.1%; - --accent-lime: 82 84.5% 67.1%; - --accent-lime-foreground: 84.8 85.2% 34.5%; + --datatype-lime: 82 84.5% 67.1%; + --datatype-lime-foreground: 84.8 85.2% 34.5%; - --accent-red: 0 93.5% 81.8%; - --accent-red-foreground: 0 72.2% 50.6%; + --datatype-red: 0 93.5% 81.8%; + --datatype-red-foreground: 0 72.2% 50.6%; - --accent-violet: 252.5 94.7% 85.1%; - --accent-violet-foreground: 262.1 83.3% 57.8%; + --datatype-violet: 252.5 94.7% 85.1%; + --datatype-violet-foreground: 262.1 83.3% 57.8%; - --accent-emerald: 156.2 71.6% 66.9%; - --accent-emerald-foreground: 161.4 93.5% 30.4%; + --datatype-emerald: 156.2 71.6% 66.9%; + --datatype-emerald-foreground: 161.4 93.5% 30.4%; - --accent-fuchsia: 291.1 93.1% 82.9%; - --accent-fuchsia-foreground: 293.4 69.5% 48.8%; + --datatype-fuchsia: 291.1 93.1% 82.9%; + --datatype-fuchsia-foreground: 293.4 69.5% 48.8%; - --accent-purple: 269.2 97.4% 85.1%; - --accent-purple-foreground: 293.4 69.5% 48.8%; + --datatype-purple: 269.2 97.4% 85.1%; + --datatype-purple-foreground: 293.4 69.5% 48.8%; - --accent-cyan: 187 92.4% 69%; - --accent-cyan-foreground: 191.6 91.4% 36.5%; + --datatype-cyan: 187 92.4% 69%; + --datatype-cyan-foreground: 191.6 91.4% 36.5%; - --accent-indigo: 229.7 93.5% 81.8%; - --accent-indigo-foreground: 243.4 75.4% 58.6%; + --datatype-indigo: 229.7 93.5% 81.8%; + --datatype-indigo-foreground: 243.4 75.4% 58.6%; --node-ring: 240 6% 90%; } } diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs index 3c5d79c1a..492fbd700 100644 --- a/src/frontend/tailwind.config.mjs +++ b/src/frontend/tailwind.config.mjs @@ -139,10 +139,6 @@ const config = { "node-selected": "hsl(var(--node-selected))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", - "accent-emerald": { - DEFAULT: "hsl(var(--accent-emerald))", - foreground: "hsl(var(--accent-emerald-foreground))", - }, "emerald-smooth": "hsl(var(--emaral-smooth))", "emerald-hard": "hsl(var(--emeral-hard))", placeholder: "hsl(var(--placeholder))", @@ -200,49 +196,49 @@ const config = { DEFAULT: "#18181B", muted: "#27272A", }, - "accent-yellow": { - DEFAULT: "hsl(var(--accent-yellow))", - foreground: "hsl(var(--accent-yellow-foreground))", + "datatype-yellow": { + DEFAULT: "hsl(var(--datatype-yellow))", + foreground: "hsl(var(--datatype-yellow-foreground))", }, - "accent-blue": { - DEFAULT: "hsl(var(--accent-blue))", - foreground: "hsl(var(--accent-blue-foreground))", + "datatype-blue": { + DEFAULT: "hsl(var(--datatype-blue))", + foreground: "hsl(var(--datatype-blue-foreground))", }, - "accent-gray": { - DEFAULT: "hsl(var(--accent-gray))", - foreground: "hsl(var(--accent-gray-foreground))", + "datatype-gray": { + DEFAULT: "hsl(var(--datatype-gray))", + foreground: "hsl(var(--datatype-gray-foreground))", }, - "accent-lime": { - DEFAULT: "hsl(var(--accent-lime))", - foreground: "hsl(var(--accent-lime-foreground))", + "datatype-lime": { + DEFAULT: "hsl(var(--datatype-lime))", + foreground: "hsl(var(--datatype-lime-foreground))", }, - "accent-red": { - DEFAULT: "hsl(var(--accent-red))", - foreground: "hsl(var(--accent-red-foreground))", + "datatype-red": { + DEFAULT: "hsl(var(--datatype-red))", + foreground: "hsl(var(--datatype-red-foreground))", }, - "accent-violet": { - DEFAULT: "hsl(var(--accent-violet))", - foreground: "hsl(var(--accent-violet-foreground))", + "datatype-violet": { + DEFAULT: "hsl(var(--datatype-violet))", + foreground: "hsl(var(--datatype-violet-foreground))", }, - "accent-emerald": { - DEFAULT: "hsl(var(--accent-emerald))", - foreground: "hsl(var(--accent-emerald-foreground))", + "datatype-emerald": { + DEFAULT: "hsl(var(--datatype-emerald))", + foreground: "hsl(var(--datatype-emerald-foreground))", }, - "accent-fuchsia": { - DEFAULT: "hsl(var(--accent-fuchsia))", - foreground: "hsl(var(--accent-fuchsia-foreground))", + "datatype-fuchsia": { + DEFAULT: "hsl(var(--datatype-fuchsia))", + foreground: "hsl(var(--datatype-fuchsia-foreground))", }, - "accent-purple": { - DEFAULT: "hsl(var(--accent-purple))", - foreground: "hsl(var(--accent-purple-foreground))", + "datatype-purple": { + DEFAULT: "hsl(var(--datatype-purple))", + foreground: "hsl(var(--datatype-purple-foreground))", }, - "accent-cyan": { - DEFAULT: "hsl(var(--accent-cyan))", - foreground: "hsl(var(--accent-cyan-foreground))", + "datatype-cyan": { + DEFAULT: "hsl(var(--datatype-cyan))", + foreground: "hsl(var(--datatype-cyan-foreground))", }, - "accent-indigo": { - DEFAULT: "hsl(var(--accent-indigo))", - foreground: "hsl(var(--accent-indigo-foreground))", + "datatype-indigo": { + DEFAULT: "hsl(var(--datatype-indigo))", + foreground: "hsl(var(--datatype-indigo-foreground))", }, "node-ring": "hsl(var(--node-ring))", }, @@ -308,7 +304,7 @@ const config = { wordBreak: "break-word", }, ".arrow-hide": { - "&::-webkit-inner-spin-button": { + "&::-webkit-datatype-spin-button": { "-webkit-appearance": "none", margin: 0, },