@rogieking/figui3 1.0.42 → 1.0.44

package/example.html

@@ -84,6 +84,7 @@
         <br /><br />
         <hstack>
             <fig-chit type="color"
+                      selected="true"
                       disabled="true"
                       value="#00FF00"></fig-chit>
             <fig-chit type="color"
@@ -96,6 +97,7 @@
             <fig-chit type="gradient"
                       variant="angular"
                       size="large"
+                      selected="true"
                       disabled="true"></fig-chit>
             <fig-chit type="gradient"
                       variant="radial"
@@ -111,8 +113,12 @@
                       src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-chit>
             <fig-chit type="image"
                       disabled="true"
+                      selected="true"
                       size="large"
                       src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
+            <fig-chit type="image"
+                      disabled="true"
+                      size="large"></fig-chit>
         </hstack>
         <br />
         <fig-tooltip text="Tooltip text">

package/fig.css

@@ -938,23 +938,44 @@ input[type="color"]::-webkit-color-swatch {
 }
 
 fig-chit {
+  --gradient-color-1: #ff90ff;
+  --gradient-color-2: #0000ff;
+  --size: 1.5rem;
   display: inline-grid;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--size);
+  height: var(--size);
   border-radius: var(--radius-medium);
 
+  &::before,
+  &::after,
+  input {
+    grid-area: 1/1;
+  }
+
+  &[selected]:not([selected="false"])::before {
+    content: "";
+    width: var(--size);
+    height: var(--size);
+    z-index: 1;
+    border-radius: var(--radius-medium);
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+  }
+
   &[size="large"] {
-    width: 1.75rem;
-    height: 1.75rem;
+    --size: 1.75rem;
 
     &[type="gradient"]::after,
     &[type="image"]::after,
     input[type="color"] {
       padding: 0;
-      width: 1.75rem;
-      height: 1.75rem;
+      width: var(--size);
+      height: var(--size);
       border-radius: var(--radius-medium);
     }
+    &[selected]:not([selected="false"])::before {
+      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected),
+        inset 0 0 0 3px var(--figma-color-bg);
+    }
   }
   &[disabled="true"] {
     input {
@@ -985,16 +1006,35 @@ fig-chit {
       opacity: 0;
     }
   }
-
+  &[type="image"] {
+    &:not([src])::after {
+      background: var(--checkerboard);
+    }
+  }
   &[type="gradient"] {
     &[variant="linear"]::after {
-      background: linear-gradient(to right, red, blue);
+      --gradient: linear-gradient(
+        to bottom,
+        var(--gradient-color-1),
+        var(--gradient-color-2)
+      );
     }
     &[variant="angular"]::after {
-      background: conic-gradient(red, orange, yellow, green, blue);
+      --gradient: conic-gradient(
+        from 180deg,
+        var(--gradient-color-1),
+        var(--gradient-color-2)
+      );
     }
     &[variant="radial"]::after {
-      background: radial-gradient(circle, red, blue);
+      --gradient: radial-gradient(
+        circle,
+        var(--gradient-color-1),
+        var(--gradient-color-2)
+      );
+    }
+    &::after {
+      background: var(--gradient);
     }
   }
 }

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.42"
+  "version": "1.0.44"
 }