shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-17 04:46:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

upgrade tailwind to v4

Browse Source
This commit is contained in:
dswbx
2025-03-11 13:43:40 +01:00
parent d90f14c707
commit 640f015812
14 changed files with 198 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/ui/client/BkndProvider.tsx
View File

@@ -101,11 +101,13 @@ export function BkndProvider({
}
startTransition(() => {
setSchema(newSchema);
setWithSecrets(_includeSecrets);
setFetched(true);
set_local_version((v) => v + 1);
fetching.current = Fetching.None;
document.startViewTransition(() => {
setSchema(newSchema);
setWithSecrets(_includeSecrets);
setFetched(true);
set_local_version((v) => v + 1);
fetching.current = Fetching.None;
});
});
}

6
app/src/ui/client/schema/system/use-bknd-system.ts
View File

@@ -36,6 +36,10 @@ export function useBkndSystemTheme() {
return {
theme: $sys.theme,
set: $sys.actions.theme.set,
toggle: () => $sys.actions.theme.toggle(),
toggle: async () => {
document.startViewTransition(async () => {
await $sys.actions.theme.toggle();
});
},
};
}

4
app/src/ui/components/buttons/Button.tsx
View File

@@ -23,7 +23,7 @@ const styles = {
outline: "border border-primary/20 bg-transparent hover:bg-primary/5 link text-primary/80",
red: "dark:bg-red-950 dark:hover:bg-red-900 bg-red-100 hover:bg-red-200 link text-primary/70",
subtlered:
"dark:text-red-950 text-red-700 dark:hover:bg-red-900 bg-transparent hover:bg-red-50 link",
"dark:text-red-700 text-red-700 dark:hover:bg-red-900 dark:hover:text-red-200 bg-transparent hover:bg-red-50 link",
};
export type BaseProps = {
@@ -51,7 +51,7 @@ const Base = ({
}: BaseProps) => ({
...props,
className: twMerge(
"flex flex-row flex-nowrap items-center font-semibold disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed transition-[opacity,background-color,color,border-color]",
"flex flex-row flex-nowrap items-center !font-semibold disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed transition-[opacity,background-color,color,border-color]",
sizes[size ?? "default"],
styles[variant ?? "default"],
props.className,

4
app/src/ui/layouts/AppShell/AppShell.tsx
View File

@@ -48,7 +48,7 @@ export const NavLink = <E extends React.ElementType = "a">({
<Tag
{...otherProps}
className={twMerge(
"px-6 py-2 [&.active]:bg-muted [&.active]:hover:bg-primary/15 hover:bg-primary/5 flex flex-row items-center rounded-full gap-2.5 link",
"px-6 py-2 [&.active]:bg-muted [&.active]:hover:bg-primary/15 hover:bg-primary/5 flex flex-row items-center rounded-full gap-2.5 link transition-colors",
disabled && "opacity-50 cursor-not-allowed",
className,
)}
@@ -80,7 +80,7 @@ export function Main({ children }) {
data-shell="main"
className={twMerge(
"flex flex-col flex-grow w-1 flex-shrink-1",
sidebar.open && "max-w-[calc(100%-350px)]",
sidebar.open && "md:max-w-[calc(100%-350px)]",
)}
>
{children}

7
app/src/ui/lib/mantine/theme.ts
View File

@@ -107,8 +107,11 @@ export function createMantineTheme(scheme: "light" | "dark"): {
}),
}),
Tabs: Tabs.extend({
classNames: (theme, props) => ({
tab: "data-[active=true]:border-primary",
vars: (theme, props) => ({
// https://mantine.dev/styles/styles-api/
root: {
"--tabs-color": "border-primary",
},
}),
}),
Menu: Menu.extend({

77
app/src/ui/main.css
View File

@@ -1,24 +1,14 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
#bknd-admin.dark,
.dark .bknd-admin,
.bknd-admin.dark {
--color-primary: 250 250 250; /* zinc-50 */
--color-background: 30 31 34;
--color-muted: 47 47 52;
--color-darkest: 255 255 255; /* white */
--color-lightest: 24 24 27; /* black */
}
@custom-variant dark (&:where(.dark, .dark *));
#bknd-admin,
.bknd-admin {
--color-primary: 9 9 11; /* zinc-950 */
--color-background: 250 250 250; /* zinc-50 */
--color-muted: 228 228 231; /* ? */
--color-darkest: 0 0 0; /* black */
--color-lightest: 255 255 255; /* white */
--color-primary: rgb(9 9 11); /* zinc-950 */
--color-background: rgb(250 250 250); /* zinc-50 */
--color-muted: rgb(228 228 231); /* ? */
--color-darkest: rgb(0 0 0); /* black */
--color-lightest: rgb(255 255 255); /* white */
@mixin light {
--mantine-color-body: rgb(250 250 250);
@@ -32,6 +22,24 @@
}
}
.dark,
#bknd-admin.dark,
.bknd-admin.dark {
--color-primary: rgb(250 250 250); /* zinc-50 */
--color-background: rgb(30 31 34);
--color-muted: rgb(47 47 52);
--color-darkest: rgb(255 255 255); /* white */
--color-lightest: rgb(24 24 27); /* black */
}
@theme {
--color-primary: var(--color-primary);
--color-background: var(--color-background);
--color-muted: var(--color-muted);
--color-darkest: var(--color-darkest);
--color-lightest: var(--color-lightest);
}
#bknd-admin {
@apply bg-background text-primary overflow-hidden h-dvh w-dvw;
@@ -51,37 +59,12 @@ body,
@apply flex flex-1 flex-col h-dvh w-dvw;
}
@layer components {
.link {
@apply transition-colors active:translate-y-px;
}
.link {
@apply active:translate-y-px;
}
.img-responsive {
@apply max-h-full w-auto;
}
/**
* debug classes
*/
.bordered-red {
@apply border-2 border-red-500;
}
.bordered-green {
@apply border-2 border-green-500;
}
.bordered-blue {
@apply border-2 border-blue-500;
}
.bordered-violet {
@apply border-2 border-violet-500;
}
.bordered-yellow {
@apply border-2 border-yellow-500;
}
.img-responsive {
@apply max-h-full w-auto;
}
#bknd-admin,

18
app/src/ui/main.tsx
View File

@@ -4,11 +4,19 @@ import Admin from "./Admin";
import "./main.css";
import "./styles.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Admin withProvider />
</React.StrictMode>,
);
function render() {
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Admin withProvider />
</React.StrictMode>,
);
}
if ("startViewTransition" in document) {
document.startViewTransition(render);
} else {
render();
}
// REGISTER ERROR OVERLAY
const showOverlay = true;

2
app/src/ui/routes/test/index.tsx
View File

@@ -26,9 +26,11 @@ import ReactFlowTest from "./tests/reactflow-test";
import SchemaTest from "./tests/schema-test";
import SortableTest from "./tests/sortable-test";
import { SqlAiTest } from "./tests/sql-ai-test";
import Themes from "./tests/themes";
const tests = {
DropdownTest,
Themes,
ModalTest,
JsonFormTest,
FlowFormTest,

48
app/src/ui/routes/test/tests/themes.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { Button } from "ui/components/buttons/Button";
import { Alert } from "ui/components/display/Alert";
import * as Formy from "ui/components/form/Formy";
export default function Themes() {
return (
<div className="flex flex-col p-3 gap-4">
<div className="flex flex-row gap-2 items-center">
<Button size="small">Small</Button>
<Button>Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
<Button variant="red">Red</Button>
<Button variant="subtlered">Subtlered</Button>
<Button size="large">Large</Button>
</div>
<div className="flex flex-row gap-1">
<Alert.Exception title="Exception">Alert.Exception</Alert.Exception>
<Alert.Info title="Info">Alert.Info</Alert.Info>
<Alert.Success title="Success">Alert.Success</Alert.Success>
<Alert.Warning title="Warning">Alert.Warning</Alert.Warning>
</div>
<div className="flex flex-row gap-3 items-start">
<Formy.Group>
<Formy.Label>Input</Formy.Label>
<Formy.Input placeholder="Input" />
</Formy.Group>
<Formy.Group>
<Formy.Label>Checkbox</Formy.Label>
<Formy.BooleanInput />
</Formy.Group>
<Formy.Group>
<Formy.Label>Switch</Formy.Label>
<Formy.Switch />
</Formy.Group>
<Formy.Group>
<Formy.Label>Select</Formy.Label>
<Formy.Select>
<option value="" />
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</Formy.Select>
</Formy.Group>
</div>
</div>
);
}