fix: rebuild css to add color palette

Author: Ramazanmak

states/-1/index.html

@@ -32,7 +32,7 @@
 
 					<div class="Flg0.1 H100p">
 						<!-- Save button -->
-						<button class="btn Bgc-$accent900 Bgc-$hover850_h D P0 M0 C-$accent850 H100p W80p Bdrd10u Fnw600 Tsd-$shortTsd">
+						<button class="btn M-a Bgc-$accent900 Bgc-$hover850_h D P0 M0 C-$accent850 H100p W18u Bdrd10u Fnw600 Tsd-$shortTsd">
 							<span class="D">
 								Save
 							</span>
@@ -123,7 +123,7 @@
 				<div class="Fi-$accent200_h::svg">
 					<div class="D-f Ai-c Jc-sb -Ctx Bgc-$accent600_h Tsd-$shortTsd P2u;5u">
 						<span class="D Fns5u"> Create expanded bio</span>
-						<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent800 -Sz26 P0.5u Us-n Tsd-ih">
+						<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent600 -Sz26 P0.5u Us-n Tsd-ih">
 								<use href="img/sprite.svg#larger"></use>
 						</svg>
 					</div>
@@ -133,7 +133,7 @@
 				<div class="Fi-$accent200_h::svg">
 					<div class="D-f Ai-c Jc-sb -Ctx Bgc-$accent600_h Tsd-$shortTsd P2u;5u">
 						<span class="D Fns5u"> Add your skills</span>
-						<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent800 -Sz26 P0.5u Us-n Tsd-ih">
+						<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent600 -Sz26 P0.5u Us-n Tsd-ih">
 								<use href="img/sprite.svg#larger"></use>
 						</svg>
 					</div>

states/-1/style.css

@@ -272,20 +272,19 @@ Styleguide: css_lib.helpers.ratio-box
 
 html {
   --ml-accent900: #e7e9ea;
-  --ml-accent850: #040404;
-  --ml-accent800:#16181c;
-  --ml-accent600:#333639;
-  --ml-accent200:#1d9bf0;
-  --ml-accent400:#83cbfb;
-  --ml-accent300: rgb(255, 74, 74);
-  --ml-hover900: #181919;
-  --ml-hover850: #d7dbdc;
-  --ml-hover200: rgba(0,0,0,0.10);
+  --ml-accent850: #0f1419;
+  --ml-accent600: #333639;
+  --ml-accent200: #1d9bf0;
+  --ml-accent300: #fa4646;
+  --ml-accent400: #6bc4ff;
+  --ml-hover900: #4a4a4a;
+  --ml-hover850: #bdbdbd;
   --ml-hover400: rgba(0,0,0,0.40);
   --ml-hover300: rgba(0,0,0,0.20);
+  --ml-hover200: rgba(0,0,0,0.10);
 }
 
-div, textarea {
+div {
   scrollbar-width: none;
 }
 
@@ -552,28 +551,32 @@ div, textarea {
   left: 0px;
 }
 
-.Gap3u {
-  gap: 0.75rem;
+.Gap5u {
+  gap: 1.25rem;
 }
 
-.Bgc-\$hover200 {
+.Bgc-\$hover200_h:hover {
   background-color: var(--ml-hover200);
 }
 
-.O0 {
-  opacity: 0;
+.Bgc-\$hover400 {
+  background-color: var(--ml-hover400);
 }
 
-.O1_h:hover {
-  opacity: 1;
+.Bgc-\$hover300_h:hover {
+  background-color: var(--ml-hover300);
 }
 
-.Bgc-\$hover400 {
-  background-color: var(--ml-hover400);
+.P2u {
+  padding: 0.5rem;
 }
 
-.Bgc\#000\*0\.3 {
-  background-color: rgba(0, 0, 0, 0.3);
+.O0 {
+  opacity: 0;
+}
+
+.-Ctx-wallpaper:hover .\^wallpaper\:h\:_O1 {
+  opacity: 1;
 }
 
 .Zi10 {
@@ -600,6 +603,14 @@ div, textarea {
   left: 1.25rem;
 }
 
+.Bgc-\$hover200 {
+  background-color: var(--ml-hover200);
+}
+
+.O1_h:hover {
+  opacity: 1;
+}
+
 .P3u\;5u_\:div div {
   padding: 0.75rem 1.25rem;
 }
@@ -628,10 +639,6 @@ div, textarea {
   border-radius: 0.5rem;
 }
 
-.P2u {
-  padding: 0.5rem;
-}
-
 .Ct-\'\;\'\;\'\*\'_af::after {
   content: ' ' '*';
 }
@@ -700,18 +707,14 @@ div, textarea {
   transition-duration: inherit;
 }
 
-.Gap5u {
-  gap: 1.25rem;
+.M-a {
+  margin: auto;
 }
 
-.Bgc-\$hover200_h:hover {
-  background-color: var(--ml-hover200);
+.W18u {
+  width: 4.5rem;
 }
 
-.Bgc-\$hover300_h:hover {
-  background-color: var(--ml-hover300);
-}
-
-.-Ctx-wallpaper:hover .\^wallpaper\:h\:_O1 {
-  opacity: 1;
+.Fi-\$accent600 {
+  fill: var(--ml-accent600);
 }