transfem-org · Insert5StarName · Nov 1, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -507,6 +507,7 @@ createAccount: "Create account"
 existingAccount: "Existing account"
 regenerate: "Regenerate"
 fontSize: "Font size"
+cornerRadius: "Corner roundness"
 mediaListWithOneImageAppearance: "Height of media lists with one image only"
 limitTo: "Limit to {x}"
 noFollowRequests: "You don't have any pending follow requests"

diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -510,6 +510,7 @@ export interface Locale {
     "existingAccount": string;
     "regenerate": string;
     "fontSize": string;
+    "cornerRadius": string;
     "mediaListWithOneImageAppearance": string;
     "limitTo": string;
     "noFollowRequests": string;

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -507,6 +507,7 @@ createAccount: "アカウントを作成"
 existingAccount: "既存のアカウント"
 regenerate: "再生成"
 fontSize: "フォントサイズ"
+cornerRadius: "コーナーの丸み"
 mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
 limitTo: "{x}を上限に"
 noFollowRequests: "フォロー申請はありません"

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
@@ -132,6 +132,11 @@
 		document.documentElement.classList.add('f-' + fontSize);
 	}
 
+	const cornerRadius = localStorage.getItem('cornerRadius');
+	if (cornerRadius) {
+		document.documentElement.classList.add(`radius-${cornerRadius}`);
+	}
+
 	const useSystemFont = localStorage.getItem('useSystemFont');
 	if (useSystemFont) {
 		document.documentElement.classList.add('useSystemFont');
@@ -228,7 +233,7 @@
 		}
 
 		button {
-			border-radius: 4px;
+			border-radius: 999px;
 			padding: 0px 12px 0px 12px;
 			border: none;
 			cursor: pointer;
@@ -296,7 +301,7 @@
 			margin-bottom: 2rem;
 			padding: 0.5rem 1rem;
 			width: 40rem;
-			border-radius: 5px;
+			border-radius: 10px;
 			justify-content: center;
 			margin: auto;
 		}

