villa-design-tokens 1.0.161 → 1.0.162

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.162",
   "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,",
@@ -463,12 +454,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 +467,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,",
@@ -761,12 +749,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 +762,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,",
@@ -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,",

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"
@@ -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.salmon.150}",
+          "type": "color"
+        },
+        "foreground": {
+          "value": "{color.global.grey.100}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.transparent.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent.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.mist.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"
+        }
+      },
+      "dark": {
+        "background": {
+          "value": "{color.global.oxford.150}",
+          "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/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"
@@ -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.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.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/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"
@@ -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.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{color.transparent-dark.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/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"
@@ -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"
@@ -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/global.json

@@ -477,10 +477,24 @@
         "value": "rgba(255,255,255,0.5)",
         "type": "color"
       },
+      "75": {
+        "value": "rgba(255,255,255,0.75)",
+        "type": "color"
+      },
       "100": {
         "value": "rgba(255,255,255,0)",
         "type": "color"
       }
+    },
+    "transparent-dark": {
+      "50": {
+        "value": "rgba(33,33,33,0.5)",
+        "type": "color"
+      },
+      "75": {
+        "value": "rgba(33,33,33,0.75)",
+        "type": "color"
+      }
     }
   },
   "style": {