//
// PLASTIC
// Colors
// Site-wide color palette and helper classes
//

// ======================================================
@import '../slack_kit/slack_kit_colors';
// ======================================================

// Greyscale
@white: white;
@black: black;
@neutral_white: @white;
@off_white: @sk_off_white_hex;
@neutral_grey: @sk_off_white_hex; // Replaced #FBFBFA
@soft_grey: @sk_soft_gray_hex;
@indifferent_grey: @sk_black; // Replaced #555459
@trigger_grey: @sk_dark_grey_hex; // Replaced #67686e
@severe_grey: @sk_black; // Replaced #3D3C40
@steel_grey: @sk_dark_grey_hex; // Replaced #404B55
@flat_grey: @sk_black; // Replaced #434245
@charcoal_grey: @sk_black; // Replaced #2C2D30
@old_petunia_grey: @sk_light_grey_hex; // Replaced #A0A0A2
@ultralight_grey: @sk_soft_grey_hex; // Replaced #E0E0E0
@dull_grey: @sk_light_grey_hex; // Replaced #8B898F
@plastic_grey: @sk_dark_grey_hex; // Replaced #88919B
@subtle_silver: @sk_dark_grey_hex; // Replaced #9e9ea6
@cloud_silver: @sk_light_grey_hex; // Replaced #BABBBF
@cloud_white: @sk_soft_grey_hex; // Replaced #f2f2f5
@flexpane_grey: @sk_off_white_hex; // Replaced #F7F7F7
@warm_white: @sk_off_white_hex; // Replaced #fbfaf8
@gunmetal_grey: @sk_dark_grey_hex; // Replaced #565759
@dusty_springfield_grey: @sk_dark_grey_hex; // Replaced @gunmetal_grey
@greigh: @sk_dark_grey_hex;  // Replaced #717274

// Default link and fill blue colors. These are a11y safe
@blue_link: @sk_link_blue; // Links and hover state for icons
@blue_hover: @sk_hover_blue; // Regular hover state, slightly darker than @blue_link
@blue_fill: @sk_fill_blue; // Fill color for backgrounds and borders. Don't use for text
@blue_focus_outline: fade(@sk_blue, 80%); // Focus outline color for displaying visual cue of current focused element

// Transparents
@grey_alpha_24: rgba(205, 205, 205, 0.24);
@grey_alpha_16: rgba(205, 205, 205, 0.16);
@grey_alpha_8: rgba(205, 205, 205, 0.8);

// Spaces
@spaces_light_grey: @sk_off_white_hex; // Replaced #F5F6F7 with @sk_off_white_hex
@spaces_grey: @sk_soft_grey_hex; // Replaced #D8D8D8 with @sk_soft_grey_hex
@spaces_dark_grey: @sk_black; // Replaced #404040 with @sk_black
@spaces_black: @sk_black; // Replaced #232323 with @sk_black
@spaces_blue: @sk_fill_blue; // Replaced #35A5EE
@spaces_red: @sk_warning_red; // Replaced #EF5353 with @sk_warning_red
@spaces_faint_red: rgba(244, 82, 78, 0.1);
@spaces_green: @sk_seafoam_green; // Replaced #66C79E with @sk_seafoam_green
@spaces_selection_yellow: @sk_mention_yellow; // Replaced rgba(255,191,0,0.25) with @sk_mention_yellow

// Colors
@clear_blue: @sk_fill_blue; // Replaced #3aa3e3 with @sk_fill_blue
@solid_blue: @sk_link_blue; // Replaced #2780F8 with @sk_link_blue
@seafoam_green: @sk_seafoam_green; // Replaced #29A979
@slate_blue: @sk_dark_grey_hex; // Replaced #3C4B5B
@depth_blue: @sk_black; // Replaced #243343
@jean_blue: @sk_hover_blue; // Replaced #2E3E77
@thrills_purple: #7d60c5; // Deprecated: Do not use
@yolk_orange: @sk_colonel_mustard; // Replaced #EDB431 with @sk_colonel_mustard
@cool_purple: @sk_link_blue; // Replaced #4d6dc3
@slack_black: @sk_black; // Replaced @charcoal_grey
@slack_body: @sk_dark_grey_hex; // Replaced @sk_dark_grey_hex
@dark_purple: #71105f; // Deprecated: Do not use
@baby_cyan: @sk_pale_blue; // Replaced #F1F8FD
@tiffany_blue: #7fd1e0; // Deprecated: do not use

// 2016 colors
@miami_pink: #e32072; // Deprecated: Leaving in for Legacy Marketing Pages
@captain_blue: #4b6bc6; // Deprecated: Leaving in for Legacy Marketing Pages
@true_blue: #4d6dc3; // Deprecated: Leaving in for Legacy Marketing Pages
@seafoam_neue: #42c299; // Deprecated: Leaving in for Legacy Marketing Pages
@malibu_blue: #57b1e7; // Deprecated: Leaving in for Legacy Marketing Pages
@aussie_yellow: #f8b82c; // Deprecated: Leaving in for Legacy Marketing Pages
@dusty_shale: #7fd1e0; // Deprecated: Do not use
@deep_indigo: #17223a; // Deprecated: Leaving in for Legacy Marketing Pages

@mantis_green: #64d367; // Deprecated: Leaving in for Legacy Marketing Pages
@carrot_orange: @sk_pin_orange; // Replaced #F6B63F

