session-desktop/stylesheets/_session_constants.scss

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

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

@font-face {
  font-family: $session-font-mono;
  src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: $session-font-mono;
  src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: $session-font-mono;
  src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
  font-style: italic;
}
@font-face {
  font-family: $session-font-mono;
  src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

// Public Sans is an open replacement for 'SF Pro Text'
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/PublicSans-Regular.woff') format('woff');
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/PublicSans-Italic.woff') format('woff');
  font-style: italic;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/PublicSans-Bold.woff') format('woff');
  font-weight: bold;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/PublicSans-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/PublicSans-Light.woff') format('woff');
  font-weight: lighter;
}
@font-face {
  font-family: $session-font-default;
  src: url('../fonts/PublicSans-LightItalic.woff') format('woff');
  font-weight: lighter;
  font-style: italic;
}

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

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

// Brand
$session-color-green: #00f782;
$session-color-green-alt-1: #00f480;
$session-color-green-alt-2: #00fd73;
$session-color-green-alt-3: #00f782;

// Shades
$session-shade-1: #0c0c0c;
$session-shade-2: #161616;
$session-shade-3: #191818;
$session-shade-4: #1b1b1b;
$session-shade-5: #222325;
$session-shade-6: #232323;
$session-shade-7: #2e2e2e;
$session-shade-8: #2f2f2f;
$session-shade-9: #313131;
$session-shade-10: #3e3e3e;
$session-shade-11: #3f3f3f;
$session-shade-12: #3f4146;
$session-shade-13: #474646;
$session-shade-14: #535865;
$session-shade-15: #5b6c72;
$session-shade-16: #979797;
$session-shade-17: #a0a0a0;
$session-shade-18: #141414;

$session-opaque-dark-1: rgba(0, 0, 0, 0.25);
$session-opaque-dark-2: rgba(0, 0, 0, 0.37);
$session-opaque-dark-3: rgba(0, 0, 0, 0.5);

$session-color-white: #fff;
$session-color-light-grey: #a0a0a0;
$session-color-dark-grey: #353535;
$session-color-black: #000;

$session-background-overlay: #212121;
$session-background: #121212;

// Semantic Colors
$session-color-info: $session-shade-11;
$session-color-success: #35d388;
$session-color-error: #edd422;
$session-color-warning: $session-shade-17;
$session-color-warning-alt: #ff9d00;
$session-color-danger: #ff453a;
$session-color-primary: $session-shade-13;
$session-color-secondary: $session-shade-6;

// Opacity and Shadow
$session-shadow-opacity: 0.15;
$session-overlay-opacity: 0.3;
$session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37);

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

// Sizing
$session-font-xs: 11px;
$session-font-sm: 13px;
$session-font-md: 15px;
$session-font-lg: 18px;
$session-font-xl: 24px;

$session-font-h1: 30px;
$session-font-h2: 24px;
$session-font-h3: 20px;
$session-font-h4: 16px;

// 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 session-color-subtle($color) {
  color: rgba($color, 0.6);
}

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

// Default Components
$session-search-input-height: 34px;
$main-view-header-height: 63px;
$session-conversation-header-height: 60px;
$session-left-pane-width: 300px;
$session-left-pane-sections-container-width: 80px;

// Various Components
$session-icon-size-sm: 15px;
$session-icon-size-md: 20px;
$session-icon-size-lg: 30px;

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

$session_message-container-border-radius: 5px;

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

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

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

// //////////////////////////////////////////////
// ///////////////// Various ////////////////////
// //////////////////////////////////////////////

// Backgrounds
@mixin session-dark-background {
  background-color: $session-background;
}
@mixin session-dark-background-lighter {
  background-color: $session-background-overlay;
}
@mixin session-dark-background-hover {
  background-color: $session-shade-7;
}
@mixin session-filter-color-green {
  filter: brightness(0) saturate(100%) invert(67%) sepia(69%) saturate(2367%)
    hue-rotate(101deg) brightness(107%) contrast(101%);
}

$session-gradient-green: linear-gradient(
  270deg,
  rgba($session-color-green-alt-1, 1),
  rgba($session-color-green-alt-1, 0.6)
);
$session-gradient-black: linear-gradient(
  90deg,
  rgba($session-shade-3, 1),
  rgba($session-shade-4, 0.6)
);