feat: Move to css variables !

Signed-off-by: Avior <f.bouillon@aptatio.com>

src/Sidebar/Sidebar.module.styl

@@ -10,9 +10,9 @@
 		margin-left 56px
 
 .sidebar
-	background $foregroundLight
+	background nativeRGB(var(--theme-50))
 	@media (prefers-color-scheme dark)
-		background $foregroundDark
+		background nativeRGB(var(--gray-800))
 	position fixed
 	left 0
 	top 0
@@ -53,13 +53,13 @@
 			border-radius 8px
 			&:hover
 				color black
-				background $lightGrayLight
+				background nativeRGB(var(--theme-100))
 				@media (prefers-color-scheme dark)
 					color white
-					background $darkGrayDark
+					background nativeRGB(var(--gray-700))
 			&:active
-				color $textOnMain
-				background $main
+				color white
+				background nativeRGB(var(--theme-color))
 	&.short
 		width 88px
 		.userSpace > div:not(:last-child)
@@ -109,9 +109,9 @@
 		&::before
 			content " "
 			position absolute
-			background $darkGrayLight
-			@media (prefers-color-theme dark)
-				background $lightGrayDark
+			background black
+			@media (prefers-color-scheme dark)
+				background white
 			border-radius 2px
 			width 2px
 			height 100%
@@ -131,21 +131,21 @@
 			cursor pointer
 			border-radius 8px
 			transition all $transition
-			color $darkGrayLight
+			color black
 			@media (prefers-color-scheme dark)
-				color $lightGrayDark
+				color white
 			&:first-child
 				margin-top 0
 			&:hover
 
 				color black
-				background $lightGrayLight
+				background nativeRGB(var(--theme-100))
 				@media (prefers-color-scheme dark)
 					color white
-					background $darkGrayDark
+					background nativeRGB(var(--gray-700))
 			&:active
-				color $textOnMain
-				background $main
+				color white
+				background nativeRGB(var(--theme-color))
 
 			padding 8px
 			display flex
@@ -168,8 +168,8 @@
 				//max-height 24px
 
 		&.active > div
-			color $textOnMain
-			background $main
+			color white
+			background nativeRGB(var(--theme-color))
 	ul
 		list-style none
 		margin 0