Use new semantic tokens for username colors (#12209)

* Use new semantic tokens for username colors

To match the tokens now used by the Compound Web avatar component

* Fix incorrect lock icon

* Update screenshots

package.json

@@ -73,7 +73,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@vector-im/compound-design-tokens": "^0.1.0",
+        "@vector-im/compound-design-tokens": "^1.0.0",
         "@vector-im/compound-web": "3.0.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",