style: integrated base variables into Taiwlind

rollup.config.js

@@ -46,8 +46,8 @@ export default {
 		resolve(), // Tells Rollup how to find imported modules in node_modules
 		commonjs(), // Converts imported modules to ES modules, if necessary
 		svg(),
-		postcss(),
 		vue(),
+		postcss(),
 		production && terser(), // Minify, but only in production
 		production && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production
 	]

src/components/TheContent.vue

@@ -43,21 +43,21 @@ main {
 	height: calc(100vh - 93px);
 	overflow-y: scroll;
 	overflow-x: hidden;
+}
 
-	&::-webkit-scrollbar {
+main::-webkit-scrollbar {
-		width: 10px;
+	width: 10px;
-	}
+}
 
-	&::-webkit-scrollbar-track {
+main::-webkit-scrollbar-track {
-		background: var(--main-background);
+	background: var(--main-background);
-	}
+}
 
-	&::-webkit-scrollbar-thumb {
+main::-webkit-scrollbar-thumb {
-		background: var(--main-scroll);
+	background: var(--main-scroll);
-		border-radius: 4px;
+	border-radius: 4px;
-		width: 6px;
+	width: 6px;
-		padding: 0px 2px;
+	padding: 0px 2px;
-	}
 }
 </style>
 

src/styles/scss/_sidebar.scss

@@ -119,7 +119,7 @@ $sidebar-delay: 75ms;
 		width: 25px;
 		height: 25px;
 		border-radius: 1000px;
-		border: 1px solid var(--separator);
+		border: 1px solid theme('colors.grayscale.500');
 		cursor: pointer;
 		transition: border 200ms ease-in-out;
 

src/styles/scss/base/_base.scss

