villa-design-tokens 1.0.105 → 1.0.107

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.105",
+  "version": "1.0.107",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vpro/Design-tokens.git"

package/tokens/$themes.json

@@ -35,10 +35,8 @@
       "color.border.hover": "S:39e06639ab6ec47b6a9ca5f50c8a66a8a1366091,",
       "color.border.active": "S:abf4aa6c3da7cf18298e3bae46e705e3ab29bd03,",
       "color.border.error": "S:3a6a26daccb3d65b75474c0c624bae15ff7e21c6,",
-      "color.border.filled": "S:244d1104b2bf3ec64c73934cda2e7158b9a93033,",
       "color.link.default": "S:3d9c19d35d0f9915f854ba8af44466295c43a406,",
       "color.link.hover": "S:5a44f70901e27351cc0dca1f0df4428d5248f616,",
-      "color.link.active": "S:0d5eac676bf073be3ad0610d957a9e21b8d39359,",
       "color.secondary.interactive.default": "S:54bdd9ad906216406c8ea115db5a718b60827271,",
       "color.secondary.interactive.hover": "S:af3bf36a472c7b5e6d32545d27c587d29f6c3e76,",
       "color.secondary.interactive.active": "S:1ffc0b7d7d95e3f1863f9dca6dd3f7c105e7c6c1,",
@@ -102,8 +100,7 @@
       "color.link.inverse-hover": "S:54800c9f284a1d9ca261ef00e701196c112630f7,",
       "color.secondary.border-interactive.active": "S:2ccedcc3bb7c1d9356b08afb5f190583c3b3ad31,",
       "text.utility.max.xxl": "S:5946269fecfabb1fbae445d562754c7a22a19d13,",
-      "text.utility.min.xxl": "S:c59dff4c9b0f3b49068c2a9e2913208009e1284c,",
-      "color.primary.interactive.outline-hover": "S:1be352613115b24032357ea619adad1bc888a570,"
+      "text.utility.min.xxl": "S:c59dff4c9b0f3b49068c2a9e2913208009e1284c,"
     },
     "selectedTokenSets": {
       "global": "source",
@@ -119,10 +116,8 @@
       "color.border.hover": "S:92819682befb8eade013e8f0146dc93ed2793537,",
       "color.border.active": "S:08eb9ff8a753983802f0fea6363fae02a7649b9f,",
       "color.border.error": "S:537fd113c1afc88fdd51b9b1fc5695b2c28b7bda,",
-      "color.border.filled": "S:335d0681bde4122aaa69aec22907b03bccc69c05,",
       "color.link.default": "S:17d4e8367ba96a65f6b67ef0af848f31574a5f5e,",
       "color.link.hover": "S:55a2ea3b5d08702071dcc4da719706e7b4a272bc,",
-      "color.link.active": "S:2ee0b1c77855aefa7bc9c24ed2263464e62faa7e,",
       "text.body.min": "S:c45204787e8ad75bcba380dbafe588e08d92a3c4,",
       "text.body.max": "S:3201b8da3ddb8ca93531e4651482bbccf743dee5,",
       "text.heading.min.xxxl": "S:232bd242e4b471a460fd3fbb1736152fc1a44395,",
@@ -218,11 +213,10 @@
       "color.secondary.border-interactive.hover": "S:49965240fe789bac0d9266576d111dc1c005466c,",
       "color.secondary.border-interactive.active": "S:c6d63444bba23f59123ef4d342beae1b8b5c8960,",
       "color.link.inverse-hover": "S:1dea6d80af574ef79c5ee62fcf32bbe45767fb87,",
-      "color.link.subtle": "S:b17cf1f853d1699a35288a43dfb7f37a9345125e,",
-      "color.link.subtle-hover": "S:e32a69fe9516ab24118ef48d4645ee42e20f5ca4,",
       "text.utility.max.xxl": "S:290a9115fe3661f6b8a05014412f623b2f7aa09e,",
       "text.utility.min.xxl": "S:93a3b1aa6063897d9788ec98973da9306bbf9465,",
-      "color.primary.interactive.outline-hover": "S:7945b4b98dff52a614df51d1aaa9e609375f4611,"
+      "color.link.inverse-subtle": "S:b17cf1f853d1699a35288a43dfb7f37a9345125e,",
+      "color.link.inverse-subtle-hover": "S:e32a69fe9516ab24118ef48d4645ee42e20f5ca4,"
     },
     "selectedTokenSets": {
       "global": "source",

package/tokens/base.json

@@ -454,21 +454,49 @@
     }
   },
   "motion": {
-    "button-hover": {
-      "value": "{motion.property.color} {motion.style.ease-in-out} {motion.duration.fast}",
-      "type": "other"
-    },
-    "link-hover": {
-      "value": "{motion.property.color} {motion.style.ease-in-out} {motion.duration.fast}",
-      "type": "other"
+    "style": {
+      "fast": {
+        "hover-in": {
+          "value": "{motion.style.ease-in-out} ,{motion.duration.fast}",
+          "type": "other"
+        },
+        "hover-out": {
+          "value": "{motion.duration.fast} {motion.style.ease-out}",
+          "type": "other"
+        }
+      },
+      "slow": {
+        "movement-in": {
+          "value": "{motion.duration.250} {motion.style.ease-in}",
+          "type": "other"
+        },
+        "movement-out": {
+          "value": "{motion.duration.250} {motion.style.ease-out}",
+          "type": "other"
+        }
+      },
+      "medium": {
+        "hover-in": {
+          "value": "{motion.style.ease-in} {motion.duration.medium}",
+          "type": "other"
+        },
+        "hover-out": {
+          "value": "{motion.duration.medium} {motion.style.ease-out}",
+          "type": "other"
+        }
+      }
     },
     "duration": {
       "fast": {
-        "value": "{motion.duration.25}",
+        "value": "{motion.duration.150}",
+        "type": "other"
+      },
+      "medium": {
+        "value": "{motion.duration.200}",
         "type": "other"
       },
       "slow": {
-        "value": "{motion.duration.50}",
+        "value": "{motion.duration.250}",
         "type": "other"
       }
     }

package/tokens/brands/human.json

@@ -167,15 +167,11 @@
           "type": "color"
         },
         "hover": {
-          "value": "{color.global.orange.125}",
+          "value": "{color.global.blue.100}",
           "type": "color"
         },
         "active": {
-          "value": "{color.global.orange.150}",
-          "type": "color"
-        },
-        "outline-hover": {
-          "value": "{color.global.orange.50}",
+          "value": "{color.global.blue.150}",
           "type": "color"
         }
       },
