css

Author: mykalmax

web/common/src/components/Lineage/node/NodeBase.tsx

@@ -16,7 +16,7 @@ export const NodeBase = React.memo(
         <BaseNode
           data-component="BaseNode"
           className={cn(
-            'bg-lineage-node-background text-lineage-node-foreground bg-[white]',
+            'bg-lineage-node-background text-lineage-node-foreground',
             'h-full flex flex-col flex-1 justify-center flex-shrink-0 rounded-md',
             className,
           )}

web/common/src/components/Lineage/stories/Lineage.stories.tsx

@@ -63,6 +63,15 @@ export const LineageModel = () => {
           --color-lineage-model-column-active: rgba(70, 0, 0, 0.1);
           --color-lineage-model-column-icon: rgba(0, 0, 0, 1);
           --color-lineage-model-column-icon-active: rgba(0, 0, 0, 1);
+
+
+          --color-input-background: var(--vscode-input-background)!;
+          --color-input-foreground: var(--vscode-input-foreground)!;
+          --color-input-placeholder: var(--vscode-input-placeholderForeground)!;
+          --color-input-border: var(--vscode-input-border)!;
+
+          --color-filterable-list-counter-background: rgba(200, 0, 0, 1);
+          --color-filterable-list-counter-foreground: rgba(200, 0, 0, 1);
         }
       `}</style>
       <ModelLineage

web/common/src/components/VirtualList/FilterableList.css

@@ -0,0 +1,4 @@
+:root {
+  --color-filterable-list-counter-background: var(--color-badge-background);
+  --color-filterable-list-counter-foreground: var(--color-badge-foreground);
+}

web/common/src/components/VirtualList/FilterableList.tsx

@@ -8,6 +8,8 @@ import { cn } from '@/utils'
 import { MessageContainer } from '../MessageContainer/MessageContainer'
 import { Input } from '../Input/Input'
 
+import './FilterableList.css'
+
 export interface FilterableListProps<TItem> {
   items: TItem[]
   filterOptions?: IFuseOptions<TItem>
@@ -83,7 +85,10 @@ function Counter({
   return (
     <Badge
       size="2xs"
-      className={cn('flex items-center gap-1 h-full', className)}
+      className={cn(
+        'flex items-center gap-1 h-full bg-filterable-list-counter-background text-filterable-list-counter-foreground',
+        className,
+      )}
     >
       {itemsLength !== filteredItemsLength && (
         <>

web/common/tailwind.base.config.js

@@ -76,6 +76,12 @@ export default {
           background: 'var(--color-badge-background)',
           foreground: 'var(--color-badge-foreground)',
         },
+        'filterable-list': {
+          counter: {
+            background: 'var(--color-filterable-list-counter-background)',
+            foreground: 'var(--color-filterable-list-counter-foreground)',
+          },
+        },
         input: {
           'background-lucid': 'var(--color-input-background-lucid)',
           background: 'var(--color-input-background)',