@rogieking/figui3 2.1.4 → 2.1.7

package/components.css

@@ -228,8 +228,8 @@
 
   /* Transparent Backgrounds - use light-dark() */
   --figma-color-bordertranslucent: light-dark(
-    rgba(0, 0, 0, 0.05),
-    rgba(255, 255, 255, 0.05)
+    rgba(0, 0, 0, 0.1),
+    rgba(255, 255, 255, 0.1)
   );
   --figma-color-bg-transparent: light-dark(
     rgba(0, 0, 0, 0.05),
@@ -399,6 +399,7 @@ input[type="password"],
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     display: none;
+    color-scheme: inherit;
     -webkit-appearance: none;
     margin: 0;
   }
@@ -410,6 +411,7 @@ fig-input-number {
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
       display: none;
+      color-scheme: inherit;
       margin: 0;
       opacity: 0;
     }
@@ -460,6 +462,7 @@ input[type="text"][list] {
   }
 
   &::-webkit-calendar-picker-indicator {
+    color-scheme: inherit;
     opacity: 0;
   }
 }
@@ -1045,18 +1048,23 @@ input[type="color"] {
   &::-webkit-color-swatch-wrapper {
     padding: 0;
     border: 0;
+    color-scheme: inherit;
     appearance: none;
     border-radius: 0.125rem;
     background: var(--checkerboard);
     overflow: hidden;
     grid-area: 1/1;
+    color-scheme: inherit;
     outline: 0;
+    
   }
 
   &::-webkit-color-swatch {
     padding: 0;
     border: 0;
+    color-scheme: inherit;
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    color-scheme: inherit;
     border-radius: 0.125rem;
     mask-image: linear-gradient(
       to right,
@@ -1069,7 +1077,9 @@ input[type="color"] {
 
 input[type="color"] {
   &::-moz-color-swatch {
+    color-scheme: inherit;
     border-radius: 0.125rem;
+    color-scheme: inherit;
     padding: 0;
     border: 0;
     appearance: none;
@@ -1089,6 +1099,7 @@ fig-chit {
   --chit-background: #d9d9d9;
   --chit-bg-size: cover;
   --chit-bg-position: center;
+  --alpha:1;
 
   display: inline-grid;
   width: var(--size);
@@ -1145,6 +1156,7 @@ fig-chit {
       width: var(--size);
       height: var(--size);
       border-radius: var(--radius-medium);
+      
     }
   }
 
@@ -1168,6 +1180,15 @@ fig-chit {
       background-repeat: repeat;
       border-radius: 0.125rem;
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+      
+    }
+    &[data-type="image"]::after {
+      mask-image: linear-gradient(
+        to right,
+        black 0%,
+        black 50%,
+        rgba(0, 0, 0, var(--alpha)) 50%
+      );
     }
 
     &::after,
@@ -1265,6 +1286,11 @@ fig-image {
   align-items: center;
   gap: 1px;
 
+  & > label{
+    align-self: stretch;
+    color: inherit;
+  }
+
   & > * {
     &:first-child:not(:last-child),
     &:first-child:not(:last-child) > * {
@@ -1285,6 +1311,21 @@ fig-image {
   }
 }
 
+/* Input Fill label */
+.fig-input-fill-label {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--spacer-2) 0 var(--spacer-1);
+  height: var(--control-height);
+  font-size: var(--font-size-small);
+  color: var(--figma-color-text-secondary);
+  background: var(--figma-color-bg-secondary);
+  flex: 1;
+  min-width: 0;
+  user-select: none;
+  margin-left: -1px;
+}
+
 /* Switch */
 input[type="checkbox"].switch {
   display: inline-flex;
@@ -1678,6 +1719,7 @@ fig-slider {
       appearance: none;
       background: transparent;
       -webkit-appearance: none;
+      color-scheme: inherit;
       transition: var(--handle-transition);
       border-radius: 100%;
       height: var(--slider-thumb-size);
@@ -1696,6 +1738,7 @@ fig-slider {
       cursor: not-allowed;
 
       &::-webkit-slider-runnable-track {
+        color-scheme: inherit;
         background: linear-gradient(
           to right,
           var(--figma-color-bg-secondary) 0%,
@@ -1710,6 +1753,7 @@ fig-slider {
     }
 
     &::-webkit-slider-runnable-track {
+      color-scheme: inherit;
       height: var(--slider-height);
       background-color: transparent;
       transition: var(--slider-transition);
@@ -1748,6 +1792,7 @@ fig-slider {
     }
 
     &::-moz-range-thumb {
+      color-scheme: inherit;
       appearance: none;
       -moz-appearance: none;
       background: transparent;
@@ -1768,6 +1813,7 @@ fig-slider {
       cursor: not-allowed;
 
       &::-moz-range-track {
+        color-scheme: inherit;
         background: linear-gradient(
           to right,
           var(--figma-color-bg-secondary) 0%,
@@ -2259,9 +2305,7 @@ fig-input-number {
   user-select: all;
   gap: 0;
   min-width: 0;
-  width: 8rem; /* Default width */
-  flex-shrink: 1;
-  flex-grow: 0;
+  flex: 1;
   color: var(--figma-color-text);
 
   /* When inside a flex container (like fig-field), grow to fill */
@@ -2346,19 +2390,9 @@ fig-input-number {
   }
 }
 
-fig-input-color {
-  & fig-input-text:not([type]),
-  & fig-input-text[type="text"],
-  & fig-input-number {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: stretch;
+fig-input-color, 
+fig-input-fill {
 
-    & input[type="text"] {
-      width: 100%;
-      text-transform: uppercase;
-    }
-  }
   & > .input-combo > fig-chit:not(:only-child),
   & > .input-combo > fig-chit:not(:only-child) > input,
   & > .input-combo > fig-fill-picker:not(:only-child),
@@ -2368,18 +2402,20 @@ fig-input-color {
     border-bottom-right-radius: 0 !important;
   }
 
-  & fig-input-text[type="number"],
-  & fig-input-number {
-    width: 3rem;
-    display: inline-flex;
+  & > .input-combo{
+    flex: 1;
+    min-width: 0;
   }
-  fig-input-text {
-    width: auto;
+
+  fig-input-number {
+    flex: 0;
+    flex-basis: 3.25rem;
   }
-  & > * {
-    flex: 1;
-    fig-input-text {
-      flex: 1;
+
+  &[disabled]:not([disabled="false"]) {
+    .input-combo {
+      gap: 0;
+
     }
   }
 }
@@ -2391,7 +2427,6 @@ fig-slider {
     flex-grow: 1;
   }
 
-  & fig-input-text[type="number"],
   & fig-input-number {
     width: 5rem;
   }
@@ -2967,9 +3002,11 @@ fig-fill-picker {
   gap: var(--spacer-1);
   align-items: center;
 
-  .fig-fill-picker-stop-position {
-    width: 48px;
-    flex-shrink: 0;
+  & > .fig-fill-picker-stop-position {
+    flex: 0;
+    flex-basis: 3rem;
+    min-width: 0;
+    width: 3rem;
   }
 
   .fig-fill-picker-stop-color {

package/example.html

@@ -176,6 +176,7 @@
             <a href="#image">Image</a>
             <a href="#input-angle">Input Angle</a>
             <a href="#input-color">Input Color</a>
+            <a href="#input-fill">Input Fill</a>
             <a href="#input-joystick">Input Joystick</a>
             <a href="#input-number">Input Number</a>
             <a href="#input-text">Input Text</a>
@@ -605,6 +606,26 @@
                 <fig-chit background="#9747FF"
                           size="large"></fig-chit>
             </fig-field>
+            <fig-field direction="horizontal">
+                <label>Large (Gradient)</label>
+                <fig-chit background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+                          size="large"></fig-chit>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Large (Radial)</label>
+                <fig-chit background="radial-gradient(circle, #ff6b6b, #4ecdc4)"
+                          size="large"></fig-chit>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Large (Angular)</label>
+                <fig-chit background="conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000)"
+                          size="large"></fig-chit>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Large (Image)</label>
+                <fig-chit background="url(https://avatars.githubusercontent.com/u/12345678?v=4)"
+                          size="large"></fig-chit>
+            </fig-field>
 
             <h3>States</h3>
             <fig-field direction="horizontal">
@@ -947,6 +968,9 @@
                 document.getElementById('fill-picker-events').addEventListener('input', (e) => {
                     document.getElementById('fill-picker-output').textContent = 'Input: ' + JSON.stringify(e.detail);
                 });
+                document.getElementById('fill-picker-events').addEventListener('change', (e) => {
+                    document.getElementById('fill-picker-output').textContent = 'Change: ' + JSON.stringify(e.detail);
+                });
             </script>
         </section>
         <hr>
@@ -1230,6 +1254,88 @@
                                  text="true"
                                  alpha="true"></fig-input-color>
             </div>
+
+            <h3>Event Listening</h3>
+            <fig-input-color id="input-color-events"
+                             value="#FF6B6B"
+                             text="true"
+                             alpha="true"
+                             picker="figma"></fig-input-color>
+            <p class="description"
+               id="input-color-output">Change the color above to see events.</p>
+            <script>
+                document.getElementById('input-color-events').addEventListener('input', (e) => {
+                    const el = e.target;
+                    document.getElementById('input-color-output').textContent =
+                        `Input: ${el.value} | Hex: ${el.hexOpaque} | Alpha: ${el.alpha}%`;
+                });
+                document.getElementById('input-color-events').addEventListener('change', (e) => {
+                    const el = e.target;
+                    document.getElementById('input-color-output').textContent =
+                        `Change: ${el.value} | Hex: ${el.hexOpaque} | Alpha: ${el.alpha}%`;
+                });
+            </script>
+        </section>
+        <hr>
+
+        <!-- Input Fill -->
+        <section id="input-fill">
+            <h2>Input Fill</h2>
+            <p class="description">A fill input that supports solid colors, gradients, images, and videos. The UI adapts
+                based on the fill type.</p>
+
+            <h3>Solid Color (default)</h3>
+            <fig-input-fill value='{"type":"solid","color":"#9747FF","alpha":1}'></fig-input-fill>
+
+            <h3>Solid Color with 50% Opacity</h3>
+            <fig-input-fill value='{"type":"solid","color":"#FF6B6B","alpha":0.5}'></fig-input-fill>
+
+            <h3>Linear Gradient</h3>
+            <fig-input-fill
+                            value='{"type":"gradient","gradient":{"type":"linear","angle":180,"stops":[{"position":0,"color":"#667eea","opacity":100},{"position":100,"color":"#764ba2","opacity":100}]}}'></fig-input-fill>
+
+            <h3>Radial Gradient</h3>
+            <fig-input-fill
+                            value='{"type":"gradient","gradient":{"type":"radial","centerX":50,"centerY":50,"stops":[{"position":0,"color":"#ff6b6b","opacity":100},{"position":100,"color":"#4ecdc4","opacity":100}]}}'></fig-input-fill>
+
+            <h3>Angular Gradient</h3>
+            <fig-input-fill
+                            value='{"type":"gradient","gradient":{"type":"angular","stops":[{"position":0,"color":"#ff0000","opacity":100},{"position":50,"color":"#00ff00","opacity":100},{"position":100,"color":"#0000ff","opacity":100}]}}'></fig-input-fill>
+
+            <h3>Image Fill</h3>
+            <fig-input-fill
+                            value='{"type":"image","image":{"url":"https://avatars.githubusercontent.com/u/12345678?v=4","scaleMode":"fill","scale":50,"opacity":1}}'></fig-input-fill>
+
+            <h3>Image Fill (50% Opacity)</h3>
+            <fig-input-fill
+                            value='{"type":"image","image":{"url":"https://avatars.githubusercontent.com/u/12345678?v=4","scaleMode":"fill","scale":50,"opacity":0.5}}'></fig-input-fill>
+
+            <h3>Video Fill</h3>
+            <fig-input-fill
+                            value='{"type":"video","video":{"url":null,"scaleMode":"fill","opacity":1}}'></fig-input-fill>
+
+            <h3>Webcam Fill</h3>
+            <fig-input-fill value='{"type":"webcam","webcam":{"opacity":1}}'></fig-input-fill>
+
+            <h3>Disabled</h3>
+            <fig-input-fill disabled
+                            value='{"type":"solid","color":"#AA96DA","alpha":1}'></fig-input-fill>
+
+            <h3>Event Listening</h3>
+            <fig-input-fill id="input-fill-events"
+                            value='{"type":"solid","color":"#4ECDC4","alpha":1}'></fig-input-fill>
+            <p class="description"
+               id="input-fill-output">Change the fill above to see events.</p>
+            <script>
+                document.getElementById('input-fill-events').addEventListener('input', (e) => {
+                    document.getElementById('input-fill-output').textContent =
+                        `Input: ${JSON.stringify(e.detail)}`;
+                });
+                document.getElementById('input-fill-events').addEventListener('change', (e) => {
+                    document.getElementById('input-fill-output').textContent =
+                        `Change: ${JSON.stringify(e.detail)}`;
+                });
+            </script>
         </section>
         <hr>