session-desktop/stylesheets/_session_constants.scss

// //////////////////////////////////////////////
// /////////////////// Fonts ////////////////////
// //////////////////////////////////////////////

$session-font-default: 'Roboto';
$session-font-accent: 'Loor';
$session-font-mono: 'SpaceMono';

@font-face {
  font-family: $session-font-mono;
  src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
}

// Roboto is an open replacement for $session-font-default
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 100;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 300;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 500;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
}

@font-face {
  font-family: $session-font-default;
  src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

// Accented font
@font-face {
  font-family: $session-font-accent;
  src: url('../fonts/Loor.ttf') format('truetype');
  line-height: 1.4rem;
}

// //////////////////////////////////////////////
// ////////////////// Colors ////////////////////
// //////////////////////////////////////////////

// Opacity and Shadow
$session-shadow-opacity: 0.15;
$session-overlay-opacity: 0.3;

// //////////////////////////////////////////////
// /////////////////// Text /////////////////////
// //////////////////////////////////////////////

// Sizing
$session-font-xs: 11px;
$session-font-sm: 13px;
$session-font-md: 15px;

$session-font-h2: 24px;

// Mixins
@mixin fontAccentBold {
  font-weight: bold;
  font-family: $session-font-accent;
}

@mixin text-highlight($color) {
  background-color: $color;
  padding: $session-margin-xs $session-margin-sm;
  border-radius: 3px;
  display: inline-block;
}

@mixin pulse-color($color, $duration, $repetition) {
  animation: pulseColor $duration $repetition;

  @keyframes pulseColor {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba($color, 0.7);
    }

    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba($color, 0);
    }

    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}

$session-subtle-factor: 0.6;

@function subtle($color) {
  @return rgba($color, $session-subtle-factor);
}

// //////////////////////////////////////////////
// ////////////////// Sizing ////////////////////
// //////////////////////////////////////////////

// Various Components
$session-modal-size-sm: 220px;
$session-modal-size-md: 400px;
$session-modal-size-lg: 650px;

// Spacing
$session-margin-xs: 5px;
$session-margin-sm: 10px;
$session-margin-md: 15px;
$session-margin-lg: 20px;

// Animations
$session-transition-duration: 0.25s;

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}