villa-design-tokens 1.0.161 → 1.0.163

package/package.json

@@ -2,7 +2,7 @@
   "name": "villa-design-tokens",
   "description": "Design Tokens published by Design Token Studio with VPRO's Figma Design System",
   "author": "VPRO",
-  "version": "1.0.161",
+  "version": "1.0.163",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vpro/Design-tokens.git"

package/tokens/$themes.json

@@ -19,19 +19,16 @@
       "color.text.subtle": "S:dcb01b54ed71baf621f60c8435b9c14703f77418,",
       "color.text.disabled": "S:634a7e7ddeadd1e2e5db8f07b118144b32f147bb,",
       "color.text.inverse": "S:146d0dbba7d6c0fc9d2f7a2bb1fb59fbe019fe59,",
-      "color.text.error": "S:f6af91f48424fe2d540f55866197dacbedd3a511,",
       "color.icon.primary": "S:45fc444fe591fcc3ce0aa4f4a19c370538464376,",
       "color.icon.secondary": "S:59436377db3551c9d24161658c67362f3b85408c,",
       "color.icon.tertiary": "S:4da5d5a623ffce7cbaf2a2df86774f36d550e240,",
       "color.icon.inverse": "S:f32397b8f831ab165c6fed02e44ed11af8b79ba2,",
-      "color.icon.error": "S:c6a4b3f92d54b8613b26216a470f38db20b114da,",
       "color.primary.on-interactive.default": "S:afe55c2c9290a2f021785732368494bb0a975e40,",
       "color.primary.on-interactive.hover": "S:f830c675f1e541d1c47b7f49ffa3b36fc33f7634,",
       "color.primary.on-interactive.active": "S:3b08953ebec73db736ee57e0d83169c74fd73407,",
       "color.border.default": "S:b54724043e7e4a6bfdd3c6655ce4cabcc7df9f7a,",
       "color.border.hover": "S:ade89e0134e2cd726721f9edd03730434bedbf90,",
       "color.border.active": "S:d88dc256c999dc8930c420b83e0d1f812b701f0f,",
-      "color.border.error": "S:1478873dffd88062d461c4e1954377959d77c27d,",
       "color.link.default": "S:0b561ce2258ecfb64efae2826fb71a9ab3f5216c,",
       "color.link.hover": "S:3f43f7744a88846809ef1370815faf417348dd14,",
       "color.secondary.interactive.default": "S:2c1349a453f22067fad425667ff5c72401e6d13f,",
@@ -171,17 +168,14 @@
       "color.text.subtle": "36833a26bf82fcb355f7e9094c6ea37302366891",
       "color.text.disabled": "5570258e45fab2b5514ca1f54539154fcd1bc019",
       "color.text.inverse": "d578c5e2329b16bedadf273a8a581b7ae58b948e",
-      "color.text.error": "b63291b11dc99db8d6d928ae9bebe1532269f29d",
       "color.icon.primary": "120fe953e41520da6ce67072e66d07d4271a2949",
       "color.icon.secondary": "7646ea41aa519fac8879cfb5a67eb8da693f3091",
       "color.icon.tertiary": "f25b1184829f0084c6413563d13b7fd55c71a559",
       "color.icon.inverse": "99465be736ec6b5deb99fd869f8cb91e67e53744",
-      "color.icon.error": "0e6798ca8b467f74088a6611a9b5d3353e1bf1c2",
       "color.border.default": "799eb9dfb771edb857d5c2c397e33ed0ed21a821",
       "color.border.inverse": "ab11c19c427aa9e7091845537369c4cd3ec06427",
       "color.border.hover": "a6b66866cc6e63c4ffe9a692a7588cb7b6a29387",
       "color.border.active": "be902b71ee5900cf56b002fd4ec34b2daa1be6ba",
-      "color.border.error": "0aab06da0f356fb4b2b4cc748fbaada7daf76eb8",
       "color.border.focus": "2b78007845410699c1b008def34c2c8037327d42",
       "color.border.filled": "7ea16e13f6e3ffde2eb78a1e5ff774123114ef6a",
       "color.link.default": "7313b7fb82a83227ded269104debdbf73b33b70a",
