fixed styling of handles (#638)

tokens-studio · Jan 16, 2025 · f506756 · f506756
1 parent c2e2e08
commit f506756
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/graph-editor/src/components/flow/handles.module.css b/packages/graph-editor/src/components/flow/handles.module.css
@@ -3,12 +3,18 @@
   display: flex;
   align-items: center;
   padding: var(--component-spacing-2xs) var(--component-spacing-md);
+  margin-bottom: var(--component-spacing-xs);
+
+  &:not(:has(.handleText, span)) {
+    margin-bottom: var(--component-spacing-lg);
+  }
 
   &.collapsed {
     height: 0;
     overflow: hidden;
     position: absolute;
     top: 0;
+    margin-bottom: 0;
   }
 
   &.isAnchor {
@@ -34,7 +40,7 @@
 
 .handleHolder .rawHandle {
   --handle-border-width: var(--component-border-width-lg);
-  --handle-core-size: var(--size-50);
+  --handle-core-size: var(--size-75);
 
   background-color: var(--colors-graphBg);
   position: absolute;

diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.module.css b/packages/graph-editor/src/components/flow/wrapper/nodeV2.module.css
@@ -5,10 +5,10 @@
 
 .inlineTypeLabel {
   position: absolute;
-  background: var(--color-neutral-surface-default-idle-bg);
+  background: rgba(from var(--color-neutral-surface-default-idle-bg) r g b / 0.65);
   color: var(--color-neutral-surface-default-idle-fg-default);
-  padding: var(--component-spacing-2xs);
-  font: var(--font-code-xs);
+  padding: var(--component-spacing-xs) var(--component-spacing-sm) var(--component-spacing-2xs) var(--component-spacing-sm);
+  font: var(--font-code-sm);
   border-radius: var(--component-radii-sm);
   text-transform: uppercase;
 
@@ -21,7 +21,10 @@
   }
 }
 
-
+:global(.ts-theme-dark) .inlineTypeLabel {
+    background: rgba(from var(--color-neutral-surface-default-idle-bg) r g b / 0.8);
+    font-weight: 800;
+}
 
 .colorSwatch {
   width: 16px;

diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
@@ -395,7 +395,7 @@ const InputHandle = observer(
           >
             <span
               style={{
-                font: 'var(--font-code-sm)',
+                font: 'var(--font-code-lg)',
                 color: 'var(--color-neutral-1500)',
               }}
             >