Skip to content

improvement(globals): light colors #2620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emir-karabeg merged 3 commits into from
Dec 28, 2025
Merged

improvement(globals): light colors #2620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f02bf67
improvement(globals): light colors
emir-karabeg Dec 28, 2025
bbf7c01
improvement(ui): logs, templates, kb, light globals
emir-karabeg Dec 28, 2025
e81b280
improvement(subflows): start node and ui/ux
emir-karabeg Dec 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions apps/sim/app/_styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,32 +47,32 @@
@layer base {
:root,
.light {
--bg: #f9faf8; /* main canvas - near white */
--surface-1: #f9faf8; /* sidebar, panels - light warm gray */
--surface-2: #fdfdfb; /* blocks, cards, modals - soft warm white */
--surface-3: #f4f5f1; /* popovers, headers - more contrast */
--surface-4: #f2f3ef; /* buttons base */
--border: #d7dcda; /* primary border */
--surface-5: #f0f1ed; /* inputs, form elements - subtle */
--border-1: #d7dcda; /* stronger border - sage gray */
--surface-6: #eceee9; /* popovers, elevated surfaces */
--surface-7: #e8e9e4;

--workflow-edge: #d7dcda; /* workflow handles/edges - matches border-1 */

/* Text - warm neutrals */
--bg: #fdfdfd; /* main canvas - neutral near-white */
--surface-1: #fcfcfc; /* sidebar, panels */
--surface-2: #ffffff; /* blocks, cards, modals - pure white */
--surface-3: #f7f7f7; /* popovers, headers */
--surface-4: #f5f5f5; /* buttons base */
--border: #e0e0e0; /* primary border */
--surface-5: #f3f3f3; /* inputs, form elements */
--border-1: #e0e0e0; /* stronger border */
--surface-6: #f0f0f0; /* popovers, elevated surfaces */
--surface-7: #ececec;

--workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */

/* Text - neutral */
--text-primary: #2d2d2d;
--text-secondary: #404040;
--text-tertiary: #5c5c5c;
--text-muted: #737373;
--text-subtle: #8c8c8c;
--text-inverse: #f0fff6;
--text-inverse: #ffffff;
--text-error: #ef4444;

/* Borders / dividers */
--divider: #e8e9e4;
--border-muted: #dfe0db;
--border-success: #d7dcda;
--divider: #ededed;
--border-muted: #e4e4e4;
--border-success: #e0e0e0;

/* Brand & state */
--brand-400: #8e4cfb;
Expand Down Expand Up @@ -152,13 +152,13 @@
--c-883827: #7c2d12;

/* Terminal status badges */
--terminal-status-error-bg: #feeeee;
--terminal-status-error-bg: #fef2f2;
--terminal-status-error-border: #f87171;
--terminal-status-info-bg: #f5f5f4;
--terminal-status-info-border: #a8a29e;
--terminal-status-info-color: #57534e;
--terminal-status-warning-bg: #fef9e7;
--terminal-status-warning-border: #f5c842;
--terminal-status-info-bg: #f7f7f7;
--terminal-status-info-border: #a3a3a3;
--terminal-status-info-color: #525252;
--terminal-status-warning-bg: #fefce8;
--terminal-status-warning-border: #facc15;
--terminal-status-warning-color: #a16207;
}
.dark {
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/templates/[id]/template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
<div
className={cn(
'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]',
isWorkspaceContext ? 'overflow-auto' : 'overflow-visible'
isWorkspaceContext ? 'overflow-auto bg-white dark:bg-[var(--bg)]' : 'overflow-visible'
)}
>
{/* Breadcrumb navigation */}
Expand Down Expand Up @@ -638,7 +638,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
<div
className={cn(
'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]',
isWorkspaceContext ? 'overflow-auto' : 'overflow-visible'
isWorkspaceContext ? 'overflow-auto bg-white dark:bg-[var(--bg)]' : 'overflow-visible'
)}
>
{/* Breadcrumb navigation */}
Expand Down
6 changes: 3 additions & 3 deletions apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ function DocumentLoading({
return (
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
<Breadcrumb items={breadcrumbItems} />

<div className='mt-[14px] flex items-center justify-between'>
Expand All @@ -234,7 +234,7 @@ function DocumentLoading({
</div>

<div className='mt-[14px] flex items-center justify-between'>
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-3)] px-[8px] dark:bg-[var(--surface-4)]'>
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
<Input
placeholder='Search chunks...'
Expand Down Expand Up @@ -788,7 +788,7 @@ export function Document({
return (
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
<Breadcrumb items={breadcrumbItems} />

<div className='mt-[14px] flex items-center justify-between'>
Expand Down
6 changes: 3 additions & 3 deletions apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
return (
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
<Breadcrumb items={breadcrumbItems} />

<div className='mt-[14px] flex items-center justify-between'>
Expand All @@ -193,7 +193,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
</div>

<div className='mt-[14px] flex items-center justify-between'>
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-3)] px-[8px] dark:bg-[var(--surface-4)]'>
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
<Input
placeholder='Search documents...'
Expand Down Expand Up @@ -987,7 +987,7 @@ export function KnowledgeBase({
return (
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
<Breadcrumb items={breadcrumbItems} />

<div className='mt-[14px] flex items-center justify-between'>
Expand Down
18 changes: 9 additions & 9 deletions apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,26 +67,26 @@ function formatAbsoluteDate(dateString: string): string {
*/
export function BaseCardSkeleton() {
return (
<div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-4)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-5)]'>
<div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
<div className='flex items-center justify-between gap-[8px]'>
<div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
<div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
<div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div>

<div className='flex flex-1 flex-col gap-[8px]'>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-[6px]'>
<div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-5)]' />
<div className='h-[15px] w-[45px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
<div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-[15px] w-[45px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div>
<div className='h-[15px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
<div className='h-[15px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div>

<div className='h-0 w-full border-[var(--divider)] border-t' />

<div className='flex h-[36px] flex-col gap-[6px]'>
<div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
<div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
<div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div>
</div>
</div>
Expand Down Expand Up @@ -122,7 +122,7 @@ export function BaseCard({ id, title, docCount, description, updatedAt }: BaseCa

return (
<Link href={href} prefetch={true} className='h-full'>
<div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-4)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-5)]'>
<div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
<div className='flex items-center justify-between gap-[8px]'>
<h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
{title}
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export function Knowledge() {
<>
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[28px] pb-[24px]'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[28px] pb-[24px] dark:bg-[var(--bg)]'>
<div>
<div className='flex items-start gap-[12px]'>
<div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#5BB377] bg-[#E8F7EE] dark:border-[#1E5A3E] dark:bg-[#0F3D2C]'>
Expand Down
6 changes: 5 additions & 1 deletion apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,9 @@
* Knowledge Base layout - applies sidebar padding for all knowledge routes.
*/
export default function KnowledgeLayout({ children }: { children: React.ReactNode }) {
return <div className='flex h-full flex-1 flex-col overflow-hidden pl-60'>{children}</div>
return (
<div className='flex h-full flex-1 flex-col overflow-hidden pl-[var(--sidebar-width)]'>
{children}
</div>
)
}
8 changes: 4 additions & 4 deletions ...pace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ export function WorkflowsList({
const { workflows } = useWorkflowRegistry()

return (
<div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-1)]'>
<div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
{/* Table header */}
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px]'>
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
<div className='flex items-center gap-[16px]'>
<span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
Workflow
Expand Down Expand Up @@ -66,8 +66,8 @@ export function WorkflowsList({
<div
key={workflow.workflowId}
className={cn(
'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-4)]',
isSelected && 'bg-[var(--surface-6)] dark:bg-[var(--surface-4)]'
'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-4)]',
isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
)}
onClick={() => onToggleWorkflow(workflow.workflowId)}
>
Expand Down
28 changes: 14 additions & 14 deletions apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ const SKELETON_BAR_HEIGHTS = [

function GraphCardSkeleton({ title }: { title: string }) {
return (
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
{title}
</span>
<Skeleton className='h-[20px] w-[40px]' />
</div>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-1)] px-[14px] py-[10px]'>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
<div className='flex h-[166px] flex-col justify-end gap-[4px]'>
<div className='flex items-end gap-[2px]'>
{SKELETON_BAR_HEIGHTS.map((height, i) => (
Expand Down Expand Up @@ -81,8 +81,8 @@ function WorkflowRowSkeleton() {

function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) {
return (
<div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-1)]'>
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px]'>
<div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
<div className='flex items-center gap-[16px]'>
<span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
Workflow
Expand Down Expand Up @@ -570,8 +570,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
<div className='mt-[24px] flex min-h-0 flex-1 flex-col pb-[24px]'>
<div className='mb-[16px] flex-shrink-0'>
<div className='grid grid-cols-1 gap-[16px] md:grid-cols-3'>
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Runs
</span>
Expand All @@ -581,7 +581,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span>
)}
</div>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-1)] px-[14px] py-[10px]'>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
{globalDetails ? (
<LineChart
data={globalDetails.executionCounts}
Expand All @@ -597,8 +597,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</div>
</div>

<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Errors
</span>
Expand All @@ -608,7 +608,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span>
)}
</div>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-1)] px-[14px] py-[10px]'>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
{globalDetails ? (
<LineChart
data={globalDetails.failureCounts}
Expand All @@ -624,8 +624,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</div>
</div>

<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Latency
</span>
Expand All @@ -635,7 +635,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span>
)}
</div>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-1)] px-[14px] py-[10px]'>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
{globalDetails ? (
<LineChart
data={globalDetails.latencies}
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ const LogRow = memo(
<div
ref={isSelected ? selectedRowRef : null}
className={cn(
'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-4)]',
isSelected && 'bg-[var(--surface-4)]'
'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-4)]',
isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
)}
onClick={handleClick}
>
Expand Down
4 changes: 2 additions & 2 deletions ...sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export function AutocompleteSearch({
}}
>
<PopoverAnchor asChild>
<div className='relative flex h-[32px] w-[400px] items-center rounded-[8px] bg-[var(--surface-4)]'>
<div className='relative flex h-[32px] w-[400px] items-center rounded-[8px] bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'>
{/* Search Icon */}
<Search className='mr-[6px] ml-[8px] h-[14px] w-[14px] flex-shrink-0 text-[var(--text-subtle)]' />

Expand All @@ -179,7 +179,7 @@ export function AutocompleteSearch({
className={cn(
'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]',
highlightedBadgeIndex === index &&
'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-5)]'
'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-3)] dark:ring-offset-[var(--surface-5)]'
)}
onClick={() => removeBadge(index)}
onKeyDown={(e) => {
Expand Down
Loading