style.scss

// ---- Styles
// Colors
$color-gold-100: #FEF9E1;
$color-gold-200: #FEF9E1;
$color-gold-300: #FEF9E1;
$color-gold-400: #FEF9E1;
$color-gold-500: #FEF9E1;
$color-gold-600: #FEF9E1;
$color-gold-700: #FEF9E1;
$color-gold-800: #FEF9E1;
$color-gold-900: #FEF9E1;
$color-gray-100: #FEF9E1;
$color-gray-200: #FEF9E1;
$color-gray-300: #FEF9E1;
$color-gray-400: #FEF9E1;
$color-gray-500: #FEF9E1;
$color-gray-600: #FEF9E1;
$color-gray-700: #FEF9E1;
$color-gray-800: #FEF9E1;
$color-gray-900: #FEF9E1;
$color-blue-500: #FEF9E1;
$color-blue-600: #FEF9E1;
$color-blue-700: #FEF9E1;
$color-blue-800: #0B4893;
$color-blue-900: #06337A;
$color-green-500: #FEF9E1;
$color-green-600: #FEF9E1;
$color-green-700: #FEF9E1;
$color-green-800: #FEF9E1;
$color-green-900: #FEF9E1;
$color-red-500: #FF6060;

// Typography
$font-family-heading: 'Helvetica', sans-serif
$font-family-body: 'Helvetica', sans-serif
$font-family-interaction: 'Roboto', sans-serif
=typography-title
  font-family: Helvetica
  font-weight: 700
  font-size: 64px
  line-height: 64px
=typography-body
  font-family: Helvetica
  font-weight: 400
  font-size: 24px
  line-height: 32px
=typography-button
  font-family: Helvetica
  font-weight: 500
  letter-spacing: 0.1
  font-size: 18px
  line-height: 24px
  
// ---- Patterns
// Spaces // estudar alternativas melhores para nomeclatura de variáveis de espaço
$space-X: 8px
$space-X: 16px
$space-X: 32px
$space-X: 64px
$space-X: 128px
  
// ---- Components
// Button
.my-button
  +typography-button
  background-color: $color-blue-500
  border-radius: 16px
  color: $color-gray-100
  padding-top: $space-s
  padding-bottom: $space-s
  padding-left: $space-m
  padding-right: $space-m
  &:hover
    background-color: $color-blue-600
  &:active
    background-color: $color-blue-700
  &:focus
    border: 4px solid $color-blue-600
  &.-disabled
    background-color: $color-gray-300
  &.-green
    background-color: $color-green-600
  &.-red
    background-color: $color-red-600
  &.-large
  &.-small