@rogieking/figui3 1.3.4 → 1.3.6

package/fig.css

@@ -413,7 +413,7 @@
   --body-medium-strong-fontWeight: 550;
   --body-large-strong-fontWeight: 500;
   --body-medium-fontWeight: 450;
-  --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
+  --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.05),
     0px 1px 3px 0px rgba(0, 0, 0, 0.05), 0px 3px 8px 0px rgba(0, 0, 0, 0.05),
     0px 0px 0.5px 0px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
 
@@ -1211,7 +1211,7 @@ input[type="checkbox"].switch {
   align-items: center;
   justify-content: center;
   border-radius: 0.5rem;
-  background-color: var(--figma-color-bg-tertiary);
+  background-color: var(--figma-color-bg-secondary);
   transition: var(--input-transition);
   box-sizing: border-box;
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
@@ -1245,7 +1245,7 @@ input[type="checkbox"].switch:checked:after {
 }
 
 input[type="checkbox"].switch:disabled {
-  background-color: var(--figma-color-bg-tertiary);
+  background-color: var(--figma-color-bg-secondary);
   cursor: not-allowed;
   &:after {
     background-color: var(--figma-color-bg);
@@ -1288,9 +1288,10 @@ input[type="checkbox"]:not(.switch) {
     }
   }
 }
-
-.figma-light input[type="checkbox"]:not(.switch):hover {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
+@media (prefers-color-scheme: light) {
+  input[type="checkbox"]:not(.switch):hover {
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
+  }
 }
 
 label.checkbox:has([type="checkbox"]) {
@@ -1335,6 +1336,7 @@ input[type="radio"] {
     &::after {
       transform: scale(1);
       opacity: 0.25;
+      background-color: var(--figma-color-icon);
     }
   }
 
@@ -1343,7 +1345,7 @@ input[type="radio"] {
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 100%;
-    background-color: var(--figma-color-text-onbrand);
+    background-color: var(--figma-color-icon-onbrand);
     transform: scale(0);
     box-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
       0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
@@ -1456,6 +1458,7 @@ fig-slider {
     0px 0px 0.5px 0px rgba(0, 0, 0, 0.18),
     0 0 0 1px var(--figma-color-border-selected);
   --slider-transition: all 0.1s ease-in-out;
+  --handle-transition: var(--slider-transition);
 
   display: inline-flex;
   align-items: center;
@@ -1533,7 +1536,7 @@ fig-slider {
         position: absolute;
         left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
         top: calc(50% - var(--slider-tick-size) / 2);
-        background: var(--figma-color-icon-tertiary);
+        background: var(--figma-color-icon-onbrand);
       }
     }
   }
@@ -1572,7 +1575,7 @@ fig-slider {
       appearance: none;
       background: transparent;
       -webkit-appearance: none;
-      transition: var(--slider-transition);
+      transition: var(--handle-transition);
       border-radius: 100%;
       height: var(--slider-thumb-size);
       width: var(--slider-thumb-size);
@@ -1655,7 +1658,7 @@ fig-slider {
       cursor: grab;
       cursor: -moz-grab;
       box-shadow: var(--slider-handle-shadow);
-      transition: var(--slider-transition);
+      transition: var(--handle-transition);
     }
 
     &:disabled {
@@ -1734,6 +1737,8 @@ fig-slider {
     --slider-height: 0.25rem;
     --slider-thumb-size: 0.5rem;
     --slider-tick-size: calc(var(--slider-height) / 2);
+    --handle-transition: none;
+    --slider-transition: none;
 
     .fig-slider-input-container {
       height: var(--slider-height);
@@ -1741,11 +1746,12 @@ fig-slider {
       display: block;
       width: 100%;
       box-shadow: none;
+      background: var(--figma-color-bg-tertiary);
 
       /* Track */
       &::before {
         box-shadow: none;
-        background: var(--figma-color-text-onbrand-tertiary);
+        background: var(--figma-color-text-tertiary);
       }
 
       input[type="range"] {
@@ -1764,6 +1770,7 @@ fig-slider {
       --slider-thumb-size: 1rem;
       --slider-tick-size: calc(var(--slider-height) / 4);
       .fig-slider-input-container {
+        background: var(--figma-color-bg-secondary);
         &::before {
           box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
           background: var(--figma-color-bg-brand);
@@ -2258,7 +2265,7 @@ fig-segmented-control {
     &[selected="true"] {
       background-color: var(--figma-color-bg);
       border-radius: calc(var(--radius-medium) - 1px);
-      box-shadow: var(--handle-shadow);
+      box-shadow: 0 0 0 1px var(--figma-color-border);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {