@rogieking/figui3 1.3.4 → 1.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fig.css +14 -10
- package/package.json +1 -1
package/fig.css
CHANGED
|
@@ -413,7 +413,7 @@
|
|
|
413
413
|
--body-medium-strong-fontWeight: 550;
|
|
414
414
|
--body-large-strong-fontWeight: 500;
|
|
415
415
|
--body-medium-fontWeight: 450;
|
|
416
|
-
--handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.
|
|
416
|
+
--handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.05),
|
|
417
417
|
0px 1px 3px 0px rgba(0, 0, 0, 0.05), 0px 3px 8px 0px rgba(0, 0, 0, 0.05),
|
|
418
418
|
0px 0px 0.5px 0px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
|
|
419
419
|
|
|
@@ -1211,7 +1211,7 @@ input[type="checkbox"].switch {
|
|
|
1211
1211
|
align-items: center;
|
|
1212
1212
|
justify-content: center;
|
|
1213
1213
|
border-radius: 0.5rem;
|
|
1214
|
-
background-color: var(--figma-color-bg-
|
|
1214
|
+
background-color: var(--figma-color-bg-secondary);
|
|
1215
1215
|
transition: var(--input-transition);
|
|
1216
1216
|
box-sizing: border-box;
|
|
1217
1217
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
@@ -1245,7 +1245,7 @@ input[type="checkbox"].switch:checked:after {
|
|
|
1245
1245
|
}
|
|
1246
1246
|
|
|
1247
1247
|
input[type="checkbox"].switch:disabled {
|
|
1248
|
-
background-color: var(--figma-color-bg-
|
|
1248
|
+
background-color: var(--figma-color-bg-secondary);
|
|
1249
1249
|
cursor: not-allowed;
|
|
1250
1250
|
&:after {
|
|
1251
1251
|
background-color: var(--figma-color-bg);
|
|
@@ -1288,9 +1288,10 @@ input[type="checkbox"]:not(.switch) {
|
|
|
1288
1288
|
}
|
|
1289
1289
|
}
|
|
1290
1290
|
}
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1291
|
+
@media (prefers-color-scheme: light) {
|
|
1292
|
+
input[type="checkbox"]:not(.switch):hover {
|
|
1293
|
+
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");
|
|
1294
|
+
}
|
|
1294
1295
|
}
|
|
1295
1296
|
|
|
1296
1297
|
label.checkbox:has([type="checkbox"]) {
|
|
@@ -1335,6 +1336,7 @@ input[type="radio"] {
|
|
|
1335
1336
|
&::after {
|
|
1336
1337
|
transform: scale(1);
|
|
1337
1338
|
opacity: 0.25;
|
|
1339
|
+
background-color: var(--figma-color-icon);
|
|
1338
1340
|
}
|
|
1339
1341
|
}
|
|
1340
1342
|
|
|
@@ -1343,7 +1345,7 @@ input[type="radio"] {
|
|
|
1343
1345
|
width: 0.375rem;
|
|
1344
1346
|
height: 0.375rem;
|
|
1345
1347
|
border-radius: 100%;
|
|
1346
|
-
background-color: var(--figma-color-
|
|
1348
|
+
background-color: var(--figma-color-icon-onbrand);
|
|
1347
1349
|
transform: scale(0);
|
|
1348
1350
|
box-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
|
|
1349
1351
|
0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
|
|
@@ -1533,7 +1535,7 @@ fig-slider {
|
|
|
1533
1535
|
position: absolute;
|
|
1534
1536
|
left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
|
|
1535
1537
|
top: calc(50% - var(--slider-tick-size) / 2);
|
|
1536
|
-
background: var(--figma-color-icon-
|
|
1538
|
+
background: var(--figma-color-icon-onbrand);
|
|
1537
1539
|
}
|
|
1538
1540
|
}
|
|
1539
1541
|
}
|
|
@@ -1741,11 +1743,12 @@ fig-slider {
|
|
|
1741
1743
|
display: block;
|
|
1742
1744
|
width: 100%;
|
|
1743
1745
|
box-shadow: none;
|
|
1746
|
+
background: var(--figma-color-bg-tertiary);
|
|
1744
1747
|
|
|
1745
1748
|
/* Track */
|
|
1746
1749
|
&::before {
|
|
1747
1750
|
box-shadow: none;
|
|
1748
|
-
background: var(--figma-color-text-
|
|
1751
|
+
background: var(--figma-color-text-tertiary);
|
|
1749
1752
|
}
|
|
1750
1753
|
|
|
1751
1754
|
input[type="range"] {
|
|
@@ -1764,6 +1767,7 @@ fig-slider {
|
|
|
1764
1767
|
--slider-thumb-size: 1rem;
|
|
1765
1768
|
--slider-tick-size: calc(var(--slider-height) / 4);
|
|
1766
1769
|
.fig-slider-input-container {
|
|
1770
|
+
background: var(--figma-color-bg-secondary);
|
|
1767
1771
|
&::before {
|
|
1768
1772
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
1769
1773
|
background: var(--figma-color-bg-brand);
|
|
@@ -2258,7 +2262,7 @@ fig-segmented-control {
|
|
|
2258
2262
|
&[selected="true"] {
|
|
2259
2263
|
background-color: var(--figma-color-bg);
|
|
2260
2264
|
border-radius: calc(var(--radius-medium) - 1px);
|
|
2261
|
-
box-shadow: var(--
|
|
2265
|
+
box-shadow: 0 0 0 1px var(--figma-color-border);
|
|
2262
2266
|
}
|
|
2263
2267
|
}
|
|
2264
2268
|
}
|