extra styling

Author: mykalmax

web/common/src/components/Input/Input.css

@@ -0,0 +1,7 @@
+:root {
+  --color-input-background: var(--color-light);
+  --color-input-background-translucid: var(--color-neutral-5);
+  --color-input-foreground: var(--color-prose);
+  --color-input-placeholder: var(--color-neutral-400);
+  --color-input-border: var(--color-neutral-300);
+}

web/common/src/components/Input/Input.tsx

@@ -3,6 +3,8 @@ import { cn } from '@/utils'
 import type { Size } from '@/types'
 import { cva } from 'class-variance-authority'
 
+import './Input.css'
+
 export interface InputProps extends React.ComponentProps<'input'> {
   inputSize?: Size
 }
@@ -15,9 +17,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         className={cn(
           inputVariants({ size: inputSize }),
           'border items-center border-input-border bg-input-background text-input-foreground transition-colors placeholder:text-input-placeholder',
-          'file:border-0 file:h-fit file:bg-background-lucid file:rounded-sm file:flex-col file:mt-0.5',
+          'file:border-0 file:h-fit file:bg-background-translucid file:rounded-sm file:flex-col file:mt-0.5',
           type === 'file' &&
-            'bg-input-background-lucid border-[transparent] pl-1',
+            'bg-input-background-translucid border-[transparent] pl-1',
           className,
         )}
         ref={ref}

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

@@ -64,14 +64,8 @@ export const LineageModel = () => {
           --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);
+          --color-filterable-list-counter-foreground: rgba(200, 200, 200, 1);
         }
       `}</style>
       <ModelLineage

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

@@ -16,7 +16,6 @@ import { NodeAppendix } from '../node/NodeAppendix'
 import { NodeBadge } from '../node/NodeBadge'
 import { NodeBase } from '../node/NodeBase'
 import { NodeContainer } from '../node/NodeContainer'
-import { NodeDivider } from '../node/NodeDivider'
 import { NodeHandleIcon } from '../node/NodeHandleIcon'
 import { NodeHandles } from '../node/NodeHandles'
 import { NodeHeader } from '../node/NodeHeader'
@@ -40,7 +39,6 @@ import {
 import { Tooltip } from '@/components/Tooltip/Tooltip'
 import type { ColumnLevelLineageAdjacencyList } from '../LineageColumnLevel/ColumnLevelLineageContext'
 import { ModelName } from '@/components/ModelName/ModelName'
-import { Metadata } from '@/components/Metadata/Metadata'
 import { Badge } from '@/components/Badge/Badge'
 import { NodePorts } from '../node/NodePorts'
 
@@ -331,26 +329,3 @@ export const ModelNode = React.memo(function ModelNode({
     </NodeContainer>
   )
 })
-
-export function NodeDetail({
-  label,
-  value,
-  hasDivider = true,
-  className,
-}: {
-  label: string
-  value: string
-  hasDivider?: boolean
-  className?: string
-}) {
-  return (
-    <>
-      {hasDivider && <NodeDivider />}
-      <Metadata
-        label={label}
-        value={value}
-        className={cn('px-2 text-xs shrink-0 h-6', className)}
-      />
-    </>
-  )
-}

web/common/src/components/MessageContainer/MessageContainer.css

@@ -0,0 +1,3 @@
+:root {
+  --color-message-translucid: var(--color-neutral-3);
+}

web/common/src/components/MessageContainer/MessageContainer.tsx

@@ -2,6 +2,8 @@ import { cn } from '@/utils'
 import { LoadingContainer } from '../LoadingContainer/LoadingContainer'
 import { HorizontalContainer } from '../HorizontalContainer/HorizontalContainer'
 
+import './MessageContainer.css'
+
 export interface MessageContainerProps {
   children: React.ReactNode
   className?: string
@@ -19,7 +21,7 @@ export function MessageContainer({
     <HorizontalContainer
       data-component="MessageContainer"
       className={cn(
-        'h-auto justify-center items-center p-4 bg-message-lucid rounded-2xl',
+        'h-auto justify-center items-center p-4 bg-message-translucid rounded-2xl',
         className,
       )}
     >

web/common/src/components/Metadata/Metadata.css

@@ -0,0 +1,4 @@
+:root {
+  --color-metadata-label: var(--color-neutral-600);
+  --color-metadata-value: var(--color-prose);
+}

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

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

web/common/src/styles/design/semantic-colors.css

@@ -68,14 +68,4 @@
   --color-typography-tagline: var(--color-neutral-600);
   --color-typography-description: var(--color-neutral-500);
   --color-typography-info: var(--color-typography-tagline);
-
-  /* Message */
-  --color-message-lucid: var(--color-neutral-3);
-
-  /* Input */
-  --color-input-background: var(--color-light);
-  --color-input-background-lucid: var(--color-neutral-5);
-  --color-input-foreground: var(--color-prose);
-  --color-input-placeholder: var(--color-neutral-400);
-  --color-input-border: var(--color-neutral-300);
 }

web/common/tailwind.base.config.js

@@ -47,7 +47,7 @@ export default {
           info: 'var(--color-typography-info)',
         },
         message: {
-          lucid: 'var(--color-message-lucid)',
+          lucid: 'var(--color-message-translucid)',
         },
         link: {
           underline: 'var(--color-link-underline)',
@@ -81,6 +81,12 @@ export default {
             background: 'var(--color-filterable-list-counter-background)',
             foreground: 'var(--color-filterable-list-counter-foreground)',
           },
+          input: {
+            background: 'var(--color-filterable-list-input-background)',
+            foreground: 'var(--color-filterable-list-input-foreground)',
+            placeholder: 'var(--color-filterable-list-input-placeholder)',
+            border: 'var(--color-filterable-list-input-border)',
+          },
         },
         input: {
           'background-lucid': 'var(--color-input-background-lucid)',
@@ -131,6 +137,10 @@ export default {
           background: 'var(--color-tooltip-background)',
           foreground: 'var(--color-tooltip-foreground)',
         },
+        metadata: {
+          label: 'var(--color-metadata-label)',
+          value: 'var(--color-metadata-value)',
+        },
       },
       borderRadius: {
         '2xs': 'var(--radius-xs)',