@error_orange: @sk_pin_orange; // Replaced #FFA940
@error_orange_light: @sk_mention_yellow; // Replaced #FFF1E1

@highlight_yellow: @sk_mention_yellow; // Replaced #FFFCE0 with @sk_mention_yellow
@highlight_red: tint(@sk_warning_red, 80%); // @sk_warning_red at 20%: #F8D2DC
@star_yellow: @sk_star_yellow;
@mention_yellow: @sk_mention_yellow; // Replaced #FFF3B8 with @sk_star_yellow at 20%
@mention_yellow_background: tint(@sk_mention_yellow, 10%); // @sk_mention_yellow at 90%: #fff4bf
@mention_blue_background: tint(@sk_fill_blue, 92%); // @sk_fill_blue at 8%: #eef7fc
@mention_blue_background_hover: tint(@sk_fill_blue, 85%); // @sk_fill_blue at 15%: #dff0fa

@burnt_violet: @sk_aubergine; // Deprecated: Do not use. Updated to use Aubergine, Dec '18
@burnt_violet_black: #372c36; // Deprecated: Not used anywhere
@burnt_violet_dark: #3e313c; // Deprecated: Do not use
@burnt_violet_grey: #a09a9f; // Deprecated: Do not use
@burnt_violet_white: #ab9ba9; // Deprecated: Do not use
@muddy_lilac: #937e91; // Deprecated: Do not use

@ocean_teal: @sk_seafoam_green; // Replaced #4c9689
@ocean_teal_white: tint(@sk_seafoam_green, 60%); // @sk_seafoam_green at 40%: #A0DDCA

@kelly_green: @sk_seafoam_green; // Replaced 36a64f
@kelly_green_dark: @sk_seafoam_green; // Replaced
@leaf_green: #56b68b; // Deprecated: Leaving in for Legacy Marketing Pages

@havana_blue: @sk_link_blue; // Replaced #2a80b9
@sky_blue: @sk_fill_blue; // Replaced #439fe0
@pale_blue: tint(@sk_fill_blue, 90%); // Replaced #F0F7FB with @sk_fill_blue at 10%: #EAF5FC
@duck_egg_blue: tint(@sk_fill_blue, 90%); // Replaced #F0F7FB with @sk_fill_blue at 10%: #EAF5FC

@candy_red: @sk_warning_red; // Replaced #eb4d5c

@code_red: @sk_warning_red; // Replaced #c25 with @sk_warning_red

@moscow_red: @sk_warning_red; // Replaced #CB5234 with @sk_warning_red
@moscow_red_dark: @sk_warning_red; // Replaced #870000

@mustard_yellow: @sk_colonel_mustard;

@channel_page_blue: @sk_fill_blue; // Replaced #2D9CF5
@pin_orange: @sk_pin_orange; // Replaced #FF876D
@highlights_green: tint(@sk_seafoam_green, 92%); // @sk_seafoam_green at 8%: #ECF9F5
@highlights_flash_green: #ddf0e5; // Deprecated: do not use

@highlight_blue: @sk_pale_blue; // Replaced #edf7fd
@border_blue: tint(@sk_fill_blue, 75%); // @sk_fill_blue at 25%: #C5E8F6
@focus_border_gray: @sk_light_grey_hex; // Replaced #bbbdbf

// External Services
@dropbox_blue: @sk_link_blue; // Replaced #007ee5
@twitter_blue: @sk_fill_blue; // Replaced #55ACEE
@facebook_blue: @sk_hover_blue; // Replaced #3b5998
@gdrive_blue: @sk_fill_blue; // Replaced #4285f4
@gdrive_yellow: @sk_colonel_mustard; // Replaced #f4b400
@gdrive_green: @sk_seafoam_green; // Replaced #0f9d58
@gdrive_red: @sk_warning_red; // Replaced #db4437
@screenhero_blue: @sk_fill_blue; // Replaced #1A9CDB
@ms_word_blue: @sk_hover_blue; // Replaced #2C4098
@ms_excel_green: @sk_seafoam_green; // Replaced #377437
@ms_powerpoint_orange: @sk_pin_orange; // Replaced #E05A30
@adobe_ai_orange: @sk_colonel_mustard; // Replaced #F4993C
@adobe_ps_blue: @sk_fill_blue; // Replaced #56B6DE
@adobe_in_pink: tint(@sk_warning_red, 50%); // Replaced #EB81AB
@adobe_flash_red: @sk_warning_red; // Replaced #A72428
@apple_gray: @sk_light_grey_hex; // Replaced #9EA0A7
@android_green: @sk_seafoam_green; // Replaced #A4CA3A

// Forms: Moved from plastic_forms.source.less because they were hardcoded there. WE NEED TO DO SOMETHING ABOUT THESE
@forms_grey: @sk_light_grey_hex; // Replaced #C5C5C5
@forms_error_state_grey: tint(@sk_warning_red, 90%); // @sk_warning_red at 10%: #FEE8ED
@forms_placeholder_grey: @sk_light_grey_hex; // Replaced #aaa
 // Aliasing *_gray
@forms_gray: @forms_grey;
@forms_error_state_gray: @forms_error_state_grey;
@forms_placeholder_gray: @forms_placeholder_grey;