@@ -237,7 +231,6 @@
       "color.border.default": "S:1182e2c4829429e6886b991b6b51a2ab1885669a,",
       "color.border.hover": "S:62d674b1370fb3d93f507a5b3ed22ab222ce43b2,",
       "color.border.active": "S:9ec09ccf98d4bcbd97e137cb26a9da619b94e6de,",
-      "color.border.error": "S:5ad470d0d6fda8ef27c19ea23d348ee2141b12c6,",
       "color.link.default": "S:15a9ce129ab26b883482d84606c5205d8c671aed,",
       "color.link.hover": "S:8ba6e4e9fcb7e5aa0a86e4c6eacd2faee159278b,",
       "text.body.min": "S:c45204787e8ad75bcba380dbafe588e08d92a3c4,",
@@ -280,12 +273,10 @@
       "color.text.subtle": "S:f029612440c3d261ec7bd8567339d83679b42ae9,",
       "color.text.disabled": "S:cff0886c7e5e359230ed892233648ad9b83f7811,",
       "color.text.inverse": "S:7e0f90ac0524be7b9c1ae9214ec58c05500fa38d,",
-      "color.text.error": "S:5927d6ef1a3a68e57f425d8a40b51daaa6695b39,",
       "color.icon.primary": "S:26decd93c2608aeaa3d764ac75fef19f0439f53f,",
       "color.icon.secondary": "S:3c73d0556cbbbe9a68081a32794792fc46386c77,",
       "color.icon.tertiary": "S:0b1cfe3537d3a0dca678ee325380a4e857dde2c7,",
       "color.icon.inverse": "S:6f7c9f8933103ae7fbe9d68a9600d003d8805a5a,",
-      "color.icon.error": "S:591f6d5b96760309087ad5a47431e1e104e3b83f,",
       "color.primary-outline.fill.default": "S:53c9dea5aca7addd65f97a6a222fecc140b45ebe,",
       "color.primary-outline.fill.hover": "S:ef2ffaa256a7ab31009e19d1f133c62446c3728c,",
       "color.primary-outline.fill.active": "S:ee906642ae6d3200c829c57a67d59b531b151f93,",
@@ -441,7 +432,6 @@
       "text.heading.max.xs": "S:a02d3e005ac17afd813cad0bd5b6c8d84ab34805,",
       "text.heading.max.xxs": "S:a5ec8463c37e1d4270f0872af8569cd83e6ff901,",
       "color.transparent.50": "S:76fa0cb37721c0e2501076d879a03041a47a4c57,",
-      "color.transparent.100": "S:f6194664d31a1adb71f03f94dad95f5feb762a28,",
       "color.global.dark-blue.100": "S:a1a3614afb351511e83689b7c56b557eb0654f95,",
       "color.global.dark-blue.150": "S:15e5d549a4f11995743696f0b3a735a6dc23bbae,",
       "color.functional.error": "S:5a37d4f6bfb0ed62584a5492c9e7d73820344c6f,",
@@ -463,12 +453,10 @@
       "color.text.subtle": "S:e6f20a43dd48d1df46ca8724e1277a478338f45b,",
       "color.text.disabled": "S:27bc034a77a390c7e8f6af8d2864be488c23ab15,",
       "color.text.inverse": "S:d773b5a02b1379730c9cc849b73d8f208b3672b2,",
-      "color.text.error": "S:1942d64117469bc3b0f9b5b4ac734cd17dcbae1e,",
       "color.icon.primary": "S:4b6fa8ddc43f9d5dc55bcc30c1fb04067b523610,",
       "color.icon.secondary": "S:2e4c4a33f25803bc1738778511e58abe7e4b1d10,",
       "color.icon.tertiary": "S:b2ac99b9a5b23d55043ee1a3aa7226590a472a0a,",
       "color.icon.inverse": "S:e768e6ebc5904f28b9ff2de8298777fb2bdb45a8,",
-      "color.icon.error": "S:1207a7451bc4293f085a559bd88135c22565a903,",
       "color.primary.interactive.default": "S:7fd8402dab84b215b870b4ff5b685d42d5398e19,",
       "color.primary.interactive.hover": "S:cc8fc575be6aec150a9f2523c507f52f13fcd184,",
       "color.primary.interactive.active": "S:b99c0b55e157b5a3ac063e7733457603935094a8,",
