Merge branch 'feature/adding-light-mode' into feature/better-style

Author: ErwanDecoster

src/components/navbar/AddressChip.tsx

@@ -40,7 +40,7 @@ export function AddressChip({ address }: { address: string }) {
       <Tooltip open={showTooltip}>
         <TooltipTrigger asChild>
           <Button
-            className="dark:bg-popover bg-brand-foreground hover:bg-muted text-primary dark:text-brand duration-300"
+            className="dark:bg-popover bg-primary-foreground hover:bg-muted text-primary dark:text-brand duration-300"
             variant="secondary"
             onClick={handleCopy}
             onMouseEnter={handleMouseEnter}

src/components/ui/input.tsx

@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         'focus-visible:border-ring',
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         className

src/index.css

@@ -219,7 +219,7 @@
   --tooltip-border: var(--color-grey-700);
 
   --brand: var(--color-yellow-300);
-  --brand-foreground: var(--primary-foreground);
+  --brand-foreground: var(--color-grey-900);
 
   --primary: #183ee9;
   --primary-foreground: #f4f7fc;
@@ -228,7 +228,7 @@
   --secondary-foreground: oklch(0.205 0 0);
 
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: var(--color-grey-500);
 
   --intermediate: var(--color-grey-200);
   --intermediate-foreground: var(--color-grey-500);
@@ -239,7 +239,7 @@
   --destructive: var(--color-red-400);
   --border: var(--color-grey-200);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: var(--color-primary);
 }
 
 .dark {

src/modules/datasets/SchemaSearch.tsx

@@ -73,7 +73,7 @@ export function SchemaSearch({
             : 'translate-y-2 grid-rows-[0fr]'
         )}
       >
-        <div className={cn('text-grey-200 grid overflow-hidden px-6 md:px-10')}>
+        <div className={cn('grid overflow-hidden px-6 md:px-10')}>
           <hr className="border-secondary" />
           <div
             className={cn(
@@ -84,7 +84,9 @@ export function SchemaSearch({
             )}
           >
             <div className="flex flex-wrap items-center gap-2.5 overflow-hidden">
-              Filter by field types:{' '}
+              <span className="text-muted-foreground">
+                Filter by field types:
+              </span>{' '}
               {filters.map((schema, index) => {
                 const borderColor = borderTypeColor.find((color) =>
                   color.keywords.some((keyword) =>