@rogieking/figui3 6.4.0 → 6.4.2

package/components.css

@@ -4785,6 +4785,7 @@ fig-handle {
   --fig-handle-inner-shadow: none;
   --fig-handle-inner-radius: 50%;
   --fig-handle-outline: 1.5px solid var(--fig-handle-outline-color);
+  --fig-handle-inner-outline-offset: 0px;
   --fig-handle-outline-color: transparent;
   --fig-handle-outline-offset: 0px;
   --fig-handle-padding: 0.25rem;
@@ -4815,6 +4816,7 @@ fig-handle {
     border-radius: var(--fig-handle-inner-radius);
     box-shadow: var(--fig-handle-inner-shadow);
     outline: var(--fig-handle-inner-outline);
+    outline-offset: var(--fig-handle-inner-outline-offset);
     place-self: center;
     grid-area: 1 / 1;
     z-index: 2;
@@ -4828,6 +4830,8 @@ fig-handle {
 
   &[drag]:not([drag="false"]) {
     position: absolute;
+    translate: var(--fig-handle-position-translate, none);
+    transform-origin: center;
     touch-action: none;
   }
   &:hover,
@@ -4843,12 +4847,26 @@ fig-handle {
   }
 
   &[type="canvas"]{
+    --width: 0.5rem;
+    --height: 0.5rem;
     --fig-handle-inner-bg: transparent;
-    --fig-handle-inner-outline: none;
-    --fig-handle-outline-color: var(--figma-color-border-selected);
+    --fig-handle-outline-color: transparent;
+    --fig-handle-shadow: none;
+    --fig-handle-inner-outline: 1px solid var(--figma-color-border-selected);
+    --fig-handle-padding: 1px;
+    --fig-handle-inner-outline-offset: -1px;
     &:hover,
     &[selected]:not([selected="false"]){
-      --fig-handle-outline: 3px solid var(--figma-color-border-selected);
+      --width: 0.75rem;
+      --height: 0.75rem;
+      --fig-handle-outline-color: transparent;
+      --fig-handle-inner-outline: 2px solid var(--figma-color-border-selected);
+      --fig-handle-inner-outline-offset: -2px;
+      --fig-handle-shadow: var(--figma-elevation-200-canvas);
+    }
+    &[selected]:not([selected="false"]){
+      --fig-handle-padding: 2px;
+      --fig-handle-inner-bg: var(--figma-color-bg-brand);
     }
   }
   &[type="color"],

package/dist/base.css

@@ -1 +1 @@
-html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing)}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem;&:last-child{margin-bottom:0}}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}
+html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing)}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none}hr[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem}p:last-child{margin-bottom:0}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}a{color:var(--figma-color-text-brand);text-decoration:none}a:hover{text-decoration:underline}