/***** 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;
