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/styles.css CHANGED
@@ -568,7 +568,7 @@
568
568
  bottom: 0;
569
569
  left: 0;
570
570
  z-index: 1;
571
- width: var(--space-6);
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:hover:where(:not([data-disabled])) {
637
- border: 1px solid var(--figma-color-border);
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 calc(var(--slider-thumb-width) / 2);
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: calc(var(--slider-thumb-width) / 2) 0;
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((var(--slider-thumb-width) / 2) * -1);
1340
- margin-right: calc((var(--slider-thumb-width) / 2) * -1);
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((var(--slider-thumb-width) / 2) * -1);
1345
- margin-bottom: calc((var(--slider-thumb-width) / 2) * -1);
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((var(--slider-thumb-width) / 2) * -1);
1357
- margin-right: calc((var(--slider-thumb-width) / 2) * -1);
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((var(--slider-thumb-width) / 2) * -1);
1362
- margin-bottom: calc((var(--slider-thumb-width) / 2) * -1);
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-track-size);
1372
- height: var(--slider-track-size);
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-full);
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) calc(var(--slider-track-size) / 2),
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% - calc(var(--slider-track-size) / 2))
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) calc(var(--slider-track-size) / 2),
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% - calc(var(--slider-track-size) / 2))
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 calc(var(--slider-track-size) / 2),
1825
- var(--track-bg-step-2) calc(100% - calc(var(--slider-track-size) / 2)) 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-6);
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:hover:where(:not([data-disabled])) {
723
- border: 1px solid var(--figma-color-border);
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:focus-within {
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 calc(var(--slider-thumb-width) / 2);
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: calc(var(--slider-thumb-width) / 2) 0;
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((var(--slider-thumb-width) / 2) * -1);
1571
- margin-right: calc((var(--slider-thumb-width) / 2) * -1);
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((var(--slider-thumb-width) / 2) * -1);
1577
- margin-bottom: calc((var(--slider-thumb-width) / 2) * -1);
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((var(--slider-thumb-width) / 2) * -1);
1591
- margin-right: calc((var(--slider-thumb-width) / 2) * -1);
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((var(--slider-thumb-width) / 2) * -1);
1597
- margin-bottom: calc((var(--slider-thumb-width) / 2) * -1);
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-track-size);
1609
- height: var(--slider-track-size);
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-full);
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) calc(var(--slider-track-size) / 2),
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% - calc(var(--slider-track-size) / 2))
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) calc(var(--slider-track-size) / 2),
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% - calc(var(--slider-track-size) / 2))
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 calc(var(--slider-track-size) / 2),
2154
- var(--track-bg-step-2) calc(100% - calc(var(--slider-track-size) / 2)) 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
@@ -2,7 +2,7 @@
2
2
  "name": "figma-kit",
3
3
  "description": "A set of React components for building Figma plugins.",
4
4
  "homepage": "https://figma-kit.dev",
5
- "version": "1.0.0-beta.26",
5
+ "version": "1.0.0-beta.27",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",