mirror of
https://github.com/langgenius/dify.git
synced 2026-09-08 11:04:27 +08:00
0e320290e1
Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: jyong <718720800@qq.com> Co-authored-by: Yansong Zhang <916125788@qq.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: hj24 <mambahj24@gmail.com> Co-authored-by: hj24 <huangjian@dify.ai> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Stephen Zhou <38493346+hyoban@users.noreply.github.com> Co-authored-by: CodingOnStar <hanxujiang@dify.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: 非法操作 <hjlarry@163.com> Co-authored-by: Ayush Baluni <73417844+aayushbaluni@users.noreply.github.com> Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com> Co-authored-by: jimcody1995 <jjimcody@gmail.com> Co-authored-by: James <63717587+jamesrayammons@users.noreply.github.com> Co-authored-by: Yunlu Wen <yunlu.wen@dify.ai> Co-authored-by: Stephen Zhou <hi@hyoban.cc> Co-authored-by: Coding On Star <447357187@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: jerryzai <jerryzh8710@protonmail.com> Co-authored-by: NVIDIAN <speedy.hpc@hotmail.com> Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com> Co-authored-by: Asuka Minato <i@asukaminato.eu.org> Co-authored-by: Junghwan <70629228+shaun0927@users.noreply.github.com> Co-authored-by: HeYinKazune <70251095+HeYin-OS@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: yyh <yuanyouhuilyz@gmail.com> Co-authored-by: Jingyi <jingyi.qi@dify.ai> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: sxxtony <166789813+sxxtony@users.noreply.github.com>
28 lines
1.6 KiB
Markdown
28 lines
1.6 KiB
Markdown
# @langgenius/dify-ui
|
|
|
|
This package provides shared design tokens (colors, shadows, typography), the `cn()` utility, and a Tailwind CSS preset consumed by `web/`.
|
|
|
|
## Border Radius: Figma Token → Tailwind Class Mapping
|
|
|
|
The Figma design system uses `--radius/*` tokens whose scale is **offset by one step** from Tailwind CSS v4 defaults. When translating Figma specs to code, always use this mapping — never use `radius-*` as a CSS class, and never extend `borderRadius` in the preset.
|
|
|
|
| Figma Token | Value | Tailwind Class |
|
|
| --------------- | ----- | ---------------- |
|
|
| `--radius/2xs` | 2px | `rounded-xs` |
|
|
| `--radius/xs` | 4px | `rounded-sm` |
|
|
| `--radius/sm` | 6px | `rounded-md` |
|
|
| `--radius/md` | 8px | `rounded-lg` |
|
|
| `--radius/lg` | 10px | `rounded-[10px]` |
|
|
| `--radius/xl` | 12px | `rounded-xl` |
|
|
| `--radius/2xl` | 16px | `rounded-2xl` |
|
|
| `--radius/3xl` | 20px | `rounded-[20px]` |
|
|
| `--radius/6xl` | 28px | `rounded-[28px]` |
|
|
| `--radius/full` | 999px | `rounded-full` |
|
|
|
|
### Rules
|
|
|
|
- **Do not** add custom `borderRadius` values to `tailwind-preset.ts`. We use Tailwind v4 defaults and arbitrary values (`rounded-[Npx]`) for sizes without a standard equivalent.
|
|
- **Do not** use `radius-*` as CSS class names. The old `@utility radius-*` definitions have been removed.
|
|
- When the Figma MCP returns `rounded-[var(--radius/sm, 6px)]`, convert it to the standard Tailwind class from the table above (e.g. `rounded-md`).
|
|
- For values without a standard Tailwind equivalent (10px, 20px, 28px), use arbitrary values like `rounded-[10px]`.
|