chore(grid/margin/padding): creation of the grid configuration, accor…

…ding to Styleguide.

src/scss/_global.scss

@@ -1,3 +1,11 @@
+/*
+* Tokens (Colors, Typography, Grid, etc)
+*/
 @import './tokens';
 
 @import './components';
+
+/*
+* Utilities (Margin, Padding, etc)
+*/
+@import './utilities';

src/scss/tokens/_index.scss

@@ -1,3 +1,13 @@
+/* 
+* 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';

src/scss/tokens/grid/_token.scss

@@ -0,0 +1,25 @@
+/*
+* Token de Grids
+* 1 - Insira os tokens de grids aqui
+* 2 - Importe esse arquivo no _index.scss da pasta de tokens
+*/
+
+// Todos os grids do projeto
+
+// Configurações para mobile
+$mobile-grid-column: 40%;
+$mobile-margin-left-right: 4%; // 16px to percentage
+$mobile-margin-top: 3%; // 12px to percentage
+$mobile-margin-bottom: 8%; // 32px to percentage
+$mobile-column-gap: 4%; // 16px to percentage
+
+// Configurações para desktop
+$desktop-grid-column: 100%;
+$desktop-margin-left-right: 5%; // 120px to percentage
+$desktop-margin-top: 0.8%; // 12px to percentage
+$desktop-margin-bottom: 2%; // 32px to percentage
+$desktop-column-gap: 1%; // 16px to percentage
+
+// Outros estilos
+$border-radius: 0.25rem; // or keep as 4px
+$button-padding: 0.5rem 1rem; // or convert to percentage if needed

src/scss/utilities/_index.scss

@@ -0,0 +1,2 @@
+@import './margin';
+@import './padding';

src/scss/utilities/margin/_index.scss

@@ -0,0 +1,66 @@
+@for $i from 1 through 120 {
+  $rem-value: $i;
+  $px-value: $i + px;
+
+  // Classes de margem em rem
+  .m-#{$i}rem {
+    margin: $rem-value + rem !important;
+  }
+
+  .mt-#{$i}rem {
+    margin-top: $rem-value + rem !important;
+  }
+
+  .mr-#{$i}rem {
+    margin-right: $rem-value + rem !important;
+  }
+
+  .mb-#{$i}rem {
+    margin-bottom: $rem-value + rem !important;
+  }
+
+  .ml-#{$i}rem {
+    margin-left: $rem-value + rem !important;
+  }
+
+  .mx-#{$i}rem {
+    margin-right: $rem-value + rem !important;
+    margin-left: $rem-value + rem !important;
+  }
+
+  .my-#{$i}rem {
+    margin-top: $rem-value + rem !important;
+    margin-bottom: $rem-value + rem !important;
+  }
+
+  // Classes de margem em px
+  .m-#{$i}px {
+    margin: $px-value !important;
+  }
+
+  .mt-#{$i}px {
+    margin-top: $px-value !important;
+  }
+
+  .mr-#{$i}px {
+    margin-right: $px-value !important;
+  }
+
+  .mb-#{$i}px {
+    margin-bottom: $px-value !important;
+  }
+
+  .ml-#{$i}px {
+    margin-left: $px-value !important;
+  }
+
+  .mx-#{$i}px {
+    margin-right: $px-value !important;
+    margin-left: $px-value !important;
+  }
+
+  .my-#{$i}px {
+    margin-top: $px-value !important;
+    margin-bottom: $px-value !important;
+  }
+}

src/scss/utilities/padding/_index.scss

@@ -0,0 +1,66 @@
+@for $i from 1 through 120 {
+  $rem-value: $i;
+  $px-value: $i + px;
+
+  // Classes de padding em rem
+  .p-#{$i}rem {
+    padding: $rem-value + rem !important;
+  }
+
+  .pt-#{$i}rem {
+    padding-top: $rem-value + rem !important;
+  }
+
+  .pr-#{$i}rem {
+    padding-right: $rem-value + rem !important;
+  }
+
+  .pb-#{$i}rem {
+    padding-bottom: $rem-value + rem !important;
+  }
+
+  .pl-#{$i}rem {
+    padding-left: $rem-value + rem !important;
+  }
+
+  .px-#{$i}rem {
+    padding-right: $rem-value + rem !important;
+    padding-left: $rem-value + rem !important;
+  }
+
+  .py-#{$i}rem {
+    padding-top: $rem-value + rem !important;
+    padding-bottom: $rem-value + rem !important;
+  }
+
+  // Classes de padding em px
+  .p-#{$i}px {
+    padding: $px-value !important;
+  }
+
+  .pt-#{$i}px {
+    padding-top: $px-value !important;
+  }
+
+  .pr-#{$i}px {
+    padding-right: $px-value !important;
+  }
+
+  .pb-#{$i}px {
+    padding-bottom: $px-value !important;
+  }
+
+  .pl-#{$i}px {
+    padding-left: $px-value !important;
+  }
+
+  .px-#{$i}px {
+    padding-right: $px-value !important;
+    padding-left: $px-value !important;
+  }
+
+  .py-#{$i}px {
+    padding-top: $px-value !important;
+    padding-bottom: $px-value !important;
+  }
+}

src/styles.scss

@@ -1,5 +1,13 @@
+// Importação do arquivo do Styleguide
 @import './scss/global';
 
+/**********************************************************
+* Configuração de Estilos Globais
+*---------------------------------------------------------
+* As configurações abaixo são aplicadas em todo o projeto.
+* Não é recomendado alterar essas configurações.
+***********************************************************/
+
 html,
 body {
   height: 100%;