Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update theme #4084

Merged
merged 12 commits into from
Oct 14, 2024
Merged

feat: update theme #4084

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
71a5e9e
update theme
mfortman11 Oct 9, 2024
977870d
Merge branch 'main' into theme-change
mfortman11 Oct 9, 2024
3991903
Merge branch 'main' into theme-change
mfortman11 Oct 10, 2024
a0fd634
Merge branch 'main' of github.com:langflow-ai/langflow into theme-change
mfortman11 Oct 10, 2024
586c384
update component styles
mfortman11 Oct 10, 2024
003f9b1
Merge branch 'theme-change' of github.com:mfortman11/langflow into th…
mfortman11 Oct 10, 2024
02c9e9a
change output node background
mfortman11 Oct 14, 2024
1a92e98
update background for component folderrs
mfortman11 Oct 14, 2024
7c649f1
Merge branch 'main' of github.com:langflow-ai/langflow into theme-change
mfortman11 Oct 14, 2024
ea659af
update astra icon coloring
mfortman11 Oct 14, 2024
0582e24
Merge branch 'main' into theme-change
mfortman11 Oct 14, 2024
eab6c30
Merge branch 'main' into theme-change
Cristhianzl Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default function NodeInputField({
<div
ref={ref}
className={
"relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
"relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2" +
((name === "code" && type === "code") ||
(name.includes("code") && proxy)
? " hidden"
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export default function NodeOutputField({
) : (
<div
ref={ref}
className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-primary-foreground px-5 py-2"
>
<>
<div className="flex w-full items-center justify-end truncate text-sm">
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/icons/AstraDB/AstraDB.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ const AstraSVG = (props) => (
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect width="100%" height="100%" rx="4" fill="white" />
<rect width="100%" height="100%" rx="4" fill="backgroundColor" />
<path
d="M6.89209 5.76894L5 10.8265H6.56835L8 6.4524L9.43165 10.8265H11L9.10791 5.76894C8.71942 4.76175 7.29496 4.72578 6.89209 5.76894Z"
fill="black"
fill="currentColor"
/>
</svg>
);
Expand Down
6 changes: 3 additions & 3 deletions src/frontend/src/style/applies.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,11 +234,11 @@
@apply flex w-full select-none items-center justify-between bg-background py-3 pl-5 pr-3;
}
.components-disclosure-arrangement {
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2;
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-primary-foreground px-3 py-2;
}
.components-disclosure-arrangement-child {
/* different color than the non child */
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2;
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-primary-foreground px-3 py-2;
}
.components-disclosure-title {
@apply flex items-center text-sm text-primary;
Expand Down Expand Up @@ -324,7 +324,7 @@
@apply relative flex flex-col justify-center bg-background transition-all;
}
.generic-node-div-title {
@apply flex w-full items-center gap-2 border-b bg-muted p-5;
@apply flex w-full items-center gap-2 border-b p-5;
}
.generic-node-title-arrangement {
@apply flex-max-width items-center truncate;
Expand Down
100 changes: 52 additions & 48 deletions src/frontend/src/style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,34 @@

@layer base {
:root {
--node-selected: 243 75% 59%;
/* Zinc Theme Values from shadcn */
--background: 0 0% 100%; /* hsl(0 0% 100%) */
--foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--muted: 210 40% 98%; /* hsl(210 40% 98%) */
--muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
--popover: 0 0% 100%; /* hsl(0 0% 100%) */
--popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */
--card: 0 0% 100%; /* hsl(0 0% 100%) */
--card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
--input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
--primary: 222.2 27% 11.2%; /* hsl(222 27% 18%) */
--primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
--secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
--accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--destructive: 0 60% 40%; /* hsl(0 60% 40%) */
--destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--card-foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */
--popover: 0 0% 100%; /* hsl(0 0% 100%) */
--popover-foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */
--primary: 240 5.9% 10%; /* hsl(240 5.9% 10%) */
--primary-foreground: 0 0% 98%; /* hsl(0 0% 98%) */
--secondary: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */
--secondary-foreground: 240 5.9% 10%; /* hsl(240 5.9% 10%) */
--muted: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */
--muted-foreground: 240 3.8% 46.1%; /* hsl(240 3.8% 46.1%) */
--accent: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */
--accent-foreground: 240 5.9% 10%; /* hsl(240 5.9% 10%) */
--destructive: 0 84.2% 60.2%; /* hsl(0 84.2% 60.2%) */
--destructive-foreground: 0 0% 98%; /* hsl(0 0% 98%) */
--border: 240 5.9% 90%; /* hsl(240 5.9% 90%) */
--input: 240 5.9% 90%; /* hsl(240 5.9% 90%) */
--ring: 240 5.9% 10%; /* hsl(240 5.9% 10%) */
--radius: 0.5rem;
--ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--chart-1: 12 76% 61%; /* hsl(12 76% 61%) */
--chart-2: 173 58% 39%; /* hsl(173 58% 39%) */
--chart-3: 197 37% 24%; /* hsl(197 37% 24%) */
--chart-4: 43 74% 66%; /* hsl(43 74% 66%) */
--chart-5: 27 87% 67%; /* hsl(27 87% 67%) */

--node-selected: 243 75% 59%;
--round-btn-shadow: #00000063;
--ice: #31a3cc;
--selected: #2196f3;
Expand Down Expand Up @@ -85,6 +92,32 @@
}

.dark {
/* Zinc Theme Values from shadcn */
--background: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
--foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
--card: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
--card-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
--popover: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
--popover-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
--primary: 0 0% 98%; /* hsl(0, 0%, 98%) */
--primary-foreground: 240 5.9% 10%; /* hsl(240, 5.9%, 10%) */
--secondary: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
--secondary-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
--muted: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
--muted-foreground: 240 5% 64.9%; /* hsl(240, 5%, 64.9%) */
--accent: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
--accent-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
--destructive: 0 62.8% 30.6%; /* hsl(0, 62.8%, 30.6%) */
--destructive-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
--border: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
--input: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
--ring: 240 4.9% 83.9%; /* hsl(240, 4.9%, 83.9%) */
--chart-1: 220 70% 50%; /* hsl(220, 70%, 50%) */
--chart-2: 160 60% 45%; /* hsl(160, 60%, 45%) */
--chart-3: 30 80% 55%; /* hsl(30, 80%, 55%) */
--chart-4: 280 65% 60%; /* hsl(280, 65%, 60%) */
--chart-5: 340 75% 55%; /* hsl(340, 75%, 55%) */

--note-default: #0f172a;
--note-indigo: #312e81;
--note-emerald: #064e3b;
Expand All @@ -99,44 +132,15 @@
--note-red-opacity: #7f1d1d80;

--node-selected: 234 89% 74%;
--background: 224 28% 7.5%; /* hsl(224 10% 7.5%) */
--foreground: 213 31% 80%; /* hsl(213 31% 91%) */

--ice: #60a5fa;
--hover: #1a202e;
--disabled-run: #6366f1;
--selected: #0369a1;

--muted: 223 27% 11%; /* hsl(223 27% 11%) */
--muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */

--popover: 224 71% 4%; /* hsl(224 71% 4%) */
--popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */

--card: 224 25% 15.5%; /* hsl(224 71% 4%) */
--card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */

--border: 216 24% 17%; /* hsl(216 34% 17%) */
--input: 216 24% 17%; /* hsl(216 34% 17%) */

--primary: 210 20% 80%; /* hsl(210 20% 80%) */
--primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */

--secondary: 222.2 30.4% 7.2%; /* hsl(222 47% 11%) */
--secondary-foreground: 210 40% 80%; /* hsl(210 40% 80%) */

--accent: 216 24% 20%; /* hsl(216 34% 17%) */
--accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */

--destructive: 0 60% 25%; /* hsl(0 60% 25%) */
--destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */

--filter-foreground: #eef2ff;
--filter-background: #4e46e599;

--ring: 216 24% 30%; /* hsl(216 24% 30%) */

--radius: 0.5rem;

--round-btn-shadow: #00000063;

--success-background: #022c22;
Expand Down