@rogieking/figui3 3.2.0 → 3.4.0

package/components.css

@@ -257,6 +257,19 @@
   );
 
   /* Gradients */
+  --eased-fade-stops:
+    var(--figma-color-bg) 0%,
+    color-mix(in oklch, var(--figma-color-bg) 99.9%, transparent) 10%,
+    color-mix(in oklch, var(--figma-color-bg) 99.2%, transparent) 20%,
+    color-mix(in oklch, var(--figma-color-bg) 97.3%, transparent) 30%,
+    color-mix(in oklch, var(--figma-color-bg) 93.6%, transparent) 40%,
+    color-mix(in oklch, var(--figma-color-bg) 87.5%, transparent) 50%,
+    color-mix(in oklch, var(--figma-color-bg) 78.4%, transparent) 60%,
+    color-mix(in oklch, var(--figma-color-bg) 65.7%, transparent) 70%,
+    color-mix(in oklch, var(--figma-color-bg) 48.8%, transparent) 80%,
+    color-mix(in oklch, var(--figma-color-bg) 27.1%, transparent) 90%,
+    transparent 100%;
+
   --checkerboard: repeating-conic-gradient(
       rgba(0, 0, 0, 0.1) 0% 25%,
       rgba(255, 255, 255, 0.1) 0% 50%
@@ -367,6 +380,10 @@ textarea,
 input[type="text"],
 input[type="number"],
 input[type="password"],
+input[type="url"],
+input[type="email"],
+input[type="search"],
+input[type="tel"],
 .input {
   background-color: var(--figma-color-bg-secondary);
   border: 0;
@@ -395,28 +412,47 @@ input[type="password"],
   }
 }
 
