diff --git a/data/tokens/$metadata.json b/data/tokens/$metadata.json index 752251cc..d049e756 100644 --- a/data/tokens/$metadata.json +++ b/data/tokens/$metadata.json @@ -1,12 +1,16 @@ { "tokenSetOrder": [ "origin", - "global", + "global/borderwidth", + "global/elevation", + "global/borderradius", + "global/size", + "global/space", + "global/typography", "Modes/light", "Components/badge", "Components/button", "Components/container", - "Components/datatable", "Components/feedback", "Components/focus", "Components/form", @@ -16,6 +20,6 @@ "Components/progress", "Components/profile", "Components/tab", - "Components/typography" + "Components/table" ] } \ No newline at end of file diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json index f6ceed59..56ea118b 100644 --- a/data/tokens/$themes.json +++ b/data/tokens/$themes.json @@ -2,7 +2,372 @@ { "id": "94c19922a4cf4e3c1fc44553cc9e5ae00d2aae70", "name": "Light Mode", - "$figmaStyleReferences": {}, + "$figmaStyleReferences": { + "tab.color.typical.bg-active": "S:2c16769136831abe750869b4493b4173f73d60b4,", + "tab.color.typical.bg-hover": "S:600feb933ce44fefb1d00fb20700a63e7ab16e4b,", + "tab.color.typical.border-active": "S:244dc7dac69fb3e09be385e719c0ac025cc15646,", + "tab.color.typical.border-enabled": "S:22099a8618d81a3bc104f461b3a2749c5bca929f,", + "tab.color.typical.icon-enabled": "S:e9254698c7aafb50ff2000a5ff1b1be2001e6bca,", + "tab.color.typical.icon-hover": "S:e79ca969c05adc59aac58e29ec4608bf0c6a3eab,", + "tab.color.typical.label-active": "S:449ba61fff0fbac2698fd3a5d0844f7c29039819,", + "tab.color.typical.icon-active": "S:1e7a0e365a0c56987c8af4aaa7a4ba4d70b5f1f7,", + "tab.color.typical.label-enabled": "S:d09085403e984318a1d32aa7aa7dbe1fc88409aa,", + "tab.color.typical.label-hover": "S:a35ef652a837f1f775b89c6fbdef07b82fa1fe9d,", + "tab.color.validation.border-warning": "S:59f4ce8d38c6bde630ed6302ae85576c0f77c287,", + "tab.color.validation.border-error": "S:53cb000e384100b48faf0744d56e382e42ff69a0,", + "tab.color.validation.icon-error": "S:017c8a123d1e842670098bb83ef71c1104686b88,", + "tab.color.validation.icon-warning": "S:e91028b13a46438b1c60e534fa7c065ab255c589,", + "tab.color.validation.label-error": "S:21bf328a452404bdc264a319255ae8bbb0e2c878,", + "tab.color.validation.label-warning": "S:61c5f83f7228cb4cf4b2232e1c3597e201e08772,", + "profile.color.inverse.bg-default": "S:c1ae2aa3d5cc4cb8b3f07ca291cd1d6be04f6cc4,", + "profile.color.inverse.border-default": "S:bb3d220b0efa78f92f6d4c97f94a59a32cb4950e,", + "profile.color.inverse.label-default": "S:2236400ba87fbc75b93c0a0f8815524feee11c75,", + "profile.color.standard.bg-default": "S:6f186ed7291d40e7b55fae4e888816743f467e78,", + "profile.color.standard.border-default": "S:e3b030edeb9aed9cf551165955bcfcf84630d583,", + "profile.color.standard.label-default": "S:d1ad6ad0a3d225284a1d531ebc2587a043ccdff5,", + "progress.color.inverse.bg-default": "S:3294dc045d6f67dde72b6e05eee396f1288e175a,", + "progress.color.inverse.fg-default": "S:704914b0be1463fa6321ef757ff680f157698a9d,", + "progress.color.inverse.label-alt": "S:2f193254b669ac2cd46674727e1be1ca22f0d951,", + "progress.color.inverse.label-default": "S:066fac0d28396cd38820c69306695910f9d4ed99,", + "progress.color.standard.bg-default": "S:60e6bae4cb24c52171d9e8675a6d343cd050856b,", + "progress.color.standard.border-default": "S:e9c03184e3b98e7988a26caa19a9cc4991ab23ec,", + "progress.color.standard.fg-alt": "S:9c4d36e88e051177584ad35ce87ad7e26938816d,", + "progress.color.standard.fg-default": "S:965c8bbb33b85fb0c9acee09dfc20da5de318b81,", + "progress.color.standard.fg-error": "S:c711992eacedb9d2a18e1d8190e66c977ea4904a,", + "progress.color.standard.label-alt": "S:894a1a237d160592977961a724a3a16f2c38c953,", + "progress.color.standard.label-default": "S:1ac10fb9fcbb22f3f64572b9bf0106d77ca529b6,", + "popover.color.bg-active": "S:85aa97141a296226fd0b727d82d571ba967d0be6,", + "popover.color.bg-hover": "S:79081f72d9747f08e7972ce6381581f36f4eecbe,", + "popover.color.label-active": "S:9c21c21ec09f322b3fa92c760c5ebe107df1c718,", + "popover.color.label-disabled": "S:5b1b6d5e1a0ad91e91f85fdc2df3475c91630b13,", + "popover.color.label-hover": "S:106aea2eb308e9fbd9a022299ca5d8f0fd4e96b5,", + "popover.color.label-enabled": "S:1a9e0e1f013333a5620b92af127966de3126ba0f,", + "nav.color.harsh.bg-default": "S:22f06d6fce2070932ef4551615536c9d7a37efab,", + "nav.color.harsh.bg-alt": "S:b1256844170787f377dc0ca8c47a0cc94014bb1a,", + "nav.color.harsh.item.bg-active": "S:c0fda8c221cace1c212102336c95a9f70f8892c8,", + "nav.color.harsh.item.bg-enabled": "S:37d1f9c2952e4d19b45b041d91e1cbb6f09a6d05,", + "nav.color.harsh.item.bg-hover": "S:c15fd1685796da3f34f6e7b8bf7606e28fa48b8c,", + "nav.color.harsh.item.border-active": "S:12485590aeb830e919615bc98826c07488dfe470,", + "nav.color.harsh.item.border-default": "S:4501d1fd479c90dd551c7a45f8b2971ea60c40ff,", + "nav.color.harsh.item.label-active": "S:cd13c2e232a69d2536386785c6b065785e9fb9ed,", + "nav.color.harsh.item.label-enabled": "S:050cc4d7895ca423b7d55d75568c2f02aaf0cccb,", + "nav.color.harsh.item.label-hover": "S:831efd1947543376e89cc82cc13569eaeb4994ce,", + "nav.color.harsh.item.label-alt": "S:5ca8c52b7244c8d4a4979712ee4f5e569e99bbe9,", + "nav.color.harsh.menu.bg-default": "S:940447e37850de877892226b2cf09762b8fbd128,", + "nav.color.subtle.bg-default": "S:0a40db53715e15df7aee760969815d0c2a505ba1,", + "nav.color.subtle.bg-alt": "S:d55b94043bb90e873809d5d5db5d25315dd5e1df,", + "nav.color.subtle.item.bg-active": "S:bd3816f9f4ca5cca31b26e3f414ae4833536abe2,", + "nav.color.subtle.item.bg-enabled": "S:35d8b208f635f2ccb1448879ac45306bb325d927,", + "nav.color.subtle.item.bg-hover": "S:fb13b21f340cdf776afd138644b7714f0f984629,", + "nav.color.subtle.item.border-active": "S:0bafb10bd17d9de225d32ad752c73aebf5b3e481,", + "nav.color.subtle.item.border-default": "S:bec57f8b3e1c84d832c0e343b7383dd89139caf0,", + "nav.color.subtle.item.label-active": "S:2e283997ed7d9bb68c18c234db0833a70519e109,", + "nav.color.subtle.item.label-enabled": "S:fd40e895b79c37e7b384ccb2aa345402867ef839,", + "nav.color.subtle.item.label-hover": "S:71a83e9583f17b372159cf56717ccfcdec815d7e,", + "nav.color.subtle.item.label-alt": "S:1bfe93d282dee5f2647e2ac40ba0d6ad646e24f5,", + "nav.color.subtle.menu.bg-default": "S:bb52c6567289536910482d8ce94483c393b5c0ae,", + "link.color.inverse.label-disabled": "S:6a77f163b10e74b4afbd2635b993ad77043f5b1f,", + "link.color.inverse.label-readonly": "S:62c5b592fa1ed21f7280596eb2ba506884ab61a9,", + "link.color.inverse.typical.label-default": "S:712291098df81ffe7311358ecaae23b6d30e70ac,", + "link.color.inverse.typical.label-hover": "S:44785eabbf8902012d1e36936b83baff427bebe7,", + "link.color.inverse.subtle.label-default": "S:d408dd22af6e7f584b72c7abf75ee5a03288c9ee,", + "link.color.inverse.subtle.label-hover": "S:1c5ea7966ea128624b10bcc8077d12efa618249d,", + "link.color.inverse.destructive.label-default": "S:a92c45a14da63e5707500160f07a013b08b997fa,", + "link.color.inverse.destructive.label-hover": "S:fc78239fab351d5c589afea3a9256e6d20d92b55,", + "link.color.standard.label-disabled": "S:faece4445915a811c66f88b770568a41ac5280d1,", + "link.color.standard.label-readonly": "S:399d6c56c3ce728197aa0e948bad18f0a5cdfe0c,", + "link.color.standard.destructive.label-default": "S:909932575cd95314861def644e8a07cef8fd90c3,", + "link.color.standard.destructive.label-hover": "S:102bfde7c0012eb1838676755978a0fc2502857a,", + "link.color.standard.typical.label-default": "S:7a9cea23a9aaf108b93a0dea49ecc8db5facfdab,", + "link.color.standard.typical.label-hover": "S:199df001fa7e1b8065bff0f585cdcbe9e3aa4837,", + "link.color.standard.subtle.label-default": "S:e3389ec1920396e177f890907cea5d9dfa4b0b74,", + "link.color.standard.subtle.label-hover": "S:7310034be4005eb6ff7108604cd548e28f481149,", + "form.color.calendar.bg-active": "S:5281580bd37d64d73d5cd3db9155dd67e243df06,", + "form.color.calendar.bg-disabled": "S:e8862eb5186e57c2a7f294e9a6ddf561407ccd7d,", + "form.color.calendar.bg-hover": "S:89de13fbf4b2096fa6517938700ebc8a86ef57ff,", + "form.color.calendar.border-duration": "S:b057379341a3d420ea18e4812ffd89f085eb1ee5,", + "form.color.calendar.text-active": "S:f1f2ea6f1fc9a12bc65b20dbfa8009920c764313,", + "form.color.calendar.text-alt": "S:d8853c0f9d8786b6e97181bcdd758d6ae1be7148,", + "form.color.calendar.text-disabled": "S:3b8ba6e4a1a2564522fcd72e505847865a4b7da0,", + "form.color.calendar.text-duration": "S:250b8c224a7d77710eb57b082429ecb002737791,", + "form.color.calendar.text-enabled": "S:0367abcf7f590eaff047e1b59d85262bf928a1da,", + "form.color.calendar.text-hover": "S:7190bf3279f6f219a95e19ad71d646dc742e0200,", + "form.color.calendar.textAlt-enabled": "S:55b036be024b7453ff90b169d075a77bffd04586,", + "form.color.labelset.label-required": "S:ac1cbe44991f43fa0be90348f2ed9a2edfd58ae7,", + "form.color.labelset.label-default": "S:ed2f3dd9489bca43fefaf27337804b4bac4af57e,", + "form.color.labelset.label-alt": "S:58731d5ed395c0d042abb67ccac775cfbb667410,", + "form.color.labelset.label-disabled": "S:17b8a037eccd67fd6d31e9739c9b3940c4f41647,", + "form.color.labelset.label-readOnly": "S:6a45897b5685d8a24cd7921fa27b59f10c4d8ddb,", + "form.color.typical.bg-alt": "S:89c373b72ab4278f0b6243bfe7b55ffbf8224865,", + "form.color.typical.bg-disabled": "S:3cb60ac925e91b9c9577d89f33ea87071b9ea61c,", + "form.color.typical.bg-default": "S:358710e0112bdd68f6e865ba32dee4a0465486c8,", + "form.color.typical.bg-enabled": "S:0746032fc3b4e94417984572449fb6993b131163,", + "form.color.typical.bg-hover": "S:d06d4eb28371116b9b398b768ce36286a466b718,", + "form.color.typical.bg-readOnly": "S:b921bcdc9a5fd41808f1156f4404c29d1297ce8e,", + "form.color.typical.border-alt": "S:3223b25a1503e252dcc6ec3d44f6c02300a082a9,", + "form.color.typical.border-enabled": "S:2cdbaf76fde98df1a8d6f6458eb001abc09bee0d,", + "form.color.typical.border-disabled": "S:8db09949a8707ced9d46e146cb5211afdd29a6ed,", + "form.color.typical.border-hover": "S:79eb0bebcf58a4fa63a1e3049a697da5ae7e258d,", + "form.color.typical.border-readOnly": "S:b60a632d305ed9396f0210de093a4203cb1fa84c,", + "form.color.typical.icon-active": "S:9413bddd0d7295a8d5e5de00cf0234fc3bf529bd,", + "form.color.typical.icon-default": "S:8639e76f80f23bda55ae6c5ee54e68c3bae47478,", + "form.color.typical.icon-disabled": "S:d5e4ec6a9896fbbbe42fcecf2de8d78f5dccd037,", + "form.color.typical.icon-enabled": "S:f8f1fbc0c4c8f5417c0370a8d3cb836b78ca93b3,", + "form.color.typical.icon-hover": "S:21121a521229eab87c1308cdbee95cd6a1472e59,", + "form.color.typical.icon-readOnly": "S:f30e4ebfab423719e9dd3d1473fcdca6686c3ab1,", + "form.color.typical.text-active": "S:5d987bcc95299e6cbd1f6959d1ccb4d9b3cb04f9,", + "form.color.typical.text-alt": "S:5b596fde2ed97f89adee1f1b148ddf94a8210a3f,", + "form.color.typical.text-default": "S:28eda476a25972426c39e3cc56f42962fc35dadf,", + "form.color.typical.text-disabled": "S:1a0aa1c26f4af9026d2361be21c3961548605012,", + "form.color.typical.text-enabled": "S:c15f4066fca9ffd6c5c74b0edafe6c3287019c57,", + "form.color.typical.text-hover": "S:1eb38b5ddb443cacd134c653cf45c63199607518,", + "form.color.typical.text-readOnly": "S:46bad8acbe7b97e8473eb8cd6b338e521d2b59de,", + "form.color.switch.bg-active": "S:03207bca188524cdd50d0f7f06c4243864b1526b,", + "form.color.switch.bg-activeDisabled": "S:d99698a2e69d83ca70fde6f27f868c5bd5b5d5e5,", + "form.color.switch.bg-disabled": "S:cf82b810fa49354bfefdf19da6c0f23182715586,", + "form.color.switch.bg-enabled": "S:1e4b1869b798556206f4f777d535f4e6c8491296,", + "form.color.switch.border-active": "S:a88eb473d27a3d944ffd3fe7a63bfe0f0cc13e4a,", + "form.color.switch.border-activeDisabled": "S:78ea7a774abc2737d28ec4dd547369bee49b61e9,", + "form.color.switch.border-disabled": "S:e4544586aa9b8f2e7015e9339e94a8459e63e745,", + "form.color.switch.border-enabled": "S:3eda3b03201ff9378507f6c82cbd9ab76d4ad51e,", + "form.color.switch.fg-active": "S:272a490f4da2dd85e78796fa9b73ccd2baaa6bb6,", + "form.color.switch.fg-activeDisabled": "S:59f4a1876c4259ac9eceb99cc3b7518f67b61c5d,", + "form.color.switch.fg-disabled": "S:6b97a3c0e6206260aa4eb76ae0057bb66a3aa870,", + "form.color.switch.fg-enabled": "S:714d044e36af702f60783c94cacedda23dc2ca3c,", + "form.color.switch.label-active": "S:c9c67ecc27458bfed527a328a0aec69169833c36,", + "form.color.switch.label-activeDisabled": "S:f55985ba4e260c5504cb3c83f1410287cd4a89c8,", + "form.color.switch.label-disabled": "S:77d98aa3e0aec035892eac75ae5bca3e9e72b382,", + "form.color.switch.label-enabled": "S:081852e36bf0bb239beb2e47d3ecc9b8f22074c5,", + "form.color.validation.border-error": "S:f4605ef13398d9922bf97b5de4a8890bddb0f8fb,", + "form.color.validation.bar-error": "S:61f15b02a1c6933cdf87740d0a1bb613ad1a48f5,", + "form.color.validation.bar-warning": "S:66a7aaf3ee5dc977d729dcf091bc4180363b7357,", + "form.color.validation.label-error": "S:98926c4532d29088da9fdc5752d9621f7d41e941,", + "form.color.validation.label-warning": "S:7dc45a8e50207445151c174047bafda5d7748e5b,", + "focus.color.bg": "S:744dd933270483f4a4fea4838e7473981e114132,", + "focus.color.border": "S:7f673930ff3cefd1173605aaacee1daedfd4a0b4,", + "focus.color.label": "S:47640959146c9c46a04f67a25e546015336d2b31,", + "feedback.color.inverse.bg-default": "S:54c7c472e8359388ba8fdc726457a10dd4e2c66b,", + "feedback.color.inverse.label-default": "S:ec14ccc173ff320531c5d0977b626e5e4d0761c3,", + "feedback.color.inverse.label-hover": "S:4955a46782081584331e10c88682176df038b67f,", + "feedback.color.inverse.labelAlt-default": "S:4a54614b32680cf2a80234b513e12c5d6f5d9b8a,", + "feedback.color.inverse.labelAlt-hover": "S:cdb3839f079369a2ac4f0c1b17ea80c2d0c6bcab,", + "feedback.color.inverse.error.bg-default": "S:35737d5209f2aa4cc0aa14a5f8385c65d093fe9a,", + "feedback.color.inverse.error.bgAlt-hover": "S:51be2dd14eb42ea02002d2e388ccaafded4eab3d,", + "feedback.color.inverse.error.bg-hover": "S:bb1581e6f5aae3438f17f3208ade80513d294437,", + "feedback.color.inverse.error.border-default": "S:281469e796ca38f3b623af897142ea063a507e76,", + "feedback.color.inverse.info.bg-default": "S:0e4d6dd8d2f4fcbcbfa1ca637766f8c7377b25a6,", + "feedback.color.inverse.info.bgAlt-hover": "S:ebac87d3f4c51a0b2602808b0e1adc8dfc02303d,", + "feedback.color.inverse.info.bg-hover": "S:6d3e36115268f1141e4839037102d5b643e3e93f,", + "feedback.color.inverse.info.border-default": "S:08bd13fdac9a34a2c7c1470768d15a020edf8ae4,", + "feedback.color.inverse.neutral.bg-default": "S:bc483e2c0b607b0858646afedb86c71a7448b93b,", + "feedback.color.inverse.neutral.bgAlt-hover": "S:f72feb0f1371dc3188440e9033bda545ebc173a0,", + "feedback.color.inverse.neutral.bg-hover": "S:0ca4b927e25f357b5c33ed5a0965ac48a25e4bf1,", + "feedback.color.inverse.neutral.border-default": "S:479e1526355b0f68c1b162eb07013874d9408aff,", + "feedback.color.inverse.success.bg-default": "S:9f8b618011a5c568a9418e374a572c0c318cfc46,", + "feedback.color.inverse.success.bgAlt-hover": "S:fc466c8c4aa928985a065651cc530742025034ab,", + "feedback.color.inverse.success.bg-hover": "S:09746b3987b5bf62ef45e613f22626bfc96d1a08,", + "feedback.color.inverse.success.border-default": "S:a7adc8f446364c6bb374eb3a2c62498b036ae27d,", + "feedback.color.inverse.warning.bg-default": "S:dd52ffd6adfd6f40ef6e2dffa74acf14e8cb10ab,", + "feedback.color.inverse.warning.bgAlt-hover": "S:335a848f83c9cd81a7b36bf2623ed9216f9f61d4,", + "feedback.color.inverse.warning.bg-hover": "S:f48059b7305d0f819c3a977722c0f61bf562d8de,", + "feedback.color.inverse.warning.border-default": "S:db90b29ff3ac9954fd98d04f2e908c4da689fa7c,", + "feedback.color.standard.bg-default": "S:7f5dc5b15dc0cdbb4b172aef87ea26d798532bee,", + "feedback.color.standard.label-default": "S:9176dc9e2467b737fed574dae6ee955845a03b8e,", + "feedback.color.standard.label-hover": "S:c99a985d1aa40680d97de79cb8d0ce5012c6c216,", + "feedback.color.standard.labelAlt-default": "S:82fd6d92d22ea3ea6147bbc72657bdf75305a265,", + "feedback.color.standard.labelAlt-hover": "S:c63b6272f53bf7cc546ad66033aa5ac4c0684368,", + "feedback.color.standard.error.bg-default": "S:8c671a96fae59191cbd2fb6506857c9cb194bea6,", + "feedback.color.standard.error.bgAlt-hover": "S:75bfee4ce445b0d8f18b358aedd90e51703a634d,", + "feedback.color.standard.error.bg-hover": "S:37e108e886d365175478729a8c065b30ae629fcb,", + "feedback.color.standard.error.border-default": "S:645b51ec5b68b6ec47d25b1381bf76c62ab6af7c,", + "feedback.color.standard.info.bg-default": "S:a954dfe6fdd4599e380926181d18fde6c29a07aa,", + "feedback.color.standard.info.bgAlt-hover": "S:82725bbe89642ff3ef28b464326bbd535195de5f,", + "feedback.color.standard.info.bg-hover": "S:baefc792410fdb1fea12143dfb79603c33d51f1e,", + "feedback.color.standard.info.border-default": "S:91d4383fbc8b58e0d36bb7d1ae5d26373ff21b82,", + "feedback.color.standard.neutral.bg-default": "S:f14fd0c4a4c62447320dc5996ebbad3135f3d790,", + "feedback.color.standard.neutral.bgAlt-hover": "S:f51dafb9ffc62bfd7415c0f1a8e08971dfa49a06,", + "feedback.color.standard.neutral.bg-hover": "S:26677ed6c51259d4c78ac744fad0792e025ddc2b,", + "feedback.color.standard.neutral.border-default": "S:3c67535de05c926f4f52029c75b99d655bdd1426,", + "feedback.color.standard.success.bg-default": "S:1bf626c77eca72143a706a9f8b98afced716de29,", + "feedback.color.standard.success.bgAlt-hover": "S:62a36301c5e70a2c5eb97df0c54d35c6df26eb37,", + "feedback.color.standard.success.bg-hover": "S:74e25131dd3059913c2cec2a9cd0eb63be921c4f,", + "feedback.color.standard.success.border-default": "S:a11236888f9aa07a159830380d5bb5d8d244908f,", + "feedback.color.standard.warning.bg-default": "S:915035f99471990349def56459268f449a0c76c7,", + "feedback.color.standard.warning.bgAlt-hover": "S:f4a722ea15bb241cf94da9874adf3bec14ec8e30,", + "feedback.color.standard.warning.bg-hover": "S:22db33203abfa4008e24dea3971a5e3e5538c90b,", + "feedback.color.standard.warning.border-default": "S:2e2629bd5f46c04a659cd018bbe02e8ac2783bf6,", + "container.color.inverse.border-alt": "S:028cb45bf74a1e566a37909dacc9263551ce8d1b,", + "container.color.inverse.border-default": "S:6f107b188f33dab236acdc09a8b2d6c2ff220cc8,", + "container.color.standard.bg-alt": "S:9e8c9e1f7efd90bf520d268eae2aa872d07ce32b,", + "container.color.standard.bg-default": "S:c6233f192de89ccf11fe7466603f9f4f9a675268,", + "container.color.standard.bgFooter-default": "S:c3cc52a16ce6e9d6f52d69371263ea29ca2365b0,", + "container.color.standard.border-alt": "S:1eff87f1d64657c3802ee2e9a8d3c87b769a039b,", + "container.color.standard.border-default": "S:08d5135679837cd8db89c803b9583a5c538831b0,", + "container.color.standard.dimmer": "S:4c13ff93af6482e936b4e908a1279d945c32ea1f,", + "container.color.standard.text-alt": "S:dd3341f286634e90470f80a435a12cbded42a0e2,", + "container.color.standard.text-default": "S:ec25cc278aa049eb7c9478118992e30e2263d057,", + "container.color.standard.interactive.bgFooter-default": "S:2a36aeea361663c3d033622f9670d927a7d96c50,", + "container.color.standard.interactive.bg-enabled": "S:5037a2622ac32b1a7cbc8d7435ab3c16e98fcbf1,", + "container.color.standard.interactive.bg-disabled": "S:d0806eaed8a1d996ba440c7b1320576c259987e7,", + "container.color.standard.interactive.bg-hover": "S:8e5aebf19942a707e568b5176f162adf06e0a67d,", + "container.color.standard.interactive.bgFooter-active": "S:b60fe16cb6d20bd72a672874e0be424c1dee4498,", + "container.color.standard.interactive.bgFooter-activated": "S:abc95e53b91e4e81b941c5bf2b06cbff20bb6511,", + "container.color.standard.interactive.border-active": "S:a17aa3640b0064cc64022023beb189f2a1707976,", + "container.color.standard.interactive.border-activated": "S:fde94fecf6caa68290eb236a40f6be63e4e616c9,", + "container.color.standard.interactive.border-alt": "S:2e069370ebcffbaef0f343ca7e4fe9eda727053f,", + "container.color.standard.interactive.border-inactive": "S:4e828c4c34d979cb69b3f44686ff3a89abbfb777,", + "container.color.standard.interactive.border-enabled": "S:8e28048eac353b421f72df80be8319357aa2bcbe,", + "container.color.standard.interactive.icon-active": "S:926082937b2bfab015b10eafccd9f52885158864,", + "container.color.standard.interactive.icon-enabled": "S:2aea30422b7f3957b4d589e7a8e4e6b069e85218,", + "container.color.standard.interactive.iconAlt-enabled": "S:6491840ca660361a137241d82fd99bb301a23a94,", + "container.color.standard.interactive.icon-hover": "S:3fab1ec9a304aaf7e5f71bae873836d3eb6ce805,", + "container.color.standard.interactive.labelFooter-active": "S:b00ed2f85dd169378a7c231b2da2ba5aa230652d,", + "container.color.standard.interactive.labelFooter-activated": "S:92b395a1f48c7b757e7612a680769767749d85ed,", + "container.color.standard.interactive.text-active": "S:beff0605573f01548e4b2acef71942f1d7d904ce,", + "container.color.standard.interactive.text-disabled": "S:4784bda59efd6efcd5c75a238149ffbf3f6b105c,", + "container.color.standard.interactive.text-enabled": "S:eac5283ba279584ad9e530b4785df47e5d39b30d,", + "container.color.standard.interactive.textAlt-enabled": "S:47f7ec4c5825f264c24b47ee7d4c4380524f4f19,", + "container.color.standard.interactive.text-hover": "S:46c29064baba2003600404292d0b5285a2b007bc,", + "button.color.inverse.typical.primary.bg-active": "S:c6723cf2c91ff1250d2c57dbda99e1a12f5d658e,", + "button.color.inverse.typical.primary.bg-disabled": "S:e3837e8a583a62e51c802d777c78e3a8af940014,", + "button.color.inverse.typical.primary.bg-enabled": "S:725500f279c19164ecf45c999ee643c158250fbd,", + "button.color.inverse.typical.primary.bg-hover": "S:b3da18ae38a981c49c85f371c1cd2010650eecd3,", + "button.color.inverse.typical.primary.label-active": "S:f08a50488c8ad2e28f8d4422fa3119c970111038,", + "button.color.inverse.typical.primary.label-disabled": "S:9979a9671c2e537fed54fa708c05c59272e98b7a,", + "button.color.inverse.typical.primary.label-enabled": "S:904521266338d1809b177f69b76e443bf8f55402,", + "button.color.inverse.typical.primary.label-hover": "S:3ab5602802a630fe9a7e5985b66bd4a0d1077403,", + "button.color.inverse.typical.secondary.bg-active": "S:96f2e641bfb888622a2b3b1da6479169247d7b2b,", + "button.color.inverse.typical.secondary.bg-hover": "S:7d1fdfa9bfb052a8d527f4436d8c91bcb46a3618,", + "button.color.inverse.typical.secondary.border-active": "S:871be70aaf2090b3fd40e9d834a291c0b85a7b84,", + "button.color.inverse.typical.secondary.border-disabled": "S:16c5d49e5165e2e5bf06b6bb9c2a6d36f9568a68,", + "button.color.inverse.typical.secondary.border-enabled": "S:0824f8a1b4d0d52ead9a821ecd3d7637c3b1cb30,", + "button.color.inverse.typical.secondary.border-hover": "S:4f35c48dea114d6f3c7d388771be2a71c6c93116,", + "button.color.inverse.typical.secondary.label-active": "S:d2a8027dbf48427f5e78f649133d7afa0602ec03,", + "button.color.inverse.typical.secondary.label-disabled": "S:de358c0e05a9a989a519fd40313f5b8d650581d5,", + "button.color.inverse.typical.secondary.label-enabled": "S:86ef9d725576cdf9a1638b8613708be27ea78bdc,", + "button.color.inverse.typical.secondary.label-hover": "S:520b33af9a3916b85dc2dc1aab5a512181e709be,", + "button.color.inverse.typical.subtle.bg-active": "S:6915a34aa3de5d4a260cb46f178a7125b0dd3f89,", + "button.color.inverse.typical.subtle.bg-hover": "S:579f448c768a7bc509edd23aae21c837c49c8fd0,", + "button.color.inverse.typical.subtle.label-active": "S:e930077e1b822d456728180d751fd7b2a0fe485e,", + "button.color.inverse.typical.subtle.label-disabled": "S:105807c56dd9806c9f895f1b31c7fc3c1160d80c,", + "button.color.inverse.typical.subtle.label-enabled": "S:63d9b9ae55a922bac1b397169448111271c2e0be,", + "button.color.inverse.typical.subtle.label-hover": "S:9ff3df1e4033c6ca365efb9db675393dc790879f,", + "button.color.inverse.typical.tertiary.bg-active": "S:efeb56e620279747c3d9649df394a8f8b7221ef1,", + "button.color.inverse.typical.tertiary.bg-activeDisabled": "S:89cdd59363887310586694639f7cb044f3e8bd88,", + "button.color.inverse.typical.tertiary.bg-hover": "S:79577d04c6f15c3c95912668f9a87cb6651a2a3a,", + "button.color.inverse.typical.tertiary.border-active": "S:0449bb8931579aa9ca9bdcaf4914f6941dd40898,", + "button.color.inverse.typical.tertiary.border-disabled": "S:d844e99b513ea8be9ae1f6c063d485510b7c8a1f,", + "button.color.inverse.typical.tertiary.border-enabled": "S:1acc220bd7692798846e9770fcf73ff87bad7dce,", + "button.color.inverse.typical.tertiary.border-hover": "S:5e74f18717e7692ed0fe6b1aa476147acb6435af,", + "button.color.inverse.typical.tertiary.label-active": "S:78b419b814ce808b2eefac5f0b200090124df6c3,", + "button.color.inverse.typical.tertiary.label-disabled": "S:7865c380bcff52aef0b84eee803b837c618c4717,", + "button.color.inverse.typical.tertiary.label-enabled": "S:9c74713696ab2b11d4a69f422ec951b630b9655b,", + "button.color.inverse.typical.tertiary.label-hover": "S:8133c49907f581bdc2f10a1e0365589ffaa0f740,", + "button.color.inverse.destructive.primary.bg-active": "S:b7d9f82082789cc9eb3ada59e551ba748f68962d,", + "button.color.inverse.destructive.primary.bg-disabled": "S:dd045536b26ac23beeab0c33d9dce56e2f3afe7c,", + "button.color.inverse.destructive.primary.bg-enabled": "S:b06fff2682caa1deb78948216970278dfc51dde5,", + "button.color.inverse.destructive.primary.bg-hover": "S:3fd2f98adb97abe80aa96a1786bb5e0faed5078f,", + "button.color.inverse.destructive.primary.label-active": "S:b1007b6694fca10262e9ac2456150b79b508782c,", + "button.color.inverse.destructive.primary.label-disabled": "S:de3e32714e78911fef308e9a47fb5c5053d5ec3c,", + "button.color.inverse.destructive.primary.label-enabled": "S:06540f996b1f390e35b19fa0d6f4e4000d3d538a,", + "button.color.inverse.destructive.primary.label-hover": "S:b5c5c62b45518f03494eaa28c6b8ec574be20ab4,", + "button.color.inverse.destructive.secondary.bg-active": "S:01d9643cbf427fa47970108bfe09848afe30945c,", + "button.color.inverse.destructive.secondary.bg-hover": "S:bae54f2101dc96e31795b8a99791e476a5aefe9e,", + "button.color.inverse.destructive.secondary.border-active": "S:47f544e9bf389a2cdc003556ff800081292504da,", + "button.color.inverse.destructive.secondary.border-disabled": "S:c7fea10ba786c17e62cd09d6654e8249e4dc01e6,", + "button.color.inverse.destructive.secondary.border-enabled": "S:6cb3361e8be1d89bde48ee688cd08918fea9b173,", + "button.color.inverse.destructive.secondary.border-hover": "S:6bf084133b2aa5e45c112cd556b9a21e8e49de35,", + "button.color.inverse.destructive.secondary.label-active": "S:27c1fdab2e1fa555e9244533fdc206746bd9376f,", + "button.color.inverse.destructive.secondary.label-disabled": "S:d268278e8060d7cf0165aae295a2de6597522ebe,", + "button.color.inverse.destructive.secondary.label-enabled": "S:0a04ff0cd7124f8afd6895db107116c048d8619c,", + "button.color.inverse.destructive.secondary.label-hover": "S:ae8e35d8eaa5aa99045806bc9e3e390bbec2bcc2,", + "button.color.standard.destructive.primary.bg-active": "S:495c8183c2f9246b90a399ced590c162d0d3ce50,", + "button.color.standard.destructive.primary.bg-disabled": "S:9e3685120da961e99e22f74deffdad01abe9a357,", + "button.color.standard.destructive.primary.bg-enabled": "S:b6cda853ba83fa42c6f6b4fe3886e4f586d54196,", + "button.color.standard.destructive.primary.bg-hover": "S:489e801f799360334ec5cd0c4ceb7d909a12dc2e,", + "button.color.standard.destructive.primary.label-active": "S:7257ad73fea0abb35f1d0fa3d646f7eacfc8e40c,", + "button.color.standard.destructive.primary.label-disabled": "S:775a7f3634198edbcd5e365c89c98ba38338c126,", + "button.color.standard.destructive.primary.label-enabled": "S:959b87fdc03147bf6199fb049b95c156e01a1b95,", + "button.color.standard.destructive.primary.label-hover": "S:cd2ff8992be18b753a9e7ba31a1cb915de99ab2f,", + "button.color.standard.destructive.secondary.bg-active": "S:909527a72f7bb0c5fd58b80944167571e1fa773f,", + "button.color.standard.destructive.secondary.bg-hover": "S:4703b0e361e35e6f682308c91cfddcad44694af3,", + "button.color.standard.destructive.secondary.border-active": "S:829008742e37ed9117e8bd1844af1161d0078981,", + "button.color.standard.destructive.secondary.border-disabled": "S:e666889501dac6c89df93de7057fe59a627d04da,", + "button.color.standard.destructive.secondary.border-enabled": "S:401e147847aba5fd329cb86297e49a90f44ea91d,", + "button.color.standard.destructive.secondary.border-hover": "S:2af26a889cf9884c083b1f3934bf06ec11503472,", + "button.color.standard.destructive.secondary.label-active": "S:706d38b2dbcaba12a5975b67697e7b9a8a5650a4,", + "button.color.standard.destructive.secondary.label-disabled": "S:0e3f8e4c4d3628f8898d1420e9524b91100babcb,", + "button.color.standard.destructive.secondary.label-enabled": "S:c758d44bf9139b581c1f6144b105f90f1388215d,", + "button.color.standard.destructive.secondary.label-hover": "S:fc8d5772c558a760b85689ad768e7efdc5ba3952,", + "button.color.standard.typical.primary.bg-active": "S:6d97f2f0f44e625300cf83ba2e56f1d6ce0c1ecf,", + "button.color.standard.typical.primary.bg-disabled": "S:0338fba07df8d548a1ba681ad7104aa69e3c6c87,", + "button.color.standard.typical.primary.bg-enabled": "S:47586409e1c5492c38f367ecdf94d62195f0f70a,", + "button.color.standard.typical.primary.bg-hover": "S:d9217b48f14579c3f704e330f6fb2864bf028482,", + "button.color.standard.typical.primary.label-active": "S:27b9b40eb698048c18972286859d0fc77c9b0f16,", + "button.color.standard.typical.primary.label-disabled": "S:1d2a7f89420eda68877ead0b317afb734de9221e,", + "button.color.standard.typical.primary.label-enabled": "S:ac04e1cd6f002839ed312644ecd40600c80e6a9f,", + "button.color.standard.typical.primary.label-hover": "S:142469903d271b9dfb4cffdf885f2bf44201e6b9,", + "button.color.standard.typical.secondary.bg-active": "S:ab1b1b892654d0ea55c816fecbdabae68a996604,", + "button.color.standard.typical.secondary.bg-hover": "S:a6a676f5bb01647a13bbabe05ddbe7d0cd421009,", + "button.color.standard.typical.secondary.border-active": "S:2d689f7f9b455b97bc16093c667f92851d391934,", + "button.color.standard.typical.secondary.border-disabled": "S:7ff69104dc181bce30be7d1bf88f9bbac30bdf69,", + "button.color.standard.typical.secondary.border-enabled": "S:bd52e7b74e5cb8f6c6e69b3368fd1d19874d8ad7,", + "button.color.standard.typical.secondary.border-hover": "S:69da27e7657323f84b5a1528f8190c8e78cfcf05,", + "button.color.standard.typical.secondary.label-active": "S:08ddc0cd6745957b9999381d5fd5e6f596aef89a,", + "button.color.standard.typical.secondary.label-disabled": "S:e23c9461e2238140c52a0d8b835352137400e2e9,", + "button.color.standard.typical.secondary.label-enabled": "S:ac5b398848e06db2c2220140f4d539ae67658706,", + "button.color.standard.typical.secondary.label-hover": "S:f0e279ce04732d92f7ab08e25d80b3f96d7e59ff,", + "button.color.standard.typical.subtle.bg-active": "S:38f5130d1c3868d0a23308df9fbb2a6470cdde13,", + "button.color.standard.typical.subtle.bg-hover": "S:020b480b3a7e5b9e437256fc7b50442ccc28a6dd,", + "button.color.standard.typical.subtle.label-active": "S:709e24032ce65f12b6fa5aaf130063682c18ab1b,", + "button.color.standard.typical.subtle.label-disabled": "S:bace38b2b869791f189c6aa06fbfd22a14644e4b,", + "button.color.standard.typical.subtle.label-enabled": "S:c9f207ff33a3641fe385261d0bc329f9e7b398eb,", + "button.color.standard.typical.subtle.label-hover": "S:b2e688685b937583ab5e90233806a966b6c604b8,", + "button.color.standard.typical.tertiary.bg-active": "S:b028b8cb94aa6b874c0cbef46ceca533fc4d73b1,", + "button.color.standard.typical.tertiary.bg-activeDisabled": "S:dce77e1273f59c634be3cbcf595faf6391eb7689,", + "button.color.standard.typical.tertiary.bg-hover": "S:b1a4f1f07d5041ac7925e88f7edfd800b487d020,", + "button.color.standard.typical.tertiary.border-active": "S:405a1d817f4600fa7bc755160147b95a4c64d242,", + "button.color.standard.typical.tertiary.border-disabled": "S:d0beba5252bbfa31e1fbb53c2bcf0b4deb0c1d43,", + "button.color.standard.typical.tertiary.border-enabled": "S:01279a1ff00b951ef0d47583022cc032d8041fa4,", + "button.color.standard.typical.tertiary.border-hover": "S:21a1d3ccaf7ad909bcf0482f0b00c90d5508e1c8,", + "button.color.standard.typical.tertiary.label-active": "S:056a4f6c5dbcd3c235365f3d025fbb042d05c7f1,", + "button.color.standard.typical.tertiary.label-disabled": "S:eee04e56463c48e9d40cc758bc23e1b5faf9d03c,", + "button.color.standard.typical.tertiary.label-enabled": "S:2d640cf474a640cfc6a171786ada1badc754edb4,", + "button.color.standard.typical.tertiary.label-hover": "S:f7072d1c0f09f9e305f4904a347f80c919ce4a4b,", + "badge.color.inverse.warning.border-default": "S:9973a2a3f998e78cf5ba24025a526d2b9d8e0eb3,", + "badge.color.inverse.warning.bg-default": "S:e8741c404924827a129259fd18c9d83942d90ad9,", + "badge.color.inverse.warning.label-default": "S:7b9dc21ecd3b9ca6653c44dc04ea6240f26969fd,", + "badge.color.standard.warning.border-default": "S:a1ae209c26f892e4270bb021d846a91cbf6f7ebc,", + "badge.color.standard.warning.bg-default": "S:799be5c488dcb9a14970f66f315b0de7294c117c,", + "badge.color.standard.warning.label-default": "S:151b147d65545b92a7d644f8c10d6b24c6a250fa,", + "focus.color.borderalt": "S:a1774cc253a9c0ef1afc57424c7fbaa6a198bdc8,", + "table.color.header.subtle.bg-alt": "S:5a92ea7388e80d66d714b9ae73a79f46db318bd6,", + "table.color.header.subtle.bg-default": "S:f156d4a249df484b05bc811c65e6369e3687448e,", + "table.color.header.subtle.bg-hover": "S:09fdacc0411aa47512e1c98720e5d058680aeaa1,", + "table.color.header.subtle.border-default": "S:c38bddf38e452f3b129ec2ba318e54e945ffaa07,", + "table.color.header.subtle.label-default": "S:6d3007339eccea31753fda9fc77742bcefe567ee,", + "table.color.header.subtle.label-hover": "S:25d038a4f91d5979e28f6548e6c93179227fbb31,", + "table.color.header.harsh.bg-alt": "S:278c36c71223731d629e6880f781d74631525436,", + "table.color.header.harsh.bg-default": "S:885cd80c90ee8f8925af7064a469f2b829b26602,", + "table.color.header.harsh.bg-hover": "S:307580ee5b0d448bc63d5ec2a553dd55e51cfe75,", + "table.color.header.harsh.border-default": "S:1a6400c71d431cb3f117ff3a65bffcdf39021ca8,", + "table.color.header.harsh.label-default": "S:35b464bd790311c60da8cb88259ef4829064b8d1,", + "table.color.header.harsh.label-hover": "S:b1efd0005b6e1e827dd4c44853f808d62ec12156,", + "table.color.row.bg-activated": "S:1524e070033328f8e935cf376d530c3505f67ea0,", + "table.color.row.bg-active": "S:13145c0450aee00e91fc7a9df1af30e6a9d5a4e3,", + "table.color.row.bg-default": "S:799662e1d9958204701284cd263ae393efddec2e,", + "table.color.row.bg-alt": "S:1276bec8ac4bce8972ff22e45f90cc421acca167,", + "table.color.row.bg-alt2": "S:fdacb3d31019b6c084a13609c486c275b9689fc8,", + "table.color.row.bg-hover": "S:3ef495e6657c1ead1279268cb4672eace0e8f91c,", + "table.color.row.border-default": "S:568762fd78e04daf4ff1c4f426ecd3e541cfd97f,", + "table.color.row.label-activated": "S:a2d5de1ce0c7371d9b5f57e1e65f863a2e214eec,", + "table.color.row.label-active": "S:8db1f7a7ac5ceb27e492535621fec2fbe7ddf579,", + "table.color.row.label-default": "S:6e0b773b7619237592636df8893ca107b149c6a2,", + "table.color.row.label-hover": "S:19a138e5616ee8431c4babfb90ca4b4f70c06d76,", + "table.color.footer.bg-default": "S:bbd5d21a5959e64337b85da1528aa56e8497b2a4,", + "table.color.footer.border-default": "S:577129e9dd1732927ed5b34b6b9fbfafd69f4a3c,", + "table.color.footer.label-default": "S:64d48a435dcb5947e10691b764b66777a9d3e7f9," + }, "selectedTokenSets": { "origin": "source", "Components/container": "enabled", @@ -15,12 +380,16 @@ "Components/feedback": "enabled", "Components/focus": "enabled", "Components/link": "enabled", - "global": "enabled", - "Components/datatable": "enabled", "Components/nav": "enabled", "Components/profile": "enabled", - "Components/typography": "enabled", - "Components/popover": "enabled" + "Components/popover": "enabled", + "global/size": "source", + "global/typography": "enabled", + "global/space": "source", + "global/elevation": "source", + "Components/table": "enabled", + "global/borderradius": "source", + "global/borderwidth": "source" }, "group": "Product" } diff --git a/data/tokens/Components/badge.json b/data/tokens/Components/badge.json index 774fae23..d62002b4 100644 --- a/data/tokens/Components/badge.json +++ b/data/tokens/Components/badge.json @@ -35,20 +35,47 @@ } }, "size": { - "S": { - "value": "{global.size.decorative.M}", - "type": "sizing", - "description": "Micro dot badge size" - }, - "M": { - "value": "{global.size.component.XS}", - "type": "sizing", - "description": "standard badge size" + "micro": { + "M": { + "value": "{global.size.micro.M}", + "type": "sizing", + "description": "Micro dot badge size" + } }, - "L": { - "value": "{global.size.component.S} + {origin.dimension.50}", - "type": "sizing", - "description": "Standard badge max-width" + "standard": { + "min": { + "value": "{global.size.macro.XS}", + "type": "sizing", + "description": "standard badge size" + }, + "max": { + "value": "{global.size.macro.S} + {global.size.micro.XS}", + "type": "sizing", + "description": "Standard badge max-width" + } + } + }, + "borderradius": { + "badge": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Badge" + } + }, + "space": { + "x": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "used on standard badges for left and right padding" + } + } + }, + "borderwidth": { + "badge": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Badge" } } } diff --git a/data/tokens/Components/button.json b/data/tokens/Components/button.json index d8f007c3..4307d0e7 100644 --- a/data/tokens/Components/button.json +++ b/data/tokens/Components/button.json @@ -1,217 +1,422 @@ { "button": { "size": { + "split": { + "value": "{global.size.micro.XXS}", + "type": "sizing", + "description": "Split button (divider width)" + }, "S": { - "value": "{global.size.component.S}", + "value": "{global.size.macro.S}", "type": "sizing", "description": "min-height on S Buttons" }, "M": { - "value": "{global.size.component.M}", + "value": "{global.size.macro.M}", "type": "sizing", "description": "min-height on M Buttons" }, "L": { - "value": "{global.size.component.L}", + "value": "{global.size.macro.L}", "type": "sizing", "description": "min-height on L Buttons" - }, - "XL": { - "value": "{global.size.component.XL}", - "type": "sizing", - "description": "min-height on XL Buttons" - }, - "XXL": { - "value": "{global.size.component.S} * 2", - "type": "sizing", - "description": "color picker items on hover, Small file preview thumbnails" - }, - "XXXL": { - "value": "{global.size.component.M} + {global.size.component.S}", - "type": "sizing", - "description": "Large file preview thumbnails" } }, "space": { - "inside": { - "XXS": { - "value": "{origin.dimension.50}", - "type": "spacing", - "description": "top and bottom padding on small buttons" - }, - "XS": { - "value": "{origin.dimension.100}", - "type": "spacing", - "description": "top and bottom padding on medium buttons" - }, - "S": { - "value": "{origin.dimension.150}", - "type": "spacing", - "description": "top and bottom padding on large buttons" + "none": { + "value": "0", + "type": "spacing", + "description": "top and bottom padding on small buttons" + }, + "layout": { + "gap": { + "S": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Spacing between small buttons" + }, + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Spacing between medium buttons" + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Spacing between Large buttons" + } + } + }, + "subtle": { + "x": { + "S": { + "value": "{global.space.micro.XS}", + "type": "spacing", + "description": "left and right padding on subtle buttons" + }, + "M": { + "value": "{global.space.micro.XS}", + "type": "spacing", + "description": "left and right padding on subtle buttons" + }, + "L": { + "value": "{global.space.micro.XS}", + "type": "spacing", + "description": "left and right padding on subtle buttons" + } }, - "M": { - "value": "{origin.dimension.200}", - "type": "spacing", - "description": "left and right padding on small buttons" + "xg": { + "S": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Item spacing inside buttons" + }, + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Item spacing inside buttons" + }, + "L": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Item spacing inside buttons" + } }, - "L": { - "value": "{origin.dimension.300}", - "type": "spacing", - "description": "left and right padding on Medium buttons" + "y": { + "S": { + "value": "{origin.dimension.50}", + "type": "spacing", + "description": "Bottom and top padding on small buttons." + }, + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top and bottom padding on medium buttons\n" + }, + "L": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Top and bottom padding on Large buttons\n" + } + } + }, + "toggle": { + "button": { + "x": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding on medium toggle buttons" + }, + "L": { + "value": "{global.space.macro.S}", + "type": "spacing", + "description": "Left and right padding on buttons" + } + }, + "xg": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Item spacing inside toggle buttons" + }, + "L": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Item spacing inside toggle buttons" + } + }, + "y": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Top and bottom padding on toggle buttons\n" + }, + "L": { + "value": "{global.space.micro.M}", + "type": "spacing", + "description": "Top and bottom padding on toggle buttons\n" + } + } }, - "XL": { - "value": "{origin.dimension.400}", - "type": "spacing", - "description": "left and right padding on large buttons" + "container": { + "x": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Horizontal padding" + }, + "L": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Horizontal padding" + } + }, + "xg": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Spacing between buttons in Toggle.\n" + }, + "L": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Spacing between buttons in Toggle.\n" + } + }, + "y": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Vertical padding" + }, + "L": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Vertical padding" + } + } } }, - "stack": { - "S": { - "value": "{origin.dimension.200}", - "type": "spacing" + "typical": { + "x": { + "S": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Left and right padding on small buttons" + }, + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding on medium buttons" + }, + "L": { + "value": "{global.space.macro.S}", + "type": "spacing", + "description": "Left and right padding on large buttons" + } }, - "M": { - "value": "{origin.dimension.300}", - "type": "spacing" + "xg": { + "S": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Item spacing inside buttons" + }, + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Item spacing inside buttons" + }, + "L": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Item spacing inside buttons" + } }, - "L": { - "value": "{origin.dimension.400}", - "type": "spacing" + "y": { + "S": { + "value": "{origin.dimension.50}", + "type": "spacing", + "description": "Bottom and top padding on small buttons." + }, + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top and bottom padding on medium buttons\n" + }, + "L": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Top and bottom padding on Large buttons\n" + } } } }, "color": { "inverse": { - "typical": { + "ai": { + "bg-active": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.ai.inverse.hover}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.inverse.default}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.ai.inverse.default}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.ai.inverse.default}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.inverse.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.inverse.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.inverse.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.inverse.withHover}", + "type": "color" + } + }, + "destructive": { "primary": { "bg-active": { - "value": "{base.color.interactive.monochrome.inverse.active}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the value should be {base.color.interactive.danger.inverse.active}" }, "bg-disabled": { - "value": "{base.color.interactive.inactive.inverse.defaultAlt}", + "value": "{base.color.interactive.inactive.inverse.default}", "type": "color" }, "bg-enabled": { - "value": "{base.color.interactive.primary.inverse.default}", + "value": "{base.color.interactive.danger.inverse.default}", "type": "color" }, "bg-hover": { - "value": "{base.color.interactive.primary.inverse.hover}", + "value": "{base.color.interactive.danger.inverse.hover}", "type": "color" }, "label-active": { - "value": "{base.color.interactive.primary.inverse.withActive}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the value should be {base.color.interactive.danger.inverse.withActive}" }, "label-disabled": { - "value": "{base.color.interactive.inactive.inverse.content}", + "value": "{base.color.interactive.inactive.inverse.contentAlt}", "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.primary.inverse.withDefault}", + "value": "{base.color.interactive.danger.inverse.withDefault}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.primary.inverse.withDefault}", + "value": "{base.color.interactive.danger.inverse.withDefault}", "type": "color" } }, "secondary": { "bg-active": { - "value": "{base.color.interactive.monochrome.inverse.active}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the avlue should be {base.color.interactive.danger.inverse.active}" }, "bg-hover": { - "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", + "value": "{base.color.interactive.danger.inverse.hoverAlt}", "type": "color" }, "border-active": { - "value": "{base.color.interactive.monochrome.standard.active}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the value is {base.color.interactive.danger.standard.active}" }, "border-disabled": { "value": "{base.color.interactive.inactive.inverse.default}", "type": "color" }, "border-enabled": { - "value": "{base.color.interactive.monochrome.inverse.default}", + "value": "{base.color.interactive.danger.inverse.default}", "type": "color" }, "border-hover": { - "value": "{base.color.interactive.monochrome.inverse.hover}", + "value": "{base.color.interactive.danger.inverse.hover}", "type": "color" }, "label-active": { - "value": "{base.color.interactive.monochrome.inverse.withActive}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the value should be {base.color.interactive.danger.inverse.withActive}" }, "label-disabled": { "value": "{base.color.interactive.inactive.inverse.content}", "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.monochrome.inverse.default}", + "value": "{base.color.interactive.danger.inverse.default}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.monochrome.inverse.withHover}", + "value": "{base.color.interactive.danger.inverse.hover}", "type": "color" } - }, - "subtle": { + } + }, + "typical": { + "primary": { "bg-active": { "value": "{base.color.interactive.monochrome.inverse.active}", "type": "color" }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.inverse.default}", + "type": "color" + }, + "bg-enabled": { + "value": "{base.color.interactive.primary.inverse.default}", + "type": "color" + }, "bg-hover": { - "value": "{base.color.interactive.monochrome.standard.hoverAlt}", + "value": "{base.color.interactive.primary.inverse.hover}", "type": "color" }, "label-active": { - "value": "{base.color.interactive.monochrome.inverse.withActive}", + "value": "{base.color.interactive.primary.inverse.withActive}", "type": "color" }, "label-disabled": { - "value": "{base.color.interactive.inactive.inverse.content}", + "value": "{base.color.interactive.inactive.inverse.contentAlt}", "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", + "value": "{base.color.interactive.primary.inverse.withDefault}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.monochrome.inverse.withHover}", + "value": "{base.color.interactive.primary.inverse.withDefault}", "type": "color" } }, - "tertiary": { + "secondary": { "bg-active": { "value": "{base.color.interactive.monochrome.inverse.active}", "type": "color" }, - "bg-activeDisabled": { - "value": "{base.color.interactive.inactive.standard.default}", - "type": "color" - }, "bg-hover": { "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", "type": "color" }, "border-active": { - "value": "{base.color.interactive.monochrome.standard.active}", + "value": "{base.color.interactive.monochrome.inverse.active}", "type": "color" }, "border-disabled": { - "value": "{base.color.interactive.inactive.inverse.defaultAlt}", + "value": "{base.color.interactive.inactive.inverse.default}", "type": "color" }, "border-enabled": { - "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", + "value": "{base.color.interactive.monochrome.inverse.default}", "type": "color" }, "border-hover": { - "value": "{base.color.interactive.monochrome.standard.defaultAlt}", + "value": "{base.color.interactive.monochrome.inverse.hover}", "type": "color" }, "label-active": { @@ -223,61 +428,55 @@ "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", + "value": "{base.color.interactive.monochrome.inverse.default}", "type": "color" }, "label-hover": { "value": "{base.color.interactive.monochrome.inverse.withHover}", "type": "color" } - } - }, - "destructive": { - "primary": { + }, + "subtle": { "bg-active": { - "value": "{base.color.interactive.danger.inverse.active}", - "type": "color" - }, - "bg-disabled": { - "value": "{base.color.interactive.inactive.inverse.default}", - "type": "color" - }, - "bg-enabled": { - "value": "{base.color.interactive.danger.inverse.default}", + "value": "{base.color.interactive.monochrome.inverse.active}", "type": "color" }, "bg-hover": { - "value": "{base.color.interactive.danger.inverse.hover}", + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", "type": "color" }, "label-active": { - "value": "{base.color.interactive.danger.inverse.withActive}", + "value": "{base.color.interactive.monochrome.inverse.withActive}", "type": "color" }, "label-disabled": { - "value": "{base.color.interactive.inactive.inverse.contentAlt}", + "value": "{base.color.interactive.inactive.inverse.content}", "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.danger.inverse.withDefault}", + "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.danger.inverse.withDefault}", + "value": "{base.color.interactive.monochrome.inverse.withHover}", "type": "color" } }, - "secondary": { + "tertiary": { "bg-active": { - "value": "{base.color.interactive.danger.inverse.active}", + "value": "{base.color.interactive.monochrome.inverse.active}", + "type": "color" + }, + "bg-activeDisabled": { + "value": "{base.color.interactive.inactive.standard.default}", "type": "color" }, "bg-hover": { - "value": "{base.color.interactive.danger.inverse.hoverAlt}", + "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", "type": "color" }, "border-active": { - "value": "{base.color.interactive.danger.standard.active}", + "value": "{base.color.interactive.monochrome.standard.active}", "type": "color" }, "border-disabled": { @@ -285,15 +484,15 @@ "type": "color" }, "border-enabled": { - "value": "{base.color.interactive.danger.inverse.default}", + "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", "type": "color" }, "border-hover": { - "value": "{base.color.interactive.danger.inverse.hover}", + "value": "{base.color.interactive.monochrome.standard.defaultAlt}", "type": "color" }, "label-active": { - "value": "{base.color.interactive.danger.inverse.withActive}", + "value": "{base.color.interactive.monochrome.inverse.withActive}", "type": "color" }, "label-disabled": { @@ -301,22 +500,65 @@ "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.danger.inverse.default}", + "value": "{base.color.interactive.monochrome.inverse.defaultAlt}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.danger.inverse.hover}", + "value": "{base.color.interactive.monochrome.inverse.withHover}", "type": "color" } } } }, "standard": { + "ai": { + "bg-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "bg-hover": { + "value": "{base.color.interactive.ai.standard.hover}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color" + }, + "border-enabled": { + "value": "{base.color.interactive.ai.standard.default}", + "type": "color" + }, + "border-hover": { + "value": "{base.color.interactive.ai.standard.default}", + "type": "color" + }, + "label-active": { + "value": "{base.color.interactive.monochrome.standard.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color" + }, + "label-enabled": { + "value": "{base.color.interactive.monochrome.standard.default}", + "type": "color" + }, + "label-hover": { + "value": "{base.color.interactive.monochrome.standard.withHover}", + "type": "color" + } + }, "destructive": { "primary": { "bg-active": { - "value": "{base.color.interactive.danger.standard.active}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the value should be {base.color.interactive.danger.standard.active}" }, "bg-disabled": { "value": "{base.color.interactive.inactive.standard.default}", @@ -331,8 +573,9 @@ "type": "color" }, "label-active": { - "value": "{base.color.interactive.danger.standard.withActive}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the value should be {base.color.interactive.danger.standard.withActive}" }, "label-disabled": { "value": "{base.color.interactive.inactive.standard.contentAlt}", @@ -349,16 +592,18 @@ }, "secondary": { "bg-active": { - "value": "{base.color.interactive.danger.standard.active}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "if needed the value should be {base.color.interactive.danger.standard.active}" }, "bg-hover": { "value": "{base.color.interactive.danger.standard.hoverAlt}", "type": "color" }, "border-active": { - "value": "{base.color.interactive.danger.standard.active}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the value is {base.color.interactive.danger.standard.active}" }, "border-disabled": { "value": "{base.color.interactive.inactive.standard.default}", @@ -373,8 +618,9 @@ "type": "color" }, "label-active": { - "value": "{base.color.interactive.danger.standard.withActive}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "If needed the value should be {base.color.interactive.danger.standard.withActive}" }, "label-disabled": { "value": "{base.color.interactive.inactive.standard.content}", @@ -397,8 +643,13 @@ "type": "color", "description": "Was previously dark green" }, + "bg-default": { + "value": "{base.color.interactive.primary.standard.withDefault}", + "type": "color", + "description": "For spacer in Split button" + }, "bg-disabled": { - "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "value": "{base.color.interactive.inactive.standard.default}", "type": "color" }, "bg-enabled": { @@ -414,7 +665,7 @@ "type": "color" }, "label-disabled": { - "value": "{base.color.interactive.inactive.standard.content}", + "value": "{base.color.interactive.inactive.standard.contentAlt}", "type": "color" }, "label-enabled": { @@ -512,7 +763,7 @@ "type": "color" }, "border-disabled": { - "value": "{base.color.interactive.inactive.standard.defaultAlt}", + "value": "{base.color.interactive.inactive.standard.default}", "type": "color" }, "border-enabled": { @@ -542,6 +793,55 @@ } } } + }, + "borderradius": { + "none": { + "value": "{global.borderradius.none}", + "type": "borderRadius", + "description": "Button bar S, M, L (internal/adjacent corners), Search bar (button left corners)" + }, + "S": { + "value": "{global.borderradius.interactive.L}", + "type": "borderRadius", + "description": "Buttons S (typical and destructive, and inc bar, split and multi), \nButton toggle M (parent container)" + }, + "M": { + "value": "{global.borderradius.interactive.XL}", + "type": "borderRadius", + "description": "Buttons M (typical and destructive, and inc bar, split and multi), \nButton toggle L (parent container), Button toggle M (parent container)" + }, + "L": { + "value": "{global.borderradius.interactive.XXL}", + "type": "borderRadius", + "description": "Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)" + }, + "subtle": { + "value": "{global.borderradius.interactive.M}", + "type": "borderRadius", + "description": "Buttons subtle" + } + }, + "borderwidth": { + "none": { + "value": "{global.borderwidth.none}", + "type": "borderWidth", + "description": "Override on tertiary buttons within Button-toggle.\n" + }, + "secondary": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Secondary button.\n" + }, + "tertiary": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Tertiary button.\n" + }, + "togglecontainer": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Toggle container" + } } } } \ No newline at end of file diff --git a/data/tokens/Components/container.json b/data/tokens/Components/container.json index c6e0467c..0e104318 100644 --- a/data/tokens/Components/container.json +++ b/data/tokens/Components/container.json @@ -11,6 +11,25 @@ "type": "color" } }, + "scroll": { + "bg-default": { + "value": "{base.color.generic.bg.inverse.nought}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "lch" + } + } + } + }, + "fg-default": { + "value": "{base.color.generic.fg.standard.moderate}", + "type": "color" + } + }, "standard": { "bg-alt": { "value": "{base.color.generic.bg.standard.faint}", @@ -20,11 +39,28 @@ "value": "{base.color.generic.bg.standard.nought}", "type": "color" }, + "bgFooter-activated": { + "value": "{base.color.status.success.standard.default}", + "type": "color", + "description": "\n" + }, + "bgFooter-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, "bgFooter-default": { "value": "{base.color.generic.bg.standard.faint}", "type": "color", "description": "tile footer bg color\n" }, + "border-activated": { + "value": "{base.color.status.success.standard.default}", + "type": "color" + }, + "border-active": { + "value": "{base.color.interactive.monochrome.standard.active}", + "type": "color" + }, "border-alt": { "value": "{base.color.generic.fg.standard.soft}", "type": "color" @@ -77,20 +113,23 @@ "description": "Used for accordion hover backgrounds\n" }, "bgFooter-active": { - "value": "{base.color.interactive.monochrome.standard.active}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "was {base.color.interactive.monochrome.standard.active}, don't think we need this anymore" }, "bgFooter-activated": { - "value": "{base.color.status.success.standard.default}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "was {base.color.status.success.standard.default}, probably not needed\n" }, "border-active": { "value": "{base.color.interactive.monochrome.standard.active}", "type": "color" }, "border-activated": { - "value": "{base.color.status.success.standard.default}", - "type": "color" + "value": "#ff00ff", + "type": "color", + "description": "was {base.color.status.success.standard.default}, probably not needed. " }, "border-alt": { "value": "{base.color.generic.fg.standard.delicate}", @@ -160,88 +199,774 @@ } }, "size": { - "scrollbar": { - "outside": { - "value": "{global.size.decorative.XL}", - "type": "sizing" - }, - "inside": { - "value": "{global.size.decorative.S}", + "accordionstandard": { + "chevron": { + "value": "{global.size.icon.L}", "type": "sizing", - "description": "scrollbar handle" + "description": "Accordion chevron container" } }, - "pagination": { - "dots": { - "value": "{global.size.decorative.L}", - "type": "sizing" + "drawer": { + "closed": { + "M": { + "value": "{global.size.macro.M}", + "type": "sizing", + "description": "width for the closed drawer state" + } + } + }, + "footer": { + "M": { + "value": "{global.size.macro.XL}", + "type": "sizing", + "description": "card and tile footers" + }, + "L": { + "value": "{global.size.macro.XS} * 3", + "type": "sizing", + "description": "Dialog, sidebar and drawer footer max-height" } }, - "items": { + "responsive": { + "XXS": { + "value": "{global.size.mega.XXS}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, "XS": { - "value": "{origin.dimension.1000}", + "value": "{global.size.mega.XS}", "type": "sizing", "description": "min and max widths for responsive tile items" }, "S": { - "value": "{origin.dimension.1600}", + "value": "{global.size.mega.S}", + "type": "sizing", + "description": "min and max widths for responsive tile items. Min width for Tile select content wrapper." + }, + "M": { + "value": "{global.size.mega.M}", "type": "sizing", "description": "min and max widths for responsive tile items" }, "L": { - "value": "{origin.dimension.2000}", + "value": "{global.size.mega.L}", "type": "sizing", "description": "min and max widths for responsive tile items" }, "XL": { - "value": "{origin.dimension.2500}", + "value": "{global.size.mega.XL}", "type": "sizing", - "description": "min and max widths for responsive tile items" + "description": "Small screen mid width inside page margins." }, "XXL": { - "value": "{origin.dimension.3000}", + "value": "{global.size.mega.XXL}", "type": "sizing", - "description": "min and max widths for responsive tile items" + "description": "Small screen full page width." }, "XXXL": { - "value": "{origin.dimension.7000}", + "value": "{global.size.mega.XXXL}", "type": "sizing", "description": "min and max widths for responsive tile items" + }, + "XXXXL": { + "value": "{global.size.mega.XXXXL}", + "type": "sizing", + "description": "Max width for single line of text." } }, - "drawer": { - "closed": { - "M": { - "value": "{global.size.component.M}", - "type": "sizing", - "description": "width for the closed drawer state" - } + "linkpreview": { + "M": { + "value": "{global.size.macro.XXXL}", + "type": "sizing", + "description": "Thumbnail container" } }, - "footer": { - "M": { - "value": "{global.size.component.XL}", + "pagination": { + "dots": { + "value": "{global.size.micro.L}", + "type": "sizing" + }, + "activedot": { + "value": "{global.size.macro.XXS}", + "type": "sizing" + }, + "hitarea": { + "value": "{global.size.macro.M}", + "type": "sizing" + } + }, + "scrollbar": { + "container": { + "value": "{global.size.micro.XL}", "type": "sizing", - "description": "card and tile footers" + "description": "Container that the scrollbar sits within\n" }, - "L": { - "value": "{global.size.component.M} + {global.size.component.S}", + "bg": { + "value": "{global.size.micro.M}", "type": "sizing", - "description": "Dialog, sidebar and drawer footer max-height" + "description": "Scrollbar bg\n" + }, + "fg": { + "value": "{global.size.micro.S}", + "type": "sizing", + "description": "scrollbar handle" } }, - "tooltip": { + "subscriptiontile": { + "footer": { + "value": "{global.size.macro.L}", + "type": "sizing", + "description": "Product identifier\n" + }, + "productidentifier": { + "value": "{global.size.macro.L}", + "type": "sizing", + "description": "Product identifier\n" + } + }, + "tooltipArrow": { "width": { - "value": "{global.size.decorative.XXL}", + "value": "{global.size.micro.XXL}", "type": "sizing", "description": "tooltip arrow width" }, "height": { - "value": "{global.size.decorative.M}", + "value": "{global.size.micro.M}", "type": "sizing", "description": "tooltip arrow height" } } + }, + "borderradius": { + "none": { + "value": "{global.borderradius.none}", + "type": "borderRadius", + "description": "Card select (inner adjacent corners), Subscription tile footer top corners" + }, + "carousel": { + "value": "{global.borderradius.container.L}", + "type": "borderRadius", + "description": "Carousel (parent container), " + }, + "dialog": { + "value": "{global.borderradius.container.L}", + "type": "borderRadius", + "description": "Dialog" + }, + "colorpicker": { + "value": "{global.borderradius.container.L}", + "type": "borderRadius", + "description": "Color picker container radius" + }, + "filepreview": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "File preview (parent container), " + }, + "note": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Note" + }, + "linkpreview": { + "value": "{global.borderradius.interactive.M}", + "type": "borderRadius", + "description": "Link preview (outer corners)" + }, + "scrollbar": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Scrollbar" + }, + "subscriptiontile": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Subscription tile" + }, + "texteditor": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Text editor (footer bottom corners)\n" + }, + "card": { + "moderate": { + "value": "{global.borderradius.interactive.M}", + "type": "borderRadius", + "description": "Card (less rounded)" + }, + "curved": { + "value": "{global.borderradius.interactive.L}", + "type": "borderRadius", + "description": "Card (more rounded)" + } + }, + "skeleton": { + "rectangle": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Skeleton (rectangle & text)" + }, + "circle": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Skeleton (circle)" + } + }, + "tile": { + "moderate": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Tile (less rounded)" + }, + "curved": { + "value": "{global.borderradius.container.L}", + "type": "borderRadius", + "description": "Tile (more rounded)" + } + } + }, + "space": { + "none": { + "value": "0", + "type": "spacing" + }, + "summarylist": { + "item": { + "xg": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "gap between summary list item content" + } + }, + "y": { + "M": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "top and bottom padding for each item\n" + } + } + }, + "title": { + "xg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap between summary list title and edit link" + } + }, + "y": { + "M": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "bottom padding for each section title" + }, + "L": { + "value": "{global.space.macro.XXL}", + "type": "spacing", + "description": "top padding for each section title" + } + } + } + }, + "accordionsubtle": { + "integral": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Gap between icon and label in subtle accordion." + }, + "pl": { + "M": { + "value": "{global.space.micro.XL}", + "type": "spacing", + "description": "Left padding on Subtle accordion vertical line" + } + }, + "x": { + "M": { + "value": "{global.space.micro.XS}", + "type": "spacing", + "description": "Horizontal padding on Accordion subtle." + } + }, + "y": { + "M": { + "value": "{global.space.micro.XS}", + "type": "spacing", + "description": "Vertical padding on Accordion subtle." + } + }, + "yg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Gap between Accordion subtle trigger and content" + } + } + }, + "stepflow": { + "header": { + "yg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Gap between Step flow title and step numbers" + } + } + }, + "content": { + "yg": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Gap between Step flow numers and step visuals" + } + } + } + }, + "generic": { + "content": { + "pt": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Top padding on content in Accordion, Dialog, Drawer, Sidebar" + } + }, + "x": { + "S": { + "value": "{global.space.macro.S}", + "type": "spacing", + "description": "Left and right padding S cards and S tiles" + }, + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Left and right padding on dialog, drawer, M cards, M tiles and sidebar" + }, + "L": { + "value": "{global.space.macro.L}", + "type": "spacing", + "description": "Left and right padding on large card and tile " + } + }, + "y": { + "S": { + "value": "{global.space.macro.S}", + "type": "spacing", + "description": "Left and right padding S cards and S tiles" + }, + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Vertical padding on content in dialog, drawer, sidebar card and tile" + } + }, + "xg": { + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap padding between carousel tiles" + } + }, + "yg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Vertical gap between content items in dialog, drawer, sidebar, M card and M tile. " + } + } + }, + "footer": { + "x": { + "S": { + "value": "{global.space.macro.S}", + "type": "spacing", + "description": "Left and right padding S card and S tile footers" + }, + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Left and right padding on dialog, drawer, M card, M tile and sidebar footers" + }, + "L": { + "value": "{global.space.macro.L}", + "type": "spacing", + "description": "Left and right padding on large card and tile footers" + } + }, + "y": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "top and bottom padding on dialog, drawer and sidebar footers" + } + } + }, + "header": { + "x": { + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Left and right padding on dialog, drawer, M cards, M tiles and sidebar" + } + }, + "xg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "horizontal space between dialog heading and icon" + } + }, + "y": { + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Vertical padding on Accordion and dialog headers" + } + }, + "yg": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "vertical space between heading and subheading in dialog, accordion" + } + } + } + }, + "pagination": { + "xg": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "gap between elements in pagination" + }, + "L": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap between page nav buttons in pagination" + } + }, + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "top and bottom padding inside pagination" + } + }, + "x": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "left and right padding inside pagination" + } + } + }, + "note": { + "x": { + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Left and right padding on Note" + } + }, + "xg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Gap between columns in editor detail in Note." + } + }, + "y": { + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Top bottom padding on Note" + } + }, + "yg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Vertical gap on Note" + } + } + }, + "subscriptiontile": { + "x": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding on Subscription tile container" + } + }, + "y": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Top bottom padding on Subscription tile container" + } + }, + "yg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Vertical gap between content blocks in Subscription tile." + } + }, + "footer": { + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top bottom padding in footer." + }, + "L": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Top bottom margins on carousel dots" + } + }, + "xg": { + "S": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Gap between carousel dots" + } + } + } + }, + "tilecard": { + "x": { + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Right left padding on Tile or Card." + }, + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Right left padding on Tile or Card." + }, + "L": { + "value": "{global.space.macro.L}", + "type": "spacing", + "description": "Right left padding on Tile or Card." + } + }, + "y": { + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Top bottom padding on Tile or Card." + }, + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Top bottom padding on Tile or Card." + }, + "L": { + "value": "{global.space.macro.L}", + "type": "spacing", + "description": "Top bottom padding on Tile or Card." + } + } + }, + "tileflex": { + "x": { + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding on Tile flex" + }, + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Left and right padding on Tile flex" + }, + "L": { + "value": "{global.space.macro.L}", + "type": "spacing", + "description": "Left and right padding on Tile flex" + } + }, + "y": { + "S": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top bottom padding on Tile flex" + }, + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Top bottom padding on Tile flex" + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Top bottom padding on Tile flex" + } + } + } + }, + "boxshadow": { + "carousel": { + "value": "{global.box-shadow.container.distant}", + "type": "boxShadow", + "description": "Carousel\n" + }, + "colorpicker": { + "value": "{global.box-shadow.container.near}", + "type": "boxShadow", + "description": "Color picker (advanced)\n" + }, + "dialog": { + "value": "{global.box-shadow.container.distant}", + "type": "boxShadow", + "description": "Dialog\n" + }, + "filepreview": { + "value": "{global.box-shadow.container.distant}", + "type": "boxShadow", + "description": "File preview" + }, + "sidebar": { + "value": "{global.box-shadow.container.distant}", + "type": "boxShadow", + "description": "Sidebar" + }, + "stickyfooter": { + "value": "{global.box-shadow.container.sticky-footer}", + "type": "boxShadow", + "description": "Sticky footer in Dialog, Drawer, Sidebar." + }, + "card": { + "enabled": { + "value": "{global.box-shadow.interactive.enabled}", + "type": "boxShadow", + "description": "Card (enabled)" + }, + "hover": { + "value": "{global.box-shadow.interactive.hover}", + "type": "boxShadow", + "description": "Card (hover state)" + } + } + }, + "borderwidth": { + "dialog": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Dialog" + }, + "divider": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Divider" + }, + "drawer": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Drawer" + }, + "footer": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Footer (in Card, Dialog)\n" + }, + "header": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Global header (next to logo)\n" + }, + "linkpreview": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Link preview in Text editor and Note\n" + }, + "note": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Note\n" + }, + "sidebar": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Sidebar" + }, + "summarylist": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Summary list" + }, + "tile": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Tile" + }, + "accordion": { + "standard": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Accordion standard (top and bottom borders)" + }, + "subtle": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Accordion subtle (content vertical line)" + } + }, + "filepreview": { + "container": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "File preview (internal borders)\n" + }, + "enabled": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "File preview (file selector)\n" + }, + "active": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "File preview (file selector)\n" + } + }, + "subscriptiontile": { + "active": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Subscription tile (active product)" + }, + "inactive": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Subscription tile (inactive product)" + }, + "selected": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Subscription tile (selected product)" + }, + "unavailable": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Subscription tile (unavailable product)" + } + }, + "tileselect": { + "enabled": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Tile select (enabled tile)" + }, + "selected": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Tile select (selected tile)" + } + } } } } \ No newline at end of file diff --git a/data/tokens/Components/feedback.json b/data/tokens/Components/feedback.json index d85cd781..947068af 100644 --- a/data/tokens/Components/feedback.json +++ b/data/tokens/Components/feedback.json @@ -6,10 +6,25 @@ "value": "{base.color.generic.bg.inverse.nought}", "type": "color" }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.inverse.default}", + "type": "color", + "description": "Pill (all types, disabled)" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.inverse.default}", + "type": "color", + "description": "Pill (all types, disabled)" + }, "label-default": { "value": "{base.color.status.content.inverse.withDefault}", "type": "color" }, + "label-disabled": { + "value": "{base.color.status.content.inverse.withDefault}", + "type": "color", + "description": "Pill (all types, disabled)" + }, "label-hover": { "value": "{base.color.status.content.inverse.withHover}", "type": "color" @@ -18,6 +33,11 @@ "value": "{base.color.status.content.inverse.withDefaultAlt}", "type": "color" }, + "labelAlt-disabled": { + "value": "{base.color.interactive.inactive.inverse.content}", + "type": "color", + "description": "Pill (all types, disabled)" + }, "labelAlt-hover": { "value": "{base.color.status.content.inverse.withHoverAlt}", "type": "color" @@ -118,10 +138,25 @@ "value": "{base.color.generic.bg.standard.nought}", "type": "color" }, + "bg-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color", + "description": "Pill (all types, disabled)" + }, + "border-disabled": { + "value": "{base.color.interactive.inactive.standard.default}", + "type": "color", + "description": "Pill (all types, disabled)" + }, "label-default": { "value": "{base.color.status.content.standard.withDefault}", "type": "color" }, + "label-disabled": { + "value": "{base.color.status.content.standard.withDefault}", + "type": "color", + "description": "Pill (all types, disabled)" + }, "label-hover": { "value": "{base.color.status.content.standard.withHover}", "type": "color" @@ -130,6 +165,11 @@ "value": "{base.color.status.content.standard.withDefaultAlt}", "type": "color" }, + "labelAlt-disabled": { + "value": "{base.color.interactive.inactive.standard.content}", + "type": "color", + "description": "Pill (all types, disabled)" + }, "labelAlt-hover": { "value": "{base.color.status.content.standard.withHoverAlt}", "type": "color" @@ -229,27 +269,173 @@ "size": { "pill": { "S": { - "value": "{global.size.component.XS} - {origin.dimension.50}", - "type": "sizing" + "value": "{global.size.macro.XS} - {global.size.micro.XS}", + "type": "sizing", + "description": "Min height" }, "M": { - "value": "{global.size.component.XS}", - "type": "sizing" + "value": "{global.size.macro.XS}", + "type": "sizing", + "description": "Min height and removable button." }, "L": { - "value": "{global.size.component.XS} + {origin.dimension.50}", - "type": "sizing" + "value": "{global.size.macro.XS} + {global.size.micro.XS}", + "type": "sizing", + "description": "Min height and removable button" + } + }, + "message": { + "statuscontainer": { + "M": { + "value": "{global.size.macro.S}", + "type": "sizing", + "description": "message and toast icon container width" + }, + "L": { + "value": "{global.size.macro.M}", + "type": "sizing", + "description": "message and toast icon container width" + } + } + } + }, + "borderradius": { + "none": { + "value": "{global.borderradius.none}", + "type": "borderRadius", + "description": "Pill (embedded element inner corners)" + }, + "message": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Message" + }, + "pill": { + "value": "{global.borderradius.container.XS}", + "type": "borderRadius", + "description": "Pill (outer corners)" + }, + "toast": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Toast" + }, + "tooltip": { + "value": "{global.borderradius.container.S}", + "type": "borderRadius", + "description": "Tooltip\n" + } + }, + "boxshadow": { + "toast": { + "value": "{global.box-shadow.container.far}", + "type": "boxShadow", + "description": "Toast\n" + }, + "tooltip": { + "value": "{global.box-shadow.container.far}", + "type": "boxShadow", + "description": "Tooltip\n" + } + }, + "borderwidth": { + "pill": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Outlined Pill border" + }, + "message": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Message border" + }, + "toast": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Message border" + } + }, + "space": { + "none": { + "value": "0", + "type": "spacing" + }, + "pill": { + "x": { + "S": { + "value": "{global.space.micro.S}", + "type": "spacing" + }, + "M": { + "value": "{global.space.micro.L}", + "type": "spacing" + }, + "L": { + "value": "{global.space.micro.XXL}", + "type": "spacing" + } + } + }, + "tooltip": { + "x": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Right left padding.\n" }, - "XL": { - "value": "{global.size.component.S}", - "type": "sizing" + "y": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top bottom padding.\n" } }, "message": { - "M": { - "value": "{global.size.component.M}", - "type": "sizing", - "description": "message and toast icon container width" + "x": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding on Medium message" + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Left and right paddding on Large Message" + } + }, + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top and bottom padding on Medium message" + }, + "L": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Top and bottom paddding on Large Message" + } + }, + "xg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap between text and optional subtle button" + }, + "L": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap between text and optional subtle button" + } + }, + "yg": { + "M": { + "value": "{feedback.space.none}", + "type": "spacing", + "description": "gap between header and body copy" + }, + "L": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Gap between text and subtle button" + } } } } diff --git a/data/tokens/Components/focus.json b/data/tokens/Components/focus.json index ed836438..c8789118 100644 --- a/data/tokens/Components/focus.json +++ b/data/tokens/Components/focus.json @@ -5,7 +5,7 @@ "value": "{base.color.interactive.focus.withDefaultAlt}", "type": "color" }, - "border-alt": { + "borderalt": { "value": "{base.color.interactive.focus.withDefault}", "type": "color" }, @@ -20,10 +20,27 @@ }, "size": { "underline": { - "value": "{global.size.decorative.XS}", + "value": "{global.size.micro.XS}", "type": "sizing", "description": "focus black underline on links and skiplink" } + }, + "borderwidth": { + "secondary": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Secondary focus (dropdown item)" + }, + "inner": { + "value": "{global.borderwidth.M}", + "type": "borderWidth", + "description": "Focus border (inner)" + }, + "outer": { + "value": "{global.borderwidth.XL}", + "type": "borderWidth", + "description": "Focus border (outer)" + } } } } \ No newline at end of file diff --git a/data/tokens/Components/form.json b/data/tokens/Components/form.json index 289fd5e5..736dbaae 100644 --- a/data/tokens/Components/form.json +++ b/data/tokens/Components/form.json @@ -1,163 +1,370 @@ { "form": { "space": { - "inside": { - "S": { - "value": "{origin.dimension.50}", - "type": "spacing" + "none": { + "value": "0", + "type": "spacing" + }, + "calendar": { + "largevp": { + "M": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Horizontal padding on calendar, for large viewports." + } }, - "M": { - "value": "{origin.dimension.100}", - "type": "spacing" + "smallvp": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Horizontal padding on calendar, for small viewports." + } + } + }, + "fileinput": { + "status": { + "M": { + "value": "{global.space.macro.ML}", + "type": "spacing", + "description": "Left padding in File input (no-thumbnail variant, status text." + } }, - "L": { - "value": "{origin.dimension.150}", - "type": "spacing" + "thumbnail": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "All padding in File input (thumbnail container)." + } + }, + "x": { + "M": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Right left padding in File input (preview container), the input container uses Input tokens." + } + }, + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top padding in file input (preview container)." + } }, - "XL": { - "value": "{origin.dimension.200}", - "type": "spacing" + "yg": { + "M": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Vertical gap in file input (input container)." + } } }, - "stack": { - "S": { - "value": "{origin.dimension.200}", + "integral": { + "numdate": { + "value": "{global.space.micro.S}", "type": "spacing", - "description": "Stacked S inputs" + "description": "Space between secondarylabel&input in Numeral date." }, - "M": { - "value": "{origin.dimension.300}", + "popover": { + "value": "{global.space.micro.M}", "type": "spacing", - "description": "Stacked M inputs" + "description": "Space between input and popover" }, - "L": { - "value": "{origin.dimension.400}", + "stack": { + "value": "{global.space.micro.L}", "type": "spacing", - "description": "Stacked L inputs" + "description": "Space below labelset, before the input. Space between input and preview containers in File input. Space between input and character count." + }, + "xg": { + "S": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button)" + }, + "M": { + "value": "{global.space.micro.M}", + "type": "spacing", + "description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button, dropdown option icon and label), Switch and processing text." + }, + "L": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button)" + } } - } - }, - "size": { - "none": { - "value": "{origin.dimension.0}", - "type": "sizing" }, "input": { - "XS": { - "value": "{global.size.component.XS}", - "type": "sizing", - "description": "min-height on XS inputs" + "stack": { + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Vertical gap on custom date range between the 2 inputs." + }, + "M": { + "value": "{global.space.macro.S}", + "type": "spacing", + "description": "Vertical gap on custom date range between the 2 inputs. Horizontal gap between start and end date inputs in Date range." + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Vertical gap on custom date range between the 2 inputs." + } }, - "S": { - "value": "{global.size.component.S}", - "type": "sizing", - "description": "min-height on S inputs" + "x": { + "S": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Left right padding on input." + }, + "M": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Left right padding on input. Right padding on dropdown option." + }, + "L": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left right padding on input." + } }, - "M": { - "value": "{global.size.component.M}", - "type": "sizing", - "description": "Min height on M Inputs and M Dropdowns. Fixed height on Calendar days" + "xg": { + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group." + }, + "M": { + "value": "{global.space.macro.S}", + "type": "spacing", + "description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group, and between elements in Pagination." + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group." + } }, - "L": { - "value": "{global.size.component.L}", - "type": "sizing", - "description": "L Inputs, Color picker square" + "y": { + "S": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Top bottom padding on input." + }, + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top bottom padding on input." + }, + "L": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Top bottom padding on input." + } + }, + "yg": { + "S": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Gap between rows of checkboxes or radios within a group." + }, + "M": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Gap between rows of checkboxes or radios within a group. Gap betwen input text and file preview in Text editor.\n" + }, + "L": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Gap between rows of checkboxes or radios within a group." + } + } + }, + "layout": { + "stack": { + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Spacing between horizontal and vertical S form components" + }, + "M": { + "value": "{global.space.macro.S}", + "type": "spacing", + "description": "Spacing between horizontal and vertical M form components" + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Spacing between horizontal and vertical L form components" + } } }, "switch": { - "inside": { + "handleside": { "M": { - "value": "{origin.dimension.200}", - "type": "sizing", - "description": "S switch knob" + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Padding on handle side." }, "L": { - "value": "{origin.dimension.350}", - "type": "sizing", - "description": "L switch knob" + "value": "{global.space.micro.M}", + "type": "spacing", + "description": "Padding on handle side." } }, - "outside": { + "labelside": { "M": { - "value": "{origin.dimension.400}", - "type": "sizing", - "description": "S switch container" + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Padding on label side." }, "L": { - "value": "{origin.dimension.600}", - "type": "sizing", - "description": "L switch container" + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Padding on label side." } } + } + }, + "size": { + "none": { + "value": "{origin.dimension.0}", + "type": "sizing" + }, + "icon": { + "value": "{global.size.icon.M}", + "type": "sizing", + "description": "icon" + }, + "calendar": { + "date": { + "value": "{global.size.macro.M}", + "type": "sizing", + "description": "date buttons\n" + }, + "day": { + "value": "{global.size.macro.M}", + "type": "sizing", + "description": "Calendar day of the week HEIGHT\n" + }, + "today": { + "value": "{global.size.micro.XS}", + "type": "sizing", + "description": "today underline" + } }, "checkbox": { "S": { - "value": "{global.size.component.XXS}", + "value": "{global.size.macro.XXS}", "type": "sizing", "description": "S checkboxes" }, "M": { - "value": "{global.size.component.XS}", + "value": "{global.size.macro.XS}", "type": "sizing", "description": "M checkboxes" }, "L": { - "value": "{global.size.component.S}", + "value": "{global.size.macro.S}", "type": "sizing", "description": "L checkboxes" } }, + "fileinput": { + "preview": { + "value": "{global.size.macro.XXXL}", + "type": "sizing", + "description": "File input container for thumbnail, progress, or icon." + } + }, + "filepreview": { + "thumbnail": { + "value": "{global.size.mega.XS}", + "type": "sizing", + "description": "Thumbnail width on file preview component" + } + }, + "input": { + "S": { + "value": "{global.size.macro.S}", + "type": "sizing", + "description": "min-height on S inputs" + }, + "M": { + "value": "{global.size.macro.M}", + "type": "sizing", + "description": "Min height on M Inputs and M Dropdowns. Fixed height on Calendar days" + }, + "L": { + "value": "{global.size.macro.L}", + "type": "sizing", + "description": "L Inputs, Color picker square" + } + }, "radio": { - "outside": { + "circle": { "S": { - "value": "{global.size.component.XXS}", + "value": "{global.size.macro.XXS}", "type": "sizing", "description": "S radios" }, "M": { - "value": "{global.size.component.XS}", + "value": "{global.size.macro.XS}", "type": "sizing", "description": "M radios" }, "L": { - "value": "{global.size.component.S}", + "value": "{global.size.macro.S}", "type": "sizing", "description": "L radios" } }, - "inside": { + "dot": { "S": { - "value": "{global.size.decorative.M}", + "value": "{global.size.micro.M}", "type": "sizing", "description": "S radio dot" }, "M": { - "value": "{global.size.decorative.XL}", + "value": "{global.size.micro.XL}", "type": "sizing", "description": "M radio dot" }, "L": { - "value": "{global.size.decorative.XXL}", + "value": "{global.size.micro.XXL}", "type": "sizing", "description": "L radio dot" } } }, - "calendar": { - "M": { - "value": "{global.size.component.M}", - "type": "sizing", - "description": "day buttons" + "switch": { + "container": { + "M": { + "value": "{global.size.macro.XS}", + "type": "sizing", + "description": "Switch container" + }, + "L": { + "value": "{global.size.macro.S}", + "type": "sizing", + "description": "Switch container" + } }, - "underline": { - "value": "{global.size.decorative.XS}", - "type": "sizing", - "description": "day underline" + "handle": { + "M": { + "value": "{global.size.macro.XXS}", + "type": "sizing", + "description": "S switch knob" + }, + "L": { + "value": "{global.size.macro.XS} + {global.size.micro.XS}", + "type": "sizing", + "description": "L switch knob" + } } }, "validation": { "bar": { - "value": "{global.size.decorative.XXS}", + "value": "{global.size.micro.XXS}", "type": "sizing", "description": "2px validation bar used on errors and warnings" } @@ -169,16 +376,16 @@ "value": "{base.color.interactive.monochrome.standard.active}", "type": "color" }, - "bg-default": { - "value": "{base.color.interactive.monochrome.standard.withActive}", - "type": "color" - }, "bg-disabled": { "value": "{base.color.interactive.inactive.standard.defaultAlt}", "type": "color" }, + "bg-duration": { + "value": "{base.color.interactive.dataEntry.hoverAlt}", + "type": "color" + }, "bg-hover": { - "value": "{base.color.interactive.monochrome.inverse.hoverAlt}", + "value": "{base.color.interactive.monochrome.standard.hoverAlt}", "type": "color" }, "border-duration": { @@ -373,7 +580,7 @@ "type": "color" }, "border-enabled": { - "value": "{base.color.interactive.dataEntry.withDefault}", + "value": "{base.color.interactive.monochrome.standard.default}", "type": "color" }, "fg-active": { @@ -389,7 +596,7 @@ "type": "color" }, "fg-enabled": { - "value": "{base.color.interactive.dataEntry.contentAlt}", + "value": "{base.color.interactive.dataEntry.content}", "type": "color" }, "label-active": { @@ -433,6 +640,128 @@ "type": "color" } } + }, + "borderradius": { + "none": { + "value": "{global.borderradius.none}", + "type": "borderRadius", + "description": "Text editor (internal corners)" + }, + "fileupload": { + "value": "{global.borderradius.container.S}", + "type": "borderRadius", + "description": "File input (file uploads)" + }, + "fileselector": { + "value": "{global.borderradius.container.S}", + "type": "borderRadius", + "description": "File preview (file selector asset)" + }, + "input": { + "value": "{global.borderradius.interactive.S}", + "type": "borderRadius", + "description": "Checkbox, Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input" + }, + "radio": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Radio button" + }, + "switch": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Switch container and handle" + }, + "validationbar": { + "value": "{global.borderradius.interactive.XS}", + "type": "borderRadius", + "description": "Validation bar" + }, + "calendar": { + "none": { + "value": "{global.borderradius.none}", + "type": "borderRadius", + "description": "Calendar (start and end duration)" + }, + "date": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Calendar date (hover & selected), " + }, + "today": { + "value": "{global.borderradius.container.XS}", + "type": "borderRadius", + "description": "Calendar (today indicator)" + } + }, + "colorpicker": { + "inner": { + "value": "{global.borderradius.interactive.S}", + "type": "borderRadius", + "description": "Color picker (swatch container), \n" + }, + "outer": { + "value": "{global.borderradius.container.L}", + "type": "borderRadius", + "description": "Color picker advanced (parent container), \n" + } + } + }, + "borderwidth": { + "caution": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Caution border" + }, + "dragover": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "File upload (drag over state)" + }, + "error": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Error border" + }, + "fileupload": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "File input (file uploads)" + }, + "input": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Input border" + }, + "searchunderline": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Search (without button variant)" + }, + "switch": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Switch" + }, + "tile": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Tile border" + }, + "divider": { + "item": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Dropdown menu (item divider)" + } + }, + "calendar": { + "duration": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Calendar (duration date top and bottom borders)" + } + } } } } \ No newline at end of file diff --git a/data/tokens/Components/link.json b/data/tokens/Components/link.json index 8e17a944..8f4faba2 100644 --- a/data/tokens/Components/link.json +++ b/data/tokens/Components/link.json @@ -26,7 +26,7 @@ "type": "color" }, "label-hover": { - "value": "{base.color.interactive.monochrome.inverse.hover}", + "value": "{base.color.interactive.monochrome.inverse.active}", "type": "color" } }, @@ -52,11 +52,12 @@ }, "destructive": { "label-default": { - "value": "{base.color.interactive.danger.standard.default}", - "type": "color" + "value": "{base.color.interactive.danger.standard.defaultAlt}", + "type": "color", + "description": "." }, "label-hover": { - "value": "{base.color.interactive.danger.standard.hover}", + "value": "{base.color.interactive.danger.standard.hoverAlt2}", "type": "color" } }, @@ -66,7 +67,7 @@ "type": "color" }, "label-hover": { - "value": "{base.color.interactive.primary.inverse.hoverAlt}", + "value": "{base.color.interactive.primary.standard.hoverAlt}", "type": "color" } }, @@ -76,7 +77,7 @@ "type": "color" }, "label-hover": { - "value": "{base.color.interactive.monochrome.standard.hover}", + "value": "{base.color.interactive.monochrome.standard.active}", "type": "color" } } @@ -85,10 +86,38 @@ "size": { "skiplink": { "M": { - "value": "{global.size.component.M}", + "value": "{global.size.macro.M}", "type": "sizing" } } + }, + "borderradius": { + "link": { + "value": "{global.borderradius.interactive.XS}", + "type": "borderRadius", + "description": "Link (focus bg and bottom corners of focus underline)" + }, + "skiplink": { + "value": "{global.borderradius.interactive.M}", + "type": "borderRadius", + "description": "Skiplink (right corners of focus bg and border)" + } + }, + "space": { + "integral": { + "xg": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Space between icon and link text." + }, + "L": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Space between icon and link text." + } + } + } } } } \ No newline at end of file diff --git a/data/tokens/Components/nav.json b/data/tokens/Components/nav.json index 53ec102d..db0c7a7c 100644 --- a/data/tokens/Components/nav.json +++ b/data/tokens/Components/nav.json @@ -52,10 +52,6 @@ "bg-default": { "value": "{base.color.generic.bg.inverse.soft}", "type": "color" - }, - "bg-alt": { - "value": "{base.color.generic.bg.inverse.delicate}", - "type": "color" } } }, @@ -110,10 +106,6 @@ "bg-default": { "value": "{base.color.generic.bg.standard.soft}", "type": "color" - }, - "bg-alt": { - "value": "{base.color.generic.bg.standard.delicate}", - "type": "color" } } } @@ -121,12 +113,12 @@ "size": { "horizontal": { "S": { - "value": "{global.size.component.S}", + "value": "{global.size.macro.S}", "type": "sizing", "description": "Top nav child menu item min-height" }, "M": { - "value": "{global.size.component.M}", + "value": "{global.size.macro.M}", "type": "sizing", "description": "global nav and horizontal nav container height" } @@ -134,21 +126,184 @@ "vertical": { "inside": { "M": { - "value": "{global.size.component.M}", + "value": "{global.size.macro.M}", "type": "sizing", "description": "Left nav child menu item min-height" }, "L": { - "value": "{global.size.component.L}", + "value": "{global.size.macro.L}", "type": "sizing", "description": "Left nav collapsed item min-height" } }, "outside": { "M": { - "value": "{global.size.component.XL} + {origin.dimension.550}", + "value": "{global.size.micro.L} * 10", "type": "sizing", - "description": "Left nav parent container" + "description": "Left nav collapsed parent container" + } + } + } + }, + "borderradius": { + "menu": { + "value": "{global.borderradius.interactive.M}", + "type": "borderRadius", + "description": "Menu (bottom corners), " + }, + "menuitem": { + "value": "{global.borderradius.interactive.S}", + "type": "borderRadius", + "description": "Menu (menu item state bg shape), " + }, + "navigationleft": { + "value": "{global.borderradius.interactive.L}", + "type": "borderRadius", + "description": "Navigation left (collapsible Assets/Menu select top-right and bottom-right corners)" + } + }, + "boxshadow": { + "menu": { + "value": "{global.box-shadow.container.distant}", + "type": "boxShadow", + "description": "Menu" + } + }, + "borderwidth": { + "divider": { + "item": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Menu (option divider)" + }, + "segment": { + "value": "{global.borderwidth.L}", + "type": "borderWidth", + "description": "Menu (segment divider)" + } + } + }, + "space": { + "menu": { + "child": { + "x": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Left right padding." + } + }, + "y": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Top bottom padding." + } + } + }, + "list": { + "x": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Left right padding on menu list." + } + }, + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top bottom padding on menu list." + } + }, + "yg": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Space between menu items in list." + } + } + }, + "parent": { + "x": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Left right padding." + } + }, + "xg": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Gap spacing between elements." + } + }, + "y": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Top bottom padding." + } + } + }, + "segment": { + "x": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Left right padding on segment title." + } + }, + "y": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Top padding on segment title." + } + } + } + }, + "navleft": { + "collapsed": { + "button": { + "x": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Left right spacing on left nav collapsed menu item." + } + }, + "y": { + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "Top bottom spacing on left nav collapsed menu item." + } + }, + "yg": { + "M": { + "value": "{global.space.micro.XS}", + "type": "spacing", + "description": "Spacing gap inside collapsible menu buttons." + } + } + }, + "container": { + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top bottom padding in collapsible left nav." + } + }, + "yg": { + "M": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Space between menu items in collapsible left nav." + } + } } } } diff --git a/data/tokens/Components/popover.json b/data/tokens/Components/popover.json index fca0ed37..3dc48e55 100644 --- a/data/tokens/Components/popover.json +++ b/data/tokens/Components/popover.json @@ -6,6 +6,11 @@ "type": "color", "description": "previously action minor 850" }, + "bg-default": { + "value": "{base.color.generic.bg.standard.nought}", + "type": "color", + "description": "popover container bg" + }, "bg-hover": { "value": "{base.color.interactive.monochrome.standard.hoverAlt}", "type": "color", @@ -31,21 +36,71 @@ "size": { "item": { "S": { - "value": "{global.size.component.S}", + "value": "{global.size.macro.S}", "type": "sizing", "description": "small popover menu items" }, "M": { - "value": "{global.size.component.M}", + "value": "{global.size.macro.M}", "type": "sizing", "description": "medium popover menu items" }, "L": { - "value": "{global.size.component.L}", + "value": "{global.size.macro.L}", "type": "sizing", "description": "Large popover menu items" } } + }, + "borderradius": { + "container": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Popover (menu container in Action popovers)" + } + }, + "boxshadow": { + "popover": { + "value": "{global.box-shadow.container.near}", + "type": "boxShadow", + "description": "popover container for Action popover, Button (multi action and split), Dropdown" + } + }, + "borderwidth": { + "divider": { + "item": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Dropdown (menu item divider)" + } + } + }, + "space": { + "menu": { + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top and bottom padding on popover menu container" + } + } + }, + "option": { + "x": { + "M": { + "value": "{global.space.micro.XXL}", + "type": "spacing", + "description": "Right left padding on popover option." + } + }, + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Top and bottom padding on popover option." + } + } + } } } } \ No newline at end of file diff --git a/data/tokens/Components/profile.json b/data/tokens/Components/profile.json index 347bec6e..6ed938a0 100644 --- a/data/tokens/Components/profile.json +++ b/data/tokens/Components/profile.json @@ -3,74 +3,74 @@ "size": { "outside": { "XS": { - "value": "{origin.dimension.300}", + "value": "{global.size.macro.XS}", "type": "sizing", "description": "XS Portraits" }, "S": { - "value": "{origin.dimension.400}", + "value": "{global.size.macro.S}", "type": "sizing", "description": "S Portraits" }, "M": { - "value": "{origin.dimension.500}", + "value": "{global.size.macro.M}", "type": "sizing", "description": "M Portraits" }, "ML": { - "value": "{origin.dimension.700}", + "value": "{global.size.macro.XL}", "type": "sizing", "description": "L Portraits" }, "L": { - "value": "{origin.dimension.900}", + "value": "{global.size.macro.XS} * 3", "type": "sizing", "description": "XL Portraits" }, "XL": { - "value": "{origin.dimension.1300}", + "value": "{global.size.micro.M} * 13", "type": "sizing", "description": "XL Portraits" }, "XXL": { - "value": "{origin.dimension.1600}", + "value": "{global.size.macro.S} * 4", "type": "sizing", "description": "XXL Portraits" } }, "inside": { "XS": { - "value": "{origin.dimension.150}", + "value": "{global.size.micro.XL}", "type": "sizing", "description": "XS Portrait icons" }, "S": { - "value": "{origin.dimension.200}", + "value": "{global.size.macro.XXS}", "type": "sizing", "description": "S Portrait icons" }, "M": { - "value": "{origin.dimension.250}", + "value": "{global.size.macro.XS} - {global.size.micro.XS}", "type": "sizing", "description": "M Portrait icons" }, "ML": { - "value": "{origin.dimension.350}", + "value": "{global.size.macro.XS} + {global.size.micro.XS}", "type": "sizing", "description": "L Portrait icons" }, "L": { - "value": "{origin.dimension.500}", + "value": "{global.size.macro.M}", "type": "sizing", "description": "XL Portrait icons" }, "XL": { - "value": "{origin.dimension.700}", + "value": "{global.size.macro.XL}", "type": "sizing", "description": "XL Portrait icons" }, "XXL": { - "value": "{origin.dimension.1600}", + "value": "{global.size.micro.M} * 13", "type": "sizing", "description": "XXL Portraits" } @@ -105,6 +105,51 @@ "type": "color" } } + }, + "borderradius": { + "portrait": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Portrait" + } + }, + "space": { + "none": { + "value": "0", + "type": "spacing" + }, + "x": { + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap between avatar and name" + }, + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap between avatar and name" + }, + "ML": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "gap between avatar and name" + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "gap between avatar and name" + }, + "XL": { + "value": "{global.space.macro.L}", + "type": "spacing", + "description": "gap between avatar and name" + }, + "XXL": { + "value": "{global.space.macro.XL}", + "type": "spacing", + "description": "gap between avatar and name" + } + } } } } \ No newline at end of file diff --git a/data/tokens/Components/progress.json b/data/tokens/Components/progress.json index cb4a47b9..7a419aa0 100644 --- a/data/tokens/Components/progress.json +++ b/data/tokens/Components/progress.json @@ -3,81 +3,81 @@ "size": { "bar": { "XS": { - "value": "{global.size.decorative.XS}", + "value": "{global.size.micro.XS}", "type": "sizing", "description": "S progress tracker bar" }, "S": { - "value": "{global.size.decorative.S}", + "value": "{global.size.micro.S}", "type": "sizing", "description": "S loader bar" }, "M": { - "value": "{global.size.decorative.M}", + "value": "{global.size.micro.M}", "type": "sizing", "description": "M progress tracker bar, M loader bar" }, "L": { - "value": "{global.size.decorative.XL}", + "value": "{global.size.micro.XL}", "type": "sizing", "description": "L loader bar" }, "XL": { - "value": "{global.size.decorative.XXL}", + "value": "{global.size.micro.XXL}", "type": "sizing", "description": "XL loader bar, L progress tracker bar" } }, "spinner": { "XS": { - "value": "{origin.dimension.300}", + "value": "{global.size.macro.XS}", "type": "sizing", "description": "XS Portraits, XS spinners" }, "S": { - "value": "{origin.dimension.400}", + "value": "{global.size.macro.S}", "type": "sizing", "description": "S Portraits, S Spinners" }, "M": { - "value": "{origin.dimension.500}", + "value": "{global.size.macro.M}", "type": "sizing", "description": "M Portraits, M Spinners" }, "L": { - "value": "{origin.dimension.900}", + "value": "{global.size.macro.XS} * 3", "type": "sizing", "description": "L Portraits, L Spinners" }, "XL": { - "value": "{origin.dimension.1300}", + "value": "{global.size.micro.M} * 13", "type": "sizing", "description": "XL spinners" } }, "skeleton": { "XS": { - "value": "{origin.dimension.200}", + "value": "{global.size.macro.XXS}", "type": "sizing", "description": "Skeleton paragraph and H5" }, "S": { - "value": "{origin.dimension.200} + {origin.dimension.25}", + "value": "{global.size.macro.XXS} + {global.size.micro.XXS}", "type": "sizing", "description": "H3 Skeletons" }, "M": { - "value": "{origin.dimension.250}", + "value": "{global.size.macro.XS} - {global.size.micro.XS}", "type": "sizing", "description": "H3 Skeletons" }, "L": { - "value": "{origin.dimension.250} + {origin.dimension.25}", + "value": "{global.size.macro.XS} - {global.size.micro.XXS}", "type": "sizing", "description": "H2 Skeletons" }, "XL": { - "value": "{origin.dimension.300}", + "value": "{global.size.macro.XS}", "type": "sizing", "description": "H1 Skeletons" } @@ -98,6 +98,11 @@ } } }, + "fg-ai": { + "value": "{base.color.interactive.ai.inverse.default}", + "type": "color", + "description": "For progress ring in ai buttons" + }, "fg-default": { "value": "{base.color.generic.fg.standard.nought}", "type": "color" @@ -125,14 +130,27 @@ } } }, + "bg-skeleton": { + "value": "linear-gradient(135deg, rgba(#6F6F6F,0.36) 0%, rgba(#6F6F6F, 0.04) 100%)", + "type": "color" + }, "border-default": { "value": "{base.color.generic.fg.standard.soft}", "type": "color" }, + "fg-ai": { + "value": "{base.color.interactive.ai.standard.default}", + "type": "color", + "description": "For progress ring in ai buttons" + }, "fg-alt": { "value": "{base.color.status.success.standard.default}", "type": "color" }, + "fg-alt2": { + "value": "{base.color.generic.content.standard.firm}", + "type": "color" + }, "fg-default": { "value": "{base.color.generic.fg.inverse.nought}", "type": "color" @@ -150,6 +168,165 @@ "type": "color" } } + }, + "borderradius": { + "none": { + "value": "{global.borderradius.none}", + "type": "borderRadius", + "description": "File input (top corners of integrated progress bar)," + }, + "carouselselector": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Carousel (selector dot)" + }, + "integrated": { + "value": "{global.borderradius.container.S}", + "type": "borderRadius", + "description": "File input (bottom corners of integrated status bar)" + }, + "skeletonbar": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius" + }, + "stepflow": { + "value": "{global.borderradius.circle}", + "type": "borderRadius", + "description": "Step flow (step indicators)" + }, + "bar": { + "S": { + "value": "{global.borderradius.container.XS}", + "type": "borderRadius", + "description": "Progress tracker S" + }, + "M": { + "value": "{global.borderradius.container.S}", + "type": "borderRadius", + "description": "File input (bottom corners of integrated status bar), Progress tracker M, " + }, + "L": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Progress tracker L" + } + } + }, + "borderwidth": { + "bar": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Progress bar (all sizes)\n" + }, + "carouselector": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Carousel slide selector dots\n" + }, + "integrated": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Progress bar in File upload\n" + }, + "stepflow": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Step flow (step)" + }, + "stepsequence": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Step sequence line\n" + } + }, + "space": { + "tracker": { + "yg": { + "S": { + "value": "{global.space.micro.S}", + "type": "spacing" + }, + "M": { + "value": "{global.space.micro.L}", + "type": "spacing" + }, + "L": { + "value": "{global.space.macro.XS}", + "type": "spacing" + } + } + }, + "stepsequence": { + "xg": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "gap between step number and step text" + } + }, + "yg": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap between progress lines and steps" + } + } + }, + "loader": { + "yg": { + "S": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "gap between loader visual and loading text" + }, + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "gap between loader visual and loading text" + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "gap between loader visual and loading text" + } + }, + "xg": { + "XS": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "gap between horizontal spinner visual and loading text" + } + } + }, + "skeleton": { + "yg": { + "XS": { + "value": "{global.space.micro.XS}", + "type": "spacing", + "description": "vertical gap between skeleton bars" + }, + "S": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "vertical gap between skeleton bars" + }, + "M": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "vertical gap between skeleton bars" + }, + "L": { + "value": "{global.space.micro.S}", + "type": "spacing", + "description": "vertical gap between skeleton bars" + }, + "XL": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "vertical gap between skeleton bars" + } + } + } } } } \ No newline at end of file diff --git a/data/tokens/Components/tab.json b/data/tokens/Components/tab.json index 5e49e97b..8b9c23f2 100644 --- a/data/tokens/Components/tab.json +++ b/data/tokens/Components/tab.json @@ -2,32 +2,51 @@ "tab": { "size": { "M": { - "value": "{global.size.component.M}", + "value": "{global.size.macro.M}", "type": "sizing", "description": "Anchor nav, M Tab" }, "L": { - "value": "{global.size.component.L}", + "value": "{global.size.macro.L}", "type": "sizing", "description": "L tab" } }, "space": { - "inside": { - "S": { - "value": "{origin.dimension.100}", + "x": { + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding on Tab." + }, + "L": { + "value": "{global.space.macro.M}", + "type": "spacing", + "description": "Left and right padding on Tab." + } + }, + "xg": { + "M": { + "value": "{global.space.micro.L}", "type": "spacing", - "description": "top and bottom padding on medium buttons" + "description": "Gap between elements in Tab." }, + "L": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Gap between elements in Tab." + } + }, + "y": { "M": { - "value": "{origin.dimension.200}", + "value": "{global.space.micro.L}", "type": "spacing", - "description": "left and right padding on small buttons" + "description": "Top bottom padding in Tab." }, "L": { - "value": "{origin.dimension.300}", + "value": "{global.space.micro.XXL}", "type": "spacing", - "description": "left and right padding on Medium buttons" + "description": "Top bottom padding in Tab." } } }, @@ -100,6 +119,35 @@ "type": "color" } } + }, + "borderradius": { + "M": { + "value": "{global.borderradius.interactive.M}", + "type": "borderRadius", + "description": "Tab (top corners)" + } + }, + "borderwidth": { + "active": { + "value": "{global.borderwidth.L}", + "type": "borderWidth", + "description": "Tab (active, active error, active caution bottom border)" + }, + "caution": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Tab (caution: top, right, left borders)" + }, + "enabled": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Tab (enabled and hover bottom border)" + }, + "error": { + "value": "{global.borderwidth.S}", + "type": "borderWidth", + "description": "Tab (error: top, right, left borders)" + } } } } \ No newline at end of file diff --git a/data/tokens/Components/datatable.json b/data/tokens/Components/table.json similarity index 53% rename from data/tokens/Components/datatable.json rename to data/tokens/Components/table.json index 8d4318fd..15198630 100644 --- a/data/tokens/Components/datatable.json +++ b/data/tokens/Components/table.json @@ -1,5 +1,5 @@ { - "datatable": { + "table": { "color": { "header": { "subtle": { @@ -100,18 +100,8 @@ "description": "Zebra stripes + child items" }, "bg-hover": { - "value": "{datatable.color.row.bg-default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.12", - "space": "lch", - "color": "{base.color.generic.bg.inverse.nought} " - } - } - } + "value": "{base.color.generic.bg.standard.soft}", + "type": "color" }, "border-default": { "value": "{base.color.generic.fg.standard.delicate}", @@ -150,77 +140,167 @@ } } }, - "size": { + "borderradius": { + "container": { + "value": "{global.borderradius.container.M}", + "type": "borderRadius", + "description": "Table (parent container)" + } + }, + "boxshadow": { + "parentrow": { + "value": "{global.box-shadow.container.far}", + "type": "boxShadow" + } + }, + "borderwidth": { + "thin": { + "value": "{global.borderwidth.XS}", + "type": "borderWidth", + "description": "Table border" + } + }, + "space": { + "none": { + "value": "0", + "type": "spacing" + }, "row": { - "XS": { - "value": "{global.size.component.XS}", - "type": "sizing" - }, - "S": { - "value": "{global.size.component.S}", - "type": "sizing" - }, - "M": { - "value": "{global.size.component.M}", - "type": "sizing" + "x": { + "XS": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "Left and right padding inside XS row cells" + }, + "S": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding inside S row cells" + }, + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding inside M row cells" + }, + "L": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding inside L row cells" + }, + "XL": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "Left and right padding inside XL row cells" + } }, - "L": { - "value": "{global.size.component.L}", - "type": "sizing" + "xg": { + "XS": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "internal spacing between text, checkboxes, icons etc" + }, + "S": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "internal spacing between text, checkboxes, icons etc" + }, + "M": { + "value": "{global.space.macro.XS}", + "type": "spacing", + "description": "internal spacing between text, checkboxes, icons etc" + }, + "L": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "internal spacing between text, checkboxes, icons etc" + }, + "XL": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "internal spacing between text, checkboxes, icons etc" + } }, - "XL": { - "value": "{global.size.component.XL} + {origin.dimension.100}", - "type": "sizing" + "y": { + "M": { + "value": "{global.space.micro.L}", + "type": "spacing", + "description": "top and bottom adding inside pagination" + } } }, - "pagination": { - "M": { - "value": "{global.size.component.M}", - "type": "sizing" + "rowchild": { + "x": { + "XS": { + "value": "{global.space.macro.L} + {global.space.micro.S}", + "type": "spacing", + "description": "Left padding inside XS child row cells" + }, + "S": { + "value": "{global.space.macro.XL} + {global.space.micro.S}", + "type": "spacing", + "description": "Left padding inside S child row cells" + }, + "M": { + "value": "{global.space.macro.XL} + {global.space.micro.S}", + "type": "spacing", + "description": "Left padding inside M child row cells" + }, + "L": { + "value": "{global.space.macro.XL} + {global.space.micro.S}", + "type": "spacing", + "description": "Left padding inside L child row cells" + }, + "XL": { + "value": "{global.space.macro.XL} + {global.space.micro.S}", + "type": "spacing", + "description": "Left padding inside XL child row cells" + } } - }, - "header": { + } + }, + "size": { + "row": { "standard": { "XS": { - "value": "{global.size.component.XS}", + "value": "{global.size.macro.XS}", "type": "sizing" }, "S": { - "value": "{global.size.component.S}", + "value": "{global.size.macro.S}", "type": "sizing" }, "M": { - "value": "{global.size.component.M}", + "value": "{global.size.macro.M}", "type": "sizing" }, "L": { - "value": "{global.size.component.L}", + "value": "{global.size.macro.L}", "type": "sizing" }, "XL": { - "value": "{global.size.component.XL} + {origin.dimension.100}", + "value": "{global.size.macro.XL} + {global.size.micro.M}", "type": "sizing" } }, - "double": { + "doubleheight": { "XS": { - "value": "{global.size.component.XS} * 2", + "value": "{table.size.row.standard.XS} * 2", "type": "sizing" }, "S": { - "value": "{global.size.component.S} * 2", + "value": "{table.size.row.standard.S} * 2", "type": "sizing" }, "M": { - "value": "{global.size.component.M} * 2", + "value": "{table.size.row.standard.M} * 2", "type": "sizing" }, "L": { - "value": "{global.size.component.L} * 2", + "value": "{table.size.row.standard.L} * 2", "type": "sizing" }, "XL": { - "value": "({global.size.component.XL} + {origin.dimension.100}) * 2", + "value": "{table.size.row.standard.XL} * 2", "type": "sizing" } } diff --git a/data/tokens/Components/typography.json b/data/tokens/Components/typography.json deleted file mode 100644 index 9e26dfee..00000000 --- a/data/tokens/Components/typography.json +++ /dev/null @@ -1 +0,0 @@ -{} \ No newline at end of file diff --git a/data/tokens/Modes/dark.json b/data/tokens/Modes/dark.json deleted file mode 100644 index 152dc5dc..00000000 --- a/data/tokens/Modes/dark.json +++ /dev/null @@ -1,1332 +0,0 @@ -{ - "base": { - "color": { - "generic": { - "bg": { - "standard": { - "nought": { - "value": "{origin.colors.white}", - "type": "color" - }, - "faint": { - "value": "{base.color.generic.bg.standard.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.04", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - } - }, - "delicate": { - "value": "{base.color.generic.bg.standard.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.08", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - } - }, - "soft": { - "value": "{base.color.generic.bg.standard.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.117", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - } - }, - "moderate": { - "value": "{base.color.generic.bg.standard.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.16", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - } - } - }, - "inverse": { - "nought": { - "value": "{origin.colors.black}", - "type": "color" - }, - "faint": { - "value": "{base.color.generic.bg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.04", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "delicate": { - "value": "{base.color.generic.bg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.08", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "soft": { - "value": "{base.color.generic.bg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.117", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "moderate": { - "value": "{base.color.generic.bg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.16", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "firm": { - "value": "{base.color.generic.bg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.24", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "harsh": { - "value": "{base.color.generic.bg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.32", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "severe": { - "value": "{base.color.generic.bg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.40", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - } - } - }, - "content": { - "standard": { - "extreme": { - "value": "{origin.colors.black}", - "type": "color" - }, - "harsh": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.9", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - } - }, - "firm": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.67", - "space": "lch" - } - } - } - }, - "soft": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.32", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - }, - "description": "Used for disabled text" - } - }, - "inverse": { - "extreme": { - "value": "{origin.colors.white}", - "type": "color" - }, - "harsh": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.9", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - } - }, - "firm": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.67", - "space": "lch" - } - } - } - }, - "soft": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.3", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - }, - "description": "Used for disabled text" - } - } - }, - "fg": { - "standard": { - "nought": { - "value": "{origin.colors.white}", - "type": "color" - }, - "faint": { - "value": "{base.color.generic.fg.standard.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.08", - "space": "lch", - "color": "{base.color.modifier.contrastMore} " - } - } - }, - "description": "used for dividers" - }, - "delicate": { - "value": "{base.color.generic.fg.standard.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.16", - "space": "lch", - "color": "{base.color.modifier.contrastMore} " - } - } - }, - "description": "table dividers and borders" - }, - "soft": { - "value": "{base.color.generic.fg.standard.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.32", - "space": "lch", - "color": "{base.color.modifier.contrastMore} " - } - } - } - }, - "moderate": { - "value": "{base.color.generic.fg.standard.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.50", - "space": "lch", - "color": "{base.color.modifier.contrastMore} " - } - } - } - } - }, - "inverse": { - "nought": { - "value": "{origin.colors.black}", - "type": "color" - }, - "faint": { - "value": "{base.color.generic.fg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.08", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - }, - "description": "table dividers and borders" - }, - "delicate": { - "value": "{base.color.generic.fg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.16", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - }, - "description": "table dividers and borders" - }, - "soft": { - "value": "{base.color.generic.fg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.32", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "moderate": { - "value": "{base.color.generic.fg.inverse.nought}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.50", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - } - } - } - }, - "interactive": { - "danger": { - "standard": { - "active": { - "value": "{base.color.interactive.danger.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.active}", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - }, - "default": { - "value": "{origin.colors.red}", - "type": "color" - }, - "defaultAlt": { - "value": "{origin.colors.red}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.12", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "For links in datatables" - }, - "hover": { - "value": "{base.color.status.negative.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - }, - "hoverAlt": { - "value": "{base.color.interactive.danger.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - }, - "withActive": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withDefault": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - } - }, - "inverse": { - "active": { - "value": "{base.color.interactive.danger.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.active}", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - }, - "description": "active button on dark" - }, - "default": { - "value": "{origin.colors.lightRed}", - "type": "color" - }, - "defaultAlt": { - "value": "{base.color.interactive.danger.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.12", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - }, - "description": "for links in datatables\n" - }, - "hover": { - "value": "{base.color.status.negative.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "hoverAlt": { - "value": "{base.color.interactive.danger.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "button hover on dark" - }, - "hoverAlt2": { - "value": "{base.color.interactive.danger.inverse.defaultAlt}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - }, - "description": "for links in datatables" - }, - "withActive": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - }, - "withDefault": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - } - } - }, - "dataEntry": { - "default": { - "value": "{base.color.generic.bg.standard.nought}", - "type": "color", - "description": "Input backgrounds." - }, - "withActive": { - "value": "{base.color.generic.fg.inverse.nought}", - "type": "color" - }, - "withHover": { - "value": "{base.color.generic.fg.inverse.nought}", - "type": "color", - "description": "hover for draggable area on file input" - }, - "hoverAlt": { - "value": "{base.color.interactive.dataEntry.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "bg hover for draggable area on file input" - }, - "withDefault": { - "value": "{base.color.generic.fg.standard.moderate}", - "type": "color", - "description": "Input borders." - }, - "defaultAlt": { - "value": "{base.color.generic.bg.standard.faint}", - "type": "color", - "description": "Input footer bgs (e.g text editor)." - }, - "content": { - "value": "{base.color.generic.content.standard.harsh}", - "type": "color", - "description": "Input Text" - }, - "contentAlt": { - "value": "{base.color.generic.content.standard.firm}", - "type": "color", - "description": "Input Text" - } - }, - "focus": { - "withDefault": { - "value": "{origin.colors.gold}", - "type": "color" - }, - "withDefaultAlt": { - "value": "{origin.colors.gold}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.4", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - } - }, - "default": { - "value": "{origin.colors.black}", - "type": "color" - } - }, - "inactive": { - "standard": { - "default": { - "value": "{base.color.generic.fg.standard.soft}", - "type": "color", - "description": "Disabled form input borders." - }, - "defaultAlt": { - "value": "{base.color.generic.bg.standard.faint}", - "type": "color", - "description": "Disabled input and button backgrounds, button borders and input backgrounds." - }, - "content": { - "value": "{base.color.generic.content.standard.soft}", - "type": "color", - "description": "Disabled text inside buttons and form inputs." - }, - "contentAlt": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - } - }, - "inverse": { - "default": { - "value": "{base.color.generic.fg.inverse.soft}", - "type": "color", - "description": "disabled buttons on dark" - }, - "defaultAlt": { - "value": "{base.color.generic.bg.inverse.faint}", - "type": "color", - "description": "Disabled button backgrounds and borders ON DARK" - }, - "content": { - "value": "{base.color.generic.content.inverse.soft}", - "type": "color", - "description": "Disabled text inside buttons" - }, - "contentAlt": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - } - } - }, - "monochrome": { - "standard": { - "active": { - "value": "{origin.colors.black}", - "type": "color" - }, - "default": { - "value": "{base.color.interactive.monochrome.standard.active}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.9", - "space": "lch" - } - } - } - }, - "defaultAlt": { - "value": "{base.color.interactive.monochrome.standard.active}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.67", - "space": "lch" - } - } - } - }, - "hover": { - "value": "{base.color.interactive.monochrome.standard.active}", - "type": "color", - "description": "Secondary button border on hover" - }, - "hoverAlt": { - "value": "{base.color.interactive.monochrome.standard.active}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "Accordion and menu bg on hover\n" - }, - "withActive": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withDefault": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withHover": { - "value": "{base.color.interactive.monochrome.standard.active}", - "type": "color", - "description": "maybe should be white to align with primary group logic\n" - } - }, - "inverse": { - "active": { - "value": "{origin.colors.white}", - "type": "color" - }, - "default": { - "value": "{base.color.interactive.monochrome.inverse.active}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.9", - "space": "lch" - } - } - } - }, - "defaultAlt": { - "value": "{base.color.interactive.monochrome.inverse.active}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "0.67", - "space": "lch" - } - } - } - }, - "hover": { - "value": "{base.color.interactive.monochrome.inverse.active}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover}", - "space": "lch" - } - } - } - }, - "hoverAlt": { - "value": "{base.color.interactive.monochrome.inverse.active}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "Accordion and menu bg on hover\n" - }, - "withActive": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - }, - "withHover": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - } - } - }, - "primary": { - "standard": { - "active": { - "value": "{base.color.interactive.primary.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.active} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - } - }, - "default": { - "value": "{origin.colors.jade}", - "type": "color" - }, - "defaultAlt": { - "value": "{base.color.interactive.primary.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.12", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "for links in datatables\n" - }, - "hover": { - "value": "{base.color.interactive.primary.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - } - }, - "withActive": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withDefault": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withHover": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - } - }, - "inverse": { - "default": { - "value": "{origin.colors.brilliantGreen}", - "type": "color" - }, - "defaultAlt": { - "value": "{base.color.interactive.primary.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.12", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - }, - "description": "for links in datatables\n" - }, - "hover": { - "value": "{base.color.interactive.primary.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - } - }, - "hoverAlt": { - "value": "{base.color.interactive.primary.inverse.defaultAlt}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } - }, - "description": "for links in datatables" - }, - "withActive": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - }, - "withDefault": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - }, - "withHover": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - } - } - } - }, - "status": { - "caution": { - "standard": { - "default": { - "value": "{origin.colors.orange}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.caution.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - }, - "hoverAlt": { - "value": "{base.color.status.caution.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - } - }, - "inverse": { - "default": { - "value": "{origin.colors.brightOrange}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.caution.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt}", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - }, - "description": "used on pill hover states" - } - } - }, - "content": { - "standard": { - "withDefault": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withDefaultAlt": { - "value": "{base.color.generic.content.standard.harsh}", - "type": "color" - }, - "withHover": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withHoverAlt": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - } - }, - "inverse": { - "withDefault": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - }, - "withDefaultAlt": { - "value": "{base.color.generic.content.inverse.harsh}", - "type": "color" - }, - "withHover": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - }, - "withHoverAlt": { - "value": "{base.color.generic.content.standard.extreme}", - "type": "color" - } - } - }, - "info": { - "standard": { - "default": { - "value": "{origin.colors.blue}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.info.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - }, - "hoverAlt": { - "value": "{base.color.status.info.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - } - }, - "inverse": { - "default": { - "value": "{origin.colors.brightBlue}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.info.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - }, - "description": "used on pill hover states" - } - } - }, - "negative": { - "standard": { - "default": { - "value": "{origin.colors.red}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.negative.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - }, - "hoverAlt": { - "value": "{base.color.status.negative.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - } - }, - "inverse": { - "default": { - "value": "{origin.colors.brightRed}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.negative.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - }, - "description": "used on pill hover states" - } - } - }, - "neutral": { - "standard": { - "default": { - "value": "{origin.colors.storm}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.neutral.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - }, - "hoverAlt": { - "value": "{base.color.status.neutral.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - } - }, - "inverse": { - "default": { - "value": "{origin.colors.brightStorm}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.neutral.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - }, - "description": "used on pill hover states" - } - } - }, - "success": { - "standard": { - "default": { - "value": "{origin.colors.green}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.success.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - }, - "hoverAlt": { - "value": "{base.color.status.success.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" - } - } - }, - "description": "used on pill hover states" - } - }, - "inverse": { - "default": { - "value": "{origin.colors.brightGreen}", - "type": "color" - }, - "hover": { - "value": "{base.color.status.success.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hover}", - "space": "lch", - "color": "{base.color.modifier.contrastLess}" - } - } - }, - "description": "used on pill hover states" - } - } - } - }, - "modifiers": { - "button": { - "active": { - "value": "0.48", - "type": "other", - "description": "more contrast" - }, - "hover": { - "value": "0.16", - "type": "other", - "description": "Hover used on primary buttons" - }, - "hoverAlt": { - "value": "0.08", - "type": "other", - "description": "Hover used on secondary and tertiary buttons" - } - }, - "input": { - "disabledBg": { - "value": "0.04", - "type": "other", - "description": "less contrast" - }, - "disabledFg": { - "value": "0.30", - "type": "other", - "description": "less contrast" - } - }, - "shadow": { - "standard": { - "value": "0.5", - "type": "other", - "description": "standard mixer for shadow" - } - } - }, - "modifier": { - "contrastLess": { - "value": "{origin.colors.white}", - "type": "color" - }, - "contrastMore": { - "value": "{origin.colors.black}", - "type": "color" - } - } - } - } -} \ No newline at end of file diff --git a/data/tokens/Modes/light.json b/data/tokens/Modes/light.json index 152dc5dc..8360d997 100644 --- a/data/tokens/Modes/light.json +++ b/data/tokens/Modes/light.json @@ -400,6 +400,28 @@ } }, "interactive": { + "ai": { + "standard": { + "hover": { + "value": "linear-gradient(90deg, rgba(#13A038,0.16) 0%, rgba(#0092DB,0.16) 50%, rgba(#8F49FE,0.16) 100%)", + "type": "color" + }, + "default": { + "value": "{origin.colors.aiH}", + "type": "color" + } + }, + "inverse": { + "hover": { + "value": "linear-gradient(90deg, rgba(#00D639,0.16) 0%, rgba(#11AFFF,0.16) 50%, rgba(#8F49FE,0.16) 100%)", + "type": "color" + }, + "default": { + "value": "{origin.colors.lightAiH}", + "type": "color" + } + } + }, "danger": { "standard": { "active": { @@ -449,7 +471,7 @@ } } }, - "description": "used on pill hover states" + "description": "used on solid-pill and primary-button hover states" }, "hoverAlt": { "value": "{base.color.interactive.danger.standard.default}", @@ -464,7 +486,22 @@ } } }, - "description": "used on pill hover states" + "description": "used on outlined-pill and secondary-button hover states" + }, + "hoverAlt2": { + "value": "{base.color.interactive.danger.standard.defaultAlt}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "used on link hover state" }, "withActive": { "value": "{base.color.generic.content.inverse.extreme}", @@ -716,7 +753,7 @@ } }, "hover": { - "value": "{base.color.interactive.monochrome.standard.active}", + "value": "{origin.colors.black}", "type": "color", "description": "Secondary button border on hover" }, @@ -781,7 +818,7 @@ } }, "hover": { - "value": "{base.color.interactive.monochrome.inverse.active}", + "value": "{origin.colors.white}", "type": "color", "$extensions": { "studio.tokens": { @@ -867,6 +904,21 @@ } } }, + "hoverAlt": { + "value": "{base.color.interactive.primary.standard.defaultAlt}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } + } + }, + "description": "for link hover" + }, "withActive": { "value": "{base.color.generic.content.inverse.extreme}", "type": "color" diff --git a/data/tokens/global.json b/data/tokens/global.json deleted file mode 100644 index c8f50959..00000000 --- a/data/tokens/global.json +++ /dev/null @@ -1,537 +0,0 @@ -{ - "global": { - "box-shadow": { - "container": { - "near": { - "value": "{origin.box-shadow.downward.3}", - "type": "boxShadow", - "description": "Popover menus used on split, multiaction, dropdown and action popovers" - }, - "far": { - "value": "{origin.box-shadow.downward.4}", - "type": "boxShadow", - "description": "Toasts" - }, - "distant": { - "value": "{origin.box-shadow.downward.5}", - "type": "boxShadow", - "description": "Dialogs and sidebars" - }, - "sticky-footer": { - "value": "{origin.box-shadow.upward.4}", - "type": "boxShadow" - }, - "solid-border": { - "value": "{origin.box-shadow.solid.border}", - "type": "boxShadow" - } - }, - "interactive": { - "enabled": { - "value": "{origin.box-shadow.downward.3}", - "type": "boxShadow", - "description": "Default card state" - }, - "hover": { - "value": "{origin.box-shadow.downward.5}", - "type": "boxShadow", - "description": "Card hover state" - } - } - }, - "border-radius": { - "scale": { - "value": "1", - "type": "borderRadius", - "description": "We can override this to locally change the size of radius in the future if required." - }, - "container": { - "XXS": { - "value": "{origin.dimension.12} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Validation bar on input components" - }, - "XS": { - "value": "{origin.dimension.25} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Pill" - }, - "S": { - "value": "{origin.dimension.50} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Color picker advanced (inner container), Tooltip." - }, - "M": { - "value": "{origin.dimension.100} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Popover menus (action popover, split button etc), Color picker standard (container), Menu (bottom corners), Message, Navigation: top (menu bottom corners), Navigation: left (selected menu), Pagination, Table, Tile (less rounded), Toast" - }, - "L": { - "value": "{origin.dimension.200} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Carousel (outer part), Color picker advanced (outer container), Dialog (not full screen), Tile (more rounded)." - }, - "circle": { - "value": "10000", - "type": "borderRadius", - "description": "Badge, Portrait" - } - }, - "interactive": { - "XS": { - "value": "{origin.dimension.25} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Checkbox (S, M), Link (focus background)" - }, - "S": { - "value": "{origin.dimension.50} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Button: minor (including button bar), Button: multi-action & split (menu), Button toggle: minor, Checkbox (large), Date picker, Date range, Dropdown: select (trigger & menu), File input, Link (focus), Search, Text area, Text input." - }, - "M": { - "value": "{origin.dimension.100} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Anchor navigation items, Card (less rounded), Card select (single), Card select group (outer corners), Carousel (slides), Tab items" - }, - "L": { - "value": "{origin.dimension.200} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Card (more rounded)" - }, - "XL": { - "value": "{origin.dimension.400} * {global.border-radius.scale}", - "type": "borderRadius", - "description": "Buttons, Loader bar, Progress tracker, Switch" - }, - "circle": { - "value": "10000", - "type": "borderRadius", - "description": "Radio button" - }, - "none": { - "value": "0", - "type": "borderRadius", - "description": "Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners)." - } - } - }, - "border-width": { - "scale": { - "value": "1", - "type": "borderWidth" - }, - "container": { - "S": { - "value": "{origin.dimension.12} * {global.border-width.scale}", - "type": "borderWidth", - "description": "Dividing lines and container borders" - }, - "M": { - "value": "{origin.dimension.25} * {global.border-width.scale}", - "type": "borderWidth", - "description": "Step flow, Validation bars" - }, - "L": { - "value": "{origin.dimension.50} * {global.border-width.scale}", - "type": "borderWidth", - "description": "Dividing lines" - }, - "none": { - "value": "0", - "type": "borderWidth" - } - }, - "interactive": { - "S": { - "value": "{origin.dimension.12} * {global.border-width.scale}", - "type": "borderWidth", - "description": "Buttons, Inputs" - }, - "MS": { - "value": "{origin.dimension.25} * {global.border-width.scale}", - "type": "borderWidth", - "description": "Buttons" - }, - "M": { - "value": "{origin.dimension.38} * {global.border-width.scale}", - "type": "borderWidth", - "description": "Focus\n" - }, - "L": { - "value": "{origin.dimension.50} * {global.border-width.scale}", - "type": "borderWidth", - "description": "Focus underline\n" - }, - "XL": { - "value": "{origin.dimension.75} * {global.border-width.scale}", - "type": "borderWidth", - "description": "Double Focus Border" - }, - "none": { - "value": "0", - "type": "borderWidth" - } - } - }, - "size": { - "none": { - "value": "{origin.dimension.0}", - "type": "sizing" - }, - "icon": { - "S": { - "value": "{origin.dimension.200}", - "type": "sizing" - }, - "M": { - "value": "{origin.dimension.250}", - "type": "sizing" - }, - "L": { - "value": "{origin.dimension.400}", - "type": "sizing" - } - }, - "component": { - "XXS": { - "value": "{origin.dimension.200}", - "type": "sizing" - }, - "XS": { - "value": "{origin.dimension.300}", - "type": "sizing" - }, - "S": { - "value": "{origin.dimension.400}", - "type": "sizing" - }, - "M": { - "value": "{origin.dimension.500}", - "type": "sizing" - }, - "L": { - "value": "{origin.dimension.600}", - "type": "sizing" - }, - "XL": { - "value": "{origin.dimension.700}", - "type": "sizing" - } - }, - "decorative": { - "XXS": { - "value": "{origin.dimension.25}", - "type": "sizing" - }, - "XS": { - "value": "{origin.dimension.50}", - "type": "sizing" - }, - "S": { - "value": "{origin.dimension.75}", - "type": "sizing" - }, - "M": { - "value": "{origin.dimension.100}", - "type": "sizing" - }, - "L": { - "value": "{origin.dimension.125}", - "type": "sizing" - }, - "XL": { - "value": "{origin.dimension.150}", - "type": "sizing" - }, - "XXL": { - "value": "{origin.dimension.200}", - "type": "sizing" - } - } - }, - "space": { - "none": { - "value": "{origin.dimension.0}", - "type": "spacing" - }, - "components": { - "inside": { - "XS": { - "value": "{origin.dimension.25}", - "type": "spacing" - }, - "S": { - "value": "{origin.dimension.50}", - "type": "spacing" - }, - "M": { - "value": "{origin.dimension.100}", - "type": "spacing" - }, - "L": { - "value": "{origin.dimension.150}", - "type": "spacing" - }, - "XL": { - "value": "{origin.dimension.200}", - "type": "spacing" - } - }, - "stack": { - "S": { - "value": "{origin.dimension.100}", - "type": "spacing" - }, - "M": { - "value": "{origin.dimension.200}", - "type": "spacing" - }, - "L": { - "value": "{origin.dimension.300}", - "type": "spacing" - }, - "XL": { - "value": "{origin.dimension.400}", - "type": "spacing" - } - } - }, - "page": { - "inside": { - "S": { - "value": "{origin.dimension.300}", - "type": "spacing" - }, - "M": { - "value": "{origin.dimension.400}", - "type": "spacing" - }, - "L": { - "value": "{origin.dimension.500}", - "type": "spacing" - }, - "XL": { - "value": "{origin.dimension.600}", - "type": "spacing" - } - }, - "outside": { - "S": { - "value": "{origin.dimension.300}", - "type": "spacing" - }, - "M": { - "value": "{origin.dimension.400}", - "type": "spacing" - }, - "L": { - "value": "{origin.dimension.500}", - "type": "spacing" - }, - "XL": { - "value": "{origin.dimension.600}", - "type": "spacing" - } - } - } - }, - "typography": { - "web": { - "hero heading": { - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-headline}", - "fontWeight": "{origin.fontWeights.black}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.web.step7}" - }, - "type": "typography", - "description": "Small Viewports: 27.42, Large Viewports: 45.22" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-headline}", - "fontWeight": "{origin.fontWeights.black}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.web.step8}" - }, - "type": "typography", - "description": "Small Viewports: 29.61, Large Viewports: 52.45" - } - }, - "heading": { - "S": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.bold}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.web.step3}" - }, - "type": "typography", - "description": "Small Viewports: 20.16, Large Viewports: 24.97" - }, - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.bold}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.web.step4}" - }, - "type": "typography", - "description": "Small Viewports: 21.77, Large Viewports: 28.97" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.bold}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.web.step5}" - }, - "type": "typography", - "description": "Small Viewports: 23.51, Large Viewports: 33.61" - }, - "XL": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.bold}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.web.step6}" - }, - "type": "typography", - "description": "Small Viewports: 25.39, Large Viewports: 38.98" - } - }, - "subheading": { - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.medium}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.web.step3}" - }, - "type": "typography", - "description": "Small Viewports: 20.16, Large Viewports: 24.97" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.medium}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.web.step4}" - }, - "type": "typography", - "description": "Small Viewports: 21.77, Large Viewports: 28.97" - } - }, - "body": { - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step0}" - }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step2}" - }, - "type": "typography", - "description": "Small Viewports: 18.66, Large Viewports: 21.53" - } - }, - "component": { - "firm": { - "XS": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step-2}" - }, - "type": "typography", - "description": "Small Viewports: 13.72, Large Viewports: 11.89" - }, - "S": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step-1}" - }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79" - }, - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.medium}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step0}" - }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.medium}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step1}" - }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" - } - }, - "neutral": { - "XS": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step-2}" - }, - "type": "typography", - "description": "Small Viewports: 13.72, Large Viewports: 11.89" - }, - "S": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step-1}" - }, - "type": "typography", - "description": "Small Viewports: 14.81, Large Viewports: 13.79" - }, - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step0}" - }, - "type": "typography", - "description": "Small Viewports: 16, Large Viewports: 16" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.web.step1}" - }, - "type": "typography", - "description": "Small Viewports: 17.28, Large Viewports: 18.56" - } - } - } - } - } - } -} \ No newline at end of file diff --git a/data/tokens/global/borderradius.json b/data/tokens/global/borderradius.json new file mode 100644 index 00000000..03d2b0a1 --- /dev/null +++ b/data/tokens/global/borderradius.json @@ -0,0 +1,85 @@ +{ + "global": { + "borderradius": { + "scale": { + "value": "1", + "type": "borderRadius", + "description": "We can override this to locally change the size of radius in the future if required." + }, + "none": { + "value": "0", + "type": "borderRadius", + "description": "Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners)." + }, + "circle": { + "value": "999", + "type": "borderRadius", + "description": "CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, " + }, + "container": { + "XXS": { + "value": "{origin.dimension.12} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "SHARP. Validation bar on input components" + }, + "XS": { + "value": "{origin.dimension.25} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "POINTED. Pill" + }, + "S": { + "value": "{origin.dimension.50} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "SUBTLE. Color picker advanced (inner swatch container), File input (file uploads & integrated progress bar (bottom corners), Link preview, Tooltip." + }, + "M": { + "value": "{origin.dimension.100} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "MODERATE. Card select (single), Card select group (outer corners), Carousel (slides), File preview (File selector assets on left), Message, Note, Popover (menu container in Action popover, Button-split, Button-multi-action, Calendar, Dropdown), Subscription tile (currently a pattern), Table (parent container), Tile & Tile flexbox (less rounded), Toast" + }, + "L": { + "value": "{origin.dimension.200} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "CURVED. Carousel (parent container), Color picker advanced (parent container), Dialog (not full screen), File preview (parent container), Tile & Tile flexbox (more rounded)." + }, + "XL": { + "value": "{origin.dimension.300} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "Copilot container" + } + }, + "interactive": { + "XS": { + "value": "{origin.dimension.25} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "POINTED. Checkbox (S, M), Link (focus background and underline)" + }, + "S": { + "value": "{origin.dimension.50} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "SUBTLE. Checkbox L, Date picker input, Date range input, Dropdown select (trigger), File input (draggable area), Link (focus bg and underline bottom-right and bottom-left), Menu (state bg shape), Search, Text area, Text editor, Text input" + }, + "M": { + "value": "{origin.dimension.100} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "MODERATE. Button subtle, Card (less rounded), Menu (bottom corners), Navigation: left (state bg shape), Skip focus, Tab, " + }, + "L": { + "value": "{origin.dimension.200} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "CURVED. Buttons S (typical and destructive, and inc bar, split and multi), Card (more rounded), Navigation left (collapsible Assets/Menu select top-right and bottom-right corners), " + }, + "XL": { + "value": "{origin.dimension.250} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "ROUNDED. Buttons M (typical and destructive and inc bar split and multi), Button toggle M (parent container), " + }, + "XXL": { + "value": "{origin.dimension.300} * {global.borderradius.scale}", + "type": "borderRadius", + "description": "SWEEPING. Buttons L (typical and destructive and inc bar split and multi), Button toggle L (parent container), " + } + } + } + } +} \ No newline at end of file diff --git a/data/tokens/global/borderwidth.json b/data/tokens/global/borderwidth.json new file mode 100644 index 00000000..4fd345cc --- /dev/null +++ b/data/tokens/global/borderwidth.json @@ -0,0 +1,39 @@ +{ + "global": { + "borderwidth": { + "scale": { + "value": "1", + "type": "borderWidth" + }, + "none": { + "value": "0", + "type": "borderWidth" + }, + "XS": { + "value": "{origin.dimension.12} * {global.borderwidth.scale}", + "type": "borderWidth", + "description": "Buttons, Inputs. Dividing lines and container borders." + }, + "S": { + "value": "{origin.dimension.25} * {global.borderwidth.scale}", + "type": "borderWidth", + "description": "Buttons. Step flow, Validation bars" + }, + "M": { + "value": "{origin.dimension.38} * {global.borderwidth.scale}", + "type": "borderWidth", + "description": "Focus\n" + }, + "L": { + "value": "{origin.dimension.50} * {global.borderwidth.scale}", + "type": "borderWidth", + "description": "Focus underline. Dividing lines.\n" + }, + "XL": { + "value": "{origin.dimension.75} * {global.borderwidth.scale}", + "type": "borderWidth", + "description": "Double Focus Border" + } + } + } +} \ No newline at end of file diff --git a/data/tokens/global/elevation.json b/data/tokens/global/elevation.json new file mode 100644 index 00000000..a3a8a69a --- /dev/null +++ b/data/tokens/global/elevation.json @@ -0,0 +1,43 @@ +{ + "global": { + "box-shadow": { + "container": { + "near": { + "value": "{origin.box-shadow.downward.3}", + "type": "boxShadow", + "description": "Popover menus used on split, multiaction, dropdown and action popovers" + }, + "far": { + "value": "{origin.box-shadow.downward.4}", + "type": "boxShadow", + "description": "Toasts" + }, + "distant": { + "value": "{origin.box-shadow.downward.5}", + "type": "boxShadow", + "description": "Dialog, Menu, Sidebar\n" + }, + "sticky-footer": { + "value": "{origin.box-shadow.upward.4}", + "type": "boxShadow" + }, + "solid-border": { + "value": "{origin.box-shadow.solid.border}", + "type": "boxShadow" + } + }, + "interactive": { + "enabled": { + "value": "{origin.box-shadow.downward.3}", + "type": "boxShadow", + "description": "Default card state" + }, + "hover": { + "value": "{origin.box-shadow.downward.5}", + "type": "boxShadow", + "description": "Card hover state" + } + } + } + } +} \ No newline at end of file diff --git a/data/tokens/global/size.json b/data/tokens/global/size.json new file mode 100644 index 00000000..dadc0cb5 --- /dev/null +++ b/data/tokens/global/size.json @@ -0,0 +1,147 @@ +{ + "global": { + "size": { + "scale": { + "value": "1", + "type": "sizing" + }, + "none": { + "value": "{origin.dimension.0}", + "type": "sizing" + }, + "container": { + "M": { + "value": "{origin.dimension.3600}", + "type": "sizing", + "description": "Inside page margins full width component in smallest mobile screen." + }, + "L": { + "value": "{origin.dimension.4000}", + "type": "sizing", + "description": "Full width component in smallest mobile screen." + } + }, + "icon": { + "S": { + "value": "{origin.dimension.200} * {global.size.scale}", + "type": "sizing" + }, + "M": { + "value": "{origin.dimension.250} * {global.size.scale}", + "type": "sizing" + }, + "L": { + "value": "{origin.dimension.400} * {global.size.scale}", + "type": "sizing" + } + }, + "mega": { + "XXS": { + "value": "{origin.dimension.1000}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "XS": { + "value": "{origin.dimension.1600}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "S": { + "value": "{origin.dimension.2000}", + "type": "sizing", + "description": "min and max widths for responsive tile items. Min width for Tile select content wrapper." + }, + "M": { + "value": "{origin.dimension.2500}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "L": { + "value": "{origin.dimension.3000}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "XL": { + "value": "{origin.dimension.3600}", + "type": "sizing", + "description": "Max size of small screen component within page margin" + }, + "XXL": { + "value": "{origin.dimension.4000}", + "type": "sizing", + "description": "Full width of small screen component" + }, + "XXXL": { + "value": "{origin.dimension.7000}", + "type": "sizing", + "description": "min and max widths for responsive tile items" + }, + "XXXXL": { + "value": "{origin.dimension.9500}", + "type": "sizing", + "description": "Max width on single lines of text." + } + }, + "macro": { + "XXS": { + "value": "{origin.dimension.200} * {global.size.scale}", + "type": "sizing" + }, + "XS": { + "value": "{origin.dimension.300} * {global.size.scale}", + "type": "sizing" + }, + "S": { + "value": "{origin.dimension.400} * {global.size.scale}", + "type": "sizing" + }, + "M": { + "value": "{origin.dimension.500} * {global.size.scale}", + "type": "sizing" + }, + "L": { + "value": "{origin.dimension.600} * {global.size.scale}", + "type": "sizing" + }, + "XL": { + "value": "{origin.dimension.700} * {global.size.scale}", + "type": "sizing" + }, + "XXXL": { + "value": "{origin.dimension.900} * {global.size.scale}", + "type": "sizing" + } + }, + "micro": { + "XXS": { + "value": "{origin.dimension.25} * {global.size.scale}", + "type": "sizing" + }, + "XS": { + "value": "{origin.dimension.50} * {global.size.scale}", + "type": "sizing" + }, + "S": { + "value": "{origin.dimension.75} * {global.size.scale}", + "type": "sizing" + }, + "M": { + "value": "{origin.dimension.100} * {global.size.scale}", + "type": "sizing" + }, + "L": { + "value": "{origin.dimension.125} * {global.size.scale}", + "type": "sizing" + }, + "XL": { + "value": "{origin.dimension.150} * {global.size.scale}", + "type": "sizing" + }, + "XXL": { + "value": "{origin.dimension.200} * {global.size.scale}", + "type": "sizing" + } + } + } + } +} \ No newline at end of file diff --git a/data/tokens/global/space.json b/data/tokens/global/space.json new file mode 100644 index 00000000..87d85861 --- /dev/null +++ b/data/tokens/global/space.json @@ -0,0 +1,70 @@ +{ + "global": { + "space": { + "none": { + "value": "{origin.dimension.0}", + "type": "spacing" + }, + "scale": { + "value": "1", + "type": "spacing" + }, + "micro": { + "XS": { + "value": "{origin.dimension.25} * {global.space.scale}", + "type": "spacing" + }, + "S": { + "value": "{origin.dimension.50} * {global.space.scale}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.75} * {global.space.scale}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.100} * {global.space.scale}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.125} * {global.space.scale}", + "type": "spacing" + }, + "XXL": { + "value": "{origin.dimension.150} * {global.space.scale}", + "type": "spacing" + } + }, + "macro": { + "XS": { + "value": "{origin.dimension.200} * {global.space.scale}", + "type": "spacing" + }, + "S": { + "value": "{origin.dimension.250} * {global.space.scale}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.300} * {global.space.scale}", + "type": "spacing" + }, + "ML": { + "value": "{origin.dimension.350} * {global.space.scale}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.400} * {global.space.scale}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.500} * {global.space.scale}", + "type": "spacing" + }, + "XXL": { + "value": "{origin.dimension.600} * {global.space.scale}", + "type": "spacing" + } + } + } + } +} \ No newline at end of file diff --git a/data/tokens/global/typography.json b/data/tokens/global/typography.json new file mode 100644 index 00000000..1d7f1f66 --- /dev/null +++ b/data/tokens/global/typography.json @@ -0,0 +1,386 @@ +{ + "global": { + "typography": { + "display": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-headline}", + "fontWeight": "{origin.fontWeights.black}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step10}" + }, + "type": "typography", + "description": "Small Viewports: 34.54, Large Viewports: 70.58" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-headline}", + "fontWeight": "{origin.fontWeights.black}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step12}" + }, + "type": "typography", + "description": "Small Viewports: 40.30, Large Viewports: 94.96" + } + }, + "heading": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step3}" + }, + "type": "typography", + "description": "Small Viewports: 20.16, Large Viewports: 24.97" + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step5}" + }, + "type": "typography", + "description": "Small Viewports: 23.51, Large Viewports: 33.61" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-headline}", + "fontWeight": "{origin.fontWeights.black}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step7}" + }, + "type": "typography", + "description": "Small Viewports: 27.42, Large Viewports: 45.22" + }, + "XL": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-headline}", + "fontWeight": "{origin.fontWeights.black}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step8}" + }, + "type": "typography", + "description": "Small Viewports: 29.61, Large Viewports: 52.45" + } + }, + "subheading": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56" + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step2}" + }, + "type": "typography", + "description": "Small Viewports: 18.66, Large Viewports: 21.53" + } + }, + "body": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16" + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step2}" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step3}" + }, + "type": "typography", + "description": "Small Viewports: 20.16, Large Viewports: 24.97" + } + }, + "component": { + "generic": { + "harsh": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-1}" + }, + "type": "typography", + "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + } + }, + "firm": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-1}" + }, + "type": "typography", + "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + } + }, + "moderate": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-1}" + }, + "type": "typography", + "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + } + } + }, + "badge": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-2}" + }, + "type": "typography", + "description": "Small Viewports: 13.72, Large Viewports: 11.89. Match token size to component size." + } + }, + "container": { + "heading": { + "moderate": { + "XS": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "MEDIUM. Small Viewports: 16, Large Viewports: 116. Token size may not match component size. Step Flow main goal." + }, + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "MEDIUM. Small Viewports: 17.28, Large Viewports: 18.56. Token size may not match component size. Subscription tile, Tile select,." + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step2}" + }, + "type": "typography", + "description": "MEDIUM. Small Viewports: 18.66, Large Viewports: 21.53. Token size may not match component size. Accordion standard." + } + }, + "harsh": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step2}" + }, + "type": "typography", + "description": "MEDIUM. Small Viewports: 18.66, Large Viewports: 21.53. Token size may not match component size. Subscription tile, Note." + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step3}" + }, + "type": "typography", + "description": "BOLD Small Viewports: 20.16, Large Viewports: 24.97. Token size may not match component size. Dialog, Drawer, Sidebar." + } + } + }, + "subheading": { + "firm": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "MEDIUM. Small Viewports: 16, Large Viewports: 16. Token size may not match component size. Dialog (goal heading), Tile select." + } + }, + "moderate": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "REGULAR. Small Viewports: 16, Large Viewports: 16. Token size may not match component size. Accordion standard." + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "REGULAR. Small Viewports: 17.28, Large Viewports: 18.56. Token size may not match component size. Dialog." + } + } + } + }, + "link": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}", + "textDecoration": "underline" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}", + "textDecoration": "underline" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + } + }, + "pill": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step-1}" + }, + "type": "typography", + "description": "Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size." + }, + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography", + "description": "Small Viewports: 16, Large Viewports: 16. Match token size to component size." + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography", + "description": "Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size." + } + } + } + } + } +} \ No newline at end of file diff --git a/data/tokens/origin.json b/data/tokens/origin.json index ce88de29..50066d4f 100644 --- a/data/tokens/origin.json +++ b/data/tokens/origin.json @@ -7,7 +7,7 @@ "description": "Reference only. Do not use in components." }, "blue": { - "value": "#0072C4", + "value": "#0072c4", "type": "color" }, "brightBlue": { @@ -15,7 +15,7 @@ "type": "color" }, "green": { - "value": "#00821E", + "value": "#00821e", "type": "color" }, "brilliantGreen": { @@ -28,7 +28,7 @@ "type": "color" }, "orange": { - "value": "#BB4F00", + "value": "#BA4E00", "type": "color", "description": "was #E96400" }, @@ -81,6 +81,16 @@ "value": "#FFFFFF", "type": "color", "description": "Reference only. Do not use in components." + }, + "aiH": { + "value": "linear-gradient(90deg, #13A038 0%, #0092DB 50%, #8F49FE 100%)", + "type": "color", + "description": "Ai gradient horizontal - on light. H in the token name means horizontal" + }, + "lightAiH": { + "value": "linear-gradient(90deg, #00D639 0%, #11AFFF 50%, #8F49FE 100%)", + "type": "color", + "description": "Ai gradient horizontal - on dark. H in the token name means horizontal" } }, "size": { @@ -233,10 +243,22 @@ "value": "{origin.dimension.base} * 3000", "type": "dimension" }, + "3600": { + "value": "{origin.dimension.base} * 3600", + "type": "dimension" + }, + "4000": { + "value": "{origin.dimension.base} * 4000", + "type": "dimension" + }, "7000": { "value": "{origin.dimension.base} * 7000", "type": "dimension" }, + "9500": { + "value": "{origin.dimension.base} * 9500", + "type": "dimension" + }, "base": { "value": "{origin.size.SCALE} / 100", "type": "dimension" @@ -263,15 +285,18 @@ "lineHeights": { "300": { "value": "100%", - "type": "lineHeights" + "type": "lineHeights", + "description": "For components where space is tight" }, "400": { - "value": "120%", - "type": "lineHeights" + "value": "125%", + "type": "lineHeights", + "description": "For headings" }, "500": { - "value": "160%", - "type": "lineHeights" + "value": "150%", + "type": "lineHeights", + "description": "For body and components" } }, "fontFamilies": { @@ -506,6 +531,16 @@ "value": "clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem))", "type": "fontSizes", "description": "Small Viewports: 34.54, Large Viewports: 70.58" + }, + "step11": { + "value": "clamp(2.3322rem, 1.6361rem + 3.4803vi, 5.1164rem)", + "type": "fontSizes", + "description": "Small Viewports: 37.31, Large Viewports: 81.86" + }, + "step12": { + "value": "clamp(2.5187rem, 1.6647rem + 4.2703vi, 5.935rem)", + "type": "fontSizes", + "description": "Small Viewports: 40.30, Large Viewports: 94.96" } } } diff --git a/release.config.js b/release.config.js index 3bf5706a..ddcfbb7b 100644 --- a/release.config.js +++ b/release.config.js @@ -17,19 +17,19 @@ module.exports = { } ], [ - "@amanda-mitchell/semantic-release-npm-multiple", + '@amanda-mitchell/semantic-release-npm-multiple', { - "registries": { - "github": { + registries: { + github: { changelogFile: CHANGELOG, pkgRoot: DIST, tarballDir: DIST }, - "public": { + public: { changelogFile: CHANGELOG, pkgRoot: DIST }, - "x3": { + x3: { changelogFile: CHANGELOG, pkgRoot: DIST } diff --git a/scripts/build.js b/scripts/build.js index e554c922..0b32ccdf 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -38,8 +38,8 @@ const getSplit = (componentName, modeName, format, subType, suffix, outputRefere } const path = getPath(componentName) - - const selector = outputReferences ? `[class^="sds-mode-"]` : modeName ? `.sds-mode-${modeName}` : undefined + + const selector = outputReferences ? '[class^="sds-mode-"]' : modeName ? `.sds-mode-${modeName}` : undefined return [ { @@ -121,7 +121,7 @@ const getGlobalConfig = () => { return { source: [ './data/tokens/origin.json', - './data/tokens/global.json' + './data/tokens/global/*.json' ], platforms: { css: { @@ -188,7 +188,7 @@ const getModeConfig = (mode) => { return { source: [ './data/tokens/origin.json', - './data/tokens/global.json', + './data/tokens/global/*.json', `./data/tokens/Modes/${mode}`, './data/tokens/Components/*.json' // `./data/tokens/Platforms/${platform}/*.json`