@@ -478,7 +466,6 @@
       "color.border.default": "S:07444c038b546af964b52f771edb88a51b1c3644,",
       "color.border.hover": "S:07ec4f45903b708e0a62424101138c0a5c262342,",
       "color.border.active": "S:284f9825cd7e5411dcab80a330d2c958a8539373,",
-      "color.border.error": "S:0c623e9195f886ac2018ec8805c578a8e8ce2d30,",
       "color.border.inverse": "S:d7153a391d134e3819dcce6806abca2e4930767d,",
       "color.border.focus": "S:e17055cd985cf9b2d8489523727f32c15fe2517a,",
       "color.border.filled": "S:5452395de36c8a80027a1ee9310f81fe06bbb3b9,",
@@ -575,7 +562,8 @@
       "color.global.salmon.150": "S:be8ed39c9d98e9888799d3eaee9df45e4e955f47,",
       "color.global.salmon.200": "S:ed92736b09090f85ba2ee98779e816bcaf158f87,",
       "text.display.max.question": "S:bb210ead4316540d3170dded191775b9253e827d,",
-      "text.display.min.question": "S:816ca833fbe667fa0e498efea893e76209024088,"
+      "text.display.min.question": "S:816ca833fbe667fa0e498efea893e76209024088,",
+      "color.transparent.0": "S:f6194664d31a1adb71f03f94dad95f5feb762a28,"
     },
     "selectedTokenSets": {
       "global": "enabled",
@@ -735,7 +723,6 @@
       "color.global.yellow.100": "S:54a703aeaa0469b6dea6b649ec624b230989fb48,",
       "color.global.yellow.150": "S:565ea80533bd4afb4092ccd7d53a064d2ce1cfda,",
       "color.transparent.50": "S:8ef074f2376321e267b90b77e7ea028de49c723f,",
-      "color.transparent.100": "S:11898a8e93c471310f3f15f0427b08266ae4e731,",
       "color.global.dark-blue.100": "S:5dcc45685cc7328bb00143220833d84ed7430459,",
       "color.global.dark-blue.150": "S:9fa9503357b0a9b72879f7106a3cd675e9cec887,",
       "color.global.magenta.100": "S:581fe0b0c3a396b149e6bea22257aef897b0d783,",
@@ -761,12 +748,10 @@
       "color.text.subtle": "S:2f14dec4f578caf966c798082712beb403911335,",
       "color.text.disabled": "S:0eb92ce732ea194eff4f4221f171e20cbde2f614,",
       "color.text.inverse": "S:881d886ff8fac4db69876fe33832768f8469e938,",
-      "color.text.error": "S:a0f46fadd10c9460cc316788fa36b43f70ee51ea,",
       "color.icon.primary": "S:d1746b06b49d5cef5acbbae1e0dc6afdc7e4f302,",
       "color.icon.secondary": "S:b0955642bc6bdfead8fdca1f6cd803edab552ce4,",
       "color.icon.tertiary": "S:db7610e112be5e8213f6ba127154aafabe0ab126,",
       "color.icon.inverse": "S:a18b66ee8a32572d36667058a091def32f0b5706,",
-      "color.icon.error": "S:b5008b15bb1616fcaa054f3cc124f8faa7f69098,",
       "color.primary.interactive.default": "S:cd20eba1d68506e44e7b74b0e49b3856507657e7,",
       "color.primary.interactive.hover": "S:ca7bc3594803a7abdc63b1354992ca829aaf4538,",
       "color.primary.interactive.active": "S:2e33d88de509ccba12842fdef97f6939ffd0c90b,",
@@ -776,7 +761,6 @@
       "color.border.default": "S:cc0f360d1e9f022ed13d70a071b9cf7a44cb7ca0,",
       "color.border.hover": "S:8dbdbe308720037a860831463b00ef13a6928f86,",
       "color.border.active": "S:efec5a7d4dfb3fc27c4ac4cc2c6a9f869cae943c,",
-      "color.border.error": "S:532062fb0564474719dca82cd1e0203cf5cb5d8f,",
       "color.border.inverse": "S:dda51ccaa0e6ad6268f6d8f98dadde7a69404b09,",
       "color.border.focus": "S:ac55b79d9c8608adb98390dff870b787501f558f,",
       "color.border.filled": "S:40cf716f0ff2054469a37ebc508c46b8bb95154c,",
@@ -827,7 +811,8 @@
       "color.global.salmon.150": "S:3b72a8fbbe2e515fca5c94032bf03560ac0cc91a,",
       "color.global.salmon.200": "S:d5b631bebd1862cdb3a15bd33028237922a1833e,",
       "text.display.max.question": "S:abd4cffceac9083883c59869951ed73678797510,",
-      "text.display.min.question": "S:74afd593e284e94d1c8bbf22e5d08b7170fc868e,"
+      "text.display.min.question": "S:74afd593e284e94d1c8bbf22e5d08b7170fc868e,",
+      "color.transparent.0": "S:11898a8e93c471310f3f15f0427b08266ae4e731,"
     },
     "selectedTokenSets": {
       "global": "enabled",
@@ -920,12 +905,10 @@
       "color.text.subtle": "S:158930232e05572f33a45693e22f32a3b4f7d61a,",
       "color.text.disabled": "S:a44f466c06b650c9080ea406b8b8bc7a194a960e,",
       "color.text.inverse": "S:1ac1fa78ebd36de739b2fe65ac9f27abc13ad669,",
-      "color.text.error": "S:37b38898ac157fdb37e138ba398c6db292c8a15a,",
       "color.icon.primary": "S:069ee5ae5b113ca8d830e8a27a63f941eb67a83f,",
       "color.icon.secondary": "S:6568bb854002c0d84adec2749fae9525026ca5be,",
       "color.icon.tertiary": "S:5aac192cfe2f5f0c522f742c0a314b7fb2619f85,",
       "color.icon.inverse": "S:4ef756ac95cda3c908fa8d97447467ceea6879d5,",
-      "color.icon.error": "S:1b0fefe974f2cfa3b38b502d41b26a92f28c2751,",
       "color.primary.interactive.default": "S:c282424aed8a61265654ffb56bf55b8822824cef,",
       "color.primary.interactive.hover": "S:fc3b061ade2b4b65a3a379e7cc884c557667febf,",
       "color.primary.interactive.active": "S:b510db74f0f8fdd3ad057ee3935f931467382da8,",
@@ -935,7 +918,6 @@
       "color.border.default": "S:e846b00a1b2a8a1415d90ef93e10644e4b4eabe8,",
       "color.border.hover": "S:db6dca98672283e53222af9fa22a0c74d76e34ce,",
       "color.border.active": "S:44fb4ba10b7a42a41332ab46f87331ef027f68a7,",
-      "color.border.error": "S:090007b8bfc465224b4e8d48086779800c945cc2,",
       "color.border.inverse": "S:609f5749b573f0772ceadc76a68a7beb8fd89cea,",
       "color.border.focus": "S:6a68c300b9d3f05a8b47364c06fb4cb914ef4271,",
       "color.border.filled": "S:ef674e37b8db810e7f9429dcd863e9f9fb90668c,",
@@ -1010,7 +992,6 @@
       "color.global.navy.100": "S:0147fa3fc4a9ee562c1ca585605111c498e14c7c,",
       "color.global.neon-yellow.100": "S:dd2b03723780d88277fc6ea996ffe66ed7acbfb4,",
       "color.transparent.50": "S:bc63a6d1b8a1acbb150d0ebe27acb3a38b2bff76,",
-      "color.transparent.100": "S:a5711b6e5b5d282ec4218fc0dd2e081663e07dc2,",
       "color.global.mist.100": "S:89c435456648aabad2d00301a9c25a4064091aaf,",
       "color.global.mist.150": "S:08bc2234424b61b0f40a7e9812c834de07565626,",
       "color.global.salmon.100": "S:fd362334ec1f369f687d64f0ed0757fe8f780286,",
@@ -1080,7 +1061,8 @@
       "color.secondary.border.active": "S:76e5cc63148f5393e84c5060dd9f28d37e47075b,",
       "color.tertiary.border.default": "S:305528713e9703064200466366ff42725d6a7ec2,",
       "color.tertiary.border.hover": "S:a8f84bedfd95de1c68b72a1ffa0b8931a6cb3116,",
-      "color.tertiary.border.active": "S:a862ebd681964be9a769405feedd0961f7958c95,"
+      "color.tertiary.border.active": "S:a862ebd681964be9a769405feedd0961f7958c95,",
+      "color.transparent.0": "S:a5711b6e5b5d282ec4218fc0dd2e081663e07dc2,"
     },
     "selectedTokenSets": {
       "global": "enabled",

package/tokens/base.json

@@ -450,6 +450,10 @@
       "info": {
         "value": "{color.global.blue.125}",
         "type": "color"
+      },
+      "disabled": {
+        "value": "{color.global.grey.300}",
+        "type": "color"
       }
     }
   },

