@primer/primitives 8.2.0-rc.d4121ebd → 8.2.1-rc.0c78ef35

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.
Files changed (53) hide show
  1. package/README.md +2 -3
  2. package/dist/css/functional/size/size-coarse.css +7 -0
  3. package/dist/css/functional/size/size-fine.css +7 -0
  4. package/dist/css/functional/themes/dark-colorblind.css +20 -0
  5. package/dist/css/functional/themes/dark-dimmed.css +20 -0
  6. package/dist/css/functional/themes/dark-high-contrast.css +20 -0
  7. package/dist/css/functional/themes/dark-tritanopia.css +20 -0
  8. package/dist/css/functional/themes/dark.css +20 -0
  9. package/dist/css/functional/themes/light-colorblind.css +20 -0
  10. package/dist/css/functional/themes/light-high-contrast.css +20 -0
  11. package/dist/css/functional/themes/light-tritanopia.css +20 -0
  12. package/dist/css/functional/themes/light.css +20 -0
  13. package/dist/css/primitives.css +189 -0
  14. package/dist/docs/functional/themes/dark-colorblind.json +300 -10
  15. package/dist/docs/functional/themes/dark-dimmed.json +300 -10
  16. package/dist/docs/functional/themes/dark-high-contrast.json +300 -10
  17. package/dist/docs/functional/themes/dark-tritanopia.json +300 -10
  18. package/dist/docs/functional/themes/dark.json +300 -10
  19. package/dist/docs/functional/themes/light-colorblind.json +300 -10
  20. package/dist/docs/functional/themes/light-high-contrast.json +300 -10
  21. package/dist/docs/functional/themes/light-tritanopia.json +300 -10
  22. package/dist/docs/functional/themes/light.json +300 -10
  23. package/dist/figma/themes/dark-colorblind.json +160 -0
  24. package/dist/figma/themes/dark-dimmed.json +160 -0
  25. package/dist/figma/themes/dark-high-contrast.json +160 -0
  26. package/dist/figma/themes/dark-tritanopia.json +160 -0
  27. package/dist/figma/themes/dark.json +160 -0
  28. package/dist/figma/themes/light-colorblind.json +160 -0
  29. package/dist/figma/themes/light-high-contrast.json +160 -0
  30. package/dist/figma/themes/light-tritanopia.json +160 -0
  31. package/dist/figma/themes/light.json +160 -0
  32. package/dist/internalCss/dark-colorblind.css +20 -0
  33. package/dist/internalCss/dark-dimmed.css +20 -0
  34. package/dist/internalCss/dark-high-contrast.css +20 -0
  35. package/dist/internalCss/dark-tritanopia.css +20 -0
  36. package/dist/internalCss/dark.css +20 -0
  37. package/dist/internalCss/light-colorblind.css +20 -0
  38. package/dist/internalCss/light-high-contrast.css +20 -0
  39. package/dist/internalCss/light-tritanopia.css +20 -0
  40. package/dist/internalCss/light.css +20 -0
  41. package/dist/styleLint/functional/themes/dark-colorblind.json +300 -10
  42. package/dist/styleLint/functional/themes/dark-dimmed.json +300 -10
  43. package/dist/styleLint/functional/themes/dark-high-contrast.json +300 -10
  44. package/dist/styleLint/functional/themes/dark-tritanopia.json +300 -10
  45. package/dist/styleLint/functional/themes/dark.json +300 -10
  46. package/dist/styleLint/functional/themes/light-colorblind.json +300 -10
  47. package/dist/styleLint/functional/themes/light-high-contrast.json +300 -10
  48. package/dist/styleLint/functional/themes/light-tritanopia.json +300 -10
  49. package/dist/styleLint/functional/themes/light.json +300 -10
  50. package/package.json +1 -1
  51. package/src/platforms/css.ts +2 -2
  52. package/src/tokens/functional/color/dark/data-vis-dark.json5 +220 -80
  53. package/src/tokens/functional/color/light/data-vis-light.json5 +220 -80
@@ -1202,7 +1202,36 @@
1202
1202
  },
1203
1203
  "name": "data-blue-color",
1204
1204
  "attributes": {},
