🎨 style(styles): chore: added tokens colors and buttons

src/scss/_global.scss

@@ -2,14 +2,16 @@
 * Tokens (Colors, Typography, Grid, etc)
 */
 @import './tokens';
-
 @import './components';
-
 /*
 * Utilities (Margin, Padding, etc)
 */
 @import './utilities';
 
+/*
+* Components (Buttons, Typography, etc)
+*/
+
 * {
   margin: 0;
   padding: 0;

src/scss/components/_index.scss

@@ -1 +1,5 @@
+// Import dos styles de tipografia
 @import './typography/styles';
+
+// Import dos styles de botões
+@import './buttons/styles';

src/scss/components/buttons/_mixin.scss

@@ -0,0 +1,30 @@
+/* 
+* Mixin de Botões 
+* Colocar o mixin de botões aqui
+*/
+@mixin button-primary-style {
+  background-color: $color-button-primary-bg;
+  color: $color-button-primary-text;
+  border-radius: $border-radius;
+  padding: $button-padding;
+  border: none;
+  font-size: $font-size-body-l;
+  font-weight: $font-weight-bold;
+  cursor: pointer;
+  line-height: 1.5rem;
+
+  &:hover {
+    background-color: darken($color-button-primary-bg, 10%);
+  }
+}
+
+@mixin button-secondary-style {
+  background-color: $color-button-secondary-bg;
+  color: $color-button-secondary-text;
+  border-radius: $border-radius;
+  padding: $button-padding;
+  border: 1px solid $color-button-secondary-border;
+  font-size: $font-size-body-l;
+  cursor: pointer;
+  line-height: 1.5rem;
+}

src/scss/components/buttons/_styles.scss

@@ -0,0 +1,9 @@
+@import './mixin';
+
+.btn-primary {
+  @include button-primary-style;
+}
+
+.btn-secondary {
+  @include button-secondary-style;
+}

src/scss/tokens/_index.scss

@@ -1,17 +1,11 @@
-/* 
-* Tokens 
-* Faça a importação de todos os tokens aqui
-* Exemplo: @import './colors/token';
-*/
 // Import dos tokens de cores
-
 @import './colors/token';
 
 // Import dos tokens de grid
 @import './grid/token';
-
 @import './typography/token';
 
 // Import dos tokens de generic
+
 @import './generic/token';
 @import './generic/mixin';

src/scss/tokens/colors/_token.scss

@@ -1,9 +1,11 @@
+// Todas as cores do projeto
+
 $color-primary: #015292;
 $color-secondary: #666a7b;
 $color-bg-cards: #f2f8ff;
 $color-button-primary-bg: #f5ce3c;
 $color-button-primary-text: #000000;
+$color-button-secondary-text: #666a7b;
 $color-button-secondary-bg: transparent;
 $color-button-secondary-border: #666a7b;
-$color-button-secondary-text: #000000;
 $color-white: #ffffff;

src/scss/tokens/typography/_token.scss

@@ -1,11 +1,15 @@
+// Fonte do Google Fonts do Projeto
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
+// Fontes
 $font-family: 'Ubuntu', sans-serif;
 $font-inter: 'Inter', sans-serif;
+
 $font-weight-bold: 700;
 $font-weight-regular: 400;
 
+// Tamanhos de fonte
 $font-size-h1: 2rem;
 $font-size-h2: 1.5rem;
 $font-size-h3: 1.25rem;