mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-31 05:19:53 +00:00
e7745eb2be
## Summary Replace color/dark-color pairs in components with design tokens to allow for easy overriding. <!-- Also standardizes the icon pattern to simplify the tailwind config. --> ## Changes - **What**: Token based colors, for now, mostly. - **Breaking**: Got approval from Design to collapse some very similar pairs of colors that seem to have diverged in implementations over time. Some of the colors might be a little different, but we can tweak them later. ## Review Focus Still have quite a few places from which to remove `dark-theme`, but this at least gets the theming much closer. Need to decide if I want to keep going in here or cut this and do the rest in a subsequent PR. ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5908-WIP-Make-components-themeable-2816d73d365081ffbc05d189fe71084b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const props = defineProps<{
|
|
nodeTitle: string
|
|
widgetName: string
|
|
isShown?: boolean
|
|
isDraggable?: boolean
|
|
}>()
|
|
defineEmits<{
|
|
(e: 'toggleVisibility'): void
|
|
}>()
|
|
|
|
function classes() {
|
|
return cn(
|
|
'flex py-1 pr-4 pl-0 break-all rounded items-center gap-1',
|
|
'bg-node-component-surface',
|
|
props.isDraggable
|
|
? 'drag-handle cursor-grab [.is-draggable]:cursor-grabbing'
|
|
: ''
|
|
)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div :class="classes()">
|
|
<div
|
|
:class="
|
|
cn(
|
|
'size-4 pointer-events-none',
|
|
isDraggable ? 'icon-[lucide--grip-vertical]' : ''
|
|
)
|
|
"
|
|
/>
|
|
<div class="flex-1 pointer-events-none">
|
|
<div class="text-slate-100 text-[10px]">{{ nodeTitle }}</div>
|
|
<div class="text-xs">{{ widgetName }}</div>
|
|
</div>
|
|
<Button
|
|
size="small"
|
|
text
|
|
:icon="isDraggable ? 'icon-[lucide--eye]' : 'icon-[lucide--eye-off]'"
|
|
severity="secondary"
|
|
@click.stop="$emit('toggleVisibility')"
|
|
/>
|
|
</div>
|
|
</template>
|