@@ -1,66 +1,65 @@
-html {
+:root {
-	--main-scroll: hsl(0, 0%, 33%);
+	--main-scroll: theme('colors.grayscale.300');
 	--panels-scroll: hsl(180, 2%, 17%);
 	--tag-background: hsl(210, 100%, 38%);
-	--tag-text: hsl(0, 0%, 100%);
+	--tag-text: theme('colors.white');
-	--toast-background: hsla(0, 0%, 0%, 0.867);
+	--toast-background: hsla(0, 0%, 0%, 0.85);
-	--toast-secondary: hsla(0, 0%, 100%, 0.133);
+	--toast-secondary: hsla(0, 0%, 100%, 0.15);
-	--toast-text: hsla(0, 0%, 100%, 0.871);
+	--toast-text: hsla(0, 0%, 100%, 0.85);
-	--separator: hsl(0, 0%, 50%);
 }
 
-html[data-theme='light'] {
+:root[data-theme='light'] {
-	--main-background: hsl(0, 0%, 100%);
+	--main-background: theme('colors.white');
-	--secondary-background: hsl(0, 0%, 93%);
+	--secondary-background: theme('colors.grayscale.930');
-	--foreground: hsl(0, 0%, 20%);
+	--foreground: theme('colors.grayscale.200');
-	--foreground-inverted: hsl(0, 0%, 93%);
+	--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: hsl(0, 0%, 100%);
+	--panels-text: theme('colors.white');
-	--accent-text: hsl(0, 0%, 0%);
+	--accent-text: theme('colors.black');
 
-	--sidebar-link-bg: hsl(0, 0%, 24%);
+	--sidebar-link-bg: theme('colors.grayscale.240');
 	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
 
 	--icon-hover: var(--accent-color);
 
-	--table-bg: hsl(0, 0%, 100%);
+	--table-bg: theme('colors.white');
-	--table-zebra: hsl(0, 0%, 90%);
+	--table-zebra: theme('colors.grayscale.900');
-	--table-highlight: hsl(0, 0%, 84%);
+	--table-highlight: theme('colors.grayscale.840');
 }
 
-html[data-theme='dark'] {
+:root[data-theme='dark'] {
-	--main-background: hsl(0, 0%, 8%);
+	--main-background: theme('colors.grayscale.80');
-	--secondary-background: hsl(0, 0%, 14%);
+	--secondary-background: theme('colors.grayscale.140');
-	--foreground: hsl(0, 0%, 93%);
+	--foreground: theme('colors.grayscale.930');
-	--foreground-inverted: hsl(0, 0%, 20%);
+	--foreground-inverted: theme('colors.grayscale.200');
 	--accent-color: hsl(210, 100%, 52%);
 	--secondary-color: hsl(46, 100%, 57%);
-	--panels-background: hsl(0, 0%, 10%);
+	--panels-background: theme('colors.grayscale.100');
-	--panels-text: hsl(0, 0%, 100%);
+	--panels-text: theme('colors.white');
-	--accent-text: hsl(0, 0%, 87%);
+	--accent-text: theme('colors.grayscale.870');
 
-	--sidebar-link-bg: hsl(0, 0%, 24%);
+	--sidebar-link-bg: theme('colors.grayscale.240');
 	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
 
 	--icon-hover: var(--accent-color);
 
-	--table-bg: hsl(0, 0%, 8%);
+	--table-bg: theme('colors.grayscale.80');
-	--table-zebra: hsl(0, 0%, 14%);
+	--table-zebra: theme('colors.grayscale.140');
-	--table-highlight: hsl(0, 0%, 20%);
+	--table-highlight: theme('colors.grayscale.200');
 }
 
-html[data-theme='purple'] {
+:root[data-theme='purple'] {
 	--main-background: hsl(261, 74%, 6%);
 	--secondary-background: hsl(257, 61%, 10%);
-	--foreground: hsl(0, 0%, 93%);
+	--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: hsl(0, 0%, 100%);
+	--panels-text: theme('colors.white');
-	--accent-text: hsl(0, 0%, 87%);
+	--accent-text: theme('colors.grayscale.870');
 
 	--sidebar-link-bg: hsl(257, 70%, 17%);
 	--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
@@ -71,17 +70,3 @@ html[data-theme='purple'] {
 	--table-zebra: hsl(257, 61%, 10%);
 	--table-highlight: hsl(257, 66%, 27%);
 }
-
-html {
-	height: 100vh;
-}
-
-body {
-	margin: 0px;
-	width: 100%;
-	height: 100%;
-	font-family: 'Open Sans', 'sans-serif';
-	overflow: hidden;
-	background: var(--main-background);
-	color: var(--foreground);
-}

src/styles/scss/style.scss

@@ -1,11 +1,25 @@
+@import './base/base';
+
 @import '~tailwindcss/base';
 @import '~tailwindcss/components';
 @import '~tailwindcss/utilities';
 
-// SASS only
 @import './base/variables';
 
-@import './base/base';
+html {
+	height: 100vh;
+}
+
+body {
+	margin: 0px;
+	width: 100%;
+	height: 100%;
+	font-family: 'Open Sans', 'sans-serif';
+	overflow: hidden;
+	background: var(--main-background);
+	color: var(--foreground);
+}
+
 @import './base/normalize';
 @import './base/mixins';
 @import './base/animations';

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

@@ -3,7 +3,7 @@
 }
 
 .home_section {
-	border-top: 1px solid var(--separator);
+	border-top: 1px solid theme('colors.grayscale.500');
 	padding-top: 25px;
 	padding-bottom: 25px;
 }

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

@@ -5,7 +5,7 @@
 		padding-bottom: 20px;
 
 		&:not(:first-child) {
-			border-top: 1px solid var(--separator);
+			border-top: 1px solid theme('colors.grayscale.500');
 		}
 	}
 

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

@@ -29,7 +29,7 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	border-top: 1px solid var(--separator); /* Need less opacity */
+	border-top: 1px solid theme('colors.grayscale.500'); /* Need less opacity */
 	padding-top: 20px;
 	padding-bottom: 20px;
 

tailwind.config.js

@@ -3,9 +3,55 @@ module.exports = {
 		removeDeprecatedGapUtilities: true,
 		purgeLayersByDefault: true
 	},
-	purge: ['./src/**/*.html', './src/**/*.vue'],
+	purge: {
+		// https://medium.com/@kyis/vue-tailwind-purgecss-the-right-way-c70d04461475
+		content: [`./public/**/*.html`, `./src/**/*.vue`],
+		defaultExtractor(content) {
+			const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
+			return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
+		},
+		whitelist: [],
+		whitelistPatterns: [
+			/-(leave|enter|appear)(|-(to|from|active))$/,
+			/^(?!(|.*?:)cursor-move).+-move$/,
+			/^router-link(|-exact)-active$/
+		]
+	},
 	theme: {
-		extend: {}
+		extend: {
+			colors: {
+				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%)',
+					600: 'hsl(0, 0%, 60%)',
+					700: 'hsl(0, 0%, 70%)',
+					800: 'hsl(0, 0%, 80%)',
+					840: 'hsl(0, 0%, 84%)', // Remove maybe
+					870: 'hsl(0, 0%, 87%)', // Remove maybe
+					900: 'hsl(0, 0%, 90%)',
+					930: 'hsl(0, 0%, 93%)' // Remove maybe
+				},
+				accent: 'var(--accent-color)',
+				background: {
+					main: 'var(--main-background)',
+					secondary: 'var(--secondary-background)'
+				},
+				foreground: {
+					default: 'var(--foreground)',
+					inverted: 'var(--foreground-inverted)'
+				},
+				panels: {
+					bg: 'var(--panels-background)',
+					text: 'var(--panels-text)'
+				}
+			}
+		}
 	},
 	variants: {},
 	corePlugins: {