/***** Dataiku Brand Color *****/

$teal-lighten-5:                    #E6F6F5;
$teal-lighten-4:                    #BFE8E6;
$teal-lighten-3:                    #95D8D7;
$teal-lighten-2:                    #69C8C6;
$teal-lighten-1:                    #49BDB8;
$teal-base:                         #2AB1AC;
$teal-darken-1:                     #25AAA5;
$teal-darken-2:                     #20A19B;
$teal-darken-3:                     #199792;
$teal-darken-4:                     #0F8781;

$teal-blue-base:                    #045067;

/***** Universe color *****/

// A "universe" in Dataiku DSS refers to the subparts of a project (Flow, Visual Analyses, Notebooks, Wiki, Dashboards...).

// for datasets and managed folders
$cyan-blue-base:                    #28A9DD;

// for analysis and models
$green-base:                        #29AF5D;

// for visual recipes
$yellow-base:                       #F9BD38;

// for code recipes and code elements
$orange-base:                       #F28C38;

// for dashboard
$red-base:                          #F44336;

// for monitoring, jobs and scenarios
$purple-base:                       #8541AA;

// for 'collaboration' stuff
$steel-blue-base:                   #427B98;
$steel-blue-lighten-1:              #4785A4;

// for plugins
$rust-base:                         #AA4141;

// for utilities & Keras
$gray-blue-base:                    #54707E;
$gray-blue-lighten-1:               #5E7E8D;

// for flow and discussions
$bright-gray-base:                  #434A54;
$bright-gray-lighten-1:             #4E5662;

// for streaming endpoints
$dark-teal-base:                    #3B7879;
// for project deployer
$marine-base:                       #3F51B5;
// bootstrap table background
$bootstrap-table-grey:              #F9F9F9;

// Sidekick
$sidekick-background-light:         $teal-lighten-5;
$sidekick-background-strong:        $teal-darken-4;
$sidekick-text:                     $teal-darken-4;
$sidekick-border:                   $teal-lighten-5;
$sidekick-link:                     $teal-base;
$sidekick-color:                    $teal-base;

/***** Primary action colors *****/

// blue is one of the safest, most recognisable action colors.
// In Dataiku, $digital-blue-base is the default primary action color.
// It comes with variants used for disabled and hover states.
$digital-blue-lighten-7:            #F4F7F8;
$digital-blue-lighten-6:            #F6FBFF;
$digital-blue-lighten-5:            #E7F3FF;
$digital-blue-lighten-4:            #C4E0FE;
$digital-blue-lighten-3:            #9DCCFE;
$digital-blue-lighten-2:            #76B8FD;
$digital-blue-lighten-1:            #58A8FC;
$digital-blue-base:                 #3B99FC;
$digital-blue-darken-1:             #3591FC;
$digital-blue-darken-2:             #2D86FB;
$digital-blue-darken-3:             #267CFB;
$digital-blue-darken-4:             #196BFA;

// used for "run"/"train" buttons
$digital-green-lighten-5:           #F0F8E8;
$digital-green-lighten-4:           #D9ECC6;
$digital-green-lighten-3:           #C0E0A0;
$digital-green-lighten-2:           #A7D47A;
$digital-green-lighten-1:           #94CA5E;
$digital-green-base:                #81C141;
$digital-green-darken-1:            #79BB3B;
$digital-green-darken-2:            #6EB332;
$digital-green-darken-3:            #64AB2A;
$digital-green-darken-4:            #519E1C;

/***** Greyscale *****/
$white-base:                        #FFFFFF;
$grey-lighten-8:                    #F2F2F2;
$grey-lighten-7:                    #DDDDDD;
$grey-lighten-6:                    #CCCCCC;
$grey-lighten-5:                    #BBBBBB;
$grey-lighten-4:                    #999999;
$grey-lighten-3:                    #666666;
$grey-lighten-2:                    #444444;
$grey-lighten-1:                    #333333;
$grey-base:                         #222222;

/***** Status colors *****/

