@rogieking/figui3 8.10.1 → 8.11.0

package/fig-lab.css

@@ -223,6 +223,8 @@ fig-chat-message {
   propskit-fill,
   propskit-gradient,
   propskit-palette,
+  propskit-image,
+  propskit-editable-select,
   propskit-select,
   propskit-easing,
   propskit-text,
@@ -403,6 +405,8 @@ fig-content:has(> propskit-group[name]:last-child) {
   propskit-color,
   propskit-fill,
   propskit-gradient,
+  propskit-image,
+  propskit-editable-select,
   propskit-select,
   propskit-easing,
   propskit-text,
@@ -1276,6 +1280,142 @@ propskit-select {
   }
 }
 
+propskit-editable-select {
+  --propskit-editable-select-height: 2rem;
+  --propskit-editable-select-gap: var(--spacer-1);
+  --propskit-editable-select-control-padding-inline: var(--spacer-1);
+  --_propskit-padding-block: var(
+    --propskit-editable-select-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-editable-select-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-editable-select-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-editable-select-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-editable-select-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-editable-select-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-editable-select-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-editable-select-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --figma-focus-outline-offset: 1px;
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(
+    var(--propskit-editable-select-height) + var(--_propskit-padding-block) * 2
+  );
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
+
+  .propskit-editable-select-surface {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--propskit-editable-select-gap);
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--propskit-editable-select-height);
+    padding-block: var(--spacer-1);
+    padding-inline: 0 var(--spacer-1);
+    padding-inline-start: var(--propskit-editable-select-control-padding-inline);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
+    outline: none;
+
+    &:focus-within {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border: var(--_propskit-border);
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
+    }
+
+    & > fig-select {
+      flex: 0 1 auto;
+      width: auto;
+      max-width: 100%;
+      min-width: 0;
+      margin-inline-end: auto;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    & > fig-input-text {
+      flex: 1 1 0 !important;
+      align-self: center;
+      align-items: center;
+      width: auto !important;
+      min-width: 0;
+      min-height: var(--control-height);
+      margin-inline-end: auto;
+      background-color: transparent;
+      box-shadow: none;
+      outline: none !important;
+
+      & > input[type="text"] {
+        box-sizing: border-box;
+        height: 100%;
+      }
+    }
+  }
+
+  fig-select {
+    --fig-select-trigger-width: 100%;
+
+    &::after {
+      right: calc(0.25rem + var(--spacer-1));
+    }
+
+    &::part(trigger) {
+      outline: none;
+    }
+
+    &::part(label) {
+      text-align: left;
+    }
+  }
+}
+
 propskit-text {
   --propskit-text-height: 2rem;
   --_propskit-padding-block: var(
@@ -2890,7 +3030,53 @@ propskit-spring {
   );
 }
 
-:is(propskit-origin, propskit-easing, propskit-spring) {
+propskit-image {
+  --_propskit-padding-block: var(
+    --propskit-image-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-image-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-image-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-image-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-image-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-image-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-image-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-image-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-image-label-inline-size,
+    var(--propskit-label-inline-size, 100%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-image-input-inline-size,
+    var(--propskit-input-inline-size, 100%)
+  );
+}
+
+:is(propskit-origin, propskit-easing, propskit-spring, propskit-image) {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -2900,7 +3086,8 @@ propskit-spring {
   & > :is(
     .propskit-origin-surface,
     .propskit-easing-surface,
-    .propskit-spring-surface
+    .propskit-spring-surface,
+    .propskit-image-surface
   ) {
     position: relative;
     display: flex;
@@ -2951,7 +3138,8 @@ propskit-spring {
   &[variant="minimal"] > :is(
     .propskit-origin-surface,
     .propskit-easing-surface,
-    .propskit-spring-surface
+    .propskit-spring-surface,
+    .propskit-image-surface
   ) {
     background: transparent;
   }
@@ -2960,7 +3148,8 @@ propskit-spring {
     & > :is(
       .propskit-origin-surface,
       .propskit-easing-surface,
-      .propskit-spring-surface
+      .propskit-spring-surface,
+      .propskit-image-surface
     ) {
       color: var(--figma-color-text-disabled);
     }
@@ -2972,6 +3161,117 @@ propskit-spring {
   }
 }
 
+propskit-image {
+  .propskit-image-header {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    width: 100%;
+    min-width: 0;
+    min-height: var(--control-height);
+
+    & > label {
+      display: block;
+      flex: 1 1 auto;
+      width: var(--_propskit-label-inline-size);
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      padding-inline-start: calc(var(--spacer-2-5) - var(--spacer-2));
+      transform: translateY(calc(-1 * var(--spacer-1)));
+      overflow: hidden;
+      color: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+  }
+
+  .propskit-image-upload-tooltip {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+  }
+
+  .propskit-image-upload {
+    flex: 0 0 auto;
+  }
+
+  .propskit-image-chooser {
+    --fig-chooser-inline-margin: 0px;
+
+    position: relative;
+    z-index: 1;
+    align-self: flex-end;
+    width: var(--_propskit-input-inline-size);
+    max-width: none;
+    max-height: 15rem;
+    margin: calc(-1 * var(--spacer-1)) 0;
+    margin-top: calc(-1 * var(--spacer-2));
+    padding: 0 var(--spacer-1);
+
+    &[hidden] {
+      display: none;
+    }
+
+    & > .fig-overflow::before {
+      background: var(--figma-color-bg-secondary) !important;
+    }
+  }
+
+  fig-choice {
+    --fig-choice-border-radius: var(--radius-medium);
+
+    position: relative;
+    min-width: 0;
+  }
+
+  .propskit-image-remove {
+    display: flex;
+    position: absolute;
+    z-index: 3;
+    top: var(--spacer-1);
+    right: var(--spacer-1);
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border-radius: var(--radius-medium);
+    opacity: 0;
+    pointer-events: none;
+    color: var(--figma-color-text);
+    color-scheme: light;
+    background-color: var(--figma-color-bg);
+    box-shadow: 0 0 0 1px var(--figma-color-bordertranslucent);
+
+    &:active {
+      background-color: var(--figma-color-bg-secondary);
+    }
+  }
+
+  fig-choice:hover .propskit-image-remove {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  fig-image {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    gap: 0;
+    border-radius: var(--radius-medium);
+
+    & > fig-preview {
+      min-height: 0;
+      border-radius: var(--radius-medium);
+    }
+  }
+}
+
 propskit-origin {
   fig-origin-grid {
     --figma-color-border: var(
@@ -3019,6 +3319,13 @@ propskit-origin {
         var(--figma-color-bordertranslucent)
       );
     }
+
+    fig-handle::after {
+      --fig-handle-inner-bg: light-dark(
+        #ffffff,
+        var(--figma-color-bg-secondary)
+      );
+    }
   }
 }
 
@@ -3038,6 +3345,46 @@ propskit-origin {
   }
 }
 
+:is(
+  propskit-switch,
+  propskit-color,
+  propskit-fill,
+  propskit-gradient,
+  propskit-palette,
+  propskit-image,
+  propskit-editable-select,
+  propskit-select,
+  propskit-easing,
+  propskit-text,
+  propskit-number,
+  propskit-origin,
+  propskit-position,
+  propskit-joystick,
+  propskit-spring,
+  propskit-color-point,
+  propskit-point-radius,
+  propskit-point-radius-angle,
+  propskit-point-point,
+  propskit-group,
+  propskit-slider,
+  propskit-wheel,
+  propskit-oscillator
+) fig-button[variant="secondary"] {
+  background-color: var(
+    --propskit-bg-subfield,
+    rgba(255, 255, 255, 0.05)
+  );
+  box-shadow: none;
+
+  &:hover:not([disabled]):not([disabled="false"]),
+  &[disabled]:not([disabled="false"]) {
+    background-color: var(
+      --propskit-bg-subfield,
+      rgba(255, 255, 255, 0.05)
+    );
+  }
+}
+
 :is(
   propskit-number,
   propskit-position,
@@ -3047,7 +3394,7 @@ propskit-origin {
   background-color: var(--figma-color-bg);
 }
 
-propskit-text
+:is(propskit-text, propskit-editable-select)
   fig-input-text:is(
     :focus-within,
     :active,
@@ -3066,6 +3413,7 @@ propskit-text
 :is(
   propskit-palette,
   propskit-select,
+  propskit-editable-select,
   propskit-text,
   propskit-number,
   propskit-slider,
@@ -3074,6 +3422,7 @@ propskit-text
   :is(
     .propskit-palette-surface,
     .propskit-select-surface,
+    .propskit-editable-select-surface,
     .propskit-text-surface,
     .propskit-number-surface,
     .propskit-slider-surface,