Update colors, icons, and fonts
This commit is contained in:
Scott Nonnenberg
parent
28aed8247f
commit
c81c25bb85
225 changed files with 3080 additions and 4594 deletions
|
|
@ -1,59 +1,74 @@
|
|||
@font-face {
|
||||
font-family: 'Roboto-Light';
|
||||
src: url('../fonts/Roboto-Light.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
|
||||
font-family: 'Inter';
|
||||
src: url('../fonts/inter-v3.10/Inter-BoldItalic.woff2');
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
|
||||
font-family: 'Inter';
|
||||
src: url('../fonts/inter-v3.10/Inter-Bold.woff2');
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../fonts/inter-v3.10/Inter-SemiBoldItalic.woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../fonts/inter-v3.10/Inter-Italic.woff2');
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../fonts/inter-v3.10/Inter-SemiBold.woff2');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
$roboto: Roboto, 'Helvetica Neue', 'Source Sans Pro', 'Source Han Sans SC',
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../fonts/inter-v3.10/Inter-Regular.woff2');
|
||||
}
|
||||
|
||||
$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;
|
||||
$roboto-light: Roboto-Light, 'Helvetica Neue', 'Source Sans Pro Light',
|
||||
'Source Han Sans SC Light', 'Source Han Sans CN Light',
|
||||
'Hiragino Sans GB Light', 'Hiragino Kaku Gothic Light',
|
||||
'Microsoft Yahei UI Light', Helvetica, Arial, sans-serif;
|
||||
|
||||
// New colors
|
||||
// -- V3 Colors
|
||||
|
||||
$color-signal-blue: #2090ea;
|
||||
$color-core-green: #4caf50;
|
||||
$color-core-red: #f44336;
|
||||
$color-deep-red: #ff261f;
|
||||
|
||||
$color-signal-blue-025: rgba($color-signal-blue, 0.25);
|
||||
$color-signal-blue-050: rgba($color-signal-blue, 0.5);
|
||||
$color-accent-blue: #2090ea;
|
||||
$color-accent-green: #4caf50;
|
||||
$color-accent-red: #f44336;
|
||||
$color-accent-yellow: #ffd624;
|
||||
|
||||
$color-white: #ffffff;
|
||||
$color-gray-02: #f8f9f9;
|
||||
$color-gray-05: #eeefef;
|
||||
$color-gray-10: #e1e2e3;
|
||||
$color-gray-15: #d5d6d6;
|
||||
$color-gray-25: #bbbdbe;
|
||||
$color-gray-45: #898a8c;
|
||||
$color-gray-60: #6b6d70;
|
||||
$color-gray-75: #3d3e44;
|
||||
$color-gray-85: #23252a;
|
||||
$color-gray-90: #17191d;
|
||||
$color-gray-95: #0f1012;
|
||||
$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-crimson: #cc163d;
|
||||
$color-vermilion: #c73800;
|
||||
$color-burlap: #746c53;
|
||||
|
|
@ -67,6 +82,14 @@ $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;
|
||||
|
|
@ -93,39 +116,7 @@ $color-plum-shade: #881b5b;
|
|||
$color-taupe-shade: #6a4e54;
|
||||
$color-steel-shade: #5a5a63;
|
||||
|
||||
$color-white-015: rgba($color-white, 0.15);
|
||||
$color-white-02: rgba($color-white, 0.2);
|
||||
$color-white-04: rgba($color-white, 0.4);
|
||||
$color-white-05: rgba($color-white, 0.5);
|
||||
$color-white-06: rgba($color-white, 0.6);
|
||||
$color-white-07: rgba($color-white, 0.7);
|
||||
$color-white-075: rgba($color-white, 0.75);
|
||||
$color-white-08: rgba($color-white, 0.8);
|
||||
$color-white-085: rgba($color-white, 0.85);
|
||||
$color-light-02: #f9fafa;
|
||||
$color-light-10: #eeefef;
|
||||
$color-light-35: #a4a6a9;
|
||||
$color-light-45: #8b8e91;
|
||||
$color-light-60: #62656a;
|
||||
$color-light-90: #070c14;
|
||||
|
||||
$color-dark-05: #efefef;
|
||||
$color-dark-30: #a8a9aa;
|
||||
$color-dark-55: #88898c;
|
||||
$color-dark-60: #797a7c;
|
||||
$color-dark-70: #414347;
|
||||
$color-dark-85: #1a1c20;
|
||||
$color-black-008: rgba($color-black, 0.08);
|
||||
$color-black-005: rgba($color-black, 0.05);
|
||||
$color-black-008-no-tranparency: #ededed;
|
||||
$color-black-016-no-tranparency: #d9d9d9;
|
||||
$color-black-012: rgba($color-black, 0.12);
|
||||
$color-black-015: rgba($color-black, 0.15);
|
||||
$color-black-02: rgba($color-black, 0.2);
|
||||
$color-black-04: rgba($color-black, 0.4);
|
||||
$color-black-06: rgba($color-black, 0.6);
|
||||
|
||||
$color-signal-blue-mix: mix($color-signal-blue-025, $color-white-04);
|
||||
// Semantic conversation colors
|
||||
|
||||
$color-conversation-red: $color-crimson;
|
||||
$color-conversation-deep_orange: $color-vermilion;
|
||||
|
|
@ -166,25 +157,63 @@ $color-conversation-light_green-shade: $color-wintergreen-shade;
|
|||
$color-conversation-blue_grey-shade: $color-taupe-shade;
|
||||
$color-conversation-grey-shade: $color-steel-shade;
|
||||
|
||||
// Old colors
|
||||
// Maps for easy manipulation
|
||||
|
||||
$blue_l: #a2d2f4;
|
||||
$blue: #2090ea;
|
||||
$grey_l: #f3f3f3;
|
||||
$grey_l1: #bdbdbd;
|
||||
$grey_l1_5: #e6e6e6;
|
||||
$grey_l2: #d9d9d9; // ~ Equivalent to darken($grey_l, 10%), unreliably compiles
|
||||
$grey_l3: darken($grey_l, 20%);
|
||||
$grey_l4: darken($grey_l, 40%);
|
||||
$grey: #616161;
|
||||
$grey_d: #454545;
|
||||
$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
|
||||
);
|
||||
|
||||
// A few layout variables used cross-file
|
||||
// -- 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;
|
||||
$button-height: 24px;
|
||||
|
||||
$border-radius: 5px;
|
||||
|
||||
$font-size: 14px;
|
||||
$font-size-small: (13/14) + em;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue