mirror of
https://github.com/BerriAI/litellm.git
synced 2026-10-07 02:59:05 +00:00
0e7e640062
* fix(ui): move the policy flow builder onto theme tokens The flow builder carried its own private palette: 126 raw literals across a 1644-line file, hardcoded into React inline style objects and SVG presentation attributes. Inline styles beat every class, so the whole page, its version sidebar, its step cards and its test panel stayed light no matter what the theme said. Each literal now resolves through the token it was already imitating. The greys map onto card, muted, border, muted-foreground and foreground; the indigo and blue accents onto info; the pass, fail and API-failure accents onto success, destructive and warning; and the pale status washes become a color-mix of the same token so they track it in both themes. Six icons carried their colour as an SVG presentation attribute, where custom properties do not substitute, so those switch to currentColor with the token set alongside. Light mode is not byte-identical, and that is the point: the file stops keeping a second palette. Of the mappings, card, muted and border land on the exact same rgb they had, covering most of the file. The rest snap to the dashboard's canonical shade, which mostly means slightly darker text and deeper status colours: the gray-400 labels pick up real contrast, the soft red on the fail icon becomes the destructive red every other failure indicator uses, and the indigo accent becomes the blue that info resolves to. Verified in a browser on both themes. In dark mode nothing on the page paints a light background any more; the six that still do are shadcn's inverted primary buttons and badges, which are meant to. * fix(ui): token the flow builder test textarea fill The quick-chat textarea is the one bare form control left in the file, so the @tailwindcss/forms base layer still paints it `background-color: #fff`. The inline style overrode the plugin's border but not its fill, which left a white box inside the now-dark test panel, and its text inherits the near-white foreground, so the typed message was invisible in dark mode. Pin both halves of the pair on the element the plugin styles: the card token it sits on, and the foreground token it was already inheriting. |
||
|---|---|---|
| .. | ||
| public | ||
| scripts | ||
| src | ||
| tests | ||
| .env.development | ||
| .env.production | ||
| .npmrc | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| build_release_ui.sh | ||
| build_ui.sh | ||
| build_ui_custom_path.sh | ||
| CLAUDE.md | ||
| components.json | ||
| eslint-budgets.json | ||
| eslint-suppressions.json | ||
| eslint.config.mjs | ||
| knip.json | ||
| next.config.mjs | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.tsbuildinfo | ||
| vitest.config.ts | ||
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.