figma-kit 1.0.0-beta.26 → 1.0.0-beta.27
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/dist/components/slider/slider.d.ts +5 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +799 -794
- package/dist/styles.css +97 -34
- package/dist/tailwind.css +109 -34
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -568,7 +568,7 @@
|
|
|
568
568
|
bottom: 0;
|
|
569
569
|
left: 0;
|
|
570
570
|
z-index: 1;
|
|
571
|
-
width: var(--space-
|
|
571
|
+
width: var(--space-1);
|
|
572
572
|
}
|
|
573
573
|
.fp-ValueFieldScrubber[data-disabled] {
|
|
574
574
|
cursor: default;
|
|
@@ -627,22 +627,32 @@
|
|
|
627
627
|
display: flex;
|
|
628
628
|
position: relative;
|
|
629
629
|
border-radius: var(--radius-medium);
|
|
630
|
-
outline-offset: -1px;
|
|
631
630
|
box-sizing: border-box;
|
|
632
631
|
border: 1px solid transparent;
|
|
633
632
|
height: var(--space-6);
|
|
634
633
|
background-color: var(--figma-color-bg-secondary);
|
|
635
634
|
}
|
|
636
|
-
.fp-ValueFieldMulti
|
|
637
|
-
|
|
635
|
+
.fp-ValueFieldMulti::after {
|
|
636
|
+
content: '';
|
|
637
|
+
position: absolute;
|
|
638
|
+
inset: -1px;
|
|
639
|
+
border: 1px solid transparent;
|
|
640
|
+
border-radius: inherit;
|
|
641
|
+
outline-offset: -1px;
|
|
642
|
+
pointer-events: none;
|
|
643
|
+
}
|
|
644
|
+
.fp-ValueFieldMulti:hover:where(:not([data-disabled]))::after {
|
|
645
|
+
border-color: var(--figma-color-border);
|
|
638
646
|
}
|
|
639
|
-
.fp-ValueFieldMulti:focus-within {
|
|
647
|
+
.fp-ValueFieldMulti:focus-within::after {
|
|
640
648
|
outline: 1px solid var(--figma-color-border-selected);
|
|
641
649
|
}
|
|
642
650
|
.fp-ValueFieldMulti[data-disabled] {
|
|
643
|
-
border: 1px solid var(--figma-color-border-disabled);
|
|
644
651
|
background-color: var(--figma-color-bg);
|
|
645
652
|
}
|
|
653
|
+
.fp-ValueFieldMulti[data-disabled]::after {
|
|
654
|
+
border-color: var(--figma-color-border-disabled);
|
|
655
|
+
}
|
|
646
656
|
.fp-ValueFieldMulti .fp-ValueFieldRoot {
|
|
647
657
|
height: var(--space-6);
|
|
648
658
|
flex-grow: 1;
|
|
@@ -666,13 +676,34 @@
|
|
|
666
676
|
background-color: transparent;
|
|
667
677
|
padding-left: calc(var(--space-2) - 1px);
|
|
668
678
|
}
|
|
679
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot):hover:where(:not([data-disabled]))::after {
|
|
680
|
+
border-color: transparent;
|
|
681
|
+
}
|
|
682
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot):focus-within::after {
|
|
683
|
+
outline: 0;
|
|
684
|
+
}
|
|
685
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-SliderRoot {
|
|
686
|
+
align-self: center;
|
|
687
|
+
margin-inline: 10px 11px;
|
|
688
|
+
}
|
|
689
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot {
|
|
690
|
+
flex: 0 0 var(--space-14);
|
|
691
|
+
outline: 1px solid transparent;
|
|
692
|
+
outline-offset: -1px;
|
|
693
|
+
}
|
|
694
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot:hover:where(:not([data-disabled])) {
|
|
695
|
+
outline-color: var(--figma-color-border);
|
|
696
|
+
}
|
|
697
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot:focus-within {
|
|
698
|
+
outline-color: var(--figma-color-border-selected);
|
|
699
|
+
}
|
|
669
700
|
.fp-ValueFieldNumericSelect {
|
|
670
701
|
width: 100%;
|
|
671
702
|
}
|
|
672
|
-
.fp-ValueFieldNumericSelect:hover:where(:not([data-disabled])) {
|
|
703
|
+
.fp-ValueFieldNumericSelect:hover:where(:not([data-disabled]))::after {
|
|
673
704
|
border-color: transparent;
|
|
674
705
|
}
|
|
675
|
-
.fp-ValueFieldNumericSelect:has(.fp-ValueFieldNumericSelectField:hover):where(:not([data-disabled])) {
|
|
706
|
+
.fp-ValueFieldNumericSelect:has(.fp-ValueFieldNumericSelectField:hover):where(:not([data-disabled]))::after {
|
|
676
707
|
border-color: var(--figma-color-border);
|
|
677
708
|
}
|
|
678
709
|
.fp-ValueFieldNumericSelect .fp-ValueFieldNumericSelectField {
|
|
@@ -1285,9 +1316,6 @@
|
|
|
1285
1316
|
:root,
|
|
1286
1317
|
.light,
|
|
1287
1318
|
.light-theme {
|
|
1288
|
-
--slider-root-size: var(--space-6);
|
|
1289
|
-
--slider-track-size: var(--space-4);
|
|
1290
|
-
--slider-thumb-width: var(--space-4);
|
|
1291
1319
|
--slider-track-border-color: #0000001a;
|
|
1292
1320
|
--slider-track-bg: var(--figma-color-bg-secondary);
|
|
1293
1321
|
--slider-thumb-bg: transparent;
|
|
@@ -1306,13 +1334,36 @@
|
|
|
1306
1334
|
}
|
|
1307
1335
|
.fp-SliderRoot[data-orientation='horizontal'] {
|
|
1308
1336
|
height: var(--slider-root-size);
|
|
1309
|
-
border-width: 0
|
|
1337
|
+
border-width: 0 var(--slider-thumb-inset);
|
|
1310
1338
|
}
|
|
1311
1339
|
.fp-SliderRoot[data-orientation='vertical'] {
|
|
1312
1340
|
flex-direction: column;
|
|
1313
1341
|
width: var(--slider-root-size);
|
|
1314
|
-
border-width:
|
|
1342
|
+
border-width: var(--slider-thumb-inset) 0;
|
|
1315
1343
|
}
|
|
1344
|
+
.fp-SliderRoot:where(.fp-size-large) {
|
|
1345
|
+
--slider-root-size: var(--space-6);
|
|
1346
|
+
--slider-track-size: var(--space-4);
|
|
1347
|
+
--slider-thumb-size: var(--space-4);
|
|
1348
|
+
--slider-thumb-inset: calc(var(--slider-thumb-size) / 2);
|
|
1349
|
+
--slider-hint-width: var(--space-1);
|
|
1350
|
+
--slider-hint-height: var(--space-1);
|
|
1351
|
+
--slider-hint-offset: 0px;
|
|
1352
|
+
--slider-hint-radius: var(--radius-full);
|
|
1353
|
+
}
|
|
1354
|
+
.fp-SliderRoot:where(.fp-size-small) {
|
|
1355
|
+
--slider-root-size: var(--space-4);
|
|
1356
|
+
--slider-track-size: var(--space-1_5);
|
|
1357
|
+
--slider-thumb-size: var(--space-3);
|
|
1358
|
+
--slider-thumb-inset: calc(var(--slider-track-size) / 2);
|
|
1359
|
+
--slider-hint-width: 1px;
|
|
1360
|
+
--slider-hint-height: 3px;
|
|
1361
|
+
--slider-hint-offset: calc(var(--slider-track-size) / 2 + 3px + var(--slider-hint-height) / 2);
|
|
1362
|
+
--slider-hint-radius: 0;
|
|
1363
|
+
--slider-track-bg: var(--figma-color-bg-tertiary);
|
|
1364
|
+
--slider-track-border-color: transparent;
|
|
1365
|
+
--slider-thumb-bg: var(--figma-color-icon-onbrand);
|
|
1366
|
+
}
|
|
1316
1367
|
.fp-SliderControl {
|
|
1317
1368
|
position: relative;
|
|
1318
1369
|
display: flex;
|
|
@@ -1322,9 +1373,19 @@
|
|
|
1322
1373
|
height: 100%;
|
|
1323
1374
|
outline: 0;
|
|
1324
1375
|
}
|
|
1376
|
+
.fp-SliderControl::before {
|
|
1377
|
+
content: '';
|
|
1378
|
+
position: absolute;
|
|
1379
|
+
}
|
|
1380
|
+
.fp-SliderRoot[data-orientation='horizontal'] .fp-SliderControl::before {
|
|
1381
|
+
inset: calc(50% - var(--space-11) / 2) calc((var(--slider-thumb-inset) + var(--space-3)) * -1);
|
|
1382
|
+
}
|
|
1325
1383
|
.fp-SliderRoot[data-orientation='vertical'] .fp-SliderControl {
|
|
1326
1384
|
flex-direction: column;
|
|
1327
1385
|
}
|
|
1386
|
+
.fp-SliderRoot[data-orientation='vertical'] .fp-SliderControl::before {
|
|
1387
|
+
inset: calc((var(--slider-thumb-inset) + var(--space-3)) * -1) calc(50% - var(--space-11) / 2);
|
|
1388
|
+
}
|
|
1328
1389
|
.fp-SliderTrack {
|
|
1329
1390
|
box-sizing: border-box;
|
|
1330
1391
|
position: static;
|
|
@@ -1336,13 +1397,13 @@
|
|
|
1336
1397
|
outline-offset: -1px;
|
|
1337
1398
|
}
|
|
1338
1399
|
.fp-SliderTrack[data-orientation='horizontal'] {
|
|
1339
|
-
margin-left: calc(
|
|
1340
|
-
margin-right: calc(
|
|
1400
|
+
margin-left: calc(var(--slider-thumb-inset) * -1);
|
|
1401
|
+
margin-right: calc(var(--slider-thumb-inset) * -1);
|
|
1341
1402
|
height: var(--slider-track-size);
|
|
1342
1403
|
}
|
|
1343
1404
|
.fp-SliderTrack[data-orientation='vertical'] {
|
|
1344
|
-
margin-top: calc(
|
|
1345
|
-
margin-bottom: calc(
|
|
1405
|
+
margin-top: calc(var(--slider-thumb-inset) * -1);
|
|
1406
|
+
margin-bottom: calc(var(--slider-thumb-inset) * -1);
|
|
1346
1407
|
width: var(--slider-track-size);
|
|
1347
1408
|
}
|
|
1348
1409
|
.fp-SliderRange {
|
|
@@ -1353,13 +1414,13 @@
|
|
|
1353
1414
|
}
|
|
1354
1415
|
.fp-SliderRange[data-orientation='horizontal'] {
|
|
1355
1416
|
height: var(--slider-track-size);
|
|
1356
|
-
margin-left: calc(
|
|
1357
|
-
margin-right: calc(
|
|
1417
|
+
margin-left: calc(var(--slider-thumb-inset) * -1);
|
|
1418
|
+
margin-right: calc(var(--slider-thumb-inset) * -1);
|
|
1358
1419
|
}
|
|
1359
1420
|
.fp-SliderRange[data-orientation='vertical'] {
|
|
1360
1421
|
width: var(--slider-track-size);
|
|
1361
|
-
margin-top: calc(
|
|
1362
|
-
margin-bottom: calc(
|
|
1422
|
+
margin-top: calc(var(--slider-thumb-inset) * -1);
|
|
1423
|
+
margin-bottom: calc(var(--slider-thumb-inset) * -1);
|
|
1363
1424
|
}
|
|
1364
1425
|
.fp-SliderRange[data-disabled] {
|
|
1365
1426
|
background-color: var(--figma-color-bg-disabled);
|
|
@@ -1368,8 +1429,8 @@
|
|
|
1368
1429
|
box-sizing: border-box;
|
|
1369
1430
|
display: block;
|
|
1370
1431
|
z-index: 1;
|
|
1371
|
-
width: var(--slider-
|
|
1372
|
-
height: var(--slider-
|
|
1432
|
+
width: var(--slider-thumb-size);
|
|
1433
|
+
height: var(--slider-thumb-size);
|
|
1373
1434
|
background-color: var(--slider-thumb-bg);
|
|
1374
1435
|
border: 4px solid var(--figma-color-icon-onbrand);
|
|
1375
1436
|
border-radius: var(--radius-full);
|
|
@@ -1390,17 +1451,19 @@
|
|
|
1390
1451
|
.fp-SliderHint {
|
|
1391
1452
|
position: absolute;
|
|
1392
1453
|
display: block;
|
|
1393
|
-
width: var(--space-1);
|
|
1394
|
-
height: var(--space-1);
|
|
1395
1454
|
background-color: var(--figma-color-icon-tertiary);
|
|
1396
|
-
border-radius: var(--radius
|
|
1455
|
+
border-radius: var(--slider-hint-radius);
|
|
1397
1456
|
}
|
|
1398
1457
|
.fp-SliderHint[data-orientation='horizontal'] {
|
|
1399
|
-
top: 50
|
|
1458
|
+
top: calc(50% + var(--slider-hint-offset));
|
|
1459
|
+
width: var(--slider-hint-width);
|
|
1460
|
+
height: var(--slider-hint-height);
|
|
1400
1461
|
transform: translateY(-50%);
|
|
1401
1462
|
}
|
|
1402
1463
|
.fp-SliderHint[data-orientation='vertical'] {
|
|
1403
|
-
left: 50
|
|
1464
|
+
left: calc(50% + var(--slider-hint-offset));
|
|
1465
|
+
width: var(--slider-hint-height);
|
|
1466
|
+
height: var(--slider-hint-width);
|
|
1404
1467
|
transform: translateX(-50%);
|
|
1405
1468
|
}
|
|
1406
1469
|
.fp-SliderHint.fp-SliderHint-baseValue {
|
|
@@ -1739,7 +1802,7 @@
|
|
|
1739
1802
|
.fp-ColorPickerHueSlider:where(.fp-color-model-hsv, .fp-color-model-hsl, .fp-color-model-rgb, .fp-color-model-hex) {
|
|
1740
1803
|
--slider-track-bg: linear-gradient(
|
|
1741
1804
|
90deg,
|
|
1742
|
-
rgba(255, 0, 0, 1)
|
|
1805
|
+
rgba(255, 0, 0, 1) var(--slider-thumb-inset),
|
|
1743
1806
|
rgba(255, 48, 0, 1),
|
|
1744
1807
|
rgba(255, 96, 0, 1),
|
|
1745
1808
|
rgba(255, 143, 0, 1),
|
|
@@ -1770,7 +1833,7 @@
|
|
|
1770
1833
|
rgba(255, 0, 191, 1),
|
|
1771
1834
|
rgba(255, 0, 143, 1),
|
|
1772
1835
|
rgba(255, 0, 96, 1),
|
|
1773
|
-
rgba(255, 0, 48, 1) calc(100% -
|
|
1836
|
+
rgba(255, 0, 48, 1) calc(100% - var(--slider-thumb-inset))
|
|
1774
1837
|
);
|
|
1775
1838
|
}
|
|
1776
1839
|
@supports (color: color(display-p3 1 1 1)) {
|
|
@@ -1778,7 +1841,7 @@
|
|
|
1778
1841
|
.fp-ColorPickerHueSlider:where(.fp-color-model-hsv, .fp-color-model-hsl):where(.fp-color-space-display-p3) {
|
|
1779
1842
|
--slider-track-bg: linear-gradient(
|
|
1780
1843
|
90deg,
|
|
1781
|
-
color(display-p3 1 0 0)
|
|
1844
|
+
color(display-p3 1 0 0) var(--slider-thumb-inset),
|
|
1782
1845
|
color(display-p3 1 0.1875 0),
|
|
1783
1846
|
color(display-p3 1 0.375 0),
|
|
1784
1847
|
color(display-p3 1 0.5625 0),
|
|
@@ -1809,7 +1872,7 @@
|
|
|
1809
1872
|
color(display-p3 1 0 0.75),
|
|
1810
1873
|
color(display-p3 1 0 0.5625),
|
|
1811
1874
|
color(display-p3 1 0 0.375),
|
|
1812
|
-
color(display-p3 1 0 0.1875) calc(100% -
|
|
1875
|
+
color(display-p3 1 0 0.1875) calc(100% - var(--slider-thumb-inset))
|
|
1813
1876
|
);
|
|
1814
1877
|
}
|
|
1815
1878
|
}
|
|
@@ -1821,8 +1884,8 @@
|
|
|
1821
1884
|
|
|
1822
1885
|
--slider-track-bg: linear-gradient(
|
|
1823
1886
|
to right,
|
|
1824
|
-
var(--track-bg-step-1) 0
|
|
1825
|
-
var(--track-bg-step-2) calc(100% -
|
|
1887
|
+
var(--track-bg-step-1) 0 var(--slider-thumb-inset),
|
|
1888
|
+
var(--track-bg-step-2) calc(100% - var(--slider-thumb-inset)) 100%
|
|
1826
1889
|
),
|
|
1827
1890
|
url('data:image/svg+xml;utf8,%3Csvg%20width%3D%222%22%20height%3D%222%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h1v2h1V1H0%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%23e1e1e1%22/%3E%3C/svg%3E')
|
|
1828
1891
|
0 0 / auto 66.66%,
|
package/dist/tailwind.css
CHANGED
|
@@ -644,7 +644,7 @@
|
|
|
644
644
|
bottom: 0;
|
|
645
645
|
left: 0;
|
|
646
646
|
z-index: 1;
|
|
647
|
-
width: var(--space-
|
|
647
|
+
width: var(--space-1);
|
|
648
648
|
}
|
|
649
649
|
|
|
650
650
|
.fp-ValueFieldScrubber[data-disabled] {
|
|
@@ -712,26 +712,38 @@
|
|
|
712
712
|
display: flex;
|
|
713
713
|
position: relative;
|
|
714
714
|
border-radius: var(--radius-medium);
|
|
715
|
-
outline-offset: -1px;
|
|
716
715
|
box-sizing: border-box;
|
|
717
716
|
border: 1px solid transparent;
|
|
718
717
|
height: var(--space-6);
|
|
719
718
|
background-color: var(--figma-color-bg-secondary);
|
|
720
719
|
}
|
|
721
720
|
|
|
722
|
-
.fp-ValueFieldMulti
|
|
723
|
-
|
|
721
|
+
.fp-ValueFieldMulti::after {
|
|
722
|
+
content: '';
|
|
723
|
+
position: absolute;
|
|
724
|
+
inset: -1px;
|
|
725
|
+
border: 1px solid transparent;
|
|
726
|
+
border-radius: inherit;
|
|
727
|
+
outline-offset: -1px;
|
|
728
|
+
pointer-events: none;
|
|
724
729
|
}
|
|
725
730
|
|
|
726
|
-
.fp-ValueFieldMulti:
|
|
731
|
+
.fp-ValueFieldMulti:hover:where(:not([data-disabled]))::after {
|
|
732
|
+
border-color: var(--figma-color-border);
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.fp-ValueFieldMulti:focus-within::after {
|
|
727
736
|
outline: 1px solid var(--figma-color-border-selected);
|
|
728
737
|
}
|
|
729
738
|
|
|
730
739
|
.fp-ValueFieldMulti[data-disabled] {
|
|
731
|
-
border: 1px solid var(--figma-color-border-disabled);
|
|
732
740
|
background-color: var(--figma-color-bg);
|
|
733
741
|
}
|
|
734
742
|
|
|
743
|
+
.fp-ValueFieldMulti[data-disabled]::after {
|
|
744
|
+
border-color: var(--figma-color-border-disabled);
|
|
745
|
+
}
|
|
746
|
+
|
|
735
747
|
.fp-ValueFieldMulti .fp-ValueFieldRoot {
|
|
736
748
|
height: var(--space-6);
|
|
737
749
|
flex-grow: 1;
|
|
@@ -759,16 +771,42 @@
|
|
|
759
771
|
background-color: transparent;
|
|
760
772
|
padding-left: calc(var(--space-2) - 1px);
|
|
761
773
|
}
|
|
774
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot):hover:where(:not([data-disabled]))::after {
|
|
775
|
+
border-color: transparent;
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot):focus-within::after {
|
|
779
|
+
outline: 0;
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-SliderRoot {
|
|
783
|
+
align-self: center;
|
|
784
|
+
margin-inline: 10px 11px;
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot {
|
|
788
|
+
flex: 0 0 var(--space-14);
|
|
789
|
+
outline: 1px solid transparent;
|
|
790
|
+
outline-offset: -1px;
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot:hover:where(:not([data-disabled])) {
|
|
794
|
+
outline-color: var(--figma-color-border);
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot:focus-within {
|
|
798
|
+
outline-color: var(--figma-color-border-selected);
|
|
799
|
+
}
|
|
762
800
|
|
|
763
801
|
.fp-ValueFieldNumericSelect {
|
|
764
802
|
width: 100%;
|
|
765
803
|
}
|
|
766
804
|
|
|
767
|
-
.fp-ValueFieldNumericSelect:hover:where(:not([data-disabled])) {
|
|
805
|
+
.fp-ValueFieldNumericSelect:hover:where(:not([data-disabled]))::after {
|
|
768
806
|
border-color: transparent;
|
|
769
807
|
}
|
|
770
808
|
|
|
771
|
-
.fp-ValueFieldNumericSelect:has(.fp-ValueFieldNumericSelectField:hover):where(:not([data-disabled])) {
|
|
809
|
+
.fp-ValueFieldNumericSelect:has(.fp-ValueFieldNumericSelectField:hover):where(:not([data-disabled]))::after {
|
|
772
810
|
border-color: var(--figma-color-border);
|
|
773
811
|
}
|
|
774
812
|
|
|
@@ -1508,9 +1546,6 @@
|
|
|
1508
1546
|
:root,
|
|
1509
1547
|
.light,
|
|
1510
1548
|
.light-theme {
|
|
1511
|
-
--slider-root-size: var(--space-6);
|
|
1512
|
-
--slider-track-size: var(--space-4);
|
|
1513
|
-
--slider-thumb-width: var(--space-4);
|
|
1514
1549
|
--slider-track-border-color: #0000001a;
|
|
1515
1550
|
--slider-track-bg: var(--figma-color-bg-secondary);
|
|
1516
1551
|
--slider-thumb-bg: transparent;
|
|
@@ -1532,15 +1567,40 @@
|
|
|
1532
1567
|
|
|
1533
1568
|
.fp-SliderRoot[data-orientation='horizontal'] {
|
|
1534
1569
|
height: var(--slider-root-size);
|
|
1535
|
-
border-width: 0
|
|
1570
|
+
border-width: 0 var(--slider-thumb-inset);
|
|
1536
1571
|
}
|
|
1537
1572
|
|
|
1538
1573
|
.fp-SliderRoot[data-orientation='vertical'] {
|
|
1539
1574
|
flex-direction: column;
|
|
1540
1575
|
width: var(--slider-root-size);
|
|
1541
|
-
border-width:
|
|
1576
|
+
border-width: var(--slider-thumb-inset) 0;
|
|
1542
1577
|
}
|
|
1543
1578
|
|
|
1579
|
+
.fp-SliderRoot:where(.fp-size-large) {
|
|
1580
|
+
--slider-root-size: var(--space-6);
|
|
1581
|
+
--slider-track-size: var(--space-4);
|
|
1582
|
+
--slider-thumb-size: var(--space-4);
|
|
1583
|
+
--slider-thumb-inset: calc(var(--slider-thumb-size) / 2);
|
|
1584
|
+
--slider-hint-width: var(--space-1);
|
|
1585
|
+
--slider-hint-height: var(--space-1);
|
|
1586
|
+
--slider-hint-offset: 0px;
|
|
1587
|
+
--slider-hint-radius: var(--radius-full);
|
|
1588
|
+
}
|
|
1589
|
+
|
|
1590
|
+
.fp-SliderRoot:where(.fp-size-small) {
|
|
1591
|
+
--slider-root-size: var(--space-4);
|
|
1592
|
+
--slider-track-size: var(--space-1_5);
|
|
1593
|
+
--slider-thumb-size: var(--space-3);
|
|
1594
|
+
--slider-thumb-inset: calc(var(--slider-track-size) / 2);
|
|
1595
|
+
--slider-hint-width: 1px;
|
|
1596
|
+
--slider-hint-height: 3px;
|
|
1597
|
+
--slider-hint-offset: calc(var(--slider-track-size) / 2 + 3px + var(--slider-hint-height) / 2);
|
|
1598
|
+
--slider-hint-radius: 0;
|
|
1599
|
+
--slider-track-bg: var(--figma-color-bg-tertiary);
|
|
1600
|
+
--slider-track-border-color: transparent;
|
|
1601
|
+
--slider-thumb-bg: var(--figma-color-icon-onbrand);
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1544
1604
|
.fp-SliderControl {
|
|
1545
1605
|
position: relative;
|
|
1546
1606
|
display: flex;
|
|
@@ -1551,10 +1611,23 @@
|
|
|
1551
1611
|
outline: 0;
|
|
1552
1612
|
}
|
|
1553
1613
|
|
|
1614
|
+
.fp-SliderControl::before {
|
|
1615
|
+
content: '';
|
|
1616
|
+
position: absolute;
|
|
1617
|
+
}
|
|
1618
|
+
|
|
1619
|
+
.fp-SliderRoot[data-orientation='horizontal'] .fp-SliderControl::before {
|
|
1620
|
+
inset: calc(50% - var(--space-11) / 2) calc((var(--slider-thumb-inset) + var(--space-3)) * -1);
|
|
1621
|
+
}
|
|
1622
|
+
|
|
1554
1623
|
.fp-SliderRoot[data-orientation='vertical'] .fp-SliderControl {
|
|
1555
1624
|
flex-direction: column;
|
|
1556
1625
|
}
|
|
1557
1626
|
|
|
1627
|
+
.fp-SliderRoot[data-orientation='vertical'] .fp-SliderControl::before {
|
|
1628
|
+
inset: calc((var(--slider-thumb-inset) + var(--space-3)) * -1) calc(50% - var(--space-11) / 2);
|
|
1629
|
+
}
|
|
1630
|
+
|
|
1558
1631
|
.fp-SliderTrack {
|
|
1559
1632
|
box-sizing: border-box;
|
|
1560
1633
|
position: static;
|
|
@@ -1567,14 +1640,14 @@
|
|
|
1567
1640
|
}
|
|
1568
1641
|
|
|
1569
1642
|
.fp-SliderTrack[data-orientation='horizontal'] {
|
|
1570
|
-
margin-left: calc(
|
|
1571
|
-
margin-right: calc(
|
|
1643
|
+
margin-left: calc(var(--slider-thumb-inset) * -1);
|
|
1644
|
+
margin-right: calc(var(--slider-thumb-inset) * -1);
|
|
1572
1645
|
height: var(--slider-track-size);
|
|
1573
1646
|
}
|
|
1574
1647
|
|
|
1575
1648
|
.fp-SliderTrack[data-orientation='vertical'] {
|
|
1576
|
-
margin-top: calc(
|
|
1577
|
-
margin-bottom: calc(
|
|
1649
|
+
margin-top: calc(var(--slider-thumb-inset) * -1);
|
|
1650
|
+
margin-bottom: calc(var(--slider-thumb-inset) * -1);
|
|
1578
1651
|
width: var(--slider-track-size);
|
|
1579
1652
|
}
|
|
1580
1653
|
|
|
@@ -1587,14 +1660,14 @@
|
|
|
1587
1660
|
|
|
1588
1661
|
.fp-SliderRange[data-orientation='horizontal'] {
|
|
1589
1662
|
height: var(--slider-track-size);
|
|
1590
|
-
margin-left: calc(
|
|
1591
|
-
margin-right: calc(
|
|
1663
|
+
margin-left: calc(var(--slider-thumb-inset) * -1);
|
|
1664
|
+
margin-right: calc(var(--slider-thumb-inset) * -1);
|
|
1592
1665
|
}
|
|
1593
1666
|
|
|
1594
1667
|
.fp-SliderRange[data-orientation='vertical'] {
|
|
1595
1668
|
width: var(--slider-track-size);
|
|
1596
|
-
margin-top: calc(
|
|
1597
|
-
margin-bottom: calc(
|
|
1669
|
+
margin-top: calc(var(--slider-thumb-inset) * -1);
|
|
1670
|
+
margin-bottom: calc(var(--slider-thumb-inset) * -1);
|
|
1598
1671
|
}
|
|
1599
1672
|
|
|
1600
1673
|
.fp-SliderRange[data-disabled] {
|
|
@@ -1605,8 +1678,8 @@
|
|
|
1605
1678
|
box-sizing: border-box;
|
|
1606
1679
|
display: block;
|
|
1607
1680
|
z-index: 1;
|
|
1608
|
-
width: var(--slider-
|
|
1609
|
-
height: var(--slider-
|
|
1681
|
+
width: var(--slider-thumb-size);
|
|
1682
|
+
height: var(--slider-thumb-size);
|
|
1610
1683
|
background-color: var(--slider-thumb-bg);
|
|
1611
1684
|
border: 4px solid var(--figma-color-icon-onbrand);
|
|
1612
1685
|
border-radius: var(--radius-full);
|
|
@@ -1631,19 +1704,21 @@
|
|
|
1631
1704
|
.fp-SliderHint {
|
|
1632
1705
|
position: absolute;
|
|
1633
1706
|
display: block;
|
|
1634
|
-
width: var(--space-1);
|
|
1635
|
-
height: var(--space-1);
|
|
1636
1707
|
background-color: var(--figma-color-icon-tertiary);
|
|
1637
|
-
border-radius: var(--radius
|
|
1708
|
+
border-radius: var(--slider-hint-radius);
|
|
1638
1709
|
}
|
|
1639
1710
|
|
|
1640
1711
|
.fp-SliderHint[data-orientation='horizontal'] {
|
|
1641
|
-
top: 50
|
|
1712
|
+
top: calc(50% + var(--slider-hint-offset));
|
|
1713
|
+
width: var(--slider-hint-width);
|
|
1714
|
+
height: var(--slider-hint-height);
|
|
1642
1715
|
transform: translateY(-50%);
|
|
1643
1716
|
}
|
|
1644
1717
|
|
|
1645
1718
|
.fp-SliderHint[data-orientation='vertical'] {
|
|
1646
|
-
left: 50
|
|
1719
|
+
left: calc(50% + var(--slider-hint-offset));
|
|
1720
|
+
width: var(--slider-hint-height);
|
|
1721
|
+
height: var(--slider-hint-width);
|
|
1647
1722
|
transform: translateX(-50%);
|
|
1648
1723
|
}
|
|
1649
1724
|
|
|
@@ -2066,7 +2141,7 @@
|
|
|
2066
2141
|
.fp-ColorPickerHueSlider:where(.fp-color-model-hsv, .fp-color-model-hsl, .fp-color-model-rgb, .fp-color-model-hex) {
|
|
2067
2142
|
--slider-track-bg: linear-gradient(
|
|
2068
2143
|
90deg,
|
|
2069
|
-
rgba(255, 0, 0, 1)
|
|
2144
|
+
rgba(255, 0, 0, 1) var(--slider-thumb-inset),
|
|
2070
2145
|
rgba(255, 48, 0, 1),
|
|
2071
2146
|
rgba(255, 96, 0, 1),
|
|
2072
2147
|
rgba(255, 143, 0, 1),
|
|
@@ -2097,7 +2172,7 @@
|
|
|
2097
2172
|
rgba(255, 0, 191, 1),
|
|
2098
2173
|
rgba(255, 0, 143, 1),
|
|
2099
2174
|
rgba(255, 0, 96, 1),
|
|
2100
|
-
rgba(255, 0, 48, 1) calc(100% -
|
|
2175
|
+
rgba(255, 0, 48, 1) calc(100% - var(--slider-thumb-inset))
|
|
2101
2176
|
);
|
|
2102
2177
|
}
|
|
2103
2178
|
@supports (color: color(display-p3 1 1 1)) {
|
|
@@ -2106,7 +2181,7 @@
|
|
|
2106
2181
|
.fp-ColorPickerHueSlider:where(.fp-color-model-hsv, .fp-color-model-hsl):where(.fp-color-space-display-p3) {
|
|
2107
2182
|
--slider-track-bg: linear-gradient(
|
|
2108
2183
|
90deg,
|
|
2109
|
-
color(display-p3 1 0 0)
|
|
2184
|
+
color(display-p3 1 0 0) var(--slider-thumb-inset),
|
|
2110
2185
|
color(display-p3 1 0.1875 0),
|
|
2111
2186
|
color(display-p3 1 0.375 0),
|
|
2112
2187
|
color(display-p3 1 0.5625 0),
|
|
@@ -2137,7 +2212,7 @@
|
|
|
2137
2212
|
color(display-p3 1 0 0.75),
|
|
2138
2213
|
color(display-p3 1 0 0.5625),
|
|
2139
2214
|
color(display-p3 1 0 0.375),
|
|
2140
|
-
color(display-p3 1 0 0.1875) calc(100% -
|
|
2215
|
+
color(display-p3 1 0 0.1875) calc(100% - var(--slider-thumb-inset))
|
|
2141
2216
|
);
|
|
2142
2217
|
}
|
|
2143
2218
|
}
|
|
@@ -2150,8 +2225,8 @@
|
|
|
2150
2225
|
|
|
2151
2226
|
--slider-track-bg: linear-gradient(
|
|
2152
2227
|
to right,
|
|
2153
|
-
var(--track-bg-step-1) 0
|
|
2154
|
-
var(--track-bg-step-2) calc(100% -
|
|
2228
|
+
var(--track-bg-step-1) 0 var(--slider-thumb-inset),
|
|
2229
|
+
var(--track-bg-step-2) calc(100% - var(--slider-thumb-inset)) 100%
|
|
2155
2230
|
),
|
|
2156
2231
|
url('data:image/svg+xml;utf8,%3Csvg%20width%3D%222%22%20height%3D%222%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h1v2h1V1H0%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%23e1e1e1%22/%3E%3C/svg%3E')
|
|
2157
2232
|
0 0 / auto 66.66%,
|
package/package.json
CHANGED