Update dev dependencies stylelint SASS (#4173)

* Update dev dependencies stylelint SASS
Major update for stylelint with breaking changes
https://stylelint.io/migration-guide/to-14/

Applied automatic SASS migration to current syntax
https://sass-lang.com/documentation/cli/migrator#migrations

And a few manual fixes such as:
https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-no-missing-interpolation/README.md

Other dev dependencies are minor updates.

* RTLCSS

* Fix color-hex-length bug

* Implement make bin/composer

* Update git hash

Makefile

@@ -67,6 +67,10 @@ lint: bin/phpcs ## Run the linter on the PHP files
 lint-fix: bin/phpcbf ## Fix the errors detected by the linter
 	$(PHP) ./bin/phpcbf . -p -s
 
+bin/composer:
+	mkdir -p bin/
+	wget 'https://raw.githubusercontent.com/composer/getcomposer.org/ce43e63e47a7fca052628faf1e4b14f9100ae82c/web/installer' -O - -q | php -- --quiet --install-dir='./bin/' --filename='composer'
+
 bin/phpunit:
 	mkdir -p bin/
 	wget -O bin/phpunit https://phar.phpunit.de/phpunit-9.5.2.phar
@@ -91,6 +95,12 @@ bin/typos:
 	rm *.tar.gz ; \
 	cd ..
 
+node_modules/.bin/eslint:
+	npm install
+
+vendor/bin/phpstan: bin/composer
+	bin/composer install --prefer-dist --no-progress
+
 ##########
 ## I18N ##
 ##########
@@ -185,20 +195,19 @@ refresh: ## Refresh feeds by fetching new messages
 
 # TODO: Add composer install
 .PHONY: composer-test
-composer-test:
-	composer run-script test
+composer-test: vendor/bin/phpstan
+	bin/composer run-script test
 
 .PHONY: composer-fix
 composer-fix:
-	composer run-script fix
+	bin/composer run-script fix
 
-# TODO: Add npm install
 .PHONY: npm-test
-npm-test:
+npm-test: node_modules/.bin/eslint
 	npm test
 
 .PHONY: npm-fix
-npm-fix:
+npm-fix: node_modules/.bin/eslint
 	npm run fix
 
 .PHONY: typos-test

docs/assets/css/style.scss

@@ -1,3 +1,4 @@
+// stylelint-disable-next-line
 @import "{{ site.theme }}";
 
 .page-header .project-name a {

p/themes/Ansum/_components.scss

@@ -1,3 +1,9 @@
+@use "sass:string";
+
+@use "mixins";
+
+@use "variables";
+
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
@@ -22,7 +28,7 @@
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
-	background: $grey-lighter;
+	background: variables.$grey-lighter;
 	font-size: 1rem;
 	border: none;
 	border-radius: 3px;
@@ -39,7 +45,7 @@
 		margin: 1.75rem 0 0.5rem 2rem;
 		font-weight: bold;
 		text-align: left;
-		color: $grey-dark;
+		color: variables.$grey-dark;
 		text-transform: uppercase;
 		letter-spacing: 1px;
 
@@ -48,22 +54,22 @@
 
 	.item {
 
-		@include transition(all, 0.075s, ease-in-out);
+		@include mixins.transition(all, 0.075s, ease-in-out);
 
 		a, span, .as-link {
 			padding: 0 2rem;
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			font-size: 1rem;
 			line-height: 2.5em;
 		}
 
 		&:hover {
-			background: $main-first;
-			color: $white;
+			background: variables.$main-first;
+			color: variables.$white;
 
 			a, button {
 				text-decoration: none;
-				color: $white;
+				color: variables.$white;
 			}
 
 			.icon {
@@ -89,7 +95,7 @@
 
 	.separator {
 		margin: 0.75rem 0;
-		border-bottom: 1px solid $grey-light;
+		border-bottom: 1px solid variables.$grey-light;
 		// display: none;
 	}
 
@@ -102,15 +108,15 @@
 
 		a,
 		button {
-			color: $main-font-color;
+			color: variables.$main-font-color;
 
 			&:hover {
-				color: $white;
+				color: variables.$white;
 			}
 		}
 
 		&:hover {
-			background: $main-first;
+			background: variables.$main-first;
 		}
 	}
 }
@@ -123,12 +129,12 @@
 	margin: 1rem 0;
 	// width: 100%;
 	padding: 1rem;
-	background: $grey-lighter;
-	color: $grey-dark;
+	background: variables.$grey-lighter;
+	color: variables.$grey-dark;
 	font-size: 1rem;
-	border: 1px solid $grey-medium;
+	border: 1px solid variables.$grey-medium;
 	border-radius: 3px;
-	text-shadow: 0 0 1px $grey-light;
+	text-shadow: 0 0 1px variables.$grey-light;
 }
 
 .alert-head {
@@ -141,48 +147,48 @@
 }
 
 .alert-warn {
-	background: $warning-light;
-	color: $warning-text;
-	border: 1px solid unquote($warning-text+'33'); // on ajoute l’opacité à la fin
+	background: variables.$warning-light;
+	color: variables.$warning-text;
+	border: 1px solid string.unquote(variables.$warning-text + '33'); // on ajoute l’opacité à la fin
 }
 
 .alert-success {
-	background: $success-light;
-	color: $success-text;
-	border: 1px solid unquote($success-text+'33');
+	background: variables.$success-light;
+	color: variables.$success-text;
+	border: 1px solid string.unquote(variables.$success-text + '33');
 }
 
 .alert-error {
-	background: $alert-light;
-	color: $alert-text;
-	border: 1px solid unquote($alert-text+'33');
+	background: variables.$alert-light;
+	color: variables.$alert-text;
+	border: 1px solid string.unquote(variables.$alert-text + '33');
 }
 
 /*=== Pagination */
 .pagination {
-	background: $grey-light;
-	color: $main-font-color;
+	background: variables.$grey-light;
+	color: variables.$main-font-color;
 	font-size: 0.8em;
 	text-align: center;
 
 	.item {
 		&.pager-current {
-			background: $sid-bg;
-			color: $grey-light;
+			background: variables.$sid-bg;
+			color: variables.$grey-light;
 			font-size: 1.5em;
 			font-weight: bold;
 		}
 
 		a {
 			display: block;
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			font-style: italic;
 			line-height: 3em;
 			text-decoration: none;
 
 			&:hover {
-				background: $main-font-color;
-				color: $grey-light;
+				background: variables.$main-font-color;
+				color: variables.$grey-light;
 			}
 		}
 	}
@@ -202,7 +208,7 @@
 
 /*=== Boxes */
 .box {
-	background: $white;
+	background: variables.$white;
 	// border: 1px solid #ddd;
 	border: none;
 	border-radius: 3px;
@@ -211,8 +217,8 @@
 	.box-title {
 		margin: 0;
 		padding: 0.5rem 0.75rem;
-		background: $grey-light;
-		color: $main-font-color;
+		background: variables.$grey-light;
+		color: variables.$main-font-color;
 		// border-bottom: 1px solid #ddd;
 		border-radius: 2px 2px 0 0;
 
@@ -233,7 +239,7 @@
 				}
 
 				&:hover {
-					background: url("icons/cog-white.svg") no-repeat 4px 4px $main-first;
+					background: url("icons/cog-white.svg") no-repeat 4px 4px variables.$main-first;
 				}
 			}
 		}
@@ -272,9 +278,9 @@
 
 		.item {
 			padding: 0.5rem 0;
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			font-size: 1rem;
-			border-bottom: 1px solid $grey-light;
+			border-bottom: 1px solid variables.$grey-light;
 			line-height: 1.7em;
 
 			img {
@@ -298,7 +304,7 @@
 
 				&:hover {
 					// background: $main-first;
-					background: url("icons/cog-white.svg") no-repeat 4px 4px $main-first;
+					background: url("icons/cog-white.svg") no-repeat 4px 4px variables.$main-first;
 				}
 			}
 
@@ -314,13 +320,13 @@
 #bigMarkAsRead {
 	text-align: center;
 	text-decoration: none;
-	background: $main-first-light;
-	color: $main-first;
+	background: variables.$main-first-light;
+	color: variables.$main-first;
 
-	@include transition(all, 0.15s, ease-in-out);
+	@include mixins.transition(all, 0.15s, ease-in-out);
 
 	&:hover {
-		background: $main-first;
+		background: variables.$main-first;
 		color: #fff;
 
 		.bigTick {
@@ -341,7 +347,7 @@
 
 // page de login
 .formLogin {
-	background: $sid-bg;
+	background: variables.$sid-bg;
 
 	.header {
 		.configure {
@@ -352,13 +358,13 @@
 			}
 
 			a.signin {
-				color: $white;
+				color: variables.$white;
 			}
 		}
 	}
 
 	h1 {
-		color: $white;
+		color: variables.$white;
 	}
 
 	form#crypto-form {
@@ -366,18 +372,18 @@
 			margin-bottom: 1rem;
 
 			label {
-				color: $grey-medium;
+				color: variables.$grey-medium;
 				font-size: 1rem;
 
 
 			}
 
 			input {
-				background: $main-first-darker;
+				background: variables.$main-first-darker;
 
 				&:focus {
-					background: $grey-lighter;
-					color: $main-font-color;
+					background: variables.$grey-lighter;
+					color: variables.$main-font-color;
 				}
 			}
 		}

p/themes/Ansum/_configuration.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*=== Configuration pages */
 .post {
 	padding: 1rem 2rem;
@@ -33,7 +35,7 @@
 
 	h1, h2 { // pages titles
 		// font-family: "spectral";
-		color: $main-font-color;
+		color: variables.$main-font-color;
 		font-size: 3rem;
 		margin-top: 1.75rem;
 		font-weight: 300;
@@ -43,12 +45,12 @@
 	a[href="./"] { // C’est le bouton "Retour à vos flux"
 		margin: 0;
 		padding: 0.75rem 1.5rem;
-		background: $grey-lighter;
+		background: variables.$grey-lighter;
 		display: inline-block;
 		// border: none;
-		color: $grey-dark;
+		color: variables.$grey-dark;
 		font-size: 1rem;
-		border: 1px solid $grey-medium-light;
+		border: 1px solid variables.$grey-medium-light;
 		border-radius: 5px;
 		// min-height: 38px;
 		min-width: 15px;
@@ -58,9 +60,9 @@
 		overflow: hidden;
 
 		&:hover {
-			background: $main-first;
+			background: variables.$main-first;
 			color: white;
-			border: 1px solid $main-first;
+			border: 1px solid variables.$main-first;
 			text-decoration: none;
 		}
 	}

p/themes/Ansum/_forms.scss

@@ -1,10 +1,14 @@
+@use "mixins";
+
+@use "variables";
+
 /* btns */
 .btn {
 	margin: 0;
 	padding: 0.5rem 1.5rem;
-	background: $grey-lighter;
+	background: variables.$grey-lighter;
 	display: inline-block;
-	color: $grey-dark;
+	color: variables.$grey-dark;
 	font-size: 1rem;
 	border: none;
 	border-radius: 5px;
@@ -15,27 +19,27 @@
 	cursor: pointer;
 	overflow: hidden;
 
-	@include transition(all, 0.15s, ease-in-out);
+	@include mixins.transition(all, 0.15s, ease-in-out);
 
 	&.btn-important {
-		background: $main-first;
-		color: $white;
+		background: variables.$main-first;
+		color: variables.$white;
 
 		// @include transition(all, 0.15s, ease-in-out);
 		&:hover,
 		&:active {
-			background: $main-first-alt;
+			background: variables.$main-first-alt;
 		}
 	}
 
 
 	&.btn-attention {
-		background: $alert-bg;
+		background: variables.$alert-bg;
 		color: #fff;
 
 		&:hover,
 		&:active {
-			background: $alert-text;
+			background: variables.$alert-text;
 		}
 	}
 
@@ -66,7 +70,7 @@ label {
 	min-height: 25px;
 	padding: 5px 0;
 	cursor: pointer;
-	color: $grey-dark;
+	color: variables.$grey-dark;
 }
 
 textarea {
@@ -77,11 +81,11 @@ textarea {
 
 input, select, textarea, button {
 	padding: 5px 10px;
-	background: $white;
-	color: $grey-dark;
+	background: variables.$white;
+	color: variables.$grey-dark;
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 1rem;
-	border: 1px solid $grey-light;
+	border: 1px solid variables.$grey-light;
 	border-radius: 2px;
 	min-height: 25px;
 	line-height: 25px;
@@ -93,18 +97,18 @@ option {
 }
 
 input:focus, select:focus, textarea:focus {
-	color: $main-font-color;
-	border-color: $main-first;
+	color: variables.$main-font-color;
+	border-color: variables.$main-first;
 }
 
 input:invalid, select:invalid {
-	color: $alert-bg;
-	border-color: $alert-bg;
+	color: variables.$alert-bg;
+	border-color: variables.$alert-bg;
 	box-shadow: none;
 }
 
 input:disabled, select:disabled {
-	background: $grey-light;
+	background: variables.$grey-light;
 }
 
 input.extend {

p/themes/Ansum/_global-view.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*=== GLOBAL VIEW */
 /*================*/
 #stream {
@@ -20,7 +22,7 @@
 			background: none;
 
 			a.title {
-				color: $grey-dark;
+				color: variables.$grey-dark;
 				font-size: 1rem;
 				font-weight: normal;
 				text-decoration: none;
@@ -31,7 +33,7 @@
 				&:not([data-unread="0"])::after {
 					margin: -0.5rem 1rem 0 0;
 					padding: 0 0.75rem;
-					background: $grey-light;
+					background: variables.$grey-light;
 					border-radius: 12px;
 					position: absolute;
 					top: 1.75rem;
@@ -41,7 +43,7 @@
 				}
 
 				&:hover {
-					color: $main-first;
+					color: variables.$main-first;
 				}
 			}
 		}
@@ -55,11 +57,11 @@
 				font-size: 1rem;
 
 				a {
-					color: $main-font-color;
+					color: variables.$main-font-color;
 					font-weight: 400;
 
 					&:hover {
-						color: $main-first;
+						color: variables.$main-first;
 						text-decoration: none;
 					}
 				}

p/themes/Ansum/_layout.scss

@@ -1,9 +1,13 @@
+@use "mixins";
+
+@use "variables";
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
 .header {
 	padding: 0.5rem 1.35rem;
-	background: $sid-bg;
+	background: variables.$sid-bg;
 	display: block;
 	width: auto;
 	table-layout: none;
@@ -31,22 +35,22 @@
 			// width: 50%;
 			input {
 				width: 230px;
-				color: $sid-font-color;
+				color: variables.$sid-font-color;
 				border: none;
 				border-radius: 2px 0 0 2px;
-				background-color: $sid-bg-alt;
+				background-color: variables.$sid-bg-alt;
 
-				@include transition(all, 0.15s, ease-in-out);
+				@include mixins.transition(all, 0.15s, ease-in-out);
 
 				&:hover {
-					background-color: $sid-bg-dark;
+					background-color: variables.$sid-bg-dark;
 				}
 
 				&:focus {
 					width: 350px;
-					color: $grey-dark;
+					color: variables.$grey-dark;
 
-					background-color: $white;
+					background-color: variables.$white;
 				}
 			}
 
@@ -56,7 +60,7 @@
 				width: 3rem;
 				border-radius: 0 2px 2px 0;
 
-				background-color: $main-first;
+				background-color: variables.$main-first;
 				background-position: center;
 				background-repeat: no-repeat;
 				background-image: url(icons/magnifier.svg);
@@ -65,7 +69,7 @@
 				min-height: 35px;
 
 				&:hover {
-					background-color: $main-first-alt;
+					background-color: variables.$main-first-alt;
 				}
 			}
 		}
@@ -134,19 +138,19 @@
 
 /*=== New article notification */
 #new-article {
-	background: $main-first;
+	background: variables.$main-first;
 	font-size: 1rem;
 	text-align: center;
 }
 
 #new-article:hover {
-	background: $main-first-alt;
+	background: variables.$main-first-alt;
 }
 
 #new-article > a {
 	line-height: 3em;
 	font-weight: bold;
-	color: $white;
+	color: variables.$white;
 }
 
 #new-article > a:hover {
@@ -156,7 +160,7 @@
 /*=== Day indication */
 .day {
 	padding: 1rem 0 0 1.25rem;
-	color: $light-font-color;
+	color: variables.$light-font-color;
 	font-size: 0.875rem;
 	font-weight: 700;
 	line-height: 3em;
@@ -166,7 +170,7 @@
 	.name {
 		padding: 0 1rem 0 1rem;
 		// font-weight: 700;
-		color: $main-font-color;
+		color: variables.$main-font-color;
 		font-size: 0.875rem;
 		position: relative;
 		left: 0;
@@ -184,33 +188,33 @@
 	.btn {
 		border-left-width: 0;
 		padding: 0.5rem 1rem;
-		background-color: $grey-lighter;
+		background-color: variables.$grey-lighter;
 		background-position: center;
 		background-repeat: no-repeat;
 
 		&:hover {
-			background-color: $grey-light;
+			background-color: variables.$grey-light;
 		}
 	}
 
 	.stick {
-		background: $grey-lighter;
+		background: variables.$grey-lighter;
 
 		.btn {
 			border-left-width: 0;
 			padding: 0.5rem 1rem;
-			background-color: $grey-lighter;
+			background-color: variables.$grey-lighter;
 			background-position: center;
 			background-repeat: no-repeat;
 
-			@include transition(all, 0.15s, ease-in-out);
+			@include mixins.transition(all, 0.15s, ease-in-out);
 
 			&:hover {
-				background-color: $grey-medium-light;
+				background-color: variables.$grey-medium-light;
 			}
 
 			&.active {
-				background-color: $main-first;
+				background-color: variables.$main-first;
 			}
 
 			img.icon {display: none;} // on efface pour afficher nos icones, mouhahaha !!
@@ -253,13 +257,13 @@
 			&.read_all {
 				padding: 5px 16px;
 				// min-height: 0;
-				color: $main-font-color;
-				background-color: $grey-lighter;
+				color: variables.$main-font-color;
+				background-color: variables.$grey-lighter;
 
-				@include transition(all, 0.15s, ease-in-out);
+				@include mixins.transition(all, 0.15s, ease-in-out);
 
 				&:hover {
-					background-color: $grey-medium-light;
+					background-color: variables.$grey-medium-light;
 				}
 			}
 
@@ -319,19 +323,19 @@
 
 	h1.title, h1 {
 		a {
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			font-family: "spectral", serif;
 			font-size: 2rem;
 
 			&:hover {
-				color: $main-first;
+				color: variables.$main-first;
 				text-decoration: none;
 			}
 		}
 	}
 
 	.author {
-		color: $light-font-color;
+		color: variables.$light-font-color;
 		font-size: 1.125rem;
 	}
 
@@ -342,7 +346,7 @@
 
 	.content hr {
 		margin: 30px 10px;
-		background: $grey-medium-light;
+		background: variables.$grey-medium-light;
 		height: 1px;
 		border: 0;
 		box-shadow: 0 2px 5px #ccc;
@@ -352,22 +356,22 @@
 		margin: 10px auto;
 		padding: 10px 20px;
 		overflow: auto;
-		background: $main-first-darker;
-		color: $white;
+		background: variables.$main-first-darker;
+		color: variables.$white;
 		font-size: 0.9rem;
 		border-radius: 3px;
 
 		code {
 			background: transparent;
-			color: $white;
+			color: variables.$white;
 			border: none;
 		}
 	}
 
 	code {
 		padding: 2px 5px;
-		background: $grey-lighter;
-		border: 1px solid $grey-light;
+		background: variables.$grey-lighter;
+		border: 1px solid variables.$grey-light;
 		border-radius: 3px;
 	}
 
@@ -375,11 +379,11 @@
 	blockquote {
 		margin: 0;
 		padding: 5px 20px;
-		background: $grey-lighter;
+		background: variables.$grey-lighter;
 		display: block;
-		color: $main-font-color;
-		border-top: 1px solid $grey-medium-light;
-		border-bottom: 1px solid $grey-medium-light;
+		color: variables.$main-font-color;
+		border-top: 1px solid variables.$grey-medium-light;
+		border-bottom: 1px solid variables.$grey-medium-light;
 
 		p {
 			margin: 0;
@@ -393,10 +397,10 @@
 .notification {
 
 	padding: 1rem 0;
-	background: $grey-medium-light;
+	background: variables.$grey-medium-light;
 	width: 100%;
 	height: 3rem;
-	color: $grey-dark;
+	color: variables.$grey-dark;
 	// font-weight: bold;
 	font-size: 1em;
 	// border-radius: 3px;
@@ -417,13 +421,13 @@
 	}
 
 	&.good {
-		background: $success-bg;
-		color: $white;
+		background: variables.$success-bg;
+		color: variables.$white;
 	}
 
 	&.bad {
-		background: $alert-bg;
-		color: $white;
+		background: variables.$alert-bg;
+		color: variables.$white;
 	}
 
 	a.close {
@@ -433,11 +437,11 @@
 	}
 
 	&.good a.close:hover {
-		background: $success-text;
+		background: variables.$success-text;
 	}
 
 	&.bad a.close:hover {
-		background: $alert-text;
+		background: variables.$alert-text;
 	}
 
 	&#actualizeProgress {
@@ -456,5 +460,5 @@
 	text-align: center;
 	line-height: 3em;
 	table-layout: fixed;
-	background: $sid-bg;
+	background: variables.$sid-bg;
 }

p/themes/Ansum/_list-view.scss

@@ -1,68 +1,74 @@
+@use "sass:color";
+
+@use "mixins";
+
+@use "variables";
+
 /*=== Feed articles */
 .flux {
 	// border-left: 2px solid #ecf0f1;
-	background: $white;
+	background: variables.$white;
 
-	@include transition(all, 0.15s, ease-in-out);
+	@include mixins.transition(all, 0.15s, ease-in-out);
 
 	&:hover {
-		background: $grey-lighter;
+		background: variables.$grey-lighter;
 
 		&:not(.current):hover .item.title {
-			background: $grey-lighter;
+			background: variables.$grey-lighter;
 
 
 		}
 	}
 
 	&.current {
-		background: $white;
-		border-left-color: $main-first;
+		background: variables.$white;
+		border-left-color: variables.$main-first;
 	}
 
 	&.not_read:not(.current) {
-		background: $unread-bg; //--------------------
+		background: variables.$unread-bg; //--------------------
 
 		&:hover .item.title {
-			background: $unread-bg;
+			background: variables.$unread-bg;
 		}
 	}
 
 	&.not_read {
 		.item.title {
 			a {
-				color: $unread-font-color; //--------------------
+				color: variables.$unread-font-color; //--------------------
 			}
 		}
 
 		.item.website {
 			a {
-				color: $unread-font-color; //--------------------
+				color: variables.$unread-font-color; //--------------------
 			}
 		}
 
 		.item.date {
-			color: scale-color($unread-font-color, $alpha: -50%);
+			color: color.scale(variables.$unread-font-color, $alpha: -50%);
 		}
 	}
 
 	&.favorite {
-		border-left-color: $fav-bg;
+		border-left-color: variables.$fav-bg;
 
-		@include transition(all, 0.15s, ease-in-out);
+		@include mixins.transition(all, 0.15s, ease-in-out);
 	}
 
 	&.favorite:not(.current) {
-		background: $fav-light;
+		background: variables.$fav-light;
 
 		&:hover .item.title {
-			background: $fav-light;
+			background: variables.$fav-light;
 		}
 	}
 
 	.website {
 		a {
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			opacity: 0.75;
 		}
 
@@ -72,7 +78,7 @@
 	}
 
 	.item.date {
-		color: scale-color($main-font-color, $alpha: -50%);
+		color: color.scale(variables.$main-font-color, $alpha: -50%);
 		font-size: 0.85rem;
 	}
 
@@ -85,7 +91,7 @@
 .flux_header {
 	font-size: 1rem;
 	cursor: pointer;
-	border-top: 1px solid $grey-light;
+	border-top: 1px solid variables.$grey-light;
 
 	.title {
 		font-size: 1rem;

p/themes/Ansum/_logs.scss

@@ -1,15 +1,17 @@
+@use "variables";
+
 /*=== LOGS */
 /*=========*/
 .loglist {
 	overflow: hidden;
-	border: 1px solid $grey-medium-dark;
+	border: 1px solid variables.$grey-medium-dark;
 }
 
 .log {
 	margin: 10px 0;
 	padding: 5px 2%;
-	background: $grey-lighter;
-	color: $grey-dark;
+	background: variables.$grey-lighter;
+	color: variables.$grey-dark;
 	font-size: 0.8rem;
 	overflow: auto;
 }
@@ -21,19 +23,19 @@
 }
 
 .log.error > .date {
-	background: $alert-bg;
+	background: variables.$alert-bg;
 	color: #fff;
 }
 
 .log.warning > .date {
-	background: $warning-bg;
+	background: variables.$warning-bg;
 }
 
 .log.notice > .date {
-	background: $grey-light;
+	background: variables.$grey-light;
 }
 
 .log.debug > .date {
-	background: $main-first-darker;
-	color: $white;
+	background: variables.$main-first-darker;
+	color: variables.$white;
 }

p/themes/Ansum/_mixins.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 /* stylelint-disable property-no-vendor-prefix */
 
 /* FUNCTIONS */
@@ -5,65 +6,40 @@
 //animation
 
 @mixin transition($target, $duration, $ease) {
-	-webkit-transition: $target $duration $ease;
-	-moz-transition: $target $duration $ease;
-	-o-transition: $target $duration $ease;
 	transition: $target $duration $ease;
 }
 
 //animation
 
 @mixin animation-delay($delay) {
-	-webkit-animation-delay: $delay;
-	/* Safari 4.0 - 8.0 */
 	animation-delay: $delay;
 }
 
 //animation
 
 @mixin animation($animate...) {
-	$max: length($animate);
+	$max: list.length($animate);
 	$animations: '';
 
 	@for $i from 1 through $max {
-		$animations: #{$animations + nth($animate, $i)};
+		$animations: #{$animations + list.nth($animate, $i)};
 
 		@if $i < $max {
 			$animations: #{$animations + ", "};
 		}
 	}
-	-webkit-animation: $animations;
-	-moz-animation: $animations;
-	-o-animation: $animations;
-	animation: $animations;
+	animation: #{$animations};
 }
 
 //keyframes
 
 @mixin keyframes($animationName) {
 
-	@-webkit-keyframes #{$animationName} {
-		@content;
-	}
-
-	@-moz-keyframes #{$animationName} {
-		@content;
-	}
-
-	@-o-keyframes #{$animationName} {
-		@content;
-	}
-
 	@keyframes #{$animationName} {
 		@content;
 	}
 }
 
 @mixin border-radius($radius: 4px) {
-	-moz-border-radius: $radius;
-	-webkit-border-radius: $radius;
-	-ms-border-radius: $radius;
-	-o-border-radius: $radius;
-	-khtml-border-radius: $radius;
 	border-radius: $radius;
 }

p/themes/Ansum/_mobile.scss

@@ -1,3 +1,7 @@
+@use "mixins";
+
+@use "variables";
+
 /*=== MOBILE */
 /*===========*/
 
@@ -18,18 +22,18 @@
 				box-sizing: border-box;
 				padding: 1rem 1rem 1rem 2.5rem;
 
-				background: url("../../themes/icons/logout.svg") no-repeat $sid-bg-dark 3% center;
+				background: url("../../themes/icons/logout.svg") no-repeat variables.$sid-bg-dark 3% center;
 				display: inline-block;
 				width: 100%;
-				color: $sid-font-color;
+				color: variables.$sid-font-color;
 
-				@include transition(all, 0.2s, ease-in-out);
+				@include mixins.transition(all, 0.2s, ease-in-out);
 
 				&:hover,
 				&:active {
-					background: url("../../themes/icons/logout.svg") no-repeat $alert-bg 3% center;
+					background: url("../../themes/icons/logout.svg") no-repeat variables.$alert-bg 3% center;
 					text-decoration: none;
-					color: $white;
+					color: variables.$white;
 				}
 			}
 
@@ -43,7 +47,7 @@
 
 	.aside {
 
-		@include transition(all, 0.2s, ease-in-out);
+		@include mixins.transition(all, 0.2s, ease-in-out);
 
 		&.aside_feed {
 			padding: 0;
@@ -58,7 +62,7 @@
 	#panel .close,
 	#close-slider.active,
 	.dropdown-menu .toggle_aside {
-		background: $main-first-alt;
+		background: variables.$main-first-alt;
 		display: block;
 		width: 100%;
 		height: 50px;
@@ -149,9 +153,9 @@
 
 	.dropdown-target:target {
 		~ .dropdown-toggle::after {
-			background-color: $grey-lighter;
-			border-top: 1px solid $grey-light;
-			border-left: 1px solid $grey-light;
+			background-color: variables.$grey-lighter;
+			border-top: 1px solid variables.$grey-light;
+			border-left: 1px solid variables.$grey-light;
 			right: 21px;
 			bottom: -14px;
 		}

p/themes/Ansum/_reader-view.scss

@@ -1,14 +1,16 @@
+@use "variables";
+
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
 	padding: 0 0 50px;
-	background: $grey-light;
-	color: $main-font-color;
+	background: variables.$grey-light;
+	color: variables.$main-font-color;
 	border: none;
 }
 
 #stream.reader .flux .author {
 	margin: 0 0 10px;
-	color: $grey-medium-dark;
+	color: variables.$grey-medium-dark;
 	font-size: 90%;
 }

p/themes/Ansum/_sidebar.scss

@@ -1,19 +1,25 @@
+@use "sass:string";
+
+@use "mixins";
+
+@use "variables";
+
 /*=== Tree */
 .tree {
 	margin: 10px 0;
 
 	&#sidebar {
 		scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
-		scrollbar-color: unquote($sid-font-color+"33") unquote($sid-font-color+"22");
+		scrollbar-color: string.unquote(variables.$sid-font-color + "33") string.unquote(variables.$sid-font-color + "22");
 	}
 
 	.tree-folder {
-		border-bottom: 1px solid $sid-sep;
+		border-bottom: 1px solid variables.$sid-sep;
 		box-shadow: inset -1px -11px 8px #0003;
 
 		.tree-folder-title {
 			padding: 12px 16px;
-			background: $sid-bg;
+			background: variables.$sid-bg;
 			position: relative;
 			font-size: 0.85rem;
 			letter-spacing: 1px;
@@ -22,7 +28,7 @@
 
 			.title {
 				background: inherit;
-				color: $sid-font-color;
+				color: variables.$sid-font-color;
 
 				&:hover {
 					text-decoration: none;
@@ -32,13 +38,13 @@
 
 		&.active {
 			.tree-folder-title {
-				background: $sid-bg;
+				background: variables.$sid-bg;
 				font-weight: bold;
 			}
 		}
 
 		.tree-folder-items {
-			background: $sid-bg-alt;
+			background: variables.$sid-bg-alt;
 
 			.item {
 				padding: 0 1rem;
@@ -46,38 +52,38 @@
 				font-size: 1rem;
 				font-weight: 400;
 
-				@include transition(all, 0.15s, ease-in-out);
+				@include mixins.transition(all, 0.15s, ease-in-out);
 
 				&.active {
-					background: $sid-active;
+					background: variables.$sid-active;
 
 					.dropdown li a {
-						color: $main-font-color;
+						color: variables.$main-font-color;
 
 						&:hover {
-							color: $sid-font-color;
+							color: variables.$sid-font-color;
 						}
 					}
 
 					a {
-						color: $sid-active-font;
+						color: variables.$sid-active-font;
 					}
 				}
 
 				&:hover {
-					background: $sid-bg-dark;
+					background: variables.$sid-bg-dark;
 				}
 
 				a {
 					text-decoration: none;
-					color: $sid-font-color;
+					color: variables.$sid-font-color;
 				}
 			}
 
 			.feed .item-title:not([data-unread="0"])::before {
 				margin: 11px 6px 0 4px;
 				padding: 3px 4px;
-				background: $sid-pills;
+				background: variables.$sid-pills;
 				display: block;
 				float: left;
 				font-size: 0.75rem;
@@ -117,20 +123,20 @@
 	.dropdown + .btn,
 	.dropdown + input,
 	.dropdown + .dropdown > .btn {
-		border-left: 1px solid $grey-medium-light;
+		border-left: 1px solid variables.$grey-medium-light;
 	}
 
 }
 
 .aside {
-	background: $sid-bg;
+	background: variables.$sid-bg;
 
 
 	&.aside_feed {
 		padding: 10px 0;
 		text-align: center;
-		background: $sid-bg;
-		border-right: 1px solid $sid-sep;
+		background: variables.$sid-bg;
+		border-right: 1px solid variables.$sid-sep;
 	}
 
 	&.aside_feed .tree {
@@ -154,65 +160,65 @@
 	}
 
 	.item {
-		background: $sid-bg;
+		background: variables.$sid-bg;
 
-		@include transition(all, 0.15s, ease-in-out);
+		@include mixins.transition(all, 0.15s, ease-in-out);
 
 		a {
 			padding: 0 1rem;
-			color: $sid-font-color;
+			color: variables.$sid-font-color;
 		}
 
 		.error {
 			a {
-				color: $alert-bg;
+				color: variables.$alert-bg;
 			}
 		}
 
 		&:hover {
-			background: $sid-bg-dark;
-			color: $sid-font-color;
+			background: variables.$sid-bg-dark;
+			color: variables.$sid-font-color;
 
 			.error {
 				a {
-					background: $main-first;
-					color: $sid-font-color;
+					background: variables.$main-first;
+					color: variables.$sid-font-color;
 				}
 			}
 
 			.empty {
 				a {
-					background: $warning-bg;
-					color: $sid-font-color;
+					background: variables.$warning-bg;
+					color: variables.$sid-font-color;
 				}
 			}
 
 			a {
-				color: $sid-font-color;
+				color: variables.$sid-font-color;
 				text-decoration: none;
 			}
 		}
 
 		&.active {
-			background: $main-first;
-			color: $white;
+			background: variables.$main-first;
+			color: variables.$white;
 
 			.error {
 				a {
-					background: $main-first;
-					color: $white;
+					background: variables.$main-first;
+					color: variables.$white;
 				}
 			}
 
 			.empty {
 				a {
-					background: $warning-bg;
-					color: $white;
+					background: variables.$warning-bg;
+					color: variables.$white;
 				}
 			}
 
 			a {
-				color: $white;
+				color: variables.$white;
 				text-decoration: none;
 			}
 		}
@@ -221,20 +227,20 @@
 
 	&.empty {
 		a {
-			color: $warning-bg;
+			color: variables.$warning-bg;
 		}
 	}
 
 	.disable {
 		text-align: center;
-		background: $grey-lighter;
-		color: $grey-medium-dark;
+		background: variables.$grey-lighter;
+		color: variables.$grey-medium-dark;
 	}
 
 	.nav-header {
 		padding: 0 10px;
 		font-weight: bold;
-		color: $grey-dark;
+		color: variables.$grey-dark;
 		text-transform: uppercase;
 		letter-spacing: 1px;
 		margin-top: 1rem;
@@ -249,10 +255,10 @@
 		margin: 0;
 		text-align: right;
 		// background: #34495e;
-		color: $white;
+		color: variables.$white;
 
 		a {
-			color: $white;
+			color: variables.$white;
 		}
 
 		.item {
@@ -271,7 +277,7 @@
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
 	margin: -0.25rem 1rem 0 0;
 	padding: 0 0.75rem;
-	background: $sid-pills;
+	background: variables.$sid-pills;
 	border-radius: 12px;
 	position: absolute;
 	right: 0;
@@ -280,28 +286,28 @@
 }
 
 .feed.item.empty.active {
-	background: $grey-dark;
+	background: variables.$grey-dark;
 }
 
 .feed.item.error.active {
-	background: $grey-dark;
+	background: variables.$grey-dark;
 }
 
 .feed.item.empty,
 .feed.item.empty > a {
-	color: $grey-dark;
+	color: variables.$grey-dark;
 }
 
 .feed.item.error,
 .feed.item.error > a {
-	color: $grey-dark;
+	color: variables.$grey-dark;
 }
 
 .feed.item.empty.active,
 .feed.item.error.active,
 .feed.item.empty.active > a,
 .feed.item.error.active > a {
-	color: $white;
+	color: variables.$white;
 }
 
 .aside_feed .tree-folder-items .dropdown-menu::after {
@@ -315,5 +321,5 @@
 }
 
 .aside_feed .stick #btn-add {
-	border-left-color: $sid-bg;
+	border-left-color: variables.$sid-bg;
 }

p/themes/Ansum/_stats.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*=== STATISTICS */
 /*===============*/
 .stat {
@@ -12,7 +14,7 @@
 
 .stat > table td,
 .stat > table th {
-	border-bottom: 1px solid $grey-medium-light;
+	border-bottom: 1px solid variables.$grey-medium-light;
 }
 
 .stat > .horizontal-list {

p/themes/Ansum/_tables.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -5,11 +7,11 @@ table {
 
 tr, th, td {
 	padding: 0.5em;
-	border: 1px solid $grey-medium-light;
+	border: 1px solid variables.$grey-medium-light;
 }
 
 th {
-	background: $grey-lighter;
+	background: variables.$grey-lighter;
 }
 
 form td,

p/themes/Ansum/_variables.scss

@@ -49,5 +49,6 @@ $sid-bg-alt: #f7f2ea; // background inside groups
 $sid-bg-dark: #efe3d3; // les hovers
 $sid-sep: #f0e7da; // les séparateurs
 $sid-active: $main-first; // la couleur active
-$sid-active-font: #fff; // la couleur active
+// stylelint-disable-next-line color-hex-length
+$sid-active-font: #ffffff; // la couleur active
 $sid-pills: rgba(35,35,0, 0.15); // les gélules

p/themes/Ansum/ansum.css

@@ -574,7 +574,7 @@ form th {
 	color: #363330;
 }
 .tree .tree-folder .tree-folder-items .item.active a {
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-items .item:hover {
 	background: #efe3d3;

p/themes/Ansum/ansum.rtl.css

@@ -574,7 +574,7 @@ form th {
 	color: #363330;
 }
 .tree .tree-folder .tree-folder-items .item.active a {
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-items .item:hover {
 	background: #efe3d3;

p/themes/Ansum/ansum.scss

@@ -1,41 +1,41 @@
-@import "fonts";
+@use "fonts";
 
-@import "mixins";
+@use "mixins";
 
-@import "variables";
+@use "variables";
 
-@import "forms";
+@use "forms";
 
-@import "tables";
+@use "tables";
 
-@import "components";
+@use "components";
 
-@import "divers";
+@use "divers";
 
-@import "sidebar";
+@use "sidebar";
 
-@import "layout";
+@use "layout";
 
-@import "list-view";
+@use "list-view";
 
-@import "global-view";
+@use "global-view";
 
-@import "reader-view";
+@use "reader-view";
 
-@import "configuration";
+@use "configuration";
 
-@import "logs";
+@use "logs";
 
-@import "stats";
+@use "stats";
 
-@import "mobile";
+@use "mobile";
 
 @charset "UTF-8";
 
 /*=== GENERAL */
 /*============*/
 html, body {
-	background: $grey-light;
+	background: variables.$grey-light;
 	height: 100%;
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 0.875rem;
@@ -44,5 +44,5 @@ html, body {
 /*=== Links */
 a, button.as-link {
 	outline: none;
-	color: $main-first;
+	color: variables.$main-first;
 }

p/themes/Mapco/_components.scss

@@ -1,3 +1,9 @@
+@use "sass:string";
+
+@use "mixins";
+
+@use "variables";
+
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
@@ -22,7 +28,7 @@
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
-	background: $grey-lighter;
+	background: variables.$grey-lighter;
 	font-size: 1rem;
 	border: none;
 	border-radius: 3px;
@@ -39,7 +45,7 @@
 		margin: 1.75rem 0 0.5rem 2rem;
 		font-weight: bold;
 		text-align: left;
-		color: $grey-dark;
+		color: variables.$grey-dark;
 		text-transform: uppercase;
 		letter-spacing: 1px;
 
@@ -47,22 +53,22 @@
 
 	.item {
 
-		@include transition(all, 0.075s, ease-in-out);
+		@include mixins.transition(all, 0.075s, ease-in-out);
 
 		a, span, .as-link {
 			padding: 0 2rem;
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			font-size: 1rem;
 			line-height: 2.5em;
 		}
 
 		&:hover {
-			background: $main-first;
-			color: $white;
+			background: variables.$main-first;
+			color: variables.$white;
 
 			a, button {
 				text-decoration: none;
-				color: $white;
+				color: variables.$white;
 			}
 		}
 
@@ -84,7 +90,7 @@
 
 	.separator {
 		margin: 0.75rem 0;
-		border-bottom: 1px solid $grey-light;
+		border-bottom: 1px solid variables.$grey-light;
 		// display: none;
 	}
 
@@ -97,15 +103,15 @@
 
 		a,
 		button {
-			color: $main-font-color;
+			color: variables.$main-font-color;
 
 			&:hover {
-				color: $white;
+				color: variables.$white;
 			}
 		}
 
 		&:hover {
-			background: $main-first;
+			background: variables.$main-first;
 		}
 	}
 }
@@ -118,12 +124,12 @@
 	margin: 1rem 0;
 	// width: 100%;
 	padding: 1rem;
-	background: $grey-lighter;
-	color: $grey-dark;
+	background: variables.$grey-lighter;
+	color: variables.$grey-dark;
 	font-size: 1rem;
-	border: 1px solid $grey-medium;
+	border: 1px solid variables.$grey-medium;
 	border-radius: 3px;
-	text-shadow: 0 0 1px $grey-light;
+	text-shadow: 0 0 1px variables.$grey-light;
 }
 
 .alert-head {
@@ -136,48 +142,48 @@
 }
 
 .alert-warn {
-	background: $warning-light;
-	color: $warning-text;
-	border: 1px solid unquote($warning-text+'33'); // on ajoute l’opacité à la fin
+	background: variables.$warning-light;
+	color: variables.$warning-text;
+	border: 1px solid string.unquote(variables.$warning-text + '33'); // on ajoute l’opacité à la fin
 }
 
 .alert-success {
-	background: $success-light;
-	color: $success-text;
-	border: 1px solid unquote($success-text+'33');
+	background: variables.$success-light;
+	color: variables.$success-text;
+	border: 1px solid string.unquote(variables.$success-text + '33');
 }
 
 .alert-error {
-	background: $alert-light;
-	color: $alert-text;
-	border: 1px solid unquote($alert-text+'33');
+	background: variables.$alert-light;
+	color: variables.$alert-text;
+	border: 1px solid string.unquote(variables.$alert-text + '33');
 }
 
 /*=== Pagination */
 .pagination {
-	background: $grey-light;
-	color: $main-font-color;
+	background: variables.$grey-light;
+	color: variables.$main-font-color;
 	font-size: 0.8em;
 	text-align: center;
 
 	.item {
 		&.pager-current {
-			background: $sid-bg;
-			color: $grey-light;
+			background: variables.$sid-bg;
+			color: variables.$grey-light;
 			font-size: 1.5em;
 			font-weight: bold;
 		}
 
 		a {
 			display: block;
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			font-style: italic;
 			line-height: 3em;
 			text-decoration: none;
 
 			&:hover {
-				background: $main-font-color;
-				color: $grey-light;
+				background: variables.$main-font-color;
+				color: variables.$grey-light;
 			}
 		}
 	}
@@ -197,7 +203,7 @@
 
 /*=== Boxes */
 .box {
-	background: $white;
+	background: variables.$white;
 	// border: 1px solid #ddd;
 	border: none;
 	border-radius: 3px;
@@ -207,8 +213,8 @@
 	.box-title {
 		margin: 0;
 		padding: 5px 10px;
-		background: $grey-light;
-		color: $main-font-color;
+		background: variables.$grey-light;
+		color: variables.$main-font-color;
 		// border-bottom: 1px solid #ddd;
 		border-radius: 2px 2px 0 0;
 
@@ -233,7 +239,7 @@
 				}
 
 				&:hover {
-					background: url("icons/cog-white.svg") no-repeat 4px 4px $main-first;
+					background: url("icons/cog-white.svg") no-repeat 4px 4px variables.$main-first;
 				}
 			}
 		}
@@ -269,9 +275,9 @@
 
 		.item {
 			padding: 0.5rem 0;
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			font-size: 1rem;
-			border-bottom: 1px solid $grey-light;
+			border-bottom: 1px solid variables.$grey-light;
 			line-height: 1.7em;
 
 			img {
@@ -295,7 +301,7 @@
 
 				&:hover {
 					// background: $main-first;
-					background: url("icons/cog-white.svg") no-repeat 4px 4px $main-first;
+					background: url("icons/cog-white.svg") no-repeat 4px 4px variables.$main-first;
 				}
 			}
 
@@ -311,13 +317,13 @@
 #bigMarkAsRead {
 	text-align: center;
 	text-decoration: none;
-	background: $main-first-light;
-	color: $main-first;
+	background: variables.$main-first-light;
+	color: variables.$main-first;
 
-	@include transition(all, 0.15s, ease-in-out);
+	@include mixins.transition(all, 0.15s, ease-in-out);
 
 	&:hover {
-		background: $main-first;
+		background: variables.$main-first;
 		color: #fff;
 
 		.bigTick {
@@ -338,7 +344,7 @@
 
 // page de login
 .formLogin {
-	background: $sid-bg;
+	background: variables.$sid-bg;
 
 	.header {
 		.configure {
@@ -349,13 +355,13 @@
 			}
 
 			a.signin {
-				color: $white;
+				color: variables.$white;
 			}
 		}
 	}
 
 	h1 {
-		color: $white;
+		color: variables.$white;
 	}
 
 	form#crypto-form {
@@ -363,18 +369,18 @@
 			margin-bottom: 1rem;
 
 			label {
-				color: $grey-medium;
+				color: variables.$grey-medium;
 				font-size: 1rem;
 
 
 			}
 
 			input {
-				background: $main-first-darker;
+				background: variables.$main-first-darker;
 
 				&:focus {
-					background: $grey-lighter;
-					color: $main-font-color;
+					background: variables.$grey-lighter;
+					color: variables.$main-font-color;
 				}
 			}
 		}

p/themes/Mapco/_configuration.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*=== Configuration pages */
 .post {
 	padding: 1rem 2rem;
@@ -33,7 +35,7 @@
 
 	h1, h2 { // pages titles
 		// font-family: "spectral";
-		color: $main-font-color;
+		color: variables.$main-font-color;
 		font-size: 3rem;
 		margin-top: 1.75rem;
 		font-weight: 300;
@@ -43,12 +45,12 @@
 	a[href="./"] { // C’est le bouton "Retour à vos flux"
 		margin: 0;
 		padding: 0.75rem 1.5rem;
-		background: $grey-lighter;
+		background: variables.$grey-lighter;
 		display: inline-block;
 		// border: none;
-		color: $grey-dark;
+		color: variables.$grey-dark;
 		font-size: 1rem;
-		border: 1px solid $grey-medium-light;
+		border: 1px solid variables.$grey-medium-light;
 		border-radius: 5px;
 		// min-height: 38px;
 		min-width: 15px;
@@ -58,9 +60,9 @@
 		overflow: hidden;
 
 		&:hover {
-			background: $main-first;
+			background: variables.$main-first;
 			color: white;
-			border: 1px solid $main-first;
+			border: 1px solid variables.$main-first;
 			text-decoration: none;
 		}
 	}

p/themes/Mapco/_forms.scss

@@ -1,10 +1,14 @@
+@use "mixins";
+
+@use "variables";
+
 /* btns */
 .btn {
 	margin: 0;
 	padding: 0.5rem 1.5rem;
-	background: $grey-lighter;
+	background: variables.$grey-lighter;
 	display: inline-block;
-	color: $grey-dark;
+	color: variables.$grey-dark;
 	font-size: 1rem;
 	border: none;
 	border-radius: 5px;
@@ -15,27 +19,27 @@
 	cursor: pointer;
 	overflow: hidden;
 
-	@include transition(all, 0.15s, ease-in-out);
+	@include mixins.transition(all, 0.15s, ease-in-out);
 
 	&.btn-important {
-		background: $main-first;
-		color: $white;
+		background: variables.$main-first;
+		color: variables.$white;
 
 		// @include transition(all, 0.15s, ease-in-out);
 		&:hover,
 		&:active {
-			background: $main-first-alt;
+			background: variables.$main-first-alt;
 		}
 	}
 
 
 	&.btn-attention {
-		background: $alert-bg;
+		background: variables.$alert-bg;
 		color: #fff;
 
 		&:hover,
 		&:active {
-			background: $alert-text;
+			background: variables.$alert-text;
 		}
 	}
 
@@ -66,7 +70,7 @@ label {
 	min-height: 25px;
 	padding: 5px 0;
 	cursor: pointer;
-	color: $grey-dark;
+	color: variables.$grey-dark;
 }
 
 textarea {
@@ -77,11 +81,11 @@ textarea {
 
 input, select, textarea, button {
 	padding: 5px 10px;
-	background: $white;
-	color: $grey-dark;
+	background: variables.$white;
+	color: variables.$grey-dark;
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 1rem;
-	border: 1px solid $grey-light;
+	border: 1px solid variables.$grey-light;
 	border-radius: 2px;
 	min-height: 25px;
 	line-height: 25px;
@@ -93,18 +97,18 @@ option {
 }
 
 input:focus, select:focus, textarea:focus {
-	color: $main-font-color;
-	border-color: $main-first;
+	color: variables.$main-font-color;
+	border-color: variables.$main-first;
 }
 
 input:invalid, select:invalid {
-	color: $alert-bg;
-	border-color: $alert-bg;
+	color: variables.$alert-bg;
+	border-color: variables.$alert-bg;
 	box-shadow: none;
 }
 
 input:disabled, select:disabled {
-	background: $grey-light;
+	background: variables.$grey-light;
 }
 
 input.extend {

p/themes/Mapco/_global-view.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*=== GLOBAL VIEW */
 /*================*/
 #stream {
@@ -20,7 +22,7 @@
 			background: none;
 
 			a.title {
-				color: $grey-dark;
+				color: variables.$grey-dark;
 				font-size: 1rem;
 				font-weight: normal;
 				text-decoration: none;
@@ -31,7 +33,7 @@
 				&:not([data-unread="0"])::after {
 					margin: -0.5rem 1rem 0 0;
 					padding: 0 0.75rem;
-					background: $grey-light;
+					background: variables.$grey-light;
 					border-radius: 12px;
 					position: absolute;
 					top: 1.75rem;
@@ -41,7 +43,7 @@
 				}
 
 				&:hover {
-					color: $main-first;
+					color: variables.$main-first;
 				}
 			}
 		}
@@ -55,11 +57,11 @@
 				font-size: 1rem;
 
 				a {
-					color: $main-font-color;
+					color: variables.$main-font-color;
 					font-weight: 400;
 
 					&:hover {
-						color: $main-first;
+						color: variables.$main-first;
 						text-decoration: none;
 					}
 				}

p/themes/Mapco/_layout.scss

@@ -1,9 +1,13 @@
+@use "mixins";
+
+@use "variables";
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
 .header {
 	padding: 0.5rem 1.35rem;
-	background: $sid-bg;
+	background: variables.$sid-bg;
 	display: block;
 	width: auto;
 	table-layout: none;
@@ -36,22 +40,22 @@
 			// width: 50%;
 			input {
 				width: 230px;
-				color: $sid-font-color;
+				color: variables.$sid-font-color;
 				border: none;
 				border-radius: 2px 0 0 2px;
-				background-color: $sid-bg-alt;
+				background-color: variables.$sid-bg-alt;
 
-				@include transition(all, 0.15s, ease-in-out);
+				@include mixins.transition(all, 0.15s, ease-in-out);
 
 				&:hover {
-					background-color: $sid-bg-dark;
+					background-color: variables.$sid-bg-dark;
 				}
 
 				&:focus {
 					width: 350px;
-					color: $grey-dark;
+					color: variables.$grey-dark;
 
-					background-color: $white;
+					background-color: variables.$white;
 				}
 			}
 
@@ -61,7 +65,7 @@
 				width: 3rem;
 				border-radius: 0 2px 2px 0;
 
-				background-color: $main-first;
+				background-color: variables.$main-first;
 				background-position: center;
 				background-repeat: no-repeat;
 				background-image: url(icons/magnifier.svg);
@@ -70,7 +74,7 @@
 				min-height: 35px;
 
 				&:hover {
-					background-color: $main-first-alt;
+					background-color: variables.$main-first-alt;
 				}
 			}
 		}
@@ -137,19 +141,19 @@
 
 /*=== New article notification */
 #new-article {
-	background: $main-first;
+	background: variables.$main-first;
 	font-size: 1rem;
 	text-align: center;
 }
 
 #new-article:hover {
-	background: $main-first-alt;
+	background: variables.$main-first-alt;
 }
 
 #new-article > a {
 	line-height: 3em;
 	font-weight: bold;
-	color: $white;
+	color: variables.$white;
 }
 
 #new-article > a:hover {
@@ -159,7 +163,7 @@
 /*=== Day indication */
 .day {
 	padding: 1rem 0 0 1.25rem;
-	color: $light-font-color;
+	color: variables.$light-font-color;
 	font-size: 0.875rem;
 	font-weight: 700;
 	line-height: 3em;
@@ -169,7 +173,7 @@
 	.name {
 		padding: 0 1rem 0 1rem;
 		// font-weight: 700;
-		color: $main-font-color;
+		color: variables.$main-font-color;
 		font-size: 0.875rem;
 		position: relative;
 		left: 0;
@@ -187,33 +191,33 @@
 	.btn {
 		border-left-width: 0;
 		padding: 0.5rem 1rem;
-		background-color: $grey-lighter;
+		background-color: variables.$grey-lighter;
 		background-position: center;
 		background-repeat: no-repeat;
 
 		&:hover {
-			background-color: $grey-light;
+			background-color: variables.$grey-light;
 		}
 	}
 
 	.stick {
-		background: $grey-lighter;
+		background: variables.$grey-lighter;
 
 		.btn {
 			border-left-width: 0;
 			padding: 0.5rem 1rem;
-			background-color: $grey-lighter;
+			background-color: variables.$grey-lighter;
 			background-position: center;
 			background-repeat: no-repeat;
 
-			@include transition(all, 0.15s, ease-in-out);
+			@include mixins.transition(all, 0.15s, ease-in-out);
 
 			&:hover {
-				background-color: $grey-medium-light;
+				background-color: variables.$grey-medium-light;
 			}
 
 			&.active {
-				background-color: $main-first;
+				background-color: variables.$main-first;
 			}
 
 			img.icon {display: none;} // on efface pour afficher nos icones, mouhahaha !!
@@ -256,13 +260,13 @@
 			&.read_all {
 				padding: 5px 16px;
 				// min-height: 0;
-				color: $main-font-color;
-				background-color: $grey-lighter;
+				color: variables.$main-font-color;
+				background-color: variables.$grey-lighter;
 
-				@include transition(all, 0.15s, ease-in-out);
+				@include mixins.transition(all, 0.15s, ease-in-out);
 
 				&:hover {
-					background-color: $grey-medium-light;
+					background-color: variables.$grey-medium-light;
 				}
 			}
 
@@ -309,7 +313,7 @@
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
-	background-color: $grey-medium-dark;
+	background-color: variables.$grey-medium-dark;
 	border-radius: 3px;
 }
 
@@ -323,19 +327,19 @@
 
 	h1.title, h1 {
 		a {
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			font-family: "spectral", serif;
 			font-size: 2rem;
 
 			&:hover {
-				color: $main-first;
+				color: variables.$main-first;
 				text-decoration: none;
 			}
 		}
 	}
 
 	.author {
-		color: $light-font-color;
+		color: variables.$light-font-color;
 		font-size: 1.125rem;
 	}
 
@@ -346,7 +350,7 @@
 
 	.content hr {
 		margin: 30px 10px;
-		background: $grey-medium-light;
+		background: variables.$grey-medium-light;
 		height: 1px;
 		border: 0;
 		box-shadow: 0 2px 5px #ccc;
@@ -356,22 +360,22 @@
 		margin: 10px auto;
 		padding: 10px 20px;
 		overflow: auto;
-		background: $main-first-darker;
-		color: $white;
+		background: variables.$main-first-darker;
+		color: variables.$white;
 		font-size: 0.9rem;
 		border-radius: 3px;
 
 		code {
 			background: transparent;
-			color: $white;
+			color: variables.$white;
 			border: none;
 		}
 	}
 
 	code {
 		padding: 2px 5px;
-		background: $grey-lighter;
-		border: 1px solid $grey-light;
+		background: variables.$grey-lighter;
+		border: 1px solid variables.$grey-light;
 		border-radius: 3px;
 	}
 
@@ -379,11 +383,11 @@
 	blockquote {
 		margin: 0;
 		padding: 5px 20px;
-		background: $grey-lighter;
+		background: variables.$grey-lighter;
 		display: block;
-		color: $main-font-color;
-		border-top: 1px solid $grey-medium-light;
-		border-bottom: 1px solid $grey-medium-light;
+		color: variables.$main-font-color;
+		border-top: 1px solid variables.$grey-medium-light;
+		border-bottom: 1px solid variables.$grey-medium-light;
 
 		p {
 			margin: 0;
@@ -397,10 +401,10 @@
 .notification {
 
 	padding: 1rem 0;
-	background: $grey-medium-light;
+	background: variables.$grey-medium-light;
 	width: 100%;
 	height: 3rem;
-	color: $grey-dark;
+	color: variables.$grey-dark;
 	// font-weight: bold;
 	font-size: 1em;
 	// border-radius: 3px;
@@ -421,13 +425,13 @@
 	}
 
 	&.good {
-		background: $success-bg;
-		color: $white;
+		background: variables.$success-bg;
+		color: variables.$white;
 	}
 
 	&.bad {
-		background: $alert-bg;
-		color: $white;
+		background: variables.$alert-bg;
+		color: variables.$white;
 	}
 
 	a.close {
@@ -437,11 +441,11 @@
 	}
 
 	&.good a.close:hover {
-		background: $success-text;
+		background: variables.$success-text;
 	}
 
 	&.bad a.close:hover {
-		background: $alert-text;
+		background: variables.$alert-text;
 	}
 
 	&#actualizeProgress {
@@ -460,5 +464,5 @@
 	text-align: center;
 	line-height: 3em;
 	table-layout: fixed;
-	background: $sid-bg;
+	background: variables.$sid-bg;
 }

p/themes/Mapco/_list-view.scss

@@ -1,69 +1,75 @@
+@use "sass:color";
+
+@use "mixins";
+
+@use "variables";
+
 /*=== Feed articles */
 .flux {
 	// border-left: 2px solid #ecf0f1;
-	background: $white;
+	background: variables.$white;
 
-	@include transition(all, 0.15s, ease-in-out);
+	@include mixins.transition(all, 0.15s, ease-in-out);
 
 	&:hover {
-		background: $grey-lighter;
+		background: variables.$grey-lighter;
 
 		&:not(.current):hover .item.title {
-			background: $grey-lighter;
+			background: variables.$grey-lighter;
 
 
 		}
 	}
 
 	&.current {
-		background: $grey-lighter;
-		border-left-color: $main-first;
+		background: variables.$grey-lighter;
+		border-left-color: variables.$main-first;
 	}
 
 	&.not_read:not(.current) {
-		background: $unread-bg; //--------------------
+		background: variables.$unread-bg; //--------------------
 
 		&:hover .item.title {
-			background: $unread-bg;
+			background: variables.$unread-bg;
 		}
 	}
 
 	&.not_read {
 		.item.title {
 			a {
-				color: $unread-font-color; //--------------------
+				color: variables.$unread-font-color; //--------------------
 			}
 
 		}
 
 		.item.website {
 			a {
-				color: $unread-font-color; //--------------------
+				color: variables.$unread-font-color; //--------------------
 			}
 		}
 
 		.item.date {
-			color: scale-color($unread-font-color, $alpha: -50%);
+			color: color.scale(variables.$unread-font-color, $alpha: -50%);
 		}
 	}
 
 	&.favorite {
-		border-left-color: $fav-bg;
+		border-left-color: variables.$fav-bg;
 
-		@include transition(all, 0.15s, ease-in-out);
+		@include mixins.transition(all, 0.15s, ease-in-out);
 	}
 
 	&.favorite:not(.current) {
-		background: $fav-light;
+		background: variables.$fav-light;
 
 		&:hover .item.title {
-			background: $fav-light;
+			background: variables.$fav-light;
 		}
 	}
 
 	.website {
 		a {
-			color: $main-font-color;
+			color: variables.$main-font-color;
 			opacity: 0.75;
 		}
 
@@ -73,7 +79,7 @@
 	}
 
 	.item.date {
-		color: scale-color($main-font-color, $alpha: -50%);
+		color: color.scale(variables.$main-font-color, $alpha: -50%);
 		font-size: 0.85rem;
 	}
 
@@ -86,7 +92,7 @@
 .flux_header {
 	font-size: 1rem;
 	cursor: pointer;
-	border-top: 1px solid $grey-light;
+	border-top: 1px solid variables.$grey-light;
 
 	.title {
 		font-size: 1rem;

p/themes/Mapco/_logs.scss

@@ -1,15 +1,17 @@
+@use "variables";
+
 /*=== LOGS */
 /*=========*/
 .loglist {
 	overflow: hidden;
-	border: 1px solid $grey-medium-dark;
+	border: 1px solid variables.$grey-medium-dark;
 }
 
 .log {
 	margin: 10px 0;
 	padding: 5px 2%;
-	background: $grey-lighter;
-	color: $grey-dark;
+	background: variables.$grey-lighter;
+	color: variables.$grey-dark;
 	font-size: 0.8rem;
 	overflow: auto;
 }
@@ -21,19 +23,19 @@
 }
 
 .log.error > .date {
-	background: $alert-bg;
+	background: variables.$alert-bg;
 	color: #fff;
 }
 
 .log.warning > .date {
-	background: $warning-bg;
+	background: variables.$warning-bg;
 }
 
 .log.notice > .date {
-	background: $grey-light;
+	background: variables.$grey-light;
 }
 
 .log.debug > .date {
-	background: $main-first-darker;
-	color: $white;
+	background: variables.$main-first-darker;
+	color: variables.$white;
 }

p/themes/Mapco/_mixins.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 /* stylelint-disable property-no-vendor-prefix */
 
 /* FUNCTIONS */
@@ -5,67 +6,40 @@
 //animation
 
 @mixin transition($target, $duration, $ease) {
-	-webkit-transition: $target $duration $ease;
-	-moz-transition: $target $duration $ease;
-	-o-transition: $target $duration $ease;
-	-ms-transition: $target $duration $ease;
 	transition: $target $duration $ease;
 }
 
 //animation
 
 @mixin animation-delay($delay) {
-	-webkit-animation-delay: $delay;
-	/* Safari 4.0 - 8.0 */
 	animation-delay: $delay;
 }
 
 //animation
 
 @mixin animation($animate...) {
-	$max: length($animate);
+	$max: list.length($animate);
 	$animations: '';
 
 	@for $i from 1 through $max {
-		$animations: #{$animations + nth($animate, $i)};
+		$animations: #{$animations + list.nth($animate, $i)};
 
 		@if $i < $max {
 			$animations: #{$animations + ", "};
 		}
 	}
-	-webkit-animation: $animations;
-	-moz-animation: $animations;
-	-o-animation: $animations;
-	-ms-transition: $animations;
-	animation: $animations;
+	animation: #{$animations};
 }
 
 //keyframes
 
 @mixin keyframes($animationName) {
 
-	@-webkit-keyframes #{$animationName} {
-		@content;
-	}
-
-	@-moz-keyframes #{$animationName} {
-		@content;
-	}
-
-	@-o-keyframes #{$animationName} {
-		@content;
-	}
-
 	@keyframes #{$animationName} {
 		@content;
 	}
 }
 
 @mixin border-radius($radius: 4px) {
-	-moz-border-radius: $radius;
-	-webkit-border-radius: $radius;
-	-ms-border-radius: $radius;
-	-o-border-radius: $radius;
-	-khtml-border-radius: $radius;
 	border-radius: $radius;
 }

p/themes/Mapco/_mobile.scss

@@ -1,3 +1,7 @@
+@use "mixins";
+
+@use "variables";
+
 /*=== MOBILE */
 /*===========*/
 
@@ -18,16 +22,16 @@
 				box-sizing: border-box;
 				padding: 1rem 1rem 1rem 2.5rem;
 
-				background: url("../../themes/icons/logout.svg") no-repeat $sid-bg-dark 3% center;
+				background: url("../../themes/icons/logout.svg") no-repeat variables.$sid-bg-dark 3% center;
 				display: inline-block;
 				width: 100%;
-				color: $sid-font-color;
+				color: variables.$sid-font-color;
 
-				@include transition(all, 0.2s, ease-in-out);
+				@include mixins.transition(all, 0.2s, ease-in-out);
 
 				&:hover,
 				&:active {
-					background: url("../../themes/icons/logout.svg") no-repeat $alert-bg 3% center;
+					background: url("../../themes/icons/logout.svg") no-repeat variables.$alert-bg 3% center;
 					text-decoration: none;
 				}
 			}
@@ -42,7 +46,7 @@
 
 	.aside {
 
-		@include transition(all, 0.2s, ease-in-out);
+		@include mixins.transition(all, 0.2s, ease-in-out);
 
 		&.aside_feed {
 			padding: 0;
@@ -57,7 +61,7 @@
 	#panel .close,
 	#close-slider.active,
 	.dropdown-menu .toggle_aside {
-		background: $main-first-alt;
+		background: variables.$main-first-alt;
 		display: block;
 		width: 100%;
 		height: 50px;
@@ -149,9 +153,9 @@
 
 	.dropdown-target:target {
 		~ .dropdown-toggle::after {
-			background-color: $grey-lighter;
-			border-top: 1px solid $grey-light;
-			border-left: 1px solid $grey-light;
+			background-color: variables.$grey-lighter;
+			border-top: 1px solid variables.$grey-light;
+			border-left: 1px solid variables.$grey-light;
 			right: 21px;
 			bottom: -14px;
 		}

p/themes/Mapco/_reader-view.scss

@@ -1,14 +1,16 @@
+@use "variables";
+
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
 	padding: 0 0 50px;
-	background: $grey-light;
-	color: $main-font-color;
+	background: variables.$grey-light;
+	color: variables.$main-font-color;
 	border: none;
 }
 
 #stream.reader .flux .author {
 	margin: 0 0 10px;
-	color: $grey-medium-dark;
+	color: variables.$grey-medium-dark;
 	font-size: 90%;
 }

p/themes/Mapco/_sidebar.scss

@@ -1,19 +1,25 @@
+@use "sass:string";
+
+@use "mixins";
+
+@use "variables";
+
 /*=== Tree */
 .tree {
 	margin: 10px 0;
 
 	&#sidebar {
 		scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
-		scrollbar-color: unquote($sid-font-color+"33") unquote($sid-font-color+"22");
+		scrollbar-color: string.unquote(variables.$sid-font-color + "33") string.unquote(variables.$sid-font-color + "22");
 	}
 
 
 	.tree-folder {
-		border-bottom: 1px solid $sid-sep;
+		border-bottom: 1px solid variables.$sid-sep;
 
 		.tree-folder-title {
 			padding: 12px 16px;
-			background: $sid-bg;
+			background: variables.$sid-bg;
 			position: relative;
 			font-size: 0.85rem;
 			letter-spacing: 1px;
@@ -22,7 +28,7 @@
 
 			.title {
 				background: inherit;
-				color: $sid-font-color;
+				color: variables.$sid-font-color;
 
 				&:hover {
 					text-decoration: none;
@@ -32,13 +38,13 @@
 
 		&.active {
 			.tree-folder-title {
-				background: $sid-bg;
+				background: variables.$sid-bg;
 				font-weight: bold;
 			}
 		}
 
 		.tree-folder-items {
-			background: $sid-bg-alt;
+			background: variables.$sid-bg-alt;
 
 			.item {
 				padding: 0 1rem;
@@ -46,38 +52,38 @@
 				font-size: 1rem;
 				font-weight: 400;
 
-				@include transition(all, 0.15s, ease-in-out);
+				@include mixins.transition(all, 0.15s, ease-in-out);
 
 				&.active {
-					background: $sid-active;
+					background: variables.$sid-active;
 
 					.dropdown li a {
-						color: $main-font-color;
+						color: variables.$main-font-color;
 
 						&:hover {
-							color: $sid-font-color;
+							color: variables.$sid-font-color;
 						}
 					}
 
 					a {
-						color: $sid-active-font;
+						color: variables.$sid-active-font;
 					}
 				}
 
 				&:hover {
-					background: $sid-bg-dark;
+					background: variables.$sid-bg-dark;
 				}
 
 				a {
 					text-decoration: none;
-					color: $sid-font-color;
+					color: variables.$sid-font-color;
 				}
 			}
 
 			.feed .item-title:not([data-unread="0"])::before {
 				margin: 11px 6px 0 4px;
 				padding: 3px 4px;
-				background: $sid-pills;
+				background: variables.$sid-pills;
 				display: block;
 				float: left;
 				font-size: 0.75rem;
@@ -117,18 +123,18 @@
 	.dropdown + .btn,
 	.dropdown + input,
 	.dropdown + .dropdown > .btn {
-		border-left: 1px solid $grey-medium-light;
+		border-left: 1px solid variables.$grey-medium-light;
 	}
 
 }
 
 .aside {
-	background: $sid-bg;
+	background: variables.$sid-bg;
 
 	&.aside_feed {
 		padding: 10px 0;
 		text-align: center;
-		background: $sid-bg;
+		background: variables.$sid-bg;
 	}
 
 	&.aside_feed .tree {
@@ -152,65 +158,65 @@
 	}
 
 	.item {
-		background: $sid-bg;
+		background: variables.$sid-bg;
 
-		@include transition(all, 0.15s, ease-in-out);
+		@include mixins.transition(all, 0.15s, ease-in-out);
 
 		a {
 			padding: 0 1rem;
-			color: $sid-font-color;
+			color: variables.$sid-font-color;
 		}
 
 		.error {
 			a {
-				color: $alert-bg;
+				color: variables.$alert-bg;
 			}
 		}
 
 		&:hover {
-			background: $sid-bg-dark;
-			color: $sid-font-color;
+			background: variables.$sid-bg-dark;
+			color: variables.$sid-font-color;
 
 			.error {
 				a {
-					background: $main-first;
-					color: $sid-font-color;
+					background: variables.$main-first;
+					color: variables.$sid-font-color;
 				}
 			}
 
 			.empty {
 				a {
-					background: $warning-bg;
-					color: $sid-font-color;
+					background: variables.$warning-bg;
+					color: variables.$sid-font-color;
 				}
 			}
 
 			a {
-				color: $sid-font-color;
+				color: variables.$sid-font-color;
 				text-decoration: none;
 			}
 		}
 
 		&.active {
-			background: $main-first;
-			color: $white;
+			background: variables.$main-first;
+			color: variables.$white;
 
 			.error {
 				a {
-					background: $main-first;
-					color: $white;
+					background: variables.$main-first;
+					color: variables.$white;
 				}
 			}
 
 			.empty {
 				a {
-					background: $warning-bg;
-					color: $white;
+					background: variables.$warning-bg;
+					color: variables.$white;
 				}
 			}
 
 			a {
-				color: $white;
+				color: variables.$white;
 				text-decoration: none;
 			}
 		}
@@ -219,20 +225,20 @@
 
 	&.empty {
 		a {
-			color: $warning-bg;
+			color: variables.$warning-bg;
 		}
 	}
 
 	.disable {
 		text-align: center;
-		background: $grey-lighter;
-		color: $grey-medium-dark;
+		background: variables.$grey-lighter;
+		color: variables.$grey-medium-dark;
 	}
 
 	.nav-header {
 		padding: 0 10px;
 		font-weight: bold;
-		color: $grey-dark;
+		color: variables.$grey-dark;
 		text-transform: uppercase;
 		letter-spacing: 1px;
 		margin-top: 1rem;
@@ -247,10 +253,10 @@
 		margin: 0;
 		text-align: right;
 		// background: #34495e;
-		color: $white;
+		color: variables.$white;
 
 		a {
-			color: $white;
+			color: variables.$white;
 		}
 
 		.item {
@@ -269,7 +275,7 @@
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
 	margin: -0.25rem 1rem 0 0;
 	padding: 0 0.75rem;
-	background: $sid-pills;
+	background: variables.$sid-pills;
 	border-radius: 12px;
 	position: absolute;
 	right: 0;
@@ -278,28 +284,28 @@
 }
 
 .feed.item.empty.active {
-	background: $grey-dark;
+	background: variables.$grey-dark;
 }
 
 .feed.item.error.active {
-	background: $grey-dark;
+	background: variables.$grey-dark;
 }
 
 .feed.item.empty,
 .feed.item.empty > a {
-	color: $grey-dark;
+	color: variables.$grey-dark;
 }
 
 .feed.item.error,
 .feed.item.error > a {
-	color: $grey-dark;
+	color: variables.$grey-dark;
 }
 
 .feed.item.empty.active,
 .feed.item.error.active,
 .feed.item.empty.active > a,
 .feed.item.error.active > a {
-	color: $white;
+	color: variables.$white;
 }
 
 .aside_feed .tree-folder-items .dropdown-menu::after {
@@ -313,5 +319,5 @@
 }
 
 .aside_feed .stick #btn-add {
-	border-left-color: $sid-bg;
+	border-left-color: variables.$sid-bg;
 }

p/themes/Mapco/_stats.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*=== STATISTICS */
 /*===============*/
 .stat {
@@ -12,7 +14,7 @@
 
 .stat > table td,
 .stat > table th {
-	border-bottom: 1px solid $grey-medium-light;
+	border-bottom: 1px solid variables.$grey-medium-light;
 }
 
 .stat > .horizontal-list {

p/themes/Mapco/_tables.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -5,11 +7,11 @@ table {
 
 tr, th, td {
 	padding: 0.5em;
-	border: 1px solid $grey-medium-light;
+	border: 1px solid variables.$grey-medium-light;
 }
 
 th {
-	background: $grey-lighter;
+	background: variables.$grey-lighter;
 }
 
 form td,

p/themes/Mapco/_variables.scss

@@ -43,11 +43,13 @@ $fav-bg: #ffc300;
 $fav-light: #fff6da;
 
 // la couleur de sidebar, utile si on a envie d’un thème qui aurait une sidebar foncé, e.g.
-$sid-font-color: #fff; // la couleur de fond de la barre de gauche et du header
+// stylelint-disable-next-line color-hex-length
+$sid-font-color: #ffffff; // la couleur de fond de la barre de gauche et du header
 $sid-bg: #303136; // le background général de la barre de gauche, et du header
 $sid-bg-alt: #26272a; // background inside groups
 $sid-bg-dark: #17181a; // les hovers
 $sid-sep: #3f3f3f; // les séparateurs
 $sid-active: $main-first; // la couleur active
-$sid-active-font: #fff; // la couleur active
+// stylelint-disable-next-line color-hex-length
+$sid-active-font: #ffffff; // la couleur active
 $sid-pills: rgba(0,0,0, 0.25); // les gélules

p/themes/Mapco/mapco.css

@@ -525,7 +525,7 @@ form th {
 }
 .tree#sidebar {
 	scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05);
-	scrollbar-color: #fff33 #fff22;
+	scrollbar-color: #ffffff33 #ffffff22;
 }
 .tree .tree-folder {
 	border-bottom: 1px solid #3f3f3f;
@@ -541,7 +541,7 @@ form th {
 }
 .tree .tree-folder .tree-folder-title .title {
 	background: inherit;
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-title .title:hover {
 	text-decoration: none;
@@ -567,17 +567,17 @@ form th {
 	color: #303136;
 }
 .tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover {
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-items .item.active a {
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-items .item:hover {
 	background: #17181a;
 }
 .tree .tree-folder .tree-folder-items .item a {
 	text-decoration: none;
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
 	margin: 11px 6px 0 4px;
@@ -645,25 +645,25 @@ form th {
 }
 .nav-list .item a {
 	padding: 0 1rem;
-	color: #fff;
+	color: #ffffff;
 }
 .nav-list .item .error a {
 	color: #f5633e;
 }
 .nav-list .item:hover {
 	background: #17181a;
-	color: #fff;
+	color: #ffffff;
 }
 .nav-list .item:hover .error a {
 	background: #36c;
-	color: #fff;
+	color: #ffffff;
 }
 .nav-list .item:hover .empty a {
 	background: #f4f762;
-	color: #fff;
+	color: #ffffff;
 }
 .nav-list .item:hover a {
-	color: #fff;
+	color: #ffffff;
 	text-decoration: none;
 }
 .nav-list .item.active {
@@ -797,7 +797,7 @@ form th {
 }
 .header .item.search input {
 	width: 230px;
-	color: #fff;
+	color: #ffffff;
 	border: none;
 	border-radius: 2px 0 0 2px;
 	background-color: #26272a;
@@ -1418,7 +1418,7 @@ form th {
 		background: url("../../themes/icons/logout.svg") no-repeat #17181a 3% center;
 		display: inline-block;
 		width: 100%;
-		color: #fff;
+		color: #ffffff;
 		transition: all 0.2s ease-in-out;
 	}
 	ul.nav .item a:hover, ul.nav .item a:active {

p/themes/Mapco/mapco.rtl.css

@@ -525,7 +525,7 @@ form th {
 }
 .tree#sidebar {
 	scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05);
-	scrollbar-color: #fff33 #fff22;
+	scrollbar-color: #ffffff33 #ffffff22;
 }
 .tree .tree-folder {
 	border-bottom: 1px solid #3f3f3f;
@@ -541,7 +541,7 @@ form th {
 }
 .tree .tree-folder .tree-folder-title .title {
 	background: inherit;
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-title .title:hover {
 	text-decoration: none;
@@ -567,17 +567,17 @@ form th {
 	color: #303136;
 }
 .tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover {
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-items .item.active a {
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-items .item:hover {
 	background: #17181a;
 }
 .tree .tree-folder .tree-folder-items .item a {
 	text-decoration: none;
-	color: #fff;
+	color: #ffffff;
 }
 .tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
 	margin: 11px 4px 0 6px;
@@ -645,25 +645,25 @@ form th {
 }
 .nav-list .item a {
 	padding: 0 1rem;
-	color: #fff;
+	color: #ffffff;
 }
 .nav-list .item .error a {
 	color: #f5633e;
 }
 .nav-list .item:hover {
 	background: #17181a;
-	color: #fff;
+	color: #ffffff;
 }
 .nav-list .item:hover .error a {
 	background: #36c;
-	color: #fff;
+	color: #ffffff;
 }
 .nav-list .item:hover .empty a {
 	background: #f4f762;
-	color: #fff;
+	color: #ffffff;
 }
 .nav-list .item:hover a {
-	color: #fff;
+	color: #ffffff;
 	text-decoration: none;
 }
 .nav-list .item.active {
@@ -797,7 +797,7 @@ form th {
 }
 .header .item.search input {
 	width: 230px;
-	color: #fff;
+	color: #ffffff;
 	border: none;
 	border-radius: 0 2px 2px 0;
 	background-color: #26272a;
@@ -1418,7 +1418,7 @@ form th {
 		background: url("../../themes/icons/logout.svg") no-repeat #17181a 97% center;
 		display: inline-block;
 		width: 100%;
-		color: #fff;
+		color: #ffffff;
 		transition: all 0.2s ease-in-out;
 	}
 	ul.nav .item a:hover, ul.nav .item a:active {

p/themes/Mapco/mapco.scss

@@ -1,41 +1,41 @@
-@import "fonts";
+@use "fonts";
 
-@import "mixins";
+@use "mixins";
 
-@import "variables";
+@use "variables";
 
-@import "forms";
+@use "forms";
 
-@import "tables";
+@use "tables";
 
-@import "components";
+@use "components";
 
-@import "divers";
+@use "divers";
 
-@import "sidebar";
+@use "sidebar";
 
-@import "layout";
+@use "layout";
 
-@import "list-view";
+@use "list-view";
 
-@import "global-view";
+@use "global-view";
 
-@import "reader-view";
+@use "reader-view";
 
-@import "configuration";
+@use "configuration";
 
-@import "logs";
+@use "logs";
 
-@import "stats";
+@use "stats";
 
-@import "mobile";
+@use "mobile";
 
 @charset "UTF-8";
 
 /*=== GENERAL */
 /*============*/
 html, body {
-	background: $grey-light;
+	background: variables.$grey-light;
 	height: 100%;
 	font-family: "lato", "Helvetica", "Arial", sans-serif;
 	font-size: 0.875rem;
@@ -44,5 +44,5 @@ html, body {
 /*=== Links */
 a, button.as-link {
 	outline: none;
-	color: $main-first;
+	color: variables.$main-first;
 }

p/themes/Swage/swage.css

@@ -1168,4 +1168,6 @@ button.as-link {
 }
 #slider .form-group:hover {
 	background: initial;
-}
+}
+
+/*# sourceMappingURL=swage.css.map */

p/themes/Swage/swage.rtl.css

@@ -1168,4 +1168,4 @@ button.as-link {
 }
 #slider .form-group:hover {
 	background: initial;
-}
+}

p/themes/Swage/swage.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @charset "UTF-8";
 //colors
 
@@ -61,7 +63,7 @@ body {
 }
 
 a {
-	color: darken( $color_nav, 10%);
+	color: color.adjust( $color_nav, $lightness: -10%);
 	outline: none;
 
 	&.btn {
@@ -70,7 +72,7 @@ a {
 		text-decoration: none;
 
 		&:hover {
-			background: darken( $color_nav, 10%);
+			background: color.adjust( $color_nav, $lightness: -10%);
 		}
 	}
 
@@ -100,7 +102,7 @@ sup {
 legend {
 	margin: 20px 0 5px;
 	padding: 5px 20px;
-	background: darken( $color_light, 10%);
+	background: color.adjust( $color_light, $lightness: -10%);
 	display: inline-block;
 	width: auto;
 	font-size: 1.4em;
@@ -112,14 +114,14 @@ label {
 }
 
 textarea {
-	background: darken( $color_light, 10% );
+	background: color.adjust( $color_light, $lightness: -10% );
 	width: 360px;
 	height: 100px;
 
 	@extend %input;
 
 	&:focus {
-		border-color: darken( $color_nav, 10%);
+		border-color: color.adjust( $color_nav, $lightness: -10%);
 	}
 }
 
@@ -129,7 +131,7 @@ select {
 	@extend %input;
 
 	&:focus {
-		border-color: darken( $color_nav, 10%);
+		border-color: color.adjust( $color_nav, $lightness: -10%);
 	}
 
 	&:invalid {
@@ -143,7 +145,7 @@ select {
 }
 
 select {
-	background: darken( $color_light, 10% );
+	background: color.adjust( $color_light, $lightness: -10% );
 }
 
 input {
@@ -164,7 +166,7 @@ tr,
 td,
 th {
 	padding: 0.5em;
-	border: 1px solid darken( $color_light, 10%);
+	border: 1px solid color.adjust( $color_light, $lightness: -10%);
 }
 
 th {
@@ -201,8 +203,8 @@ form {
 	&.form-actions {
 		margin: 15px 0 25px;
 		padding: 5px 0;
-		background: darken( $color_light, 10%);
-		border-top: 3px solid darken( $color_light, 10%);
+		background: color.adjust( $color_light, $lightness: -10%);
+		border-top: 3px solid color.adjust( $color_light, $lightness: -10%);
 
 		.btn {
 			margin: 0 10px;
@@ -256,7 +258,7 @@ form {
 	&.active,
 	:active,
 	:hover {
-		background: darken( $color_nav, 10%);
+		background: color.adjust( $color_nav, $lightness: -10%);
 		text-decoration: none;
 	}
 }
@@ -268,7 +270,7 @@ form {
 
 	&:hover,
 	:active {
-		background: darken( $color_alert, 10%) !important;
+		background: color.adjust( $color_alert, $lightness: -10%) !important;
 	}
 }
 
@@ -289,7 +291,7 @@ form {
 
 		&:hover,
 		&.active {
-			background: darken( $color_nav, 10%);
+			background: color.adjust( $color_nav, $lightness: -10%);
 			color: $color_light;
 
 			a {
@@ -306,7 +308,7 @@ form {
 			}
 
 			&.error a {
-				background: lighten( $color_bad, 10%);
+				background: color.adjust( $color_bad, $lightness: 10%);
 			}
 		}
 
@@ -319,14 +321,14 @@ form {
 		}
 
 		&.error a {
-			color: lighten( $color_bad, 10%);
+			color: color.adjust( $color_bad, $lightness: 10%);
 		}
 	}
 
 	.disable {
 		text-align: center;
 		background: $color_light;
-		color: darken( $color_light, 40% );
+		color: color.adjust( $color_light, $lightness: -40% );
 	}
 
 	.nav-form {
@@ -370,7 +372,7 @@ form {
 	font-size: 0.8rem;
 	text-align: left;
 	border: none;
-	background-color: darken( $color_nav, 10%);
+	background-color: color.adjust( $color_nav, $lightness: -10%);
 
 	.dropdown-header {
 		cursor: default;
@@ -435,7 +437,7 @@ form {
 
 .separator {
 	margin: 5px 0;
-	border-bottom: 1px solid darken( $color_light, 10%);
+	border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%);
 	cursor: default;
 }
 
@@ -443,7 +445,7 @@ form {
 	margin: 5px auto;
 	padding: 10px 15px;
 	background: $color_light;
-	color: darken( $color_light, 40% );
+	color: color.adjust( $color_light, $lightness: -40% );
 	font-size: 0.9em;
 	border: none;
 	text-shadow: 0 0 1px $color_light;
@@ -480,7 +482,7 @@ form {
 }
 
 .pagination {
-	background: darken( $color_light, 10%);
+	background: color.adjust( $color_light, $lightness: -10%);
 	color: $color_text;
 	font-size: 0.8em;
 	text-align: center;
@@ -488,7 +490,7 @@ form {
 	.item {
 		&.pager-current {
 			background: $color_aside;
-			color: darken( $color_light, 10%);
+			color: color.adjust( $color_light, $lightness: -10%);
 			font-size: 1.5em;
 			font-weight: bold;
 		}
@@ -502,7 +504,7 @@ form {
 
 			&:hover {
 				background: $color_aside;
-				color: darken( $color_light, 10%);
+				color: color.adjust( $color_light, $lightness: -10%);
 			}
 		}
 	}
@@ -524,10 +526,10 @@ form {
 
 	hr {
 		margin: 30px 10px;
-		background: darken( $color_light, 10%);
+		background: color.adjust( $color_light, $lightness: -10%);
 		height: 1px;
 		border: 0;
-		box-shadow: 0 2px 5px darken( $color_light, 10%);
+		box-shadow: 0 2px 5px color.adjust( $color_light, $lightness: -10%);
 	}
 
 	pre {
@@ -557,9 +559,9 @@ form {
 		padding: 5px 20px;
 		background: $color_light;
 		display: block;
-		color: darken( $color_light, 40% );
-		border-top: 1px solid darken( $color_light, 10%);
-		border-bottom: 1px solid darken( $color_light, 10%);
+		color: color.adjust( $color_light, $lightness: -40% );
+		border-top: 1px solid color.adjust( $color_light, $lightness: -10%);
+		border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%);
 
 		p {
 			margin: 0;
@@ -572,14 +574,14 @@ form {
 }
 
 .box {
-	border: 1px solid darken( $color_light, 10%);
+	border: 1px solid color.adjust( $color_light, $lightness: -10%);
 
 	.box-title {
 		margin: 0;
 		padding: 5px 10px;
-		background: darken( $color_light, 10%);
-		color: darken( $color_light, 40% );
-		border-bottom: 1px solid darken( $color_light, 10%);
+		background: color.adjust( $color_light, $lightness: -10%);
+		color: color.adjust( $color_light, $lightness: -40% );
+		border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%);
 
 		.configure {
 			margin-right: 4px;
@@ -601,7 +603,7 @@ form {
 			.configure {
 				.icon {
 					vertical-align: middle;
-					background-color: darken( $color_light, 10%);
+					background-color: color.adjust( $color_light, $lightness: -10%);
 				}
 			}
 		}
@@ -618,7 +620,7 @@ form {
 			background: $color_nav;
 
 			&:active {
-				background: darken( $color_nav, 10%);
+				background: color.adjust( $color_nav, $lightness: -10%);
 			}
 
 			.title {
@@ -676,7 +678,7 @@ form {
 		font-size: 0.8rem;
 
 		&.active {
-			background: darken( $color_nav, 10%);
+			background: color.adjust( $color_nav, $lightness: -10%);
 		}
 
 		> a {
@@ -798,7 +800,7 @@ form {
 	font-size: 0.9em;
 
 	input {
-		background: darken( $color_light, 10% );
+		background: color.adjust( $color_light, $lightness: -10% );
 
 		&.long {
 			height: 33px;
@@ -850,7 +852,7 @@ form {
 	@extend %aside-width;
 
 	&:hover {
-		background: darken( $color_nav, 10%);
+		background: color.adjust( $color_nav, $lightness: -10%);
 	}
 
 	> a {
@@ -905,7 +907,7 @@ form {
 		@extend %after;
 		margin: 0 auto;
 		width: 90%;
-		border-top: 1px solid darken( $color_light, 10%);
+		border-top: 1px solid color.adjust( $color_light, $lightness: -10%);
 	}
 
 	&:hover,
@@ -935,7 +937,7 @@ form {
 
 	.item {
 		&.date {
-			color: darken( $color_light, 40% );
+			color: color.adjust( $color_light, $lightness: -40% );
 			font-size: 0.7rem;
 		}
 	}
@@ -966,9 +968,9 @@ form {
 
 .notification {
 	padding: 10px 0;
-	background: darken( $color_light, 10%);
+	background: color.adjust( $color_light, $lightness: -10%);
 	height: auto;
-	color: darken( $color_light, 40% );
+	color: color.adjust( $color_light, $lightness: -40% );
 	font-size: 1em;
 	border: none;
 	text-align: center;
@@ -996,10 +998,10 @@ form {
 	}
 
 	&.bad {
-		background: lighten( $color_bad, 10%);
+		background: color.adjust( $color_bad, $lightness: 10%);
 
 		a.close:hover {
-			background: lighten( $color_bad, 10%);
+			background: color.adjust( $color_bad, $lightness: 10%);
 		}
 	}
 
@@ -1015,7 +1017,7 @@ form {
 #bigMarkAsRead {
 	text-align: center;
 	text-decoration: none;
-	background: darken( $color_light, 10%);
+	background: color.adjust( $color_light, $lightness: -10%);
 
 	&:hover {
 		background: $color_aside;
@@ -1045,7 +1047,7 @@ form {
 	> table {
 		td,
 		th {
-			border-bottom: 1px solid darken( $color_light, 10%);
+			border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%);
 		}
 	}
 
@@ -1087,16 +1089,16 @@ form {
 	}
 
 	input {
-		border-top: 1px darken( $color_light, 10%);
-		border-right: 1px darken( $color_light, 10%);
-		border-bottom: 1px darken( $color_light, 10%);
+		border-top: 1px color.adjust( $color_light, $lightness: -10%);
+		border-right: 1px color.adjust( $color_light, $lightness: -10%);
+		border-bottom: 1px color.adjust( $color_light, $lightness: -10%);
 		border-left: 5px solid;
 	}
 }
 
 .loglist {
 	overflow: hidden;
-	border: 1px solid darken( $color_light, 40% );
+	border: 1px solid color.adjust( $color_light, $lightness: -40% );
 }
 
 .log {
@@ -1111,7 +1113,7 @@ form {
 	}
 
 	&.error > .date {
-		background: lighten( $color_bad, 10%);
+		background: color.adjust( $color_bad, $lightness: 10%);
 		color: $color_light;
 	}
 
@@ -1121,7 +1123,7 @@ form {
 	}
 
 	&.notice > .date {
-		background: darken( $color_light, 10%);
+		background: color.adjust( $color_light, $lightness: -10%);
 		color: $color_light;
 	}
 
@@ -1356,11 +1358,11 @@ button.as-link {
 }
 
 .dropdown-target:target ~ .btn.dropdown-toggle {
-	background: darken( $color_nav, 10%);
+	background: color.adjust( $color_nav, $lightness: -10%);
 }
 
 .tree-folder.active .tree-folder-title {
-	background: darken( $color_nav, 10%);
+	background: color.adjust( $color_nav, $lightness: -10%);
 	font-weight: bold;
 }
 
@@ -1383,10 +1385,10 @@ button.as-link {
 	}
 
 	&.error {
-		color: lighten( $color_bad, 10%);
+		color: color.adjust( $color_bad, $lightness: 10%);
 
 		&.active {
-			background: lighten( $color_bad, 10%);
+			background: color.adjust( $color_bad, $lightness: 10%);
 			color: $color_light;
 
 			> a {
@@ -1395,7 +1397,7 @@ button.as-link {
 		}
 
 		> a {
-			color: lighten( $color_bad, 10%);
+			color: color.adjust( $color_bad, $lightness: 10%);
 		}
 	}
 }
@@ -1413,7 +1415,7 @@ button.as-link {
 
 	.author {
 		margin: 0 0 10px;
-		color: darken( $color_light, 40% );
+		color: color.adjust( $color_light, $lightness: -40% );
 		font-size: 90%;
 	}
 }

package.json

@@ -24,23 +24,23 @@
     "markdownlint": "markdownlint '**/*.md'",
     "markdownlint_fix": "markdownlint --fix '**/*.md'",
     "rtlcss": "rtlcss -d p/themes/ && find p/themes/ -type f -name '*.rtl.rtl.css' -delete",
-    "stylelint": "stylelint '**/*.css' && stylelint --syntax scss '**/*.scss'",
-    "stylelint_fix": "stylelint --fix '**/*.css' && stylelint --fix --syntax scss '**/*.scss'",
+    "stylelint": "stylelint '**/*.css' && stylelint --custom-syntax postcss-scss '**/*.scss'",
+    "stylelint_fix": "stylelint --fix '**/*.css' && stylelint --fix --custom-syntax postcss-scss '**/*.scss'",
     "test": "npm run eslint && npm run stylelint && npm run markdownlint",
     "fix": "npm run rtlcss && npm run stylelint_fix && npm run eslint_fix && npm run markdownlint_fix"
   },
   "devDependencies": {
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.1",
-    "markdownlint-cli": "^0.29.0",
-    "rtlcss": "^3.4.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recommended-scss": "^4.3.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.21.0"
+    "eslint-plugin-promise": "^5.2.0",
+    "markdownlint-cli": "^0.30.0",
+    "rtlcss": "^3.5.0",
+    "sass": "^1.49.0",
+    "stylelint": "^14.3.0",
+    "stylelint-config-recommended-scss": "^5.0.2",
+    "stylelint-order": "^5.0.0"
   },
   "rtlcssConfig": {}
 }