feat: update theme (#4084)
* update theme * update component styles * change output node background * update background for component folderrs * update astra icon coloring
This commit is contained in:
Mike Fortman
GitHub
parent
844efc1f73
commit
cb3219f3fe
5 changed files with 59 additions and 55 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue