style: unified accent color and changed its name to primary-color; style: back button; style: added btn css component

src/app.js

@@ -6,6 +6,8 @@ window.vol = {
 }
 
 import '@/styles/scss/style.scss'
+import '@/styles/css/components.css'
+
 import App from '@/App.vue'
 import i18n from '@/plugins/i18n'
 import router from '@/router'

src/components/downloads/QueueItem.vue

@@ -171,7 +171,7 @@ export default {
 		},
 		barStyle() {
 			let width = 0
-			let backgroundColor = 'var(--accent-color)'
+			let backgroundColor = 'var(--primary-color)'
 
 			if (this.hasFails) {
 				// Orange

src/components/globals/BackButton.vue

@@ -1,34 +1,17 @@
 <template>
-	<button class="top-back-button" @click="$router.back()">
+	<button
-		<i class="material-icons mirrored md-36">forward</i>
+		class="btn-primary border-transparent border-solid absolute flex items-center justify-center p-1 m-0 w-16 h-16 rounded-full"
+		@click="$router.back()"
+	>
+		<i class="material-icons mirrored text-4xl text-white">forward</i>
 	</button>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
-$button-dimension: 4rem;
+button {
-$button-separator: 10px;
+	top: 10px;
+	left: 10px;
 
-.top-back-button {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	position: absolute;
-	top: $button-separator;
-	left: $button-separator;
-
-	min-width: unset;
-	width: $button-dimension;
-	height: $button-dimension;
-
-	background: var(--secondary-background);
-	border-radius: 50%;
-	padding: 0.25rem;
-	margin: 0;
 	transition: background 200ms ease-in-out;
-
-	&:hover {
-		background: var(--accent-color);
-	}
 }
 </style>

src/components/globals/ConfirmModal.vue

@@ -4,8 +4,8 @@
 			<h1 style="flex: 1">{{ titleText }}</h1>
 
 			<div class="confirm-area">
-				<button class="no-hover"></button>
+				<button class="no-hover">Text</button>
-				<button class="btn-red no-hover"></button>
+				<button class="no-hover bg-red-600">Text</button>
 			</div>
 		</div>
 

src/components/globals/TheContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="context-menu" v-show="menuOpen" ref="contextMenu" :style="{ top: yPos, left: xPos }">
 		<button
-			class="menu-option"
+			class="btn menu-option"
 			v-for="option of sortedOptions"
 			:key="option.label"
 			v-show="option.show"
@@ -252,9 +252,9 @@ export default {
 
 // Resetting buttons only for this component (because the style is scoped)
 button {
-	color: var(--accent-text);
+	color: var(--primary-text);
 	color: unset;
-	background-color: var(--accent-color);
+	background-color: var(--primary-color);
 	background-color: unset;
 	min-width: unset;
 	position: unset;
@@ -274,31 +274,6 @@ button {
 		outline: none;
 	}
 
-	&[disabled] {
-		background-color: unset;
-		color: unset;
-		opacity: unset;
-	}
-
-	&.selective {
-		background-color: unset;
-		color: unset;
-
-		&.active {
-			background-color: unset;
-			color: unset;
-		}
-	}
-
-	&.with_icon {
-		display: unset;
-		align-items: unset;
-
-		i {
-			margin-left: unset;
-		}
-	}
-
 	&:active {
 		background-color: unset;
 		transform: unset;

src/components/globals/TheQualityModal.vue

@@ -1,17 +1,23 @@
 <template>
 	<div id="modal_quality" class="smallmodal" v-show="open" @click="tryToDownloadTrack($event)" ref="modal">
 		<div class="smallmodal-content">
-			<button class="quality-button" data-quality-value="9">{{ $t('globals.download', {thing: 'FLAC'}) }}</button>
+			<button class="btn btn-primary quality-button" data-quality-value="9">
-			<button class="quality-button" data-quality-value="3">{{ $t('globals.download', {thing: 'MP3 320kbps'}) }}</button>
+				{{ $t('globals.download', { thing: 'FLAC' }) }}
-			<button class="quality-button" data-quality-value="1">{{ $t('globals.download', {thing: 'MP3 128kbps'}) }}</button>
-			<button class="quality-button" data-quality-value="15">
-				{{ $t('globals.download', {thing: '360 Reality Audio [HQ]'}) }}
 			</button>
-			<button class="quality-button" data-quality-value="14">
+			<button class="btn btn-primary quality-button" data-quality-value="3">
-				{{ $t('globals.download', {thing: '360 Reality Audio [MQ]'}) }}
+				{{ $t('globals.download', { thing: 'MP3 320kbps' }) }}
 			</button>
-			<button class="quality-button" data-quality-value="13">
+			<button class="btn btn-primary quality-button" data-quality-value="1">
-				{{ $t('globals.download', {thing: '360 Reality Audio [LQ]'}) }}
+				{{ $t('globals.download', { thing: 'MP3 128kbps' }) }}
+			</button>
+			<button class="btn btn-primary quality-button" data-quality-value="15">
+				{{ $t('globals.download', { thing: '360 Reality Audio [HQ]' }) }}
+			</button>
+			<button class="btn btn-primary quality-button" data-quality-value="14">
+				{{ $t('globals.download', { thing: '360 Reality Audio [MQ]' }) }}
+			</button>
+			<button class="btn btn-primary quality-button" data-quality-value="13">
+				{{ $t('globals.download', { thing: '360 Reality Audio [LQ]' }) }}
 			</button>
 		</div>
 	</div>

src/components/pages/Artist.vue

@@ -19,7 +19,7 @@
 			<button
 				v-for="(item, name) in body"
 				:key="name"
-				class="selective"
+				class="btn btn-primary"
 				:class="{ active: name === currentTab }"
 				:href="'#artist_' + name"
 				@click="changeTab(name)"

src/components/pages/Charts.vue

@@ -35,8 +35,8 @@
 			</div>
 		</div>
 		<div v-else id="charts_table">
-			<button @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
+			<button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
-			<button @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
+			<button class="btn btn-primary" @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
 				{{ $t('charts.download') }}
 			</button>
 			<table class="table table--charts">

src/components/pages/Favorites.vue

@@ -25,7 +25,7 @@
 			</div>
 		</div>
 
-		<button v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
+		<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
 			{{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
 		</button>
 

src/components/pages/Settings.vue

@@ -9,7 +9,9 @@
 				<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
 			</i18n>
 
-			<button id="settings_btn_logout" @click="logout">{{ $t('settings.login.logout') }}</button>
+			<button class="btn btn-primary" id="settings_btn_logout" @click="logout">
+				{{ $t('settings.login.logout') }}
+			</button>
 
 			<select v-if="accounts.length" id="family_account" v-model="accountNum" @change="changeAccount">
 				<option v-for="(account, i) in accounts" :key="account" :value="i.toString()">{{ account.BLOG_NAME }}</option>
@@ -29,7 +31,7 @@
 					ref="loginInput"
 					placeholder="ARL"
 				/>
-				<button id="settings_btn_copyArl" class="only_icon" @click="copyARLtoClipboard">
+				<button id="settings_btn_copyArl" class="btn btn-primary btn-only-icon ml-2" @click="copyARLtoClipboard">
 					<i class="material-icons">assignment</i>
 				</button>
 			</div>
@@ -39,7 +41,7 @@
 			<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
 				{{ $t('settings.login.login') }}
 			</a>
-			<button id="settings_btn_updateArl" @click="login" style="width: 100%">
+			<button class="btn btn-primary" id="settings_btn_updateArl" @click="login" style="width: 100%">
 				{{ $t('settings.login.arl.update') }}
 			</button>
 		</div>
@@ -78,7 +80,12 @@
 			</h3>
 			<div class="inline-flex">
 				<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
-				<button id="select_downloads_folder" v-if="clientMode" class="only_icon" @click="selectDownloadFolder">
+				<button
+					id="select_downloads_folder"
+					v-if="clientMode"
+					class="btn btn-primary btn-only-icon ml-2"
+					@click="selectDownloadFolder"
+				>
 					<i class="material-icons">folder</i>
 				</button>
 			</div>
@@ -611,8 +618,8 @@
 		</div>
 
 		<footer>
-			<button @click="resetSettings">{{ $t('settings.reset') }}</button>
+			<button class="btn btn-primary mr-2" @click="resetSettings">{{ $t('settings.reset') }}</button>
-			<button @click="saveSettings">{{ $t('settings.save') }}</button>
+			<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
 		</footer>
 	</div>
 </template>

src/components/pages/Tracklist.vue

@@ -134,11 +134,11 @@
 		</table>
 		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
 		<footer>
-			<button @click.stop="addToQueue" :data-link="link">
+			<button class="btn btn-primary mr-2" @click.stop="addToQueue" :data-link="link">
 				{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
 			</button>
-			<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
+			<button class="btn btn-primary flex items-center" @click.stop="addToQueue" :data-link="selectedLinks()">
-				{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
+				{{ $t('tracklist.downloadSelection') }}<i class="material-icons ml-2">file_download</i>
 			</button>
 		</footer>
 	</div>

src/styles/css/components.css

@@ -0,0 +1,30 @@
+@layer components {
+	.btn {
+		@apply text-grayscale-900 relative border border-transparent border-solid rounded font-semibold text-sm py-0 px-2 h-8 uppercase;
+
+		font-family: inherit;
+		transition: transform 50ms ease-in-out;
+	}
+
+	.btn:active {
+		transform: scale(0.98);
+	}
+
+	.btn[disabled] {
+		@apply bg-gray-600 text-gray-300 opacity-75 cursor-not-allowed;
+	}
+
+	.btn-only-icon {
+		@apply w-12 py-0 px-1 flex justify-center items-center;
+
+		min-width: 24px;
+	}
+
+	.btn-primary {
+		@apply bg-primary;
+	}
+
+	.btn-primary:hover {
+		@apply bg-blue-600 border-foreground;
+	}
+}

src/styles/scss/_progressbar.scss

@@ -13,7 +13,7 @@
 		top: 0;
 		left: 0;
 		bottom: 0;
-		background-color: var(--accent-color);
+		background-color: var(--primary-color);
 		transition: width 0.3s linear;
 	}
 
@@ -23,7 +23,7 @@
 	}
 
 	.indeterminate {
-		background-color: var(--accent-color);
+		background-color: var(--primary-color);
 
 		&::before {
 			content: '';

src/styles/scss/_sidebar.scss

@@ -24,7 +24,7 @@ $sidebar-delay: 75ms;
 		color: inherit;
 
 		&.active {
-			background-color: var(--accent-color);
+			background-color: var(--primary-color);
 		}
 
 		&:not(#theme_selector) {
@@ -37,7 +37,7 @@ $sidebar-delay: 75ms;
 				background-color: var(--sidebar-link-bg);
 
 				.side_icon {
-					color: var(--accent-color);
+					color: var(--primary-color);
 				}
 			}
 		}

src/styles/scss/_toasts.scss

@@ -5,7 +5,7 @@
 
 .circle-loader {
 	display: inline-block;
-	border: 2px solid var(--accent-color);
+	border: 2px solid var(--primary-color);
 	border-radius: 50%;
 	border-bottom: 2px solid var(--secondary-background);
 	width: 16px;

src/styles/scss/base/_base.scss

@@ -6,6 +6,10 @@
 	--toast-background: hsla(0, 0%, 0%, 0.85);
 	--toast-secondary: hsla(0, 0%, 100%, 0.15);
 	--toast-text: hsla(0, 0%, 100%, 0.85);
+
+	--primary-color: hsl(210, 100%, 52%); // will remove variable
+	--primary-text: theme('colors.grayscale.870'); // will remove variable
+	--secondary-color: hsl(46, 100%, 57%); // will remove variable
 }
 
 :root[data-theme='light'] {
@@ -13,16 +17,13 @@
 	--secondary-background: theme('colors.grayscale.930');
 	--foreground: theme('colors.grayscale.200');
 	--foreground-inverted: theme('colors.grayscale.930');
-	--accent-color: hsl(210, 100%, 52%);
-	--secondary-color: hsl(46, 100%, 57%);
 	--panels-background: hsl(210, 3%, 14%);
 	--panels-text: theme('colors.white');
-	--accent-text: theme('colors.black');
 
 	--sidebar-link-bg: theme('colors.grayscale.240');
 	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
 
-	--icon-hover: var(--accent-color);
+	--icon-hover: var(--primary-color);
 
 	--table-bg: theme('colors.white');
 	--table-zebra: theme('colors.grayscale.900');
@@ -34,16 +35,13 @@
 	--secondary-background: theme('colors.grayscale.140');
 	--foreground: theme('colors.grayscale.930');
 	--foreground-inverted: theme('colors.grayscale.200');
-	--accent-color: hsl(210, 100%, 52%);
-	--secondary-color: hsl(46, 100%, 57%);
 	--panels-background: theme('colors.grayscale.100');
 	--panels-text: theme('colors.white');
-	--accent-text: theme('colors.grayscale.870');
 
 	--sidebar-link-bg: theme('colors.grayscale.240');
 	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
 
-	--icon-hover: var(--accent-color);
+	--icon-hover: var(--primary-color);
 
 	--table-bg: theme('colors.grayscale.80');
 	--table-zebra: theme('colors.grayscale.140');
@@ -55,11 +53,8 @@
 	--secondary-background: hsl(257, 61%, 10%);
 	--foreground: theme('colors.grayscale.930');
 	--foreground-inverted: hsl(258, 62%, 8%);
-	--accent-color: hsl(261, 85%, 37%);
-	--secondary-color: hsl(46, 100%, 57%);
 	--panels-background: hsl(257, 70%, 9%);
 	--panels-text: theme('colors.white');
-	--accent-text: theme('colors.grayscale.870');
 
 	--sidebar-link-bg: hsl(257, 70%, 17%);
 	--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);

src/styles/scss/base/_normalize.scss

@@ -28,3 +28,21 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+
+/* Taken from Tailwind Preflight */
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+	height: auto;
+}
+
+button,
+[role='button'] {
+	cursor: pointer;
+}

src/styles/scss/globals/_globals.scss

@@ -37,14 +37,14 @@ input[type='checkbox'] {
 
 	&:checked {
 		opacity: 1;
-		background-color: var(--accent-color);
+		background-color: var(--primary-color);
 		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
 		background-position: center center;
-		border: 0px solid var(--accent-color);
+		border: 0px solid var(--primary-color);
 		border-radius: 2px;
 		padding: 9px;
 		margin: 3px;
-		color: var(--accent-text);
+		color: var(--primary-text);
 	}
 }
 
@@ -70,86 +70,6 @@ p {
 	word-break: break-word;
 }
 
-button {
-	min-width: 64px;
-	color: var(--accent-text);
-	position: relative;
-	background-color: var(--accent-color);
-	border: 1px solid transparent;
-	border-radius: 4px;
-	font-family: inherit;
-	font-weight: 600;
-	font-size: 14px;
-	padding: 0px 8px;
-	margin-right: 8px;
-	height: 36px;
-	text-transform: uppercase;
-	cursor: pointer;
-	transition: transform 50ms ease-in-out, background-color 200ms ease;
-
-	&[disabled] {
-		background-color: var(--secondary-background);
-		color: var(--foreground);
-		opacity: 0.75;
-	}
-
-	&.btn-green {
-		background-color: green;
-
-		&:active {
-			background-color: green;
-		}
-	}
-
-	&.btn-red {
-		background-color: red;
-
-		&:active {
-			background-color: red;
-		}
-	}
-
-	&.selective {
-		background-color: var(--main-background);
-		color: var(--foreground);
-
-		&.active {
-			background-color: var(--accent-color);
-			color: var(--accent-text);
-		}
-	}
-
-	&.with_icon {
-		display: flex;
-		align-items: center;
-
-		i {
-			margin-left: 8px;
-		}
-	}
-
-	&.only_icon {
-		min-width: 24px;
-		width: 48px;
-		margin: 0px 0px 0px 8px;
-		padding: 0px 4px;
-
-		i {
-			padding: 6px 0px;
-		}
-	}
-
-	&:active {
-		background-color: var(--accent-color);
-		transform: scale(0.98);
-	}
-
-	&:not(.no-hover):hover {
-		background: none;
-		border: 1px solid var(--accent-color);
-	}
-}
-
 img {
 	&.rounded {
 		border-radius: 5px;
@@ -233,8 +153,8 @@ a {
 	height: 56px;
 	border-radius: 28px;
 	display: inline-block;
-	background-color: var(--accent-color);
+	background-color: var(--primary-color);
-	color: var(--accent-text);
+	color: var(--primary-text);
 	cursor: pointer;
 
 	i {

src/styles/scss/tabs/_search-tab.scss

@@ -28,7 +28,7 @@
 		transition: color 200ms ease-in-out;
 
 		&:hover {
-			color: var(--accent-color);
+			color: var(--primary-color);
 		}
 	}
 }

src/styles/scss/tabs/_tabs.scss

@@ -12,7 +12,7 @@
 		color: var(--foreground);
 
 		&.active {
-			background-color: var(--accent-color);
+			background-color: var(--primary-color);
 		}
 	}
 }
@@ -43,8 +43,8 @@
 		text-transform: capitalize;
 
 		&.active {
-			color: var(--accent-color);
+			color: var(--primary-color);
-			border-top: 3px solid var(--accent-color);
+			border-top: 3px solid var(--primary-color);
 		}
 	}
 }

tailwind.config.js

@@ -37,7 +37,7 @@ module.exports = {
 					900: 'hsl(0, 0%, 90%)',
 					930: 'hsl(0, 0%, 93%)' // Remove maybe
 				},
-				accent: 'var(--accent-color)',
+				primary: 'var(--primary-color)',
 				background: {
 					main: 'var(--main-background)',
 					secondary: 'var(--secondary-background)'
@@ -57,5 +57,34 @@ module.exports = {
 	corePlugins: {
 		preflight: false
 	},
-	plugins: []
+	plugins: [outlinesPlugin()]
+}
+
+function outlinesPlugin() {
+	return ({ addUtilities, theme }) => {
+		// https://github.com/tailwindlabs/discuss/issues/196
+		let newUtilities = {}
+		const boxShadowPrefix = '0 0 0 3px'
+		const colors = theme('colors')
+
+		Object.keys(colors).forEach(color => {
+			const colorData = colors[color]
+
+			if (typeof colorData === 'string') {
+				newUtilities[`.outline-${color}`] = {
+					boxShadow: `${boxShadowPrefix} ${colorData}`
+				}
+			} else {
+				Object.keys(colorData).forEach(colorVariation => {
+					newUtilities[`.outline-${color}-${colorVariation}`] = {
+						boxShadow: `${boxShadowPrefix} ${colorData[colorVariation]}`
+					}
+				})
+			}
+		})
+
+		addUtilities(newUtilities, {
+			variants: ['focus']
+		})
+	}
 }