wip: fixed sidebar style; style: removed foreground inverted variable; style: removed icon hover variable; style: removed panels text variable; wip: sidebar link active style

src/App.vue

@@ -2,10 +2,12 @@
 	<div>
 		<div class="app-container">
 			<TheSidebar />
+
 			<div class="content-container">
 				<TheSearchBar />
 				<TheContent />
 			</div>
+
 			<TheDownloadBar />
 		</div>
 

src/components/TheSidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<aside
 		id="sidebar"
-		class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-panels-text"
+		class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-foreground"
 		role="navigation"
 		aria-label="sidebar"
 	>
@@ -15,13 +15,10 @@
 			:aria-label="link.ariaLabel"
 			:to="{ name: link.routerName }"
 			@click.native="activeTablink = link.name"
-			style="transition: all 500ms; color: inherit"
 		>
-			<i class="p-2 text-3xl transition-all duration-500 material-icons side_icon">{{ link.icon }}</i>
+			<!-- style="color: inherit" -->
-			<span
+			<i class="p-2 text-3xl material-icons side_icon">{{ link.icon }}</i>
-				class="ml-5 overflow-hidden capitalize whitespace-no-wrap transition-all duration-75 ease-in-out delay-200 opacity-0 main_tablinks_text"
+			<span class="ml-5 overflow-hidden capitalize whitespace-no-wrap main_tablinks_text" style="letter-spacing: 1.3px">
-				style="letter-spacing: 1.3px"
-			>
 				{{ $t(link.label) }}
 			</span>
 			<span

src/components/downloads/TheDownloadBar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		id="download_tab_container"
-		class="block tab_hidden bg-panels-bg text-panels-text"
+		class="block tab_hidden bg-panels-bg text-foreground"
 		@transitionend="$refs.container.style.transition = ''"
 		ref="container"
 		:data-label="$t('downloads')"

src/components/globals/TheContextMenu.vue

@@ -224,7 +224,7 @@ export default {
 	left: 0;
 	min-width: 100px;
 	border-radius: 7px;
-	background: var(--foreground-inverted);
+	background: var(--secondary-background);
 	box-shadow: 4px 10px 18px 0px hsla(0, 0%, 0%, 0.15);
 	overflow: hidden;
 	z-index: 10000;

src/styles/scss/_sidebar.scss

@@ -2,53 +2,23 @@ $sidebar-timing: 125ms;
 $sidebar-delay: 75ms;
 
 #sidebar {
-	// transition: width $sidebar-timing ease-in-out $sidebar-delay;
-	// z-index: 999;
 	width: 15.625rem;
 	height: 100vh;
 
-	// &:hover {
-	// 	width: 12.5rem;
-	// }
-
 	.main_tablinks {
-		// &.active {
+		@apply text-foreground;
-		// 	@apply bg-primary;
-		// }
 
-		&:hover {
-			// background-color: var(--sidebar-link-bg);
-		}
-	}
-
-	// &:hover {
-	.main_tablinks {
 		&.active,
 		&:hover {
 			background: var(--sidebar-link-bg);
 
 			.side_icon {
-				color: var(--primary-color);
+				@apply text-primary;
 			}
 		}
 	}
 
-	.main_tablinks_text {
-		@apply opacity-100;
-	}
-
-	#theme_togglers {
-		@apply opacity-100;
-	}
-	// }
-
-	#theme_togglers {
-		// opacity: 0;
-		transition: all $sidebar-timing ease-in-out $sidebar-delay;
-	}
-
 	.theme_toggler {
-		// @apply w-6 h-6 rounded-full border border-grayscale-500 cursor-pointer;
 		transition: border 200ms ease-in-out;
 
 		&--active {
@@ -60,7 +30,7 @@ $sidebar-delay: 75ms;
 		}
 
 		&--dark {
-			background: hsl(0, 0%, 8%);
+			@apply bg-grayscale-80;
 		}
 
 		&--purple {

src/styles/scss/base/_base.scss

@@ -16,13 +16,9 @@
 	--main-background: theme('colors.white');
 	--secondary-background: theme('colors.grayscale.930');
 	--foreground: theme('colors.grayscale.200');
-	--foreground-inverted: theme('colors.grayscale.930');
+	--panels-background: hsl(216, 4%, 78%);
-	--panels-background: hsl(210, 3%, 14%);
+	// --sidebar-link-bg: theme('colors.grayscale.600');
-	--panels-text: theme('colors.white');
+	--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
-
-	--sidebar-link-bg: theme('colors.grayscale.240');
-
-	--icon-hover: var(--primary-color);
 
 	--table-bg: theme('colors.white');
 	--table-zebra: theme('colors.grayscale.900');
@@ -33,13 +29,9 @@
 	--main-background: hsl(240, 10%, 8%);
 	--secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg
 	--foreground: theme('colors.grayscale.930'); // primary text + icons in main + search
-	--foreground-inverted: hsl(240, 12%, 16%); // copy link when inactive
 	--panels-background: hsl(240, 15%, 12%); // panel left + right bg
-	--panels-text: theme('colors.white'); // icons + text colors in panels
+	// --sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
-
+	--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
-	--sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
-
-	--icon-hover: hsl(210, 100%, 52%); // e.g. hover color on icons like download-button
 
 	--table-bg: hsl(240, 10%, 8%); // e.g. results table bg 1st row
 	--table-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate
@@ -50,13 +42,9 @@
 	--main-background: hsl(261, 74%, 6%);
 	--secondary-background: hsl(257, 61%, 10%);
 	--foreground: theme('colors.grayscale.930');
-	--foreground-inverted: hsl(258, 62%, 8%);
 	--panels-background: hsl(257, 70%, 9%);
-	--panels-text: theme('colors.white');
+	// --sidebar-link-bg: hsl(257, 70%, 17%);
-
+	--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
-	--sidebar-link-bg: hsl(257, 70%, 17%);
-
-	--icon-hover: hsl(186, 44%, 54%);
 
 	--table-bg: hsl(261, 74%, 6%);
 	--table-zebra: hsl(257, 61%, 10%);

src/styles/scss/globals/_tables.scss

@@ -200,7 +200,7 @@ $table-border-radius: 3px;
 
 			&:hover {
 				i.material-icons {
-					color: var(--icon-hover);
+					@apply text-primary;
 				}
 			}
 		}

tailwind.config.js

@@ -23,9 +23,7 @@ module.exports = {
 				grayscale: {
 					80: 'hsl(0, 0%, 8%)', // Remove maybe
 					100: 'hsl(0, 0%, 10%)',
-					140: 'hsl(0, 0%, 14%)', // Remove maybe
 					200: 'hsl(0, 0%, 20%)',
-					240: 'hsl(0, 0%, 24%)', // Remove maybe
 					300: 'hsl(0, 0%, 30%)',
 					400: 'hsl(0, 0%, 40%)',
 					500: 'hsl(0, 0%, 50%)',
@@ -37,19 +35,14 @@ module.exports = {
 					900: 'hsl(0, 0%, 90%)',
 					930: 'hsl(0, 0%, 93%)' // Remove maybe
 				},
-				// primary: 'var(--primary-color)',
 				primary: 'hsl(210, 100%, 52%)',
 				background: {
 					main: 'var(--main-background)',
 					secondary: 'var(--secondary-background)'
 				},
-				foreground: {
+				foreground: 'var(--foreground)',
-					default: 'var(--foreground)',
-					inverted: 'var(--foreground-inverted)'
-				},
 				panels: {
-					bg: 'var(--panels-background)',
+					bg: 'var(--panels-background)'
-					text: 'var(--panels-text)'
 				}
 			}
 		}