swingmusic/src/assets/css/_variables.scss

// colors

$card-dark: #000000;
$separator: #ffffff2f;
$highlight-blue: #006eff;
$bbb: #161616; //bottom controls background
$theme: #464545fd;

// sizes
$small: 0.5rem;
$smaller: 0.25rem;
$medium: 0.75rem;
$large: 1.5rem;
$larger: 2rem;

// apple human design guideline colors
$black: #000000;
$white: #ffffffde;

$gray: #1c1c1e;
$gray1: rgb(142, 142, 147);
$gray2: rgb(99, 99, 102);
$gray3: rgb(72, 72, 74);
$gray4: rgb(58, 58, 60);
$gray5: rgb(44, 44, 46);

$red: rgb(255, 69, 58);
$blue: #234ece;
$green: rgb(20, 160, 55);
$yellow: rgb(255, 214, 10);
$orange: rgb(255, 159, 10);
$pink: rgb(255, 55, 95);
$purple: rgb(191, 90, 242);
$brown: rgb(172, 142, 104);
$indigo: rgb(94, 92, 230);
$teal: rgb(64, 200, 224);

// 60 30 10
$primary: $gray4;
$accent: $indigo;
$cta: $blue;
$danger: $red;
$track-hover: $gray4;
$context: $gray4;

// media query mixins
@mixin phone-only {
  @media (max-width: 599px) {
    @content;
  }
}
@mixin tablet-portrait {
  @media (max-width: 900px) {
    @content;
  }
}
@mixin tablet-landscape {
  @media (max-width: 1200px) {
    @content;
  }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) {
    @content;
  }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) {
    @content;
  }
}