feat: adiciona mixin e variaveis

Vitor-Soares-main/src/styles/colors.scss

@@ -0,0 +1,18 @@
+$panel-bg-1: #000;
+$page-bg-1: #ffe2e2;
+$overlay-bg: rgba(69, 69, 69, 0.7);
+
+$text-cl-1: #fff;
+$text-cl-2: #292929;
+$text-cl-3: #7d7d7d;
+$text-cl-4: #303030;
+$text-cl-5: #c4c4c4;
+$text-cl-6: #100d0e;
+$text-cl-7: #b9b7b7;
+$text-cl-8: #ff0000;
+$text-cl-9: #008000;
+
+$border-cl-1: #100d0e;
+$border-cl-2: rgba(196, 196, 196, 0.5);
+$border-cl-3: #f0f0f0;
+$border-cl-4: #e5e5e5;

Vitor-Soares-main/src/styles/index.scss

@@ -0,0 +1 @@
+@import "colors.scss", "mixins.scss", "spacing.scss";

Vitor-Soares-main/src/styles/mixins.scss

@@ -0,0 +1,122 @@
+@mixin large-font-1 {
+  font-size: 20px;
+  line-height: 23px;
+}
+
+@mixin large-font-2 {
+  font-size: 24px;
+  line-height: 28px;
+}
+
+@mixin large-font-3 {
+  font-size: 26px;
+  line-height: 30px;
+}
+
+@mixin large-font-4 {
+  font-size: 28px;
+  line-height: 33px;
+}
+
+@mixin large-font-5 {
+  font-size: 32px;
+  line-height: 38px;
+}
+
+@mixin large-font-6 {
+  font-size: 36px;
+  line-height: 42px;
+}
+
+@mixin large-font-7 {
+  font-size: 48px;
+  line-height: 56px;
+}
+
+//----------------
+@mixin big-font-1 {
+  font-size: 10px;
+  line-height: 12px;
+}
+@mixin big-font-2 {
+  font-size: 12px;
+  line-height: 14px;
+}
+
+@mixin big-font-3 {
+  font-size: 13px;
+  line-height: 15px;
+}
+
+@mixin big-font-4 {
+  font-size: 14px;
+  line-height: 16px;
+}
+
+@mixin big-font-5 {
+  font-size: 16px;
+  line-height: 19px;
+}
+
+@mixin big-font-6 {
+  font-size: 18px;
+  line-height: 21px;
+}
+
+//----------------
+@mixin small-font1 {
+  font-size: 12px;
+  line-height: 18px;
+}
+//----------------
+@mixin global-reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin reset-border-background-outline {
+  border: none;
+  background: none;
+  // outline: none;
+}
+
+@mixin button-reset {
+  button {
+    @include reset-border-background-outline();
+    cursor: pointer;
+  }
+}
+
+//----------------------------------------------------------------
+@mixin center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin black-btn {
+  @include reset-border-background-outline();
+  color: white;
+  background: #000;
+  border-radius: 4px;
+  text-transform: uppercase;
+  text-align: center;
+  padding: 14px 20px;
+}
+
+@mixin hide {
+  opacity: 0;
+  visibility: 0;
+  pointer-events: none;
+}
+
+@mixin visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}

Vitor-Soares-main/src/styles/spacing.scss

@@ -0,0 +1,2 @@
+$large-padding-inline: 100px;
+$big-padding-inline: 16px;