signal-desktop/stylesheets/_variables.scss

// Copyright 2015 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

// Note: Add language-specific fallbacks in @localized-fonts mixin
$inter: Inter, 'Source Sans Pro', 'Source Han Sans', -apple-system, system-ui,
  'Segoe UI', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

// Note: This font-family is checked for in matchMonospace, to support paste scenarios
$monospace: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo,
  Consolas, monospace;

// -- V3 Colors

$color-accent-blue: #2c6bed;
$color-accent-green: #4caf50;
$color-accent-red: #f44336;
$color-accent-yellow: #ffd624;

$color-white: #ffffff;
$color-gray-02: #f6f6f6;
$color-gray-04: #f0f0f0;
$color-gray-05: #e9e9e9;
$color-gray-15: #dedede;
$color-gray-20: #c6c6c6;
$color-gray-25: #b9b9b9;
$color-gray-45: #848484;
$color-gray-60: #5e5e5e;
$color-gray-62: #545454;
$color-gray-65: #4a4a4a;
$color-gray-75: #3b3b3b;
$color-gray-78: #343434;
$color-gray-80: #2e2e2e;
$color-gray-90: #1b1b1b;
$color-gray-95: #121212;
$color-black: #000000;

$color-white-alpha-06: rgba($color-white, 0.06);
$color-white-alpha-08: rgba($color-white, 0.08);
$color-white-alpha-12: rgba($color-white, 0.12);
$color-white-alpha-16: rgba($color-white, 0.16);
$color-white-alpha-20: rgba($color-white, 0.2);
$color-white-alpha-40: rgba($color-white, 0.4);
$color-white-alpha-60: rgba($color-white, 0.6);
$color-white-alpha-70: rgba($color-white, 0.7);
$color-white-alpha-80: rgba($color-white, 0.8);
$color-white-alpha-90: rgba($color-white, 0.9);

$color-black-alpha-05: rgba($color-black, 0.05);
$color-black-alpha-06: rgba($color-black, 0.06);
$color-black-alpha-08: rgba($color-black, 0.08);
// Equivalent to gray-05 on a white background
$color-black-alpha-085: rgba($color-black, 0.085);
$color-black-alpha-12: rgba($color-black, 0.12);
$color-black-alpha-16: rgba($color-black, 0.16);
$color-black-alpha-20: rgba($color-black, 0.2);
$color-black-alpha-24: rgba($color-black, 0.24);
$color-black-alpha-30: rgba($color-black, 0.3);
$color-black-alpha-40: rgba($color-black, 0.4);
$color-black-alpha-50: rgba($color-black, 0.5);
$color-black-alpha-60: rgba($color-black, 0.6);
$color-black-alpha-70: rgba($color-black, 0.7);
$color-black-alpha-80: rgba($color-black, 0.8);
$color-black-alpha-90: rgba($color-black, 0.9);

$color-transparent: rgba(0, 0, 0, 0);

$color-ultramarine-dark: #1851b4;
$color-ultramarine-icon: #3a76f0;
$color-ultramarine-light: #6191f3;
$color-ultramarine-dawn: #406ec9;
$color-ultramarine-pastel: #abc4f8;
$color-ultramarine: #2c6bed;

// Flat colors

$color-crimson: #cf163e;
$color-vermilion: #c73f0a;
$color-burlap: #6f6a58;
$color-forest: #3b7845;
$color-wintergreen: #1d8663;
$color-teal: #077d92;
$color-blue: #336ba3;
$color-indigo: #6058ca;
$color-violet: #9932c8;
$color-plum: #aa377a;
$color-taupe: #8f616a;
$color-steel: #71717f;
$color-bright-gray: #ebeae8;
$color-borage-blue: #506ecd;

// Gradient colors

$color-ultramarine-gradient: (
  deg: 180deg,
  start: #0552f0,
  end: $color-ultramarine,
);
$color-basil: (
  deg: 180deg,
  start: #2f9373,
  end: #077343,
);
$color-ember: (
  deg: 168deg,
  start: #e57c00,
  end: #5e0000,
);
$color-fluorescent: (
  deg: 192deg,
  start: #ec13dd,
  end: #1b36c6,
);
$color-infrared: (
  deg: 192deg,
  start: #f65560,
  end: #442ced,
);
$color-lagoon: (
  deg: 180deg,
  start: #004066,
  end: #32867d,
);
$color-midnight: (
  deg: 180deg,
  start: #2c2c3a,
  end: #787891,
);
$color-sea: (
  deg: 180deg,
  start: #498fd4,
  end: #2c66a0,
);
$color-sublime: (
  deg: 180deg,
  start: #6281d5,
  end: #974460,
);
$color-tangerine: (
  deg: 192deg,
  start: #db7133,
  end: #911231,
);