// to indicate validity or success:
$success-green-lighten-5:           #E8F5E9;
$success-green-lighten-4:           #D7F0D6;
$success-green-lighten-3:           #A5D6A7;
$success-green-lighten-2:           #81C784;
$success-green-lighten-1:           #66BB6A;
$success-green-base:                #4CAF50;
$success-green-darken-1:            #43A047;
$success-green-darken-2:            #388E3C;
$success-green-darken-3:            #2E7D32;
$success-green-darken-4:            #0B590B;

// to indicate warning or potential danger:
$warning-orange-lighten-5:          #FDF1E7;
$warning-orange-lighten-4:          #FDE5CA;
$warning-orange-lighten-3:          #F9C69B;
$warning-orange-lighten-2:          #F6AF73;
$warning-orange-lighten-1:          #F49D55;
$warning-orange-base:               #F28C37;
$warning-orange-darken-1:           #F08431;
$warning-orange-darken-2:           #EE792A;
$warning-orange-darken-3:           #EC6F23;
$warning-orange-darken-4:           #C05B0A;

// to indicate danger or error:
$error-red-lighten-5:               #F9E3E5;
$error-red-lighten-4:               #F0B8BF;
$error-red-lighten-3:               #E78994;
$error-red-lighten-2:               #DD5969;
$error-red-lighten-1:               #D53648;
$error-red-base:                    #CE1228;
$error-red-darken-1:                #C91024;
$error-red-darken-2:                #C20D1E;
$error-red-darken-3:                #BC0A18;
$error-red-darken-4:                #B0050F;

// to give advice to users:
$info-blue-lighten-5:               #D9E6ED;
$info-blue-lighten-4:               #C1D4DD;
$info-blue-lighten-3:               #98B8C7;
$info-blue-lighten-2:               #6F9BB1;
$info-blue-lighten-1:               #5085A0;
$info-blue-base:                    #31708F;
$info-blue-darken-1:                #2C6887;
$info-blue-darken-2:                #255D7C;
$info-blue-darken-3:                #1F5372;
$info-blue-darken-4:                #144C71;

// for star icons in DSS and Best model.
$star-yellow-base:                  #FABD38;

/******* Chart color *******/
$categorical-yellow-base:           #FFC241;

$measure-green-lighten-1:           #CCE3CB;
$measure-green-base:                #4F934F;

$numeric-blue-lighten-1:            #BDD8ED;
$numeric-blue-base:                 #3075AE;

/******* Colors per object types *******/
$project-home-color:                $teal-base;
$flow-color:                        $yellow-base;
$visual-recipe-color:               $flow-color;
$dataset-color:                     $cyan-blue-base;
$flow-in-nav-color:                 $dataset-color;
$analysis-color:                    $green-base;
$notebook-color:                    $orange-base;
$job-color:                         $purple-base;
$dashboard-color:                   $red-base;
$wiki-color:                        $steel-blue-base;
$more-color:                        $gray-blue-base;
$bundle-color:                      $gray-blue-base;
$saved-model-color:                 $green-base;
$model-evaluation-store-color:      $green-base;
$labeling-task-color:               $yellow-base;
$model-comparison-color:            $green-base;
$experiment-tracking-color:         $green-base;
$code-recipe-color:                 $orange-base;
$ml-recipe-color:                   $green-base;
$custom-recipe-color:               $rust-base;
$chart-color:                       $numeric-blue-base;
$streaming-color:                   $dark-teal-base;
$streaming-endpoint-color:          $dark-teal-base;
$api-deployer-color:                $teal-base;
$project-deployer-color:            $marine-base;

/******* Custom colors for plugin recipes *******/
$custom-recipe-color-red:           #E13D3C;
$custom-recipe-color-pink:          #E91E63;
$custom-recipe-color-purple:        #8C2DA7;
$custom-recipe-color-blue:          #31439C;
$custom-recipe-color-green:         #0F786B;
$custom-recipe-color-sky:           #00BCD4;
$custom-recipe-color-yellow:        #CDDC39;
$custom-recipe-color-orange:        #E44B27;
$custom-recipe-color-brown:         #795548;
$custom-recipe-color-gray:          #465A64;

// ML CHARTS
$custom-ml-chart-orange:            #FF7E0E;
$custom-ml-chart-blue:              #1F77B4;

/******* Variables helpers *******/

