198 lines
4.5 KiB
SCSS
198 lines
4.5 KiB
SCSS
// Copyright 2015-2021 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
$inter: Inter, 'Helvetica Neue', 'Source Sans Pro', 'Source Han Sans SC',
|
|
'Source Han Sans CN', 'Hiragino Sans GB', 'Hiragino Kaku Gothic',
|
|
'Microsoft Yahei UI', Helvetica, Arial, sans-serif;
|
|
|
|
// -- 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-05: #e9e9e9;
|
|
$color-gray-15: #dedede;
|
|
$color-gray-20: #c6c6c6;
|
|
$color-gray-25: #b9b9b9;
|
|
$color-gray-45: #848484;
|
|
$color-gray-60: #5e5e5e;
|
|
$color-gray-65: #4a4a4a;
|
|
$color-gray-75: #3b3b3b;
|
|
$color-gray-80: #2e2e2e;
|
|
$color-gray-90: #1b1b1b;
|
|
$color-gray-95: #121212;
|
|
$color-black: #000000;
|
|
|
|
$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-20: rgba($color-black, 0.2);
|
|
$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-ultramarine-dark: #1851b4;
|
|
$color-ultramarine-icon: #3a76f0;
|
|
$color-ultramarine-light: #6191f3;
|
|
$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;
|
|
|
|
// 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-crimson: #d00b2c;
|
|
$avatar-color-vermilion: #c72a0a;
|
|
$avatar-color-burlap: #866118;
|
|
$avatar-color-forest: #067919;
|
|
$avatar-color-wintergreen: #067953;
|
|
$avatar-color-teal: #077288;
|
|
$avatar-color-blue: #0a69c7;
|
|
$avatar-color-indigo: #5151f6;
|
|
$avatar-color-violet: #a20ced;
|
|
$avatar-color-plum: #c70a88;
|
|
$avatar-color-taupe: #cb0b6b;
|
|
$avatar-color-steel: $color-gray-60;
|
|
$avatar-color-ultramarine: #0d59f2;
|
|
|
|
// Maps for easy manipulation
|
|
|
|
$avatar-colors: (
|
|
blue: $avatar-color-blue,
|
|
burlap: $avatar-color-burlap,
|
|
crimson: $avatar-color-crimson,
|
|
forest: $avatar-color-forest,
|
|
indigo: $avatar-color-indigo,
|
|
plum: $avatar-color-plum,
|
|
steel: $avatar-color-steel,
|
|
taupe: $avatar-color-taupe,
|
|
teal: $avatar-color-teal,
|
|
ultramarine: $avatar-color-ultramarine,
|
|
vermilion: $avatar-color-vermilion,
|
|
violet: $avatar-color-violet,
|
|
wintergreen: $avatar-color-wintergreen,
|
|
);
|
|
|
|
$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 the safety number change warning banner
|
|
$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;
|
|
|
|
// -- A few layout variables used cross-file
|
|
|
|
$left-pane-width: 320px;
|
|
$header-height: 52px;
|
|
|
|
$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
|
|
|
$calling-background-color: $color-gray-95;
|