@rogieking/figui3 8.9.3 → 8.9.5

package/components.css

@@ -438,6 +438,11 @@
     inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
     inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));
 
+  --fig-popover-shadow:
+    drop-shadow(0px 1px 1.5px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)))
+    drop-shadow(0px 2.5px 6px light-dark(rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0.5)))
+    drop-shadow(0px 0px 0.5px light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)));
+
   --figma-elevation-500-modal-window:
     0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.08), transparent),
     0px 10px 24px 0px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
@@ -1829,7 +1834,7 @@ fig-easing-curve {
   .fig-easing-curve-svg-container {
     border-radius: var(--radius-medium);
     background: var(--figma-color-bg-secondary);
-    padding: var(--spacer-3);
+    padding: 45px;
     overflow: hidden;
     &:is(:hover, :active, :focus, :focus-visible, :focus-within) {
       overflow: visible;
@@ -1867,14 +1872,10 @@ fig-easing-curve {
     fill: transparent;
   }
   .fig-easing-curve-arm {
-    stroke: var(--figma-color-bordertranslucent);
+    stroke: var(--figma-color-border-brand-strong);
     stroke-width: var(--stroke-width);
     stroke-linejoin: round;
     stroke-linecap: round;
-
-    &.is-active {
-      stroke: var(--figma-color-bg-brand);
-    }
   }
   .fig-easing-curve-path {
     fill: none;
@@ -3120,6 +3121,7 @@ dialog[is="fig-popup"] {
   --fig-popup-tip-clip-path: path(
     "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
   );
+  --fig-popup-shadow: var(--figma-elevation-400-menu-panel);
 
   z-index: var(--z-index);
   position: fixed;
@@ -3129,6 +3131,7 @@ dialog[is="fig-popup"] {
   overflow: auto;
   border-radius: var(--fig-popup-radius);
   background-color: var(--fig-popup-bg-color);
+  box-shadow: var(--fig-popup-shadow);
 
   &[autoresize]:not([autoresize="false"]) {
     width: max-content;
@@ -3175,9 +3178,7 @@ dialog[is="fig-popup"] {
   &[variant="popover"] {
     overflow: visible;
     box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
-    filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
-      drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
-      drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
+    filter: var(--fig-popover-shadow);
 
     &:after {
       content: "";
@@ -3225,9 +3226,7 @@ dialog[is="fig-popup"] {
     min-width: 0;
     box-shadow: inset 0 0.5px 0 0
     light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
-    filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
-      drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
-      drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
+    filter: var(--fig-popover-shadow);
     pointer-events: none;
 
     & > span {
@@ -5304,7 +5303,7 @@ fig-handle {
   --fig-handle-hit-area-opacity: 0;
   --fig-handle-hit-area-size: 0;
   --fig-handle-inner-bg: var(--figma-color-bg-brand);
-  --fig-handle-inner-outline: 1px solid var(--figma-color-bg-brand);
+  --fig-handle-inner-outline: 1px solid var(--figma-color-border-selected);
   --fig-handle-inner-shadow: none;
   --fig-handle-inner-radius: 50%;
   --fig-handle-outline: 1.5px solid var(--fig-handle-outline-color);
@@ -5312,7 +5311,7 @@ fig-handle {
   --fig-handle-outline-color: transparent;
   --fig-handle-outline-offset: 0px;
   --fig-handle-padding: 0.25rem;
-  --fig-handle-shadow: none;
+  --fig-handle-shadow: var(--figma-elevation-100-canvas);
   --fig-handle-width: var(--width);
 
   margin: 0;
@@ -5330,7 +5329,6 @@ fig-handle {
   /* Used for active state/color handles */
   &::after {
     content: "";
-    color-scheme: light only;
     width: 100%;
     height: 100%;
     background: var(--fig-handle-inner-bg);
@@ -5409,8 +5407,8 @@ fig-handle {
   &[tip="add"],
   &[tip="remove"] {
     --fig-handle-inner-bg: linear-gradient(var(--fill), var(--fill)), var(--fig-handle-checkerboard);
-    --fig-handle-padding: 0.25rem;
-    --fig-handle-inner-outline: none;
+    --fig-handle-padding: calc(0.25rem - 1px);
+    --fig-handle-inner-outline: transparent;
     position: relative;
     overflow: visible;
 
@@ -5422,6 +5420,18 @@ fig-handle {
       z-index: 10;
     }
   }
+  &[type="minimal"]{
+    --fig-handle-shadow: none;
+    --fig-handle-bg: var(--figma-color-border-brand-strong);
+    --fig-handle-outline: none;
+    --fig-handle-inner-bg: var(--figma-color-bg);
+    --fig-handle-padding: 2px;
+    --fig-handle-inner-outline: transparent;
+    --width: 10px;
+    --height: 10px;
+  }
+
+
   &[disabled]:not([disabled="false"]),
   &[aria-disabled="true"] {
     --fig-handle-outline-color: transparent;
@@ -5464,9 +5474,7 @@ fig-color-tip {
   background-color: var(--figma-color-bg);
   border-radius: var(--radius-medium, 0.3125rem);
   box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
-  filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
-    drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
-    drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
+  filter: var(--fig-popover-shadow);
 
   &[control="add"],
   &[control="remove"] {