// States
$success-background-light:          $success-green-lighten-4;
$success-background-strong:         $success-green-base;
$success-text:                      $success-green-base;
$success-link:                      $success-green-base;
$success-border:                    $success-green-lighten-5;

$error-background-light:            $error-red-lighten-5;
$error-background-strong:           $error-red-base;
$error-text:                        $error-red-base;
$error-link:                        $error-red-base;
$error-border:                      $error-red-lighten-5;

$warning-background-light:          $warning-orange-lighten-4;
$warning-background-strong:         $warning-orange-base;
$warning-text:                      $warning-orange-base;
$warning-link:                      $warning-orange-base;
$warning-border:                    $warning-orange-lighten-5;

$info-background-light:             $info-blue-lighten-5;
$info-background-strong:            $info-blue-base;
$info-text:                         $info-blue-base;
$info-link:                         $info-blue-base;
$info-border:                       $info-blue-lighten-5;

$debug-text:                        $grey-lighten-4;

$blue-selected-color:               $digital-blue-base;
$selected-item-color:               $digital-blue-lighten-5;
$selected-hover-color:              $grey-lighten-8;
$selected-focused-item-color:       $digital-blue-lighten-5;

$focused-item-color:                $grey-lighten-8;

$hovered-box-in-list-color:         $grey-lighten-8;

$line-hover:                        $grey-lighten-8;
$line-selected:                     $digital-blue-lighten-5;

// Borders
$border-color:                      $grey-lighten-6;
$light-border-color:                $grey-lighten-7;
$border-focus-color:                $digital-blue-base;

// Typography
$text-important:                    $grey-base;
$text-weak:                         $grey-lighten-3;
$text-prompt:                       $grey-lighten-5;
$text-active:                       $info-blue-base;
$text-disabled:                     $grey-lighten-6;

// Links
$link-normal:                       $digital-blue-darken-2;
$link-hover:                        $digital-blue-darken-3;
$link-visited:                      $digital-blue-darken-4;

$object-link:                       $grey-base;

$clickable-label:                   $grey-lighten-3;
$clickable-label-hover:             $grey-lighten-1;

// Backgrounds
$grey-background:                   $grey-lighten-8;
$white-background:                  $white-base;

/****** Components *******/

/* Dropdowns */
$dropdown-background-color:         $grey-lighten-8;
$dropdown-selected-color:           $digital-blue-base;

/* Buttons */

// Contained
$btn-contained-text:                            $white-background;
$btn-contained-border:                          transparent;

$btn-contained-primary-background:              $digital-blue-base;
$btn-contained-primary-background-hover:        $digital-blue-darken-3;
$btn-contained-primary-background-focus:        $digital-blue-darken-3;
$btn-contained-primary-background-active:       $digital-blue-darken-4;
$btn-contained-primary-text:                    $btn-contained-text;
$btn-contained-primary-border:                  $btn-contained-border;
$btn-contained-primary-background-disabled:     $digital-blue-lighten-4;
$btn-contained-primary-text-disabled:           $btn-contained-text;
$btn-contained-primary-border-disabled:         $btn-contained-border;

$btn-contained-secondary-background:            $white-background;
$btn-contained-secondary-background-hover:      $grey-lighten-7;
$btn-contained-secondary-background-focus:      $grey-lighten-7;
$btn-contained-secondary-background-active:     $grey-lighten-6;
$btn-contained-secondary-text:                  $grey-lighten-1;
$btn-contained-secondary-border:                $btn-contained-border;
$btn-contained-secondary-background-disabled:   $grey-lighten-7;
$btn-contained-secondary-text-disabled:         $grey-lighten-5;
$btn-contained-secondary-border-disabled:       $btn-contained-border;

$btn-contained-success-background:              $digital-green-base;
$btn-contained-success-background-hover:        $digital-green-darken-2;
$btn-contained-success-background-focus:        $digital-green-darken-2;
$btn-contained-success-background-active:       $success-green-darken-1;
$btn-contained-success-text:                    $btn-contained-text;
$btn-contained-success-border:                  $btn-contained-border;
$btn-contained-success-background-disabled:     $digital-green-lighten-4;
$btn-contained-success-text-disabled:           $btn-contained-text;
$btn-contained-success-border-disabled:         $btn-contained-border;