diff --git a/packages/backend/src/server/web/error.css b/packages/backend/src/server/web/error.css
@@ -24,7 +24,7 @@ html {
 }
 
 button {
-    border-radius: 4px;
+    border-radius: 999px;
     padding: 0px 12px 0px 12px;
     border: none;
     cursor: pointer;
@@ -93,7 +93,7 @@ code {
     background: #333;
     padding: 0.5rem 1rem;
     max-width: 40rem;
-    border-radius: 5px;
+    border-radius: 10px;
     justify-content: center;
     margin: auto;
     white-space: pre-wrap;

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
@@ -84,7 +84,7 @@ function resolve() {
 			box-sizing: border-box;
 			align-items: center;
 			padding: 14px;
-			border-radius: 5px;
+			border-radius: var(--radius-sm);
 			--c: rgb(255 196 0 / 15%);
 			background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
 			background-size: 16px 16px;

diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
@@ -123,7 +123,7 @@ onMounted(() => {
 	width: 58px;
 	height: 58px;
 	padding: 6px;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	box-sizing: border-box;
 	pointer-events: none;
 	user-select: none;
@@ -190,7 +190,7 @@ onMounted(() => {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	box-shadow: 0 1px 0px #ffffff88 inset;
 }
 

diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue
@@ -125,6 +125,6 @@ function openPostForm() {
 
 .postForm {
 	background: var(--bg);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 }
 </style>
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
@@ -433,7 +433,7 @@ onBeforeUnmount(() => {
 	max-width: 28px;
 	max-height: 28px;
 	margin: 0 8px 0 0;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 }
 
 .userName {

diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
@@ -126,7 +126,7 @@ function onMousedown(evt: MouseEvent): void {
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
-	border-radius: 5px;
+	border-radius: var(--radius-xs);
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
@@ -154,7 +154,7 @@ function onMousedown(evt: MouseEvent): void {
 	}
 
 	&.rounded {
-		border-radius: 4px;
+		border-radius: var(--radius-ellipse);
 	}
 
 	&.primary {
@@ -264,7 +264,7 @@ function onMousedown(evt: MouseEvent): void {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 	pointer-events: none;
 }
@@ -273,7 +273,7 @@ function onMousedown(evt: MouseEvent): void {
 	position: absolute;
 	width: 2px;
 	height: 2px;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	background: rgba(0, 0, 0, 0.1);
 	opacity: 1;
 	transform: scale(1);

diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -73,7 +73,7 @@ async function onClick() {
 	padding: 0;
 	height: 31px;
 	font-size: 16px;
-	border-radius: 5px;
+	border-radius: var(--radius-xl);
 	background: #fff;
 
 	&.full {
@@ -95,7 +95,7 @@ async function onClick() {
 			bottom: -5px;
 			left: -5px;
 			border: 2px solid var(--focus);
-			border-radius: 5px;
+			border-radius: var(--radius-xl);
 		}
 	}
 

diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
@@ -100,7 +100,7 @@ const bannerStyle = computed(() => {
 			padding: 8px 12px;
 			font-size: 80%;
 			background: rgba(0, 0, 0, 0.7);
-			border-radius: 5px;
+			border-radius: var(--radius-sm);
 			color: #fff;
 		}
 
@@ -111,7 +111,7 @@ const bannerStyle = computed(() => {
 			left: 16px;
 			background: rgba(0, 0, 0, 0.7);
 			color: var(--warn);
-			border-radius: 5px;
+			border-radius: var(--radius-sm);
 			font-weight: bold;
 			font-size: 1em;
 			padding: 4px 7px;

diff --git a/packages/frontend/src/components/MkChartLegend.vue b/packages/frontend/src/components/MkChartLegend.vue
@@ -55,7 +55,7 @@ defineExpose({
 			font-size: 85%;
 			padding: 4px 12px 4px 8px;
 			border: solid 1px var(--divider);
-			border-radius: 4px;
+			border-radius: var(--radius-ellipse);
 
 			&:hover {
 				border-color: var(--inputBorderHover);
@@ -70,7 +70,7 @@ defineExpose({
 				display: inline-block;
 				width: 12px;
 				height: 12px;
-				border-radius: 100%;
+				border-radius: var(--radius-full);
 				vertical-align: -10%;
 			}
 		}

diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue
@@ -77,7 +77,7 @@ watch(() => props.lang, (to) => {
 	& :deep(.shiki) {
 		padding: 12px;
 		margin: 0;
-		border-radius: 6px;
+		border-radius: var(--radius-sm);
 		min-height: 130px;
 		pointer-events: none;
 		min-width: calc(100% - 24px);

diff --git a/packages/frontend/src/components/MkCodeEditor.vue b/packages/frontend/src/components/MkCodeEditor.vue
@@ -129,7 +129,7 @@ watch(v, () => {
 
 .focused.codeEditorRoot {
 	border-color: var(--accent) !important;
-	border-radius: 6px;
+	border-radius: var(--radius-sm);
 }
 
 .codeEditorScroller {

diff --git a/packages/frontend/src/components/MkColorInput.vue b/packages/frontend/src/components/MkColorInput.vue
@@ -102,7 +102,7 @@ const onInput = (ev: KeyboardEvent) => {
 	color: var(--fg);
 	background: var(--panel);
 	border: solid 1px var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;

diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
@@ -223,7 +223,7 @@ onUnmounted(() => {
 				background: var(--panel);
 				padding: 6px 10px;
 				font-size: 0.8em;
-				border-radius: 4px;
+				border-radius: var(--radius-ellipse);
 				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 			}
 

diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
@@ -197,7 +197,7 @@ onBeforeUnmount(() => {
 	box-sizing: border-box;
 	text-align: center;
 	background: var(--panel);
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 }
 
 .icon {

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
@@ -107,7 +107,7 @@ function onDragend() {
 	position: relative;
 	padding: 8px 0 0 0;
 	min-height: 180px;
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	cursor: pointer;
 
 	&:hover {

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
@@ -289,7 +289,7 @@ function onContextmenu(ev: MouseEvent) {
 	padding: 8px;
 	height: 64px;
 	background: var(--driveFolderBg);
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	cursor: pointer;
 
 	&.draghover {
@@ -302,7 +302,7 @@ function onContextmenu(ev: MouseEvent) {
 			bottom: -4px;
 			left: -4px;
 			border: 2px dashed var(--focus);
-			border-radius: 4px;
+			border-radius: var(--radius-xs);
 		}
 	}
 }

diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -63,7 +63,7 @@ const isThumbnailAvailable = computed(() => {
 	position: relative;
 	display: flex;
 	background: var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 }
 

diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -594,7 +594,7 @@ defineExpose({
 					width: var(--eachSize);
 					height: var(--eachSize);
 					contain: strict;
-					border-radius: 4px;
+					border-radius: var(--radius-xs);
 					font-size: 24px;
 
 					&:focus-visible {

diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -74,7 +74,7 @@ function opening() {
 
 <style lang="scss" module>
 .drawer {
-	border-radius: 24px;
+	border-radius: var(--radius-lg);
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }

diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue
@@ -108,7 +108,7 @@ const props = defineProps<{
 				padding: 2px 4px;
 				background: #ff0000bf;
 				color: #fff;
-				border-radius: 4px;
+				border-radius: var(--radius-xs);
 				font-size: 85%;
 				animation: sensitive-blink 1s infinite;
 			}

diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
@@ -139,7 +139,7 @@ onMounted(() => {
 	background: var(--buttonBg);
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	transition: border-radius 0.3s;
 
 	&:hover {
@@ -153,7 +153,7 @@ onMounted(() => {
 	}
 
 	&.opened {
-		border-radius: 6px 6px 0 0;
+		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 	}
 }
 
@@ -207,7 +207,7 @@ onMounted(() => {
 
 .body {
 	background: var(--panel);
-	border-radius: 0 0 6px 6px;
+	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
 	container-type: inline-size;
 
 	&.bgSame {

diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
@@ -151,7 +151,7 @@ onBeforeUnmount(() => {
 	padding: 0;
 	height: 31px;
 	font-size: 16px;
-	border-radius: 5px;
+	border-radius: var(--radius-xl);
 	background: #fff;
 
 	&.full {
@@ -179,7 +179,7 @@ onBeforeUnmount(() => {
 			bottom: -5px;
 			left: -5px;
 			border: 2px solid var(--focus);
-			border-radius: 5px;
+			border-radius: var(--radius-xl);
 		}
 	}
 

diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue
@@ -40,7 +40,7 @@ const search = () => {
 	height: 40px;
 	font-size: 16px;
 	border: solid 1px var(--divider);
-	border-radius: 4px 0 0 4px;
+	border-radius: var(--radius-xs) 0 0 var(--radius-xs);
 	-webkit-appearance: textfield;
 }
 
@@ -50,7 +50,7 @@ const search = () => {
 	padding: 0 16px;
 	border: solid 1px var(--divider);
 	border-left: none;
-	border-radius: 0 4px 4px 0;
+	border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
 
 	&:active {
 		box-shadow: 0 2px 4px rgba(#000, 0.15) inset;

diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue
@@ -227,7 +227,7 @@ defineExpose({
 	color: var(--fg);
 	background: var(--panel);
 	border: solid 1px var(--panel);
-	border-radius: 5px;
+	border-radius: var(--radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;