@adobe/spectrum-tokens 12.0.0-beta.15 → 12.0.0-beta.18

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 (9) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/config.js +1 -1
  3. package/dist/json/variables.json +484 -140
  4. package/package.json +1 -1
  5. package/{tokens → src}/color-alias.json +64 -0
  6. package/{tokens → src}/color-semantic.json +0 -0
  7. package/{tokens → src}/color.json +0 -0
  8. package/{tokens → src}/component-layout.json +112 -80
  9. package/{tokens → src}/layout.json +84 -60
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
- # [12.0.0-beta.15](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.14...v12.0.0-beta.15) (2022-04-08)
1
+ # [12.0.0-beta.18](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.17...v12.0.0-beta.18) (2022-04-21)
2
2
 
3
3
 
4
4
  ### Bug Fixes
5
5
 
6
- * update readme to call out beta ([d6f4d6a](https://github.com/adobe/spectrum-tokens/commit/d6f4d6a6b8caeb3410d807505f6323fc76e357c7))
6
+ * correct nested sets, they were missing another sets object ([68dfd60](https://github.com/adobe/spectrum-tokens/commit/68dfd60f6d930d042788c8616e214aa15042aaab))
package/config.js CHANGED
@@ -18,7 +18,7 @@ StyleDictionary.registerTransform(NameKebabTransfom);
18
18
  StyleDictionary.registerFormat(JsonSetsFormatter);
19
19
 
20
20
  module.exports = {
21
- source: ["tokens/**/*.json"],
21
+ source: ["src/**/*.json"],
22
22
  platforms: {
23
23
  JSON: {
24
24
  buildPath: "dist/json/",
package/dist/json/variables.json CHANGED
@@ -1580,6 +1580,294 @@
1580
1580
  }
1581
1581
  }
1582
1582
  },
1583
+ "informative-background-color-default": {
1584
+ "sets": {
1585
+ "light": {
1586
+ "ref": "{informative-color-900}",
1587
+ "sets": {
1588
+ "light": {
1589
+ "value": "rgb(2, 101, 220)"
1590
+ },
1591
+ "dark": {
1592
+ "value": "rgb(114, 183, 249)"
1593
+ },
1594
+ "darkest": {
1595
+ "value": "rgb(94, 170, 247)"
1596
+ },
1597
+ "wireframe": {
1598
+ "value": "rgb(154, 177, 227)"
1599
+ }
1600
+ }
1601
+ },
1602
+ "dark": {
1603
+ "ref": "{informative-color-500}",
1604
+ "sets": {
1605
+ "light": {
1606
+ "value": "rgb(120, 187, 250)"
1607
+ },
1608
+ "dark": {
1609
+ "value": "rgb(3, 103, 224)"
1610
+ },
1611
+ "darkest": {
1612
+ "value": "rgb(0, 92, 200)"
1613
+ },
1614
+ "wireframe": {
1615
+ "value": "rgb(216, 225, 244)"
1616
+ }
1617
+ }
1618
+ },
1619
+ "darkest": {
1620
+ "ref": "{informative-color-600}",
1621
+ "sets": {
1622
+ "light": {
1623
+ "value": "rgb(89, 167, 246)"
1624
+ },
1625
+ "dark": {
1626
+ "value": "rgb(19, 121, 243)"
1627
+ },
1628
+ "darkest": {
1629
+ "value": "rgb(6, 108, 231)"
1630
+ },
1631
+ "wireframe": {
1632
+ "value": "rgb(203, 215, 241)"
1633
+ }
1634
+ }
1635
+ },
1636
+ "wireframe": {
1637
+ "ref": "{informative-color-900}",
1638
+ "sets": {
1639
+ "light": {
1640
+ "value": "rgb(2, 101, 220)"
1641
+ },
1642
+ "dark": {
1643
+ "value": "rgb(114, 183, 249)"
1644
+ },
1645
+ "darkest": {
1646
+ "value": "rgb(94, 170, 247)"
1647
+ },
1648
+ "wireframe": {
1649
+ "value": "rgb(154, 177, 227)"
1650
+ }
1651
+ }
1652
+ }
1653
+ }
1654
+ },
1655
+ "informative-background-color-hover": {
1656
+ "sets": {
1657
+ "light": {
1658
+ "ref": "{informative-color-1000}",
1659
+ "sets": {
1660
+ "light": {
1661
+ "value": "rgb(0, 84, 182)"
1662
+ },
1663
+ "dark": {
1664
+ "value": "rgb(143, 202, 252)"
1665
+ },
1666
+ "darkest": {
1667
+ "value": "rgb(124, 189, 250)"
1668
+ },
1669
+ "wireframe": {
1670
+ "value": "rgb(133, 161, 219)"
1671
+ }
1672
+ }
1673
+ },
1674
+ "dark": {
1675
+ "ref": "{informative-color-400}",
1676
+ "sets": {
1677
+ "light": {
1678
+ "value": "rgb(150, 206, 253)"
1679
+ },
1680
+ "dark": {
1681
+ "value": "rgb(0, 89, 194)"
1682
+ },
1683
+ "darkest": {
1684
+ "value": "rgb(0, 78, 166)"
1685
+ },
1686
+ "wireframe": {
1687
+ "value": "rgb(226, 232, 247)"
1688
+ }
1689
+ }
1690
+ },
1691
+ "darkest": {
1692
+ "ref": "{informative-color-500}",
1693
+ "sets": {
1694
+ "light": {
1695
+ "value": "rgb(120, 187, 250)"
1696
+ },
1697
+ "dark": {
1698
+ "value": "rgb(3, 103, 224)"
1699
+ },
1700
+ "darkest": {
1701
+ "value": "rgb(0, 92, 200)"
1702
+ },
1703
+ "wireframe": {
1704
+ "value": "rgb(216, 225, 244)"
1705
+ }
1706
+ }
1707
+ },
1708
+ "wireframe": {
1709
+ "ref": "{informative-color-1000}",
1710
+ "sets": {
1711
+ "light": {
1712
+ "value": "rgb(0, 84, 182)"
1713
+ },
1714
+ "dark": {
1715
+ "value": "rgb(143, 202, 252)"
1716
+ },
1717
+ "darkest": {
1718
+ "value": "rgb(124, 189, 250)"
1719
+ },
1720
+ "wireframe": {
1721
+ "value": "rgb(133, 161, 219)"
1722
+ }
1723
+ }
1724
+ }
1725
+ }
1726
+ },
1727
+ "informative-background-color-down": {
1728
+ "sets": {
1729
+ "light": {
1730
+ "ref": "{informative-color-1100}",
1731
+ "sets": {
1732
+ "light": {
1733
+ "value": "rgb(0, 68, 145)"
1734
+ },
1735
+ "dark": {
1736
+ "value": "rgb(174, 219, 254)"
1737
+ },
1738
+ "darkest": {
1739
+ "value": "rgb(152, 206, 253)"
1740
+ },
1741
+ "wireframe": {
1742
+ "value": "rgb(114, 145, 211)"
1743
+ }
1744
+ }
1745
+ },
1746
+ "dark": {
1747
+ "ref": "{informative-color-300}",
1748
+ "sets": {
1749
+ "light": {
1750
+ "value": "rgb(181, 222, 255)"
1751
+ },
1752
+ "dark": {
1753
+ "value": "rgb(0, 77, 163)"
1754
+ },
1755
+ "darkest": {
1756
+ "value": "rgb(0, 64, 135)"
1757
+ },
1758
+ "wireframe": {
1759
+ "value": "rgb(233, 238, 248)"
1760
+ }
1761
+ }
1762
+ },
1763
+ "darkest": {
1764
+ "ref": "{informative-color-400}",
1765
+ "sets": {
1766
+ "light": {
1767
+ "value": "rgb(150, 206, 253)"
1768
+ },
1769
+ "dark": {
1770
+ "value": "rgb(0, 89, 194)"
1771
+ },
1772
+ "darkest": {
1773
+ "value": "rgb(0, 78, 166)"
1774
+ },
1775
+ "wireframe": {
1776
+ "value": "rgb(226, 232, 247)"
1777
+ }
1778
+ }
1779
+ },
1780
+ "wireframe": {
1781
+ "ref": "{informative-color-1100}",
1782
+ "sets": {
1783
+ "light": {
1784
+ "value": "rgb(0, 68, 145)"
1785
+ },
1786
+ "dark": {
1787
+ "value": "rgb(174, 219, 254)"
1788
+ },
1789
+ "darkest": {
1790
+ "value": "rgb(152, 206, 253)"
1791
+ },
1792
+ "wireframe": {
1793
+ "value": "rgb(114, 145, 211)"
1794
+ }
1795
+ }
1796
+ }
1797
+ }
1798
+ },
1799
+ "informative-background-color-key-focus": {
1800
+ "sets": {
1801
+ "light": {
1802
+ "ref": "{informative-color-1000}",
1803
+ "sets": {
1804
+ "light": {
1805
+ "value": "rgb(0, 84, 182)"
1806
+ },
1807
+ "dark": {
1808
+ "value": "rgb(143, 202, 252)"
1809
+ },
1810
+ "darkest": {
1811
+ "value": "rgb(124, 189, 250)"
1812
+ },
1813
+ "wireframe": {
1814
+ "value": "rgb(133, 161, 219)"
1815
+ }
1816
+ }
1817
+ },
1818
+ "dark": {
1819
+ "ref": "{informative-color-400}",
1820
+ "sets": {
1821
+ "light": {
1822
+ "value": "rgb(150, 206, 253)"
1823
+ },
1824
+ "dark": {
1825
+ "value": "rgb(0, 89, 194)"
1826
+ },
1827
+ "darkest": {
1828
+ "value": "rgb(0, 78, 166)"
1829
+ },
1830
+ "wireframe": {
1831
+ "value": "rgb(226, 232, 247)"
1832
+ }
1833
+ }
1834
+ },
1835
+ "darkest": {
1836
+ "ref": "{informative-color-500}",
1837
+ "sets": {
1838
+ "light": {
1839
+ "value": "rgb(120, 187, 250)"
1840
+ },
1841
+ "dark": {
1842
+ "value": "rgb(3, 103, 224)"
1843
+ },
1844
+ "darkest": {
1845
+ "value": "rgb(0, 92, 200)"
1846
+ },
1847
+ "wireframe": {
1848
+ "value": "rgb(216, 225, 244)"
1849
+ }
1850
+ }
1851
+ },
1852
+ "wireframe": {
1853
+ "ref": "{informative-color-1000}",
1854
+ "sets": {
1855
+ "light": {
1856
+ "value": "rgb(0, 84, 182)"
1857
+ },
1858
+ "dark": {
1859
+ "value": "rgb(143, 202, 252)"
1860
+ },
1861
+ "darkest": {
1862
+ "value": "rgb(124, 189, 250)"
1863
+ },
1864
+ "wireframe": {
1865
+ "value": "rgb(133, 161, 219)"
1866
+ }
1867
+ }
1868
+ }
1869
+ }
1870
+ },
1583
1871
  "negative-content-color": {
1584
1872
  "ref": "{negative-color-900}",
1585
1873
  "sets": {
@@ -6648,19 +6936,23 @@
6648
6936
  "checkbox-control-size-small": {
6649
6937
  "sets": {
6650
6938
  "spectrum": {
6651
- "desktop": {
6652
- "value": "12px"
6653
- },
6654
- "mobile": {
6655
- "value": "16px"
6939
+ "sets": {
6940
+ "desktop": {
6941
+ "value": "12px"
6942
+ },
6943
+ "mobile": {
6944
+ "value": "16px"
6945
+ }
6656
6946
  }
6657
6947
  },
6658
6948
  "express": {
6659
- "desktop": {
6660
- "value": "14px"
6661
- },
6662
- "mobile": {
6663
- "value": "18px"
6949
+ "sets": {
6950
+ "desktop": {
6951
+ "value": "14px"
6952
+ },
6953
+ "mobile": {
6954
+ "value": "18px"
6955
+ }
6664
6956
  }
6665
6957
  }
6666
6958
  }
@@ -6668,19 +6960,23 @@
6668
6960
  "checkbox-control-size-medium": {
6669
6961
  "sets": {
6670
6962
  "spectrum": {
6671
- "desktop": {
6672
- "value": "14px"
6673
- },
6674
- "mobile": {
6675
- "value": "18px"
6963
+ "sets": {
6964
+ "desktop": {
6965
+ "value": "14px"
6966
+ },
6967
+ "mobile": {
6968
+ "value": "18px"
6969
+ }
6676
6970
  }
6677
6971
  },
6678
6972
  "express": {
6679
- "desktop": {
6680
- "value": "16px"
6681
- },
6682
- "mobile": {
6683
- "value": "20px"
6973
+ "sets": {
6974
+ "desktop": {
6975
+ "value": "16px"
6976
+ },
6977
+ "mobile": {
6978
+ "value": "20px"
6979
+ }
6684
6980
  }
6685
6981
  }
6686
6982
  }
@@ -6688,19 +6984,23 @@
6688
6984
  "checkbox-control-size-large": {
6689
6985
  "sets": {
6690
6986
  "spectrum": {
6691
- "desktop": {
6692
- "value": "16px"
6693
- },
6694
- "mobile": {
6695
- "value": "20px"
6987
+ "sets": {
6988
+ "desktop": {
6989
+ "value": "16px"
6990
+ },
6991
+ "mobile": {
6992
+ "value": "20px"
6993
+ }
6696
6994
  }
6697
6995
  },
6698
6996
  "express": {
6699
- "desktop": {
6700
- "value": "18px"
6701
- },
6702
- "mobile": {
6703
- "value": "22px"
6997
+ "sets": {
6998
+ "desktop": {
6999
+ "value": "18px"
7000
+ },
7001
+ "mobile": {
7002
+ "value": "22px"
7003
+ }
6704
7004
  }
6705
7005
  }
6706
7006
  }
@@ -6708,19 +7008,23 @@
6708
7008
  "checkbox-control-size-extra-large": {
6709
7009
  "sets": {
6710
7010
  "spectrum": {
6711
- "desktop": {
6712
- "value": "18px"
6713
- },
6714
- "mobile": {
6715
- "value": "22px"
7011
+ "sets": {
7012
+ "desktop": {
7013
+ "value": "18px"
7014
+ },
7015
+ "mobile": {
7016
+ "value": "22px"
7017
+ }
6716
7018
  }
6717
7019
  },
6718
7020
  "express": {
6719
- "desktop": {
6720
- "value": "20px"
6721
- },
6722
- "mobile": {
6723
- "value": "26px"
7021
+ "sets": {
7022
+ "desktop": {
7023
+ "value": "20px"
7024
+ },
7025
+ "mobile": {
7026
+ "value": "26px"
7027
+ }
6724
7028
  }
6725
7029
  }
6726
7030
  }
@@ -6728,19 +7032,23 @@
6728
7032
  "checkbox-top-to-control-small": {
6729
7033
  "sets": {
6730
7034
  "spectrum": {
6731
- "desktop": {
6732
- "value": "6px"
6733
- },
6734
- "mobile": {
6735
- "value": "7px"
7035
+ "sets": {
7036
+ "desktop": {
7037
+ "value": "6px"
7038
+ },
7039
+ "mobile": {
7040
+ "value": "7px"
7041
+ }
6736
7042
  }
6737
7043
  },
6738
7044
  "express": {
6739
- "desktop": {
6740
- "value": "5px"
6741
- },
6742
- "mobile": {
6743
- "value": "6px"
7045
+ "sets": {
7046
+ "desktop": {
7047
+ "value": "5px"
7048
+ },
7049
+ "mobile": {
7050
+ "value": "6px"
7051
+ }
6744
7052
  }
6745
7053
  }
6746
7054
  }
@@ -6748,19 +7056,23 @@
6748
7056
  "checkbox-top-to-control-medium": {
6749
7057
  "sets": {
6750
7058
  "spectrum": {
6751
- "desktop": {
6752
- "value": "9px"
6753
- },
6754
- "mobile": {
6755
- "value": "11px"
7059
+ "sets": {
7060
+ "desktop": {
7061
+ "value": "9px"
7062
+ },
7063
+ "mobile": {
7064
+ "value": "11px"
7065
+ }
6756
7066
  }
6757
7067
  },
6758
7068
  "express": {
6759
- "desktop": {
6760
- "value": "8px"
6761
- },
6762
- "mobile": {
6763
- "value": "10px"
7069
+ "sets": {
7070
+ "desktop": {
7071
+ "value": "8px"
7072
+ },
7073
+ "mobile": {
7074
+ "value": "10px"
7075
+ }
6764
7076
  }
6765
7077
  }
6766
7078
  }
@@ -6768,19 +7080,23 @@
6768
7080
  "checkbox-top-to-control-large": {
6769
7081
  "sets": {
6770
7082
  "spectrum": {
6771
- "desktop": {
6772
- "value": "12px"
6773
- },
6774
- "mobile": {
6775
- "value": "15px"
7083
+ "sets": {
7084
+ "desktop": {
7085
+ "value": "12px"
7086
+ },
7087
+ "mobile": {
7088
+ "value": "15px"
7089
+ }
6776
7090
  }
6777
7091
  },
6778
7092
  "express": {
6779
- "desktop": {
6780
- "value": "11px"
6781
- },
6782
- "mobile": {
6783
- "value": "14px"
7093
+ "sets": {
7094
+ "desktop": {
7095
+ "value": "11px"
7096
+ },
7097
+ "mobile": {
7098
+ "value": "14px"
7099
+ }
6784
7100
  }
6785
7101
  }
6786
7102
  }
@@ -6788,19 +7104,23 @@
6788
7104
  "checkbox-top-to-control-extra-large": {
6789
7105
  "sets": {
6790
7106
  "spectrum": {
6791
- "desktop": {
6792
- "value": "15px"
6793
- },
6794
- "mobile": {
6795
- "value": "19px"
7107
+ "sets": {
7108
+ "desktop": {
7109
+ "value": "15px"
7110
+ },
7111
+ "mobile": {
7112
+ "value": "19px"
7113
+ }
6796
7114
  }
6797
7115
  },
6798
7116
  "express": {
6799
- "desktop": {
6800
- "value": "14px"
6801
- },
6802
- "mobile": {
6803
- "value": "17px"
7117
+ "sets": {
7118
+ "desktop": {
7119
+ "value": "14px"
7120
+ },
7121
+ "mobile": {
7122
+ "value": "17px"
7123
+ }
6804
7124
  }
6805
7125
  }
6806
7126
  }
@@ -7337,19 +7657,23 @@
7337
7657
  "corner-radius-75": {
7338
7658
  "sets": {
7339
7659
  "spectrum": {
7340
- "desktop": {
7341
- "value": "2px"
7342
- },
7343
- "mobile": {
7344
- "value": "2px"
7660
+ "sets": {
7661
+ "desktop": {
7662
+ "value": "2px"
7663
+ },
7664
+ "mobile": {
7665
+ "value": "2px"
7666
+ }
7345
7667
  }
7346
7668
  },
7347
7669
  "express": {
7348
- "desktop": {
7349
- "value": "3px"
7350
- },
7351
- "mobile": {
7352
- "value": "4px"
7670
+ "sets": {
7671
+ "desktop": {
7672
+ "value": "3px"
7673
+ },
7674
+ "mobile": {
7675
+ "value": "4px"
7676
+ }
7353
7677
  }
7354
7678
  }
7355
7679
  }
@@ -7357,19 +7681,23 @@
7357
7681
  "corner-radius-100": {
7358
7682
  "sets": {
7359
7683
  "spectrum": {
7360
- "desktop": {
7361
- "value": "4px"
7362
- },
7363
- "mobile": {
7364
- "value": "5px"
7684
+ "sets": {
7685
+ "desktop": {
7686
+ "value": "4px"
7687
+ },
7688
+ "mobile": {
7689
+ "value": "5px"
7690
+ }
7365
7691
  }
7366
7692
  },
7367
7693
  "express": {
7368
- "desktop": {
7369
- "value": "6px"
7370
- },
7371
- "mobile": {
7372
- "value": "8px"
7694
+ "sets": {
7695
+ "desktop": {
7696
+ "value": "6px"
7697
+ },
7698
+ "mobile": {
7699
+ "value": "8px"
7700
+ }
7373
7701
  }
7374
7702
  }
7375
7703
  }
@@ -7377,19 +7705,23 @@
7377
7705
  "corner-radius-200": {
7378
7706
  "sets": {
7379
7707
  "spectrum": {
7380
- "desktop": {
7381
- "value": "8px"
7382
- },
7383
- "mobile": {
7384
- "value": "10px"
7708
+ "sets": {
7709
+ "desktop": {
7710
+ "value": "8px"
7711
+ },
7712
+ "mobile": {
7713
+ "value": "10px"
7714
+ }
7385
7715
  }
7386
7716
  },
7387
7717
  "express": {
7388
- "desktop": {
7389
- "value": "12px"
7390
- },
7391
- "mobile": {
7392
- "value": "16px"
7718
+ "sets": {
7719
+ "desktop": {
7720
+ "value": "12px"
7721
+ },
7722
+ "mobile": {
7723
+ "value": "16px"
7724
+ }
7393
7725
  }
7394
7726
  }
7395
7727
  }
@@ -7397,19 +7729,23 @@
7397
7729
  "drop-shadow-x": {
7398
7730
  "sets": {
7399
7731
  "spectrum": {
7400
- "desktop": {
7401
- "value": "0px"
7402
- },
7403
- "mobile": {
7404
- "value": "0px"
7732
+ "sets": {
7733
+ "desktop": {
7734
+ "value": "0px"
7735
+ },
7736
+ "mobile": {
7737
+ "value": "0px"
7738
+ }
7405
7739
  }
7406
7740
  },
7407
7741
  "express": {
7408
- "desktop": {
7409
- "value": "0px"
7410
- },
7411
- "mobile": {
7412
- "value": "0px"
7742
+ "sets": {
7743
+ "desktop": {
7744
+ "value": "0px"
7745
+ },
7746
+ "mobile": {
7747
+ "value": "0px"
7748
+ }
7413
7749
  }
7414
7750
  }
7415
7751
  }
@@ -7417,19 +7753,23 @@
7417
7753
  "drop-shadow-y": {
7418
7754
  "sets": {
7419
7755
  "spectrum": {
7420
- "desktop": {
7421
- "value": "1px"
7422
- },
7423
- "mobile": {
7424
- "value": "2px"
7756
+ "sets": {
7757
+ "desktop": {
7758
+ "value": "1px"
7759
+ },
7760
+ "mobile": {
7761
+ "value": "2px"
7762
+ }
7425
7763
  }
7426
7764
  },
7427
7765
  "express": {
7428
- "desktop": {
7429
- "value": "4px"
7430
- },
7431
- "mobile": {
7432
- "value": "4px"
7766
+ "sets": {
7767
+ "desktop": {
7768
+ "value": "4px"
7769
+ },
7770
+ "mobile": {
7771
+ "value": "4px"
7772
+ }
7433
7773
  }
7434
7774
  }
7435
7775
  }
@@ -7437,19 +7777,23 @@
7437
7777
  "drop-shadow-blur": {
7438
7778
  "sets": {
7439
7779
  "spectrum": {
7440
- "desktop": {
7441
- "value": "4px"
7442
- },
7443
- "mobile": {
7444
- "value": "6px"
7780
+ "sets": {
7781
+ "desktop": {
7782
+ "value": "4px"
7783
+ },
7784
+ "mobile": {
7785
+ "value": "6px"
7786
+ }
7445
7787
  }
7446
7788
  },
7447
7789
  "express": {
7448
- "desktop": {
7449
- "value": "16px"
7450
- },
7451
- "mobile": {
7452
- "value": "16px"
7790
+ "sets": {
7791
+ "desktop": {
7792
+ "value": "16px"
7793
+ },
7794
+ "mobile": {
7795
+ "value": "16px"
7796
+ }
7453
7797
  }
7454
7798
  }
7455
7799
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adobe/spectrum-tokens",
3
- "version": "12.0.0-beta.15",
3
+ "version": "12.0.0-beta.18",
4
4
  "description": "",
5
5
  "main": "config.js",
6
6
  "scripts": {
package/{tokens → src}/color-alias.json RENAMED
@@ -293,6 +293,70 @@
293
293
  }
294
294
  }
295
295
  },
296
+ "informative-background-color-default": {
297
+ "sets": {
298
+ "light": {
299
+ "value": "{informative-color-900}"
300
+ },
301
+ "dark": {
302
+ "value": "{informative-color-500}"
303
+ },
304
+ "darkest": {
305
+ "value": "{informative-color-600}"
306
+ },
307
+ "wireframe": {
308
+ "value": "{informative-color-900}"
309
+ }
310
+ }
311
+ },
312
+ "informative-background-color-hover": {
313
+ "sets": {
314
+ "light": {
315
+ "value": "{informative-color-1000}"
316
+ },
317
+ "dark": {
318
+ "value": "{informative-color-400}"
319
+ },
320
+ "darkest": {
321
+ "value": "{informative-color-500}"
322
+ },
323
+ "wireframe": {
324
+ "value": "{informative-color-1000}"
325
+ }
326
+ }
327
+ },
328
+ "informative-background-color-down": {
329
+ "sets": {
330
+ "light": {
331
+ "value": "{informative-color-1100}"
332
+ },
333
+ "dark": {
334
+ "value": "{informative-color-300}"
335
+ },
336
+ "darkest": {
337
+ "value": "{informative-color-400}"
338
+ },
339
+ "wireframe": {
340
+ "value": "{informative-color-1100}"
341
+ }
342
+ }
343
+ },
344
+ "informative-background-color-key-focus": {
345
+ "sets": {
346
+ "light": {
347
+ "value": "{informative-color-1000}"
348
+ },
349
+ "dark": {
350
+ "value": "{informative-color-400}"
351
+ },
352
+ "darkest": {
353
+ "value": "{informative-color-500}"
354
+ },
355
+ "wireframe": {
356
+ "value": "{informative-color-1000}"
357
+ }
358
+ }
359
+ },
296
360
 
297
361
  "negative-content-color": {
298
362
  "value": "{negative-color-900}"
package/{tokens → src}/color-semantic.json RENAMED
File without changes
package/{tokens → src}/color.json RENAMED
File without changes
package/{tokens → src}/component-layout.json RENAMED
@@ -45,19 +45,23 @@
45
45
  "checkbox-control-size-small": {
46
46
  "sets": {
47
47
  "spectrum": {
48
- "desktop": {
49
- "value": "12px"
50
- },
51
- "mobile": {
52
- "value": "16px"
48
+ "sets": {
49
+ "desktop": {
50
+ "value": "12px"
51
+ },
52
+ "mobile": {
53
+ "value": "16px"
54
+ }
53
55
  }
54
56
  },
55
57
  "express": {
56
- "desktop": {
57
- "value": "14px"
58
- },
59
- "mobile": {
60
- "value": "18px"
58
+ "sets": {
59
+ "desktop": {
60
+ "value": "14px"
61
+ },
62
+ "mobile": {
63
+ "value": "18px"
64
+ }
61
65
  }
62
66
  }
63
67
  }
@@ -65,19 +69,23 @@
65
69
  "checkbox-control-size-medium": {
66
70
  "sets": {
67
71
  "spectrum": {
68
- "desktop": {
69
- "value": "14px"
70
- },
71
- "mobile": {
72
- "value": "18px"
72
+ "sets": {
73
+ "desktop": {
74
+ "value": "14px"
75
+ },
76
+ "mobile": {
77
+ "value": "18px"
78
+ }
73
79
  }
74
80
  },
75
81
  "express": {
76
- "desktop": {
77
- "value": "16px"
78
- },
79
- "mobile": {
80
- "value": "20px"
82
+ "sets": {
83
+ "desktop": {
84
+ "value": "16px"
85
+ },
86
+ "mobile": {
87
+ "value": "20px"
88
+ }
81
89
  }
82
90
  }
83
91
  }
@@ -85,19 +93,23 @@
85
93
  "checkbox-control-size-large": {
86
94
  "sets": {
87
95
  "spectrum": {
88
- "desktop": {
89
- "value": "16px"
90
- },
91
- "mobile": {
92
- "value": "20px"
96
+ "sets": {
97
+ "desktop": {
98
+ "value": "16px"
99
+ },
100
+ "mobile": {
101
+ "value": "20px"
102
+ }
93
103
  }
94
104
  },
95
105
  "express": {
96
- "desktop": {
97
- "value": "18px"
98
- },
99
- "mobile": {
100
- "value": "22px"
106
+ "sets": {
107
+ "desktop": {
108
+ "value": "18px"
109
+ },
110
+ "mobile": {
111
+ "value": "22px"
112
+ }
101
113
  }
102
114
  }
103
115
  }
@@ -105,19 +117,23 @@
105
117
  "checkbox-control-size-extra-large": {
106
118
  "sets": {
107
119
  "spectrum": {
108
- "desktop": {
109
- "value": "18px"
110
- },
111
- "mobile": {
112
- "value": "22px"
120
+ "sets": {
121
+ "desktop": {
122
+ "value": "18px"
123
+ },
124
+ "mobile": {
125
+ "value": "22px"
126
+ }
113
127
  }
114
128
  },
115
129
  "express": {
116
- "desktop": {
117
- "value": "20px"
118
- },
119
- "mobile": {
120
- "value": "26px"
130
+ "sets": {
131
+ "desktop": {
132
+ "value": "20px"
133
+ },
134
+ "mobile": {
135
+ "value": "26px"
136
+ }
121
137
  }
122
138
  }
123
139
  }
@@ -125,19 +141,23 @@
125
141
  "checkbox-top-to-control-small": {
126
142
  "sets": {
127
143
  "spectrum": {
128
- "desktop": {
129
- "value": "6px"
130
- },
131
- "mobile": {
132
- "value": "7px"
144
+ "sets": {
145
+ "desktop": {
146
+ "value": "6px"
147
+ },
148
+ "mobile": {
149
+ "value": "7px"
150
+ }
133
151
  }
134
152
  },
135
153
  "express": {
136
- "desktop": {
137
- "value": "5px"
138
- },
139
- "mobile": {
140
- "value": "6px"
154
+ "sets": {
155
+ "desktop": {
156
+ "value": "5px"
157
+ },
158
+ "mobile": {
159
+ "value": "6px"
160
+ }
141
161
  }
142
162
  }
143
163
  }
@@ -145,19 +165,23 @@
145
165
  "checkbox-top-to-control-medium": {
146
166
  "sets": {
147
167
  "spectrum": {
148
- "desktop": {
149
- "value": "9px"
150
- },
151
- "mobile": {
152
- "value": "11px"
168
+ "sets": {
169
+ "desktop": {
170
+ "value": "9px"
171
+ },
172
+ "mobile": {
173
+ "value": "11px"
174
+ }
153
175
  }
154
176
  },
155
177
  "express": {
156
- "desktop": {
157
- "value": "8px"
158
- },
159
- "mobile": {
160
- "value": "10px"
178
+ "sets": {
179
+ "desktop": {
180
+ "value": "8px"
181
+ },
182
+ "mobile": {
183
+ "value": "10px"
184
+ }
161
185
  }
162
186
  }
163
187
  }
@@ -165,19 +189,23 @@
165
189
  "checkbox-top-to-control-large": {
166
190
  "sets": {
167
191
  "spectrum": {
168
- "desktop": {
169
- "value": "12px"
170
- },
171
- "mobile": {
172
- "value": "15px"
192
+ "sets": {
193
+ "desktop": {
194
+ "value": "12px"
195
+ },
196
+ "mobile": {
197
+ "value": "15px"
198
+ }
173
199
  }
174
200
  },
175
201
  "express": {
176
- "desktop": {
177
- "value": "11px"
178
- },
179
- "mobile": {
180
- "value": "14px"
202
+ "sets": {
203
+ "desktop": {
204
+ "value": "11px"
205
+ },
206
+ "mobile": {
207
+ "value": "14px"
208
+ }
181
209
  }
182
210
  }
183
211
  }
@@ -185,19 +213,23 @@
185
213
  "checkbox-top-to-control-extra-large": {
186
214
  "sets": {
187
215
  "spectrum": {
188
- "desktop": {
189
- "value": "15px"
190
- },
191
- "mobile": {
192
- "value": "19px"
216
+ "sets": {
217
+ "desktop": {
218
+ "value": "15px"
219
+ },
220
+ "mobile": {
221
+ "value": "19px"
222
+ }
193
223
  }
194
224
  },
195
225
  "express": {
196
- "desktop": {
197
- "value": "14px"
198
- },
199
- "mobile": {
200
- "value": "17px"
226
+ "sets": {
227
+ "desktop": {
228
+ "value": "14px"
229
+ },
230
+ "mobile": {
231
+ "value": "17px"
232
+ }
201
233
  }
202
234
  }
203
235
  }
package/{tokens → src}/layout.json RENAMED
@@ -2,19 +2,23 @@
2
2
  "corner-radius-75": {
3
3
  "sets": {
4
4
  "spectrum": {
5
- "desktop": {
6
- "value": "2px"
7
- },
8
- "mobile": {
9
- "value": "2px"
5
+ "sets": {
6
+ "desktop": {
7
+ "value": "2px"
8
+ },
9
+ "mobile": {
10
+ "value": "2px"
11
+ }
10
12
  }
11
13
  },
12
14
  "express": {
13
- "desktop": {
14
- "value": "3px"
15
- },
16
- "mobile": {
17
- "value": "4px"
15
+ "sets": {
16
+ "desktop": {
17
+ "value": "3px"
18
+ },
19
+ "mobile": {
20
+ "value": "4px"
21
+ }
18
22
  }
19
23
  }
20
24
  }
@@ -22,19 +26,23 @@
22
26
  "corner-radius-100": {
23
27
  "sets": {
24
28
  "spectrum": {
25
- "desktop": {
26
- "value": "4px"
27
- },
28
- "mobile": {
29
- "value": "5px"
29
+ "sets": {
30
+ "desktop": {
31
+ "value": "4px"
32
+ },
33
+ "mobile": {
34
+ "value": "5px"
35
+ }
30
36
  }
31
37
  },
32
38
  "express": {
33
- "desktop": {
34
- "value": "6px"
35
- },
36
- "mobile": {
37
- "value": "8px"
39
+ "sets": {
40
+ "desktop": {
41
+ "value": "6px"
42
+ },
43
+ "mobile": {
44
+ "value": "8px"
45
+ }
38
46
  }
39
47
  }
40
48
  }
@@ -42,19 +50,23 @@
42
50
  "corner-radius-200": {
43
51
  "sets": {
44
52
  "spectrum": {
45
- "desktop": {
46
- "value": "8px"
47
- },
48
- "mobile": {
49
- "value": "10px"
53
+ "sets": {
54
+ "desktop": {
55
+ "value": "8px"
56
+ },
57
+ "mobile": {
58
+ "value": "10px"
59
+ }
50
60
  }
51
61
  },
52
62
  "express": {
53
- "desktop": {
54
- "value": "12px"
55
- },
56
- "mobile": {
57
- "value": "16px"
63
+ "sets": {
64
+ "desktop": {
65
+ "value": "12px"
66
+ },
67
+ "mobile": {
68
+ "value": "16px"
69
+ }
58
70
  }
59
71
  }
60
72
  }
@@ -62,19 +74,23 @@
62
74
  "drop-shadow-x": {
63
75
  "sets": {
64
76
  "spectrum": {
65
- "desktop": {
66
- "value": "0px"
67
- },
68
- "mobile": {
69
- "value": "0px"
77
+ "sets": {
78
+ "desktop": {
79
+ "value": "0px"
80
+ },
81
+ "mobile": {
82
+ "value": "0px"
83
+ }
70
84
  }
71
85
  },
72
86
  "express": {
73
- "desktop": {
74
- "value": "0px"
75
- },
76
- "mobile": {
77
- "value": "0px"
87
+ "sets": {
88
+ "desktop": {
89
+ "value": "0px"
90
+ },
91
+ "mobile": {
92
+ "value": "0px"
93
+ }
78
94
  }
79
95
  }
80
96
  }
@@ -82,19 +98,23 @@
82
98
  "drop-shadow-y": {
83
99
  "sets": {
84
100
  "spectrum": {
85
- "desktop": {
86
- "value": "1px"
87
- },
88
- "mobile": {
89
- "value": "2px"
101
+ "sets": {
102
+ "desktop": {
103
+ "value": "1px"
104
+ },
105
+ "mobile": {
106
+ "value": "2px"
107
+ }
90
108
  }
91
109
  },
92
110
  "express": {
93
- "desktop": {
94
- "value": "4px"
95
- },
96
- "mobile": {
97
- "value": "4px"
111
+ "sets": {
112
+ "desktop": {
113
+ "value": "4px"
114
+ },
115
+ "mobile": {
116
+ "value": "4px"
117
+ }
98
118
  }
99
119
  }
100
120
  }
@@ -102,19 +122,23 @@
102
122
  "drop-shadow-blur": {
103
123
  "sets": {
104
124
  "spectrum": {
105
- "desktop": {
106
- "value": "4px"
107
- },
108
- "mobile": {
109
- "value": "6px"
125
+ "sets": {
126
+ "desktop": {
127
+ "value": "4px"
128
+ },
129
+ "mobile": {
130
+ "value": "6px"
131
+ }
110
132
  }
111
133
  },
112
134
  "express": {
113
- "desktop": {
114
- "value": "16px"
115
- },
116
- "mobile": {
117
- "value": "16px"
135
+ "sets": {
136
+ "desktop": {
137
+ "value": "16px"
138
+ },
139
+ "mobile": {
140
+ "value": "16px"
141
+ }
118
142
  }
119
143
  }
120
144
  }