$btn-contained-danger-background:               $error-red-base;
$btn-contained-danger-background-hover:         $error-red-darken-2;
$btn-contained-danger-background-focus:         $error-red-darken-2;
$btn-contained-danger-background-active:        $error-red-darken-4;
$btn-contained-danger-text:                     $btn-contained-text;
$btn-contained-danger-border:                   $btn-contained-border;
$btn-contained-danger-background-disabled:      $error-red-lighten-4;
$btn-contained-danger-text-disabled:            $btn-contained-text;
$btn-contained-danger-border-disabled:          $btn-contained-border;

// Outline
$btn-outline-background:                        $white-background;

$btn-outline-primary-background:                $btn-outline-background;
$btn-outline-primary-background-hover:          $digital-blue-lighten-5;
$btn-outline-primary-background-focus:          $digital-blue-lighten-5;
$btn-outline-primary-background-active:         $digital-blue-lighten-4;
$btn-outline-primary-text:                      $digital-blue-base;
$btn-outline-primary-border:                    $digital-blue-base;
$btn-outline-primary-background-disabled:       transparent;
$btn-outline-primary-text-disabled:             $digital-blue-lighten-4;
$btn-outline-primary-border-disabled:           $digital-blue-lighten-4;

$btn-outline-secondary-background:              $btn-outline-background;
$btn-outline-secondary-background-hover:        $grey-lighten-7;
$btn-outline-secondary-background-focus:        $grey-lighten-7;
$btn-outline-secondary-background-active:       $grey-lighten-6;
$btn-outline-secondary-text:                    $grey-lighten-1;
$btn-outline-secondary-border:                  $grey-lighten-6;
$btn-outline-secondary-background-disabled:     transparent;
$btn-outline-secondary-text-disabled:           $grey-lighten-6;
$btn-outline-secondary-border-disabled:         $grey-lighten-6;

$btn-outline-success-background:                $btn-outline-background;
$btn-outline-success-background-hover:          $success-green-lighten-5;
$btn-outline-success-background-focus:          $success-green-lighten-5;
$btn-outline-success-background-active:         $success-green-lighten-4;
$btn-outline-success-text:                      $success-green-base;
$btn-outline-success-border:                    $success-green-base;
$btn-outline-success-background-disabled:       transparent;
$btn-outline-success-text-disabled:             $success-green-lighten-4;
$btn-outline-success-border-disabled:           $success-green-lighten-4;

$btn-outline-danger-background:                 $btn-outline-background;
$btn-outline-danger-background-hover:           $error-red-lighten-5;
$btn-outline-danger-background-focus:           $error-red-lighten-5;
$btn-outline-danger-background-active:          $error-red-lighten-4;
$btn-outline-danger-text:                       $error-red-lighten-2;
$btn-outline-danger-border:                     $error-red-lighten-2;
$btn-outline-danger-background-disabled:        transparent;
$btn-outline-danger-text-disabled:              $error-red-lighten-4;
$btn-outline-danger-border-disabled:            $error-red-lighten-4;

$btn-text-background:                           transparent;
$btn-text-border:                               transparent;

$btn-text-primary-background:                   $btn-text-background;
$btn-text-primary-background-hover:             $digital-blue-lighten-5;
$btn-text-primary-background-focus:             $digital-blue-lighten-5;
$btn-text-primary-background-active:            $digital-blue-lighten-4;
$btn-text-primary-text:                         $digital-blue-base;
$btn-text-primary-border:                       $btn-text-border;
$btn-text-primary-background-disabled:          $btn-text-background;
$btn-text-primary-text-disabled:                $digital-blue-lighten-4;
$btn-text-primary-border-disabled:              $btn-text-border;

$btn-text-secondary-background:                 $btn-text-background;
$btn-text-secondary-background-hover:           $grey-lighten-7;
$btn-text-secondary-background-focus:           $grey-lighten-7;
$btn-text-secondary-background-active:          $grey-lighten-6;
$btn-text-secondary-text:                       $grey-lighten-1;
$btn-text-secondary-border:                     $btn-text-border;
$btn-text-secondary-background-disabled:        $btn-text-background;
$btn-text-secondary-text-disabled:              $grey-lighten-6;
$btn-text-secondary-border-disabled:            $btn-text-border;