// Avatars

$avatar-color-A100: (
  bg: #e3e3fe,
  fg: #3838f5,
);
$avatar-color-A110: (
  bg: #dde7fc,
  fg: #1251d3,
);
$avatar-color-A120: (
  bg: #d8e8f0,
  fg: #086da0,
);
$avatar-color-A130: (
  bg: #cde4cd,
  fg: #067906,
);
$avatar-color-A140: (
  bg: #eae0fd,
  fg: #661aff,
);
$avatar-color-A150: (
  bg: #f5e3fe,
  fg: #9f00f0,
);
$avatar-color-A160: (
  bg: #f6d8ec,
  fg: #b8057c,
);
$avatar-color-A170: (
  bg: #f5d7d7,
  fg: #be0404,
);
$avatar-color-A180: (
  bg: #fef5d0,
  fg: #836b01,
);
$avatar-color-A190: (
  bg: #eae6d5,
  fg: #7d6f40,
);
$avatar-color-A200: (
  bg: #d2d2dc,
  fg: #4f4f6d,
);
$avatar-color-A210: (
  bg: #d7d7d9,
  fg: #5c5c5c,
);

// Maps for easy manipulation

$avatar-colors: (
  A100: $avatar-color-A100,
  A110: $avatar-color-A110,
  A120: $avatar-color-A120,
  A130: $avatar-color-A130,
  A140: $avatar-color-A140,
  A150: $avatar-color-A150,
  A160: $avatar-color-A160,
  A170: $avatar-color-A170,
  A180: $avatar-color-A180,
  A190: $avatar-color-A190,
  A200: $avatar-color-A200,
  A210: $avatar-color-A210,
);

$conversation-colors: (
  'blue': $color-blue,
  'burlap': $color-burlap,
  'crimson': $color-crimson,
  'forest': $color-forest,
  'indigo': $color-indigo,
  'plum': $color-plum,
  'steel': $color-steel,
  'taupe': $color-taupe,
  'teal': $color-teal,
  'vermilion': $color-vermilion,
  'violet': $color-violet,
  'wintergreen': $color-wintergreen,
);

$conversation-colors-gradient: (
  'ultramarine': $color-ultramarine-gradient,
  'basil': $color-basil,
  'ember': $color-ember,
  'fluorescent': $color-fluorescent,
  'infrared': $color-infrared,
  'lagoon': $color-lagoon,
  'midnight': $color-midnight,
  'sea': $color-sea,
  'sublime': $color-sublime,
  'tangerine': $color-tangerine,
);

// Used for safety number change warning banner, progress bars and toasts
$color-ios-blue-tint: #b0c8f9;

// -- Non-V3 colors

// Used in spinners
$color-white-alpha-40: rgba($color-white, 0.4);

// Used in tap-to-view error states
$color-deep-red: #ff261f;

$color-selected-message-background-light: rgba(44, 107, 237, 0.24);
$color-selected-message-background-dark: $color-gray-65;

// -- A few layout variables used cross-file

$header-height: 52px;

$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

$calling-background-color: $color-gray-90;

// Maintain aspect ratio 960x720 with $local-preview-height
$calling-local-preview-width: 106.67px;

// General

$z-index-negative: -1;
$z-index-base: 1;
$z-index-above-base: 2;
$z-index-above-above-base: 3;
$z-index-megaphone: 75;
$z-index-popup-overlay: 99;
$z-index-popup: 100;
$z-index-context-menu: 125;
$z-index-tooltip: 150;
$z-index-toast: 200;
$z-index-on-top-of-everything: 9000;
$z-index-window-controls: 10000;

// Component specific
// The scroll down button should be above everything in the timeline but
// popups, tooltips, toasts, and other items should stack above it.
$z-index-story-meta: 3;
$z-index-scroll-down-button: 10;
$z-index-stories: 98;
$z-index-calling-container: 100;
$z-index-calling: 101;
$z-index-modal-host: 102;
$z-index-above-popup: 103;
$z-index-calling-pip: 104;
$z-index-above-context-menu: 126;

// global navTabs
$NavTabs__width: 80px;
// These values are 'block' specific to coordinate with the NavSidebar__Header
$NavTabs__Item__blockPadding: 2px;
$NavTabs__Toggle__blockPadding: 8px;
$NavTabs__ItemButton__blockPadding: 10px;
$CallControls__height: 80px;
$CallControls__max-width: 640px;
$CallControls__initial-width: 480px;