package/tokens/brands/argos.json

@@ -120,50 +120,6 @@
         "type": "color"
       }
     },
-    "surface": {
-      "brand": {
-        "value": "{color.brand.primary}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.salmon.150}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.mist.150}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.oxford.150}",
-        "type": "color"
-      }
-    },
-    "on-surface": {
-      "brand": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      }
-    },
     "text": {
       "title": {
         "value": "{color.global.oxford.150}",
@@ -184,10 +140,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "icon": {
@@ -206,10 +158,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "border": {
@@ -229,10 +177,6 @@
         "value": "{color.global.salmon.100}",
         "type": "color"
       },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
-      },
       "focus": {
         "value": "{color.brand.primary}",
         "type": "color"
@@ -315,7 +259,7 @@
     "secondary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -359,7 +303,7 @@
     "tertiary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -387,7 +331,7 @@
       },
       "border": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -399,6 +343,98 @@
           "type": "color"
         }
       }
+    },
+    "surface": {
+      "brand": {
+        "background": {
+          "value": "{color.brand.primary}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        }
+      },
+      "primary": {
+        "background": {
+          "value": "{color.global.salmon.150}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "background": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "tertiary": {
+        "background": {
+          "value": "{color.global.mist.150}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "dark": {
+        "background": {
+          "value": "{color.global.oxford.150}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/tokens/brands/brainwash.json

@@ -120,50 +120,6 @@
         "type": "color"
       }
     },
-    "surface": {
-      "brand": {
-        "value": "{color.global.neon-yellow.100}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.150}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.300}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      }
-    },
-    "on-surface": {
-      "brand": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      }
-    },
     "text": {
       "title": {
         "value": "{color.global.grey.500}",
@@ -184,10 +140,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "icon": {
@@ -206,10 +158,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "border": {
@@ -229,10 +177,6 @@
         "value": "{color.global.magenta.150}",
         "type": "color"
       },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
-      },
       "focus": {
         "value": "{color.brand.primary}",
         "type": "color"
@@ -315,7 +259,7 @@
     "secondary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -359,7 +303,7 @@
     "tertiary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -387,7 +331,7 @@
       },
       "border": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -399,6 +343,98 @@
           "type": "color"
         }
       }
+    },
+    "surface": {
+      "brand": {
+        "background": {
+          "value": "{color.global.neon-yellow.100}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "primary": {
+        "background": {
+          "value": "{color.global.grey.150}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "background": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "tertiary": {
+        "background": {
+          "value": "{color.global.grey.300}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "dark": {
+        "background": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/tokens/brands/human.json

@@ -120,50 +120,6 @@
         "type": "color"
       }
     },
-    "surface": {
-      "brand": {
-        "value": "{color.brand.primary}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.150}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.300}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      }
-    },
-    "on-surface": {
-      "brand": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      }
-    },
     "text": {
       "title": {
         "value": "{color.global.grey.500}",
@@ -184,10 +140,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "icon": {
@@ -206,10 +158,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "border": {
@@ -229,10 +177,6 @@
         "value": "{color.global.blue.100}",
         "type": "color"
       },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
-      },
       "focus": {
         "value": "{color.brand.primary}",
         "type": "color"
@@ -315,7 +259,7 @@
     "secondary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -359,7 +303,7 @@
     "tertiary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -387,7 +331,7 @@
       },
       "border": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -399,6 +343,98 @@
           "type": "color"
         }
       }
+    },
+    "surface": {
+      "brand": {
+        "background": {
+          "value": "{color.brand.primary}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "primary": {
+        "background": {
+          "value": "{color.global.grey.150}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "background": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "tertiary": {
+        "background": {
+          "value": "{color.global.grey.300}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "dark": {
+        "background": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/tokens/brands/vpro.json

@@ -120,50 +120,6 @@
         "type": "color"
       }
     },
-    "surface": {
-      "brand": {
-        "value": "{color.brand.primary}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.150}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.300}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      }
-    },
-    "on-surface": {
-      "brand": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      }
-    },
     "text": {
       "title": {
         "value": "{color.global.grey.500}",
@@ -184,10 +140,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "icon": {
@@ -206,10 +158,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "border": {
@@ -229,10 +177,6 @@
         "value": "{color.global.dark-blue.150}",
         "type": "color"
       },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
-      },
       "focus": {
         "value": "{color.brand.primary}",
         "type": "color"
@@ -315,7 +259,7 @@
     "secondary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -359,7 +303,7 @@
     "tertiary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -387,7 +331,7 @@
       },
       "border": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -399,6 +343,98 @@
           "type": "color"
         }
       }
+    },
+    "surface": {
+      "brand": {
+        "background": {
+          "value": "{color.brand.primary}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        }
+      },
+      "primary": {
+        "background": {
+          "value": "{color.global.grey.150}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "background": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        }
+      },
+      "tertiary": {
+        "background": {
+          "value": "{color.global.grey.300}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        }
+      },
+      "dark": {
+        "background": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/tokens/brands/whitelabel.json

@@ -120,50 +120,6 @@
         "type": "color"
       }
     },
-    "surface": {
-      "brand": {
-        "value": "{color.brand.primary}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.150}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.300}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      }
-    },
-    "on-surface": {
-      "brand": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      },
-      "primary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "tertiary": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
-      "dark": {
-        "value": "{color.global.grey.100}",
-        "type": "color"
-      }
-    },
     "text": {
       "title": {
         "value": "{color.global.grey.500}",
@@ -184,10 +140,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "icon": {
@@ -206,10 +158,6 @@
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
-      },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
       }
     },
     "border": {
@@ -229,10 +177,6 @@
         "value": "{color.global.blue.100}",
         "type": "color"
       },
-      "error": {
-        "value": "{color.global.red.100}",
-        "type": "color"
-      },
       "focus": {
         "value": "{color.global.blue.100}",
         "type": "color"
@@ -315,7 +259,7 @@
     "secondary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -359,7 +303,7 @@
     "tertiary": {
       "interactive": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -387,7 +331,7 @@
       },
       "border": {
         "default": {
-          "value": "{color.transparent.100}",
+          "value": "{color.transparent.0}",
           "type": "color"
         },
         "hover": {
@@ -399,6 +343,98 @@
           "type": "color"
         }
       }
+    },
+    "surface": {
+      "brand": {
+        "background": {
+          "value": "{color.brand.primary}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        }
+      },
+      "primary": {
+        "background": {
+          "value": "{color.global.grey.150}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "background": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "tertiary": {
+        "background": {
+          "value": "{color.global.grey.300}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent-dark.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.50}",
+          "type": "color"
+        }
+      },
+      "dark": {
+        "background": {
+          "value": "{color.global.grey.500}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.75}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        }
+      }
     }
   }
 }

package/tokens/global.json

@@ -473,12 +473,30 @@
       }
     },
     "transparent": {
+      "0": {
+        "value": "rgba(255,255,255,0)",
+        "type": "color"
+      },
       "50": {
         "value": "rgba(255,255,255,0.5)",
         "type": "color"
       },
-      "100": {
-        "value": "rgba(255,255,255,0)",
+      "75": {
+        "value": "rgba(255,255,255,0.75)",
+        "type": "color"
+      }
+    },
+    "transparent-dark": {
+      "0": {
+        "value": "rgba(33,33,33,0)",
+        "type": "color"
+      },
+      "50": {
+        "value": "rgba(33,33,33,0.5)",
+        "type": "color"
+      },
+      "75": {
+        "value": "rgba(33,33,33,0.75)",
         "type": "color"
       }
     }