1205
- "path": ["data", "blue", "color"]
1205
+ "path": ["data", "blue", "color", "@"]
1206
+ },
1207
+ "data-blue-color-muted": {
1208
+ "value": "#d1f0ff",
1209
+ "$type": "color",
1210
+ "$extensions": {
1211
+ "org.primer.figma": {
1212
+ "collection": "mode",
1213
+ "mode": "dark",
1214
+ "group": "component",
1215
+ "scopes": ["bgColor"]
1216
+ }
1217
+ },
1218
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1219
+ "isSource": true,
1220
+ "original": {
1221
+ "value": "{base.display.color.blue.0}",
1222
+ "$type": "color",
1223
+ "$extensions": {
1224
+ "org.primer.figma": {
1225
+ "collection": "mode",
1226
+ "mode": "dark",
1227
+ "group": "component",
1228
+ "scopes": ["bgColor"]
1229
+ }
1230
+ }
1231
+ },
1232
+ "name": "data-blue-color-muted",
1233
+ "attributes": {},
1234
+ "path": ["data", "blue", "color", "muted"]
1206
1235
  },
1207
1236
  "data-auburn-color": {
1208
1237
  "value": "#9d615c",
@@ -1231,7 +1260,36 @@
1231
1260
  },
1232
1261
  "name": "data-auburn-color",
1233
1262
  "attributes": {},
1234
- "path": ["data", "auburn", "color"]
1263
+ "path": ["data", "auburn", "color", "@"]
1264
+ },
1265
+ "data-auburn-color-muted": {
1266
+ "value": "#f2e9e9",
1267
+ "$type": "color",
1268
+ "$extensions": {
1269
+ "org.primer.figma": {
1270
+ "collection": "mode",
1271
+ "mode": "dark",
1272
+ "group": "component",
1273
+ "scopes": ["bgColor"]
1274
+ }
1275
+ },
1276
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1277
+ "isSource": true,
1278
+ "original": {
1279
+ "value": "{base.display.color.auburn.0}",
1280
+ "$type": "color",
1281
+ "$extensions": {
1282
+ "org.primer.figma": {
1283
+ "collection": "mode",
1284
+ "mode": "dark",
1285
+ "group": "component",
1286
+ "scopes": ["bgColor"]
1287
+ }
1288
+ }
1289
+ },
1290
+ "name": "data-auburn-color-muted",
1291
+ "attributes": {},
1292
+ "path": ["data", "auburn", "color", "muted"]
1235
1293
  },
1236
1294
  "data-orange-color": {
1237
1295
  "value": "#eb670f",
@@ -1260,7 +1318,36 @@
1260
1318
  },
1261
1319
  "name": "data-orange-color",
1262
1320
  "attributes": {},
1263
- "path": ["data", "orange", "color"]
1321
+ "path": ["data", "orange", "color", "@"]
1322
+ },
1323
+ "data-orange-color-muted": {
1324
+ "value": "#ffe7d1",
1325
+ "$type": "color",
1326
+ "$extensions": {
1327
+ "org.primer.figma": {
1328
+ "collection": "mode",
1329
+ "mode": "dark",
1330
+ "group": "component",
1331
+ "scopes": ["bgColor"]
1332
+ }
1333
+ },
1334
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1335
+ "isSource": true,
1336
+ "original": {
1337
+ "value": "{base.display.color.orange.0}",
1338
+ "$type": "color",
1339
+ "$extensions": {
1340
+ "org.primer.figma": {
1341
+ "collection": "mode",
1342
+ "mode": "dark",
1343
+ "group": "component",
1344
+ "scopes": ["bgColor"]
1345
+ }
1346
+ }
1347
+ },
1348
+ "name": "data-orange-color-muted",
1349
+ "attributes": {},
1350
+ "path": ["data", "orange", "color", "muted"]
1264
1351
  },
1265
1352
  "data-yellow-color": {
1266
1353
  "value": "#b88700",
@@ -1289,7 +1376,36 @@
1289
1376
  },
1290
1377
  "name": "data-yellow-color",
1291
1378
  "attributes": {},
1292
- "path": ["data", "yellow", "color"]
1379
+ "path": ["data", "yellow", "color", "@"]
1380
+ },
1381
+ "data-yellow-color-muted": {
1382
+ "value": "#ffec9e",
1383
+ "$type": "color",
1384
+ "$extensions": {
1385
+ "org.primer.figma": {
1386
+ "collection": "mode",
1387
+ "mode": "dark",
1388
+ "group": "component",
1389
+ "scopes": ["bgColor"]
1390
+ }
1391
+ },
1392
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1393
+ "isSource": true,
1394
+ "original": {
1395
+ "value": "{base.display.color.yellow.0}",
1396
+ "$type": "color",
1397
+ "$extensions": {
1398
+ "org.primer.figma": {
1399
+ "collection": "mode",
1400
+ "mode": "dark",
1401
+ "group": "component",
1402
+ "scopes": ["bgColor"]
1403
+ }
1404
+ }
1405
+ },
1406
+ "name": "data-yellow-color-muted",
1407
+ "attributes": {},
1408
+ "path": ["data", "yellow", "color", "muted"]
1293
1409
  },
