diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 27174a6..c2f6631 100644 --- a/src/scss/_global.scss +++ b/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; diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss index 365d29f..e1037ee 100644 --- a/src/scss/components/_index.scss +++ b/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'; diff --git a/src/scss/components/buttons/_mixin.scss b/src/scss/components/buttons/_mixin.scss new file mode 100644 index 0000000..4b0effb --- /dev/null +++ b/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; +} diff --git a/src/scss/components/buttons/_styles.scss b/src/scss/components/buttons/_styles.scss new file mode 100644 index 0000000..06ae874 --- /dev/null +++ b/src/scss/components/buttons/_styles.scss @@ -0,0 +1,9 @@ +@import './mixin'; + +.btn-primary { + @include button-primary-style; +} + +.btn-secondary { + @include button-secondary-style; +} diff --git a/src/scss/tokens/_index.scss b/src/scss/tokens/_index.scss index 3f94ffa..6d9b9df 100644 --- a/src/scss/tokens/_index.scss +++ b/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'; diff --git a/src/scss/tokens/colors/_token.scss b/src/scss/tokens/colors/_token.scss index e201ee0..3916270 100644 --- a/src/scss/tokens/colors/_token.scss +++ b/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; diff --git a/src/scss/tokens/typography/_token.scss b/src/scss/tokens/typography/_token.scss index e1154c7..d800ed0 100644 --- a/src/scss/tokens/typography/_token.scss +++ b/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;