🎨

packages/frontend-shared/themes/_dark.json5

@@ -53,11 +53,13 @@
 		infoFg: '#fff',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
-		switchBg: 'rgba(255, 255, 255, 0.15)',
+		folderHeaderBg: 'rgba(255, 255, 255, 0.05)',
-		buttonBg: 'rgba(255, 255, 255, 0.05)',
+		folderHeaderHoverBg: 'rgba(255, 255, 255, 0.1)',
-		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+		buttonBg: ':lighten<5<@panel',
+		buttonHoverBg: ':lighten<10<@panel',
 		buttonGradateA: '@accent',
 		buttonGradateB: ':hue<20<@accent',
+		switchBg: 'rgba(255, 255, 255, 0.15)',
 		switchOffBg: 'rgba(255, 255, 255, 0.1)',
 		switchOffFg: ':alpha<0.8<@fg',
 		switchOnBg: '@accentedBg',

packages/frontend-shared/themes/_light.json5

@@ -53,11 +53,13 @@
 		infoFg: '#72818a',
 		infoWarnBg: '#fff0db',
 		infoWarnFg: '#8f6e31',
-		switchBg: 'rgba(0, 0, 0, 0.15)',
+		folderHeaderBg: 'rgba(0, 0, 0, 0.05)',
-		buttonBg: 'rgba(0, 0, 0, 0.05)',
+		folderHeaderHoverBg: 'rgba(0, 0, 0, 0.1)',
-		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
+		buttonBg: ':darken<5<@panel',
+		buttonHoverBg: ':darken<10<@panel',
 		buttonGradateA: '@accent',
 		buttonGradateB: ':hue<20<@accent',
+		switchBg: 'rgba(0, 0, 0, 0.15)',
 		switchOffBg: 'rgba(0, 0, 0, 0.1)',
 		switchOffFg: '@panel',
 		switchOnBg: '@accent',

packages/frontend-shared/themes/d-astro.json5

@@ -25,7 +25,6 @@
 		mention: '#ffd152',
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		success: '#86b300',
-		buttonBg: 'rgba(255, 255, 255, 0.05)',
 		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '#fb5d38',
@@ -42,7 +41,6 @@
 		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
-		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
 		buttonGradateA: '@accent',
 		buttonGradateB: ':hue<-20<@accent',
 		driveFolderBg: ':alpha<0.3<@accent',

packages/frontend-shared/themes/d-u0.json5

@@ -38,7 +38,6 @@
 		mention: '@accent',
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		success: '#86b300',
-		buttonBg: 'rgba(255, 255, 255, 0.05)',
 		switchBg: 'rgba(255, 255, 255, 0.15)',
 		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
@@ -61,7 +60,6 @@
 		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@indicator',
 		accentLighten: ':lighten<10<@accent',
-		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',
 		fgTransparent: ':alpha<0.5<@fg',

packages/frontend-shared/themes/l-vivid.json5

@@ -28,7 +28,6 @@
 		mention: '@accent',
 		modalBg: 'rgba(0, 0, 0, 0.3)',
 		success: '#86b300',
-		buttonBg: 'rgba(0, 0, 0, 0.05)',
 		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '@mention',
@@ -45,7 +44,6 @@
 		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
-		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':darken<3<@fg',
 		fgTransparent: ':alpha<0.5<@fg',

packages/frontend/src/components/MkFolder.vue

@@ -139,7 +139,7 @@ onMounted(() => {
 	width: 100%;
 	box-sizing: border-box;
 	padding: 9px 12px 9px 12px;
-	background: var(--buttonBg);
+	background: var(--folderHeaderBg);
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));
 	border-radius: 6px;
@@ -147,7 +147,7 @@ onMounted(() => {
 
 	&:hover {
 		text-decoration: none;
-		background: var(--buttonHoverBg);
+		background: var(--folderHeaderHoverBg);
 	}
 
 	&:focus-within {
@@ -156,7 +156,7 @@ onMounted(() => {
 
 	&.active {
 		color: var(--accent);
-		background: var(--buttonHoverBg);
+		background: var(--folderHeaderHoverBg);
 	}
 
 	&.opened {
@@ -233,7 +233,7 @@ onMounted(() => {
 	z-index: 1;
 	bottom: var(--stickyBottom, 0px);
 	left: 0;
-	padding: 9px 12px;
+	padding: 12px;
 	background: var(--acrylicBg);
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));

packages/frontend/src/components/form/link.vue

@@ -51,18 +51,18 @@ const props = defineProps<{
 	width: 100%;
 	box-sizing: border-box;
 	padding: 10px 14px;
-	background: var(--buttonBg);
+	background: var(--folderHeaderBg);
 	border-radius: 6px;
 	font-size: 0.9em;
 
 	&:hover {
 		text-decoration: none;
-		background: var(--buttonHoverBg);
+		background: var(--folderHeaderHoverBg);
 	}
 
 	&.active {
 		color: var(--accent);
-		background: var(--buttonHoverBg);
+		background: var(--folderHeaderHoverBg);
 	}
 }