$btn-text-success-background:                   $btn-text-background;
$btn-text-success-background-hover:             $success-green-lighten-5;
$btn-text-success-background-focus:             $success-green-lighten-5;
$btn-text-success-background-active:            $success-green-lighten-4;
$btn-text-success-text:                         $success-green-base;
$btn-text-success-border:                       $btn-text-border;
$btn-text-success-background-disabled:          $btn-text-background;
$btn-text-success-text-disabled:                $success-green-lighten-4;
$btn-text-success-border-disabled:              $btn-text-border;

$btn-text-danger-background:                    $btn-text-background;
$btn-text-danger-background-hover:              $error-red-lighten-5;
$btn-text-danger-background-focus:              $error-red-lighten-5;
$btn-text-danger-background-active:             $error-red-lighten-4;
$btn-text-danger-text:                          $error-red-lighten-2;
$btn-text-danger-border:                        $btn-text-border;
$btn-text-danger-background-disabled:           $btn-text-background;
$btn-text-danger-text-disabled:                 $error-red-lighten-4;
$btn-text-danger-border-disabled:               $btn-text-border;

$btn-contained-background-disabled:             $grey-lighten-7;
$btn-contained-text-disabled:                   $grey-lighten-4;
$btn-contained-border-disabled:                 transparent;

$btn-outline-background-disabled:               $grey-lighten-7;
$btn-outline-text-disabled:                     $grey-lighten-4;
$btn-outline-border-disabled:                   $border-color;

$btn-text-background-disabled:                  transparent;
$btn-text-text-disabled:                        $grey-lighten-4;
$btn-text-border-disabled:                      transparent;

// Misc (older button styles)
$btn-primary-background:            $digital-blue-base;
$btn-primary-background-hover:      $digital-blue-lighten-1;
$btn-primary-background-active:     $digital-blue-darken-1;
$btn-primary-background-disabled:   $digital-blue-darken-4;
$btn-primary-text:                  $white-base;
$btn-primary-text-disabled:         $digital-blue-lighten-5;
$btn-primary-border:                $digital-blue-base;
$btn-primary-border-disabled:       $digital-blue-darken-4;

$btn-success-background:            $digital-green-base;
$btn-success-background-hover:      $digital-green-lighten-1;
$btn-success-background-active:     $digital-green-darken-1;
$btn-success-background-disabled:   $digital-green-darken-4;
$btn-success-text:                  $white-base;
$btn-success-text-disabled:         $digital-green-lighten-5;
$btn-success-border:                $digital-green-base;
$btn-success-border-disabled:       $digital-green-darken-4;

$btn-danger-background:             $error-red-base;
$btn-danger-background-hover:       $error-red-lighten-1;
$btn-danger-background-active:      $error-red-darken-1;
$btn-danger-background-disabled:    $error-red-darken-4;
$btn-danger-text:                   $white-base;
$btn-danger-text-disabled:          $error-red-lighten-5;
$btn-danger-border:                 $error-red-base;
$btn-danger-border-disabled:        $error-red-darken-4;

$btn-warning-background:            $warning-orange-base;
$btn-warning-background-hover:      $warning-orange-lighten-1;
$btn-warning-background-active:     $warning-orange-darken-1;
$btn-warning-background-disabled:   $warning-orange-darken-4;
$btn-warning-text:                  $white-base;
$btn-warning-text-disabled:         $warning-orange-lighten-5;
$btn-warning-border:                $warning-orange-base;
$btn-warning-border-disabled:       $warning-orange-darken-4;

$btn-icon-text:                     $grey-lighten-5;
$btn-icon-text-hover:               $grey-lighten-3;

/* Alerts */
$alert-info-text:                   $info-blue-darken-4;
$alert-info-background:             $info-background-light;

$alert-success-text:                $success-green-darken-4;
$alert-success-background:          $success-background-light;

$alert-error-text:                  $error-red-base;
$alert-error-background:            $error-background-light;

$alert-warning-text:                $warning-orange-darken-4;
$alert-warning-background:          $warning-background-light;
