feat: add transparent background to fields (#899)

packages/tailwind-config/index.cjs

@@ -45,6 +45,11 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        'field-card': {
+          DEFAULT: 'hsl(var(--field-card))',
+          border: 'hsl(var(--field-card-border))',
+          foreground: 'hsl(var(--field-card-foreground))',
+        },
         widget: {
           DEFAULT: 'hsl(var(--widget))',
           // foreground: 'hsl(var(--widget-foreground))',

packages/ui/primitives/document-flow/add-fields.tsx

@@ -323,9 +323,9 @@ export const AddFieldsFormPartial = ({
           {selectedField && (
             <Card
               className={cn(
-                'bg-background pointer-events-none fixed z-50 cursor-pointer transition-opacity',
+                'bg-field-card/80 pointer-events-none fixed z-50 cursor-pointer border-2 backdrop-blur-[1px]',
                 {
-                  'border-primary': isFieldWithinBounds,
+                  'border-field-card-border': isFieldWithinBounds,
                   'opacity-50': !isFieldWithinBounds,
                 },
               )}
@@ -336,7 +336,7 @@ export const AddFieldsFormPartial = ({
                 width: fieldBounds.current.width,
               }}
             >
-              <CardContent className="text-foreground flex h-full w-full items-center justify-center p-2">
+              <CardContent className="text-field-card-foreground flex h-full w-full items-center justify-center p-2">
                 {FRIENDLY_FIELD_TYPE[selectedField]}
               </CardContent>
             </Card>

packages/ui/primitives/document-flow/field-item.tsx

@@ -128,24 +128,22 @@ export const FieldItem = ({
       )}
 
       <Card
-        className={cn('bg-background h-full w-full', {
-          'border-primary': !disabled,
-          'border-primary/80': active,
+        className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
+          'border-field-card-border': !disabled,
+          'border-field-card-border/80': active,
         })}
       >
         <CardContent
           className={cn(
-            'text-foreground flex h-full w-full flex-col items-center justify-center p-2',
+            'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
             {
-              'text-muted-foreground/50': disabled,
+              'text-field-card-foreground/50': disabled,
             },
           )}
         >
           {FRIENDLY_FIELD_TYPE[field.type]}
 
-          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
-            {field.signerEmail}
-          </p>
+          <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
         </CardContent>
       </Card>
     </Rnd>,

packages/ui/styles/theme.css

@@ -18,6 +18,10 @@
     --card-border-tint: 112 205 159;
     --card-foreground: 222.2 47.4% 11.2%;
 
+    --field-card: 95 74% 90%;
+    --field-card-border: 95.08 71.08% 67.45%;
+    --field-card-foreground: 222.2 47.4% 11.2%;
+
     --widget: 0 0% 97%;
 
     --border: 214.3 31.8% 91.4%;