refactor(starter): upgrade and move to typescript

src/assets/scss/_variables.scss

@@ -1,17 +1,16 @@
 @use "sass:math";
 @use "sass:color";
 
-$color-base: #222222;
-$color-primary: #5d93ff;
-$color-secondary: #f7a046;
+$color-base: hsl(0, 0%, 13%);
+$color-primary: hsl(220, 100%, 68%);
+$color-secondary: hsl(31, 92%, 62%);
 
-$color-white: #ffffff;
-$color-gray: color.adjust($color-base, 40%);
-$color-gray-border: color.adjust($color-base, 77%);
-$color-gray-bg: color.adjust($color-base, 79%);
+$color-white: hsl(0, 0%, 100%);
+$color-gray: color.adjust($color-base, $lightness: 40%);
+$color-gray-border: color.adjust($color-base, $lightness: 77%);
+$color-gray-bg: color.adjust($color-base, $lightness: 79%);
 
-$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI",
-  "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 
 $typographic-root-font-size: 100;
 $typographic-base-font-size: 16px;
@@ -23,10 +22,7 @@ $typographic-base-font-color: $color-base;
 $typographic-link-p-font-color: $color-primary;
 $typographic-link-s-font-color: $color-secondary;
 
-$typographic-leading: math.round(
-  16 * math.div($typographic-root-font-size, 100) *
-    $typographic-base-line-height
-);
+$typographic-leading: math.round(16 * math.div($typographic-root-font-size, 100) * $typographic-base-line-height);
 
 $button-height: 35px;
 $button-border-radius: 20px;

src/assets/scss/base/_generic.scss

@@ -13,7 +13,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   line-height: $typographic-base-line-height;
   margin: 0 0 0 calc(100vw - 100%);
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
@@ -148,11 +148,6 @@ figcaption {
   text-align: center;
 }
 
-.anchor {
-  margin-left: -30px !important;
-  padding-right: 14px !important;
-}
-
 @include breakpoint-sm {
   figure.float-left,
   figure.float-right {

src/assets/scss/base/_prism.scss

@@ -101,8 +101,8 @@ pre[class*="language-"]::selection {
   color: #b58900;
 }
 
-.token.important,
 .token.regex,
+.token.important,
 .token.variable {
   color: #cb4b16;
 }

src/assets/scss/mixins/_margin.scss

@@ -1,5 +1,17 @@
 @import "../variables";
 
+@mixin margin-auto($number: 0) {
+  margin: #{$number * $typographic-leading + "px"} auto;
+}
+
+@mixin margin-left($number) {
+  margin-left: #{$number * $typographic-leading + "px"};
+}
+
+@mixin margin-right($number) {
+  margin-right: #{$number * $typographic-leading + "px"};
+}
+
 @mixin margin-top($number) {
   margin-top: #{$number * $typographic-leading + "px"};
 }
@@ -8,36 +20,25 @@
   margin-bottom: #{$number * $typographic-leading + "px"};
 }
 
+@mixin margin-equal($number) {
+  margin: #{$number * $typographic-leading + "px"};
+}
+
 @mixin margin($top, $right, $bottom: null, $left: null) {
   @if not $left and not $bottom {
-    margin: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"};
+    margin:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"};
   } @else if not $left or $left == $right {
-    margin: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"}
-      #{$bottom *
-      $typographic-leading +
-      "px"};
+    margin:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"}
+      #{$bottom * $typographic-leading + "px"};
   } @else {
-    margin: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"}
-      #{$bottom *
-      $typographic-leading +
-      "px"}
-      #{$left *
-      $typographic-leading +
-      "px"};
+    margin:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"}
+      #{$bottom * $typographic-leading + "px"}
+      #{$left * $typographic-leading + "px"};
   }
 }

src/assets/scss/mixins/_padding.scss

@@ -1,39 +1,40 @@
 @import "../variables";
 
-@mixin padding($top, $right, $bottom: null, $left: null) {
-  @if not $left and not $bottom {
-    padding: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"};
-  } @else if not $left or $left == $right {
-    padding: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"}
-      #{$bottom *
-      $typographic-leading +
-      "px"};
-  } @else {
-    padding: #{$top *
-      $typographic-leading +
-      "px"}
-      #{$right *
-      $typographic-leading +
-      "px"}
-      #{$bottom *
-      $typographic-leading +
-      "px"}
-      #{$left *
-      $typographic-leading +
-      "px"};
-  }
+@mixin padding-left($number) {
+  padding-left: #{$number * $typographic-leading + "px"};
+}
+
+@mixin padding-right($number) {
+  padding-right: #{$number * $typographic-leading + "px"};
+}
+
+@mixin padding-top($number) {
+  padding-top: #{$number * $typographic-leading + "px"};
+}
+
+@mixin padding-bottom($number) {
+  padding-bottom: #{$number * $typographic-leading + "px"};
 }
 
 @mixin padding-equal($number) {
   padding: #{$number * $typographic-leading + "px"};
 }
+
+@mixin padding($top, $right, $bottom: null, $left: null) {
+  @if not $left and not $bottom {
+    padding:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"};
+  } @else if not $left or $left == $right {
+    padding:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"}
+      #{$bottom * $typographic-leading + "px"};
+  } @else {
+    padding:
+      #{$top * $typographic-leading + "px"}
+      #{$right * $typographic-leading + "px"}
+      #{$bottom * $typographic-leading + "px"}
+      #{$left * $typographic-leading + "px"};
+  }
+}