@rogieking/figui3 4.0.0 → 4.1.1

package/base.css

@@ -32,6 +32,7 @@ h3 {
 hr {
   height: 1px;
   border: none;
+  width: 100%;
   background-color: var(--figma-color-border);
   margin: var(--spacer-2) 0;
 

package/components.css

@@ -319,7 +319,7 @@
   );
 
   /* Icons - colorless shapes for use with mask-image */
-  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
   --icon-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
   --icon-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
@@ -481,10 +481,12 @@ input[type="text"][list] {
   display: flex;
   appearance: none;
   align-items: center;
-  flex: 1 0 0;
   border: 0;
   color: var(--figma-color-text);
   background-color: var(--figma-color-bg);
+  background: calc(100% - var(--spacer-1)) 50% / 1rem no-repeat
+    var(--icon-chevron);
+
   box-shadow: inset 0 0 0 1px var(--figma-color-border);
   accent-color: var(--figma-color-bg-brand);
   overflow: hidden;
@@ -696,14 +698,16 @@ select {
 }
 
 /* Dropdown */
+fig-dropdown {
+  & > *:not(select) {
+    display: none !important;
+  }
+}
 fig-dropdown,
+select,
 .fig-dropdown {
   display: inline-flex;
   position: relative;
-
-  & > *:not(select) {
-    display: none !important;
-  }
   > select {
     display: flex;
     align-items: center;
@@ -736,6 +740,7 @@ fig-dropdown,
 
 /* Button */
 .fig-button,
+button,
 fig-button {
   color: var(--figma-color-text-onbrand);
   display: flex;
@@ -1364,10 +1369,9 @@ fig-input-file {
     flex-shrink: 0;
   }
 
-  &[dragover] {
-    outline: 2px dashed var(--figma-color-border-brand);
-    outline-offset: -2px;
-    border-radius: var(--radius-small);
+  &[dragover] fig-button {
+    outline: 1px dashed var(--figma-color-border-brand);
+    outline-offset: -1px;
   }
 }
 
@@ -1890,6 +1894,12 @@ fig-origin-grid {
 }
 
 /* Combo input */
+fig-combo-input {
+  display: inline-flex;
+  flex: 1;
+  min-width: 0;
+}
+
 .input-combo {
   display: inline-flex;
   flex-wrap: nowrap;
@@ -2031,6 +2041,7 @@ input[type="checkbox"].switch:checked:focus {
 /* Checkbox */
 input[type="checkbox"]:not(.switch) {
   contain: strict;
+  vertical-align: middle;
   --size: 1rem;
   appearance: none;
   border-radius: var(--radius-medium);
@@ -2165,11 +2176,7 @@ fieldset {
   padding: var(--spacer-2) 0;
 
   & > legend {
-    margin-top: 0.125rem;
-    font-weight: 500;
-    font-size: 0.625rem;
-    line-height: 0.875rem;
-    color: var(--figma-color-text-secondary);
+    padding: 0;
   }
 
   & > label {
@@ -2183,6 +2190,9 @@ fieldset {
 
 /* Details */
 details {
+  padding: 0 var(--spacer-3);
+  display: block;
+  width: 100%;
   & > summary {
     font-weight: var(--body-medium-strong-fontWeight);
     cursor: default;
@@ -2192,6 +2202,7 @@ details {
     height: var(--spacer-5);
     user-select: none;
     color: var(--figma-color-text-secondary);
+    margin-left: calc(var(--spacer-3) * -1);
 
     &::before {
       content: "";
@@ -3550,171 +3561,6 @@ fig-field,
   }
 }
 
-fig-field-slider {
-  display: block;
-  position: relative;
-  width: 100%;
-  --field-text-shadow: 0 1px 1.5px
-    light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
-
-  label {
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  &[disabled]:not([disabled="false"]) {
-    pointer-events: none;
-
-    label,
-    input {
-      color: var(--figma-color-text-disabled);
-    }
-    fig-slider {
-      filter: grayscale(100%) opacity(0.5);
-    }
-  }
-  &[type="hue"] {
-    label,
-    input {
-      text-shadow: var(--field-text-shadow);
-      color: white;
-    }
-  }
-
-  fig-field {
-    position: relative;
-    padding-left: var(--spacer-2-5);
-
-    &[direction="horizontal"] > label {
-      min-width: 0;
-      max-width: none;
-      width: 100%;
-      flex: 1 1 auto;
-    }
-
-    fig-slider {
-      position: absolute;
-      inset: 0;
-      --slider-height: 2rem;
-      --slider-field-height: 2rem;
-      --slider-thumb-width: var(--spacer-1);
-      --slider-thumb-color: light-dark(
-        var(--figma-color-text-secondary),
-        var(--figma-color-text)
-      );
-      --slider-thumb-height: calc(
-        var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) *
-          min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
-      );
-      --slider-border-radius: var(--radius-medium);
-      --slider-tick-width: 0.125rem;
-      --slider-tick-height: var(--spacer-2);
-      --slider-tick-radius: var(--radius-medium);
-      --slider-stepper-padding: 0;
-      --slider-handle-shadow: inset 0 0 0 var(--slider-thumb-height)
-        var(--slider-thumb-color) !important;
-      --slider-thumb-opacity: calc(
-        min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
-      );
-      --slider-tick-opacity: 1;
-
-      &:has(input[type="range"]:focus-within) {
-        --slider-thumb-outline: 1.5px solid var(--figma-color-border-selected) !important;
-        --slider-thumb-outline-offset: 2px !important;
-      }
-
-      .fig-slider-input-container {
-        box-shadow: none !important;
-        &:hover,
-        &:focus-within {
-          &::after {
-            content: "";
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-            border-radius: var(--slider-border-radius);
-            box-shadow: inset 0 0 0 1px var(--figma-color-border) !important;
-          }
-        }
-        &::before {
-          background: var(--figma-color-bg-tertiary) !important;
-          min-width: 0 !important;
-          box-shadow: none !important;
-        }
-        input[type="range"] {
-          border-radius: 0 !important;
-        }
-      }
-
-      &:not([type="delta"]) .fig-slider-input-container::before {
-        width: var(--slider-percent) !important;
-      }
-
-      &[type="delta"] .fig-slider-input-container::before {
-        --left-start: calc(
-          var(--start-percent) - var(--slider-thumb-width) / 2
-        ) !important;
-        left: min(
-          var(--left-start),
-          calc(
-            var(--slider-percent) - var(--slider-complete) *
-              var(--slider-thumb-width)
-          )
-        ) !important;
-        --width: calc(var(--slider-percent) - var(--start-percent)) !important;
-        --abs-width: max(
-          calc(
-            var(--width) + var(--slider-thumb-width) / 2 +
-              (1 - var(--slider-complete)) * var(--slider-thumb-width)
-          ),
-          calc(
-            -1 * var(--width) + var(--slider-thumb-width) / 2 +
-              var(--slider-complete) * var(--slider-thumb-width)
-          )
-        ) !important;
-        width: var(--abs-width) !important;
-      }
-    }
-    datalist {
-      mask-image: linear-gradient(
-        to right,
-        transparent 0,
-        transparent var(--spacer-4),
-        white,
-        transparent calc(100% - var(--spacer-4)),
-        transparent 100%
-      );
-    }
-    fig-input-number {
-      background-color: transparent;
-      box-shadow: none !important;
-      position: absolute;
-      right: var(--spacer-1);
-      width: fit-content;
-      min-width: fit-content;
-      max-width: max-content;
-      flex: 0 0 auto;
-      border-radius: var(--radius-small);
-
-      &:hover,
-      &:has(input:focus) {
-        box-shadow: none !important;
-      }
-      &:has(input:focus) {
-        box-shadow: inset 0 0 0 1px var(--figma-color-border-selected) !important;
-      }
-      input {
-        field-sizing: content;
-        border-radius: var(--radius-small);
-        width: auto;
-        flex: 0 0 auto;
-        text-align: right;
-        color: var(--field-text-color);
-      }
-    }
-  }
-}
-
 fig-spinner {
   width: 1rem;
   height: 1rem;
@@ -4045,82 +3891,15 @@ fig-joystick {
   }
 }
 
-fig-input-angle {
-  --size: 1.5rem;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacer-2);
-  user-select: none;
-
-  > fig-input-number {
-    flex: 0 0 auto;
-    width: auto;
-  }
-
-  &[full]:not([full="false"]) {
-    display: flex;
-    width: 100%;
-
-    > fig-input-number {
-      flex: 1 1 auto;
-      min-width: 0;
-      width: auto;
-    }
-  }
-
-  /* When inside horizontal fig-field, grow to fill and let inputs expand */
-  fig-field[direction="horizontal"] & {
-    flex: 1;
-    min-width: 0;
-
-    fig-input-number {
-      flex: 0 0 auto;
-      width: auto;
-    }
-  }
-
-  .fig-input-angle-plane {
-    display: inline-grid;
-    place-items: center;
-    width: var(--size);
-    height: var(--size);
-    aspect-ratio: 1/1;
-    flex-shrink: 0;
-    background-color: var(--figma-color-bg-secondary);
-    border-radius: 100%;
-    box-shadow: inset 0 0 0 1px var(--figma-color-border);
-    &:focus,
-    &.dragging {
-      outline: 0;
-      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-    }
-  }
-  .fig-input-angle-handle {
-    display: inline-grid;
-    place-items: center;
-    grid-area: 1/1;
-    width: calc(0.5rem + 2px);
-    height: calc(0.5rem + 2px);
-    &::before {
-      content: "";
-      display: block;
-      width: 0.5rem;
-      height: 0.5rem;
-      background: var(--handle-color);
-      box-shadow: var(--handle-shadow);
-      border-radius: 50%;
-    }
-  }
-}
-
 /* Layer */
 fig-layer {
-  --indent: var(--spacer-2);
+  --indent: var(--spacer-3);
   display: block;
   color: var(--figma-color-text);
   position: relative;
   user-select: none;
   width: 100%;
+  padding: 0 var(--spacer-2);
   border-radius: var(--radius-medium);
 
   /* When layer has children */
@@ -4137,7 +3916,7 @@ fig-layer {
     align-items: center;
     gap: var(--spacer-1);
     padding: var(--spacer-1) var(--spacer-2);
-    margin-left: 0;
+    margin-left: var(--spacer-1);
     height: var(--spacer-4);
     border-radius: var(--radius-medium);
     position: relative;
@@ -4156,7 +3935,7 @@ fig-layer {
       flex-shrink: 0;
       transition: transform 0.15s;
       position: absolute;
-      left: calc(var(--spacer-3) * -1);
+      left: calc(var(--spacer-2-5) * -1);
       top: var(--spacer-1);
       rotate: -90deg;
     }
@@ -4203,8 +3982,11 @@ fig-layer {
 
   /* Nested layers indentation */
   > fig-layer {
-    padding-left: var(--indent);
+    padding: 0;
     margin-top: 1px;
+    .fig-layer-row {
+      padding-left: var(--indent);
+    }
   }
 
   /* Collapsed state - hide children */
@@ -5171,77 +4953,3 @@ fig-color-tip {
     }
   }
 }
-
-/* Canvas Control */
-fig-canvas-control {
-  display: contents;
-  --fig-canvas-control-line-stroke: light-dark(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0.5)
-  );
-  --fig-canvas-control-line-stroke-hover: var(--figma-color-bg-brand);
-  --fig-canvas-control-line-stroke-active: var(--figma-color-bg-brand);
-  --fig-canvas-control-line-stroke-width: 1.25px;
-
-  & > fig-handle,
-  & > fig-tooltip:has(fig-handle:not([size="small"])) {
-    z-index: 1;
-  }
-
-  .fig-canvas-control-radius {
-    position: absolute;
-    pointer-events: none;
-    overflow: visible;
-
-    circle {
-      fill: none;
-      stroke: var(--fig-canvas-control-line-stroke);
-      stroke-width: var(--fig-canvas-control-line-stroke-width);
-      paint-order: stroke fill;
-      filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
-        drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12));
-    }
-
-    .fig-canvas-control-radius-hit {
-      stroke: transparent;
-      stroke-width: 12px;
-      pointer-events: stroke;
-      filter: none;
-
-      &:hover ~ circle {
-        stroke: var(--fig-canvas-control-line-stroke-hover);
-      }
-    }
-  }
-
-  &:has(.fig-canvas-control-radius-hit:hover) .fig-canvas-control-angle-line,
-  &.fig-canvas-control-ring-active .fig-canvas-control-angle-line {
-    stroke: var(--fig-canvas-control-line-stroke-active);
-  }
-
-  &.fig-canvas-control-ring-active
-    .fig-canvas-control-radius
-    circle:not(.fig-canvas-control-radius-hit) {
-    stroke: var(--fig-canvas-control-line-stroke-active);
-  }
-
-  .fig-canvas-control-angle-svg {
-    pointer-events: none;
-  }
-
-  .fig-canvas-control-angle-line {
-    stroke: var(--fig-canvas-control-line-stroke);
-    stroke-width: var(--fig-canvas-control-line-stroke-width);
-    paint-order: stroke fill;
-    filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
-      drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12));
-  }
-
-  fig-handle[size="small"] {
-    z-index: 2;
-
-    .fig-handle-hit-area {
-      cursor: grab;
-    }
-  }
-}