191 lines
6.3 KiB
SCSS
191 lines
6.3 KiB
SCSS
$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-signal-blue: #2090ea;
|
|
|
|
$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-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-60: rgba($color-white, 0.6);
|
|
$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-60: rgba($color-black, 0.6);
|
|
|
|
$color-ultramarine-brand-light: #3a76f0;
|
|
$color-ultramarine-brand-dark: #1851b4;
|
|
$color-ultramarine-ui-light: #2c6bed;
|
|
$color-ultramarine-ui-dark: #6191f3;
|
|
$color-crimson: #cc163d;
|
|
$color-vermilion: #c73800;
|
|
$color-burlap: #746c53;
|
|
$color-forest: #3b7845;
|
|
$color-wintergreen: #1c8260;
|
|
$color-teal: #067589;
|
|
$color-blue: #336ba3;
|
|
$color-indigo: #5951c8;
|
|
$color-violet: #862caf;
|
|
$color-plum: #a23474;
|
|
$color-taupe: #895d66;
|
|
$color-steel: #6b6b78;
|
|
|
|
// Tints and shades
|
|
|
|
// Used for iOS theme and the safety number change warning banner
|
|
$color-ios-blue-tint: #a2d2f4;
|
|
|
|
// Used for scroll down button hover state when it has new messages
|
|
$color-ios-blue-shade: #1472bd;
|
|
|
|
$color-crimson-tint: #eda6ae;
|
|
$color-vermilion-tint: #eba78e;
|
|
$color-burlap-tint: #c4b997;
|
|
$color-forest-tint: #8fcc9a;
|
|
$color-wintergreen-tint: #9bcfbd;
|
|
$color-teal-tint: #a5cad5;
|
|
$color-blue-tint: #adc8e1;
|
|
$color-indigo-tint: #c2c1e7;
|
|
$color-violet-tint: #cdaddc;
|
|
$color-plum-tint: #dcb2ca;
|
|
$color-taupe-tint: #cfb5bb;
|
|
$color-steel-tint: #bebec6;
|
|
|
|
$color-crimson-shade: #8a0f29;
|
|
$color-vermilion-shade: #872600;
|
|
$color-burlap-shade: #58513c;
|
|
$color-forest-shade: #2b5934;
|
|
$color-wintergreen-shade: #36544a;
|
|
$color-teal-shade: #055968;
|
|
$color-blue-shade: #285480;
|
|
$color-indigo-shade: #4840a0;
|
|
$color-violet-shade: #6b248a;
|
|
$color-plum-shade: #881b5b;
|
|
$color-taupe-shade: #6a4e54;
|
|
$color-steel-shade: #5a5a63;
|
|
|
|
// Semantic conversation colors
|
|
|
|
$color-conversation-red: $color-crimson;
|
|
$color-conversation-deep_orange: $color-vermilion;
|
|
$color-conversation-brown: $color-burlap;
|
|
$color-conversation-pink: $color-plum;
|
|
$color-conversation-purple: $color-violet;
|
|
$color-conversation-indigo: $color-indigo;
|
|
$color-conversation-blue: $color-blue;
|
|
$color-conversation-teal: $color-teal;
|
|
$color-conversation-green: $color-forest;
|
|
$color-conversation-light_green: $color-wintergreen;
|
|
$color-conversation-blue_grey: $color-taupe;
|
|
$color-conversation-grey: $color-steel;
|
|
|
|
$color-conversation-red-tint: $color-crimson-tint;
|
|
$color-conversation-deep_orange-tint: $color-vermilion-tint;
|
|
$color-conversation-brown-tint: $color-burlap-tint;
|
|
$color-conversation-pink-tint: $color-plum-tint;
|
|
$color-conversation-purple-tint: $color-violet-tint;
|
|
$color-conversation-indigo-tint: $color-indigo-tint;
|
|
$color-conversation-blue-tint: $color-blue-tint;
|
|
$color-conversation-teal-tint: $color-teal-tint;
|
|
$color-conversation-green-tint: $color-forest-tint;
|
|
$color-conversation-light_green-tint: $color-wintergreen-tint;
|
|
$color-conversation-blue_grey-tint: $color-taupe-tint;
|
|
$color-conversation-grey-tint: $color-steel-tint;
|
|
|
|
$color-conversation-red-shade: $color-crimson-shade;
|
|
$color-conversation-deep_orange-shade: $color-vermilion-shade;
|
|
$color-conversation-brown-shade: $color-burlap-shade;
|
|
$color-conversation-pink-shade: $color-plum-shade;
|
|
$color-conversation-purple-shade: $color-violet-shade;
|
|
$color-conversation-indigo-shade: $color-indigo-shade;
|
|
$color-conversation-blue-shade: $color-blue-shade;
|
|
$color-conversation-teal-shade: $color-teal-shade;
|
|
$color-conversation-green-shade: $color-forest-shade;
|
|
$color-conversation-light_green-shade: $color-wintergreen-shade;
|
|
$color-conversation-blue_grey-shade: $color-taupe-shade;
|
|
$color-conversation-grey-shade: $color-steel-shade;
|
|
|
|
// Maps for easy manipulation
|
|
|
|
$conversation-colors: (
|
|
'red': $color-conversation-red,
|
|
'deep_orange': $color-conversation-deep_orange,
|
|
'brown': $color-conversation-brown,
|
|
'pink': $color-conversation-pink,
|
|
'purple': $color-conversation-purple,
|
|
'indigo': $color-conversation-indigo,
|
|
'blue': $color-conversation-blue,
|
|
'teal': $color-conversation-teal,
|
|
'green': $color-conversation-green,
|
|
'light_green': $color-conversation-light_green,
|
|
'blue_grey': $color-conversation-blue_grey,
|
|
);
|
|
$conversation-colors-tint: (
|
|
'red': $color-conversation-red-tint,
|
|
'deep_orange': $color-conversation-deep_orange-tint,
|
|
'brown': $color-conversation-brown-tint,
|
|
'pink': $color-conversation-pink-tint,
|
|
'purple': $color-conversation-purple-tint,
|
|
'indigo': $color-conversation-indigo-tint,
|
|
'blue': $color-conversation-blue-tint,
|
|
'teal': $color-conversation-teal-tint,
|
|
'green': $color-conversation-green-tint,
|
|
'light_green': $color-conversation-light_green-tint,
|
|
'blue_grey': $color-conversation-blue_grey-tint,
|
|
);
|
|
$conversation-colors-shade: (
|
|
'red': $color-conversation-red-shade,
|
|
'deep_orange': $color-conversation-deep_orange-shade,
|
|
'brown': $color-conversation-brown-shade,
|
|
'pink': $color-conversation-pink-shade,
|
|
'purple': $color-conversation-purple-shade,
|
|
'indigo': $color-conversation-indigo-shade,
|
|
'blue': $color-conversation-blue-shade,
|
|
'teal': $color-conversation-teal-shade,
|
|
'green': $color-conversation-green-shade,
|
|
'light_green': $color-conversation-light_green-shade,
|
|
'blue_grey': $color-conversation-blue_grey-shade,
|
|
);
|
|
|
|
// -- 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;
|
|
|
|
// Used in iOS quote composition and reference warnings
|
|
$color-signal-blue-alpha-25: rgba($color-signal-blue, 0.25);
|
|
$color-signal-blue-alpha-50: rgba($color-signal-blue, 0.5);
|
|
$color-signal-blue-tint-alpha-50: rgba($color-ios-blue-tint, 0.5);
|
|
|
|
// -- A few layout variables used cross-file
|
|
|
|
$left-pane-width: 320px;
|
|
$header-height: 48px;
|
|
|
|
$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|