@rogieking/figui3 3.16.0 → 3.18.0

package/components.css

@@ -741,7 +741,6 @@ fig-button {
   appearance: none;
   border: 0;
   min-width: 0;
-  color: var(--figma-color-text-onbrand);
   outline: 0;
   border-radius: var(--radius-medium);
   background-color: var(--figma-color-bg-brand);
@@ -753,9 +752,6 @@ fig-button {
 
   &:hover {
     background-color: var(--figma-color-bg-brand-hover);
-    &:active {
-      background-color: var(--figma-color-bg-brand-pressed);
-    }
     &:active {
       background-color: var(--figma-color-bg-brand-pressed);
       color: var(--figma-color-text-onbrand-secondary);
@@ -1020,7 +1016,6 @@ fig-tab,
     &::after {
       content: attr(label);
       color: var(--figma-color-text-secondary);
-      content: attr(label);
       height: 0 !important;
       width: auto !important;
       visibility: hidden;
@@ -1159,7 +1154,6 @@ input[type="color"] {
   &::-moz-color-swatch {
     color-scheme: inherit;
     border-radius: 0.125rem;
-    color-scheme: inherit;
     padding: 0;
     border: 0;
     appearance: none;
@@ -1169,7 +1163,6 @@ input[type="color"] {
       black 50%,
       rgba(0, 0, 0, var(--alpha)) 50%
     );
-    border-radius: 0.125rem;
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
   }
 }
@@ -1231,11 +1224,9 @@ fig-chit {
   &::before,
   &::after {
     content: "";
-    width: var(--width);
-    height: var(--height);
-    border-radius: calc(var(--border-radius) - (var(--padding) / 2));
     width: calc(var(--width) - var(--padding) * 2);
     height: calc(var(--height) - var(--padding) * 2);
+    border-radius: calc(var(--border-radius) - (var(--padding) / 2));
     grid-area: 1/1;
     place-self: center;
     pointer-events: none;
@@ -1268,7 +1259,6 @@ fig-chit {
     background: none;
     width: var(--width);
     height: var(--height);
-    background: none;
     grid-area: 1/1;
     place-self: center;
     box-sizing: border-box;
@@ -1474,7 +1464,6 @@ fig-3d-rotate {
     rgba(255, 255, 255, 0.1)
   );
   --border-end-color: transparent;
-  --border-end-color: transparent;
   --gradient-end-color: transparent;
   --figma-3d-rotate-handle-size: 6px;
   --front-face-bg: light-dark(var(--figma-color-bg), #555);
@@ -1886,7 +1875,6 @@ input[type="checkbox"].switch {
   height: 1rem;
   left: 0;
   top: 0;
-  margin: 0;
   background: transparent;
   appearance: none;
   -moz-appearance: none;
@@ -3137,7 +3125,11 @@ fig-input-fill {
   }
 }
 fig-input-gradient {
+  --height: 1.5rem;
   position: relative;
+  height: var(--height);
+  width: 100%;
+  min-width: 0;
 
   &:focus,
   &:active,
@@ -3159,6 +3151,7 @@ fig-input-gradient {
     align-items: center;
     inset: 0;
     pointer-events: auto;
+    z-index: 1;
 
     fig-handle {
       pointer-events: auto;
@@ -3254,9 +3247,6 @@ fig-input-palette {
       border-radius: var(--radius-medium) !important;
     }
   }
-
-  &[expanded]:not([expanded="false"]) {
-  }
 }
 
 fig-field[direction="horizontal"]:has(> fig-input-palette) {
@@ -3297,7 +3287,6 @@ fig-field,
   }
 
   & > [full] {
-    flex: 1;
     flex: 1 1 auto;
   }
 
@@ -3558,7 +3547,6 @@ fig-segmented-control {
   height: 1.5rem;
   padding: 1px;
   gap: 0;
-  display: inline-flex;
   align-items: stretch;
   position: relative;
   overflow: hidden;
@@ -3718,8 +3706,6 @@ fig-joystick {
     place-items: center;
     flex-shrink: 0;
     flex-grow: 0;
-    align-items: center;
-    justify-content: center;
     position: relative;
     &:focus {
       outline: 0;
@@ -3823,7 +3809,6 @@ fig-joystick {
     &:before {
       content: "";
       position: absolute;
-      height: 0;
       border-left: 1px solid var(--figma-color-border);
       height: calc(100% - 2px);
       top: 1px;
@@ -3833,7 +3818,6 @@ fig-joystick {
     &:after {
       content: "";
       position: absolute;
-      height: 0;
       border-top: 1px solid var(--figma-color-border);
       width: calc(100% - 2px);
       top: calc(50% - 0.5px);
@@ -4831,20 +4815,33 @@ fig-handle {
   --box-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--elevation-100-canvas);
   --outline: none;
   --border: none;
+  --fig-handle-hit-area-opacity: 0;
+  --fig-handle-hit-area-size: 0;
 
-  display: grid;
   margin: 0;
   padding: 0;
   place-items: center;
   width: var(--width);
   height: var(--height);
-  background: var(--handle-color);
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  outline: var(--outline);
-  border: var(--border);
+  display: grid;
 
   &::before {
+    content: "";
+    color-scheme: light only;
+    width: var(--width);
+    height: var(--height);
+    background: var(--handle-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    outline: var(--outline);
+    border: var(--border);
+    place-self: center;
+    grid-area: 1 / 1;
+    z-index: 1;
+  }
+
+  &::after {
     content: "";
     color-scheme: light only;
     width: calc(var(--width) - var(--ring-width) * 2);
@@ -4853,6 +4850,8 @@ fig-handle {
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     place-self: center;
+    grid-area: 1 / 1;
+    z-index: 2;
   }
 
   &[size="small"] {
@@ -4888,6 +4887,15 @@ fig-handle {
       z-index: 10;
     }
   }
+
+  .fig-handle-hit-area {
+    position: absolute;
+    inset: calc(var(--fig-handle-hit-area-size) * -0.5px);
+    pointer-events: auto;
+    background: red;
+    opacity: var(--fig-handle-hit-area-opacity, 0);
+    z-index: 0;
+  }
 }
 
 fig-color-tip {
@@ -4969,3 +4977,74 @@ fig-color-tip {
     }
   }
 }
+
+/* Canvas Point */
+fig-canvas-point {
+  display: contents;
+  --fig-canvas-point-line-stroke: rgba(255, 255, 255, 0.5);
+  --fig-canvas-point-line-stroke-hover: var(--figma-color-bg-brand);
+  --fig-canvas-point-line-stroke-active: var(--figma-color-bg-brand);
+  --fig-canvas-point-line-stroke-width: 1.5px;
+
+  & > fig-handle,
+  & > fig-tooltip:has(fig-handle:not([size="small"])) {
+    z-index: 1;
+  }
+
+  .fig-canvas-point-radius {
+    position: absolute;
+    pointer-events: none;
+    overflow: visible;
+
+    circle {
+      fill: none;
+      stroke: var(--fig-canvas-point-line-stroke);
+      stroke-width: var(--fig-canvas-point-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-point-radius-hit {
+      stroke: transparent;
+      stroke-width: 12px;
+      pointer-events: stroke;
+      filter: none;
+
+      &:hover ~ circle {
+        stroke: var(--fig-canvas-point-line-stroke-hover);
+      }
+    }
+  }
+
+  &:has(.fig-canvas-point-radius-hit:hover) .fig-canvas-point-angle-line,
+  &.fig-canvas-point-ring-active .fig-canvas-point-angle-line {
+    stroke: var(--fig-canvas-point-line-stroke-active);
+  }
+
+  &.fig-canvas-point-ring-active
+    .fig-canvas-point-radius
+    circle:not(.fig-canvas-point-radius-hit) {
+    stroke: var(--fig-canvas-point-line-stroke-active);
+  }
+
+  .fig-canvas-point-angle-svg {
+    pointer-events: none;
+  }
+
+  .fig-canvas-point-angle-line {
+    stroke: var(--fig-canvas-point-line-stroke);
+    stroke-width: var(--fig-canvas-point-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;
+    }
+  }
+}

package/dist/base.css

@@ -1,99 +1 @@
-html {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  color: var(--figma-color-text);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: var(--font-family);
-  font-size: 16px;
-  font-weight: var(--body-medium-fontWeight);
-  letter-spacing: var(--body-letter-spacing);
-  background-color: var(--figma-color-bg);
-}
-body {
-  font-size: var(--body-medium-fontSize);
-  letter-spacing: var(--body-letter-spacing);
-}
-
-h1,
-h2 {
-  font-weight: var(--body-large-strong-fontWeight);
-  font-size: var(--body-large-fontSize);
-}
-h3 {
-  font-weight: var(--body-medium-strong-fontWeight);
-  font-size: var(--body-medium-fontSize);
-}
-
-hr {
-  height: 1px;
-  border: none;
-  background-color: var(--figma-color-border);
-  margin: var(--spacer-2) 0;
-
-  &[vertical] {
-    height: 100%;
-    width: 1px;
-    margin: 0 var(--spacer-2);
-  }
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-::selection {
-  background-color: var(--figma-color-text-selection);
-}
-
-::-moz-selection {
-  background-color: var(--figma-color-text-selection);
-}
-
-/* helper classes/defaults */
-::-webkit-scrollbar {
-  width: var(--spacer-1);
-  /* Width of the vertical scrollbar */
-  height: var(--spacer-1);
-  /* Height of the horizontal scrollbar */
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--figma-color-bg-tertiary);
-  border-radius: calc(var(--spacer-1) / 2);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--figma-color-bg-secondary);
-}
-
-/* For Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--figma-color-bg-tertiary)
-    var(--figma-color-bg-secondary);
-}
-
-.subtle {
-  color: var(--figma-color-text-tertiary);
-}
-
-/* Defaults */
-p {
-  margin: var(--spacer-2) 0;
-  line-height: 1rem;
-  color: var(--figma-color-text-secondary);
-}
-
-label {
-  color: var(--figma-color-text-secondary);
-}
-
-h2 {
-  font-weight: var(--body-medium-strong-fontWeight);
-  margin: var(--spacer-2) 0;
-}
+html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing)}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}hr{background-color:var(--figma-color-border);height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}