The great flattification

svelte/src/filesystem/Filesystem.svelte

@@ -289,12 +289,12 @@ const share = () => {
 			{#each state.parents as parent}
 				<a
 					href={state.path_root+parent.path}
-					class="breadcrumb breadcrumb_button"
+					class="breadcrumb button"
 					on:click|preventDefault={() => {navigate(parent.path, true)}}>
 					{parent.name}
 				</a> /
 			{/each}
-			<div class="breadcrumb breadcrumb_last">{state.base.name}</div>
+			<div class="breadcrumb button button_highlight">{state.base.name}</div>
 		</div>
 	</div>
 	<div class="list_navigator"></div>
@@ -397,7 +397,7 @@ const share = () => {
 	bottom: 0;
 	left: 0;
 	overflow: hidden;
-	background-color: var(--layer_2_color);
+	background: var(--body_background);
 }
 
 /* Headerbar (row 1) */
@@ -437,26 +437,10 @@ const share = () => {
 	border-radius: 1em;
 	min-width: 1em;
 	text-align: center;
-	line-height: 1.2em;
-	padding: 3px 8px;
+	padding: 4px 8px;
 	margin: 2px 6px;
 	word-break: break-all;
 }
-.breadcrumb_button {
-	cursor: pointer;
-	text-decoration: none;
-	color: var(--text_color);
-	background-color: var(--layer_3_color);
-	transition: 0.2s background-color, 0.2s color;
-}
-.breadcrumb_button:hover, .breadcrumb_button:focus, .breadcrumb_button:active {
-	color: var(--input_text_color);
-	background-color: var(--input_color);
-}
-.breadcrumb_last {
-	color: var(--highlight_text_color);
-	background-color: var(--highlight_color);
-}
 
 .button_home::after {
 	content: "pixeldrain";
@@ -526,7 +510,6 @@ const share = () => {
 	padding: 0;
 	text-align: left;
 	transition: left 0.5s;
-	background-color: var(--layer_2_color);
 }
 .toolbar.toolbar_visible { left: 0; }
 .file_viewer > .file_viewer_window > .file_viewer_file_preview.toolbar_visible { left: 8em; }

svelte/src/filesystem/Sharebar.svelte

@@ -72,8 +72,7 @@ const share_tumblr = () => {
 	overflow-y: scroll;
 	overflow-x: hidden;
 	float: left;
-	background-color: var(--layer_1_color);
-	box-shadow: inset 1px 1px 5px var(--shadow_color);
+	background: var(--shaded_background);
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -188,6 +188,8 @@ const toggle_select = () => {
 	margin: 16px 0 0 0;
 	padding: 0;
 	justify-content: center;
+	background: var(--shaded_background);
+	border-radius: 6px;
 }
 .toolbar > * { flex: 0 0 auto; }
 .toolbar_spacer { flex: 1 1 auto; }

svelte/src/filesystem/filemanager/FileUploader.svelte

@@ -200,7 +200,7 @@ const paste = (e) => {
 		width: 100%;
 		margin: 6px 0 0 0;
 		padding: 0;
-		background-color: var(--layer_2_color);
+		background: var(--body_color);
 		box-shadow: 1px 1px 5px var(--shadow_color);
 	}
 

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -75,14 +75,14 @@ const node_icon = node => {
 	overflow: hidden;
 	border-radius: 8px;
 	box-shadow: 1px 1px 6px 0 var(--shadow_color);
-	background-color: var(--layer_3_color);
+	background: var(--input_background);
 	text-align: center;
 	line-height: 1.2em;
 	display: inline-block;
 	text-overflow: ellipsis;
 	text-decoration: none;
 	vertical-align: top;
-	color: var(--text_color);
+	color: var(--body_text_color);
 }
 .file:hover {
 	box-shadow: 0 0 2px 2px var(--highlight_color);

svelte/src/filesystem/filemanager/ListView.svelte

@@ -76,7 +76,7 @@ const node_icon = node => {
 	overflow: hidden;
 	margin: 8px auto 16px auto;
 	text-align: left;
-	background-color: var(--layer_2_color);
+	background: var(--body_color);
 	box-shadow: 1px 1px 6px var(--shadow_color);
 	border-collapse: collapse;
 	border-radius: 8px;
@@ -97,11 +97,11 @@ const node_icon = node => {
 	padding: 6px;
 }
 .node:not(:last-child) {
-	border-bottom: 1px solid var(--layer_2_color_border);
+	border-bottom: 1px solid var(--separator);
 }
 .node:hover:not(.node_selected) {
-	background-color: var(--input_color_dark);
-	color: var(--input_text_color);
+	background: var(--input_background);
+	color: var(--input_text);
 	text-decoration: none;
 }
 .node.node_selected {