framework/ember/app/styles/bootstrap/variables.less

// ---------------------------------
// HELPERS

@fl-primary-hue: hue(@fl-primary-color);
@fl-primary-sat: saturation(@fl-primary-color);

@fl-secondary-hue: hue(@fl-secondary-color);
@fl-secondary-sat: saturation(@fl-secondary-color);

// ---------------------------------
// BODY

.define-body-variables(@fl-dark-mode);
.define-body-variables(false) {
  @fl-body-primary-color:             @fl-primary-color;
  @fl-body-secondary-color:           hsl(@fl-secondary-hue, min(50%, @fl-secondary-sat), 95%);

  @fl-body-bg:                        #fff;
  @fl-body-color:                     #444;
  @fl-body-muted-color:               hsl(@fl-secondary-hue, min(25%, @fl-secondary-sat), 65%);
  @fl-body-muted-more-color:          #bbb;
  @fl-shadow-color:                   rgba(0, 0, 0, 0.25);
}
.define-body-variables(true) {
  @fl-body-primary-color:             mix(@fl-primary-color, #000);
  @fl-body-secondary-color:           hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 13%);

  @fl-body-bg:                        hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 10%);
  @fl-body-color:                     #ccc;
  @fl-body-muted-color:               hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 35%);
  @fl-body-muted-more-color:          hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 25%);
  @fl-shadow-color:                   rgba(0, 0, 0, 0.5);
}
@fl-body-heading-color:             @fl-body-color;
@fl-body-control-bg:                @fl-body-secondary-color;
@fl-body-control-color:             @fl-body-muted-color;

// ---------------------------------
// HEADER

.define-hdr-variables(@fl-colored-hdr);
.define-hdr-variables(false) {
  @fl-hdr-bg:                   @fl-body-bg;
  @fl-hdr-color:                contrast(@fl-hdr-bg, #fff, @fl-body-primary-color);
  @fl-hdr-muted-color:          @fl-body-muted-color;
  @fl-hdr-control-bg:           @fl-body-control-bg;
  @fl-hdr-control-color:        @fl-body-control-color;

  @fl-body-hero-bg:             @fl-body-primary-color;
  @fl-body-hero-color:          #fff;
}
.define-hdr-variables(true) {
  @fl-hdr-bg:                   @fl-body-primary-color;
  @fl-hdr-color:                #fff;
  @fl-hdr-muted-color:          fade(#fff, 50%);
  @fl-hdr-control-bg:           fade(#000, 10%);
  @fl-hdr-control-color:        #fff;

  @fl-body-hero-bg:             @fl-body-control-bg;
  @fl-body-hero-color:          @fl-body-control-color;
}

// ---------------------------------
// BOOTSTRAP

@brand-primary:         @fl-body-primary-color;

@body-bg:               @fl-body-bg;
@text-color:            @fl-body-color;
@font-size-base:        13px;

@font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

@padding-base-vertical:     8px;
@padding-base-horizontal:   13px;

@btn-default-bg:  @fl-body-control-bg;
@btn-default-color:  @fl-body-control-color;

@input-bg: @fl-body-control-bg;
@input-border: @fl-body-control-bg;
@input-border-focus: @fl-body-control-bg;
@input-color: @fl-body-control-color;
@input-color-placeholder: @fl-body-control-color;

@zindex-composer: @zindex-navbar-fixed + 4;
@zindex-pane: @zindex-navbar-fixed + 5;
@zindex-alerts: @zindex-modal + 10;

@link-hover-color: @link-color;