@rogieking/figui3 3.15.0 → 3.17.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);
   }
 }
@@ -1224,18 +1217,16 @@ fig-chit {
     --padding: 0px;
   }
 
-  &[disabled] {
+  &[disabled]:not([disabled="false"]) {
     pointer-events: none;
   }
 
   &::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;
@@ -1373,9 +1363,9 @@ fig-easing-curve {
   --easing-bezier-handle-radius: 5;
   --easing-spring-handle-radius: 5;
   --easing-handle-fill: var(--figma-color-border-strong);
-  --easing-duration-bar-width: 5;
+  --easing-duration-bar-width: 7;
   --easing-duration-bar-height: 16;
-  --easing-duration-bar-radius: 3;
+  --easing-duration-bar-radius: 4;
   --aspect-ratio: 1 / 1;
 
   width: 100%;
@@ -1438,17 +1428,6 @@ fig-easing-curve {
     overflow: visible;
     pointer-events: all;
     cursor: default;
-
-    fig-handle {
-      --width: calc(var(--easing-bezier-handle-radius) * 2px);
-      --height: calc(var(--easing-bezier-handle-radius) * 2px);
-      pointer-events: all;
-      cursor: default;
-    }
-
-    &:active fig-handle {
-      cursor: grabbing;
-    }
   }
   .fig-easing-curve-endpoint {
     fill: var(--easing-handle-fill);
@@ -1485,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);
@@ -1897,7 +1875,6 @@ input[type="checkbox"].switch {
   height: 1rem;
   left: 0;
   top: 0;
-  margin: 0;
   background: transparent;
   appearance: none;
   -moz-appearance: none;
@@ -3095,6 +3072,10 @@ fig-input-fill {
     outline: 1px solid var(--figma-color-border-selected) !important;
     outline-offset: -1px !important;
   }
+  &:hover {
+    outline: 1px solid var(--figma-color-border);
+    outline-offset: -1px !important;
+  }
 
   & > .input-combo > fig-chit:not(:only-child),
   & > .input-combo > fig-chit:not(:only-child) input,
@@ -3179,11 +3160,10 @@ fig-input-gradient {
 }
 
 fig-input-palette {
-  display: inline-grid !important;
-  grid-template-columns: 1fr 24px;
-  grid-template-areas: "inputs button";
-  gap: var(--spacer-1);
-  width: 100%;
+  display: inline-flex !important;
+  flex-direction: column;
+  gap: var(--spacer-2);
+  min-width: 0;
 
   .palette-colors {
     display: flex;
@@ -3199,15 +3179,19 @@ fig-input-palette {
   .palette-add-btn {
     grid-area: button;
   }
+  .palette-colors-inline {
+    display: inline-grid !important;
+    grid-template-columns: 1fr 24px;
+    grid-template-areas: "inputs button";
+    border-radius: var(--radius-medium);
+    background-color: var(--figma-color-bg-secondary);
+    width: 100%;
 
-  &:not([expanded]),
-  &[expanded="false"] {
     .palette-colors {
       display: flex;
       background-color: var(--figma-color-bg-secondary);
-
-      > fig-input-color {
-        display: contents;
+      fig-input-color {
+        width: 100%;
       }
 
       fig-chit {
@@ -3228,27 +3212,37 @@ fig-input-palette {
       }
     }
   }
+  &[expanded]:not([expanded="false"]):not([edit="false"]) {
+    .palette-colors-expanded {
+      display: flex;
+    }
+  }
+  &[add="false"] {
+    .palette-colors-expanded,
+    .palette-colors-inline {
+      grid-template-areas: "inputs inputs";
+    }
+  }
+  .palette-colors-expanded {
+    display: none;
+    flex-direction: column;
+    overflow: visible;
+    border-radius: 0;
+    gap: var(--spacer-2);
+    width: 100%;
 
-  &[expanded]:not([expanded="false"]) {
-    .palette-colors {
-      flex-direction: column;
-      overflow: visible;
-      border-radius: 0;
-      gap: var(--spacer-2);
-      background-color: transparent;
-
-      > fig-input-color {
-        min-width: 0;
-      }
+    > fig-input-color {
+      min-width: 0;
+    }
 
-      fig-chit {
-        --border-radius: var(--radius-medium);
-        width: auto !important;
-        height: var(--size);
-        border-radius: var(--radius-medium) !important;
-      }
+    fig-chit {
+      --border-radius: var(--radius-medium);
+      width: auto !important;
+      height: var(--size);
+      border-radius: var(--radius-medium) !important;
     }
   }
+
 }
 
 fig-field[direction="horizontal"]:has(> fig-input-palette) {
@@ -3289,7 +3283,6 @@ fig-field,
   }
 
   & > [full] {
-    flex: 1;
     flex: 1 1 auto;
   }
 
@@ -3550,7 +3543,6 @@ fig-segmented-control {
   height: 1.5rem;
   padding: 1px;
   gap: 0;
-  display: inline-flex;
   align-items: stretch;
   position: relative;
   overflow: hidden;
@@ -3710,8 +3702,6 @@ fig-joystick {
     place-items: center;
     flex-shrink: 0;
     flex-grow: 0;
-    align-items: center;
-    justify-content: center;
     position: relative;
     &:focus {
       outline: 0;
@@ -3815,7 +3805,6 @@ fig-joystick {
     &:before {
       content: "";
       position: absolute;
-      height: 0;
       border-left: 1px solid var(--figma-color-border);
       height: calc(100% - 2px);
       top: 1px;
@@ -3825,7 +3814,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);
@@ -4584,8 +4572,20 @@ fig-chooser {
   display: flex;
   flex-direction: column;
   gap: 1px;
-  overflow: hidden auto;
+  overflow: visible auto;
   scrollbar-width: none;
+  scroll-snap-type: y mandatory;
+
+  > * {
+    scroll-snap-align: start;
+  }
+
+  &[padding="false"] {
+    gap: var(--spacer-2);
+    fig-choice {
+      --fig-choice-padding: 0px;
+    }
+  }
 
   &[overflow="scrollbar"] {
     scrollbar-width: thin;
@@ -4753,12 +4753,15 @@ fig-chooser {
 }
 
 fig-choice {
-  --fig-choice-selection-ring-width: 1px;
+  --fig-choice-selection-ring-width: 1.25px;
   --fig-choice-padding: var(--spacer-2);
+  --fig-choice-border-radius: calc(
+    var(--radius-medium) + var(--fig-choice-padding)
+  );
   display: flex;
   align-items: center;
   flex-direction: column;
-  border-radius: var(--radius-large);
+  border-radius: var(--fig-choice-border-radius);
   gap: var(--spacer-2);
   outline: none;
   border: 1px solid transparent;
@@ -4770,14 +4773,25 @@ fig-choice {
     background-color: var(--figma-color-bg-secondary);
   }
 
+  &[padding="false"] {
+    --fig-choice-padding: 0px;
+  }
+
   &[selected] {
-    background-color: var(--figma-color-bg-secondary);
-    & > fig-image {
-      border-radius: var(--radius-medium);
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: var(--fig-choice-border-radius);
+      pointer-events: none;
+      z-index: 1;
+      box-shadow: inset 0 0 0 4px var(--figma-color-bg);
       outline: var(--fig-choice-selection-ring-width) solid
         var(--figma-color-border-selected);
-      outline-offset: 0;
+      outline-offset: calc(var(--fig-choice-selection-ring-width) * -1);
     }
+    background-color: var(--figma-color-bg-secondary);
   }
 
   &[disabled]:not([disabled="false"]),
@@ -4793,14 +4807,14 @@ fig-handle {
   --height: 0.875rem;
   --fill: var(--figma-color-bg-brand);
   --border-radius: 50%;
-  --ring-width: 1.25px;
-  --box-shadow:
-    inset 0 0 0 var(--ring-width) var(--handle-color),
-    0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--elevation-100-canvas);
+  --ring-width: 0.125rem;
+  --box-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--elevation-100-canvas);
   --outline: none;
   --border: none;
 
-  display: inline-grid;
+  display: grid;
+  margin: 0;
+  padding: 0;
   place-items: center;
   width: var(--width);
   height: var(--height);
@@ -4813,8 +4827,8 @@ fig-handle {
   &::before {
     content: "";
     color-scheme: light only;
-    width: calc(var(--width) - 4px);
-    height: calc(var(--height) - 4px);
+    width: calc(var(--width) - var(--ring-width) * 2);
+    height: calc(var(--height) - var(--ring-width) * 2);
     background: var(--fill);
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
@@ -4822,8 +4836,8 @@ fig-handle {
   }
 
   &[size="small"] {
-    --width: 0.5625rem;
-    --height: 0.5625rem;
+    --width: 11px;
+    --height: 11px;
   }
 
   &[drag]:not([drag="false"]) {
@@ -4832,14 +4846,13 @@ fig-handle {
   }
   &:hover,
   &[selected]:not([selected="false"]) {
-    outline: var(--ring-width) solid var(--figma-color-border-selected);
+    outline: 1px solid var(--figma-color-border-selected);
     outline-offset: 0;
   }
 
   &[disabled]:not([disabled="false"]),
   &[aria-disabled="true"] {
     pointer-events: none;
-    opacity: 0.4;
     cursor: default;
   }
 
@@ -4849,7 +4862,7 @@ fig-handle {
 
     fig-color-tip {
       position: absolute;
-      bottom: calc(100% + 6px);
+      bottom: calc(100% + 2px);
       left: 50%;
       transform: translateX(-50%);
       z-index: 10;

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}