@@ -185,25 +181,11 @@
           "type": "color"
         },
         "hover": {
-          "value": "{color.global.grey.500}",
-          "type": "color"
-        },
-        "active": {
           "value": "{color.global.grey.100}",
           "type": "color"
-        }
-      },
-      "border-interactive": {
-        "default": {
-          "value": "{color.primary.interactive.default}",
-          "type": "color"
-        },
-        "hover": {
-          "value": "{color.primary.interactive.hover}",
-          "type": "color"
         },
         "active": {
-          "value": "{color.primary.interactive.active}",
+          "value": "{color.global.grey.100}",
           "type": "color"
         }
       }
@@ -214,21 +196,17 @@
         "type": "color"
       },
       "hover": {
-        "value": "{color.global.orange.100}",
+        "value": "{color.global.blue.100}",
         "type": "color"
       },
       "active": {
-        "value": "{color.global.orange.100}",
+        "value": "{color.global.blue.100}",
         "type": "color"
       },
       "error": {
         "value": "{color.global.red.100}",
         "type": "color"
       },
-      "filled": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
-      },
       "inverse": {
         "value": "{color.global.grey.300}",
         "type": "color"
@@ -243,24 +221,20 @@
         "value": "{color.global.blue.100}",
         "type": "color"
       },
-      "active": {
-        "value": "{color.global.blue.150}",
-        "type": "color"
-      },
       "inverse": {
         "value": "{color.global.grey.100}",
         "type": "color"
       },
       "inverse-hover": {
-        "value": "#9E9E9E",
+        "value": "{color.global.grey.300}",
         "type": "color"
       },
-      "subtle": {
+      "inverse-subtle": {
         "value": "{color.global.grey.300}",
         "type": "color"
       },
-      "subtle-hover": {
-        "value": "{color.global.grey.200}",
+      "inverse-subtle-hover": {
+        "value": "{color.global.grey.100}",
         "type": "color"
       }
     },
@@ -277,10 +251,6 @@
         "active": {
           "value": "{color.global.grey.450}",
           "type": "color"
-        },
-        "outline-hover": {
-          "value": "{color.global.grey.200}",
-          "type": "color"
         }
       },
       "on-interactive": {
@@ -296,20 +266,6 @@
           "value": "{color.global.grey.100}",
           "type": "color"
         }
