@rogieking/figui3 3.16.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);
   }
 }
@@ -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;
@@ -3255,8 +3243,6 @@ fig-input-palette {
     }
   }
 
-  &[expanded]:not([expanded="false"]) {
-  }
 }
 
 fig-field[direction="horizontal"]:has(> fig-input-palette) {
@@ -3297,7 +3283,6 @@ fig-field,
   }
 
   & > [full] {
-    flex: 1;
     flex: 1 1 auto;
   }
 
@@ -3558,7 +3543,6 @@ fig-segmented-control {
   height: 1.5rem;
   padding: 1px;
   gap: 0;
-  display: inline-flex;
   align-items: stretch;
   position: relative;
   overflow: hidden;
@@ -3718,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;
@@ -3823,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;
@@ -3833,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);

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}