1294
1410
  "data-green-color": {
1295
1411
  "value": "#30a147",
@@ -1318,7 +1434,36 @@
1318
1434
  },
1319
1435
  "name": "data-green-color",
1320
1436
  "attributes": {},
1321
- "path": ["data", "green", "color"]
1437
+ "path": ["data", "green", "color", "@"]
1438
+ },
1439
+ "data-green-color-muted": {
1440
+ "value": "#caf7ca",
1441
+ "$type": "color",
1442
+ "$extensions": {
1443
+ "org.primer.figma": {
1444
+ "collection": "mode",
1445
+ "mode": "dark",
1446
+ "group": "component",
1447
+ "scopes": ["bgColor"]
1448
+ }
1449
+ },
1450
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1451
+ "isSource": true,
1452
+ "original": {
1453
+ "value": "{base.display.color.green.0}",
1454
+ "$type": "color",
1455
+ "$extensions": {
1456
+ "org.primer.figma": {
1457
+ "collection": "mode",
1458
+ "mode": "dark",
1459
+ "group": "component",
1460
+ "scopes": ["bgColor"]
1461
+ }
1462
+ }
1463
+ },
1464
+ "name": "data-green-color-muted",
1465
+ "attributes": {},
1466
+ "path": ["data", "green", "color", "muted"]
1322
1467
  },
1323
1468
  "data-teal-color": {
1324
1469
  "value": "#179b9b",
@@ -1347,7 +1492,36 @@
1347
1492
  },
1348
1493
  "name": "data-teal-color",
1349
1494
  "attributes": {},
1350
- "path": ["data", "teal", "color"]
1495
+ "path": ["data", "teal", "color", "@"]
1496
+ },
1497
+ "data-teal-color-muted": {
1498
+ "value": "#c7f5ef",
1499
+ "$type": "color",
1500
+ "$extensions": {
1501
+ "org.primer.figma": {
1502
+ "collection": "mode",
1503
+ "mode": "dark",
1504
+ "group": "component",
1505
+ "scopes": ["bgColor"]
1506
+ }
1507
+ },
1508
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1509
+ "isSource": true,
1510
+ "original": {
1511
+ "value": "{base.display.color.teal.0}",
1512
+ "$type": "color",
1513
+ "$extensions": {
1514
+ "org.primer.figma": {
1515
+ "collection": "mode",
1516
+ "mode": "dark",
1517
+ "group": "component",
1518
+ "scopes": ["bgColor"]
1519
+ }
1520
+ }
1521
+ },
1522
+ "name": "data-teal-color-muted",
1523
+ "attributes": {},
1524
+ "path": ["data", "teal", "color", "muted"]
1351
1525
  },
1352
1526
  "data-purple-color": {
1353
1527
  "value": "#894ceb",
@@ -1376,7 +1550,36 @@
1376
1550
  },
1377
1551
  "name": "data-purple-color",
1378
1552
  "attributes": {},
1379
- "path": ["data", "purple", "color"]
1553
+ "path": ["data", "purple", "color", "@"]
1554
+ },
1555
+ "data-purple-color-muted": {
1556
+ "value": "#f1e5ff",
1557
+ "$type": "color",
1558
+ "$extensions": {
1559
+ "org.primer.figma": {
1560
+ "collection": "mode",
1561
+ "mode": "dark",
1562
+ "group": "component",
1563
+ "scopes": ["bgColor"]
1564
+ }
1565
+ },
1566
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1567
+ "isSource": true,
1568
+ "original": {
1569
+ "value": "{base.display.color.purple.0}",
1570
+ "$type": "color",
1571
+ "$extensions": {
1572
+ "org.primer.figma": {
1573
+ "collection": "mode",
1574
+ "mode": "dark",
1575
+ "group": "component",
1576
+ "scopes": ["bgColor"]
1577
+ }
1578
+ }
1579
+ },
1580
+ "name": "data-purple-color-muted",
1581
+ "attributes": {},
1582
+ "path": ["data", "purple", "color", "muted"]
1380
1583
  },
