diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cd1f5ca90..9d3885595 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,7 +14,7 @@
"@radix-ui/react-dialog": "^1.1.6",
"@tanstack/react-query": "^5.66.9",
"@tanstack/react-router": "^1.109.2",
- "@vector-im/compound-design-tokens": "3.0.1",
+ "@vector-im/compound-design-tokens": "4.0.0",
"@vector-im/compound-web": "^7.6.3",
"@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4",
@@ -5924,10 +5924,10 @@
}
},
"node_modules/@vector-im/compound-design-tokens": {
- "version": "3.0.1",
- "resolved": "https://registry.npmjs.org/@vector-im/compound-design-tokens/-/compound-design-tokens-3.0.1.tgz",
- "integrity": "sha512-uwpMteMxfX1xRKM5xe6IcuHAGMWYFHAD/R0ANia6JYnP2Q2ytlqUDDFa/nqNqMLYdVytbZs3bJtOfuJxmUJfgg==",
- "license": "Apache-2.0",
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/@vector-im/compound-design-tokens/-/compound-design-tokens-4.0.0.tgz",
+ "integrity": "sha512-hFfLSKrGc58rPRp9JH1mkgw3moFEgpL8RQzyDESHErq7P1lUmlIuwKFTVfK5SbdFM5GvHp7nQaFpVmxUQ3Xp+w==",
+ "license": "SEE LICENSE IN README.md",
"peerDependencies": {
"@types/react": "*",
"react": "^17 || ^18 || ^19.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 1118f8ce7..312d0e855 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,7 +24,7 @@
"@radix-ui/react-dialog": "^1.1.6",
"@tanstack/react-query": "^5.66.9",
"@tanstack/react-router": "^1.109.2",
- "@vector-im/compound-design-tokens": "3.0.1",
+ "@vector-im/compound-design-tokens": "4.0.0",
"@vector-im/compound-web": "^7.6.3",
"@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4",
diff --git a/frontend/src/components/GenericError.tsx b/frontend/src/components/GenericError.tsx
index 000a190d1..c54a5b049 100644
--- a/frontend/src/components/GenericError.tsx
+++ b/frontend/src/components/GenericError.tsx
@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
-import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
import { Button } from "@vector-im/compound-web";
import { useState } from "react";
import { Translation } from "react-i18next";
@@ -22,7 +22,7 @@ const GenericError: React.FC<{ error: unknown; dontSuspend?: boolean }> = ({
{
const ScopeSynapseAdmin: React.FC = () => {
const { t } = useTranslation();
return (
-
+
{t("mas.scope.synapse_admin")}
);
@@ -77,7 +77,9 @@ const ScopeSynapseAdmin: React.FC = () => {
const ScopeMasAdmin: React.FC = () => {
const { t } = useTranslation();
return (
- {t("mas.scope.mas_admin")}
+
+ {t("mas.scope.mas_admin")}
+
);
};
diff --git a/frontend/src/routes/emails.$id.in-use.tsx b/frontend/src/routes/emails.$id.in-use.tsx
index a4ae1c752..5f6aa44db 100644
--- a/frontend/src/routes/emails.$id.in-use.tsx
+++ b/frontend/src/routes/emails.$id.in-use.tsx
@@ -6,7 +6,7 @@
import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
import IconArrowLeft from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";
-import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
import { useTranslation } from "react-i18next";
import { ButtonLink } from "../components/ButtonLink";
import Layout from "../components/Layout";
@@ -41,7 +41,7 @@ function EmailInUse(): React.ReactElement {
return (
{
return (
diff --git a/frontend/src/routes/reset-cross-signing.tsx b/frontend/src/routes/reset-cross-signing.tsx
index 8a5a1c800..e17a1cf32 100644
--- a/frontend/src/routes/reset-cross-signing.tsx
+++ b/frontend/src/routes/reset-cross-signing.tsx
@@ -8,7 +8,7 @@ import {
Outlet,
createFileRoute,
} from "@tanstack/react-router";
-import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
import { Button, Text } from "@vector-im/compound-web";
import * as v from "valibot";
@@ -37,7 +37,7 @@ function ResetCrossSigningError({
return (
diff --git a/templates/components/icon.html b/templates/components/icon.html
index 6321fd8fa..7781b2f87 100644
--- a/templates/components/icon.html
+++ b/templates/components/icon.html
@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
{# Regenerate with the following shell script:
-for i in frontend/node_modules/@vector-im/compound-design-tokens/assets/web/icons/*.svg; do
+for i in frontend/node_modules/@vector-im/compound-design-tokens/icons/*.svg; do
NAME=$(basename "$i" | sed 's/\.svg//' | tr '-' '_')
CONTENT=$(cat "$i")
cat <
-
-
+
{% endmacro %}
{% macro arrow_down() %}
-
-
-
+
{% endmacro %}
{% macro arrow_left() %}
-
-
-
+
{% endmacro %}
{% macro arrow_right() %}
-
-
-
+
{% endmacro %}
{% macro arrow_up_right() %}
-
-
-
+
{% endmacro %}
{% macro arrow_up() %}
-
-
-
+
+{% endmacro %}
+
+{% macro ask_to_join_solid() %}
+
+{% endmacro %}
+
+{% macro ask_to_join() %}
+
{% endmacro %}
{% macro attachment() %}
-
-
-
+
+{% endmacro %}
+
+{% macro audio() %}
+
{% endmacro %}
{% macro block() %}
-
-
-
+
{% endmacro %}
{% macro bold() %}
-
-
-
+
+{% endmacro %}
+
+{% macro calendar() %}
+
{% endmacro %}
{% macro chart() %}
-
-
-
+
{% endmacro %}
{% macro chat_new() %}
-
-
-
-
+
{% endmacro %}
{% macro chat_problem() %}
-
-
-
-
+
{% endmacro %}
{% macro chat_solid() %}
-
-
-
+
{% endmacro %}
{% macro chat() %}
-
-
-
+
{% endmacro %}
{% macro check_circle_solid() %}
-
-
-
+
{% endmacro %}
{% macro check_circle() %}
-
-
-
+
{% endmacro %}
{% macro check() %}
-
-
-
+
{% endmacro %}
{% macro chevron_down() %}
-
-
-
+
{% endmacro %}
{% macro chevron_left() %}
-
-
-
+
{% endmacro %}
{% macro chevron_right() %}
-
-
-
+
{% endmacro %}
{% macro chevron_up_down() %}
-
-
-
+
{% endmacro %}
{% macro chevron_up() %}
-
-
-
+
{% endmacro %}
{% macro circle() %}
-
-
-
+
{% endmacro %}
{% macro close() %}
-
-
-
+
{% endmacro %}
{% macro cloud_solid() %}
-
-
-
+
{% endmacro %}
{% macro cloud() %}
-
-
-
+
{% endmacro %}
{% macro code() %}
-
-
-
+
{% endmacro %}
{% macro collapse() %}
-
-
-
+
{% endmacro %}
{% macro company() %}
-
-
-
+
{% endmacro %}
{% macro compose() %}
-
-
-
-
-
+
{% endmacro %}
{% macro computer() %}
-
-
-
+
{% endmacro %}
{% macro copy() %}
-
-
-
-
+
{% endmacro %}
{% macro dark_mode() %}
-
-
-
+
{% endmacro %}
{% macro delete() %}
-
-
-
+
{% endmacro %}
{% macro devices() %}
-
-
-
+
+{% endmacro %}
+
+{% macro dial_pad() %}
+
{% endmacro %}
{% macro document() %}
-
-
-
+
+{% endmacro %}
+
+{% macro download_ios() %}
+
{% endmacro %}
{% macro download() %}
-
-
-
+
{% endmacro %}
{% macro drag_grid() %}
-
-
-
+
{% endmacro %}
{% macro drag_list() %}
-
-
-
+
{% endmacro %}
{% macro edit_solid() %}
-
-
-
-
-
-
-
+
{% endmacro %}
{% macro edit() %}
-
-
-
+
{% endmacro %}
{% macro email_solid() %}
-
-
-
+
{% endmacro %}
{% macro email() %}
-
-
-
+
{% endmacro %}
{% macro end_call() %}
-
-
-
+
+{% endmacro %}
+
+{% macro error_solid() %}
+
{% endmacro %}
{% macro error() %}
-
-
-
+
{% endmacro %}
{% macro expand() %}
-
-
-
+
+{% endmacro %}
+
+{% macro explore() %}
+
{% endmacro %}
{% macro export_archive() %}
-
-
-
+
+{% endmacro %}
+
+{% macro extensions_solid() %}
+
{% endmacro %}
{% macro extensions() %}
-
-
-
+
{% endmacro %}
{% macro favourite_solid() %}
-
-
-
+
{% endmacro %}
{% macro favourite() %}
-
-
-
+
{% endmacro %}
{% macro file_error() %}
-
-
-
-
+
{% endmacro %}
{% macro files() %}
-
-
-
+
{% endmacro %}
{% macro filter() %}
-
-
-
+
{% endmacro %}
{% macro forward() %}
-
-
-
+
{% endmacro %}
{% macro grid() %}
-
-
-
+
+{% endmacro %}
+
+{% macro group() %}
+
+{% endmacro %}
+
+{% macro headphones_off_solid() %}
+
+{% endmacro %}
+
+{% macro headphones_solid() %}
+
{% endmacro %}
{% macro help_solid() %}
-
-
-
+
{% endmacro %}
{% macro help() %}
-
-
-
-
+
{% endmacro %}
{% macro history() %}
-
-
-
-
+
{% endmacro %}
{% macro home_solid() %}
-
-
-
+
{% endmacro %}
{% macro home() %}
-
-
-
+
{% endmacro %}
{% macro host() %}
-
-
-
-
+
{% endmacro %}
{% macro image_error() %}
-
-
-
-
+
{% endmacro %}
{% macro image() %}
-
-
-
-
+
{% endmacro %}
{% macro indent_decrease() %}
-
-
-
+
{% endmacro %}
{% macro indent_increase() %}
-
-
-
+
{% endmacro %}
{% macro info_solid() %}
-
-
-
+
{% endmacro %}
{% macro info() %}
-
-
-
-
+
{% endmacro %}
{% macro inline_code() %}
-
-
-
+
{% endmacro %}
{% macro italic() %}
-
-
-
+
{% endmacro %}
{% macro key_off_solid() %}
-
-
-
+
{% endmacro %}
{% macro key_off() %}
-
-
-
-
+
{% endmacro %}
{% macro key_solid() %}
-
-
-
+
{% endmacro %}
{% macro key() %}
-
-
-
+
{% endmacro %}
{% macro keyboard() %}
-
-
-
-
+
{% endmacro %}
{% macro labs() %}
-
-
-
-
-
+
{% endmacro %}
{% macro leave() %}
-
-
-
-
+
{% endmacro %}
{% macro link() %}
-
-
-
+
+{% endmacro %}
+
+{% macro linux() %}
+
{% endmacro %}
{% macro list_bulleted() %}
-
-
-
+
{% endmacro %}
{% macro list_numbered() %}
-
-
-
+
+{% endmacro %}
+
+{% macro list_view() %}
+
{% endmacro %}
{% macro location_navigator_centred() %}
-
-
-
+
{% endmacro %}
{% macro location_navigator() %}
-
-
-
+
{% endmacro %}
{% macro location_pin_solid() %}
-
-
-
+
{% endmacro %}
{% macro location_pin() %}
-
-
-
+
{% endmacro %}
{% macro lock_off() %}
-
-
-
+
{% endmacro %}
{% macro lock_solid() %}
-
-
-
+
{% endmacro %}
{% macro lock() %}
-
-
-
+
+{% endmacro %}
+
+{% macro mac() %}
+
+{% endmacro %}
+
+{% macro mark_as_read() %}
+
+{% endmacro %}
+
+{% macro mark_as_unread() %}
+
+{% endmacro %}
+
+{% macro mark_threads_as_read() %}
+
{% endmacro %}
{% macro marker_read_receipts() %}
-
-
-
-
+
{% endmacro %}
{% macro mention() %}
-
-
-
+
{% endmacro %}
{% macro menu() %}
-
-
-
+
{% endmacro %}
{% macro mic_off_solid() %}
-
-
-
+
{% endmacro %}
{% macro mic_off() %}
-
-
-
-
+
{% endmacro %}
{% macro mic_on_solid() %}
-
-
-
-
+
{% endmacro %}
{% macro mic_on() %}
-
-
-
-
+
+{% endmacro %}
+
+{% macro minus() %}
+
{% endmacro %}
{% macro mobile() %}
-
-
-
+
{% endmacro %}
{% macro notifications_off_solid() %}
-
-
-
-
+
{% endmacro %}
{% macro notifications_off() %}
-
-
-
-
+
{% endmacro %}
{% macro notifications_solid() %}
-
-
-
+
{% endmacro %}
{% macro notifications() %}
-
-
-
+
{% endmacro %}
{% macro offline() %}
-
-
-
+
{% endmacro %}
{% macro overflow_horizontal() %}
-
-
-
+
{% endmacro %}
{% macro overflow_vertical() %}
-
-
-
+
{% endmacro %}
{% macro pause_solid() %}
-
-
-
+
{% endmacro %}
{% macro pause() %}
-
-
-
+
{% endmacro %}
{% macro pin_solid() %}
-
-
-
+
{% endmacro %}
{% macro pin() %}
-
-
-
+
{% endmacro %}
{% macro play_solid() %}
-
-
-
+
{% endmacro %}
{% macro play() %}
-
-
-
+
{% endmacro %}
{% macro plus() %}
-
-
-
+
{% endmacro %}
{% macro polls_end() %}
-
-
-
-
+
{% endmacro %}
{% macro polls() %}
-
-
-
+
{% endmacro %}
{% macro pop_out() %}
-
-
-
-
+
{% endmacro %}
{% macro preferences() %}
-
-
-
+
+{% endmacro %}
+
+{% macro presence_outline_8x8() %}
+
+{% endmacro %}
+
+{% macro presence_solid_8x8() %}
+
+{% endmacro %}
+
+{% macro presence_strikethrough_8x8() %}
+
{% endmacro %}
{% macro public() %}
-
-
-
+
{% endmacro %}
{% macro qr_code() %}
-
-
-
-
-
+
{% endmacro %}
{% macro quote() %}
-
-
-
+
+{% endmacro %}
+
+{% macro raised_hand_solid() %}
+
{% endmacro %}
{% macro reaction_add() %}
-
-
-
-
+
+{% endmacro %}
+
+{% macro reaction_solid() %}
+
{% endmacro %}
{% macro reaction() %}
-
-
-
-
+
{% endmacro %}
{% macro reply() %}
-
-
-
+
{% endmacro %}
{% macro restart() %}
-
-
-
+
+{% endmacro %}
+
+{% macro room() %}
+
{% endmacro %}
{% macro search() %}
-
-
-
+
{% endmacro %}
{% macro send_solid() %}
-
-
-
+
{% endmacro %}
{% macro send() %}
-
-
-
+
{% endmacro %}
{% macro settings_solid() %}
-
-
-
+
{% endmacro %}
{% macro settings() %}
-
-
-
-
+
{% endmacro %}
{% macro share_android() %}
-
-
-
+
{% endmacro %}
{% macro share_ios() %}
-
-
-
-
+
{% endmacro %}
{% macro share_screen_solid() %}
-
-
-
+
{% endmacro %}
{% macro share_screen() %}
-
-
-
-
+
{% endmacro %}
{% macro share() %}
-
-
-
+
{% endmacro %}
{% macro sidebar() %}
-
-
-
+
{% endmacro %}
{% macro sign_out() %}
-
-
-
+
{% endmacro %}
{% macro spinner() %}
-
-
-
+
+{% endmacro %}
+
+{% macro spotlight_view() %}
+
{% endmacro %}
{% macro spotlight() %}
-
-
-
+
{% endmacro %}
{% macro strikethrough() %}
-
-
-
+
{% endmacro %}
{% macro switch_camera_solid() %}
-
-
-
-
+
+{% endmacro %}
+
+{% macro take_photo_solid() %}
+
{% endmacro %}
{% macro take_photo() %}
-
-
-
+
{% endmacro %}
{% macro text_formatting() %}
-
-
-
+
{% endmacro %}
{% macro threads_solid() %}
-
-
-
+
{% endmacro %}
{% macro threads() %}
-
-
-
-
+
{% endmacro %}
{% macro time() %}
-
-
-
-
+
{% endmacro %}
{% macro underline() %}
-
-
-
+
{% endmacro %}
{% macro unknown_solid() %}
-
-
-
+
{% endmacro %}
{% macro unknown() %}
-
-
-
-
+
+{% endmacro %}
+
+{% macro unpin() %}
+
{% endmacro %}
{% macro user_add_solid() %}
-
-
-
+
{% endmacro %}
{% macro user_add() %}
-
-
-
+
{% endmacro %}
{% macro user_profile_solid() %}
-
-
-
-
+
{% endmacro %}
{% macro user_profile() %}
-
-
-
-
-
+
{% endmacro %}
{% macro user_solid() %}
-
-
-
+
{% endmacro %}
{% macro user() %}
-
-
-
+
{% endmacro %}
{% macro verified() %}
-
-
-
+
{% endmacro %}
{% macro video_call_declined_solid() %}
-
-
-
+
{% endmacro %}
{% macro video_call_missed_solid() %}
-
-
-
+
{% endmacro %}
{% macro video_call_off_solid() %}
-
-
-
+
{% endmacro %}
{% macro video_call_off() %}
-
-
-
+
{% endmacro %}
{% macro video_call_solid() %}
-
-
-
+
{% endmacro %}
{% macro video_call() %}
-
-
-
+
{% endmacro %}
{% macro visibility_off() %}
-
-
-
+
{% endmacro %}
{% macro visibility_on() %}
-
-
-
+
+{% endmacro %}
+
+{% macro voice_call_solid() %}
+
{% endmacro %}
{% macro voice_call() %}
-
-
-
+
{% endmacro %}
{% macro volume_off_solid() %}
-
-
-
+
{% endmacro %}
{% macro volume_off() %}
-
-
-
+
{% endmacro %}
{% macro volume_on_solid() %}
-
-
-
-
+
{% endmacro %}
{% macro volume_on() %}
-
-
-
-
+
{% endmacro %}
{% macro warning() %}
-
-
-
-
+
{% endmacro %}
{% macro web_browser() %}
-
-
-
+
+{% endmacro %}
+
+{% macro windows() %}
+
{% endmacro %}
diff --git a/templates/components/scope.html b/templates/components/scope.html
index 2b0e1606d..2f0ae107c 100644
--- a/templates/components/scope.html
+++ b/templates/components/scope.html
@@ -18,9 +18,9 @@ Please see LICENSE in the repository root for full details.
{{ icon.chat() }}{{ _("mas.scope.view_messages") }}
{{ icon.send() }}{{ _("mas.scope.send_messages") }}
{% elif scope == "urn:synapse:admin:*" %}
- {{ icon.error() }}{{ _("mas.scope.synapse_admin") }}
+ {{ icon.error_solid() }}{{ _("mas.scope.synapse_admin") }}
{% elif scope == "urn:mas:admin" %}
- {{ icon.error() }}{{ _("mas.scope.mas_admin") }}
+ {{ icon.error_solid() }}{{ _("mas.scope.mas_admin") }}
{% elif scope is startingwith("urn:matrix:org.matrix.msc2967.client:device:") %}
{# We hide this scope #}
{% else %}
diff --git a/templates/pages/error.html b/templates/pages/error.html
index bc9b1e1ca..d0785637a 100644
--- a/templates/pages/error.html
+++ b/templates/pages/error.html
@@ -15,7 +15,7 @@ Please see LICENSE in the repository root for full details.
- {{ icon.error() }}
+ {{ icon.error_solid() }}