src/scss/_variables.scss
// stylelint-disable scss/at-mixin-pattern
// ********
// WARNING: you can not use mixins in this file! (first file in scss-pipeline)
// ********

// This file defines all custom variables (single source of truth)
// all color definitions should end up in this file instead of component css-files
// use this variables everywhere you can (expect it makes no sense)
// use bootstrap for grid-system and functions
@import '../../node_modules/bootstrap-scss/functions';
@import '../../node_modules/bootstrap-scss/mixins';

@import './colors';
@import './fonts';

$color-primary: $color-orange-200;
$color-primary-dark: $color-orange-300;
$color-primary-darker: $color-orange-400;

$color-secondary: $color-mint-200;
$color-secondary-dark: $color-mint-300;
$color-secondary-darker: $color-mint-400;

$font-family: 'Roboto', 'Arial', 'sans-serif';
$base-font-size: 16px;
$modular-scale-ratio: 1.2;
$font-weight-light: 400;
$font-weight-base: 500;
$font-weight-bold: 700;

// Borders
$border-radius: rem(4px); // 0.25rem
$border-radius-lg: rem(8px); // 0.5rem
$border-radius-xl: rem(16px); // 1rem

// Spacing/Padding
$spacing-base: 0.5rem;
$margin-base: $spacing-base; // 0.5rem / 8px
$padding-base: $spacing-base; // 0.5rem / 8px

$margin-xs: $margin-base * 1; // 0.5rem / 8px
$margin-sm: $margin-base * 2; // 1rem / 16px
$margin-md: $margin-base * 3; // 1.5rem / 24px
$margin-lg: $margin-base * 4; // 2rem / 32px
$margin-xl: $margin-base * 5; // 2.5rem / 40px

$padding-xs: $padding-base * 1; // 0.5rem / 8px
$padding-sm: $padding-base * 2; // 1rem / 16px
$padding-md: $padding-base * 3; // 1.5rem / 24px
$padding-lg: $padding-base * 4; // 2rem / 32px
$padding-xl: $padding-base * 5; // 2.5rem / 40px

// media queries
// use @include media-breakpoint-up(sm) {...}
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1200px,
);

// Grid containers
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1080px,
);

// Grid Columns / Container Variables
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12;
$grid-gutter-width: 24px;
$container-padding: $grid-gutter-width / 2;

// z-index map
// use "z-index: z-index('modal');" -> z-index: 5000

$z-indexes: (
  'modal': 5000,
  'header': 4000,
  'breadcrumb': 3000,
  'tooltip': 2000,
  'content': 1000,
  'default': auto,
);

// mixin and functions us variables
@import './functions';
@import './mixins';
