/*
 * 
 * 🚧 THIS FILE HAS BEEN DEPRECATED 🚧
 * 
 * We are migrating from Sass variables to CSS Custom Properties (aka CSS variables: https: //developer.mozilla.org/en-US/docs/Web/CSS/--*).
 * This file will be in maintenance mode until the migration is complete and will remove after that. 
 * 
 * Please use the color tokens found in _tokens.scss.
 * 
 * If there are any questions, reach out to us in #threads-open slack channel.
 * 
 */

//
// Threads Colors
//

// Black colors

$white: #ffffff;
$black100: #fafafa;
$black200: #f6f6f6;
$black300: #ededed;
$black400: #dcdcdc;
$black500: #c5c5c5;
$black600: #949494;
$black700: #767676;
$black800: #555555;
$black900: #383838;
$black1000: #111111;
$black: $black1000;
$transparent: rgba(0, 0, 0, 0);

$dark-gray: rgb(75, 75, 75);

// Colorful colors

$blue200: #d4f9ff;
$blue400: #b1eefc;
$blue600: #63daff;
$blue700: #37b0f4;
$blue800: #0a85ea;
$blue900: #0072cf;
$blue1000: #0061b3;

// this is for Note component borders - may become semantic name
$gold: #ba7d17;

$green200: #d0fce4;
$green400: #abffdb;
$green600: #5befbd;
$green800: #23d09c;
$green900: #1fa077;
$green1000: #1e8262;

$yellow200: #fefbb8;
$yellow400: #fbf1a0;
$yellow600: #fce76b;
$yellow800: #f2d211;
$yellow900: #e6ba23;
$yellow1000: #dba81b;

$red200: #ffd7dc;
$red400: #ffaab9;
$red600: #ff7885;
$red800: #f44e66;
$red900: #d83d57;
$red1000: #b72743;

$purple200: #e1e1ff;
$purple400: #c6befc;
$purple600: #9986f7;
$purple800: #7646ec;
$purple900: #5c2ec7;
$purple1000: #4726a3;

//
// Color aliases
//

$color-text: $black900;
$color-text-dark: $black1000;
$color-text-light: $black700;
$color-action: $blue900;
$color-action-hover: $blue900;
$color-action-active: $blue1000;
$color-caret-light: $black500;
$color-action-disabled: $black700;
$color-action-disabled-border: $black300;
$color-action-disabled-background: $black200;
$color-text-error: $red800;
$color-error-border: $red800;
$color-input-border: $black700;
// TODO: in the long run do we want the border to change color when the input is filled?
$color-input-border-filled: $color-input-border;
$color-box-shadow: rgba(17, 17, 17, 0.08); // Black1000 / #111111 as rgba
$color-border: $black300;
$color-hover-background: $black100;

$color-status-border-default: $black700;
$color-status-border-error: $red900;
$color-status-border-info: $blue900;
$color-status-border-success: $green900;
$color-status-border-warning: $gold;
$color-status-fill-default: $black300;
$color-status-fill-error: $red400;
$color-status-fill-info: $blue400;
$color-status-fill-success: $green400;
$color-status-fill-warning: $yellow400;

// Aliases for backwards compatibility only
$color-text-action: $color-action;
$color-text-action-active: $color-action-active;