-fig-input-text,
-fig-input-number {
-  &:has([slot="append"]) input[type="number"] {
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      display: none;
-      color-scheme: inherit;
-      margin: 0;
-      opacity: 0;
+fig-input-number .fig-steppers {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+  overflow: hidden;
+
+  & button {
+    display: block;
+    appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    width: 1.5rem;
+    flex: 1;
+    background-color: var(--figma-color-text-secondary);
+    cursor: pointer;
+    mask-size: 1rem;
+    mask-repeat: no-repeat;
+    mask-position: center -3.5px;
+
+    &:hover {
+      background-color: var(--figma-color-text);
     }
-  }
-  &[steppers="true"] {
-    input[type="number"]::-webkit-inner-spin-button {
-      display: block;
-      opacity: 1;
-      height: 1.5rem;
-      width: 1.5rem;
-      margin-right: calc(var(--spacer-2) * -1);
-      background-color: var(--figma-color-text-secondary);
-      mask-image: var(--icon-steppers);
+    &:active {
+      background-color: var(--figma-color-text-tertiary);
     }
   }
+
+  fig-input-number[disabled]:not([disabled="false"]) & button {
+    pointer-events: none;
+    background-color: var(--figma-color-text-disabled);
+  }
+
+  & .fig-stepper-up {
+    mask-image: var(--icon-chevron);
+    rotate: 180deg;
+  }
+  & .fig-stepper-down {
+    mask-image: var(--icon-chevron);
+  }
 }
 
 /* Textarea */
@@ -1144,6 +1180,7 @@ fig-chit {
   width: var(--size);
   height: var(--size);
   border-radius: var(--radius-medium);
+  cursor: default;
 
   &::before,
   &::after,
@@ -2681,6 +2718,7 @@ dialog[is="fig-toast"] {
   justify-content: center;
   min-width: 0;
   color: var(--figma-color-text);
+  background-color: var(--figma-color-bg);
 
   &[open] {
     display: flex;
@@ -2703,32 +2741,34 @@ dialog[is="fig-toast"] {
 
   /* Theme: Dark (default) - hardcoded to ensure consistency regardless of global theme */
   &[theme="dark"] {
-    background-color: #2c2c2c;
-    color: rgba(255, 255, 255, 0.9);
     color-scheme: dark;
   }
 
   /* Theme: Light - hardcoded to ensure consistency regardless of global theme */
   &[theme="light"] {
-    background-color: #ffffff;
-    color: rgba(0, 0, 0, 0.9);
-    box-shadow: var(--figma-elevation-500-modal-window);
     color-scheme: light;
   }
 
   /* Theme: Danger - hardcoded to ensure consistency regardless of global theme */
   &[theme="danger"] {
-    background-color: #f24822;
-    color: #ffffff;
+    background-color: var(--figma-color-bg-danger);
     color-scheme: dark;
   }
 
   /* Theme: Brand - hardcoded to ensure consistency regardless of global theme */
   &[theme="brand"] {
-    background-color: #0d99ff;
-    color: #ffffff;
+    background-color: var(--figma-color-bg-brand);
+    color-scheme: dark;
+  }
+
+  &[theme="success"] {
+    background-color: var(--figma-color-bg-success);
     color-scheme: dark;
   }
+
+  &[theme="auto"] {
+    /* color-scheme is resolved at runtime by FigToast JS */
+  }
 }
 
 /* Tooltip */
@@ -2958,9 +2998,13 @@ fig-input-number {
   flex: 1;
   color: var(--figma-color-text);
 
+  &[full]:not([full="false"]) {
+    display: flex;
+    width: 100%;
+  }
   &[multiline] {
     display: flex;
-    width: 100%; /* Multiline defaults to full width */
+    width: 100%;
   }
   &[autoresize] input,
   &[autoresize] textarea {
@@ -3064,8 +3108,7 @@ fig-input-fill {
     }
   }
 
-  fig-field[direction="horizontal"] &,
-  fig-field[direction="row"] & {
+  fig-field[direction="horizontal"] & {
     flex: 1;
     min-width: 0;
   }
@@ -3082,8 +3125,7 @@ fig-slider {
     flex-basis: 5rem;
   }
 
-  fig-field[direction="horizontal"] &,
-  fig-field[direction="row"] & {
+  fig-field[direction="horizontal"] & {
     flex: 1;
     min-width: 0;
   }
@@ -3099,7 +3141,6 @@ fig-field,
   gap: 0;
   align-items: start;
 
-  &[direction="row"],
   &[direction="horizontal"] {
     flex-direction: row;
     align-items: center;
@@ -3121,10 +3162,13 @@ fig-field,
     width: 100%;
   }
 
-  &[direction="row"] > label,
   &[direction="horizontal"] > label {
     width: auto;
     min-width: var(--field-label-width);
+    max-width: var(--field-label-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &[direction="horizontal"] {
@@ -3968,6 +4012,207 @@ fig-fill-picker {
   }
 }
 
+/* Chooser */
+fig-chooser {
+  --chooser-fade-size: var(--spacer-4);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  overflow: hidden auto;
+  scrollbar-width: none;
+
+  &[overflow="scrollbar"] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--figma-color-border) transparent;
+  }
+
+  &[layout="horizontal"] {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow: auto hidden;
+    scrollbar-width: none;
+
+    &[overflow="scrollbar"] {
+      scrollbar-width: thin;
+      scrollbar-color: var(--figma-color-border) transparent;
+    }
+
+    > :not(.fig-chooser-nav-start):not(.fig-chooser-nav-end) {
+      flex: 1 1 0%;
+    }
+    fig-image[full] {
+      min-width: 3rem;
+    }
+  }
+
+  &[layout="grid"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    > * {
+      min-width: 0;
+      width: 100%;
+    }
+
+    > .fig-chooser-nav-start,
+    > .fig-chooser-nav-end {
+      grid-column: 1 / -1;
+    }
+  }
+
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
+  .fig-chooser-nav-start,
+  .fig-chooser-nav-end {
+    all: unset;
+    position: sticky;
+    z-index: 3;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    color: var(--figma-color-icon);
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      background: var(--figma-color-bg) !important;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      mask-image: var(--icon-chevron);
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      background: currentColor;
+    }
+  }
+
+  .fig-chooser-nav-start {
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: var(--chooser-fade-size);
+    margin-bottom: calc(var(--chooser-fade-size) * -1);
+    background: linear-gradient(to bottom, var(--eased-fade-stops));
+
+    &:hover {
+      box-shadow: 0 1px 0 0 var(--figma-color-border) !important;
+    }
+
+    &::after {
+      rotate: 180deg;
+    }
+  }
+
+  .fig-chooser-nav-end {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: var(--chooser-fade-size);
+    margin-top: calc(var(--chooser-fade-size) * -1);
+    background: linear-gradient(to top, var(--eased-fade-stops));
+
+    &:hover {
+      box-shadow: 0 -1px 0 0 var(--figma-color-border) !important;
+    }
+  }
+
+  &[layout="horizontal"] {
+    .fig-chooser-nav-start,
+    .fig-chooser-nav-end {
+      top: 0;
+      bottom: 0;
+      height: auto;
+      width: var(--chooser-fade-size);
+      align-self: stretch;
+      margin: 0;
+    }
+
+    .fig-chooser-nav-start {
+      left: 0;
+      right: auto;
+      margin-right: calc(var(--chooser-fade-size) * -1);
+      background: linear-gradient(to right, var(--eased-fade-stops));
+
+      &:hover {
+        box-shadow: 1px 0 0 0 var(--figma-color-border) !important;
+      }
+
+      &::after {
+        rotate: 90deg;
+      }
+    }
+
+    .fig-chooser-nav-end {
+      right: 0;
+      left: auto;
+      margin-left: calc(var(--chooser-fade-size) * -1);
+      background: linear-gradient(to left, var(--eased-fade-stops));
+
+      &:hover {
+        box-shadow: -1px 0 0 0 var(--figma-color-border) !important;
+      }
+
+      &::after {
+        rotate: -90deg;
+      }
+    }
+  }
+
+  &.overflow-start > .fig-chooser-nav-start {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &.overflow-end > .fig-chooser-nav-end {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+fig-choice {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  border-radius: var(--radius-large);
+  padding: var(--spacer-2);
+  gap: var(--spacer-2);
+  outline: none;
+  border: 1px solid transparent;
+
+  &:hover:not([selected]):not([disabled]):not([aria-disabled="true"]) {
+    background-color: var(--figma-color-bg-secondary);
+  }
+
+  &[selected] {
+    background-color: var(--figma-color-bg-selected);
+  }
+
+  &[disabled]:not([disabled="false"]),
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.4;
+    cursor: default;
+  }
+}
+
 @keyframes fig-shimmer {
   0% {
     background-position: 100% 100%;