upd: implement radius setting

to keep things manageable i merged a lot of one off values into just a
handful of common sizes, so some parts of the ui will look different than
upstream even with the "Misskey" rounding mode

packages/frontend/src/pages/settings/apps.vue

@@ -93,7 +93,7 @@ definePageMetadata({
 	margin: 0 12px 0 0;
 	width: 50px;
 	height: 50px;
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 }
 
 .appBody {

packages/frontend/src/pages/settings/drive-cleaner.vue

@@ -152,7 +152,7 @@ definePageMetadata({
 	height: 12px;
 	background: rgba(0, 0, 0, 0.1);
 	overflow: clip;
-	border-radius: 999px;
+	border-radius: var(--radius-ellipse);
 }
 
 .meterValue {

packages/frontend/src/pages/settings/drive.vue

@@ -148,12 +148,12 @@ definePageMetadata({
 .meter {
 	height: 10px;
 	background: rgba(0, 0, 0, 0.1);
-	border-radius: 999px;
+	border-radius: var(--radius-ellipse);
 	overflow: clip;
 }
 
 .meterValue {
 	height: 100%;
-	border-radius: 999px;
+	border-radius: var(--radius-ellipse);
 }
 </style>

packages/frontend/src/pages/settings/profile.vue

@@ -340,7 +340,7 @@ definePageMetadata({
 	background-size: cover;
 	background-position: center;
 	border: solid 1px var(--divider);
-	border-radius: 10px;
+	border-radius: var(--radius);
 	overflow: clip;
 }
 

packages/frontend/src/pages/settings/reaction.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div class="_gaps_m">
 	<FromSlot>
 		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
-		<div v-panel style="border-radius: 6px;">
+		<div v-panel style="border-radius: var(--radius-sm);">
 			<Sortable v-model="reactions" :class="$style.reactions" :itemKey="item => item" :animation="150" :delay="100" :delayOnTouchOnly="true">
 				<template #item="{element}">
 					<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">

packages/frontend/src/pages/settings/theme.vue

@@ -172,7 +172,7 @@ definePageMetadata({
 
 <style lang="scss" scoped>
 .rfqxtzch {
-	border-radius: 6px;
+	border-radius: var(--radius-sm);
 
 	> .toggle {
 		position: relative;
@@ -246,7 +246,7 @@ definePageMetadata({
 				background-color: #E8CDA5;
 				opacity: 0;
 				transition: opacity 200ms ease-in-out !important;
-				border-radius: 100%;
+				border-radius: var(--radius-full);
 			}
 
 			.crater--1 {