1381
1584
  "data-pink-color": {
1382
1585
  "value": "#ce2c85",
@@ -1405,7 +1608,36 @@
1405
1608
  },
1406
1609
  "name": "data-pink-color",
1407
1610
  "attributes": {},
1408
- "path": ["data", "pink", "color"]
1611
+ "path": ["data", "pink", "color", "@"]
1612
+ },
1613
+ "data-pink-color-muted": {
1614
+ "value": "#ffe5f1",
1615
+ "$type": "color",
1616
+ "$extensions": {
1617
+ "org.primer.figma": {
1618
+ "collection": "mode",
1619
+ "mode": "dark",
1620
+ "group": "component",
1621
+ "scopes": ["bgColor"]
1622
+ }
1623
+ },
1624
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1625
+ "isSource": true,
1626
+ "original": {
1627
+ "value": "{base.display.color.pink.0}",
1628
+ "$type": "color",
1629
+ "$extensions": {
1630
+ "org.primer.figma": {
1631
+ "collection": "mode",
1632
+ "mode": "dark",
1633
+ "group": "component",
1634
+ "scopes": ["bgColor"]
1635
+ }
1636
+ }
1637
+ },
1638
+ "name": "data-pink-color-muted",
1639
+ "attributes": {},
1640
+ "path": ["data", "pink", "color", "muted"]
1409
1641
  },
1410
1642
  "data-red-color": {
1411
1643
  "value": "#df0c24",
@@ -1434,7 +1666,36 @@
1434
1666
  },
1435
1667
  "name": "data-red-color",
1436
1668
  "attributes": {},
1437
- "path": ["data", "red", "color"]
1669
+ "path": ["data", "red", "color", "@"]
1670
+ },
1671
+ "data-red-color-muted": {
1672
+ "value": "#ffe2e0",
1673
+ "$type": "color",
1674
+ "$extensions": {
1675
+ "org.primer.figma": {
1676
+ "collection": "mode",
1677
+ "mode": "dark",
1678
+ "group": "component",
1679
+ "scopes": ["bgColor"]
1680
+ }
1681
+ },
1682
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1683
+ "isSource": true,
1684
+ "original": {
1685
+ "value": "{base.display.color.red.0}",
1686
+ "$type": "color",
1687
+ "$extensions": {
1688
+ "org.primer.figma": {
1689
+ "collection": "mode",
1690
+ "mode": "dark",
1691
+ "group": "component",
1692
+ "scopes": ["bgColor"]
1693
+ }
1694
+ }
1695
+ },
1696
+ "name": "data-red-color-muted",
1697
+ "attributes": {},
1698
+ "path": ["data", "red", "color", "muted"]
1438
1699
  },
1439
1700
  "data-gray-color": {
1440
1701
  "value": "#808fa3",
@@ -1463,7 +1724,36 @@
1463
1724
  },
1464
1725
  "name": "data-gray-color",
1465
1726
  "attributes": {},
1466
- "path": ["data", "gray", "color"]
1727
+ "path": ["data", "gray", "color", "@"]
1728
+ },
1729
+ "data-gray-color-muted": {
1730
+ "value": "#e8ecf2",
1731
+ "$type": "color",
1732
+ "$extensions": {
1733
+ "org.primer.figma": {
1734
+ "collection": "mode",
1735
+ "mode": "dark",
1736
+ "group": "component",
1737
+ "scopes": ["bgColor"]
1738
+ }
1739
+ },
1740
+ "filePath": "src/tokens/functional/color/light/data-vis-light.json5",
1741
+ "isSource": true,
1742
+ "original": {
1743
+ "value": "{base.display.color.gray.0}",
1744
+ "$type": "color",
1745
+ "$extensions": {
1746
+ "org.primer.figma": {
1747
+ "collection": "mode",
1748
+ "mode": "dark",
1749
+ "group": "component",
1750
+ "scopes": ["bgColor"]
1751
+ }
1752
+ }
1753
+ },
1754
+ "name": "data-gray-color-muted",
1755
+ "attributes": {},
1756
+ "path": ["data", "gray", "color", "muted"]
1467
1757
  },
1468
1758
  "display-blue-bgColor-muted": {
1469
1759
  "value": "#d1f0ff",