-      },
-      "border-interactive": {
-        "default": {
-          "value": "{color.secondary.interactive.default}",
-          "type": "color"
-        },
-        "hover": {
-          "value": "{color.secondary.interactive.hover}",
-          "type": "color"
-        },
-        "active": {
-          "value": "{color.secondary.interactive.active}",
-          "type": "color"
-        }
       }
     }
   }

package/tokens/brands/whitelabel.json

@@ -173,10 +173,6 @@
         "active": {
           "value": "{color.global.blue.150}",
           "type": "color"
-        },
-        "outline-hover": {
-          "value": "{color.global.blue.50}",
-          "type": "color"
         }
       },
       "on-interactive": {
@@ -192,20 +188,6 @@
           "value": "{color.global.grey.100}",
           "type": "color"
         }
-      },
-      "border-interactive": {
-        "default": {
-          "value": "{color.primary.interactive.default}",
-          "type": "color"
-        },
-        "hover": {
-          "value": "{color.primary.interactive.hover}",
-          "type": "color"
-        },
-        "active": {
-          "value": "{color.primary.interactive.active}",
-          "type": "color"
-        }
       }
     },
     "border": {
@@ -218,33 +200,25 @@
         "type": "color"
       },
       "hover": {
-        "value": "{color.global.grey.500}",
+        "value": "{color.global.blue.100}",
         "type": "color"
       },
       "active": {
-        "value": "{color.global.grey.500}",
+        "value": "{color.global.blue.100}",
         "type": "color"
       },
       "error": {
         "value": "{color.global.red.100}",
         "type": "color"
-      },
-      "filled": {
-        "value": "{color.global.grey.500}",
-        "type": "color"
       }
     },
     "link": {
       "default": {
-        "value": "{color.global.grey.500}",
+        "value": "{color.global.blue.150}",
         "type": "color"
       },
       "hover": {
-        "value": "{color.global.grey.450}",
-        "type": "color"
-      },
-      "active": {
-        "value": "{color.global.grey.500}",
+        "value": "{color.global.blue.100}",
         "type": "color"
       },
       "inverse": {
@@ -256,15 +230,15 @@
         }
       },
       "inverse-hover": {
-        "value": "9E9E9E",
+        "value": "{color.global.grey.300}",
         "type": "color"
       },
-      "subtle": {
+      "inverse-subtle": {
         "value": "{color.global.grey.300}",
         "type": "color"
       },
-      "subtle-hover": {
-        "value": "{color.global.grey.200}",
+      "inverse-subtle-hover": {
+        "value": "{color.global.grey.100}",
         "type": "color"
       }
     },
@@ -275,16 +249,12 @@
           "type": "color"
         },
         "hover": {
-          "value": "{color.global.grey.400}",
+          "value": "{color.global.blue.100}",
           "type": "color"
         },
         "active": {
           "value": "{color.global.grey.450}",
           "type": "color"
-        },
-        "outline-hover": {
-          "value": "{color.global.grey.200}",
-          "type": "color"
         }
       },
       "on-interactive": {
@@ -300,20 +270,6 @@
           "value": "{color.global.grey.100}",
           "type": "color"
         }
-      },
-      "border-interactive": {
-        "default": {
-          "value": "{color.secondary.interactive.default}",
-          "type": "color"
-        },
-        "hover": {
-          "value": "{color.secondary.interactive.hover}",
-          "type": "color"
-        },
-        "active": {
-          "value": "{color.secondary.interactive.active}",
-          "type": "color"
-        }
       }
     }
   }

package/tokens/global.json

@@ -330,7 +330,7 @@
           "type": "color"
         },
         "100": {
-          "value": "#007DC5",
+          "value": "#007BC2",
           "type": "color"
         },
         "125": {
@@ -438,19 +438,19 @@
       "ease-in": {
         "value": "cubic-bezier(0.42, 0, 1, 1)",
         "type": "other"
-      },
-      "linear": {
-        "value": "cubic-bezier(0, 0, 1, 1)",
-        "type": "other"
       }
     },
     "duration": {
-      "25": {
-        "value": "25ms",
+      "150": {
+        "value": "150ms",
         "type": "other"
       },
-      "50": {
-        "value": "50ms",
+      "200": {
+        "value": "200ms",
+        "type": "other"
+      },
+      "250": {
+        "value": "250ms",
         "type": "other"
       }
     }