mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-24 16:54:03 +00:00
[style] match widget border/outline styles with designs (#6021)
## Summary Use semantic color variables from https://github.com/Comfy-Org/ComfyUI_frontend/pull/6018 on widget borders to match [design](https://www.figma.com/design/vALUV83vIdBzEsTJAhQgXq/Comfy-Design-System?node-id=2-5739&m=dev) The layouting of the widgets doesn't align yet, but it's somewhat annoying to change the `WidgetSelect` height without using line height. But, the gap should be 4 (16px) instead of 2, the height of the rows should be 35px instead of 30px and the widgets should be 32px instead of 30px. ## Before <img width="2061" height="1386" alt="Screenshot from 2025-10-11 12-23-24" src="https://github.com/user-attachments/assets/5aa7ba1e-9309-4bd5-95b4-8d8e3d95b50b" /> <img width="2061" height="1386" alt="Screenshot from 2025-10-11 12-23-16" src="https://github.com/user-attachments/assets/9dbabd1b-2174-4dfd-83c2-fef8178c7206" /> ## After <img width="2061" height="1386" alt="Screenshot from 2025-10-11 12-23-06" src="https://github.com/user-attachments/assets/d0b0a611-e65b-462f-ad94-c42639502951" /> <img width="2061" height="1386" alt="Screenshot from 2025-10-11 12-22-57" src="https://github.com/user-attachments/assets/64fb42c8-3d9a-4a2b-956f-482fcd63b64c" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6021-style-match-widget-border-outline-styles-with-designs-2896d73d365081d18dd9cca41cc2b95e) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
@@ -113,7 +113,7 @@ const buttonTooltip = computed(() => {
|
||||
<style scoped>
|
||||
:deep(.p-inputnumber-input) {
|
||||
background-color: transparent;
|
||||
border: 1px solid color-mix(in oklab, #d4d4d8 10%, transparent);
|
||||
border: 1px solid var(--node-stroke);
|
||||
border-top: transparent;
|
||||
border-bottom: transparent;
|
||||
height: 1.625rem;
|
||||
|
||||
@@ -6,7 +6,7 @@ export const WidgetInputBaseClass = cn([
|
||||
'text-node-component-widget-input',
|
||||
// Outline
|
||||
'border-none',
|
||||
'outline outline-offset-[-1px] outline-zinc-300/10',
|
||||
'outline outline-offset-[-1px] outline-node-stroke',
|
||||
// Rounded
|
||||
'rounded-lg',
|
||||
// Hover
|
||||
|
||||
Reference in New Issue
Block a user